@saasquatch/mint-components 1.5.0-71 → 1.5.0-75

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

@@ -4,11 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./global-58d95b21.js');
+require('./global-633d1fb7.js');
 require('./use-callback-e754042f.js');
-const index_module = require('./index.module-54724339.js');
+const index_module = require('./index.module-f972f103.js');
 require('./extends-08099afd.js');
-require('./insertcss-04580cfa.js');
 require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
 const JSS = require('./JSS-c65a40f1.js');
@@ -18,21 +17,21 @@ const utils = require('./utils-01dbfd4a.js');
 require('./sqm-text-span-view-f101dedf.js');
 const sqmAssetCardView = require('./sqm-asset-card-view-d9ac6a95.js');
 const sqmBigStatView = require('./sqm-big-stat-view-e5dc0877.js');
-const useDemoBigStat = require('./useDemoBigStat-426e3319.js');
+const useDemoBigStat = require('./useDemoBigStat-99093687.js');
 const sqmHeroView = require('./sqm-hero-view-a13795c0.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-35015d30.js');
 const sqmNameFieldsView = require('./sqm-name-fields-view-c95e4768.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-36632c96.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-da648fbc.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-f42557ca.js');
-const sqmPortalFooterView = require('./sqm-portal-footer-view-5e6903c9.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-2ac54715.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-c32a55d6.js');
+const sqmPortalFooterView = require('./sqm-portal-footer-view-cac67bc9.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-10c0b54f.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-fdfb3656.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-637d2fe7.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-dea275e0.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-1fdc957e.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-4c78e231.js');
 const sqmStatContainerView = require('./sqm-stat-container-view-5b2db929.js');
