@saasquatch/mint-components 1.3.3-6 → 1.4.1-0

package/dist/esm/{sqm-divided-layout_30.entry.js → sqm-divided-layout_26.entry.js}

@@ -1,8 +1,8 @@
-import { h, r as registerInstance, c as Host, d as getAssetPath } from './index-17b4da69.js';
+import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
 import { m as h$1, j as useState, e as useEffect, f as useRef, n as d$2, y as y$1, b as browser, u as useReducer, c as createCommonjsModule, a as commonjsGlobal, k as useMemo } from './extends-3a3f9fe2.js';
-import { i as intl, a as insertCSS } from './global-0e81c5e6.js';
+import { i as intl, a as insertCSS } from './global-2e50d2dc.js';
 import { u as useCallback } from './use-callback-b38a1523.js';
-import { d as dist, T as T$1, e as en, b as be, j as j$1, Z as Ze, r as rn, D as De, q as qe, P as P$1, E as Ee, M as M$1, a as sn, c as an, x as x$1, f as D$1, L as L$1, N as Ne, A as A$1 } from './index.module-9b5bb6a2.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 } from './index.module-1e92a7a3.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
 import { g as getProps, a as getMissingProps } from './utils-454405f5.js';
@@ -11,21 +11,21 @@ import { E as ErrorStyles, H as HostBlock, A as AuthWrapper, a as AuthColumn, b
 import { P as PortalContainerView } from './sqm-portal-container-view-73757ca5.js';
 import { P as PortalSectionView } from './sqm-portal-section-view-f0876545.js';
 import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
-import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-3f0dc20e.js';
-import { u as useRerenderListener, a as useRequestRerender } from './re-render-57ac6584.js';
-import { p as pathToRegexp, B as BigStatView, u as useBigStat, a as useDemoBigStat } from './useDemoBigStat-660c8672.js';
+import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-387f0870.js';
+import { u as useRerenderListener } from './re-render-b8468637.js';
+import { p as pathToRegexp, B as BigStatView, u as useBigStat, a as useDemoBigStat } from './useDemoBigStat-5557504e.js';
 import { S as ShareLinkView } from './sqm-share-link-view-9282b8e8.js';
-import { L as LeaderboardView, u as useLeaderboard, S as ShadowViewAddon } from './ShadowViewAddon-2338f393.js';
+import { L as LeaderboardView, u as useLeaderboard, S as ShadowViewAddon } from './ShadowViewAddon-5f66de48.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-2242502c.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-79b0748c.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-a48bca9b.js';
 import { S as StatContainerView } from './sqm-stat-container-view-4133feb6.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-831dea85.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-9f3c79c3.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-e3a6a716.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-8f253fb7.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-e366e94a.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-b8a2f15e.js';
+import { P as PoweredByImg$1, a as PortalFooterView } from './sqm-portal-footer-view-f12d5e5a.js';
 import { H as HeroView } from './sqm-hero-view-bfd8abd1.js';
 import { N as NameFieldsView } from './sqm-name-fields-view-4162fb7b.js';
 
@@ -194,13 +194,13 @@ const defaultFormState = {
   error: "",
 };
 function useEditProfile(props) {
-  const userIdent = T$1();
+  const userIdent = ne$1();
   const [showEdit, setShowEdit] = useState(false);
   const [error, setError] = useState("");
   const [userData, setUserData] = useState(undefined);
   const [formState, setFormState] = useState(defaultFormState);
-  const userDataResponse = en(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
-  const [upsertUser, upsertUserResponse] = be(UPSERT_USER);
+  const userDataResponse = cn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
+  const [upsertUser, upsertUserResponse] = De(UPSERT_USER);
   useEffect(() => {
     if ((upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading) || !showEdit)
       return;
@@ -426,12 +426,12 @@ function NavigationMenuView(props) {
 }
 
 function handleMenu(e) {
-  rn.push(e.detail.item.value);
+  mn.push(e.detail.item.value);
 }
 function useNavigationMenu(props) {
   const ref = useRef();
-  const [, rerender] = Ze();
-  const user = T$1();
+  const [, rerender] = sn();
+  const user = ne$1();
   useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => handleMenu(e));
@@ -1125,11 +1125,11 @@ function PortalChangePasswordView(props) {
 
 function usePortalChangePassword(props) {
   var _a, _b, _c, _d;
-  const [request, { loading, errors, data }] = De();
+  const [request, { loading, errors, data }] = He();
   const [open, setOpen] = useState(false);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState(false);
-  const user = T$1();
+  const user = ne$1();
   const submit = async (event) => {
     var _a;
     setSuccess(false);
@@ -1304,7 +1304,7 @@ function PortalFrameView(props, children) {
 }
 
 function usePortalFrame(footerContent, headerContent) {
-  const [, rerender] = Ze();
+  const [, rerender] = sn();
   return {
     data: {
       footer: footerContent,
@@ -1390,9 +1390,9 @@ function PortalLoginView(props) {
         content.secondaryButton))));
 }
 
-function usePortalLogin({ nextPage }) {
+function usePortalLogin(props) {
   var _a, _b, _c, _d;
-  const [request, { loading, errors, data }] = qe();
+  const [request, { loading, errors, data }] = $e();
   const [error, setError] = useState("");
   const urlParams = new URLSearchParams(window.location.search);
   const nextPageOverride = urlParams.get("nextPage");
@@ -1409,8 +1409,8 @@ function usePortalLogin({ nextPage }) {
     var _a;
     if ((_a = data === null || data === void 0 ? void 0 : data.authenticateManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
       urlParams.delete("nextPage");
-      rn.push({
-        pathname: nextPageOverride || nextPage,
+      mn.push({
+        pathname: nextPageOverride || props.nextPage,
         search: urlParams.toString() && "?" + urlParams.toString(),
       });
     }
@@ -1426,6 +1426,8 @@ function usePortalLogin({ nextPage }) {
     states: {
       loading,
       error: errorMessage,
+      registerPath: props.registerPath,
+      forgotPasswordPath: props.forgotPasswordPath
     },
     callbacks: {
       submit,
@@ -1465,6 +1467,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$1(this);
   }
   disconnectedCallback() { }
@@ -1473,8 +1483,8 @@ const PortalLogin = class {
       ? useLoginDemo(this)
       : usePortalLogin(this);
     const content = {
-      forgotPasswordButton: (h("slot", { name: "forgotPassword" }, h("a", { onClick: () => rn.push("/forgotPassword") }, this.forgotPasswordLabel))),
-      secondaryButton: (h("slot", { name: "secondaryButton" }, h("sl-button", { type: "text", disabled: states.loading, onClick: () => rn.push("/register") }, this.registerLabel))),
+      forgotPasswordButton: (h("slot", { name: "forgotPassword" }, h("a", { onClick: () => mn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+      secondaryButton: (h("slot", { name: "secondaryButton" }, h("sl-button", { type: "text", disabled: states.loading, onClick: () => mn.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -1485,7 +1495,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");
@@ -1567,7 +1582,7 @@ function PortalRegisterView(props) {
 
 const CONTEXT_NAME$1 = "sq:validation-state";
 function useValidationState(formState) {
-  const host = P$1();
+  const host = S$1();
   const [validationState, setValidationState] = y$1(host, CONTEXT_NAME$1, formState);
   return { validationState, setValidationState };
 }
@@ -5447,7 +5462,7 @@ function usePortalRegister(props) {
   var _a, _b, _c, _d, _e, _f;
   const formRef = useRef(null);
   const { validationState, setValidationState } = useValidationState({});
-  const [request, { loading, errors, data }] = Ee();
+  const [request, { loading, errors, data }] = Ve();
   const submit = async (event) => {
     let formControls = event.target.getFormControls();
     let formData = {};
@@ -5487,10 +5502,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);
@@ -5510,7 +5527,7 @@ function usePortalRegister(props) {
   useEffect(() => {
     var _a;
     if ((_a = data === null || data === void 0 ? void 0 : data.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
-      rn.push(props.nextPage);
+      mn.push(props.nextPage);
     }
   }, [(_a = data === null || data === void 0 ? void 0 : data.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token]);
   useEffect(() => {
@@ -5540,6 +5557,7 @@ function usePortalRegister(props) {
       validationState,
       confirmPassword: props.confirmPassword,
       hideInputs: props.hideInputs,
+      loginPath: props.loginPath,
     },
     callbacks: {
       submit,
@@ -5559,6 +5577,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
      */
@@ -5595,6 +5619,10 @@ const PortalRegister = class {
      * @uiName Heading label
      */
     this.pageLabel = "Register";
+    /**
+     * @uiName Sign in button redirection path
+     */
+    this.loginPath = "/login";
     h$1(this);
   }
   disconnectedCallback() { }
@@ -5604,7 +5632,7 @@ const PortalRegister = class {
       : usePortalRegister(this);
     const content = {
       formData: h("slot", { name: "formData" }),
-      secondaryButton: (h("slot", { name: "secondaryButton" }, h("sl-button", { type: "text", disabled: states.loading, onClick: () => rn.push("/login") }, this.loginLabel))),
+      secondaryButton: (h("slot", { name: "secondaryButton" }, h("sl-button", { type: "text", disabled: states.loading, onClick: () => mn.push(states.loginPath) }, this.loginLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -5622,6 +5650,7 @@ function useRegisterDemo(props) {
       confirmPassword: true,
       hideInputs: props.hideInputs || false,
       customPasswordField: false,
+      loginPath: "/login",
     },
     callbacks: {
       submit: async (_event) => {
@@ -5639,10 +5668,10 @@ const debug = browser('sq:useProgramMenu');
 const UPDATE_PROGRAM_EVENT = 'sq:update-program-id';
 function useProgramMenu(props) {
   const programId = M$1();
-  const host = P$1();
+  const host = S$1();
   debug({ programId, props });
   const ref = useRef();
-  const [, rerender] = Ze();
+  const [, rerender] = sn();
   useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('sl-select', (e) => {
@@ -5691,8 +5720,8 @@ const GET_USER_DETAILS = dist.gql `
 function useReferralIframe(props) {
   var _a;
   const programId = M$1();
-  const user = T$1();
-  const { data } = en(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const user = ne$1();
+  const { data } = cn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   return {
     states: {
       content: props,
@@ -5756,7 +5785,7 @@ const styleString$5 = sheet$5.toString();
 function RequiredPropsError({ missingProps }) {
   if (!missingProps)
     return false;
-  const host = P$1();
+  const host = S$1();
   const [detailsOpen, setDetailsOpen] = useState(false);
   return (h("sl-alert", { type: "danger", open: true, class: sheet$5.classes.Alert },
     h("style", { type: "text/css" }, styleString$5),
@@ -5873,7 +5902,7 @@ function ReferralTableView(props) {
 }
 
 function useChildElements() {
-  const host = P$1();
+  const host = S$1();
   const initialState = host.children.length ? Array.from(host.children) : [];
   const [childElements, setChildElements] = useState(initialState);
   useEffect(() => {
@@ -6046,7 +6075,7 @@ const GET_REFERRAL_DATA = gql `
 `;
 function useReferralTable(props, emptyElement, loadingElement) {
   var _a, _b;
-  const user = T$1();
+  const user = ne$1();
   const programIdContext = M$1();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
@@ -6069,13 +6098,13 @@ function useReferralTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const { data: referrerResponse, loading: referrerLoading, refetch, } = en(GET_REFERRER_DATA, {
+  const { data: referrerResponse, loading: referrerLoading, refetch, } = cn(GET_REFERRER_DATA, {
     programId: programId === "classic" ? null : programId,
     rewardFilter,
   }, !props.showReferrer || !(user === null || user === void 0 ? void 0 : user.jwt));
   const referrerData = (_b = referrerResponse === null || referrerResponse === void 0 ? void 0 : referrerResponse.viewer) === null || _b === void 0 ? void 0 : _b.referredByReferral;
   const showReferrerRow = props.showReferrer && !!(referrerData === null || referrerData === void 0 ? void 0 : referrerData.dateReferralStarted);
-  const { envelope: referralData, states, callbacks, } = sn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
+  const { envelope: referralData, states, callbacks, } = pn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
     limit: props.perPage,
     offset: 0,
   }, {
@@ -14745,1094 +14774,111 @@ const ReferralTableUserCell = class {
   }
 };
 
-const GET_EXCHANGE_LIST = dist.gql `
-  query getExchangeList {
-    viewer {
-      ... on User {
-        visibleRewardExchangeItems(limit: 20, offset: 0) {
-          data {
-            key
-            name
-            description
-            imageUrl
-            available
-            unavailableReason
-            unavailableReasonCode
-            ruleType
-            sourceUnit
-            sourceValue
-            prettySourceValue
-            sourceMinValue
-            prettySourceMinValue
-            sourceMaxValue
-            prettySourceMaxValue
-            destinationMinValue
-            prettyDestinationMinValue
-            destinationMaxValue
-            prettyDestinationMaxValue
-            globalRewardKey
-            destinationUnit
-            steps {
-              sourceValue
-              prettySourceValue
-              destinationValue
-              prettyDestinationValue
-              available
-              unavailableReasonCode
-            }
-          }
-          totalCount
-        }
-      }
-    }
-  }
-`;
-const EXCHANGE = dist.gql `
-  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
-    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
-      reward {
-        id
-        fuelTankCode
-      }
-    }
-  }
-`;
-function useRewardExchangeList(props) {
-  var _a, _b, _c, _d;
-  const [exchangeState, setExchangeState] = useReducer((state, next) => ({
-    ...state,
-    ...next,
-  }), {
-    selectedItem: undefined,
-    selectedStep: undefined,
-    redeemStage: "chooseReward",
-    amount: 0,
-    exchangeError: false,
-  });
-  const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
-  const user = T$1();
-  const [exchange, { data: exchangeResponse, errors }] = be(EXCHANGE);
-  const { data, loading, refetch } = en(GET_EXCHANGE_LIST, !(user === null || user === void 0 ? void 0 : user.jwt));
+const debug$1 = browser("sq:useRouter");
+function matchPath(pattern, page) {
+  if (!pattern)
+    return;
+  const regexp = pathToRegexp(pattern);
+  return regexp.exec(page);
+}
+function useRouter() {
+  const location = vn();
+  const host = S$1();
+  const [slot, setSlot] = useState(undefined);
+  const [container, setContainer] = useState(undefined);
+  const page = location.pathname;
+  // convert sqm-routes into templates
+  useEffect(() => {
+    const routes = host.querySelectorAll(`sqm-route`);
+    const routesArray = Array.from(routes);
+    routesArray.forEach((route) => {
+      const newTemplate = document.createElement("template");
+      newTemplate.setAttribute("path", route.path);
+      newTemplate.innerHTML = route.innerHTML;
+      route.parentNode.appendChild(newTemplate);
+      route.parentNode.removeChild(route);
+    });
+  }, []);
   useEffect(() => {
     var _a, _b;
-    if ((_b = (_a = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _a === void 0 ? void 0 : _a.reward) === null || _b === void 0 ? void 0 : _b.id) {
-      setExchangeState({ redeemStage: "success", exchangeError: false });
-    }
-    if (!!errors) {
-      setExchangeState({ exchangeError: true });
-    }
-  }, [exchangeResponse, errors]);
-  function exchangeReward() {
-    if (!selectedItem)
+    if (!container || !slot) {
+      debug$1("DOM not ready for navigation rendering on:", page);
       return;
-    let exchangeVariables = {
-      accountId: user === null || user === void 0 ? void 0 : user.accountId,
-      userId: user.id,
-    };
-    switch (selectedItem.ruleType) {
-      case "FIXED_GLOBAL_REWARD":
-        exchangeVariables = {
-          ...exchangeVariables,
-          redeemCreditInput: {
-            amount: selectedItem.sourceValue,
-            unit: selectedItem.sourceUnit,
-          },
-          globalRewardKey: selectedItem.globalRewardKey,
-        };
-        break;
-      case "VARIABLE_GLOBAL_REWARD":
-        exchangeVariables = {
-          ...exchangeVariables,
-          redeemCreditInput: {
-            amount: amount,
-            unit: selectedItem.sourceUnit,
-          },
-          globalRewardKey: selectedItem.globalRewardKey,
-          rewardInput: {
-            valueInCents: selectedStep.destinationValue,
-          },
-        };
-        break;
-      case "VARIABLE_CREDIT_REWARD":
-        exchangeVariables = {
-          ...exchangeVariables,
-          redeemCreditInput: {
-            amount: amount,
-            unit: selectedItem.sourceUnit,
-          },
-          rewardInput: {
-            type: "CREDIT",
-            unit: selectedItem.destinationUnit,
-            assignedCredit: selectedStep.destinationValue,
-          },
-        };
-        break;
-      default:
-        exchangeVariables = {
-          ...exchangeVariables,
-          redeemCreditInput: {
-            amount: selectedItem.sourceValue,
-            unit: selectedItem.sourceUnit,
-          },
-          globalRewardKey: selectedItem.globalRewardKey,
-        };
     }
-    exchange({ exchangeRewardInput: exchangeVariables });
-  }
-  const resetState = (refresh) => {
-    refresh && refetch();
-    setExchangeState({
-      amount: 0,
-      selectedStep: undefined,
-      selectedItem: undefined,
-      exchangeError: false,
-      redeemStage: "chooseReward",
+    // <template>
+    const templates = slot.querySelectorAll(`template`);
+    const templatesArray = Array.from(templates);
+    const template = templatesArray.find((template) => {
+      var _a, _b, _c;
+      //@ts-ignore
+      const path = (_b = (_a = template.attributes) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.nodeValue;
+      if ((_c = matchPath(path, page)) === null || _c === void 0 ? void 0 : _c.length)
+        return template;
     });
-  };
-  function setStage(stage) {
-    setExchangeState({ redeemStage: stage });
-  }
+    //@ts-ignore - can't access template attributes directly
+    const templatePath = (_b = (_a = template === null || template === void 0 ? void 0 : template.attributes) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.nodeValue;
+    debug$1({
+      containerDatasetPage: container.dataset.page,
+      templatePath,
+      page,
+    });
+    // if no routes found, and the old route doesn't match the new route
+    if (!template) {
+      // No matching page, display nothing
+      debug$1("No matching page found for ", page, ", so render nothing");
+      container.innerHTML = "";
+      container.dataset.page = page;
+      return;
+    }
+    debug$1("Page updated to ", page, template);
+    // if pathToRegexp results truthy or page is an exact match
+    if (!!matchPath(templatePath, container.dataset.page)) {
+      debug$1("don't rerender");
+      // Same page, do not re-render
+      // Reduces dom mutations, speeds up page speed
+    }
+    else if (template) {
+      container.innerHTML = template.innerHTML;
+      container.dataset.page = page;
+    }
+  }, [slot, container, page]);
   return {
-    states: {
-      content: {
-        text: props,
-      },
-      selectedItem,
-      redeemStage,
-      amount,
-      selectedStep,
-      exchangeError,
-      loading,
-    },
-    data: {
-      exchangeList: (_b = (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.visibleRewardExchangeItems) === null || _b === void 0 ? void 0 : _b.data,
-      fuelTankCode: (_d = (_c = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _c === void 0 ? void 0 : _c.reward) === null || _d === void 0 ? void 0 : _d.fuelTankCode,
-    },
     callbacks: {
-      exchangeReward,
-      setExchangeState,
-      setStage,
-      resetState,
+      setSlot,
+      setContainer,
     },
   };
 }
 
-const ExchangeArrows = () => (h("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("circle", { cx: "15", cy: "15", r: "15", fill: "white" }),
-  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.6255 21.783C10.5129 21.8963 10.3597 21.96 10.2 21.96C10.0402 21.96 9.88705 21.8963 9.77442 21.783L5.87442 17.8597C5.64081 17.6247 5.64194 17.2448 5.87695 17.0112C6.11197 16.7775 6.49186 16.7787 6.72548 17.0137L9.59995 19.9054V8.52001C9.59995 8.18864 9.86858 7.92001 10.2 7.92001C10.5313 7.92001 10.8 8.18864 10.8 8.52001V19.9054L13.6744 17.0137C13.908 16.7787 14.2879 16.7775 14.5229 17.0112C14.758 17.2448 14.7591 17.6247 14.5255 17.8597L10.6255 21.783ZM20.2255 8.09707C20.1129 7.98378 19.9597 7.92007 19.8 7.92007C19.6402 7.92007 19.487 7.98378 19.3744 8.09707L15.4744 12.0204C15.2408 12.2554 15.2419 12.6353 15.477 12.8689C15.712 13.1025 16.0919 13.1014 16.3255 12.8664L19.2 9.97473V21.3601C19.2 21.6914 19.4686 21.9601 19.8 21.9601C20.1313 21.9601 20.4 21.6914 20.4 21.3601V9.97473L23.2744 12.8664C23.508 13.1014 23.8879 13.1025 24.1229 12.8689C24.358 12.6353 24.3591 12.2554 24.1255 12.0204L20.2255 8.09707Z", fill: "#333333" })));
-const CheckMark = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "7", viewBox: "0 0 10 7", fill: "none" },
-  h("path", { d: "M2.12828 2.71485C1.72536 2.33712 1.09253 2.35754 0.714799 2.76045C0.337068 3.16336 0.357483 3.7962 0.760395 4.17393L2.12828 2.71485ZM3.81471 5.66661L3.13076 6.39615C3.51542 6.75677 4.11399 6.75677 4.49865 6.39615L3.81471 5.66661ZM9.23939 1.95171C9.6423 1.57397 9.66271 0.941139 9.28498 0.538227C8.90725 0.135315 8.27442 0.114901 7.87151 0.492631L9.23939 1.95171ZM0.760395 4.17393L3.13076 6.39615L4.49865 4.93708L2.12828 2.71485L0.760395 4.17393ZM4.49865 6.39615L9.23939 1.95171L7.87151 0.492631L3.13076 4.93708L4.49865 6.39615Z", fill: "white" })));
-
-function Dot({ active, completed, incomplete, }) {
-  return (h("div", { style: {
-      flex: "0 0 0",
-      content: "''",
-      height: "4px",
-      borderRadius: "4px",
-      background: incomplete ? "#E5E5E5" : "#9E9E9E",
-      position: "relative",
-      bottom: "0",
-      left: "0",
-      display: "flex",
-      justifyContent: "center",
-      columnGap: "50px",
-      marginRight: "-2px",
-      boxSizing: "content-box",
-    } },
-    h("div", { style: {
-        backgroundColor: completed ? "#9E9E9E" : "#FFF",
-        border: active
-          ? "3px solid #9E9E9E"
-          : incomplete
-            ? "3px solid #E5E5E5"
-            : "3px solid #9E9E9E",
-        borderRadius: "50%",
-        width: "10px",
-        height: "10px",
-        margin: "-6px auto 0px",
-        zIndex: "1",
-        boxSizing: "content-box",
-      } }, completed && (h("div", { style: { top: "-6px", position: "relative" } },
-      h(CheckMark, null))))));
-}
-function ProgressLine({ incomplete = false, active = false }) {
-  return (h("div", { style: {
-      content: "''",
-      flex: "0.5 0.5 0",
-      height: "4px",
-      borderRadius: "4px",
-      background: incomplete || active ? "#E5E5E5" : "#9E9E9E",
-      position: "relative",
-      bottom: "0",
-      left: "0",
-      display: "flex",
-      justifyContent: "center",
-      columnGap: "50px",
-      marginRight: "-2px",
-      boxSizing: "content-box",
-    } }));
-}
-function Progress({ active, completed, incomplete }) {
-  return [
-    h(ProgressLine, { incomplete: incomplete }),
-    h(Dot, { active: active, completed: completed, incomplete: incomplete }),
-    h(ProgressLine, { incomplete: incomplete, active: active }),
-  ];
-}
-function ProgressBar({ stageCount, currentStage, }) {
-  return (h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage })))));
-}
-
-const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
-const stageProgressList = {
-  chooseReward: "Choose reward",
-  chooseAmount: "Amount",
-  confirmation: "Confirm",
-};
-function RewardExchangeView(props) {
-  console.log(props);
-  const style = {
-    HostBlock: HostBlock,
-    Container: {
-      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%",
-        // maxWidth: "350px",
-        display: "flex",
-        margin: "0 auto",
-      },
-      "&::part(body)": {
-        padding: 0,
-        display: "flex",
-        width: "100%",
-      },
-      "& .text-area": {
-        textAlign: "left",
-        padding: "8px",
-      },
-      "& .title": {
-        fontSize: "var(--sl-font-size-medium)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-      },
-      "& .amount": {
-        fontSize: "var(--sl-font-size-small)",
-      },
-      "& .error": {
-        fontSize: "var(--sl-font-size-small)",
-        color: "var(--sl-color-warning-500)",
-      },
-      "& .selected-outline": {
-        width: "18px",
-        height: "18px",
-        minWidth: "18px",
-        borderRadius: "50%",
-        background: "var(--sl-color-primary-500)",
-        position: "relative",
-        margin: "-9px",
-        left: "100%",
-      },
-      "& .selected-checkmark": {
-        position: "relative",
-        top: "-6px",
-      },
-    },
-    Drawer: {
-      "&::part(base)": {
-        minWidth: "400px",
-        maxWidth: "700px",
-        width: "50%",
-        margin: "0 auto",
-        right: "0",
-      },
-      "&::part(panel)": {
-        height: "85vh",
-        width: "100%",
-      },
-    },
-    FullImage: {
-      objectFit: "contain",
-      maxWidth: "100%",
-      height: "150px",
-      display: "flex",
-      margin: "0 auto",
-    },
-    PreviewImage: {
-      objectFit: "contain",
-      width: "120px",
-      height: "120px",
-      flex: 0.33,
-    },
-    InputBox: {
-      width: "100%",
-      marginBottom: "20px",
-    },
-    Select: {
-      "&::part(base)": {
-        flex: "0.75",
-      },
-      "&::part(menu)": {
-        maxHeight: "40vh",
-      },
-    },
-    Buttons: {
-      marginLeft: "auto",
-      width: "100%",
-      maxWidth: "300px",
-    },
-    Button: {
-      margin: "10px 0",
-      display: "block",
-      textAlign: "center",
-      cursor: "pointer",
-    },
-    ProgressBar: {
-      fontSize: "80%",
-      marginBottom: "20px",
-      "& .text-area": {
-        marginTop: "5px",
-        display: "flex",
-        justifyContent: "center",
-        textAlign: "center",
-        whiteSpace: "nowrap",
-        marginBottom: "6px",
-        "& .text": {
-          flex: "1 1 0",
-        },
-        "& .text.subdued": {
-          color: "#BDBDBD",
-        },
-      },
-    },
-    KutayCard: {
-      "&::part(base)": {
-        boxShadow: "none",
-      },
-    },
-    KutayButton: {
-      display: "flex",
-      flexWrap: "wrap-reverse",
-      margin: "var(--sl-spacing-medium) 0",
-      "& .cancel": {
-        marginLeft: "auto",
-        marginRight: "var(--sl-spacing-medium)",
-        "&::part(base)": {
-          fontWeight: "var(--sl-font-weight-normal)",
-          color: "var(--sl-color-neutral-1000)",
-        },
-        "@media (max-width: 1024px)": {
-          width: "100%",
-          marginRight: "0",
-        },
-      },
-      "& .continue": {
-        "&::part(base)": {
-          background: "var(--sl-color-primary-500)",
-          borderColor: "var(--sl-color-primary-500)",
-          fontWeight: "var(--sl-font-weight-normal)",
-          color: "var(--sl-color-neutral-0)",
-        },
-        "@media (max-width: 1024px)": {
-          width: "100%",
-        },
-      },
-      "& .continue.right": {
-        marginLeft: "auto",
-      },
-    },
-  };
-  // JSS config
-  jss.setup(create());
-  const sheet = jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const { states, data, callbacks } = props;
-  const { selectedItem, selectedStep } = states;
-  function getInput() {
-    var _a, _b;
-    const item = states.selectedItem;
-    if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
-      return h("span", null, item === null || item === void 0 ? void 0 : item.prettySourceValue);
-    if (!((_a = item.steps) === null || _a === void 0 ? void 0 : _a.length)) {
-      return h("p", null,
-        "Not enough ",
-        item.sourceUnit,
-        " to redeem for this reward.");
-    }
-    return (h("sl-select", { style: { width: "auto" }, label: "Select amount to receive", class: sheet.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
-        var _a, _b, _c, _d, _e;
-        return callbacks.setExchangeState({
-          amount: (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.sourceValue,
-          selectedStep: (_e = (_d = e.detail) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.value,
-        });
-      } }, (_b = item.steps) === null || _b === void 0 ? void 0 : _b.map((step) => {
-      var _a, _b;
-      return (h("sl-menu-item", { value: step, disabled: !step.available },
-        step.prettyDestinationValue,
-        h("div", { slot: "suffix", style: { fontSize: "75%", float: "right" } },
-          step.prettySourceValue,
-          step.unavailableReasonCode && (h("p", { style: { fontSize: "70%", color: "#F2994A" } }, intl.formatMessage({
-            id: "unavailableCode",
-            defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
-          }, {
-            unavailableReason: step.unavailableReason || step.unavailableReasonCode,
-          }))))));
-    })));
-  }
-  function chooseReward() {
-    var _a;
-    return [
-      h("div", { style: {
-          display: "grid",
-          justifyContent: "center",
-          gap: "20px",
-          gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
-        } }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
-        var _a, _b;
-        const style = {
-          boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
-            ? "0 0 0 2px var(--sl-color-primary-500)"
-            : "none",
-          marginBottom: "10px 0",
-          borderRadius: "var(--sl-border-radius-medium)",
-          flex: "1",
-          minWidth: "100%",
-          color: !item.available && "#eee",
-        };
-        const amount = item.ruleType === "FIXED_GLOBAL_REWARD"
-          ? item.prettySourceValue
-          : `${item.sourceMinValue} to ${item.prettySourceMaxValue}`;
-        return (h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
-          h("sl-card", { class: sheet.classes.Base, onClick: () => item.available &&
-              callbacks.setExchangeState({ selectedItem: item }) },
-            item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (h("div", { class: "selected-outline" },
-              h("div", { class: "selected-checkmark" },
-                h(CheckMark, null)))),
-            // item?.imageUrl &&
-            h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || getAssetPath("./assets/Reward-icon.png") }),
-            h("div", { class: "text-area" },
-              h("div", { class: "title" }, item.description),
-              h("div", { class: "amount" }, amount),
-              item.unavailableReasonCode && (h("div", { class: "error" }, intl.formatMessage({
-                id: "unavailableCode",
-                defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
-              }, {
-                unavailableReason: item.unavailableReason ||
-                  item.unavailableReasonCode,
-              })))))));
-      })),
-      h("div", { class: sheet.classes.KutayButton },
-        h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), disabled: !states.selectedItem }, "Continue")),
-    ];
-  }
-  function chooseAmount() {
-    var _a;
-    const input = getInput();
-    const isDisabled = ((_a = states.selectedItem) === null || _a === void 0 ? void 0 : _a.ruleType) === "FIXED_GLOBAL_REWARD"
-      ? false
-      : input && !states.amount;
-    return (h("div", null,
-      h("div", null, 
-      //selectedItem?.imageUrl &&
-      h("img", { class: sheet.classes.FullImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-          getAssetPath("./assets/Reward-icon.png") })),
-      h("b", null, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
-      h("div", { class: sheet.classes.InputBox }, input),
-      h("div", { class: sheet.classes.KutayButton },
-        h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, "Cancel"),
-        h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, "Continue to confirmation"))));
-  }
-  function confirmation() {
-    return (h("div", null,
-      h("h2", null, "Confirm and redeem"),
-      h("div", { style: { textAlign: "center" } },
-        h("p", null,
-          h("b", null, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue))),
-        h("p", null,
-          h(ExchangeArrows, null)),
-        h("div", { class: sheet.classes.CardContainer, style: {
-            boxShadow: "none",
-            marginBottom: "10px",
-            flex: "1",
-            minWidth: "100%",
-          } },
-          h("sl-card", { class: sheet.classes.Base },
-            h("img", { class: sheet.classes.PreviewImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-                getAssetPath("./assets/Reward-icon.png") }),
-            h("p", { style: { marginBottom: "0", flex: "1" } }, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue)))),
-      h("div", { class: sheet.classes.KutayButton },
-        h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, "Back"),
-        h("sl-button", { class: "continue", size: "large", onClick: callbacks.exchangeReward }, "Redeem"))));
-  }
-  function success() {
-    return (h("div", { style: { textAlign: "center" } },
-      h("img", { class: sheet.classes.FullImage, src: getAssetPath("./assets/Reward-icon.png") }),
-      h("p", { style: { color: "forestgreen" } }, "Reward Redeemed"),
-      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && h("pre", null, data === null || data === void 0 ? void 0 : data.fuelTankCode),
-      h("sl-button", { class: "continue", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, "Done")));
-  }
-  const stages = {
-    chooseReward: () => chooseReward(),
-    chooseAmount: () => chooseAmount(),
-    confirmation: () => confirmation(),
-    success: () => success(),
-  };
-  const currentStage = stages[states.redeemStage];
-  function stageMap() {
-    const stageNumber = stageList.indexOf(states.redeemStage);
-    return (h("div", { class: sheet.classes.ProgressBar },
-      h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
-        if (stage === states.redeemStage) {
-          return h("span", { class: "text" }, stageProgressList[stage]);
-        }
-        else {
-          return (h("span", { class: "text subdued" }, stageProgressList[stage]));
-        }
-      })),
-      h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
-  }
-  // const BackButton = () => {
-  //   if (states.redeemStage === "success") return "";
-  //   let previousStage: Stages = "";
-  //   if (states.redeemStage === "confirmation") {
-  //     previousStage = "chooseAmount";
-  //   } else if (states.redeemStage === "chooseAmount") {
-  //     previousStage = "chooseReward";
-  //   }
-  //   return (
-  //     <div slot="label">
-  //       <a
-  //         style={{ cursor: "pointer", fontSize: "80%", color: "#858585" }}
-  //         onClick={() => callbacks.setStage(previousStage)}
-  //       >
-  //         <LeftArrow /> Back
-  //       </a>
-  //     </div>
-  //   );
-  // };
-  function errorMessage() {
-    return (h("sl-alert", { type: "danger", open: true },
-      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      "An error occured trying to redeem this reward. Please try again."));
-  }
-  return (h("div", { class: sheet.classes.Container },
-    h("style", { type: "text/css" }, styleString),
-    h("div", null,
-      stageMap(),
-      states.exchangeError && errorMessage(),
-      currentStage && currentStage())));
-}
+const sqmRouterCss = "sqm-router{display:contents}";
 
-const SqmRewardExchangeList = class {
+const SqmRouter = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
-    /**
-     * @uiName Exchange button text
-     */
-    this.buttonText = "Exchange Rewards";
-    /**
-     * @uiName Exchange button text
-     */
-    this.notAvailableError = "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }";
     h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    // const missingProps = getMissingProps([
-    //   {
-    //     attribute: "listType",
-    //     value: this.listType,
-    //   },
-    // ]);
-    // if (missingProps) {
-    //   return <RequiredPropsError missingProps={missingProps} />;
-    // }
-    const { states, data, callbacks } = j$1()
-      ? useRewardExchangeListDemo(getProps(this))
-      : useRewardExchangeList(getProps(this));
-    return (h(Host, { style: { display: "contents" } }, h(RewardExchangeView, { states: states, data: data, callbacks: callbacks })));
+    const { callbacks } = useRouter();
+    return (h(Host, null, h("div", { ref: callbacks.setSlot, style: { display: "none" } }, h("slot", null)), h("div", { style: { display: "contents" }, ref: callbacks.setContainer })));
   }
-  static get assetsDirs() { return ["assets"]; }
 };
-function useRewardExchangeListDemo(props) {
-  return cjs({
-    states: {
-      content: {
-        text: props,
-      },
-      redeemStage: "chooseReward",
-      amount: 0,
-      selectedStep: undefined,
-      exchangeError: false,
-      loading: false,
-    },
-    data: {
-      shareCode: "SHARECODE123",
-    },
-    callbacks: {
-      exchangeReward: () => { },
-      setExchangeState: (_) => { },
-      setStage: (_) => { },
-      resetState: () => { },
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
+SqmRouter.style = sqmRouterCss;
 
 const style$7 = {
-  THead: {
-    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
-    "text-align": "left",
-  },
-  TCell: {
-    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
-  },
-  TRow: {
-    "border-top": "1px solid #EAEAEA",
-  },
-  Table: {
-    "border-collapse": "collapse",
-    width: "100%",
-  },
-  ButtonContainer: {
-    display: "flex",
-    "justify-content": "flex-end",
-    "margin-top": "var(--sl-spacing-small)",
-    ...gap({ direction: "row", size: "var(--sl-spacing-small)" }),
+  HostBlock: HostBlock,
+  buttonStyle: {
+    display: "block",
   },
 };
 jss.setup(create());
 const sheet$7 = jss.createStyleSheet(style$7);
 const styleString$7 = sheet$7.toString();
-function GenericTableView(props) {
-  const { states, data, callbacks, elements } = props;
-  const { columns, rows } = elements;
-  const { show } = states;
-  return (h("div", null,
-    h("style", { type: "text/css" }, styleString$7),
-    h("table", { class: sheet$7.classes.Table },
-      data.textOverrides.showLabels && (h("thead", null,
-        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (h("th", { class: sheet$7.classes.THead },
-          h(TextSpanView, { type: "h3" }, column))))))),
-      h("tbody", null,
-        show === "loading" && elements.loadingElement,
-        show === "empty" && elements.emptyElement,
-        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (h("tr", { class: sheet$7.classes.TRow, style: {
-            borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
-          }, part: "table-row" }, row.map((cell) => (h("td", { class: sheet$7.classes.TCell },
-          h(TextSpanView, { type: "p" }, cell)))))))))),
-    h("div", { class: sheet$7.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
-      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.prevLabel),
-      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.moreLabel))));
-}
-
-function LoadingSlot$1() {
-  return (h("slot", { name: "loading" },
-    h(LoadingSkeleton, null)));
-}
-function LoadingSkeleton() {
-  return (h("div", { style: { width: "100%" } },
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", { style: { marginBottom: "28px" } }),
-    h("sl-skeleton", null)));
-}
-function EmptySlot$1({ label }) {
-  return (h("slot", { name: "empty" },
-    h(EmptySkeleton, { label: label })));
-}
-function EmptySkeleton({ label }) {
-  return (h("div", { style: { width: "100%" } },
-    h("sqm-text", null,
-      h("h3", { style: { color: "#777777" } }, label))));
-}
-
-const CSS_NAMESPACE = "sqm-rewards-table";
-const GET_REWARDS = gql `
-  query getRewards(
-    $limit: Int!
-    $offset: Int!
-    $rewardFilter: RewardFilterInput
-  ) {
-    viewer {
-      ... on User {
-        id
-        rewards(limit: $limit, offset: $offset, filter: $rewardFilter) {
-          totalCount
-          count
-          data {
-            id
-            type
-            value
-            unit
-            name
-            dateGiven
-            dateExpires
-            dateCancelled
-            dateRedeemed
-            dateScheduledFor
-            fuelTankCode
-            fuelTankType
-            currency
-            prettyValue
-            statuses
-            globalRewardKey
-            programRewardKey
-            rewardRedemptionTransactions {
-              data {
-                exchangedRewards {
-                  data {
-                    prettyValue
-                    type
-                    fuelTankCode
-                    globalRewardKey
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-function useRewardsTable(props, emptyElement, loadingElement) {
-  var _a, _b;
-  const user = T$1();
-  const programIdContext = M$1();
-  // Default to context, overriden by props
-  const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
-  const rewardFilter = {
-    userId_eq: user === null || user === void 0 ? void 0 : user.id,
-    accountId_eq: user === null || user === void 0 ? void 0 : user.accountId,
-    // If no program ID, shows all programs
-    ...(programId
-      ? programId === "classic"
-        ? { programId_exists: false }
-        : { programId_eq: programId }
-      : {}),
-  };
-  const [content, setContent] = useReducer((state, next) => ({
-    ...state,
-    ...next,
-  }), {
-    columns: [],
-    rows: [],
-    loading: false,
-    page: 0,
-  });
-  const { envelope: rewardsData, states, callbacks, } = sn(GET_REWARDS, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.rewards; }, {
-    limit: props.perPage,
-    offset: 0,
-  }, {
-    rewardFilter,
-  }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const tick = useRerenderListener();
-  const components = useChildElements();
-  const data = rewardsData === null || rewardsData === void 0 ? void 0 : rewardsData.data;
-  async function getComponentData(components) {
-    // filter out loading and empty states from columns array
-    const columnComponents = components.filter((component) => component.slot !== "loading" && component.slot !== "empty");
-    // get the column titles (renderLabel is asynchronous)
-    const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod$1(c, () => c.renderLabel()));
-    // get the column cells (renderCell is asynchronous)
-    const cellsPromise = data === null || data === void 0 ? void 0 : data.map(async (r) => {
-      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod$1(c, () => c.renderCell([r], c)));
-      const cells = await Promise.all(cellPromise);
-      return cells;
-    });
-    const rows = cellsPromise && (await Promise.all(cellsPromise)).filter((i) => i);
-    setContent({ rows });
-    const columns = columnsPromise && (await Promise.all(columnsPromise));
-    // Set the content to render and finish loading components
-    setContent({ columns, loading: false, page: states.currentPage });
-  }
-  useEffect(() => {
-    setContent({ loading: true });
-    rewardsData && getComponentData(components);
-  }, [rewardsData, components, tick]);
-  const isEmpty = !((_b = content === null || content === void 0 ? void 0 : content.rows) === null || _b === void 0 ? void 0 : _b.length) && !(data === null || data === void 0 ? void 0 : data.length);
-  console.log(states.loading, content.loading, rewardsData);
-  const show = 
-  // 1 - Loading if loading
-  states.loading || content.loading
-    ? "loading"
-    : // 2 - Empty if empty
-      isEmpty
-        ? "empty"
-        : // 3 - Then show rows
-          "rows";
-  return {
-    states: {
-      hasNext: states.currentPage < states.pageCount - 1,
-      hasPrev: states.currentPage > 0,
-      show,
-      namespace: CSS_NAMESPACE,
-    },
-    data: {
-      textOverrides: {
-        showLabels: props.showLabels,
-        prevLabel: props.prevLabel,
-        moreLabel: props.moreLabel,
-      },
-    },
-    elements: {
-      columns: content.columns,
-      rows: content.rows,
-      emptyElement,
-      loadingElement,
-    },
-    callbacks: {
-      nextPage: () => {
-        callbacks.setCurrentPage(states.currentPage + 1);
-      },
-      prevPage: () => {
-        callbacks.setCurrentPage(states.currentPage - 1);
-      },
-    },
-  };
-}
-function generateUserError$1(e) {
-  try {
-    return JSON.stringify(e);
-  }
-  catch (e) {
-    return "An unknown error";
-  }
-}
-async function tryMethod$1(c, callback) {
-  const tag = c.tagName.toLowerCase();
-  await customElements.whenDefined(tag);
-  let labelPromise;
-  try {
-    labelPromise = callback();
-  }
-  catch (e) {
-    // renderLabel did not return a promise, so this method probably doesn't exist
-    // therefore, we IGNORE the label
-    if (callback.name === "renderReferrerCell") {
-      console.error("column does not have a renderReferrerCell method.");
-    }
-    else {
-      console.error("label promise failed", e);
-    }
-    return h("span", null);
-  }
-  try {
-    return await labelPromise;
-  }
-  catch (e) {
-    // The column returned a promise, and that promise failed.
-    // This should not happen so we fail fast
-    console.error("Error rendering label", e);
-    const userError = generateUserError$1(e);
-    return (h("details", null,
-      h("summary", null, "Error"),
-      userError));
-  }
-}
-
-const RewardsTable = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /** @uiName Number of rewards per page */
-    this.perPage = 3;
-    /** @uiName Show column labels */
-    this.showLabels = true;
-    /** @uiName Previous button text  */
-    this.prevLabel = "Prev";
-    /** @uiName View More button text  */
-    this.moreLabel = "Next";
-    /** @uiName Show Referred by user in table  */
-    this.showReferrer = false;
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const empty = h(EmptySlot$1, { label: "No Rewards Yet" });
-    const loading = h(LoadingSlot$1, null);
-    const { states, data, callbacks, elements } = j$1()
-      ? useRewardsTableDemo(this)
-      : useRewardsTable(this, empty, loading);
-    return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
-  }
-};
-function useRewardsTableDemo(props) {
-  return cjs({
-    states: {
-      hasPrev: false,
-      hasNext: false,
-      loading: false,
-      namespace: CSS_NAMESPACE,
-    },
-    callbacks: {
-      prevPage: () => console.log("Prev"),
-      nextPage: () => console.log("Next"),
-    },
-    data: {
-      textOverrides: {
-        showLabels: props.showLabels,
-        prevLabel: props.prevLabel,
-        moreLabel: props.moreLabel,
-      },
-      referralData: [],
-    },
-    elements: {
-      emptyElement: h(EmptySkeleton, { label: "No Rewards Yet" }),
-      loadingElement: h(LoadingSkeleton, null),
-      // TODO: This should be smarter
-      columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
-      rows: [],
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}
-
-const RewardsTableColumn = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * @uiName Reward column title
-     */
-    this.columnTitle = "Rewards";
-    /**
-     * @uiName Hide dropdown details of reward
-     */
-    this.hideDetails = false;
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  //@ts-ignore
-  async renderCell(data) {
-    // TODO: Do the right thing with many rewards, pending rewards, canceled rewards
-    console.log({ data });
-    return (h("sqm-referral-table-rewards-cell", { rewards: data, hideDetails: this.hideDetails }));
-  }
-  async renderLabel() {
-    return this.columnTitle;
-  }
-  render() {
-    useRequestRerender([this.columnTitle]);
-    return h(Host, { style: { display: "none" } });
-  }
-};
-
-const debug$1 = browser("sq:useRouter");
-function matchPath(pattern, page) {
-  if (!pattern)
-    return;
-  const regexp = pathToRegexp(pattern);
-  return regexp.exec(page);
-}
-function useRouter() {
-  const location = an();
-  const host = P$1();
-  const [slot, setSlot] = useState(undefined);
-  const [container, setContainer] = useState(undefined);
-  const page = location.pathname;
-  // convert sqm-routes into templates
-  useEffect(() => {
-    const routes = host.querySelectorAll(`sqm-route`);
-    const routesArray = Array.from(routes);
-    routesArray.forEach((route) => {
-      const newTemplate = document.createElement("template");
-      newTemplate.setAttribute("path", route.path);
-      newTemplate.innerHTML = route.innerHTML;
-      route.parentNode.appendChild(newTemplate);
-      route.parentNode.removeChild(route);
-    });
-  }, []);
-  useEffect(() => {
-    var _a, _b;
-    if (!container || !slot) {
-      debug$1("DOM not ready for navigation rendering on:", page);
-      return;
-    }
-    // <template>
-    const templates = slot.querySelectorAll(`template`);
-    const templatesArray = Array.from(templates);
-    const template = templatesArray.find((template) => {
-      var _a, _b, _c;
-      //@ts-ignore
-      const path = (_b = (_a = template.attributes) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.nodeValue;
-      if ((_c = matchPath(path, page)) === null || _c === void 0 ? void 0 : _c.length)
-        return template;
-    });
-    //@ts-ignore - can't access template attributes directly
-    const templatePath = (_b = (_a = template === null || template === void 0 ? void 0 : template.attributes) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.nodeValue;
-    debug$1({
-      containerDatasetPage: container.dataset.page,
-      templatePath,
-      page,
-    });
-    // if no routes found, and the old route doesn't match the new route
-    if (!template) {
-      // No matching page, display nothing
-      debug$1("No matching page found for ", page, ", so render nothing");
-      container.innerHTML = "";
-      container.dataset.page = page;
-      return;
-    }
-    debug$1("Page updated to ", page, template);
-    // if pathToRegexp results truthy or page is an exact match
-    if (!!matchPath(templatePath, container.dataset.page)) {
-      debug$1("don't rerender");
-      // Same page, do not re-render
-      // Reduces dom mutations, speeds up page speed
-    }
-    else if (template) {
-      container.innerHTML = template.innerHTML;
-      container.dataset.page = page;
-    }
-  }, [slot, container, page]);
-  return {
-    callbacks: {
-      setSlot,
-      setContainer,
-    },
-  };
-}
-
-const sqmRouterCss = "sqm-router{display:contents}";
-
-const SqmRouter = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ignored = true;
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const { callbacks } = useRouter();
-    return (h(Host, null, h("div", { ref: callbacks.setSlot, style: { display: "none" } }, h("slot", null)), h("div", { style: { display: "contents" }, ref: callbacks.setContainer })));
-  }
-};
-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) {
   return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
-    h("style", { type: "text/css" }, styleString$8),
-    h("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("style", { type: "text/css" }, styleString$7),
+    h("sl-button", { class: sheet$7.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("sl-icon", { slot: props.iconslot, name: props.icon ? props.icon : props.medium, exportparts: "icon" })),
       !props.hidetext && children)));
 }
@@ -15896,14 +14942,14 @@ function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
   const programId = props.programId ? props.programId : M$1();
-  const user = T$1();
+  const user = ne$1();
   const variables = {
     engagementMedium: x$1(),
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
   // only queries if a programId is available
-  const res = en(MessageLinkQuery, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const res = cn(MessageLinkQuery, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   const directLink = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink;
   const environment = D$1();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
@@ -15993,8 +15039,8 @@ const MessageLinkQuery$1 = dist.gql `
 function useShareLink(props) {
   var _a, _b;
   const { programId = M$1() } = props;
-  const user = T$1();
-  const { data } = en(MessageLinkQuery$1, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = ne$1();
+  const { data } = cn(MessageLinkQuery$1, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -17470,10 +16516,10 @@ var _createEmotion = createEmotion({
 function i$1(){return (i$1=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(n[r]=o[r]);}return n}).apply(this,arguments)}function s(n,t){return t||(t=n.slice(0)),n.raw=t,n}var a$1,l,u,c$1=css(a$1||(a$1=s(['\n  width: 100vw;\n  height: 100vh;\n\n  .story-book-outer-div {\n    .story-div {\n      font-family: "Arial", sans-serif;\n      font-size: 12px;\n    }\n    padding-bottom: 500px;\n  }\n\n  .story-div {\n    position: fixed;\n    box-sizing: border-box;\n    top: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 999;\n    overflow-y: scroll;\n    background: white;\n    margin-bottom: 32px;\n  }\n\n  .header {\n    padding: 24px 0 16px 16px;\n    margin-bottom: 24px;\n    color: white;\n    background: #333;\n    cursor: pointer;\n\n    h2 {\n      letter-spacing: 3px;\n      font-weight: 400;\n    }\n  }\n\n  .parentStoryList {\n    list-style: none;\n    padding-left: 16px;\n\n    summary {\n      margin-bottom: 4px;\n    }\n  }\n  .parentStory {\n    cursor: pointer;\n  }\n  .parentStory.selected {\n    font-weight: bold;\n  }\n\n  .subStory {\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 1.5em;\n    margin-top: 4px;\n\n    a {\n      display: block;\n      padding: 4px 4px 4px 16px;\n    }\n  }\n  .subStory:hover {\n    background-color: #eee;\n  }\n  .subStory.selected {\n    background-color: lightgreen;\n  }\n\n  .component {\n    padding: 24px 16px;\n  }\n\n  h4.group-header {\n    margin: 8px 0;\n    text-transform: uppercase;\n    font-weight: 600;\n    font-size: 14px;\n    color: #575757;\n  }\n\n  .group-wrapper {\n    margin-bottom: 24px;\n  }\n\n  .dynamic-display-wrapper {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    bottom: 0;\n    left: 100%;\n    padding: 16px;\n    z-index: 1000;\n    background: white;\n    transform: translateX(-100%);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n    & > :not(:first-child) {\n      margin-top: 12px;\n    }\n\n    p {\n      font-size: 12px;\n      margin: 0;\n      padding: 0;\n    }\n\n    .button-wrapper {\n      display: flex;\n\n      & > :not(:first-child) {\n        margin-left: 12px;\n      }\n    }\n\n    & button {\n      border: 1px solid #eaeaea;\n      background: white;\n      border-radius: 4px;\n      color: #777;\n      padding: 4px 12px;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n\n      &.active {\n        background: #555;\n        border-color: #555;\n        color: white;\n      }\n    }\n  }\n'])));function p$1(n,t){var o,r=t.story.title.split("/"),e=r[1]?r[0]:"_";return i$1({},n,((o={})[e]=[].concat(n[e]||[],[{story:i$1({},t.story,{title:r[1]||r[0]}),subs:t.subs}]).sort(function(n,t){return n.story.title.localeCompare(t.story.title)}),o))}function d$1(n){return {story:n.default,subs:function(n,t){if(null==n)return {};var o,r,e={},i=Object.keys(n);for(r=0;r<i.length;r++)t.indexOf(o=i[r])>=0||(e[o]=n[o]);return e}(n,["default"])}}function f(a,f){var b=f.h,y=void 0===b?h:b,g=f.title,m=void 0===g?"Stencilbook":g,x=f.homepage,h$1=void 0===x?y("h3",null,"Select a story!"):x,v=f.addons,k=void 0===v?[]:v,w=useMemo(function(){return a.map(d$1).reduce(p$1,{_:[]})},a),S=useState(void 0),C=S[0],z=S[1],O=null==C?void 0:C.key,j=useState("desktop"),T=j[0],_=j[1],B=useState(!0),D=B[0],L=B[1],N=useState(!1),q=N[0],A=N[1],M=function(){return y("div",{class:"dynamic-display-wrapper"},y("div",{class:"button-wrapper"},y("button",{class:"desktop"===T?"active":"",onClick:function(){return _("desktop")}},"Desktop"),y("button",{class:"tablet"===T?"active":"",onClick:function(){return _("tablet")}},"Tablet"),y("button",{class:"mobile"===T?"active":"",onClick:function(){return _("mobile")}},"Mobile")),y("p",null,"Note: Currently doesn't test breakpoints, use the native tester for now"),y("hr",null),y("button",{class:q?"active":"",onClick:function(){return A(function(n){return !n})}},"Toggle Dark Background"),y("hr",null),y("button",{class:D?"active":"",onClick:function(){return L(function(n){return !n})}},"Toggle Sidebar"))},P="mobile"===T?"375px":"tablet"===T?"768px":"1124px",V=css(l||(l=s(["\n    max-width: ",";\n    margin-left: ",";\n  "])),P,D?"250px":"0px"),X=css(u||(u=s(["\n    display: none;\n  "])));document.body.style.backgroundColor=q?"#232323":"#fafafa";var E=function(n){var t=n.selected,o=k.reduce(function(n,o){return function(){return y(o,{story:i$1({},t)},y(n,null))}},null==t?void 0:t.story);return y(o,null)},F=function(){return y("div",{class:"story-book-outer-div"},y("div",{class:"story-div "+(D?"":X)},y("div",{class:"header",onClick:function(){z(void 0);}},y("h2",null,m)),y("ul",{class:"parentStoryList"},Object.keys(w).sort().map(function(n){return y("div",{class:"group-wrapper"},"_"!==n&&y("h4",{class:"group-header"},n),w[n].map(function(t){return y("li",{class:"parentStory"},y("details",{style:{marginBottom:"10px"}},y("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map(function(o){var e=n+"/"+o,i=t.subs[o],s=i.storyName||lodash_startcase(o);return y("div",{class:"subStory "+(O===e?"selected":"")},y("a",{onClick:function(){return function(n,t,o,r){z({key:t,story:n,parent:o,label:r});}(i,e,t.story,s)}},s))})))}))}))),y(M,null),y("div",{class:"component "+V},!O&&h$1,O&&y("div",null,y("h3",null,C.label),y(E,{selected:C}))))};return {class:c$1,children:y(F,null),View:F,selected:C}}
 
 const ShareButton_stories = {
-  title: "Components/Share Button",
+  title: "Share Button",
 };
 const WithIcon = () => {
-  const props = { medium: "facebook", iconslot: "suffix" };
+  const props = { medium: "whatsapp", iconslot: "suffix" };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithIconOverride = () => {
@@ -17526,7 +16572,7 @@ const ShareButton$1 = /*#__PURE__*/Object.freeze({
 });
 
 const ShareLink_stories = {
-  title: "Components/Share Link",
+  title: "Share Link",
 };
 const Default = () => {
   const props = {
@@ -17567,15 +16613,14 @@ const ShareLink$1 = /*#__PURE__*/Object.freeze({
 });
 
 const BigStat_stories = {
-  title: "Components/Big Stat",
+  title: "Big Stat",
 };
 const Default$1 = () => {
-  const props = { value: 990000, statvalue: "9.900,00" };
+  const props = { statvalue: "9.900,00" };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
 const LeftAlign = () => {
   const props = {
-    value: 500,
     statvalue: "500",
     alignment: "left",
   };
@@ -17583,7 +16628,6 @@ const LeftAlign = () => {
 };
 const RightAlign = () => {
   const props = {
-    value: 500,
     statvalue: "500",
     alignment: "right",
   };
@@ -17591,7 +16635,6 @@ const RightAlign = () => {
 };
 const FlexReverse = () => {
   const props = {
-    value: 500,
     statvalue: "500",
     flexReverse: true,
   };
@@ -17599,7 +16642,6 @@ const FlexReverse = () => {
 };
 const FlexReverseRight = () => {
   const props = {
-    value: 500,
     statvalue: "500",
     flexReverse: true,
     alignment: "right",
@@ -17608,7 +16650,6 @@ const FlexReverseRight = () => {
 };
 const FlexReverseLeft = () => {
   const props = {
-    value: 500,
     statvalue: "500",
     flexReverse: true,
     alignment: "left",
@@ -17617,14 +16658,12 @@ const FlexReverseLeft = () => {
 };
 const NoStatValue = () => {
   const props = {
-    value: 0,
     statvalue: "...",
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
 const InvalidStatValue = () => {
   const props = {
-    value: 0,
     statvalue: "!!!",
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
@@ -17644,7 +16683,7 @@ const BigStat = /*#__PURE__*/Object.freeze({
 });
 
 const Leaderboard_stories = {
-  title: "Components/Leaderboard",
+  title: "Leaderboard",
   parameters: {
     tagname: "sqm-leaderboard",
   },
@@ -17838,36 +16877,36 @@ const routes = `
 `;
 const TemplateNavigation = createHookStory(() => {
   return (h("div", null,
-    h("button", { onClick: () => rn.push("/") }, "/"),
-    h("button", { onClick: () => rn.push("/foo") }, "/foo"),
-    h("button", { onClick: () => rn.push("/bar") }, "/bar"),
-    h("button", { onClick: () => rn.push("/baz/bang") }, "/baz/bang"),
-    h("button", { onClick: () => rn.push("/refer") }, "/refer"),
-    h("button", { onClick: () => rn.push("/refer/1") }, "/refer/1"),
-    h("button", { onClick: () => rn.push("/refer/2") }, "/refer/2"),
-    h("button", { onClick: () => rn.back() }, "Back"),
-    h("button", { onClick: () => rn.forward() }, "Forward"),
+    h("button", { onClick: () => mn.push("/") }, "/"),
+    h("button", { onClick: () => mn.push("/foo") }, "/foo"),
+    h("button", { onClick: () => mn.push("/bar") }, "/bar"),
+    h("button", { onClick: () => mn.push("/baz/bang") }, "/baz/bang"),
+    h("button", { onClick: () => mn.push("/refer") }, "/refer"),
+    h("button", { onClick: () => mn.push("/refer/1") }, "/refer/1"),
+    h("button", { onClick: () => mn.push("/refer/2") }, "/refer/2"),
+    h("button", { onClick: () => mn.back() }, "Back"),
+    h("button", { onClick: () => mn.forward() }, "Forward"),
     h("hr", null),
     h("sqm-router", { innerHTML: templates })));
 });
 const RouteNavigation = createHookStory(() => {
   return (h("div", null,
-    h("button", { onClick: () => rn.push("/") }, "/"),
-    h("button", { onClick: () => rn.push("/foo") }, "/foo"),
-    h("button", { onClick: () => rn.push("/bar") }, "/bar"),
-    h("button", { onClick: () => rn.push("/baz/bang") }, "/baz/bang"),
-    h("button", { onClick: () => rn.push("/refer") }, "/refer"),
-    h("button", { onClick: () => rn.push("/refer/1") }, "/refer/1"),
-    h("button", { onClick: () => rn.push("/refer/2") }, "/refer/2"),
-    h("button", { onClick: () => rn.back() }, "Back"),
-    h("button", { onClick: () => rn.forward() }, "Forward"),
+    h("button", { onClick: () => mn.push("/") }, "/"),
+    h("button", { onClick: () => mn.push("/foo") }, "/foo"),
+    h("button", { onClick: () => mn.push("/bar") }, "/bar"),
+    h("button", { onClick: () => mn.push("/baz/bang") }, "/baz/bang"),
+    h("button", { onClick: () => mn.push("/refer") }, "/refer"),
+    h("button", { onClick: () => mn.push("/refer/1") }, "/refer/1"),
+    h("button", { onClick: () => mn.push("/refer/2") }, "/refer/2"),
+    h("button", { onClick: () => mn.back() }, "Back"),
+    h("button", { onClick: () => mn.forward() }, "Forward"),
     h("hr", null),
     h("sqm-router", { innerHTML: routes })));
 });
 const Styling = createHookStory(() => {
   return (h("div", null,
-    h("button", { onClick: () => rn.push("/") }, "/"),
-    h("button", { onClick: () => rn.push("/foo") }, "/foo"),
+    h("button", { onClick: () => mn.push("/") }, "/"),
+    h("button", { onClick: () => mn.push("/foo") }, "/foo"),
     h("hr", null),
     h("div", { style: { display: "flex", justifyContent: "space-around" } },
       h("sqm-router", { innerHTML: `<template path="/">
@@ -17881,7 +16920,7 @@ function useTemplate(templateString) {
   const [previewTemplate, setPreviewTemplate] = useState(templateString);
   function setPath(e) {
     //@ts-ignore
-    rn.push(e.target.value);
+    mn.push(e.target.value);
   }
   return {
     states: { previewTemplate, editedTemplate },
@@ -17921,7 +16960,7 @@ const Router = /*#__PURE__*/Object.freeze({
 });
 
 const LeaderboardRank_stories = {
-  title: "Components/Leaderboard Rank",
+  title: "Leaderboard Rank",
 };
 const First = () => {
   const props = { data: { rank: "1st" } };
@@ -17968,7 +17007,7 @@ function setupLoggedOut() {
   };
 }
 const PortalFrame_stories = {
-  title: "Components/Portal Frame",
+  title: "Portal Frame",
 };
 const defaultProps = {
   data: {
@@ -18024,8 +17063,8 @@ const FullStackFrame = () => {
       "Current path:",
       " ",
       h("code", null,
-        h("strong", null, (_a = an()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    h("button", { onClick: rn.back }, "Go Back")));
+        h("strong", null, (_a = vn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    h("button", { onClick: mn.back }, "Go Back")));
 };
 const FullStackFrameLoggedOut = () => {
   var _a;
@@ -18049,8 +17088,8 @@ const FullStackFrameLoggedOut = () => {
       "Current path:",
       " ",
       h("code", null,
-        h("strong", null, (_a = an()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    h("button", { onClick: rn.back }, "Go Back")));
+        h("strong", null, (_a = vn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    h("button", { onClick: mn.back }, "Go Back")));
 };
 
 const PortalFrame$1 = /*#__PURE__*/Object.freeze({
@@ -18063,7 +17102,7 @@ const PortalFrame$1 = /*#__PURE__*/Object.freeze({
 });
 
 const EditProfileForm_stories = {
-  title: "Components/Edit Profile Form",
+  title: "Edit Profile Form",
 };
 const defaultProps$1 = {
   states: {
@@ -18144,14 +17183,14 @@ function setupGraphQL$1() {
     programId,
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
 }
@@ -18206,14 +17245,14 @@ function setupGraphQL$2() {
     programId,
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
 }
@@ -18268,14 +17307,14 @@ function setupGraphQL$3() {
     programId,
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6Im55bmVsbGllIiwiaWQiOiJueW5lbGxpZSJ9fQ.3KV974VPLgk4tD8LQfJTi4IPkKCmnaB8w48HzVJYDuI",
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
 }
@@ -18350,9 +17389,6 @@ const RewardBalanceCashUSD = createHookStory(() => {
 const ProgramGoals = createHookStory(() => {
   const dummy = encodeURIComponent("Paid-Member-Goal/referrals");
   return View(`/programGoals/count/${dummy}`, "/(programGoals)/:metricType/:goalId");
-});
-const CustomField = createHookStory(() => {
-  return View(`/customFields/thingCount`, "/(customFields)/:customField");
 });
 
 const UseBigStat = /*#__PURE__*/Object.freeze({
@@ -18384,8 +17420,7 @@ const UseBigStat = /*#__PURE__*/Object.freeze({
   RewardsAvailableWithSlash: RewardsAvailableWithSlash,
   RewardBalance: RewardBalance,
   RewardBalanceCashUSD: RewardBalanceCashUSD,
-  ProgramGoals: ProgramGoals,
-  CustomField: CustomField
+  ProgramGoals: ProgramGoals
 });
 
 function setupGraphQL$4() {
@@ -18399,14 +17434,14 @@ function setupGraphQL$4() {
     programId,
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJpZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJmaXJzdE5hbWUiOiJ0ZXN0IiwibGFzdE5hbWUiOiJ0ZXN0In19.ziDWbdCwsTo1ijxl8d2__Ga-6iFOVShaJUPp2ZBMeO0",
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
 }
@@ -18446,14 +17481,14 @@ function setupGraphQL$5() {
     programId,
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
 }
@@ -18514,278 +17549,54 @@ const UseLeaderboard = /*#__PURE__*/Object.freeze({
 });
 
 const FormMessage_stories = {
-  title: "Components/Form Message",
+  title: "Form Message",
 };
 const SuccessAlert = () => {
   return (h("sqm-form-message", { type: "success" },
     h("div", null, "This is a success message.")));
-};
-const ErrorAlert = () => {
-  return (h("sqm-form-message", { type: "error" },
-    h("div", null, "This is an error message")));
-};
-const InfoAlert = () => {
-  return (h("sqm-form-message", { type: "info" },
-    h("div", null, "This is an info message")));
-};
-const FullStackSuccess = () => {
-  return (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
-    h("div", { class: "AlertContent" },
-      h("div", { part: "successalert-text" }, "Title"),
-      h("div", { part: "successalert-subtext" }, "Body text."),
-      h("sl-button", { type: "default", exportparts: "base: defaultbutton-base", onClick: () => {
-          console.log("click");
-        } }, "Primary Action"),
-      h("sl-button", { class: "SecondaryTextButton", type: "text", onClick: () => {
-          console.log("click");
-        } }, "Secondary Action"))));
-};
-
-const FormMessage$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': FormMessage_stories,
-  SuccessAlert: SuccessAlert,
-  ErrorAlert: ErrorAlert,
-  InfoAlert: InfoAlert,
-  FullStackSuccess: FullStackSuccess
-});
-
-const EXCHANGE$1 = dist.gql `
-  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
-    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
-      reward {
-        id
-      }
-    }
-  }
-`;
-const UseRewardExchangeList_stories = {
-  title: "Hooks / useRewardExchange",
-};
-function setupGraphQL$6() {
-  const id = "testestest";
-  const accountId = id;
-  const programId = "sam-partner-test-2";
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_a8b41jotf8a1v",
-    appDomain: "https://staging.referralsaasquatch.com",
-    programId,
-  };
-  useEffect(() => {
-    L$1({
-      accountId,
-      id,
-      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
-    });
-    return () => {
-      window.widgetIdent = undefined;
-      L$1(undefined);
-    };
-  }, []);
-  return { id, accountId };
-}
-function useExchangeButton() {
-  const { id, accountId } = setupGraphQL$6();
-  const [points, setPoints] = useState(10);
-  const [rate, setRate] = useState(100);
-  const [exchange, { data, errors }] = Ne(EXCHANGE$1);
-  return {
-    states: {
-      points,
-      rate,
-    },
-    data: {
-      id,
-      accountId,
-      data,
-      errors,
-    },
-    callbacks: {
-      exchange,
-      setPoints,
-      setRate,
-    },
-  };
-}
-const DefaultView = (props) => {
-  const { states, data, callbacks } = props;
-  return (h("div", null,
-    h("div", null,
-      h("label", null, "Rate:"),
-      h("input", { value: states.rate, onInput: (e) => 
-        // @ts-ignore
-        callbacks.setRate(e.target.value) })),
-    h("input", { value: states.points, onInput: (e) => 
-      // @ts-ignore
-      callbacks.setPoints(e.target.value) }),
-    h("button", { onClick: () => callbacks.exchange(props.input) }, "Exchange"),
-    h("details", null,
-      h("summary", null, "response"),
-      h("h4", null, "data"),
-      h("div", { style: { maxWidth: "500px" } },
-        h("pre", { style: { width: "500px", whiteSpace: "pre-wrap" } }, JSON.stringify(data.data))),
-      h("h4", null, "errors"),
-      h("div", { style: { maxWidth: "500px" } },
-        h("pre", { style: { maxWidth: "500px", whiteSpace: "pre-wrap" } }, JSON.stringify(data.errors))))));
-};
-const RewardList = createHookStory(() => {
-  setupGraphQL$6();
-  return (h("sqm-reward-exchange-list", { "list-type": "something" }));
-});
-const FixedGlobalReward = createHookStory(() => {
-  const { states, data, callbacks } = useExchangeButton();
-  return (h(DefaultView, { states: states, data: data, callbacks: callbacks, input: {
-      exchangeRewardInput: {
-        userId: data.id,
-        accountId: data.accountId,
-        redeemCreditInput: {
-          amount: states.points,
-          unit: "POINT",
-        },
-        globalRewardKey: "gc1",
-      },
-    } }));
-});
-const VariableGlobalReward = createHookStory(() => {
-  const { states, data, callbacks } = useExchangeButton();
-  return (h(DefaultView, { states: states, data: data, callbacks: callbacks, input: {
-      exchangeRewardInput: {
-        userId: data.id,
-        accountId: data.accountId,
-        redeemCreditInput: {
-          amount: states.points,
-          unit: "POINT",
-        },
-        globalRewardKey: "gc1",
-        rewardInput: {
-          valueInCents: Math.ceil(states.points * states.rate),
-        },
-      },
-    } }));
-});
-const VariableCreditReward = createHookStory(() => {
-  const { states, data, callbacks } = useExchangeButton();
-  return (h(DefaultView, { states: states, data: data, callbacks: callbacks, input: {
-      exchangeRewardInput: {
-        userId: data.id,
-        accountId: data.accountId,
-        redeemCreditInput: {
-          amount: states.points,
-          unit: "POINT",
-        },
-        rewardInput: {
-          type: "CREDIT",
-          unit: "foo",
-          assignedCredit: Math.ceil(states.points * states.rate),
-        },
-      },
-    } }));
-});
-
-const UseRewardExchangeList = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': UseRewardExchangeList_stories,
-  RewardList: RewardList,
-  FixedGlobalReward: FixedGlobalReward,
-  VariableGlobalReward: VariableGlobalReward,
-  VariableCreditReward: VariableCreditReward
-});
-
-const UseRewardsTable_stories = {
-  title: "Hooks / useRewardsTable",
-};
-function setupGraphQL$7() {
-  const id = "testestest";
-  const accountId = id;
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_a8b41jotf8a1v",
-    appDomain: "https://staging.referralsaasquatch.com",
-  };
-  useEffect(() => {
-    L$1({
-      accountId,
-      id,
-      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
-    });
-    return () => {
-      window.widgetIdent = undefined;
-      L$1(undefined);
-    };
-  }, []);
-  return { id, accountId };
-}
-const RewardsTableWithProgram = createHookStory(() => {
-  setupGraphQL$7();
-  A$1("sam-partner-test-2");
-  return (h("sqm-rewards-table", null,
-    h("sqm-rewards-table-column", null)));
-});
-const RewardsTableNoProgram = createHookStory(() => {
-  setupGraphQL$7();
-  A$1(undefined);
-  return (h("sqm-rewards-table", null,
-    h("sqm-rewards-table-column", null)));
-});
-
-const UseRewardsTable = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': UseRewardsTable_stories,
-  RewardsTableWithProgram: RewardsTableWithProgram,
-  RewardsTableNoProgram: RewardsTableNoProgram
-});
-
-const JWT = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJhY2NvdW50SWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCJ9fQ.FMNZ6oajyr6SiCcRqKKdyPqvNTvWROQ60MKAyfvWGfc";
-const UseTaskCard_stories = {
-  title: "Hooks / useTaskCard",
-};
-function setupGraphQL$8() {
-  const id = "sam+klip@saasquat.ch";
-  const accountId = id;
-  const programId = "klip-referral-program";
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_a74miwdpofztj",
-    appDomain: "https://staging.referralsaasquatch.com",
-    programId,
-  };
-  useEffect(() => {
-    L$1({
-      accountId,
-      id,
-      jwt: JWT,
-    });
-    return () => {
-      window.widgetIdent = undefined;
-      L$1(undefined);
-    };
-  }, []);
-  return { id, accountId };
-}
-const TaskCard = createHookStory(() => {
-  setupGraphQL$8();
-  return (h("sqm-task-card", { "card-title": "Comment on 5 articles", "button-text": "Start reading", goal: 5, steps: true, "show-progress-bar": true }));
-});
+};
+const ErrorAlert = () => {
+  return (h("sqm-form-message", { type: "error" },
+    h("div", null, "This is an error message")));
+};
+const InfoAlert = () => {
+  return (h("sqm-form-message", { type: "info" },
+    h("div", null, "This is an info message")));
+};
+const FullStackSuccess = () => {
+  return (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
+    h("div", { class: "AlertContent" },
+      h("div", { part: "successalert-text" }, "Title"),
+      h("div", { part: "successalert-subtext" }, "Body text."),
+      h("sl-button", { type: "default", exportparts: "base: defaultbutton-base", onClick: () => {
+          console.log("click");
+        } }, "Primary Action"),
+      h("sl-button", { class: "SecondaryTextButton", type: "text", onClick: () => {
+          console.log("click");
+        } }, "Secondary Action"))));
+};
 
-const UseTaskCard = /*#__PURE__*/Object.freeze({
+const FormMessage$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  'default': UseTaskCard_stories,
-  TaskCard: TaskCard
+  'default': FormMessage_stories,
+  SuccessAlert: SuccessAlert,
+  ErrorAlert: ErrorAlert,
+  InfoAlert: InfoAlert,
+  FullStackSuccess: FullStackSuccess
 });
 
 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: [
@@ -18880,7 +17691,7 @@ const Dashboard = () => {
     hide: false,
   };
   return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString$9),
+    h("style", { type: "text/css" }, styleString$8),
     h(Sidebar, null),
     h("sqm-divided-layout", { direction: "column" },
       h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
@@ -18893,10 +17704,10 @@ const Dashboard = () => {
             h("h1", null, "John Smith"))),
         })),
         h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "2,345", value: 234500 }), "Clicks"),
-          h(BigStatView, Object.assign({}, { statvalue: "58", value: 58 }), "Referrals"),
-          h(BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000 }), "Earned"),
-          h(BigStatView, Object.assign({}, { statvalue: "$2,305", value: 230500 }), "Awaiting Payout"))),
+          h(BigStatView, Object.assign({}, { statvalue: "2,345" }), "Clicks"),
+          h(BigStatView, Object.assign({}, { statvalue: "58" }), "Referrals"),
+          h(BigStatView, Object.assign({}, { statvalue: "$10,540" }), "Earned"),
+          h(BigStatView, Object.assign({}, { statvalue: "$2,305" }), "Awaiting Payout"))),
       h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
         h(PortalSectionView, Object.assign({}, {
           labelMargin: "x-large",
@@ -18938,7 +17749,7 @@ const Dashboard = () => {
 };
 const EditProfile$2 = () => {
   return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString$9),
+    h("style", { type: "text/css" }, styleString$8),
     h(Sidebar, null),
     h("sqm-divided-layout", { direction: "column" },
       h(PortalProfileView, Object.assign({}, {
@@ -19002,7 +17813,7 @@ const EditProfile$2 = () => {
 };
 const Commissions = () => {
   return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString$9),
+    h("style", { type: "text/css" }, styleString$8),
     h(Sidebar, null),
     h("sqm-divided-layout", { direction: "column" },
       h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
@@ -19015,19 +17826,19 @@ const Commissions = () => {
             h("p", null,
               "for the",
               " ",
-              h("span", { class: sheet$9.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              h("span", { class: sheet$8.classes.HeaderSubtitleBold }, "Partner Program #1"),
               " ",
               "program"))),
         })),
         h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 1,000", value: 100000 }), "Total Earned"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 800", value: 80000 }), "Available"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 180", value: 18000 }), "Pending"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 20", value: 2000 }), "Redeemed"))))));
+          h(BigStatView, Object.assign({}, { statvalue: "$ 1,000" }), "Total Earned"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 800" }), "Available"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 180" }), "Pending"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 20" }), "Redeemed"))))));
 };
 const Activity = () => {
   return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString$9),
+    h("style", { type: "text/css" }, styleString$8),
     h(Sidebar, null),
     h("sqm-divided-layout", { direction: "column" },
       h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
@@ -19040,7 +17851,7 @@ const Activity = () => {
             h("p", null,
               "for the",
               " ",
-              h("span", { class: sheet$9.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              h("span", { class: sheet$8.classes.HeaderSubtitleBold }, "Partner Program #1"),
               " ",
               "program"))),
         })),
@@ -19050,10 +17861,10 @@ const Activity = () => {
           label: (h("sqm-text", null,
             h("h3", null, "Referral Activity"))),
           content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
-            h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 100000 }), "Total Referrals"),
-            h(BigStatView, Object.assign({}, { statvalue: "800", value: 800 }), "Converted"),
-            h(BigStatView, Object.assign({}, { statvalue: "180", value: 180 }), "Pending"),
-            h(BigStatView, Object.assign({}, { statvalue: "20", value: 20 }), "Disqualified"))),
+            h(BigStatView, Object.assign({}, { statvalue: "1,000" }), "Total Referrals"),
+            h(BigStatView, Object.assign({}, { statvalue: "800" }), "Converted"),
+            h(BigStatView, Object.assign({}, { statvalue: "180" }), "Pending"),
+            h(BigStatView, Object.assign({}, { statvalue: "20" }), "Disqualified"))),
         }))),
       h(PortalSectionView, Object.assign({}, {
         labelMargin: "x-large",
@@ -19061,9 +17872,9 @@ const Activity = () => {
         label: (h("sqm-text", null,
           h("h3", null, "Traffic Generated"))),
         content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 1000 }), "Clicks"),
-          h(BigStatView, Object.assign({}, { statvalue: "800", value: 800 }), "From share link"),
-          h(BigStatView, Object.assign({}, { statvalue: "180", value: 180 }), "From share mediums"))),
+          h(BigStatView, Object.assign({}, { statvalue: "1,000" }), "Clicks"),
+          h(BigStatView, Object.assign({}, { statvalue: "800" }), "From share link"),
+          h(BigStatView, Object.assign({}, { statvalue: "180" }), "From share mediums"))),
       })))));
 };
 
@@ -19077,7 +17888,7 @@ const NewPortal = /*#__PURE__*/Object.freeze({
 });
 
 const SidebarItem_stories = {
-  title: "Components/Sidebar Item",
+  title: "Sidebar Item",
 };
 const InactiveItem = () => {
   const props = {
@@ -19114,7 +17925,7 @@ const SidebarItem = /*#__PURE__*/Object.freeze({
 });
 
 const NavigationSidebar_stories = {
-  title: "Components/Navigation Sidebar",
+  title: "Navigation Sidebar",
 };
 const DefaultNavigationSidebar = () => {
   const barProps = {
@@ -19163,12 +17974,14 @@ const NavigationSidebar = /*#__PURE__*/Object.freeze({
 });
 
 const PortalLogin_stories = {
-  title: "Components/Portal Login",
+  title: "Portal Login",
 };
 const defaultProps$2 = {
   states: {
     error: "",
     loading: false,
+    forgotPasswordPath: "/forgotPassword",
+    registerPath: "/register",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -19179,6 +17992,8 @@ const errorProps = {
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
+    forgotPasswordPath: "/forgotPassword",
+    registerPath: "/register",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -19189,6 +18004,8 @@ const loadingProps = {
   states: {
     error: "",
     loading: true,
+    forgotPasswordPath: "/forgotPassword",
+    registerPath: "/register",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -19208,7 +18025,7 @@ const PortalLogin$1 = /*#__PURE__*/Object.freeze({
 });
 
 const PortalRegister_stories = {
-  title: "Components/Portal Register",
+  title: "Portal Register",
 };
 const defaultProps$3 = {
   states: {
@@ -19216,6 +18033,7 @@ const defaultProps$3 = {
     loading: false,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login"
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -19232,6 +18050,7 @@ const errorProps$1 = {
     loading: false,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login"
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -19251,6 +18070,7 @@ const loadingProps$1 = {
     loading: true,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login"
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -19267,6 +18087,7 @@ const slottedProps = {
     loading: false,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login"
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -19293,6 +18114,7 @@ const FieldsHidden = () => {
         loading: true,
         confirmPassword: true,
         hideInputs: true,
+        loginPath: "/login"
       },
     } }));
 };
@@ -19308,10 +18130,10 @@ 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",
+  title: "Portal Forgot Password",
   parameters: {
     scenario,
   },
@@ -19321,6 +18143,7 @@ const defaultProps$4 = {
     error: "",
     loading: false,
     success: false,
+    loginPath: "/login",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -19335,6 +18158,7 @@ const errorProps$2 = {
     error: "Something went wrong. Please try again.",
     loading: false,
     success: false,
+    loginPath: "/login",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -19349,6 +18173,7 @@ const loadingProps$2 = {
     error: "",
     loading: true,
     success: false,
+    loginPath: "/login",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -19363,6 +18188,7 @@ const successProps = {
     error: "",
     loading: false,
     success: true,
+    loginPath: "/login",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -19386,10 +18212,10 @@ 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",
+  title: "Portal Email Verification",
   parameters: {
     scenario: scenario$1,
   },
@@ -19472,10 +18298,10 @@ 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",
+  title: "Portal Reset Password",
   parameters: {
     scenario: scenario$2,
   },
@@ -19636,10 +18462,10 @@ 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",
+  title: "Portal Verify Email",
   parameters: {
     scenario: scenario$3,
   },
@@ -19683,7 +18509,7 @@ const PortalVerifyEmail = /*#__PURE__*/Object.freeze({
 });
 
 const AssetCard_stories = {
-  title: "Components/Asset Card",
+  title: "Asset Card",
 };
 const Default$7 = () => {
   const props = {
@@ -19719,7 +18545,7 @@ const AssetCard = /*#__PURE__*/Object.freeze({
 });
 
 const DividedLayout_stories = {
-  title: "Components/Divided Layout",
+  title: "Divided Layout",
 };
 const barProps$1 = {
   data: {
@@ -19811,7 +18637,7 @@ const DividedLayout$1 = /*#__PURE__*/Object.freeze({
 const scenario$4 = "Feature: Change Password\r\n\r\n    @motivating\r\n    Scenario: Users can change their password\r\n        Given a user has registered for the portal\r\n        And they have a password\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they enter their new password\r\n        And confirm it\r\n        And click \"Change Password\"\r\n        Then they will see a success banner stating that the change was successful\r\n        When they logout\r\n        And try to login\r\n        Then they will not be able to login with their old password\r\n        But they will be able to login with their new password\r\n\r\n    @motivating\r\n    Scenario: Users must confirm their password change\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they enter their new password\r\n        But they enter a different password to confirm\r\n        And click \"Change Password\"\r\n        Then they will see an error banner stating that the passwords didnt match\r\n        When they logout\r\n        And try to login\r\n        Then they will be able to login with their existing password\r\n\r\n    @motivating\r\n    Scenario: Users must enter a new password and confirm it to change their password\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they click \"Change password\"\r\n        Then a validation error will appear for the new password field\r\n        And their password will not be changed\r\n        When they enter a new password\r\n        And they click \"Change password\"\r\n        Then a validation error will appear for the confirm new password field\r\n        And their password will not be changed\r\n\r\n    @motivating\r\n    Scenario: An error banner will be displayed if the password change fails\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        When they enter their new password\r\n        And confirm it\r\n        And click \"Change Password\"\r\n        But the change fails\r\n        Then they will see an error banner stating that the change failed\r\n        When they logout\r\n        And try to login\r\n        Then they will be able to login with their existing password";
 
 const ChangePassword_stories = {
-  title: "Components/Change Password",
+  title: "Change Password",
   parameters: {
     scenario: scenario$4,
   },
@@ -19967,7 +18793,7 @@ const ChangePassword = /*#__PURE__*/Object.freeze({
 });
 
 const PortalProfile_stories = {
-  title: "Components/Portal Profile",
+  title: "Portal Profile",
 };
 // const style = {};
 jss.setup(create());
@@ -20208,7 +19034,7 @@ const PortalProfile = /*#__PURE__*/Object.freeze({
 });
 
 const ReferralTableRewardsCell_stories = {
-  title: "Components/Referral Table Rewards Cell",
+  title: "Referral Table Rewards Cell",
 };
 const baseReward = {
   id: "123",
@@ -20440,7 +19266,7 @@ const ReferralTableRewardsCell$1 = /*#__PURE__*/Object.freeze({
 });
 
 const ReferralTable_stories = {
-  title: "Components/Referral Table",
+  title: "Referral Table",
 };
 const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
   h("sqm-table-row", null,
@@ -20927,7 +19753,7 @@ const ReferralTable$1 = /*#__PURE__*/Object.freeze({
 });
 
 const ReferralTableCell_stories = {
-  title: "Components/Referral Table Cell",
+  title: "Referral Table Cell",
 };
 const TableCell = () => {
   return (h("sqm-referral-table-cell", { innerTemplate: "Table Cell Text" }));
@@ -20970,991 +19796,102 @@ const rewardsData = {
     data: [
       {
         exchangedRewards: {
-          data: [
-            {
-              prettyValue: "19 Points",
-              type: "CREDIT",
-              fuelTankCode: "ABC",
-              globalRewardKey: "Key",
-            },
-          ],
-        },
-      },
-    ],
-  },
-};
-const rewards = [rewardsData];
-const RewardsCell = () => {
-  return (h("sqm-referral-table-rewards-cell", { rewards: rewards }));
-};
-
-const ReferralTableCell$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': ReferralTableCell_stories,
-  TableCell: TableCell,
-  TableUserCell: TableUserCell,
-  EmptyCell: EmptyCell$1,
-  StatusCell: StatusCell,
-  DateCell: DateCell,
-  RewardsCell: RewardsCell
-});
-
-const UserName_stories = {
-  title: "Tests/User Name",
-};
-const DemoData = () => {
-  return (h("sqm-user-name", { demoData: {
-      loading: false,
-      loadingText: "...",
-      username: "Test Testerson",
-    } }));
-};
-const Username = () => {
-  return h("sqm-user-name", null);
-};
-
-const UserName = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': UserName_stories,
-  DemoData: DemoData,
-  Username: Username
-});
-
-const PasswordField_stories = {
-  title: "Components/Portal Password Field",
-};
-const Start = () => {
-  return (h("sqm-password-field", { demoData: {
-      initValue: "",
-      states: {
-        enableValidation: true,
-        validationErrors: {},
-        content: {
-          fieldLabel: "Password",
-        },
-      },
-    } }));
-};
-const EmptyError = () => {
-  return (h("sqm-password-field", { demoData: {
-      initValue: "",
-      states: {
-        enableValidation: true,
-        validationErrors: { password: "Cannot be empty" },
-        content: {
-          fieldLabel: "Password",
-        },
-      },
-    } }));
-};
-const ValidationError = () => {
-  return (h("sqm-password-field", { demoData: {
-      initValue: "asdf",
-      states: {
-        enableValidation: true,
-        validationErrors: { password: "Incomplete" },
-        content: {
-          fieldLabel: "Password",
-        },
-      },
-    } }));
-};
-
-const PasswordField = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': PasswordField_stories,
-  Start: Start,
-  EmptyError: EmptyError,
-  ValidationError: ValidationError
-});
-
-/**
- * Displays a cartesian product of the input props
- *
- * @returns
- */
-function MatrixStory({ matrix, props, Component, }) {
-  const propMatrix = Object.keys(matrix).map((propKey) => {
-    const propValues = matrix[propKey];
-    return propValues.map((val) => {
-      return {
-        [propKey]: val,
-      };
-    });
-  });
-  const combinations = cartesian(...propMatrix);
-  const propsCombinations = combinations.map((combo) => {
-    return combo.reduce((props, prop) => {
-      return {
-        ...props,
-        ...prop,
-      };
-    }, {});
-  });
-  return propsCombinations.map((combo) => {
-    const example = { ...props, ...combo };
-    return (h("div", null,
-      h(PropsTable, { values: example }),
-      h("hr", null),
-      " ",
-      h("br", null),
-      h(Component, Object.assign({}, example)),
-      h("br", null)));
-  });
-}
-function PropsTable({ values }) {
-  return (h("table", null,
-    h("tbody", null, Object.keys(values).map((key) => {
-      return (h("tr", null,
-        h("th", null, key),
-        h("td", null, JSON.stringify(values[key]))));
-    }))));
-}
-/**
- * Source: https://stackoverflow.com/questions/15298912/javascript-generating-combinations-from-n-arrays-with-m-elements
- *
- * TODO: Could replace with a fork of https://www.npmjs.com/package/cartesian
- *
- * @param args - an array of arrays
- * @returns combinations of the elements in those array
- */
-function cartesian(...args) {
-  var r = [], max = args.length - 1;
-  function helper(arr, i) {
-    for (var j = 0, l = args[i].length; j < l; j++) {
-      var a = arr.slice(0); // clone arr
-      a.push(args[i][j]);
-      if (i == max)
-        r.push(a);
-      else
-        helper(a, i + 1);
-    }
-  }
-  helper([], 0);
-  return r;
-}
-
-const checkmark_circle = () => {
-  return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18" },
-    h("path", { fill: "currentColor", "fill-rule": "evenodd", d: "M1.636 9a7.364 7.364 0 1114.728 0A7.364 7.364 0 011.636 9zM9 0a9 9 0 100 18A9 9 0 009 0zm5.192 6.266a.982.982 0 00-1.548-1.208l-4.787 6.137-2.58-2.58a.982.982 0 00-1.39 1.388l3.367 3.366a.982.982 0 001.468-.09l5.47-7.013z", "clip-rule": "evenodd" })));
-};
-const arrow_left_right = () => {
-  return (h("svg", { width: 11, height: 12, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
-};
-
-const gift = () => {
-  return (h("svg", { width: 16, height: 16, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    h("path", { d: "M15 5H9v11h4.5a1 1 0 001-1V9h.5a1 1 0 001-1V6a1 1 0 00-1-1zM1.5 9v6a1 1 0 001 1H7V5H1a1 1 0 00-1 1v2a1 1 0 001 1h.5z", fill: "var(--sl-color-primary-200)" }),
-    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9v1h13V9h-13z", fill: "var(--sl-color-primary-300)" }),
-    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.71c0 .886-1.33 2.227-2 2.29H9v11H7.002V5H4.588C3.212 4.702 2 3.645 2 2.52 2 1.426 2.476.558 3.342.183 4.169-.176 5.125.02 5.88.545c.927.643 1.447 1.851 1.919 2.947l.123.286.12-.272C8.51 2.45 9.045 1.243 9.94.596c.793-.573 1.801-.79 2.672-.397.9.405 1.388 1.336 1.388 2.51zM10.612 1.5c.48-.347 1.056-.41 1.548 0 .428.357.45.525.506.93l.01.07c0 .599-.516 1.5-1.032 1.5-.366 0-.653-.003-.922-.006-.49-.005-.92-.01-1.657.006.14-.272.252-.533.36-.782.285-.667.534-1.246 1.187-1.718zm-5.673 0c-.233-.161-.766-.09-.987.006-.183.08-.456.32-.456 1.015 0 .674 1.092 1.257 1.092 1.257S5.454 4 7.002 4c-.527-1.305-1.273-1.951-2.063-2.5z", fill: "var(--sl-color-primary-600)" })));
-};
-
-function ProgressBarView(props) {
-  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, expired = false, } = props;
-  console.log("progress bar props", props);
-  const gift1 = gift();
-  const gift2 = gift();
-  const gift3 = gift();
-  var items = [];
-  var columns = "";
-  var repetitions = Math.floor(progress / goal);
-  if (repeatable) {
-    if (steps) {
-      addStepsRepeatable();
-    }
-    else {
-      addLinearRepeatable();
-    }
-  }
-  // non repeatable
-  else {
-    if (steps) {
-      addSteps();
-    }
-    else {
-      addLinear();
-    }
-  }
-  const style = {
-    ProgressBar: {
-      "& .progress-bar": {
-        height: "15px",
-        marginTop: steps
-          ? "var(--sl-spacing-medium)"
-          : "var(--sl-spacing-large)",
-        filter: expired ? "grayscale(1)" : "",
-        marginBottom: "var(--sl-spacing-xx-large)",
-        marginRight: "var(--sl-spacing-x-small)",
-        fontSize: "var(--sl-font-size-x-small)",
-        display: "grid",
-        gridTemplateColumns: columns,
-        lineHeight: "45px",
-        userSelect: "none",
-      },
-      "& .progress-bar.repeatable-steps": {
-        marginLeft: "var(--sl-spacing-x-small)",
-      },
-      "& .filled:after": {
-        content: '""',
-        display: "flex",
-        width: "100%",
-        height: "4px",
-        borderRadius: "4px",
-        backgroundColor: "var(--sl-color-primary-300)",
-      },
-      "& .progress": {
-        display: "block",
-        textAlign: "center",
-        marginLeft: "-100px",
-        marginRight: "-100px",
-      },
-      "& .progress::after": {
-        content: '""',
-        width: "12px",
-        height: "12px",
-        display: "flex",
-        backgroundColor: "var(--sl-color-primary-300)",
-        borderRadius: "50%",
-        position: "relative",
-        left: "47%",
-        top: "-85%",
-      },
-      "& .progress.bg:after": {
-        width: "0",
-        height: "0",
-        border: "none",
-      },
-      "& .progress.top": {
-        position: "relative",
-        top: "-40px",
-      },
-      "& .progress.top:after": {
-        top: "-16%",
-      },
-      "& .empty": {
-        display: "block",
-        textAlign: "center",
-        marginLeft: "-100px",
-        marginRight: "-100px",
-      },
-      "& .empty::after": {
-        content: '""',
-        width: "12px",
-        height: "12px",
-        border: "2px solid #E0E0E0",
-        margin: "-2px",
-        display: "flex",
-        backgroundColor: "white",
-        borderRadius: "50%",
-        position: "relative",
-        left: "47%",
-        top: "-85%",
-      },
-      "& .empty.bg:after": {
-        width: "0",
-        height: "0",
-        border: "none",
-      },
-      "& .remain:after": {
-        content: '""',
-        display: "flex",
-        width: "100%",
-        height: "4px",
-        borderRadius: "4px",
-        backgroundColor: "#E0E0E0",
-      },
-      "& .gift.bw": {
-        filter: "grayscale(100%)",
-      },
-      "& .gift.start": {
-        transform: "scale(80%)",
-        top: "-20px",
-      },
-      "& .gift": {
-        textAlign: "center",
-        marginLeft: "-100px",
-        marginRight: "-100px",
-        position: "relative",
-        display: "list-item",
-        listStyleType: "none",
-        top: "-18px",
-        filter: goal <= progress ? "" : "grayscale(100%)",
-        zIndex: "1",
-      },
-    },
-  };
-  jss.setup(create());
-  const sheet = jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.ProgressBar },
-    h("style", { type: "text/css" }, styleString),
-    h("div", { class: repetitions > 1 ? "progress-bar repeatable-steps" : "progress-bar" }, items)));
-  function clamp(x, min, max) {
-    return Math.min(Math.max(x, min), max);
-  }
-  function addLinear() {
-    const ratio = progress / goal;
-    columns =
-      clamp(ratio, 0, 1) + "fr 0fr " + clamp(1 - ratio, 0, 1) + "fr 0fr 0fr";
-    items.push(h("div", { class: "filled" }));
-    items.push(h("div", { class: clamp(progress, 0, goal) == goal ? "progress top bg" : "progress top" }, clamp(progress, 0, goal) == goal
-      ? ""
-      : progressBarUnit + clamp(progress, 0, goal)));
-    items.push(h("div", { class: "remain" }));
-    items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
-    items.push(h("div", { class: "gift" }, gift1));
-  }
-  function addSteps() {
-    let ratio = 1 / goal;
-    for (let i = 1; i < goal; i++) {
-      columns += ratio + "fr 0fr ";
-      if (i > progress) {
-        items.push(h("div", { class: "remain" }));
-        items.push(h("div", { class: "empty" }, i));
-      }
-      else {
-        items.push(h("div", { class: "filled" }));
-        items.push(h("div", { class: "progress" }, i));
-      }
-    }
-    columns += ratio + "fr 0fr ";
-    // reward success
-    if (goal <= progress) {
-      columns += "0fr ";
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: "progress bg" }, goal));
-      items.push(h("div", { class: "gift" }, gift1));
-    }
-    // reward fail
-    else {
-      columns += "0fr ";
-      items.push(h("div", { class: "remain" }));
-      items.push(h("div", { class: "empty bg" }, goal));
-      items.push(h("div", { class: "gift" }, gift1));
-    }
-  }
-  function addLinearRepeatable() {
-    let repetitions = Math.floor(progress / goal);
-    let ratio = ((progress % goal) / goal) * 0.5;
-    // 0 repetition
-    if (repetitions == 0) {
-      columns = ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr 0.5fr 0fr 0fr";
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progressBarUnit + progress));
-      items.push(h("div", { class: "remain" }));
-      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
-      items.push(h("div", { class: "gift" }, gift1));
-      items.push(h("div", { class: "remain" }));
-      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-      items.push(h("div", { class: "gift bw" }, gift2));
-    }
-    // single repetition
-    else if (repetitions == 1) {
-      columns =
-        "0.5fr 0fr 0fr " + ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr";
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
-      items.push(h("div", { class: "gift" }, gift1));
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progress == goal ? "" : progressBarUnit + progress));
-      items.push(h("div", { class: "remain" }));
-      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
-      items.push(h("div", { class: "gift bw" }, gift2));
-    }
-    // multiple repetitions
-    else {
-      columns =
-        "0fr 0fr 0.5fr 0fr 0fr " +
-          ratio +
-          "fr 0fr " +
-          (0.5 - ratio) +
-          "fr 0fr 0fr";
-      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions - 1)));
-      items.push(h("div", { class: "gift start" }, gift1));
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * repetitions));
-      items.push(h("div", { class: "gift" }, gift2));
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: progress == goal * repetitions ? "progress top bg" : "progress top" }, progress == goal * repetitions ? "" : progressBarUnit + progress));
-      items.push(h("div", { class: "remain" }));
-      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions + 1)));
-      items.push(h("div", { class: "gift bw" }, gift3));
-    }
-  }
-  function addStepsRepeatable() {
-    let repetitions = Math.floor(progress / goal);
-    // no or single repetition
-    if (repetitions < 2) {
-      let ratio = 1 / goal;
-      for (let i = 1; i < goal * 2 + 1; i++) {
-        columns += ratio + "fr 0fr ";
-        if (i > progress) {
-          if (i == goal) {
-            columns += "0fr ";
-            items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty bg" }, goal));
-            items.push(h("div", { class: "gift bw" }, gift1));
-          }
-          else if (i == goal * 2) {
-            columns += "0fr 0fr";
-            items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty bg" }, goal * 2));
-            items.push(h("div", { class: "gift bw" }, gift2));
-          }
-          else {
-            items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty" }, i));
-          }
-        }
-        else if (i == goal) {
-          columns += "0fr ";
-          items.push(h("div", { class: "filled" }));
-          items.push(h("div", { class: "progress bg" }, i));
-          items.push(h("div", { class: "gift" }, gift3));
-        }
-        else {
-          items.push(h("div", { class: "filled" }));
-          items.push(h("div", { class: "progress" }, i));
-        }
-      }
-    }
-    // case repetition many
-    else {
-      let position = (progress % goal) + goal;
-      let ratio = 1 / goal;
-      columns += "0fr 0fr ";
-      items.push(h("div", { class: "progress bg" }, goal * (repetitions - 1)));
-      items.push(h("div", { class: "gift start" }, gift1));
-      for (let i = 1; i < goal * 2 + 1; i++) {
-        columns += ratio + "fr 0fr ";
-        if (i <= goal) {
-          if (i == goal) {
-            columns += "0fr ";
-            items.push(h("div", { class: "filled" }));
-            items.push(h("div", { class: "progress bg" }, i + goal * (repetitions - 1)));
-            items.push(h("div", { class: "gift" }, gift2));
-          }
-          else {
-            items.push(h("div", { class: "filled" }));
-            items.push(h("div", { class: "progress" }, i + goal * (repetitions - 1)));
-          }
-        }
-        else if (i > position) {
-          if (i == goal * 2) {
-            columns += "0fr 0fr";
-            items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty bg" }, i + goal * (repetitions - 1)));
-            items.push(h("div", { class: "gift bw" }, gift3));
-          }
-          else {
-            items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty" }, i + goal * (repetitions - 1)));
-          }
-        }
-        else {
-          items.push(h("div", { class: "filled" }));
-          items.push(h("div", { class: "progress" }, i + goal * (repetitions - 1)));
-        }
-      }
-    }
-  }
-}
-
-function TaskCardView(props) {
-  console.log({ props });
-  const checkmark_circle$1 = checkmark_circle();
-  const arrow_left_right$1 = arrow_left_right();
-  const style = {
-    HostBlock: HostBlock,
-    TaskCard: {
-      "& .main > div": {
-        margin: "var(--sl-spacing-medium)",
-      },
-      "& .main": {
-        position: "relative",
-        boxSizing: "border-box",
-        minWidth: "347px",
-        background: "var(--sl-color-neutral-0)",
-        border: "1px solid var(--sl-color-neutral-300)",
-        borderRadius: "var(--sl-border-radius-medium)",
-        fontSize: "var(--sl-font-size-small)",
-        lineHeight: "var(--sl-line-height-dense)",
-        color: "var(--sl-color-neutral-600)",
-      },
-      "& .main.complete": {
-        background: "var(--sl-color-success-50)",
-        borderColor: "var(--sl-color-success-700)",
-      },
-      "& .main.expired": {
-        color: "var(--sl-color-neutral-400)",
-        background: "var(--sl-color-neutral-50)",
-      },
-      "& .title": {
-        fontSize: "var(--sl-font-size-small)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-      },
-      "& .black": {
-        color: "var(--sl-color-neutral-1000)",
-      },
-    },
-    Header: {
-      display: "flex",
-      "& .icon": {
-        alignSelf: "center",
-        lineHeight: "0",
-        color: "var(--sl-color-success-700)",
-        fontSize: "var(--sl-font-size-large)",
-        marginRight: "var(--sl-spacing-x-small)",
-      },
-      "& .value": {
-        alignSelf: "center",
-        fontSize: "var(--sl-font-size-x-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        lineHeight: "100%",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-      "& .text": {
-        alignSelf: "end",
-        textTransform: "uppercase",
-        fontSize: "var(--sl-font-size-x-small)",
-        lineHeight: "var(--sl-font-size-medium)",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-      "& .end": {
-        color: "var(--sl-color-warning-500)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        marginBottom: "var(--sl-spacing-xx-small)",
-      },
-      "& .black": {
-        color: "var(--sl-color-neutral-1000)",
-      },
-      "& .neutral": {
-        color: "var(--sl-color-neutral-400)",
-      },
-    },
-    Footer: {
-      display: "flex",
-      "& .icon": {
-        fontSize: "var(--sl-font-size-xx-small)",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-      "& .text": {
-        marginTop: "auto",
-        verticalAlign: "text-bottom",
-        fontSize: "var(--sl-font-size-x-small)",
-      },
-      "& .success": {
-        color: "var(--sl-color-success-600)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-      },
-      "& .action": {
-        marginTop: "auto",
-        marginLeft: "auto",
-        "&::part(base)": {
-          color: "var(--sl-color-neutral-0)",
-          borderRadius: "var(--sl-border-radius-medium)",
-        },
-        "&.disabled::part(base)": {
-          border: "1px solid var(--sl-color-neutral-400)",
-          background: "var(--sl-color-neutral-400)",
-        },
-      },
-      "& .neutral": {
-        color: "var(--sl-color-neutral-400)",
-      },
-    },
-  };
-  jss.setup(create());
-  const sheet = jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const showComplete = props.progress >= props.goal;
-  const repetitions = props.showProgressBar
-    ? Math.floor(props.progress / props.goal)
-    : props.progress;
-  const dateStart = props.showExpiry && luxon.DateTime.fromISO(props.rewardDuration.split("/")[0]);
-  const dateEnd = props.showExpiry && luxon.DateTime.fromISO(props.rewardDuration.split("/")[1]);
-  const dateToday = luxon.DateTime.now();
-  const taskComplete = showComplete && props.repeatable === false;
-  const taskUnavailable = props.showExpiry && (dateEnd < dateToday || dateToday < dateStart);
-  return (h("div", { class: sheet.classes.TaskCard },
-    h("div", { class: taskUnavailable
-        ? "main expired"
-        : taskComplete
-          ? "main complete"
-          : "main" },
-      h("style", { type: "text/css" }, styleString),
-      h("div", { class: sheet.classes.Header }, props.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0", height: "12px" } })) : (h("div", null,
-        taskUnavailable && (h("div", { class: "end" }, "Available " +
-          dateStart.toLocaleString(luxon.DateTime.DATE_MED).split(",")[0] +
-          " - " +
-          dateEnd.toLocaleString(luxon.DateTime.DATE_MED).split(",")[0])),
-        showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, checkmark_circle$1)),
-        h("span", { class: taskUnavailable ? "value" : "value black" }, props.rewardAmount),
-        h("span", { class: "text" }, props.rewardUnit)))),
-      props.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "0 16px", height: "12px" } })) : (h("div", { class: taskUnavailable ? "title" : "title black" }, props.cardTitle)),
-      props.loading ? (h("sl-skeleton", { style: { margin: "12px 16px", height: "12px" } })) : (h(Details, Object.assign({}, props))),
-      props.showProgressBar && props.loading ? (h("sl-skeleton", { style: { margin: "0 16px", height: "12px" } })) : (props.showProgressBar && (h(ProgressBarView, Object.assign({}, props, { complete: taskComplete, expired: taskUnavailable })))),
-      h("div", { class: sheet.classes.Footer }, props.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto", height: "12px" } })) : (h("div", { style: { display: "contents" } },
-        h("span", { class: "text" },
-          props.repeatable && (h("div", null,
-            h("span", { class: repetitions > 0
-                ? taskUnavailable
-                  ? "icon neutral"
-                  : "icon success"
-                : "icon" }, arrow_left_right$1),
-            h("span", { class: repetitions > 0
-                ? taskUnavailable
-                  ? "neutral"
-                  : "success"
-                : "" }, "Completed " + repetitions + " times"))),
-          props.showExpiry && !taskUnavailable && (h("span", null, "Ends " + dateEnd.toLocaleString(luxon.DateTime.DATE_FULL)))),
-        h("sl-button", { class: taskComplete || taskUnavailable ? "action disabled" : "action", type: "primary", size: "small", onClick: () => props.openNewTab
-            ? window.open(props.buttonLink)
-            : window.open(props.buttonLink, "_self"), disabled: taskComplete || taskUnavailable }, props.buttonText)))))));
-}
-function Details(props) {
-  const style = {
-    Description: {
-      "& input[type=checkbox]": {
-        display: "none",
-      },
-      "& input:checked ~ .details": {
-        transform: "rotate(-180deg)",
-      },
-      "& .details": {
-        position: "absolute",
-        top: "var(--sl-spacing-medium)",
-        right: "var(--sl-spacing-medium)",
-        color: "var(--sl-color-neutral-700)",
-        fontSize: "var(--sl-font-size-large)",
-        "& :hover": {
-          color: "var(--sl-color-primary-700)",
+          data: [
+            {
+              prettyValue: "19 Points",
+              type: "CREDIT",
+              fuelTankCode: "ABC",
+              globalRewardKey: "Key",
+            },
+          ],
         },
-        transformOrigin: "50% 37%",
-        transition: "transform var(--sl-transition-medium) ease",
       },
-      "& input:checked ~ .summary": {
-        transition: "all var(--sl-transition-medium) ease",
-        maxHeight: "300px",
-        marginBottom: props.steps
-          ? "var(--sl-spacing-large)"
-          : props.showProgressBar
-            ? "var(--sl-spacing-xx-large)"
-            : "var(--sl-spacing-large)",
-      },
-      "& .summary": {
-        display: "block",
-        overflow: "hidden",
-        fontSize: "var(--sl-font-size-small)",
-        maxHeight: "0px",
-        transition: "all var(--sl-transition-fast) ease-out",
-        marginBottom: "var(--sl-spacing-medium)",
-      },
-    },
-  };
-  jss.setup(create());
-  const sheet = jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const rid = Math.random().toString(36).slice(2);
-  return (h("div", null,
-    h("style", { type: "text/css" }, styleString),
-    h("span", { class: sheet.classes.Description },
-      h("input", { type: "checkbox", id: "details-" + rid }),
-      h("label", { class: "details", htmlFor: "details-" + rid },
-        h("sl-icon", { name: "chevron-down" })),
-      h("span", { class: "summary" }, props.description))));
-}
-
-const scenarioTaskCard = "@author:derek\r\n@owner:\r\nFeature: Task Card\r\n\r\n\tScenario: A header, body title, description and a CTA button are always displayed\r\n\t\tGiven the Task Card is configured with the following props\r\n\t\t\t| prop         | value                                        |\r\n\t\t\t| rewardAmount | \"40\"                                         |\r\n\t\t\t| rewardUnit   | \"Points\"                                     |\r\n\t\t\t| cardTitle    | Complete a survey                            |\r\n\t\t\t| description  | Fill out our survey form and receive points! |\r\n\t\t\t| buttonText   | Take Survey                                  |\r\n\t\t\t| buttonLink   | https://example.com/                         |\r\n\t\tWhen a user views the Task Card\r\n\t\tThen they see \"40 Points\" as the heading\r\n\t\tAnd the \"40\" is bolded\r\n\t\tAnd they see \"Complete a survey\" bolded in the body\r\n\t\tAnd a details icon in the top right hand corner\r\n\t\tAnd a button with text \"Take Survey\" in the bottom right hand corner\r\n\t\tWhen they click the button\r\n\t\tThen they are redirected to \"example.com\" in a new window\r\n\t\tWhen they click the details icon\r\n\t\tThen \"Fill out our survey form and receive points!\" is shown as the card description\r\n\r\n\tScenario: A loading state is displayed while the Task Card is loading\r\n\t\tGiven a Task Card component\r\n\t\tWhen a user views the Task Card\r\n\t\tThen a loading state is displayed\r\n\t\tWhen the Task Card has loaded\r\n\t\tThen the loading state disapears\r\n\r\n\tScenario Outline: The Progress Bar can be shown or hidden but is hidden by default\r\n\t\tGiven a Task Card component\r\n\t\tAnd it <mayHave> \"showProgressBar\" <value>\r\n\t\tWhen a user views the Task Card\r\n\t\tThen the progress bar <mayBe> displayed\r\n\t\tExamples:\r\n\t\t\t| mayHave      | value | mayBe |\r\n\t\t\t| has          | true  | is    |\r\n\t\t\t| has          | false | isn't |\r\n\t\t\t| doesn't have |       | isn't |\r\n\r\n\tScenario Outline: Tasks can be repeatable or one-time only but are one-time only be default\r\n\t\tGiven a Task Card component\r\n\t\tAnd it <mayHave> \"repeatable\" <value>\r\n\t\tAnd a user who has already completed the task\r\n\t\tWhen they views the Task Card\r\n\t\tThen they see a green checkmark icon beside the card heading\r\n\t\tAnd the card <mayBe> green\r\n\t\tAnd the card's border <mayBe> green\r\n\t\tAnd the CTA button <mayBe> disabled\r\n\t\tAnd the CTA button <mayBe> grey\r\n\t\tExamples:\r\n\t\t\t| mayHave      | value | mayBe |\r\n\t\t\t| has          | true  | isn't |\r\n\t\t\t| has          | false | is    |\r\n\t\t\t| doesn't have |       | is    |\r\n\r\n\tScenario: Task Expiries can be configured and disable the CTA after the expiry\r\n\t\tGiven a Task Card component\r\n\t\tAnd it is configured for <expiry>\r\n\t\tWhen a user views the Card on <day>\r\n\t\tThen they the expiry on <cardLocation>\r\n\t\tAnd the text <mayBe> orange\r\n\t\tAnd the card <mayBe> disabled\r\n\t\tAnd the card <mayBe> grey\r\n\t\tAnd the user <mayBe> unable to complete the loyalty task\r\n\t\tExamples:\r\n\t\t\t| expiry               | day                    | cardLocation | mayBe |\r\n\t\t\t| Dec 31 2021 11:59:59 | Dec 1st 2021 12:00:00  | bottom left  | isn't |\r\n\t\t\t| Dec 31 2021 11:59:59 | Dec 31 2021 11:00:00   | top right    | isn't |\r\n\t\t\t| Dec 31 2021 11:59:59 | Jan 15th 2022 10:00:00 | top right    | is    |\r\n\r\n\tScenario Outline: Task expiry can be hidden or shown but is hidden by default\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured with an expiry\r\n\t\tAnd it <mayHave> \"showExpiry\" <value>\r\n\t\tWhen a user views the Task card\r\n\t\tThen the expiry <mayBe> shown in the bottom left hand corner\r\n\t\tExamples:\r\n\t\t\t| mayHave      | value | mayBe |\r\n\t\t\t| has          | true  | is    |\r\n\t\t\t| has          | false | isn't |\r\n\t\t\t| doesn't have |       | isn't |\r\n\r\n\t#DS: Currently this text is non configurable and isnt set up for proper pluralization\r\n\tScenario Outline: A task completion count is displayed for repeatable tasks\r\n\t\tGiven a Task Card is configured for a repeatable task\r\n\t\tAnd has \"goalCompletionNumber\" <goalCompletionNumberValue>\r\n\t\tAnd a user with <userGoalProgress>\r\n\t\tWhen the user views the task card\r\n\t\tThen they see a repeat icon\r\n\t\tAnd the <text> in the bottom left hand corner\r\n\t\tAnd the <text> is green\r\n\t\tExamples:\r\n\t\t\t| goalCompletionNumber | userGoalProgress | text              |\r\n\t\t\t| 1                    | 0                | Completed 0 times |\r\n\t\t\t| 1                    | 1                | Completed 1 times |\r\n\t\t\t| 1                    | 2                | Completed 2 times |\r\n\t\t\t| 10                   | 5                | Completed 0 times |\r\n\t\t\t| 10                   | 12               | Completed 1 times |\r\n\t\t\t| 10                   | 29               | Completed 2 times |\r\n\r\n\tScenario Outline: The source of a user's progress can be a custom field or a program goal\r\n\t\tGiven a Task Card is configured to have <progressSourcePath> progress source\r\n\t\tAnd a user\r\n\t\tWhen they view the Task card\r\n\t\tThen the value at <progressSourcePath> is used to benchmark their progress against the Goal Completion Count\r\n\t\tExamples:\r\n\t\t\t| value                                            |\r\n\t\t\t| /customFields/activityCount                      |\r\n\t\t\t| /customFields/purchaseTotal                      |\r\n\t\t\t| /programGoals/count%2FComment-on-Article         |\r\n\t\t\t| /programGoals/count/Referral-Started%2Freferrals |\r\n\r\n\tScenario Outline: The users completion of a goal is calculated by the Goal Completion Number\r\n\t\tGiven a Task Card is configured to have <goalValue>\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen they are shown to have <progressValue> towards <goalValue>\r\n\t\tWhen their progress grows larger than <goalValue>\r\n\t\tThen the task is marked as completed\r\n\t\tExamples:\r\n\t\t\t| goalValue | progressValue |\r\n\t\t\t| 1         | 0             |\r\n\t\t\t| 10        | 9             |\r\n\t\t\t| 5         | 2             |\r\n\r\n\tScenario: The Goal Completion Number defaults to 1\r\n\t\tGiven a Task Card without a configured \"goalCompletionNumber\"\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen it <mayBe> marked as completed\r\n\t\tExamples:\r\n\t\t\t| progressValue | mayBe |\r\n\t\t\t| 0             | isn't |\r\n\t\t\t| 1             | is    |\r\n\t\t\t| 2             | is    |";
-
-const scenarioProgressBar = "@author:\r\n@owner:\r\nFeature: Task Card Progress Bar\r\n\r\n\tScenario Outline: Progress Bar\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> shows <progress> with <unit> above\r\n\t\tAnd gift icon has <color>\r\n\t\tAnd gift icon shows <goal> with <unit> below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar           | unit | color |\r\n\t\t\t| -100     | 500  | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 0        | 500  | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 250      | 500  | ―――――――――●―――――――――🎁 | $    | no    |\r\n\t\t\t| 500      | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 1000     | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\r\n\tScenario Outline: Progress Bar Steps\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd steps is enabled\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> has incrementing steps from 1 to <goal>\r\n\t\tAnd gift icon has <color>\r\n\t\tAnd gift icon shows <goal> below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar           | color |\r\n\t\t\t| -1       | 5    | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 0        | 5    | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 1        | 5    | ―――●―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 5        | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\t\t\t| 7        | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\r\n\r\n\tScenario Outline: Progress Bar Repeatable\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> shows <progress> with <unit> above\r\n\t\tAnd <icon1> is <color1> with <text1> displayed below\r\n\t\tAnd <icon2> is <color2> with <text2> displayed below\r\n\t\tAnd <icon3> is <color3> with <text3> displayed below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar          | unit | icon1 | color1   | text1 | icon2 | color2    | text 2 | icon3 | color3    | text 1 | text 3 |\r\n\t\t\t| 250      | 500  | ――――●――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | greyscale | 500    | gift  | greyscale | NA     | 1000   |\r\n\t\t\t| 500      | 500  | ―――――――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | NA     | 1000   |\r\n\t\t\t| 750      | 500  | ―――――――――🎁―――●―――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | NA     | 1000   |\r\n\t\t\t| 1000     | 500  | 🎁―――――――🎁―――――――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 500    | 1500   |\r\n\t\t\t| 1250     | 500  | 🎁―――――――🎁―――●―――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 500    | 1500   |\r\n\r\n\tScenario Outline: Progress Bar Steps Repeatable\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd steps is enabled\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar |";
-
-const scenario$5 = scenarioTaskCard + scenarioProgressBar;
-const TaskCard_stories = {
-  title: "Components/Task Card/",
-  parameters: {
-    scenario: scenario$5,
+    ],
   },
 };
-const storyFrame = {
-  display: "inline-flex",
-  gap: "32px",
-};
-const resizable = {
-  width: "347px",
-  minWidth: "347px",
-  resize: "horizontal",
-  height: "fit-content",
-  overflow: "hidden",
-};
-const oneAction = {
-  rewardAmount: 20,
-  rewardUnit: "SaaSquatch Points",
-  cardTitle: "Complete a survey",
-  description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-  repeatable: false,
-  showProgressBar: false,
-  progress: 0,
-  goal: 1,
-  buttonText: "Take survey",
-  buttonLink: "https://example.com/",
-  openNewTab: false,
-  showExpiry: false,
-  rewardDuration: null,
-  loading: false,
-};
-const coupleActions = {
-  rewardAmount: 40,
-  rewardUnit: "SaaSquatch Points",
-  cardTitle: "Comment on 5 articles",
-  description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-  repeatable: false,
-  showProgressBar: true,
-  steps: true,
-  progress: 1,
-  goal: 5,
-  buttonText: "Take survey",
-  buttonLink: "https://example.com/",
-  openNewTab: false,
-  showExpiry: false,
-  rewardDuration: null,
-  loading: false,
-};
-const manyActions = {
-  rewardAmount: 150,
-  rewardUnit: "SaaSquatch Points",
-  cardTitle: "Spend $500 at our Store",
-  description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-  repeatable: false,
-  showProgressBar: true,
-  progress: 100,
-  goal: 500,
-  progressBarUnit: "$",
-  buttonText: "Take survey",
-  buttonLink: "https://example.com/",
-  openNewTab: false,
-  showExpiry: false,
-  rewardDuration: null,
-  loading: false,
-};
-const TaskCardNotRepeatable = () => {
-  return (h("div", { style: storyFrame },
-    h("div", { style: resizable },
-      h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 230 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
-      " ",
-      h("h5", null))));
-};
-const TaskCardRepeatable = () => {
-  return (h("div", { style: storyFrame },
-    h("div", { style: resizable },
-      h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 0, repeatable: true })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1, repeatable: true })),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1, repeatable: true })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5, repeatable: true })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 7, repeatable: true })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 10, repeatable: true })),
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 100, repeatable: true })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500, repeatable: true })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 650, repeatable: true })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1000, repeatable: true })),
-      h("h5", null))));
-};
-const TaskCardEndDate = () => {
-  const expire = {
-    showExpiry: true,
-    rewardDuration: "2021-12-01T08:00:00.000Z/2077-12-01T08:00:00.000Z",
-  };
-  const expireRepeat = { ...expire, repeatable: true };
-  return (h("div", { style: storyFrame },
-    h("div", { style: resizable },
-      h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction, expire)),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, expireRepeat)),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, expire)),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, expireRepeat)),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, expire)),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, expireRepeat)),
-      " ",
-      h("h5", null))));
-};
-const TaskCardLoading = () => {
-  const loading = { loading: true };
-  return (h("div", { style: storyFrame },
-    h("div", { style: resizable },
-      h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction, loading)),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, loading)),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, loading)),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, loading)),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, loading)),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, loading)),
-      " ",
-      h("h5", null))));
+const rewards = [rewardsData];
+const RewardsCell = () => {
+  return (h("sqm-referral-table-rewards-cell", { rewards: rewards }));
+};
+
+const ReferralTableCell$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': ReferralTableCell_stories,
+  TableCell: TableCell,
+  TableUserCell: TableUserCell,
+  EmptyCell: EmptyCell$1,
+  StatusCell: StatusCell,
+  DateCell: DateCell,
+  RewardsCell: RewardsCell
+});
+
+const UserName_stories = {
+  title: "User Name",
 };
