@saasquatch/mint-components 1.2.1 → 1.2.2-11

package/dist/esm/{sqm-divided-layout_22.entry.js → sqm-divided-layout_24.entry.js}

@@ -1,7 +1,7 @@
 import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
-import { m as h$1, k as useState, f as useEffect, i as useRef, n as d$2, y as y$1, e as useReducer, c as createCommonjsModule, b as browser, a as commonjsGlobal, u as useMemo } from './extends-faeb047d.js';
+import { m as h$1, k as useState, f as useEffect, i as useRef, n as d$2, y as y$1, b as browser, e as useReducer, c as createCommonjsModule, a as commonjsGlobal, u as useMemo } from './extends-faeb047d.js';
 import { i as intl, a as insertCSS } from './global-736dc1ae.js';
-import { d as dist, T as T$1, e as en, b as be, j as j$1, Z as Ze, r as rn, P as P$1, E as Ee, u as useCallback, M as M$1, a as sn, c as an, x as x$1, D as D$1 } from './index.module-7a2b1f9b.js';
+import { d as dist, T as T$1, e as en, b as be, j as j$1, Z as Ze, r as rn, q as qe, P as P$1, E as Ee, u as useCallback, M as M$1, a as sn, c as an, x as x$1, D as D$1 } from './index.module-7a2b1f9b.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { j as jss, c as create } from './jss-preset-default.esm-5aaab97b.js';
 import { g as getProps } from './utils-5ce97f37.js';