-const ShadowViewAddon = require('./ShadowViewAddon-fbbacd12.js');
+const ShadowViewAddon = require('./ShadowViewAddon-c4425ca8.js');
 const sqmPortalSectionView = require('./sqm-portal-section-view-186a5f7e.js');
 
 /**
@@ -2404,36 +2403,36 @@ const routes = `
 `;
 const TemplateNavigation = createHookStory(() => {
   return (index.h("div", null,
-    index.h("button", { onClick: () => index_module.pn.push("/") }, "/"),
-    index.h("button", { onClick: () => index_module.pn.push("/foo") }, "/foo"),
-    index.h("button", { onClick: () => index_module.pn.push("/bar") }, "/bar"),
-    index.h("button", { onClick: () => index_module.pn.push("/baz/bang") }, "/baz/bang"),
-    index.h("button", { onClick: () => index_module.pn.push("/refer") }, "/refer"),
-    index.h("button", { onClick: () => index_module.pn.push("/refer/1") }, "/refer/1"),
-    index.h("button", { onClick: () => index_module.pn.push("/refer/2") }, "/refer/2"),
-    index.h("button", { onClick: () => index_module.pn.back() }, "Back"),
-    index.h("button", { onClick: () => index_module.pn.forward() }, "Forward"),
+    index.h("button", { onClick: () => index_module.dn.push("/") }, "/"),
+    index.h("button", { onClick: () => index_module.dn.push("/foo") }, "/foo"),
+    index.h("button", { onClick: () => index_module.dn.push("/bar") }, "/bar"),
+    index.h("button", { onClick: () => index_module.dn.push("/baz/bang") }, "/baz/bang"),
+    index.h("button", { onClick: () => index_module.dn.push("/refer") }, "/refer"),
+    index.h("button", { onClick: () => index_module.dn.push("/refer/1") }, "/refer/1"),
+    index.h("button", { onClick: () => index_module.dn.push("/refer/2") }, "/refer/2"),
+    index.h("button", { onClick: () => index_module.dn.back() }, "Back"),
+    index.h("button", { onClick: () => index_module.dn.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.pn.push("/") }, "/"),
-    index.h("button", { onClick: () => index_module.pn.push("/foo") }, "/foo"),
-    index.h("button", { onClick: () => index_module.pn.push("/bar") }, "/bar"),
-    index.h("button", { onClick: () => index_module.pn.push("/baz/bang") }, "/baz/bang"),
-    index.h("button", { onClick: () => index_module.pn.push("/refer") }, "/refer"),
-    index.h("button", { onClick: () => index_module.pn.push("/refer/1") }, "/refer/1"),
-    index.h("button", { onClick: () => index_module.pn.push("/refer/2") }, "/refer/2"),
-    index.h("button", { onClick: () => index_module.pn.back() }, "Back"),
-    index.h("button", { onClick: () => index_module.pn.forward() }, "Forward"),
+    index.h("button", { onClick: () => index_module.dn.push("/") }, "/"),
+    index.h("button", { onClick: () => index_module.dn.push("/foo") }, "/foo"),
+    index.h("button", { onClick: () => index_module.dn.push("/bar") }, "/bar"),
+    index.h("button", { onClick: () => index_module.dn.push("/baz/bang") }, "/baz/bang"),
+    index.h("button", { onClick: () => index_module.dn.push("/refer") }, "/refer"),
+    index.h("button", { onClick: () => index_module.dn.push("/refer/1") }, "/refer/1"),
+    index.h("button", { onClick: () => index_module.dn.push("/refer/2") }, "/refer/2"),
+    index.h("button", { onClick: () => index_module.dn.back() }, "Back"),
+    index.h("button", { onClick: () => index_module.dn.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.pn.push("/") }, "/"),
-    index.h("button", { onClick: () => index_module.pn.push("/foo") }, "/foo"),
+    index.h("button", { onClick: () => index_module.dn.push("/") }, "/"),
+    index.h("button", { onClick: () => index_module.dn.push("/foo") }, "/foo"),
     index.h("hr", null),
     index.h("div", { style: { display: "flex", justifyContent: "space-around" } },
       index.h("sqm-router", { innerHTML: `<template path="/">
@@ -2447,7 +2446,7 @@ function useTemplate(templateString) {
   const [previewTemplate, setPreviewTemplate] = stencilHooks_module.useState(templateString);
   function setPath(e) {
     //@ts-ignore
-    index_module.pn.push(e.target.value);
+    index_module.dn.push(e.target.value);
   }
   return {
     states: { previewTemplate, editedTemplate },
@@ -2590,8 +2589,8 @@ const FullStackFrame = () => {
       "Current path:",
       " ",
       index.h("code", null,
-        index.h("strong", null, (_a = index_module.hn()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    index.h("button", { onClick: index_module.pn.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.dn.back }, "Go Back")));
 };
 const FullStackFrameLoggedOut = () => {
   var _a;
@@ -2615,8 +2614,8 @@ const FullStackFrameLoggedOut = () => {
       "Current path:",
       " ",
       index.h("code", null,
-        index.h("strong", null, (_a = index_module.hn()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    index.h("button", { onClick: index_module.pn.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.dn.back }, "Go Back")));
 };
 
 const PortalFrame = /*#__PURE__*/Object.freeze({
@@ -2710,14 +2709,14 @@ function setupGraphQL$1() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.Y({
+    index_module.ae({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.Y(undefined);
+      index_module.ae(undefined);
     };
   }, []);
 }
@@ -2772,14 +2771,14 @@ function setupGraphQL$2() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.Y({
+    index_module.ae({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.Y(undefined);
+      index_module.ae(undefined);
     };
   }, []);
 }
@@ -2834,14 +2833,14 @@ function setupGraphQL$3() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.Y({
+    index_module.ae({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6Im55bmVsbGllIiwiaWQiOiJueW5lbGxpZSJ9fQ.3KV974VPLgk4tD8LQfJTi4IPkKCmnaB8w48HzVJYDuI",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.Y(undefined);
+      index_module.ae(undefined);
     };
   }, []);
 }
@@ -2965,14 +2964,14 @@ function setupGraphQL$4() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.Y({
+    index_module.ae({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJpZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJmaXJzdE5hbWUiOiJ0ZXN0IiwibGFzdE5hbWUiOiJ0ZXN0In19.ziDWbdCwsTo1ijxl8d2__Ga-6iFOVShaJUPp2ZBMeO0",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.Y(undefined);
+      index_module.ae(undefined);
     };
   }, []);
 }
@@ -3012,14 +3011,14 @@ function setupGraphQL$5() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.Y({
+    index_module.ae({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.Y(undefined);
+      index_module.ae(undefined);
     };
   }, []);
 }
@@ -3035,14 +3034,14 @@ function setupOtherGraphQL() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.Y({
+    index_module.ae({
       accountId,
       id,
       jwt: JWT,
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.Y(undefined);
+      index_module.ae(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3195,14 +3194,14 @@ function setupGraphQL$6() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.Y({
+    index_module.ae({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.Y(undefined);
+      index_module.ae(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3211,7 +3210,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.Ke(EXCHANGE);
+  const [exchange, { data, errors }] = index_module._e(EXCHANGE);
   return {
     states: {
       points,
@@ -3326,14 +3325,14 @@ function setupGraphQL$7() {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   stencilHooks_module.useEffect(() => {
-    index_module.Y({
+    index_module.ae({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.Y(undefined);
+      index_module.ae(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3347,14 +3346,14 @@ function setupGraphQLKlip({ token, id }) {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   stencilHooks_module.useEffect(() => {
-    index_module.Y({
+    index_module.ae({
       accountId,
       id,
       jwt: token,
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.Y(undefined);
+      index_module.ae(undefined);
     };
   }, []);
   return { id, accountId };
@@ -3439,14 +3438,14 @@ function setupGraphQL$8() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.Y({
+    index_module.ae({
       accountId,
       id,
       jwt: JWT,
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.Y(undefined);
+      index_module.ae(undefined);
     };
   }, []);
   return { id, accountId };
@@ -9375,7 +9374,7 @@ const ReferralIframeReadme = "# sqm-referral-iframe\r\n\r\n\r\n\r\n<!-- Auto Gen
 
 const ForgotPasswordReadme = "# sqm-portal-forgot-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property       | Attribute       | Description                                                          | Type                                                                                                                                                                                        | Default                    |\r\n| -------------- | --------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |\r\n| `demoData`     | --              |                                                                      | `{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined`                |\r\n| `emailLabel`   | `email-label`   |                                                                      | `string`                                                                                                                                                                                    | `\"Email\"`                  |\r\n| `loginPath`    | `login-path`    |                                                                      | `string`                                                                                                                                                                                    | `\"/login\"`                 |\r\n| `redirectPath` | `redirect-path` | The page that users are redirected to from the password reset email. | `string`                                                                                                                                                                                    | `\"/resetPassword\"`         |\r\n| `submitLabel`  | `submit-label`  |                                                                      | `string`                                                                                                                                                                                    | `\"Request Password Reset\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-forgot-password --> sqm-form-message\r\n  style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                   | Attribute                    | Description                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default              |\n| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\n| `confirmPassword`          | `confirm-password`           |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\n| `confirmPasswordLabel`     | `confirm-password-label`     |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Confirm Password\"` |\n| `demoData`                 | --                           |                                                                    | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }` | `undefined`          |\n| `emailLabel`               | `email-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Email\"`            |\n| `enablePasswordValidation` | `enable-password-validation` |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `true`               |\n| `hideInputs`               | `hide-inputs`                |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\n| `loginLabel`               | `login-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Sign in\"`          |\n| `loginPath`                | `login-path`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/login\"`           |\n| `nextPage`                 | `next-page`                  |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/\"`                |\n| `pageLabel`                | `page-label`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\n| `passwordLabel`            | `password-label`             |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Password\"`         |\n| `redirectPath`             | `redirect-path`              | The page that users are redirected to from the verification email. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/verifyEmail\"`     |\n| `submitLabel`              | `submit-label`               |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-register --> sqm-form-message\n  sqm-portal-register --> sqm-password-field\n  sqm-stencilbook --> sqm-portal-register\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                   | Attribute                    | Description                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default              |\r\n| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword`          | `confirm-password`           |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\r\n| `confirmPasswordLabel`     | `confirm-password-label`     |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Confirm Password\"` |\r\n| `demoData`                 | --                           |                                                                    | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; 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`                |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\r\n| `loginLabel`               | `login-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Sign in\"`          |\r\n| `loginPath`                | `login-path`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/login\"`           |\r\n| `nextPage`                 | `next-page`                  |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/\"`                |\r\n| `pageLabel`                | `page-label`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\r\n| `passwordLabel`            | `password-label`             |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Password\"`         |\r\n| `redirectPath`             | `redirect-path`              | The page that users are redirected to from the verification email. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/verifyEmail\"`     |\r\n| `submitLabel`              | `submit-label`               |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-register --> sqm-form-message\r\n  sqm-portal-register --> sqm-password-field\r\n  sqm-stencilbook --> sqm-portal-register\r\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
 const EditProfileReadme = "# sqm-portal-profile\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                 | Attribute                   | Description | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default                  |\r\n| ------------------------ | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\r\n| `countrytext`            | `countrytext`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Country\"`              |\r\n| `demoData`               | --                          |             | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }` | `undefined`              |\r\n| `editProfileHeader`      | `edit-profile-header`       |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Edit your profile\"`    |\r\n| `editProfileSubHeader`   | `edit-profile-sub-header`   |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Personal Information\"` |\r\n| `emailtext`              | `emailtext`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Email\"`                |\r\n| `firstnametext`          | `firstnametext`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"First Name\"`           |\r\n| `lastnametext`           | `lastnametext`              |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Last Name\"`            |\r\n| `showCountry`            | `show-country`              |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `true`                   |\r\n| `submitChangeButtonText` | `submit-change-button-text` |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Submit Changes\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-profile --> sqm-form-message\r\n  style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
@@ -9430,16 +9429,16 @@ function DefaultTemplateView(props) {
         gridTemplateColumns: "repeat(9, 80px)",
         gridGap: "10px",
       } },
-      index.h("button", { onClick: () => index_module.pn.push("/") }, "Dashboard"),
-      props.leadSubmit && (index.h("button", { onClick: () => index_module.pn.push("/refer") }, "Submit a Referral")),
-      index.h("button", { onClick: () => index_module.pn.push("/activity") }, "Activity"),
-      index.h("button", { onClick: () => index_module.pn.push("/editProfile") }, "Edit Profile"),
-      index.h("button", { onClick: () => index_module.pn.push("/login") }, "Login"),
-      index.h("button", { onClick: () => index_module.pn.push("/register") }, "Register"),
-      index.h("button", { onClick: () => index_module.pn.push("/emailVerification") }, "Email Verification"),
-      index.h("button", { onClick: () => index_module.pn.push("/verifyEmail") }, "Verify Email"),
-      index.h("button", { onClick: () => index_module.pn.push("/forgotPassword") }, "Forgot Password"),
-      index.h("button", { onClick: () => index_module.pn.push("/resetPassword") }, "Reset Password")),
+      index.h("button", { onClick: () => index_module.dn.push("/") }, "Dashboard"),
+      props.leadSubmit && (index.h("button", { onClick: () => index_module.dn.push("/refer") }, "Submit a Referral")),
+      index.h("button", { onClick: () => index_module.dn.push("/activity") }, "Activity"),
+      index.h("button", { onClick: () => index_module.dn.push("/editProfile") }, "Edit Profile"),
+      index.h("button", { onClick: () => index_module.dn.push("/login") }, "Login"),
+      index.h("button", { onClick: () => index_module.dn.push("/register") }, "Register"),
+      index.h("button", { onClick: () => index_module.dn.push("/emailVerification") }, "Email Verification"),
+      index.h("button", { onClick: () => index_module.dn.push("/verifyEmail") }, "Verify Email"),
+      index.h("button", { onClick: () => index_module.dn.push("/forgotPassword") }, "Forgot Password"),
+      index.h("button", { onClick: () => index_module.dn.push("/resetPassword") }, "Reset Password")),
     index.h("br", null),
     index.h("div", { innerHTML: states.previewTemplate })));
 }
@@ -10590,8 +10589,11 @@ const rewardsData$1 = {
     data: null,
   },
 };
+const RewardsCellCreditSingle = () => {
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...singleRedeemed } }));
+};
 const RewardsCellCreditFull = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1 }, availableText: "19 Points remaining" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1 }, availableText: "19 Points available" }));
 };
 const partial = {
   prettyAvailableValue: "10 Points",
@@ -10600,28 +10602,34 @@ const partial = {
   dateRedeemed: 1640038417468,
 };
 const RewardsCellCreditPartial = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial }, availableText: "10 Points remaining" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial }, availableText: "10 Points available" }));
+};
+const RewardsCellCreditCancelled = () => {
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...cancelled }, redeemedText: "0 Points redeemed" }));
+};
+const RewardsCellCreditExpired = () => {
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial, ...expired }, redeemedText: "9 Points redeemed" }));
 };
 const empty = {
   prettyAvailableValue: "0 Points",
+  prettyAvailableNumber: "0",
   prettyRedeemedCredit: "19 Points",
   prettyRedeemedNumber: "19",
   dateRedeemed: 1640038417468,
 };
