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

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, h as h$1, c as Host, d as getAssetPath } from './index-17b4da69.js';
-import { c as createCommonjsModule, a as commonjsGlobal, m as h, j as useState, e as useEffect, f as useRef, n as d$2, y as y$1, b as browser, u as useReducer, k as useMemo } from './extends-3a3f9fe2.js';
-import { i as intl, a as insertCSS } from './global-90da933f.js';
+import { c as createCommonjsModule, a as commonjsGlobal, m as h, e as useEffect, j as useState, f as useRef, n as d$2, y as y$1, b as browser, u as useReducer, k as useMemo } from './extends-3a3f9fe2.js';
+import { i as intl, a as insertCSS } from './global-e0e25c22.js';
 import { u as useCallback } from './use-callback-b38a1523.js';
-import { d as dist, T as T$1, e as en, b as be, j as j$1, Z as Ze, r as rn, D as De, q as qe, P as P$1, E as Ee, M as M$1, a as sn, c as an, x as x$1, f as D$1, L as L$1, N as Ne, A as A$1 } from './index.module-90d2c3ad.js';
+import { d as dist, n as ne$1, c as cn, D as De, j as j$1, a as sn, b as mn, H as He, $ as $e, S as S$1, V as Ve, M as M$1, p as pn, v as vn, x as x$1, e as D$1, Y, z as ze, A as A$1 } from './index.module-eb50a8d2.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 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,24 +11,38 @@ import { E as ErrorStyles, H as HostBlock, A as AuthWrapper, a as AuthColumn, b
 import { P as PortalContainerView } from './sqm-portal-container-view-73757ca5.js';
 import { P as PortalSectionView } from './sqm-portal-section-view-f0876545.js';
 import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
-import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-47844836.js';
-import { u as useRerenderListener, a as useRequestRerender } from './re-render-e06f2f7f.js';
-import { p as pathToRegexp, B as BigStatView, u as useBigStat, a as useDemoBigStat } from './useDemoBigStat-c3b955b7.js';
+import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-cd1e8962.js';
+import { u as useRerenderListener, a as useRequestRerender } from './re-render-6d5b856e.js';
 import { S as ShareLinkView } from './sqm-share-link-view-9282b8e8.js';
-import { L as LeaderboardView, u as useLeaderboard, S as ShadowViewAddon } from './ShadowViewAddon-a3f510db.js';
+import { p as pathToRegexp, B as BigStatView, u as useBigStat, a as useDemoBigStat } from './useDemoBigStat-d227b2f9.js';
+import { L as LeaderboardView, u as useLeaderboard, S as ShadowViewAddon } from './ShadowViewAddon-558fabb7.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-2242502c.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-f2304ad9.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-2d8c368c.js';
 import { S as StatContainerView } from './sqm-stat-container-view-4133feb6.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-b67467b4.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-f1deea0f.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-e3a6a716.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-8cefe480.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-2af31979.js';
 import { P as PortalResetPasswordView$1 } from './sqm-portal-reset-password-view-a4e50da2.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-6f18bac2.js';
 import { A as AssetCardView } from './sqm-asset-card-view-6f360937.js';
-import { P as PoweredByImg$1, a as PortalFooterView } from './sqm-portal-footer-view-d9fe0bf8.js';
+import { P as PoweredByImg$1, a as PortalFooterView } from './sqm-portal-footer-view-60cd9ae5.js';
 import { H as HeroView } from './sqm-hero-view-bfd8abd1.js';
 import { N as NameFieldsView } from './sqm-name-fields-view-4162fb7b.js';
-import { P as ProgramExplainerStepView } from './sqm-program-explainer-step-view-26920cf9.js';
+import { P as ProgramExplainerView } from './sqm-program-explainer-view-098a64a9.js';
+import { P as ProgramExplainerStepView } from './sqm-program-explainer-step-view-41c1eecd.js';
+
+/**
+ * Build a font CSS URL using the Google Fonts CSS API
+ *
+ * Docs: https://developers.google.com/fonts/docs/css2
+ *
+ * @param fonts - the font family or families to load
+ * @returns url to a .css file
+ */
+function buildFontsCssUrl(...fonts) {
+  const queryString = fonts.map(f => `family=${encodeURIComponent(f)}`).join("&");
+  return `https://fonts.googleapis.com/css2?${queryString}`;
+}
 
 var chroma = createCommonjsModule(function (module, exports) {
 /**
@@ -3295,24 +3309,41 @@ function makeColorScale(color) {
 const BrandComponent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Controls the primary brand color used in the Mint Components library. Note that this
-     * does not affect vanilla components or other component libraries.
-     *
-     * @uiName Brand Color
-     */
-    this.brandColor = "#0000FF";
     h(this);
   }
   disconnectedCallback() { }
   render() {
-    const css = autoColorScaleCss(this.brandColor);
+    var _a, _b;
+    const brandColor = (_a = this.brandColor) !== null && _a !== void 0 ? _a : "inherit";
+    const css = autoColorScaleCss(brandColor);
+    const sanitizedFont = ((_b = this.brandFont) !== null && _b !== void 0 ? _b : "").trim() || undefined;
+    useEffect(() => {
+      if (!sanitizedFont) {
+        // Nothing required in default case.
+        return;
+      }
+      const sheet = document.createElement("link");
+      sheet.setAttribute("href", buildFontsCssUrl(sanitizedFont));
+      sheet.setAttribute("rel", "stylesheet");
+      document.head.appendChild(sheet);
+      return () => document.head.removeChild(sheet);
+    }, [sanitizedFont]);
+    const font = sanitizedFont !== null && sanitizedFont !== void 0 ? sanitizedFont : "inherit";
     return (h$1(Host, null, h$1("style", null, `
           :host{
             display: contents;
           }
-          /* Selects any element placed inside a slot */
+          /* 
+          Selects any element placed inside a slot
+           - resets css variable inheritence for fonts
+          
+          */
           ::slotted(*) {
+            --sl-font-sans: "${font}", arial;
+            --sl-input-font-family: "${font}", arial;
+            --sl-tooltip-font-family: "${font}", arial;
+            font-family:  "${font}", arial;
+
             ${css}
           }`), h$1("slot", null)));
   }
@@ -3483,13 +3514,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;
@@ -3715,12 +3746,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));
@@ -4414,11 +4445,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);
@@ -4593,7 +4624,7 @@ function PortalFrameView(props, children) {
 }
 
 function usePortalFrame(footerContent, headerContent) {
-  const [, rerender] = Ze();
+  const [, rerender] = sn();
   return {
     data: {
       footer: footerContent,
@@ -4681,7 +4712,7 @@ function PortalLoginView(props) {
 
 function usePortalLogin({ nextPage }) {
   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");
@@ -4698,7 +4729,7 @@ 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({
+      mn.push({
         pathname: nextPageOverride || nextPage,
         search: urlParams.toString() && "?" + urlParams.toString(),
       });
@@ -4762,8 +4793,8 @@ const PortalLogin = class {
       ? useLoginDemo(this)
       : usePortalLogin(this);
     const content = {
-      forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { onClick: () => rn.push("/forgotPassword") }, this.forgotPasswordLabel))),
-      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => rn.push("/register") }, this.registerLabel))),
+      forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { onClick: () => mn.push("/forgotPassword") }, this.forgotPasswordLabel))),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => mn.push("/register") }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -4856,7 +4887,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 };
 }
@@ -8736,7 +8767,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 = {};
@@ -8799,7 +8830,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(() => {
@@ -8893,7 +8924,7 @@ const PortalRegister = class {
       : usePortalRegister(this);
     const content = {
       formData: h$1("slot", { name: "formData" }),
-      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => rn.push("/login") }, this.loginLabel))),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => mn.push("/login") }, this.loginLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -8928,10 +8959,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) => {
@@ -8980,8 +9011,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,
@@ -9045,7 +9076,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$1("sl-alert", { type: "danger", open: true, class: sheet$5.classes.Alert },
     h$1("style", { type: "text/css" }, styleString$5),
@@ -9162,7 +9193,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(() => {
@@ -9335,7 +9366,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;
@@ -9358,13 +9389,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,
   }, {
@@ -18034,6 +18065,7 @@ const ReferralTableUserCell = class {
   }
 };
 
+// TODO: add rewardInput once it works
 const GET_EXCHANGE_LIST = dist.gql `
   query getExchangeList {
     viewer {
@@ -18069,6 +18101,7 @@ const GET_EXCHANGE_LIST = dist.gql `
               available
               globalRewardKey
               unavailableReasonCode
+              rewardInput
             }
           }
           totalCount
@@ -18099,10 +18132,11 @@ function useRewardExchangeList(props) {
     amount: 0,
     exchangeError: false,
   });
+  const [open, setOpen] = useState(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 user = ne$1();
+  const [exchange, { data: exchangeResponse, loading: exchangeLoading, errors },] = De(EXCHANGE);
+  const { data, loading, refetch, errors: queryError, } = cn(GET_EXCHANGE_LIST, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
   useEffect(() => {
     var _a, _b;
     if ((_b = (_a = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _a === void 0 ? void 0 : _a.reward) === null || _b === void 0 ? void 0 : _b.id) {
@@ -18148,9 +18182,7 @@ function useRewardExchangeList(props) {
             unit: selectedItem.sourceUnit,
           },
           globalRewardKey: selectedItem.globalRewardKey,
-          rewardInput: {
-            valueInCents: selectedStep.destinationValue,
-          },
+          rewardInput: selectedStep.rewardInput,
         };
         break;
       case "VARIABLE_CREDIT_REWARD":
@@ -18170,11 +18202,7 @@ function useRewardExchangeList(props) {
       default:
         exchangeVariables = {
           ...exchangeVariables,
-          redeemCreditInput: {
-            amount: selectedItem.sourceValue,
-            unit: selectedItem.sourceUnit,
-          },
-          globalRewardKey: selectedItem.globalRewardKey,
+          ...selectedStep.rewardInput,
         };
     }
     exchange({ exchangeRewardInput: exchangeVariables });
@@ -18192,6 +18220,14 @@ function useRewardExchangeList(props) {
   function setStage(stage) {
     setExchangeState({ redeemStage: stage });
   }
+  function copyFuelTankCode() {
+    var _a, _b;
+    // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
+    // Only if called from a user-initiated event
+    navigator.clipboard.writeText((_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.fuelTankCode);
+    setOpen(true);
+    setTimeout(() => setOpen(false), 1000);
+  }
   return {
     states: {
       content: {
@@ -18202,7 +18238,9 @@ function useRewardExchangeList(props) {
       amount,
       selectedStep,
       exchangeError,
-      loading,
+      queryError: !!queryError,
+      loading: loading || exchangeLoading,
+      open,
     },
     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,
@@ -18213,6 +18251,7 @@ function useRewardExchangeList(props) {
       setExchangeState,
       setStage,
       resetState,
+      copyFuelTankCode,
     },
   };
 }
@@ -18221,6 +18260,9 @@ const ExchangeArrows = () => (h$1("svg", { width: 19, height: 15, fill: "none",
   h$1("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.125 14.783a.6.6 0 0 1-.851 0l-3.9-3.923a.6.6 0 1 1 .85-.846L4.1 12.905V1.52a.6.6 0 0 1 1.2 0v11.385l2.875-2.891a.6.6 0 1 1 .85.846l-3.9 3.923Zm9.6-13.686a.6.6 0 0 0-.851 0l-3.9 3.923a.6.6 0 0 0 .85.846L13.7 2.975V14.36a.6.6 0 1 0 1.2 0V2.975l2.875 2.891a.6.6 0 1 0 .85-.846l-3.9-3.923Z", fill: "#333" })));
 const CheckMark = () => (h$1("svg", { width: 12, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h$1("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.58.23c.475.371.56 1.057.19 1.532L5.69 9.554a1.091 1.091 0 0 1-1.631.1L.32 5.915a1.09 1.09 0 1 1 1.542-1.542L4.73 7.239 10.049.42A1.09 1.09 0 0 1 11.58.23Z", fill: "#fff" })));
+const CheckmarkFilled = () => (h$1("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h$1("path", { d: "M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z", fill: "currentColor" }),
+  h$1("path", { d: "M5.68394 8.77046C5.28103 8.39273 4.64819 8.41315 4.27046 8.81606C3.89273 9.21897 3.91315 9.85181 4.31606 10.2295L5.68394 8.77046ZM7.66667 12L6.98273 12.7295C7.36738 13.0902 7.96595 13.0902 8.35061 12.7295L7.66667 12ZM13.6839 7.72954C14.0869 7.35181 14.1073 6.71897 13.7295 6.31606C13.3518 5.91315 12.719 5.89273 12.3161 6.27046L13.6839 7.72954ZM4.31606 10.2295L6.98273 12.7295L8.35061 11.2705L5.68394 8.77046L4.31606 10.2295ZM8.35061 12.7295L13.6839 7.72954L12.3161 6.27046L6.98273 11.2705L8.35061 12.7295Z", fill: "white" })));
 const Gift = () => (h$1("svg", { width: 156, height: 157, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h$1("path", { d: "M40.18 126h83.663a3 3 0 0 0 3-3V73.966a3 3 0 0 0-3-3H40.18a3 3 0 0 0-3 3V123a3 3 0 0 0 3 3Z", fill: "#FFD34F" }),
   h$1("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M37.18 73.862v7.966h89.663v-7.966H37.18Z", fill: "#E9BB30" }),
@@ -18303,12 +18345,14 @@ function ProgressBar({ stageCount, currentStage, }) {
 }
 
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
-const stageProgressList = {
-  chooseReward: "Choose reward",
-  chooseAmount: "Amount",
-  confirmation: "Confirm",
-};
 function RewardExchangeView(props) {
+  const { states, data, callbacks } = props;
+  const { selectedItem, selectedStep } = states;
+  const stageProgressList = {
+    chooseReward: states.content.text.chooseRewardTitle,
+    chooseAmount: states.content.text.chooseAmountTitle,
+    confirmation: states.content.text.confirmationTitle,
+  };
   const style = {
     HostBlock: HostBlock,
     Container: {
@@ -18372,17 +18416,6 @@ function RewardExchangeView(props) {
         color: "var(--sl-color-primary-500)",
       },
     },
-    Buttons: {
-      marginLeft: "auto",
-      width: "100%",
-      maxWidth: "300px",
-    },
-    Button: {
-      margin: "10px 0",
-      display: "block",
-      textAlign: "center",
-      cursor: "pointer",
-    },
     ProgressBar: {
       maxWidth: "350px",
       width: "100%",
@@ -18404,7 +18437,13 @@ function RewardExchangeView(props) {
         },
       },
     },
-    KutayCard: {
+    CardLayout: {
+      display: "flex",
+      width: "100%",
+      borderRadius: "3px",
+      background: "rgba(0, 0, 0, 0)",
+    },
+    Card: {
       display: "flex",
       userSelect: "none",
       height: "120px",
@@ -18416,21 +18455,12 @@ function RewardExchangeView(props) {
         display: "flex",
         padding: 0,
       },
-      "& .selected-outline": {
-        width: "18px",
-        height: "18px",
-        minWidth: "18px",
-        borderRadius: "50%",
-        background: "var(--sl-color-primary-500)",
+      "& .selected": {
         position: "relative",
-        margin: "-9px",
+        top: "-2%",
         left: "100%",
-      },
-      "& .selected-checkmark": {
-        position: "relative",
-        left: "12%",
-        top: "-29%",
-        transform: "scale(0.8)",
+        color: "var(--sl-color-primary-500)",
+        margin: "-9px",
       },
     },
     Square: {
@@ -18449,14 +18479,18 @@ function RewardExchangeView(props) {
       },
     },
     Image: {
+      padding: "8px",
+      minWidth: "96px",
+      maxWidth: "96px",
       "& .image": {
+        width: "100%",
+        height: "100%",
         objectFit: "contain",
-        width: "120px",
-        height: "118px",
-        flex: 0.33,
+        borderRadius: "4px",
       },
-      "& .image.black": {
-        filter: "brightness(20%)",
+      "& .image.subdued": {
+        filter: "brightness(0.95)",
+        opacity: "0.5",
       },
     },
     TextArea: {
@@ -18467,12 +18501,20 @@ function RewardExchangeView(props) {
         lineHeight: "20px",
         fontWeight: "600",
         color: "var(--sl-color-neutral-1000)",
+        display: "-webkit-box",
+        "-webkit-line-clamp": "1",
+        "-webkit-box-orient": "vertical",
+        overflow: "hidden",
       },
       "& .amount": {
         fontSize: "14px",
         lineHeight: "18px",
         marginTop: "8px",
         color: "var(--sl-color-neutral-500)",
+        display: "-webkit-box",
+        "-webkit-line-clamp": "1",
+        "-webkit-box-orient": "vertical",
+        overflow: "hidden",
       },
       "& .error": {
         fontSize: "14px",
@@ -18480,6 +18522,10 @@ function RewardExchangeView(props) {
         marginTop: "8px",
         fontWeight: "600",
         color: "var(--sl-color-warning-500)",
+        display: "-webkit-box",
+        "-webkit-line-clamp": "1",
+        "-webkit-box-orient": "vertical",
+        overflow: "hidden",
       },
     },
     ChooseAmount: {
@@ -18494,7 +18540,7 @@ function RewardExchangeView(props) {
         //fontSize: "var(--sl-font-size-large)",
         fontSize: "113%",
         fontWeight: "var(--sl-font-weight-semibold)",
-        color: "var(--sl-color-sky-500)",
+        color: "var(--sl-color-primary-500)",
       },
       "& .description": {
         fontSize: "var(--sl-font-size-medium)",
@@ -18531,7 +18577,7 @@ function RewardExchangeView(props) {
       gap: "20px",
       gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
     },
-    KutayButton: {
+    Button: {
       display: "flex",
       flexWrap: "wrap-reverse",
       margin: "var(--sl-spacing-medium) 0",
@@ -18570,18 +18616,18 @@ function RewardExchangeView(props) {
   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$1("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$1("p", null,
-        "Not enough ",
-        item.sourceUnit,
-        " to redeem for this reward.");
+      return (h$1("p", null, intl.formatMessage({
+        id: "notEnoughError",
+        defaultMessage: states.content.text.notEnoughError,
+      }, {
+        sourceUnit: item.sourceUnit,
+      })));
     }
     return (h$1("sl-select", { style: { width: "auto" }, label: "Select amount to receive", class: sheet.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
         var _a, _b, _c, _d, _e;
@@ -18600,6 +18646,8 @@ function RewardExchangeView(props) {
             defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
           }, {
             unavailableReason: step.unavailableReasonCode,
+            sourceUnit: item.sourceUnit,
+            sourceValue: step.prettySourceValue || item.prettySourceMinValue,
           }))))));
     })));
   }
@@ -18607,57 +18655,71 @@ function RewardExchangeView(props) {
     var _a;
     return [
       h$1("div", { class: sheet.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         const style = {
           boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
             ? "0 0 0 2px var(--sl-color-primary-500)"
             : "none",
+          borderRadius: "4px",
         };
         const amount = item.ruleType === "FIXED_GLOBAL_REWARD"
           ? item.prettySourceValue
-          : item.prettySourceMinValue && item.prettySourceMaxValue
-            ? `${item.prettySourceMinValue} to ${item.prettySourceMaxValue}`
-            : "";
+          : item.ruleType === "STEPPED_FIXED_GLOBAL_REWARD"
+            ? `${(_a = item.steps[0]) === null || _a === void 0 ? void 0 : _a.sourceValue} to ${(_b = item.steps.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.prettySourceValue}`
+            : `${item.prettySourceMinValue} to ${item.prettySourceMaxValue}`;
         return (h$1("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
-          h$1("sl-card", { class: sheet.classes.KutayCard, style: {
+          h$1("sl-card", { class: sheet.classes.Card, style: {
               cursor: item.unavailableReasonCode
                 ? "not-allowed"
                 : "pointer",
             }, onClick: () => item.available &&
               callbacks.setExchangeState({ selectedItem: item }) },
-            item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (h$1("div", { class: "selected-outline" },
-              h$1("div", { class: "selected-checkmark" },
-                h$1(CheckMark, null)))),
+            item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (h$1("div", { class: "selected" },
+              h$1(CheckmarkFilled, null))),
             h$1("div", { style: {
                 display: "flex",
                 width: "100%",
+                height: "120px",
                 borderRadius: "3px",
                 background: item.unavailableReasonCode
                   ? "rgba(0, 0, 0, 0.05)"
                   : "rgba(0, 0, 0, 0)",
               } },
-              h$1("div", { class: sheet.classes.Square },
+              h$1("div", { class: sheet.classes.Image, style: {
+                  opacity: item.unavailableReasonCode ? "0.5" : "1",
+                } },
                 h$1("img", { class: item.unavailableReasonCode ? "image subdued" : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
                     getAssetPath("./assets/placeholder.png") })),
               h$1("div", { class: sheet.classes.TextArea, style: {
                   opacity: item.unavailableReasonCode ? "0.5" : "1",
                 } },
-                h$1("div", { class: "title" }, item.name),
-                h$1("div", { class: "amount" }, amount),
+                h$1("div", { class: "title", style: {
+                    "-webkit-line-clamp": item.unavailableReasonCode
+                      ? "1"
+                      : "2",
+                  } }, (_c = item.name) !== null && _c !== void 0 ? _c : ""),
+                h$1("div", { class: "amount", style: {
+                    "-webkit-line-clamp": item.unavailableReasonCode
+                      ? "1"
+                      : "2",
+                  } }, amount),
                 item.unavailableReasonCode && (h$1("div", { class: "error" }, intl.formatMessage({
                   id: "unavailableCode",
-                  defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
+                  defaultMessage: (_e = (_d = states.content) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e.notAvailableError,
                 }, {
                   unavailableReason: item.unavailableReason ||
                     item.unavailableReasonCode,
+                  sourceUnit: item.sourceUnit,
+                  sourceValue: item.prettySourceValue ||
+                    item.prettySourceMinValue,
                 }))))))));
       })),
-      h$1("div", { class: sheet.classes.KutayButton },
-        h$1("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), disabled: !states.selectedItem }, "Continue")),
+      h$1("div", { class: sheet.classes.Button },
+        h$1("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText)),
     ];
   }
   function chooseAmount() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const input = getInput();
     const isDisabled = ((_a = states.selectedItem) === null || _a === void 0 ? void 0 : _a.ruleType) === "FIXED_GLOBAL_REWARD"
       ? false
@@ -18666,17 +18728,18 @@ function RewardExchangeView(props) {
       h$1("div", null, h$1("img", { class: sheet.classes.FullImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
           getAssetPath("./assets/placeholder.png") })),
       h$1("div", { class: sheet.classes.ChooseAmount },
-        h$1("div", { class: "title" }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || ""),
-        ((_b = states.selectedItem) === null || _b === void 0 ? void 0 : _b.ruleType) === "FIXED_GLOBAL_REWARD" ? (h$1("div", { class: "points" }, input)) : (h$1("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
-        ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (h$1("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (h$1("div", { class: "points" }, input)),
+        h$1("div", { class: "title" }, (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _b !== void 0 ? _b : ""),
+        ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (h$1("div", { class: "points" }, input)) : (h$1("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
+        ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.ruleType) === "FIXED_GLOBAL_REWARD" ? (h$1("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (h$1("div", { class: "points" }, input)),
         h$1("div", { class: "space" })),
-      h$1("div", { class: sheet.classes.KutayButton },
-        h$1("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, "Cancel"),
-        h$1("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, "Continue to confirmation"))));
+      h$1("div", { class: sheet.classes.Button },
+        h$1("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+        h$1("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText))));
   }
   function confirmation() {
+    var _a, _b;
     return (h$1("div", null,
-      h$1("h2", { style: { margin: "20px 0" } }, "Confirm and redeem"),
+      h$1("h2", { style: { margin: "20px 0" } }, states.content.text.redeemTitle),
       h$1("div", { style: {
           textAlign: "center",
           marginBottom: "var(--sl-spacing-xxx-large)",
@@ -18691,27 +18754,39 @@ function RewardExchangeView(props) {
             flex: "1",
             minWidth: "100%",
           } },
-          h$1("sl-card", { style: { width: "auto", maxWidth: "350px", margin: "auto" }, class: sheet.classes.KutayCard },
+          h$1("sl-card", { style: { width: "auto", maxWidth: "350px", margin: "auto" }, class: sheet.classes.Card },
             h$1("div", { class: sheet.classes.Square },
               h$1("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
                   getAssetPath("./assets/placeholder.png") })),
             h$1("div", { class: sheet.classes.TextArea, style: {
                 lineHeight: "18px",
                 alignSelf: "center",
-              } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) ? (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) +
-              " " + (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || ""
-              : (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) || "")))),
-      h$1("div", { class: sheet.classes.KutayButton },
-        h$1("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, "Back"),
-        h$1("sl-button", { class: "continue", size: "large", onClick: callbacks.exchangeReward }, "Redeem"))));
+              } }, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) ? (_a = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) +
+              " " + (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name)) !== null && _a !== void 0 ? _a : "" : (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _b !== void 0 ? _b : "")))),
+      h$1("div", { class: sheet.classes.Button },
+        h$1("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
+        h$1("sl-button", { class: "continue", size: "large", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText))));
   }
   function success() {
+    var _a, _b, _c;
     return (h$1("div", { class: sheet.classes.Success },
       h$1(Gift, null),
-      h$1("div", { class: "title" }, "Reward Redeemed"),
-      h$1("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
-      h$1("div", { class: sheet.classes.KutayButton },
-        h$1("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, "Done"))));
+      h$1("div", { class: "title" }, states.content.text.rewardRedeemedText),
+      h$1("div", { class: "description" }, intl.formatMessage({
+        id: "successMessage",
+        defaultMessage: states.content.text.redemptionSuccessText,
+      }, {
+        sourceValue: (_a = states.selectedItem.prettySourceValue) !== null && _a !== void 0 ? _a : (_b = states.selectedStep) === null || _b === void 0 ? void 0 : _b.prettySourceValue,
+        destinationValue: ((_c = states.selectedStep) === null || _c === void 0 ? void 0 : _c.prettyDestinationValue) ||
+          states.selectedItem.globalRewardKey,
+      })),
+      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h$1("div", { style: {
+          width: "40%",
+          margin: "-30px auto var(--sl-spacing-xxx-large) auto",
+        } },
+        h$1(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: "Copied", open: states.open, onClick: callbacks.copyFuelTankCode }))),
+      h$1("div", { class: sheet.classes.Button },
+        h$1("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
   const stages = {
     chooseReward: () => chooseReward(),
@@ -18734,26 +18809,40 @@ function RewardExchangeView(props) {
       h$1(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
   function loading() {
-    return (h$1("div", { style: {
-        display: "flex",
-        height: "400px",
-        alignItems: "center",
-        justifyContent: "center",
-      } },
-      h$1("div", { style: { transform: "scale(5)" } },
-        h$1("sl-spinner", null))));
+    return (h$1("div", { class: sheet.classes.Grid }, [...Array(8)].map(() => {
+      return (h$1("div", { class: sheet.classes.CardContainer },
+        h$1("sl-card", { class: sheet.classes.Card },
+          h$1("div", { class: sheet.classes.CardLayout },
+            h$1("div", null,
+              h$1("sl-skeleton", { style: {
+                  width: "100px",
+                  height: "100px",
+                  margin: "9px",
+                  "--border-radius": "4px",
+                } })),
+            h$1("div", { style: { margin: "12px 12px 0 0", width: "100%" } },
+              h$1("sl-skeleton", { style: { marginBottom: "12px" } }),
+              h$1("sl-skeleton", { style: { marginBottom: "12px" } }),
+              h$1("sl-skeleton", { style: { width: "45%" } }))))));
+    })));
   }
   function errorMessage() {
     return (h$1("sl-alert", { type: "danger", open: true },
       h$1("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      "An error occured trying to redeem this reward. Please try again."));
+      states.content.text.redemptionError));
+  }
+  function queryErrorMessage() {
+    return (h$1("sl-alert", { type: "danger", open: true },
+      h$1("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      states.content.text.queryError));
   }
   return (h$1("div", { class: sheet.classes.Container },
     h$1("style", { type: "text/css" }, styleString),
     h$1("div", null,
       stageMap(),
-      states.loading && loading(),
+      states.redeemStage === "chooseReward" && states.loading && loading(),
       states.exchangeError && errorMessage(),
+      states.queryError && queryErrorMessage(),
       currentStage && currentStage())));
 }
 
@@ -18768,7 +18857,60 @@ const SqmRewardExchangeList = class {
     /**
      * @uiName Exchange button text
      */
-    this.notAvailableError = "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }";
+    this.notAvailableError = "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} other {Not available} }";
+    /**
+     * @uiName Choose Reward Progress Title
+     */
+    this.chooseRewardTitle = "Choose reward";
+    /**
+     * @uiName Choose Amount Progress Title
+     */
+    this.chooseAmountTitle = "Amount";
+    /**
+     * @uiName Confirmation Progress Title
+     */
+    this.confirmationTitle = "Confirm";
+    /**
+     * @uiName Cancel Button Text
+     */
+    this.cancelText = "Cancel";
+    /**
+     * @uiName Back Button Text
+     */
+    this.backText = "Back";
+    /**
+     * @uiName Continue Button Text
+     */
+    this.continueText = "Continue";
+    /**
+     * @uiName Continue to Confirmation Button Text
+     */
+    this.continueToConfirmationText = "Continue to confirmation";
+    /**
+     * @uiName Redeem Button Text
+     */
+    this.redeemText = "Redeem";
+    /**
+     * @uiName Confirmation Title Text
+     */
+    this.redeemTitle = "Confirm and redeem";
+    this.redemptionSuccessText = "Successfully redeemed {sourceValue} for {destinationValue}";
+    /**
+     * @uiName Done Text
+     */
+    this.doneText = "Done";
+    /**
+     * @uiName Reward List Error Message
+     */
+    this.queryError = "Unable to load reward exchange list";
+    /**
+     * @uiName Redemption Error Message
+     */
+    this.redemptionError = "An error occured trying to redeem this reward. Please try again";
+    /**
+     * @uiName Not Enough Available Error Message
+     */
+    this.notEnoughError = "Not enough {sourceUnit} to redeem for this reward";
     h(this);
   }
   disconnectedCallback() { }
@@ -18799,6 +18941,7 @@ function useRewardExchangeListDemo(props) {
       amount: 0,
       selectedStep: undefined,
       exchangeError: false,
+      queryError: false,
       loading: false,
     },
     data: {
@@ -18809,6 +18952,7 @@ function useRewardExchangeListDemo(props) {
       setExchangeState: (_) => { },
       setStage: (_) => { },
       resetState: () => { },
+      copyFuelTankCode: () => { },
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
@@ -18933,7 +19077,7 @@ const GET_REWARDS = gql `
 `;
 function useRewardsTable(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;
@@ -18956,7 +19100,7 @@ function useRewardsTable(props, emptyElement, loadingElement) {
     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; }, {
+  const { envelope: rewardsData, states, callbacks, } = pn(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,
   }, {
@@ -19158,8 +19302,8 @@ function matchPath(pattern, page) {
   return regexp.exec(page);
 }
 function useRouter() {
-  const location = an();
-  const host = P$1();
+  const location = vn();
+  const host = S$1();
   const [slot, setSlot] = useState(undefined);
   const [container, setContainer] = useState(undefined);
   const page = location.pathname;
@@ -19318,14 +19462,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" &&
@@ -19420,10 +19564,10 @@ const WIDGET_ENGAGEMENT_EVENT = dist.gql `
 function useShareLink(props) {
   var _a, _b;
   const { programId = M$1() } = props;
-  const user = T$1();
+  const user = ne$1();
   const engagementMedium = x$1();
-  const { data } = en(MessageLinkQuery$1, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [sendLoadEvent] = be(WIDGET_ENGAGEMENT_EVENT);
+  const { data } = cn(MessageLinkQuery$1, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = De(WIDGET_ENGAGEMENT_EVENT);
   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
   "...";
@@ -20955,15 +21099,15 @@ const FullStackIcon = () => {
 };
 
 const ShareButton$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': ShareButton_stories,
-    WithIcon: WithIcon,
-    WithIconOverride: WithIconOverride,
-    TextStyle: TextStyle,
-    WithoutIcon: WithoutIcon,
-    WithoutText: WithoutText,
-    TextStyleWithoutIcon: TextStyleWithoutIcon,
-    FullStackIcon: FullStackIcon
+  __proto__: null,
+  'default': ShareButton_stories,
+  WithIcon: WithIcon,
+  WithIconOverride: WithIconOverride,
+  TextStyle: TextStyle,
+  WithoutIcon: WithoutIcon,
+  WithoutText: WithoutText,
+  TextStyleWithoutIcon: TextStyleWithoutIcon,
+  FullStackIcon: FullStackIcon
 });
 
 const ShareLink_stories = {
@@ -20999,12 +21143,12 @@ const FullStack = () => {
 };
 
 const ShareLink$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': ShareLink_stories,
-    Default: Default,
-    Tooltip: Tooltip,
-    Disabled: Disabled,
-    FullStack: FullStack
+  __proto__: null,
+  'default': ShareLink_stories,
+  Default: Default,
+  Tooltip: Tooltip,
+  Disabled: Disabled,
+  FullStack: FullStack
 });
 
 const BigStat_stories = {
@@ -21072,16 +21216,16 @@ const InvalidStatValue = () => {
 };
 
 const BigStat = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': BigStat_stories,
-    Default: Default$1,
-    LeftAlign: LeftAlign,
-    RightAlign: RightAlign,
-    FlexReverse: FlexReverse,
-    FlexReverseRight: FlexReverseRight,
-    FlexReverseLeft: FlexReverseLeft,
-    NoStatValue: NoStatValue,
-    InvalidStatValue: InvalidStatValue
+  __proto__: null,
+  'default': BigStat_stories,
+  Default: Default$1,
+  LeftAlign: LeftAlign,
+  RightAlign: RightAlign,
+  FlexReverse: FlexReverse,
+  FlexReverseRight: FlexReverseRight,
+  FlexReverseLeft: FlexReverseLeft,
+  NoStatValue: NoStatValue,
+  InvalidStatValue: InvalidStatValue
 });
 
 const Leaderboard_stories = {
@@ -21184,12 +21328,12 @@ const Five = () => {
 };
 
 const Leaderboard = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': Leaderboard_stories,
-    Empty: Empty,
-    Loading: Loading,
-    One: One,
-    Five: Five
+  __proto__: null,
+  'default': Leaderboard_stories,
+  Empty: Empty,
+  Loading: Loading,
+  One: One,
+  Five: Five
 });
 
 const HookStoryAddon = ({ story }, children) => {
@@ -21279,36 +21423,36 @@ const routes = `
 `;
 const TemplateNavigation = createHookStory(() => {
   return (h$1("div", null,
-    h$1("button", { onClick: () => rn.push("/") }, "/"),
-    h$1("button", { onClick: () => rn.push("/foo") }, "/foo"),
-    h$1("button", { onClick: () => rn.push("/bar") }, "/bar"),
-    h$1("button", { onClick: () => rn.push("/baz/bang") }, "/baz/bang"),
-    h$1("button", { onClick: () => rn.push("/refer") }, "/refer"),
-    h$1("button", { onClick: () => rn.push("/refer/1") }, "/refer/1"),
-    h$1("button", { onClick: () => rn.push("/refer/2") }, "/refer/2"),
-    h$1("button", { onClick: () => rn.back() }, "Back"),
-    h$1("button", { onClick: () => rn.forward() }, "Forward"),
+    h$1("button", { onClick: () => mn.push("/") }, "/"),
+    h$1("button", { onClick: () => mn.push("/foo") }, "/foo"),
+    h$1("button", { onClick: () => mn.push("/bar") }, "/bar"),
+    h$1("button", { onClick: () => mn.push("/baz/bang") }, "/baz/bang"),
+    h$1("button", { onClick: () => mn.push("/refer") }, "/refer"),
+    h$1("button", { onClick: () => mn.push("/refer/1") }, "/refer/1"),
+    h$1("button", { onClick: () => mn.push("/refer/2") }, "/refer/2"),
+    h$1("button", { onClick: () => mn.back() }, "Back"),
+    h$1("button", { onClick: () => mn.forward() }, "Forward"),
     h$1("hr", null),
     h$1("sqm-router", { innerHTML: templates })));
 });
 const RouteNavigation = createHookStory(() => {
   return (h$1("div", null,
-    h$1("button", { onClick: () => rn.push("/") }, "/"),
-    h$1("button", { onClick: () => rn.push("/foo") }, "/foo"),
-    h$1("button", { onClick: () => rn.push("/bar") }, "/bar"),
-    h$1("button", { onClick: () => rn.push("/baz/bang") }, "/baz/bang"),
-    h$1("button", { onClick: () => rn.push("/refer") }, "/refer"),
-    h$1("button", { onClick: () => rn.push("/refer/1") }, "/refer/1"),
-    h$1("button", { onClick: () => rn.push("/refer/2") }, "/refer/2"),
-    h$1("button", { onClick: () => rn.back() }, "Back"),
-    h$1("button", { onClick: () => rn.forward() }, "Forward"),
+    h$1("button", { onClick: () => mn.push("/") }, "/"),
+    h$1("button", { onClick: () => mn.push("/foo") }, "/foo"),
+    h$1("button", { onClick: () => mn.push("/bar") }, "/bar"),
+    h$1("button", { onClick: () => mn.push("/baz/bang") }, "/baz/bang"),
+    h$1("button", { onClick: () => mn.push("/refer") }, "/refer"),
+    h$1("button", { onClick: () => mn.push("/refer/1") }, "/refer/1"),
+    h$1("button", { onClick: () => mn.push("/refer/2") }, "/refer/2"),
+    h$1("button", { onClick: () => mn.back() }, "Back"),
+    h$1("button", { onClick: () => mn.forward() }, "Forward"),
     h$1("hr", null),
     h$1("sqm-router", { innerHTML: routes })));
 });
 const Styling = createHookStory(() => {
   return (h$1("div", null,
-    h$1("button", { onClick: () => rn.push("/") }, "/"),
-    h$1("button", { onClick: () => rn.push("/foo") }, "/foo"),
+    h$1("button", { onClick: () => mn.push("/") }, "/"),
+    h$1("button", { onClick: () => mn.push("/foo") }, "/foo"),
     h$1("hr", null),
     h$1("div", { style: { display: "flex", justifyContent: "space-around" } },
       h$1("sqm-router", { innerHTML: `<template path="/">
@@ -21322,7 +21466,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 },
@@ -21353,12 +21497,12 @@ const RouterPlayground = createHookStory(() => {
 });
 
 const Router = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': Router_stories,
-    TemplateNavigation: TemplateNavigation,
-    RouteNavigation: RouteNavigation,
-    Styling: Styling,
-    RouterPlayground: RouterPlayground
+  __proto__: null,
+  'default': Router_stories,
+  TemplateNavigation: TemplateNavigation,
+  RouteNavigation: RouteNavigation,
+  Styling: Styling,
+  RouterPlayground: RouterPlayground
 });
 
 const LeaderboardRank_stories = {
@@ -21373,9 +21517,9 @@ const First = () => {
 };
 
 const LeaderboardRank = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': LeaderboardRank_stories,
-    First: First
+  __proto__: null,
+  'default': LeaderboardRank_stories,
+  First: First
 });
 
 function setupGraphQL() {
@@ -21465,8 +21609,8 @@ const FullStackFrame = () => {
       "Current path:",
       " ",
       h$1("code", null,
-        h$1("strong", null, (_a = an()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    h$1("button", { onClick: rn.back }, "Go Back")));
+        h$1("strong", null, (_a = vn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    h$1("button", { onClick: mn.back }, "Go Back")));
 };
 const FullStackFrameLoggedOut = () => {
   var _a;
@@ -21490,17 +21634,17 @@ const FullStackFrameLoggedOut = () => {
       "Current path:",
       " ",
       h$1("code", null,
-        h$1("strong", null, (_a = an()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    h$1("button", { onClick: rn.back }, "Go Back")));
+        h$1("strong", null, (_a = vn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    h$1("button", { onClick: mn.back }, "Go Back")));
 };
 
 const PortalFrame$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': PortalFrame_stories,
-    FrameWithMenu: FrameWithMenu,
-    FrameWithoutMenu: FrameWithoutMenu,
-    FullStackFrame: FullStackFrame,
-    FullStackFrameLoggedOut: FullStackFrameLoggedOut
+  __proto__: null,
+  'default': PortalFrame_stories,
+  FrameWithMenu: FrameWithMenu,
+  FrameWithoutMenu: FrameWithoutMenu,
+  FullStackFrame: FullStackFrame,
+  FullStackFrameLoggedOut: FullStackFrameLoggedOut
 });
 
 const EditProfileForm_stories = {
@@ -21564,11 +21708,11 @@ const FullStackFrameWithMenu = () => {
 };
 
 const EditProfile$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': EditProfileForm_stories,
-    EditProfileFormDisabled: EditProfileFormDisabled,
-    EditProfileFormEnabled: EditProfileFormEnabled,
-    FullStackFrameWithMenu: FullStackFrameWithMenu
+  __proto__: null,
+  'default': EditProfileForm_stories,
+  EditProfileFormDisabled: EditProfileFormDisabled,
+  EditProfileFormEnabled: EditProfileFormEnabled,
+  FullStackFrameWithMenu: FullStackFrameWithMenu
 });
 
 const UseShareLink_stories = {
@@ -21585,14 +21729,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);
     };
   }, []);
 }
@@ -21626,11 +21770,11 @@ const FastTooltip = createHookStory(() => {
 });
 
 const UseShareLink = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': UseShareLink_stories,
-    BareBonesView: BareBonesView,
-    RegularView: RegularView,
-    FastTooltip: FastTooltip
+  __proto__: null,
+  'default': UseShareLink_stories,
+  BareBonesView: BareBonesView,
+  RegularView: RegularView,
+  FastTooltip: FastTooltip
 });
 
 const UseShareButton_stories = {
@@ -21647,14 +21791,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);
     };
   }, []);
 }
@@ -21689,10 +21833,10 @@ const RegularView$1 = createHookStory(() => {
 });
 
 const UseShareButton = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': UseShareButton_stories,
-    BareBonesView: BareBonesView$1,
-    RegularView: RegularView$1
+  __proto__: null,
+  'default': UseShareButton_stories,
+  BareBonesView: BareBonesView$1,
+  RegularView: RegularView$1
 });
 
 const UseBigStat_stories = {
@@ -21709,14 +21853,14 @@ function setupGraphQL$3() {
     programId,
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6Im55bmVsbGllIiwiaWQiOiJueW5lbGxpZSJ9fQ.3KV974VPLgk4tD8LQfJTi4IPkKCmnaB8w48HzVJYDuI",
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
 }
@@ -21797,36 +21941,36 @@ const CustomField = createHookStory(() => {
 });
 
 const UseBigStat = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': UseBigStat_stories,
-    Demo: Demo,
-    ReferralsCount: ReferralsCount,
-    referralsConvertedCount: referralsConvertedCount,
-    referralsStartedCount: referralsStartedCount,
-    ReferralsMonth: ReferralsMonth,
-    ReferralsWeek: ReferralsWeek,
-    RewardsCount: RewardsCount,
-    GlobalRewardsCount: GlobalRewardsCount,
-    GlobalRewardsCountFiltered: GlobalRewardsCountFiltered,
-    GlobalRewardsCountPctDiscount: GlobalRewardsCountPctDiscount,
-    GlobalRewardsCountPctDiscountPending: GlobalRewardsCountPctDiscountPending,
-    RewardsCountByUnit: RewardsCountByUnit,
-    GlobalRewardsCountByUnit: GlobalRewardsCountByUnit,
-    GlobalPendingRewardsCount: GlobalPendingRewardsCount,
-    RewardsAvailableCount: RewardsAvailableCount,
-    GlobalRewardsCountByIntegration: GlobalRewardsCountByIntegration,
-    GlobalRewardsCountByPendingIntegration: GlobalRewardsCountByPendingIntegration,
-    RewardsMonth: RewardsMonth,
-    RewardsWeek: RewardsWeek,
-    RewardsAssigned: RewardsAssigned,
-    RewardsAssignedCashUSD: RewardsAssignedCashUSD,
-    RewardsRedeemed: RewardsRedeemed,
-    RewardsAvailable: RewardsAvailable,
-    RewardsAvailableWithSlash: RewardsAvailableWithSlash,
-    RewardBalance: RewardBalance,
-    RewardBalanceCashUSD: RewardBalanceCashUSD,
-    ProgramGoals: ProgramGoals,
-    CustomField: CustomField
+  __proto__: null,
+  'default': UseBigStat_stories,
+  Demo: Demo,
+  ReferralsCount: ReferralsCount,
+  referralsConvertedCount: referralsConvertedCount,
+  referralsStartedCount: referralsStartedCount,
+  ReferralsMonth: ReferralsMonth,
+  ReferralsWeek: ReferralsWeek,
+  RewardsCount: RewardsCount,
+  GlobalRewardsCount: GlobalRewardsCount,
+  GlobalRewardsCountFiltered: GlobalRewardsCountFiltered,
+  GlobalRewardsCountPctDiscount: GlobalRewardsCountPctDiscount,
+  GlobalRewardsCountPctDiscountPending: GlobalRewardsCountPctDiscountPending,
+  RewardsCountByUnit: RewardsCountByUnit,
+  GlobalRewardsCountByUnit: GlobalRewardsCountByUnit,
+  GlobalPendingRewardsCount: GlobalPendingRewardsCount,
+  RewardsAvailableCount: RewardsAvailableCount,
+  GlobalRewardsCountByIntegration: GlobalRewardsCountByIntegration,
+  GlobalRewardsCountByPendingIntegration: GlobalRewardsCountByPendingIntegration,
+  RewardsMonth: RewardsMonth,
+  RewardsWeek: RewardsWeek,
+  RewardsAssigned: RewardsAssigned,
+  RewardsAssignedCashUSD: RewardsAssignedCashUSD,
+  RewardsRedeemed: RewardsRedeemed,
+  RewardsAvailable: RewardsAvailable,
+  RewardsAvailableWithSlash: RewardsAvailableWithSlash,
+  RewardBalance: RewardBalance,
+  RewardBalanceCashUSD: RewardBalanceCashUSD,
+  ProgramGoals: ProgramGoals,
+  CustomField: CustomField
 });
 
 function setupGraphQL$4() {
@@ -21840,14 +21984,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);
     };
   }, []);
 }
@@ -21868,9 +22012,9 @@ const RegularView$2 = createHookStory(() => {
 });
 
 const UseEditProfile = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': UseEditProfile_stories,
-    RegularView: RegularView$2
+  __proto__: null,
+  'default': UseEditProfile_stories,
+  RegularView: RegularView$2
 });
 
 const UseLeaderboard_stories = {
@@ -21887,14 +22031,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);
     };
   }, []);
 }
@@ -21948,10 +22092,10 @@ const TopStartedReferrers = createHookStory(() => {
 });
 
 const UseLeaderboard = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': UseLeaderboard_stories,
-    TopConvertedReferrers: TopConvertedReferrers,
-    TopStartedReferrers: TopStartedReferrers
+  __proto__: null,
+  'default': UseLeaderboard_stories,
+  TopConvertedReferrers: TopConvertedReferrers,
+  TopStartedReferrers: TopStartedReferrers
 });
 
 const FormMessage_stories = {
@@ -21983,12 +22127,12 @@ const FullStackSuccess = () => {
 };
 
 const FormMessage$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': FormMessage_stories,
-    SuccessAlert: SuccessAlert,
-    ErrorAlert: ErrorAlert,
-    InfoAlert: InfoAlert,
-    FullStackSuccess: FullStackSuccess
+  __proto__: null,
+  'default': FormMessage_stories,
+  SuccessAlert: SuccessAlert,
+  ErrorAlert: ErrorAlert,
+  InfoAlert: InfoAlert,
+  FullStackSuccess: FullStackSuccess
 });
 
 const EXCHANGE$1 = dist.gql `
@@ -22014,14 +22158,14 @@ function setupGraphQL$6() {
     programId,
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
   return { id, accountId };
@@ -22030,7 +22174,7 @@ function useExchangeButton() {
   const { id, accountId } = setupGraphQL$6();
   const [points, setPoints] = useState(10);
   const [rate, setRate] = useState(100);
-  const [exchange, { data, errors }] = Ne(EXCHANGE$1);
+  const [exchange, { data, errors }] = ze(EXCHANGE$1);
   return {
     states: {
       points,
@@ -22125,12 +22269,12 @@ const VariableCreditReward = createHookStory(() => {
 });
 
 const UseRewardExchangeList = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': UseRewardExchangeList_stories,
-    RewardList: RewardList,
-    FixedGlobalReward: FixedGlobalReward,
-    VariableGlobalReward: VariableGlobalReward,
-    VariableCreditReward: VariableCreditReward
+  __proto__: null,
+  'default': UseRewardExchangeList_stories,
+  RewardList: RewardList,
+  FixedGlobalReward: FixedGlobalReward,
+  VariableGlobalReward: VariableGlobalReward,
+  VariableCreditReward: VariableCreditReward
 });
 
 const UseRewardsTable_stories = {
@@ -22145,14 +22289,14 @@ function setupGraphQL$7() {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
   return { id, accountId };
@@ -22171,10 +22315,10 @@ const RewardsTableNoProgram = createHookStory(() => {
 });
 
 const UseRewardsTable = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': UseRewardsTable_stories,
-    RewardsTableWithProgram: RewardsTableWithProgram,
-    RewardsTableNoProgram: RewardsTableNoProgram
+  __proto__: null,
+  'default': UseRewardsTable_stories,
+  RewardsTableWithProgram: RewardsTableWithProgram,
+  RewardsTableNoProgram: RewardsTableNoProgram
 });
 
 const JWT = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJhY2NvdW50SWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCJ9fQ.FMNZ6oajyr6SiCcRqKKdyPqvNTvWROQ60MKAyfvWGfc";
@@ -22192,14 +22336,14 @@ function setupGraphQL$8() {
     programId,
   };
   useEffect(() => {
-    L$1({
+    Y({
       accountId,
       id,
       jwt: JWT,
     });
     return () => {
       window.widgetIdent = undefined;
-      L$1(undefined);
+      Y(undefined);
     };
   }, []);
   return { id, accountId };
@@ -22210,9 +22354,9 @@ const TaskCard = createHookStory(() => {
 });
 
 const UseTaskCard = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': UseTaskCard_stories,
-    TaskCard: TaskCard
+  __proto__: null,
+  'default': UseTaskCard_stories,
+  TaskCard: TaskCard
 });
 
 const NewPortal_stories = {
@@ -22509,12 +22653,12 @@ const Activity = () => {
 };
 
 const NewPortal = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': NewPortal_stories,
-    Dashboard: Dashboard,
-    EditProfile: EditProfile$2,
-    Commissions: Commissions,
-    Activity: Activity
+  __proto__: null,
+  'default': NewPortal_stories,
+  Dashboard: Dashboard,
+  EditProfile: EditProfile$2,
+  Commissions: Commissions,
+  Activity: Activity
 });
 
 const SidebarItem_stories = {
@@ -22548,10 +22692,10 @@ const ActiveItem = () => {
 };
 
 const SidebarItem = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': SidebarItem_stories,
-    InactiveItem: InactiveItem,
-    ActiveItem: ActiveItem
+  __proto__: null,
+  'default': SidebarItem_stories,
+  InactiveItem: InactiveItem,
+  ActiveItem: ActiveItem
 });
 
 const NavigationSidebar_stories = {
@@ -22598,9 +22742,9 @@ const DefaultNavigationSidebar = () => {
 };
 
 const NavigationSidebar = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': NavigationSidebar_stories,
-    DefaultNavigationSidebar: DefaultNavigationSidebar
+  __proto__: null,
+  'default': NavigationSidebar_stories,
+  DefaultNavigationSidebar: DefaultNavigationSidebar
 });
 
 const PortalLogin_stories = {
@@ -22641,11 +22785,11 @@ const LoginWithError = () => h$1(PortalLoginView, Object.assign({}, errorProps))
 const LoginLoading = () => h$1(PortalLoginView, Object.assign({}, loadingProps));
 
 const PortalLogin$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': PortalLogin_stories,
-    Default: Default$2,
-    LoginWithError: LoginWithError,
-    LoginLoading: LoginLoading
+  __proto__: null,
+  'default': PortalLogin_stories,
+  Default: Default$2,
+  LoginWithError: LoginWithError,
+  LoginLoading: LoginLoading
 });
 
 const PortalRegister_stories = {
@@ -22740,13 +22884,13 @@ const FieldsHidden = () => {
 const SlottedInputs = () => h$1(PortalRegisterView, Object.assign({}, slottedProps));
 
 const PortalRegister$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': PortalRegister_stories,
-    Default: Default$3,
-    RegisterWithError: RegisterWithError,
-    RegisterLoading: RegisterLoading,
-    FieldsHidden: FieldsHidden,
-    SlottedInputs: SlottedInputs
+  __proto__: null,
+  'default': PortalRegister_stories,
+  Default: Default$3,
+  RegisterWithError: RegisterWithError,
+  RegisterLoading: RegisterLoading,
+  FieldsHidden: FieldsHidden,
+  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";
@@ -22819,12 +22963,12 @@ const ForgotPasswordLoading = () => (h$1(PortalForgotPasswordView, Object.assign
 const ForgotPasswordSuccess = () => (h$1(PortalForgotPasswordView, Object.assign({}, successProps)));
 
 const PortalForgotPassword = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': PortalForgotPassword_stories,
-    Default: Default$4,
-    ForgotPasswordWithError: ForgotPasswordWithError,
-    ForgotPasswordLoading: ForgotPasswordLoading,
-    ForgotPasswordSuccess: ForgotPasswordSuccess
+  __proto__: null,
+  'default': PortalForgotPassword_stories,
+  Default: Default$4,
+  ForgotPasswordWithError: ForgotPasswordWithError,
+  ForgotPasswordLoading: ForgotPasswordLoading,
+  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";
@@ -22905,12 +23049,12 @@ const EmailVerificationLoading = () => (h$1(PortalEmailVerificationView, Object.
 const EmailVerificationSuccess = () => (h$1(PortalEmailVerificationView, Object.assign({}, successProps$1)));
 
 const PortalEmailVerification = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': PortalEmailVerification_stories,
-    Default: Default$5,
-    EmailVerificationWithError: EmailVerificationWithError,
-    EmailVerificationLoading: EmailVerificationLoading,
-    EmailVerificationSuccess: EmailVerificationSuccess
+  __proto__: null,
+  'default': PortalEmailVerification_stories,
+  Default: Default$5,
+  EmailVerificationWithError: EmailVerificationWithError,
+  EmailVerificationLoading: EmailVerificationLoading,
+  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\"";
@@ -23067,14 +23211,14 @@ const ResetPasswordSuccess = () => (h$1(PortalResetPasswordView$1, Object.assign
 const CodeValidating = () => (h$1(PortalResetPasswordView$1, Object.assign({}, validatingCodeProps)));
 
 const PortalResetPassword = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': PortalResetPassword_stories,
-    Default: Default$6,
-    DefaultWithoutConfirmField: DefaultWithoutConfirmField,
-    ResetPasswordWithError: ResetPasswordWithError,
-    ResetPasswordLoading: ResetPasswordLoading,
-    ResetPasswordSuccess: ResetPasswordSuccess,
-    CodeValidating: CodeValidating
+  __proto__: null,
+  'default': PortalResetPassword_stories,
+  Default: Default$6,
+  DefaultWithoutConfirmField: DefaultWithoutConfirmField,
+  ResetPasswordWithError: ResetPasswordWithError,
+  ResetPasswordLoading: ResetPasswordLoading,
+  ResetPasswordSuccess: ResetPasswordSuccess,
+  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          |";
@@ -23117,10 +23261,10 @@ const EmailVerificationWithError$1 = () => (h$1(PortalVerifyEmailView, Object.as
 const EmailVerificationSuccess$1 = () => (h$1(PortalVerifyEmailView, Object.assign({}, verifiedProps)));
 
 const PortalVerifyEmail = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': PortalVerifyEmail_stories,
-    EmailVerificationWithError: EmailVerificationWithError$1,
-    EmailVerificationSuccess: EmailVerificationSuccess$1
+  __proto__: null,
+  'default': PortalVerifyEmail_stories,
+  EmailVerificationWithError: EmailVerificationWithError$1,
+  EmailVerificationSuccess: EmailVerificationSuccess$1
 });
 
 const AssetCard_stories = {
@@ -23152,11 +23296,11 @@ const CardWithNoImg = () => {
 };
 
 const AssetCard = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': AssetCard_stories,
-    Default: Default$7,
-    CardWithLongText: CardWithLongText,
-    CardWithNoImg: CardWithNoImg
+  __proto__: null,
+  'default': AssetCard_stories,
+  Default: Default$7,
+  CardWithLongText: CardWithLongText,
+  CardWithNoImg: CardWithNoImg
 });
 
 const DividedLayout_stories = {
@@ -23242,11 +23386,11 @@ const ColumnCustomDivider = () => {
 };
 
 const DividedLayout$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': DividedLayout_stories,
-    Row: Row,
-    Column: Column,
-    ColumnCustomDivider: ColumnCustomDivider
+  __proto__: null,
+  'default': DividedLayout_stories,
+  Row: Row,
+  Column: Column,
+  ColumnCustomDivider: ColumnCustomDivider
 });
 
 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";
@@ -23397,14 +23541,14 @@ const Loading$1 = () => h$1(PortalChangePasswordView, Object.assign({}, loadingP
 const Success = () => h$1(PortalChangePasswordView, Object.assign({}, successProps$3));
 
 const ChangePassword = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': ChangePassword_stories,
-    Default: Default$8,
-    Open: Open,
-    Error: Error$1,
-    PaswordError: PaswordError,
-    Loading: Loading$1,
-    Success: Success
+  __proto__: null,
+  'default': ChangePassword_stories,
+  Default: Default$8,
+  Open: Open,
+  Error: Error$1,
+  PaswordError: PaswordError,
+  Loading: Loading$1,
+  Success: Success
 });
 
 const PortalProfile_stories = {
@@ -23638,14 +23782,14 @@ const Error$2 = () => h$1(PortalProfileView, Object.assign({}, errorProps$7));
 const Success$1 = () => h$1(PortalProfileView, Object.assign({}, successProps$4));
 
 const PortalProfile = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': PortalProfile_stories,
-    Default: Default$9,
-    DefaultNoCountry: DefaultNoCountry,
-    Loading: Loading$2,
-    Disabled: Disabled$1,
-    Error: Error$2,
-    Success: Success$1
+  __proto__: null,
+  'default': PortalProfile_stories,
+  Default: Default$9,
+  DefaultNoCountry: DefaultNoCountry,
+  Loading: Loading$2,
+  Disabled: Disabled$1,
+  Error: Error$2,
+  Success: Success$1
 });
 
 const ReferralTableRewardsCell_stories = {
@@ -23861,23 +24005,23 @@ const tenRewardsCell = () => {
 };
 
 const ReferralTableRewardsCell$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': ReferralTableRewardsCell_stories,
-    PendingNoUnpend: PendingNoUnpend,
-    PendingNoUnpendNoDetails: PendingNoUnpendNoDetails,
-    PendingWithUnpend: PendingWithUnpend,
-    AvailableNoExpiry: AvailableNoExpiry,
-    AvailableWithExpiry: AvailableWithExpiry,
-    Redeemed: Redeemed,
-    Cancelled: Cancelled,
-    Expired: Expired,
-    EmptyCell: EmptyCell,
-    oneRewardCell: oneRewardCell,
-    twoRewardsCell: twoRewardsCell,
-    threeRewardsCell: threeRewardsCell,
-    fiveRewardsCell: fiveRewardsCell,
-    eightRewardsCell: eightRewardsCell,
-    tenRewardsCell: tenRewardsCell
+  __proto__: null,
+  'default': ReferralTableRewardsCell_stories,
+  PendingNoUnpend: PendingNoUnpend,
+  PendingNoUnpendNoDetails: PendingNoUnpendNoDetails,
+  PendingWithUnpend: PendingWithUnpend,
+  AvailableNoExpiry: AvailableNoExpiry,
+  AvailableWithExpiry: AvailableWithExpiry,
+  Redeemed: Redeemed,
+  Cancelled: Cancelled,
+  Expired: Expired,
+  EmptyCell: EmptyCell,
+  oneRewardCell: oneRewardCell,
+  twoRewardsCell: twoRewardsCell,
+  threeRewardsCell: threeRewardsCell,
+  fiveRewardsCell: fiveRewardsCell,
+  eightRewardsCell: eightRewardsCell,
+  tenRewardsCell: tenRewardsCell
 });
 
 const ReferralTable_stories = {
@@ -24354,17 +24498,17 @@ const FullRewardsTable = () => {
 };
 
 const ReferralTable$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': ReferralTable_stories,
-    SimpleUserTable: SimpleUserTable,
-    HiddenLabelsTable: HiddenLabelsTable,
-    CustomButtonTextTable: CustomButtonTextTable,
-    FullUserTable: FullUserTable,
-    LongCellTextTable: LongCellTextTable,
-    LongColumnTextTable: LongColumnTextTable,
-    EmptyTable: EmptyTable,
-    LoadingTable: LoadingTable,
-    FullRewardsTable: FullRewardsTable
+  __proto__: null,
+  'default': ReferralTable_stories,
+  SimpleUserTable: SimpleUserTable,
+  HiddenLabelsTable: HiddenLabelsTable,
+  CustomButtonTextTable: CustomButtonTextTable,
+  FullUserTable: FullUserTable,
+  LongCellTextTable: LongCellTextTable,
+  LongColumnTextTable: LongColumnTextTable,
+  EmptyTable: EmptyTable,
+  LoadingTable: LoadingTable,
+  FullRewardsTable: FullRewardsTable
 });
 
 const ReferralTableCell_stories = {
@@ -24430,14 +24574,14 @@ const RewardsCell = () => {
 };
 
 const ReferralTableCell$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': ReferralTableCell_stories,
-    TableCell: TableCell,
-    TableUserCell: TableUserCell,
-    EmptyCell: EmptyCell$1,
-    StatusCell: StatusCell,
-    DateCell: DateCell,
-    RewardsCell: RewardsCell
+  __proto__: null,
+  'default': ReferralTableCell_stories,
+  TableCell: TableCell,
+  TableUserCell: TableUserCell,
+  EmptyCell: EmptyCell$1,
+  StatusCell: StatusCell,
+  DateCell: DateCell,
+  RewardsCell: RewardsCell
 });
 
 const UserName_stories = {
@@ -24455,10 +24599,10 @@ const Username = () => {
 };
 
 const UserName = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': UserName_stories,
-    DemoData: DemoData,
-    Username: Username
+  __proto__: null,
+  'default': UserName_stories,
+  DemoData: DemoData,
+  Username: Username
 });
 
 const PasswordField_stories = {
@@ -24502,11 +24646,11 @@ const ValidationError = () => {
 };
 
 const PasswordField = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': PasswordField_stories,
-    Start: Start,
-    EmptyError: EmptyError,
-    ValidationError: ValidationError
+  __proto__: null,
+  'default': PasswordField_stories,
+  Start: Start,
+  EmptyError: EmptyError,
+  ValidationError: ValidationError
 });
 
 /**
@@ -25646,21 +25790,21 @@ const ProgressBarStepsRepeatableFinite = () => {
 };
 
 const TaskCard$2 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': TaskCard_stories,
-    TaskCard: TaskCard$1,
-    TaskCardNotRepeatable: TaskCardNotRepeatable,
-    TaskCardRepeatable: TaskCardRepeatable,
-    TaskCardRepeatableFinite: TaskCardRepeatableFinite,
-    TaskCardEndDate: TaskCardEndDate,
-    TaskCardLoading: TaskCardLoading,
-    TaskCardNotStarted: TaskCardNotStarted,
-    TaskCardEnded: TaskCardEnded,
-    ProgressBar: ProgressBar$1,
-    ProgressBarSteps: ProgressBarSteps,
-    ProgressBarRepeatable: ProgressBarRepeatable,
-    ProgressBarStepsRepeatable: ProgressBarStepsRepeatable,
-    ProgressBarStepsRepeatableFinite: ProgressBarStepsRepeatableFinite
+  __proto__: null,
+  'default': TaskCard_stories,
+  TaskCard: TaskCard$1,
+  TaskCardNotRepeatable: TaskCardNotRepeatable,
+  TaskCardRepeatable: TaskCardRepeatable,
+  TaskCardRepeatableFinite: TaskCardRepeatableFinite,
+  TaskCardEndDate: TaskCardEndDate,
+  TaskCardLoading: TaskCardLoading,
+  TaskCardNotStarted: TaskCardNotStarted,
+  TaskCardEnded: TaskCardEnded,
+  ProgressBar: ProgressBar$1,
+  ProgressBarSteps: ProgressBarSteps,
+  ProgressBarRepeatable: ProgressBarRepeatable,
+  ProgressBarStepsRepeatable: ProgressBarStepsRepeatable,
+  ProgressBarStepsRepeatableFinite: ProgressBarStepsRepeatableFinite
 });
 
 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";
@@ -28730,16 +28874,16 @@ function DefaultTemplateView(props) {
         gridTemplateColumns: "repeat(9, 80px)",
         gridGap: "10px",
       } },
-      h$1("button", { onClick: () => rn.push("/") }, "Dashboard"),
-      props.leadSubmit && (h$1("button", { onClick: () => rn.push("/refer") }, "Submit a Referral")),
-      h$1("button", { onClick: () => rn.push("/activity") }, "Activity"),
-      h$1("button", { onClick: () => rn.push("/editProfile") }, "Edit Profile"),
-      h$1("button", { onClick: () => rn.push("/login") }, "Login"),
-      h$1("button", { onClick: () => rn.push("/register") }, "Register"),
-      h$1("button", { onClick: () => rn.push("/emailVerification") }, "Email Verification"),
-      h$1("button", { onClick: () => rn.push("/verifyEmail") }, "Verify Email"),
-      h$1("button", { onClick: () => rn.push("/forgotPassword") }, "Forgot Password"),
-      h$1("button", { onClick: () => rn.push("/resetPassword") }, "Reset Password")),
+      h$1("button", { onClick: () => mn.push("/") }, "Dashboard"),
+      props.leadSubmit && (h$1("button", { onClick: () => mn.push("/refer") }, "Submit a Referral")),
+      h$1("button", { onClick: () => mn.push("/activity") }, "Activity"),
+      h$1("button", { onClick: () => mn.push("/editProfile") }, "Edit Profile"),
+      h$1("button", { onClick: () => mn.push("/login") }, "Login"),
+      h$1("button", { onClick: () => mn.push("/register") }, "Register"),
+      h$1("button", { onClick: () => mn.push("/emailVerification") }, "Email Verification"),
+      h$1("button", { onClick: () => mn.push("/verifyEmail") }, "Verify Email"),
+      h$1("button", { onClick: () => mn.push("/forgotPassword") }, "Forgot Password"),
+      h$1("button", { onClick: () => mn.push("/resetPassword") }, "Reset Password")),
     h$1("br", null),
     h$1("div", { innerHTML: states.previewTemplate })));
 }
@@ -28812,24 +28956,24 @@ const VerifyEmail = createHookStory(() => {
 });
 
 const PortalTemplates = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': PortalTemplates_stories,
-    DefaultPortal: DefaultPortal,
-    MultiProgramPortal: MultiProgramPortal,
-    LeadSubmitPortal: LeadSubmitPortal,
-    Login: Login,
-    ForgotPassword: ForgotPassword,
-    Register: Register,
-    Dashboard: Dashboard$1,
-    LeadSubmitIframe: LeadSubmitIframe,
-    Activity: Activity$1,
-    EditProfile: EditProfile$3,
-    ResetPassword: ResetPassword,
-    EmailVerification: EmailVerification,
-    EmailVerified: EmailVerified,
-    Widget: Widget,
-    ResetPasswordEmail: ResetPasswordEmail,
-    VerifyEmail: VerifyEmail
+  __proto__: null,
+  'default': PortalTemplates_stories,
+  DefaultPortal: DefaultPortal,
+  MultiProgramPortal: MultiProgramPortal,
+  LeadSubmitPortal: LeadSubmitPortal,
+  Login: Login,
+  ForgotPassword: ForgotPassword,
+  Register: Register,
+  Dashboard: Dashboard$1,
+  LeadSubmitIframe: LeadSubmitIframe,
+  Activity: Activity$1,
+  EditProfile: EditProfile$3,
+  ResetPassword: ResetPassword,
+  EmailVerification: EmailVerification,
+  EmailVerified: EmailVerified,
+  Widget: Widget,
+  ResetPasswordEmail: ResetPasswordEmail,
+  VerifyEmail: VerifyEmail
 });
 
 const ProgramMenu_stories = {
@@ -28870,12 +29014,12 @@ const ProgramMenuWithSwitch = createHookStory(() => {
 });
 
 const ProgramMenu$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': ProgramMenu_stories,
-    OneProgram: OneProgram,
-    TwoProgram: TwoProgram,
-    FiveProgram: FiveProgram,
-    ProgramMenuWithSwitch: ProgramMenuWithSwitch
+  __proto__: null,
+  'default': ProgramMenu_stories,
+  OneProgram: OneProgram,
+  TwoProgram: TwoProgram,
+  FiveProgram: FiveProgram,
+  ProgramMenuWithSwitch: ProgramMenuWithSwitch
 });
 
 const PoweredByImg_stories = {
@@ -28892,11 +29036,11 @@ const CustomWidthAndHeight = () => {
 };
 
 const PoweredByImg = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': PoweredByImg_stories,
-    Default: Default$a,
-    CustomColor: CustomColor,
-    CustomWidthAndHeight: CustomWidthAndHeight
+  __proto__: null,
+  'default': PoweredByImg_stories,
+  Default: Default$a,
+  CustomColor: CustomColor,
+  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";
@@ -28924,13 +29068,13 @@ const FooterWithTermsAndFAQ = () => (h$1(PortalFooterView, Object.assign({}, def
 const FooterNoPoweredBy = () => (h$1(PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", showPoweredBy: false })));
 
 const PortalFooter = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': PortalFooter_stories,
-    DefaultFooter: DefaultFooter,
-    FooterWithTerms: FooterWithTerms,
-    FooterWithFAQ: FooterWithFAQ,
-    FooterWithTermsAndFAQ: FooterWithTermsAndFAQ,
-    FooterNoPoweredBy: FooterNoPoweredBy
+  __proto__: null,
+  'default': PortalFooter_stories,
+  DefaultFooter: DefaultFooter,
+  FooterWithTerms: FooterWithTerms,
+  FooterWithFAQ: FooterWithFAQ,
+  FooterWithTermsAndFAQ: FooterWithTermsAndFAQ,
+  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      |";
@@ -29102,17 +29246,17 @@ const TwoColumnLoginWithImgElement = () => {
 };
 
 const Hero = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': Hero_stories,
-    LoginOneColumn: LoginOneColumn,
-    LoginOneColumnWithColor: LoginOneColumnWithColor,
-    LoginOneColumnWithImage: LoginOneColumnWithImage,
-    TwoColumnLoginLargePadding: TwoColumnLoginLargePadding,
-    TwoColumnLoginMediumPadding: TwoColumnLoginMediumPadding,
-    TwoColumnLoginSmallPadding: TwoColumnLoginSmallPadding,
-    TwoColumnLoginNoPadding: TwoColumnLoginNoPadding,
-    TwoColumnLoginReverseWrap: TwoColumnLoginReverseWrap,
-    TwoColumnLoginWithImgElement: TwoColumnLoginWithImgElement
+  __proto__: null,
+  'default': Hero_stories,
+  LoginOneColumn: LoginOneColumn,
+  LoginOneColumnWithColor: LoginOneColumnWithColor,
+  LoginOneColumnWithImage: LoginOneColumnWithImage,
+  TwoColumnLoginLargePadding: TwoColumnLoginLargePadding,
+  TwoColumnLoginMediumPadding: TwoColumnLoginMediumPadding,
+  TwoColumnLoginSmallPadding: TwoColumnLoginSmallPadding,
+  TwoColumnLoginNoPadding: TwoColumnLoginNoPadding,
+  TwoColumnLoginReverseWrap: TwoColumnLoginReverseWrap,
+  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     |              |";
@@ -29145,10 +29289,10 @@ const ReferralIframeError = () => {
 };
 
 const ReferralIframe$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': ReferralIframe_stories,
-    ReferralIframe: ReferralIframe,
-    ReferralIframeError: ReferralIframeError
+  __proto__: null,
+  'default': ReferralIframe_stories,
+  ReferralIframe: ReferralIframe,
+  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";
@@ -29188,13 +29332,13 @@ const NameFieldsWithErrors = () => {
 };
 
 const NameFields$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': NameFields_stories,
-    NameFields: NameFields,
-    NameFieldsWithErrors: NameFieldsWithErrors
+  __proto__: null,
+  'default': NameFields_stories,
+  NameFields: NameFields,
+  NameFieldsWithErrors: NameFieldsWithErrors
 });
 
-const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, error = false, loading = false) => ({
+const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, error = false, loading = false, fueltank = null) => ({
   states: {
     content: {
       text: {
@@ -29207,15 +29351,18 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
     loading: loading,
     selectedItem: selectedItem,
     selectedStep: selectedStep,
+    open: false,
   },
   data: {
     exchangeList: data,
+    fuelTankCode: fueltank,
   },
   callbacks: {
     exchangeReward: null,
     resetState: null,
     setStage: null,
     setExchangeState: null,
+    copyFuelTankCode: null,
     refs: null,
   },
   refs: null,
@@ -29264,12 +29411,12 @@ const name = (props) => ({
 const fixedValue = (props) => ({
   prettySourceValue: props,
 });
-const variableValue = (min, max, text) => ({
+const variableValue = (min, max, unit) => ({
   ruleType: "VARIABLE_CREDIT_REWARD",
   sourceMinValue: min,
-  prettySourceMinValue: min + " " + text,
+  prettySourceMinValue: min + " " + unit,
   sourceMaxValue: max,
-  prettySourceMaxValue: max + " " + text,
+  prettySourceMaxValue: max + " " + unit,
 });
 const data = [
   {
@@ -29283,7 +29430,7 @@ const data = [
     ...selected,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
+    ...variableValue(20, 80, "Points"),
   },
   {
     ...baseReward$2,
@@ -29301,7 +29448,7 @@ const data = [
     ...baseReward$2,
     ...name("Variable amount of store credit"),
     ...imageUrl("https://i.imgur.com/Jn2fE0s.png"),
-    ...variableValue(20, 100, "SaaSquatch Points"),
+    ...variableValue(20, 100, "Points"),
   },
   {
     ...baseReward$2,
@@ -29313,9 +29460,9 @@ const data = [
   {
     ...baseReward$2,
     ...usTax,
-    ...name("$1000 Store credit"),
+    ...name("$1000 Store credit with a really super long name in the front page"),
     ...imageUrl("https://i.imgur.com/y9HSls1.png"),
-    ...fixedValue("2000 SaaSquatch Points"),
+    ...fixedValue("2000 SaaSquatch Long Points"),
   },
   {
     ...baseReward$2,
@@ -29334,7 +29481,7 @@ const rewardExchangeSelected = {
     ...selected,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
+    ...variableValue(20, 80, "Points"),
   }),
 };
 const baseStep = (dst, dstUnit, src, srcUnit, available = true) => ({
@@ -29351,13 +29498,13 @@ const chooseAmountVariable = {
     ...baseReward$2,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
+    ...variableValue(20, 80, "Points"),
     steps: [
-      baseStep(20, "$", 40, "SaaSquatch Points"),
-      baseStep(30, "$", 60, "SaaSquatch Points"),
-      baseStep(40, "$", 80, "SaaSquatch Points"),
-      baseStep(50, "$", 100, "SaaSquatch Points"),
-      baseStep(60, "$", 120, "SaaSquatch Points"),
+      baseStep(20, "$", 40, "Points"),
+      baseStep(30, "$", 60, "Points"),
+      baseStep(40, "$", 80, "Points"),
+      baseStep(50, "$", 100, "Points"),
+      baseStep(60, "$", 120, "Points"),
     ],
   }),
 };
@@ -29382,16 +29529,16 @@ const confirmVariable = {
     ...baseReward$2,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
-  }, baseStep(20, "$", 40, "SaaSquatch Points")),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points")),
 };
 const error$1 = {
   ...baseResponse(data, "confirmation", {
     ...baseReward$2,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
-  }, baseStep(20, "$", 40, "SaaSquatch Points"), true),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points"), true),
 };
 const success = {
   ...baseResponse(data, "success", {
@@ -29401,6 +29548,22 @@ const success = {
     ...fixedValue("30 SaaSquatch Points"),
   }),
 };
+const success2 = {
+  ...baseResponse(data, "success", {
+    ...baseReward$2,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points")),
+};
+const success3 = {
+  ...baseResponse(data, "success", {
+    ...baseReward$2,
+    ...name("A very exclusive gift box"),
+    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
+    ...fixedValue("30 SaaSquatch Points"),
+  }, undefined, undefined, undefined, "4ah2-hh46-gk7r"),
+};
 const loading = {
   ...baseResponse(null, "chooseReward", null, null, false, true),
 };
@@ -29409,8 +29572,8 @@ const RewardExchangeList_stories = {
   title: "Components/Reward Exchange List",
 };
 const StoryBase = (props) => () => {
-  return h$1(Resizer, null,
-    h$1(RewardExchangeView, Object.assign({}, props)));
+  return (h$1(Resizer, null,
+    h$1(RewardExchangeView, Object.assign({}, props))));
 };
 const ChooseReward = StoryBase(rewardExchange);
 const ChooseRewardSelected = StoryBase(rewardExchangeSelected);
@@ -29420,38 +29583,79 @@ const Confirm = StoryBase(confirmFixed);
 const ConfirmVariable = StoryBase(confirmVariable);
 const Error$3 = StoryBase(error$1);
 const Success$2 = StoryBase(success);
+const SuccessVariable = StoryBase(success2);
+const SuccessPromo = StoryBase(success3);
 const Loading$3 = StoryBase(loading);
 
 const RewardExchangeList = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': RewardExchangeList_stories,
-    ChooseReward: ChooseReward,
-    ChooseRewardSelected: ChooseRewardSelected,
-    ChooseAmount: ChooseAmount,
-    ChooseAmountVariable: ChooseAmountVariable,
-    Confirm: Confirm,
-    ConfirmVariable: ConfirmVariable,
-    Error: Error$3,
-    Success: Success$2,
-    Loading: Loading$3
+  __proto__: null,
+  'default': RewardExchangeList_stories,
+  ChooseReward: ChooseReward,
+  ChooseRewardSelected: ChooseRewardSelected,
+  ChooseAmount: ChooseAmount,
+  ChooseAmountVariable: ChooseAmountVariable,
+  Confirm: Confirm,
+  ConfirmVariable: ConfirmVariable,
+  Error: Error$3,
+  Success: Success$2,
+  SuccessVariable: SuccessVariable,
+  SuccessPromo: SuccessPromo,
+  Loading: Loading$3
 });
 
 const ProgramExplainer_stories = {
   title: "Components/Program Explainer",
 };
-const DefaultProgramExplainerView = () => {
-  return ("asd"
-  // <ProgramExplainerView {...barProps}>
-  //   <ProgramExplainerStepView {...item1Props} />
-  //   <ProgramExplainerStepView {...item2Props} />
-  // </ProgramExplainerView>
-  );
+const props$2 = {
+  header: "Klip Rewards",
+  cardTitle: "Earn rewards with our loyalty program",
+  description: "Earn points by completing tasks like uploading your first video or sharing videos with friends. Use your points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America.",
+  color: "black",
+  background: "#F3F0EC",
+};
+const steps1 = {
+  cardTitle: "Invite your friends to Klip",
+  description: "Earn up to $1200 in rewards for each referral",
+  color: "white",
+  background: "#5B3EDA",
+  icon: "person-plus-fill",
+};
+const steps2 = {
+  cardTitle: "If your friend signs up for a Klip Business plan",
+  description: "Get a $50 VISA giftcard when they pay for their first month",
+  color: "black",
+  background: "#F3CC66",
+  icon: "server",
+};
+const steps3 = {
+  cardTitle: "If your friend signs up for a Klip Enterprise plan",
+  description: "Get up to $1200 in rewards - a $200 VISA giftcard when our sales team qualifies them as a good fit for Klip, and a $1000 VISA giftcard when they become a paying customer",
+  color: "black",
+  background: "#D3CCF5",
+  icon: "people-fill",
+};
+const OneStep = () => {
+  return (h$1(ProgramExplainerView, Object.assign({}, props$2),
+    h$1(ProgramExplainerStepView, Object.assign({}, steps1))));
+};
+const TwoSteps = () => {
+  return (h$1(ProgramExplainerView, Object.assign({}, props$2),
+    h$1(ProgramExplainerStepView, Object.assign({}, steps1)),
+    h$1(ProgramExplainerStepView, Object.assign({}, steps2))));
+};
+const ThreeSteps = () => {
+  return (h$1(ProgramExplainerView, Object.assign({}, props$2),
+    h$1(ProgramExplainerStepView, Object.assign({}, steps1)),
+    h$1(ProgramExplainerStepView, Object.assign({}, steps2)),
+    h$1(ProgramExplainerStepView, Object.assign({}, steps3))));
 };
 
 const ProgramExplainer = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': ProgramExplainer_stories,
-    DefaultProgramExplainerView: DefaultProgramExplainerView
+  __proto__: null,
+  'default': ProgramExplainer_stories,
+  OneStep: OneStep,
+  TwoSteps: TwoSteps,
+  ThreeSteps: ThreeSteps
 });
 
 const ProgramExplainerStep_stories = {
@@ -29459,10 +29663,11 @@ const ProgramExplainerStep_stories = {
 };
 const Example1 = () => {
   const props = {
-    title: "Invite your friends to Klip",
+    cardTitle: "Invite your friends to Klip",
     description: "Earn up to $1200 in rewards for each referral",
     color: "white",
-    background: "#5B3EDA"
+    background: "#5B3EDA",
+    icon: "person-plus-fill",
   };
   return h$1(ProgramExplainerStepView, Object.assign({}, props));
 };
@@ -29475,27 +29680,28 @@ const Example1 = () => {
 // };
 
 const ProgramExplainerStep = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': ProgramExplainerStep_stories,
-    Example1: Example1
+  __proto__: null,
+  'default': ProgramExplainerStep_stories,
+  Example1: Example1
 });
 
 const SqmBrand_stories = {
   title: "Components/Brand",
 };
 const SampleComponents = () => (h$1("div", { style: { padding: "10px", border: "5px solid #EEE" } },
-  h$1("sl-button", { type: "default" }, "Default"),
-  h$1("sl-button", { type: "primary" }, "Primary"),
-  h$1("sl-button", { type: "success" }, "Success"),
-  h$1("sl-button", { type: "neutral" }, "Neutral"),
-  h$1("sl-button", { type: "warning" }, "Warning"),
-  h$1("sl-button", { type: "danger" }, "Danger"),
-  h$1("br", null),
-  h$1("sl-badge", { type: "primary" }, "Primary"),
-  h$1("sl-badge", { type: "success" }, "Success"),
-  h$1("sl-badge", { type: "neutral" }, "Neutral"),
-  h$1("sl-badge", { type: "warning" }, "Warning"),
-  h$1("sl-badge", { type: "danger" }, "Danger"),
+  h$1("div", { style: { display: "flex", gap: "5px", padding: "5px" } },
+    h$1("sl-button", { type: "default" }, "Default"),
+    h$1("sl-button", { type: "primary" }, "Primary"),
+    h$1("sl-button", { type: "success" }, "Success"),
+    h$1("sl-button", { type: "neutral" }, "Neutral"),
+    h$1("sl-button", { type: "warning" }, "Warning"),
+    h$1("sl-button", { type: "danger" }, "Danger")),
+  h$1("div", { style: { display: "flex", gap: "5px", padding: "5px" } },
+    h$1("sl-badge", { type: "primary" }, "Primary"),
+    h$1("sl-badge", { type: "success" }, "Success"),
+    h$1("sl-badge", { type: "neutral" }, "Neutral"),
+    h$1("sl-badge", { type: "warning" }, "Warning"),
+    h$1("sl-badge", { type: "danger" }, "Danger")),
   h$1("div", { class: "color-palette" },
     h$1("div", { class: "color-palette__name" },
       "Primary",
@@ -29547,19 +29753,37 @@ const Nested = () => {
 function ColorSwatch({ depth }) {
   return (h$1("div", { style: {
       backgroundColor: `var(--sl-color-primary-${depth})`,
+      color: `var(--sl-color-neutral-${1000 - depth})`,
       width: "50px",
       height: "50px",
       display: "flex",
       justifyContent: "center",
-      alignItems: "center"
+      alignItems: "center",
     } }, depth));
-}
+}
+const Fonts = () => {
+  return (h$1("div", null,
+    h$1(SampleComponents, null),
+    h$1("sqm-brand", { "brand-font": "Roboto" },
+      "Roboto",
+      h$1(SampleComponents, null)),
+    h$1("sqm-brand", { "brand-font": "Open Sans" },
+      "Open Sans",
+      h$1(SampleComponents, null)),
+    h$1("sqm-brand", { "brand-font": "Lato" },
+      "Lato",
+      h$1(SampleComponents, null)),
+    h$1("sqm-brand", { "brand-font": "Oswald" },
+      "Oswald",
+      h$1(SampleComponents, null))));
+};
 
 const BrandStories = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': SqmBrand_stories,
-    Examples: Examples,
-    Nested: Nested
+  __proto__: null,
+  'default': SqmBrand_stories,
+  Examples: Examples,
+  Nested: Nested,
+  Fonts: Fonts
 });
 
 /**
@@ -29615,13 +29839,13 @@ const Klip = `
 `;
 
 const Themes = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Default: Default$b,
-    Orangey: Orangey,
-    Netflix: Netflix,
-    SaaSquatchCorporate: SaaSquatchCorporate,
-    NYTimes: NYTimes,
-    Klip: Klip
+  __proto__: null,
+  Default: Default$b,
+  Orangey: Orangey,
+  Netflix: Netflix,
+  SaaSquatchCorporate: SaaSquatchCorporate,
+  NYTimes: NYTimes,
+  Klip: Klip
 });
 
 function deepFreeze(obj) {
@@ -32481,8 +32705,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}`