@saasquatch/mint-components 1.7.0-7 → 1.7.0-9

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

@@ -3,33 +3,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./global-a7614907.js');
-require('./use-callback-e754042f.js');
-const index_module = require('./index.module-1c799b1f.js');
-require('./extends-08099afd.js');
+const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
+require('./global-97364373.js');
+require('./use-callback-5d15897d.js');
+const index_module = require('./index.module-d3a28293.js');
 require('./cjs-1066ec21.js');
 require('./mixins-338ca5f1.js');
-const JSS = require('./JSS-a75f3a9a.js');
-const GenericTableView = require('./GenericTableView-6b0d1f93.js');
-require('./useChildElements-dc4c3132.js');
-const luxon = require('./luxon-59ca7d19.js');
+const JSS = require('./JSS-c73206b7.js');
+const GenericTableView = require('./GenericTableView-fa0cb936.js');
+require('./useChildElements-24fbca82.js');
+const luxon = require('./luxon-479fc825.js');
 require('./utils-8ef4fe4a.js');
-require('./sqm-text-span-view-ab4ad6ef.js');
-const sqmAssetCardView = require('./sqm-asset-card-view-07420209.js');
-const sqmHeroView = require('./sqm-hero-view-d5d46a36.js');
+require('./sqm-text-span-view-b0c90c27.js');
+const sqmAssetCardView = require('./sqm-asset-card-view-7e16757a.js');
+const sqmHeroView = require('./sqm-hero-view-f4264d5e.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-35015d30.js');
-const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-0ee28f65.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-85e51ba6.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-c60833cc.js');
-const sqmPortalFooterView = require('./sqm-portal-footer-view-d5478077.js');
-const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-97932f7a.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-a3e86fc2.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-a8ee44c2.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-042073ca.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-cb3c9c2f.js');
-const ShadowViewAddon = require('./ShadowViewAddon-260da162.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-765aae4d.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-46a53c67.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-56d07e94.js');
+const sqmPortalFooterView = require('./sqm-portal-footer-view-cbd4cd48.js');
+const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-aaa8dd17.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-4a8432e9.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-9792a786.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-035245e6.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7014ca89.js');
+const ShadowViewAddon = require('./ShadowViewAddon-970dff24.js');
+const sqmPortalSectionView = require('./sqm-portal-section-view-71a57cd9.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -2358,36 +2356,36 @@ const routes = `
 `;
 const TemplateNavigation = createHookStory(() => {
   return (index.h("div", null,
-    index.h("button", { onClick: () => index_module.wn.push("/") }, "/"),
-    index.h("button", { onClick: () => index_module.wn.push("/foo") }, "/foo"),
-    index.h("button", { onClick: () => index_module.wn.push("/bar") }, "/bar"),
-    index.h("button", { onClick: () => index_module.wn.push("/baz/bang") }, "/baz/bang"),
-    index.h("button", { onClick: () => index_module.wn.push("/refer") }, "/refer"),
-    index.h("button", { onClick: () => index_module.wn.push("/refer/1") }, "/refer/1"),
-    index.h("button", { onClick: () => index_module.wn.push("/refer/2") }, "/refer/2"),
-    index.h("button", { onClick: () => index_module.wn.back() }, "Back"),
-    index.h("button", { onClick: () => index_module.wn.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.wn.push("/") }, "/"),
-    index.h("button", { onClick: () => index_module.wn.push("/foo") }, "/foo"),
-    index.h("button", { onClick: () => index_module.wn.push("/bar") }, "/bar"),
-    index.h("button", { onClick: () => index_module.wn.push("/baz/bang") }, "/baz/bang"),
-    index.h("button", { onClick: () => index_module.wn.push("/refer") }, "/refer"),
-    index.h("button", { onClick: () => index_module.wn.push("/refer/1") }, "/refer/1"),
-    index.h("button", { onClick: () => index_module.wn.push("/refer/2") }, "/refer/2"),
-    index.h("button", { onClick: () => index_module.wn.back() }, "Back"),
-    index.h("button", { onClick: () => index_module.wn.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.wn.push("/") }, "/"),
-    index.h("button", { onClick: () => index_module.wn.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 +2399,7 @@ function useTemplate(templateString) {
   const [previewTemplate, setPreviewTemplate] = stencilHooks_module.useState(templateString);
   function setPath(e) {
     //@ts-ignore
-    index_module.wn.push(e.target.value);
+    index_module.fn.push(e.target.value);
   }
   return {
     states: { previewTemplate, editedTemplate },
@@ -2565,8 +2563,8 @@ const FullStackFrame = () => {
       "Current path:",
       " ",
       index.h("code", null,
-        index.h("strong", null, (_a = index_module.bn()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    index.h("button", { onClick: index_module.wn.back }, "Go Back")));
+        index.h("strong", null, (_a = index_module.ln()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    index.h("button", { onClick: index_module.fn.back }, "Go Back")));
 };
 const FullStackFrameLoggedOut = () => {
   var _a;
@@ -2590,8 +2588,8 @@ const FullStackFrameLoggedOut = () => {
       "Current path:",
       " ",
       index.h("code", null,
-        index.h("strong", null, (_a = index_module.bn()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    index.h("button", { onClick: index_module.wn.back }, "Go Back")));
+        index.h("strong", null, (_a = index_module.ln()) === 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 +2683,14 @@ function setupGraphQL$1() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.te({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.te(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
 }
@@ -2747,14 +2745,14 @@ function setupGraphQL$2() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.te({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.te(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
 }
@@ -2809,14 +2807,14 @@ function setupGraphQL$3() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.te({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6Im55bmVsbGllIiwiaWQiOiJueW5lbGxpZSJ9fQ.3KV974VPLgk4tD8LQfJTi4IPkKCmnaB8w48HzVJYDuI",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.te(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
 }
@@ -2950,14 +2948,14 @@ function setupGraphQL$4() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.te({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJpZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJmaXJzdE5hbWUiOiJ0ZXN0IiwibGFzdE5hbWUiOiJ0ZXN0In19.ziDWbdCwsTo1ijxl8d2__Ga-6iFOVShaJUPp2ZBMeO0",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.te(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
 }
@@ -2997,14 +2995,14 @@ function setupGraphQL$5() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.te({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.te(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
 }
@@ -3020,14 +3018,14 @@ function setupOtherGraphQL() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.te({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: JWT,
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.te(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3261,14 +3259,14 @@ function setupGraphQL$6() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.te({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.te(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3277,7 +3275,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.Ye(EXCHANGE);
+  const [exchange, { data, errors }] = index_module.ze(EXCHANGE);
   return {
     states: {
       points,
@@ -3392,14 +3390,14 @@ function setupGraphQL$7() {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   stencilHooks_module.useEffect(() => {
-    index_module.te({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.te(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3413,14 +3411,14 @@ function setupGraphQLKlip({ token, id }) {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   stencilHooks_module.useEffect(() => {
-    index_module.te({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: token,
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.te(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3434,7 +3432,7 @@ const RewardTableDemoHook = createHookStory(() => {
 });
 const RewardsTableWithProgram = createHookStory(() => {
   setupGraphQL$7();
-  index_module.D("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 +3441,7 @@ const RewardsTableWithProgram = createHookStory(() => {
 });
 const RewardsTableNoProgram = createHookStory(() => {
   setupGraphQL$7();
-  index_module.D(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 +3453,7 @@ const RewardsTableEn = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWVuZ2xpc2giLCJpZCI6InNhbWVuZ2xpc2gifX0._6OTVF3gcipu_ibgthUNr5UHwC-2E_lhCENI5HpYvcw",
     id: "samenglish",
   });
-  index_module.D(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 +3465,7 @@ const RewardsTableTr = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbXR1cmtleSIsImlkIjoic2FtdHVya2V5In19.usSMe0RWg8W5FtwcvJayvAlxTw6vMxjTyWXaP8jI8_U",
     id: "samturkey",
   });
-  index_module.D(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 +3477,7 @@ const RewardsTableFr = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWZyZW5jaCIsImlkIjoic2FtZnJlbmNoIn19.cwhasHpfU5MLV4vGbCQcazb6p19iSw5pD2zyrVHgePg",
     id: "samfrench",
   });
-  index_module.D(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 +3511,14 @@ function setupGraphQL$8() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.te({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: JWT,
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.te(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3568,44 +3566,13 @@ const style = {
 };
 const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
-const barProps = {
-  data: {
-    programs: [
-      {
-        key: "program1",
-        label: "My Referral Program",
-      },
-      {
-        key: "program2",
-        label: "My Rewards Program",
-      },
-    ],
-  },
-};
-const item1Props = {
-  states: {
-    active: false,
-  },
-  data: {
-    label: "Dashboard",
-    icon: "house",
-    path: "/",
-  },
-};
-const item2Props = {
-  states: {
-    active: true,
-  },
-  data: {
-    label: "Activity",
-    icon: "bar-chart",
-    path: "/",
-  },
-};
 const Sidebar = () => {
-  return (index.h(sqmNavigationSidebarView.NavigationSidebarView, Object.assign({}, barProps),
-    index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item1Props)),
-    index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item2Props))));
+  return (index.h("div", null)
+  // <NavigationSidebarView {...barProps}>
+  //   <NavigationSidebarItemView {...item1Props} />
+  //   <NavigationSidebarItemView {...item2Props} />
+  // </NavigationSidebarView>
+  );
 };
 const Dashboard = () => {
   const sharelinkProps = {
@@ -3858,11 +3825,11 @@ const NewPortal = /*#__PURE__*/Object.freeze({
   Activity: Activity
 });
 
-const referralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\r\n  <sqm-portal-container\r\n    direction=\"column\"\r\n    padding=\"small\"\r\n    gap=\"xxx-large\"\r\n    display=\"grid\"\r\n    max-width=\"100%\"\r\n  >\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      display=\"grid\"\r\n      max-width=\"100%\"\r\n    >\r\n      <sqm-hero-image\r\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\r\n        header=\"MyCompany Rewards\"\r\n        description=\"Refer a friend and earn up to $1200 in rewards\"\r\n        layout=\"columns\"\r\n        image-pos=\"right\"\r\n        background-color=\"#F9F9F9\"\r\n      >\r\n      </sqm-hero-image>\r\n    </sqm-portal-container>\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      max-width=\"770px\"\r\n      center\r\n      display=\"grid\"\r\n    >\r\n      <sqm-stat-container space=\"xxx-large\" display=\"flex\">\r\n        <sqm-big-stat\r\n          flex-reverse=\"true\"\r\n          alignment=\"left\"\r\n          stat-type=\"/referralsCount\"\r\n        >\r\n          <p>Referrals</p>\r\n        </sqm-big-stat>\r\n        <sqm-big-stat\r\n          flex-reverse=\"true\"\r\n          alignment=\"left\"\r\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\r\n        >\r\n          <p>Giftcards</p>\r\n        </sqm-big-stat>\r\n      </sqm-stat-container>\r\n      <sqm-portal-container\r\n        gap=\"large\"\r\n        direction=\"column\"\r\n        display=\"grid\"\r\n        max-width=\"100%\"\r\n        padding=\"none\"\r\n      >\r\n        <sqm-titled-section\r\n          text-align=\"center\"\r\n          label-margin=\"xxx-small\"\r\n          padding=\"none\"\r\n        >\r\n          <h3 slot=\"label\">Get rewarded when your friend uses our product</h3>\r\n        </sqm-titled-section>\r\n        <sqm-referral-card vertical-alignment=\"start\">\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            slot=\"left\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n            <p>They’ll get a $50 credit towards a new account and you’ll get:</p>\r\n            <sqm-timeline icon=\"circle\">\r\n              <sqm-timeline-entry\r\n                reward=\"$50\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friend purchases a Business plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$200\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$1000\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friend purchases an Enterprise plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n            </sqm-timeline>\r\n          </sqm-portal-container>\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            slot=\"right\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n            <p>>Choose how you want to share</p>\r\n            <p><sub>Your unique referral link:</sub></p>\r\n            <sqm-share-link\r\n              tooltip-text=\"Copied to Clipboard\"\r\n              tooltip-lifespan=\"1000\"\r\n            >\r\n            </sqm-share-link>\r\n            <sqm-portal-container\r\n              gap=\"x-small\"\r\n              direction=\"column\"\r\n              display=\"grid\"\r\n              max-width=\"100%\"\r\n              padding=\"none\"\r\n            >\r\n              <sqm-share-button\r\n                medium=\"email\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Share via email\r\n              </sqm-share-button>\r\n              <sqm-share-button\r\n                medium=\"linkedin\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Share on LinkedIn\r\n              </sqm-share-button>\r\n              <sqm-share-button\r\n                medium=\"twitter\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Tweet about us\r\n              </sqm-share-button>\r\n            </sqm-portal-container>\r\n          </sqm-portal-container>\r\n        </sqm-referral-card>\r\n      </sqm-portal-container>\r\n      <sqm-portal-container\r\n        gap=\"large\"\r\n        direction=\"column\"\r\n        display=\"grid\"\r\n        max-width=\"100%\"\r\n        padding=\"none\"\r\n      >\r\n        <sqm-titled-section\r\n          padding=\"none\"\r\n          text-align=\"center\"\r\n          label-margin=\"xx-small\"\r\n        >\r\n          <h3 slot=\"label\">Referral History</h3>\r\n        </sqm-titled-section>\r\n        <sqm-referral-table\r\n          per-page=\"4\"\r\n          hidden-columns=\"2\"\r\n          more-label=\"Next\"\r\n          prev-label=\"Prev\"\r\n          show-labels\r\n          sm-breakpoint=\"599\"\r\n          md-breakpoint=\"799\"\r\n        >\r\n          <sqm-referral-table-user-column\r\n            column-title=\"User\"\r\n            anonymous-user=\"Anonymous User\"\r\n            deleted-user=\"Deleted User\"\r\n          >\r\n          </sqm-referral-table-user-column>\r\n          <sqm-referral-table-status-column\r\n            column-title=\"Referral status\"\r\n            converted-status-text=\"Converted\"\r\n            in-progress-status-text=\"In Progress\"\r\n          >\r\n          </sqm-referral-table-status-column>\r\n          <sqm-referral-table-rewards-column\r\n            column-title=\"Rewards\"\r\n            expiring-text=\"Expiring in\"\r\n            fuel-tank-text=\"Your code is\"\r\n            pending-for-text=\"{status} for {date}\"\r\n            reward-received-text=\"Reward received on\"\r\n            status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\r\n            status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\r\n          >\r\n          </sqm-referral-table-rewards-column>\r\n          <sqm-referral-table-date-column\r\n            column-title=\"Date referred\"\r\n            date-shown=\"dateReferralStarted\"\r\n          >\r\n          </sqm-referral-table-date-column>\r\n          <sqm-empty\r\n            slot=\"empty\"\r\n            empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\r\n            empty-state-header=\"View your referral details\"\r\n            empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\r\n          ></sqm-empty>\r\n        </sqm-referral-table>\r\n      </sqm-portal-container>\r\n      <sqm-portal-footer\r\n        support-email=\"support@example.com\"\r\n        terms-link=\"https://example.com\"\r\n        faq-link=\"https://example.com\"\r\n        terms-text=\"Terms And Conditions\"\r\n        faq-text=\"FAQ\"\r\n        show-powered-by=\"true\"\r\n        padding-bottom=\"none\"\r\n        padding-left=\"none\"\r\n        padding-right=\"none\"\r\n        padding-top=\"none\"\r\n      ></sqm-portal-footer>\r\n    </sqm-portal-container>\r\n  </sqm-portal-container>\r\n</sqm-brand>\r\n";
+const referralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\r\n  <sqm-portal-container\r\n    direction=\"column\"\r\n    padding=\"small\"\r\n    gap=\"xxx-large\"\r\n    display=\"grid\"\r\n    max-width=\"100%\"\r\n  >\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      display=\"grid\"\r\n      max-width=\"100%\"\r\n    >\r\n      <sqm-hero-image\r\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\r\n        header=\"MyCompany Rewards\"\r\n        description=\"Refer a friend and earn up to $1200 in rewards\"\r\n        layout=\"columns\"\r\n        image-pos=\"right\"\r\n        background-color=\"#F9F9F9\"\r\n      >\r\n      </sqm-hero-image>\r\n    </sqm-portal-container>\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      max-width=\"770px\"\r\n      center\r\n      display=\"grid\"\r\n    >\r\n      <sqm-stat-container space=\"xxx-large\" display=\"flex\">\r\n        <sqm-big-stat\r\n          flex-reverse=\"true\"\r\n          alignment=\"left\"\r\n          stat-type=\"/referralsCount\"\r\n        >\r\n          <p>Referrals</p>\r\n        </sqm-big-stat>\r\n        <sqm-big-stat\r\n          flex-reverse=\"true\"\r\n          alignment=\"left\"\r\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\r\n        >\r\n          <p>Giftcards</p>\r\n        </sqm-big-stat>\r\n      </sqm-stat-container>\r\n      <sqm-portal-container\r\n        gap=\"large\"\r\n        direction=\"column\"\r\n        display=\"grid\"\r\n        max-width=\"100%\"\r\n        padding=\"none\"\r\n      >\r\n        <sqm-titled-section\r\n          text-align=\"center\"\r\n          label-margin=\"xxx-small\"\r\n          padding=\"none\"\r\n        >\r\n          <h3 slot=\"label\">Get rewarded when your friend uses our product</h3>\r\n        </sqm-titled-section>\r\n        <sqm-referral-card vertical-alignment=\"start\">\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            slot=\"left\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n            <p>They’ll get a $50 credit towards a new account and you’ll get:</p>\r\n            <sqm-timeline icon=\"circle\">\r\n              <sqm-timeline-entry\r\n                reward=\"$50\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friend purchases a Business plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$200\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$1000\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friend purchases an Enterprise plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n            </sqm-timeline>\r\n          </sqm-portal-container>\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            slot=\"right\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n            <p>>Choose how you want to share</p>\r\n            <p><sub>Your unique referral link:</sub></p>\r\n            <sqm-share-link\r\n              tooltip-text=\"Copied to Clipboard\"\r\n              tooltip-lifespan=\"1000\"\r\n            >\r\n            </sqm-share-link>\r\n            <sqm-portal-container\r\n              gap=\"x-small\"\r\n              direction=\"column\"\r\n              display=\"grid\"\r\n              max-width=\"100%\"\r\n              padding=\"none\"\r\n            >\r\n              <sqm-share-button\r\n                medium=\"email\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Share via email\r\n              </sqm-share-button>\r\n              <sqm-share-button\r\n                medium=\"linkedin\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Share on LinkedIn\r\n              </sqm-share-button>\r\n              <sqm-share-button\r\n                medium=\"twitter\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Tweet about us\r\n              </sqm-share-button>\r\n            </sqm-portal-container>\r\n          </sqm-portal-container>\r\n        </sqm-referral-card>\r\n      </sqm-portal-container>\r\n      <sqm-portal-container\r\n        gap=\"large\"\r\n        direction=\"column\"\r\n        display=\"grid\"\r\n        max-width=\"100%\"\r\n        padding=\"none\"\r\n      >\r\n        <sqm-titled-section\r\n          padding=\"none\"\r\n          text-align=\"center\"\r\n          label-margin=\"xx-small\"\r\n        >\r\n          <h3 slot=\"label\">Referral History</h3>\r\n        </sqm-titled-section>\r\n        <sqm-referral-table\r\n          per-page=\"4\"\r\n          hidden-columns=\"2\"\r\n          more-label=\"Next\"\r\n          prev-label=\"Prev\"\r\n          sm-breakpoint=\"599\"\r\n          md-breakpoint=\"799\"\r\n        >\r\n          <sqm-referral-table-user-column\r\n            column-title=\"User\"\r\n            anonymous-user=\"Anonymous User\"\r\n            deleted-user=\"Deleted User\"\r\n          >\r\n          </sqm-referral-table-user-column>\r\n          <sqm-referral-table-status-column\r\n            column-title=\"Referral status\"\r\n            converted-status-text=\"Converted\"\r\n            in-progress-status-text=\"In Progress\"\r\n          >\r\n          </sqm-referral-table-status-column>\r\n          <sqm-referral-table-rewards-column\r\n            column-title=\"Rewards\"\r\n            expiring-text=\"Expiring in\"\r\n            fuel-tank-text=\"Your code is\"\r\n            pending-for-text=\"{status} for {date}\"\r\n            reward-received-text=\"Reward received on\"\r\n            status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\r\n            status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\r\n          >\r\n          </sqm-referral-table-rewards-column>\r\n          <sqm-referral-table-date-column\r\n            column-title=\"Date referred\"\r\n            date-shown=\"dateReferralStarted\"\r\n          >\r\n          </sqm-referral-table-date-column>\r\n          <sqm-empty\r\n            slot=\"empty\"\r\n            empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\r\n            empty-state-header=\"View your referral details\"\r\n            empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\r\n          ></sqm-empty>\r\n        </sqm-referral-table>\r\n      </sqm-portal-container>\r\n      <sqm-portal-footer\r\n        support-email=\"support@example.com\"\r\n        terms-link=\"https://example.com\"\r\n        faq-link=\"https://example.com\"\r\n        terms-text=\"Terms And Conditions\"\r\n        faq-text=\"FAQ\"\r\n        show-powered-by=\"true\"\r\n        padding-bottom=\"none\"\r\n        padding-left=\"none\"\r\n        padding-right=\"none\"\r\n        padding-top=\"none\"\r\n      ></sqm-portal-footer>\r\n    </sqm-portal-container>\r\n  </sqm-portal-container>\r\n</sqm-brand>\r\n";
 
-const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\r\n  <sqm-portal-container\r\n    direction=\"column\"\r\n    padding=\"small\"\r\n    gap=\"xxx-large\"\r\n    display=\"grid\"\r\n    max-width=\"100%\"\r\n  >\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      display=\"grid\"\r\n      max-width=\"100%\"\r\n    >\r\n      <sqm-hero-image\r\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\r\n        header=\"MyCompany Rewards\"\r\n        description=\"Refer friends and complete tasks to earn rewards\"\r\n        layout=\"columns\"\r\n        image-pos=\"right\"\r\n        background-color=\"#F9F9F9\"\r\n        image-mobile-pos=\"top\"\r\n        image-percentage=\"50\"\r\n        padding-image=\"none\"\r\n        padding-text=\"xxxx-large\"\r\n      >\r\n      </sqm-hero-image>\r\n    </sqm-portal-container>\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      max-width=\"770px\"\r\n      center\r\n      display=\"grid\"\r\n    >\r\n      <sqm-stat-container space=\"xxx-large\" display=\"flex\">\r\n        <sqm-big-stat\r\n          flex-reverse=\"true\"\r\n          alignment=\"left\"\r\n          stat-type=\"/referralsCount\"\r\n        >\r\n          <p>Referrals</p>\r\n        </sqm-big-stat>\r\n        <sqm-big-stat\r\n          flex-reverse=\"true\"\r\n          alignment=\"left\"\r\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\r\n        >\r\n          <p>Giftcards Earned</p>\r\n        </sqm-big-stat>\r\n        <sqm-big-stat\r\n          flex-reverse=\"true\"\r\n          alignment=\"left\"\r\n          stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\r\n        >\r\n          <p>Points Balance</p>\r\n        </sqm-big-stat>\r\n      </sqm-stat-container>\r\n      <sqm-portal-container\r\n        gap=\"xx-large\"\r\n        direction=\"column\"\r\n        display=\"grid\"\r\n        max-width=\"100%\"\r\n        padding=\"none\"\r\n      >\r\n        <sqm-titled-section\r\n          text-align=\"center\"\r\n          label-margin=\"xxx-small\"\r\n          padding=\"none\"\r\n        >\r\n          <h3 slot=\"label\">Share $50 with friends</h3>\r\n          <p slot=\"content\">\r\n            They’ll get a $50 credit towards a new account and you’ll get up to\r\n            $1200\r\n          </p>\r\n        </sqm-titled-section>\r\n        <sqm-referral-card vertical-alignment=\"start\">\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            slot=\"left\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n            <p>They’ll get a $50 credit towards a new account and you’ll get:</p>\r\n            <sqm-timeline icon=\"circle\">\r\n              <sqm-timeline-entry\r\n                reward=\"$50\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friend purchases a Business plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$200\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$1000\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friend purchases an Enterprise plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n            </sqm-timeline>\r\n          </sqm-portal-container>\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            slot=\"right\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n           <p>Choose how you want to share:</p>\r\n            <p><sub>Your unique referral link:</sub></p>\r\n            <sqm-share-link\r\n              tooltip-text=\"Copied to Clipboard\"\r\n              tooltip-lifespan=\"1000\"\r\n            >\r\n            </sqm-share-link>\r\n            <sqm-portal-container\r\n              gap=\"x-small\"\r\n              direction=\"column\"\r\n              display=\"grid\"\r\n              max-width=\"100%\"\r\n              padding=\"none\"\r\n            >\r\n              <sqm-share-button\r\n                medium=\"email\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Share via email\r\n              </sqm-share-button>\r\n              <sqm-share-button\r\n                medium=\"linkedin\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Share on LinkedIn\r\n              </sqm-share-button>\r\n              <sqm-share-button\r\n                medium=\"twitter\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Tweet about us\r\n              </sqm-share-button>\r\n            </sqm-portal-container>\r\n          </sqm-portal-container>\r\n        </sqm-referral-card>\r\n        <sqm-portal-container\r\n          gap=\"xx-large\"\r\n          direction=\"column\"\r\n          display=\"grid\"\r\n          max-width=\"100%\"\r\n          min-width=\"\"\r\n          padding=\"none\"\r\n        >\r\n          <sqm-titled-section text-align=\"center\" label-margin=\"xxx-small\">\r\n            <h3 slot=\"label\">Earn more rewards</h3>\r\n            <p slot=\"content\">\r\n              Get points while using our product. Use those points to redeem\r\n              rewards like one free month of Enterprise or two plane tickets to\r\n              anywhere in North America\r\n            </p>\r\n          </sqm-titled-section>\r\n          <sqm-card-feed gap=\"24\" width=\"347\">\r\n            <sqm-task-card\r\n              reward-amount=\"20\"\r\n              goal=\"1\"\r\n              card-title=\"Complete a Survey\"\r\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\r\n              button-text=\"Take survey\"\r\n              reward-unit=\"Points\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"250\"\r\n              goal=\"500\"\r\n              show-progress-bar\r\n              card-title=\"Spend $500\"\r\n              description=\"Earn 150 points when you spend $500 or more.\"\r\n              button-text=\"See plans\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              progress-bar-unit=\"$\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              goal=\"1\"\r\n              reward-amount=\"50\"\r\n              card-title=\"Follow Us on Twitter\"\r\n              description=\"Earn 50 points when you follow us on Twitter!\"\r\n              button-text=\"Follow\"\r\n              button-link=\"https://twitter.com/\"\r\n              open-new-tab=\"true\"\r\n              event-key=\"socialFollow\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"1\"\r\n              reward-unit=\"Free Month\"\r\n              goal=\"1\"\r\n              card-title=\"Upgrade Your Plan\"\r\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\r\n              button-text=\"Upgrade\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              open-new-tab=\"false\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n          </sqm-card-feed>\r\n        </sqm-portal-container>\r\n        <sqm-tabs>\r\n          <sqm-tab header=\"Referral history\">\r\n            <sqm-referral-table\r\n              per-page=\"4\"\r\n              hidden-columns=\"2\"\r\n              more-label=\"Next\"\r\n              prev-label=\"Prev\"\r\n              show-labels=\"\"\r\n              sm-breakpoint=\"599\"\r\n              md-breakpoint=\"799\"\r\n            >\r\n              <sqm-referral-table-user-column\r\n                column-title=\"User\"\r\n                anonymous-user=\"Anonymous User\"\r\n                deleted-user=\"Deleted User\"\r\n              >\r\n              </sqm-referral-table-user-column>\r\n              <sqm-referral-table-status-column\r\n                column-title=\"Referral status\"\r\n                converted-status-text=\"Converted\"\r\n                in-progress-status-text=\"In Progress\"\r\n              >\r\n              </sqm-referral-table-status-column>\r\n              <sqm-referral-table-rewards-column\r\n                column-title=\"Rewards\"\r\n                expiring-text=\"Expiring in\"\r\n                fuel-tank-text=\"Your code is\"\r\n                pending-for-text=\"{status} for {date}\"\r\n                reward-received-text=\"Reward received on\"\r\n                status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\r\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\r\n              >\r\n              </sqm-referral-table-rewards-column>\r\n              <sqm-referral-table-date-column\r\n                column-title=\"Date referred\"\r\n                date-shown=\"dateReferralStarted\"\r\n              >\r\n              </sqm-referral-table-date-column>\r\n              <sqm-empty\r\n                slot=\"empty\"\r\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\r\n                empty-state-header=\"View your referral details\"\r\n                empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\r\n              >\r\n              </sqm-empty>\r\n            </sqm-referral-table>\r\n          </sqm-tab>\r\n          <sqm-tab header=\"Reward history\">\r\n            <sqm-rewards-table\r\n              per-page=\"4\"\r\n              program-id=\"\"\r\n              hidden-columns=\"0\"\r\n              more-label=\"Next\"\r\n              prev-label=\"Prev\"\r\n              show-labels=\"\"\r\n              sm-breakpoint=\"599\"\r\n              md-breakpoint=\"799\"\r\n            >\r\n              <sqm-rewards-table-reward-column\r\n                available-text=\"{availableAmount} remaining\"\r\n                column-title=\"Reward\"\r\n                copy-text=\"Copied!\"\r\n                redeemed-text=\"{redeemedAmount} redeemed\"\r\n              >\r\n              </sqm-rewards-table-reward-column>\r\n              <sqm-rewards-table-source-column\r\n                anonymous-user=\"Anonymous User\"\r\n                column-title=\"Source\"\r\n                deleted-user=\"Deleted User\"\r\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\r\n                reward-exchange-text=\"Reward Exchange\"\r\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\r\n              >\r\n              </sqm-rewards-table-source-column>\r\n              <sqm-rewards-table-status-column\r\n                column-title=\"Status\"\r\n                expiry-text=\"Expires on \"\r\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\r\n              >\r\n              </sqm-rewards-table-status-column>\r\n              <sqm-rewards-table-date-column\r\n                column-title=\"Date received\"\r\n                date-shown=\"dateGiven\"\r\n              >\r\n              </sqm-rewards-table-date-column>\r\n              <sqm-empty\r\n                slot=\"empty\"\r\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\r\n                empty-state-header=\"View your rewards\"\r\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\r\n              >\r\n              </sqm-empty>\r\n            </sqm-rewards-table>\r\n          </sqm-tab>\r\n        </sqm-tabs>\r\n      </sqm-portal-container>\r\n      <sqm-portal-footer\r\n        support-email=\"support@example.com\"\r\n        terms-link=\"https://example.com\"\r\n        faq-link=\"https://example.com\"\r\n        terms-text=\"Terms And Conditions\"\r\n        faq-text=\"FAQ\"\r\n        show-powered-by=\"true\"\r\n        padding-bottom=\"none\"\r\n        padding-left=\"none\"\r\n        padding-right=\"none\"\r\n        padding-top=\"none\"\r\n      ></sqm-portal-footer>\r\n    </sqm-portal-container>\r\n  </sqm-portal-container>\r\n</sqm-brand>\r\n";
+const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\r\n  <sqm-portal-container\r\n    direction=\"column\"\r\n    padding=\"small\"\r\n    gap=\"xxx-large\"\r\n    display=\"grid\"\r\n    max-width=\"100%\"\r\n  >\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      display=\"grid\"\r\n      max-width=\"100%\"\r\n    >\r\n      <sqm-hero-image\r\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\r\n        header=\"MyCompany Rewards\"\r\n        description=\"Refer friends and complete tasks to earn rewards\"\r\n        layout=\"columns\"\r\n        image-pos=\"right\"\r\n        background-color=\"#F9F9F9\"\r\n        image-mobile-pos=\"top\"\r\n        image-percentage=\"50\"\r\n        padding-image=\"none\"\r\n        padding-text=\"xxxx-large\"\r\n      >\r\n      </sqm-hero-image>\r\n    </sqm-portal-container>\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      max-width=\"770px\"\r\n      center\r\n      display=\"grid\"\r\n    >\r\n      <sqm-stat-container space=\"xxx-large\" display=\"flex\">\r\n        <sqm-big-stat\r\n          flex-reverse=\"true\"\r\n          alignment=\"left\"\r\n          stat-type=\"/referralsCount\"\r\n        >\r\n          <p>Referrals</p>\r\n        </sqm-big-stat>\r\n        <sqm-big-stat\r\n          flex-reverse=\"true\"\r\n          alignment=\"left\"\r\n          stat-type=\"/integrationRewardsCountFiltered/AVAILABLE/global\"\r\n        >\r\n          <p>Giftcards Earned</p>\r\n        </sqm-big-stat>\r\n        <sqm-big-stat\r\n          flex-reverse=\"true\"\r\n          alignment=\"left\"\r\n          stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\r\n        >\r\n          <p>Points Balance</p>\r\n        </sqm-big-stat>\r\n      </sqm-stat-container>\r\n      <sqm-portal-container\r\n        gap=\"xx-large\"\r\n        direction=\"column\"\r\n        display=\"grid\"\r\n        max-width=\"100%\"\r\n        padding=\"none\"\r\n      >\r\n        <sqm-titled-section\r\n          text-align=\"center\"\r\n          label-margin=\"xxx-small\"\r\n          padding=\"none\"\r\n        >\r\n          <h3 slot=\"label\">Share $50 with friends</h3>\r\n          <p slot=\"content\">\r\n            They’ll get a $50 credit towards a new account and you’ll get up to\r\n            $1200\r\n          </p>\r\n        </sqm-titled-section>\r\n        <sqm-referral-card vertical-alignment=\"start\">\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            slot=\"left\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n            <p>They’ll get a $50 credit towards a new account and you’ll get:</p>\r\n            <sqm-timeline icon=\"circle\">\r\n              <sqm-timeline-entry\r\n                reward=\"$50\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friend purchases a Business plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$200\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n              <sqm-timeline-entry\r\n                reward=\"$1000\"\r\n                unit=\"visa giftcard\"\r\n                desc=\"Your friend purchases an Enterprise plan\"\r\n                icon=\"circle\"\r\n              >\r\n              </sqm-timeline-entry>\r\n            </sqm-timeline>\r\n          </sqm-portal-container>\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            slot=\"right\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n           <p>Choose how you want to share:</p>\r\n            <p><sub>Your unique referral link:</sub></p>\r\n            <sqm-share-link\r\n              tooltip-text=\"Copied to Clipboard\"\r\n              tooltip-lifespan=\"1000\"\r\n            >\r\n            </sqm-share-link>\r\n            <sqm-portal-container\r\n              gap=\"x-small\"\r\n              direction=\"column\"\r\n              display=\"grid\"\r\n              max-width=\"100%\"\r\n              padding=\"none\"\r\n            >\r\n              <sqm-share-button\r\n                medium=\"email\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Share via email\r\n              </sqm-share-button>\r\n              <sqm-share-button\r\n                medium=\"linkedin\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Share on LinkedIn\r\n              </sqm-share-button>\r\n              <sqm-share-button\r\n                medium=\"twitter\"\r\n                icon-slot=\"prefix\"\r\n                size=\"medium\"\r\n                type=\"default\"\r\n              >\r\n                Tweet about us\r\n              </sqm-share-button>\r\n            </sqm-portal-container>\r\n          </sqm-portal-container>\r\n        </sqm-referral-card>\r\n        <sqm-portal-container\r\n          gap=\"xx-large\"\r\n          direction=\"column\"\r\n          display=\"grid\"\r\n          max-width=\"100%\"\r\n          min-width=\"\"\r\n          padding=\"none\"\r\n        >\r\n          <sqm-titled-section text-align=\"center\" label-margin=\"xxx-small\">\r\n            <h3 slot=\"label\">Earn more rewards</h3>\r\n            <p slot=\"content\">\r\n              Get points while using our product. Use those points to redeem\r\n              rewards like one free month of Enterprise or two plane tickets to\r\n              anywhere in North America\r\n            </p>\r\n          </sqm-titled-section>\r\n          <sqm-card-feed gap=\"24\" width=\"347\">\r\n            <sqm-task-card\r\n              reward-amount=\"20\"\r\n              goal=\"1\"\r\n              card-title=\"Complete a Survey\"\r\n              description=\"Fill out our NPS survey and get 20 points for giving us honest feedback.\"\r\n              button-text=\"Take survey\"\r\n              reward-unit=\"Points\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"250\"\r\n              goal=\"500\"\r\n              show-progress-bar\r\n              card-title=\"Spend $500\"\r\n              description=\"Earn 250 points when you spend $500 or more.\"\r\n              button-text=\"See plans\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              progress-bar-unit=\"$\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              goal=\"1\"\r\n              reward-amount=\"50\"\r\n              card-title=\"Follow Us on Twitter\"\r\n              description=\"Earn 50 points when you follow us on Twitter!\"\r\n              button-text=\"Follow\"\r\n              button-link=\"https://twitter.com/\"\r\n              open-new-tab=\"true\"\r\n              event-key=\"socialFollow\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"1\"\r\n              reward-unit=\"Free Month\"\r\n              goal=\"1\"\r\n              card-title=\"Upgrade Your Plan\"\r\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\r\n              button-text=\"Upgrade\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              open-new-tab=\"false\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n          </sqm-card-feed>\r\n        </sqm-portal-container>\r\n        <sqm-tabs>\r\n          <sqm-tab header=\"Referral history\">\r\n            <sqm-referral-table\r\n              per-page=\"4\"\r\n              hidden-columns=\"2\"\r\n              more-label=\"Next\"\r\n              prev-label=\"Prev\"\r\n              sm-breakpoint=\"599\"\r\n              md-breakpoint=\"799\"\r\n            >\r\n              <sqm-referral-table-user-column\r\n                column-title=\"User\"\r\n                anonymous-user=\"Anonymous User\"\r\n                deleted-user=\"Deleted User\"\r\n              >\r\n              </sqm-referral-table-user-column>\r\n              <sqm-referral-table-status-column\r\n                column-title=\"Referral status\"\r\n                converted-status-text=\"Converted\"\r\n                in-progress-status-text=\"In Progress\"\r\n              >\r\n              </sqm-referral-table-status-column>\r\n              <sqm-referral-table-rewards-column\r\n                column-title=\"Rewards\"\r\n                expiring-text=\"Expiring in\"\r\n                fuel-tank-text=\"Your code is\"\r\n                pending-for-text=\"{status} for {date}\"\r\n                reward-received-text=\"Reward received on\"\r\n                status-long-text=\"{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }\"\r\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\r\n              >\r\n              </sqm-referral-table-rewards-column>\r\n              <sqm-referral-table-date-column\r\n                column-title=\"Date referred\"\r\n                date-shown=\"dateReferralStarted\"\r\n              >\r\n              </sqm-referral-table-date-column>\r\n              <sqm-empty\r\n                slot=\"empty\"\r\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png\"\r\n                empty-state-header=\"View your referral details\"\r\n                empty-state-text=\"Refer a friend to view the status of your referrals and rewards earned\"\r\n              >\r\n              </sqm-empty>\r\n            </sqm-referral-table>\r\n          </sqm-tab>\r\n          <sqm-tab header=\"Reward history\">\r\n            <sqm-rewards-table\r\n              per-page=\"4\"\r\n              program-id=\"\"\r\n              hidden-columns=\"0\"\r\n              more-label=\"Next\"\r\n              prev-label=\"Prev\"\r\n              sm-breakpoint=\"599\"\r\n              md-breakpoint=\"799\"\r\n            >\r\n              <sqm-rewards-table-reward-column\r\n                available-text=\"{availableAmount} remaining\"\r\n                column-title=\"Reward\"\r\n                copy-text=\"Copied!\"\r\n                redeemed-text=\"{redeemedAmount} redeemed\"\r\n              >\r\n              </sqm-rewards-table-reward-column>\r\n              <sqm-rewards-table-source-column\r\n                anonymous-user=\"Anonymous User\"\r\n                column-title=\"Source\"\r\n                deleted-user=\"Deleted User\"\r\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\r\n                reward-exchange-text=\"Reward Exchange\"\r\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\r\n              >\r\n              </sqm-rewards-table-source-column>\r\n              <sqm-rewards-table-status-column\r\n                column-title=\"Status\"\r\n                expiry-text=\"Expires on \"\r\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\r\n              >\r\n              </sqm-rewards-table-status-column>\r\n              <sqm-rewards-table-date-column\r\n                column-title=\"Date received\"\r\n                date-shown=\"dateGiven\"\r\n              >\r\n              </sqm-rewards-table-date-column>\r\n              <sqm-empty\r\n                slot=\"empty\"\r\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\r\n                empty-state-header=\"View your rewards\"\r\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\r\n              >\r\n              </sqm-empty>\r\n            </sqm-rewards-table>\r\n          </sqm-tab>\r\n        </sqm-tabs>\r\n      </sqm-portal-container>\r\n      <sqm-portal-footer\r\n        support-email=\"support@example.com\"\r\n        terms-link=\"https://example.com\"\r\n        faq-link=\"https://example.com\"\r\n        terms-text=\"Terms And Conditions\"\r\n        faq-text=\"FAQ\"\r\n        show-powered-by=\"true\"\r\n        padding-bottom=\"none\"\r\n        padding-left=\"none\"\r\n        padding-right=\"none\"\r\n        padding-top=\"none\"\r\n      ></sqm-portal-footer>\r\n    </sqm-portal-container>\r\n  </sqm-portal-container>\r\n</sqm-brand>\r\n";
 
-const loyaltyWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\r\n  <sqm-portal-container\r\n    direction=\"column\"\r\n    padding=\"small\"\r\n    gap=\"xxxx-large\"\r\n    display=\"grid\"\r\n    max-width=\"100%\"\r\n  >\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      display=\"grid\"\r\n      max-width=\"100%\"\r\n    >\r\n      <sqm-hero-image\r\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\r\n        header=\"MyCompany Rewards\"\r\n        description=\"Complete tasks to earn rewards\"\r\n        layout=\"overlay\"\r\n        padding-image=\"xxxx-large\"\r\n        padding-text=\"xxx-large\"\r\n        image-pos=\"center\"\r\n        overlay-color=\"#5e5669\"\r\n        overlay-opacity=\"0.9\"\r\n      >\r\n      </sqm-hero-image>\r\n      <sqm-portal-container\r\n        direction=\"column\"\r\n        padding=\"none\"\r\n        gap=\"xxx-large\"\r\n        max-width=\"770px\"\r\n        center\r\n        display=\"grid\"\r\n      >\r\n        <sqm-program-explainer header=\"How it works\">\r\n          <sqm-program-explainer-step\r\n            description=\"Complete tasks like uploading your first video or sharing videos with friends\"\r\n            header=\"Earn points for using our product\"\r\n            icon=\"cash-stack\"\r\n            text-color=\"#000000\"\r\n          >\r\n          </sqm-program-explainer-step>\r\n          <sqm-program-explainer-step\r\n            description=\"Redeem rewards like one free month of Enterprise or two plane tickets to anywhere in North America\"\r\n            header=\"Redeem rewards with your points\"\r\n            icon=\"people\"\r\n            text-color=\"#000000\"\r\n          >\r\n          </sqm-program-explainer-step>\r\n        </sqm-program-explainer>\r\n        <sqm-portal-container\r\n          center\r\n          direction=\"row\"\r\n          display=\"flex\"\r\n          justify-content=\"space-between\"\r\n          gap=\"xxx-large\"\r\n          max-width=\"100%\"\r\n          padding=\"none\"\r\n        >\r\n          <sqm-stat-container space=\"xxx-large\" display=\"flex\">\r\n            <sqm-big-stat\r\n              flex-reverse=\"true\"\r\n              alignment=\"left\"\r\n              stat-type=\"/rewardsRedeemed/CREDIT/POINTS\"\r\n            >\r\n              <p>Points Redeemed</p>\r\n            </sqm-big-stat>\r\n            <sqm-big-stat\r\n              flex-reverse=\"true\"\r\n              alignment=\"left\"\r\n              stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\r\n            >\r\n              <p>Points Balance</p>\r\n            </sqm-big-stat>\r\n          </sqm-stat-container>\r\n        </sqm-portal-container>\r\n        <sqm-portal-container\r\n          direction=\"column\"\r\n          padding=\"none\"\r\n          gap=\"xx-large\"\r\n          display=\"grid\"\r\n          max-width=\"100%\"\r\n        >\r\n          <sqm-titled-section\r\n            label-margin=\"small\"\r\n            padding=\"none\"\r\n            text-align=\"center\"\r\n          >\r\n            <h3 slot=\"label\">Earn points</h3>\r\n          </sqm-titled-section>\r\n          <sqm-card-feed gap=\"24\" width=\"347\">\r\n            <sqm-task-card\r\n              reward-amount=\"20\"\r\n              goal=\"1\"\r\n              card-title=\"Complete a Survey\"\r\n              description=\"Fill out our NPS survey and get 100 points for giving us honest feedback.\"\r\n              button-text=\"Take survey\"\r\n              reward-unit=\"Points\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"250\"\r\n              goal=\"500\"\r\n              show-progress-bar\r\n              card-title=\"Spend $500\"\r\n              description=\"Earn 150 points when you spend $500 or more.\"\r\n              button-text=\"See plans\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              progress-bar-unit=\"$\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              goal=\"1\"\r\n              reward-amount=\"50\"\r\n              card-title=\"Follow Us on Twitter\"\r\n              description=\"Earn 50 points when you follow us on Twitter!\"\r\n              button-text=\"Follow\"\r\n              button-link=\"https://twitter.com/\"\r\n              open-new-tab=\"true\"\r\n              event-key=\"socialFollow\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"1\"\r\n              reward-unit=\"Free Month\"\r\n              goal=\"1\"\r\n              card-title=\"Upgrade Your Plan\"\r\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\r\n              button-text=\"Upgrade\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              open-new-tab=\"false\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n          </sqm-card-feed>\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n            <sqm-titled-section\r\n              padding=\"none\"\r\n              text-align=\"center\"\r\n              label-margin=\"xx-small\"\r\n            >\r\n              <h3 slot=\"label\">Reward History</h3>\r\n            </sqm-titled-section>\r\n            <sqm-rewards-table\r\n              per-page=\"4\"\r\n              hidden-columns=\"0\"\r\n              more-label=\"Next\"\r\n              prev-label=\"Prev\"\r\n              show-labels\r\n              sm-breakpoint=\"599\"\r\n              md-breakpoint=\"799\"\r\n            >\r\n              <sqm-rewards-table-reward-column\r\n                available-text=\"{availableAmount} remaining\"\r\n                column-title=\"Reward\"\r\n                copy-text=\"Copied!\"\r\n                redeemed-text=\"{redeemedAmount} redeemed\"\r\n              >\r\n              </sqm-rewards-table-reward-column>\r\n              <sqm-rewards-table-source-column\r\n                anonymous-user=\"Anonymous User\"\r\n                column-title=\"Source\"\r\n                deleted-user=\"Deleted User\"\r\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\r\n                reward-exchange-text=\"Reward Exchange\"\r\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\r\n              >\r\n              </sqm-rewards-table-source-column>\r\n              <sqm-rewards-table-status-column\r\n                column-title=\"Status\"\r\n                expiry-text=\"Expires on \"\r\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\r\n              >\r\n              </sqm-rewards-table-status-column>\r\n              <sqm-rewards-table-date-column\r\n                column-title=\"Date received\"\r\n                date-shown=\"dateGiven\"\r\n              >\r\n              </sqm-rewards-table-date-column>\r\n              <sqm-empty\r\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\r\n                empty-state-header=\"View your rewards\"\r\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\r\n              >\r\n              </sqm-empty>\r\n            </sqm-rewards-table>\r\n          </sqm-portal-container>\r\n        </sqm-portal-container>\r\n        <sqm-portal-footer\r\n          support-email=\"support@example.com\"\r\n          terms-link=\"https://example.com\"\r\n          faq-link=\"https://example.com\"\r\n          terms-text=\"Terms And Conditions\"\r\n          faq-text=\"FAQ\"\r\n          show-powered-by=\"true\"\r\n          padding-bottom=\"none\"\r\n          padding-left=\"none\"\r\n          padding-right=\"none\"\r\n          padding-top=\"none\"\r\n        ></sqm-portal-footer>\r\n      </sqm-portal-container>\r\n    </sqm-portal-container>\r\n  </sqm-portal-container>\r\n</sqm-brand>\r\n";
+const loyaltyWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\r\n  <sqm-portal-container\r\n    direction=\"column\"\r\n    padding=\"small\"\r\n    gap=\"xxxx-large\"\r\n    display=\"grid\"\r\n    max-width=\"100%\"\r\n  >\r\n    <sqm-portal-container\r\n      direction=\"column\"\r\n      padding=\"none\"\r\n      gap=\"xxx-large\"\r\n      display=\"grid\"\r\n      max-width=\"100%\"\r\n    >\r\n      <sqm-hero-image\r\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\r\n        header=\"MyCompany Rewards\"\r\n        description=\"Complete tasks to earn rewards\"\r\n        layout=\"overlay\"\r\n        padding-image=\"xxxx-large\"\r\n        padding-text=\"xxx-large\"\r\n        image-pos=\"center\"\r\n        overlay-color=\"#5e5669\"\r\n        overlay-opacity=\"0.9\"\r\n      >\r\n      </sqm-hero-image>\r\n      <sqm-portal-container\r\n        direction=\"column\"\r\n        padding=\"none\"\r\n        gap=\"xxx-large\"\r\n        max-width=\"770px\"\r\n        center\r\n        display=\"grid\"\r\n      >\r\n        <sqm-program-explainer header=\"How it works\">\r\n          <sqm-program-explainer-step\r\n            description=\"Complete tasks like uploading your first video or sharing videos with friends\"\r\n            header=\"Earn points for using our product\"\r\n            icon=\"cash-stack\"\r\n            text-color=\"#000000\"\r\n          >\r\n          </sqm-program-explainer-step>\r\n          <sqm-program-explainer-step\r\n            description=\"Redeem rewards like one free month of Enterprise or two plane tickets to anywhere in North America\"\r\n            header=\"Redeem rewards with your points\"\r\n            icon=\"people\"\r\n            text-color=\"#000000\"\r\n          >\r\n          </sqm-program-explainer-step>\r\n        </sqm-program-explainer>\r\n        <sqm-portal-container\r\n          center\r\n          direction=\"row\"\r\n          display=\"flex\"\r\n          justify-content=\"space-between\"\r\n          gap=\"xxx-large\"\r\n          max-width=\"100%\"\r\n          padding=\"none\"\r\n        >\r\n          <sqm-stat-container space=\"xxx-large\" display=\"flex\">\r\n            <sqm-big-stat\r\n              flex-reverse=\"true\"\r\n              alignment=\"left\"\r\n              stat-type=\"/rewardsRedeemed/CREDIT/POINTS\"\r\n            >\r\n              <p>Points Redeemed</p>\r\n            </sqm-big-stat>\r\n            <sqm-big-stat\r\n              flex-reverse=\"true\"\r\n              alignment=\"left\"\r\n              stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\r\n            >\r\n              <p>Points Balance</p>\r\n            </sqm-big-stat>\r\n          </sqm-stat-container>\r\n        </sqm-portal-container>\r\n        <sqm-portal-container\r\n          direction=\"column\"\r\n          padding=\"none\"\r\n          gap=\"xx-large\"\r\n          display=\"grid\"\r\n          max-width=\"100%\"\r\n        >\r\n          <sqm-titled-section\r\n            label-margin=\"small\"\r\n            padding=\"none\"\r\n            text-align=\"center\"\r\n          >\r\n            <h3 slot=\"label\">Earn points</h3>\r\n          </sqm-titled-section>\r\n          <sqm-card-feed gap=\"24\" width=\"347\">\r\n            <sqm-task-card\r\n              reward-amount=\"20\"\r\n              goal=\"1\"\r\n              card-title=\"Complete a Survey\"\r\n              description=\"Fill out our NPS survey and get 20 points for giving us honest feedback.\"\r\n              button-text=\"Take survey\"\r\n              reward-unit=\"Points\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"250\"\r\n              goal=\"500\"\r\n              show-progress-bar\r\n              card-title=\"Spend $500\"\r\n              description=\"Earn 250 points when you spend $500 or more.\"\r\n              button-text=\"See plans\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              progress-bar-unit=\"$\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              goal=\"1\"\r\n              reward-amount=\"50\"\r\n              card-title=\"Follow Us on Twitter\"\r\n              description=\"Earn 50 points when you follow us on Twitter!\"\r\n              button-text=\"Follow\"\r\n              button-link=\"https://twitter.com/\"\r\n              open-new-tab=\"true\"\r\n              event-key=\"socialFollow\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              finite=\"0\"\r\n              reward-unit=\"Points\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n            <sqm-task-card\r\n              reward-amount=\"1\"\r\n              reward-unit=\"Free Month\"\r\n              goal=\"1\"\r\n              card-title=\"Upgrade Your Plan\"\r\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\r\n              button-text=\"Upgrade\"\r\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\r\n              ended-message=\"Ended {endDate}\"\r\n              expiry-message=\"Ends {endDate}\"\r\n              open-new-tab=\"false\"\r\n              finite=\"0\"\r\n              starts-on-message=\"Starts {startDate}\"\r\n            >\r\n            </sqm-task-card>\r\n          </sqm-card-feed>\r\n          <sqm-portal-container\r\n            gap=\"large\"\r\n            direction=\"column\"\r\n            display=\"grid\"\r\n            max-width=\"100%\"\r\n            padding=\"none\"\r\n          >\r\n            <sqm-titled-section\r\n              padding=\"none\"\r\n              text-align=\"center\"\r\n              label-margin=\"xx-small\"\r\n            >\r\n              <h3 slot=\"label\">Reward History</h3>\r\n            </sqm-titled-section>\r\n            <sqm-rewards-table\r\n              per-page=\"4\"\r\n              hidden-columns=\"0\"\r\n              more-label=\"Next\"\r\n              prev-label=\"Prev\"\r\n              sm-breakpoint=\"599\"\r\n              md-breakpoint=\"799\"\r\n            >\r\n              <sqm-rewards-table-reward-column\r\n                available-text=\"{availableAmount} remaining\"\r\n                column-title=\"Reward\"\r\n                copy-text=\"Copied!\"\r\n                redeemed-text=\"{redeemedAmount} redeemed\"\r\n              >\r\n              </sqm-rewards-table-reward-column>\r\n              <sqm-rewards-table-source-column\r\n                anonymous-user=\"Anonymous User\"\r\n                column-title=\"Source\"\r\n                deleted-user=\"Deleted User\"\r\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\r\n                reward-exchange-text=\"Reward Exchange\"\r\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\r\n              >\r\n              </sqm-rewards-table-source-column>\r\n              <sqm-rewards-table-status-column\r\n                column-title=\"Status\"\r\n                expiry-text=\"Expires on \"\r\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\r\n              >\r\n              </sqm-rewards-table-status-column>\r\n              <sqm-rewards-table-date-column\r\n                column-title=\"Date received\"\r\n                date-shown=\"dateGiven\"\r\n              >\r\n              </sqm-rewards-table-date-column>\r\n              <sqm-empty\r\n                slot=\"empty\"\r\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\r\n                empty-state-header=\"View your rewards\"\r\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\r\n              >\r\n              </sqm-empty>\r\n            </sqm-rewards-table>\r\n          </sqm-portal-container>\r\n        </sqm-portal-container>\r\n        <sqm-portal-footer\r\n          support-email=\"support@example.com\"\r\n          terms-link=\"https://example.com\"\r\n          faq-link=\"https://example.com\"\r\n          terms-text=\"Terms And Conditions\"\r\n          faq-text=\"FAQ\"\r\n          show-powered-by=\"true\"\r\n          padding-bottom=\"none\"\r\n          padding-left=\"none\"\r\n          padding-right=\"none\"\r\n          padding-top=\"none\"\r\n        ></sqm-portal-footer>\r\n      </sqm-portal-container>\r\n    </sqm-portal-container>\r\n  </sqm-portal-container>\r\n</sqm-brand>\r\n";
 
 const Widget_stories = {
   title: "Templates / Widgets",
@@ -3957,43 +3924,12 @@ const NavigationSidebar_stories = {
   title: "Components/Navigation Sidebar",
 };
 const DefaultNavigationSidebar = () => {
-  const barProps = {
-    data: {
-      programs: [
-        {
-          key: "program1",
-          label: "My Referral Program",
-        },
-        {
-          key: "program2",
-          label: "My Rewards Program",
-        },
-      ],
-    },
-  };
-  const item1Props = {
-    states: {
-      active: false,
-    },
-    data: {
-      label: "Dashboard",
-      icon: "house",
-      path: "/",
-    },
-  };
-  const item2Props = {
-    states: {
-      active: true,
-    },
-    data: {
-      label: "Activity",
-      icon: "bar-chart",
-      path: "/",
-    },
-  };
-  return (index.h(sqmNavigationSidebarView.NavigationSidebarView, Object.assign({}, barProps),
-    index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item1Props)),
-    index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item2Props))));
+  return (index.h("div", null)
+  // <NavigationSidebarView {...barProps}>
+  //   <NavigationSidebarItemView {...item1Props} />
+  //   <NavigationSidebarItemView {...item2Props} />
+  // </NavigationSidebarView>
+  );
 };
 
 const NavigationSidebar = /*#__PURE__*/Object.freeze({
@@ -4058,6 +3994,7 @@ const PortalRegister_stories = {
 };
 const defaultProps$3 = {
   states: {
+    registrationFormState: {},
     error: "",
     loading: false,
     confirmPassword: true,
@@ -4076,6 +4013,7 @@ const defaultProps$3 = {
 const errorProps$1 = {
   states: {
     error: "Something went wrong. Please try again.",
+    registrationFormState: {},
     loading: false,
     confirmPassword: true,
     hideInputs: false,
@@ -4095,6 +4033,7 @@ const errorProps$1 = {
 };
 const loadingProps$1 = {
   states: {
+    registrationFormState: {},
     error: "",
     loading: true,
     confirmPassword: true,
@@ -4112,6 +4051,7 @@ const loadingProps$1 = {
 };
 const slottedProps = {
   states: {
+    registrationFormState: {},
     error: "",
     loading: false,
     confirmPassword: true,
@@ -4139,6 +4079,7 @@ const RegisterLoading = () => index.h(ShadowViewAddon.PortalRegisterView, Object
 const FieldsHidden = () => {
   return (index.h("sqm-portal-register", { demoData: {
       states: {
+        registrationFormState: {},
         error: "",
         loading: true,
         confirmPassword: true,
@@ -4584,44 +4525,13 @@ const AssetCard = /*#__PURE__*/Object.freeze({
 const DividedLayout_stories = {
   title: "Components/Divided Layout",
 };
-const barProps$1 = {
-  data: {
-    programs: [
-      {
-        key: "program1",
-        label: "My Referral Program",
-      },
-      {
-        key: "program2",
-        label: "My Rewards Program",
-      },
-    ],
-  },
-};
-const item1Props$1 = {
-  states: {
-    active: false,
-  },
-  data: {
-    label: "Dashboard",
-    icon: "house",
-    path: "/",
-  },
-};
-const item2Props$1 = {
-  states: {
-    active: true,
-  },
-  data: {
-    label: "Activity",
-    icon: "bar-chart",
-    path: "/",
-  },
-};
 const Sidebar$1 = () => {
-  return (index.h(sqmNavigationSidebarView.NavigationSidebarView, Object.assign({}, barProps$1),
-    index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item1Props$1)),
-    index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item2Props$1))));
+  return (index.h("div", null)
+  // <NavigationSidebarView {...barProps}>
+  //   <NavigationSidebarItemView {...item1Props} />
+  //   <NavigationSidebarItemView {...item2Props} />
+  // </NavigationSidebarView>
+  );
 };
 const Row = () => {
   return (index.h("sqm-divided-layout", { direction: "row" },
@@ -5324,7 +5234,7 @@ const ReferralTableRewardsCell = /*#__PURE__*/Object.freeze({
   tenRewardsCell: tenRewardsCell
 });
 
-const scenario$c = "@owner:sam\r\n@author:sam\r\nFeature: Referral Table\r\n\r\n    The Referral table component shows users a list of their referrals. The referral table it's self can be customized\r\n    with a collection of columns.\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state is shown if there are no referrals\r\n        Given a user with no referrals\r\n        When they view the referral table\r\n        Then no referrals are displayed\r\n        And they see an image with a user icon\r\n        And \"View your referral details\" in bold\r\n        And \"Track the status of your referrals and rewards earned by referring friends\" below the bolded text\r\n        And the pagination buttons are disabled\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state image and text are customizable\r\n        Given the referral table has 'sqm-empty' as a child with the following props\r\n            | prop               | value                                                                                                                           |\r\n            | empty-state-imgage | https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png |\r\n            | empty-state-header | View your referral history                                                                                                      |\r\n            | empty-state-text   | See your previous referrals and what you earned!                                                                                |\r\n        And a user with no referrals\r\n        When they view the referral table\r\n        Then they see no referrals\r\n        And they see the SaaSquatch logo\r\n        And \"View your referral history\" in bold\r\n        And \"See your previous referrals and what you earned!\" below the bolded text\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: A custom empty state can be provided\r\n        Given a user with no referrals\r\n        And a custom empty state has been supplied in the \"empty\" slot\r\n        When they view the referral table\r\n        Then they see the custom empty state\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The loading state is shown while referrals are loading\r\n        Given the table is loading\r\n        Then the loading state is shown in the table\r\n        And a custom loading state can be supplied in the \"loading\" slot\r\n        And the pagination buttons are disabled\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The table becomes paginated when the number of referrals exceeds the per page limit\r\n        Given the user has <number of referrals>\r\n        And the table is configured to show <page limit> referrals per page\r\n        Then the table will have <number of pages> page(s)\r\n        And pagination buttons will allow users to navigate between pages\r\n        And the pagination button to go to the next page is disabled on the last page of referrals\r\n        And the pagination button to go to the previous page is disabled on the first page of referrals\r\n        Examples:\r\n            | number of referrals | page limit | number of pages |\r\n            | 0                   | 4          | 1               |\r\n            | 1                   | 4          | 1               |\r\n            | 3                   | 4          | 1               |\r\n            | 5                   | 4          | 2               |\r\n            | 42                  | 4          | 11              |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The table converts to a card view on tablet and mobile window sizes\r\n        Given a user with referrals\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then referrals are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"599px\"\r\n        Then the referrals are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Table and Mobile beakpoints can be configured\r\n        Given the referral table has been configured with the following props\r\n            | prop         | value |\r\n            | smBreakpoint | 599   |\r\n            | mdBreakpoint | 799   |\r\n        And a user with referrals\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then referrals are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"599px\"\r\n        Then the referrals are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: By default the first column heading is hidden in mobile, but others can be hidden\r\n        Given a referral table with 4 columns\r\n        And prop \"hidden-columns\" with <hideColumnValue>\r\n        And a user with referrals\r\n        When they view the referral table\r\n        And their window size is below the tablet breakpoint\r\n        Then referral cards are displayed\r\n        And the titles of <columnsArehidden> within the card\r\n        Examples:\r\n            | hideColumnValue | columnsArehidden                    |\r\n            |                 | the first column                    |\r\n            | 0,1,2           | the first, second and third columns |\r\n            | 3               | the fourth column                   |\r\n\r\n    @motivating\r\n    Scenario: The use who referred the current user can be shown in the table\r\n        Given the table is configured with <showReferrer> set to true\r\n        And the current user was referrered by <referrer>\r\n        Then the first table row on the first page of the table is for <referrer>\r\n\r\n    @motivating\r\n    Scenario: Only referrals which occured in the program specific by program-id are shown\r\n        Given the table is configured with \"program-id\"\r\n        Then only referrals from the program with \"program-id\" are shown\r\n\r\n    @motivating\r\n    Scenario: Classic program shows only classic referrals\r\n        Given the \"program-id\" of the table is set to \"classic\"\r\n        Then only classic referrals are shown in the table\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: Column heading can be hidden\r\n        Given the table is configured with \"show-labels\" set to false\r\n        Then the table is displayed without column headings";
+const scenario$c = "@owner:sam\r\n@author:sam\r\nFeature: Referral Table\r\n\r\n    The Referral table component shows users a list of their referrals. The referral table it's self can be customized\r\n    with a collection of columns.\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state is shown if there are no referrals\r\n        Given a user with no referrals\r\n        When they view the referral table\r\n        Then no referrals are displayed\r\n        And they see an image with a user icon\r\n        And \"View your referral details\" in bold\r\n        And \"Track the status of your referrals and rewards earned by referring friends\" below the bolded text\r\n        And the pagination buttons are disabled\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state image and text are customizable\r\n        Given the referral table has 'sqm-empty' as a child with the following props\r\n            | prop               | value                                                                                                                           |\r\n            | empty-state-imgage | https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png |\r\n            | empty-state-header | View your referral history                                                                                                      |\r\n            | empty-state-text   | See your previous referrals and what you earned!                                                                                |\r\n        And a user with no referrals\r\n        When they view the referral table\r\n        Then they see no referrals\r\n        And they see the SaaSquatch logo\r\n        And \"View your referral history\" in bold\r\n        And \"See your previous referrals and what you earned!\" below the bolded text\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: A custom empty state can be provided\r\n        Given a user with no referrals\r\n        And a custom empty state has been supplied in the \"empty\" slot\r\n        When they view the referral table\r\n        Then they see the custom empty state\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The loading state is shown while referrals are loading\r\n        Given the table is loading\r\n        Then the loading state is shown in the table\r\n        And a custom loading state can be supplied in the \"loading\" slot\r\n        And the pagination buttons are disabled\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The table becomes paginated when the number of referrals exceeds the per page limit\r\n        Given the user has <number of referrals>\r\n        And the table is configured to show <page limit> referrals per page\r\n        Then the table will have <number of pages> page(s)\r\n        And pagination buttons will allow users to navigate between pages\r\n        And the pagination button to go to the next page is disabled on the last page of referrals\r\n        And the pagination button to go to the previous page is disabled on the first page of referrals\r\n        Examples:\r\n            | number of referrals | page limit | number of pages |\r\n            | 0                   | 4          | 1               |\r\n            | 1                   | 4          | 1               |\r\n            | 3                   | 4          | 1               |\r\n            | 5                   | 4          | 2               |\r\n            | 42                  | 4          | 11              |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The table converts to a card view on tablet and mobile window sizes\r\n        Given a user with referrals\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then referrals are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"599px\"\r\n        Then the referrals are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Table and Mobile beakpoints can be configured\r\n        Given the referral table has been configured with the following props\r\n            | prop         | value |\r\n            | smBreakpoint | 599   |\r\n            | mdBreakpoint | 799   |\r\n        And a user with referrals\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then referrals are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"599px\"\r\n        Then the referrals are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: By default the first column heading is hidden in mobile, but others can be hidden\r\n        Given a referral table with 4 columns\r\n        And prop \"hidden-columns\" with <hideColumnValue>\r\n        And a user with referrals\r\n        When they view the referral table\r\n        And their window size is below the tablet breakpoint\r\n        Then referral cards are displayed\r\n        And the titles of <columnsArehidden> within the card\r\n        Examples:\r\n            | hideColumnValue | columnsArehidden                    |\r\n            |                 | the first column                    |\r\n            | 0,1,2           | the first, second and third columns |\r\n            | 3               | the fourth column                   |\r\n\r\n    @motivating\r\n    Scenario: The use who referred the current user can be shown in the table\r\n        Given the table is configured with <showReferrer> set to true\r\n        And the current user was referrered by <referrer>\r\n        Then the first table row on the first page of the table is for <referrer>\r\n\r\n    @motivating\r\n    Scenario: Only referrals which occured in the program specific by program-id are shown\r\n        Given the table is configured with \"program-id\"\r\n        Then only referrals from the program with \"program-id\" are shown\r\n\r\n    @motivating\r\n    Scenario: Classic program shows only classic referrals\r\n        Given the \"program-id\" of the table is set to \"classic\"\r\n        Then only classic referrals are shown in the table\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: Column heading can be hidden\r\n        Given the table is configured with \"hide-labels\" set to \"true\"\r\n        Then the table is displayed without column headings";
 
 const ReferralTable_stories = {
   title: "Components/Referral Table",
@@ -5986,7 +5896,9 @@ const Start = () => {
       initValue: "",
       states: {
         enableValidation: true,
-        validationErrors: {},
+        registrationFormState: {
+          validationErrors: {},
+        },
         content: {
           fieldLabel: "Password",
         },
@@ -5998,7 +5910,9 @@ const EmptyError = () => {
       initValue: "",
       states: {
         enableValidation: true,
-        validationErrors: { password: "Cannot be empty" },
+        registrationFormState: {
+          validationErrors: { password: "Cannot be empty" },
+        },
         content: {
           fieldLabel: "Password",
         },
@@ -6010,7 +5924,9 @@ const ValidationError = () => {
       initValue: "asdf",
       states: {
         enableValidation: true,
-        validationErrors: { password: "Incomplete" },
+        registrationFormState: {
+          validationErrors: { password: "Incomplete" },
+        },
         content: {
           fieldLabel: "Password",
         },
@@ -9578,21 +9494,21 @@ var marked = stencilHooks_module.createCommonjsModule(function (module, exports)
 })));
 });
 
-const LoginReadme = "# sqm-portal-login\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property              | Attribute               | Description                         | Type                                                                                                                                                                                                                                                            | Default                     |\r\n| --------------------- | ----------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\r\n| `demoData`            | --                      |                                     | `{ states?: { error: string; loading: boolean; forgotPasswordPath: string; registerPath: string; }; content?: { forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }` | `undefined`                 |\r\n| `emailLabel`          | `email-label`           | Label for email field               | `string`                                                                                                                                                                                                                                                        | `\"Email\"`                   |\r\n| `forgotPasswordLabel` | `forgot-password-label` | Label for forgotten password button | `string`                                                                                                                                                                                                                                                        | `\"Forgot Password?\"`        |\r\n| `forgotPasswordPath`  | `forgot-password-path`  | Forgot password redirect path       | `string`                                                                                                                                                                                                                                                        | `\"/forgotPassword\"`         |\r\n| `nextPage`            | `next-page`             | Page navigated to after sign-in     | `string`                                                                                                                                                                                                                                                        | `\"/\"`                       |\r\n| `pageLabel`           | `page-label`            |                                     | `string`                                                                                                                                                                                                                                                        | `\"Sign in to your account\"` |\r\n| `passwordLabel`       | `password-label`        | Label for password field            | `string`                                                                                                                                                                                                                                                        | `\"Password\"`                |\r\n| `registerLabel`       | `register-label`        | Label for register button           | `string`                                                                                                                                                                                                                                                        | `\"Register\"`                |\r\n| `registerPath`        | `register-path`         | Register redirect path              | `string`                                                                                                                                                                                                                                                        | `\"/register\"`               |\r\n| `submitLabel`         | `submit-label`          | Label for submit button             | `string`                                                                                                                                                                                                                                                        | `\"Sign In\"`                 |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-login --> sqm-form-message\r\n  sqm-stencilbook --> sqm-portal-login\r\n  style sqm-portal-login fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+const LoginReadme = "# sqm-portal-login\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property              | Attribute               | Description                                                       | Type                                                                                                                                                                                                                                                            | Default                     |\r\n| --------------------- | ----------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\r\n| `demoData`            | --                      |                                                                   | `{ states?: { error: string; loading: boolean; forgotPasswordPath: string; registerPath: string; }; content?: { forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }` | `undefined`                 |\r\n| `emailLabel`          | `email-label`           |                                                                   | `string`                                                                                                                                                                                                                                                        | `\"Email\"`                   |\r\n| `forgotPasswordLabel` | `forgot-password-label` |                                                                   | `string`                                                                                                                                                                                                                                                        | `\"Forgot Password?\"`        |\r\n| `forgotPasswordPath`  | `forgot-password-path`  | Redirect participants to this page to reset their password        | `string`                                                                                                                                                                                                                                                        | `\"/forgotPassword\"`         |\r\n| `nextPage`            | `next-page`             | Redirect participants to this page after they successfully login. | `string`                                                                                                                                                                                                                                                        | `\"/\"`                       |\r\n| `pageLabel`           | `page-label`            |                                                                   | `string`                                                                                                                                                                                                                                                        | `\"Sign in to your account\"` |\r\n| `passwordLabel`       | `password-label`        |                                                                   | `string`                                                                                                                                                                                                                                                        | `\"Password\"`                |\r\n| `registerLabel`       | `register-label`        |                                                                   | `string`                                                                                                                                                                                                                                                        | `\"Register\"`                |\r\n| `registerPath`        | `register-path`         | Redirect participants to this page to start registration.         | `string`                                                                                                                                                                                                                                                        | `\"/register\"`               |\r\n| `submitLabel`         | `submit-label`          |                                                                   | `string`                                                                                                                                                                                                                                                        | `\"Sign In\"`                 |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-login --> sqm-form-message\r\n  sqm-stencilbook --> sqm-portal-login\r\n  style sqm-portal-login fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const ReferralIframeReadme = "# sqm-referral-iframe\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property       | Attribute       | Description                    | Type                                                                                                                           | Default     |\r\n| -------------- | --------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | ----------- |\r\n| `demoData`     | --              |                                | `{ states?: { content: { iframeSrc: string; iframeHeight: string; iframeWidth: string; }; }; data?: { shareCode: string; }; }` | `undefined` |\r\n| `iframeHeight` | `iframe-height` | Height of the iframe container | `string`                                                                                                                       | `\"100%\"`    |\r\n| `iframeSrc`    | `iframe-src`    | URL of iframe to display       | `string`                                                                                                                       | `undefined` |\r\n| `iframeWidth`  | `iframe-width`  | Width of the iframe container  | `string`                                                                                                                       | `\"100%\"`    |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-stencilbook --> sqm-referral-iframe\r\n  style sqm-referral-iframe fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+const ReferralIframeReadme = "# sqm-referral-iframe\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property       | Attribute       | Description                                                                                     | Type                                                                                                                           | Default     |\r\n| -------------- | --------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----------- |\r\n| `demoData`     | --              |                                                                                                 | `{ states?: { content: { iframeSrc: string; iframeHeight: string; iframeWidth: string; }; }; data?: { shareCode: string; }; }` | `undefined` |\r\n| `iframeHeight` | `iframe-height` | Define the height of the iframe with any valid CSS height value. Example: 100px, 5rem, or auto. | `string`                                                                                                                       | `\"100%\"`    |\r\n| `iframeSrc`    | `iframe-src`    | URL of iframe to display                                                                        | `string`                                                                                                                       | `undefined` |\r\n| `iframeWidth`  | `iframe-width`  | Define the width of the iframe with any valid CSS width value. Example: 100px, 5rem, or auto.   | `string`                                                                                                                       | `\"100%\"`    |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-stencilbook --> sqm-referral-iframe\r\n  style sqm-referral-iframe fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const ForgotPasswordReadme = "# sqm-portal-forgot-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property       | Attribute       | Description                                                          | Type                                                                                                                                                                                        | Default                    |\r\n| -------------- | --------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |\r\n| `demoData`     | --              |                                                                      | `{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined`                |\r\n| `emailLabel`   | `email-label`   |                                                                      | `string`                                                                                                                                                                                    | `\"Email\"`                  |\r\n| `loginPath`    | `login-path`    |                                                                      | `string`                                                                                                                                                                                    | `\"/login\"`                 |\r\n| `redirectPath` | `redirect-path` | The page that users are redirected to from the password reset email. | `string`                                                                                                                                                                                    | `\"/resetPassword\"`         |\r\n| `submitLabel`  | `submit-label`  |                                                                      | `string`                                                                                                                                                                                    | `\"Request Password Reset\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-forgot-password --> sqm-form-message\r\n  style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+const ForgotPasswordReadme = "# sqm-portal-forgot-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property       | Attribute       | Description                                                       | Type                                                                                                                                                                                        | Default                                                      |\r\n| -------------- | --------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |\r\n| `demoData`     | --              |                                                                   | `{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined`                                                  |\r\n| `emailLabel`   | `email-label`   |                                                                   | `string`                                                                                                                                                                                    | `\"Email\"`                                                    |\r\n| `headerText`   | `header-text`   |                                                                   | `string`                                                                                                                                                                                    | `\"Enter your email below to receive a password reset link.\"` |\r\n| `loginPath`    | `login-path`    |                                                                   | `string`                                                                                                                                                                                    | `\"/login\"`                                                   |\r\n| `loginText`    | `login-text`    | Sign In Link Text                                                 | `string`                                                                                                                                                                                    | `\"Sign In\"`                                                  |\r\n| `redirectPath` | `redirect-path` | Redirect participants to this page after they verify their email. | `string`                                                                                                                                                                                    | `\"/resetPassword\"`                                           |\r\n| `submitLabel`  | `submit-label`  |                                                                   | `string`                                                                                                                                                                                    | `\"Request Password Reset\"`                                   |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-forgot-password --> sqm-form-message\r\n  style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                   | Attribute                    | Description                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default              |\r\n| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword`          | `confirm-password`           | Show or hide the confirm password input                            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\r\n| `confirmPasswordLabel`     | `confirm-password-label`     |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Confirm Password\"` |\r\n| `demoData`                 | --                           |                                                                    | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }` | `undefined`          |\r\n| `emailLabel`               | `email-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Email\"`            |\r\n| `enablePasswordValidation` | `enable-password-validation` |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `true`               |\r\n| `hideInputs`               | `hide-inputs`                | Hide default input fields to use custom fields                     | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\r\n| `loginLabel`               | `login-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Sign in\"`          |\r\n| `loginPath`                | `login-path`                 | Login button redirection path                                      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/login\"`           |\r\n| `nextPage`                 | `next-page`                  | Page navigated to after registration                               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/\"`                |\r\n| `pageLabel`                | `page-label`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\r\n| `passwordLabel`            | `password-label`             |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Password\"`         |\r\n| `redirectPath`             | `redirect-path`              | The page that users are redirected to from the verification email. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/verifyEmail\"`     |\r\n| `submitLabel`              | `submit-label`               |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-register --> sqm-form-message\r\n  sqm-portal-register --> sqm-password-field\r\n  sqm-stencilbook --> sqm-portal-register\r\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                    | Attribute                     | Description                                                                                                                                                                                            | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Default              |\r\n| --------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword`           | `confirm-password`            |                                                                                                                                                                                                        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                | `false`              |\r\n| `confirmPasswordLabel`      | `confirm-password-label`      |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `\"Confirm Password\"` |\r\n| `demoData`                  | --                            |                                                                                                                                                                                                        | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; registrationFormState: RegistrationFormState; disablePasswordValidation?: 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`          |\r\n| `disablePasswordValidation` | `disable-password-validation` |                                                                                                                                                                                                        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                | `false`              |\r\n| `emailLabel`                | `email-label`                 |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `\"Email\"`            |\r\n| `hideInputs`                | `hide-inputs`                 | Hides the email and password fields. Note: If you hide default inputs, you must add additional input fields. They must have the input name attributes \"email\" and \"password\" for this form to succeed. | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                | `false`              |\r\n| `loginLabel`                | `login-label`                 |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `\"Sign in\"`          |\r\n| `loginPath`                 | `login-path`                  | Redirect participants to this page after clicking the login button.                                                                                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `\"/login\"`           |\r\n| `nextPage`                  | `next-page`                   | Redirect participants to this page from their verification email                                                                                                                                       | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `\"/\"`                |\r\n| `pageLabel`                 | `page-label`                  |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `\"Register\"`         |\r\n| `passwordLabel`             | `password-label`              |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `\"Password\"`         |\r\n| `redirectPath`              | `redirect-path`               | The page that participants are redirected to from the verification email.                                                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `\"/verifyEmail\"`     |\r\n| `submitLabel`               | `submit-label`                |                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `\"Register\"`         |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-register --> sqm-form-message\r\n  sqm-portal-register --> sqm-password-field\r\n  sqm-stencilbook --> sqm-portal-register\r\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const EditProfileReadme = "# sqm-portal-profile\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                 | Attribute                   | Description                    | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default                  |\r\n| ------------------------ | --------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\r\n| `countrytext`            | `countrytext`               | Country input field label      | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Country\"`              |\r\n| `demoData`               | --                          |                                | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }` | `undefined`              |\r\n| `editProfileHeader`      | `edit-profile-header`       |                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Edit your profile\"`    |\r\n| `editProfileSubHeader`   | `edit-profile-sub-header`   |                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Personal Information\"` |\r\n| `emailtext`              | `emailtext`                 | Email input field label        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Email\"`                |\r\n| `firstnametext`          | `firstnametext`             | First name input field label   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"First Name\"`           |\r\n| `lastnametext`           | `lastnametext`              | Last name input field label    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Last Name\"`            |\r\n| `showCountry`            | `show-country`              | Show or hide the country field | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `true`                   |\r\n| `submitChangeButtonText` | `submit-change-button-text` |                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Submit Changes\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-profile --> sqm-form-message\r\n  style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+const EditProfileReadme = "# sqm-portal-profile\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                 | Attribute                   | Description | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default                  |\r\n| ------------------------ | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\r\n| `countrytext`            | `countrytext`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Country\"`              |\r\n| `demoData`               | --                          |             | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }` | `undefined`              |\r\n| `editProfileHeader`      | `edit-profile-header`       |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Edit your profile\"`    |\r\n| `editProfileSubHeader`   | `edit-profile-sub-header`   |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Personal Information\"` |\r\n| `emailtext`              | `emailtext`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Email\"`                |\r\n| `firstnametext`          | `firstnametext`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"First Name\"`           |\r\n| `hideCountry`            | `hide-country`              |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                  |\r\n| `lastnametext`           | `lastnametext`              |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Last Name\"`            |\r\n| `submitChangeButtonText` | `submit-change-button-text` |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Submit Changes\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-profile --> sqm-form-message\r\n  style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const ResetPasswordReadme = "# sqm-portal-reset-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                    | Attribute                      | Description                                                                                      | Type                                                                                                                                                                                                                                                                                                                                                                                                 | Default                 |\r\n| --------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |\r\n| `confirmPassword`           | `confirm-password`             | Show or hide confirm password field                                                              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                            | `false`                 |\r\n| `confirmPasswordFieldLabel` | `confirm-password-field-label` |                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Confirm Password\"`    |\r\n| `continueButtonText`        | `continue-button-text`         | Button text displayed after a successful password reset                                          | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Continue\"`            |\r\n| `demoData`                  | --                             |                                                                                                  | `{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; content: { passwordResetHeader: string; resetPasswordHeader: string; continueButtonText: string; resetPasswordButtonText: string; confirmPasswordFieldLabel: string; passwordFieldLabel: string; }; }; }` | `undefined`             |\r\n| `failedPage`                | `failed-page`                  | The page that users are redirected to if the reset fails due to outdated password reset attempt. | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"/\"`                   |\r\n| `nextPage`                  | `next-page`                    | The page that users are redirected to when the password reset succeeds.                          | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"/\"`                   |\r\n| `passwordFieldLabel`        | `password-field-label`         |                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"New Password\"`        |\r\n| `passwordResetHeader`       | `password-reset-header`        | Displayed after a successful password reset                                                      | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Password reset\"`      |\r\n| `resetPasswordButtonText`   | `reset-password-button-text`   |                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Reset Password\"`      |\r\n| `resetPasswordHeader`       | `reset-password-header`        |                                                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Reset your password\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-reset-password --> sqm-form-message\r\n  sqm-portal-reset-password --> sqm-password-field\r\n  style sqm-portal-reset-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+const ResetPasswordReadme = "# sqm-portal-reset-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                    | Attribute                      | Description                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                 | Default                 |\r\n| --------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |\r\n| `confirmPassword`           | `confirm-password`             |                                                                                              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                            | `false`                 |\r\n| `confirmPasswordFieldLabel` | `confirm-password-field-label` |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Confirm Password\"`    |\r\n| `continueButtonText`        | `continue-button-text`         | Button text displayed after a successful password reset.                                     | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Continue\"`            |\r\n| `demoData`                  | --                             |                                                                                              | `{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; content: { passwordResetHeader: string; resetPasswordHeader: string; continueButtonText: string; resetPasswordButtonText: string; confirmPasswordFieldLabel: string; passwordFieldLabel: string; }; }; }` | `undefined`             |\r\n| `failedPage`                | `failed-page`                  | Redirect participants to this page if password reset fails due to an outdated reset attempt. | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"/\"`                   |\r\n| `nextPage`                  | `next-page`                    | Redirect participants to this page when they successfully reset their password.              | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"/\"`                   |\r\n| `passwordFieldLabel`        | `password-field-label`         |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"New Password\"`        |\r\n| `passwordResetHeader`       | `password-reset-header`        | Displayed after a successful password reset.                                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Password reset\"`      |\r\n| `resetPasswordButtonText`   | `reset-password-button-text`   |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Reset Password\"`      |\r\n| `resetPasswordHeader`       | `reset-password-header`        |                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                             | `\"Reset your password\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-reset-password --> sqm-form-message\r\n  sqm-portal-reset-password --> sqm-password-field\r\n  style sqm-portal-reset-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const EmailVerificationReadme = "# sqm-portal-email-verification\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                  | Attribute                   | Description                                                        | Type                                                                                                                                                                                        | Default                                                                                           |\r\n| ------------------------- | --------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\r\n| `demoData`                | --                          |                                                                    | `{ states?: { error: string; loading: boolean; success: boolean; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; }; }` | `undefined`                                                                                       |\r\n| `emailVerificationHeader` | `email-verification-header` |                                                                    | `string`                                                                                                                                                                                    | `\"Verify your email\"`                                                                             |\r\n| `redirectPath`            | `redirect-path`             | The page that users are redirected to from the verification email. | `string`                                                                                                                                                                                    | `\"/verifyEmail\"`                                                                                  |\r\n| `resendEmailButtonText`   | `resend-email-button-text`  |                                                                    | `string`                                                                                                                                                                                    | `\"Re-send Email\"`                                                                                 |\r\n| `verifyMessage`           | `verify-message`            |                                                                    | `string`                                                                                                                                                                                    | `\"A verification email was sent to {email}. Please verify your email to continue to the portal.\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-email-verification --> sqm-form-message\r\n  style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+const EmailVerificationReadme = "# sqm-portal-email-verification\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                  | Attribute                   | Description                                                       | Type                                                                                                                                                                                        | Default                                                                                                                                                  |\r\n| ------------------------- | --------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `demoData`                | --                          |                                                                   | `{ states?: { error: string; loading: boolean; success: boolean; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; }; }` | `undefined`                                                                                                                                              |\r\n| `emailVerificationHeader` | `email-verification-header` |                                                                   | `string`                                                                                                                                                                                    | `\"Verify your email\"`                                                                                                                                    |\r\n| `redirectPath`            | `redirect-path`             | Redirect participants to this page from their verification email. | `string`                                                                                                                                                                                    | `\"/verifyEmail\"`                                                                                                                                         |\r\n| `resendEmailButtonText`   | `resend-email-button-text`  |                                                                   | `string`                                                                                                                                                                                    | `\"Re-send Email\"`                                                                                                                                        |\r\n| `verifyMessage`           | `verify-message`            |                                                                   | `string`                                                                                                                                                                                    | `\"A verification email was sent to {email}. Please verify your email to continue to the portal. Resending an email will invalidate the previous email.\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-email-verification --> sqm-form-message\r\n  style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const EmailVerifiedReadme = "# sqm-portal-verify-email\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property     | Attribute     | Description                                                                                       | Type                                                                                                 | Default     |\r\n| ------------ | ------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |\r\n| `demoData`   | --            |                                                                                                   | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\r\n| `failedPage` | `failed-page` | The page that users are redirected to if verification fails due to outdated verification attempt. | `string`                                                                                             | `\"/\"`       |\r\n| `nextPage`   | `next-page`   | The page that users are redirected to when the verification succeeds.                             | `string`                                                                                             | `\"/\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-verify-email --> sqm-form-message\r\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+const EmailVerifiedReadme = "# sqm-portal-verify-email\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property     | Attribute     | Description                                                                                       | Type                                                                                                 | Default     |\r\n| ------------ | ------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |\r\n| `demoData`   | --            |                                                                                                   | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\r\n| `failedPage` | `failed-page` | Redirect participants to this page if verification fails due to an outdated verification attempt. | `string`                                                                                             | `\"/\"`       |\r\n| `nextPage`   | `next-page`   | Redirect participants to this page when they successfully verify their email.                     | `string`                                                                                             | `\"/\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-verify-email --> sqm-form-message\r\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
 const PortalTemplates_stories = {
   title: "Templates / Portal",
@@ -9632,16 +9548,16 @@ function DefaultTemplateView$1(props) {
         gridTemplateColumns: "repeat(9, 80px)",
         gridGap: "10px",
       } },
-      index.h("button", { onClick: () => index_module.wn.push("/") }, "Dashboard"),
-      props.leadSubmit && (index.h("button", { onClick: () => index_module.wn.push("/refer") }, "Submit a Referral")),
-      index.h("button", { onClick: () => index_module.wn.push("/activity") }, "Activity"),
-      index.h("button", { onClick: () => index_module.wn.push("/editProfile") }, "Edit Profile"),
-      index.h("button", { onClick: () => index_module.wn.push("/login") }, "Login"),
-      index.h("button", { onClick: () => index_module.wn.push("/register") }, "Register"),
-      index.h("button", { onClick: () => index_module.wn.push("/emailVerification") }, "Email Verification"),
-      index.h("button", { onClick: () => index_module.wn.push("/verifyEmail") }, "Verify Email"),
-      index.h("button", { onClick: () => index_module.wn.push("/forgotPassword") }, "Forgot Password"),
-      index.h("button", { onClick: () => index_module.wn.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 })));
 }
@@ -9801,7 +9717,7 @@ const PoweredByImg = /*#__PURE__*/Object.freeze({
   CustomWidthAndHeight: CustomWidthAndHeight
 });
 
-const scenario$f = "Feature: Portal Footer\r\n\r\n    Background: A user is viewing the portal\r\n        Given a hosted portal\r\n        And a user is viewing the portal\r\n        And the portal has a footer\r\n\r\n    Scenario Outline: FAQ and T&C links/text are configurable and open in a new page when clicked\r\n        Given the footer has prop \"terms-link\" with value \"https://example.com/terms\"\r\n        And prop \"terms-text\" with value \"Terms and Conditions\"\r\n        And prop \"faq-link\" with value \"https://example.com/FAQ\"\r\n        And prop \"faq-text\" with value \"Visit FAQ\"\r\n        When a user clicks on the \"Visit FAQ\" link\r\n        Then they will be redirected to \"https://example.com/FAQ\" in a new page\r\n        When they go back to the portal\r\n        And click on the \"Terms and Conditions\" link\r\n        Then they will be redirected to \"https://example.com/terms\" in a new page\r\n\r\n    Scenario Outline: FAQ/T&C Links are not shown if a link is not provided\r\n        Given the footer does not have <linkProp>\r\n        But it <mayHave> <textProp> with <value>\r\n        Then the <link> will not be shown in the footer\r\n        Examples:\r\n            | linkProp   | mayHave      | textProp  | value                | link     |\r\n            | terms-link | has          | termsText | Terms and Conditions | T&C Link |\r\n            | faq-link   | has          | faqText   | Visit FAQ            | FAQ Link |\r\n            | terms-link | doesn't have |           |                      | T&C Link |\r\n            | faq-link   | doesn't have |           |                      | FAQ Link |\r\n\r\n    Scenario Outline: The support email and text is configurable but has a default\r\n        Given the footer <mayHave> <emailPropWithValue>\r\n        And the footer <mayAlsoHave> <textPropWithValue>\r\n        Then the footer's support email text is <renderedEmailText>\r\n        And the email address will be a mailto link with <mailtoEmail>\r\n        When the user clicks on the email address mailto Link\r\n        Then the users preferred email client will open with a draft email to <mailtoEmail>\r\n        Examples:\r\n            | mayHave      | emailPropWithValue     | mayAlsoHave  | textPropWithValue                  | mailtoEmail            | renderedEmailText                                 |\r\n            | has          | support@saasquatch.com | has          | For support please contact {email} | support@saasquatch.com | For support please contact support@saasquatch.com |\r\n            | doesn't have | N/A                    | doesn't have | N/A                                | support@example.com    | For program support, contact support@example.com  |\r\n\r\n    Scenario Outline: Powered by SaaSquatch is shown by default\r\n        Given the footer <mayHaveProp> \"show-powered-by\" with <value>\r\n        Then the powered by SaaSquatch image <mayBeShown>\r\n        Examples:\r\n            | mayHaveProp       | value | mayBeShown  |\r\n            | has prop          | true  | is shown    |\r\n            | has prop          | false | isn't shown |\r\n            | has prop          | test  | is shown    |\r\n            | has prop          |       | is shown    |\r\n            | doesn't have prop |       | is shown    |\r\n\r\n    Scenario: Powered By Saasquatch links out to \"https://saasquatch.com\"\r\n        Given the footer has the powered by SaaSquatch image\r\n        When a user clicks on it\r\n        Then they will be redirected to \"https://saasquatch.com\" in a new page";
+const scenario$f = "Feature: Portal Footer\r\n\r\n    Background: A user is viewing the portal\r\n        Given a hosted portal\r\n        And a user is viewing the portal\r\n        And the portal has a footer\r\n\r\n    Scenario Outline: FAQ and T&C links/text are configurable and open in a new page when clicked\r\n        Given the footer has prop \"terms-link\" with value \"https://example.com/terms\"\r\n        And prop \"terms-text\" with value \"Terms and Conditions\"\r\n        And prop \"faq-link\" with value \"https://example.com/FAQ\"\r\n        And prop \"faq-text\" with value \"Visit FAQ\"\r\n        When a user clicks on the \"Visit FAQ\" link\r\n        Then they will be redirected to \"https://example.com/FAQ\" in a new page\r\n        When they go back to the portal\r\n        And click on the \"Terms and Conditions\" link\r\n        Then they will be redirected to \"https://example.com/terms\" in a new page\r\n\r\n    Scenario Outline: FAQ/T&C Links are not shown if a link is not provided\r\n        Given the footer does not have <linkProp>\r\n        But it <mayHave> <textProp> with <value>\r\n        Then the <link> will not be shown in the footer\r\n        Examples:\r\n            | linkProp   | mayHave      | textProp  | value                | link     |\r\n            | terms-link | has          | termsText | Terms and Conditions | T&C Link |\r\n            | faq-link   | has          | faqText   | Visit FAQ            | FAQ Link |\r\n            | terms-link | doesn't have |           |                      | T&C Link |\r\n            | faq-link   | doesn't have |           |                      | FAQ Link |\r\n\r\n    Scenario Outline: The support email and text is configurable but has a default\r\n        Given the footer <mayHave> <emailPropWithValue>\r\n        And the footer <mayAlsoHave> <textPropWithValue>\r\n        Then the footer's support email text is <renderedEmailText>\r\n        And the email address will be a mailto link with <mailtoEmail>\r\n        When the user clicks on the email address mailto Link\r\n        Then the users preferred email client will open with a draft email to <mailtoEmail>\r\n        Examples:\r\n            | mayHave      | emailPropWithValue     | mayAlsoHave  | textPropWithValue                  | mailtoEmail            | renderedEmailText                                 |\r\n            | has          | support@saasquatch.com | has          | For support please contact {email} | support@saasquatch.com | For support please contact support@saasquatch.com |\r\n            | doesn't have | N/A                    | doesn't have | N/A                                | support@example.com    | For program support, contact support@example.com  |\r\n\r\n    Scenario Outline: Powered by SaaSquatch is shown by default\r\n        Given the footer <mayHaveProp> \"hide-powered-by\" with <value>\r\n        Then the powered by SaaSquatch image <mayBeShown>\r\n        Examples:\r\n            | mayHaveProp       | value | mayBeShown  |\r\n            | has prop          | true  | isn't shown |\r\n            | has prop          | false | is shown    |\r\n            | has prop          | test  | isn't shown |\r\n            | has prop          |       | isn't shown |\r\n            | doesn't have prop |       | is shown    |\r\n\r\n    Scenario: Powered By Saasquatch links out to \"https://saasquatch.com\"\r\n        Given the footer has the powered by SaaSquatch image\r\n        When a user clicks on it\r\n        Then they will be redirected to \"https://saasquatch.com\" in a new page";
 
 const PortalFooter_stories = {
   title: "Components/Portal Footer",
@@ -9812,7 +9728,7 @@ const PortalFooter_stories = {
 const defaultProps$9 = {
   supportEmail: "support@example.com",
   supportText: "For program support, contact {email}",
-  showPoweredBy: true,
+  hidePoweredBy: false,
   poweredByLink: "https://saasquatch.com",
   paddingTop: "large",
   paddingRight: "large",
@@ -9823,7 +9739,7 @@ const DefaultFooter = () => index.h(sqmPortalFooterView.PortalFooterView, Object
 const FooterWithTerms = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions" })));
 const FooterWithFAQ = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$9, { faqLink: "https://example.com", faqText: "FAQ" })));
 const FooterWithTermsAndFAQ = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
-const FooterNoPoweredBy = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", showPoweredBy: false })));
+const FooterNoPoweredBy = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hidePoweredBy: true })));
 
 const PortalFooter = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -10063,7 +9979,9 @@ const NameFields_stories = {
 };
 const props$1 = {
   states: {
-    validationErrors: undefined,
+    registrationFormState: {
+      validationErrors: undefined,
+    },
     content: {
       firstNameLabel: "First Name",
       lastNameLabel: "Last Name",
@@ -10072,9 +9990,11 @@ const props$1 = {
 };
 const errorProps$8 = {
   states: {
-    validationErrors: {
-      firstName: "Cannot be empty",
-      lastName: "Cannot be empty",
+    registrationFormState: {
+      validationErrors: {
+        firstName: "Cannot be empty",
+        lastName: "Cannot be empty",
+      },
     },
     content: {
       firstNameLabel: "First Name",
@@ -10106,7 +10026,9 @@ const CheckboxField_stories = {
 };
 const defaultProps$a = {
   states: {
-    validationErrors: {},
+    registrationFormState: {
+      validationErrors: {},
+    },
     checked: false,
   },
   content: {
@@ -10122,6 +10044,7 @@ const defaultProps$a = {
 };
 const defaultRegisterProps = {
   states: {
+    registrationFormState: {},
     error: "",
     loading: false,
     confirmPassword: true,
@@ -10148,14 +10071,18 @@ const CustomLabel = createHookStory(() => (index.h(ShadowViewAddon.CheckboxField
   } }))));
 const Error$3 = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
     ...defaultProps$a.states,
-    validationErrors: {
-      agree: "Must be checked",
+    registrationFormState: {
+      validationErrors: {
+        agree: "Must be checked",
+      },
     },
   } }))));
 const CustomError = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
     ...defaultProps$a.states,
-    validationErrors: {
-      agree: "Must be checked",
+    registrationFormState: {
+      validationErrors: {
+        agree: "Must be checked",
+      },
     },
   }, content: {
     ...defaultProps$a.content,
@@ -10215,14 +10142,14 @@ function setupGraphQL$9() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.te({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.te(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -10277,7 +10204,7 @@ const DropdownField_stories = {
 };
 const defaultProps$b = {
   states: {
-    validationErrors: {},
+    registrationFormState: {},
   },
   content: {
     dropdownName: "options",
@@ -10297,14 +10224,21 @@ const CustomLabel$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFie
   } }))));
 const Error$4 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$b, { states: {
     ...defaultProps$b.states,
-    validationErrors: {
-      options: "Must select an option",
+    registrationFormState: {
+      validationErrors: {
+        options: "Must select an option",
+      },
     },
   } }))));