-const RewardsCellCreditEmpty = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...empty }, availableText: "0 Points remaining" }));
+const RewardsCellCreditRedeemed = () => {
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...empty }, availableText: "0 Points available" }));
 };
 const singleRedeemed = {
-  prettyValue: "1 Points",
+  prettyValue: "1 Point",
   prettyValueNumber: "1",
-  prettyAvailableNumber: "1",
-  prettyAvailableValue: "0 Points",
-  prettyRedeemedCredit: "1 Points",
-  prettyRedeemedNumber: "1",
-  dateRedeemed: 1640038417468,
 };
-const RewardsCellSingleRedeemed = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...singleRedeemed } }));
+const longName = {
+  prettyValue: "19 Points with a really really super duper longest name ever in the world wide web",
+  prettyValueNumber: "19",
+};
+const RewardsCellCreditLong = () => {
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...longName }, availableText: "19 Points with a really really super duper longest name ever in the world wide web available" }));
 };
 const RewardsCellNonCredit = () => {
   return (index.h("sqm-rewards-table-reward-cell", { reward: {
@@ -10630,9 +10638,12 @@ const RewardsCellNonCredit = () => {
       prettyValue: "SaaSquatch Giftcard",
     } }));
 };
-const SourceCellText = () => {
+const SourceCellManual = () => {
   return (index.h("sqm-rewards-table-source-cell", { reward: rewardsData$1, rewardSourceText: "Manual" }));
 };
+const SourceCellProgram = () => {
+  return (index.h("sqm-rewards-table-source-cell", { reward: rewardsData$1, rewardSourceText: "Automated" }));
+};
 const exchange = {
   exchangedRewardRedemptionTransaction: {
     id: "61c100117a82a376d88041196",
@@ -10766,12 +10777,16 @@ const EmptyCell$2 = () => {
 const RewardsTableCell = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': RewardsTableCell_stories,
+  RewardsCellCreditSingle: RewardsCellCreditSingle,
   RewardsCellCreditFull: RewardsCellCreditFull,
   RewardsCellCreditPartial: RewardsCellCreditPartial,
-  RewardsCellCreditEmpty: RewardsCellCreditEmpty,
-  RewardsCellSingleRedeemed: RewardsCellSingleRedeemed,
+  RewardsCellCreditCancelled: RewardsCellCreditCancelled,
+  RewardsCellCreditExpired: RewardsCellCreditExpired,
+  RewardsCellCreditRedeemed: RewardsCellCreditRedeemed,
+  RewardsCellCreditLong: RewardsCellCreditLong,
   RewardsCellNonCredit: RewardsCellNonCredit,
-  SourceCellText: SourceCellText,
+  SourceCellManual: SourceCellManual,
+  SourceCellProgram: SourceCellProgram,
   SourceCellExchange: SourceCellExchange,
   SourceCellReferral: SourceCellReferral,
   SourceCellReferred: SourceCellReferred,
@@ -10818,6 +10833,60 @@ const emptyElement$1 = (index.h("div", { slot: "empty", style: { display: "conte
           index.h("sqm-text", { slot: "label" },
             index.h("h3", null, "View your referral details")),
           index.h("sqm-text", { slot: "content" }, "Track the status of your referrals and rewards earned by referring friends")))))));
+const rewardsTablePropsEmpty = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: "empty",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "Next",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: ["Rewards", "Status", "Source", "Date received"],
+    rows: [],
+    emptyElement: emptyElement$1,
+  },
+};
+const rewardsTablePropsLoading = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: "loading",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "Next",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: ["Rewards", "Status", "Source", "Date received"],
+    rows: [],
+    loadingElement: loadingElement$1,
+  },
+};
 const rewardsTableProps = {
   states: {
     hasPrev: false,
@@ -10829,7 +10898,7 @@ const rewardsTableProps = {
     textOverrides: {
       showLabels: true,
       prevLabel: "Prev",
-      moreLabel: "View More",
+      moreLabel: "Next",
     },
     hiddenColumns: "",
     mdBreakpoint: 899,
@@ -10848,17 +10917,49 @@ const rewardsTableProps = {
         index.h(SourceCellReferral, null),
         index.h(DateCell$1, null),
       ],
+      [
+        index.h(RewardsCellCreditCancelled, null),
+        index.h(StatusCellCancelled, null),
+        index.h(SourceCellDeletedUser, null),
+        index.h(DateCell$1, null),
+      ],
+      [
+        index.h(RewardsCellCreditRedeemed, null),
+        index.h(StatusCellRedeemed, null),
+        index.h(SourceCellManual, null),
+        index.h(DateCell$1, null),
+      ],
+      [
+        index.h(RewardsCellCreditPartial, null),
+        index.h(StatusCellAvailableExpiry, null),
+        index.h(SourceCellReferred, null),
+        index.h(DateCell$1, null),
+      ],
+      [
+        index.h(RewardsCellCreditLong, null),
+        index.h(StatusCellAvailableExpiry, null),
+        index.h(SourceCellReferred, null),
+        index.h(DateCell$1, null),
+      ],
     ],
   },
 };
-const RewardsTable = () => {
+const RewardsTableFull = () => {
   return index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTableProps));
+};
+const RewardsTableEmpty = () => {
+  return index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTablePropsEmpty));
+};
+const RewardsTableLoading = () => {
+  return index.h(GenericTableView.GenericTableView, Object.assign({}, rewardsTablePropsLoading));
 };
 
-const RewardsTable$1 = /*#__PURE__*/Object.freeze({
+const RewardsTable = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': RewardsTable_stories,
-  RewardsTable: RewardsTable
+  RewardsTableFull: RewardsTableFull,
+  RewardsTableEmpty: RewardsTableEmpty,
+  RewardsTableLoading: RewardsTableLoading
 });
 
 const UseReferralTable_stories = {
@@ -10873,14 +10974,14 @@ function setupGraphQL$9() {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   stencilHooks_module.useEffect(() => {
-    index_module.Y({
+    index_module.ae({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.Y(undefined);
+      index_module.ae(undefined);
     };
   }, []);
   return { id, accountId };
@@ -10894,14 +10995,14 @@ function setupGraphQLKlip$1({ token, id }) {
     appDomain: "https://staging.referralsaasquatch.com",
   };
   stencilHooks_module.useEffect(() => {
-    index_module.Y({
+    index_module.ae({
       accountId,
       id,
       jwt: token,
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.Y(undefined);
+      index_module.ae(undefined);
     };
   }, []);
   return { id, accountId };
@@ -10995,7 +11096,7 @@ const ColumnsReverse = () => {
   return (index.h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", imagePos: "right", imageMobilePos: "bottom" }));
 };
 const ColumnsCustomPercentage = () => {
-  return (index.h("sqm-hero-image", { "image-url": "https://i.imgur.com/2evfTx7.png", description: "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!", layout: "columns", "image-percentage": "25%", "max-height": "150px", "max-width": "100%", paddingImage: "large", paddingText: "large" }));
+  return (index.h("sqm-hero-image", { "image-url": "https://i.imgur.com/2evfTx7.png", description: "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!", layout: "columns", "image-percentage": "25%", "max-height": "150px", "max-width": "100%", "padding-image": "large", "padding-text": "large" }));
 };
 const ColumnsCustom = () => {
   return (index.h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "text-color": "#fffc4b", "background-color": "#ff7f7f" }));
@@ -11209,6 +11310,9 @@ const ImageMarginRight = () => {
 };
 const ImageBackground = () => {
   return (index.h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", "background-color": "firebrick" }));
+};
+const ImageSizeConstrained = () => {
+  return (index.h("sqm-image", { "image-url": "https://i.imgur.com/oIiVdMM.jpg", minHeight: "192px", maxWidth: "192px" }));
 };
 
 const Image$1 = /*#__PURE__*/Object.freeze({
@@ -11220,7 +11324,8 @@ const Image$1 = /*#__PURE__*/Object.freeze({
   ImageAlignRight: ImageAlignRight,
   ImageMarginLeft: ImageMarginLeft,
   ImageMarginRight: ImageMarginRight,
-  ImageBackground: ImageBackground
+  ImageBackground: ImageBackground,
+  ImageSizeConstrained: ImageSizeConstrained
 });
 
 const TitledSection_stories = {
@@ -11465,6 +11570,73 @@ const TitledSection = /*#__PURE__*/Object.freeze({
   LabelMargin: LabelMargin
 });
 
+const Scroll_stories = {
+  title: "Components/Scroll",
+};
+const ScrollTag = () => {
+  return (index.h("div", { style: { position: "relative", height: "2000px" } },
+    index.h("sqm-scroll", { "scroll-tag-name": "sqm-text" }),
+    index.h("div", { style: { position: "absolute", bottom: "0" } },
+      index.h("sqm-text", { slot: "label" },
+        index.h("h3", null, "Earn more rewards"),
+        index.h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};
+const ScrollId = () => {
+  return (index.h("div", { style: { position: "relative", height: "2000px" } },
+    index.h("sqm-scroll", { "scroll-id": "my-id" }),
+    index.h("div", { style: { position: "absolute", bottom: "0" } },
+      index.h("sqm-text", { slot: "label", id: "my-id" },
+        index.h("h3", null, "Earn more rewards"),
+        index.h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};
+const ScrollTabGroup = () => {
+  return (index.h("div", { style: { position: "relative", height: "2000px" } },
+    index.h("sqm-scroll", { "scroll-tag-name": "sl-tab-group" }),
+    index.h("div", { style: { position: "absolute", bottom: "0" } },
+      index.h("sqm-text", { slot: "label", id: "my-id" },
+        index.h("sl-tab-group", null,
+          index.h("sl-tab", { slot: "nav", panel: "referralLeaderboard" },
+            "Leaderboard",
+            " "),
+          index.h("sl-tab", { slot: "nav", panel: "referralHistory" },
+            "Referral history",
+            " "),
+          index.h("sl-tab", { slot: "nav", panel: "rewardHistory" },
+            "Reward history",
+            " "),
+          index.h("sl-tab", { slot: "nav", panel: "rewardExchange" },
+            "Redeem",
+            " "),
+          index.h("sl-tab-panel", { name: "referralHistory" },
+            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" }),
+              index.h("sqm-referral-table-rewards-column", null),
+              index.h("sqm-referral-table-date-column", { "column-title": "Date referred", "date-shown": "dateReferralStarted" }))),
+          index.h("sl-tab-panel", { name: "referralLeaderboard" },
+            index.h("sqm-titled-section", { padding: "medium", "label-margin": "small" },
+              index.h("sqm-text", { slot: "content" },
+                index.h("p", null, "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"))),
+            index.h("sqm-leaderboard", { usersheading: "Referrer", statsheading: "Referrals", "rank-type": "rank", "leaderboard-type": "topStartedReferrers", rankheading: "Rank", "show-rank": "true" })),
+          index.h("sl-tab-panel", { name: "rewardHistory" },
+            index.h("sqb-program-section", { "program-id": "" },
+              index.h("sqm-rewards-table", { "per-page": "4" },
+                index.h("sqm-rewards-table-reward-column", null),
+                index.h("sqm-rewards-table-source-column", null),
+                index.h("sqm-rewards-table-status-column", null),
+                index.h("sqm-rewards-table-date-column", null)))),
+          index.h("sl-tab-panel", { name: "rewardExchange" },
+            index.h("sqm-reward-exchange-list", { id: "hello" })))))));
+};
+
+const Scroll = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': Scroll_stories,
+  ScrollTag: ScrollTag,
+  ScrollId: ScrollId,
+  ScrollTabGroup: ScrollTabGroup
+});
+
 /**
  *
  * Themes
@@ -14156,13 +14328,14 @@ const stories = [
   CardFeed,
   PortalContainer,
   RewardsTableCell,
-  RewardsTable$1,
+  RewardsTable,
   UseReferralTable,
   HeroImage,
   ReferralCard,
   Timeline,
   Image$1,
   TitledSection,
+  Scroll,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {