@saasquatch/mint-components 2.2.0-7 → 2.2.0-8

package/dist/esm/sqm-portal-forgot-password_6.entry.js

@@ -6,11 +6,11 @@ import { c as cjs } from './cjs-bdfb4486.js';
 import { s as sanitizeUrlPath, g as getProps } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
-import './sqm-text-span-view-4db9e33f.js';
-import { P as PortalForgotPasswordView, a as PortalLoginView, b as PortalRegisterView, c as PortalVerifyEmailView } from './sqm-portal-verify-email-view-c053ead1.js';
+import './sqm-text-span-view-72f43dff.js';
+import { P as PortalForgotPasswordView, a as PortalLoginView, b as PortalRegisterView, c as PortalVerifyEmailView } from './sqm-portal-verify-email-view-590f964b.js';
 import { A as AsYouType, u as usePortalRegistrationForm } from './usePortalRegistrationForm-3a1f36a2.js';
 import { u as useRegistrationFormState } from './useRegistrationFormState-aa44cfff.js';
-import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-9bf30b56.js';
+import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-79265df5.js';
 
 function usePortalForgotPassword(props) {
   var _a, _b, _c, _d, _e, _f, _g;
@@ -298,7 +298,7 @@ const PortalGoogleLogin = class {
     const sheet = createStyleSheet(styles);
     const styleString = sheet.toString();
     const content = {
-      forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { onClick: () => jn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+      forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { part: "forgot-password-link", onClick: () => jn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
       googleButton: (h$1("sqm-google-sign-in", { onInitComplete: callbacks.googleSubmit })),
       secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("style", null, styleString), h$1("span", null, this.registerCTA, " ", h$1("sl-button", { size: "large", type: "text", disabled: states.loading, onClick: () => jn.push(states.registerPath), className: sheet.classes.RegisterButton }, this.registerLabel)))),
       emailLabel: this.emailLabel,
@@ -403,7 +403,7 @@ const PortalLogin = class {
     const sheet = createStyleSheet(styles);
     const styleString = sheet.toString();
     const content = {
-      forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { onClick: () => jn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+      forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { part: "forgot-password-link", onClick: () => jn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
       googleButton: null,
       secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("style", null, styleString), h$1("sl-button", { exportparts: "base: secondarybutton-base", type: "text", disabled: states.loading, onClick: () => jn.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,

package/dist/esm/{sqm-portal-profile-view-115bad4a.js → sqm-portal-profile-view-2018590a.js}

@@ -1,7 +1,7 @@
 import { h } from './index-38ad4957.js';
 import { i as intl } from './global-75e96214.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { T as TextSpanView } from './sqm-text-span-view-4db9e33f.js';
+import { T as TextSpanView } from './sqm-text-span-view-72f43dff.js';
 
 function PortalProfileView(props) {
   var _a, _b, _c, _d, _e;

package/dist/esm/sqm-portal-profile.entry.js

@@ -5,8 +5,8 @@ import { d as dist, J, w as wn, $ as $e, i as isDemo } from './index.module-02cb
 import { c as cjs } from './cjs-bdfb4486.js';
 import { g as getProps } from './utils-334c1e34.js';
 import './JSS-67b5cff8.js';
-import './sqm-text-span-view-4db9e33f.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-115bad4a.js';
+import './sqm-text-span-view-72f43dff.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-2018590a.js';
 import { i as isEmpty } from './utilities-cbd8f2eb.js';
 
 const GET_USER = dist.gql `

package/dist/esm/{sqm-portal-registration-form-view-9bf30b56.js → sqm-portal-registration-form-view-79265df5.js}

@@ -1,7 +1,7 @@
 import { h } from './index-38ad4957.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { A as AuthWrapper, a as AuthColumn, H as HostBlock, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f750863a.js';
-import { T as TextSpanView } from './sqm-text-span-view-4db9e33f.js';
+import { T as TextSpanView } from './sqm-text-span-view-72f43dff.js';
 
 const style = {
   Wrapper: AuthWrapper,

package/dist/esm/{sqm-portal-reset-password-view-f8d1689c.js → sqm-portal-reset-password-view-f84c04cf.js}

@@ -1,7 +1,7 @@
 import { h } from './index-38ad4957.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer } from './mixins-f750863a.js';
-import { T as TextSpanView } from './sqm-text-span-view-4db9e33f.js';
+import { T as TextSpanView } from './sqm-text-span-view-72f43dff.js';
 
 const style = {
   Wrapper: AuthWrapper,

package/dist/esm/sqm-portal-reset-password.entry.js

@@ -6,8 +6,8 @@ import { c as cjs } from './cjs-bdfb4486.js';
 import { s as sanitizeUrlPath } from './utils-334c1e34.js';
 import './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
-import './sqm-text-span-view-4db9e33f.js';
-import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-f8d1689c.js';
+import './sqm-text-span-view-72f43dff.js';
+import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-f84c04cf.js';
 
 function usePortalResetPassword(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;

package/dist/esm/{sqm-portal-verify-email-view-c053ead1.js → sqm-portal-verify-email-view-590f964b.js}

@@ -2,7 +2,7 @@ import { h } from './index-38ad4957.js';
 import { j as jn } from './index.module-02cb914c.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, H as HostBlock, E as ErrorStyles } from './mixins-f750863a.js';
-import { T as TextSpanView } from './sqm-text-span-view-4db9e33f.js';
+import { T as TextSpanView } from './sqm-text-span-view-72f43dff.js';
 
 const vanillaStyle = `
 :host {

package/dist/esm/sqm-referral-table_11.entry.js

@@ -6,7 +6,7 @@ import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
-import { T as TextSpanView } from './sqm-text-span-view-4db9e33f.js';
+import { T as TextSpanView } from './sqm-text-span-view-72f43dff.js';
 import { G as GenericTableView } from './GenericTableView-8c72ac30.js';
 import { a as useRequestRerender, u as useRerenderListener } from './re-render-bf46ba54.js';
 import { u as useChildElements } from './useChildElements-06937df7.js';

package/dist/esm/sqm-rewards-table-customer-note-cell.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1 } from './index-38ad4957.js';
 import { n as h } from './dom-context-hooks.module-50442785.js';
 import './JSS-67b5cff8.js';
-import { T as TextSpanView } from './sqm-text-span-view-4db9e33f.js';
+import { T as TextSpanView } from './sqm-text-span-view-72f43dff.js';
 
 const RewardTableCustomerNoteCell = class {
   constructor(hostRef) {

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

@@ -8,9 +8,9 @@ import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './useReferralCodes-25f8b792.js';
 import './mixins-f750863a.js';
 import { C as CopyTextView } from './copy-text-view-87259b11.js';
-import './sqm-text-span-view-4db9e33f.js';
-import { b as PortalRegisterView, P as PortalForgotPasswordView, a as PortalLoginView, c as PortalVerifyEmailView } from './sqm-portal-verify-email-view-c053ead1.js';
-import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-9bf30b56.js';
+import './sqm-text-span-view-72f43dff.js';
+import { b as PortalRegisterView, P as PortalForgotPasswordView, a as PortalLoginView, c as PortalVerifyEmailView } from './sqm-portal-verify-email-view-590f964b.js';
+import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-79265df5.js';
 import { G as GenericTableView } from './GenericTableView-8c72ac30.js';
 import './useChildElements-06937df7.js';
 import { l as luxon } from './luxon-1be92a8e.js';
@@ -23,19 +23,19 @@ import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-7a682cc3.j
 import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-376c1bf6.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-2b66457a.js';
 import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-8d98fcf3.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-58bad294.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-115bad4a.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-fde1eb35.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-2018590a.js';
 import './utilities-cbd8f2eb.js';
-import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-f8d1689c.js';
+import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-f84c04cf.js';
 import './ErrorView-74cb3af8.js';
 import { Q as QrCodeView } from './sqm-qr-code-view-ce476721.js';
-import { S as StatContainerView, B as BigStatView, a as ShareButtonView, P as PortalChangePasswordView, b as PoweredByImg$1, c as BaseRegistrationFormView, u as useDemoBigStat, T as TaskCardView, C as CardFeedView, d as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, L as LeaderboardView, H as HeroView, I as InputFieldView, N as NameFieldsView, f as ChangeMarktingView, g as PortalFooterView, h as PortalFrameView, R as ReferralIframeView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as useShareButton, J as useShareLink, K as ProgressBarView, M as ProgressBar$2, O as LeadFormView, Q as LeadDropdownFieldView, U as ShadowViewAddon } from './ShadowViewAddon-4d554869.js';
-import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-a8c708cd.js';
-import { I as InvoiceTableView, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, O as OtherRegionSlotView, U as UserInfoFormView$1 } from './sqm-user-info-form-view-d13f9d3e.js';
-import { t as taxTypeToName, L as LoadingView } from './utils-17daa419.js';
+import { S as StatContainerView, B as BigStatView, a as ShareButtonView, P as PortalChangePasswordView, b as PoweredByImg$1, c as BaseRegistrationFormView, u as useDemoBigStat, T as TaskCardView, C as CardFeedView, d as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, L as LeaderboardView, H as HeroView, I as InputFieldView, N as NameFieldsView, f as ChangeMarktingView, g as PortalFooterView, h as PortalFrameView, R as ReferralIframeView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as useShareButton, J as ShareLinkView, K as useShareLink, M as ProgressBarView, O as ProgressBar$2, Q as LeadFormView, U as LeadDropdownFieldView, V as ShadowViewAddon } from './ShadowViewAddon-e115fa1c.js';
+import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-200c9df8.js';
+import { I as InvoiceTableView, O as OtherRegionSlotView, U as UserInfoFormView$1 } from './sqm-user-info-form-view-e1ba6009.js';
+import { t as taxTypeToName, L as LoadingView, I as INDIRECT_TAX_SPAIN_REGIONS, a as INDIRECT_TAX_PROVINCES } from './utils-4f5cd04c.js';
 import { L as LeadInputFieldView } from './sqm-lead-input-field-view-b945edf4.js';
-import './data-017e5ef2.js';
-import { P as PartnerInfoModalView } from './sqm-partner-info-modal-view-5709904e.js';
+import './data-8698cbc6.js';
+import { P as PartnerInfoModalView } from './sqm-partner-info-modal-view-d6f3a215.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -1793,7 +1793,7 @@ const resetPasswordTemplate = "<sqm-portal-reset-password confirm-password=\"tru
 
 const resetPasswordEmailTemplate = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional //EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n\n<html\n  xmlns=\"http://www.w3.org/1999/xhtml\"\n  xmlns:o=\"urn:schemas-microsoft-com:office:office\"\n  xmlns:v=\"urn:schemas-microsoft-com:vml\"\n>\n  <head>\n    <!--[if gte mso 9\n      ]><xml\n        ><o:OfficeDocumentSettings\n          ><o:AllowPNG /><o:PixelsPerInch\n            >96</o:PixelsPerInch\n          ></o:OfficeDocumentSettings\n        ></xml\n      ><!\n    [endif]-->\n    <meta content=\"text/html; charset=utf-8\" http-equiv=\"Content-Type\" />\n    <meta content=\"width=device-width\" name=\"viewport\" />\n    <!--[if !mso]><!-->\n    <meta content=\"IE=edge\" http-equiv=\"X-UA-Compatible\" />\n    <!--<![endif]-->\n    <title></title>\n    <!--[if !mso]><!-->\n    <!--<![endif]-->\n    <style type=\"text/css\">\n      body {\n        margin: 0;\n        padding: 0;\n      }\n\n      table,\n      td,\n      tr {\n        vertical-align: top;\n        border-collapse: collapse;\n      }\n\n      * {\n        line-height: inherit;\n      }\n\n      a[x-apple-data-detectors=\"true\"] {\n        color: inherit !important;\n        text-decoration: none !important;\n      }\n    </style>\n    <style id=\"media-query\" type=\"text/css\">\n      @media (max-width: 520px) {\n        .block-grid,\n        .col {\n          min-width: 320px !important;\n          max-width: 100% !important;\n          display: block !important;\n        }\n\n        .block-grid {\n          width: 100% !important;\n        }\n\n        .col {\n          width: 100% !important;\n        }\n\n        .col_cont {\n          margin: 0 auto;\n        }\n\n        img.fullwidth,\n        img.fullwidthOnMobile {\n          max-width: 100% !important;\n        }\n\n        .no-stack .col {\n          min-width: 0 !important;\n          display: table-cell !important;\n        }\n\n        .no-stack.two-up .col {\n          width: 50% !important;\n        }\n\n        .no-stack .col.num2 {\n          width: 16.6% !important;\n        }\n\n        .no-stack .col.num3 {\n          width: 25% !important;\n        }\n\n        .no-stack .col.num4 {\n          width: 33% !important;\n        }\n\n        .no-stack .col.num5 {\n          width: 41.6% !important;\n        }\n\n        .no-stack .col.num6 {\n          width: 50% !important;\n        }\n\n        .no-stack .col.num7 {\n          width: 58.3% !important;\n        }\n\n        .no-stack .col.num8 {\n          width: 66.6% !important;\n        }\n\n        .no-stack .col.num9 {\n          width: 75% !important;\n        }\n\n        .no-stack .col.num10 {\n          width: 83.3% !important;\n        }\n\n        .video-block {\n          max-width: none !important;\n        }\n\n        .mobile_hide {\n          min-height: 0px;\n          max-height: 0px;\n          max-width: 0px;\n          display: none;\n          overflow: hidden;\n          font-size: 0px;\n        }\n\n        .desktop_hide {\n          display: block !important;\n          max-height: none !important;\n        }\n      }\n    </style>\n    <style id=\"icon-media-query\" type=\"text/css\">\n      @media (max-width: 520px) {\n        .icons-inner {\n          text-align: center;\n        }\n\n        .icons-inner td {\n          margin: 0 auto;\n        }\n      }\n    </style>\n  </head>\n  <body\n    class=\"clean-body\"\n    style=\"\n      margin: 0;\n      padding: 0;\n      -webkit-text-size-adjust: 100%;\n      background-color: #ffffff;\n    \"\n  >\n    <!--[if IE]><div class=\"ie-browser\"><![endif]-->\n    <table\n      bgcolor=\"#FFFFFF\"\n      cellpadding=\"0\"\n      cellspacing=\"0\"\n      class=\"nl-container\"\n      role=\"presentation\"\n      style=\"\n        table-layout: fixed;\n        vertical-align: top;\n        min-width: 320px;\n        border-spacing: 0;\n        border-collapse: collapse;\n        mso-table-lspace: 0pt;\n        mso-table-rspace: 0pt;\n        background-color: #ffffff;\n        width: 100%;\n      \"\n      valign=\"top\"\n      width=\"100%\"\n    >\n      <tbody>\n        <tr style=\"vertical-align: top\" valign=\"top\">\n          <td style=\"word-break: break-word; vertical-align: top\" valign=\"top\">\n            <!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td align=\"center\" style=\"background-color:#FFFFFF\"><![endif]-->\n            <div style=\"background-color: transparent\">\n              <div\n                class=\"block-grid\"\n                style=\"\n                  min-width: 320px;\n                  max-width: 500px;\n                  overflow-wrap: break-word;\n                  word-wrap: break-word;\n                  word-break: break-word;\n                  margin: 0 auto;\n                  background-color: transparent;\n                \"\n              >\n                <div\n                  style=\"\n                    border-collapse: collapse;\n                    display: table;\n                    width: 100%;\n                    background-color: transparent;\n                  \"\n                >\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]-->\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]-->\n                  <div\n                    class=\"col num12\"\n                    style=\"\n                      min-width: 320px;\n                      max-width: 500px;\n                      display: table-cell;\n                      vertical-align: top;\n                      width: 500px;\n                    \"\n                  >\n                    <div class=\"col_cont\" style=\"width: 100% !important\">\n                      <!--[if (!mso)&(!IE)]><!-->\n                      <div\n                        style=\"\n                          border-top: 0px solid transparent;\n                          border-left: 0px solid transparent;\n                          border-bottom: 0px solid transparent;\n                          border-right: 0px solid transparent;\n                          padding-top: 5px;\n                          padding-bottom: 5px;\n                          padding-right: 0px;\n                          padding-left: 0px;\n                        \"\n                      >\n                        <!--<![endif]-->\n                        <table\n                          cellpadding=\"0\"\n                          cellspacing=\"0\"\n                          role=\"presentation\"\n                          style=\"\n                            table-layout: fixed;\n                            vertical-align: top;\n                            border-spacing: 0;\n                            border-collapse: collapse;\n                            mso-table-lspace: 0pt;\n                            mso-table-rspace: 0pt;\n                          \"\n                          valign=\"top\"\n                          width=\"100%\"\n                        >\n                          <tr style=\"vertical-align: top\" valign=\"top\">\n                            <td\n                              align=\"center\"\n                              style=\"\n                                word-break: break-word;\n                                vertical-align: top;\n                                padding-bottom: 20px;\n                                padding-left: 10px;\n                                padding-right: 10px;\n                                padding-top: 10px;\n                                text-align: center;\n                                width: 100%;\n                              \"\n                              valign=\"top\"\n                              width=\"100%\"\n                            >\n                              <h1\n                                style=\"\n                                  color: #444445;\n                                  direction: ltr;\n                                  font-family: 'Helvetica Neue', Helvetica,\n                                    Arial, sans-serif;\n                                  font-size: 20px;\n                                  font-weight: normal;\n                                  letter-spacing: normal;\n                                  line-height: 120%;\n                                  text-align: left;\n                                  margin-top: 0;\n                                  margin-bottom: 0;\n                                \"\n                              >\n                                <strong>Reset your password</strong>\n                              </h1>\n                            </td>\n                          </tr>\n                        </table>\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]-->\n                        <div\n                          style=\"\n                            color: #444445;\n                            font-family: Arial, Helvetica Neue, Helvetica,\n                              sans-serif;\n                            line-height: 1.8;\n                            padding-top: 10px;\n                            padding-right: 10px;\n                            padding-bottom: 10px;\n                            padding-left: 10px;\n                          \"\n                        >\n                          <div\n                            class=\"txtTinyMce-wrapper\"\n                            style=\"\n                              font-size: 14px;\n                              line-height: 1.8;\n                              color: #444445;\n                              font-family: Arial, Helvetica Neue, Helvetica,\n                                sans-serif;\n                              mso-line-height-alt: 25px;\n                            \"\n                          >\n                            <p\n                              style=\"\n                                margin: 0;\n                                font-size: 14px;\n                                line-height: 1.8;\n                                word-break: break-word;\n                                mso-line-height-alt: 25px;\n                                margin-top: 0;\n                                margin-bottom: 0;\n                              \"\n                            >\n                              <span style=\"font-size: 14px\"\n                                >We received a request to reset your password.\n                                Click the button below to reset your\n                                password.</span\n                              >\n                            </p>\n                          </div>\n                        </div>\n                        <div\n                          align=\"center\"\n                          class=\"button-container\"\n                          style=\"\n                            padding-top: 10px;\n                            padding-right: 10px;\n                            padding-bottom: 10px;\n                            padding-left: 10px;\n                          \"\n                        >\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\"><!\n                          [endif]--><a\n                            href=\"{{validationLink}}\"\n                            target=\"_blank\"\n                            style=\"\n                              -webkit-text-size-adjust: none;\n                              text-decoration: none;\n                              display: block;\n                              color: #ffffff;\n                              background-color: #2270ee;\n                              border-radius: 5px;\n                              -webkit-border-radius: 5px;\n                              -moz-border-radius: 5px;\n                              width: 100%;\n                              width: calc(100% - 2px);\n                              border-top: var(--sqm-border-thickness, 1px) solid\n                                #2270ee;\n                              border-right: var(--sqm-border-thickness, 1px)\n                                solid #2270ee;\n                              border-bottom: var(--sqm-border-thickness, 1px)\n                                solid #2270ee;\n                              border-left: var(--sqm-border-thickness, 1px)\n                                solid #2270ee;\n                              padding-top: 5px;\n                              padding-bottom: 5px;\n                              font-family: 'Helvetica Neue', Helvetica, Arial,\n                                sans-serif;\n                              text-align: center;\n                              mso-border-alt: none;\n                              word-break: keep-all;\n                            \"\n                            target=\"_blank\"\n                            ><span\n                              style=\"\n                                padding-left: 20px;\n                                padding-right: 20px;\n                                font-size: 14px;\n                                display: inline-block;\n                                letter-spacing: undefined;\n                              \"\n                              ><span\n                                style=\"\n                                  font-size: 16px;\n                                  line-height: 2;\n                                  word-break: break-word;\n                                  mso-line-height-alt: 32px;\n                                \"\n                                ><span\n                                  style=\"font-size: 14px; line-height: 28px\"\n                                  >Reset Password</span\n                                ></span\n                              ></span\n                            ></a\n                          >\n                          <!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]-->\n                        </div>\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]-->\n                        <div\n                          style=\"\n                            color: #444445;\n                            font-family: Arial, Helvetica Neue, Helvetica,\n                              sans-serif;\n                            line-height: 1.2;\n                            padding-top: 15px;\n                            padding-right: 10px;\n                            padding-bottom: 15px;\n                            padding-left: 10px;\n                          \"\n                        >\n                          <div\n                            class=\"txtTinyMce-wrapper\"\n                            style=\"\n                              font-size: 14px;\n                              line-height: 1.2;\n                              color: #444445;\n                              font-family: Arial, Helvetica Neue, Helvetica,\n                                sans-serif;\n                              mso-line-height-alt: 17px;\n                            \"\n                          >\n                            <p\n                              style=\"\n                                margin: 0;\n                                font-size: 12px;\n                                line-height: 1.2;\n                                word-break: break-word;\n                                mso-line-height-alt: 14px;\n                                margin-top: 0;\n                                margin-bottom: 0;\n                              \"\n                            >\n                              <span style=\"font-size: 12px\"\n                                >If you didn't request a password reset please\n                                ignore this email. Your password will not\n                                change.</span\n                              >\n                            </p>\n                          </div>\n                        </div>\n                        <!--[if mso]></td></tr></table><![endif]-->\n                        <!--[if (!mso)&(!IE)]><!-->\n                      </div>\n                      <!--<![endif]-->\n                    </div>\n                  </div>\n                  <!--[if (mso)|(IE)]></td></tr></table><![endif]-->\n                  <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->\n                </div>\n              </div>\n            </div>\n            <!--[if (mso)|(IE)]></td></tr></table><![endif]-->\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <!--[if (IE)]></div><![endif]-->\n  </body>\n</html>\n";
 
-const taxAndCashTemplate = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-hero\n          background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n        >\n          <sqm-router>\n            <template path=\"/register\">\n              <sqm-portal-login></sqm-portal-login>\n              <sqm-portal-register>\n                <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n              </sqm-portal-register>\n            </template>\n\n            <template path=\"/emailVerification\">\n              <sqm-portal-protected-route\n                redirect-to=\"/login\"\n              ></sqm-portal-protected-route>\n              <sqm-portal-email-verification></sqm-portal-email-verification>\n            </template>\n\n            <template path=\"/login\">\n              <sqm-portal-login></sqm-portal-login>\n            </template>\n\n            <template path=\"/verifyEmail\">\n              <sqm-portal-verify-email></sqm-portal-verify-email>\n            </template>\n\n            <template path=\"/forgotPassword\">\n              <sqm-portal-forgot-password\n                email-label=\"Business Email\"\n              ></sqm-portal-forgot-password>\n            </template>\n\n            <template path=\"/resetPassword\">\n              <sqm-portal-reset-password\n                confirm-password=\"true\"\n              ></sqm-portal-reset-password>\n            </template>\n            <template path=\"/logout\">\n              <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n            </template>\n          </sqm-router>\n        </sqm-hero>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b|\\brefer\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: var(--sqm-border-thickness, 1px) solid #eaeaea;\n            border-bottom: var(--sqm-border-thickness, 1px) solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/taxAndCash\"\n              icon=\"file-earmark-text\"\n              label=\"Tax & Payout Settings\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\" content-area-width=\"1200px\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqb-widget\n                  widget-type=\"p/referral-program/w/referrerWidget\"\n                  track-loads=\"true\"\n                ></sqb-widget>\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-change-password></sqm-portal-change-password>\n                </sqm-portal-container>\n              </template>\n              <template path=\"/refer\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-referral-iframe></sqm-referral-iframe>\n              </template>\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text>\n                    <h1>Activity</h1>\n                  </sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text>\n                        <p>Referrals</p>\n                      </sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text>\n                        <p>Rewards Earned</p>\n                      </sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text>\n                        <p>Reward Balance</p>\n                      </sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n              <template path=\"/taxAndCash\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-tax-and-cash\n                  step-1_first-name=\"First name\"\n                  step-1_last-name=\"Last name\"\n                  step-1_email=\"Email\"\n                  step-1_country=\"Country\"\n                  step-1_phone-number=\"Phone number\"\n                  step-1_address=\"Address\"\n                  step-1_city=\"City\"\n                  step-1_state=\"State\"\n                  step-1_province=\"Province\"\n                  step-1_region=\"Region\"\n                  step-1_postal-code=\"Postal code\"\n                  step-1_currency=\"Currency\"\n                  step-1_currency-help-text=\"Choose your preferred payout currency\"\n                  step-1_allow-banking-collection=\"I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information\"\n                  step-1_personal-information=\"Personal Information\"\n                  step-1_terms-and-conditions-label=\"terms and conditions\"\n                  step-1_terms-and-conditions-link=\"/payout-terms-and-conditions\"\n                  step-1_search-for-currency-text=\"Search for currency..\"\n                  step-2_indirect-tax=\"Indirect Tax\"\n                  step-2_indirect-tax-description=\"Indirect taxes (e.g. VAT, HST, GST) are transaction based taxes often applied to goods and services. Service providers are typically required to register with their tax authority and collect these taxes on behalf governments.\"\n                  step-2_indirect-tax-details=\"Indirect tax details\"\n                  step-2_other-region=\"Registered for indirect tax\"\n                  step-2_other-region-subtext=\"If you’ve registered with your tax authority, add your information to stay tax compliant.\"\n                  step-2_not-registered=\"Not registered for indirect tax\"\n                  step-2_not-registered-subtext=\"If you’ve never set up indirect tax with your tax authority, then you’re likely not considered registered.\"\n                  step-2_selected-region=\"Country / region of indirect tax\"\n                  step-2_indirect-tax-number=\"{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}}\"\n                  step-2_province=\"Province\"\n                  step-2_indirect-tax-number-error=\"{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}} is required\"\n                  step-2_qst-number=\"QST number\"\n                  step-2_is-registered-q-s-t=\"I am registered for QST Tax\"\n                  step-2_is-registered-sub-region-income-tax=\"I am an individual registered for Income Tax purposes in Spain, and withholding tax will apply to any payments made to me.\"\n                  step-2_sub-region=\"Sub-region\"\n                  step-2_sub-region-tax-number-label=\"Income Tax Number\"\n                  step-2_cannot-change-info-alert=\"Changes to your personal and indirect tax information can only be made through our Support team after you complete this step. Make sure these are correct before continuing.\"\n                  step-3_tax-form=\"Tax form\"\n                  step-3_tax-form-label=\"{documentType} Tax Form\"\n                  step-3_participant-type=\"Participant type\"\n                  step-3_business-entity=\"I represent a business\"\n                  step-3_individual-participant=\"I am an individual participant\"\n                  step-3_tax-form-description=\"Participants based in the US need to submit a {documentType} form.\"\n                  step-3_tax-form-description-individual-participant=\"Participants residing outside of the US, joining the referral program of a US-based company, need to submit a {documentType} form.\"\n                  step-3_tax-form-description-business-entity=\"Participants residing outside of the US working with a US Brand need to submit a {documentType} form.\"\n                  step-3_docusign-expired=\"For your security and privacy, we automatically end your session after 20 minutes of inactivity. Please refresh and re-enter your tax information to continue.\"\n                  step-3_docusign-session-warning=\"For your security, we automatically end your session when you have not interacted with the form after 20 minutes.\"\n                  step-3_docusign-error=\"There was a problem displaying this form. Please refresh the page. If this problem continues, contact Support.\"\n                  step-3_refresh-button=\"Refresh Page\"\n                  step-3_exit-button=\"Exit\"\n                  step-3_modal-title=\"Important Note\"\n                  step-3_modal-description=\"Remember the name you enter in your tax form. It must exactly match the bank account holder name configured in the next step. {br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.\"\n                  step-3_modal-button-text=\"I understand\"\n                  step-4_tax-and-payouts=\"Payouts\"\n                  step-4_directly-to-bank-account=\"Directly to my bank account\"\n                  step-4_to-pay-pal-account=\"PayPal (2% processing fee capped to {feeCap})\"\n                  step-4_payment-schedule-balance-threshold=\"Pay me when my balance reaches a threshold\"\n                  step-4_payment-schedule-fixed-day=\"Pay me on a fixed day of the month\"\n                  step-4_payment-day-select-label=\"Payment Day\"\n                  step-4_payment-threshold-select-label=\"Payment threshold\"\n                  step-4_payment-day-first-of-month-label-text=\"1st of the month\"\n                  step-4_payment-day-fifteenth-of-month-label-text=\"15th of the month\"\n                  step-4_payment-method=\"Payment method\"\n                  step-4_payment-schedule=\"Payment schedule\"\n                  step-4_payment-method-subtext=\"Payouts will be sent from our referral program provider, impact.com.\"\n                  step-4_pay-pal-input-label=\"PayPal email\"\n                  step-4_bank-location-label=\"Bank country location\"\n                  step-4_beneficiary-account-name-label=\"Account holder name\"\n                  step-4_beneficiary-account-name-description=\"The beneficiary name of your bank account. Ensure this matches the name on your tax form.\"\n                  step-4_bank-account-type-label=\"Bank account type\"\n                  step-4_checking-select-item-label=\"Checking\"\n                  step-4_savings-select-item-label=\"Savings\"\n                  step-4_bank-account-number-label=\"Bank account number\"\n                  step-4_iban-label=\"IBAN\"\n                  step-4_swift-code-label=\"SWIFT code\"\n                  step-4_routing-code-label=\"{bankCountry, select, AU {BSB number} CA {Routing number} CZ {Bank code} HK {Clearing code} SG {Clearing code} US {ABA routing number} NZ {BSB number} ZA {Bank/Branch number} IN {IFSC} CNY {CNAPS} other {Routing code} }\"\n                  step-4_bank-name-label=\"Bank name\"\n                  step-4_classification-entity-label=\"Classification entity\"\n                  step-4_business-select-item-label=\"Business\"\n                  step-4_individual-select-item-label=\"Individual\"\n                  step-4_foreign-select-item-label=\"Foreign\"\n                  step-4_classification-c-p-f-label=\"Classification CPF\"\n                  step-4_patronymic-name-label=\"Patronymic name\"\n                  step-4_vo-code-label=\"VO code\"\n                  step-4_agency-code-label=\"Agency code\"\n                  step-4_branch-code-label=\"Branch code\"\n                  step-4_classification-label=\"Classification\"\n                  step-4_tax-payer-id-label=\"Beneficiary INN\"\n                  step-4-bank-address-label=\"Bank address\"\n                  step-4_bank-city-label=\"Bank city\"\n                  step-4_bank-state-label=\"Bank Province / State\"\n                  step-4_bank-postal-code-label=\"Bank postal code\"\n                  step-4_eft-withdrawal-label=\"EFT Withdrawal (free)\"\n                  step-4_fx-wire-processing-fee-label=\"FX Wire (Processing Fee {currency}{defaultFxFee}.00)\"\n                  step-4_modal-title=\"Important Note\"\n                  step-4_modal-description=\"Updating payment information places your account and payouts on hold for up to 48 hours while we verify your change. Payments scheduled during the hold period are skipped.\"\n                  step-4_modal-button-text=\"I understand, update my information\"\n                  dashboard_status-text-active=\"Active\"\n                  dashboard_status-text-not-active=\"Invalid Tax Form\"\n                  dashboard_status-text-not-verified=\"Not Verified\"\n                  dashboard_badge-text-submitted-on=\"Submitted on {dateSubmitted}.\"\n                  dashboard_badge-text-submitted-on-w-8=\"Submitted on {dateSubmitted}. Valid for three years after submission.\"\n                  dashboard_badge-text-awaiting-review=\"Awaiting review. Submitted on {dateSubmitted}.\"\n                  dashboard_tax-alert-header-not-active-w-9=\"Your W-9 tax form has personal information that doesn’t match your profile\"\n                  dashboard_tax-alert-header-not-active-w-8=\"{documentType} tax form is invalid\"\n                  dashboard_tax-alert-not-active-message-w-9=\"Please resubmit a new {documentType} form.\"\n                  dashboard_tax-alert-not-active-message-w-8=\"Your tax form may have expired or has personal information that doesn’t match your profile. Please submit a new {documentType} form.\"\n                  dashboard_invalid-form=\"Make sure your information is correct and submit new form.\"\n                  dashboard_banking-information-section-header=\"Payout Information\"\n                  dashboard_tax-document-section-header=\"Tax documents\"\n                  dashboard_tax-document-section-sub-header=\"{documentType} tax form\"\n                  dashboard_no-form-needed-subtext=\"Tax documents are only required if you are based in the US or joining the referral program of a US based brand.\"\n                  dashboard_indirect-tax-info-section-header=\"Indirect tax\"\n                  dashboard_indirect-tax-info-spain=\"Registered in {country}, {subRegion}\"\n                  dashboard_indirect-tax-info-other-country=\"Registered in {country}\"\n                  dashboard_indirect-tax-info-canada=\"Registered in {province}, {country}\"\n                  dashboard_indirect-tax-tooltip-support=\"To make changes to your indirect tax information, please contact Support.\"\n                  dashboard_indirect-tax-details=\"{indirectTaxType} number: {indirectTaxNumber}\"\n                  dashboard_new-form-button=\"Submit new tax form\"\n                  dashboard_edit-payment-information-button=\"Edit payout information\"\n                  dashboard_not-registered-for-tax=\"Not registered for indirect tax. If you’ve previously registered with your tax authority, contact Support to add your information to stay tax compliant.\"\n                  dashboard_qst-number=\"QST number: {qstNumber}\"\n                  dashboard_sub-region-tax-number=\"Income tax number: {subRegionTaxNumber}\"\n                  dashboard_status-badge-text=\"{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} }\"\n                  dashboard_threshold-payout-text=\"Next payout occurs when balance is {thresholdBalance}\"\n                  dashboard_account-text=\"Account\"\n                  dashboard_invoice-column-title=\"Invoice\"\n                  dashboard_date-column-title=\"Date\"\n                  dashboard_earnings-column-title=\"Earnings\"\n                  dashboard_indirect-tax-column-title=\"Indirect tax\"\n                  dashboard_payout-from-impact=\"Your balance may take up to 24 hours to update. Payouts will be sent from our referral program provider, impact.com.\"\n                  dashboard_earnings-after-tax-column-title=\"Earnings after tax\"\n                  dashboard_error-title-text=\"Your payout is on hold \"\n                  dashboard_error-description-text=\"If you’ve recently added your payout information, please wait while we verify your information. If it’s still on hold after a few days, please contact Support or check your inbox for an email from our referral program provider, impact.com.\"\n                  dashboard_payout-missing-information-text=\"Missing banking information, go to Impact.com to resolve.\"\n                  dashboard_invoice-description=\"View and download your invoices to report your earnings and stay tax compliant.\"\n                  dashboard_invoice-prev-label=\"Prev\"\n                  dashboard_invoice-more-label=\"Next\"\n                  dashboard_invoice-header=\"Invoices\"\n                  dashboard_invoice-empty-state-header=\"View your invoice details\"\n                  dashboard_invoice-empty-state-text=\"Refer a friend to view the status of your invoices and rewards earned\"\n                  dashboard_replace-tax-form-modal-header=\"Replace existing tax form\"\n                  dashboard_replace-tax-form-modal-body-text=\"Submitting a new tax form will remove your existing form. Make sure to sign and complete your new tax form to prevent any issues with your next payout.\"\n                  form-step=\"Step {step} of {count}\"\n                  general-error-title=\"There was a problem submitting your information\"\n                  general-error-description=\"Please review your information and try again. If this problem continues, contact Support.\"\n                  field-required-error=\"{fieldName} is required\"\n                  invalid-character-error=\"{fieldName} includes characters that aren't supported.\"\n                  field-invalid-error=\"{fieldName} is invalid\"\n                  continue-button=\"Continue\"\n                  back-button=\"Back\"\n                  cancel-button=\"Cancel\"\n                  is-partner-alert-header=\"An account with this email already exists with our referral program provider, impact.com\"\n                  is-partner-alert-description=\"If you don’t recognize this referral program provider or believe this is a mistake, please contact Support or sign up for this referral program with a different email.\"\n                  search-for-country-text=\"Search for country..\"\n                  loading-error-alert-header=\"There was a problem loading your form\"\n                  loading-error-alert-description=\"Please refresh the page and try again. If this problem continues, contact Support.\"\n                  tax-and-payouts-description=\"Submit your tax documents and add your banking information to receive your rewards.\"\n                ></sqm-tax-and-cash>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"footer\"\n    support-email=\"support@example.com\"\n    terms-link=\"https://example.com\"\n    faq-link=\"https://example.com\"\n    terms-text=\"Terms And Conditions\"\n    faq-text=\"FAQ\"\n    show-powered-by=\"true\"\n  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
+const taxAndCashTemplate = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-hero\n          background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n        >\n          <sqm-router>\n            <template path=\"/register\">\n              <sqm-portal-login></sqm-portal-login>\n              <sqm-portal-register>\n                <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n              </sqm-portal-register>\n            </template>\n\n            <template path=\"/emailVerification\">\n              <sqm-portal-protected-route\n                redirect-to=\"/login\"\n              ></sqm-portal-protected-route>\n              <sqm-portal-email-verification></sqm-portal-email-verification>\n            </template>\n\n            <template path=\"/login\">\n              <sqm-portal-login></sqm-portal-login>\n            </template>\n\n            <template path=\"/verifyEmail\">\n              <sqm-portal-verify-email></sqm-portal-verify-email>\n            </template>\n\n            <template path=\"/forgotPassword\">\n              <sqm-portal-forgot-password\n                email-label=\"Business Email\"\n              ></sqm-portal-forgot-password>\n            </template>\n\n            <template path=\"/resetPassword\">\n              <sqm-portal-reset-password\n                confirm-password=\"true\"\n              ></sqm-portal-reset-password>\n            </template>\n            <template path=\"/logout\">\n              <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n            </template>\n          </sqm-router>\n        </sqm-hero>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b|\\brefer\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: var(--sqm-border-thickness, 1px) solid #eaeaea;\n            border-bottom: var(--sqm-border-thickness, 1px) solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/taxAndCash\"\n              icon=\"file-earmark-text\"\n              label=\"Tax & Payout Settings\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\" content-area-width=\"1200px\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqb-widget\n                  widget-type=\"p/referral-program/w/referrerWidget\"\n                  track-loads=\"true\"\n                ></sqb-widget>\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-change-password></sqm-portal-change-password>\n                </sqm-portal-container>\n              </template>\n              <template path=\"/refer\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-referral-iframe></sqm-referral-iframe>\n              </template>\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text>\n                    <h1>Activity</h1>\n                  </sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text>\n                        <p>Referrals</p>\n                      </sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text>\n                        <p>Rewards Earned</p>\n                      </sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text>\n                        <p>Reward Balance</p>\n                      </sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n              <template path=\"/taxAndCash\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-tax-and-cash\n                  step-1_first-name=\"First name\"\n                  step-1_last-name=\"Last name\"\n                  step-1_email=\"Email\"\n                  step-1_country=\"Country\"\n                  step-1_phone-number=\"Phone number\"\n                  step-1_address=\"Address\"\n                  step-1_city=\"City\"\n                  step-1_state=\"State\"\n                  step-1_province=\"Province\"\n                  step-1_region=\"Region\"\n                  step-1_postal-code=\"Postal code\"\n                  step-1_currency=\"Currency\"\n                  step-1_currency-help-text=\"Choose your preferred payout currency\"\n                  step-1_allow-banking-collection=\"I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information\"\n                  step-1_personal-information=\"Personal Information\"\n                  step-1_terms-and-conditions-label=\"terms and conditions\"\n                  step-1_terms-and-conditions-link=\"/payout-terms-and-conditions\"\n                  step-1_search-for-currency-text=\"Search for currency..\"\n                  step-2_indirect-tax=\"Indirect Tax\"\n                  step-2_indirect-tax-description=\"Indirect taxes (e.g. VAT, HST, GST) are transaction based taxes often applied to goods and services. Service providers are typically required to register with their tax authority and collect these taxes on behalf governments.\"\n                  step-2_indirect-tax-details=\"Indirect tax details\"\n                  step-2_other-region=\"Registered for indirect tax\"\n                  step-2_other-region-subtext=\"If you’ve registered with your tax authority, add your information to stay tax compliant.\"\n                  step-2_not-registered=\"Not registered for indirect tax\"\n                  step-2_not-registered-subtext=\"If you’ve never set up indirect tax with your tax authority, then you’re likely not considered registered.\"\n                  step-2_selected-region=\"Country / region of indirect tax\"\n                  step-2_indirect-tax-number=\"{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}}\"\n                  step-2_province=\"Province\"\n                  step-2_indirect-tax-number-error=\"{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}} is required\"\n                  step-2_qst-number=\"QST number\"\n                  step-2_is-registered-q-s-t=\"I am registered for QST Tax\"\n                  step-2_is-registered-sub-region-income-tax=\"I am an individual registered for Income Tax purposes in Spain, and withholding tax will apply to any payments made to me.\"\n                  step-2_sub-region=\"Sub-region\"\n                  step-2_sub-region-tax-number-label=\"Income Tax Number\"\n                  step-2_cannot-change-info-alert=\"Changes to your personal and indirect tax information can only be made through our Support team after you complete this step. Make sure these are correct before continuing.\"\n                  step-3_tax-form=\"Tax form\"\n                  step-3_tax-form-label=\"{documentType} Tax Form\"\n                  step-3_participant-type=\"Participant type\"\n                  step-3_business-entity=\"I represent a business\"\n                  step-3_individual-participant=\"I am an individual participant\"\n                  step-3_tax-form-description=\"Participants based in the US need to submit a {documentType} form.\"\n                  step-3_tax-form-description-individual-participant=\"Participants residing outside of the US, joining the referral program of a US-based company, need to submit a {documentType} form.\"\n                  step-3_tax-form-description-business-entity=\"Participants residing outside of the US working with a US Brand need to submit a {documentType} form.\"\n                  step-3_docusign-expired=\"For your security and privacy, we automatically end your session after 20 minutes of inactivity. Please refresh and re-enter your tax information to continue.\"\n                  step-3_docusign-session-warning=\"For your security, we automatically end your session when you have not interacted with the form after 20 minutes.\"\n                  step-3_docusign-error=\"There was a problem displaying this form. Please refresh the page. If this problem continues, contact Support.\"\n                  step-3_refresh-button=\"Refresh Page\"\n                  step-3_exit-button=\"Exit\"\n                  step-3_modal-title=\"Important Note\"\n                  step-3_modal-description=\"Remember the name you enter in your tax form. It must exactly match the bank account holder name configured in the next step. {br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.\"\n                  step-3_modal-button-text=\"I understand\"\n                  step-4_tax-and-payouts=\"Payouts\"\n                  step-4_directly-to-bank-account=\"Directly to my bank account\"\n                  step-4_to-pay-pal-account=\"PayPal (2% processing fee capped to {feeCap})\"\n                  step-4_payment-schedule-balance-threshold=\"Pay me when my balance reaches a threshold\"\n                  step-4_payment-schedule-fixed-day=\"Pay me on a fixed day of the month\"\n                  step-4_payment-day-select-label=\"Payment Day\"\n                  step-4_payment-threshold-select-label=\"Payment threshold\"\n                  step-4_payment-day-first-of-month-label-text=\"1st of the month\"\n                  step-4_payment-day-fifteenth-of-month-label-text=\"15th of the month\"\n                  step-4_payment-method=\"Payment method\"\n                  step-4_payment-schedule=\"Payment schedule\"\n                  step-4_payment-method-subtext=\"Payouts will be sent from our referral program provider, impact.com.\"\n                  step-4_pay-pal-input-label=\"PayPal email\"\n                  step-4_bank-location-label=\"Bank country location\"\n                  step-4_beneficiary-account-name-label=\"Account holder name\"\n                  step-4_beneficiary-account-name-description=\"The beneficiary name of your bank account. Ensure this matches the name on your tax form.\"\n                  step-4_bank-account-type-label=\"Bank account type\"\n                  step-4_checking-select-item-label=\"Checking\"\n                  step-4_savings-select-item-label=\"Savings\"\n                  step-4_bank-account-number-label=\"Bank account number\"\n                  step-4_iban-label=\"IBAN\"\n                  step-4_swift-code-label=\"SWIFT code\"\n                  step-4_routing-code-label=\"{bankCountry, select, AU {BSB number} CA {Routing number} CZ {Bank code} HK {Clearing code} SG {Clearing code} US {ABA routing number} NZ {BSB number} ZA {Bank/Branch number} IN {IFSC} CNY {CNAPS} other {Routing code} }\"\n                  step-4_bank-name-label=\"Bank name\"\n                  step-4_classification-entity-label=\"Classification entity\"\n                  step-4_business-select-item-label=\"Business\"\n                  step-4_individual-select-item-label=\"Individual\"\n                  step-4_foreign-select-item-label=\"Foreign\"\n                  step-4_classification-c-p-f-label=\"Classification CPF\"\n                  step-4_patronymic-name-label=\"Patronymic name\"\n                  step-4_vo-code-label=\"VO code\"\n                  step-4_agency-code-label=\"Agency code\"\n                  step-4_branch-code-label=\"Branch code\"\n                  step-4_branch-name-label=\"Branch name\"\n                  step-4_classification-label=\"Classification\"\n                  step-4_classification-code-label=\"KBE code\"\n                  step-4_tax-payer-id-label=\"Beneficiary INN\"\n                  step-4-bank-address-label=\"Bank address\"\n                  step-4_bank-city-label=\"Bank city\"\n                  step-4_bank-state-label=\"Bank Province / State\"\n                  step-4_bank-postal-code-label=\"Bank postal code\"\n                  step-4_eft-withdrawal-label=\"EFT Withdrawal (free)\"\n                  step-4_fx-wire-processing-fee-label=\"FX Wire (Processing Fee {currency}{defaultFxFee}.00)\"\n                  step-4_modal-title=\"Important Note\"\n                  step-4_modal-description=\"Updating payment information places your account and payouts on hold for up to 48 hours while we verify your change. Payments scheduled during the hold period are skipped.\"\n                  step-4_modal-button-text=\"I understand, update my information\"\n                  dashboard_status-text-active=\"Active\"\n                  dashboard_status-text-not-active=\"Invalid Tax Form\"\n                  dashboard_status-text-not-verified=\"Not Verified\"\n                  dashboard_badge-text-submitted-on=\"Submitted on {dateSubmitted}.\"\n                  dashboard_badge-text-submitted-on-w-8=\"Submitted on {dateSubmitted}. Valid for three years after submission.\"\n                  dashboard_badge-text-awaiting-review=\"Awaiting review. Submitted on {dateSubmitted}.\"\n                  dashboard_tax-alert-header-not-active-w-9=\"Your W-9 tax form has personal information that doesn’t match your profile\"\n                  dashboard_tax-alert-header-not-active-w-8=\"{documentType} tax form is invalid\"\n                  dashboard_tax-alert-not-active-message-w-9=\"Please resubmit a new {documentType} form.\"\n                  dashboard_tax-alert-not-active-message-w-8=\"Your tax form may have expired or has personal information that doesn’t match your profile. Please submit a new {documentType} form.\"\n                  dashboard_invalid-form=\"Make sure your information is correct and submit new form.\"\n                  dashboard_banking-information-section-header=\"Payout Information\"\n                  dashboard_tax-document-section-header=\"Tax documents\"\n                  dashboard_tax-document-section-sub-header=\"{documentType} tax form\"\n                  dashboard_no-form-needed-subtext=\"Tax documents are only required if you are based in the US or joining the referral program of a US based brand.\"\n                  dashboard_indirect-tax-info-section-header=\"Indirect tax\"\n                  dashboard_indirect-tax-info-spain=\"Registered in {country}, {subRegion}\"\n                  dashboard_indirect-tax-info-other-country=\"Registered in {country}\"\n                  dashboard_indirect-tax-info-canada=\"Registered in {province}, {country}\"\n                  dashboard_indirect-tax-tooltip-support=\"To make changes to your indirect tax information, please contact Support.\"\n                  dashboard_indirect-tax-details=\"{indirectTaxType} number: {indirectTaxNumber}\"\n                  dashboard_new-form-button=\"Submit new tax form\"\n                  dashboard_edit-payment-information-button=\"Edit payout information\"\n                  dashboard_not-registered-for-tax=\"Not registered for indirect tax. If you’ve previously registered with your tax authority, contact Support to add your information to stay tax compliant.\"\n                  dashboard_qst-number=\"QST number: {qstNumber}\"\n                  dashboard_sub-region-tax-number=\"Income tax number: {subRegionTaxNumber}\"\n                  dashboard_status-badge-text=\"{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} }\"\n                  dashboard_threshold-payout-text=\"Next payout occurs when balance is {thresholdBalance}\"\n                  dashboard_account-text=\"Account\"\n                  dashboard_invoice-column-title=\"Invoice\"\n                  dashboard_date-column-title=\"Date\"\n                  dashboard_earnings-column-title=\"Earnings\"\n                  dashboard_indirect-tax-column-title=\"Indirect tax\"\n                  dashboard_payout-from-impact=\"Your balance may take up to 24 hours to update. Payouts will be sent from our referral program provider, impact.com.\"\n                  dashboard_earnings-after-tax-column-title=\"Earnings after tax\"\n                  dashboard_error-title-text=\"Your payout is on hold \"\n                  dashboard_error-description-text=\"If you’ve recently added your payout information, please wait while we verify your information. If it’s still on hold after a few days, please contact Support or check your inbox for an email from our referral program provider, impact.com.\"\n                  dashboard_payout-missing-information-text=\"Missing banking information, go to Impact.com to resolve.\"\n                  dashboard_invoice-description=\"View and download your invoices to report your earnings and stay tax compliant.\"\n                  dashboard_invoice-prev-label=\"Prev\"\n                  dashboard_invoice-more-label=\"Next\"\n                  dashboard_invoice-header=\"Invoices\"\n                  dashboard_invoice-empty-state-header=\"View your invoice details\"\n                  dashboard_invoice-empty-state-text=\"Refer a friend to view the status of your invoices and rewards earned\"\n                  dashboard_replace-tax-form-modal-header=\"Replace existing tax form\"\n                  dashboard_replace-tax-form-modal-body-text=\"Submitting a new tax form will remove your existing form. Make sure to sign and complete your new tax form to prevent any issues with your next payout.\"\n                  form-step=\"Step {step} of {count}\"\n                  general-error-title=\"There was a problem submitting your information\"\n                  general-error-description=\"Please review your information and try again. If this problem continues, contact Support.\"\n                  field-required-error=\"{fieldName} is required\"\n                  invalid-character-error=\"{fieldName} includes characters that aren't supported.\"\n                  field-invalid-error=\"{fieldName} is invalid\"\n                  continue-button=\"Continue\"\n                  back-button=\"Back\"\n                  cancel-button=\"Cancel\"\n                  is-partner-alert-header=\"An account with this email already exists with our referral program provider, impact.com\"\n                  is-partner-alert-description=\"If you don’t recognize this referral program provider or believe this is a mistake, please contact Support or sign up for this referral program with a different email.\"\n                  search-for-country-text=\"Search for country..\"\n                  loading-error-alert-header=\"There was a problem loading your form\"\n                  loading-error-alert-description=\"Please refresh the page and try again. If this problem continues, contact Support.\"\n                  tax-and-payouts-description=\"Submit your tax documents and add your banking information to receive your rewards.\"\n                ></sqm-tax-and-cash>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"footer\"\n    support-email=\"support@example.com\"\n    terms-link=\"https://example.com\"\n    faq-link=\"https://example.com\"\n    terms-text=\"Terms And Conditions\"\n    faq-text=\"FAQ\"\n    show-powered-by=\"true\"\n  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
 
 const taxPayoutReminderEmailTemplate = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional //EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n\n<html\n  xmlns=\"http://www.w3.org/1999/xhtml\"\n  xmlns:o=\"urn:schemas-microsoft-com:office:office\"\n  xmlns:v=\"urn:schemas-microsoft-com:vml\"\n>\n  <head>\n    <!--[if gte mso 9\n      ]><xml\n        ><o:OfficeDocumentSettings\n          ><o:AllowPNG /><o:PixelsPerInch\n            >96</o:PixelsPerInch\n          ></o:OfficeDocumentSettings\n        ></xml\n      ><!\n    [endif]-->\n    <meta content=\"text/html; charset=utf-8\" http-equiv=\"Content-Type\" />\n    <meta content=\"width=device-width\" name=\"viewport\" />\n    <!--[if !mso]><!-->\n    <meta content=\"IE=edge\" http-equiv=\"X-UA-Compatible\" />\n    <!--<![endif]-->\n    <title></title>\n    <!--[if !mso]><!-->\n    <!--<![endif]-->\n    <style type=\"text/css\">\n      body {\n        margin: 0;\n        padding: 0;\n      }\n\n      table,\n      td,\n      tr {\n        vertical-align: top;\n        border-collapse: collapse;\n      }\n\n      * {\n        line-height: inherit;\n      }\n\n      a[x-apple-data-detectors=\"true\"] {\n        color: inherit !important;\n        text-decoration: none !important;\n      }\n    </style>\n    <style id=\"media-query\" type=\"text/css\">\n      @media (max-width: 520px) {\n        .block-grid,\n        .col {\n          min-width: 320px !important;\n          max-width: 100% !important;\n          display: block !important;\n        }\n\n        .block-grid {\n          width: 100% !important;\n        }\n\n        .col {\n          width: 100% !important;\n        }\n\n        .col_cont {\n          margin: 0 auto;\n        }\n\n        img.fullwidth,\n        img.fullwidthOnMobile {\n          max-width: 100% !important;\n        }\n\n        .no-stack .col {\n          min-width: 0 !important;\n          display: table-cell !important;\n        }\n\n        .no-stack.two-up .col {\n          width: 50% !important;\n        }\n\n        .no-stack .col.num2 {\n          width: 16.6% !important;\n        }\n\n        .no-stack .col.num3 {\n          width: 25% !important;\n        }\n\n        .no-stack .col.num4 {\n          width: 33% !important;\n        }\n\n        .no-stack .col.num5 {\n          width: 41.6% !important;\n        }\n\n        .no-stack .col.num6 {\n          width: 50% !important;\n        }\n\n        .no-stack .col.num7 {\n          width: 58.3% !important;\n        }\n\n        .no-stack .col.num8 {\n          width: 66.6% !important;\n        }\n\n        .no-stack .col.num9 {\n          width: 75% !important;\n        }\n\n        .no-stack .col.num10 {\n          width: 83.3% !important;\n        }\n\n        .video-block {\n          max-width: none !important;\n        }\n\n        .mobile_hide {\n          min-height: 0px;\n          max-height: 0px;\n          max-width: 0px;\n          display: none;\n          overflow: hidden;\n          font-size: 0px;\n        }\n\n        .desktop_hide {\n          display: block !important;\n          max-height: none !important;\n        }\n      }\n    </style>\n    <style id=\"icon-media-query\" type=\"text/css\">\n      @media (max-width: 520px) {\n        .icons-inner {\n          text-align: center;\n        }\n\n        .icons-inner td {\n          margin: 0 auto;\n        }\n      }\n    </style>\n  </head>\n  <body\n    class=\"clean-body\"\n    style=\"\n      margin: 0;\n      padding: 0;\n      -webkit-text-size-adjust: 100%;\n      background-color: #ffffff;\n    \"\n  >\n    <!--[if IE]><div class=\"ie-browser\"><![endif]-->\n    <table\n      bgcolor=\"#FFFFFF\"\n      cellpadding=\"0\"\n      cellspacing=\"0\"\n      class=\"nl-container\"\n      role=\"presentation\"\n      style=\"\n        table-layout: fixed;\n        vertical-align: top;\n        min-width: 320px;\n        border-spacing: 0;\n        border-collapse: collapse;\n        mso-table-lspace: 0pt;\n        mso-table-rspace: 0pt;\n        background-color: #ffffff;\n        width: 100%;\n      \"\n      valign=\"top\"\n      width=\"100%\"\n    >\n      <tbody>\n        <tr style=\"vertical-align: top\" valign=\"top\">\n          <td style=\"word-break: break-word; vertical-align: top\" valign=\"top\">\n            <!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td align=\"center\" style=\"background-color:#FFFFFF\"><![endif]-->\n            <div style=\"background-color: transparent\">\n              <div\n                class=\"block-grid\"\n                style=\"\n                  min-width: 320px;\n                  max-width: 500px;\n                  overflow-wrap: break-word;\n                  word-wrap: break-word;\n                  word-break: break-word;\n                  margin: 0 auto;\n                  background-color: transparent;\n                \"\n              >\n                <div\n                  style=\"\n                    border-collapse: collapse;\n                    display: table;\n                    width: 100%;\n                    background-color: transparent;\n                  \"\n                >\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]-->\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]-->\n                  <div\n                    class=\"col num12\"\n                    style=\"\n                      min-width: 320px;\n                      max-width: 500px;\n                      display: table-cell;\n                      vertical-align: top;\n                      width: 500px;\n                    \"\n                  >\n                    <div class=\"col_cont\" style=\"width: 100% !important\">\n                      <!--[if (!mso)&(!IE)]><!-->\n                      <div\n                        style=\"\n                          border-top: 0px solid transparent;\n                          border-left: 0px solid transparent;\n                          border-bottom: 0px solid transparent;\n                          border-right: 0px solid transparent;\n                          padding-top: 5px;\n                          padding-bottom: 5px;\n                          padding-right: 0px;\n                          padding-left: 0px;\n                        \"\n                      >\n                        <!--<![endif]-->\n                        <table\n                          cellpadding=\"0\"\n                          cellspacing=\"0\"\n                          role=\"presentation\"\n                          style=\"\n                            table-layout: fixed;\n                            vertical-align: top;\n                            border-spacing: 0;\n                            border-collapse: collapse;\n                            mso-table-lspace: 0pt;\n                            mso-table-rspace: 0pt;\n                          \"\n                          valign=\"top\"\n                          width=\"100%\"\n                        >\n                          <tr style=\"vertical-align: top\" valign=\"top\">\n                            <td\n                              align=\"center\"\n                              style=\"\n                                word-break: break-word;\n                                vertical-align: top;\n                                padding-bottom: 20px;\n                                padding-left: 10px;\n                                padding-right: 10px;\n                                padding-top: 10px;\n                                text-align: center;\n                                width: 100%;\n                              \"\n                              valign=\"top\"\n                              width=\"100%\"\n                            >\n                              <h1\n                                style=\"\n                                  color: #444445;\n                                  direction: ltr;\n                                  font-family: 'Helvetica Neue', Helvetica,\n                                    Arial, sans-serif;\n                                  font-size: 20px;\n                                  font-weight: normal;\n                                  letter-spacing: normal;\n                                  line-height: 120%;\n                                  text-align: left;\n                                  margin-top: 0;\n                                  margin-bottom: 0;\n                                \"\n                              >\n                                <strong>Submit your tax and payout info to receive your rewards</strong>\n                              </h1>\n                            </td>\n                          </tr>\n                        </table>\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]-->\n                        <div\n                          style=\"\n                            color: #444445;\n                            font-family: Arial, Helvetica Neue, Helvetica,\n                              sans-serif;\n                            line-height: 1.8;\n                            padding-top: 10px;\n                            padding-right: 10px;\n                            padding-bottom: 10px;\n                            padding-left: 10px;\n                          \"\n                        >\n                          <div\n                            class=\"txtTinyMce-wrapper\"\n                            style=\"\n                              font-size: 14px;\n                              line-height: 1.8;\n                              color: #444445;\n                              font-family: Arial, Helvetica Neue, Helvetica,\n                                sans-serif;\n                              mso-line-height-alt: 25px;\n                            \"\n                          >\n                            <p\n                              style=\"\n                                margin: 0;\n                                font-size: 14px;\n                                line-height: 1.8;\n                                word-break: break-word;\n                                mso-line-height-alt: 25px;\n                                margin-top: 0;\n                                margin-bottom: 0;\n                              \"\n                            >\n                              <span style=\"font-size: 14px\"\n                                >Congratulations! You earned a cash reward in our {{programName}}. To\n                                receive your reward payment, log in to your account and submit your\n                                tax and payout information.</span\n                              >\n                            </p>\n                          </div>\n                        </div>\n                        <!--[if mso]></td></tr></table><![endif]-->\n                        <div\n                          align=\"center\"\n                          class=\"button-container\"\n                          style=\"\n                            padding-top: 10px;\n                            padding-right: 10px;\n                            padding-bottom: 10px;\n                            padding-left: 10px;\n                          \"\n                        >\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\"><!\n                          [endif]--><a\n                            href={{loginLink}}\n\t\t\t\t\t\t\ttarget=\"_blank\"\n                            style=\"\n                              -webkit-text-size-adjust: none;\n                              text-decoration: none;\n                              display: block;\n                              color: #ffffff;\n                              background-color: #2270ee;\n                              border-radius: 5px;\n                              -webkit-border-radius: 5px;\n                              -moz-border-radius: 5px;\n                              width: 100%;\n                              width: calc(100% - 2px);\n                              border-top: var(--sqm-border-thickness, 1px) solid #2270ee;\n                              border-right: var(--sqm-border-thickness, 1px) solid #2270ee;\n                              border-bottom: var(--sqm-border-thickness, 1px) solid #2270ee;\n                              border-left: var(--sqm-border-thickness, 1px) solid #2270ee;\n                              padding-top: 5px;\n                              padding-bottom: 5px;\n                              font-family: 'Helvetica Neue', Helvetica, Arial,\n                                sans-serif;\n                              text-align: center;\n                              mso-border-alt: none;\n                              word-break: keep-all;\n                            \"\n                            target=\"_blank\"\n                            ><span\n                              style=\"\n                                padding-left: 20px;\n                                padding-right: 20px;\n                                font-size: 14px;\n                                display: inline-block;\n                                letter-spacing: undefined;\n                              \"\n                              ><span\n                                style=\"\n                                  font-size: 16px;\n                                  line-height: 2;\n                                  word-break: break-word;\n                                  mso-line-height-alt: 32px;\n                                \"\n                                ><span\n                                  style=\"font-size: 14px; line-height: 28px\"\n                                  >Log In</span\n                                ></span\n                              ></span\n                            ></a\n                          >\n                          <!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]-->\n                        </div>\n                      <!--<![endif]-->\n                    </div>\n                  </div>\n                  <!--[if (mso)|(IE)]></td></tr></table><![endif]-->\n                  <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->\n                </div>\n              </div>\n            </div>\n            <!--[if (mso)|(IE)]></td></tr></table><![endif]-->\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <!--[if (IE)]></div><![endif]-->\n  </body>\n</html>";
 
@@ -10702,6 +10702,7 @@ const props$1 = {
       iframeSrc: "https://example.com",
       iframeHeight: "100%",
       iframeWidth: "100%",
+      codeParam: "rsCode",
     },
   },
 };
@@ -14244,21 +14245,145 @@ const CustomStyles$1 = () => {
   return h(CopyTextView, Object.assign({}, props));
 };
 const CustomStylesWithDemoHooks = () => {
-  const props = {
-    copyString: "https://noah.example.com",
-    open: false,
-    tooltiptext: "Copied!",
-    backgroundColor: "#1ed760",
-    borderRadius: "30px",
-    textColor: "red",
-    buttonType: "primary",
-    borderColor: "#121212",
-  };
-  return (h("sqm-share-link", { demoData: { ...props }, backgroundColor: "#1ed760" }));
+  return (h("sqm-share-link", { demoData: {
+      copyTextViewProps: {
+        copyString: "https://noah.example.com",
+        open: false,
+        tooltiptext: "Copied!",
+        backgroundColor: "#1ed760",
+        borderRadius: "30px",
+        textColor: "red",
+        buttonType: "primary",
+        borderColor: "#121212",
+      },
+    }, backgroundColor: "#1ed760" }));
 };
 const FullStack = () => {
   return h("sqm-share-link", null);
 };
+// Customize URL stories
+const noopFn = () => { };
+const defaultCustomizeProps = {
+  copyTextViewProps: {
+    copyString: "https://ssqt.co/abc123",
+    open: false,
+    tooltiptext: "Copied!",
+  },
+  allowCustomization: true,
+  customizeLinkLabel: "Customize Link",
+  saveLabelText: "Save",
+  savingLabelText: "Saving...",
+  cancelLabelText: "Cancel",
+  editLabelText: "Edit your link",
+  charactersRemainingText: "{count} characters remaining",
+  validatingLabelText: "Validating...",
+  isEditing: false,
+  editValue: "",
+  domainPrefix: "https://ssqt.co/",
+  editsRemaining: 3,
+  maxEdits: 5,
+  limitReached: false,
+  validationError: null,
+  isValidating: false,
+  isSaving: false,
+  characterLimit: 15,
+  minCharacters: 3,
+  charactersRemaining: 15,
+  editLimitText: "You can edit your link up to 5 times.",
+  editLimitReachedText: "5 edit limit reached. To make more changes, please contact {supportLink}.",
+  supportLinkText: "Support",
+  customizeDisabled: false,
+  customizeDisabledTooltip: "Link customization is not available.",
+  minCharactersText: "Minimum 3 characters",
+  onCustomizeClick: noopFn,
+  onEditValueChange: noopFn,
+  onSave: noopFn,
+  onCancel: noopFn,
+};
+const CustomizeUrlDefault = () => {
+  return h(ShareLinkView, Object.assign({}, defaultCustomizeProps));
+};
+const CustomizeUrlEditing = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+  })));
+};
+const CustomizeUrlCustomized = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    copyTextViewProps: {
+      ...defaultCustomizeProps.copyTextViewProps,
+      copyString: "https://ssqt.co/bobtesterson",
+    },
+  })));
+};
+const CustomizeUrlLimitReached = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    copyTextViewProps: {
+      ...defaultCustomizeProps.copyTextViewProps,
+      copyString: "https://ssqt.co/bobtesterson",
+    },
+    editsRemaining: 0,
+    limitReached: true,
+  })));
+};
+const CustomizeUrlDisabled = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    customizeDisabled: true,
+  })));
+};
+const CustomizeUrlValidationError = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+    validationError: {
+      code: "EXISTING_CODE_CONFLICT",
+      title: "This link is already taken",
+      description: "Try adding numbers, a dash or underscore to create a unique link.",
+    },
+  })));
+};
+const CustomizeUrlInvalidCharacters = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+    validationError: {
+      code: "INVALID_CHARACTER",
+      title: "Please use only letters, numbers, dashes and underscores",
+      description: "Special characters can break the link when sharing.",
+    },
+  })));
+};
+const CustomizeUrlProfanity = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+    validationError: {
+      code: "BLOCKED_WORD",
+      title: "Please try a different link",
+      description: "This link contains a restricted word.",
+    },
+  })));
+};
+const CustomizeUrlSaving = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "bobtesterson",
+    isSaving: true,
+  })));
+};
 
 const ShareLink = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -14273,7 +14398,16 @@ const ShareLink = /*#__PURE__*/Object.freeze({
   CopyButtonBelow: CopyButtonBelow$3,
   CustomStyles: CustomStyles$1,
   CustomStylesWithDemoHooks: CustomStylesWithDemoHooks,
-  FullStack: FullStack
+  FullStack: FullStack,
+  CustomizeUrlDefault: CustomizeUrlDefault,
+  CustomizeUrlEditing: CustomizeUrlEditing,
+  CustomizeUrlCustomized: CustomizeUrlCustomized,
+  CustomizeUrlLimitReached: CustomizeUrlLimitReached,
+  CustomizeUrlDisabled: CustomizeUrlDisabled,
+  CustomizeUrlValidationError: CustomizeUrlValidationError,
+  CustomizeUrlInvalidCharacters: CustomizeUrlInvalidCharacters,
+  CustomizeUrlProfanity: CustomizeUrlProfanity,
+  CustomizeUrlSaving: CustomizeUrlSaving
 });
 
 const UseShareLink_stories = {
@@ -14311,11 +14445,11 @@ const BareBonesView$1 = createHookStory(() => {
   return (h("div", null,
     "Sharelink:",
     " ",
-    h("code", { style: { borderStyle: "solid", borderWidth: "1px", padding: "2px" } }, res.copyString)));
+    h("code", { style: { borderStyle: "solid", borderWidth: "1px", padding: "2px" } }, res.copyTextViewProps.copyString)));
 });
 const RegularView$2 = createHookStory(() => {
   setupGraphQL$c();
-  return (h(CopyTextView, Object.assign({}, useShareLink({
+  return (h(ShareLinkView, Object.assign({}, useShareLink({
     programId: "klip-referral-program",
     tooltiptext: "Copied to clipboard",
     tooltiplifespan: 1000,
@@ -14323,19 +14457,29 @@ const RegularView$2 = createHookStory(() => {
 });
 const FastTooltip = createHookStory(() => {
   setupGraphQL$c();
-  return (h(CopyTextView, Object.assign({}, useShareLink({
+  return (h(ShareLinkView, Object.assign({}, useShareLink({
     programId: "klip-referral-program",
-    tooltiptext: "⠀⠀⠀⠀⠀⠀⠀⠀⠀HELLO THERE!!!\n⠀⠀⠀⡯⡯⡾⠝⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢊⠘⡮⣣⠪⠢⡑⡌\n⠀⠀⠀⠟⠝⠈⠀⠀⠀⠡⠀⠠⢈⠠⢐⢠⢂⢔⣐⢄⡂⢔⠀⡁⢉⠸⢨⢑⠕⡌\n⠀⠀⡀⠁⠀⠀⠀⡀⢂⠡⠈⡔⣕⢮⣳⢯⣿⣻⣟⣯⣯⢷⣫⣆⡂⠀⠀⢐⠑⡌\n⢀⠠⠐⠈⠀⢀⢂⠢⡂⠕⡁⣝⢮⣳⢽⡽⣾⣻⣿⣯⡯⣟⣞⢾⢜⢆⠀⡀⠀⠪\n⣬⠂⠀⠀⢀⢂⢪⠨⢂⠥⣺⡪⣗⢗⣽⢽⡯⣿⣽⣷⢿⡽⡾⡽⣝⢎⠀⠀⠀⢡\n⣿⠀⠀⠀⢂⠢⢂⢥⢱⡹⣪⢞⡵⣻⡪⡯⡯⣟⡾⣿⣻⡽⣯⡻⣪⠧⠑⠀⠁⢐\n⣿⠀⠀⠀⠢⢑⠠⠑⠕⡝⡎⡗⡝⡎⣞⢽⡹⣕⢯⢻⠹⡹⢚⠝⡷⡽⡨⠀⠀⢔\n⣿⡯⠀⢈⠈⢄⠂⠂⠐⠀⠌⠠⢑⠱⡱⡱⡑⢔⠁⠀⡀⠐⠐⠐⡡⡹⣪⠀⠀⢘\n⣿⣽⠀⡀⡊⠀⠐⠨⠈⡁⠂⢈⠠⡱⡽⣷⡑⠁⠠⠑⠀⢉⢇⣤⢘⣪⢽⠀⢌⢎\n⣿⢾⠀⢌⠌⠀⡁⠢⠂⠐⡀⠀⢀⢳⢽⣽⡺⣨⢄⣑⢉⢃⢭⡲⣕⡭⣹⠠⢐⢗\n⣿⡗⠀⠢⠡⡱⡸⣔⢵⢱⢸⠈⠀⡪⣳⣳⢹⢜⡵⣱⢱⡱⣳⡹⣵⣻⢔⢅⢬⡷\n⣷⡇⡂⠡⡑⢕⢕⠕⡑⠡⢂⢊⢐⢕⡝⡮⡧⡳⣝⢴⡐⣁⠃⡫⡒⣕⢏⡮⣷⡟\n⣷⣻⣅⠑⢌⠢⠁⢐⠠⠑⡐⠐⠌⡪⠮⡫⠪⡪⡪⣺⢸⠰⠡⠠⠐⢱⠨⡪⡪⡰\n⣯⢷⣟⣇⡂⡂⡌⡀⠀⠁⡂⠅⠂⠀⡑⡄⢇⠇⢝⡨⡠⡁⢐⠠⢀⢪⡐⡜⡪⡊\n⣿⢽⡾⢹⡄⠕⡅⢇⠂⠑⣴⡬⣬⣬⣆⢮⣦⣷⣵⣷⡗⢃⢮⠱⡸⢰⢱⢸⢨⢌\n⣯⢯⣟⠸⣳⡅⠜⠔⡌⡐⠈⠻⠟⣿⢿⣿⣿⠿⡻⣃⠢⣱⡳⡱⡩⢢⠣⡃⠢⠁\n⡯⣟⣞⡇⡿⣽⡪⡘⡰⠨⢐⢀⠢⢢⢄⢤⣰⠼⡾⢕⢕⡵⣝⠎⢌⢪⠪⡘⡌⠀\n⡯⣳⠯⠚⢊⠡⡂⢂⠨⠊⠔⡑⠬⡸⣘⢬⢪⣪⡺⡼⣕⢯⢞⢕⢝⠎⢻⢼⣀⠀\n⠁⡂⠔⡁⡢⠣⢀⠢⠀⠅⠱⡐⡱⡘⡔⡕⡕⣲⡹⣎⡮⡏⡑⢜⢼⡱⢩⣗⣯⣟\n⢀⢂⢑⠀⡂⡃⠅⠊⢄⢑⠠⠑⢕⢕⢝⢮⢺⢕⢟⢮⢊⢢⢱⢄⠃⣇⣞⢞⣞⢾\n⢀⠢⡑⡀⢂⢊⠠⠁⡂⡐⠀⠅⡈⠪⠪⠪⠣⠫⠑⡁⢔⠕⣜⣜⢦⡰⡎⡯⡾⡽",
+    tooltiptext: "Copied to clipboard",
     tooltiplifespan: 500,
   }))));
 });
+const CustomizeUrlEnabled = createHookStory(() => {
+  setupGraphQL$c();
+  return (h(ShareLinkView, Object.assign({}, useShareLink({
+    programId: "klip-referral-program",
+    tooltiptext: "Copied to clipboard",
+    tooltiplifespan: 1000,
+    allowCustomization: true,
+  }))));
+});
 
 const UseShareLink = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': UseShareLink_stories,
   BareBonesView: BareBonesView$1,
   RegularView: RegularView$2,
-  FastTooltip: FastTooltip
+  FastTooltip: FastTooltip,
+  CustomizeUrlEnabled: CustomizeUrlEnabled
 });
 
 const scenario$C = "@author:Zach\n@owner:Zach\nFeature: Tabs\n\n  The Tabs takes in the Tab component as children and maps through to display their header and content.\n\n  Background: A user on the portal is viewing the widget\n    Given a user viewing the Tabs component\n\n  @motivating\n  Scenario: Content inside the active tab is shown\n    Given the header is set to <tabHeader>\n    And the content inside is <tabContent>\n    And the user has clicked <tabHeader>\n    Then the <tabContent> is shown\n    Examples:\n      | tabHeader | tabContent               |\n      | Settings  | This is the settings tab |\n      | General   | This is the general tab  |\n      | History   | This is the history tab  |\n\n  @motivating\n  @ui\n  Scenario: The placement of the tabs is configurable\n    Given The placement prop has been passed a valid <placement>\n    Then tabs are placed on the <placementResult>\n    Examples:\n      | placement | placementResult                |\n      |           | top of the content             |\n      | left      | left hand side of the content  |\n      | right     | right hand side of the content |\n      | bottom    | bottom of the content          |\n\n\n  @minutia\n  @ui\n  Scenario Outline: Tabs are setup to use the brand color\n    Given the brand color is set to darkblue\n    Then the text inside the active tab is darkblue\n    And the underline of the active tab is darkblue\n\n  @ui\n  Scenario: Tabs are responsive\n    Given the user is on a mobile device\n    When there are more tabs than the horizontal space allows for\n    Then clickable arrows appear on the left and right of the tabs\n    And the tabs are scrollable\n\n  @landmine\n  Scenario: Program section cannot be used inside of tabs\n    Given a tabs component\n    And tab containing a program section with program-id \"test123\"\n    And the program section wraps a component using program context\n    When the tabs component is rendered\n    Then the \"sq:program-id\" event listener for the program section is removed\n    And the component does not use program-id \"test123\" to source its data\n    And falls back to the global program id";