-const TaskCardUnavailable = () => {
-  const expire = {
-    showExpiry: true,
-    rewardDuration: "2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",
-  };
-  const expireRepeat = { ...expire, repeatable: true };
-  return (h("div", { style: storyFrame },
-    h("div", { style: resizable },
-      h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expire)),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expire)),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expireRepeat)),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expireRepeat)),
-      " ",
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expire)),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expire)),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expireRepeat)),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expireRepeat)),
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expire)),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expire)),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expireRepeat)),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expireRepeat)),
-      h("h5", null))));
+const FullStack$1 = () => {
+  return (h("sqm-user-name", { demoData: {
+      loading: false,
+      loadingText: "...",
+      username: "Test Testerson",
+    } }));
 };
-const ProgressBar$1 = () => {
-  const props = {
-    progress: 0,
-    goal: 500,
-    progressBarUnit: "$",
-  };
-  return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [-100, 0, 100, 500, 1000] }, props: props, Component: ProgressBarView })));
+const FullStackDefault = () => {
+  return h("sqm-user-name", null);
+};
+
+const UserName = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': UserName_stories,
+  FullStack: FullStack$1,
+  FullStackDefault: FullStackDefault
+});
+
+const PasswordField_stories = {
+  title: "Portal Password Field",
 };
-const ProgressBarSteps = () => {
-  const props = {
-    progress: 0,
-    steps: true,
-    goal: 5,
-    progressBarUnit: "$",
-  };
-  return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [-1, 0, 1, 5, 7] }, props: props, Component: ProgressBarView })));
+const Start = () => {
+  return (h("sqm-password-field", { demoData: {
+      initValue: "",
+      states: {
+        enableValidation: true,
+        validationErrors: {},
+        content: {
+          fieldLabel: "Password",
+        },
+      },
+    } }));
 };
-const ProgressBarRepeatable = () => {
-  const props = {
-    progress: 0,
-    goal: 500,
-    progressBarUnit: "$",
-    repeatable: true,
-  };
-  return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [100, 500, 650, 1200] }, props: props, Component: ProgressBarView })));
+const EmptyError = () => {
+  return (h("sqm-password-field", { demoData: {
+      initValue: "",
+      states: {
+        enableValidation: true,
+        validationErrors: { password: "Cannot be empty" },
+        content: {
+          fieldLabel: "Password",
+        },
+      },
+    } }));
 };
-const ProgressBarStepsRepeatable = () => {
-  const props = {
-    progress: 0,
-    steps: true,
-    goal: 5,
-    progressBarUnit: "$",
-    repeatable: true,
-  };
-  return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [1, 5, 7, 12] }, props: props, Component: ProgressBarView })));
+const ValidationError = () => {
+  return (h("sqm-password-field", { demoData: {
+      initValue: "asdf",
+      states: {
+        enableValidation: true,
+        validationErrors: { password: "Incomplete" },
+        content: {
+          fieldLabel: "Password",
+        },
+      },
+    } }));
 };
 
-const TaskCard$1 = /*#__PURE__*/Object.freeze({
+const PasswordField = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  'default': TaskCard_stories,
-  TaskCardNotRepeatable: TaskCardNotRepeatable,
-  TaskCardRepeatable: TaskCardRepeatable,
-  TaskCardEndDate: TaskCardEndDate,
-  TaskCardLoading: TaskCardLoading,
-  TaskCardUnavailable: TaskCardUnavailable,
-  ProgressBar: ProgressBar$1,
-  ProgressBarSteps: ProgressBarSteps,
-  ProgressBarRepeatable: ProgressBarRepeatable,
-  ProgressBarStepsRepeatable: ProgressBarStepsRepeatable
+  'default': PasswordField_stories,
+  Start: Start,
+  EmptyError: EmptyError,
+  ValidationError: ValidationError
 });
 
 const portalTemplate = "<sqm-portal-frame>\r\n  <a slot=\"header\" href=\"/\">\r\n    <sqm-text style=\"height: 60px\">\r\n      <img\r\n        style=\"height: 60px\"\r\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\r\n      />\r\n    </sqm-text>\r\n  </a>\r\n  <sqb-program-section program-id=\"referral-program\">\r\n    <sqm-router>\r\n      <template\r\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\r\n      >\r\n        <sqm-graphql-client-provider\r\n          domain=\"https://managed-identity.saasquatch.com\"\r\n        >\r\n          <sqm-hero\r\n            background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\r\n          >\r\n            <sqm-router>\r\n              <template path=\"/register\">\r\n                <sqm-portal-register>\r\n                  <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n                </sqm-portal-register>\r\n              </template>\r\n\r\n              <template path=\"/emailVerification\">\r\n                <sqm-portal-protected-route\r\n                  redirect-to=\"/login\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-email-verification></sqm-portal-email-verification>\r\n              </template>\r\n\r\n              <template path=\"/login\">\r\n                <sqm-portal-login></sqm-portal-login>\r\n              </template>\r\n\r\n              <template path=\"/verifyEmail\">\r\n                <sqm-portal-verify-email></sqm-portal-verify-email>\r\n              </template>\r\n\r\n              <template path=\"/forgotPassword\">\r\n                <sqm-portal-forgot-password\r\n                  email-label=\"Business Email\"\r\n                ></sqm-portal-forgot-password>\r\n              </template>\r\n\r\n              <template path=\"/resetPassword\">\r\n                <sqm-portal-reset-password\r\n                  confirm-password=\"true\"\r\n                ></sqm-portal-reset-password>\r\n              </template>\r\n              <template path=\"/logout\">\r\n                <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-hero>\r\n        </sqm-graphql-client-provider>\r\n      </template>\r\n    </sqm-router>\r\n    <sqm-router>\r\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\r\n        <sqm-divided-layout\r\n          direction=\"row\"\r\n          style=\"\r\n            border-top: 1px solid #eaeaea;\r\n            border-bottom: 1px solid #eaeaea;\r\n          \"\r\n        >\r\n          <sqm-navigation-sidebar>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/\"\r\n              icon=\"house\"\r\n              label=\"Dashboard\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/activity\"\r\n              icon=\"bar-chart\"\r\n              label=\"Activity\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/editProfile\"\r\n              icon=\"person\"\r\n              label=\"Edit Profile\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/logout\"\r\n              icon=\"box-arrow-right\"\r\n              label=\"Logout\"\r\n            ></sqm-navigation-sidebar-item>\r\n          </sqm-navigation-sidebar>\r\n          <sqm-divided-layout direction=\"column\">\r\n            <sqm-router>\r\n              <template path=\"/\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqb-widget\r\n                  widget-type=\"p/referral-program/w/referrerWidget\"\r\n                  track-loads=\"true\"\r\n                ></sqb-widget>\r\n              </template>\r\n              <template path=\"/editProfile\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\r\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\r\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\r\n                  <sqm-graphql-client-provider\r\n                    domain=\"https://managed-identity.saasquatch.com\"\r\n                  >\r\n                    <sqm-portal-change-password></sqm-portal-change-password>\r\n                  </sqm-graphql-client-provider>\r\n                </sqm-portal-container>\r\n              </template>\r\n\r\n              <template path=\"/activity\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-text> <h1>Activity</h1></sqm-text>\r\n                  <sqm-stat-container space=\"xxxx-large\"\r\n                    ><sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/referralsCount\"\r\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\r\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\r\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\r\n                    >\r\n                  </sqm-stat-container>\r\n                  <sqm-referral-table>\r\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\r\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\r\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\r\n                    <sqm-referral-table-date-column\r\n                      column-title=\"Referred\"\r\n                      date-shown=\"dateReferralStarted\"\r\n                    ></sqm-referral-table-date-column> </sqm-referral-table\r\n                ></sqm-portal-container>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-divided-layout>\r\n        </sqm-divided-layout>\r\n      </template>\r\n    </sqm-router>\r\n  </sqb-program-section>\r\n  <sqm-portal-footer\r\n    slot=\"footer\"\r\n    support-email=\"support@example.com\"\r\n    terms-link=\"https://example.com\"\r\n    faq-link=\"https://example.com\"\r\n    terms-text=\"Terms And Conditions\"\r\n    faq-text=\"FAQ\"\r\n    show-powered-by=\"true\"\r\n  ></sqm-portal-footer>\r\n</sqm-portal-frame>\r\n";
@@ -24963,21 +22900,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",
@@ -25024,16 +22961,16 @@ function DefaultTemplateView(props) {
         gridTemplateColumns: "repeat(9, 80px)",
         gridGap: "10px",
       } },
-      h("button", { onClick: () => rn.push("/") }, "Dashboard"),
-      props.leadSubmit && (h("button", { onClick: () => rn.push("/refer") }, "Submit a Referral")),
-      h("button", { onClick: () => rn.push("/activity") }, "Activity"),
-      h("button", { onClick: () => rn.push("/editProfile") }, "Edit Profile"),
-      h("button", { onClick: () => rn.push("/login") }, "Login"),
-      h("button", { onClick: () => rn.push("/register") }, "Register"),
-      h("button", { onClick: () => rn.push("/emailVerification") }, "Email Verification"),
-      h("button", { onClick: () => rn.push("/verifyEmail") }, "Verify Email"),
-      h("button", { onClick: () => rn.push("/forgotPassword") }, "Forgot Password"),
-      h("button", { onClick: () => rn.push("/resetPassword") }, "Reset Password")),
+      h("button", { onClick: () => mn.push("/") }, "Dashboard"),
+      props.leadSubmit && (h("button", { onClick: () => mn.push("/refer") }, "Submit a Referral")),
+      h("button", { onClick: () => mn.push("/activity") }, "Activity"),
+      h("button", { onClick: () => mn.push("/editProfile") }, "Edit Profile"),
+      h("button", { onClick: () => mn.push("/login") }, "Login"),
+      h("button", { onClick: () => mn.push("/register") }, "Register"),
+      h("button", { onClick: () => mn.push("/emailVerification") }, "Email Verification"),
+      h("button", { onClick: () => mn.push("/verifyEmail") }, "Verify Email"),
+      h("button", { onClick: () => mn.push("/forgotPassword") }, "Forgot Password"),
+      h("button", { onClick: () => mn.push("/resetPassword") }, "Reset Password")),
     h("br", null),
     h("div", { innerHTML: states.previewTemplate })));
 }
@@ -25193,12 +23130,12 @@ const PoweredByImg = /*#__PURE__*/Object.freeze({
   CustomWidthAndHeight: CustomWidthAndHeight
 });
 
-const scenario$6 = "Feature: Portal Footer\r\n\r\n    Background: A user is viewing the portal\r\n        Given a hosted portal\r\n        And a user is viewing the portal\r\n        And the portal has a footer\r\n\r\n    Scenario Outline: FAQ and T&C links/text are configurable and open in a new page when clicked\r\n        Given the footer has prop \"terms-link\" with value \"https://example.com/terms\"\r\n        And prop \"terms-text\" with value \"Terms and Conditions\"\r\n        And prop \"faq-link\" with value \"https://example.com/FAQ\"\r\n        And prop \"faq-text\" with value \"Visit FAQ\"\r\n        When a user clicks on the \"Visit FAQ\" link\r\n        Then they will be redirected to \"https://example.com/FAQ\" in a new page\r\n        When they go back to the portal\r\n        And click on the \"Terms and Conditions\" link\r\n        Then they will be redirected to \"https://example.com/terms\" in a new page\r\n\r\n    Scenario Outline: FAQ/T&C Links are not shown if a link is not provided\r\n        Given the footer does not have <linkProp>\r\n        But it <mayHave> <textProp> with <value>\r\n        Then the <link> will not be shown in the footer\r\n        Examples:\r\n            | linkProp   | mayHave      | textProp  | value                | link     |\r\n            | terms-link | has          | termsText | Terms and Conditions | T&C Link |\r\n            | faq-link   | has          | faqText   | Visit FAQ            | FAQ Link |\r\n            | terms-link | doesn't have |           |                      | T&C Link |\r\n            | faq-link   | doesn't have |           |                      | FAQ Link |\r\n\r\n    Scenario Outline: The support email and text is configurable but has a default\r\n        Given the footer <mayHave> <emailPropWithValue>\r\n        And the footer <mayAlsoHave> <textPropWithValue>\r\n        Then the footer's support email text is <renderedEmailText>\r\n        And the email address will be a mailto link with <mailtoEmail>\r\n        When the user clicks on the email address mailto Link\r\n        Then the users preferred email client will open with a draft email to <mailtoEmail>\r\n        Examples:\r\n            | mayHave      | emailPropWithValue     | mayAlsoHave  | textPropWithValue                  | mailtoEmail            | renderedEmailText                                 |\r\n            | has          | support@saasquatch.com | has          | For support please contact {email} | support@saasquatch.com | For support please contact support@saasquatch.com |\r\n            | doesn't have | N/A                    | doesn't have | N/A                                | support@example.com    | For program support, contact support@example.com  |\r\n\r\n    Scenario Outline: Powered by SaaSquatch is shown by default\r\n        Given the footer <mayHaveProp> \"show-powered-by\" with <value>\r\n        Then the powered by SaaSquatch image <mayBeShown>\r\n        Examples:\r\n            | mayHaveProp       | value | mayBeShown  |\r\n            | has prop          | true  | is shown    |\r\n            | has prop          | false | isn't shown |\r\n            | has prop          | test  | is shown    |\r\n            | has prop          |       | is shown    |\r\n            | doesn't have prop |       | is shown    |\r\n\r\n    Scenario: Powered By Saasquatch links out to \"https://saasquatch.com\"\r\n        Given the footer has the powered by SaaSquatch image\r\n        When a user clicks on it\r\n        Then they will be redirected to \"https://saasquatch.com\" in a new page";
+const scenario$5 = "Feature: Portal Footer\r\n\r\n    Background: A user is viewing the portal\r\n        Given a hosted portal\r\n        And a user is viewing the portal\r\n        And the portal has a footer\r\n\r\n    Scenario Outline: FAQ and T&C links/text are configurable and open in a new page when clicked\r\n        Given the footer has prop \"terms-link\" with value \"https://example.com/terms\"\r\n        And prop \"terms-text\" with value \"Terms and Conditions\"\r\n        And prop \"faq-link\" with value \"https://example.com/FAQ\"\r\n        And prop \"faq-text\" with value \"Visit FAQ\"\r\n        When a user clicks on the \"Visit FAQ\" link\r\n        Then they will be redirected to \"https://example.com/FAQ\" in a new page\r\n        When they go back to the portal\r\n        And click on the \"Terms and Conditions\" link\r\n        Then they will be redirected to \"https://example.com/terms\" in a new page\r\n\r\n    Scenario Outline: FAQ/T&C Links are not shown if a link is not provided\r\n        Given the footer does not have <linkProp>\r\n        But it <mayHave> <textProp> with <value>\r\n        Then the <link> will not be shown in the footer\r\n        Examples:\r\n            | linkProp   | mayHave      | textProp  | value                | link     |\r\n            | terms-link | has          | termsText | Terms and Conditions | T&C Link |\r\n            | faq-link   | has          | faqText   | Visit FAQ            | FAQ Link |\r\n            | terms-link | doesn't have |           |                      | T&C Link |\r\n            | faq-link   | doesn't have |           |                      | FAQ Link |\r\n\r\n    Scenario Outline: The support email and text is configurable but has a default\r\n        Given the footer <mayHave> <emailPropWithValue>\r\n        And the footer <mayAlsoHave> <textPropWithValue>\r\n        Then the footer's support email text is <renderedEmailText>\r\n        And the email address will be a mailto link with <mailtoEmail>\r\n        When the user clicks on the email address mailto Link\r\n        Then the users preferred email client will open with a draft email to <mailtoEmail>\r\n        Examples:\r\n            | mayHave      | emailPropWithValue     | mayAlsoHave  | textPropWithValue                  | mailtoEmail            | renderedEmailText                                 |\r\n            | has          | support@saasquatch.com | has          | For support please contact {email} | support@saasquatch.com | For support please contact support@saasquatch.com |\r\n            | doesn't have | N/A                    | doesn't have | N/A                                | support@example.com    | For program support, contact support@example.com  |\r\n\r\n    Scenario Outline: Powered by SaaSquatch is shown by default\r\n        Given the footer <mayHaveProp> \"show-powered-by\" with <value>\r\n        Then the powered by SaaSquatch image <mayBeShown>\r\n        Examples:\r\n            | mayHaveProp       | value | mayBeShown  |\r\n            | has prop          | true  | is shown    |\r\n            | has prop          | false | isn't shown |\r\n            | has prop          | test  | is shown    |\r\n            | has prop          |       | is shown    |\r\n            | doesn't have prop |       | is shown    |\r\n\r\n    Scenario: Powered By Saasquatch links out to \"https://saasquatch.com\"\r\n        Given the footer has the powered by SaaSquatch image\r\n        When a user clicks on it\r\n        Then they will be redirected to \"https://saasquatch.com\" in a new page";
 
 const PortalFooter_stories = {
   title: "Portal Footer",
   parameters: {
-    scenario: scenario$6,
+    scenario: scenario$5,
   },
 };
 const defaultProps$9 = {
@@ -25227,12 +23164,12 @@ const PortalFooter = /*#__PURE__*/Object.freeze({
   FooterNoPoweredBy: FooterNoPoweredBy
 });
 
-const scenario$7 = "Feature: Hero Unit\r\n\r\n    Background: A portal with a hero unit exists\r\n        Given a hosted portal\r\n        And the portal has hero unit on the login page\r\n        And a user is viewing the login page\r\n\r\n    Scenario: The hero unit defaults to a single column layout\r\n        Given a hero unit does not have a \"columns\" prop\r\n        But the following html is wrapped by the hero unit\r\n            \"\"\"\r\n            <sqm-portal-login></sqm-portal-login>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Get Referring!</h1>\r\n            <p style=\"text-align:center\">\r\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\r\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\r\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\r\n            pariatur.\r\n            </p>\r\n            </div>\r\n            \"\"\"\r\n        Then only a single column will be displayed\r\n        And within it will be the login component\r\n\r\n    Scenario Outline: The hero unit supports single or dual column layouts\r\n        Given a hero unit with prop \"columns\" having <columnValue>\r\n        And it wraps <html>\r\n        Then the hero unit displays <columnValue> columns\r\n        Examples:\r\n            | columnValue | html                                                                                              |\r\n            | 1           | <h1>Column 1!</h1>                                                                                |\r\n            | 2           | <h1>Column 1!</h1><div slot=\"secondary-column\"><h1 style=\"text-align:center\">Column 2!</h1></div> |\r\n\r\n    Scenario: HTML to be displayed in the second column comes from the \"secondary-column\" slot\r\n        Given a hero unit with \"columns\" \"2\"\r\n        And the following html\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div>\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        When the hero unit is rendered\r\n        Then only one column is displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 1 will contain the \"Column 2!\" text\r\n        When the div for column two is updated to have 'slot=\"secondary-column\"'\r\n        Then the two columns are displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 2 will contain the \"Column 2!\" text\r\n\r\n    Scenario Outline: A background for the hero unit can be set as an image or colour\r\n        Given a hero unit with <backgroundPropValue>\r\n        Then the background will be <background>\r\n        Examples:\r\n            | background                                                  | background               |\r\n            | https://images.unsplash.com/photo-1599676821464-3555954838d | image of misty mountains |\r\n            | LightSlateGrey                                              | light slate grey         |\r\n            | #00FF00                                                     | green                    |\r\n            | rgb(128,0,128)                                              | purple                   |\r\n\r\n    Scenario Outline: Wrap Direction can be configured for mobile experiences\r\n        Given a hero unit with the following HTML\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        And prop \"wrap-direction\" has <value>\r\n        When the window width is less than 600px\r\n        Then the two columns will stack\r\n        And <column> will be on top\r\n        Examples:\r\n            | value        | column |\r\n            | wrap         | 1      |\r\n            | wrap-reverse | 2      |\r\n            |              | 1      |";
+const scenario$6 = "Feature: Hero Unit\r\n\r\n    Background: A portal with a hero unit exists\r\n        Given a hosted portal\r\n        And the portal has hero unit on the login page\r\n        And a user is viewing the login page\r\n\r\n    Scenario: The hero unit defaults to a single column layout\r\n        Given a hero unit does not have a \"columns\" prop\r\n        But the following html is wrapped by the hero unit\r\n            \"\"\"\r\n            <sqm-portal-login></sqm-portal-login>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Get Referring!</h1>\r\n            <p style=\"text-align:center\">\r\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\r\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\r\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\r\n            pariatur.\r\n            </p>\r\n            </div>\r\n            \"\"\"\r\n        Then only a single column will be displayed\r\n        And within it will be the login component\r\n\r\n    Scenario Outline: The hero unit supports single or dual column layouts\r\n        Given a hero unit with prop \"columns\" having <columnValue>\r\n        And it wraps <html>\r\n        Then the hero unit displays <columnValue> columns\r\n        Examples:\r\n            | columnValue | html                                                                                              |\r\n            | 1           | <h1>Column 1!</h1>                                                                                |\r\n            | 2           | <h1>Column 1!</h1><div slot=\"secondary-column\"><h1 style=\"text-align:center\">Column 2!</h1></div> |\r\n\r\n    Scenario: HTML to be displayed in the second column comes from the \"secondary-column\" slot\r\n        Given a hero unit with \"columns\" \"2\"\r\n        And the following html\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div>\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        When the hero unit is rendered\r\n        Then only one column is displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 1 will contain the \"Column 2!\" text\r\n        When the div for column two is updated to have 'slot=\"secondary-column\"'\r\n        Then the two columns are displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 2 will contain the \"Column 2!\" text\r\n\r\n    Scenario Outline: A background for the hero unit can be set as an image or colour\r\n        Given a hero unit with <backgroundPropValue>\r\n        Then the background will be <background>\r\n        Examples:\r\n            | background                                                  | background               |\r\n            | https://images.unsplash.com/photo-1599676821464-3555954838d | image of misty mountains |\r\n            | LightSlateGrey                                              | light slate grey         |\r\n            | #00FF00                                                     | green                    |\r\n            | rgb(128,0,128)                                              | purple                   |\r\n\r\n    Scenario Outline: Wrap Direction can be configured for mobile experiences\r\n        Given a hero unit with the following HTML\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        And prop \"wrap-direction\" has <value>\r\n        When the window width is less than 600px\r\n        Then the two columns will stack\r\n        And <column> will be on top\r\n        Examples:\r\n            | value        | column |\r\n            | wrap         | 1      |\r\n            | wrap-reverse | 2      |\r\n            |              | 1      |";
 
 const Hero_stories = {
   title: "Hero Layout",
   parameters: {
-    scenario: scenario$7,
+    scenario: scenario$6,
   },
 };
 const LoginOneColumn = () => {
@@ -25409,12 +23346,12 @@ const Hero = /*#__PURE__*/Object.freeze({
   TwoColumnLoginWithImgElement: TwoColumnLoginWithImgElement
 });
 
-const scenario$8 = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Referral Iframe\r\n\r\n  Used to provide an external form for submitting referral leads using the current user's referral code\r\n\r\n  Background: A user is logged in\r\n    Given there is a logged in user\r\n\r\n  @motivating\r\n  Scenario: Referral code is passed to the iframe as a query parameter\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the user has navigated to \"/refer\"\r\n    And the user's referral code is \"BOBBYREFER\"\r\n    When the iframe content is loaded\r\n    Then the iframe url will be \"https://example.com?rsCode=BOBBYREFER\"\r\n\r\n  @ui\r\n  Scenario Outline: The height and width of the iFrame can be controlled via props\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the iframe content is 1000x1000\r\n    And the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the content of the iframe will be displayed with scrollbars\r\n    And the dimension of the iFrame displayed will be 500x500\r\n    When the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the full content of the iframe will be displayed on the page\r\n    And the dimension of the iFrame displayed will be 1000x1000\r\n    Examples:\r\n      | heightValue | widthValue |\r\n      | 500px       | 500px      |\r\n      | 50%         | 50%        |\r\n\r\n  @minutae\r\n  Scenario Outline: The iFrame will fail fast if a iFrame source isn't provided\r\n    Given \"iframe-src\" <mayBeAnAttribute>\r\n    And it <mayHaveValue>\r\n    When a user views the referral iFrame component\r\n    Then an alert with an error message is displayed in place of the iFrame\r\n    And it has a details section\r\n    When \"More details\" is clicked\r\n    Then the following information will be displayed\r\n      | component being used |\r\n      | missing attribute(s) |\r\n\r\n    Examples:\r\n      | mayBeAnAttribute    | mayHaveValue |\r\n      | is not an attribute | N/A          |\r\n      | is an attribute     | \"\"           |\r\n      | is an attribute     |              |";
+const scenario$7 = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Referral Iframe\r\n\r\n  Used to provide an external form for submitting referral leads using the current user's referral code\r\n\r\n  Background: A user is logged in\r\n    Given there is a logged in user\r\n\r\n  @motivating\r\n  Scenario: Referral code is passed to the iframe as a query parameter\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the user has navigated to \"/refer\"\r\n    And the user's referral code is \"BOBBYREFER\"\r\n    When the iframe content is loaded\r\n    Then the iframe url will be \"https://example.com?rsCode=BOBBYREFER\"\r\n\r\n  @ui\r\n  Scenario Outline: The height and width of the iFrame can be controlled via props\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the iframe content is 1000x1000\r\n    And the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the content of the iframe will be displayed with scrollbars\r\n    And the dimension of the iFrame displayed will be 500x500\r\n    When the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the full content of the iframe will be displayed on the page\r\n    And the dimension of the iFrame displayed will be 1000x1000\r\n    Examples:\r\n      | heightValue | widthValue |\r\n      | 500px       | 500px      |\r\n      | 50%         | 50%        |\r\n\r\n  @minutae\r\n  Scenario Outline: The iFrame will fail fast if a iFrame source isn't provided\r\n    Given \"iframe-src\" <mayBeAnAttribute>\r\n    And it <mayHaveValue>\r\n    When a user views the referral iFrame component\r\n    Then an alert with an error message is displayed in place of the iFrame\r\n    And it has a details section\r\n    When \"More details\" is clicked\r\n    Then the following information will be displayed\r\n      | component being used |\r\n      | missing attribute(s) |\r\n\r\n    Examples:\r\n      | mayBeAnAttribute    | mayHaveValue |\r\n      | is not an attribute | N/A          |\r\n      | is an attribute     | \"\"           |\r\n      | is an attribute     |              |";
 
 const ReferralIframe_stories = {
   title: "Referral Iframe",
   parameters: {
-    scenario: scenario$8,
+    scenario: scenario$7,
   },
 };
 const props = {
@@ -25445,12 +23382,12 @@ const ReferralIframe$1 = /*#__PURE__*/Object.freeze({
   ReferralIframeError: ReferralIframeError
 });
 
-const scenario$9 = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Name Fields\r\n\r\n  Fields to be used to fill the first and last name of a user during registration\r\n\r\n  Background:\r\n    Given the current page is \"/register\"\r\n\r\n  @motivating\r\n  Scenario: Both first name and last name are required\r\n    Given the email field has valid input\r\n    And the password field has valid input\r\n    And first name field is empty\r\n    And last name field is empty\r\n    When register is clicked\r\n    Then the name fields will be highlighted in red\r\n    And the error messages will say \"Cannot be empty\"\r\n\r\n  @motivating\r\n  Scenario: First and last name are upserted with the SaaSquatch user\r\n    Given all fields have been filled with data\r\n      | firstName | lastName  | email           | password        |\r\n      | Bob       | Testerson | bob@example.com | SecurePassword1 |\r\n    When register is clicked\r\n    Then the email verification page will be loaded\r\n    And the user will be upserted\r\n    And the SaaSquatch user will contain data\r\n      | firstName | lastName  | email           |\r\n      | Bob       | Testerson | bob@example.com |\r\n\r\n";
+const scenario$8 = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Name Fields\r\n\r\n  Fields to be used to fill the first and last name of a user during registration\r\n\r\n  Background:\r\n    Given the current page is \"/register\"\r\n\r\n  @motivating\r\n  Scenario: Both first name and last name are required\r\n    Given the email field has valid input\r\n    And the password field has valid input\r\n    And first name field is empty\r\n    And last name field is empty\r\n    When register is clicked\r\n    Then the name fields will be highlighted in red\r\n    And the error messages will say \"Cannot be empty\"\r\n\r\n  @motivating\r\n  Scenario: First and last name are upserted with the SaaSquatch user\r\n    Given all fields have been filled with data\r\n      | firstName | lastName  | email           | password        |\r\n      | Bob       | Testerson | bob@example.com | SecurePassword1 |\r\n    When register is clicked\r\n    Then the email verification page will be loaded\r\n    And the user will be upserted\r\n    And the SaaSquatch user will contain data\r\n      | firstName | lastName  | email           |\r\n      | Bob       | Testerson | bob@example.com |\r\n\r\n";
 
 const NameFields_stories = {
   title: "Name Fields",
   parameters: {
-    scenario: scenario$9,
+    scenario: scenario$8,
   },
 };
 const props$1 = {
@@ -25488,279 +23425,6 @@ const NameFields$1 = /*#__PURE__*/Object.freeze({
   NameFieldsWithErrors: NameFieldsWithErrors
 });
 
-const baseResponse = (data, selected = null) => ({
-  states: {
-    content: {
-      text: {
-        notAvailableError: "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }",
-      },
-    },
-    redeemStage: "chooseReward",
-    amount: 0,
-    exchangeError: false,
-    loading: false,
-    selectedItem: selected,
-    selectedStep: null,
-  },
-  data: {
-    exchangeList: data,
-  },
-  callbacks: {
-    exchangeReward: null,
-    resetState: null,
-    setStage: null,
-    setExchangeState: null,
-    refs: null,
-  },
-  refs: null,
-});
-const baseReward$2 = {
-  key: "",
-  name: "",
-  description: "",
-  imageUrl: "",
-  available: true,
-  unavailableReason: null,
-  unavailableReasonCode: null,
-  ruleType: "FIXED_GLOBAL_REWARD",
-  sourceUnit: "POINT",
-  sourceValue: 10,
-  prettySourceValue: "10 SaaSquatch Points",
-  sourceMinValue: null,
-  prettySourceMinValue: null,
-  sourceMaxValue: null,
-  prettySourceMaxValue: null,
-  destinationMinValue: null,
-  prettyDestinationMinValue: null,
-  destinationMaxValue: null,
-  prettyDestinationMaxValue: null,
-  globalRewardKey: "",
-  destinationUnit: null,
-  steps: [],
-};
-const notEnoughPoints = {
-  available: false,
-  unavailableReasonCode: "INSUFFICIENT_REDEEMABLE_CREDIT",
-};
-const usTax = {
-  available: false,
-  unavailableReasonCode: "US_TAX",
-};
-const selected = {
-  key: "r1",
-};
-const imageUrl = (props) => ({
-  imageUrl: props,
-});
-const description = (props) => ({
-  description: props,
-});
-const fixedValue = (props) => ({
-  prettySourceValue: props,
-});
-const variableValue = (min, max, text) => ({
-  ruleType: "VARIABLE_CREDIT_REWARD",
-  sourceMinValue: min,
-  prettySourceMinValue: min + " " + text,
-  sourceMaxValue: max,
-  prettySourceMaxValue: max + " " + text,
-});
-const data = [
-  {
-    ...baseReward$2,
-    ...description("Free swag with a promo code"),
-    ...imageUrl("https://i.imgur.com/Ds7M19I.png"),
-    ...fixedValue("40 SaaSquatch Points"),
-  },
-  {
-    ...baseReward$2,
-    ...selected,
-    ...description("Visa® Prepaid Card USD"),
-    ...imageUrl("https://i.imgur.com/4s3q2zz.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
-  },
-  {
-    ...baseReward$2,
-    ...description("A very exclusive gift box"),
-    ...imageUrl("https://i.imgur.com/XuiJi4l.png"),
-    ...fixedValue("30 SaaSquatch Points"),
-  },
-  {
-    ...baseReward$2,
-    ...description("$50 Store credit"),
-    ...imageUrl("https://i.imgur.com/WkCMVSE.png"),
-    ...fixedValue("100 SaaSquatch Points"),
-  },
-  {
-    ...baseReward$2,
-    ...description("Variable amount of store credit"),
-    ...imageUrl("https://i.imgur.com/Jn2fE0s.png"),
-    ...variableValue(20, 100, "SaaSquatch Points"),
-  },
-  {
-    ...baseReward$2,
-    ...notEnoughPoints,
-    ...description("A very rare cactus"),
-    ...imageUrl("https://i.imgur.com/CvCdpXc.png"),
-    ...fixedValue("2000 SaaSquatch Points"),
-  },
-  {
-    ...baseReward$2,
-    ...usTax,
-    ...description("$1000 Store credit"),
-    ...imageUrl("https://i.imgur.com/I9FCh9Z.png"),
-    ...fixedValue("2000 SaaSquatch Points"),
-  },
-  {
-    ...baseReward$2,
-    ...notEnoughPoints,
-    ...description("A holiday gift box"),
-    ...imageUrl("https://i.imgur.com/HBJS1WH.png"),
-    ...fixedValue("100 SaaSquatch Points"),
-  },
-];
-const rewardExchange = {
-  ...baseResponse(data),
-};
-const rewardExchangeSelected = {
-  ...baseResponse(data, {
-    ...baseReward$2,
-    ...selected,
-    ...description("Visa® Prepaid Card USD"),
-    ...imageUrl("https://i.imgur.com/4s3q2zz.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
-  }),
-};
-const test2 = {
-  states: {
-    content: {
-      text: {
-        buttonText: "Exchange Rewards",
-        ignored: true,
-      },
-    },
-    redeemStage: "chooseAmount",
-    amount: 0,
-    exchangeError: false,
-    loading: false,
-    selectedItem: {
-      key: "r4",
-      name: "Salmon Coins",
-      description: "Points for Salmon Coins",
-      imageUrl: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBUWFRgWFRYYGRgZGh4cHBocHR4aHxwdGRwZHBwfHh4cIS4lHB4rHxoYJjgnKy8xNTU1GiQ7QD00Py40NTEBDAwMEA8QHhISHzQrJCs0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NP/AABEIAIABiQMBIgACEQEDEQH/xAAcAAEAAQUBAQAAAAAAAAAAAAAABAECAwUGBwj/xAA+EAABAwICBgYHBwQCAwAAAAABAAIRAyEEMQUSQVFhcQYTgZGhsQciMkJScvAUYoKSwdHhorLC8SMzFUNj/8QAGAEBAQEBAQAAAAAAAAAAAAAAAAECAwT/xAAfEQEBAQEBAQEAAwEBAAAAAAAAARECEiExE0FRYQP/2gAMAwEAAhEDEQA/APZkREBERAREQEREBERAREQEREBERAREQERY6jw0EkgACSTYADMk7AgvVjHgzBBixgzBXmfSjpqapNLDuLaeTqgs58Zhl/Vbx28BnA0Lj3UXNcx0G0tmxHwkW1tvLhks3qRZHryqtdonSjK7dZtnCzmzJaf1HFbFWXUERFQREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBFSVqdNafoYVoNaoAT7LBdzvlaLxxyG0oNlUqBoLnEAASSTAAFySTkF5H0z6WHEuNKiSKANx7JqkXl20MFoHfsAidKemVTFeo31KPwAgl0ZF7hY7IaLA39aBHNsIO0cv34eaCVSeBlcnblb/FqnYatxz3WLhw+FnHMrVMfx7/MjyCkMI5znx+Y7flCx1NajqNGaUdTIex2qRYRkRuj3h+y9D0Lp2nXETq1APWb5xv5ZjxXj9Ovt8dsdmXIHmVKw+OIg62rGWqQIINvWs1vZJWeZeVuV7gi5Xoj0j+0g03kGowSSMnNkCTYAOkjK17cOqXSXWBERUEREBERAREQEREBERAREQEREBERBRFjq1WtaXOcGtAkuJAAG8k2C5LS/TukyW0GGq74j6jO83PcAd6DslQFeI6Y6VYmvOvWcG/BS9RvIwZcODiV1vomonq69QWa57Wht82N1i6+ZIe0diD0JERAREQEREBERARFgxOJZTaX1HtY0ZucQAOZNkGdFxmkvSJg2SGa9Y5eo2G/mdEji2VzmO9JWIdalTp0xvcS93+IHcUHqyiYvH0qQmpUYwb3ua3+4rxTG9IsbV9vEVI3NPVjuZC1XUyST7RvfM85zQezYrptgGW68OO5jXP8AFojxWoxHpMw49ilVfxOowH+onwXmzcKdqudhrG0oOyr+k+qfYwzG/M9zvANatfX9ImOd7Ios5NJI/M4+S55lCQREFXvoaosJU0ScV0u0g+ZxL28GtYzxa2fFaKs173F73ue45uc4uceZcSStuyiI8+zmqfZNvDJNGlGGVww5W21BFh2eCubSMAxCmrjUCkruqK2v2dUNAxZTVazUdlJU7A6Rq0rs1J3vp06jvzPYXeKyCiQL5jzhUZhrXAngg2+H6c41lmmnx/42j+2FLZ6RcbtFA/gd+j1z4o8Fa2lJNoTTHV0/SVifeo0Ty1m+bipdL0nO9/DDm2p+hZ+q4p9A7B3rG7D7ldR6NR9JlA+1Qqj5Sx3m4KfR9IOCd7RqM+ZhP9msvKjQVr6B2Jo9oodLcC/LEsHzSz+8BbLDaRo1P+urTf8AK9rvIrwQUSrTSDtxummPohF4Dh8VXZ/11qrAPhe9o7gYUmp0kxzmln2mrB3EB35wNYd6uo9oxukqNETWqspg5a7mtnlJute3pbgSYGJp9pgd5svC6mHc5xcXFzjmXEknmTcqVo3Btc8Nq1RSZHt6jn8hqtuVLf8AFkfQVGs17Q5rg5pyIIIPIjNZFxnQgYXDsdTZjadUvdrBtqcWizC4mTtPALswVZUVREVBEWr0tpujh2k1HXiQwXc7k3ntMBBs1y+nOmFKjLaUVXjODDW/M7aeA3XIXHae6XVq8tE06RkBjbufwc7ad7R6oyOstA8SBrmBsYMvC7nclm0TdJ6Zq4l01Hl8GzR6rGn7rbxzu6+ajOpW9cwPhH6/RVGHdYcBJ7hYfVlewxlnvzPfkPBc63GsxNODkQBsi8cBGXYAvbui+jxQwtFgEHUDncXP9Z09pK8r6N4QV8XSY4Swv1nWMEMBeQTx1YjivbF1n4wIiKgiIgIoOkdJUaDdatUaxuzWMExsAzceAuuG016RjduFpz/9KgMfhYDPeRyQeh1KgaC5xAAuSTAA4k5LldJ9PsHSkNc6s7dTEt/OYaRyleZY/FVq/rYis525rnta0cmWaOwBR6VJvZs4q4mur0j6Q8U+RRYykN//AGO4GXANH5SuWxlWrWdr13ve7e8zHyjJo4CFIpU5dnEe7CzMpgkGO02gBTYIlHCNOWaq7CxnCmsLGky4H9O7MqSXMd7Jnz7Vf0a84Y7M1e3DAGTErOQcoVGAgXud6xeo1jC+iDsmLgHfCyNZa43LIAeCrqu4f6UvS4w06bRIBvtG76/VXhuYiwyWRtMzO+yv1Dv3qejEcuEScuSqy4BG0LK6mdpsVXqSs+lxHfRsdWATwVWstfwUjqztOfJWll4m5k5d6noxH1A4R5KoZsj+Fnbh4yt2BVFMzF8s7J6XGBzIyEo1ucgjmpXUcSqvpwJv5p6MRXU4KPZAsCeA4qUKMDWEmc8haMzKvFDinpMQxTtzWGphSQIMR4rZ9TxKtFDVMTmdt8k9JiA6lA9bZmVa2nrXGV4Wy6kn/SCieCejGt+z7xmqNw42dotmtmKBz3oaJ2Af7V0xrRQWB2GcTIIjzW2dhycx9cVUUjuWtRqeom8Kx1K4EEzt3dq2tXCuIgerfNXtoHIieJj9E1WndhQsuHxFWkJp1XsH3HOb4A3WxNI5kW7FjfhpvfMfUKWkS8J0xxzBPWB42B7GnxbB8Vs6HpHrCzsOxzvuuczwId5rROpDYIUX7MdbIRGe8/tmp7MbLSXS/F1zGv1TDbVpktJ5vnW7iBwWrNSZtebn6vzOfFVdRGcXG/gsRBDshzlX2YvNM5iBPvHyaNg4eG1YjTGwEnaTf67SFKaRffynyusVWmTcz2sJ7tdat2J/axur7zm8p1u5rLDvV9erAsCecADs/hVYHDIv7NRo8FHxTnfAT+L9LrEm1b+Oz9GGj9Z9XEOAloFNsTm71nk615jU/MV6UuX9HmC6vBMMQajnVD+Iw3+lrV1C7MiIiAuO9IHSKthWU20GEvqlw19XWDA3VyGRcS4RNrGxXYrnOk2lMTRNPqKTHtdOs5xIAgthoIyLpME2tkUHj+OOIc7rq7aznEj13tI5Aa1o3NFuCuwrdbWE6riLS3IjxFoyBXqjelDXtLK+FqesIcwalQXzBDi0kfhXKaVwNBjvUa4U3e44arqZ+66TLfEdsiejHLvwuIBa6wMga4aHsc0DIyQGk2sYNjvKtpawqOLWwwxbjAkwbiTPet7UoPp2JljvZeNvBw913gdig1KV5XK3LrUmzGLDTrtaTMmOU2/lS37ABbb/AAsOFoE1GQPeb5hSXsHblO1T18Xz9Ryxu5VwLTDzuj/L9JVXtUmizOMnF3c0GPM9y1OrSxjartiFiqAufVakUoP1hJEZrK6mSRBi97Z71cwZdir9d4WNXFdVXNEqx0ERvVW2Fgp6XyuLFY5h1gda0XEZ9queyYuREG31krnH+fruU9LimomoMz2LIFR0C5OXYI4p6MYxTOtMjVjLirnTcNF4tOXarmNMkmI2b+9Zm7Pr6/hPRjBTa7Ii+/YVke0xbPYs4CAJ6MYg3KyvaxXGYnM7BvVackXEHd2/68U9GMb6YIIOX6K3qwIHYJ+tyyUmOvr6udonLjO1XagsSMtvZCejGCjh2tsNu03klZQxYsSx9tRwF7yFlkNgE3yE7SrOk8mp9fXasLcOQ4nXJnJuwfWaz6xmIsRnbPkriP3VnR5Y9S/P/StbB+uav2fXFY2MDRAgBb1PK5zARBEqxrCTIJABiIF/4V7XAHNXdYO1X6mLKtEOBaQSCLqw4Yauq31Rsjv2rKao+vFKeHcSS1r3TsDSc+Q4KWUYxTsNvNW1mgA2mPFTv/H4g5Uan5CPNYq2isRBmg8j5Z8FPPRsatzgXECLfV9ywOpif45fXapr6DwdUtLTuIIPcVb1WrcxuG4fynMpsQyyPLb+gPkotRzQbhp5kDwICmVXjeQOYjucIBUWq8jcR94FvcW2K758xz36xlrfgj8MjwJUSs1v3B4f3BSw5o90s4tgjvb+yxYydWQ6RxA8wYWZ+rXqfo9x/WYNjSQTSJpmDsEFv9JA7CuqXlPotx5biKlLJr6etH3mERH4XOmNwXqy6siIiArHNBEG4KvRBp8XoNjrsJpncAHM7WnIfKWrVVKGKpWcwPZvpme9jr90rrEQcBUbQMyzVM3nWaAeAB1QeS1dbRjM2vjg6/iP2XpOJwTH+00ExEizo5i8cFrH9Gqcy2AeLWu8gFiytS44puHYy4cHOi0ZDZKgVMPORlegO0PUbZmpHzOb4AR4qK/RNfiB90yfF58li87+rOscTTwT5HqnmRAHG+alDDRyFu/+JK6N2BLTdpHF0yVKo4VgF4KvM35C2OKqtDZLnBvMxMhRnYpnuBzvlB8yt5pvo/TZrVWAu2lusZ7Jz5LRMqUzsaOcHzlZ65y/VnSprH4I+ZzR5lOsd8LOx7VIAaBIcR2D9WfqrqYJMes7dZpn8oXOyNzWClUJIBaR4/QUkMU+ngY4k5/sPFX/AGXZ9bFm81djWOaRECZsrw1T/syDDeaxjSG1nmq9XkpzMMq9QfBXE1DDFka3fkpXUHcqmgdmcJhqKykGiGgDkq6ql9QqUsKAIE773vxKmLqMGqrWKaMOrm4fbClVE1FaaUrYjDqvUKfVa80bz3KvUeS2LcNfKyzNw4GasqfGpOFJtcRe23f2LL9iO7gtoQR7LHu+Vrj5BafFaRfJaPVjOxkcxs7V2541z66g/CATrEfsoVUMBzJ2WvdYMRUnN2tO0u1e45FYX1CPasD8Q1f62+qe0Ld5iemdzm7bc7HslZcO9jXAlrXfdfrDuDSCe2QorfxAb7Fve2W94UzDwLWjgBHhY9wUsw/XUaG0i1zmsZh2NnMtgQNp9n9V1C0fR3AajNciC4WERDc9m+3gt4u/O59crm/FURFpEfE4Zjxqva1w3ET3blz2keh9N96bi0/C712nhJ9bvJ5LqUQeTaX6P1qMl7SGj32+s3tOwcHRwXPPBbmNXc5t2nmNy95IXM6W6H0Ksup/8Tz8Ilp5sy7oWbB5WwbQPxM/Vv8AEJUo6wkAO4tMH9j2Qttpbo5Xw51ns9Uf+xhJb2mJbycAOK1vWA3zO8eq79ncslj7rSnRrGNw+Mo1HEta18O1rQ14LHE2yAdO3Je7r54xFyYMjcQAe79oXsvQfSn2jCUy6demOrfOZLAIPa3VPMncuusujREQEREBERAREQEREFpaCIN1FqaPpu92OVvJTEQaitoVpye4c4P7LWV+i0/A7iRB7wupRZvMqy2OHf0OvIZB3tcP8lJo6EcwWYRvPtE9sldeiniL6rlRgnDNju4qx2F4fWxdakJeIeq5A0An2ZdaWDcO5WdQz4W9wWP4v+r7rlxhQs1LBt2roDhGfC3uT7Iz4fNanGJ6rmK1WgDAlxytsO6+SjPxLB7rwOQPkV02J0PRqTrNgxGsLOHbt5GQua0hoavSksHWM+7JcObMxzaT8oTrn5+Lz1/qjcVSPvgfN6v91ipjKQNxF1znXcOBvEcJH6iVJ0bpHq3TAc33mOEC+4gEA5XcvPLNyt38+N6KKuZQnIE8gt9hyxzQ5oaQdwH1KkQuv8Mv9se655mCecmHtt5rMNFvPwt8fJbtFqf+PKe61bNED3nk8gB5ypFLR7GmYk/eMxyGSmItTjmfkS21VRcXgqdQRUY10ZEi45HMHkpSLaOS0l0Qa6TRcWnc4m/4oJI+YOXLYvRVagfWa5g+JsBp5gkscTwIPBeqqhErN5laleTUmkH2Rzb/AMZ7Wmx71v8AQOB6yqJ9lvrOnbGw75MeK6itoOg6/VgH7stHcLHuUjBYFlIEMETcnMlSc1fXxMREW2BERAREQEREBc3pbodha8nV6t596nDZ5tjVPOJ4rpEQeU6U9H+Ibem5lYbB7Du5xj+rsW89HuiMThzVFZmoxwbAJBlwJuIOUE35dncopn1dVREVQREQEREBERAREQEREBERAREQEREBERAREQEREGuxuiqNW72An4hLXfmbBjhktFi+h+2nV5B4y/EyI7l1qLN5l/VlsaDo9oytQLmvc0sI2OJOtaDBYItO07Fv0RWTJhbqqIiqCIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIg//Z",
-      available: true,
-      unavailableReason: null,
-      unavailableReasonCode: null,
-      ruleType: "VARIABLE_CREDIT_REWARD",
-      sourceUnit: "POINT",
-      sourceValue: null,
-      prettySourceValue: null,
-      sourceMinValue: 1,
-      prettySourceMinValue: "1 Point",
-      sourceMaxValue: 100,
-      prettySourceMaxValue: "100 Points",
-      destinationMinValue: 1,
-      prettyDestinationMinValue: "1 Salmon Coin",
-      destinationMaxValue: 100,
-      prettyDestinationMaxValue: "100 Salmons",
-      globalRewardKey: null,
-      destinationUnit: "TESTUNIT",
-      steps: [
-        {
-          sourceValue: 1,
-          prettySourceValue: "1 Point",
-          destinationValue: 1,
-          prettyDestinationValue: "1 Salmon Coin",
-          available: true,
-          unavailableReasonCode: null,
-          unavailableReason: "",
-        },
-        {
-          sourceValue: 2,
-          prettySourceValue: "2 Points",
-          destinationValue: 2,
-          prettyDestinationValue: "2 Salmons",
-          available: true,
-          unavailableReasonCode: null,
-          unavailableReason: "",
-        },
-        {
-          sourceValue: 3,
-          prettySourceValue: "3 Points",
-          destinationValue: 3,
-          prettyDestinationValue: "3 Salmons",
-          available: true,
-          unavailableReasonCode: null,
-          unavailableReason: "",
-        },
-        {
-          sourceValue: 4,
-          prettySourceValue: "4 Points",
-          destinationValue: 4,
-          prettyDestinationValue: "4 Salmons",
-          available: true,
-          unavailableReasonCode: null,
-          unavailableReason: "",
-        },
-        {
-          sourceValue: 5,
-          prettySourceValue: "5 Points",
-          destinationValue: 5,
-          prettyDestinationValue: "5 Salmons",
-          available: true,
-          unavailableReasonCode: null,
-          unavailableReason: "",
-        },
-      ],
-    },
-    selectedStep: null,
-  },
-  data: {
-    exchangeList: null,
-  },
-  callbacks: {
-    exchangeReward: null,
-    resetState: null,
-    setStage: null,
-    setExchangeState: null,
-    refs: {
-      drawerRef: {},
-    },
-  },
-  refs: null,
-};
-
-const RewardExchangeList_stories = {
-  title: "Components/Reward Exchange List",
-};
-const resizable$1 = {
-  width: "683px",
-  minWidth: "260px",
-  resize: "horizontal",
-  height: "fit-content",
-  overflow: "hidden",
-};
-const rewardExchange$1 = () => {
-  return (h("div", { style: resizable$1 },
-    h(RewardExchangeView, Object.assign({}, rewardExchange))));
-};
-const rewardExchangeSelected$1 = () => {
-  return (h("div", { style: resizable$1 },
-    h(RewardExchangeView, Object.assign({}, rewardExchangeSelected))));
-};
-const Default2 = () => {
-  return (h("div", { style: { ...resizable$1, height: "700px" } },
-    h(RewardExchangeView, Object.assign({}, test2))));
-};
-
-const RewardExchangeList = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': RewardExchangeList_stories,
-  rewardExchange: rewardExchange$1,
-  rewardExchangeSelected: rewardExchangeSelected$1,
-  Default2: Default2
-});
-
 function deepFreeze(obj) {
     if (obj instanceof Map) {
         obj.clear = obj.delete = obj.set = function () {
@@ -28341,9 +26005,7 @@ const CucumberAddon = ({ story }, children) => {
     // No scenario or invalid. Ignoring.
   }
   return (h("div", null,
-    h("details", null,
-      h("summary", null, "Specs"),
-      result && h("pre", { innerHTML: result.value })),
+    result && h("pre", { innerHTML: result.value }),
     children));
 };
 
@@ -28380,7 +26042,6 @@ const stories = [
   ReferralTableRewardsCell$1,
   UserName,
   PasswordField,
-  TaskCard$1,
   PortalTemplates,
   ProgramMenu$1,
   PoweredByImg,
@@ -28388,10 +26049,6 @@ const stories = [
   Hero,
   ReferralIframe$1,
   NameFields$1,
-  RewardExchangeList,
-  UseRewardExchangeList,
-  UseTaskCard,
-  UseRewardsTable
 ];
 const StencilStorybook = class {
   constructor(hostRef) {
@@ -28431,83 +26088,6 @@ const TableRow = class {
   }
 };
 
-const TaskCard$2 = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * @uiName Reward Amount
-     */
-    this.rewardAmount = 0;
-    /**
-     * @uiName Reward Unit
-     */
-    this.rewardUnit = "Points";
-    /**
-     * @uiName Title Text
-     */
-    this.cardTitle = "Title Text";
-    /**
-     * @uiName Description Text
-     */
-    this.description = "Description Text";
-    /**
-     * @uiName Goal Repeatable
-     */
-    this.repeatable = false;
-    /**
-     * @uiName Show Progress Bar
-     */
-    this.showProgressBar = false;
-    /**
-     * @uiName Goal Completion Number
-     */
-    this.goal = 1;
-    /**
-     * @uiName Progress Bar Steps
-     */
-    this.steps = false;
-    /**
-     * @uiName Show Goal Expiry
-     */
-    this.showExpiry = false;
-    /**
-     * @uiName Reward Duration
-     * @uiWidget DateRange
-     * @uiOptions {"allowPastDates":true, "months": 1}
-     */
-    this.rewardDuration = "/";
-    /**
-     * @uiName CTA Button Text
-     */
-    this.buttonText = "Complete Action";
-    /**
-     * @uiName CTA Button Link
-     */
-    this.buttonLink = "https://example.com/";
-    /**
-     * @uiName CTA Button Link Open in New Tab
-     */
-    this.openNewTab = false;
-    /**
-     * Select what type of stat to display for the goal. Manual paths are also supported.
-     *
-     * @uiWidget StatTypeSelectWidget
-     * @uiName Goal Progress Source
-     * @uiOptions {"version": 1.1}
-     */
-    this.statType = "/programGoals/count/Referral-Started%2Freferrals";
-    h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const { props } = j$1() ? useDemoBigStat(this) : useBigStat(this);
-    const { value, statvalue } = props;
-    console.log(props, j$1());
-    return (h(TaskCardView, Object.assign({ progress: value, loading: !j$1() && value === undefined }, getProps(this))));
-  }
-};
-
 const debug$2 = browser("sq:global");
 const textStyles = `
   sqm-text {
@@ -28592,8 +26172,8 @@ const GET_USER_NAME = gql `
 `;
 function useUserName(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const user = T$1();
-  const res = en(GET_USER_NAME, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = ne$1();
+  const res = cn(GET_USER_NAME, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
   const loading = res.loading;
   const username = ((_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.firstName) || ((_d = (_c = res.data) === null || _c === void 0 ? void 0 : _c.viewer) === null || _d === void 0 ? void 0 : _d.lastName)
     ? `${(_f = (_e = res.data) === null || _e === void 0 ? void 0 : _e.viewer) === null || _f === void 0 ? void 0 : _f.firstName} ${(_h = (_g = res.data) === null || _g === void 0 ? void 0 : _g.viewer) === null || _h === void 0 ? void 0 : _h.lastName}`
@@ -28633,4 +26213,4 @@ function useUserNameDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-export { DividedLayout as sqm_divided_layout, EditProfile as sqm_edit_profile, FormMessage as sqm_form_message, SqmHookStoryContainer as sqm_hook_story_container, NavigationMenu as sqm_navigation_menu, PortalPasswordField as sqm_password_field, PortalChangePassword as sqm_portal_change_password, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramMenu as sqm_program_menu, SqmReferralIframe as sqm_referral_iframe, ReferralTable as sqm_referral_table, ReferralTableCell as sqm_referral_table_cell, ReferralTableDateCell as sqm_referral_table_date_cell, ReferralTableRewardsCell as sqm_referral_table_rewards_cell, ReferralTableStatusCell as sqm_referral_table_status_cell, ReferralTableUserCell as sqm_referral_table_user_cell, SqmRewardExchangeList as sqm_reward_exchange_list, RewardsTable as sqm_rewards_table, RewardsTableColumn as sqm_rewards_table_column, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareLink as sqm_share_link, StencilStorybook as sqm_stencilbook, TableCell$1 as sqm_table_cell, TableRow as sqm_table_row, TaskCard$2 as sqm_task_card, Text as sqm_text, UserName$1 as sqm_user_name };
+export { DividedLayout as sqm_divided_layout, EditProfile as sqm_edit_profile, FormMessage as sqm_form_message, SqmHookStoryContainer as sqm_hook_story_container, NavigationMenu as sqm_navigation_menu, PortalPasswordField as sqm_password_field, PortalChangePassword as sqm_portal_change_password, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramMenu as sqm_program_menu, SqmReferralIframe as sqm_referral_iframe, ReferralTable as sqm_referral_table, ReferralTableCell as sqm_referral_table_cell, ReferralTableDateCell as sqm_referral_table_date_cell, ReferralTableRewardsCell as sqm_referral_table_rewards_cell, ReferralTableStatusCell as sqm_referral_table_status_cell, ReferralTableUserCell as sqm_referral_table_user_cell, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareLink as sqm_share_link, StencilStorybook as sqm_stencilbook, TableCell$1 as sqm_table_cell, TableRow as sqm_table_row, Text as sqm_text, UserName$1 as sqm_user_name };