-const CustomError$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$b, { content: { ...defaultProps$b.content, errorMessage: "An option must be selected to continue", }, states: {
+const CustomError$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$b, { content: {
+    ...defaultProps$b.content,
+    errorMessage: "An option must be selected to continue",
+  }, states: {
     ...defaultProps$b.states,
-    validationErrors: {
-      options: "Must select an option",
+    registrationFormState: {
+      validationErrors: {
+        options: "Must select an option",
+      },
     },
   } }))));
 
@@ -10331,14 +10265,14 @@ function setupGraphQL$a() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.te({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.te(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -10386,7 +10320,9 @@ const InputField_stories = {
 };
 const defaultProps$c = {
   states: {
-    validationErrors: {},
+    registrationFormState: {
+      validationErrors: {},
+    },
   },
   content: {
     fieldName: "field",
@@ -10398,6 +10334,7 @@ const defaultProps$c = {
 };
 const defaultRegisterProps$1 = {
   states: {
+    registrationFormState: {},
     error: "",
     loading: false,
     confirmPassword: true,
@@ -10417,8 +10354,10 @@ const Default$d = () => index.h(ShadowViewAddon.InputFieldView, Object.assign({}
 const CustomLabel$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$c, { content: { ...defaultProps$c.content, fieldLabel: "My Label" } })));
 const Error$5 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$c, { states: {
     ...defaultProps$c.states,
-    validationErrors: {
-      field: "Cannot be empty",
+    registrationFormState: {
+      validationErrors: {
+        field: "Cannot be empty",
+      },
     },
   } })));
 const CustomError$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$c, { content: {
@@ -10426,8 +10365,10 @@ const CustomError$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assi
     errorMessage: "A value must be entered to continue",
   }, states: {
     ...defaultProps$c.states,
-    validationErrors: {
-      field: "Cannot be empty",
+    registrationFormState: {
+      validationErrors: {
+        field: "Cannot be empty",
+      },
     },
   } })));
 const DateType = () => {
@@ -10486,14 +10427,14 @@ function setupGraphQL$b() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.te({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.te(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -11487,7 +11428,7 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
   EmptyCell: EmptyCell$2
 });
 
-const scenario$s = "@owner:sam\r\n@author:sam\r\nFeature: Rewards Table\r\n\r\n    Shows a list of rewards as a table\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state is shown if there are no rewards\r\n        Given a user with rewards\r\n        When they view the reward table\r\n        Then no rewards are displayed\r\n        And they see an image with a user icon\r\n        And \"View your rewards\" in bold\r\n        And \"See all the rewards you have earned from referring friends and completing tasks\" below the bolded text\r\n        And the pagination buttons are disabled\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: A custom empty state can be provided\r\n        Given a user with no rewards\r\n        And a custom empty state has been supplied in the \"empty\" slot\r\n        When they view the reward table\r\n        Then they see the custom empty state\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: The loading state is shown while rewards are loading\r\n        Given the table is loading\r\n        Then the loading state is shown in the table\r\n        And a custom loading state can be supplied in the \"loading\" slot\r\n        And the pagination buttons are disabled\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The table becomes paginated when the number of rewards exceeds the per page limit\r\n        Given the user has <number of rewards>\r\n        And the table is configured to show <page limit> rewards per page\r\n        Then the table will have <number of pages> page(s)\r\n        And pagination buttons will allow users to navigate between pages\r\n        And the pagination button to go to the next page is disabled on the last page of rewards\r\n        And the pagination button to go to the previous page is disabled on the first page of rewards\r\n        Examples:\r\n            | number of rewards | page limit | number of pages |\r\n            | 0                 | 4          | 1               |\r\n            | 1                 | 4          | 1               |\r\n            | 3                 | 4          | 1               |\r\n            | 5                 | 4          | 2               |\r\n            | 42                | 4          | 11              |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The table converts to a card view on tablet and mobile window sizes\r\n        Given a user with rewards\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then rewards are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"599px\"\r\n        Then the rewards are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Table and Mobile beakpoints can be configured\r\n        Given the reward table has been configured with the following props\r\n            | prop         | value |\r\n            | smBreakpoint | 599   |\r\n            | mdBreakpoint | 799   |\r\n        And a user with rewards\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then rewards are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"599px\"\r\n        Then the rewards are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: By default the first column heading is hidden in mobile\r\n        Given a reward table with 4 columns\r\n        And prop \"hidden-columns\" with <hideColumnValue>\r\n        And a user with rewards\r\n        When they view the reward table\r\n        And their window size is below the tablet breakpoint\r\n        Then reward cards are displayed\r\n        And the titles of <columnsArehidden> within the card\r\n        Examples:\r\n            | hideColumnValue | columnsArehidden                    |\r\n            |                 | the first column                    |\r\n            | 0,1,2           | the first, second and third columns |\r\n            | 3               | the fourth column                   |\r\n\r\n    @motivating\r\n    Scenario: Only rewards which occured in the program specific by \"program-id\" are shown\r\n        Given the table is configured with \"program-id\"\r\n        Then only rewards from the program with \"program-id\" are shown\r\n\r\n    @landmine\r\n    Scenario: When a `classic` program Id is set then any reward without a programId is shown\r\n        There is no easy way for the backend to filter for \"classic\" programs,\r\n        thus we are filtering for rewards without programId's.\r\n\r\n        Given the \"program-id\" of the table is set to \"classic\"\r\n        Then rewards from classic programs are shown\r\n        And manual rewards are shown\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: Column heading can be hidden\r\n        Given the table is configured with \"show-labels\" set to false\r\n        Then the table is displayed without column headings";
+const scenario$s = "@owner:sam\r\n@author:sam\r\nFeature: Rewards Table\r\n\r\n    Shows a list of rewards as a table\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state is shown if there are no rewards\r\n        Given a user with rewards\r\n        When they view the reward table\r\n        Then no rewards are displayed\r\n        And they see an image with a user icon\r\n        And \"View your rewards\" in bold\r\n        And \"See all the rewards you have earned from referring friends and completing tasks\" below the bolded text\r\n        And the pagination buttons are disabled\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: A custom empty state can be provided\r\n        Given a user with no rewards\r\n        And a custom empty state has been supplied in the \"empty\" slot\r\n        When they view the reward table\r\n        Then they see the custom empty state\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: The loading state is shown while rewards are loading\r\n        Given the table is loading\r\n        Then the loading state is shown in the table\r\n        And a custom loading state can be supplied in the \"loading\" slot\r\n        And the pagination buttons are disabled\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The table becomes paginated when the number of rewards exceeds the per page limit\r\n        Given the user has <number of rewards>\r\n        And the table is configured to show <page limit> rewards per page\r\n        Then the table will have <number of pages> page(s)\r\n        And pagination buttons will allow users to navigate between pages\r\n        And the pagination button to go to the next page is disabled on the last page of rewards\r\n        And the pagination button to go to the previous page is disabled on the first page of rewards\r\n        Examples:\r\n            | number of rewards | page limit | number of pages |\r\n            | 0                 | 4          | 1               |\r\n            | 1                 | 4          | 1               |\r\n            | 3                 | 4          | 1               |\r\n            | 5                 | 4          | 2               |\r\n            | 42                | 4          | 11              |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The table converts to a card view on tablet and mobile window sizes\r\n        Given a user with rewards\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then rewards are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"599px\"\r\n        Then the rewards are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Table and Mobile beakpoints can be configured\r\n        Given the reward table has been configured with the following props\r\n            | prop         | value |\r\n            | smBreakpoint | 599   |\r\n            | mdBreakpoint | 799   |\r\n        And a user with rewards\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then rewards are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"599px\"\r\n        Then the rewards are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: By default the first column heading is hidden in mobile\r\n        Given a reward table with 4 columns\r\n        And prop \"hidden-columns\" with <hideColumnValue>\r\n        And a user with rewards\r\n        When they view the reward table\r\n        And their window size is below the tablet breakpoint\r\n        Then reward cards are displayed\r\n        And the titles of <columnsArehidden> within the card\r\n        Examples:\r\n            | hideColumnValue | columnsArehidden                    |\r\n            |                 | the first column                    |\r\n            | 0,1,2           | the first, second and third columns |\r\n            | 3               | the fourth column                   |\r\n\r\n    @motivating\r\n    Scenario: Only rewards which occured in the program specific by \"program-id\" are shown\r\n        Given the table is configured with \"program-id\"\r\n        Then only rewards from the program with \"program-id\" are shown\r\n\r\n    @landmine\r\n    Scenario: When a `classic` program Id is set then any reward without a programId is shown\r\n        There is no easy way for the backend to filter for \"classic\" programs,\r\n        thus we are filtering for rewards without programId's.\r\n\r\n        Given the \"program-id\" of the table is set to \"classic\"\r\n        Then rewards from classic programs are shown\r\n        And manual rewards are shown\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: Column heading can be hidden\r\n        Given the table is configured with \"hide-labels\" set to \"true\"\r\n        Then the table is displayed without column headings";
 
 const RewardsTable_stories = {
   title: "Components/Rewards Table",
@@ -11632,14 +11573,14 @@ function setupGraphQL$c() {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   stencilHooks_module.useEffect(() => {
-    index_module.te({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.te(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
@@ -11653,21 +11594,21 @@ function setupGraphQLKlip$1({ token, id }) {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   stencilHooks_module.useEffect(() => {
-    index_module.te({
+    index_module.setUserIdentity({
       accountId,
       id,
       jwt: token,
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.te(undefined);
+      index_module.setUserIdentity(undefined);
     };
   }, []);
   return { id, accountId };
 }
 const ReferralTable$1 = createHookStory(() => {
   setupGraphQL$c();
-  index_module.D("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 +11634,7 @@ const ReferralTableEn = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWVuZ2xpc2giLCJpZCI6InNhbWVuZ2xpc2gifX0._6OTVF3gcipu_ibgthUNr5UHwC-2E_lhCENI5HpYvcw",
     id: "samenglish",
   });
-  index_module.D("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 +11646,7 @@ const ReferralTableTr = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbXR1cmtleSIsImlkIjoic2FtdHVya2V5In19.usSMe0RWg8W5FtwcvJayvAlxTw6vMxjTyWXaP8jI8_U",
     id: "samturkey",
   });
-  index_module.D("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 +11658,7 @@ const ReferralTableFr = createHookStory(() => {
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWZyZW5jaCIsImlkIjoic2FtZnJlbmNoIn19.cwhasHpfU5MLV4vGbCQcazb6p19iSw5pD2zyrVHgePg",
     id: "samfrench",
   });
-  index_module.D("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" }),
@@ -12957,6 +12898,19 @@ const ShareCode$1 = /*#__PURE__*/Object.freeze({
   CustomTooltipDuration: CustomTooltipDuration
 });
 
+const HamburgerMenu_stories = {
+  title: "Components/Hamburger Menu",
+};
+const Default$e = () => {
+  return index.h("div", null, "Default");
+};
+
+const HamburgerMenu = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': HamburgerMenu_stories,
+  Default: Default$e
+});
+
 /**
  *
  * Themes
@@ -12969,7 +12923,7 @@ const ShareCode$1 = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$e = `
+const Default$f = `
  // No CSS
 `;
 const Orangey = `
@@ -13003,7 +12957,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$e,
+  Default: Default$f,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -15666,6 +15620,7 @@ const stories = [
   Scroll,
   Tabs,
   ShareCode$1,
+  HamburgerMenu,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {