@saasquatch/mint-components 1.5.0-13 → 1.5.0-17

package/dist/esm/sqm-brand_39.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h as h$1, c as Host, d as getAssetPath } from './index-17b4da69.js';
 import { m as h, e as useEffect, j as useState, f as useRef, n as d$2, y as y$1, b as browser, u as useReducer, c as createCommonjsModule, a as commonjsGlobal, k as useMemo } from './extends-3a3f9fe2.js';
-import { i as intl, a as insertCSS } from './global-e0e25c22.js';
+import { i as intl, a as insertCSS } from './global-1c68ff6e.js';
 import { u as useCallback } from './use-callback-b38a1523.js';
 import { d as dist, n as ne$1, c as cn, D as De, j as j$1, a as sn, b as mn, H as He, $ as $e, S as S$1, V as Ve, M as M$1, p as pn, v as vn, x as x$1, e as D$1, Y, z as ze, A as A$1 } from './index.module-eb50a8d2.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
@@ -8,28 +8,28 @@ import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
 import { g as getProps, a as getMissingProps } from './utils-454405f5.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { E as ErrorStyles, H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, g as gap } from './mixins-10353a39.js';
-import { P as PortalContainerView, a as PortalProfileView } from './sqm-portal-profile-view-ba06e776.js';
+import { P as PortalContainerView, a as PortalProfileView } from './sqm-portal-profile-view-864dd5b5.js';
 import { P as PortalSectionView } from './sqm-portal-section-view-f0876545.js';
 import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
-import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-cd1e8962.js';
+import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-95e6fb4f.js';
 import { u as useRerenderListener, a as useRequestRerender } from './re-render-6d5b856e.js';
 import { S as ShareLinkView } from './sqm-share-link-view-9282b8e8.js';
-import { p as pathToRegexp, B as BigStatView, u as useBigStat, a as useDemoBigStat } from './useDemoBigStat-a0dd50ab.js';
+import { p as pathToRegexp, B as BigStatView, u as useBigStat, a as useDemoBigStat } from './useDemoBigStat-acd4b73f.js';
 import { L as LeaderboardView, u as useLeaderboard, S as ShadowViewAddon } from './ShadowViewAddon-558fabb7.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-2242502c.js';
 import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-2d8c368c.js';
 import { S as StatContainerView } from './sqm-stat-container-view-4133feb6.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-e3a6a716.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-2af31979.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-71eb8adb.js';
 import { P as PortalResetPasswordView$1 } from './sqm-portal-reset-password-view-a4e50da2.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-6f18bac2.js';
 import { A as AssetCardView } from './sqm-asset-card-view-6f360937.js';
-import { P as PoweredByImg$1, a as PortalFooterView } from './sqm-portal-footer-view-60cd9ae5.js';
+import { P as PoweredByImg$1, a as PortalFooterView } from './sqm-portal-footer-view-5cb00c4e.js';
 import { H as HeroView } from './sqm-hero-view-bfd8abd1.js';
 import { N as NameFieldsView } from './sqm-name-fields-view-4162fb7b.js';
-import { P as ProgramExplainerView } from './sqm-program-explainer-view-ab291eb4.js';
-import { P as ProgramExplainerStepView } from './sqm-program-explainer-step-view-7c0d5f71.js';
-import { C as CardFeedView } from './sqm-card-feed-view-81f93bc7.js';
+import { P as ProgramExplainerView } from './sqm-program-explainer-view-f726f5ec.js';
+import { P as ProgramExplainerStepView } from './sqm-program-explainer-step-view-e2b39225.js';
+import { C as CardFeedView } from './sqm-card-feed-view-cdd1f818.js';
 
 /**
  * Build a font CSS URL using the Google Fonts CSS API
@@ -1376,6 +1376,10 @@ const PortalContainer = class {
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      */
     this.gap = "xxx-large";
+    /**
+     * @uiName Maximum width
+     */
+    this.maxWidth = "100%";
     h(this);
   }
   disconnectedCallback() { }
@@ -1523,7 +1527,7 @@ function PortalLoginView(props) {
         content.secondaryButton))));
 }
 
-function usePortalLogin({ nextPage }) {
+function usePortalLogin(props) {
   var _a, _b, _c, _d;
   const [request, { loading, errors, data }] = $e();
   const [error, setError] = useState("");
@@ -1543,7 +1547,7 @@ function usePortalLogin({ nextPage }) {
     if ((_a = data === null || data === void 0 ? void 0 : data.authenticateManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
       urlParams.delete("nextPage");
       mn.push({
-        pathname: nextPageOverride || nextPage,
+        pathname: nextPageOverride || props.nextPage,
         search: urlParams.toString() && "?" + urlParams.toString(),
       });
     }
@@ -1559,6 +1563,8 @@ function usePortalLogin({ nextPage }) {
     states: {
       loading,
       error: errorMessage,
+      registerPath: props.registerPath,
+      forgotPasswordPath: props.forgotPasswordPath
     },
     callbacks: {
       submit,
@@ -1598,6 +1604,14 @@ const PortalLogin = class {
      * @uiName Heading label
      */
     this.pageLabel = "Sign in to your account";
+    /**
+     * @uiName Register button redirection path
+     */
+    this.registerPath = "/register";
+    /**
+     * @uiName Forgot password button redirect path
+     */
+    this.forgotPasswordPath = "/forgotPassword";
     h(this);
   }
   disconnectedCallback() { }
@@ -1606,8 +1620,8 @@ const PortalLogin = class {
       ? useLoginDemo(this)
       : usePortalLogin(this);
     const content = {
-      forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { onClick: () => mn.push("/forgotPassword") }, this.forgotPasswordLabel))),
-      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => mn.push("/register") }, this.registerLabel))),
+      forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { onClick: () => mn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => mn.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -1618,7 +1632,12 @@ const PortalLogin = class {
 };
 function useLoginDemo(props) {
   return cjs({
-    states: { error: "", loading: false },
+    states: {
+      error: "",
+      loading: false,
+      forgotPasswordPath: "/forgotPassword",
+      registerPath: "/register",
+    },
     callbacks: {
       submit: async (_event) => {
         console.log("submit");
@@ -5620,10 +5639,12 @@ function usePortalRegister(props) {
     delete formData.password;
     delete formData.confirmPassword;
     formData = { ...formData };
+    const redirectPath = props.redirectPath;
     const variables = {
       email,
       password,
       formData,
+      redirectPath,
     };
     try {
       await request(variables);
@@ -5673,6 +5694,7 @@ function usePortalRegister(props) {
       validationState,
       confirmPassword: props.confirmPassword,
       hideInputs: props.hideInputs,
+      loginPath: props.loginPath,
     },
     callbacks: {
       submit,
@@ -5692,6 +5714,12 @@ const PortalRegister = class {
      * @uiName Page navigated to after registration
      */
     this.nextPage = "/";
+    /**
+     * The page that users are redirected to from the verification email.
+     *
+     * @uiName Email redirection base path
+     */
+    this.redirectPath = "/verifyEmail";
     /**
      * @uiName Label for email field
      */
@@ -5728,6 +5756,10 @@ const PortalRegister = class {
      * @uiName Heading label
      */
     this.pageLabel = "Register";
+    /**
+     * @uiName Sign in button redirection path
+     */
+    this.loginPath = "/login";
     h(this);
   }
   disconnectedCallback() { }
@@ -5737,7 +5769,7 @@ const PortalRegister = class {
       : usePortalRegister(this);
     const content = {
       formData: h$1("slot", { name: "formData" }),
-      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => mn.push("/login") }, this.loginLabel))),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => mn.push(states.loginPath) }, this.loginLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -5755,6 +5787,7 @@ function useRegisterDemo(props) {
       confirmPassword: true,
       hideInputs: props.hideInputs || false,
       customPasswordField: false,
+      loginPath: "/login",
     },
     callbacks: {
       submit: async (_event) => {
@@ -6389,8 +6422,11 @@ function useReferraltableDemo(props) {
     elements: {
       emptyElement: h$1(EmptySlot, null),
       loadingElement: h$1(LoadingSlot, null),
-      // FIXME: Even in demo mode, this should use real column names!
-      columns: [h$1("div", null, "Example"), h$1("div", null, "Example"), h$1("div", null, "Example")],
+      columns: [
+        h$1("div", null, "User"),
+        h$1("div", null, "Referral Status"),
+        h$1("div", null, "Rewards"),
+      ],
       rows: [],
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
@@ -15172,41 +15208,6 @@ function RewardExchangeView(props) {
       padding: "var(--sl-spacing-medium)",
       position: "relative",
     },
-    CardContainer: {
-      "&:active": {
-      //boxShadow: "0 3px 10px #87ceeb6e!important",
-      },
-    },
-    Base: {
-      display: "flex",
-      cursor: "pointer",
-      textAlign: "center",
-      height: "120px",
-      "&::part(base)": {
-        boxShadow: "none",
-        width: "100%",
-        display: "flex",
-        margin: "0 auto",
-      },
-      "&::part(body)": {
-        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: {
       objectFit: "contain",
       maxWidth: "100%",
@@ -15214,16 +15215,6 @@ function RewardExchangeView(props) {
       display: "flex",
       margin: "0 auto",
     },
-    PreviewImage: {
-      objectFit: "contain",
-      width: "120px",
-      height: "118px",
-      flex: 0.33,
-    },
-    InputBox: {
-      width: "100%",
-      marginBottom: "20px",
-    },
     Select: {
       "&::part(label)": {
         color: "var(--sl-color-primary-500)",
@@ -15276,42 +15267,39 @@ function RewardExchangeView(props) {
         margin: "-9px",
       },
     },
-    Square: {
-      width: "120px",
-      height: "118px",
-      borderRadius: "3px 0 0 3px",
+    Image: {
+      padding: "var(--sl-spacing-small)",
+      minWidth: "96px",
+      maxWidth: "96px",
       "& .image": {
         width: "100%",
         height: "100%",
         objectFit: "contain",
-        borderRadius: "inherit",
+        borderRadius: "4px",
       },
       "& .image.subdued": {
         filter: "brightness(0.95)",
         opacity: "0.5",
       },
     },
-    Image: {
-      padding: "8px",
-      minWidth: "96px",
-      maxWidth: "96px",
+    Square: {
+      width: "120px",
+      height: "118px",
+      borderRadius: "3px 0 0 3px",
       "& .image": {
         width: "100%",
         height: "100%",
         objectFit: "contain",
-        borderRadius: "4px",
-      },
-      "& .image.subdued": {
-        filter: "brightness(0.95)",
-        opacity: "0.5",
+        borderRadius: "inherit",
       },
     },
     TextArea: {
       textAlign: "left",
-      padding: "12px",
+      padding: "var(--sl-spacing-small)",
+      paddingLeft: "0",
       "& .title": {
-        fontSize: "16px",
-        lineHeight: "20px",
+        fontSize: "var(--sl-font-size-medium)",
+        lineHeight: "var(--sl-line-height-dense)",
         fontWeight: "600",
         color: "var(--sl-color-neutral-1000)",
         display: "-webkit-box",
@@ -15320,9 +15308,9 @@ function RewardExchangeView(props) {
         overflow: "hidden",
       },
       "& .amount": {
-        fontSize: "14px",
-        lineHeight: "18px",
-        marginTop: "8px",
+        fontSize: "var(--sl-font-size-small)",
+        lineHeight: "var(--sl-line-height-dense)",
+        marginTop: "var(--sl-spacing-x-small)",
         color: "var(--sl-color-neutral-500)",
         display: "-webkit-box",
         "-webkit-line-clamp": "1",
@@ -15330,28 +15318,31 @@ function RewardExchangeView(props) {
         overflow: "hidden",
       },
       "& .error": {
-        fontSize: "14px",
-        lineHeight: "18px",
-        marginTop: "8px",
+        fontSize: "var(--sl-font-size-small)",
+        lineHeight: "var(--sl-line-height-dense)",
+        marginTop: "var(--sl-spacing-x-small)",
         fontWeight: "600",
         color: "var(--sl-color-warning-500)",
         display: "-webkit-box",
         "-webkit-line-clamp": "1",
         "-webkit-box-orient": "vertical",
         overflow: "hidden",
+        "& .icon": {
+          position: "relative",
+          top: "0.1em",
+          marginRight: "var(--sl-spacing-xx-small)",
+        },
       },
     },
     ChooseAmount: {
       margin: "var(--sl-spacing-medium) 0",
       "& .title": {
-        //fontSize: "var(--sl-font-size-large)",
-        fontSize: "113%",
+        fontSize: "var(--sl-font-size-large)",
         fontWeight: "var(--sl-font-weight-semibold)",
         color: "var(--sl-color-neutral-1000)",
       },
       "& .points": {
-        //fontSize: "var(--sl-font-size-large)",
-        fontSize: "113%",
+        fontSize: "var(--sl-font-size-large)",
         fontWeight: "var(--sl-font-weight-semibold)",
         color: "var(--sl-color-primary-500)",
       },
@@ -15401,7 +15392,7 @@ function RewardExchangeView(props) {
           fontWeight: "var(--sl-font-weight-normal)",
           color: "var(--sl-color-neutral-1000)",
         },
-        "@media (max-width: 1024px)": {
+        "@media (max-width: 499px)": {
           width: "100%",
           marginRight: "0",
         },
@@ -15413,7 +15404,7 @@ function RewardExchangeView(props) {
           fontWeight: "var(--sl-font-weight-normal)",
           color: "var(--sl-color-neutral-0)",
         },
-        "@media (max-width: 1024px)": {
+        "@media (max-width: 499px)": {
           width: "100%",
         },
       },
@@ -15430,7 +15421,7 @@ function RewardExchangeView(props) {
   const sheet = jss.createStyleSheet(style);
   const styleString = sheet.toString();
   function getInput() {
-    var _a, _b;
+    var _a, _b, _c;
     const item = states.selectedItem;
     if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
       return h$1("span", null, item === null || item === void 0 ? void 0 : item.prettySourceValue);
@@ -15442,19 +15433,22 @@ function RewardExchangeView(props) {
         sourceUnit: item.sourceUnit,
       })));
     }
-    return (h$1("sl-select", { style: { width: "auto" }, label: "Select amount to receive", class: sheet.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
+    return (h$1("sl-select", { style: { width: "auto" }, label: (_b = states === null || states === void 0 ? void 0 : states.content) === null || _b === void 0 ? void 0 : _b.text.selectText, class: sheet.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
         var _a, _b, _c, _d, _e;
         return callbacks.setExchangeState({
           amount: (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.sourceValue,
           selectedStep: (_e = (_d = e.detail) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.value,
         });
-      } }, (_b = item.steps) === null || _b === void 0 ? void 0 : _b.map((step) => {
+      } }, (_c = item.steps) === null || _c === void 0 ? void 0 : _c.map((step) => {
       var _a, _b;
       return (h$1("sl-menu-item", { value: step, disabled: !step.available },
         step.prettyDestinationValue,
         h$1("div", { slot: "suffix", style: { fontSize: "75%", float: "right" } },
           step.prettySourceValue,
-          step.unavailableReasonCode && (h$1("p", { style: { fontSize: "70%", color: "#F2994A" } }, intl.formatMessage({
+          step.unavailableReasonCode && (h$1("p", { style: {
+              fontSize: "70%",
+              color: "var(--sl-color-warning-500)",
+            } }, intl.formatMessage({
             id: "unavailableCode",
             defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
           }, {
@@ -15475,12 +15469,7 @@ function RewardExchangeView(props) {
             : "none",
           borderRadius: "4px",
         };
-        const amount = item.ruleType === "FIXED_GLOBAL_REWARD"
-          ? item.prettySourceValue
-          : item.ruleType === "STEPPED_FIXED_GLOBAL_REWARD"
-            ? `${(_a = item.steps[0]) === null || _a === void 0 ? void 0 : _a.sourceValue} to ${(_b = item.steps.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.prettySourceValue}`
-            : `${item.prettySourceMinValue} to ${item.prettySourceMaxValue}`;
-        return (h$1("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
+        return (h$1("div", { key: item.key, style: style },
           h$1("sl-card", { class: sheet.classes.Card, style: {
               cursor: item.unavailableReasonCode
                 ? "not-allowed"
@@ -15510,22 +15499,32 @@ function RewardExchangeView(props) {
                     "-webkit-line-clamp": item.unavailableReasonCode
                       ? "1"
                       : "2",
-                  } }, (_c = item.name) !== null && _c !== void 0 ? _c : ""),
+                  } }, (_a = item.name) !== null && _a !== void 0 ? _a : ""),
                 h$1("div", { class: "amount", style: {
                     "-webkit-line-clamp": item.unavailableReasonCode
                       ? "1"
                       : "2",
-                  } }, amount),
-                item.unavailableReasonCode && (h$1("div", { class: "error" }, intl.formatMessage({
-                  id: "unavailableCode",
-                  defaultMessage: (_e = (_d = states.content) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e.notAvailableError,
+                  } }, intl.formatMessage({
+                  id: "sourceAmountMessage",
+                  defaultMessage: (_c = (_b = states.content) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.sourceAmountMessage,
                 }, {
-                  unavailableReason: item.unavailableReason ||
-                    item.unavailableReasonCode,
-                  sourceUnit: item.sourceUnit,
-                  sourceValue: item.prettySourceValue ||
-                    item.prettySourceMinValue,
-                }))))))));
+                  ruleType: item.ruleType,
+                  sourceValue: item.prettySourceValue,
+                  sourceMinValue: item.prettySourceMinValue,
+                  sourceMaxValue: item.prettySourceMaxValue,
+                })),
+                item.unavailableReasonCode && (h$1("div", { class: "error" },
+                  h$1("sl-icon", { class: "icon", name: "exclamation-triangle-fill" }),
+                  intl.formatMessage({
+                    id: "unavailableCode",
+                    defaultMessage: (_e = (_d = states.content) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e.notAvailableError,
+                  }, {
+                    unavailableReason: item.unavailableReason ||
+                      item.unavailableReasonCode,
+                    sourceUnit: item.sourceUnit,
+                    sourceValue: item.prettySourceValue ||
+                      item.prettySourceMinValue,
+                  }))))))));
       })),
       h$1("div", { class: sheet.classes.Button },
         h$1("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText)),
@@ -15552,36 +15551,44 @@ function RewardExchangeView(props) {
   function confirmation() {
     console.log(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name);
     return (h$1("div", null,
-      h$1("h2", { style: { margin: "20px 0" } }, states.content.text.redeemTitle),
+      h$1("h2", { style: { margin: "var(--sl-spacing-large) 0" } }, states.content.text.redeemTitle),
       h$1("div", { style: {
           textAlign: "center",
           marginBottom: "var(--sl-spacing-xxx-large)",
         } },
         h$1("p", null,
-          h$1("span", { style: { fontSize: "18px" } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue))),
+          h$1("span", { style: { fontSize: "var(--sl-font-size-large)" } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue))),
         h$1("p", null,
           h$1(ExchangeArrows, null)),
-        h$1("div", { class: sheet.classes.CardContainer, style: {
+        h$1("div", { style: {
             boxShadow: "none",
             marginBottom: "10px",
             flex: "1",
             minWidth: "100%",
           } },
-          h$1("sl-card", { style: { width: "auto", maxWidth: "350px", margin: "auto" }, class: sheet.classes.Card },
-            h$1("div", { class: sheet.classes.Square },
-              h$1("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-                  getAssetPath("./assets/placeholder.png") })),
-            h$1("div", { class: sheet.classes.TextArea, style: {
-                lineHeight: "18px",
-                alignSelf: "center",
-              } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) ? `${selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue} ${(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || ""}`
-              : (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || "")))),
+          h$1("sl-card", { class: sheet.classes.Card, style: {
+              width: "33%",
+              margin: "auto",
+            } },
+            h$1("div", { style: {
+                display: "flex",
+                width: "100%",
+                height: "120px",
+                borderRadius: "3px",
+                background: "rgba(0, 0, 0, 0)",
+              } },
+              h$1("div", { class: sheet.classes.Image },
+                h$1("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+                    getAssetPath("./assets/placeholder.png") })),
+              h$1("div", { class: sheet.classes.TextArea },
+                h$1("div", { class: "title" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name),
+                h$1("div", { class: "amount" }, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.destinationValue)))))),
       h$1("div", { class: sheet.classes.Button },
         h$1("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
         h$1("sl-button", { class: "continue", size: "large", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText))));
   }
   function success() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     return (h$1("div", { class: sheet.classes.Success },
       h$1(Gift, null),
       h$1("div", { class: "title" }, states.content.text.rewardRedeemedText),
@@ -15596,8 +15603,11 @@ function RewardExchangeView(props) {
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h$1("div", { style: {
           width: "40%",
           margin: "-30px auto var(--sl-spacing-xxx-large) auto",
+          textAlign: "left",
+          color: "var(--sl-color-neutral-700)",
         } },
-        h$1(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: "Copied", open: states.open, onClick: callbacks.copyFuelTankCode }))),
+        "Promo code",
+        h$1(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: (_e = states === null || states === void 0 ? void 0 : states.content) === null || _e === void 0 ? void 0 : _e.text.toopTipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
       h$1("div", { class: sheet.classes.Button },
         h$1("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
@@ -15622,8 +15632,8 @@ function RewardExchangeView(props) {
       h$1(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (h$1("div", { class: sheet.classes.Grid }, [...Array(8)].map(() => {
-      return (h$1("div", { class: sheet.classes.CardContainer },
+    return (h$1("div", { class: sheet.classes.Grid }, [...Array(states.content.text.skeletonCardNum)].map(() => {
+      return (h$1("div", null,
         h$1("sl-card", { class: sheet.classes.Card },
           h$1("div", { class: sheet.classes.CardLayout },
             h$1("div", null,
@@ -15633,9 +15643,12 @@ function RewardExchangeView(props) {
                   margin: "9px",
                   "--border-radius": "4px",
                 } })),
-            h$1("div", { style: { margin: "12px 12px 0 0", width: "100%" } },
-              h$1("sl-skeleton", { style: { marginBottom: "12px" } }),
-              h$1("sl-skeleton", { style: { marginBottom: "12px" } }),
+            h$1("div", { style: {
+                margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
+                width: "100%",
+              } },
+              h$1("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              h$1("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
               h$1("sl-skeleton", { style: { width: "45%" } }))))));
     })));
   }
@@ -15674,11 +15687,11 @@ const SqmRewardExchangeList = class {
     /**
      * @uiName Choose Reward Progress Title
      */
-    this.chooseRewardTitle = "Choose reward";
+    this.chooseRewardTitle = "Rewards";
     /**
      * @uiName Choose Amount Progress Title
      */
-    this.chooseAmountTitle = "Amount";
+    this.chooseAmountTitle = "Select";
     /**
      * @uiName Confirmation Progress Title
      */
@@ -15707,11 +15720,28 @@ const SqmRewardExchangeList = class {
      * @uiName Confirmation Title Text
      */
     this.redeemTitle = "Confirm and redeem";
+    /**
+     * @uiName Redemption Success Message
+     */
     this.redemptionSuccessText = "Successfully redeemed {sourceValue} for {destinationValue}";
+    /**
+     * @uiName Reward Exchange Amount Text
+     */
+    this.sourceAmountMessage = "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}";
+    /**
+     * Shown when a user copies a fuel tank code
+     *
+     * @uiName Tool Tip Text
+     */
+    this.tooltiptext = "Copied";
     /**
      * @uiName Done Text
      */
     this.doneText = "Done";
+    /**
+     * @uiName Select Amount Text
+     */
+    this.selectText = "Select amount to receive";
     /**
      * @uiName Reward List Error Message
      */
@@ -15724,6 +15754,10 @@ const SqmRewardExchangeList = class {
      * @uiName Not Enough Available Error Message
      */
     this.notEnoughError = "Not enough {sourceUnit} to redeem for this reward";
+    /**
+     * @uiName Number of Skeleton Cards
+     */
+    this.skeletonCardNum = 8;
     h(this);
   }
   disconnectedCallback() { }
@@ -16551,19 +16585,27 @@ const SqmRouter = class {
 };
 SqmRouter.style = sqmRouterCss;
 
-const style$8 = {
-  HostBlock: HostBlock,
-  buttonStyle: {
-    display: "block",
-  },
-};
-jss.setup(create());
-const sheet$8 = jss.createStyleSheet(style$8);
-const styleString$8 = sheet$8.toString();
 function ShareButtonView(props, children) {
+  const vanillaStyle = `
+    *::part(base) {
+      background: ${props.backgroundcolor ? props.backgroundcolor : ""};
+      color: ${props.textcolor ? props.textcolor : ""};
+      border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
+    }
+  `;
+  const style = {
+    HostBlock: HostBlock,
+    buttonStyle: {
+      display: "block",
+    },
+  };
+  jss.setup(create());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
   return props.hide ? (h$1(Host, { style: { display: "none" } })) : (h$1("div", null,
-    h$1("style", { type: "text/css" }, styleString$8),
-    h$1("sl-button", { class: sheet$8.classes.buttonStyle, loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}sharebutton-base` },
+    h$1("style", { type: "text/css" }, styleString),
+    h$1("style", { type: "text/css" }, vanillaStyle),
+    h$1("sl-button", { class: sheet.classes.buttonStyle, loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}sharebutton-base` },
       !props.hideicon && (h$1("sl-icon", { slot: props.iconslot, name: props.icon ? props.icon : props.medium, exportparts: "icon" })),
       !props.hidetext && children)));
 }
@@ -16694,16 +16736,8 @@ const ShareButton = class {
 };
 function useDemoShareButton(props) {
   return cjs({
-    medium: props.medium,
+    ...props,
     loading: false,
-    disabled: props.disabled,
-    pill: props.pill,
-    type: props.type,
-    size: props.size,
-    hideicon: props.hideicon,
-    hidetext: props.hidetext,
-    iconslot: props.iconslot,
-    icon: props.icon,
     hide: false,
     onClick: () => {
       // TODO: Provide visual feedback
@@ -18254,6 +18288,27 @@ const TextStyleWithoutIcon = () => {
   const props = { medium: "facebook", type: "text", hideicon: true };
   return h$1(ShareButtonView, Object.assign({}, props), "Share");
 };
+const WithCustomColors = () => {
+  const props = {
+    medium: "facebook",
+    type: "text",
+    backgroundcolor: "#3b5998",
+    textcolor: "#fff",
+    iconslot: "prefix",
+  };
+  return h$1(ShareButtonView, Object.assign({}, props), "Facebook");
+};
+const WithCustomBorderRadius = () => {
+  const props = {
+    medium: "facebook",
+    type: "text",
+    backgroundcolor: "#3b5998",
+    textcolor: "#fff",
+    borderradius: 8,
+    iconslot: "prefix",
+  };
+  return h$1(ShareButtonView, Object.assign({}, props), "Facebook");
+};
 const FullStackIcon = () => {
   return (h$1("div", null,
     h$1("sqm-share-button", { medium: "facebook", iconslot: "prefix" },
@@ -18272,6 +18327,8 @@ const ShareButton$1 = /*#__PURE__*/Object.freeze({
   WithoutIcon: WithoutIcon,
   WithoutText: WithoutText,
   TextStyleWithoutIcon: TextStyleWithoutIcon,
+  WithCustomColors: WithCustomColors,
+  WithCustomBorderRadius: WithCustomBorderRadius,
   FullStackIcon: FullStackIcon
 });
 
@@ -19540,15 +19597,15 @@ const UseTaskCard = /*#__PURE__*/Object.freeze({
 const NewPortal_stories = {
   title: "New Portal",
 };
-const style$9 = {
+const style$8 = {
   HeaderSubtitleBold: {
     "font-weight": 500,
     "text-decoration": "underline",
   },
 };
 jss.setup(create());
-const sheet$9 = jss.createStyleSheet(style$9);
-const styleString$9 = sheet$9.toString();
+const sheet$8 = jss.createStyleSheet(style$8);
+const styleString$8 = sheet$8.toString();
 const barProps = {
   data: {
     programs: [
@@ -19643,7 +19700,7 @@ const Dashboard = () => {
     hide: false,
   };
   return (h$1("sqm-divided-layout", { direction: "row" },
-    h$1("style", { type: "text/css" }, styleString$9),
+    h$1("style", { type: "text/css" }, styleString$8),
     h$1(Sidebar, null),
     h$1("sqm-divided-layout", { direction: "column" },
       h$1(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
@@ -19701,7 +19758,7 @@ const Dashboard = () => {
 };
 const EditProfile$2 = () => {
   return (h$1("sqm-divided-layout", { direction: "row" },
-    h$1("style", { type: "text/css" }, styleString$9),
+    h$1("style", { type: "text/css" }, styleString$8),
     h$1(Sidebar, null),
     h$1("sqm-divided-layout", { direction: "column" },
       h$1(PortalProfileView, Object.assign({}, {
@@ -19765,7 +19822,7 @@ const EditProfile$2 = () => {
 };
 const Commissions = () => {
   return (h$1("sqm-divided-layout", { direction: "row" },
-    h$1("style", { type: "text/css" }, styleString$9),
+    h$1("style", { type: "text/css" }, styleString$8),
     h$1(Sidebar, null),
     h$1("sqm-divided-layout", { direction: "column" },
       h$1(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
@@ -19778,7 +19835,7 @@ const Commissions = () => {
             h$1("p", null,
               "for the",
               " ",
-              h$1("span", { class: sheet$9.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              h$1("span", { class: sheet$8.classes.HeaderSubtitleBold }, "Partner Program #1"),
               " ",
               "program"))),
         })),
@@ -19790,7 +19847,7 @@ const Commissions = () => {
 };
 const Activity = () => {
   return (h$1("sqm-divided-layout", { direction: "row" },
-    h$1("style", { type: "text/css" }, styleString$9),
+    h$1("style", { type: "text/css" }, styleString$8),
     h$1(Sidebar, null),
     h$1("sqm-divided-layout", { direction: "column" },
       h$1(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
@@ -19803,7 +19860,7 @@ const Activity = () => {
             h$1("p", null,
               "for the",
               " ",
-              h$1("span", { class: sheet$9.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              h$1("span", { class: sheet$8.classes.HeaderSubtitleBold }, "Partner Program #1"),
               " ",
               "program"))),
         })),
@@ -19932,6 +19989,8 @@ const defaultProps$2 = {
   states: {
     error: "",
     loading: false,
+    forgotPasswordPath: "/forgotPassword",
+    registerPath: "/register",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -19942,6 +20001,8 @@ const errorProps = {
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
+    forgotPasswordPath: "/forgotPassword",
+    registerPath: "/register",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -19952,6 +20013,8 @@ const loadingProps = {
   states: {
     error: "",
     loading: true,
+    forgotPasswordPath: "/forgotPassword",
+    registerPath: "/register",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -19979,6 +20042,7 @@ const defaultProps$3 = {
     loading: false,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login"
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -19995,6 +20059,7 @@ const errorProps$1 = {
     loading: false,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login"
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -20014,6 +20079,7 @@ const loadingProps$1 = {
     loading: true,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login"
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -20030,6 +20096,7 @@ const slottedProps = {
     loading: false,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login"
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -20056,6 +20123,7 @@ const FieldsHidden = () => {
         loading: true,
         confirmPassword: true,
         hideInputs: true,
+        loginPath: "/login"
       },
     } }));
 };
@@ -20071,7 +20139,7 @@ const PortalRegister$1 = /*#__PURE__*/Object.freeze({
   SlottedInputs: SlottedInputs
 });
 
-const scenario = "@author:\r\n@owner:ian\r\nFeature: Forgot Password\r\n\r\n  @motivating\r\n  Scenario: Users can request to reset their password\r\n    Given a user enters their email address\r\n    And that email address is linked to a previously created account\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    When the password reset email is sent\r\n    Then a confirmation banner is shown stating a password reset email was sent\r\n\r\n  @motivating\r\n  Scenario: Users are notified if sending their password reset email fails\r\n    Given a user enters their email address\r\n    And that email address is linked to a previously created account\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    When the password reset email fails to send\r\n    Then the user will not receive a password reset email\r\n    And an error banner is shown stating that they should try again\r\n\r\n  @motivating\r\n  @landmine\r\n  Scenario: If the input email is not associated to an account a success banner will be shown but an email will not be sent\r\n    Given the user entered an email address that is not associated to an accoun\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    But no email will be sent\r\n    And a success banner is shown stating a password reset email was sent if the given email was associated to an account\r\n\r\n  @motivating\r\n  Scenario: Users can resend password reset email\r\n    Given a user had previously requested to reset their password\r\n    When they enter their email address\r\n    And that email address is linked to a previously created account\r\n    And they click \"Reset Password\"\r\n    Then the user will receive a second password reset email\r\n    And a success banner is shown stating that their email was sent\r\n";
+const scenario = "@author:derek\r\n@owner:ian\r\nFeature: Forgot Password\r\n\r\n  @motivating\r\n  Scenario: Users can request to reset their password\r\n    Given a user enters their email address\r\n    And that email address is linked to a previously created account\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    When the password reset email is sent\r\n    Then a confirmation banner is shown stating a password reset email was sent\r\n\r\n  @motivating\r\n  Scenario: Users are notified if sending their password reset email fails\r\n    Given a user enters their email address\r\n    And that email address is linked to a previously created account\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    When the password reset email fails to send\r\n    Then the user does not receive a password reset email\r\n    And an error banner is shown stating that they should try again\r\n\r\n  @motivating\r\n  @landmine\r\n  Scenario: If the input email is not associated to an account a success banner is shown but an email is not be sent\r\n    Given the user entered an email address that is not associated to an accoun\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    But no email is sent\r\n    And a success banner is shown stating a password reset email was sent if the given email was associated to an account\r\n\r\n  @motivating\r\n  Scenario: Users can resend password reset email\r\n    Given a user had previously requested to reset their password\r\n    When they enter their email address\r\n    And that email address is linked to a previously created account\r\n    And they click \"Reset Password\"\r\n    Then the user receives a second password reset email\r\n    And a success banner is shown stating that their email was sent\r\n\r\n  @motivating\r\n  Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/resetPassword\"\r\n    Given a user viewing the password reset component\r\n    And the component <mayHave> \"redirect-path\" with <value>\r\n    When they request a password reset email\r\n    And they click the link in the email\r\n    Then they are redirected to <redirectPath>\r\n    Examples:\r\n      | mayHave      | value            | redirectPath     |\r\n      | doesn't have | N/A              | /resetPassword   |\r\n      | has          | /resetMyPassword | /resetMyPassword |\r\n\r\n  @minutae\r\n  Scenario Outline: Navigation back to the login page can be customized but defaults to \"/login\"\r\n    Given a user viewing the password reset component\r\n    And the component <mayHave> \"login-path\" with <value>\r\n    Then they see a \"Sign In\" text button\r\n    When they click \"Sign In\"\r\n    Then they are redirected to <redirectPath>\r\n    Examples:\r\n      | mayHave      | value   | redirectPath |\r\n      | doesn't have | N/A     | /login       |\r\n      | has          | /signin | /signin      |";
 
 const PortalForgotPassword_stories = {
   title: "Components/Portal Forgot Password",
@@ -20084,6 +20152,7 @@ const defaultProps$4 = {
     error: "",
     loading: false,
     success: false,
+    loginPath: "/login",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -20098,6 +20167,7 @@ const errorProps$2 = {
     error: "Something went wrong. Please try again.",
     loading: false,
     success: false,
+    loginPath: "/login",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -20112,6 +20182,7 @@ const loadingProps$2 = {
     error: "",
     loading: true,
     success: false,
+    loginPath: "/login",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -20126,6 +20197,7 @@ const successProps = {
     error: "",
     loading: false,
     success: true,
+    loginPath: "/login",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -20149,7 +20221,7 @@ const PortalForgotPassword = /*#__PURE__*/Object.freeze({
   ForgotPasswordSuccess: ForgotPasswordSuccess
 });
 
-const scenario$1 = "@author:\r\n@owner: ian\r\nFeature: Email Verification\r\n\r\n    @minutae\r\n    Scenario: User's redirected from registration can re-send their verification email\r\n        Given a user has registered\r\n        And they have been sent a verification email\r\n        When they are redirected to the email verification page\r\n        Then a message will be displayed\r\n        And it will reflect that a email has already been sent to their email\r\n        But they can still re-send the email\r\n        When they click to \"Resend-Email\"\r\n        Then the user will receive a verification email\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message fails\r\n        Given a user with an email was stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When an error occurs trying to send the verification email\r\n        Then the user will not receive a verification email\r\n        And an error banner is shown stating that they should try again\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message succeeds\r\n        Given a user with an email was stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When the email verification message sends\r\n        Then the user will receive a verification email\r\n        And a success banner is shown stating that their email was resent";
+const scenario$1 = "@author:derek\r\n@owner:ian\r\nFeature: Email Verification\r\n\r\n    @minutae\r\n    Scenario: User's redirected from registration can re-send their verification email\r\n        Given a user has registered\r\n        And they have been sent a verification email\r\n        When they are redirected to the email verification page\r\n        Then a message is displayed\r\n        And it reflects that a email has been sent to their email\r\n        But they can still re-send the email\r\n        When they click to \"Resend-Email\"\r\n        Then they receive a verification email\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message fails\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When an error occurs trying to send the verification email\r\n        Then the user does not receive a verification email\r\n        And an error banner is shown stating that they should try again\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message succeeds\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When the email verification message sends\r\n        Then the user receives a verification email\r\n        And a success banner is shown stating that their email was resent\r\n\r\n    @motivating\r\n    Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/verifyEmail\"\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        And the component <mayHave> \"redirect-path\" with <value>\r\n        When they resend their verification email\r\n        And they click the link in the email\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | mayHave      | value          | redirectPath   |\r\n            | doesn't have | N/A            | /verifyEmail   |\r\n            | has          | /verifyMyEmail | /verifyMyEmail |";
 
 const PortalEmailVerification_stories = {
   title: "Components/Portal Email Verification",
@@ -20235,7 +20307,7 @@ const PortalEmailVerification = /*#__PURE__*/Object.freeze({
   EmailVerificationSuccess: EmailVerificationSuccess
 });
 
-const scenario$2 = "@author:\r\n@owner:ian\r\nFeature: Reset Password\r\n\r\n\r\n    Background: A user in on the password reset page\r\n        Given a user who has been redirected to the password reset page\r\n\r\n    @motivating\r\n    Scenario: Users can reset their password\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they enter their password twice\r\n        And they click \"Update\"\r\n        Then their password is updated\r\n        And a banner with a success message will be displayed\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot reset their password with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        Then they will see an error message saying that their password reset code is invalid or expired\r\n        When they click \"Continue\"\r\n        Then they will be redirected to \"/\"\r\n        Examples:\r\n            | oobCode               |\r\n            | invalid oob code      |\r\n            | non existant oob code |\r\n\r\n    @motivating\r\n    Scenario: Users must enter the same password twice to successfully reset their password\r\n        Given a user has been redirected to the password reset page\r\n        And they have a valid oob code as a url query parameter\r\n        When they enter two different passwords into the password reset form\r\n        And they click \"Update\"\r\n        Then their password is not be reset\r\n        And an error banner stating the input passwords must match appears\r\n        And their password will not be reset\r\n        When they enter the same password twice\r\n        And they click \"Update\"\r\n        Then a banner appears with a success message\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/activity\"";
+const scenario$2 = "@author:derek\r\n@owner:ian\r\nFeature: Reset Password\r\n\r\n    Background: A user in on the password reset page\r\n        Given a user who has been redirected to the password reset page\r\n\r\n    @motivating\r\n    Scenario: Users can reset their password\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they enter their password twice\r\n        And they click \"Update\"\r\n        Then their password is updated\r\n        And a banner with a success message is displayed\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot reset their password with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        And the component <mayHave> \"failed-page\" with <value>\r\n        Then they see an error message saying that their password reset code is invalid/expired\r\n        When they click \"Continue\"\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | oobCode               | mayHave      | value  | redirectPath |\r\n            | invalid oob code      | doesn't have | N/A    | /            |\r\n            | non existant oob code | doesn't have | N/A    | /            |\r\n            | invalid oob code      | has          | /login | /login       |\r\n            | non existant oob code | has          | /login | /login       |\r\n\r\n    @motivating\r\n    Scenario: Users must enter the same password twice to successfully reset their password\r\n        Given a user has been redirected to the password reset page\r\n        And they have a valid oob code as a url query parameter\r\n        When they enter two different passwords into the password reset form\r\n        And they click \"Update\"\r\n        Then their password is not be reset\r\n        And an error banner stating the input passwords must match appears\r\n        And their password is not be reset\r\n        When they enter the same password twice\r\n        And they click \"Update\"\r\n        Then a banner appears with a success message\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/activity\"";
 
 const PortalResetPassword_stories = {
   title: "Components/Portal Reset Password",
@@ -20399,7 +20471,7 @@ const PortalResetPassword = /*#__PURE__*/Object.freeze({
   CodeValidating: CodeValidating
 });
 
-const scenario$3 = "@author:\r\n@owner:ian\r\nFeature: Verify Email\r\n\r\n\r\n    Background: A user is on the email verification page\r\n        Given a user who has been redirected to the email verification page\r\n\r\n    @motivating\r\n    Scenario: Verifying your email will take you to the portal login page\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button will enter a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" will appear\r\n        When they click \"Continue\"\r\n        Then they will be redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users will be automatically redirected if they dont click \"Continue\"\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button will enter a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" will appear\r\n        When they wait 5 seconds\r\n        Then they will be redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are notified if verifying their email has failed\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button will enter a loading state\r\n        When their email fails to be validated\r\n        Then an banner is shown stating that an error occured\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot verify their email with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        Then they will see an error message saying that their verification code is invalid or expired\r\n        When they click \"Continue\"\r\n        Then they will be redirected to \"/\"\r\n        Examples:\r\n            | oobCode               |\r\n            | invalid oob code      |\r\n            | non existant oob code |\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they will be redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they will be redirected to \"/activity\"\r\n\r\n    @motivating\r\n    Scenario Outline: Users will be redirected to the value of the nextPage url parameter if it exists\r\n        Given the component <mayHave> prop \"nextPage\" with <nextPageValue>\r\n        And the users url contains a \"nextPage\" query paramater with <nextPageParamValue>\r\n        And the user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to <nextPageParamValue>\r\n        Examples:\r\n            | mayHave       | nextPageValue | nextPageParamValue |\r\n            | has           | /dashboard    | /activity          |\r\n            | does not have | N/A           | /activity          |";
+const scenario$3 = "@author:derek\r\n@owner:ian\r\nFeature: Verify Email\r\n\r\n    Background: A user is on the email verification page\r\n        Given a user who has been redirected to the email verification page\r\n\r\n    @motivating\r\n    Scenario: Verifying your email takes you to the portal login page\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" appears\r\n        When they click \"Continue\"\r\n        Then they are redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are automatically redirected if they dont click \"Continue\"\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" appears\r\n        When they wait 5 seconds\r\n        Then they are redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are notified if verifying their email has failed\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email fails to be validated\r\n        Then an banner is shown stating that an error occured\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot verify their email with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        And the component <mayHave> \"failed-page\" with <value>\r\n        Then they see an error message saying that their verification code is invalid/expired\r\n        When they click \"Continue\"\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | oobCode               | mayHave      | value  | redirectPath |\r\n            | invalid oob code      | doesn't have | N/A    | /            |\r\n            | non existant oob code | doesn't have | N/A    | /            |\r\n            | invalid oob code      | has          | /login | /login       |\r\n            | non existant oob code | has          | /login | /login       |\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to \"/activity\"\r\n\r\n    @motivating\r\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter if it exists\r\n        Given the component <mayHave> prop \"nextPage\" with <nextPageValue>\r\n        And the users url contains a \"nextPage\" query paramater with <nextPageParamValue>\r\n        And the user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to <nextPageParamValue>\r\n        Examples:\r\n            | mayHave       | nextPageValue | nextPageParamValue |\r\n            | has           | /dashboard    | /activity          |\r\n            | does not have | N/A           | /activity          |";
 
 const PortalVerifyEmail_stories = {
   title: "Components/Portal Verify Email",
@@ -21914,7 +21986,7 @@ const arrow_left_right = () => {
     h$1("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 = () => {
+const Gift$1 = () => {
   return (h$1("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     h$1("path", { d: "M15 5H12.4508H9V16H13.5C14.0523 16 14.5 15.5523 14.5 15V9H15C15.5523 9 16 8.55228 16 8V6C16 5.44772 15.5523 5 15 5Z", fill: "#F2C94C" }),
     h$1("path", { d: "M1.5 9V15C1.5 15.5523 1.94772 16 2.5 16H7V5H4.64242H1C0.447715 5 0 5.44772 0 6V8C0 8.55228 0.447715 9 1 9H1.5Z", fill: "#F2C94C" }),
@@ -21924,10 +21996,6 @@ const gift = () => {
 
 function ProgressBarView(props) {
   const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, expired = false, finite = 0, } = props;
-  //   console.log("progress bar props", props);
-  const gift1 = gift();
-  const gift2 = gift();
-  const gift3 = gift();
   var items = [];
   var columns = "";
   if (repeatable) {
@@ -22048,11 +22116,8 @@ function ProgressBarView(props) {
         marginLeft: "-100px",
         marginRight: "-100px",
         position: "relative",
-        display: "list-item",
-        listStyleType: "none",
         top: "-18px",
         filter: goal <= progress ? "" : "grayscale(100%)",
-        zIndex: "1",
       },
     },
   };
@@ -22078,7 +22143,7 @@ function ProgressBarView(props) {
       : progressBarUnit + clamp(progress, 0, goal)));
     items.push(h$1("div", { class: "remain" }));
     items.push(h$1("div", { class: "progress bg" }, progressBarUnit + goal));
-    items.push(h$1("div", { class: "gift" }, gift1));
+    items.push(h$1("div", { class: "gift" }, h$1(Gift$1, null)));
   }
   function addSteps() {
     let ratio = 1 / goal;
@@ -22099,14 +22164,14 @@ function ProgressBarView(props) {
       columns += "0fr ";
       items.push(h$1("div", { class: "filled" }));
       items.push(h$1("div", { class: "progress bg" }, goal));
-      items.push(h$1("div", { class: "gift" }, gift1));
+      items.push(h$1("div", { class: "gift" }, h$1(Gift$1, null)));
     }
     // reward fail
     else {
       columns += "0fr ";
       items.push(h$1("div", { class: "remain" }));
       items.push(h$1("div", { class: "empty bg" }, goal));
-      items.push(h$1("div", { class: "gift" }, gift1));
+      items.push(h$1("div", { class: "gift" }, h$1(Gift$1, null)));
     }
   }
   function addLinearRepeatable() {
@@ -22119,10 +22184,10 @@ function ProgressBarView(props) {
       items.push(h$1("div", { class: progress == goal ? "progress top bg" : "progress top" }, progressBarUnit + progress));
       items.push(h$1("div", { class: "remain" }));
       items.push(h$1("div", { class: "progress bg" }, progressBarUnit + goal));
-      items.push(h$1("div", { class: "gift" }, gift1));
+      items.push(h$1("div", { class: "gift" }, h$1(Gift$1, null)));
       items.push(h$1("div", { class: "remain" }));
       items.push(h$1("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-      items.push(h$1("div", { class: "gift bw" }, gift2));
+      items.push(h$1("div", { class: "gift bw" }, h$1(Gift$1, null)));
     }
     // single repetition
     else if (repetitions == 1) {
@@ -22130,18 +22195,18 @@ function ProgressBarView(props) {
         "0.5fr 0fr 0fr " + ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr";
       items.push(h$1("div", { class: "filled" }));
       items.push(h$1("div", { class: "progress bg" }, progressBarUnit + goal));
-      items.push(h$1("div", { class: "gift" }, gift1));
+      items.push(h$1("div", { class: "gift" }, h$1(Gift$1, null)));
       items.push(h$1("div", { class: "filled" }));
       items.push(h$1("div", { class: progress == goal ? "progress top bg" : "progress top" }, progress == goal ? "" : progressBarUnit + progress));
       items.push(h$1("div", { class: "remain" }));
       items.push(h$1("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-      items.push(h$1("div", { class: "gift bw" }, gift2));
+      items.push(h$1("div", { class: "gift bw" }, h$1(Gift$1, null)));
     }
     // finite repetition hit
     else if (finite && repetitions >= finite) {
       if (repetitions > 2) {
         items.push(h$1("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 2)));
-        items.push(h$1("div", { class: "gift start" }, gift1));
+        items.push(h$1("div", { class: "gift start" }, h$1(Gift$1, null)));
         columns = "0fr 0fr 0.5fr 0fr 0fr 0.5fr 0fr 0fr";
       }
       else {
@@ -22149,10 +22214,10 @@ function ProgressBarView(props) {
       }
       items.push(h$1("div", { class: "filled" }));
       items.push(h$1("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 1)));
-      items.push(h$1("div", { class: "gift" }, gift2));
+      items.push(h$1("div", { class: "gift" }, h$1(Gift$1, null)));
       items.push(h$1("div", { class: "filled" }));
       items.push(h$1("div", { class: "progress bg" }, progressBarUnit + goal * finite));
-      items.push(h$1("div", { class: "gift" }, gift3));
+      items.push(h$1("div", { class: "gift" }, h$1(Gift$1, null)));
     }
     // multiple repetitions
     else {
@@ -22163,15 +22228,15 @@ function ProgressBarView(props) {
           (0.5 - ratio) +
           "fr 0fr 0fr";
       items.push(h$1("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions - 1)));
-      items.push(h$1("div", { class: "gift start" }, gift1));
+      items.push(h$1("div", { class: "gift start" }, h$1(Gift$1, null)));
       items.push(h$1("div", { class: "filled" }));
       items.push(h$1("div", { class: "progress bg" }, progressBarUnit + goal * repetitions));
-      items.push(h$1("div", { class: "gift" }, gift2));
+      items.push(h$1("div", { class: "gift" }, h$1(Gift$1, null)));
       items.push(h$1("div", { class: "filled" }));
       items.push(h$1("div", { class: progress == goal * repetitions ? "progress top bg" : "progress top" }, progress == goal * repetitions ? "" : progressBarUnit + progress));
       items.push(h$1("div", { class: "remain" }));
       items.push(h$1("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions + 1)));
-      items.push(h$1("div", { class: "gift bw" }, gift3));
+      items.push(h$1("div", { class: "gift bw" }, h$1(Gift$1, null)));
     }
   }
   function addStepsRepeatable() {
@@ -22186,13 +22251,13 @@ function ProgressBarView(props) {
             columns += "0fr ";
             items.push(h$1("div", { class: "remain" }));
             items.push(h$1("div", { class: "empty bg" }, goal));
-            items.push(h$1("div", { class: "gift bw" }, gift1));
+            items.push(h$1("div", { class: "gift bw" }, h$1(Gift$1, null)));
           }
           else if (i == goal * 2) {
             columns += "0fr 0fr";
             items.push(h$1("div", { class: "remain" }));
             items.push(h$1("div", { class: "empty bg" }, goal * 2));
-            items.push(h$1("div", { class: "gift bw" }, gift2));
+            items.push(h$1("div", { class: "gift bw" }, h$1(Gift$1, null)));
           }
           else {
             items.push(h$1("div", { class: "remain" }));
@@ -22203,7 +22268,7 @@ function ProgressBarView(props) {
           columns += "0fr ";
           items.push(h$1("div", { class: "filled" }));
           items.push(h$1("div", { class: "progress bg" }, i));
-          items.push(h$1("div", { class: "gift" }, gift3));
+          items.push(h$1("div", { class: "gift" }, h$1(Gift$1, null)));
         }
         else {
           items.push(h$1("div", { class: "filled" }));
@@ -22217,7 +22282,7 @@ function ProgressBarView(props) {
       if (repetitions > 2) {
         columns += "0fr 0fr ";
         items.push(h$1("div", { class: "progress bg" }, goal * (finite - 2)));
-        items.push(h$1("div", { class: "gift start" }, gift1));
+        items.push(h$1("div", { class: "gift start" }, h$1(Gift$1, null)));
       }
       for (let i = 1; i < goal * 2 + 1; i++) {
         columns += ratio + "fr 0fr ";
@@ -22226,20 +22291,20 @@ function ProgressBarView(props) {
             columns += "0fr ";
             items.push(h$1("div", { class: "remain" }));
             items.push(h$1("div", { class: "progress bg" }, goal * (finite - 1)));
-            items.push(h$1("div", { class: "gift bw" }, gift1));
+            items.push(h$1("div", { class: "gift bw" }, h$1(Gift$1, null)));
           }
         }
         else if (i == goal) {
           columns += "0fr ";
           items.push(h$1("div", { class: "filled" }));
           items.push(h$1("div", { class: "progress bg" }, goal * (finite - 1)));
-          items.push(h$1("div", { class: "gift" }, gift2));
+          items.push(h$1("div", { class: "gift" }, h$1(Gift$1, null)));
         }
         else if (i == goal * 2) {
           columns += "0fr 0fr";
           items.push(h$1("div", { class: "filled" }));
           items.push(h$1("div", { class: "progress bg" }, goal * finite));
-          items.push(h$1("div", { class: "gift" }, gift3));
+          items.push(h$1("div", { class: "gift" }, h$1(Gift$1, null)));
         }
         else {
           items.push(h$1("div", { class: "filled" }));
@@ -22253,7 +22318,7 @@ function ProgressBarView(props) {
       let ratio = 1 / goal;
       columns += "0fr 0fr ";
       items.push(h$1("div", { class: "progress bg" }, goal * (repetitions - 1)));
-      items.push(h$1("div", { class: "gift start" }, gift1));
+      items.push(h$1("div", { class: "gift start" }, h$1(Gift$1, null)));
       for (let i = 1; i < goal * 2 + 1; i++) {
         columns += ratio + "fr 0fr ";
         if (i <= goal) {
@@ -22261,7 +22326,7 @@ function ProgressBarView(props) {
             columns += "0fr ";
             items.push(h$1("div", { class: "filled" }));
             items.push(h$1("div", { class: "progress bg" }, i + goal * (repetitions - 1)));
-            items.push(h$1("div", { class: "gift" }, gift2));
+            items.push(h$1("div", { class: "gift" }, h$1(Gift$1, null)));
           }
           else {
             items.push(h$1("div", { class: "filled" }));
@@ -22273,7 +22338,7 @@ function ProgressBarView(props) {
             columns += "0fr 0fr";
             items.push(h$1("div", { class: "remain" }));
             items.push(h$1("div", { class: "empty bg" }, i + goal * (repetitions - 1)));
-            items.push(h$1("div", { class: "gift bw" }, gift3));
+            items.push(h$1("div", { class: "gift bw" }, h$1(Gift$1, null)));
           }
           else {
             items.push(h$1("div", { class: "remain" }));
@@ -22294,11 +22359,6 @@ function TaskCardView(props) {
   const checkmark_filled$1 = checkmark_filled();
   const arrow_left_right$1 = arrow_left_right();
   const style = {
-    // HostBlock: {
-    //   ":host": {
-    //     display: "inline-block",
-    //   },
-    // },
     TaskCard: {
       display: "inline-block",
       width: "100%",
@@ -22318,7 +22378,7 @@ function TaskCardView(props) {
         borderColor: "var(--sl-color-primary-500)",
       },
       "& .main.expired": {
-        color: "var(--sl-color-neutral-400)",
+        color: "var(--sl-color-neutral-600)",
         background: "var(--sl-color-neutral-50)",
       },
       "& .title": {
@@ -22330,17 +22390,43 @@ function TaskCardView(props) {
         margin: "var(--sl-spacing-medium)",
       },
       "& .container.subdued": {
-        opacity: "0.66",
+        opacity: "0.45",
       },
       "& .container > div": {
         margin: "var(--sl-spacing-medium) 0",
       },
     },
-    Expired: {
-      margin: "var(--sl-spacing-medium)",
-      marginBottom: "calc(var(--sl-spacing-x-small)*-1)",
+    NotStarted: {
+      padding: "var(--sl-spacing-medium)",
+      color: "var(--sl-color-primary-600)",
+      border: "1px solid var(--sl-color-neutral-200)",
+      borderRadius: "var(--sl-border-radius-medium) var(--sl-border-radius-medium) 0 0",
+      borderBottom: "none",
+      background: "var(--sl-color-primary-50)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      lineHeight: "var(--sl-line-height-dense)",
+      "& .icon": {
+        position: "relative",
+        top: "0.1em",
+        marginRight: "var(--sl-spacing-small)",
+        color: "var(--sl-color-primary-500)",
+      },
+    },
+    Ended: {
+      padding: "var(--sl-spacing-medium)",
       color: "var(--sl-color-warning-600)",
+      border: "1px solid var(--sl-color-neutral-200)",
+      borderRadius: "var(--sl-border-radius-medium) var(--sl-border-radius-medium) 0 0",
+      borderBottom: "none",
+      background: "var(--sl-color-warning-50)",
       fontWeight: "var(--sl-font-weight-semibold)",
+      lineHeight: "var(--sl-line-height-dense)",
+      "& .icon": {
+        position: "relative",
+        top: "0.1em",
+        marginRight: "var(--sl-spacing-small)",
+        color: "var(--sl-color-warning-500)",
+      },
     },
     Header: {
       display: "flex",
@@ -22411,7 +22497,7 @@ function TaskCardView(props) {
         },
       },
       "& .neutral": {
-        color: "var(--sl-color-neutral-400)",
+        color: "var(--sl-color-neutral-600)",
       },
     },
   };
@@ -22430,16 +22516,42 @@ function TaskCardView(props) {
   const taskEnded = props.showExpiry && dateEnd <= dateToday;
   const taskNotStarted = props.showExpiry && dateToday <= dateStart;
   const taskUnavailable = taskEnded || taskNotStarted;
+  const vanillaStyle = `
+	:host{
+		display: block;
+		margin-bottom: 24px;
+	}
+  `;
   return (h$1("div", { class: sheet.classes.TaskCard },
-    h$1("div", { class: taskUnavailable
+    h$1("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    !props.loading && taskNotStarted && (h$1("div", { class: sheet.classes.NotStarted },
+      h$1("span", { class: "icon" },
+        h$1("sl-icon", { name: "info-circle-fill" })),
+      intl.formatMessage({
+        id: "startsOnMessage",
+        defaultMessage: props.startsOnMessage,
+      }, {
+        startDate: dateStart.toLocaleString(luxon.DateTime.DATE_MED),
+      }))),
+    !props.loading && taskEnded && (h$1("div", { class: sheet.classes.Ended },
+      h$1("span", { class: "icon" },
+        h$1("sl-icon", { name: "exclamation-triangle-fill" })),
+      intl.formatMessage({
+        id: "endedMessage",
+        defaultMessage: props.endedMessage,
+      }, {
+        endDate: dateEnd.toLocaleString(luxon.DateTime.DATE_MED),
+      }))),
+    h$1("div", { style: {
+        borderRadius: taskUnavailable &&
+          "0 0 var(--sl-border-radius-medium) var(--sl-border-radius-medium)",
+      }, class: taskUnavailable
         ? "main expired"
         : taskComplete
           ? "main complete"
           : "main" },
-      h$1("style", { type: "text/css" }, styleString),
-      taskUnavailable && (h$1("div", { class: sheet.classes.Expired }, taskEnded
-        ? "Ended " + dateEnd.toLocaleString(luxon.DateTime.DATE_MED)
-        : "Starts " + dateStart.toLocaleString(luxon.DateTime.DATE_MED))),
       h$1("div", { class: taskComplete || taskUnavailable ? "container subdued" : "container" },
         h$1("div", { class: sheet.classes.Header }, props.loading ? (h$1("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h$1("div", null,
           showComplete && (h$1("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled$1 : checkmark_circle$1)),
@@ -22460,13 +22572,21 @@ function TaskCardView(props) {
                   ? taskUnavailable
                     ? "neutral"
                     : "success"
-                  : "" }, "Completed " +
-                (props.finite
+                  : "" }, intl.formatMessage({
+                id: "completedMessage",
+                defaultMessage: props.completedText,
+              }, {
+                finite: props.finite,
+                count: props.finite
                   ? Math.min(repetitions, props.finite)
-                  : repetitions) +
-                (props.finite ? "/" + props.finite : "") +
-                " times"))),
-            props.showExpiry && !taskUnavailable && (h$1("span", null, "Ends " + dateEnd.toLocaleString(luxon.DateTime.DATE_FULL)))),
+                  : repetitions,
+              })))),
+            props.showExpiry && !taskUnavailable && (h$1("span", null, intl.formatMessage({
+              id: "expiryMessage",
+              defaultMessage: props.expiryMessage,
+            }, {
+              endDate: dateEnd.toLocaleString(luxon.DateTime.DATE_FULL),
+            })))),
           h$1("sl-button", { class: taskUnavailable
               ? "action neutral"
               : taskComplete
@@ -22495,6 +22615,7 @@ function Details(props) {
         },
         transformOrigin: "50% 37%",
         transition: "transform var(--sl-transition-medium) ease",
+        cursor: "pointer",
       },
       "& input:checked ~ .summary": {
         transition: "all var(--sl-transition-medium) ease",
@@ -22590,7 +22711,11 @@ const oneAction = {
   openNewTab: false,
   showExpiry: false,
   rewardDuration: null,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
   loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
   finite: 0,
 };
 const coupleActions = {
@@ -22607,8 +22732,12 @@ const coupleActions = {
   buttonLink: "https://example.com/",
   openNewTab: false,
   showExpiry: false,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
   rewardDuration: null,
   loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
   finite: 0,
 };
 const manyActions = {
@@ -22617,6 +22746,7 @@ const manyActions = {
   cardTitle: "Spend $500 at our Store",
   description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
   repeatable: false,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
   showProgressBar: true,
   progress: 100,
   goal: 500,
@@ -22627,6 +22757,9 @@ const manyActions = {
   showExpiry: false,
   rewardDuration: null,
   loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
   finite: 0,
 };
 const TaskCard$1 = () => {
@@ -25999,21 +26132,21 @@ var marked = createCommonjsModule(function (module, exports) {
 })));
 });
 
-const LoginReadme = "# sqm-portal-login\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; }; content?: { forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }` | `undefined`                 |\r\n| `emailLabel`          | `email-label`           |             | `string`                                                                                                                                                                                                      | `\"Email\"`                   |\r\n| `forgotPasswordLabel` | `forgot-password-label` |             | `string`                                                                                                                                                                                                      | `\"Forgot Password?\"`        |\r\n| `nextPage`            | `next-page`             |             | `string`                                                                                                                                                                                                      | `\"/\"`                       |\r\n| `pageLabel`           | `page-label`            |             | `string`                                                                                                                                                                                                      | `\"Sign in to your account\"` |\r\n| `passwordLabel`       | `password-label`        |             | `string`                                                                                                                                                                                                      | `\"Password\"`                |\r\n| `registerLabel`       | `register-label`        |             | `string`                                                                                                                                                                                                      | `\"Register\"`                |\r\n| `submitLabel`         | `submit-label`          |             | `string`                                                                                                                                                                                                      | `\"Sign In\"`                 |\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\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-login --> sqm-form-message\r\n  sqm-stencilbook --> sqm-portal-login\r\n  style sqm-portal-login 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 LoginReadme = "# sqm-portal-login\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; forgotPasswordPath: string; registerPath: string; }; content?: { forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }` | `undefined`                 |\r\n| `emailLabel`          | `email-label`           |             | `string`                                                                                                                                                                                                                                                        | `\"Email\"`                   |\r\n| `forgotPasswordLabel` | `forgot-password-label` |             | `string`                                                                                                                                                                                                                                                        | `\"Forgot Password?\"`        |\r\n| `forgotPasswordPath`  | `forgot-password-path`  |             | `string`                                                                                                                                                                                                                                                        | `\"/forgotPassword\"`         |\r\n| `nextPage`            | `next-page`             |             | `string`                                                                                                                                                                                                                                                        | `\"/\"`                       |\r\n| `pageLabel`           | `page-label`            |             | `string`                                                                                                                                                                                                                                                        | `\"Sign in to your account\"` |\r\n| `passwordLabel`       | `password-label`        |             | `string`                                                                                                                                                                                                                                                        | `\"Password\"`                |\r\n| `registerLabel`       | `register-label`        |             | `string`                                                                                                                                                                                                                                                        | `\"Register\"`                |\r\n| `registerPath`        | `register-path`         |             | `string`                                                                                                                                                                                                                                                        | `\"/register\"`               |\r\n| `submitLabel`         | `submit-label`          |             | `string`                                                                                                                                                                                                                                                        | `\"Sign In\"`                 |\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\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-login --> sqm-form-message\r\n  sqm-stencilbook --> sqm-portal-login\r\n  style sqm-portal-login 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 ReferralIframeReadme = "# sqm-referral-iframe\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?: { content: { iframeSrc: string; iframeHeight: string; iframeWidth: string; }; }; data?: { shareCode: string; }; }` | `undefined` |\r\n| `iframeHeight` | `iframe-height` |             | `string`                                                                                                                       | `\"100%\"`    |\r\n| `iframeSrc`    | `iframe-src`    |             | `string`                                                                                                                       | `undefined` |\r\n| `iframeWidth`  | `iframe-width`  |             | `string`                                                                                                                       | `\"100%\"`    |\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### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-stencilbook --> sqm-referral-iframe\r\n  style sqm-referral-iframe 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 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 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; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined`                |\r\n| `emailLabel`   | `email-label`   |                                                                      | `string`                                                                                                                                                                                    | `\"Email\"`                  |\r\n| `loginPath`    | `login-path`    |                                                                      | `string`                                                                                                                                                                                    | `\"/login\"`                 |\r\n| `redirectPath` | `redirect-path` | The page that users are redirected to from the password reset email. | `string`                                                                                                                                                                                    | `\"/resetPassword\"`         |\r\n| `submitLabel`  | `submit-label`  |                                                                      | `string`                                                                                                                                                                                    | `\"Request Password Reset\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-forgot-password --> sqm-form-message\r\n  style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                   | Attribute                    | Description | Type                                                                                                                                                                                                                                                                                                                                                                                           | Default              |\r\n| -------------------------- | ---------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword`          | `confirm-password`           |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `false`              |\r\n| `confirmPasswordLabel`     | `confirm-password-label`     |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Confirm Password\"` |\r\n| `demoData`                 | --                           |             | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }` | `undefined`          |\r\n| `emailLabel`               | `email-label`                |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Email\"`            |\r\n| `enablePasswordValidation` | `enable-password-validation` |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `true`               |\r\n| `hideInputs`               | `hide-inputs`                |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `false`              |\r\n| `loginLabel`               | `login-label`                |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Sign in\"`          |\r\n| `nextPage`                 | `next-page`                  |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"/\"`                |\r\n| `pageLabel`                | `page-label`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Register\"`         |\r\n| `passwordLabel`            | `password-label`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Password\"`         |\r\n| `submitLabel`              | `submit-label`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Register\"`         |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-register --> sqm-form-message\r\n  sqm-portal-register --> sqm-password-field\r\n  sqm-stencilbook --> sqm-portal-register\r\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\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; loginPath: string; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }` | `undefined`          |\r\n| `emailLabel`               | `email-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                          | `\"Email\"`            |\r\n| `enablePasswordValidation` | `enable-password-validation` |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                         | `true`               |\r\n| `hideInputs`               | `hide-inputs`                |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                         | `false`              |\r\n| `loginLabel`               | `login-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                          | `\"Sign in\"`          |\r\n| `loginPath`                | `login-path`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                          | `\"/login\"`           |\r\n| `nextPage`                 | `next-page`                  |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                          | `\"/\"`                |\r\n| `pageLabel`                | `page-label`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                          | `\"Register\"`         |\r\n| `passwordLabel`            | `password-label`             |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                          | `\"Password\"`         |\r\n| `redirectPath`             | `redirect-path`              | The page that users are redirected to from the verification email. | `string`                                                                                                                                                                                                                                                                                                                                                                                                          | `\"/verifyEmail\"`     |\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";
 
-const ResetPasswordReadme = "# sqm-portal-reset-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| `confirmPassword`           | `confirm-password`             |                                             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                            | `false`                 |\r\n| `confirmPasswordFieldLabel` | `confirm-password-field-label` |                                             | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Confirm Password\"`    |\r\n| `continueButtonText`        | `continue-button-text`         | Displayed after a successful password reset | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Continue\"`            |\r\n| `demoData`                  | --                             |                                             | `{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; content: { passwordResetHeader: string; resetPasswordHeader: string; continueButtonText: string; resetPasswordButtonText: string; confirmPasswordFieldLabel: string; passwordFieldLabel: string; }; }; }` | `undefined`             |\r\n| `nextPage`                  | `next-page`                    |                                             | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"/\"`                   |\r\n| `passwordFieldLabel`        | `password-field-label`         |                                             | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"New Password\"`        |\r\n| `passwordResetHeader`       | `password-reset-header`        | Displayed after a successful password reset | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Password reset\"`      |\r\n| `resetPasswordButtonText`   | `reset-password-button-text`   |                                             | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Reset Password\"`      |\r\n| `resetPasswordHeader`       | `reset-password-header`        |                                             | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Reset your password\"` |\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- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-reset-password --> sqm-form-message\r\n  sqm-portal-reset-password --> sqm-password-field\r\n  style sqm-portal-reset-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 ResetPasswordReadme = "# sqm-portal-reset-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| `confirmPassword`           | `confirm-password`             |                                                                                                  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                            | `false`                 |\r\n| `confirmPasswordFieldLabel` | `confirm-password-field-label` |                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Confirm Password\"`    |\r\n| `continueButtonText`        | `continue-button-text`         | Displayed after a successful password reset                                                      | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Continue\"`            |\r\n| `demoData`                  | --                             |                                                                                                  | `{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; content: { passwordResetHeader: string; resetPasswordHeader: string; continueButtonText: string; resetPasswordButtonText: string; confirmPasswordFieldLabel: string; passwordFieldLabel: string; }; }; }` | `undefined`             |\r\n| `failedPage`                | `failed-page`                  | The page that users are redirected to if the reset fails due to outdated password reset attempt. | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"/\"`                   |\r\n| `nextPage`                  | `next-page`                    | The page that users are redirected to when the password reset succeeds.                          | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"/\"`                   |\r\n| `passwordFieldLabel`        | `password-field-label`         |                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"New Password\"`        |\r\n| `passwordResetHeader`       | `password-reset-header`        | Displayed after a successful password reset                                                      | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Password reset\"`      |\r\n| `resetPasswordButtonText`   | `reset-password-button-text`   |                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Reset Password\"`      |\r\n| `resetPasswordHeader`       | `reset-password-header`        |                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Reset your password\"` |\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- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-reset-password --> sqm-form-message\r\n  sqm-portal-reset-password --> sqm-password-field\r\n  style sqm-portal-reset-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 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 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| `redirectPath`            | `redirect-path`             | The page that users are redirected to from the verification email. | `string`                                                                                                                                                                                    | `\"/verifyEmail\"`                                                                                  |\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 -->\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| `failedPage` | `failed-page` | The page that users are redirected to if verification fails due to outdated verification attempt. | `string`                                                                                             | `\"/\"`       |\r\n| `nextPage`   | `next-page`   | The page that users are redirected to when the verification succeeds.                             | `string`                                                                                             | `\"/\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-verify-email --> sqm-form-message\r\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
 const PortalTemplates_stories = {
   title: "Templates / Portal",
@@ -26528,19 +26661,24 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
   states: {
     content: {
       text: {
-        continueText: "Continue",
-        cancelText: "Cancel",
-        continueToConfirmationText: "Continue to confirmation",
-        backText: "Back",
-        redeemText: "Redeem",
-        doneText: "Done",
+        buttonText: "Exchange Rewards",
+        notAvailableError: "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }",
         chooseRewardTitle: "Choose reward",
         chooseAmountTitle: "Amount",
         confirmationTitle: "Confirm",
+        cancelText: "Cancel",
+        backText: "Back",
+        continueText: "Continue",
+        continueToConfirmationText: "Continue to confirmation",
+        redeemText: "Redeem",
         redeemTitle: "Confirm and redeem",
+        redemptionSuccessText: "Successfully redeemed {sourceValue} for {destinationValue}",
+        doneText: "Done",
+        toolTipText: "Copied!",
+        selectText: "Select amount to receive",
+        sourceAmountMessage: "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}",
         rewardRedeemedText: "Reward redeemed",
-        queryError: "An error occured trying to redeem this reward. Please try again.",
-        notAvailableError: "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }",
+        redemptionError: "An error occured trying to redeem this reward. Please try again",
       },
     },
     redeemStage: stage,
@@ -26815,7 +26953,7 @@ const props$2 = {
 };
 const steps1 = {
   cardTitle: "Invite your friends to Klip",
-  description: "Earn up to $1200 in rewards for each referral",
+  description: "Send your referral link to a friend or share it through email, Twitter, or Facebook",
   color: "white",
   background: "#5B3EDA",
   icon: "person-plus-fill",
@@ -26864,7 +27002,7 @@ const ProgramExplainerStep_stories = {
 const Example1 = () => {
   const props = {
     cardTitle: "Invite your friends to Klip",
-    description: "Earn up to $1200 in rewards for each referral",
+    description: "Send your referral link to a friend or share it through email, Twitter, or Facebook",
     color: "white",
     background: "#5B3EDA",
     icon: "person-plus-fill",
@@ -26984,7 +27122,7 @@ const CardFeed_stories = {
 };
 const props$3 = {
   width: 347,
-  gap: "xx-large",
+  gap: 24,
 };
 const taskCardProps = {
   rewardAmount: "20",
@@ -26994,6 +27132,7 @@ const taskCardProps = {
   repeatable: false,
   showProgressBar: false,
   progress: 0,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
   goal: 1,
   buttonText: "Take survey",
   buttonLink: "https://example.com/",
@@ -27001,6 +27140,9 @@ const taskCardProps = {
   showExpiry: false,
   rewardDuration: null,
   loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
   finite: 0,
 };
 const coupleActions$1 = {
@@ -27010,6 +27152,7 @@ const coupleActions$1 = {
   description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
   repeatable: false,
   showProgressBar: true,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
   steps: true,
   progress: 1,
   goal: 5,
@@ -27019,6 +27162,9 @@ const coupleActions$1 = {
   showExpiry: false,
   rewardDuration: null,
   loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
   finite: 0,
 };
 const manyActions$1 = {
@@ -27029,6 +27175,7 @@ const manyActions$1 = {
   repeatable: false,
   showProgressBar: true,
   progress: 100,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
   goal: 500,
   progressBarUnit: "$",
   buttonText: "Take survey",
@@ -27037,6 +27184,9 @@ const manyActions$1 = {
   showExpiry: false,
   rewardDuration: null,
   loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
   finite: 0,
 };
 const TaskCardGrid = () => {
@@ -27074,9 +27224,19 @@ const PortalContainer_stories = {
 const TooWideColumn = () => (h$1("div", { style: { width: "200px", border: "1px dashed grey" } },
   h$1("sqm-portal-container", null,
     h$1("div", { style: { background: "grey", border: "1px solid red" } }, "Small"),
-    h$1("div", { style: { background: "blue", width: "1000px" } }, "Too wide, content goes off the side of the page for ever and is hidden."))));
+    h$1("div", { style: { background: "lightblue", width: "1000px" } }, "Too wide, content goes off the side of the page for ever and is hidden."))));
 const TooWideRow = () => (h$1("div", { style: { width: "500px", border: "1px dashed grey" } },
   h$1("sqm-portal-container", { direction: "row", "min-width": "160px" },
+    h$1("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h$1("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h$1("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+const HalfWidth = () => (h$1("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  h$1("sqm-portal-container", { direction: "row", minWidth: "160px", maxWidth: "50%" },
+    h$1("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h$1("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h$1("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+const FullWidth = () => (h$1("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  h$1("sqm-portal-container", { direction: "row", maxWidth: "100%" },
     h$1("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
     h$1("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h$1("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
@@ -27085,7 +27245,9 @@ const PortalContainer$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalContainer_stories,
   TooWideColumn: TooWideColumn,
-  TooWideRow: TooWideRow
+  TooWideRow: TooWideRow,
+  HalfWidth: HalfWidth,
+  FullWidth: FullWidth
 });
 
 /**
@@ -29881,12 +30043,34 @@ const TaskCard$3 = class {
      * @uiName Show Goal Expiry
      */
     this.showExpiry = false;
+    /**
+     * @uiName Expiry Date Message
+     */
+    this.expiryMessage = "Ends {endDate}";
     /**
      * @uiName Reward Duration
      * @uiWidget DateRange
      * @uiOptions {"allowPastDates":true, "months": 1}
      */
     this.rewardDuration = "/";
+    /**
+     * Shown to users before the start of the task duration.
+     *
+     * @uiName Start Date Message
+     */
+    this.startsOnMessage = "Starts {startDate}";
+    /**
+     * Shown to users after the end of the task duration.
+     *
+     * @uiName Ended Date Message
+     */
+    this.endedMessage = "Ended {endDate}";
+    /**
+     * Displays the amount of times that a user has completed a repeatable task.
+     *
+     * @uiName Completed Count Text
+     */
+    this.completedText = "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}";
     /**
      * @uiName CTA Button Text
      */