@@ -14,18 +14,19 @@ import { p as pathToRegexp, B as BigStatView, u as useBigStat, a as useDemoBigSt
 import { S as ShareLinkView } from './sqm-share-link-view-077b643a.js';
 import { L as LeaderboardView, u as useLeaderboard, S as ShadowViewAddon } from './ShadowViewAddon-37d4d088.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-88b569ee.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-a75802bb.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-000b0afb.js';
 import { P as PortalSectionView } from './sqm-portal-section-view-4ff6dcfb.js';
 import { P as PortalContainerView } from './sqm-portal-container-view-262b17b1.js';
 import { S as StatContainerView } from './sqm-stat-container-view-fc69587b.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-2801882b.js';
-import { P as PortalChangePasswordView } from './sqm-portal-change-password-view-8dbe1ea3.js';
-import { P as PortalLoginView } from './sqm-portal-login-view-7e56a959.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-72e966e2.js';
+import { P as PortalChangePasswordView } from './sqm-portal-change-password-view-24a4adf7.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-97566434.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-964d21fe.js';
-import { P as PortalResetPasswordView$1 } from './sqm-portal-reset-password-view-6c1d23eb.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-03495ffa.js';
+import { P as PortalResetPasswordView$1 } from './sqm-portal-reset-password-view-1441849e.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-094a5a58.js';
 import { A as AssetCardView } from './sqm-asset-card-view-90c2a945.js';
+import { P as PoweredByImg$1, a as PortalFooterView } from './sqm-portal-footer-view-728c427c.js';
+import { H as HeroView } from './sqm-hero-view-5b9bbae2.js';
 
 function DividedLayoutView(props, children) {
   const getBorder = () => {
@@ -1160,6 +1161,155 @@ function usePortalFrameDemo(footerContent, headerContent, props) {
 }
 
 const style$3 = {
+  Wrapper: AuthWrapper,
+  Column: AuthColumn,
+  ForgotButtonContainer: {
+    display: "inline",
+    cursor: "pointer",
+    "font-size": "13px",
+    "font-weight": "600",
+    color: "#AAAAAA",
+    margin: "0",
+  },
+  ButtonsContainer: AuthButtonsContainer,
+};
+const vanillaStyle$1 = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+`;
+jss.setup(create());
+const sheet$3 = jss.createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
+function PortalLoginView(props) {
+  const { states, callbacks, content } = props;
+  return (h("div", { class: sheet$3.classes.Wrapper },
+    h("style", { type: "text/css" },
+      vanillaStyle$1,
+      styleString$3),
+    h(TextSpanView, { type: "h3" }, content.pageLabel),
+    h("sl-form", { class: sheet$3.classes.Column, "onSl-submit": callbacks.submit },
+      props.states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        h("div", { part: "erroralert-text" }, props.states.error))),
+      h("sl-input", { exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
+      h("div", null,
+        h("sl-input", { exportparts: "label: input-label", type: "password", name: "/password", label: content.passwordLabel || "Password", disabled: states.loading, required: true }),
+        h("div", { class: sheet$3.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
+      h("div", { class: sheet$3.classes.ButtonsContainer },
+        h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Login"),
+        content.secondaryButton))));
+}
+
+function usePortalLogin({ nextPage }) {
+  var _a, _b, _c, _d;
+  const [request, { loading, errors, data }] = qe();
+  const [error, setError] = useState("");
+  const urlParams = new URLSearchParams(window.location.search);
+  const nextPageOverride = urlParams.get("nextPage");
+  const submit = async (event) => {
+    setError("");
+    let formData = event.detail.formData;
+    formData === null || formData === void 0 ? void 0 : formData.forEach((value, key) => {
+      jsonpointer.set(formData, key, value);
+    });
+    const variables = { email: formData.email, password: formData.password };
+    await request(variables);
+  };
+  useEffect(() => {
+    var _a;
+    if ((_a = data === null || data === void 0 ? void 0 : data.authenticateManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
+      urlParams.delete("nextPage");
+      rn.push({
+        pathname: nextPageOverride || nextPage,
+        search: urlParams.toString() && "?" + urlParams.toString(),
+      });
+    }
+  }, [(_a = data === null || data === void 0 ? void 0 : data.authenticateManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token]);
+  useEffect(() => {
+    var _a;
+    if ((errors === null || errors === void 0 ? void 0 : errors.message) || ((_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a["error"])) {
+      setError("Network request failed.");
+    }
+  }, [errors]);
+  const errorMessage = ((_d = (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.message) || error;
+  return {
+    states: {
+      loading,
+      error: errorMessage,
+    },
+    callbacks: {
+      submit,
+    },
+  };
+}
+
+const PortalLogin = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Page navigated to after sign-in
+     */
+    this.nextPage = "/";
+    /**
+     * @uiName Label for email field
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName Label for password field
+     */
+    this.passwordLabel = "Password";
+    /**
+     * @uiName Label for submit button
+     */
+    this.submitLabel = "Sign In";
+    /**
+     * @uiName Label for forgotten password button
+     */
+    this.forgotPasswordLabel = "Forgot Password?";
+    /**
+     * @uiName Label for register navigation button
+     */
+    this.registerLabel = "Register";
+    /**
+     * @uiName Heading label
+     */
+    this.pageLabel = "Sign in to your account";
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks } = j$1()
+      ? useLoginDemo(this)
+      : usePortalLogin(this);
+    const content = {
+      forgotPasswordButton: (h("slot", { name: "forgotPassword" }, h("a", { onClick: () => rn.push("/forgotPassword") }, this.forgotPasswordLabel))),
+      secondaryButton: (h("slot", { name: "secondaryButton" }, h("sl-button", { type: "text", disabled: states.loading, onClick: () => rn.push("/register") }, this.registerLabel))),
+      emailLabel: this.emailLabel,
+      passwordLabel: this.passwordLabel,
+      submitLabel: this.submitLabel,
+      pageLabel: this.pageLabel,
+    };
+    return (h(PortalLoginView, { states: states, callbacks: callbacks, content: content }));
+  }
+};
+function useLoginDemo(props) {
+  return cjs({
+    states: { error: "", loading: false },
+    callbacks: {
+      submit: async (_event) => {
+        console.log("submit");
+      },
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+const style$4 = {
   Wrapper: { ...AuthWrapper, "max-width": "600px" },
   Column: AuthColumn,
   HostBlock: HostBlock,
@@ -1170,7 +1320,7 @@ const style$3 = {
   ButtonsContainer: AuthButtonsContainer,
   ErrorStyle: ErrorStyles,
 };
-const vanillaStyle$1 = `
+const vanillaStyle$2 = `
 sqm-portal-register {
   margin: 0 auto;
   width: 100%;
@@ -1188,22 +1338,23 @@ sqm-portal-register {
 }
 `;
 jss.setup(create());
-const sheet$3 = jss.createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
+const sheet$4 = jss.createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
 function PortalRegisterView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const { states, refs, callbacks, content } = props;
   if (states.error) {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   }
-  return (h("div", { class: sheet$3.classes.Wrapper },
+  return (h("div", { class: sheet$4.classes.Wrapper },
     h("style", { type: "text/css" },
-      vanillaStyle$1,
-      styleString$3),
+      vanillaStyle$2,
+      styleString$4),
     h(TextSpanView, { type: "h3" }, content.pageLabel),
-    h("sl-form", { class: sheet$3.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+    h("sl-form", { class: sheet$4.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
       states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
         h("div", { part: "erroralert-text" }, props.states.error))),
+      content.formData,
       !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
           if (!value) {
             return "Cannot be empty";
@@ -1213,21 +1364,20 @@ function PortalRegisterView(props) {
             return "Must be a valid email address";
           }
         } }, (((_b = (_a = states.validationState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
-        class: sheet$3.classes.ErrorStyle,
+        class: sheet$4.classes.ErrorStyle,
         helpText: ((_d = (_c = states.validationState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
           "Cannot be empty",
       }
         : [])))),
-      !states.hideInputs && (h("sqm-password-field", { "enable-validation": states.enablePasswordValidation })),
+      !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "enable-validation": states.enablePasswordValidation })),
       content.passwordField,
-      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: "Confirm Password", disabled: states.loading, required: true }, (((_f = (_e = states.validationState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
-        class: sheet$3.classes.ErrorStyle,
+      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.validationState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
+        class: sheet$4.classes.ErrorStyle,
         helpText: ((_h = (_g = states.validationState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) ||
           "Cannot be empty",
       }
         : [])))),
-      content.formData,
-      h("div", { class: sheet$3.classes.ButtonsContainer },
+      h("div", { class: sheet$4.classes.ButtonsContainer },
         h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
         content.secondaryButton))));
 }
@@ -5234,6 +5384,10 @@ const PortalRegister = class {
      * @uiName Label for login navigation button
      */
     this.loginLabel = "Sign in";
+    /**
+     * @uiName Label for confirm password field
+     */
+    this.confirmPasswordLabel = "Confirm Password";
     /**
      * @uiName Show confirm password field
      */
@@ -5264,6 +5418,7 @@ const PortalRegister = class {
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
       pageLabel: this.pageLabel,
+      confirmPasswordLabel: this.confirmPasswordLabel,
     };
     return (h(PortalRegisterView, { states: states, callbacks: callbacks, content: content, refs: refs }));
   }
@@ -5274,7 +5429,7 @@ function useRegisterDemo(props) {
       error: "",
       loading: false,
       confirmPassword: true,
-      hideInputs: false,
+      hideInputs: props.hideInputs || false,
       customPasswordField: false,
     },
     callbacks: {
@@ -5289,7 +5444,51 @@ function useRegisterDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$4 = {
+const debug = browser('sq:useProgramMenu');
+const UPDATE_PROGRAM_EVENT = 'sq:update-program-id';
+function useProgramMenu(props) {
+  const programId = M$1();
+  const host = P$1();
+  debug({ programId, props });
+  const ref = useRef();
+  const [, rerender] = Ze();
+  useEffect(() => {
+    var _a;
+    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('sl-select', (e) => {
+      const programId = e.detail.item.value;
+      // setProgramId(programId);
+      host.dispatchEvent(new CustomEvent(UPDATE_PROGRAM_EVENT, {
+        detail: programId,
+        bubbles: true,
+        composed: true,
+      }));
+    });
+  }, [ref.current]);
+  return {
+    data: {
+      programId,
+    },
+    callbacks: {
+      rerender,
+    },
+    ref,
+  };
+}
+
+const ProgramMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { data, ref } = useProgramMenu(getProps(this));
+    return (h(Host, { style: { display: "contents" } }, h("sl-select", { style: { paddingBottom: "var(--sl-spacing-large)" }, value: data.programId, ref: (r) => (ref.current = r) }, h("slot", null))));
+  }
+};
+
+const style$5 = {
   THead: {
     padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
     "text-align": "left",
@@ -5312,29 +5511,29 @@ const style$4 = {
   },
 };
 jss.setup(create());
-const sheet$4 = jss.createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
+const sheet$5 = jss.createStyleSheet(style$5);
+const styleString$5 = sheet$5.toString();
 function ReferralTableView(props) {
   var _a, _b;
   const { states, data, callbacks, elements } = props;
   const { columns, rows } = elements;
   return (h("div", null,
-    h("style", { type: "text/css" }, styleString$4),
-    h("table", { class: sheet$4.classes.Table },
+    h("style", { type: "text/css" }, styleString$5),
+    h("table", { class: sheet$5.classes.Table },
       data.textOverrides.showLabels && (h("thead", null,
-        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (h("th", { class: sheet$4.classes.THead },
+        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (h("th", { class: sheet$5.classes.THead },
           h(TextSpanView, { type: "h3" }, column))))))),
       h("tbody", null, states.loading
         ? elements.loadingElement
         : !((_a = elements === null || elements === void 0 ? void 0 : elements.rows) === null || _a === void 0 ? void 0 : _a.length) && !((_b = data.referralData) === null || _b === void 0 ? void 0 : _b.length)
           ? elements.emptyElement
-          : rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (h("tr", { class: sheet$4.classes.TRow, style: {
+          : rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (h("tr", { class: sheet$5.classes.TRow, style: {
               borderTop: `${!data.textOverrides.showLabels && i === 0
                 ? "none"
                 : ""}`,
-            }, part: "table-row" }, row.map((cell) => (h("td", { class: sheet$4.classes.TCell },
+            }, part: "table-row" }, row.map((cell) => (h("td", { class: sheet$5.classes.TCell },
             h(TextSpanView, { type: "p" }, cell))))))))),
-    h("div", { class: sheet$4.classes.ButtonContainer, part: "sqm-referral-table-button-wrapper" },
+    h("div", { class: sheet$5.classes.ButtonContainer, part: "sqm-referral-table-button-wrapper" },
       h("sl-button", { size: "small", disabled: !states.hasPrev, loading: states.loading, onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.prevLabel),
       h("sl-button", { size: "small", loading: states.loading, disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.moreLabel))));
 }
@@ -14202,7 +14401,7 @@ const ReferralTableUserCell = class {
   }
 };
 
-const debug = browser("sq:useRouter");
+const debug$1 = browser("sq:useRouter");
 function matchPath(pattern, page) {
   if (!pattern)
     return;
@@ -14230,7 +14429,7 @@ function useRouter() {
   useEffect(() => {
     var _a, _b;
     if (!container || !slot) {
-      debug("DOM not ready for navigation rendering on:", page);
+      debug$1("DOM not ready for navigation rendering on:", page);
       return;
     }
     // <template>
@@ -14245,7 +14444,7 @@ function useRouter() {
     });
     //@ts-ignore - can't access template attributes directly
     const templatePath = (_b = (_a = template === null || template === void 0 ? void 0 : template.attributes) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.nodeValue;
-    debug({
+    debug$1({
       containerDatasetPage: container.dataset.page,
       templatePath,
       page,
@@ -14253,15 +14452,15 @@ function useRouter() {
     // if no routes found, and the old route doesn't match the new route
     if (!template) {
       // No matching page, display nothing
-      debug("No matching page found for ", page, ", so render nothing");
+      debug$1("No matching page found for ", page, ", so render nothing");
       container.innerHTML = "";
       container.dataset.page = page;
       return;
     }
-    debug("Page updated to ", page, template);
+    debug$1("Page updated to ", page, template);
     // if pathToRegexp results truthy or page is an exact match
     if (!!matchPath(templatePath, container.dataset.page)) {
-      debug("don't rerender");
+      debug$1("don't rerender");
       // Same page, do not re-render
       // Reduces dom mutations, speeds up page speed
     }
@@ -14294,19 +14493,19 @@ const SqmRouter = class {
 };
 SqmRouter.style = sqmRouterCss;
 
-const style$5 = {
+const style$6 = {
   HostBlock: HostBlock,
   buttonStyle: {
     display: "block",
   },
 };
 jss.setup(create());
-const sheet$5 = jss.createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
+const sheet$6 = jss.createStyleSheet(style$6);
+const styleString$6 = sheet$6.toString();
 function ShareButtonView(props, children) {
   return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
-    h("style", { type: "text/css" }, styleString$5),
-    h("sl-button", { class: sheet$5.classes.buttonStyle, loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}sharebutton-base` },
+    h("style", { type: "text/css" }, styleString$6),
+    h("sl-button", { class: sheet$6.classes.buttonStyle, loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}sharebutton-base` },
       !props.hideicon && (h("sl-icon", { slot: props.iconslot, name: props.icon ? props.icon : props.medium })),
       !props.hidetext && children)));
 }
@@ -16218,6 +16417,25 @@ const Leaderboard = /*#__PURE__*/Object.freeze({
   Five: Five
 });
 
+const HookStoryAddon = ({ story }, children) => {
+  var _a;
+  const hookStory = (_a = story.story.parameters) === null || _a === void 0 ? void 0 : _a.hookStory;
+  if (!hookStory) {
+    return children;
+  }
+  const randomInt = Math.round(Math.random() * 100000);
+  const RandomTagName = "sqm-hook-story-container-" + randomInt;
+  return (h(RandomTagName, null,
+    h("sqm-hook-story-container", { hookStory: hookStory })));
+};
+function createHookStory(hookStory) {
+  const story = () => h("div", null);
+  story.parameters = {
+    hookStory,
+  };
+  return story;
+}
+
 const Router_stories = {
   title: "Tests/Router",
 };
@@ -16284,7 +16502,7 @@ const routes = `
     </pre>
     </sqm-route>
 `;
-const TemplateNavigation = () => {
+const TemplateNavigation = createHookStory(() => {
   return (h("div", null,
     h("button", { onClick: () => rn.push("/") }, "/"),
     h("button", { onClick: () => rn.push("/foo") }, "/foo"),
@@ -16297,8 +16515,8 @@ const TemplateNavigation = () => {
     h("button", { onClick: () => rn.forward() }, "Forward"),
     h("hr", null),
     h("sqm-router", { innerHTML: templates })));
-};
-const RouteNavigation = () => {
+});
+const RouteNavigation = createHookStory(() => {
   return (h("div", null,
     h("button", { onClick: () => rn.push("/") }, "/"),
     h("button", { onClick: () => rn.push("/foo") }, "/foo"),
@@ -16311,8 +16529,8 @@ const RouteNavigation = () => {
     h("button", { onClick: () => rn.forward() }, "Forward"),
     h("hr", null),
     h("sqm-router", { innerHTML: routes })));
-};
-const Styling = () => {
+});
+const Styling = createHookStory(() => {
   return (h("div", null,
     h("button", { onClick: () => rn.push("/") }, "/"),
     h("button", { onClick: () => rn.push("/foo") }, "/foo"),
@@ -16323,14 +16541,49 @@ const Styling = () => {
       <div>Column 1</div>
       <div>Column 2 </div>
       </template>` }))));
-};
+});
+function useTemplate(templateString) {
+  const [editedTemplate, setEditedTemplate] = useState(templateString);
+  const [previewTemplate, setPreviewTemplate] = useState(templateString);
+  function setPath(e) {
+    //@ts-ignore
+    rn.push(e.target.value);
+  }
+  return {
+    states: { previewTemplate, editedTemplate },
+    callbacks: { setEditedTemplate, setPreviewTemplate, setPath },
+  };
+}
+const defaultRouter = `
+<sqm-router>
+  <template path="/">
+  <div>hello world</div>
+  </template>
+</sqm-router>
+`;
+function TemplateView(props) {
+  const { states, callbacks } = props;
+  return [
+    h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
+    h("button", { onClick: () => callbacks.setPreviewTemplate(states.editedTemplate) }, "Update Preview"),
+    h("label", null,
+      "Current path:",
+      h("input", { onInput: callbacks.setPath, value: "/" })),
+    h("div", { innerHTML: states.previewTemplate }),
+  ];
+}
+const RouterPlayground = createHookStory(() => {
+  const { states, callbacks } = useTemplate(defaultRouter);
+  return h(TemplateView, { states: states, callbacks: callbacks });
+});
 
 const Router = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': Router_stories,
   TemplateNavigation: TemplateNavigation,
   RouteNavigation: RouteNavigation,
-  Styling: Styling
+  Styling: Styling,
+  RouterPlayground: RouterPlayground
 });
 
 const LeaderboardRank_stories = {
@@ -16543,25 +16796,6 @@ const EditProfile$1 = /*#__PURE__*/Object.freeze({
   FullStackFrameWithMenu: FullStackFrameWithMenu
 });
 
-const HookStoryAddon = ({ story }, children) => {
-  var _a;
-  const hookStory = (_a = story.story.parameters) === null || _a === void 0 ? void 0 : _a.hookStory;
-  if (!hookStory) {
-    return children;
-  }
-  const randomInt = Math.round(Math.random() * 100000);
-  const RandomTagName = "sqm-hook-story-container-" + randomInt;
-  return (h(RandomTagName, null,
-    h("sqm-hook-story-container", { hookStory: hookStory })));
-};
-function createHookStory(hookStory) {
-  const story = () => h("div", null);
-  story.parameters = {
-    hookStory,
-  };
-  return story;
-}
-
 const UseShareLink_stories = {
   title: "Hooks / useShareLink",
 };
@@ -16751,6 +16985,7 @@ const GlobalRewardsCountPctDiscountPending = createHookStory(() => View("/reward
 const RewardsCountByUnit = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
 const GlobalRewardsCountByUnit = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
 const GlobalPendingRewardsCount = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE/PENDING/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+const RewardsAvailableCount = createHookStory(() => View("/rewardsCountFiltered/AVAILABLE", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
 const GlobalRewardsCountByIntegration = createHookStory(() => View("/integrationRewardsCountFiltered/AVAILABLE/global", "/(integrationRewardsCountFiltered)/:format([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
 const GlobalRewardsCountByPendingIntegration = createHookStory(() => View("/integrationRewardsCountFiltered/PENDING/global", "/(integrationRewardsCountFiltered)/:format([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
 const RewardsMonth = createHookStory(() => View("/rewardsMonth", "/(rewardsMonth)/:global?"));
@@ -16787,6 +17022,7 @@ const UseBigStat = /*#__PURE__*/Object.freeze({
   RewardsCountByUnit: RewardsCountByUnit,
   GlobalRewardsCountByUnit: GlobalRewardsCountByUnit,
   GlobalPendingRewardsCount: GlobalPendingRewardsCount,
+  RewardsAvailableCount: RewardsAvailableCount,
   GlobalRewardsCountByIntegration: GlobalRewardsCountByIntegration,
   GlobalRewardsCountByPendingIntegration: GlobalRewardsCountByPendingIntegration,
   RewardsMonth: RewardsMonth,
@@ -16961,15 +17197,15 @@ const FormMessage$1 = /*#__PURE__*/Object.freeze({
 const NewPortal_stories = {
   title: "New Portal",
 };
-const style$6 = {
+const style$7 = {
   HeaderSubtitleBold: {
     "font-weight": 500,
     "text-decoration": "underline",
   },
 };
 jss.setup(create());
-const sheet$6 = jss.createStyleSheet(style$6);
-const styleString$6 = sheet$6.toString();
+const sheet$7 = jss.createStyleSheet(style$7);
+const styleString$7 = sheet$7.toString();
 const barProps = {
   data: {
     programs: [
@@ -17064,7 +17300,7 @@ const Dashboard = () => {
     hide: false,
   };
   return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString$6),
+    h("style", { type: "text/css" }, styleString$7),
     h(Sidebar, null),
     h("sqm-divided-layout", { direction: "column" },
       h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
@@ -17122,7 +17358,7 @@ const Dashboard = () => {
 };
 const EditProfile$2 = () => {
   return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString$6),
+    h("style", { type: "text/css" }, styleString$7),
     h(Sidebar, null),
     h("sqm-divided-layout", { direction: "column" },
       h(PortalProfileView, Object.assign({}, {
@@ -17144,6 +17380,9 @@ const EditProfile$2 = () => {
             lastnametext: "Last Name",
             emailtext: "Email",
             countrytext: "Country",
+            editProfileHeader: "Edit your profile",
+            editProfileSubHeader: "Personal Information",
+            submitChangeButtonText: "Submit Changes",
           },
           formState: {
             country: "Canada",
@@ -17159,7 +17398,22 @@ const EditProfile$2 = () => {
         },
       })),
       h(PortalChangePasswordView, Object.assign({}, {
-        states: { open: true, error: "", loading: false, success: false },
+        states: {
+          open: true,
+          error: "",
+          loading: false,
+          success: false,
+          content: {
+            modalChangePasswordHeader: "Change Password",
+            cancelText: "Cancel",
+            changePasswordButtonText: "Change Password",
+            passwordFieldLabel: "Password",
+            confirmPasswordFieldLabel: "Confirm new password",
+            successMessage: "Your password has been updated.",
+            portalChangePasswordHeader: "Password",
+            portalChangePasswordButtonText: "Change your password...",
+          },
+        },
         callbacks: {
           setOpen: () => console.log("open"),
           submit: () => console.log("submit"),
@@ -17168,7 +17422,7 @@ const EditProfile$2 = () => {
 };
 const Commissions = () => {
   return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString$6),
+    h("style", { type: "text/css" }, styleString$7),
     h(Sidebar, null),
     h("sqm-divided-layout", { direction: "column" },
       h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
@@ -17181,7 +17435,7 @@ const Commissions = () => {
             h("p", null,
               "for the",
               " ",
-              h("span", { class: sheet$6.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              h("span", { class: sheet$7.classes.HeaderSubtitleBold }, "Partner Program #1"),
               " ",
               "program"))),
         })),
@@ -17193,7 +17447,7 @@ const Commissions = () => {
 };
 const Activity = () => {
   return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString$6),
+    h("style", { type: "text/css" }, styleString$7),
     h(Sidebar, null),
     h("sqm-divided-layout", { direction: "column" },
       h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
@@ -17206,7 +17460,7 @@ const Activity = () => {
             h("p", null,
               "for the",
               " ",
-              h("span", { class: sheet$6.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              h("span", { class: sheet$7.classes.HeaderSubtitleBold }, "Partner Program #1"),
               " ",
               "program"))),
         })),
@@ -17365,7 +17619,7 @@ const Default$2 = () => h(PortalLoginView, Object.assign({}, defaultProps$2));
 const LoginWithError = () => h(PortalLoginView, Object.assign({}, errorProps));
 const LoginLoading = () => h(PortalLoginView, Object.assign({}, loadingProps));
 
-const PortalLogin = /*#__PURE__*/Object.freeze({
+const PortalLogin$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalLogin_stories,
   Default: Default$2,
@@ -17390,7 +17644,7 @@ const defaultProps$3 = {
   refs: {
     formRef: {},
   },
-  content: { pageLabel: "Register" },
+  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
 };
 const errorProps$1 = {
   states: {
@@ -17406,7 +17660,10 @@ const errorProps$1 = {
   refs: {
     formRef: {},
   },
-  content: { pageLabel: "Register" },
+  content: {
+    pageLabel: "Register",
+    confirmPasswordLabel: "Confirm Password",
+  },
 };
 const loadingProps$1 = {
   states: {
@@ -17422,7 +17679,7 @@ const loadingProps$1 = {
   refs: {
     formRef: {},
   },
-  content: { pageLabel: "Register" },
+  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
 };
 const slottedProps = {
   states: {
@@ -17440,6 +17697,7 @@ const slottedProps = {
   },
   content: {
     pageLabel: "Register",
+    confirmPasswordLabel: "Confirm Password",
     formData: (h("div", null,
       h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label", label: "Slotted Input", required: true }),
       h("sl-input", { exportparts: "label: input-label", label: "Slotted Input 2", required: true }))),
@@ -17568,6 +17826,8 @@ const defaultProps$5 = {
   content: {
     email: "email@example.com",
     verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
+    emailVerificationHeader: "Verify your email",
+    resendEmailButtonText: "Re-send Email",
   },
 };
 const errorProps$3 = {
@@ -17582,6 +17842,8 @@ const errorProps$3 = {
   content: {
     email: "email@example.com",
     verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
+    emailVerificationHeader: "Verify your email",
+    resendEmailButtonText: "Re-send Email",
   },
 };
 const loadingProps$3 = {
@@ -17596,6 +17858,8 @@ const loadingProps$3 = {
   content: {
     email: "email@example.com",
     verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
+    emailVerificationHeader: "Verify your email",
+    resendEmailButtonText: "Re-send Email",
   },
 };
 const successProps$1 = {
@@ -17610,6 +17874,8 @@ const successProps$1 = {
   content: {
     email: "email@example.com",
     verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
+    emailVerificationHeader: "Verify your email",
+    resendEmailButtonText: "Re-send Email",
   },
 };
 const Default$5 = () => h(PortalEmailVerificationView, Object.assign({}, defaultProps$5));
@@ -17642,6 +17908,13 @@ const defaultProps$6 = {
     confirmPassword: true,
     oobCodeValidating: false,
     oobCodeValid: true,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+    },
   },
   callbacks: {
     submit: async (e) => await e,
@@ -17657,6 +17930,13 @@ const defaultPropsNoConfirm = {
     confirmPassword: false,
     oobCodeValidating: false,
     oobCodeValid: true,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+    },
   },
   callbacks: {
     submit: async (e) => await e,
@@ -17672,6 +17952,13 @@ const errorProps$4 = {
     confirmPassword: true,
     oobCodeValidating: false,
     oobCodeValid: true,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+    },
   },
   callbacks: {
     submit: async (e) => await e,
@@ -17687,6 +17974,13 @@ const loadingProps$4 = {
     confirmPassword: true,
     oobCodeValidating: false,
     oobCodeValid: true,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+    },
   },
   callbacks: {
     submit: async (e) => await e,
@@ -17702,6 +17996,13 @@ const successProps$2 = {
     confirmPassword: true,
     oobCodeValidating: false,
     oobCodeValid: true,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+    },
   },
   callbacks: {
     submit: async (e) => await e,
@@ -17717,6 +18018,13 @@ const validatingCodeProps = {
     confirmPassword: true,
     oobCodeValidating: false,
     oobCodeValid: false,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+    },
   },
   callbacks: {
     submit: async (e) => await e,
@@ -17923,14 +18231,44 @@ const ChangePassword_stories = {
   },
 };
 const defaultProps$7 = {
-  states: { open: false, loading: false, success: false, error: "" },
+  states: {
+    open: false,
+    loading: false,
+    success: false,
+    error: "",
+    content: {
+      modalChangePasswordHeader: "Change Password",
+      cancelText: "Cancel",
+      changePasswordButtonText: "Change Password",
+      passwordFieldLabel: "Password",
+      confirmPasswordFieldLabel: "Confirm new password",
+      successMessage: "Your password has been updated.",
+      portalChangePasswordHeader: "Password",
+      portalChangePasswordButtonText: "Change your password...",
+    },
+  },
   callbacks: {
     setOpen: (o) => console.log(o),
     submit: (e) => console.log("Submit", e),
   },
 };
 const openProps = {
-  states: { open: true, loading: false, success: false, error: "" },
+  states: {
+    open: true,
+    loading: false,
+    success: false,
+    error: "",
+    content: {
+      modalChangePasswordHeader: "Change Password",
+      cancelText: "Cancel",
+      changePasswordButtonText: "Change Password",
+      passwordFieldLabel: "Password",
+      confirmPasswordFieldLabel: "Confirm new password",
+      successMessage: "Your password has been updated.",
+      portalChangePasswordHeader: "Password",
+      portalChangePasswordButtonText: "Change your password...",
+    },
+  },
   callbacks: {
     setOpen: (o) => console.log(o),
     submit: (e) => console.log("Submit", e),
@@ -17942,6 +18280,16 @@ const errorProps$6 = {
     loading: false,
     success: false,
     error: "Network error. Please try again.",
+    content: {
+      modalChangePasswordHeader: "Change Password",
+      cancelText: "Cancel",
+      changePasswordButtonText: "Change Password",
+      passwordFieldLabel: "Password",
+      confirmPasswordFieldLabel: "Confirm new password",
+      successMessage: "Your password has been updated.",
+      portalChangePasswordHeader: "Password",
+      portalChangePasswordButtonText: "Change your password...",
+    },
   },
   callbacks: {
     setOpen: (o) => console.log(o),
@@ -17954,6 +18302,16 @@ const passwordErrorProps = {
     loading: false,
     success: false,
     error: "Passwords do not match.",
+    content: {
+      modalChangePasswordHeader: "Change Password",
+      cancelText: "Cancel",
+      changePasswordButtonText: "Change Password",
+      passwordFieldLabel: "Password",
+      confirmPasswordFieldLabel: "Confirm new password",
+      successMessage: "Your password has been updated.",
+      portalChangePasswordHeader: "Password",
+      portalChangePasswordButtonText: "Change your password...",
+    },
   },
   callbacks: {
     setOpen: (o) => console.log(o),
@@ -17966,6 +18324,16 @@ const loadingProps$5 = {
     loading: true,
     success: false,
     error: "",
+    content: {
+      modalChangePasswordHeader: "Change Password",
+      cancelText: "Cancel",
+      changePasswordButtonText: "Change Password",
+      passwordFieldLabel: "Password",
+      confirmPasswordFieldLabel: "Confirm new password",
+      successMessage: "Your password has been updated.",
+      portalChangePasswordHeader: "Password",
+      portalChangePasswordButtonText: "Change your password...",
+    },
   },
   callbacks: {
     setOpen: (o) => console.log(o),
@@ -17978,6 +18346,16 @@ const successProps$3 = {
     loading: false,
     success: true,
     error: "",
+    content: {
+      modalChangePasswordHeader: "Change Password",
+      cancelText: "Cancel",
+      changePasswordButtonText: "Change Password",
+      passwordFieldLabel: "Password",
+      confirmPasswordFieldLabel: "Confirm new password",
+      successMessage: "Your password has been updated.",
+      portalChangePasswordHeader: "Password",
+      portalChangePasswordButtonText: "Change your password...",
+    },
   },
   callbacks: {
     setOpen: (o) => console.log(o),
@@ -18028,6 +18406,9 @@ const defaultProps$8 = {
       lastnametext: "Last Name",
       emailtext: "Email",
       countrytext: "Country",
+      editProfileHeader: "Edit your profile",
+      editProfileSubHeader: "Personal Information",
+      submitChangeButtonText: "Submit Changes",
     },
     formState: {
       country: "Canada",
@@ -18061,6 +18442,9 @@ const noCountry = {
       lastnametext: "Last Name",
       emailtext: "Email",
       countrytext: "Country",
+      editProfileHeader: "Edit your profile",
+      editProfileSubHeader: "Personal Information",
+      submitChangeButtonText: "Submit Changes",
     },
     formState: {
       country: "Canada",
@@ -18094,6 +18478,9 @@ const loadingProps$6 = {
       lastnametext: "Last Name",
       emailtext: "Email",
       countrytext: "Country",
+      editProfileHeader: "Edit your profile",
+      editProfileSubHeader: "Personal Information",
+      submitChangeButtonText: "Submit Changes",
     },
     formState: {
       country: "Canada",
@@ -18127,6 +18514,9 @@ const disabledProps = {
       lastnametext: "Last Name",
       emailtext: "Email",
       countrytext: "Country",
+      editProfileHeader: "Edit your profile",
+      editProfileSubHeader: "Personal Information",
+      submitChangeButtonText: "Submit Changes",
     },
     formState: {
       country: "Canada",
@@ -18160,6 +18550,9 @@ const errorProps$7 = {
       lastnametext: "Last Name",
       emailtext: "Email",
       countrytext: "Country",
+      editProfileHeader: "Edit your profile",
+      editProfileSubHeader: "Personal Information",
+      submitChangeButtonText: "Submit Changes",
     },
     formState: {
       country: "Canada",
@@ -18193,6 +18586,9 @@ const successProps$4 = {
       lastnametext: "Last Name",
       emailtext: "Email",
       countrytext: "Country",
+      editProfileHeader: "Edit your profile",
+      editProfileSubHeader: "Personal Information",
+      submitChangeButtonText: "Submit Changes",
     },
     formState: {
       country: "Canada",
@@ -19086,6 +19482,3361 @@ const PasswordField = /*#__PURE__*/Object.freeze({
   ValidationError: ValidationError
 });
 
+const portalTemplate = "<sqm-portal-frame>\r\n  <a slot=\"header\" href=\"/\">\r\n    <sqm-text style=\"height: 60px\">\r\n      <img\r\n        style=\"height: 60px\"\r\n        src=\"https://docs.saasquatch.com/assets/images/saasquatch-logo-centered-no-slogan-RGB-300dpi.png\"\r\n      />\r\n    </sqm-text>\r\n  </a>\r\n  <sqb-program-section program-id=\"referral-program\">\r\n    <sqm-router>\r\n      <template path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\">\r\n        <sqm-graphql-client-provider\r\n          domain=\"https://managed-identity.saasquatch.com\"\r\n        >\r\n          <sqm-hero\r\n            background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\r\n          >\r\n            <sqm-router>\r\n              <template path=\"/register\">\r\n                <sqm-portal-register>\r\n                  <sl-input\r\n                    slot=\"formData\"\r\n                    exportparts=\"label: input-label\"\r\n                    type=\"text\"\r\n                    style=\"margin-bottom: 5px\"\r\n                    name=\"/firstName\"\r\n                    label=\"First Name\"\r\n                    required\r\n                  ></sl-input>\r\n                  <sl-input\r\n                    slot=\"formData\"\r\n                    exportparts=\"label: input-label\"\r\n                    type=\"text\"\r\n                    style=\"margin-bottom: 5px\"\r\n                    name=\"/lastName\"\r\n                    label=\"Last Name\"\r\n                    required\r\n                  ></sl-input>\r\n                </sqm-portal-register>\r\n              </template>\r\n\r\n              <template path=\"/emailVerification\">\r\n                <sqm-portal-protected-route\r\n                  redirect-to=\"/login\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-email-verification></sqm-portal-email-verification>\r\n              </template>\r\n\r\n              <template path=\"/login\">\r\n                <sqm-portal-login></sqm-portal-login>\r\n              </template>\r\n\r\n              <template path=\"/verifyEmail\">\r\n                <sqm-portal-verify-email></sqm-portal-verify-email>\r\n              </template>\r\n\r\n              <template path=\"/forgotPassword\">\r\n                <sqm-portal-forgot-password\r\n                  email-label=\"Business Email\"\r\n                ></sqm-portal-forgot-password>\r\n              </template>\r\n\r\n              <template path=\"/resetPassword\">\r\n                <sqm-portal-reset-password\r\n                  confirm-password=\"true\"\r\n                ></sqm-portal-reset-password>\r\n              </template>\r\n              <template path=\"/logout\">\r\n                <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-hero>\r\n        </sqm-graphql-client-provider>\r\n      </template>\r\n    </sqm-router>\r\n    <sqm-router>\r\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\r\n        <sqm-divided-layout direction=\"row\">\r\n          <sqm-navigation-sidebar>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/\"\r\n              icon=\"house\"\r\n              label=\"Dashboard\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/activity\"\r\n              icon=\"bar-chart\"\r\n              label=\"Activity\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/editProfile\"\r\n              icon=\"person\"\r\n              label=\"Edit Profile\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/logout\"\r\n              icon=\"box-arrow-right\"\r\n              label=\"Logout\"\r\n            ></sqm-navigation-sidebar-item>\r\n          </sqm-navigation-sidebar>\r\n          <sqm-divided-layout direction=\"column\">\r\n            <sqm-router>\r\n              <template path=\"/\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqb-widget\r\n                  widget-type=\"p/referral-program/w/referrerWidget\"\r\n                ></sqb-widget>\r\n              </template>\r\n              <template path=\"/editProfile\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\r\n                ><sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-graphql-client-provider\r\n                    domain=\"https://managed-identity.saasquatch.com\"\r\n                  >\r\n                    <sqm-portal-change-password></sqm-portal-change-password>\r\n                  </sqm-graphql-client-provider>\r\n                </sqm-portal-container>\r\n              </template>\r\n\r\n              <template path=\"/activity\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-text> <h2>Activity</h2></sqm-text>\r\n                  <sqm-stat-container space=\"xxxx-large\"\r\n                    ><sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/referralsCount\"\r\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\r\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\r\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\r\n                    >\r\n                  </sqm-stat-container>\r\n                  <sqm-referral-table>\r\n                    <div slot=\"loading\" style=\"display: contents\">\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                    </div>\r\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\r\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\r\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\r\n                    <sqm-referral-table-date-column\r\n                      column-title=\"Referred\"\r\n                      date-shown=\"dateReferralStarted\"\r\n                    ></sqm-referral-table-date-column> </sqm-referral-table\r\n                ></sqm-portal-container>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-divided-layout>\r\n        </sqm-divided-layout>\r\n      </template>\r\n    </sqm-router>\r\n  </sqb-program-section>\r\n  <sqm-portal-footer\r\n    slot=\"footer\"\r\n    support-email=\"support@example.com\"\r\n    terms-link=\"https://example.com\"\r\n    show-powered-by=\"true\"\r\n  ></sqm-portal-footer>\r\n</sqm-portal-frame>\r\n";
+
+const portalTemplateWithDashboard = "<sqm-portal-frame>\r\n  <a slot=\"header\" href=\"/\">\r\n    <sqm-text style=\"height: 60px\">\r\n      <img\r\n        style=\"height: 60px\"\r\n        src=\"https://docs.saasquatch.com/assets/images/saasquatch-logo-centered-no-slogan-RGB-300dpi.png\"\r\n      />\r\n    </sqm-text>\r\n  </a>\r\n  <sqb-program-section program-id=\"referral-program\">\r\n    <sqm-router>\r\n      <template\r\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\r\n      >\r\n        <sqm-graphql-client-provider\r\n          domain=\"https://managed-identity.saasquatch.com\"\r\n        >\r\n          <sqm-hero\r\n            background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\r\n          >\r\n            <sqm-router>\r\n              <template path=\"/register\">\r\n                <sqm-portal-register>\r\n                  <sl-input\r\n                    slot=\"formData\"\r\n                    exportparts=\"label: input-label\"\r\n                    type=\"text\"\r\n                    style=\"margin-bottom: 5px\"\r\n                    name=\"/firstName\"\r\n                    label=\"First Name\"\r\n                    required\r\n                  ></sl-input>\r\n                  <sl-input\r\n                    slot=\"formData\"\r\n                    exportparts=\"label: input-label\"\r\n                    type=\"text\"\r\n                    style=\"margin-bottom: 5px\"\r\n                    name=\"/lastName\"\r\n                    label=\"Last Name\"\r\n                    required\r\n                  ></sl-input>\r\n                </sqm-portal-register>\r\n              </template>\r\n\r\n              <template path=\"/emailVerification\">\r\n                <sqm-portal-protected-route\r\n                  redirect-to=\"/login\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-email-verification></sqm-portal-email-verification>\r\n              </template>\r\n\r\n              <template path=\"/login\">\r\n                <sqm-portal-login></sqm-portal-login>\r\n              </template>\r\n\r\n              <template path=\"/verifyEmail\">\r\n                <sqm-portal-verify-email></sqm-portal-verify-email>\r\n              </template>\r\n\r\n              <template path=\"/forgotPassword\">\r\n                <sqm-portal-forgot-password\r\n                  email-label=\"Business Email\"\r\n                ></sqm-portal-forgot-password>\r\n              </template>\r\n\r\n              <template path=\"/resetPassword\">\r\n                <sqm-portal-reset-password\r\n                  confirm-password=\"true\"\r\n                ></sqm-portal-reset-password>\r\n              </template>\r\n              <template path=\"/logout\">\r\n                <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-hero>\r\n        </sqm-graphql-client-provider>\r\n      </template>\r\n    </sqm-router>\r\n    <sqm-router>\r\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\r\n        <sqm-divided-layout direction=\"row\">\r\n          <sqm-navigation-sidebar>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/\"\r\n              icon=\"house\"\r\n              label=\"Dashboard\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/activity\"\r\n              icon=\"bar-chart\"\r\n              label=\"Activity\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/editProfile\"\r\n              icon=\"person\"\r\n              label=\"Edit Profile\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/logout\"\r\n              icon=\"box-arrow-right\"\r\n              label=\"Logout\"\r\n            ></sqm-navigation-sidebar-item>\r\n          </sqm-navigation-sidebar>\r\n          <sqm-divided-layout direction=\"column\">\r\n            <sqm-router>\r\n              <template path=\"/\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                  ><sqm-titled-section label-margin=\"xx-small\"\r\n                    ><sqm-text slot=\"label\"> <p>Welcome back,</p> </sqm-text\r\n                    ><sqm-text slot=\"content\">\r\n                      <h1>\r\n                        <sqm-user-name\r\n                          fallback=\"Anonymous User\"\r\n                        ></sqm-user-name>\r\n                      </h1> </sqm-text\r\n                  ></sqm-titled-section>\r\n                  <sqm-stat-container space=\"xxxx-large\"\r\n                    ><sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/referralsCount\"\r\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\r\n                    ><sqm-big-stat\r\n                      style=\"white-space: nowrap\"\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\r\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\r\n                    >\r\n                  </sqm-stat-container> </sqm-portal-container\r\n                ><sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-titled-section padding=\"none\" label-margin=\"x-large\"\r\n                    ><sqm-text slot=\"label\">\r\n                      <h2>Partner and Profit</h2> </sqm-text\r\n                    ><sqm-text slot=\"content\">\r\n                      <p>\r\n                        Get rewarded for referring potential customers to\r\n                        SaaSquatch. Earn commission for each successful lead you\r\n                        send our way\r\n                      </p>\r\n                    </sqm-text></sqm-titled-section\r\n                  >\r\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\r\n                    ><sqm-text slot=\"label\">\r\n                      <h3>Share your referral link</h3> </sqm-text\r\n                    ><sqm-share-link slot=\"content\"></sqm-share-link\r\n                  ></sqm-titled-section>\r\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\">\r\n                    <sqm-text slot=\"label\">\r\n                      <h3>Share your referral code</h3> </sqm-text\r\n                    ><sqm-share-code slot=\"content\"></sqm-share-code>\r\n                  </sqm-titled-section>\r\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\r\n                    ><sqm-text slot=\"label\">\r\n                      <h3>Share via social media</h3> </sqm-text\r\n                    ><sqm-portal-container\r\n                      slot=\"content\"\r\n                      direction=\"row\"\r\n                      padding=\"none\"\r\n                      gap=\"xxx-large\"\r\n                      min-width=\"160px\"\r\n                      ><sqm-share-button\r\n                        icon=\"envelope\"\r\n                        medium=\"email\"\r\n                        size=\"medium\"\r\n                        pill=\"true\"\r\n                        >Email a friend</sqm-share-button\r\n                      ><sqm-share-button\r\n                        medium=\"twitter\"\r\n                        size=\"medium\"\r\n                        pill=\"true\"\r\n                        >Tweet about us</sqm-share-button\r\n                      ><sqm-share-button\r\n                        medium=\"facebook\"\r\n                        size=\"medium\"\r\n                        pill=\"true\"\r\n                        >Share on Facebook</sqm-share-button\r\n                      ></sqm-portal-container\r\n                    ></sqm-titled-section\r\n                  ></sqm-portal-container\r\n                >\r\n              </template>\r\n              <template path=\"/editProfile\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\r\n                ><sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-graphql-client-provider\r\n                    domain=\"https://managed-identity.saasquatch.com\"\r\n                  >\r\n                    <sqm-portal-change-password></sqm-portal-change-password>\r\n                  </sqm-graphql-client-provider>\r\n                </sqm-portal-container>\r\n              </template>\r\n\r\n              <template path=\"/activity\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-text> <h2>Activity</h2></sqm-text>\r\n                  <sqm-stat-container space=\"xxxx-large\"\r\n                    ><sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/referralsCount\"\r\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\r\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\r\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\r\n                    >\r\n                  </sqm-stat-container>\r\n                  <sqm-referral-table>\r\n                    <div slot=\"loading\" style=\"display: contents\">\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                    </div>\r\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\r\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\r\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\r\n                    <sqm-referral-table-date-column\r\n                      column-title=\"Referred\"\r\n                      date-shown=\"dateReferralStarted\"\r\n                    ></sqm-referral-table-date-column> </sqm-referral-table\r\n                ></sqm-portal-container>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-divided-layout>\r\n        </sqm-divided-layout>\r\n      </template>\r\n    </sqm-router>\r\n  </sqb-program-section>\r\n  <sqm-portal-footer\r\n    slot=\"footer\"\r\n    support-email=\"support@example.com\"\r\n    terms-link=\"https://example.com\"\r\n    show-powered-by=\"true\"\r\n  ></sqm-portal-footer>\r\n</sqm-portal-frame>\r\n";
+
+const multiProgramTemplate = "<sqm-portal-frame>\r\n  <a slot=\"header\" href=\"/\">\r\n    <sqm-text style=\"height: 60px\">\r\n      <img\r\n        style=\"height: 60px\"\r\n        src=\"https://docs.saasquatch.com/assets/images/saasquatch-logo-centered-no-slogan-RGB-300dpi.png\"\r\n      />\r\n    </sqm-text>\r\n  </a>\r\n  <sqb-program-section program-id=\"referral-program-1\">\r\n    <sqm-router>\r\n      <template\r\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\r\n      >\r\n        <sqm-graphql-client-provider\r\n          domain=\"https://managed-identity.saasquatch.com\"\r\n        >\r\n          <sqm-hero\r\n            background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\r\n          >\r\n            <sqm-router>\r\n              <template path=\"/register\">\r\n                <sqm-portal-register>\r\n                  <sl-input\r\n                    slot=\"formData\"\r\n                    exportparts=\"label: input-label\"\r\n                    type=\"text\"\r\n                    style=\"margin-bottom: 5px\"\r\n                    name=\"/firstName\"\r\n                    label=\"First Name\"\r\n                    required\r\n                  ></sl-input>\r\n                  <sl-input\r\n                    slot=\"formData\"\r\n                    exportparts=\"label: input-label\"\r\n                    type=\"text\"\r\n                    style=\"margin-bottom: 5px\"\r\n                    name=\"/lastName\"\r\n                    label=\"Last Name\"\r\n                    required\r\n                  ></sl-input>\r\n                </sqm-portal-register>\r\n              </template>\r\n\r\n              <template path=\"/emailVerification\">\r\n                <sqm-portal-protected-route\r\n                  redirect-to=\"/login\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-email-verification></sqm-portal-email-verification>\r\n              </template>\r\n\r\n              <template path=\"/login\">\r\n                <sqm-portal-login></sqm-portal-login>\r\n              </template>\r\n\r\n              <template path=\"/verifyEmail\">\r\n                <sqm-portal-verify-email></sqm-portal-verify-email>\r\n              </template>\r\n\r\n              <template path=\"/forgotPassword\">\r\n                <sqm-portal-forgot-password\r\n                  email-label=\"Business Email\"\r\n                ></sqm-portal-forgot-password>\r\n              </template>\r\n\r\n              <template path=\"/resetPassword\">\r\n                <sqm-portal-reset-password\r\n                  confirm-password=\"true\"\r\n                ></sqm-portal-reset-password>\r\n              </template>\r\n              <template path=\"/logout\">\r\n                <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-hero>\r\n        </sqm-graphql-client-provider>\r\n      </template>\r\n    </sqm-router>\r\n    <sqm-router>\r\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\r\n        <sqm-divided-layout direction=\"row\">\r\n          <sqm-navigation-sidebar>\r\n            <sqm-program-menu>\r\n              <sl-menu-item value=\"referral-program-1\"\r\n                >Referral Program 1</sl-menu-item\r\n              >\r\n              <sl-menu-item value=\"referral-program-2\"\r\n                >Referral Program 2</sl-menu-item\r\n              >\r\n            </sqm-program-menu>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/\"\r\n              icon=\"house\"\r\n              label=\"Dashboard\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/activity\"\r\n              icon=\"bar-chart\"\r\n              label=\"Activity\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/editProfile\"\r\n              icon=\"person\"\r\n              label=\"Edit Profile\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/logout\"\r\n              icon=\"box-arrow-right\"\r\n              label=\"Logout\"\r\n            ></sqm-navigation-sidebar-item>\r\n          </sqm-navigation-sidebar>\r\n          <sqm-divided-layout direction=\"column\">\r\n            <sqm-router>\r\n              <template path=\"/\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqb-program-switch>\r\n                  <template program-id=\"referral-program-1\">\r\n                    <sqb-widget\r\n                      widget-type=\"p/referral-program-1/w/referrerWidget\"\r\n                    ></sqb-widget>\r\n                  </template>\r\n                  <template program-id=\"referral-program-2\">\r\n                    <sqb-widget\r\n                      widget-type=\"p/referral-program-2/w/referrerWidget\"\r\n                    ></sqb-widget>\r\n                  </template>\r\n                </sqb-program-switch>\r\n              </template>\r\n              <template path=\"/editProfile\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-portal-profile></sqm-portal-profile></sqm-portal-container\r\n                ><sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-graphql-client-provider\r\n                    domain=\"https://managed-identity.saasquatch.com\"\r\n                  >\r\n                    <sqm-portal-change-password></sqm-portal-change-password>\r\n                  </sqm-graphql-client-provider>\r\n                </sqm-portal-container>\r\n              </template>\r\n              <template path=\"/activity\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-text> <h2>Activity</h2></sqm-text>\r\n                  <sqm-stat-container space=\"xxxx-large\"\r\n                    ><sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/referralsCount\"\r\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\r\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\r\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\r\n                    >\r\n                  </sqm-stat-container>\r\n                  <sqm-referral-table>\r\n                    <div slot=\"loading\" style=\"display: contents\">\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                    </div>\r\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\r\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\r\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\r\n                    <sqm-referral-table-date-column\r\n                      column-title=\"Referred\"\r\n                      date-shown=\"dateReferralStarted\"\r\n                    ></sqm-referral-table-date-column> </sqm-referral-table\r\n                ></sqm-portal-container>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-divided-layout>\r\n        </sqm-divided-layout>\r\n      </template>\r\n    </sqm-router>\r\n  </sqb-program-section>\r\n  <sqm-portal-footer\r\n    slot=\"footer\"\r\n    support-email=\"support@example.com\"\r\n    terms-link=\"https://example.com\"\r\n    show-powered-by=\"true\"\r\n  ></sqm-portal-footer>\r\n</sqm-portal-frame>\r\n";
+
+const multiProgramTemplateWithDashboard = "<sqm-portal-frame>\r\n  <a slot=\"header\" href=\"/\">\r\n    <sqm-text style=\"height: 60px\">\r\n      <img\r\n        style=\"height: 60px\"\r\n        src=\"https://docs.saasquatch.com/assets/images/saasquatch-logo-centered-no-slogan-RGB-300dpi.png\"\r\n      />\r\n    </sqm-text>\r\n  </a>\r\n  <sqb-program-section program-id=\"referral-program-1\">\r\n    <sqm-graphql-client-provider\r\n      domain=\"https://managed-identity.saasquatch.com\"\r\n    >\r\n      <sqm-hero\r\n        background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\r\n      >\r\n        <sqm-router>\r\n          <template path=\"/register\">\r\n            <sqm-portal-register>\r\n              <sl-input\r\n                slot=\"formData\"\r\n                exportparts=\"label: input-label\"\r\n                type=\"text\"\r\n                style=\"margin-bottom: 5px\"\r\n                name=\"/firstName\"\r\n                label=\"First Name\"\r\n                required\r\n              ></sl-input>\r\n              <sl-input\r\n                slot=\"formData\"\r\n                exportparts=\"label: input-label\"\r\n                type=\"text\"\r\n                style=\"margin-bottom: 5px\"\r\n                name=\"/lastName\"\r\n                label=\"Last Name\"\r\n                required\r\n              ></sl-input>\r\n            </sqm-portal-register>\r\n          </template>\r\n\r\n          <template path=\"/emailVerification\">\r\n            <sqm-portal-protected-route\r\n              redirect-to=\"/login\"\r\n            ></sqm-portal-protected-route>\r\n            <sqm-portal-email-verification></sqm-portal-email-verification>\r\n          </template>\r\n\r\n          <template path=\"/login\">\r\n            <sqm-portal-login></sqm-portal-login>\r\n          </template>\r\n\r\n          <template path=\"/verifyEmail\">\r\n            <sqm-portal-verify-email></sqm-portal-verify-email>\r\n          </template>\r\n\r\n          <template path=\"/forgotPassword\">\r\n            <sqm-portal-forgot-password\r\n              email-label=\"Business Email\"\r\n            ></sqm-portal-forgot-password>\r\n          </template>\r\n\r\n          <template path=\"/resetPassword\">\r\n            <sqm-portal-reset-password\r\n              confirm-password=\"true\"\r\n            ></sqm-portal-reset-password>\r\n          </template>\r\n          <template path=\"/logout\">\r\n            <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\r\n          </template>\r\n        </sqm-router>\r\n      </sqm-hero>\r\n    </sqm-graphql-client-provider>\r\n    <sqm-router>\r\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\r\n        <sqm-divided-layout direction=\"row\">\r\n          <sqm-navigation-sidebar>\r\n            <sqm-program-menu>\r\n              <sl-menu-item value=\"referral-program-1\"\r\n                >Referral Program 1</sl-menu-item\r\n              >\r\n              <sl-menu-item value=\"referral-program-2\"\r\n                >Referral Program 2</sl-menu-item\r\n              >\r\n            </sqm-program-menu>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/\"\r\n              icon=\"house\"\r\n              label=\"Dashboard\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/activity\"\r\n              icon=\"bar-chart\"\r\n              label=\"Activity\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/editProfile\"\r\n              icon=\"person\"\r\n              label=\"Edit Profile\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/logout\"\r\n              icon=\"box-arrow-right\"\r\n              label=\"Logout\"\r\n            ></sqm-navigation-sidebar-item>\r\n          </sqm-navigation-sidebar>\r\n          <sqm-divided-layout direction=\"column\">\r\n            <sqm-router>\r\n              <template path=\"/\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route\r\n                ><sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                  ><sqm-titled-section label-margin=\"xx-small\"\r\n                    ><sqm-text slot=\"label\"> <p>Welcome back,</p> </sqm-text\r\n                    ><sqm-text slot=\"content\">\r\n                      <h1>\r\n                        <sqm-user-name\r\n                          fallback=\"Anonymous User\"\r\n                        ></sqm-user-name>\r\n                      </h1> </sqm-text\r\n                  ></sqm-titled-section>\r\n                  <sqm-stat-container space=\"xxxx-large\"\r\n                    ><sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/referralsCount\"\r\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\r\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      style=\"white-space: nowrap\"\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\r\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\r\n                    >\r\n                  </sqm-stat-container> </sqm-portal-container\r\n                ><sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-titled-section padding=\"none\" label-margin=\"x-large\"\r\n                    ><sqm-text slot=\"label\">\r\n                      <h2>Partner and Profit</h2> </sqm-text\r\n                    ><sqm-text slot=\"content\">\r\n                      <p>\r\n                        Get rewarded for referring potential customers to\r\n                        SaaSquatch. Earn commission for each successful lead you\r\n                        send our way\r\n                      </p>\r\n                    </sqm-text></sqm-titled-section\r\n                  >\r\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\r\n                    ><sqm-text slot=\"label\">\r\n                      <h3>Share your referral link</h3> </sqm-text\r\n                    ><sqm-share-link slot=\"content\"></sqm-share-link\r\n                  ></sqm-titled-section>\r\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\">\r\n                    <sqm-text slot=\"label\">\r\n                      <h3>Share your referral code</h3> </sqm-text\r\n                    ><sqm-share-code slot=\"content\"></sqm-share-code>\r\n                  </sqm-titled-section>\r\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\r\n                    ><sqm-text slot=\"label\">\r\n                      <h3>Share via social media</h3> </sqm-text\r\n                    ><sqm-portal-container\r\n                      slot=\"content\"\r\n                      direction=\"row\"\r\n                      padding=\"none\"\r\n                      gap=\"xxx-large\"\r\n                      min-width=\"160px\"\r\n                      ><sqm-share-button\r\n                        icon=\"envelope\"\r\n                        medium=\"email\"\r\n                        size=\"medium\"\r\n                        pill=\"true\"\r\n                        >Email a friend</sqm-share-button\r\n                      ><sqm-share-button\r\n                        medium=\"twitter\"\r\n                        size=\"medium\"\r\n                        pill=\"true\"\r\n                        >Tweet about us</sqm-share-button\r\n                      ><sqm-share-button\r\n                        medium=\"facebook\"\r\n                        size=\"medium\"\r\n                        pill=\"true\"\r\n                        >Share on Facebook</sqm-share-button\r\n                      ></sqm-portal-container\r\n                    ></sqm-titled-section\r\n                  ></sqm-portal-container\r\n                >\r\n              </template>\r\n              <template path=\"/editProfile\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\r\n                ><sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-graphql-client-provider\r\n                    domain=\"https://managed-identity.saasquatch.com\"\r\n                  >\r\n                    <sqm-portal-change-password></sqm-portal-change-password>\r\n                  </sqm-graphql-client-provider>\r\n                </sqm-portal-container>\r\n              </template>\r\n              <template path=\"/activity\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-text> <h2>Activity</h2></sqm-text>\r\n                  <sqm-stat-container space=\"xxxx-large\"\r\n                    ><sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/referralsCount\"\r\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\r\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\r\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\r\n                    >\r\n                  </sqm-stat-container>\r\n                  <sqm-referral-table>\r\n                    <div slot=\"loading\" style=\"display: contents\">\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                      <sqm-table-row>\r\n                        <sqm-table-cell colspan=\"5\"\r\n                          ><sl-skeleton></sl-skeleton\r\n                        ></sqm-table-cell>\r\n                      </sqm-table-row>\r\n                    </div>\r\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\r\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\r\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\r\n                    <sqm-referral-table-date-column\r\n                      column-title=\"Referred\"\r\n                      date-shown=\"dateReferralStarted\"\r\n                    ></sqm-referral-table-date-column> </sqm-referral-table\r\n                ></sqm-portal-container>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-divided-layout>\r\n        </sqm-divided-layout>\r\n      </template>\r\n    </sqm-router>\r\n  </sqb-program-section>\r\n  <sqm-portal-footer\r\n    slot=\"footer\"\r\n    support-email=\"support@example.com\"\r\n    terms-link=\"https://example.com\"\r\n    show-powered-by=\"true\"\r\n  ></sqm-portal-footer>\r\n</sqm-portal-frame>\r\n";
+
+const dashboardTemplate = "<sqm-portal-container direction=\"column\" padding=\"xxx-large\" gap=\"xxx-large\"\r\n    ><sqm-titled-section label-margin=\"xx-small\"\r\n      ><sqm-text slot=\"label\"> <p>Welcome back,</p> </sqm-text\r\n      ><sqm-text slot=\"content\">\r\n        <h1>\r\n          <sqm-user-name fallback=\"Anonymous User\"></sqm-user-name>\r\n        </h1> </sqm-text\r\n    ></sqm-titled-section>\r\n    <sqm-stat-container space=\"xxxx-large\"\r\n      ><sqm-big-stat\r\n        flex-reverse=\"true\"\r\n        alignment=\"left\"\r\n        stat-type=\"/referralsCount\"\r\n        ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\r\n      ><sqm-big-stat\r\n        style=\"white-space: nowrap\"\r\n        flex-reverse=\"true\"\r\n        alignment=\"left\"\r\n        stat-type=\"/rewardBalance/CREDIT/CENTS\"\r\n        ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\r\n      >\r\n    </sqm-stat-container> </sqm-portal-container\r\n  ><sqm-portal-container direction=\"column\" padding=\"xxx-large\" gap=\"xxx-large\">\r\n    <sqm-titled-section padding=\"none\" label-margin=\"x-large\"\r\n      ><sqm-text slot=\"label\"> <h2>Partner and Profit</h2> </sqm-text\r\n      ><sqm-text slot=\"content\">\r\n        <p>\r\n          Get rewarded for referring potential customers to SaaSquatch. Earn\r\n          commission for each successful lead you send our way\r\n        </p>\r\n      </sqm-text></sqm-titled-section\r\n    >\r\n    <sqm-titled-section label-margin=\"small\" padding=\"none\"\r\n      ><sqm-text slot=\"label\"> <h3>Share your referral link</h3> </sqm-text\r\n      ><sqm-share-link slot=\"content\"></sqm-share-link\r\n    ></sqm-titled-section>\r\n    <sqm-titled-section label-margin=\"small\" padding=\"none\">\r\n      <sqm-text slot=\"label\"> <h3>Share your referral code</h3> </sqm-text\r\n      ><sqm-share-code slot=\"content\"></sqm-share-code>\r\n    </sqm-titled-section>\r\n    <sqm-titled-section label-margin=\"small\" padding=\"none\"\r\n      ><sqm-text slot=\"label\"> <h3>Share via social media</h3> </sqm-text\r\n      ><sqm-portal-container\r\n        slot=\"content\"\r\n        direction=\"row\"\r\n        padding=\"none\"\r\n        gap=\"xxx-large\"\r\n        min-width=\"160px\"\r\n        ><sqm-share-button\r\n          icon=\"envelope\"\r\n          medium=\"email\"\r\n          size=\"medium\"\r\n          pill=\"true\"\r\n          >Email a friend</sqm-share-button\r\n        ><sqm-share-button medium=\"twitter\" size=\"medium\" pill=\"true\"\r\n          >Tweet about us</sqm-share-button\r\n        ><sqm-share-button medium=\"facebook\" size=\"medium\" pill=\"true\"\r\n          >Share on Facebook</sqm-share-button\r\n        ></sqm-portal-container\r\n      ></sqm-titled-section\r\n    ></sqm-portal-container\r\n  >";
+
+const editProfileTemplate = "<sqm-portal-protected-route\r\n  require-email-verification=\"true\"\r\n  redirect-to=\"/login\"\r\n  redirect-to-unverified=\"/emailVerification\"\r\n></sqm-portal-protected-route>\r\n<sqm-portal-container direction=\"column\" padding=\"xxx-large\" gap=\"xxx-large\">\r\n  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\r\n><sqm-portal-container direction=\"column\" padding=\"xxx-large\" gap=\"xxx-large\">\r\n  <sqm-graphql-client-provider domain=\"https://managed-identity.saasquatch.com\">\r\n    <sqm-portal-change-password></sqm-portal-change-password>\r\n  </sqm-graphql-client-provider>\r\n</sqm-portal-container>\r\n";
+
+const activityTemplate = "<sqm-portal-protected-route\r\n  require-email-verification=\"true\"\r\n  redirect-to=\"/login\"\r\n  redirect-to-unverified=\"/emailVerification\"\r\n></sqm-portal-protected-route>\r\n<sqm-portal-container direction=\"column\" padding=\"xxx-large\" gap=\"xxx-large\">\r\n  <sqm-text> <h2>Activity</h2></sqm-text>\r\n  <sqm-stat-container space=\"xxxx-large\"\r\n    ><sqm-big-stat\r\n      flex-reverse=\"true\"\r\n      alignment=\"left\"\r\n      stat-type=\"/referralsCount\"\r\n      ><sqm-text><p>Subscribers</p></sqm-text></sqm-big-stat\r\n    ><sqm-big-stat\r\n      flex-reverse=\"true\"\r\n      alignment=\"left\"\r\n      stat-type=\"/rewardBalance/CREDIT/CENTS\"\r\n      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\r\n    >\r\n  </sqm-stat-container>\r\n  <sqm-referral-table>\r\n    <div slot=\"loading\" style=\"display: contents\">\r\n      <sqm-table-row>\r\n        <sqm-table-cell colspan=\"5\"><sl-skeleton></sl-skeleton></sqm-table-cell>\r\n      </sqm-table-row>\r\n      <sqm-table-row>\r\n        <sqm-table-cell colspan=\"5\"><sl-skeleton></sl-skeleton></sqm-table-cell>\r\n      </sqm-table-row>\r\n      <sqm-table-row>\r\n        <sqm-table-cell colspan=\"5\"><sl-skeleton></sl-skeleton></sqm-table-cell>\r\n      </sqm-table-row>\r\n      <sqm-table-row>\r\n        <sqm-table-cell colspan=\"5\"><sl-skeleton></sl-skeleton></sqm-table-cell>\r\n      </sqm-table-row>\r\n      <sqm-table-row>\r\n        <sqm-table-cell colspan=\"5\"><sl-skeleton></sl-skeleton></sqm-table-cell>\r\n      </sqm-table-row>\r\n    </div>\r\n    <sqm-referral-table-user-column></sqm-referral-table-user-column>\r\n    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\r\n    <sqm-referral-table-status-column></sqm-referral-table-status-column>\r\n    <sqm-referral-table-date-column\r\n      column-title=\"Referred\"\r\n      date-shown=\"dateReferralStarted\"\r\n    ></sqm-referral-table-date-column> </sqm-referral-table\r\n></sqm-portal-container>\r\n";
+
+const resetPasswordEmailTemplate = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional //EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\r\n\r\n<html\r\n  xmlns=\"http://www.w3.org/1999/xhtml\"\r\n  xmlns:o=\"urn:schemas-microsoft-com:office:office\"\r\n  xmlns:v=\"urn:schemas-microsoft-com:vml\"\r\n>\r\n  <head>\r\n    <!--[if gte mso 9\r\n      ]><xml\r\n        ><o:OfficeDocumentSettings\r\n          ><o:AllowPNG /><o:PixelsPerInch\r\n            >96</o:PixelsPerInch\r\n          ></o:OfficeDocumentSettings\r\n        ></xml\r\n      ><!\r\n    [endif]-->\r\n    <meta content=\"text/html; charset=utf-8\" http-equiv=\"Content-Type\" />\r\n    <meta content=\"width=device-width\" name=\"viewport\" />\r\n    <!--[if !mso]><!-->\r\n    <meta content=\"IE=edge\" http-equiv=\"X-UA-Compatible\" />\r\n    <!--<![endif]-->\r\n    <title></title>\r\n    <!--[if !mso]><!-->\r\n    <!--<![endif]-->\r\n    <style type=\"text/css\">\r\n      body {\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n\r\n      table,\r\n      td,\r\n      tr {\r\n        vertical-align: top;\r\n        border-collapse: collapse;\r\n      }\r\n\r\n      * {\r\n        line-height: inherit;\r\n      }\r\n\r\n      a[x-apple-data-detectors=\"true\"] {\r\n        color: inherit !important;\r\n        text-decoration: none !important;\r\n      }\r\n    </style>\r\n    <style id=\"media-query\" type=\"text/css\">\r\n      @media (max-width: 520px) {\r\n        .block-grid,\r\n        .col {\r\n          min-width: 320px !important;\r\n          max-width: 100% !important;\r\n          display: block !important;\r\n        }\r\n\r\n        .block-grid {\r\n          width: 100% !important;\r\n        }\r\n\r\n        .col {\r\n          width: 100% !important;\r\n        }\r\n\r\n        .col_cont {\r\n          margin: 0 auto;\r\n        }\r\n\r\n        img.fullwidth,\r\n        img.fullwidthOnMobile {\r\n          max-width: 100% !important;\r\n        }\r\n\r\n        .no-stack .col {\r\n          min-width: 0 !important;\r\n          display: table-cell !important;\r\n        }\r\n\r\n        .no-stack.two-up .col {\r\n          width: 50% !important;\r\n        }\r\n\r\n        .no-stack .col.num2 {\r\n          width: 16.6% !important;\r\n        }\r\n\r\n        .no-stack .col.num3 {\r\n          width: 25% !important;\r\n        }\r\n\r\n        .no-stack .col.num4 {\r\n          width: 33% !important;\r\n        }\r\n\r\n        .no-stack .col.num5 {\r\n          width: 41.6% !important;\r\n        }\r\n\r\n        .no-stack .col.num6 {\r\n          width: 50% !important;\r\n        }\r\n\r\n        .no-stack .col.num7 {\r\n          width: 58.3% !important;\r\n        }\r\n\r\n        .no-stack .col.num8 {\r\n          width: 66.6% !important;\r\n        }\r\n\r\n        .no-stack .col.num9 {\r\n          width: 75% !important;\r\n        }\r\n\r\n        .no-stack .col.num10 {\r\n          width: 83.3% !important;\r\n        }\r\n\r\n        .video-block {\r\n          max-width: none !important;\r\n        }\r\n\r\n        .mobile_hide {\r\n          min-height: 0px;\r\n          max-height: 0px;\r\n          max-width: 0px;\r\n          display: none;\r\n          overflow: hidden;\r\n          font-size: 0px;\r\n        }\r\n\r\n        .desktop_hide {\r\n          display: block !important;\r\n          max-height: none !important;\r\n        }\r\n      }\r\n    </style>\r\n    <style id=\"icon-media-query\" type=\"text/css\">\r\n      @media (max-width: 520px) {\r\n        .icons-inner {\r\n          text-align: center;\r\n        }\r\n\r\n        .icons-inner td {\r\n          margin: 0 auto;\r\n        }\r\n      }\r\n    </style>\r\n  </head>\r\n  <body\r\n    class=\"clean-body\"\r\n    style=\"\r\n      margin: 0;\r\n      padding: 0;\r\n      -webkit-text-size-adjust: 100%;\r\n      background-color: #ffffff;\r\n    \"\r\n  >\r\n    <!--[if IE]><div class=\"ie-browser\"><![endif]-->\r\n    <table\r\n      bgcolor=\"#FFFFFF\"\r\n      cellpadding=\"0\"\r\n      cellspacing=\"0\"\r\n      class=\"nl-container\"\r\n      role=\"presentation\"\r\n      style=\"\r\n        table-layout: fixed;\r\n        vertical-align: top;\r\n        min-width: 320px;\r\n        border-spacing: 0;\r\n        border-collapse: collapse;\r\n        mso-table-lspace: 0pt;\r\n        mso-table-rspace: 0pt;\r\n        background-color: #ffffff;\r\n        width: 100%;\r\n      \"\r\n      valign=\"top\"\r\n      width=\"100%\"\r\n    >\r\n      <tbody>\r\n        <tr style=\"vertical-align: top\" valign=\"top\">\r\n          <td style=\"word-break: break-word; vertical-align: top\" valign=\"top\">\r\n            <!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td align=\"center\" style=\"background-color:#FFFFFF\"><![endif]-->\r\n            <div style=\"background-color: transparent\">\r\n              <div\r\n                class=\"block-grid\"\r\n                style=\"\r\n                  min-width: 320px;\r\n                  max-width: 500px;\r\n                  overflow-wrap: break-word;\r\n                  word-wrap: break-word;\r\n                  word-break: break-word;\r\n                  margin: 0 auto;\r\n                  background-color: transparent;\r\n                \"\r\n              >\r\n                <div\r\n                  style=\"\r\n                    border-collapse: collapse;\r\n                    display: table;\r\n                    width: 100%;\r\n                    background-color: transparent;\r\n                  \"\r\n                >\r\n                  <!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"background-color:transparent;\"><tr><td align=\"center\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width:500px\"><tr class=\"layout-full-width\" style=\"background-color:transparent\"><![endif]-->\r\n                  <!--[if (mso)|(IE)]><td align=\"center\" width=\"500\" style=\"background-color:transparent;width:500px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;\" valign=\"top\"><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;\"><![endif]-->\r\n                  <div\r\n                    class=\"col num12\"\r\n                    style=\"\r\n                      min-width: 320px;\r\n                      max-width: 500px;\r\n                      display: table-cell;\r\n                      vertical-align: top;\r\n                      width: 500px;\r\n                    \"\r\n                  >\r\n                    <div class=\"col_cont\" style=\"width: 100% !important\">\r\n                      <!--[if (!mso)&(!IE)]><!-->\r\n                      <div\r\n                        style=\"\r\n                          border-top: 0px solid transparent;\r\n                          border-left: 0px solid transparent;\r\n                          border-bottom: 0px solid transparent;\r\n                          border-right: 0px solid transparent;\r\n                          padding-top: 5px;\r\n                          padding-bottom: 5px;\r\n                          padding-right: 0px;\r\n                          padding-left: 0px;\r\n                        \"\r\n                      >\r\n                        <!--<![endif]-->\r\n                        <table\r\n                          cellpadding=\"0\"\r\n                          cellspacing=\"0\"\r\n                          role=\"presentation\"\r\n                          style=\"\r\n                            table-layout: fixed;\r\n                            vertical-align: top;\r\n                            border-spacing: 0;\r\n                            border-collapse: collapse;\r\n                            mso-table-lspace: 0pt;\r\n                            mso-table-rspace: 0pt;\r\n                          \"\r\n                          valign=\"top\"\r\n                          width=\"100%\"\r\n                        >\r\n                          <tr style=\"vertical-align: top\" valign=\"top\">\r\n                            <td\r\n                              align=\"center\"\r\n                              style=\"\r\n                                word-break: break-word;\r\n                                vertical-align: top;\r\n                                padding-bottom: 20px;\r\n                                padding-left: 10px;\r\n                                padding-right: 10px;\r\n                                padding-top: 10px;\r\n                                text-align: center;\r\n                                width: 100%;\r\n                              \"\r\n                              valign=\"top\"\r\n                              width=\"100%\"\r\n                            >\r\n                              <h1\r\n                                style=\"\r\n                                  color: #444445;\r\n                                  direction: ltr;\r\n                                  font-family: 'Helvetica Neue', Helvetica,\r\n                                    Arial, sans-serif;\r\n                                  font-size: 20px;\r\n                                  font-weight: normal;\r\n                                  letter-spacing: normal;\r\n                                  line-height: 120%;\r\n                                  text-align: left;\r\n                                  margin-top: 0;\r\n                                  margin-bottom: 0;\r\n                                \"\r\n                              >\r\n                                <strong>Reset your password</strong>\r\n                              </h1>\r\n                            </td>\r\n                          </tr>\r\n                        </table>\r\n                        <!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif\"><![endif]-->\r\n                        <div\r\n                          style=\"\r\n                            color: #444445;\r\n                            font-family: Arial, Helvetica Neue, Helvetica,\r\n                              sans-serif;\r\n                            line-height: 1.8;\r\n                            padding-top: 10px;\r\n                            padding-right: 10px;\r\n                            padding-bottom: 10px;\r\n                            padding-left: 10px;\r\n                          \"\r\n                        >\r\n                          <div\r\n                            class=\"txtTinyMce-wrapper\"\r\n                            style=\"\r\n                              font-size: 14px;\r\n                              line-height: 1.8;\r\n                              color: #444445;\r\n                              font-family: Arial, Helvetica Neue, Helvetica,\r\n                                sans-serif;\r\n                              mso-line-height-alt: 25px;\r\n                            \"\r\n                          >\r\n                            <p\r\n                              style=\"\r\n                                margin: 0;\r\n                                font-size: 14px;\r\n                                line-height: 1.8;\r\n                                word-break: break-word;\r\n                                mso-line-height-alt: 25px;\r\n                                margin-top: 0;\r\n                                margin-bottom: 0;\r\n                              \"\r\n                            >\r\n                              <span style=\"font-size: 14px\"\r\n                                >We received a request to reset your password.\r\n                                Click the button below to reset your\r\n                                password.</span\r\n                              >\r\n                            </p>\r\n                          </div>\r\n                        </div>\r\n                        <div\r\n                          align=\"center\"\r\n                          class=\"button-container\"\r\n                          style=\"\r\n                            padding-top: 10px;\r\n                            padding-right: 10px;\r\n                            padding-bottom: 10px;\r\n                            padding-left: 10px;\r\n                          \"\r\n                        >\r\n                          <!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;\"><tr><td style=\"padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px\" align=\"center\"><v:roundrect xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:w=\"urn:schemas-microsoft-com:office:word\" target=\"_blank\" href={{validationLink}} style=\"height:31.5pt;width:390pt;v-text-anchor:middle;\" arcsize=\"12%\" stroke=\"false\" fillcolor=\"#2270ee\"><w:anchorlock/><v:textbox inset=\"0,0,0,0\"><center style=\"color:#ffffff; font-family:Arial, sans-serif; font-size:14px\"><!\r\n                          [endif]--><a\r\n                            href=\"{{validationLink}}\"\r\n                            target=\"_blank\"\r\n                            style=\"\r\n                              -webkit-text-size-adjust: none;\r\n                              text-decoration: none;\r\n                              display: block;\r\n                              color: #ffffff;\r\n                              background-color: #2270ee;\r\n                              border-radius: 5px;\r\n                              -webkit-border-radius: 5px;\r\n                              -moz-border-radius: 5px;\r\n                              width: 100%;\r\n                              width: calc(100% - 2px);\r\n                              border-top: 1px solid #2270ee;\r\n                              border-right: 1px solid #2270ee;\r\n                              border-bottom: 1px solid #2270ee;\r\n                              border-left: 1px solid #2270ee;\r\n                              padding-top: 5px;\r\n                              padding-bottom: 5px;\r\n                              font-family: 'Helvetica Neue', Helvetica, Arial,\r\n                                sans-serif;\r\n                              text-align: center;\r\n                              mso-border-alt: none;\r\n                              word-break: keep-all;\r\n                            \"\r\n                            target=\"_blank\"\r\n                            ><span\r\n                              style=\"\r\n                                padding-left: 20px;\r\n                                padding-right: 20px;\r\n                                font-size: 14px;\r\n                                display: inline-block;\r\n                                letter-spacing: undefined;\r\n                              \"\r\n                              ><span\r\n                                style=\"\r\n                                  font-size: 16px;\r\n                                  line-height: 2;\r\n                                  word-break: break-word;\r\n                                  mso-line-height-alt: 32px;\r\n                                \"\r\n                                ><span\r\n                                  style=\"font-size: 14px; line-height: 28px\"\r\n                                  >Reset Password</span\r\n                                ></span\r\n                              ></span\r\n                            ></a\r\n                          >\r\n                          <!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]-->\r\n                        </div>\r\n                        <!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 10px; padding-left: 10px; padding-top: 15px; padding-bottom: 15px; font-family: Arial, sans-serif\"><![endif]-->\r\n                        <div\r\n                          style=\"\r\n                            color: #444445;\r\n                            font-family: Arial, Helvetica Neue, Helvetica,\r\n                              sans-serif;\r\n                            line-height: 1.2;\r\n                            padding-top: 15px;\r\n                            padding-right: 10px;\r\n                            padding-bottom: 15px;\r\n                            padding-left: 10px;\r\n                          \"\r\n                        >\r\n                          <div\r\n                            class=\"txtTinyMce-wrapper\"\r\n                            style=\"\r\n                              font-size: 14px;\r\n                              line-height: 1.2;\r\n                              color: #444445;\r\n                              font-family: Arial, Helvetica Neue, Helvetica,\r\n                                sans-serif;\r\n                              mso-line-height-alt: 17px;\r\n                            \"\r\n                          >\r\n                            <p\r\n                              style=\"\r\n                                margin: 0;\r\n                                font-size: 12px;\r\n                                line-height: 1.2;\r\n                                word-break: break-word;\r\n                                mso-line-height-alt: 14px;\r\n                                margin-top: 0;\r\n                                margin-bottom: 0;\r\n                              \"\r\n                            >\r\n                              <span style=\"font-size: 12px\"\r\n                                >If you didn't request a password reset please\r\n                                ignore this email. Your password will not\r\n                                change.</span\r\n                              >\r\n                            </p>\r\n                          </div>\r\n                        </div>\r\n                        <!--[if mso]></td></tr></table><![endif]-->\r\n                        <!--[if (!mso)&(!IE)]><!-->\r\n                      </div>\r\n                      <!--<![endif]-->\r\n                    </div>\r\n                  </div>\r\n                  <!--[if (mso)|(IE)]></td></tr></table><![endif]-->\r\n                  <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <!--[if (mso)|(IE)]></td></tr></table><![endif]-->\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n    <!--[if (IE)]></div><![endif]-->\r\n  </body>\r\n</html>";
+
+const verifyEmailTemplate = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional //EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\r\n\r\n<html\r\n  xmlns=\"http://www.w3.org/1999/xhtml\"\r\n  xmlns:o=\"urn:schemas-microsoft-com:office:office\"\r\n  xmlns:v=\"urn:schemas-microsoft-com:vml\"\r\n>\r\n  <head>\r\n    <!--[if gte mso 9\r\n      ]><xml\r\n        ><o:OfficeDocumentSettings\r\n          ><o:AllowPNG /><o:PixelsPerInch\r\n            >96</o:PixelsPerInch\r\n          ></o:OfficeDocumentSettings\r\n        ></xml\r\n      ><!\r\n    [endif]-->\r\n    <meta content=\"text/html; charset=utf-8\" http-equiv=\"Content-Type\" />\r\n    <meta content=\"width=device-width\" name=\"viewport\" />\r\n    <!--[if !mso]><!-->\r\n    <meta content=\"IE=edge\" http-equiv=\"X-UA-Compatible\" />\r\n    <!--<![endif]-->\r\n    <title></title>\r\n    <!--[if !mso]><!-->\r\n    <!--<![endif]-->\r\n    <style type=\"text/css\">\r\n      body {\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n\r\n      table,\r\n      td,\r\n      tr {\r\n        vertical-align: top;\r\n        border-collapse: collapse;\r\n      }\r\n\r\n      * {\r\n        line-height: inherit;\r\n      }\r\n\r\n      a[x-apple-data-detectors=\"true\"] {\r\n        color: inherit !important;\r\n        text-decoration: none !important;\r\n      }\r\n    </style>\r\n    <style id=\"media-query\" type=\"text/css\">\r\n      @media (max-width: 520px) {\r\n        .block-grid,\r\n        .col {\r\n          min-width: 320px !important;\r\n          max-width: 100% !important;\r\n          display: block !important;\r\n        }\r\n\r\n        .block-grid {\r\n          width: 100% !important;\r\n        }\r\n\r\n        .col {\r\n          width: 100% !important;\r\n        }\r\n\r\n        .col_cont {\r\n          margin: 0 auto;\r\n        }\r\n\r\n        img.fullwidth,\r\n        img.fullwidthOnMobile {\r\n          max-width: 100% !important;\r\n        }\r\n\r\n        .no-stack .col {\r\n          min-width: 0 !important;\r\n          display: table-cell !important;\r\n        }\r\n\r\n        .no-stack.two-up .col {\r\n          width: 50% !important;\r\n        }\r\n\r\n        .no-stack .col.num2 {\r\n          width: 16.6% !important;\r\n        }\r\n\r\n        .no-stack .col.num3 {\r\n          width: 25% !important;\r\n        }\r\n\r\n        .no-stack .col.num4 {\r\n          width: 33% !important;\r\n        }\r\n\r\n        .no-stack .col.num5 {\r\n          width: 41.6% !important;\r\n        }\r\n\r\n        .no-stack .col.num6 {\r\n          width: 50% !important;\r\n        }\r\n\r\n        .no-stack .col.num7 {\r\n          width: 58.3% !important;\r\n        }\r\n\r\n        .no-stack .col.num8 {\r\n          width: 66.6% !important;\r\n        }\r\n\r\n        .no-stack .col.num9 {\r\n          width: 75% !important;\r\n        }\r\n\r\n        .no-stack .col.num10 {\r\n          width: 83.3% !important;\r\n        }\r\n\r\n        .video-block {\r\n          max-width: none !important;\r\n        }\r\n\r\n        .mobile_hide {\r\n          min-height: 0px;\r\n          max-height: 0px;\r\n          max-width: 0px;\r\n          display: none;\r\n          overflow: hidden;\r\n          font-size: 0px;\r\n        }\r\n\r\n        .desktop_hide {\r\n          display: block !important;\r\n          max-height: none !important;\r\n        }\r\n      }\r\n    </style>\r\n    <style id=\"icon-media-query\" type=\"text/css\">\r\n      @media (max-width: 520px) {\r\n        .icons-inner {\r\n          text-align: center;\r\n        }\r\n\r\n        .icons-inner td {\r\n          margin: 0 auto;\r\n        }\r\n      }\r\n    </style>\r\n  </head>\r\n  <body\r\n    class=\"clean-body\"\r\n    style=\"\r\n      margin: 0;\r\n      padding: 0;\r\n      -webkit-text-size-adjust: 100%;\r\n      background-color: #ffffff;\r\n    \"\r\n  >\r\n    <!--[if IE]><div class=\"ie-browser\"><![endif]-->\r\n    <table\r\n      bgcolor=\"#FFFFFF\"\r\n      cellpadding=\"0\"\r\n      cellspacing=\"0\"\r\n      class=\"nl-container\"\r\n      role=\"presentation\"\r\n      style=\"\r\n        table-layout: fixed;\r\n        vertical-align: top;\r\n        min-width: 320px;\r\n        border-spacing: 0;\r\n        border-collapse: collapse;\r\n        mso-table-lspace: 0pt;\r\n        mso-table-rspace: 0pt;\r\n        background-color: #ffffff;\r\n        width: 100%;\r\n      \"\r\n      valign=\"top\"\r\n      width=\"100%\"\r\n    >\r\n      <tbody>\r\n        <tr style=\"vertical-align: top\" valign=\"top\">\r\n          <td style=\"word-break: break-word; vertical-align: top\" valign=\"top\">\r\n            <!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td align=\"center\" style=\"background-color:#FFFFFF\"><![endif]-->\r\n            <div style=\"background-color: transparent\">\r\n              <div\r\n                class=\"block-grid\"\r\n                style=\"\r\n                  min-width: 320px;\r\n                  max-width: 500px;\r\n                  overflow-wrap: break-word;\r\n                  word-wrap: break-word;\r\n                  word-break: break-word;\r\n                  margin: 0 auto;\r\n                  background-color: transparent;\r\n                \"\r\n              >\r\n                <div\r\n                  style=\"\r\n                    border-collapse: collapse;\r\n                    display: table;\r\n                    width: 100%;\r\n                    background-color: transparent;\r\n                  \"\r\n                >\r\n                  <!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"background-color:transparent;\"><tr><td align=\"center\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width:500px\"><tr class=\"layout-full-width\" style=\"background-color:transparent\"><![endif]-->\r\n                  <!--[if (mso)|(IE)]><td align=\"center\" width=\"500\" style=\"background-color:transparent;width:500px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;\" valign=\"top\"><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;\"><![endif]-->\r\n                  <div\r\n                    class=\"col num12\"\r\n                    style=\"\r\n                      min-width: 320px;\r\n                      max-width: 500px;\r\n                      display: table-cell;\r\n                      vertical-align: top;\r\n                      width: 500px;\r\n                    \"\r\n                  >\r\n                    <div class=\"col_cont\" style=\"width: 100% !important\">\r\n                      <!--[if (!mso)&(!IE)]><!-->\r\n                      <div\r\n                        style=\"\r\n                          border-top: 0px solid transparent;\r\n                          border-left: 0px solid transparent;\r\n                          border-bottom: 0px solid transparent;\r\n                          border-right: 0px solid transparent;\r\n                          padding-top: 5px;\r\n                          padding-bottom: 5px;\r\n                          padding-right: 0px;\r\n                          padding-left: 0px;\r\n                        \"\r\n                      >\r\n                        <!--<![endif]-->\r\n                        <table\r\n                          cellpadding=\"0\"\r\n                          cellspacing=\"0\"\r\n                          role=\"presentation\"\r\n                          style=\"\r\n                            table-layout: fixed;\r\n                            vertical-align: top;\r\n                            border-spacing: 0;\r\n                            border-collapse: collapse;\r\n                            mso-table-lspace: 0pt;\r\n                            mso-table-rspace: 0pt;\r\n                          \"\r\n                          valign=\"top\"\r\n                          width=\"100%\"\r\n                        >\r\n                          <tr style=\"vertical-align: top\" valign=\"top\">\r\n                            <td\r\n                              align=\"center\"\r\n                              style=\"\r\n                                word-break: break-word;\r\n                                vertical-align: top;\r\n                                padding-bottom: 20px;\r\n                                padding-left: 10px;\r\n                                padding-right: 10px;\r\n                                padding-top: 10px;\r\n                                text-align: center;\r\n                                width: 100%;\r\n                              \"\r\n                              valign=\"top\"\r\n                              width=\"100%\"\r\n                            >\r\n                              <h1\r\n                                style=\"\r\n                                  color: #444445;\r\n                                  direction: ltr;\r\n                                  font-family: 'Helvetica Neue', Helvetica,\r\n                                    Arial, sans-serif;\r\n                                  font-size: 20px;\r\n                                  font-weight: normal;\r\n                                  letter-spacing: normal;\r\n                                  line-height: 120%;\r\n                                  text-align: left;\r\n                                  margin-top: 0;\r\n                                  margin-bottom: 0;\r\n                                \"\r\n                              >\r\n                                <strong>Verify your email address</strong>\r\n                              </h1>\r\n                            </td>\r\n                          </tr>\r\n                        </table>\r\n                        <!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif\"><![endif]-->\r\n                        <div\r\n                          style=\"\r\n                            color: #444445;\r\n                            font-family: Arial, Helvetica Neue, Helvetica,\r\n                              sans-serif;\r\n                            line-height: 1.8;\r\n                            padding-top: 10px;\r\n                            padding-right: 10px;\r\n                            padding-bottom: 10px;\r\n                            padding-left: 10px;\r\n                          \"\r\n                        >\r\n                          <div\r\n                            class=\"txtTinyMce-wrapper\"\r\n                            style=\"\r\n                              font-size: 14px;\r\n                              line-height: 1.8;\r\n                              color: #444445;\r\n                              font-family: Arial, Helvetica Neue, Helvetica,\r\n                                sans-serif;\r\n                              mso-line-height-alt: 25px;\r\n                            \"\r\n                          >\r\n                            <p\r\n                              style=\"\r\n                                margin: 0;\r\n                                font-size: 14px;\r\n                                line-height: 1.8;\r\n                                word-break: break-word;\r\n                                mso-line-height-alt: 25px;\r\n                                margin-top: 0;\r\n                                margin-bottom: 0;\r\n                              \"\r\n                            >\r\n                              <span style=\"font-size: 14px\"\r\n                                >Thank you for signing up! Please click the button below\r\n                                to verify your email address.</span\r\n                              >\r\n                            </p>\r\n                          </div>\r\n                        </div>\r\n                        <!--[if mso]></td></tr></table><![endif]-->\r\n                        <div\r\n                          align=\"center\"\r\n                          class=\"button-container\"\r\n                          style=\"\r\n                            padding-top: 10px;\r\n                            padding-right: 10px;\r\n                            padding-bottom: 10px;\r\n                            padding-left: 10px;\r\n                          \"\r\n                        >\r\n                          <!--[if mso]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;\"><tr><td style=\"padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px\" align=\"center\"><v:roundrect xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:w=\"urn:schemas-microsoft-com:office:word\" target=\"_blank\" href={{validationLink}} style=\"height:31.5pt;width:390pt;v-text-anchor:middle;\" arcsize=\"12%\" stroke=\"false\" fillcolor=\"#2270ee\"><w:anchorlock/><v:textbox inset=\"0,0,0,0\"><center style=\"color:#ffffff; font-family:Arial, sans-serif; font-size:14px\"><!\r\n                          [endif]--><a\r\n                            href={{validationLink}}\r\n\t\t\t\t\t\t\ttarget=\"_blank\"\r\n                            style=\"\r\n                              -webkit-text-size-adjust: none;\r\n                              text-decoration: none;\r\n                              display: block;\r\n                              color: #ffffff;\r\n                              background-color: #2270ee;\r\n                              border-radius: 5px;\r\n                              -webkit-border-radius: 5px;\r\n                              -moz-border-radius: 5px;\r\n                              width: 100%;\r\n                              width: calc(100% - 2px);\r\n                              border-top: 1px solid #2270ee;\r\n                              border-right: 1px solid #2270ee;\r\n                              border-bottom: 1px solid #2270ee;\r\n                              border-left: 1px solid #2270ee;\r\n                              padding-top: 5px;\r\n                              padding-bottom: 5px;\r\n                              font-family: 'Helvetica Neue', Helvetica, Arial,\r\n                                sans-serif;\r\n                              text-align: center;\r\n                              mso-border-alt: none;\r\n                              word-break: keep-all;\r\n                            \"\r\n                            target=\"_blank\"\r\n                            ><span\r\n                              style=\"\r\n                                padding-left: 20px;\r\n                                padding-right: 20px;\r\n                                font-size: 14px;\r\n                                display: inline-block;\r\n                                letter-spacing: undefined;\r\n                              \"\r\n                              ><span\r\n                                style=\"\r\n                                  font-size: 16px;\r\n                                  line-height: 2;\r\n                                  word-break: break-word;\r\n                                  mso-line-height-alt: 32px;\r\n                                \"\r\n                                ><span\r\n                                  style=\"font-size: 14px; line-height: 28px\"\r\n                                  >Verify Email</span\r\n                                ></span\r\n                              ></span\r\n                            ></a\r\n                          >\r\n                          <!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]-->\r\n                        </div>\r\n                      <!--<![endif]-->\r\n                    </div>\r\n                  </div>\r\n                  <!--[if (mso)|(IE)]></td></tr></table><![endif]-->\r\n                  <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <!--[if (mso)|(IE)]></td></tr></table><![endif]-->\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table>\r\n    <!--[if (IE)]></div><![endif]-->\r\n  </body>\r\n</html>";
+
+const loginTemplate = "<sqm-hero background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\">\r\n  <sqm-portal-login></sqm-portal-login>\r\n</sqm-hero>\r\n";
+
+const registerTemplate = "<sqm-hero\r\n  background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\r\n>\r\n  <sqm-portal-register>\r\n    <sl-input\r\n      slot=\"formData\"\r\n      exportparts=\"label: input-label\"\r\n      type=\"text\"\r\n      style=\"margin-bottom: 5px\"\r\n      name=\"/firstName\"\r\n      label=\"First Name\"\r\n      required\r\n    ></sl-input>\r\n    <sl-input\r\n      slot=\"formData\"\r\n      exportparts=\"label: input-label\"\r\n      type=\"text\"\r\n      style=\"margin-bottom: 5px\"\r\n      name=\"/lastName\"\r\n      label=\"Last Name\"\r\n      required\r\n    ></sl-input>\r\n  </sqm-portal-register>\r\n</sqm-hero>\r\n";
+
+const forgotPasswordTemplate = "<sqm-hero background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\">\r\n  <sqm-portal-forgot-password\r\n    email-label=\"Business Email\"\r\n  ></sqm-portal-forgot-password>\r\n</sqm-hero>\r\n";
+
+const resetPasswordTemplate = "<sqm-portal-reset-password confirm-password=\"true\"></sqm-portal-reset-password>\r\n";
+
+const emailVerifiedTemplate = "<sqm-portal-verify-email></sqm-portal-verify-email>\r\n";
+
+const emailVerificationTemplate = "<sqm-portal-protected-route redirect-to=\"/login\"></sqm-portal-protected-route>\r\n<sqm-portal-email-verification></sqm-portal-email-verification>\r\n";
+
+var marked = createCommonjsModule(function (module, exports) {
+/**
+ * marked - a markdown parser
+ * Copyright (c) 2011-2021, Christopher Jeffrey. (MIT Licensed)
+ * https://github.com/markedjs/marked
+ */
+
+/**
+ * DO NOT EDIT THIS FILE
+ * The code in this file is generated from files in ./src/
+ */
+
+(function (global, factory) {
+   module.exports = factory() ;
+}(commonjsGlobal, (function () {
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
+  function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+    var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+    if (it) return (it = it.call(o)).next.bind(it);
+
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+      return function () {
+        if (i >= o.length) return {
+          done: true
+        };
+        return {
+          done: false,
+          value: o[i++]
+        };
+      };
+    }
+
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  var defaults$5 = {exports: {}};
+
+  function getDefaults$1() {
+    return {
+      baseUrl: null,
+      breaks: false,
+      extensions: null,
+      gfm: true,
+      headerIds: true,
+      headerPrefix: '',
+      highlight: null,
+      langPrefix: 'language-',
+      mangle: true,
+      pedantic: false,
+      renderer: null,
+      sanitize: false,
+      sanitizer: null,
+      silent: false,
+      smartLists: false,
+      smartypants: false,
+      tokenizer: null,
+      walkTokens: null,
+      xhtml: false
+    };
+  }
+
+  function changeDefaults$1(newDefaults) {
+    defaults$5.exports.defaults = newDefaults;
+  }
+
+  defaults$5.exports = {
+    defaults: getDefaults$1(),
+    getDefaults: getDefaults$1,
+    changeDefaults: changeDefaults$1
+  };
+
+  /**
+   * Helpers
+   */
+  var escapeTest = /[&<>"']/;
+  var escapeReplace = /[&<>"']/g;
+  var escapeTestNoEncode = /[<>"']|&(?!#?\w+;)/;
+  var escapeReplaceNoEncode = /[<>"']|&(?!#?\w+;)/g;
+  var escapeReplacements = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+  };
+
+  var getEscapeReplacement = function getEscapeReplacement(ch) {
+    return escapeReplacements[ch];
+  };
+
+  function escape$2(html, encode) {
+    if (encode) {
+      if (escapeTest.test(html)) {
+        return html.replace(escapeReplace, getEscapeReplacement);
+      }
+    } else {
+      if (escapeTestNoEncode.test(html)) {
+        return html.replace(escapeReplaceNoEncode, getEscapeReplacement);
+      }
+    }
+
+    return html;
+  }
+
+  var unescapeTest = /&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/ig;
+
+  function unescape$1(html) {
+    // explicitly match decimal, hex, and named HTML entities
+    return html.replace(unescapeTest, function (_, n) {
+      n = n.toLowerCase();
+      if (n === 'colon') return ':';
+
+      if (n.charAt(0) === '#') {
+        return n.charAt(1) === 'x' ? String.fromCharCode(parseInt(n.substring(2), 16)) : String.fromCharCode(+n.substring(1));
+      }
+
+      return '';
+    });
+  }
+
+  var caret = /(^|[^\[])\^/g;
+
+  function edit$1(regex, opt) {
+    regex = regex.source || regex;
+    opt = opt || '';
+    var obj = {
+      replace: function replace(name, val) {
+        val = val.source || val;
+        val = val.replace(caret, '$1');
+        regex = regex.replace(name, val);
+        return obj;
+      },
+      getRegex: function getRegex() {
+        return new RegExp(regex, opt);
+      }
+    };
+    return obj;
+  }
+
+  var nonWordAndColonTest = /[^\w:]/g;
+  var originIndependentUrl = /^$|^[a-z][a-z0-9+.-]*:|^[?#]/i;
+
+  function cleanUrl$1(sanitize, base, href) {
+    if (sanitize) {
+      var prot;
+
+      try {
+        prot = decodeURIComponent(unescape$1(href)).replace(nonWordAndColonTest, '').toLowerCase();
+      } catch (e) {
+        return null;
+      }
+
+      if (prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0 || prot.indexOf('data:') === 0) {
+        return null;
+      }
+    }
+
+    if (base && !originIndependentUrl.test(href)) {
+      href = resolveUrl(base, href);
+    }
+
+    try {
+      href = encodeURI(href).replace(/%25/g, '%');
+    } catch (e) {
+      return null;
+    }
+
+    return href;
+  }
+
+  var baseUrls = {};
+  var justDomain = /^[^:]+:\/*[^/]*$/;
+  var protocol = /^([^:]+:)[\s\S]*$/;
+  var domain = /^([^:]+:\/*[^/]*)[\s\S]*$/;
+
+  function resolveUrl(base, href) {
+    if (!baseUrls[' ' + base]) {
+      // we can ignore everything in base after the last slash of its path component,
+      // but we might need to add _that_
+      // https://tools.ietf.org/html/rfc3986#section-3
+      if (justDomain.test(base)) {
+        baseUrls[' ' + base] = base + '/';
+      } else {
+        baseUrls[' ' + base] = rtrim$1(base, '/', true);
+      }
+    }
+
+    base = baseUrls[' ' + base];
+    var relativeBase = base.indexOf(':') === -1;
+
+    if (href.substring(0, 2) === '//') {
+      if (relativeBase) {
+        return href;
+      }
+
+      return base.replace(protocol, '$1') + href;
+    } else if (href.charAt(0) === '/') {
+      if (relativeBase) {
+        return href;
+      }
+
+      return base.replace(domain, '$1') + href;
+    } else {
+      return base + href;
+    }
+  }
+
+  var noopTest$1 = {
+    exec: function noopTest() {}
+  };
+
+  function merge$2(obj) {
+    var i = 1,
+        target,
+        key;
+
+    for (; i < arguments.length; i++) {
+      target = arguments[i];
+
+      for (key in target) {
+        if (Object.prototype.hasOwnProperty.call(target, key)) {
+          obj[key] = target[key];
+        }
+      }
+    }
+
+    return obj;
+  }
+
+  function splitCells$1(tableRow, count) {
+    // ensure that every cell-delimiting pipe has a space
+    // before it to distinguish it from an escaped pipe
+    var row = tableRow.replace(/\|/g, function (match, offset, str) {
+      var escaped = false,
+          curr = offset;
+
+      while (--curr >= 0 && str[curr] === '\\') {
+        escaped = !escaped;
+      }
+
+      if (escaped) {
+        // odd number of slashes means | is escaped
+        // so we leave it alone
+        return '|';
+      } else {
+        // add space before unescaped |
+        return ' |';
+      }
+    }),
+        cells = row.split(/ \|/);
+    var i = 0; // First/last cell in a row cannot be empty if it has no leading/trailing pipe
+
+    if (!cells[0].trim()) {
+      cells.shift();
+    }
+
+    if (!cells[cells.length - 1].trim()) {
+      cells.pop();
+    }
+
+    if (cells.length > count) {
+      cells.splice(count);
+    } else {
+      while (cells.length < count) {
+        cells.push('');
+      }
+    }
+
+    for (; i < cells.length; i++) {
+      // leading or trailing whitespace is ignored per the gfm spec
+      cells[i] = cells[i].trim().replace(/\\\|/g, '|');
+    }
+
+    return cells;
+  } // Remove trailing 'c's. Equivalent to str.replace(/c*$/, '').
+  // /c*$/ is vulnerable to REDOS.
+  // invert: Remove suffix of non-c chars instead. Default falsey.
+
+
+  function rtrim$1(str, c, invert) {
+    var l = str.length;
+
+    if (l === 0) {
+      return '';
+    } // Length of suffix matching the invert condition.
+
+
+    var suffLen = 0; // Step left until we fail to match the invert condition.
+
+    while (suffLen < l) {
+      var currChar = str.charAt(l - suffLen - 1);
+
+      if (currChar === c && !invert) {
+        suffLen++;
+      } else if (currChar !== c && invert) {
+        suffLen++;
+      } else {
+        break;
+      }
+    }
+
+    return str.substr(0, l - suffLen);
+  }
+
+  function findClosingBracket$1(str, b) {
+    if (str.indexOf(b[1]) === -1) {
+      return -1;
+    }
+
+    var l = str.length;
+    var level = 0,
+        i = 0;
+
+    for (; i < l; i++) {
+      if (str[i] === '\\') {
+        i++;
+      } else if (str[i] === b[0]) {
+        level++;
+      } else if (str[i] === b[1]) {
+        level--;
+
+        if (level < 0) {
+          return i;
+        }
+      }
+    }
+
+    return -1;
+  }
+
+  function checkSanitizeDeprecation$1(opt) {
+    if (opt && opt.sanitize && !opt.silent) {
+      console.warn('marked(): sanitize and sanitizer parameters are deprecated since version 0.7.0, should not be used and will be removed in the future. Read more here: https://marked.js.org/#/USING_ADVANCED.md#options');
+    }
+  } // copied from https://stackoverflow.com/a/5450113/806777
+
+
+  function repeatString$1(pattern, count) {
+    if (count < 1) {
+      return '';
+    }
+
+    var result = '';
+
+    while (count > 1) {
+      if (count & 1) {
+        result += pattern;
+      }
+
+      count >>= 1;
+      pattern += pattern;
+    }
+
+    return result + pattern;
+  }
+
+  var helpers = {
+    escape: escape$2,
+    unescape: unescape$1,
+    edit: edit$1,
+    cleanUrl: cleanUrl$1,
+    resolveUrl: resolveUrl,
+    noopTest: noopTest$1,
+    merge: merge$2,
+    splitCells: splitCells$1,
+    rtrim: rtrim$1,
+    findClosingBracket: findClosingBracket$1,
+    checkSanitizeDeprecation: checkSanitizeDeprecation$1,
+    repeatString: repeatString$1
+  };
+
+  var defaults$4 = defaults$5.exports.defaults;
+  var rtrim = helpers.rtrim,
+      splitCells = helpers.splitCells,
+      _escape = helpers.escape,
+      findClosingBracket = helpers.findClosingBracket;
+
+  function outputLink(cap, link, raw, lexer) {
+    var href = link.href;
+    var title = link.title ? _escape(link.title) : null;
+    var text = cap[1].replace(/\\([\[\]])/g, '$1');
+
+    if (cap[0].charAt(0) !== '!') {
+      lexer.state.inLink = true;
+      var token = {
+        type: 'link',
+        raw: raw,
+        href: href,
+        title: title,
+        text: text,
+        tokens: lexer.inlineTokens(text, [])
+      };
+      lexer.state.inLink = false;
+      return token;
+    } else {
+      return {
+        type: 'image',
+        raw: raw,
+        href: href,
+        title: title,
+        text: _escape(text)
+      };
+    }
+  }
+
+  function indentCodeCompensation(raw, text) {
+    var matchIndentToCode = raw.match(/^(\s+)(?:```)/);
+
+    if (matchIndentToCode === null) {
+      return text;
+    }
+
+    var indentToCode = matchIndentToCode[1];
+    return text.split('\n').map(function (node) {
+      var matchIndentInNode = node.match(/^\s+/);
+
+      if (matchIndentInNode === null) {
+        return node;
+      }
+
+      var indentInNode = matchIndentInNode[0];
+
+      if (indentInNode.length >= indentToCode.length) {
+        return node.slice(indentToCode.length);
+      }
+
+      return node;
+    }).join('\n');
+  }
+  /**
+   * Tokenizer
+   */
+
+
+  var Tokenizer_1 = /*#__PURE__*/function () {
+    function Tokenizer(options) {
+      this.options = options || defaults$4;
+    }
+
+    var _proto = Tokenizer.prototype;
+
+    _proto.space = function space(src) {
+      var cap = this.rules.block.newline.exec(src);
+
+      if (cap) {
+        if (cap[0].length > 1) {
+          return {
+            type: 'space',
+            raw: cap[0]
+          };
+        }
+
+        return {
+          raw: '\n'
+        };
+      }
+    };
+
+    _proto.code = function code(src) {
+      var cap = this.rules.block.code.exec(src);
+
+      if (cap) {
+        var text = cap[0].replace(/^ {1,4}/gm, '');
+        return {
+          type: 'code',
+          raw: cap[0],
+          codeBlockStyle: 'indented',
+          text: !this.options.pedantic ? rtrim(text, '\n') : text
+        };
+      }
+    };
+
+    _proto.fences = function fences(src) {
+      var cap = this.rules.block.fences.exec(src);
+
+      if (cap) {
+        var raw = cap[0];
+        var text = indentCodeCompensation(raw, cap[3] || '');
+        return {
+          type: 'code',
+          raw: raw,
+          lang: cap[2] ? cap[2].trim() : cap[2],
+          text: text
+        };
+      }
+    };
+
+    _proto.heading = function heading(src) {
+      var cap = this.rules.block.heading.exec(src);
+
+      if (cap) {
+        var text = cap[2].trim(); // remove trailing #s
+
+        if (/#$/.test(text)) {
+          var trimmed = rtrim(text, '#');
+
+          if (this.options.pedantic) {
+            text = trimmed.trim();
+          } else if (!trimmed || / $/.test(trimmed)) {
+            // CommonMark requires space before trailing #s
+            text = trimmed.trim();
+          }
+        }
+
+        var token = {
+          type: 'heading',
+          raw: cap[0],
+          depth: cap[1].length,
+          text: text,
+          tokens: []
+        };
+        this.lexer.inline(token.text, token.tokens);
+        return token;
+      }
+    };
+
+    _proto.hr = function hr(src) {
+      var cap = this.rules.block.hr.exec(src);
+
+      if (cap) {
+        return {
+          type: 'hr',
+          raw: cap[0]
+        };
+      }
+    };
+
+    _proto.blockquote = function blockquote(src) {
+      var cap = this.rules.block.blockquote.exec(src);
+
+      if (cap) {
+        var text = cap[0].replace(/^ *> ?/gm, '');
+        return {
+          type: 'blockquote',
+          raw: cap[0],
+          tokens: this.lexer.blockTokens(text, []),
+          text: text
+        };
+      }
+    };
+
+    _proto.list = function list(src) {
+      var cap = this.rules.block.list.exec(src);
+
+      if (cap) {
+        var raw, istask, ischecked, indent, i, blankLine, endsWithBlankLine, line, lines, itemContents;
+        var bull = cap[1].trim();
+        var isordered = bull.length > 1;
+        var list = {
+          type: 'list',
+          raw: '',
+          ordered: isordered,
+          start: isordered ? +bull.slice(0, -1) : '',
+          loose: false,
+          items: []
+        };
+        bull = isordered ? "\\d{1,9}\\" + bull.slice(-1) : "\\" + bull;
+
+        if (this.options.pedantic) {
+          bull = isordered ? bull : '[*+-]';
+        } // Get next list item
+
+
+        var itemRegex = new RegExp("^( {0,3}" + bull + ")((?: [^\\n]*| *)(?:\\n[^\\n]*)*(?:\\n|$))"); // Get each top-level item
+
+        while (src) {
+          if (this.rules.block.hr.test(src)) {
+            // End list if we encounter an HR (possibly move into itemRegex?)
+            break;
+          }
+
+          if (!(cap = itemRegex.exec(src))) {
+            break;
+          }
+
+          lines = cap[2].split('\n');
+
+          if (this.options.pedantic) {
+            indent = 2;
+            itemContents = lines[0].trimLeft();
+          } else {
+            indent = cap[2].search(/[^ ]/); // Find first non-space char
+
+            indent = cap[1].length + (indent > 4 ? 1 : indent); // intented code blocks after 4 spaces; indent is always 1
+
+            itemContents = lines[0].slice(indent - cap[1].length);
+          }
+
+          blankLine = false;
+          raw = cap[0];
+
+          if (!lines[0] && /^ *$/.test(lines[1])) {
+            // items begin with at most one blank line
+            raw = cap[1] + lines.slice(0, 2).join('\n') + '\n';
+            list.loose = true;
+            lines = [];
+          }
+
+          var nextBulletRegex = new RegExp("^ {0," + Math.min(3, indent - 1) + "}(?:[*+-]|\\d{1,9}[.)])");
+
+          for (i = 1; i < lines.length; i++) {
+            line = lines[i];
+
+            if (this.options.pedantic) {
+              // Re-align to follow commonmark nesting rules
+              line = line.replace(/^ {1,4}(?=( {4})*[^ ])/g, '  ');
+            } // End list item if found start of new bullet
+
+
+            if (nextBulletRegex.test(line)) {
+              raw = cap[1] + lines.slice(0, i).join('\n') + '\n';
+              break;
+            } // Until we encounter a blank line, item contents do not need indentation
+
+
+            if (!blankLine) {
+              if (!line.trim()) {
+                // Check if current line is empty
+                blankLine = true;
+              } // Dedent if possible
+
+
+              if (line.search(/[^ ]/) >= indent) {
+                itemContents += '\n' + line.slice(indent);
+              } else {
+                itemContents += '\n' + line;
+              }
+
+              continue;
+            } // Dedent this line
+
+
+            if (line.search(/[^ ]/) >= indent || !line.trim()) {
+              itemContents += '\n' + line.slice(indent);
+              continue;
+            } else {
+              // Line was not properly indented; end of this item
+              raw = cap[1] + lines.slice(0, i).join('\n') + '\n';
+              break;
+            }
+          }
+
+          if (!list.loose) {
+            // If the previous item ended with a blank line, the list is loose
+            if (endsWithBlankLine) {
+              list.loose = true;
+            } else if (/\n *\n *$/.test(raw)) {
+              endsWithBlankLine = true;
+            }
+          } // Check for task list items
+
+
+          if (this.options.gfm) {
+            istask = /^\[[ xX]\] /.exec(itemContents);
+
+            if (istask) {
+              ischecked = istask[0] !== '[ ] ';
+              itemContents = itemContents.replace(/^\[[ xX]\] +/, '');
+            }
+          }
+
+          list.items.push({
+            type: 'list_item',
+            raw: raw,
+            task: !!istask,
+            checked: ischecked,
+            loose: false,
+            text: itemContents
+          });
+          list.raw += raw;
+          src = src.slice(raw.length);
+        } // Do not consume newlines at end of final item. Alternatively, make itemRegex *start* with any newlines to simplify/speed up endsWithBlankLine logic
+
+
+        list.items[list.items.length - 1].raw = raw.trimRight();
+        list.items[list.items.length - 1].text = itemContents.trimRight();
+        list.raw = list.raw.trimRight();
+        var l = list.items.length; // Item child tokens handled here at end because we needed to have the final item to trim it first
+
+        for (i = 0; i < l; i++) {
+          this.lexer.state.top = false;
+          list.items[i].tokens = this.lexer.blockTokens(list.items[i].text, []);
+
+          if (list.items[i].tokens.some(function (t) {
+            return t.type === 'space';
+          })) {
+            list.loose = true;
+            list.items[i].loose = true;
+          }
+        }
+
+        return list;
+      }
+    };
+
+    _proto.html = function html(src) {
+      var cap = this.rules.block.html.exec(src);
+
+      if (cap) {
+        var token = {
+          type: 'html',
+          raw: cap[0],
+          pre: !this.options.sanitizer && (cap[1] === 'pre' || cap[1] === 'script' || cap[1] === 'style'),
+          text: cap[0]
+        };
+
+        if (this.options.sanitize) {
+          token.type = 'paragraph';
+          token.text = this.options.sanitizer ? this.options.sanitizer(cap[0]) : _escape(cap[0]);
+          token.tokens = [];
+          this.lexer.inline(token.text, token.tokens);
+        }
+
+        return token;
+      }
+    };
+
+    _proto.def = function def(src) {
+      var cap = this.rules.block.def.exec(src);
+
+      if (cap) {
+        if (cap[3]) cap[3] = cap[3].substring(1, cap[3].length - 1);
+        var tag = cap[1].toLowerCase().replace(/\s+/g, ' ');
+        return {
+          type: 'def',
+          tag: tag,
+          raw: cap[0],
+          href: cap[2],
+          title: cap[3]
+        };
+      }
+    };
+
+    _proto.table = function table(src) {
+      var cap = this.rules.block.table.exec(src);
+
+      if (cap) {
+        var item = {
+          type: 'table',
+          header: splitCells(cap[1]).map(function (c) {
+            return {
+              text: c
+            };
+          }),
+          align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
+          rows: cap[3] ? cap[3].replace(/\n$/, '').split('\n') : []
+        };
+
+        if (item.header.length === item.align.length) {
+          item.raw = cap[0];
+          var l = item.align.length;
+          var i, j, k, row;
+
+          for (i = 0; i < l; i++) {
+            if (/^ *-+: *$/.test(item.align[i])) {
+              item.align[i] = 'right';
+            } else if (/^ *:-+: *$/.test(item.align[i])) {
+              item.align[i] = 'center';
+            } else if (/^ *:-+ *$/.test(item.align[i])) {
+              item.align[i] = 'left';
+            } else {
+              item.align[i] = null;
+            }
+          }
+
+          l = item.rows.length;
+
+          for (i = 0; i < l; i++) {
+            item.rows[i] = splitCells(item.rows[i], item.header.length).map(function (c) {
+              return {
+                text: c
+              };
+            });
+          } // parse child tokens inside headers and cells
+          // header child tokens
+
+
+          l = item.header.length;
+
+          for (j = 0; j < l; j++) {
+            item.header[j].tokens = [];
+            this.lexer.inlineTokens(item.header[j].text, item.header[j].tokens);
+          } // cell child tokens
+
+
+          l = item.rows.length;
+
+          for (j = 0; j < l; j++) {
+            row = item.rows[j];
+
+            for (k = 0; k < row.length; k++) {
+              row[k].tokens = [];
+              this.lexer.inlineTokens(row[k].text, row[k].tokens);
+            }
+          }
+
+          return item;
+        }
+      }
+    };
+
+    _proto.lheading = function lheading(src) {
+      var cap = this.rules.block.lheading.exec(src);
+
+      if (cap) {
+        var token = {
+          type: 'heading',
+          raw: cap[0],
+          depth: cap[2].charAt(0) === '=' ? 1 : 2,
+          text: cap[1],
+          tokens: []
+        };
+        this.lexer.inline(token.text, token.tokens);
+        return token;
+      }
+    };
+
+    _proto.paragraph = function paragraph(src) {
+      var cap = this.rules.block.paragraph.exec(src);
+
+      if (cap) {
+        var token = {
+          type: 'paragraph',
+          raw: cap[0],
+          text: cap[1].charAt(cap[1].length - 1) === '\n' ? cap[1].slice(0, -1) : cap[1],
+          tokens: []
+        };
+        this.lexer.inline(token.text, token.tokens);
+        return token;
+      }
+    };
+
+    _proto.text = function text(src) {
+      var cap = this.rules.block.text.exec(src);
+
+      if (cap) {
+        var token = {
+          type: 'text',
+          raw: cap[0],
+          text: cap[0],
+          tokens: []
+        };
+        this.lexer.inline(token.text, token.tokens);
+        return token;
+      }
+    };
+
+    _proto.escape = function escape(src) {
+      var cap = this.rules.inline.escape.exec(src);
+
+      if (cap) {
+        return {
+          type: 'escape',
+          raw: cap[0],
+          text: _escape(cap[1])
+        };
+      }
+    };
+
+    _proto.tag = function tag(src) {
+      var cap = this.rules.inline.tag.exec(src);
+
+      if (cap) {
+        if (!this.lexer.state.inLink && /^<a /i.test(cap[0])) {
+          this.lexer.state.inLink = true;
+        } else if (this.lexer.state.inLink && /^<\/a>/i.test(cap[0])) {
+          this.lexer.state.inLink = false;
+        }
+
+        if (!this.lexer.state.inRawBlock && /^<(pre|code|kbd|script)(\s|>)/i.test(cap[0])) {
+          this.lexer.state.inRawBlock = true;
+        } else if (this.lexer.state.inRawBlock && /^<\/(pre|code|kbd|script)(\s|>)/i.test(cap[0])) {
+          this.lexer.state.inRawBlock = false;
+        }
+
+        return {
+          type: this.options.sanitize ? 'text' : 'html',
+          raw: cap[0],
+          inLink: this.lexer.state.inLink,
+          inRawBlock: this.lexer.state.inRawBlock,
+          text: this.options.sanitize ? this.options.sanitizer ? this.options.sanitizer(cap[0]) : _escape(cap[0]) : cap[0]
+        };
+      }
+    };
+
+    _proto.link = function link(src) {
+      var cap = this.rules.inline.link.exec(src);
+
+      if (cap) {
+        var trimmedUrl = cap[2].trim();
+
+        if (!this.options.pedantic && /^</.test(trimmedUrl)) {
+          // commonmark requires matching angle brackets
+          if (!/>$/.test(trimmedUrl)) {
+            return;
+          } // ending angle bracket cannot be escaped
+
+
+          var rtrimSlash = rtrim(trimmedUrl.slice(0, -1), '\\');
+
+          if ((trimmedUrl.length - rtrimSlash.length) % 2 === 0) {
+            return;
+          }
+        } else {
+          // find closing parenthesis
+          var lastParenIndex = findClosingBracket(cap[2], '()');
+
+          if (lastParenIndex > -1) {
+            var start = cap[0].indexOf('!') === 0 ? 5 : 4;
+            var linkLen = start + cap[1].length + lastParenIndex;
+            cap[2] = cap[2].substring(0, lastParenIndex);
+            cap[0] = cap[0].substring(0, linkLen).trim();
+            cap[3] = '';
+          }
+        }
+
+        var href = cap[2];
+        var title = '';
+
+        if (this.options.pedantic) {
+          // split pedantic href and title
+          var link = /^([^'"]*[^\s])\s+(['"])(.*)\2/.exec(href);
+
+          if (link) {
+            href = link[1];
+            title = link[3];
+          }
+        } else {
+          title = cap[3] ? cap[3].slice(1, -1) : '';
+        }
+
+        href = href.trim();
+
+        if (/^</.test(href)) {
+          if (this.options.pedantic && !/>$/.test(trimmedUrl)) {
+            // pedantic allows starting angle bracket without ending angle bracket
+            href = href.slice(1);
+          } else {
+            href = href.slice(1, -1);
+          }
+        }
+
+        return outputLink(cap, {
+          href: href ? href.replace(this.rules.inline._escapes, '$1') : href,
+          title: title ? title.replace(this.rules.inline._escapes, '$1') : title
+        }, cap[0], this.lexer);
+      }
+    };
+
+    _proto.reflink = function reflink(src, links) {
+      var cap;
+
+      if ((cap = this.rules.inline.reflink.exec(src)) || (cap = this.rules.inline.nolink.exec(src))) {
+        var link = (cap[2] || cap[1]).replace(/\s+/g, ' ');
+        link = links[link.toLowerCase()];
+
+        if (!link || !link.href) {
+          var text = cap[0].charAt(0);
+          return {
+            type: 'text',
+            raw: text,
+            text: text
+          };
+        }
+
+        return outputLink(cap, link, cap[0], this.lexer);
+      }
+    };
+
+    _proto.emStrong = function emStrong(src, maskedSrc, prevChar) {
+      if (prevChar === void 0) {
+        prevChar = '';
+      }
+
+      var match = this.rules.inline.emStrong.lDelim.exec(src);
+      if (!match) return; // _ can't be between two alphanumerics. \p{L}\p{N} includes non-english alphabet/numbers as well
+
+      if (match[3] && prevChar.match(/(?:[0-9A-Za-z\xAA\xB2\xB3\xB5\xB9\xBA\xBC-\xBE\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0560-\u0588\u05D0-\u05EA\u05EF-\u05F2\u0620-\u064A\u0660-\u0669\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07C0-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u0860-\u086A\u08A0-\u08B4\u08B6-\u08C7\u0904-\u0939\u093D\u0950\u0958-\u0961\u0966-\u096F\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09E6-\u09F1\u09F4-\u09F9\u09FC\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A66-\u0A6F\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AE6-\u0AEF\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B66-\u0B6F\u0B71-\u0B77\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0BE6-\u0BF2\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C60\u0C61\u0C66-\u0C6F\u0C78-\u0C7E\u0C80\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CE6-\u0CEF\u0CF1\u0CF2\u0D04-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D54-\u0D56\u0D58-\u0D61\u0D66-\u0D78\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0DE6-\u0DEF\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E50-\u0E59\u0E81\u0E82\u0E84\u0E86-\u0E8A\u0E8C-\u0EA3\u0EA5\u0EA7-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0ED0-\u0ED9\u0EDC-\u0EDF\u0F00\u0F20-\u0F33\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F-\u1049\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u1090-\u1099\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1369-\u137C\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u17E0-\u17E9\u17F0-\u17F9\u1810-\u1819\u1820-\u1878\u1880-\u1884\u1887-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1946-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u19D0-\u19DA\u1A00-\u1A16\u1A20-\u1A54\u1A80-\u1A89\u1A90-\u1A99\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B50-\u1B59\u1B83-\u1BA0\u1BAE-\u1BE5\u1C00-\u1C23\u1C40-\u1C49\u1C4D-\u1C7D\u1C80-\u1C88\u1C90-\u1CBA\u1CBD-\u1CBF\u1CE9-\u1CEC\u1CEE-\u1CF3\u1CF5\u1CF6\u1CFA\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2070\u2071\u2074-\u2079\u207F-\u2089\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2150-\u2189\u2460-\u249B\u24EA-\u24FF\u2776-\u2793\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2CFD\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312F\u3131-\u318E\u3192-\u3195\u31A0-\u31BF\u31F0-\u31FF\u3220-\u3229\u3248-\u324F\u3251-\u325F\u3280-\u3289\u32B1-\u32BF\u3400-\u4DBF\u4E00-\u9FFC\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6EF\uA717-\uA71F\uA722-\uA788\uA78B-\uA7BF\uA7C2-\uA7CA\uA7F5-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA830-\uA835\uA840-\uA873\uA882-\uA8B3\uA8D0-\uA8D9\uA8F2-\uA8F7\uA8FB\uA8FD\uA8FE\uA900-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF-\uA9D9\uA9E0-\uA9E4\uA9E6-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA50-\uAA59\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB69\uAB70-\uABE2\uABF0-\uABF9\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF10-\uFF19\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD07-\uDD33\uDD40-\uDD78\uDD8A\uDD8B\uDE80-\uDE9C\uDEA0-\uDED0\uDEE1-\uDEFB\uDF00-\uDF23\uDF2D-\uDF4A\uDF50-\uDF75\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDCA0-\uDCA9\uDCB0-\uDCD3\uDCD8-\uDCFB\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC58-\uDC76\uDC79-\uDC9E\uDCA7-\uDCAF\uDCE0-\uDCF2\uDCF4\uDCF5\uDCFB-\uDD1B\uDD20-\uDD39\uDD80-\uDDB7\uDDBC-\uDDCF\uDDD2-\uDE00\uDE10-\uDE13\uDE15-\uDE17\uDE19-\uDE35\uDE40-\uDE48\uDE60-\uDE7E\uDE80-\uDE9F\uDEC0-\uDEC7\uDEC9-\uDEE4\uDEEB-\uDEEF\uDF00-\uDF35\uDF40-\uDF55\uDF58-\uDF72\uDF78-\uDF91\uDFA9-\uDFAF]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2\uDCFA-\uDD23\uDD30-\uDD39\uDE60-\uDE7E\uDE80-\uDEA9\uDEB0\uDEB1\uDF00-\uDF27\uDF30-\uDF45\uDF51-\uDF54\uDFB0-\uDFCB\uDFE0-\uDFF6]|\uD804[\uDC03-\uDC37\uDC52-\uDC6F\uDC83-\uDCAF\uDCD0-\uDCE8\uDCF0-\uDCF9\uDD03-\uDD26\uDD36-\uDD3F\uDD44\uDD47\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDD0-\uDDDA\uDDDC\uDDE1-\uDDF4\uDE00-\uDE11\uDE13-\uDE2B\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEDE\uDEF0-\uDEF9\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF50\uDF5D-\uDF61]|\uD805[\uDC00-\uDC34\uDC47-\uDC4A\uDC50-\uDC59\uDC5F-\uDC61\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDCD0-\uDCD9\uDD80-\uDDAE\uDDD8-\uDDDB\uDE00-\uDE2F\uDE44\uDE50-\uDE59\uDE80-\uDEAA\uDEB8\uDEC0-\uDEC9\uDF00-\uDF1A\uDF30-\uDF3B]|\uD806[\uDC00-\uDC2B\uDCA0-\uDCF2\uDCFF-\uDD06\uDD09\uDD0C-\uDD13\uDD15\uDD16\uDD18-\uDD2F\uDD3F\uDD41\uDD50-\uDD59\uDDA0-\uDDA7\uDDAA-\uDDD0\uDDE1\uDDE3\uDE00\uDE0B-\uDE32\uDE3A\uDE50\uDE5C-\uDE89\uDE9D\uDEC0-\uDEF8]|\uD807[\uDC00-\uDC08\uDC0A-\uDC2E\uDC40\uDC50-\uDC6C\uDC72-\uDC8F\uDD00-\uDD06\uDD08\uDD09\uDD0B-\uDD30\uDD46\uDD50-\uDD59\uDD60-\uDD65\uDD67\uDD68\uDD6A-\uDD89\uDD98\uDDA0-\uDDA9\uDEE0-\uDEF2\uDFB0\uDFC0-\uDFD4]|\uD808[\uDC00-\uDF99]|\uD809[\uDC00-\uDC6E\uDC80-\uDD43]|[\uD80C\uD81C-\uD820\uD822\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879\uD880-\uD883][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDE60-\uDE69\uDED0-\uDEED\uDF00-\uDF2F\uDF40-\uDF43\uDF50-\uDF59\uDF5B-\uDF61\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDE40-\uDE96\uDF00-\uDF4A\uDF50\uDF93-\uDF9F\uDFE0\uDFE1\uDFE3]|\uD821[\uDC00-\uDFF7]|\uD823[\uDC00-\uDCD5\uDD00-\uDD08]|\uD82C[\uDC00-\uDD1E\uDD50-\uDD52\uDD64-\uDD67\uDD70-\uDEFB]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99]|\uD834[\uDEE0-\uDEF3\uDF60-\uDF78]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB\uDFCE-\uDFFF]|\uD838[\uDD00-\uDD2C\uDD37-\uDD3D\uDD40-\uDD49\uDD4E\uDEC0-\uDEEB\uDEF0-\uDEF9]|\uD83A[\uDC00-\uDCC4\uDCC7-\uDCCF\uDD00-\uDD43\uDD4B\uDD50-\uDD59]|\uD83B[\uDC71-\uDCAB\uDCAD-\uDCAF\uDCB1-\uDCB4\uDD01-\uDD2D\uDD2F-\uDD3D\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD83C[\uDD00-\uDD0C]|\uD83E[\uDFF0-\uDFF9]|\uD869[\uDC00-\uDEDD\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|\uD87E[\uDC00-\uDE1D]|\uD884[\uDC00-\uDF4A])/)) return;
+      var nextChar = match[1] || match[2] || '';
+
+      if (!nextChar || nextChar && (prevChar === '' || this.rules.inline.punctuation.exec(prevChar))) {
+        var lLength = match[0].length - 1;
+        var rDelim,
+            rLength,
+            delimTotal = lLength,
+            midDelimTotal = 0;
+        var endReg = match[0][0] === '*' ? this.rules.inline.emStrong.rDelimAst : this.rules.inline.emStrong.rDelimUnd;
+        endReg.lastIndex = 0; // Clip maskedSrc to same section of string as src (move to lexer?)
+
+        maskedSrc = maskedSrc.slice(-1 * src.length + lLength);
+
+        while ((match = endReg.exec(maskedSrc)) != null) {
+          rDelim = match[1] || match[2] || match[3] || match[4] || match[5] || match[6];
+          if (!rDelim) continue; // skip single * in __abc*abc__
+
+          rLength = rDelim.length;
+
+          if (match[3] || match[4]) {
+            // found another Left Delim
+            delimTotal += rLength;
+            continue;
+          } else if (match[5] || match[6]) {
+            // either Left or Right Delim
+            if (lLength % 3 && !((lLength + rLength) % 3)) {
+              midDelimTotal += rLength;
+              continue; // CommonMark Emphasis Rules 9-10
+            }
+          }
+
+          delimTotal -= rLength;
+          if (delimTotal > 0) continue; // Haven't found enough closing delimiters
+          // Remove extra characters. *a*** -> *a*
+
+          rLength = Math.min(rLength, rLength + delimTotal + midDelimTotal); // Create `em` if smallest delimiter has odd char count. *a***
+
+          if (Math.min(lLength, rLength) % 2) {
+            var _text = src.slice(1, lLength + match.index + rLength);
+
+            return {
+              type: 'em',
+              raw: src.slice(0, lLength + match.index + rLength + 1),
+              text: _text,
+              tokens: this.lexer.inlineTokens(_text, [])
+            };
+          } // Create 'strong' if smallest delimiter has even char count. **a***
+
+
+          var text = src.slice(2, lLength + match.index + rLength - 1);
+          return {
+            type: 'strong',
+            raw: src.slice(0, lLength + match.index + rLength + 1),
+            text: text,
+            tokens: this.lexer.inlineTokens(text, [])
+          };
+        }
+      }
+    };
+
+    _proto.codespan = function codespan(src) {
+      var cap = this.rules.inline.code.exec(src);
+
+      if (cap) {
+        var text = cap[2].replace(/\n/g, ' ');
+        var hasNonSpaceChars = /[^ ]/.test(text);
+        var hasSpaceCharsOnBothEnds = /^ /.test(text) && / $/.test(text);
+
+        if (hasNonSpaceChars && hasSpaceCharsOnBothEnds) {
+          text = text.substring(1, text.length - 1);
+        }
+
+        text = _escape(text, true);
+        return {
+          type: 'codespan',
+          raw: cap[0],
+          text: text
+        };
+      }
+    };
+
+    _proto.br = function br(src) {
+      var cap = this.rules.inline.br.exec(src);
+
+      if (cap) {
+        return {
+          type: 'br',
+          raw: cap[0]
+        };
+      }
+    };
+
+    _proto.del = function del(src) {
+      var cap = this.rules.inline.del.exec(src);
+
+      if (cap) {
+        return {
+          type: 'del',
+          raw: cap[0],
+          text: cap[2],
+          tokens: this.lexer.inlineTokens(cap[2], [])
+        };
+      }
+    };
+
+    _proto.autolink = function autolink(src, mangle) {
+      var cap = this.rules.inline.autolink.exec(src);
+
+      if (cap) {
+        var text, href;
+
+        if (cap[2] === '@') {
+          text = _escape(this.options.mangle ? mangle(cap[1]) : cap[1]);
+          href = 'mailto:' + text;
+        } else {
+          text = _escape(cap[1]);
+          href = text;
+        }
+
+        return {
+          type: 'link',
+          raw: cap[0],
+          text: text,
+          href: href,
+          tokens: [{
+            type: 'text',
+            raw: text,
+            text: text
+          }]
+        };
+      }
+    };
+
+    _proto.url = function url(src, mangle) {
+      var cap;
+
+      if (cap = this.rules.inline.url.exec(src)) {
+        var text, href;
+
+        if (cap[2] === '@') {
+          text = _escape(this.options.mangle ? mangle(cap[0]) : cap[0]);
+          href = 'mailto:' + text;
+        } else {
+          // do extended autolink path validation
+          var prevCapZero;
+
+          do {
+            prevCapZero = cap[0];
+            cap[0] = this.rules.inline._backpedal.exec(cap[0])[0];
+          } while (prevCapZero !== cap[0]);
+
+          text = _escape(cap[0]);
+
+          if (cap[1] === 'www.') {
+            href = 'http://' + text;
+          } else {
+            href = text;
+          }
+        }
+
+        return {
+          type: 'link',
+          raw: cap[0],
+          text: text,
+          href: href,
+          tokens: [{
+            type: 'text',
+            raw: text,
+            text: text
+          }]
+        };
+      }
+    };
+
+    _proto.inlineText = function inlineText(src, smartypants) {
+      var cap = this.rules.inline.text.exec(src);
+
+      if (cap) {
+        var text;
+
+        if (this.lexer.state.inRawBlock) {
+          text = this.options.sanitize ? this.options.sanitizer ? this.options.sanitizer(cap[0]) : _escape(cap[0]) : cap[0];
+        } else {
+          text = _escape(this.options.smartypants ? smartypants(cap[0]) : cap[0]);
+        }
+
+        return {
+          type: 'text',
+          raw: cap[0],
+          text: text
+        };
+      }
+    };
+
+    return Tokenizer;
+  }();
+
+  var noopTest = helpers.noopTest,
+      edit = helpers.edit,
+      merge$1 = helpers.merge;
+  /**
+   * Block-Level Grammar
+   */
+
+  var block$1 = {
+    newline: /^(?: *(?:\n|$))+/,
+    code: /^( {4}[^\n]+(?:\n(?: *(?:\n|$))*)?)+/,
+    fences: /^ {0,3}(`{3,}(?=[^`\n]*\n)|~{3,})([^\n]*)\n(?:|([\s\S]*?)\n)(?: {0,3}\1[~`]* *(?=\n|$)|$)/,
+    hr: /^ {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)/,
+    heading: /^ {0,3}(#{1,6})(?=\s|$)(.*)(?:\n+|$)/,
+    blockquote: /^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/,
+    list: /^( {0,3}bull)( [^\n]+?)?(?:\n|$)/,
+    html: '^ {0,3}(?:' // optional indentation
+    + '<(script|pre|style|textarea)[\\s>][\\s\\S]*?(?:</\\1>[^\\n]*\\n+|$)' // (1)
+    + '|comment[^\\n]*(\\n+|$)' // (2)
+    + '|<\\?[\\s\\S]*?(?:\\?>\\n*|$)' // (3)
+    + '|<![A-Z][\\s\\S]*?(?:>\\n*|$)' // (4)
+    + '|<!\\[CDATA\\[[\\s\\S]*?(?:\\]\\]>\\n*|$)' // (5)
+    + '|</?(tag)(?: +|\\n|/?>)[\\s\\S]*?(?:(?:\\n *)+\\n|$)' // (6)
+    + '|<(?!script|pre|style|textarea)([a-z][\\w-]*)(?:attribute)*? */?>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n *)+\\n|$)' // (7) open tag
+    + '|</(?!script|pre|style|textarea)[a-z][\\w-]*\\s*>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n *)+\\n|$)' // (7) closing tag
+    + ')',
+    def: /^ {0,3}\[(label)\]: *\n? *<?([^\s>]+)>?(?:(?: +\n? *| *\n *)(title))? *(?:\n+|$)/,
+    table: noopTest,
+    lheading: /^([^\n]+)\n {0,3}(=+|-+) *(?:\n+|$)/,
+    // regex template, placeholders will be replaced according to different paragraph
+    // interruption rules of commonmark and the original markdown spec:
+    _paragraph: /^([^\n]+(?:\n(?!hr|heading|lheading|blockquote|fences|list|html| +\n)[^\n]+)*)/,
+    text: /^[^\n]+/
+  };
+  block$1._label = /(?!\s*\])(?:\\[\[\]]|[^\[\]])+/;
+  block$1._title = /(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/;
+  block$1.def = edit(block$1.def).replace('label', block$1._label).replace('title', block$1._title).getRegex();
+  block$1.bullet = /(?:[*+-]|\d{1,9}[.)])/;
+  block$1.listItemStart = edit(/^( *)(bull) */).replace('bull', block$1.bullet).getRegex();
+  block$1.list = edit(block$1.list).replace(/bull/g, block$1.bullet).replace('hr', '\\n+(?=\\1?(?:(?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$))').replace('def', '\\n+(?=' + block$1.def.source + ')').getRegex();
+  block$1._tag = 'address|article|aside|base|basefont|blockquote|body|caption' + '|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption' + '|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe' + '|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option' + '|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr' + '|track|ul';
+  block$1._comment = /<!--(?!-?>)[\s\S]*?(?:-->|$)/;
+  block$1.html = edit(block$1.html, 'i').replace('comment', block$1._comment).replace('tag', block$1._tag).replace('attribute', / +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/).getRegex();
+  block$1.paragraph = edit(block$1._paragraph).replace('hr', block$1.hr).replace('heading', ' {0,3}#{1,6} ').replace('|lheading', '') // setex headings don't interrupt commonmark paragraphs
+  .replace('blockquote', ' {0,3}>').replace('fences', ' {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n').replace('list', ' {0,3}(?:[*+-]|1[.)]) ') // only lists starting from 1 can interrupt
+  .replace('html', '</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)').replace('tag', block$1._tag) // pars can be interrupted by type (6) html blocks
+  .getRegex();
+  block$1.blockquote = edit(block$1.blockquote).replace('paragraph', block$1.paragraph).getRegex();
+  /**
+   * Normal Block Grammar
+   */
+
+  block$1.normal = merge$1({}, block$1);
+  /**
+   * GFM Block Grammar
+   */
+
+  block$1.gfm = merge$1({}, block$1.normal, {
+    table: '^ *([^\\n ].*\\|.*)\\n' // Header
+    + ' {0,3}(?:\\| *)?(:?-+:? *(?:\\| *:?-+:? *)*)(?:\\| *)?' // Align
+    + '(?:\\n((?:(?! *\\n|hr|heading|blockquote|code|fences|list|html).*(?:\\n|$))*)\\n*|$)' // Cells
+
+  });
+  block$1.gfm.table = edit(block$1.gfm.table).replace('hr', block$1.hr).replace('heading', ' {0,3}#{1,6} ').replace('blockquote', ' {0,3}>').replace('code', ' {4}[^\\n]').replace('fences', ' {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n').replace('list', ' {0,3}(?:[*+-]|1[.)]) ') // only lists starting from 1 can interrupt
+  .replace('html', '</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)').replace('tag', block$1._tag) // tables can be interrupted by type (6) html blocks
+  .getRegex();
+  /**
+   * Pedantic grammar (original John Gruber's loose markdown specification)
+   */
+
+  block$1.pedantic = merge$1({}, block$1.normal, {
+    html: edit('^ *(?:comment *(?:\\n|\\s*$)' + '|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)' // closed tag
+    + '|<tag(?:"[^"]*"|\'[^\']*\'|\\s[^\'"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))').replace('comment', block$1._comment).replace(/tag/g, '(?!(?:' + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub' + '|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)' + '\\b)\\w+(?!:|[^\\w\\s@]*@)\\b').getRegex(),
+    def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +(["(][^\n]+[")]))? *(?:\n+|$)/,
+    heading: /^(#{1,6})(.*)(?:\n+|$)/,
+    fences: noopTest,
+    // fences not supported
+    paragraph: edit(block$1.normal._paragraph).replace('hr', block$1.hr).replace('heading', ' *#{1,6} *[^\n]').replace('lheading', block$1.lheading).replace('blockquote', ' {0,3}>').replace('|fences', '').replace('|list', '').replace('|html', '').getRegex()
+  });
+  /**
+   * Inline-Level Grammar
+   */
+
+  var inline$1 = {
+    escape: /^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/,
+    autolink: /^<(scheme:[^\s\x00-\x1f<>]*|email)>/,
+    url: noopTest,
+    tag: '^comment' + '|^</[a-zA-Z][\\w:-]*\\s*>' // self-closing tag
+    + '|^<[a-zA-Z][\\w-]*(?:attribute)*?\\s*/?>' // open tag
+    + '|^<\\?[\\s\\S]*?\\?>' // processing instruction, e.g. <?php ?>
+    + '|^<![a-zA-Z]+\\s[\\s\\S]*?>' // declaration, e.g. <!DOCTYPE html>
+    + '|^<!\\[CDATA\\[[\\s\\S]*?\\]\\]>',
+    // CDATA section
+    link: /^!?\[(label)\]\(\s*(href)(?:\s+(title))?\s*\)/,
+    reflink: /^!?\[(label)\]\[(?!\s*\])((?:\\[\[\]]?|[^\[\]\\])+)\]/,
+    nolink: /^!?\[(?!\s*\])((?:\[[^\[\]]*\]|\\[\[\]]|[^\[\]])*)\](?:\[\])?/,
+    reflinkSearch: 'reflink|nolink(?!\\()',
+    emStrong: {
+      lDelim: /^(?:\*+(?:([punct_])|[^\s*]))|^_+(?:([punct*])|([^\s_]))/,
+      //        (1) and (2) can only be a Right Delimiter. (3) and (4) can only be Left.  (5) and (6) can be either Left or Right.
+      //        () Skip orphan delim inside strong    (1) #***                (2) a***#, a***                   (3) #***a, ***a                 (4) ***#              (5) #***#                 (6) a***a
+      rDelimAst: /^[^_*]*?\_\_[^_*]*?\*[^_*]*?(?=\_\_)|[punct_](\*+)(?=[\s]|$)|[^punct*_\s](\*+)(?=[punct_\s]|$)|[punct_\s](\*+)(?=[^punct*_\s])|[\s](\*+)(?=[punct_])|[punct_](\*+)(?=[punct_])|[^punct*_\s](\*+)(?=[^punct*_\s])/,
+      rDelimUnd: /^[^_*]*?\*\*[^_*]*?\_[^_*]*?(?=\*\*)|[punct*](\_+)(?=[\s]|$)|[^punct*_\s](\_+)(?=[punct*\s]|$)|[punct*\s](\_+)(?=[^punct*_\s])|[\s](\_+)(?=[punct*])|[punct*](\_+)(?=[punct*])/ // ^- Not allowed for _
+
+    },
+    code: /^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/,
+    br: /^( {2,}|\\)\n(?!\s*$)/,
+    del: noopTest,
+    text: /^(`+|[^`])(?:(?= {2,}\n)|[\s\S]*?(?:(?=[\\<!\[`*_]|\b_|$)|[^ ](?= {2,}\n)))/,
+    punctuation: /^([\spunctuation])/
+  }; // list of punctuation marks from CommonMark spec
+  // without * and _ to handle the different emphasis markers * and _
+
+  inline$1._punctuation = '!"#$%&\'()+\\-.,/:;<=>?@\\[\\]`^{|}~';
+  inline$1.punctuation = edit(inline$1.punctuation).replace(/punctuation/g, inline$1._punctuation).getRegex(); // sequences em should skip over [title](link), `code`, <html>
+
+  inline$1.blockSkip = /\[[^\]]*?\]\([^\)]*?\)|`[^`]*?`|<[^>]*?>/g;
+  inline$1.escapedEmSt = /\\\*|\\_/g;
+  inline$1._comment = edit(block$1._comment).replace('(?:-->|$)', '-->').getRegex();
+  inline$1.emStrong.lDelim = edit(inline$1.emStrong.lDelim).replace(/punct/g, inline$1._punctuation).getRegex();
+  inline$1.emStrong.rDelimAst = edit(inline$1.emStrong.rDelimAst, 'g').replace(/punct/g, inline$1._punctuation).getRegex();
+  inline$1.emStrong.rDelimUnd = edit(inline$1.emStrong.rDelimUnd, 'g').replace(/punct/g, inline$1._punctuation).getRegex();
+  inline$1._escapes = /\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/g;
+  inline$1._scheme = /[a-zA-Z][a-zA-Z0-9+.-]{1,31}/;
+  inline$1._email = /[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_])/;
+  inline$1.autolink = edit(inline$1.autolink).replace('scheme', inline$1._scheme).replace('email', inline$1._email).getRegex();
+  inline$1._attribute = /\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?/;
+  inline$1.tag = edit(inline$1.tag).replace('comment', inline$1._comment).replace('attribute', inline$1._attribute).getRegex();
+  inline$1._label = /(?:\[(?:\\.|[^\[\]\\])*\]|\\.|`[^`]*`|[^\[\]\\`])*?/;
+  inline$1._href = /<(?:\\.|[^\n<>\\])+>|[^\s\x00-\x1f]*/;
+  inline$1._title = /"(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)/;
+  inline$1.link = edit(inline$1.link).replace('label', inline$1._label).replace('href', inline$1._href).replace('title', inline$1._title).getRegex();
+  inline$1.reflink = edit(inline$1.reflink).replace('label', inline$1._label).getRegex();
+  inline$1.reflinkSearch = edit(inline$1.reflinkSearch, 'g').replace('reflink', inline$1.reflink).replace('nolink', inline$1.nolink).getRegex();
+  /**
+   * Normal Inline Grammar
+   */
+
+  inline$1.normal = merge$1({}, inline$1);
+  /**
+   * Pedantic Inline Grammar
+   */
+
+  inline$1.pedantic = merge$1({}, inline$1.normal, {
+    strong: {
+      start: /^__|\*\*/,
+      middle: /^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,
+      endAst: /\*\*(?!\*)/g,
+      endUnd: /__(?!_)/g
+    },
+    em: {
+      start: /^_|\*/,
+      middle: /^()\*(?=\S)([\s\S]*?\S)\*(?!\*)|^_(?=\S)([\s\S]*?\S)_(?!_)/,
+      endAst: /\*(?!\*)/g,
+      endUnd: /_(?!_)/g
+    },
+    link: edit(/^!?\[(label)\]\((.*?)\)/).replace('label', inline$1._label).getRegex(),
+    reflink: edit(/^!?\[(label)\]\s*\[([^\]]*)\]/).replace('label', inline$1._label).getRegex()
+  });
+  /**
+   * GFM Inline Grammar
+   */
+
+  inline$1.gfm = merge$1({}, inline$1.normal, {
+    escape: edit(inline$1.escape).replace('])', '~|])').getRegex(),
+    _extended_email: /[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/,
+    url: /^((?:ftp|https?):\/\/|www\.)(?:[a-zA-Z0-9\-]+\.?)+[^\s<]*|^email/,
+    _backpedal: /(?:[^?!.,:;*_~()&]+|\([^)]*\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_~)]+(?!$))+/,
+    del: /^(~~?)(?=[^\s~])([\s\S]*?[^\s~])\1(?=[^~]|$)/,
+    text: /^([`~]+|[^`~])(?:(?= {2,}\n)|(?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)|[\s\S]*?(?:(?=[\\<!\[`*~_]|\b_|https?:\/\/|ftp:\/\/|www\.|$)|[^ ](?= {2,}\n)|[^a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-](?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)))/
+  });
+  inline$1.gfm.url = edit(inline$1.gfm.url, 'i').replace('email', inline$1.gfm._extended_email).getRegex();
+  /**
+   * GFM + Line Breaks Inline Grammar
+   */
+
+  inline$1.breaks = merge$1({}, inline$1.gfm, {
+    br: edit(inline$1.br).replace('{2,}', '*').getRegex(),
+    text: edit(inline$1.gfm.text).replace('\\b_', '\\b_| {2,}\\n').replace(/\{2,\}/g, '*').getRegex()
+  });
+  var rules = {
+    block: block$1,
+    inline: inline$1
+  };
+
+  var Tokenizer$1 = Tokenizer_1;
+  var defaults$3 = defaults$5.exports.defaults;
+  var block = rules.block,
+      inline = rules.inline;
+  var repeatString = helpers.repeatString;
+  /**
+   * smartypants text replacement
+   */
+
+  function smartypants(text) {
+    return text // em-dashes
+    .replace(/---/g, "\u2014") // en-dashes
+    .replace(/--/g, "\u2013") // opening singles
+    .replace(/(^|[-\u2014/(\[{"\s])'/g, "$1\u2018") // closing singles & apostrophes
+    .replace(/'/g, "\u2019") // opening doubles
+    .replace(/(^|[-\u2014/(\[{\u2018\s])"/g, "$1\u201C") // closing doubles
+    .replace(/"/g, "\u201D") // ellipses
+    .replace(/\.{3}/g, "\u2026");
+  }
+  /**
+   * mangle email addresses
+   */
+
+
+  function mangle(text) {
+    var out = '',
+        i,
+        ch;
+    var l = text.length;
+
+    for (i = 0; i < l; i++) {
+      ch = text.charCodeAt(i);
+
+      if (Math.random() > 0.5) {
+        ch = 'x' + ch.toString(16);
+      }
+
+      out += '&#' + ch + ';';
+    }
+
+    return out;
+  }
+  /**
+   * Block Lexer
+   */
+
+
+  var Lexer_1 = /*#__PURE__*/function () {
+    function Lexer(options) {
+      this.tokens = [];
+      this.tokens.links = Object.create(null);
+      this.options = options || defaults$3;
+      this.options.tokenizer = this.options.tokenizer || new Tokenizer$1();
+      this.tokenizer = this.options.tokenizer;
+      this.tokenizer.options = this.options;
+      this.tokenizer.lexer = this;
+      this.inlineQueue = [];
+      this.state = {
+        inLink: false,
+        inRawBlock: false,
+        top: true
+      };
+      var rules = {
+        block: block.normal,
+        inline: inline.normal
+      };
+
+      if (this.options.pedantic) {
+        rules.block = block.pedantic;
+        rules.inline = inline.pedantic;
+      } else if (this.options.gfm) {
+        rules.block = block.gfm;
+
+        if (this.options.breaks) {
+          rules.inline = inline.breaks;
+        } else {
+          rules.inline = inline.gfm;
+        }
+      }
+
+      this.tokenizer.rules = rules;
+    }
+    /**
+     * Expose Rules
+     */
+
+
+    /**
+     * Static Lex Method
+     */
+    Lexer.lex = function lex(src, options) {
+      var lexer = new Lexer(options);
+      return lexer.lex(src);
+    }
+    /**
+     * Static Lex Inline Method
+     */
+    ;
+
+    Lexer.lexInline = function lexInline(src, options) {
+      var lexer = new Lexer(options);
+      return lexer.inlineTokens(src);
+    }
+    /**
+     * Preprocessing
+     */
+    ;
+
+    var _proto = Lexer.prototype;
+
+    _proto.lex = function lex(src) {
+      src = src.replace(/\r\n|\r/g, '\n').replace(/\t/g, '    ');
+      this.blockTokens(src, this.tokens);
+      var next;
+
+      while (next = this.inlineQueue.shift()) {
+        this.inlineTokens(next.src, next.tokens);
+      }
+
+      return this.tokens;
+    }
+    /**
+     * Lexing
+     */
+    ;
+
+    _proto.blockTokens = function blockTokens(src, tokens) {
+      var _this = this;
+
+      if (tokens === void 0) {
+        tokens = [];
+      }
+
+      if (this.options.pedantic) {
+        src = src.replace(/^ +$/gm, '');
+      }
+
+      var token, lastToken, cutSrc, lastParagraphClipped;
+
+      while (src) {
+        if (this.options.extensions && this.options.extensions.block && this.options.extensions.block.some(function (extTokenizer) {
+          if (token = extTokenizer.call({
+            lexer: _this
+          }, src, tokens)) {
+            src = src.substring(token.raw.length);
+            tokens.push(token);
+            return true;
+          }
+
+          return false;
+        })) {
+          continue;
+        } // newline
+
+
+        if (token = this.tokenizer.space(src)) {
+          src = src.substring(token.raw.length);
+
+          if (token.type) {
+            tokens.push(token);
+          }
+
+          continue;
+        } // code
+
+
+        if (token = this.tokenizer.code(src)) {
+          src = src.substring(token.raw.length);
+          lastToken = tokens[tokens.length - 1]; // An indented code block cannot interrupt a paragraph.
+
+          if (lastToken && (lastToken.type === 'paragraph' || lastToken.type === 'text')) {
+            lastToken.raw += '\n' + token.raw;
+            lastToken.text += '\n' + token.text;
+            this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text;
+          } else {
+            tokens.push(token);
+          }
+
+          continue;
+        } // fences
+
+
+        if (token = this.tokenizer.fences(src)) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // heading
+
+
+        if (token = this.tokenizer.heading(src)) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // hr
+
+
+        if (token = this.tokenizer.hr(src)) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // blockquote
+
+
+        if (token = this.tokenizer.blockquote(src)) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // list
+
+
+        if (token = this.tokenizer.list(src)) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // html
+
+
+        if (token = this.tokenizer.html(src)) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // def
+
+
+        if (token = this.tokenizer.def(src)) {
+          src = src.substring(token.raw.length);
+          lastToken = tokens[tokens.length - 1];
+
+          if (lastToken && (lastToken.type === 'paragraph' || lastToken.type === 'text')) {
+            lastToken.raw += '\n' + token.raw;
+            lastToken.text += '\n' + token.raw;
+            this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text;
+          } else if (!this.tokens.links[token.tag]) {
+            this.tokens.links[token.tag] = {
+              href: token.href,
+              title: token.title
+            };
+          }
+
+          continue;
+        } // table (gfm)
+
+
+        if (token = this.tokenizer.table(src)) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // lheading
+
+
+        if (token = this.tokenizer.lheading(src)) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // top-level paragraph
+        // prevent paragraph consuming extensions by clipping 'src' to extension start
+
+
+        cutSrc = src;
+
+        if (this.options.extensions && this.options.extensions.startBlock) {
+          (function () {
+            var startIndex = Infinity;
+            var tempSrc = src.slice(1);
+            var tempStart = void 0;
+
+            _this.options.extensions.startBlock.forEach(function (getStartIndex) {
+              tempStart = getStartIndex.call({
+                lexer: this
+              }, tempSrc);
+
+              if (typeof tempStart === 'number' && tempStart >= 0) {
+                startIndex = Math.min(startIndex, tempStart);
+              }
+            });
+
+            if (startIndex < Infinity && startIndex >= 0) {
+              cutSrc = src.substring(0, startIndex + 1);
+            }
+          })();
+        }
+
+        if (this.state.top && (token = this.tokenizer.paragraph(cutSrc))) {
+          lastToken = tokens[tokens.length - 1];
+
+          if (lastParagraphClipped && lastToken.type === 'paragraph') {
+            lastToken.raw += '\n' + token.raw;
+            lastToken.text += '\n' + token.text;
+            this.inlineQueue.pop();
+            this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text;
+          } else {
+            tokens.push(token);
+          }
+
+          lastParagraphClipped = cutSrc.length !== src.length;
+          src = src.substring(token.raw.length);
+          continue;
+        } // text
+
+
+        if (token = this.tokenizer.text(src)) {
+          src = src.substring(token.raw.length);
+          lastToken = tokens[tokens.length - 1];
+
+          if (lastToken && lastToken.type === 'text') {
+            lastToken.raw += '\n' + token.raw;
+            lastToken.text += '\n' + token.text;
+            this.inlineQueue.pop();
+            this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text;
+          } else {
+            tokens.push(token);
+          }
+
+          continue;
+        }
+
+        if (src) {
+          var errMsg = 'Infinite loop on byte: ' + src.charCodeAt(0);
+
+          if (this.options.silent) {
+            console.error(errMsg);
+            break;
+          } else {
+            throw new Error(errMsg);
+          }
+        }
+      }
+
+      this.state.top = true;
+      return tokens;
+    };
+
+    _proto.inline = function inline(src, tokens) {
+      this.inlineQueue.push({
+        src: src,
+        tokens: tokens
+      });
+    }
+    /**
+     * Lexing/Compiling
+     */
+    ;
+
+    _proto.inlineTokens = function inlineTokens(src, tokens) {
+      var _this2 = this;
+
+      if (tokens === void 0) {
+        tokens = [];
+      }
+
+      var token, lastToken, cutSrc; // String with links masked to avoid interference with em and strong
+
+      var maskedSrc = src;
+      var match;
+      var keepPrevChar, prevChar; // Mask out reflinks
+
+      if (this.tokens.links) {
+        var links = Object.keys(this.tokens.links);
+
+        if (links.length > 0) {
+          while ((match = this.tokenizer.rules.inline.reflinkSearch.exec(maskedSrc)) != null) {
+            if (links.includes(match[0].slice(match[0].lastIndexOf('[') + 1, -1))) {
+              maskedSrc = maskedSrc.slice(0, match.index) + '[' + repeatString('a', match[0].length - 2) + ']' + maskedSrc.slice(this.tokenizer.rules.inline.reflinkSearch.lastIndex);
+            }
+          }
+        }
+      } // Mask out other blocks
+
+
+      while ((match = this.tokenizer.rules.inline.blockSkip.exec(maskedSrc)) != null) {
+        maskedSrc = maskedSrc.slice(0, match.index) + '[' + repeatString('a', match[0].length - 2) + ']' + maskedSrc.slice(this.tokenizer.rules.inline.blockSkip.lastIndex);
+      } // Mask out escaped em & strong delimiters
+
+
+      while ((match = this.tokenizer.rules.inline.escapedEmSt.exec(maskedSrc)) != null) {
+        maskedSrc = maskedSrc.slice(0, match.index) + '++' + maskedSrc.slice(this.tokenizer.rules.inline.escapedEmSt.lastIndex);
+      }
+
+      while (src) {
+        if (!keepPrevChar) {
+          prevChar = '';
+        }
+
+        keepPrevChar = false; // extensions
+
+        if (this.options.extensions && this.options.extensions.inline && this.options.extensions.inline.some(function (extTokenizer) {
+          if (token = extTokenizer.call({
+            lexer: _this2
+          }, src, tokens)) {
+            src = src.substring(token.raw.length);
+            tokens.push(token);
+            return true;
+          }
+
+          return false;
+        })) {
+          continue;
+        } // escape
+
+
+        if (token = this.tokenizer.escape(src)) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // tag
+
+
+        if (token = this.tokenizer.tag(src)) {
+          src = src.substring(token.raw.length);
+          lastToken = tokens[tokens.length - 1];
+
+          if (lastToken && token.type === 'text' && lastToken.type === 'text') {
+            lastToken.raw += token.raw;
+            lastToken.text += token.text;
+          } else {
+            tokens.push(token);
+          }
+
+          continue;
+        } // link
+
+
+        if (token = this.tokenizer.link(src)) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // reflink, nolink
+
+
+        if (token = this.tokenizer.reflink(src, this.tokens.links)) {
+          src = src.substring(token.raw.length);
+          lastToken = tokens[tokens.length - 1];
+
+          if (lastToken && token.type === 'text' && lastToken.type === 'text') {
+            lastToken.raw += token.raw;
+            lastToken.text += token.text;
+          } else {
+            tokens.push(token);
+          }
+
+          continue;
+        } // em & strong
+
+
+        if (token = this.tokenizer.emStrong(src, maskedSrc, prevChar)) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // code
+
+
+        if (token = this.tokenizer.codespan(src)) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // br
+
+
+        if (token = this.tokenizer.br(src)) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // del (gfm)
+
+
+        if (token = this.tokenizer.del(src)) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // autolink
+
+
+        if (token = this.tokenizer.autolink(src, mangle)) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // url (gfm)
+
+
+        if (!this.state.inLink && (token = this.tokenizer.url(src, mangle))) {
+          src = src.substring(token.raw.length);
+          tokens.push(token);
+          continue;
+        } // text
+        // prevent inlineText consuming extensions by clipping 'src' to extension start
+
+
+        cutSrc = src;
+
+        if (this.options.extensions && this.options.extensions.startInline) {
+          (function () {
+            var startIndex = Infinity;
+            var tempSrc = src.slice(1);
+            var tempStart = void 0;
+
+            _this2.options.extensions.startInline.forEach(function (getStartIndex) {
+              tempStart = getStartIndex.call({
+                lexer: this
+              }, tempSrc);
+
+              if (typeof tempStart === 'number' && tempStart >= 0) {
+                startIndex = Math.min(startIndex, tempStart);
+              }
+            });
+
+            if (startIndex < Infinity && startIndex >= 0) {
+              cutSrc = src.substring(0, startIndex + 1);
+            }
+          })();
+        }
+
+        if (token = this.tokenizer.inlineText(cutSrc, smartypants)) {
+          src = src.substring(token.raw.length);
+
+          if (token.raw.slice(-1) !== '_') {
+            // Track prevChar before string of ____ started
+            prevChar = token.raw.slice(-1);
+          }
+
+          keepPrevChar = true;
+          lastToken = tokens[tokens.length - 1];
+
+          if (lastToken && lastToken.type === 'text') {
+            lastToken.raw += token.raw;
+            lastToken.text += token.text;
+          } else {
+            tokens.push(token);
+          }
+
+          continue;
+        }
+
+        if (src) {
+          var errMsg = 'Infinite loop on byte: ' + src.charCodeAt(0);
+
+          if (this.options.silent) {
+            console.error(errMsg);
+            break;
+          } else {
+            throw new Error(errMsg);
+          }
+        }
+      }
+
+      return tokens;
+    };
+
+    _createClass(Lexer, null, [{
+      key: "rules",
+      get: function get() {
+        return {
+          block: block,
+          inline: inline
+        };
+      }
+    }]);
+
+    return Lexer;
+  }();
+
+  var defaults$2 = defaults$5.exports.defaults;
+  var cleanUrl = helpers.cleanUrl,
+      escape$1 = helpers.escape;
+  /**
+   * Renderer
+   */
+
+  var Renderer_1 = /*#__PURE__*/function () {
+    function Renderer(options) {
+      this.options = options || defaults$2;
+    }
+
+    var _proto = Renderer.prototype;
+
+    _proto.code = function code(_code, infostring, escaped) {
+      var lang = (infostring || '').match(/\S*/)[0];
+
+      if (this.options.highlight) {
+        var out = this.options.highlight(_code, lang);
+
+        if (out != null && out !== _code) {
+          escaped = true;
+          _code = out;
+        }
+      }
+
+      _code = _code.replace(/\n$/, '') + '\n';
+
+      if (!lang) {
+        return '<pre><code>' + (escaped ? _code : escape$1(_code, true)) + '</code></pre>\n';
+      }
+
+      return '<pre><code class="' + this.options.langPrefix + escape$1(lang, true) + '">' + (escaped ? _code : escape$1(_code, true)) + '</code></pre>\n';
+    };
+
+    _proto.blockquote = function blockquote(quote) {
+      return '<blockquote>\n' + quote + '</blockquote>\n';
+    };
+
+    _proto.html = function html(_html) {
+      return _html;
+    };
+
+    _proto.heading = function heading(text, level, raw, slugger) {
+      if (this.options.headerIds) {
+        return '<h' + level + ' id="' + this.options.headerPrefix + slugger.slug(raw) + '">' + text + '</h' + level + '>\n';
+      } // ignore IDs
+
+
+      return '<h' + level + '>' + text + '</h' + level + '>\n';
+    };
+
+    _proto.hr = function hr() {
+      return this.options.xhtml ? '<hr/>\n' : '<hr>\n';
+    };
+
+    _proto.list = function list(body, ordered, start) {
+      var type = ordered ? 'ol' : 'ul',
+          startatt = ordered && start !== 1 ? ' start="' + start + '"' : '';
+      return '<' + type + startatt + '>\n' + body + '</' + type + '>\n';
+    };
+
+    _proto.listitem = function listitem(text) {
+      return '<li>' + text + '</li>\n';
+    };
+
+    _proto.checkbox = function checkbox(checked) {
+      return '<input ' + (checked ? 'checked="" ' : '') + 'disabled="" type="checkbox"' + (this.options.xhtml ? ' /' : '') + '> ';
+    };
+
+    _proto.paragraph = function paragraph(text) {
+      return '<p>' + text + '</p>\n';
+    };
+
+    _proto.table = function table(header, body) {
+      if (body) body = '<tbody>' + body + '</tbody>';
+      return '<table>\n' + '<thead>\n' + header + '</thead>\n' + body + '</table>\n';
+    };
+
+    _proto.tablerow = function tablerow(content) {
+      return '<tr>\n' + content + '</tr>\n';
+    };
+
+    _proto.tablecell = function tablecell(content, flags) {
+      var type = flags.header ? 'th' : 'td';
+      var tag = flags.align ? '<' + type + ' align="' + flags.align + '">' : '<' + type + '>';
+      return tag + content + '</' + type + '>\n';
+    } // span level renderer
+    ;
+
+    _proto.strong = function strong(text) {
+      return '<strong>' + text + '</strong>';
+    };
+
+    _proto.em = function em(text) {
+      return '<em>' + text + '</em>';
+    };
+
+    _proto.codespan = function codespan(text) {
+      return '<code>' + text + '</code>';
+    };
+
+    _proto.br = function br() {
+      return this.options.xhtml ? '<br/>' : '<br>';
+    };
+
+    _proto.del = function del(text) {
+      return '<del>' + text + '</del>';
+    };
+
+    _proto.link = function link(href, title, text) {
+      href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);
+
+      if (href === null) {
+        return text;
+      }
+
+      var out = '<a href="' + escape$1(href) + '"';
+
+      if (title) {
+        out += ' title="' + title + '"';
+      }
+
+      out += '>' + text + '</a>';
+      return out;
+    };
+
+    _proto.image = function image(href, title, text) {
+      href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);
+
+      if (href === null) {
+        return text;
+      }
+
+      var out = '<img src="' + href + '" alt="' + text + '"';
+
+      if (title) {
+        out += ' title="' + title + '"';
+      }
+
+      out += this.options.xhtml ? '/>' : '>';
+      return out;
+    };
+
+    _proto.text = function text(_text) {
+      return _text;
+    };
+
+    return Renderer;
+  }();
+
+  /**
+   * TextRenderer
+   * returns only the textual part of the token
+   */
+
+  var TextRenderer_1 = /*#__PURE__*/function () {
+    function TextRenderer() {}
+
+    var _proto = TextRenderer.prototype;
+
+    // no need for block level renderers
+    _proto.strong = function strong(text) {
+      return text;
+    };
+
+    _proto.em = function em(text) {
+      return text;
+    };
+
+    _proto.codespan = function codespan(text) {
+      return text;
+    };
+
+    _proto.del = function del(text) {
+      return text;
+    };
+
+    _proto.html = function html(text) {
+      return text;
+    };
+
+    _proto.text = function text(_text) {
+      return _text;
+    };
+
+    _proto.link = function link(href, title, text) {
+      return '' + text;
+    };
+
+    _proto.image = function image(href, title, text) {
+      return '' + text;
+    };
+
+    _proto.br = function br() {
+      return '';
+    };
+
+    return TextRenderer;
+  }();
+
+  /**
+   * Slugger generates header id
+   */
+
+  var Slugger_1 = /*#__PURE__*/function () {
+    function Slugger() {
+      this.seen = {};
+    }
+
+    var _proto = Slugger.prototype;
+
+    _proto.serialize = function serialize(value) {
+      return value.toLowerCase().trim() // remove html tags
+      .replace(/<[!\/a-z].*?>/ig, '') // remove unwanted chars
+      .replace(/[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,./:;<=>?@[\]^`{|}~]/g, '').replace(/\s/g, '-');
+    }
+    /**
+     * Finds the next safe (unique) slug to use
+     */
+    ;
+
+    _proto.getNextSafeSlug = function getNextSafeSlug(originalSlug, isDryRun) {
+      var slug = originalSlug;
+      var occurenceAccumulator = 0;
+
+      if (this.seen.hasOwnProperty(slug)) {
+        occurenceAccumulator = this.seen[originalSlug];
+
+        do {
+          occurenceAccumulator++;
+          slug = originalSlug + '-' + occurenceAccumulator;
+        } while (this.seen.hasOwnProperty(slug));
+      }
+
+      if (!isDryRun) {
+        this.seen[originalSlug] = occurenceAccumulator;
+        this.seen[slug] = 0;
+      }
+
+      return slug;
+    }
+    /**
+     * Convert string to unique id
+     * @param {object} options
+     * @param {boolean} options.dryrun Generates the next unique slug without updating the internal accumulator.
+     */
+    ;
+
+    _proto.slug = function slug(value, options) {
+      if (options === void 0) {
+        options = {};
+      }
+
+      var slug = this.serialize(value);
+      return this.getNextSafeSlug(slug, options.dryrun);
+    };
+
+    return Slugger;
+  }();
+
+  var Renderer$1 = Renderer_1;
+  var TextRenderer$1 = TextRenderer_1;
+  var Slugger$1 = Slugger_1;
+  var defaults$1 = defaults$5.exports.defaults;
+  var unescape = helpers.unescape;
+  /**
+   * Parsing & Compiling
+   */
+
+  var Parser_1 = /*#__PURE__*/function () {
+    function Parser(options) {
+      this.options = options || defaults$1;
+      this.options.renderer = this.options.renderer || new Renderer$1();
+      this.renderer = this.options.renderer;
+      this.renderer.options = this.options;
+      this.textRenderer = new TextRenderer$1();
+      this.slugger = new Slugger$1();
+    }
+    /**
+     * Static Parse Method
+     */
+
+
+    Parser.parse = function parse(tokens, options) {
+      var parser = new Parser(options);
+      return parser.parse(tokens);
+    }
+    /**
+     * Static Parse Inline Method
+     */
+    ;
+
+    Parser.parseInline = function parseInline(tokens, options) {
+      var parser = new Parser(options);
+      return parser.parseInline(tokens);
+    }
+    /**
+     * Parse Loop
+     */
+    ;
+
+    var _proto = Parser.prototype;
+
+    _proto.parse = function parse(tokens, top) {
+      if (top === void 0) {
+        top = true;
+      }
+
+      var out = '',
+          i,
+          j,
+          k,
+          l2,
+          l3,
+          row,
+          cell,
+          header,
+          body,
+          token,
+          ordered,
+          start,
+          loose,
+          itemBody,
+          item,
+          checked,
+          task,
+          checkbox,
+          ret;
+      var l = tokens.length;
+
+      for (i = 0; i < l; i++) {
+        token = tokens[i]; // Run any renderer extensions
+
+        if (this.options.extensions && this.options.extensions.renderers && this.options.extensions.renderers[token.type]) {
+          ret = this.options.extensions.renderers[token.type].call({
+            parser: this
+          }, token);
+
+          if (ret !== false || !['space', 'hr', 'heading', 'code', 'table', 'blockquote', 'list', 'html', 'paragraph', 'text'].includes(token.type)) {
+            out += ret || '';
+            continue;
+          }
+        }
+
+        switch (token.type) {
+          case 'space':
+            {
+              continue;
+            }
+
+          case 'hr':
+            {
+              out += this.renderer.hr();
+              continue;
+            }
+
+          case 'heading':
+            {
+              out += this.renderer.heading(this.parseInline(token.tokens), token.depth, unescape(this.parseInline(token.tokens, this.textRenderer)), this.slugger);
+              continue;
+            }
+
+          case 'code':
+            {
+              out += this.renderer.code(token.text, token.lang, token.escaped);
+              continue;
+            }
+
+          case 'table':
+            {
+              header = ''; // header
+
+              cell = '';
+              l2 = token.header.length;
+
+              for (j = 0; j < l2; j++) {
+                cell += this.renderer.tablecell(this.parseInline(token.header[j].tokens), {
+                  header: true,
+                  align: token.align[j]
+                });
+              }
+
+              header += this.renderer.tablerow(cell);
+              body = '';
+              l2 = token.rows.length;
+
+              for (j = 0; j < l2; j++) {
+                row = token.rows[j];
+                cell = '';
+                l3 = row.length;
+
+                for (k = 0; k < l3; k++) {
+                  cell += this.renderer.tablecell(this.parseInline(row[k].tokens), {
+                    header: false,
+                    align: token.align[k]
+                  });
+                }
+
+                body += this.renderer.tablerow(cell);
+              }
+
+              out += this.renderer.table(header, body);
+              continue;
+            }
+
+          case 'blockquote':
+            {
+              body = this.parse(token.tokens);
+              out += this.renderer.blockquote(body);
+              continue;
+            }
+
+          case 'list':
+            {
+              ordered = token.ordered;
+              start = token.start;
+              loose = token.loose;
+              l2 = token.items.length;
+              body = '';
+
+              for (j = 0; j < l2; j++) {
+                item = token.items[j];
+                checked = item.checked;
+                task = item.task;
+                itemBody = '';
+
+                if (item.task) {
+                  checkbox = this.renderer.checkbox(checked);
+
+                  if (loose) {
+                    if (item.tokens.length > 0 && item.tokens[0].type === 'paragraph') {
+                      item.tokens[0].text = checkbox + ' ' + item.tokens[0].text;
+
+                      if (item.tokens[0].tokens && item.tokens[0].tokens.length > 0 && item.tokens[0].tokens[0].type === 'text') {
+                        item.tokens[0].tokens[0].text = checkbox + ' ' + item.tokens[0].tokens[0].text;
+                      }
+                    } else {
+                      item.tokens.unshift({
+                        type: 'text',
+                        text: checkbox
+                      });
+                    }
+                  } else {
+                    itemBody += checkbox;
+                  }
+                }
+
+                itemBody += this.parse(item.tokens, loose);
+                body += this.renderer.listitem(itemBody, task, checked);
+              }
+
+              out += this.renderer.list(body, ordered, start);
+              continue;
+            }
+
+          case 'html':
+            {
+              // TODO parse inline content if parameter markdown=1
+              out += this.renderer.html(token.text);
+              continue;
+            }
+
+          case 'paragraph':
+            {
+              out += this.renderer.paragraph(this.parseInline(token.tokens));
+              continue;
+            }
+
+          case 'text':
+            {
+              body = token.tokens ? this.parseInline(token.tokens) : token.text;
+
+              while (i + 1 < l && tokens[i + 1].type === 'text') {
+                token = tokens[++i];
+                body += '\n' + (token.tokens ? this.parseInline(token.tokens) : token.text);
+              }
+
+              out += top ? this.renderer.paragraph(body) : body;
+              continue;
+            }
+
+          default:
+            {
+              var errMsg = 'Token with "' + token.type + '" type was not found.';
+
+              if (this.options.silent) {
+                console.error(errMsg);
+                return;
+              } else {
+                throw new Error(errMsg);
+              }
+            }
+        }
+      }
+
+      return out;
+    }
+    /**
+     * Parse Inline Tokens
+     */
+    ;
+
+    _proto.parseInline = function parseInline(tokens, renderer) {
+      renderer = renderer || this.renderer;
+      var out = '',
+          i,
+          token,
+          ret;
+      var l = tokens.length;
+
+      for (i = 0; i < l; i++) {
+        token = tokens[i]; // Run any renderer extensions
+
+        if (this.options.extensions && this.options.extensions.renderers && this.options.extensions.renderers[token.type]) {
+          ret = this.options.extensions.renderers[token.type].call({
+            parser: this
+          }, token);
+
+          if (ret !== false || !['escape', 'html', 'link', 'image', 'strong', 'em', 'codespan', 'br', 'del', 'text'].includes(token.type)) {
+            out += ret || '';
+            continue;
+          }
+        }
+
+        switch (token.type) {
+          case 'escape':
+            {
+              out += renderer.text(token.text);
+              break;
+            }
+
+          case 'html':
+            {
+              out += renderer.html(token.text);
+              break;
+            }
+
+          case 'link':
+            {
+              out += renderer.link(token.href, token.title, this.parseInline(token.tokens, renderer));
+              break;
+            }
+
+          case 'image':
+            {
+              out += renderer.image(token.href, token.title, token.text);
+              break;
+            }
+
+          case 'strong':
+            {
+              out += renderer.strong(this.parseInline(token.tokens, renderer));
+              break;
+            }
+
+          case 'em':
+            {
+              out += renderer.em(this.parseInline(token.tokens, renderer));
+              break;
+            }
+
+          case 'codespan':
+            {
+              out += renderer.codespan(token.text);
+              break;
+            }
+
+          case 'br':
+            {
+              out += renderer.br();
+              break;
+            }
+
+          case 'del':
+            {
+              out += renderer.del(this.parseInline(token.tokens, renderer));
+              break;
+            }
+
+          case 'text':
+            {
+              out += renderer.text(token.text);
+              break;
+            }
+
+          default:
+            {
+              var errMsg = 'Token with "' + token.type + '" type was not found.';
+
+              if (this.options.silent) {
+                console.error(errMsg);
+                return;
+              } else {
+                throw new Error(errMsg);
+              }
+            }
+        }
+      }
+
+      return out;
+    };
+
+    return Parser;
+  }();
+
+  var Lexer = Lexer_1;
+  var Parser = Parser_1;
+  var Tokenizer = Tokenizer_1;
+  var Renderer = Renderer_1;
+  var TextRenderer = TextRenderer_1;
+  var Slugger = Slugger_1;
+  var merge = helpers.merge,
+      checkSanitizeDeprecation = helpers.checkSanitizeDeprecation,
+      escape = helpers.escape;
+  var getDefaults = defaults$5.exports.getDefaults,
+      changeDefaults = defaults$5.exports.changeDefaults,
+      defaults = defaults$5.exports.defaults;
+  /**
+   * Marked
+   */
+
+  function marked(src, opt, callback) {
+    // throw error in case of non string input
+    if (typeof src === 'undefined' || src === null) {
+      throw new Error('marked(): input parameter is undefined or null');
+    }
+
+    if (typeof src !== 'string') {
+      throw new Error('marked(): input parameter is of type ' + Object.prototype.toString.call(src) + ', string expected');
+    }
+
+    if (typeof opt === 'function') {
+      callback = opt;
+      opt = null;
+    }
+
+    opt = merge({}, marked.defaults, opt || {});
+    checkSanitizeDeprecation(opt);
+
+    if (callback) {
+      var highlight = opt.highlight;
+      var tokens;
+
+      try {
+        tokens = Lexer.lex(src, opt);
+      } catch (e) {
+        return callback(e);
+      }
+
+      var done = function done(err) {
+        var out;
+
+        if (!err) {
+          try {
+            if (opt.walkTokens) {
+              marked.walkTokens(tokens, opt.walkTokens);
+            }
+
+            out = Parser.parse(tokens, opt);
+          } catch (e) {
+            err = e;
+          }
+        }
+
+        opt.highlight = highlight;
+        return err ? callback(err) : callback(null, out);
+      };
+
+      if (!highlight || highlight.length < 3) {
+        return done();
+      }
+
+      delete opt.highlight;
+      if (!tokens.length) return done();
+      var pending = 0;
+      marked.walkTokens(tokens, function (token) {
+        if (token.type === 'code') {
+          pending++;
+          setTimeout(function () {
+            highlight(token.text, token.lang, function (err, code) {
+              if (err) {
+                return done(err);
+              }
+
+              if (code != null && code !== token.text) {
+                token.text = code;
+                token.escaped = true;
+              }
+
+              pending--;
+
+              if (pending === 0) {
+                done();
+              }
+            });
+          }, 0);
+        }
+      });
+
+      if (pending === 0) {
+        done();
+      }
+
+      return;
+    }
+
+    try {
+      var _tokens = Lexer.lex(src, opt);
+
+      if (opt.walkTokens) {
+        marked.walkTokens(_tokens, opt.walkTokens);
+      }
+
+      return Parser.parse(_tokens, opt);
+    } catch (e) {
+      e.message += '\nPlease report this to https://github.com/markedjs/marked.';
+
+      if (opt.silent) {
+        return '<p>An error occurred:</p><pre>' + escape(e.message + '', true) + '</pre>';
+      }
+
+      throw e;
+    }
+  }
+  /**
+   * Options
+   */
+
+
+  marked.options = marked.setOptions = function (opt) {
+    merge(marked.defaults, opt);
+    changeDefaults(marked.defaults);
+    return marked;
+  };
+
+  marked.getDefaults = getDefaults;
+  marked.defaults = defaults;
+  /**
+   * Use Extension
+   */
+
+  marked.use = function () {
+    var _this = this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var opts = merge.apply(void 0, [{}].concat(args));
+    var extensions = marked.defaults.extensions || {
+      renderers: {},
+      childTokens: {}
+    };
+    var hasExtensions;
+    args.forEach(function (pack) {
+      // ==-- Parse "addon" extensions --== //
+      if (pack.extensions) {
+        hasExtensions = true;
+        pack.extensions.forEach(function (ext) {
+          if (!ext.name) {
+            throw new Error('extension name required');
+          }
+
+          if (ext.renderer) {
+            // Renderer extensions
+            var prevRenderer = extensions.renderers ? extensions.renderers[ext.name] : null;
+
+            if (prevRenderer) {
+              // Replace extension with func to run new extension but fall back if false
+              extensions.renderers[ext.name] = function () {
+                for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                  args[_key2] = arguments[_key2];
+                }
+
+                var ret = ext.renderer.apply(this, args);
+
+                if (ret === false) {
+                  ret = prevRenderer.apply(this, args);
+                }
+
+                return ret;
+              };
+            } else {
+              extensions.renderers[ext.name] = ext.renderer;
+            }
+          }
+
+          if (ext.tokenizer) {
+            // Tokenizer Extensions
+            if (!ext.level || ext.level !== 'block' && ext.level !== 'inline') {
+              throw new Error("extension level must be 'block' or 'inline'");
+            }
+
+            if (extensions[ext.level]) {
+              extensions[ext.level].unshift(ext.tokenizer);
+            } else {
+              extensions[ext.level] = [ext.tokenizer];
+            }
+
+            if (ext.start) {
+              // Function to check for start of token
+              if (ext.level === 'block') {
+                if (extensions.startBlock) {
+                  extensions.startBlock.push(ext.start);
+                } else {
+                  extensions.startBlock = [ext.start];
+                }
+              } else if (ext.level === 'inline') {
+                if (extensions.startInline) {
+                  extensions.startInline.push(ext.start);
+                } else {
+                  extensions.startInline = [ext.start];
+                }
+              }
+            }
+          }
+
+          if (ext.childTokens) {
+            // Child tokens to be visited by walkTokens
+            extensions.childTokens[ext.name] = ext.childTokens;
+          }
+        });
+      } // ==-- Parse "overwrite" extensions --== //
+
+
+      if (pack.renderer) {
+        (function () {
+          var renderer = marked.defaults.renderer || new Renderer();
+
+          var _loop = function _loop(prop) {
+            var prevRenderer = renderer[prop]; // Replace renderer with func to run extension, but fall back if false
+
+            renderer[prop] = function () {
+              for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                args[_key3] = arguments[_key3];
+              }
+
+              var ret = pack.renderer[prop].apply(renderer, args);
+
+              if (ret === false) {
+                ret = prevRenderer.apply(renderer, args);
+              }
+
+              return ret;
+            };
+          };
+
+          for (var prop in pack.renderer) {
+            _loop(prop);
+          }
+
+          opts.renderer = renderer;
+        })();
+      }
+
+      if (pack.tokenizer) {
+        (function () {
+          var tokenizer = marked.defaults.tokenizer || new Tokenizer();
+
+          var _loop2 = function _loop2(prop) {
+            var prevTokenizer = tokenizer[prop]; // Replace tokenizer with func to run extension, but fall back if false
+
+            tokenizer[prop] = function () {
+              for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                args[_key4] = arguments[_key4];
+              }
+
+              var ret = pack.tokenizer[prop].apply(tokenizer, args);
+
+              if (ret === false) {
+                ret = prevTokenizer.apply(tokenizer, args);
+              }
+
+              return ret;
+            };
+          };
+
+          for (var prop in pack.tokenizer) {
+            _loop2(prop);
+          }
+
+          opts.tokenizer = tokenizer;
+        })();
+      } // ==-- Parse WalkTokens extensions --== //
+
+
+      if (pack.walkTokens) {
+        var walkTokens = marked.defaults.walkTokens;
+
+        opts.walkTokens = function (token) {
+          pack.walkTokens.call(_this, token);
+
+          if (walkTokens) {
+            walkTokens(token);
+          }
+        };
+      }
+
+      if (hasExtensions) {
+        opts.extensions = extensions;
+      }
+
+      marked.setOptions(opts);
+    });
+  };
+  /**
+   * Run callback for every token
+   */
+
+
+  marked.walkTokens = function (tokens, callback) {
+    var _loop3 = function _loop3() {
+      var token = _step.value;
+      callback(token);
+
+      switch (token.type) {
+        case 'table':
+          {
+            for (var _iterator2 = _createForOfIteratorHelperLoose(token.header), _step2; !(_step2 = _iterator2()).done;) {
+              var cell = _step2.value;
+              marked.walkTokens(cell.tokens, callback);
+            }
+
+            for (var _iterator3 = _createForOfIteratorHelperLoose(token.rows), _step3; !(_step3 = _iterator3()).done;) {
+              var row = _step3.value;
+
+              for (var _iterator4 = _createForOfIteratorHelperLoose(row), _step4; !(_step4 = _iterator4()).done;) {
+                var _cell = _step4.value;
+                marked.walkTokens(_cell.tokens, callback);
+              }
+            }
+
+            break;
+          }
+
+        case 'list':
+          {
+            marked.walkTokens(token.items, callback);
+            break;
+          }
+
+        default:
+          {
+            if (marked.defaults.extensions && marked.defaults.extensions.childTokens && marked.defaults.extensions.childTokens[token.type]) {
+              // Walk any extensions
+              marked.defaults.extensions.childTokens[token.type].forEach(function (childTokens) {
+                marked.walkTokens(token[childTokens], callback);
+              });
+            } else if (token.tokens) {
+              marked.walkTokens(token.tokens, callback);
+            }
+          }
+      }
+    };
+
+    for (var _iterator = _createForOfIteratorHelperLoose(tokens), _step; !(_step = _iterator()).done;) {
+      _loop3();
+    }
+  };
+  /**
+   * Parse Inline
+   */
+
+
+  marked.parseInline = function (src, opt) {
+    // throw error in case of non string input
+    if (typeof src === 'undefined' || src === null) {
+      throw new Error('marked.parseInline(): input parameter is undefined or null');
+    }
+
+    if (typeof src !== 'string') {
+      throw new Error('marked.parseInline(): input parameter is of type ' + Object.prototype.toString.call(src) + ', string expected');
+    }
+
+    opt = merge({}, marked.defaults, opt || {});
+    checkSanitizeDeprecation(opt);
+
+    try {
+      var tokens = Lexer.lexInline(src, opt);
+
+      if (opt.walkTokens) {
+        marked.walkTokens(tokens, opt.walkTokens);
+      }
+
+      return Parser.parseInline(tokens, opt);
+    } catch (e) {
+      e.message += '\nPlease report this to https://github.com/markedjs/marked.';
+
+      if (opt.silent) {
+        return '<p>An error occurred:</p><pre>' + escape(e.message + '', true) + '</pre>';
+      }
+
+      throw e;
+    }
+  };
+  /**
+   * Expose
+   */
+
+
+  marked.Parser = Parser;
+  marked.parser = Parser.parse;
+  marked.Renderer = Renderer;
+  marked.TextRenderer = TextRenderer;
+  marked.Lexer = Lexer;
+  marked.lexer = Lexer.lex;
+  marked.Tokenizer = Tokenizer;
+  marked.Slugger = Slugger;
+  marked.parse = marked;
+  var marked_1 = marked;
+
+  return marked_1;
+
+})));
+});
+
+const LoginReadme = "# sqm-portal-login\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property              | Attribute               | Description | Type                                                                                                                                                                                                          | Default                     |\r\n| --------------------- | ----------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |\r\n| `demoData`            | --                      |             | `{ states?: { error: string; loading: boolean; }; content?: { forgotPasswordButton?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; }; }` | `undefined`                 |\r\n| `emailLabel`          | `email-label`           |             | `string`                                                                                                                                                                                                      | `\"Email\"`                   |\r\n| `forgotPasswordLabel` | `forgot-password-label` |             | `string`                                                                                                                                                                                                      | `\"Forgot Password?\"`        |\r\n| `nextPage`            | `next-page`             |             | `string`                                                                                                                                                                                                      | `\"/\"`                       |\r\n| `pageLabel`           | `page-label`            |             | `string`                                                                                                                                                                                                      | `\"Sign in to your account\"` |\r\n| `passwordLabel`       | `password-label`        |             | `string`                                                                                                                                                                                                      | `\"Password\"`                |\r\n| `registerLabel`       | `register-label`        |             | `string`                                                                                                                                                                                                      | `\"Register\"`                |\r\n| `submitLabel`         | `submit-label`          |             | `string`                                                                                                                                                                                                      | `\"Sign In\"`                 |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-login --> sqm-form-message\r\n  sqm-stencilbook --> sqm-portal-login\r\n  style sqm-portal-login fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+
+const ForgotPasswordReadme = "# sqm-portal-forgot-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property      | Attribute      | Description | Type                                                                                                                                                                     | Default                    |\r\n| ------------- | -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |\r\n| `demoData`    | --             |             | `{ states?: { error: string; loading: boolean; success: boolean; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined`                |\r\n| `emailLabel`  | `email-label`  |             | `string`                                                                                                                                                                 | `\"Email\"`                  |\r\n| `submitLabel` | `submit-label` |             | `string`                                                                                                                                                                 | `\"Request Password Reset\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-forgot-password --> sqm-form-message\r\n  style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+
+const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                   | Attribute                    | Description | Type                                                                                                                                                                                                                                                                                                                                                                                           | Default              |\r\n| -------------------------- | ---------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword`          | `confirm-password`           |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `false`              |\r\n| `confirmPasswordLabel`     | `confirm-password-label`     |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Confirm Password\"` |\r\n| `demoData`                 | --                           |             | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }` | `undefined`          |\r\n| `emailLabel`               | `email-label`                |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Email\"`            |\r\n| `enablePasswordValidation` | `enable-password-validation` |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `true`               |\r\n| `hideInputs`               | `hide-inputs`                |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `false`              |\r\n| `loginLabel`               | `login-label`                |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Sign in\"`          |\r\n| `nextPage`                 | `next-page`                  |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"/\"`                |\r\n| `pageLabel`                | `page-label`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Register\"`         |\r\n| `passwordLabel`            | `password-label`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Password\"`         |\r\n| `submitLabel`              | `submit-label`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Register\"`         |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-register --> sqm-form-message\r\n  sqm-portal-register --> sqm-password-field\r\n  sqm-stencilbook --> sqm-portal-register\r\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+
+const EditProfileReadme = "# sqm-portal-profile\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                 | Attribute                   | Description | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default                  |\r\n| ------------------------ | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\r\n| `countrytext`            | `countrytext`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Country\"`              |\r\n| `demoData`               | --                          |             | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }` | `undefined`              |\r\n| `editProfileHeader`      | `edit-profile-header`       |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Edit your profile\"`    |\r\n| `editProfileSubHeader`   | `edit-profile-sub-header`   |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Personal Information\"` |\r\n| `emailtext`              | `emailtext`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Email\"`                |\r\n| `firstnametext`          | `firstnametext`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"First Name\"`           |\r\n| `lastnametext`           | `lastnametext`              |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Last Name\"`            |\r\n| `showCountry`            | `show-country`              |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `true`                   |\r\n| `submitChangeButtonText` | `submit-change-button-text` |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Submit Changes\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-profile --> sqm-form-message\r\n  style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+
+const ResetPasswordReadme = "# sqm-portal-reset-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                    | Attribute                      | Description                                 | Type                                                                                                                                                                                                                                                                                                                                                                     | Default                 |\r\n| --------------------------- | ------------------------------ | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- |\r\n| `confirmPassword`           | `confirm-password`             |                                             | `boolean`                                                                                                                                                                                                                                                                                                                                                                | `false`                 |\r\n| `confirmPasswordFieldLabel` | `confirm-password-field-label` |                                             | `string`                                                                                                                                                                                                                                                                                                                                                                 | `\"Confirm Password\"`    |\r\n| `continueButtonText`        | `continue-button-text`         | Displayed after a successful password reset | `string`                                                                                                                                                                                                                                                                                                                                                                 | `\"Continue\"`            |\r\n| `demoData`                  | --                             |                                             | `{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; content: { passwordResetHeader: string; resetPasswordHeader: string; continueButtonText: string; resetPasswordButtonText: string; confirmPasswordFieldLabel: string; }; }; }` | `undefined`             |\r\n| `nextPage`                  | `next-page`                    |                                             | `string`                                                                                                                                                                                                                                                                                                                                                                 | `\"/\"`                   |\r\n| `passwordResetHeader`       | `password-reset-header`        | Displayed after a successful password reset | `string`                                                                                                                                                                                                                                                                                                                                                                 | `\"Password reset\"`      |\r\n| `resetPasswordButtonText`   | `reset-password-button-text`   |                                             | `string`                                                                                                                                                                                                                                                                                                                                                                 | `\"Reset Password\"`      |\r\n| `resetPasswordHeader`       | `reset-password-header`        |                                             | `string`                                                                                                                                                                                                                                                                                                                                                                 | `\"Reset your password\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-reset-password --> sqm-form-message\r\n  sqm-portal-reset-password --> sqm-password-field\r\n  style sqm-portal-reset-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+
+const EmailVerificationReadme = "# sqm-portal-email-verification\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                  | Attribute                   | Description | Type                                                                                                                                                                                        | Default                                                                                           |\r\n| ------------------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\r\n| `demoData`                | --                          |             | `{ states?: { error: string; loading: boolean; success: boolean; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; }; }` | `undefined`                                                                                       |\r\n| `emailVerificationHeader` | `email-verification-header` |             | `string`                                                                                                                                                                                    | `\"Verify your email\"`                                                                             |\r\n| `resendEmailButtonText`   | `resend-email-button-text`  |             | `string`                                                                                                                                                                                    | `\"Re-send Email\"`                                                                                 |\r\n| `verifyMessage`           | `verify-message`            |             | `string`                                                                                                                                                                                    | `\"A verification email was sent to {email}. Please verify your email to continue to the portal.\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-email-verification --> sqm-form-message\r\n  style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+
+const EmailVerifiedReadme = "# sqm-portal-verify-email\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property   | Attribute   | Description | Type                                                                                                 | Default     |\r\n| ---------- | ----------- | ----------- | ---------------------------------------------------------------------------------------------------- | ----------- |\r\n| `demoData` | --          |             | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\r\n| `nextPage` | `next-page` |             | `string`                                                                                             | `\"/\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-verify-email --> sqm-form-message\r\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+
+const PortalTemplates_stories = {
+  title: "Templates / Portal",
+};
+// slot="footer"
+// support-email="john@foodservicerewards.com"
+// terms-link="example.com"
+// faq-link="example.com"
+// padding="large"
+// show-powered-by="false"
+// powered-by-link="https://www.saasquatch.com/"
+function useTemplate$1(templateString) {
+  const [editedTemplate, setEditedTemplate] = useState(templateString);
+  const [previewTemplate, setPreviewTemplate] = useState(templateString);
+  return {
+    states: { previewTemplate, editedTemplate },
+    callbacks: { setEditedTemplate, setPreviewTemplate },
+  };
+}
+function TemplateView$1(props) {
+  const { states, callbacks, readme } = props;
+  return [
+    h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
+    h("button", { onClick: () => callbacks.setPreviewTemplate(states.editedTemplate) }, "Update Preview"),
+    readme ? (h("details", null,
+      h("summary", null, "Props readme"),
+      h("div", { innerHTML: marked(readme) }))) : (""),
+    h("div", { innerHTML: states.previewTemplate }),
+  ];
+}
+function Buttons({ callbacks, states, template }) {
+  return (h("div", null,
+    h("button", { onClick: () => callbacks.setPreviewTemplate(states.editedTemplate) }, "Update Preview"),
+    h("button", { style: { marginLeft: "10px" }, onClick: () => callbacks.setPreviewTemplate(template) }, "Preview Dashboard")));
+}
+function DefaultTemplateView(props) {
+  const { states, callbacks } = props;
+  return (h("div", null,
+    h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
+    h(Buttons, { states: states, callbacks: callbacks, template: props.template }),
+    h("h2", null, "Navigation"),
+    h("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(9, 80px)",
+        gridGap: "10px",
+      } },
+      h("button", { onClick: () => rn.push("/") }, "Dashboard"),
+      h("button", { onClick: () => rn.push("/activity") }, "Activity"),
+      h("button", { onClick: () => rn.push("/editProfile") }, "Edit Profile"),
+      h("button", { onClick: () => rn.push("/login") }, "Login"),
+      h("button", { onClick: () => rn.push("/register") }, "Register"),
+      h("button", { onClick: () => rn.push("/emailVerification") }, "Email Verification"),
+      h("button", { onClick: () => rn.push("/verifyEmail") }, "Verify Email"),
+      h("button", { onClick: () => rn.push("/forgotPassword") }, "Forgot Password"),
+      h("button", { onClick: () => rn.push("/resetPassword") }, "Reset Password")),
+    h("br", null),
+    h("div", { innerHTML: states.previewTemplate })));
+}
+const DefaultPortal = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(portalTemplate);
+  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: portalTemplateWithDashboard }));
+});
+const MultiProgramPortal = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(multiProgramTemplate);
+  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: multiProgramTemplateWithDashboard }));
+});
+const Login = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(loginTemplate);
+  return (h(TemplateView$1, { states: states, callbacks: callbacks, readme: LoginReadme }));
+});
+const ForgotPassword = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(forgotPasswordTemplate);
+  return (h(TemplateView$1, { states: states, callbacks: callbacks, readme: ForgotPasswordReadme }));
+});
+const Register = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(registerTemplate);
+  return (h(TemplateView$1, { states: states, callbacks: callbacks, readme: RegisterReadme }));
+});
+const Dashboard$1 = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(dashboardTemplate);
+  return h(TemplateView$1, { states: states, callbacks: callbacks });
+});
+const Activity$1 = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(activityTemplate);
+  return h(TemplateView$1, { states: states, callbacks: callbacks });
+});
+const EditProfile$3 = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(editProfileTemplate);
+  return (h(TemplateView$1, { states: states, callbacks: callbacks, readme: EditProfileReadme }));
+});
+const ResetPassword = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(resetPasswordTemplate);
+  return (h(TemplateView$1, { states: states, callbacks: callbacks, readme: ResetPasswordReadme }));
+});
+const EmailVerification = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(emailVerificationTemplate);
+  return (h(TemplateView$1, { states: states, callbacks: callbacks, readme: EmailVerificationReadme }));
+});
+const EmailVerified = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(emailVerifiedTemplate);
+  return (h(TemplateView$1, { states: states, callbacks: callbacks, readme: EmailVerifiedReadme }));
+});
+const Widget = createHookStory(() => {
+  return (h("sqb-widget", { "widget-type": "p/Vacay-referral/w/referrerWidget", demoData: {
+      data: {
+        html: dashboardTemplate,
+      },
+    } }));
+});
+const ResetPasswordEmail = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(resetPasswordEmailTemplate);
+  return h(TemplateView$1, { states: states, callbacks: callbacks });
+});
+const VerifyEmail = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(verifyEmailTemplate);
+  return h(TemplateView$1, { states: states, callbacks: callbacks });
+});
+
+const PortalTemplates = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': PortalTemplates_stories,
+  DefaultPortal: DefaultPortal,
+  MultiProgramPortal: MultiProgramPortal,
+  Login: Login,
+  ForgotPassword: ForgotPassword,
+  Register: Register,
+  Dashboard: Dashboard$1,
+  Activity: Activity$1,
+  EditProfile: EditProfile$3,
+  ResetPassword: ResetPassword,
+  EmailVerification: EmailVerification,
+  EmailVerified: EmailVerified,
+  Widget: Widget,
+  ResetPasswordEmail: ResetPasswordEmail,
+  VerifyEmail: VerifyEmail
+});
+
+const ProgramMenu_stories = {
+  title: "Program Menu",
+};
+const OneProgram = createHookStory(() => {
+  return (h("sqm-program-menu", null,
+    h("sl-menu-item", { value: "referral-program" }, "Referral Program")));
+});
+const TwoProgram = createHookStory(() => {
+  return (h("sqm-program-menu", null,
+    h("sl-menu-item", { value: "referral-program" }, "Referral Program"),
+    h("sl-menu-item", { value: "partner-program" }, "Partner Program")));
+});
+const FiveProgram = createHookStory(() => {
+  return (h("sqm-program-menu", null,
+    h("sl-menu-item", { value: "program1" }, "Program 1"),
+    h("sl-menu-item", { value: "program2" }, "Program 2"),
+    h("sl-menu-item", { value: "program3" }, "Program 3"),
+    h("sl-menu-item", { value: "program4" }, "Program 4"),
+    h("sl-menu-item", { value: "program5" }, "Program 5")));
+});
+const ProgramMenuWithSwitch = createHookStory(() => {
+  return (h("div", null,
+    h("sqb-program-section", { "program-id": "Vacay-referral" },
+      h("sqm-program-menu", null,
+        h("sl-menu-item", { value: "Vacay-referral" }, "Vacay-referral"),
+        h("sl-menu-item", { value: "vacay-affiliates" }, "vacay-affiliates")),
+      h("sqb-program-switch", null,
+        h("template", { "program-id": "Vacay-referral" },
+          h("sqb-widget", { "widget-type": "p/Vacay-referral/w/referrerWidget", demoData: {
+              data: { html: dashboardTemplate },
+            } })),
+        h("template", { "program-id": "vacay-affiliates" },
+          h("sqb-widget", { "widget-type": "p/vacay-affiliates/w/referrerWidget", demoData: {
+              data: { html: dashboardTemplate },
+            } }))))));
+});
+
+const ProgramMenu$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': ProgramMenu_stories,
+  OneProgram: OneProgram,
+  TwoProgram: TwoProgram,
+  FiveProgram: FiveProgram,
+  ProgramMenuWithSwitch: ProgramMenuWithSwitch
+});
+
+const PoweredByImg_stories = {
+  title: "Powered By",
+};
+const Default$a = () => {
+  return h(PoweredByImg$1, null);
+};
+const CustomColor = () => {
+  return h(PoweredByImg$1, { color: "salmon" });
+};
+const CustomWidthAndHeight = () => {
+  return h(PoweredByImg$1, { width: 300, height: 50 });
+};
+
+const PoweredByImg = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': PoweredByImg_stories,
+  Default: Default$a,
+  CustomColor: CustomColor,
+  CustomWidthAndHeight: CustomWidthAndHeight
+});
+
+const PortalFooter_stories = {
+  title: "Portal Footer",
+  parameters: {},
+};
+const defaultProps$9 = {
+  supportEmail: "support@example.com",
+  supportText: "For program support, contact {email}",
+  showPoweredBy: true,
+  poweredByLink: "https://saasquatch.com",
+  paddingTop: "large",
+  paddingRight: "large",
+  paddingBottom: "large",
+  paddingLeft: "large",
+};
+const DefaultFooter = () => h(PortalFooterView, Object.assign({}, defaultProps$9));
+const FooterWithTerms = () => (h(PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions" })));
+const FooterWithFAQ = () => (h(PortalFooterView, Object.assign({}, defaultProps$9, { faqLink: "https://example.com", faqText: "FAQ" })));
+const FooterWithTermsAndFAQ = () => (h(PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
+const FooterNoPoweredBy = () => (h(PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", showPoweredBy: false })));
+
+const PortalFooter = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': PortalFooter_stories,
+  DefaultFooter: DefaultFooter,
+  FooterWithTerms: FooterWithTerms,
+  FooterWithFAQ: FooterWithFAQ,
+  FooterWithTermsAndFAQ: FooterWithTermsAndFAQ,
+  FooterNoPoweredBy: FooterNoPoweredBy
+});
+
+const Hero_stories = {
+  title: "Hero Layout",
+  parameters: {
+  //   scenario,
+  },
+};
+const LoginOneColumn = () => {
+  const props = {
+    states: {
+      columns: 1,
+      wrapDirection: "wrap",
+    },
+    content: {
+      primaryColumn: [
+        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
+        h("sqm-portal-login", null)
+      ]
+    },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};
+const LoginOneColumnWithColor = () => {
+  const props = {
+    states: {
+      columns: 1,
+      wrapDirection: "wrap",
+      background: "LightSlateGrey",
+    },
+    content: {
+      primaryColumn: h("sqm-portal-login", null),
+    },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};
+const LoginOneColumnWithImage = () => {
+  const props = {
+    states: {
+      columns: 1,
+      wrapDirection: "wrap",
+      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
+    },
+    content: { primaryColumn: h("sqm-portal-login", null) },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};
+const TwoColumnLogin = () => {
+  const props = {
+    states: {
+      columns: 2,
+      wrapDirection: "wrap",
+    },
+    content: {
+      primaryColumn: (h("sqm-portal-login", { style: { width: "85%" } })),
+      secondaryColumn: (h("div", { style: { width: "85%" } },
+        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
+        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
+    },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};
+const TwoColumnLoginReverseWrap = () => {
+  const props = {
+    states: {
+      columns: 2,
+      wrapDirection: "wrap-reverse",
+    },
+    content: {
+      primaryColumn: (h("sqm-portal-login", { style: { width: "85%" } })),
+      secondaryColumn: (h("div", { style: { width: "85%" } },
+        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
+        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
+    },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};
+const TwoColumnLoginWithImage = () => {
+  const props = {
+    states: {
+      columns: 2,
+      wrapDirection: "wrap",
+    },
+    content: {
+      primaryColumn: (h("div", { style: { width: "85%" } },
+        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
+        h("sqm-portal-login", null))),
+      secondaryColumn: (h("img", { src: "https://images.unsplash.com/photo-1629004021495-83fe9b730acb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=735&q=80" })),
+    },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};
+
+const Hero = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': Hero_stories,
+  LoginOneColumn: LoginOneColumn,
+  LoginOneColumnWithColor: LoginOneColumnWithColor,
+  LoginOneColumnWithImage: LoginOneColumnWithImage,
+  TwoColumnLogin: TwoColumnLogin,
+  TwoColumnLoginReverseWrap: TwoColumnLoginReverseWrap,
+  TwoColumnLoginWithImage: TwoColumnLoginWithImage
+});
+
 function deepFreeze(obj) {
     if (obj instanceof Map) {
         obj.clear = obj.delete = obj.set = function () {
@@ -21688,7 +25439,7 @@ const stories = [
   NewPortal,
   SidebarItem,
   NavigationSidebar,
-  PortalLogin,
+  PortalLogin$1,
   PortalRegister$1,
   PortalForgotPassword,
   PortalEmailVerification,
@@ -21703,6 +25454,11 @@ const stories = [
   ReferralTableRewardsCell$1,
   UserName,
   PasswordField,
+  PortalTemplates,
+  ProgramMenu$1,
+  PoweredByImg,
+  PortalFooter,
+  Hero
 ];
 const StencilStorybook = class {
   constructor(hostRef) {
@@ -21742,7 +25498,7 @@ const TableRow = class {
   }
 };
 
-const debug$1 = browser("sq:global");
+const debug$2 = browser("sq:global");
 const textStyles = `
   sqm-text {
     display: block;
@@ -21802,7 +25558,7 @@ const Text = class {
       insertCSS(textStyles);
     }
     catch (error) {
-      debug$1(error);
+      debug$2(error);
     }
   }
   render() {
@@ -21867,4 +25623,4 @@ function useUserNameDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-export { DividedLayout as sqm_divided_layout, EditProfile as sqm_edit_profile, FormMessage as sqm_form_message, SqmHookStoryContainer as sqm_hook_story_container, NavigationMenu as sqm_navigation_menu, PortalPasswordField as sqm_password_field, PortalFrame as sqm_portal_frame, PortalRegister as sqm_portal_register, ReferralTable as sqm_referral_table, ReferralTableCell as sqm_referral_table_cell, ReferralTableDateCell as sqm_referral_table_date_cell, ReferralTableRewardsCell as sqm_referral_table_rewards_cell, ReferralTableStatusCell as sqm_referral_table_status_cell, ReferralTableUserCell as sqm_referral_table_user_cell, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareLink as sqm_share_link, StencilStorybook as sqm_stencilbook, TableCell$1 as sqm_table_cell, TableRow as sqm_table_row, Text as sqm_text, UserName$1 as sqm_user_name };
+export { DividedLayout as sqm_divided_layout, EditProfile as sqm_edit_profile, FormMessage as sqm_form_message, SqmHookStoryContainer as sqm_hook_story_container, NavigationMenu as sqm_navigation_menu, PortalPasswordField as sqm_password_field, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramMenu as sqm_program_menu, ReferralTable as sqm_referral_table, ReferralTableCell as sqm_referral_table_cell, ReferralTableDateCell as sqm_referral_table_date_cell, ReferralTableRewardsCell as sqm_referral_table_rewards_cell, ReferralTableStatusCell as sqm_referral_table_status_cell, ReferralTableUserCell as sqm_referral_table_user_cell, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareLink as sqm_share_link, StencilStorybook as sqm_stencilbook, TableCell$1 as sqm_table_cell, TableRow as sqm_table_row, Text as sqm_text, UserName$1 as sqm_user_name };