@saasquatch/mint-components 1.6.2-0 → 1.6.2-11

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -3,33 +3,32 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./global-6e1584a6.js');
-require('./use-callback-e754042f.js');
-const index_module = require('./index.module-d169a23f.js');
-require('./extends-08099afd.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+require('./global-b645d18a.js');
+require('./use-callback-5d15897d.js');
+const index_module = require('./index.module-93c78ac7.js');
 require('./cjs-1066ec21.js');
 require('./mixins-fe9d4112.js');
-const JSS = require('./JSS-97fd087e.js');
-const GenericTableView = require('./GenericTableView-4921be4b.js');
-require('./useChildElements-36106d83.js');
-const luxon = require('./luxon-59ca7d19.js');
+const JSS = require('./JSS-8503a151.js');
+const GenericTableView = require('./GenericTableView-9271483b.js');
+require('./useChildElements-c0cc8f5d.js');
+const luxon = require('./luxon-479fc825.js');
 require('./utils-6847bc06.js');
-require('./sqm-text-span-view-2c7d94b5.js');
-const sqmAssetCardView = require('./sqm-asset-card-view-3da8cac1.js');
-const sqmHeroView = require('./sqm-hero-view-46223e34.js');
+require('./sqm-text-span-view-b318af73.js');
+const sqmAssetCardView = require('./sqm-asset-card-view-59c39ed2.js');
+const sqmHeroView = require('./sqm-hero-view-ba78dcaf.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-5a3d4a88.js');
-const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-969adcdc.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-7ff14840.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-6b4ef802.js');
-const sqmPortalFooterView = require('./sqm-portal-footer-view-204583ac.js');
-const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-fed1f563.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-840db620.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-444c8e2c.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-f8dc0b79.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-cc59877c.js');
-const ShadowViewAddon = require('./ShadowViewAddon-7b7dd5e3.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-854a3e9c.js');
+const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-2ffde416.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-2eda59bf.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-b280d0b0.js');
+const sqmPortalFooterView = require('./sqm-portal-footer-view-5d6451ad.js');
+const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-ccaf2bd4.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-2ddcaa12.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-e615e2b2.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-4d23de69.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-96adafc0.js');
+const ShadowViewAddon = require('./ShadowViewAddon-090eff1a.js');
+const sqmPortalSectionView = require('./sqm-portal-section-view-1e5bbcb1.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -2358,36 +2357,36 @@ const routes = `
 `;
 const TemplateNavigation = createHookStory(() => {
   return (index.h("div", null,
-    index.h("button", { onClick: () => index_module.Ft.push("/") }, "/"),
-    index.h("button", { onClick: () => index_module.Ft.push("/foo") }, "/foo"),
-    index.h("button", { onClick: () => index_module.Ft.push("/bar") }, "/bar"),
-    index.h("button", { onClick: () => index_module.Ft.push("/baz/bang") }, "/baz/bang"),
-    index.h("button", { onClick: () => index_module.Ft.push("/refer") }, "/refer"),
-    index.h("button", { onClick: () => index_module.Ft.push("/refer/1") }, "/refer/1"),
-    index.h("button", { onClick: () => index_module.Ft.push("/refer/2") }, "/refer/2"),
-    index.h("button", { onClick: () => index_module.Ft.back() }, "Back"),
-    index.h("button", { onClick: () => index_module.Ft.forward() }, "Forward"),
+    index.h("button", { onClick: () => index_module.fn.push("/") }, "/"),
+    index.h("button", { onClick: () => index_module.fn.push("/foo") }, "/foo"),
+    index.h("button", { onClick: () => index_module.fn.push("/bar") }, "/bar"),
+    index.h("button", { onClick: () => index_module.fn.push("/baz/bang") }, "/baz/bang"),
+    index.h("button", { onClick: () => index_module.fn.push("/refer") }, "/refer"),
+    index.h("button", { onClick: () => index_module.fn.push("/refer/1") }, "/refer/1"),
+    index.h("button", { onClick: () => index_module.fn.push("/refer/2") }, "/refer/2"),
+    index.h("button", { onClick: () => index_module.fn.back() }, "Back"),
+    index.h("button", { onClick: () => index_module.fn.forward() }, "Forward"),
     index.h("hr", null),
     index.h("sqm-router", { innerHTML: templates })));
 });
 const RouteNavigation = createHookStory(() => {
   return (index.h("div", null,
-    index.h("button", { onClick: () => index_module.Ft.push("/") }, "/"),
-    index.h("button", { onClick: () => index_module.Ft.push("/foo") }, "/foo"),
-    index.h("button", { onClick: () => index_module.Ft.push("/bar") }, "/bar"),
-    index.h("button", { onClick: () => index_module.Ft.push("/baz/bang") }, "/baz/bang"),
-    index.h("button", { onClick: () => index_module.Ft.push("/refer") }, "/refer"),
-    index.h("button", { onClick: () => index_module.Ft.push("/refer/1") }, "/refer/1"),
-    index.h("button", { onClick: () => index_module.Ft.push("/refer/2") }, "/refer/2"),
-    index.h("button", { onClick: () => index_module.Ft.back() }, "Back"),
-    index.h("button", { onClick: () => index_module.Ft.forward() }, "Forward"),
+    index.h("button", { onClick: () => index_module.fn.push("/") }, "/"),
+    index.h("button", { onClick: () => index_module.fn.push("/foo") }, "/foo"),
+    index.h("button", { onClick: () => index_module.fn.push("/bar") }, "/bar"),
+    index.h("button", { onClick: () => index_module.fn.push("/baz/bang") }, "/baz/bang"),
+    index.h("button", { onClick: () => index_module.fn.push("/refer") }, "/refer"),
+    index.h("button", { onClick: () => index_module.fn.push("/refer/1") }, "/refer/1"),
+    index.h("button", { onClick: () => index_module.fn.push("/refer/2") }, "/refer/2"),
+    index.h("button", { onClick: () => index_module.fn.back() }, "Back"),
+    index.h("button", { onClick: () => index_module.fn.forward() }, "Forward"),
     index.h("hr", null),
     index.h("sqm-router", { innerHTML: routes })));
 });
 const Styling = createHookStory(() => {
   return (index.h("div", null,
-    index.h("button", { onClick: () => index_module.Ft.push("/") }, "/"),
-    index.h("button", { onClick: () => index_module.Ft.push("/foo") }, "/foo"),
+    index.h("button", { onClick: () => index_module.fn.push("/") }, "/"),
+    index.h("button", { onClick: () => index_module.fn.push("/foo") }, "/foo"),
     index.h("hr", null),
     index.h("div", { style: { display: "flex", justifyContent: "space-around" } },
       index.h("sqm-router", { innerHTML: `<template path="/">
@@ -2401,7 +2400,7 @@ function useTemplate(templateString) {
   const [previewTemplate, setPreviewTemplate] = stencilHooks_module.useState(templateString);
   function setPath(e) {
     //@ts-ignore
-    index_module.Ft.push(e.target.value);
+    index_module.fn.push(e.target.value);
   }
   return {
     states: { previewTemplate, editedTemplate },
@@ -2565,8 +2564,8 @@ const FullStackFrame = () => {
       "Current path:",
       " ",
       index.h("code", null,
-        index.h("strong", null, (_a = index_module.Rt()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    index.h("button", { onClick: index_module.Ft.back }, "Go Back")));
+        index.h("strong", null, (_a = index_module.cn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    index.h("button", { onClick: index_module.fn.back }, "Go Back")));
 };
 const FullStackFrameLoggedOut = () => {
   var _a;
@@ -2590,8 +2589,8 @@ const FullStackFrameLoggedOut = () => {
       "Current path:",
       " ",
       index.h("code", null,
-        index.h("strong", null, (_a = index_module.Rt()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    index.h("button", { onClick: index_module.Ft.back }, "Go Back")));
+        index.h("strong", null, (_a = index_module.cn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    index.h("button", { onClick: index_module.fn.back }, "Go Back")));
 };
 
 const PortalFrame = /*#__PURE__*/Object.freeze({
@@ -2685,14 +2684,14 @@ function setupGraphQL$1() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ne({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ne(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
 }
@@ -2747,14 +2746,14 @@ function setupGraphQL$2() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ne({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ne(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
 }
@@ -2809,14 +2808,14 @@ function setupGraphQL$3() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ne({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6Im55bmVsbGllIiwiaWQiOiJueW5lbGxpZSJ9fQ.3KV974VPLgk4tD8LQfJTi4IPkKCmnaB8w48HzVJYDuI",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ne(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
 }
@@ -2950,14 +2949,14 @@ function setupGraphQL$4() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ne({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJpZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJmaXJzdE5hbWUiOiJ0ZXN0IiwibGFzdE5hbWUiOiJ0ZXN0In19.ziDWbdCwsTo1ijxl8d2__Ga-6iFOVShaJUPp2ZBMeO0",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ne(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
 }
@@ -2997,14 +2996,14 @@ function setupGraphQL$5() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ne({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ne(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
 }
@@ -3020,14 +3019,14 @@ function setupOtherGraphQL() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ne({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: JWT,
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ne(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3261,14 +3260,14 @@ function setupGraphQL$6() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ne({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ne(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3277,7 +3276,7 @@ function useExchangeButton() {
   const { id, accountId } = setupGraphQL$6();
   const [points, setPoints] = stencilHooks_module.useState(10);
   const [rate, setRate] = stencilHooks_module.useState(100);
-  const [exchange, { data, errors }] = index_module.lt(EXCHANGE);
+  const [exchange, { data, errors }] = index_module.ze(EXCHANGE);
   return {
     states: {
       points,
@@ -3392,14 +3391,14 @@ function setupGraphQL$7() {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ne({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ne(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3413,14 +3412,14 @@ function setupGraphQLKlip({ token, id }) {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ne({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: token,
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ne(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3434,7 +3433,7 @@ const RewardTableDemoHook = createHookStory(() => {
 });
 const RewardsTableWithProgram = createHookStory(() => {
   setupGraphQL$7();
-  index_module.R("sam-partner-test-2");
+  index_module.setProgramId("sam-partner-test-2");
   return (index.h("sqm-rewards-table", null,
     index.h("sqm-rewards-table-reward-column", null),
     index.h("sqm-rewards-table-status-column", null),
@@ -3443,7 +3442,7 @@ const RewardsTableWithProgram = createHookStory(() => {
 });
 const RewardsTableNoProgram = createHookStory(() => {
   setupGraphQL$7();
-  index_module.R(undefined);
+  index_module.setProgramId(undefined);
   return (index.h("sqm-rewards-table", null,
     index.h("sqm-rewards-table-reward-column", null),
     index.h("sqm-rewards-table-status-column", null),
@@ -3455,7 +3454,7 @@ const RewardsTableEn = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWVuZ2xpc2giLCJpZCI6InNhbWVuZ2xpc2gifX0._6OTVF3gcipu_ibgthUNr5UHwC-2E_lhCENI5HpYvcw",
     id: "samenglish",
   });
-  index_module.R(undefined);
+  index_module.setProgramId(undefined);
   return (index.h("sqm-rewards-table", { "per-page": "4" },
     index.h("sqm-rewards-table-reward-column", null),
     index.h("sqm-rewards-table-status-column", null),
@@ -3467,7 +3466,7 @@ const RewardsTableTr = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbXR1cmtleSIsImlkIjoic2FtdHVya2V5In19.usSMe0RWg8W5FtwcvJayvAlxTw6vMxjTyWXaP8jI8_U",
     id: "samturkey",
   });
-  index_module.R(undefined);
+  index_module.setProgramId(undefined);
   return (index.h("sqm-rewards-table", { "per-page": "4", "more-label": "Daha", "prev-label": "\u00D6ncesi", "empty-state-text": "Hen\u00FCz Referans Yok" },
     index.h("sqm-rewards-table-reward-column", { "column-title": "\u00D6d\u00FCller", "redeemed-text": "{redeemedAmount} kullan\u0131ld\u0131", "available-text": "{availableAmount} mevcut" }),
     index.h("sqm-rewards-table-source-column", { "column-title": "Kullan\u0131c\u0131lar", "anonymous-user": "Anonim Kullan\u0131c\u0131", "deleted-user": "Silinmi\u015F Kullan\u0131c\u0131", "reward-exchange-text": "\u00D6d\u00FClleri Kulann\u0131n", "referral-text": "{rewardSource, select, FRIEND_SIGNUP {Referans} REFERRED {Y\u00F6nlendiren} other {}}", "reward-source-text": "{rewardSource, select, MANUAL {Manuel} AUTOMATED {Otomatik} other {}}" }),
@@ -3479,7 +3478,7 @@ const RewardsTableFr = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWZyZW5jaCIsImlkIjoic2FtZnJlbmNoIn19.cwhasHpfU5MLV4vGbCQcazb6p19iSw5pD2zyrVHgePg",
     id: "samfrench",
   });
-  index_module.R(undefined);
+  index_module.setProgramId(undefined);
   return (index.h("sqm-rewards-table", { "per-page": "4", "more-label": "Plus", "prev-label": "Pr\u00E9c\u00E9dent", "empty-state-text": "Aucune R\u00E9compenses Maintenant" },
     index.h("sqm-rewards-table-reward-column", { "column-title": "R\u00E9compenses", "redeemed-text": "{redeemedAmount} rachet\u00E9e", "available-text": "{availableAmount} disponible" }),
     index.h("sqm-rewards-table-source-column", { "column-title": "Utilisateur", "anonymous-user": "Utilisateur Anonyme", "deleted-user": "Utilisateur Supprim\u00E9", "reward-exchange-text": "\u00C9change de R\u00E9compenses", "referral-text": "{rewardSource, select, FRIEND_SIGNUP {R\u00E9f\u00E9rence \u00E0} REFERRED {R\u00E9f\u00E9renc\u00E9 par} other {}}", "reward-source-text": "{rewardSource, select, MANUAL {Manuel} AUTOMATED {Automatique} other {}}" }),
@@ -3513,14 +3512,14 @@ function setupGraphQL$8() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ne({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: JWT,
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ne(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3858,11 +3857,11 @@ const NewPortal = /*#__PURE__*/Object.freeze({
   Activity: Activity
 });
 
-const referralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Refer a friend and earn up to $1200 in rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      max-width=\"770px\"\n      center\n      display=\"grid\"\n    >\n      <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards</p>\n        </sqm-big-stat>\n      </sqm-stat-container>\n      <sqm-portal-container\n        gap=\"large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Get rewarded when your friend uses our product</h3>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"left\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            They’ll get a $50 credit towards a new account and you’ll get:\n            <sqm-timeline icon=\"circle\">\n              <sqm-timeline-entry\n                reward=\"$50\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases a Business plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$200\"\n                unit=\"visa giftcard\"\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$1000\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases an Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n            </sqm-timeline>\n          </sqm-portal-container>\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"right\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            Choose how you want to share\n            <sub>Your unique referral link:</sub>\n            <sqm-share-link\n              tooltip-text=\"Copied to Clipboard\"\n              tooltip-lifespan=\"1000\"\n            >\n            </sqm-share-link>\n            <sqm-portal-container\n              gap=\"x-small\"\n              direction=\"column\"\n              display=\"grid\"\n              max-width=\"100%\"\n              padding=\"none\"\n            >\n              <sqm-share-button\n                medium=\"email\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share via email\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"linkedin\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share on LinkedIn\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"twitter\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Tweet about us\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\n        </sqm-referral-card>\n      </sqm-portal-container>\n      <sqm-portal-container\n        gap=\"large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          padding=\"none\"\n          text-align=\"center\"\n          label-margin=\"xx-small\"\n        >\n          <h3 slot=\"label\">Referral History</h3>\n        </sqm-titled-section>\n        <sqm-referral-table\n          per-page=\"4\"\n          hidden-columns=\"2\"\n          more-label=\"Next\"\n          prev-label=\"Prev\"\n          show-labels\n          sm-breakpoint=\"599\"\n          md-breakpoint=\"799\"\n        >\n          <sqm-referral-table-user-column\n            column-title=\"User\"\n            anonymous-user=\"Anonymous User\"\n            deleted-user=\"Deleted User\"\n          >\n          </sqm-referral-table-user-column>\n          <sqm-referral-table-status-column\n            column-title=\"Referral status\"\n            converted-status-text=\"Converted\"\n            in-progress-status-text=\"In Progress\"\n          >\n          </sqm-referral-table-status-column>\n          <sqm-referral-table-rewards-column\n            column-title=\"Rewards\"\n            expiring-text=\"Expiring in\"\n            fuel-tank-text=\"Your code is\"\n            pending-for-text=\"{status} for {date}\"\n            reward-received-text=\"Reward received on\"\n            status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n            status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n          >\n          </sqm-referral-table-rewards-column>\n          <sqm-referral-table-date-column\n            column-title=\"Date referred\"\n            date-shown=\"dateReferralStarted\"\n          >\n          </sqm-referral-table-date-column>\n          <sqm-empty\n            slot=\"empty\"\n            empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n            empty-state-header=\"View your referral details\"\n            empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n          ></sqm-empty>\n        </sqm-referral-table>\n      </sqm-portal-container>\n      <sqm-portal-footer\n        support-email=\"support@example.com\"\n        terms-link=\"https://example.com\"\n        faq-link=\"https://example.com\"\n        terms-text=\"Terms And Conditions\"\n        faq-text=\"FAQ\"\n        show-powered-by=\"true\"\n        padding-bottom=\"none\"\n        padding-left=\"none\"\n        padding-right=\"none\"\n        padding-top=\"none\"\n      ></sqm-portal-footer>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
+const referralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Refer a friend and earn up to $1200 in rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      max-width=\"770px\"\n      center\n      display=\"grid\"\n    >\n      <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards</p>\n        </sqm-big-stat>\n      </sqm-stat-container>\n      <sqm-portal-container\n        gap=\"large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Get rewarded when your friend uses our product</h3>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"left\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <p>They’ll get a $50 credit towards a new account and you’ll get:</p>\n            <sqm-timeline icon=\"circle\">\n              <sqm-timeline-entry\n                reward=\"$50\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases a Business plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$200\"\n                unit=\"visa giftcard\"\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$1000\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases an Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n            </sqm-timeline>\n          </sqm-portal-container>\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"right\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <p>>Choose how you want to share</p>\n            <p><sub>Your unique referral link:</sub></p>\n            <sqm-share-link\n              tooltip-text=\"Copied to Clipboard\"\n              tooltip-lifespan=\"1000\"\n            >\n            </sqm-share-link>\n            <sqm-portal-container\n              gap=\"x-small\"\n              direction=\"column\"\n              display=\"grid\"\n              max-width=\"100%\"\n              padding=\"none\"\n            >\n              <sqm-share-button\n                medium=\"email\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share via email\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"linkedin\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share on LinkedIn\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"twitter\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Tweet about us\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\n        </sqm-referral-card>\n      </sqm-portal-container>\n      <sqm-portal-container\n        gap=\"large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          padding=\"none\"\n          text-align=\"center\"\n          label-margin=\"xx-small\"\n        >\n          <h3 slot=\"label\">Referral History</h3>\n        </sqm-titled-section>\n        <sqm-referral-table\n          per-page=\"4\"\n          hidden-columns=\"2\"\n          more-label=\"Next\"\n          prev-label=\"Prev\"\n          sm-breakpoint=\"599\"\n          md-breakpoint=\"799\"\n        >\n          <sqm-referral-table-user-column\n            column-title=\"User\"\n            anonymous-user=\"Anonymous User\"\n            deleted-user=\"Deleted User\"\n          >\n          </sqm-referral-table-user-column>\n          <sqm-referral-table-status-column\n            column-title=\"Referral status\"\n            converted-status-text=\"Converted\"\n            in-progress-status-text=\"In Progress\"\n          >\n          </sqm-referral-table-status-column>\n          <sqm-referral-table-rewards-column\n            column-title=\"Rewards\"\n            expiring-text=\"Expiring in\"\n            fuel-tank-text=\"Your code is\"\n            pending-for-text=\"{status} for {date}\"\n            reward-received-text=\"Reward received on\"\n            status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n            status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n          >\n          </sqm-referral-table-rewards-column>\n          <sqm-referral-table-date-column\n            column-title=\"Date referred\"\n            date-shown=\"dateReferralStarted\"\n          >\n          </sqm-referral-table-date-column>\n          <sqm-empty\n            slot=\"empty\"\n            empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n            empty-state-header=\"View your referral details\"\n            empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n          ></sqm-empty>\n        </sqm-referral-table>\n      </sqm-portal-container>\n      <sqm-portal-footer\n        support-email=\"support@example.com\"\n        terms-link=\"https://example.com\"\n        faq-link=\"https://example.com\"\n        terms-text=\"Terms And Conditions\"\n        faq-text=\"FAQ\"\n        show-powered-by=\"true\"\n        padding-bottom=\"none\"\n        padding-left=\"none\"\n        padding-right=\"none\"\n        padding-top=\"none\"\n      ></sqm-portal-footer>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
 
-const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Refer friends and complete tasks to earn rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n        image-mobile-pos=\"top\"\n        image-percentage=\"50\"\n        padding-image=\"none\"\n        padding-text=\"xxxx-large\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      max-width=\"770px\"\n      center\n      display=\"grid\"\n    >\n      <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards Earned</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n        >\n          <p>Points Balance</p>\n        </sqm-big-stat>\n      </sqm-stat-container>\n      <sqm-portal-container\n        gap=\"xx-large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Share $50 with friends</h3>\n          <p slot=\"content\">\n            They’ll get a $50 credit towards a new account and you’ll get up to\n            $1200\n          </p>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"left\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            They’ll get a $50 credit towards a new account and you’ll get:\n            <sqm-timeline icon=\"circle\">\n              <sqm-timeline-entry\n                reward=\"$50\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases a Business plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$200\"\n                unit=\"visa giftcard\"\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$1000\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases an Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n            </sqm-timeline>\n          </sqm-portal-container>\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"right\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            Choose how you want to share:\n            <sub>Your unique referral link:</sub>\n            <sqm-share-link\n              tooltip-text=\"Copied to Clipboard\"\n              tooltip-lifespan=\"1000\"\n            >\n            </sqm-share-link>\n            <sqm-portal-container\n              gap=\"x-small\"\n              direction=\"column\"\n              display=\"grid\"\n              max-width=\"100%\"\n              padding=\"none\"\n            >\n              <sqm-share-button\n                medium=\"email\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share via email\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"linkedin\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share on LinkedIn\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"twitter\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Tweet about us\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\n        </sqm-referral-card>\n        <sqm-portal-container\n          gap=\"xx-large\"\n          direction=\"column\"\n          display=\"grid\"\n          max-width=\"100%\"\n          min-width=\"\"\n          padding=\"none\"\n        >\n          <sqm-titled-section text-align=\"center\" label-margin=\"xxx-small\">\n            <h3 slot=\"label\">Earn more rewards</h3>\n            <p slot=\"content\">\n              Get points while using our product. Use those points to redeem\n              rewards like one free month of Enterprise or two plane tickets to\n              anywhere in North America\n            </p>\n          </sqm-titled-section>\n          <sqm-card-feed gap=\"24\" width=\"347\">\n            <sqm-task-card\n              reward-amount=\"20\"\n              goal=\"1\"\n              card-title=\"Complete a Survey\"\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\n              button-text=\"Take survey\"\n              reward-unit=\"Points\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"250\"\n              goal=\"500\"\n              show-progress-bar\n              card-title=\"Spend $500\"\n              description=\"Earn 150 points when you spend $500 or more.\"\n              button-text=\"See plans\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              progress-bar-unit=\"$\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              goal=\"1\"\n              reward-amount=\"50\"\n              card-title=\"Follow Us on Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\n              button-text=\"Follow\"\n              button-link=\"https://twitter.com/\"\n              open-new-tab=\"true\"\n              event-key=\"socialFollow\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"1\"\n              reward-unit=\"Free Month\"\n              goal=\"1\"\n              card-title=\"Upgrade Your Plan\"\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n              button-text=\"Upgrade\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              open-new-tab=\"false\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n          </sqm-card-feed>\n        </sqm-portal-container>\n        <sqm-tabs>\n          <sqm-tab header=\"Referral history\">\n            <sqm-referral-table\n              per-page=\"4\"\n              hidden-columns=\"2\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              show-labels=\"\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-referral-table-user-column\n                column-title=\"User\"\n                anonymous-user=\"Anonymous User\"\n                deleted-user=\"Deleted User\"\n              >\n              </sqm-referral-table-user-column>\n              <sqm-referral-table-status-column\n                column-title=\"Referral status\"\n                converted-status-text=\"Converted\"\n                in-progress-status-text=\"In Progress\"\n              >\n              </sqm-referral-table-status-column>\n              <sqm-referral-table-rewards-column\n                column-title=\"Rewards\"\n                expiring-text=\"Expiring in\"\n                fuel-tank-text=\"Your code is\"\n                pending-for-text=\"{status} for {date}\"\n                reward-received-text=\"Reward received on\"\n                status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-referral-table-rewards-column>\n              <sqm-referral-table-date-column\n                column-title=\"Date referred\"\n                date-shown=\"dateReferralStarted\"\n              >\n              </sqm-referral-table-date-column>\n              <sqm-empty\n                slot=\"empty\"\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n                empty-state-header=\"View your referral details\"\n                empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n              >\n              </sqm-empty>\n            </sqm-referral-table>\n          </sqm-tab>\n          <sqm-tab header=\"Reward history\">\n            <sqm-rewards-table\n              per-page=\"4\"\n              program-id=\"\"\n              hidden-columns=\"0\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              show-labels=\"\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-rewards-table-reward-column\n                available-text=\"{availableAmount} remaining\"\n                column-title=\"Reward\"\n                copy-text=\"Copied!\"\n                redeemed-text=\"{redeemedAmount} redeemed\"\n              >\n              </sqm-rewards-table-reward-column>\n              <sqm-rewards-table-source-column\n                anonymous-user=\"Anonymous User\"\n                column-title=\"Source\"\n                deleted-user=\"Deleted User\"\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n                reward-exchange-text=\"Reward Exchange\"\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n              >\n              </sqm-rewards-table-source-column>\n              <sqm-rewards-table-status-column\n                column-title=\"Status\"\n                expiry-text=\"Expires on \"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-rewards-table-status-column>\n              <sqm-rewards-table-date-column\n                column-title=\"Date received\"\n                date-shown=\"dateGiven\"\n              >\n              </sqm-rewards-table-date-column>\n              <sqm-empty\n                slot=\"empty\"\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n                empty-state-header=\"View your rewards\"\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n              >\n              </sqm-empty>\n            </sqm-rewards-table>\n          </sqm-tab>\n        </sqm-tabs>\n      </sqm-portal-container>\n      <sqm-portal-footer\n        support-email=\"support@example.com\"\n        terms-link=\"https://example.com\"\n        faq-link=\"https://example.com\"\n        terms-text=\"Terms And Conditions\"\n        faq-text=\"FAQ\"\n        show-powered-by=\"true\"\n        padding-bottom=\"none\"\n        padding-left=\"none\"\n        padding-right=\"none\"\n        padding-top=\"none\"\n      ></sqm-portal-footer>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
+const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Refer friends and complete tasks to earn rewards\"\n        layout=\"columns\"\n        image-pos=\"right\"\n        background-color=\"#F9F9F9\"\n        image-mobile-pos=\"top\"\n        image-percentage=\"50\"\n        padding-image=\"none\"\n        padding-text=\"xxxx-large\"\n      >\n      </sqm-hero-image>\n    </sqm-portal-container>\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      max-width=\"770px\"\n      center\n      display=\"grid\"\n    >\n      <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/referralsCount\"\n        >\n          <p>Referrals</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\n        >\n          <p>Giftcards Earned</p>\n        </sqm-big-stat>\n        <sqm-big-stat\n          flex-reverse=\"true\"\n          alignment=\"left\"\n          stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n        >\n          <p>Points Balance</p>\n        </sqm-big-stat>\n      </sqm-stat-container>\n      <sqm-portal-container\n        gap=\"xx-large\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">Share $50 with friends</h3>\n          <p slot=\"content\">\n            They’ll get a $50 credit towards a new account and you’ll get up to\n            $1200\n          </p>\n        </sqm-titled-section>\n        <sqm-referral-card vertical-alignment=\"start\">\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"left\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <p>They’ll get a $50 credit towards a new account and you’ll get:</p>\n            <sqm-timeline icon=\"circle\">\n              <sqm-timeline-entry\n                reward=\"$50\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases a Business plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$200\"\n                unit=\"visa giftcard\"\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n              <sqm-timeline-entry\n                reward=\"$1000\"\n                unit=\"visa giftcard\"\n                desc=\"Your friend purchases an Enterprise plan\"\n                icon=\"circle\"\n              >\n              </sqm-timeline-entry>\n            </sqm-timeline>\n          </sqm-portal-container>\n          <sqm-portal-container\n            gap=\"large\"\n            slot=\"right\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n           <p>Choose how you want to share:</p>\n            <p><sub>Your unique referral link:</sub></p>\n            <sqm-share-link\n              tooltip-text=\"Copied to Clipboard\"\n              tooltip-lifespan=\"1000\"\n            >\n            </sqm-share-link>\n            <sqm-portal-container\n              gap=\"x-small\"\n              direction=\"column\"\n              display=\"grid\"\n              max-width=\"100%\"\n              padding=\"none\"\n            >\n              <sqm-share-button\n                medium=\"email\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share via email\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"linkedin\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Share on LinkedIn\n              </sqm-share-button>\n              <sqm-share-button\n                medium=\"twitter\"\n                icon-slot=\"prefix\"\n                size=\"medium\"\n                type=\"default\"\n              >\n                Tweet about us\n              </sqm-share-button>\n            </sqm-portal-container>\n          </sqm-portal-container>\n        </sqm-referral-card>\n        <sqm-portal-container\n          gap=\"xx-large\"\n          direction=\"column\"\n          display=\"grid\"\n          max-width=\"100%\"\n          min-width=\"\"\n          padding=\"none\"\n        >\n          <sqm-titled-section text-align=\"center\" label-margin=\"xxx-small\">\n            <h3 slot=\"label\">Earn more rewards</h3>\n            <p slot=\"content\">\n              Get points while using our product. Use those points to redeem\n              rewards like one free month of Enterprise or two plane tickets to\n              anywhere in North America\n            </p>\n          </sqm-titled-section>\n          <sqm-card-feed gap=\"24\" width=\"347\">\n            <sqm-task-card\n              reward-amount=\"20\"\n              goal=\"1\"\n              card-title=\"Complete a Survey\"\n              description=\"Fill out our NPS survey and get 20 points for giving us honest feedback.\"\n              button-text=\"Take survey\"\n              reward-unit=\"Points\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"250\"\n              goal=\"500\"\n              show-progress-bar\n              card-title=\"Spend $500\"\n              description=\"Earn 250 points when you spend $500 or more.\"\n              button-text=\"See plans\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              progress-bar-unit=\"$\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              goal=\"1\"\n              reward-amount=\"50\"\n              card-title=\"Follow Us on Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\n              button-text=\"Follow\"\n              button-link=\"https://twitter.com/\"\n              open-new-tab=\"true\"\n              event-key=\"socialFollow\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"1\"\n              reward-unit=\"Free Month\"\n              goal=\"1\"\n              card-title=\"Upgrade Your Plan\"\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n              button-text=\"Upgrade\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              open-new-tab=\"false\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n          </sqm-card-feed>\n        </sqm-portal-container>\n        <sqm-tabs>\n          <sqm-tab header=\"Referral history\">\n            <sqm-referral-table\n              per-page=\"4\"\n              hidden-columns=\"2\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-referral-table-user-column\n                column-title=\"User\"\n                anonymous-user=\"Anonymous User\"\n                deleted-user=\"Deleted User\"\n              >\n              </sqm-referral-table-user-column>\n              <sqm-referral-table-status-column\n                column-title=\"Referral status\"\n                converted-status-text=\"Converted\"\n                in-progress-status-text=\"In Progress\"\n              >\n              </sqm-referral-table-status-column>\n              <sqm-referral-table-rewards-column\n                column-title=\"Rewards\"\n                expiring-text=\"Expiring in\"\n                fuel-tank-text=\"Your code is\"\n                pending-for-text=\"{status} for {date}\"\n                reward-received-text=\"Reward received on\"\n                status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-referral-table-rewards-column>\n              <sqm-referral-table-date-column\n                column-title=\"Date referred\"\n                date-shown=\"dateReferralStarted\"\n              >\n              </sqm-referral-table-date-column>\n              <sqm-empty\n                slot=\"empty\"\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\n                empty-state-header=\"View your referral details\"\n                empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\n              >\n              </sqm-empty>\n            </sqm-referral-table>\n          </sqm-tab>\n          <sqm-tab header=\"Reward history\">\n            <sqm-rewards-table\n              per-page=\"4\"\n              program-id=\"\"\n              hidden-columns=\"0\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-rewards-table-reward-column\n                available-text=\"{availableAmount} remaining\"\n                column-title=\"Reward\"\n                copy-text=\"Copied!\"\n                redeemed-text=\"{redeemedAmount} redeemed\"\n              >\n              </sqm-rewards-table-reward-column>\n              <sqm-rewards-table-source-column\n                anonymous-user=\"Anonymous User\"\n                column-title=\"Source\"\n                deleted-user=\"Deleted User\"\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n                reward-exchange-text=\"Reward Exchange\"\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n              >\n              </sqm-rewards-table-source-column>\n              <sqm-rewards-table-status-column\n                column-title=\"Status\"\n                expiry-text=\"Expires on \"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-rewards-table-status-column>\n              <sqm-rewards-table-date-column\n                column-title=\"Date received\"\n                date-shown=\"dateGiven\"\n              >\n              </sqm-rewards-table-date-column>\n              <sqm-empty\n                slot=\"empty\"\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n                empty-state-header=\"View your rewards\"\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n              >\n              </sqm-empty>\n            </sqm-rewards-table>\n          </sqm-tab>\n        </sqm-tabs>\n      </sqm-portal-container>\n      <sqm-portal-footer\n        support-email=\"support@example.com\"\n        terms-link=\"https://example.com\"\n        faq-link=\"https://example.com\"\n        terms-text=\"Terms And Conditions\"\n        faq-text=\"FAQ\"\n        show-powered-by=\"true\"\n        padding-bottom=\"none\"\n        padding-left=\"none\"\n        padding-right=\"none\"\n        padding-top=\"none\"\n      ></sqm-portal-footer>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
 
-const loyaltyWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Complete tasks to earn rewards\"\n        layout=\"overlay\"\n        padding-image=\"xxxx-large\"\n        padding-text=\"xxx-large\"\n        image-pos=\"center\"\n        overlay-color=\"#5e5669\"\n        overlay-opacity=\"0.9\"\n      >\n      </sqm-hero-image>\n      <sqm-portal-container\n        direction=\"column\"\n        padding=\"none\"\n        gap=\"xxx-large\"\n        max-width=\"770px\"\n        center\n        display=\"grid\"\n      >\n        <sqm-program-explainer header=\"How it works\">\n          <sqm-program-explainer-step\n            description=\"Complete tasks like uploading your first video or sharing videos with friends\"\n            header=\"Earn points for using our product\"\n            icon=\"cash-stack\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n          <sqm-program-explainer-step\n            description=\"Redeem rewards like one free month of Enterprise or two plane tickets to anywhere in North America\"\n            header=\"Redeem rewards with your points\"\n            icon=\"people\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n        </sqm-program-explainer>\n        <sqm-portal-container\n          center\n          direction=\"row\"\n          display=\"flex\"\n          justify-content=\"space-between\"\n          gap=\"xxx-large\"\n          max-width=\"100%\"\n          padding=\"none\"\n        >\n          <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardsRedeemed/CREDIT/POINTS\"\n            >\n              <p>Points Redeemed</p>\n            </sqm-big-stat>\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n            >\n              <p>Points Balance</p>\n            </sqm-big-stat>\n          </sqm-stat-container>\n        </sqm-portal-container>\n        <sqm-portal-container\n          direction=\"column\"\n          padding=\"none\"\n          gap=\"xx-large\"\n          display=\"grid\"\n          max-width=\"100%\"\n        >\n          <sqm-titled-section\n            label-margin=\"small\"\n            padding=\"none\"\n            text-align=\"center\"\n          >\n            <h3 slot=\"label\">Earn points</h3>\n          </sqm-titled-section>\n          <sqm-card-feed gap=\"24\" width=\"347\">\n            <sqm-task-card\n              reward-amount=\"20\"\n              goal=\"1\"\n              card-title=\"Complete a Survey\"\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\n              button-text=\"Take survey\"\n              reward-unit=\"Points\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"250\"\n              goal=\"500\"\n              show-progress-bar\n              card-title=\"Spend $500\"\n              description=\"Earn 150 points when you spend $500 or more.\"\n              button-text=\"See plans\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              progress-bar-unit=\"$\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              goal=\"1\"\n              reward-amount=\"50\"\n              card-title=\"Follow Us on Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\n              button-text=\"Follow\"\n              button-link=\"https://twitter.com/\"\n              open-new-tab=\"true\"\n              event-key=\"socialFollow\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"1\"\n              reward-unit=\"Free Month\"\n              goal=\"1\"\n              card-title=\"Upgrade Your Plan\"\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n              button-text=\"Upgrade\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              open-new-tab=\"false\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n          </sqm-card-feed>\n          <sqm-portal-container\n            gap=\"large\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <sqm-titled-section\n              padding=\"none\"\n              text-align=\"center\"\n              label-margin=\"xx-small\"\n            >\n              <h3 slot=\"label\">Reward History</h3>\n            </sqm-titled-section>\n            <sqm-rewards-table\n              per-page=\"4\"\n              hidden-columns=\"0\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              show-labels\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-rewards-table-reward-column\n                available-text=\"{availableAmount} remaining\"\n                column-title=\"Reward\"\n                copy-text=\"Copied!\"\n                redeemed-text=\"{redeemedAmount} redeemed\"\n              >\n              </sqm-rewards-table-reward-column>\n              <sqm-rewards-table-source-column\n                anonymous-user=\"Anonymous User\"\n                column-title=\"Source\"\n                deleted-user=\"Deleted User\"\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n                reward-exchange-text=\"Reward Exchange\"\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n              >\n              </sqm-rewards-table-source-column>\n              <sqm-rewards-table-status-column\n                column-title=\"Status\"\n                expiry-text=\"Expires on \"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-rewards-table-status-column>\n              <sqm-rewards-table-date-column\n                column-title=\"Date received\"\n                date-shown=\"dateGiven\"\n              >\n              </sqm-rewards-table-date-column>\n              <sqm-empty\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n                empty-state-header=\"View your rewards\"\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n              >\n              </sqm-empty>\n            </sqm-rewards-table>\n          </sqm-portal-container>\n        </sqm-portal-container>\n        <sqm-portal-footer\n          support-email=\"support@example.com\"\n          terms-link=\"https://example.com\"\n          faq-link=\"https://example.com\"\n          terms-text=\"Terms And Conditions\"\n          faq-text=\"FAQ\"\n          show-powered-by=\"true\"\n          padding-bottom=\"none\"\n          padding-left=\"none\"\n          padding-right=\"none\"\n          padding-top=\"none\"\n        ></sqm-portal-footer>\n      </sqm-portal-container>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
+const loyaltyWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Complete tasks to earn rewards\"\n        layout=\"overlay\"\n        padding-image=\"xxxx-large\"\n        padding-text=\"xxx-large\"\n        image-pos=\"center\"\n        overlay-color=\"#5e5669\"\n        overlay-opacity=\"0.9\"\n      >\n      </sqm-hero-image>\n      <sqm-portal-container\n        direction=\"column\"\n        padding=\"none\"\n        gap=\"xxx-large\"\n        max-width=\"770px\"\n        center\n        display=\"grid\"\n      >\n        <sqm-program-explainer header=\"How it works\">\n          <sqm-program-explainer-step\n            description=\"Complete tasks like uploading your first video or sharing videos with friends\"\n            header=\"Earn points for using our product\"\n            icon=\"cash-stack\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n          <sqm-program-explainer-step\n            description=\"Redeem rewards like one free month of Enterprise or two plane tickets to anywhere in North America\"\n            header=\"Redeem rewards with your points\"\n            icon=\"people\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n        </sqm-program-explainer>\n        <sqm-portal-container\n          center\n          direction=\"row\"\n          display=\"flex\"\n          justify-content=\"space-between\"\n          gap=\"xxx-large\"\n          max-width=\"100%\"\n          padding=\"none\"\n        >\n          <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardsRedeemed/CREDIT/POINTS\"\n            >\n              <p>Points Redeemed</p>\n            </sqm-big-stat>\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n            >\n              <p>Points Balance</p>\n            </sqm-big-stat>\n          </sqm-stat-container>\n        </sqm-portal-container>\n        <sqm-portal-container\n          direction=\"column\"\n          padding=\"none\"\n          gap=\"xx-large\"\n          display=\"grid\"\n          max-width=\"100%\"\n        >\n          <sqm-titled-section\n            label-margin=\"small\"\n            padding=\"none\"\n            text-align=\"center\"\n          >\n            <h3 slot=\"label\">Earn points</h3>\n          </sqm-titled-section>\n          <sqm-card-feed gap=\"24\" width=\"347\">\n            <sqm-task-card\n              reward-amount=\"20\"\n              goal=\"1\"\n              card-title=\"Complete a Survey\"\n              description=\"Fill out our NPS survey and get 20 points for giving us honest feedback.\"\n              button-text=\"Take survey\"\n              reward-unit=\"Points\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"250\"\n              goal=\"500\"\n              show-progress-bar\n              card-title=\"Spend $500\"\n              description=\"Earn 250 points when you spend $500 or more.\"\n              button-text=\"See plans\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              progress-bar-unit=\"$\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              goal=\"1\"\n              reward-amount=\"50\"\n              card-title=\"Follow Us on Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\n              button-text=\"Follow\"\n              button-link=\"https://twitter.com/\"\n              open-new-tab=\"true\"\n              event-key=\"socialFollow\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"1\"\n              reward-unit=\"Free Month\"\n              goal=\"1\"\n              card-title=\"Upgrade Your Plan\"\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n              button-text=\"Upgrade\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              open-new-tab=\"false\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n          </sqm-card-feed>\n          <sqm-portal-container\n            gap=\"large\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <sqm-titled-section\n              padding=\"none\"\n              text-align=\"center\"\n              label-margin=\"xx-small\"\n            >\n              <h3 slot=\"label\">Reward History</h3>\n            </sqm-titled-section>\n            <sqm-rewards-table\n              per-page=\"4\"\n              hidden-columns=\"0\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-rewards-table-reward-column\n                available-text=\"{availableAmount} remaining\"\n                column-title=\"Reward\"\n                copy-text=\"Copied!\"\n                redeemed-text=\"{redeemedAmount} redeemed\"\n              >\n              </sqm-rewards-table-reward-column>\n              <sqm-rewards-table-source-column\n                anonymous-user=\"Anonymous User\"\n                column-title=\"Source\"\n                deleted-user=\"Deleted User\"\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n                reward-exchange-text=\"Reward Exchange\"\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n              >\n              </sqm-rewards-table-source-column>\n              <sqm-rewards-table-status-column\n                column-title=\"Status\"\n                expiry-text=\"Expires on \"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-rewards-table-status-column>\n              <sqm-rewards-table-date-column\n                column-title=\"Date received\"\n                date-shown=\"dateGiven\"\n              >\n              </sqm-rewards-table-date-column>\n              <sqm-empty\n                slot=\"empty\"\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n                empty-state-header=\"View your rewards\"\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n              >\n              </sqm-empty>\n            </sqm-rewards-table>\n          </sqm-portal-container>\n        </sqm-portal-container>\n        <sqm-portal-footer\n          support-email=\"support@example.com\"\n          terms-link=\"https://example.com\"\n          faq-link=\"https://example.com\"\n          terms-text=\"Terms And Conditions\"\n          faq-text=\"FAQ\"\n          show-powered-by=\"true\"\n          padding-bottom=\"none\"\n          padding-left=\"none\"\n          padding-right=\"none\"\n          padding-top=\"none\"\n        ></sqm-portal-footer>\n      </sqm-portal-container>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
 
 const Widget_stories = {
   title: "Templates / Widgets",
@@ -4551,7 +4550,7 @@ const AssetCard_stories = {
 const Default$7 = () => {
   const props = {
     text: { titleText: "Marketing Banner" },
-    imgUrl: "../../assets/saasquatch-logo.png",
+    imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png",
     callbacks: {},
   };
   return index.h(sqmAssetCardView.AssetCardView, Object.assign({}, props));
@@ -4559,7 +4558,7 @@ const Default$7 = () => {
 const CardWithLongText = () => {
   const props = {
     text: { titleText: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, sunt dolores? Dolore temporibus autem officia blanditiis minus in voluptatem molestiae!" },
-    imgUrl: "../../assets/saasquatch-logo.png",
+    imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png",
     callbacks: {},
   };
   return index.h(sqmAssetCardView.AssetCardView, Object.assign({}, props));
@@ -5324,7 +5323,7 @@ const ReferralTableRewardsCell = /*#__PURE__*/Object.freeze({
   tenRewardsCell: tenRewardsCell
 });
 
-const scenario$c = "@owner:sam\n@author:sam\nFeature: Referral Table\n\n    The Referral table component shows users a list of their referrals. The referral table it's self can be customized\n    with a collection of columns.\n\n    @motivating\n    @ui\n    Scenario: The empty state is shown if there are no referrals\n        Given a user with no referrals\n        When they view the referral table\n        Then no referrals are displayed\n        And they see an image with a user icon\n        And \"View your referral details\" in bold\n        And \"Track the status of your referrals and rewards earned by referring friends\" below the bolded text\n        And the pagination buttons are disabled\n\n    @motivating\n    @ui\n    Scenario: The empty state image and text are customizable\n        Given the referral table has 'sqm-empty' as a child with the following props\n            | prop               | value                                                                                                                           |\n            | empty-state-imgage | https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png |\n            | empty-state-header | View your referral history                                                                                                      |\n            | empty-state-text   | See your previous referrals and what you earned!                                                                                |\n        And a user with no referrals\n        When they view the referral table\n        Then they see no referrals\n        And they see the SaaSquatch logo\n        And \"View your referral history\" in bold\n        And \"See your previous referrals and what you earned!\" below the bolded text\n\n    @minutae\n    @ui\n    Scenario: A custom empty state can be provided\n        Given a user with no referrals\n        And a custom empty state has been supplied in the \"empty\" slot\n        When they view the referral table\n        Then they see the custom empty state\n\n    @motivating\n    @ui\n    Scenario: The loading state is shown while referrals are loading\n        Given the table is loading\n        Then the loading state is shown in the table\n        And a custom loading state can be supplied in the \"loading\" slot\n        And the pagination buttons are disabled\n\n    @motivating\n    @ui\n    Scenario Outline: The table becomes paginated when the number of referrals exceeds the per page limit\n        Given the user has <number of referrals>\n        And the table is configured to show <page limit> referrals per page\n        Then the table will have <number of pages> page(s)\n        And pagination buttons will allow users to navigate between pages\n        And the pagination button to go to the next page is disabled on the last page of referrals\n        And the pagination button to go to the previous page is disabled on the first page of referrals\n        Examples:\n            | number of referrals | page limit | number of pages |\n            | 0                   | 4          | 1               |\n            | 1                   | 4          | 1               |\n            | 3                   | 4          | 1               |\n            | 5                   | 4          | 2               |\n            | 42                  | 4          | 11              |\n\n    @motivating\n    @ui\n    Scenario: The table converts to a card view on tablet and mobile window sizes\n        Given a user with referrals\n        When they view the table\n        And their window size is smaller than \"799px\"\n        Then referrals are displayed as cards\n        And they are in two columns\n        When their window size is smaller than \"599px\"\n        Then the referrals are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario: Table and Mobile beakpoints can be configured\n        Given the referral table has been configured with the following props\n            | prop         | value |\n            | smBreakpoint | 599   |\n            | mdBreakpoint | 799   |\n        And a user with referrals\n        When they view the table\n        And their window size is smaller than \"799px\"\n        Then referrals are displayed as cards\n        And they are in two columns\n        When their window size is smaller than \"599px\"\n        Then the referrals are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario Outline: By default the first column heading is hidden in mobile, but others can be hidden\n        Given a referral table with 4 columns\n        And prop \"hidden-columns\" with <hideColumnValue>\n        And a user with referrals\n        When they view the referral table\n        And their window size is below the tablet breakpoint\n        Then referral cards are displayed\n        And the titles of <columnsArehidden> within the card\n        Examples:\n            | hideColumnValue | columnsArehidden                    |\n            |                 | the first column                    |\n            | 0,1,2           | the first, second and third columns |\n            | 3               | the fourth column                   |\n\n    @motivating\n    Scenario: The use who referred the current user can be shown in the table\n        Given the table is configured with <showReferrer> set to true\n        And the current user was referrered by <referrer>\n        Then the first table row on the first page of the table is for <referrer>\n\n    @motivating\n    Scenario: Only referrals which occured in the program specific by program-id are shown\n        Given the table is configured with \"program-id\"\n        Then only referrals from the program with \"program-id\" are shown\n\n    @motivating\n    Scenario: Classic program shows only classic referrals\n        Given the \"program-id\" of the table is set to \"classic\"\n        Then only classic referrals are shown in the table\n\n    @minutae\n    @ui\n    Scenario: Column heading can be hidden\n        Given the table is configured with \"show-labels\" set to false\n        Then the table is displayed without column headings";
+const scenario$c = "@owner:sam\n@author:sam\nFeature: Referral Table\n\n    The Referral table component shows users a list of their referrals. The referral table it's self can be customized\n    with a collection of columns.\n\n    @motivating\n    @ui\n    Scenario: The empty state is shown if there are no referrals\n        Given a user with no referrals\n        When they view the referral table\n        Then no referrals are displayed\n        And they see an image with a user icon\n        And \"View your referral details\" in bold\n        And \"Track the status of your referrals and rewards earned by referring friends\" below the bolded text\n        And the pagination buttons are disabled\n\n    @motivating\n    @ui\n    Scenario: The empty state image and text are customizable\n        Given the referral table has 'sqm-empty' as a child with the following props\n            | prop               | value                                                                                                                           |\n            | empty-state-imgage | https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png |\n            | empty-state-header | View your referral history                                                                                                      |\n            | empty-state-text   | See your previous referrals and what you earned!                                                                                |\n        And a user with no referrals\n        When they view the referral table\n        Then they see no referrals\n        And they see the SaaSquatch logo\n        And \"View your referral history\" in bold\n        And \"See your previous referrals and what you earned!\" below the bolded text\n\n    @minutae\n    @ui\n    Scenario: A custom empty state can be provided\n        Given a user with no referrals\n        And a custom empty state has been supplied in the \"empty\" slot\n        When they view the referral table\n        Then they see the custom empty state\n\n    @motivating\n    @ui\n    Scenario: The loading state is shown while referrals are loading\n        Given the table is loading\n        Then the loading state is shown in the table\n        And a custom loading state can be supplied in the \"loading\" slot\n        And the pagination buttons are disabled\n\n    @motivating\n    @ui\n    Scenario Outline: The table becomes paginated when the number of referrals exceeds the per page limit\n        Given the user has <number of referrals>\n        And the table is configured to show <page limit> referrals per page\n        Then the table will have <number of pages> page(s)\n        And pagination buttons will allow users to navigate between pages\n        And the pagination button to go to the next page is disabled on the last page of referrals\n        And the pagination button to go to the previous page is disabled on the first page of referrals\n        Examples:\n            | number of referrals | page limit | number of pages |\n            | 0                   | 4          | 1               |\n            | 1                   | 4          | 1               |\n            | 3                   | 4          | 1               |\n            | 5                   | 4          | 2               |\n            | 42                  | 4          | 11              |\n\n    @motivating\n    @ui\n    Scenario: The table converts to a card view on tablet and mobile window sizes\n        Given a user with referrals\n        When they view the table\n        And their window size is smaller than \"799px\"\n        Then referrals are displayed as cards\n        And they are in two columns\n        When their window size is smaller than \"599px\"\n        Then the referrals are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario: Table and Mobile beakpoints can be configured\n        Given the referral table has been configured with the following props\n            | prop         | value |\n            | smBreakpoint | 599   |\n            | mdBreakpoint | 799   |\n        And a user with referrals\n        When they view the table\n        And their window size is smaller than \"799px\"\n        Then referrals are displayed as cards\n        And they are in two columns\n        When their window size is smaller than \"599px\"\n        Then the referrals are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario Outline: By default the first column heading is hidden in mobile, but others can be hidden\n        Given a referral table with 4 columns\n        And prop \"hidden-columns\" with <hideColumnValue>\n        And a user with referrals\n        When they view the referral table\n        And their window size is below the tablet breakpoint\n        Then referral cards are displayed\n        And the titles of <columnsArehidden> within the card\n        Examples:\n            | hideColumnValue | columnsArehidden                    |\n            |                 | the first column                    |\n            | 0,1,2           | the first, second and third columns |\n            | 3               | the fourth column                   |\n\n    @motivating\n    Scenario: The use who referred the current user can be shown in the table\n        Given the table is configured with <showReferrer> set to true\n        And the current user was referrered by <referrer>\n        Then the first table row on the first page of the table is for <referrer>\n\n    @motivating\n    Scenario: Only referrals which occured in the program specific by program-id are shown\n        Given the table is configured with \"program-id\"\n        Then only referrals from the program with \"program-id\" are shown\n\n    @motivating\n    Scenario: Classic program shows only classic referrals\n        Given the \"program-id\" of the table is set to \"classic\"\n        Then only classic referrals are shown in the table\n\n    @minutae\n    @ui\n    Scenario: Column heading can be hidden\n        Given the table is configured with \"hide-labels\" set to \"true\"\n        Then the table is displayed without column headings";
 
 const ReferralTable_stories = {
   title: "Components/Referral Table",
@@ -5986,6 +5985,7 @@ const Start = () => {
       initValue: "",
       states: {
         enableValidation: true,
+        registrationFormState: {},
         validationErrors: {},
         content: {
           fieldLabel: "Password",
@@ -5999,6 +5999,7 @@ const EmptyError = () => {
       states: {
         enableValidation: true,
         validationErrors: { password: "Cannot be empty" },
+        registrationFormState: {},
         content: {
           fieldLabel: "Password",
         },
@@ -6010,6 +6011,7 @@ const ValidationError = () => {
       initValue: "asdf",
       states: {
         enableValidation: true,
+        registrationFormState: {},
         validationErrors: { password: "Incomplete" },
         content: {
           fieldLabel: "Password",
@@ -9578,21 +9580,21 @@ var marked = stencilHooks_module.createCommonjsModule(function (module, exports)
 })));
 });
 
-const LoginReadme = "# sqm-portal-login\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute               | Description                         | Type                                                                                                                                                                                                                                                            | Default                     |\n| --------------------- | ----------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| `demoData`            | --                      |                                     | `{ states?: { error: string; loading: boolean; forgotPasswordPath: string; registerPath: string; }; content?: { forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }` | `undefined`                 |\n| `emailLabel`          | `email-label`           | Label for email field               | `string`                                                                                                                                                                                                                                                        | `\"Email\"`                   |\n| `forgotPasswordLabel` | `forgot-password-label` | Label for forgotten password button | `string`                                                                                                                                                                                                                                                        | `\"Forgot Password?\"`        |\n| `forgotPasswordPath`  | `forgot-password-path`  | Forgot password redirect path       | `string`                                                                                                                                                                                                                                                        | `\"/forgotPassword\"`         |\n| `nextPage`            | `next-page`             | Page navigated to after sign-in     | `string`                                                                                                                                                                                                                                                        | `\"/\"`                       |\n| `pageLabel`           | `page-label`            |                                     | `string`                                                                                                                                                                                                                                                        | `\"Sign in to your account\"` |\n| `passwordLabel`       | `password-label`        | Label for password field            | `string`                                                                                                                                                                                                                                                        | `\"Password\"`                |\n| `registerLabel`       | `register-label`        | Label for register button           | `string`                                                                                                                                                                                                                                                        | `\"Register\"`                |\n| `registerPath`        | `register-path`         | Register redirect path              | `string`                                                                                                                                                                                                                                                        | `\"/register\"`               |\n| `submitLabel`         | `submit-label`          | Label for submit button             | `string`                                                                                                                                                                                                                                                        | `\"Sign In\"`                 |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-login --> sqm-form-message\n  sqm-stencilbook --> sqm-portal-login\n  style sqm-portal-login fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const LoginReadme = "# sqm-portal-login\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute               | Description                                     | Type                                                                                                                                                                                                                                                            | Default                     |\n| --------------------- | ----------------------- | ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\n| `demoData`            | --                      |                                                 | `{ states?: { error: string; loading: boolean; forgotPasswordPath: string; registerPath: string; }; content?: { forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }` | `undefined`                 |\n| `emailLabel`          | `email-label`           |                                                 | `string`                                                                                                                                                                                                                                                        | `\"Email\"`                   |\n| `forgotPasswordLabel` | `forgot-password-label` |                                                 | `string`                                                                                                                                                                                                                                                        | `\"Forgot Password?\"`        |\n| `forgotPasswordPath`  | `forgot-password-path`  |                                                 | `string`                                                                                                                                                                                                                                                        | `\"/forgotPassword\"`         |\n| `nextPage`            | `next-page`             | Page participants are navigated to after login. | `string`                                                                                                                                                                                                                                                        | `\"/\"`                       |\n| `pageLabel`           | `page-label`            |                                                 | `string`                                                                                                                                                                                                                                                        | `\"Sign in to your account\"` |\n| `passwordLabel`       | `password-label`        |                                                 | `string`                                                                                                                                                                                                                                                        | `\"Password\"`                |\n| `registerLabel`       | `register-label`        |                                                 | `string`                                                                                                                                                                                                                                                        | `\"Register\"`                |\n| `registerPath`        | `register-path`         |                                                 | `string`                                                                                                                                                                                                                                                        | `\"/register\"`               |\n| `submitLabel`         | `submit-label`          |                                                 | `string`                                                                                                                                                                                                                                                        | `\"Sign In\"`                 |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-login --> sqm-form-message\n  sqm-stencilbook --> sqm-portal-login\n  style sqm-portal-login fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
 const ReferralIframeReadme = "# sqm-referral-iframe\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property       | Attribute       | Description                    | Type                                                                                                                           | Default     |\n| -------------- | --------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `demoData`     | --              |                                | `{ states?: { content: { iframeSrc: string; iframeHeight: string; iframeWidth: string; }; }; data?: { shareCode: string; }; }` | `undefined` |\n| `iframeHeight` | `iframe-height` | Height of the iframe container | `string`                                                                                                                       | `\"100%\"`    |\n| `iframeSrc`    | `iframe-src`    | URL of iframe to display       | `string`                                                                                                                       | `undefined` |\n| `iframeWidth`  | `iframe-width`  | Width of the iframe container  | `string`                                                                                                                       | `\"100%\"`    |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-stencilbook --> sqm-referral-iframe\n  style sqm-referral-iframe fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
-const ForgotPasswordReadme = "# sqm-portal-forgot-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property       | Attribute       | Description                                                          | Type                                                                                                                                                                                        | Default                    |\n| -------------- | --------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| `demoData`     | --              |                                                                      | `{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined`                |\n| `emailLabel`   | `email-label`   |                                                                      | `string`                                                                                                                                                                                    | `\"Email\"`                  |\n| `loginPath`    | `login-path`    |                                                                      | `string`                                                                                                                                                                                    | `\"/login\"`                 |\n| `redirectPath` | `redirect-path` | The page that users are redirected to from the password reset email. | `string`                                                                                                                                                                                    | `\"/resetPassword\"`         |\n| `submitLabel`  | `submit-label`  |                                                                      | `string`                                                                                                                                                                                    | `\"Request Password Reset\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-forgot-password --> sqm-form-message\n  style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const ForgotPasswordReadme = "# sqm-portal-forgot-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property       | Attribute       | Description                                                                           | Type                                                                                                                                                                                        | Default                                                      |\n| -------------- | --------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |\n| `demoData`     | --              |                                                                                       | `{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined`                                                  |\n| `emailLabel`   | `email-label`   |                                                                                       | `string`                                                                                                                                                                                    | `\"Email\"`                                                    |\n| `headerText`   | `header-text`   |                                                                                       | `string`                                                                                                                                                                                    | `\"Enter your email below to receive a password reset link.\"` |\n| `loginPath`    | `login-path`    |                                                                                       | `string`                                                                                                                                                                                    | `\"/login\"`                                                   |\n| `loginText`    | `login-text`    | Sign In Link Text                                                                     | `string`                                                                                                                                                                                    | `\"Sign In\"`                                                  |\n| `redirectPath` | `redirect-path` | The microsite page that participants are redirected to from the password reset email. | `string`                                                                                                                                                                                    | `\"/resetPassword\"`                                           |\n| `submitLabel`  | `submit-label`  |                                                                                       | `string`                                                                                                                                                                                    | `\"Request Password Reset\"`                                   |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-forgot-password --> sqm-form-message\n  style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
-const RegisterReadme = "# sqm-portal-register\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                   | Attribute                    | Description                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default              |\n| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\n| `confirmPassword`          | `confirm-password`           | Show or hide the confirm password input                            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\n| `confirmPasswordLabel`     | `confirm-password-label`     |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Confirm Password\"` |\n| `demoData`                 | --                           |                                                                    | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }` | `undefined`          |\n| `emailLabel`               | `email-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Email\"`            |\n| `enablePasswordValidation` | `enable-password-validation` |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `true`               |\n| `hideInputs`               | `hide-inputs`                | Hide default input fields to use custom fields                     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\n| `loginLabel`               | `login-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Sign in\"`          |\n| `loginPath`                | `login-path`                 | Login button redirection path                                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/login\"`           |\n| `nextPage`                 | `next-page`                  | Page navigated to after registration                               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/\"`                |\n| `pageLabel`                | `page-label`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\n| `passwordLabel`            | `password-label`             |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Password\"`         |\n| `redirectPath`             | `redirect-path`              | The page that users are redirected to from the verification email. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/verifyEmail\"`     |\n| `submitLabel`              | `submit-label`               |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-register --> sqm-form-message\n  sqm-portal-register --> sqm-password-field\n  sqm-stencilbook --> sqm-portal-register\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const RegisterReadme = "# sqm-portal-register\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                   | Attribute                    | Description                                                               | Type                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default              |\n| -------------------------- | ---------------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\n| `confirmPassword`          | `confirm-password`           | Show or hide the confirm password input.                                  | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\n| `confirmPasswordLabel`     | `confirm-password-label`     |                                                                           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Confirm Password\"` |\n| `demoData`                 | --                           |                                                                           | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }` | `undefined`          |\n| `emailLabel`               | `email-label`                |                                                                           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Email\"`            |\n| `enablePasswordValidation` | `enable-password-validation` |                                                                           | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `true`               |\n| `hideInputs`               | `hide-inputs`                | Hide default input fields to use custom fields.                           | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\n| `loginLabel`               | `login-label`                |                                                                           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Sign in\"`          |\n| `loginPath`                | `login-path`                 | Login button redirection path.                                            | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/login\"`           |\n| `nextPage`                 | `next-page`                  | Page participants are navigated to after registration.                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/\"`                |\n| `pageLabel`                | `page-label`                 |                                                                           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\n| `passwordLabel`            | `password-label`             |                                                                           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Password\"`         |\n| `redirectPath`             | `redirect-path`              | The page that participants are redirected to from the verification email. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/verifyEmail\"`     |\n| `submitLabel`              | `submit-label`               |                                                                           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-register --> sqm-form-message\n  sqm-portal-register --> sqm-password-field\n  sqm-stencilbook --> sqm-portal-register\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
-const EditProfileReadme = "# sqm-portal-profile\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                 | Attribute                   | Description                    | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default                  |\n| ------------------------ | --------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\n| `countrytext`            | `countrytext`               | Country input field label      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Country\"`              |\n| `demoData`               | --                          |                                | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }` | `undefined`              |\n| `editProfileHeader`      | `edit-profile-header`       |                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Edit your profile\"`    |\n| `editProfileSubHeader`   | `edit-profile-sub-header`   |                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Personal Information\"` |\n| `emailtext`              | `emailtext`                 | Email input field label        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Email\"`                |\n| `firstnametext`          | `firstnametext`             | First name input field label   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"First Name\"`           |\n| `lastnametext`           | `lastnametext`              | Last name input field label    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Last Name\"`            |\n| `showCountry`            | `show-country`              | Show or hide the country field | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `true`                   |\n| `submitChangeButtonText` | `submit-change-button-text` |                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Submit Changes\"`       |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-profile --> sqm-form-message\n  style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const EditProfileReadme = "# sqm-portal-profile\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                 | Attribute                   | Description                     | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default                  |\n| ------------------------ | --------------------------- | ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\n| `countrytext`            | `countrytext`               |                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Country\"`              |\n| `demoData`               | --                          |                                 | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }` | `undefined`              |\n| `editProfileHeader`      | `edit-profile-header`       |                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Edit your profile\"`    |\n| `editProfileSubHeader`   | `edit-profile-sub-header`   |                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Personal Information\"` |\n| `emailtext`              | `emailtext`                 |                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Email\"`                |\n| `firstnametext`          | `firstnametext`             |                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"First Name\"`           |\n| `lastnametext`           | `lastnametext`              |                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Last Name\"`            |\n| `showCountry`            | `show-country`              | Show or hide the country field. | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `true`                   |\n| `submitChangeButtonText` | `submit-change-button-text` |                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Submit Changes\"`       |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-profile --> sqm-form-message\n  style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
-const ResetPasswordReadme = "# sqm-portal-reset-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                    | Attribute                      | Description                                                                                      | Type                                                                                                                                                                                                                                                                                                                                                                                                 | Default                 |\n| --------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |\n| `confirmPassword`           | `confirm-password`             | Show or hide confirm password field                                                              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                            | `false`                 |\n| `confirmPasswordFieldLabel` | `confirm-password-field-label` |                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Confirm Password\"`    |\n| `continueButtonText`        | `continue-button-text`         | Button text displayed after a successful password reset                                          | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Continue\"`            |\n| `demoData`                  | --                             |                                                                                                  | `{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; content: { passwordResetHeader: string; resetPasswordHeader: string; continueButtonText: string; resetPasswordButtonText: string; confirmPasswordFieldLabel: string; passwordFieldLabel: string; }; }; }` | `undefined`             |\n| `failedPage`                | `failed-page`                  | The page that users are redirected to if the reset fails due to outdated password reset attempt. | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"/\"`                   |\n| `nextPage`                  | `next-page`                    | The page that users are redirected to when the password reset succeeds.                          | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"/\"`                   |\n| `passwordFieldLabel`        | `password-field-label`         |                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"New Password\"`        |\n| `passwordResetHeader`       | `password-reset-header`        | Displayed after a successful password reset                                                      | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Password reset\"`      |\n| `resetPasswordButtonText`   | `reset-password-button-text`   |                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Reset Password\"`      |\n| `resetPasswordHeader`       | `reset-password-header`        |                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Reset your password\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-reset-password --> sqm-form-message\n  sqm-portal-reset-password --> sqm-password-field\n  style sqm-portal-reset-password fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const ResetPasswordReadme = "# sqm-portal-reset-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                    | Attribute                      | Description                                                                                             | Type                                                                                                                                                                                                                                                                                                                                                                                                 | Default                 |\n| --------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |\n| `confirmPassword`           | `confirm-password`             | Show or hide confirm password field.                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                            | `false`                 |\n| `confirmPasswordFieldLabel` | `confirm-password-field-label` |                                                                                                         | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Confirm Password\"`    |\n| `continueButtonText`        | `continue-button-text`         | Button text displayed after a successful password reset.                                                | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Continue\"`            |\n| `demoData`                  | --                             |                                                                                                         | `{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; content: { passwordResetHeader: string; resetPasswordHeader: string; continueButtonText: string; resetPasswordButtonText: string; confirmPasswordFieldLabel: string; passwordFieldLabel: string; }; }; }` | `undefined`             |\n| `failedPage`                | `failed-page`                  | The page that participants are redirected to if the reset fails due to outdated password reset attempt. | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"/\"`                   |\n| `nextPage`                  | `next-page`                    | The page that participants are redirected to when the password reset succeeds.                          | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"/\"`                   |\n| `passwordFieldLabel`        | `password-field-label`         |                                                                                                         | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"New Password\"`        |\n| `passwordResetHeader`       | `password-reset-header`        | Displayed after a successful password reset.                                                            | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Password reset\"`      |\n| `resetPasswordButtonText`   | `reset-password-button-text`   |                                                                                                         | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Reset Password\"`      |\n| `resetPasswordHeader`       | `reset-password-header`        |                                                                                                         | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Reset your password\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-reset-password --> sqm-form-message\n  sqm-portal-reset-password --> sqm-password-field\n  style sqm-portal-reset-password fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
-const EmailVerificationReadme = "# sqm-portal-email-verification\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                  | Attribute                   | Description                                                        | Type                                                                                                                                                                                        | Default                                                                                           |\n| ------------------------- | --------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\n| `demoData`                | --                          |                                                                    | `{ states?: { error: string; loading: boolean; success: boolean; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; }; }` | `undefined`                                                                                       |\n| `emailVerificationHeader` | `email-verification-header` |                                                                    | `string`                                                                                                                                                                                    | `\"Verify your email\"`                                                                             |\n| `redirectPath`            | `redirect-path`             | The page that users are redirected to from the verification email. | `string`                                                                                                                                                                                    | `\"/verifyEmail\"`                                                                                  |\n| `resendEmailButtonText`   | `resend-email-button-text`  |                                                                    | `string`                                                                                                                                                                                    | `\"Re-send Email\"`                                                                                 |\n| `verifyMessage`           | `verify-message`            |                                                                    | `string`                                                                                                                                                                                    | `\"A verification email was sent to {email}. Please verify your email to continue to the portal.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-email-verification --> sqm-form-message\n  style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const EmailVerificationReadme = "# sqm-portal-email-verification\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                  | Attribute                   | Description                                                                         | Type                                                                                                                                                                                        | Default                                                                                           |\n| ------------------------- | --------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\n| `demoData`                | --                          |                                                                                     | `{ states?: { error: string; loading: boolean; success: boolean; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; }; }` | `undefined`                                                                                       |\n| `emailVerificationHeader` | `email-verification-header` |                                                                                     | `string`                                                                                                                                                                                    | `\"Verify your email\"`                                                                             |\n| `redirectPath`            | `redirect-path`             | The microsite page that participants are redirected to from the verification email. | `string`                                                                                                                                                                                    | `\"/verifyEmail\"`                                                                                  |\n| `resendEmailButtonText`   | `resend-email-button-text`  |                                                                                     | `string`                                                                                                                                                                                    | `\"Re-send Email\"`                                                                                 |\n| `verifyMessage`           | `verify-message`            |                                                                                     | `string`                                                                                                                                                                                    | `\"A verification email was sent to {email}. Please verify your email to continue to the portal.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-email-verification --> sqm-form-message\n  style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
-const EmailVerifiedReadme = "# sqm-portal-verify-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property     | Attribute     | Description                                                                                       | Type                                                                                                 | Default     |\n| ------------ | ------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `demoData`   | --            |                                                                                                   | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\n| `failedPage` | `failed-page` | The page that users are redirected to if verification fails due to outdated verification attempt. | `string`                                                                                             | `\"/\"`       |\n| `nextPage`   | `next-page`   | The page that users are redirected to when the verification succeeds.                             | `string`                                                                                             | `\"/\"`       |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-verify-email --> sqm-form-message\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const EmailVerifiedReadme = "# sqm-portal-verify-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property     | Attribute     | Description                                                                                              | Type                                                                                                 | Default     |\n| ------------ | ------------- | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `demoData`   | --            |                                                                                                          | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\n| `failedPage` | `failed-page` | The page that participants are redirected to if verification fails due to outdated verification attempt. | `string`                                                                                             | `\"/\"`       |\n| `nextPage`   | `next-page`   | The page that participants are redirected to when the verification succeeds.                             | `string`                                                                                             | `\"/\"`       |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-verify-email --> sqm-form-message\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
 const PortalTemplates_stories = {
   title: "Templates / Portal",
@@ -9632,16 +9634,16 @@ function DefaultTemplateView$1(props) {
         gridTemplateColumns: "repeat(9, 80px)",
         gridGap: "10px",
       } },
-      index.h("button", { onClick: () => index_module.Ft.push("/") }, "Dashboard"),
-      props.leadSubmit && (index.h("button", { onClick: () => index_module.Ft.push("/refer") }, "Submit a Referral")),
-      index.h("button", { onClick: () => index_module.Ft.push("/activity") }, "Activity"),
-      index.h("button", { onClick: () => index_module.Ft.push("/editProfile") }, "Edit Profile"),
-      index.h("button", { onClick: () => index_module.Ft.push("/login") }, "Login"),
-      index.h("button", { onClick: () => index_module.Ft.push("/register") }, "Register"),
-      index.h("button", { onClick: () => index_module.Ft.push("/emailVerification") }, "Email Verification"),
-      index.h("button", { onClick: () => index_module.Ft.push("/verifyEmail") }, "Verify Email"),
-      index.h("button", { onClick: () => index_module.Ft.push("/forgotPassword") }, "Forgot Password"),
-      index.h("button", { onClick: () => index_module.Ft.push("/resetPassword") }, "Reset Password")),
+      index.h("button", { onClick: () => index_module.fn.push("/") }, "Dashboard"),
+      props.leadSubmit && (index.h("button", { onClick: () => index_module.fn.push("/refer") }, "Submit a Referral")),
+      index.h("button", { onClick: () => index_module.fn.push("/activity") }, "Activity"),
+      index.h("button", { onClick: () => index_module.fn.push("/editProfile") }, "Edit Profile"),
+      index.h("button", { onClick: () => index_module.fn.push("/login") }, "Login"),
+      index.h("button", { onClick: () => index_module.fn.push("/register") }, "Register"),
+      index.h("button", { onClick: () => index_module.fn.push("/emailVerification") }, "Email Verification"),
+      index.h("button", { onClick: () => index_module.fn.push("/verifyEmail") }, "Verify Email"),
+      index.h("button", { onClick: () => index_module.fn.push("/forgotPassword") }, "Forgot Password"),
+      index.h("button", { onClick: () => index_module.fn.push("/resetPassword") }, "Reset Password")),
     index.h("br", null),
     index.h("div", { innerHTML: states.previewTemplate })));
 }
@@ -10215,14 +10217,14 @@ function setupGraphQL$9() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ne({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ne(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -10331,14 +10333,14 @@ function setupGraphQL$a() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ne({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ne(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -10486,14 +10488,14 @@ function setupGraphQL$b() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ne({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ne(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -11487,7 +11489,7 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
   EmptyCell: EmptyCell$2
 });
 
-const scenario$s = "@owner:sam\n@author:sam\nFeature: Rewards Table\n\n    Shows a list of rewards as a table\n\n    @motivating\n    @ui\n    Scenario: The empty state is shown if there are no rewards\n        Given a user with rewards\n        When they view the reward table\n        Then no rewards are displayed\n        And they see an image with a user icon\n        And \"View your rewards\" in bold\n        And \"See all the rewards you have earned from referring friends and completing tasks\" below the bolded text\n        And the pagination buttons are disabled\n\n    @minutae\n    @ui\n    Scenario: A custom empty state can be provided\n        Given a user with no rewards\n        And a custom empty state has been supplied in the \"empty\" slot\n        When they view the reward table\n        Then they see the custom empty state\n\n    @minutae\n    @ui\n    Scenario: The loading state is shown while rewards are loading\n        Given the table is loading\n        Then the loading state is shown in the table\n        And a custom loading state can be supplied in the \"loading\" slot\n        And the pagination buttons are disabled\n\n    @motivating\n    @ui\n    Scenario Outline: The table becomes paginated when the number of rewards exceeds the per page limit\n        Given the user has <number of rewards>\n        And the table is configured to show <page limit> rewards per page\n        Then the table will have <number of pages> page(s)\n        And pagination buttons will allow users to navigate between pages\n        And the pagination button to go to the next page is disabled on the last page of rewards\n        And the pagination button to go to the previous page is disabled on the first page of rewards\n        Examples:\n            | number of rewards | page limit | number of pages |\n            | 0                 | 4          | 1               |\n            | 1                 | 4          | 1               |\n            | 3                 | 4          | 1               |\n            | 5                 | 4          | 2               |\n            | 42                | 4          | 11              |\n\n    @motivating\n    @ui\n    Scenario: The table converts to a card view on tablet and mobile window sizes\n        Given a user with rewards\n        When they view the table\n        And their window size is smaller than \"799px\"\n        Then rewards are displayed as cards\n        And they are in two columns\n        When their window size is smaller than \"599px\"\n        Then the rewards are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario: Table and Mobile beakpoints can be configured\n        Given the reward table has been configured with the following props\n            | prop         | value |\n            | smBreakpoint | 599   |\n            | mdBreakpoint | 799   |\n        And a user with rewards\n        When they view the table\n        And their window size is smaller than \"799px\"\n        Then rewards are displayed as cards\n        And they are in two columns\n        When their window size is smaller than \"599px\"\n        Then the rewards are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario Outline: By default the first column heading is hidden in mobile\n        Given a reward table with 4 columns\n        And prop \"hidden-columns\" with <hideColumnValue>\n        And a user with rewards\n        When they view the reward table\n        And their window size is below the tablet breakpoint\n        Then reward cards are displayed\n        And the titles of <columnsArehidden> within the card\n        Examples:\n            | hideColumnValue | columnsArehidden                    |\n            |                 | the first column                    |\n            | 0,1,2           | the first, second and third columns |\n            | 3               | the fourth column                   |\n\n    @motivating\n    Scenario: Only rewards which occured in the program specific by \"program-id\" are shown\n        Given the table is configured with \"program-id\"\n        Then only rewards from the program with \"program-id\" are shown\n\n    @landmine\n    Scenario: When a `classic` program Id is set then any reward without a programId is shown\n        There is no easy way for the backend to filter for \"classic\" programs,\n        thus we are filtering for rewards without programId's.\n\n        Given the \"program-id\" of the table is set to \"classic\"\n        Then rewards from classic programs are shown\n        And manual rewards are shown\n\n    @minutae\n    @ui\n    Scenario: Column heading can be hidden\n        Given the table is configured with \"show-labels\" set to false\n        Then the table is displayed without column headings";
+const scenario$s = "@owner:sam\n@author:sam\nFeature: Rewards Table\n\n    Shows a list of rewards as a table\n\n    @motivating\n    @ui\n    Scenario: The empty state is shown if there are no rewards\n        Given a user with rewards\n        When they view the reward table\n        Then no rewards are displayed\n        And they see an image with a user icon\n        And \"View your rewards\" in bold\n        And \"See all the rewards you have earned from referring friends and completing tasks\" below the bolded text\n        And the pagination buttons are disabled\n\n    @minutae\n    @ui\n    Scenario: A custom empty state can be provided\n        Given a user with no rewards\n        And a custom empty state has been supplied in the \"empty\" slot\n        When they view the reward table\n        Then they see the custom empty state\n\n    @minutae\n    @ui\n    Scenario: The loading state is shown while rewards are loading\n        Given the table is loading\n        Then the loading state is shown in the table\n        And a custom loading state can be supplied in the \"loading\" slot\n        And the pagination buttons are disabled\n\n    @motivating\n    @ui\n    Scenario Outline: The table becomes paginated when the number of rewards exceeds the per page limit\n        Given the user has <number of rewards>\n        And the table is configured to show <page limit> rewards per page\n        Then the table will have <number of pages> page(s)\n        And pagination buttons will allow users to navigate between pages\n        And the pagination button to go to the next page is disabled on the last page of rewards\n        And the pagination button to go to the previous page is disabled on the first page of rewards\n        Examples:\n            | number of rewards | page limit | number of pages |\n            | 0                 | 4          | 1               |\n            | 1                 | 4          | 1               |\n            | 3                 | 4          | 1               |\n            | 5                 | 4          | 2               |\n            | 42                | 4          | 11              |\n\n    @motivating\n    @ui\n    Scenario: The table converts to a card view on tablet and mobile window sizes\n        Given a user with rewards\n        When they view the table\n        And their window size is smaller than \"799px\"\n        Then rewards are displayed as cards\n        And they are in two columns\n        When their window size is smaller than \"599px\"\n        Then the rewards are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario: Table and Mobile beakpoints can be configured\n        Given the reward table has been configured with the following props\n            | prop         | value |\n            | smBreakpoint | 599   |\n            | mdBreakpoint | 799   |\n        And a user with rewards\n        When they view the table\n        And their window size is smaller than \"799px\"\n        Then rewards are displayed as cards\n        And they are in two columns\n        When their window size is smaller than \"599px\"\n        Then the rewards are displayed as cards in a singular column\n\n    @motivating\n    @ui\n    Scenario Outline: By default the first column heading is hidden in mobile\n        Given a reward table with 4 columns\n        And prop \"hidden-columns\" with <hideColumnValue>\n        And a user with rewards\n        When they view the reward table\n        And their window size is below the tablet breakpoint\n        Then reward cards are displayed\n        And the titles of <columnsArehidden> within the card\n        Examples:\n            | hideColumnValue | columnsArehidden                    |\n            |                 | the first column                    |\n            | 0,1,2           | the first, second and third columns |\n            | 3               | the fourth column                   |\n\n    @motivating\n    Scenario: Only rewards which occured in the program specific by \"program-id\" are shown\n        Given the table is configured with \"program-id\"\n        Then only rewards from the program with \"program-id\" are shown\n\n    @landmine\n    Scenario: When a `classic` program Id is set then any reward without a programId is shown\n        There is no easy way for the backend to filter for \"classic\" programs,\n        thus we are filtering for rewards without programId's.\n\n        Given the \"program-id\" of the table is set to \"classic\"\n        Then rewards from classic programs are shown\n        And manual rewards are shown\n\n    @minutae\n    @ui\n    Scenario: Column heading can be hidden\n        Given the table is configured with \"hide-labels\" set to \"true\"\n        Then the table is displayed without column headings";
 
 const RewardsTable_stories = {
   title: "Components/Rewards Table",
@@ -11632,14 +11634,14 @@ function setupGraphQL$c() {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ne({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ne(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -11653,21 +11655,21 @@ function setupGraphQLKlip$1({ token, id }) {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ne({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: token,
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ne(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
 }
 const ReferralTable$1 = createHookStory(() => {
   setupGraphQL$c();
-  index_module.R("sam-partner-test-2");
+  index_module.setProgramId("sam-partner-test-2");
   return (index.h("sqm-referral-table", null,
     index.h("sqm-referral-table-user-column", null),
     index.h("sqm-referral-table-status-column", null),
@@ -11693,7 +11695,7 @@ const ReferralTableEn = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWVuZ2xpc2giLCJpZCI6InNhbWVuZ2xpc2gifX0._6OTVF3gcipu_ibgthUNr5UHwC-2E_lhCENI5HpYvcw",
     id: "samenglish",
   });
-  index_module.R("klip-referral-program");
+  index_module.setProgramId("klip-referral-program");
   return (index.h("sqm-referral-table", { "per-page": "4" },
     index.h("sqm-referral-table-user-column", { "column-title": "User" }),
     index.h("sqm-referral-table-status-column", { "column-title": "Referral Status" }),
@@ -11705,7 +11707,7 @@ const ReferralTableTr = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbXR1cmtleSIsImlkIjoic2FtdHVya2V5In19.usSMe0RWg8W5FtwcvJayvAlxTw6vMxjTyWXaP8jI8_U",
     id: "samturkey",
   });
-  index_module.R("klip-referral-program");
+  index_module.setProgramId("klip-referral-program");
   return (index.h("sqm-referral-table", { "more-label": "Daha", "prev-label": "\u00D6ncesi", "empty-state-text": "Hen\u00FCz \u00D6d\u00FCl Yok", "per-page": "4" },
     index.h("sqm-referral-table-user-column", { "column-title": "Kullan\u0131c\u0131lar", "anonymous-user": "Anonim Kullan\u0131c\u0131", "deleted-user": "Silinmi\u015F Kullan\u0131c\u0131" }),
     index.h("sqm-referral-table-status-column", { "column-title": "Durumu", "converted-status-text": "D\u00F6n\u00FC\u015Ft\u00FCr", "in-progress-status-text": "Devam etmekte" }),
@@ -11717,7 +11719,7 @@ const ReferralTableFr = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWZyZW5jaCIsImlkIjoic2FtZnJlbmNoIn19.cwhasHpfU5MLV4vGbCQcazb6p19iSw5pD2zyrVHgePg",
     id: "samfrench",
   });
-  index_module.R("klip-referral-program");
+  index_module.setProgramId("klip-referral-program");
   return (index.h("sqm-referral-table", { "more-label": "Plus", "prev-label": "Pr\u00E9c\u00E9dent", "empty-state-text": "Aucune R\u00E9f\u00E9rence Maintenant", "per-page": "4" },
     index.h("sqm-referral-table-user-column", { "column-title": "Utilisateur", "anonymous-user": "Utilisateur Anonyme", "deleted-user": "Utilisateur Supprim\u00E9" }),
     index.h("sqm-referral-table-status-column", { "column-title": "Statut de Parrainage", "converted-status-text": "Converti", "in-progress-status-text": "En cours" }),