@saasquatch/mint-components 1.14.3 → 1.14.4

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

@@ -2,72 +2,42 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-acf63b7d.js');
-const stencilHooks_module = require('./stencil-hooks.module-c3a0542e.js');
-require('./global-eec134b3.js');
-const index_module = require('./index.module-b650af64.js');
-require('./jss-preset-default.esm-b48f0c33.js');
-const JSS = require('./JSS-518e9b4d.js');
-const sqmAssetCardView = require('./sqm-asset-card-view-072f4417.js');
-require('./cjs-2bf512b9.js');
-require('./mixins-f67f16e9.js');
-const sqmCloseButtonView = require('./sqm-close-button-view-901a77e4.js');
-require('./utils-9bc62a9b.js');
-require('./index-9a829282.js');
-const emailRegistrationView = require('./email-registration-view-b42a5259.js');
-const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-9131cf2c.js');
-const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-a60b22ef.js');
-const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-62573715.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-fe30a5ce.js');
-require('./sqm-text-span-view-acbc9012.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-5b14fd85.js');
-const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-2e46dccb.js');
-const sqmPortalLoginView = require('./sqm-portal-login-view-bc49b6a9.js');
-const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-52044daf.js');
-const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-b77b5450.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-45486477.js');
-require('./utilities-d5be98d4.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-be122fc9.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7a73f624.js');
-require('./ErrorView-c2494478.js');
-const sqmQrCodeView = require('./sqm-qr-code-view-2ec642bf.js');
-require('./useReferralCodes-3c7036f3.js');
-const useShareButton = require('./useShareButton-aa544c7f.js');
-const ShadowViewAddon = require('./ShadowViewAddon-65409f44.js');
-const copyTextView = require('./copy-text-view-046825f3.js');
-const sqmBigStatView = require('./sqm-big-stat-view-97bcf92b.js');
-const sqmPortalFrameView = require('./sqm-portal-frame-view-d638a0e6.js');
-const sqmEditProfileView = require('./sqm-edit-profile-view-03c2fa43.js');
-const useShareLink = require('./useShareLink-fa085a25.js');
-require('./useChildElements-d89d4029.js');
-const useDemoBigStat = require('./useDemoBigStat-1c381402.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-c1f8b90a.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-9ae2aa22.js');
-const sqmStatContainerView = require('./sqm-stat-container-view-31fc9ab2.js');
-const sqmPortalChangePasswordView = require('./sqm-portal-change-password-view-8926cb47.js');
-const sqmPortalRegisterView = require('./sqm-portal-register-view-417f4216.js');
-const sqmCheckboxFieldView = require('./sqm-checkbox-field-view-9ddbf23b.js');
-const sqmPortalChangeMarketingView = require('./sqm-portal-change-marketing-view-62ab2fc3.js');
-const GenericTableView = require('./GenericTableView-fd353a5f.js');
-const luxon = require('./luxon-090ad81d.js');
-const sqmTaskCardView = require('./sqm-task-card-view-15dfbbcf.js');
-const sqmPortalFooterView = require('./sqm-portal-footer-view-87b1844b.js');
-const sqmHeroView = require('./sqm-hero-view-fa964d63.js');
-const sqmReferralIframeView = require('./sqm-referral-iframe-view-d0d08442.js');
-const sqmNameFieldsView = require('./sqm-name-fields-view-7053e5e0.js');
-const sqmDropdownFieldView = require('./sqm-dropdown-field-view-a2ae29c4.js');
-const sqmInputFieldView = require('./sqm-input-field-view-b51f4038.js');
-const RewardExchangeListData = require('./RewardExchangeListData-b84fc648.js');
-const sqmCardFeedView = require('./sqm-card-feed-view-803efd42.js');
-const sqmCouponCodeView = require('./sqm-coupon-code-view-4cd85c27.js');
-require('./subregions-d43680d2.js');
-require('./LoadingView-c8c0fb81.js');
-require('./utils-75ce2a09.js');
-const TaxForm_stories = require('./TaxForm.stories-fc262f3a.js');
-require('./countries-473a6e62.js');
-const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-42e9e375.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-f6b7d019.js');
-const AutoColor = require('./AutoColor-db33223f.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+require('./global-e31dc4f5.js');
+const index_module = require('./index.module-ee84433d.js');
+require('./cjs-1066ec21.js');
+require('./utils-6847bc06.js');
+const JSS = require('./JSS-8503a151.js');
+require('./useReferralCodes-82e8797b.js');
+require('./mixins-f7e0377a.js');
+const copyTextView = require('./copy-text-view-c85acaaa.js');
+const GenericTableView = require('./GenericTableView-a9f4ba75.js');
+require('./useChildElements-1b35d945.js');
+const luxon = require('./luxon-2926d85f.js');
+require('./sqm-text-span-view-0aa82125.js');
+const sqmAssetCardView = require('./sqm-asset-card-view-21ddf04f.js');
+const sqmCloseButtonView = require('./sqm-close-button-view-ea3fa23b.js');
+require('./index-8c6255f5.js');
+const emailRegistrationView = require('./email-registration-view-55b378dc.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-d39a55d8.js');
+const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-11d57c12.js');
+const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-17111896.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-6f35d2ee.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-7ebb426a.js');
+const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-78f19ef9.js');
+const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
+const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8a2c8763.js');
+const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-637a4bf4.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-33164798.js');
+require('./utilities-78f5e169.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-fe602822.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.js');
+require('./ErrorView-b2fcf954.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-15dfc0b6.js');
+const ShadowViewAddon = require('./ShadowViewAddon-787391f7.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-0f7fa309.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -721,7 +691,7 @@ var StyleSheet = /*#__PURE__*/function () {
       _this.tags.push(tag);
     };
 
-    this.isSpeedy = options.speedy === undefined ? "development" === 'production' : options.speedy;
+    this.isSpeedy = options.speedy === undefined ? "production" === 'production' : options.speedy;
     this.tags = [];
     this.ctr = 0;
     this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
@@ -748,18 +718,6 @@ var StyleSheet = /*#__PURE__*/function () {
 
     var tag = this.tags[this.tags.length - 1];
 
-    if ("development" !== 'production') {
-      var isImportRule = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;
-
-      if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {
-        // this would only cause problem in speedy mode
-        // but we don't want enabling speedy to affect the observable behavior
-        // so we report this error at all times
-        console.error("You're attempting to insert the following rule:\n" + rule + '\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.');
-      }
-      this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule;
-    }
-
     if (this.isSpeedy) {
       var sheet = sheetForTag(tag);
 
@@ -768,9 +726,6 @@ var StyleSheet = /*#__PURE__*/function () {
         // the big drawback is that the css won't be editable in devtools
         sheet.insertRule(rule, sheet.cssRules.length);
       } catch (e) {
-        if ("development" !== 'production' && !/:(-moz-placeholder|-ms-input-placeholder|-moz-read-write|-moz-read-only){/.test(rule)) {
-          console.error("There was a problem inserting the following rule: \"" + rule + "\"", e);
-        }
       }
     } else {
       tag.appendChild(document.createTextNode(rule));
@@ -786,31 +741,12 @@ var StyleSheet = /*#__PURE__*/function () {
     });
     this.tags = [];
     this.ctr = 0;
-
-    if ("development" !== 'production') {
-      this._alreadyInsertedOrderInsensitiveRule = false;
-    }
   };
 
   return StyleSheet;
 }();
 
-var e="-ms-";var r="-moz-";var a="-webkit-";var c="comm";var n="rule";var t="decl";var s="@page";var u="@media";var i="@import";var f="@charset";var o="@viewport";var l="@supports";var v="@document";var h="@namespace";var p="@keyframes";var b="@font-face";var w="@counter-style";var $="@font-feature-values";var k=Math.abs;var d=String.fromCharCode;function m(e,r){return (((r<<2^z(e,0))<<2^z(e,1))<<2^z(e,2))<<2^z(e,3)}function g(e){return e.trim()}function x(e,r){return (e=r.exec(e))?e[0]:e}function y(e,r,a){return e.replace(r,a)}function j(e,r){return e.indexOf(r)}function z(e,r){return e.charCodeAt(r)|0}function C(e,r,a){return e.slice(r,a)}function A(e){return e.length}function M(e){return e.length}function O(e,r){return r.push(e),e}function S(e,r){return e.map(r).join("")}var q=1;var B=1;var D=0;var E=0;var F=0;var G="";function H(e,r,a,c,n,t,s){return {value:e,root:r,parent:a,type:c,props:n,children:t,line:q,column:B,length:s,return:""}}function I(e,r,a){return H(e,r.root,r.parent,a,r.props,r.children,0)}function J(){return F}function K(){F=E>0?z(G,--E):0;if(B--,F===10)B=1,q--;return F}function L(){F=E<D?z(G,E++):0;if(B++,F===10)B=1,q++;return F}function N(){return z(G,E)}function P(){return E}function Q(e,r){return C(G,e,r)}function R(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function T(e){return q=B=1,D=A(G=e),E=0,[]}function U(e){return G="",e}function V(e){return g(Q(E-1,_(e===91?e+2:e===40?e+1:e)))}function W(e){return U(Y(T(e)))}function X(e){while(F=N())if(F<33)L();else break;return R(e)>2||R(F)>3?"":" "}function Y(e){while(L())switch(R(F)){case 0:O(re(E-1),e);break;case 2:O(V(F),e);break;default:O(d(F),e);}return e}function Z(e,r){while(--r&&L())if(F<48||F>102||F>57&&F<65||F>70&&F<97)break;return Q(e,P()+(r<6&&N()==32&&L()==32))}function _(e){while(L())switch(F){case e:return E;case 34:case 39:return _(e===34||e===39?e:F);case 40:if(e===41)_(e);break;case 92:L();break}return E}function ee(e,r){while(L())if(e+F===47+10)break;else if(e+F===42+42&&N()===47)break;return "/*"+Q(r,E-1)+"*"+d(e===47?e:L())}function re(e){while(!R(N()))L();return Q(e,E)}function ae(e){return U(ce("",null,null,null,[""],e=T(e),0,[0],e))}function ce(e,r,a,c,n,t,s,u,i){var f=0;var o=0;var l=s;var v=0;var h=0;var p=0;var b=1;var w=1;var $=1;var k=0;var m="";var g=n;var x=t;var j=c;var z=m;while(w)switch(p=k,k=L()){case 34:case 39:case 91:case 40:z+=V(k);break;case 9:case 10:case 13:case 32:z+=X(p);break;case 92:z+=Z(P()-1,7);continue;case 47:switch(N()){case 42:case 47:O(te(ee(L(),P()),r,a),i);break;default:z+="/";}break;case 123*b:u[f++]=A(z)*$;case 125*b:case 59:case 0:switch(k){case 0:case 125:w=0;case 59+o:if(h>0&&A(z)-l)O(h>32?se(z+";",c,a,l-1):se(y(z," ","")+";",c,a,l-2),i);break;case 59:z+=";";default:O(j=ne(z,r,a,f,o,n,u,m,g=[],x=[],l),t);if(k===123)if(o===0)ce(z,r,j,j,g,t,l,u,x);else switch(v){case 100:case 109:case 115:ce(e,j,j,c&&O(ne(e,j,j,0,0,n,u,m,n,g=[],l),x),n,x,l,u,c?g:x);break;default:ce(z,j,j,j,[""],x,l,u,x);}}f=o=h=0,b=$=1,m=z="",l=s;break;case 58:l=1+A(z),h=p;default:if(b<1)if(k==123)--b;else if(k==125&&b++==0&&K()==125)continue;switch(z+=d(k),k*b){case 38:$=o>0?1:(z+="\f",-1);break;case 44:u[f++]=(A(z)-1)*$,$=1;break;case 64:if(N()===45)z+=V(L());v=N(),o=A(m=z+=re(P())),k++;break;case 45:if(p===45&&A(z)==2)b=0;}}return t}function ne(e,r,a,c,t,s,u,i,f,o,l){var v=t-1;var h=t===0?s:[""];var p=M(h);for(var b=0,w=0,$=0;b<c;++b)for(var d=0,m=C(e,v+1,v=k(w=u[b])),x=e;d<p;++d)if(x=g(w>0?h[d]+" "+m:y(m,/&\f/g,h[d])))f[$++]=x;return H(e,r,a,t===0?n:i,f,o,l)}function te(e,r,a){return H(e,r,a,c,d(J()),C(e,2,-2),0)}function se(e,r,a,c){return H(e,r,a,t,C(e,0,c),C(e,c+1,-1),c)}function ue(c,n){switch(m(c,n)){case 5103:return a+"print-"+c+c;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 6391:case 5879:case 5623:case 6135:case 4599:case 4855:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:return a+c+c;case 5349:case 4246:case 4810:case 6968:case 2756:return a+c+r+c+e+c+c;case 6828:case 4268:return a+c+e+c+c;case 6165:return a+c+e+"flex-"+c+c;case 5187:return a+c+y(c,/(\w+).+(:[^]+)/,a+"box-$1$2"+e+"flex-$1$2")+c;case 5443:return a+c+e+"flex-item-"+y(c,/flex-|-self/,"")+c;case 4675:return a+c+e+"flex-line-pack"+y(c,/align-content|flex-|-self/,"")+c;case 5548:return a+c+e+y(c,"shrink","negative")+c;case 5292:return a+c+e+y(c,"basis","preferred-size")+c;case 6060:return a+"box-"+y(c,"-grow","")+a+c+e+y(c,"grow","positive")+c;case 4554:return a+y(c,/([^-])(transform)/g,"$1"+a+"$2")+c;case 6187:return y(y(y(c,/(zoom-|grab)/,a+"$1"),/(image-set)/,a+"$1"),c,"")+c;case 5495:case 3959:return y(c,/(image-set\([^]*)/,a+"$1"+"$`$1");case 4968:return y(y(c,/(.+:)(flex-)?(.*)/,a+"box-pack:$3"+e+"flex-pack:$3"),/s.+-b[^;]+/,"justify")+a+c+c;case 4095:case 3583:case 4068:case 2532:return y(c,/(.+)-inline(.+)/,a+"$1$2")+c;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(A(c)-1-n>6)switch(z(c,n+1)){case 109:if(z(c,n+4)!==45)break;case 102:return y(c,/(.+:)(.+)-([^]+)/,"$1"+a+"$2-$3"+"$1"+r+(z(c,n+3)==108?"$3":"$2-$3"))+c;case 115:return ~j(c,"stretch")?ue(y(c,"stretch","fill-available"),n)+c:c}break;case 4949:if(z(c,n+1)!==115)break;case 6444:switch(z(c,A(c)-3-(~j(c,"!important")&&10))){case 107:return y(c,":",":"+a)+c;case 101:return y(c,/(.+:)([^;!]+)(;|!.+)?/,"$1"+a+(z(c,14)===45?"inline-":"")+"box$3"+"$1"+a+"$2$3"+"$1"+e+"$2box$3")+c}break;case 5936:switch(z(c,n+11)){case 114:return a+c+e+y(c,/[svh]\w+-[tblr]{2}/,"tb")+c;case 108:return a+c+e+y(c,/[svh]\w+-[tblr]{2}/,"tb-rl")+c;case 45:return a+c+e+y(c,/[svh]\w+-[tblr]{2}/,"lr")+c}return a+c+e+c+c}return c}function ie(e,r){var a="";var c=M(e);for(var n=0;n<c;n++)a+=r(e[n],n,e,r)||"";return a}function fe(e,r,a,s){switch(e.type){case i:case t:return e.return=e.return||e.value;case c:return "";case n:e.value=e.props.join(",");}return A(a=ie(e.children,s))?e.return=e.value+"{"+a+"}":""}function oe(e){var r=M(e);return function(a,c,n,t){var s="";for(var u=0;u<r;u++)s+=e[u](a,c,n,t)||"";return s}}function le(e){return function(r){if(!r.root)if(r=r.return)e(r);}}function ve(c,s,u,i){if(!c.return)switch(c.type){case t:c.return=ue(c.value,c.length);break;case p:return ie([I(y(c.value,"@","@"+a),c,"")],i);case n:if(c.length)return S(c.props,(function(n){switch(x(n,/(::plac\w+|:read-\w+)/)){case":read-only":case":read-write":return ie([I(y(n,/:(read-\w+)/,":"+r+"$1"),c,"")],i);case"::placeholder":return ie([I(y(n,/:(plac\w+)/,":"+a+"input-$1"),c,""),I(y(n,/:(plac\w+)/,":"+r+"$1"),c,""),I(y(n,/:(plac\w+)/,e+"input-$1"),c,"")],i)}return ""}))}}function he(e){switch(e.type){case n:e.props=e.props.map((function(r){return S(W(r),(function(r,a,c){switch(z(r,0)){case 12:return C(r,1,A(r));case 0:case 40:case 43:case 62:case 126:return r;case 58:if(c[++a]==="global")c[a]="",c[++a]="\f"+C(c[a],a=1,-1);case 32:return a===1?"":r;default:switch(a){case 0:e=r;return M(c)>1?"":r;case a=M(c)-1:case 2:return a===2?r+e+e:r+e;default:return r}}}))}));}}
-
-var weakMemoize = function weakMemoize(func) {
-  // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
-  var cache = new WeakMap();
-  return function (arg) {
-    if (cache.has(arg)) {
-      // $FlowFixMe
-      return cache.get(arg);
-    }
-
-    var ret = func(arg);
-    cache.set(arg, ret);
-    return ret;
-  };
-};
+var e="-ms-";var r="-moz-";var a="-webkit-";var c="comm";var n="rule";var t="decl";var i="@import";var p="@keyframes";var k=Math.abs;var d=String.fromCharCode;function m(e,r){return (((r<<2^z(e,0))<<2^z(e,1))<<2^z(e,2))<<2^z(e,3)}function g(e){return e.trim()}function x(e,r){return (e=r.exec(e))?e[0]:e}function y(e,r,a){return e.replace(r,a)}function j(e,r){return e.indexOf(r)}function z(e,r){return e.charCodeAt(r)|0}function C(e,r,a){return e.slice(r,a)}function A(e){return e.length}function M(e){return e.length}function O(e,r){return r.push(e),e}function S(e,r){return e.map(r).join("")}var q=1;var B=1;var D=0;var E=0;var F=0;var G="";function H(e,r,a,c,n,t,s){return {value:e,root:r,parent:a,type:c,props:n,children:t,line:q,column:B,length:s,return:""}}function I(e,r,a){return H(e,r.root,r.parent,a,r.props,r.children,0)}function J(){return F}function K(){F=E>0?z(G,--E):0;if(B--,F===10)B=1,q--;return F}function L(){F=E<D?z(G,E++):0;if(B++,F===10)B=1,q++;return F}function N(){return z(G,E)}function P(){return E}function Q(e,r){return C(G,e,r)}function R(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function T(e){return q=B=1,D=A(G=e),E=0,[]}function U(e){return G="",e}function V(e){return g(Q(E-1,_(e===91?e+2:e===40?e+1:e)))}function X(e){while(F=N())if(F<33)L();else break;return R(e)>2||R(F)>3?"":" "}function Z(e,r){while(--r&&L())if(F<48||F>102||F>57&&F<65||F>70&&F<97)break;return Q(e,P()+(r<6&&N()==32&&L()==32))}function _(e){while(L())switch(F){case e:return E;case 34:case 39:return _(e===34||e===39?e:F);case 40:if(e===41)_(e);break;case 92:L();break}return E}function ee(e,r){while(L())if(e+F===47+10)break;else if(e+F===42+42&&N()===47)break;return "/*"+Q(r,E-1)+"*"+d(e===47?e:L())}function re(e){while(!R(N()))L();return Q(e,E)}function ae(e){return U(ce("",null,null,null,[""],e=T(e),0,[0],e))}function ce(e,r,a,c,n,t,s,u,i){var f=0;var o=0;var l=s;var v=0;var h=0;var p=0;var b=1;var w=1;var $=1;var k=0;var m="";var g=n;var x=t;var j=c;var z=m;while(w)switch(p=k,k=L()){case 34:case 39:case 91:case 40:z+=V(k);break;case 9:case 10:case 13:case 32:z+=X(p);break;case 92:z+=Z(P()-1,7);continue;case 47:switch(N()){case 42:case 47:O(te(ee(L(),P()),r,a),i);break;default:z+="/";}break;case 123*b:u[f++]=A(z)*$;case 125*b:case 59:case 0:switch(k){case 0:case 125:w=0;case 59+o:if(h>0&&A(z)-l)O(h>32?se(z+";",c,a,l-1):se(y(z," ","")+";",c,a,l-2),i);break;case 59:z+=";";default:O(j=ne(z,r,a,f,o,n,u,m,g=[],x=[],l),t);if(k===123)if(o===0)ce(z,r,j,j,g,t,l,u,x);else switch(v){case 100:case 109:case 115:ce(e,j,j,c&&O(ne(e,j,j,0,0,n,u,m,n,g=[],l),x),n,x,l,u,c?g:x);break;default:ce(z,j,j,j,[""],x,l,u,x);}}f=o=h=0,b=$=1,m=z="",l=s;break;case 58:l=1+A(z),h=p;default:if(b<1)if(k==123)--b;else if(k==125&&b++==0&&K()==125)continue;switch(z+=d(k),k*b){case 38:$=o>0?1:(z+="\f",-1);break;case 44:u[f++]=(A(z)-1)*$,$=1;break;case 64:if(N()===45)z+=V(L());v=N(),o=A(m=z+=re(P())),k++;break;case 45:if(p===45&&A(z)==2)b=0;}}return t}function ne(e,r,a,c,t,s,u,i,f,o,l){var v=t-1;var h=t===0?s:[""];var p=M(h);for(var b=0,w=0,$=0;b<c;++b)for(var d=0,m=C(e,v+1,v=k(w=u[b])),x=e;d<p;++d)if(x=g(w>0?h[d]+" "+m:y(m,/&\f/g,h[d])))f[$++]=x;return H(e,r,a,t===0?n:i,f,o,l)}function te(e,r,a){return H(e,r,a,c,d(J()),C(e,2,-2),0)}function se(e,r,a,c){return H(e,r,a,t,C(e,0,c),C(e,c+1,-1),c)}function ue(c,n){switch(m(c,n)){case 5103:return a+"print-"+c+c;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 6391:case 5879:case 5623:case 6135:case 4599:case 4855:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:return a+c+c;case 5349:case 4246:case 4810:case 6968:case 2756:return a+c+r+c+e+c+c;case 6828:case 4268:return a+c+e+c+c;case 6165:return a+c+e+"flex-"+c+c;case 5187:return a+c+y(c,/(\w+).+(:[^]+)/,a+"box-$1$2"+e+"flex-$1$2")+c;case 5443:return a+c+e+"flex-item-"+y(c,/flex-|-self/,"")+c;case 4675:return a+c+e+"flex-line-pack"+y(c,/align-content|flex-|-self/,"")+c;case 5548:return a+c+e+y(c,"shrink","negative")+c;case 5292:return a+c+e+y(c,"basis","preferred-size")+c;case 6060:return a+"box-"+y(c,"-grow","")+a+c+e+y(c,"grow","positive")+c;case 4554:return a+y(c,/([^-])(transform)/g,"$1"+a+"$2")+c;case 6187:return y(y(y(c,/(zoom-|grab)/,a+"$1"),/(image-set)/,a+"$1"),c,"")+c;case 5495:case 3959:return y(c,/(image-set\([^]*)/,a+"$1"+"$`$1");case 4968:return y(y(c,/(.+:)(flex-)?(.*)/,a+"box-pack:$3"+e+"flex-pack:$3"),/s.+-b[^;]+/,"justify")+a+c+c;case 4095:case 3583:case 4068:case 2532:return y(c,/(.+)-inline(.+)/,a+"$1$2")+c;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(A(c)-1-n>6)switch(z(c,n+1)){case 109:if(z(c,n+4)!==45)break;case 102:return y(c,/(.+:)(.+)-([^]+)/,"$1"+a+"$2-$3"+"$1"+r+(z(c,n+3)==108?"$3":"$2-$3"))+c;case 115:return ~j(c,"stretch")?ue(y(c,"stretch","fill-available"),n)+c:c}break;case 4949:if(z(c,n+1)!==115)break;case 6444:switch(z(c,A(c)-3-(~j(c,"!important")&&10))){case 107:return y(c,":",":"+a)+c;case 101:return y(c,/(.+:)([^;!]+)(;|!.+)?/,"$1"+a+(z(c,14)===45?"inline-":"")+"box$3"+"$1"+a+"$2$3"+"$1"+e+"$2box$3")+c}break;case 5936:switch(z(c,n+11)){case 114:return a+c+e+y(c,/[svh]\w+-[tblr]{2}/,"tb")+c;case 108:return a+c+e+y(c,/[svh]\w+-[tblr]{2}/,"tb-rl")+c;case 45:return a+c+e+y(c,/[svh]\w+-[tblr]{2}/,"lr")+c}return a+c+e+c+c}return c}function ie(e,r){var a="";var c=M(e);for(var n=0;n<c;n++)a+=r(e[n],n,e,r)||"";return a}function fe(e,r,a,s){switch(e.type){case i:case t:return e.return=e.return||e.value;case c:return "";case n:e.value=e.props.join(",");}return A(a=ie(e.children,s))?e.return=e.value+"{"+a+"}":""}function oe(e){var r=M(e);return function(a,c,n,t){var s="";for(var u=0;u<r;u++)s+=e[u](a,c,n,t)||"";return s}}function le(e){return function(r){if(!r.root)if(r=r.return)e(r);}}function ve(c,s,u,i){if(!c.return)switch(c.type){case t:c.return=ue(c.value,c.length);break;case p:return ie([I(y(c.value,"@","@"+a),c,"")],i);case n:if(c.length)return S(c.props,(function(n){switch(x(n,/(::plac\w+|:read-\w+)/)){case":read-only":case":read-write":return ie([I(y(n,/:(read-\w+)/,":"+r+"$1"),c,"")],i);case"::placeholder":return ie([I(y(n,/:(plac\w+)/,":"+a+"input-$1"),c,""),I(y(n,/:(plac\w+)/,":"+r+"$1"),c,""),I(y(n,/:(plac\w+)/,e+"input-$1"),c,"")],i)}return ""}))}}
 
 function memoize(fn) {
   var cache = Object.create(null);
@@ -820,10 +756,6 @@ function memoize(fn) {
   };
 }
 
-var last = function last(arr) {
-  return arr.length ? arr[arr.length - 1] : null;
-};
-
 var toRules = function toRules(parsed, points) {
   // pretend we've started with a comma
   var index = -1;
@@ -925,79 +857,12 @@ var removeLabel = function removeLabel(element) {
     }
   }
 };
-var ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';
-
-var isIgnoringComment = function isIgnoringComment(element) {
-  return !!element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
-};
-
-var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) {
-  return function (element, index, children) {
-    if (element.type !== 'rule') return;
-    var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
-
-    if (unsafePseudoClasses && cache.compat !== true) {
-      var prevElement = index > 0 ? children[index - 1] : null;
-
-      if (prevElement && isIgnoringComment(last(prevElement.children))) {
-        return;
-      }
-
-      unsafePseudoClasses.forEach(function (unsafePseudoClass) {
-        console.error("The pseudo class \"" + unsafePseudoClass + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + unsafePseudoClass.split('-child')[0] + "-of-type\".");
-      });
-    }
-  };
-};
-
-var isImportRule = function isImportRule(element) {
-  return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64;
-};
-
-var isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) {
-  for (var i = index - 1; i >= 0; i--) {
-    if (!isImportRule(children[i])) {
-      return true;
-    }
-  }
-
-  return false;
-}; // use this to remove incorrect elements from further processing
-// so they don't get handed to the `sheet` (or anything else)
-// as that could potentially lead to additional logs which in turn could be overhelming to the user
-
-
-var nullifyElement = function nullifyElement(element) {
-  element.type = '';
-  element.value = '';
-  element["return"] = '';
-  element.children = '';
-  element.props = '';
-};
-
-var incorrectImportAlarm = function incorrectImportAlarm(element, index, children) {
-  if (!isImportRule(element)) {
-    return;
-  }
-
-  if (element.parent) {
-    console.error("`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles.");
-    nullifyElement(element);
-  } else if (isPrependedWithRegularRules(index, children)) {
-    console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.");
-    nullifyElement(element);
-  }
-};
 
 var defaultStylisPlugins = [ve];
 
 var createCache = function createCache(options) {
   var key = options.key;
 
-  if ("development" !== 'production' && !key) {
-    throw new Error("You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" + "If multiple caches share the same key they might \"fight\" for each other's style elements.");
-  }
-
   if ( key === 'css') {
     var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
     // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
@@ -1023,13 +888,6 @@ var createCache = function createCache(options) {
 
   var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
 
-  if ("development" !== 'production') {
-    // $FlowFixMe
-    if (/[^a-z-]/.test(key)) {
-      throw new Error("Emotion key must only contain lower case alphabetical characters and - but \"" + key + "\" was passed");
-    }
-  }
-
   var inserted = {}; // $FlowFixMe
 
   var container;
@@ -1054,28 +912,9 @@ var createCache = function createCache(options) {
 
   var omnipresentPlugins = [compat, removeLabel];
 
-  if ("development" !== 'production') {
-    omnipresentPlugins.push(createUnsafeSelectorsAlarm({
-      get compat() {
-        return cache.compat;
-      }
-
-    }), incorrectImportAlarm);
-  }
-
   {
     var currentSheet;
-    var finalizingPlugins = [fe, "development" !== 'production' ? function (element) {
-      if (!element.root) {
-        if (element["return"]) {
-          currentSheet.insert(element["return"]);
-        } else if (element.value && element.type !== c) {
-          // insert empty rule in non-production environments
-          // so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet
-          currentSheet.insert(element.value + "{}");
-        }
-      }
-    } : le(function (rule) {
+    var finalizingPlugins = [fe,  le(function (rule) {
       currentSheet.insert(rule);
     })];
     var serializer = oe(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
@@ -1087,14 +926,6 @@ var createCache = function createCache(options) {
     _insert = function insert(selector, serialized, sheet, shouldCache) {
       currentSheet = sheet;
 
-      if ("development" !== 'production' && serialized.map !== undefined) {
-        currentSheet = {
-          insert: function insert(rule) {
-            sheet.insert(rule + serialized.map);
-          }
-        };
-      }
-
       stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
 
       if (shouldCache) {
@@ -1224,8 +1055,6 @@ var unitlessKeys = {
   strokeWidth: 1
 };
 
-var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
-var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
 var hyphenateRegex = /[A-Z]|^ms/g;
 var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
 
@@ -1266,43 +1095,12 @@ var processStyleValue = function processStyleValue(key, value) {
   return value;
 };
 
-if ("development" !== 'production') {
-  var contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
-  var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];
-  var oldProcessStyleValue = processStyleValue;
-  var msPattern = /^-ms-/;
-  var hyphenPattern = /-(.)/g;
-  var hyphenatedCache = {};
-
-  processStyleValue = function processStyleValue(key, value) {
-    if (key === 'content') {
-      if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) {
-        throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value + "\"'`");
-      }
-    }
-
-    var processed = oldProcessStyleValue(key, value);
-
-    if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {
-      hyphenatedCache[key] = true;
-      console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) {
-        return _char.toUpperCase();
-      }) + "?");
-    }
-
-    return processed;
-  };
-}
-
 function handleInterpolation(mergedProps, registered, interpolation) {
   if (interpolation == null) {
     return '';
   }
 
   if (interpolation.__emotion_styles !== undefined) {
-    if ("development" !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
-      throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
-    }
 
     return interpolation;
   }
@@ -1342,10 +1140,6 @@ function handleInterpolation(mergedProps, registered, interpolation) {
 
           var styles = interpolation.styles + ";";
 
-          if ("development" !== 'production' && interpolation.map !== undefined) {
-            styles += interpolation.map;
-          }
-
           return styles;
         }
 
@@ -1359,28 +1153,10 @@ function handleInterpolation(mergedProps, registered, interpolation) {
           var result = interpolation(mergedProps);
           cursor = previousCursor;
           return handleInterpolation(mergedProps, registered, result);
-        } else if ("development" !== 'production') {
-          console.error('Functions that are interpolated in css calls will be stringified.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\n' + 'It can be called directly with props or interpolated in a styled call like this\n' + "let SomeComponent = styled('div')`${dynamicStyle}`");
         }
 
         break;
       }
-
-    case 'string':
-      if ("development" !== 'production') {
-        var matched = [];
-        var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {
-          var fakeVarName = "animation" + matched.length;
-          matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, '') + "`");
-          return "${" + fakeVarName + "}";
-        });
-
-        if (matched.length) {
-          console.error('`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\n' + 'Instead of doing this:\n\n' + [].concat(matched, ["`" + replaced + "`"]).join('\n') + '\n\nYou should wrap it with `css` like this:\n\n' + ("css`" + replaced + "`"));
-        }
-      }
-
-      break;
   } // finalize string values (regular strings and functions interpolated into css calls)
 
 
@@ -1410,7 +1186,7 @@ function createStringFromObject(mergedProps, registered, obj) {
           string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
         }
       } else {
-        if (_key === 'NO_COMPONENT_SELECTOR' && "development" !== 'production') {
+        if (_key === 'NO_COMPONENT_SELECTOR' && "production" !== 'production') {
           throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
         }
 
@@ -1433,9 +1209,6 @@ function createStringFromObject(mergedProps, registered, obj) {
 
             default:
               {
-                if ("development" !== 'production' && _key === 'undefined') {
-                  console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
-                }
 
                 string += _key + "{" + interpolated + "}";
               }
@@ -1449,11 +1222,6 @@ function createStringFromObject(mergedProps, registered, obj) {
 }
 
 var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
-var sourceMapPattern;
-
-if ("development" !== 'production') {
-  sourceMapPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
-} // this is the cursor for keyframes
 // keyframes are stored on the SerializedStyles object as a linked list
 
 
@@ -1472,9 +1240,6 @@ var serializeStyles = function serializeStyles(args, registered, mergedProps) {
     stringMode = false;
     styles += handleInterpolation(mergedProps, registered, strings);
   } else {
-    if ("development" !== 'production' && strings[0] === undefined) {
-      console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
-    }
 
     styles += strings[0];
   } // we start at 1 since we've already handled the first arg
@@ -1484,23 +1249,11 @@ var serializeStyles = function serializeStyles(args, registered, mergedProps) {
     styles += handleInterpolation(mergedProps, registered, args[i]);
 
     if (stringMode) {
-      if ("development" !== 'production' && strings[i] === undefined) {
-        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);
-      }
 
       styles += strings[i];
     }
   }
 
-  var sourceMap;
-
-  if ("development" !== 'production') {
-    styles = styles.replace(sourceMapPattern, function (match) {
-      sourceMap = match;
-      return '';
-    });
-  } // using a global regex with .exec is stateful so lastIndex has to be reset each time
-
 
   labelPattern.lastIndex = 0;
   var identifierName = '';
@@ -1513,19 +1266,6 @@ var serializeStyles = function serializeStyles(args, registered, mergedProps) {
 
   var name = murmur2(styles) + identifierName;
 
-  if ("development" !== 'production') {
-    // $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it)
-    return {
-      name: name,
-      styles: styles,
-      map: sourceMap,
-      next: cursor,
-      toString: function toString() {
-        return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-      }
-    };
-  }
-
   return {
     name: name,
     styles: styles,
@@ -1593,9 +1333,6 @@ var createEmotion = function createEmotion(options) {
   var cache = createCache(options); // $FlowFixMe
 
   cache.sheet.speedy = function (value) {
-    if ("development" !== 'production' && this.ctr !== 0) {
-      throw new Error('speedy must be changed before any rules are inserted');
-    }
 
     this.isSpeedy = value;
   };
@@ -1714,18 +1451,9 @@ var classnames = function classnames(args) {
 var _createEmotion = createEmotion({
   key: 'css'
 }),
-    flush = _createEmotion.flush,
-    hydrate = _createEmotion.hydrate,
-    cx = _createEmotion.cx,
-    merge$1 = _createEmotion.merge,
-    getRegisteredStyles$1 = _createEmotion.getRegisteredStyles,
-    injectGlobal = _createEmotion.injectGlobal,
-    keyframes = _createEmotion.keyframes,
-    css = _createEmotion.css,
-    sheet = _createEmotion.sheet,
-    cache = _createEmotion.cache;
-
-function i$1(){return (i$1=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(n[r]=o[r]);}return n}).apply(this,arguments)}function a$1(n,t){return t||(t=n.slice(0)),n.raw=t,n}var l$1,s$1,u$1,c$1=css(l$1||(l$1=a$1(['\n  width: 100vw;\n  height: 100vh;\n\n  .story-book-outer-div {\n    .story-div {\n      font-family: "Arial", sans-serif;\n      font-size: 12px;\n    }\n    padding-bottom: 500px;\n  }\n\n  .story-div {\n    position: fixed;\n    box-sizing: border-box;\n    top: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 999;\n    overflow-y: scroll;\n    background: white;\n    margin-bottom: 32px;\n  }\n\n  .header {\n    padding: 24px 0 16px 16px;\n    margin-bottom: 24px;\n    color: white;\n    background: #333;\n    cursor: pointer;\n\n    h2 {\n      letter-spacing: 3px;\n      font-weight: 400;\n    }\n  }\n\n  .parentStoryList {\n    list-style: none;\n    padding-left: 16px;\n\n    summary {\n      margin-bottom: 4px;\n    }\n  }\n  .parentStory {\n    cursor: pointer;\n  }\n  .parentStory.selected {\n    font-weight: bold;\n  }\n\n  .subStory {\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 1.5em;\n    margin-top: 4px;\n\n    a {\n      display: block;\n      padding: 4px 4px 4px 16px;\n    }\n  }\n  .subStory:hover {\n    background-color: #eee;\n  }\n  .subStory.selected {\n    background-color: lightgreen;\n  }\n\n  .component {\n    padding: 24px 16px;\n  }\n\n  h4.group-header {\n    margin: 8px 0;\n    text-transform: uppercase;\n    font-weight: 600;\n    font-size: 14px;\n    color: #575757;\n  }\n\n  .group-wrapper {\n    margin-bottom: 24px;\n  }\n\n  .dynamic-display-wrapper {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    bottom: 0;\n    left: 100%;\n    padding: 16px;\n    z-index: 1000;\n    background: white;\n    transform: translateX(-100%);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n    & > :not(:first-child) {\n      margin-top: 12px;\n    }\n\n    p {\n      font-size: 12px;\n      margin: 0;\n      padding: 0;\n    }\n\n    .button-wrapper {\n      display: flex;\n\n      & > :not(:first-child) {\n        margin-left: 12px;\n      }\n    }\n\n    & button {\n      border: 1px solid #eaeaea;\n      background: white;\n      border-radius: 4px;\n      color: #777;\n      padding: 4px 12px;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n\n      &.active {\n        background: #555;\n        border-color: #555;\n        color: white;\n      }\n    }\n  }\n'])));function d$1(n,t){var o,r=t.story.title.split("/"),e=r[1]?r[0]:"_";return i$1({},n,((o={})[e]=[].concat(n[e]||[],[{story:i$1({},t.story,{title:r[1]||r[0]}),subs:t.subs}]).sort(function(n,t){return n.story.title.localeCompare(t.story.title)}),o))}function p$1(n){return {story:n.default,subs:function(n,t){if(null==n)return {};var o,r,e={},i=Object.keys(n);for(r=0;r<i.length;r++)t.indexOf(o=i[r])>=0||(e[o]=n[o]);return e}(n,["default"])}}function f$1(n,t){var o,r;if(n){var e=decodeURIComponent(n).split("-"),i=e[1],a=e[2],l=null==t||null==(o=t[e[0]])?void 0:o.find(function(n){return n.story.title===i}),s=null==l||null==(r=l.subs)?void 0:r[a],u={key:n,story:s,parent:null==l?void 0:l.story,label:null==s?void 0:s.name};return u.key&&u.story&&u.parent&&u.label?u:void 0}}function y$1(l,y){var m=y.h,g=void 0===m?index.h:m,b=y.title,x=void 0===b?"Stencilbook":b,h=y.homepage,v=void 0===h?g("h3",null,"Select a story!"):h,w=y.addons,k=void 0===w?[]:w,S=stencilHooks_module.useMemo(function(){return l.map(p$1).reduce(d$1,{_:[]})},l),C=decodeURIComponent(window.location.hash).replace("#",""),z=stencilHooks_module.useState(f$1(C,S)),O=z[0],j=z[1],I=null==O?void 0:O.key,R=stencilHooks_module.useState(!0),U=R[0],_=R[1],B=stencilHooks_module.useState(!1),L=B[0],T=B[1],q=function(){return g("div",{class:"dynamic-display-wrapper"},g("button",{class:L?"active":"",onClick:function(){return T(function(n){return !n})}},"Toggle Dark Background"),g("button",{class:U?"active":"",onClick:function(){return _(function(n){return !n})}},"Toggle Sidebar"))},A=css(s$1||(s$1=a$1(["\n    max-width: ",";\n    margin-left: ",";\n  "])),"1124px",U?"250px":"0px"),D=css(u$1||(u$1=a$1(["\n    display: none;\n  "])));document.body.style.backgroundColor=L?"#232323":"#fafafa";var N=function(n){var t=n.selected,o=k.reduce(function(n,o){return function(){return g(o,{story:i$1({},t)},g(n,null))}},null==t?void 0:t.story);return g(o,null)},P=function(){return g("div",{class:"story-book-outer-div"},g("div",{class:"story-div "+(U?"":D)},g("div",{class:"header",onClick:function(){j(void 0);}},g("h2",null,x)),g("ul",{class:"parentStoryList"},Object.keys(S).sort().map(function(n){return g("div",{class:"group-wrapper"},"_"!==n&&g("h4",{class:"group-header"},n),S[n].map(function(t){return g("li",{class:"parentStory"},g("details",{style:{marginBottom:"10px"}},g("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map(function(o){var e=n+"-"+t.story.title+"-"+o,i=t.subs[o].storyName||lodash_startcase(o);return g("div",{class:"subStory "+(I===e?"selected":"")},g("a",{onClick:function(){return function(n){window.location.hash=encodeURIComponent(n),j(f$1(n,S));}(e)}},i))})))}))}))),g(q,null),g("div",{class:"component "+A},!I&&v,I&&g("div",null,g("h3",null,O.label),g(N,{selected:O}))))};return {class:c$1,children:g(P,null),View:P,selected:O}}
+    css = _createEmotion.css;
+
+function i$1(){return (i$1=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(n[r]=o[r]);}return n}).apply(this,arguments)}function a$1(n,t){return t||(t=n.slice(0)),n.raw=t,n}var l,s,u,c$1=css(l||(l=a$1(['\n  width: 100vw;\n  height: 100vh;\n\n  .story-book-outer-div {\n    .story-div {\n      font-family: "Arial", sans-serif;\n      font-size: 12px;\n    }\n    padding-bottom: 500px;\n  }\n\n  .story-div {\n    position: fixed;\n    box-sizing: border-box;\n    top: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 999;\n    overflow-y: scroll;\n    background: white;\n    margin-bottom: 32px;\n  }\n\n  .header {\n    padding: 24px 0 16px 16px;\n    margin-bottom: 24px;\n    color: white;\n    background: #333;\n    cursor: pointer;\n\n    h2 {\n      letter-spacing: 3px;\n      font-weight: 400;\n    }\n  }\n\n  .parentStoryList {\n    list-style: none;\n    padding-left: 16px;\n\n    summary {\n      margin-bottom: 4px;\n    }\n  }\n  .parentStory {\n    cursor: pointer;\n  }\n  .parentStory.selected {\n    font-weight: bold;\n  }\n\n  .subStory {\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 1.5em;\n    margin-top: 4px;\n\n    a {\n      display: block;\n      padding: 4px 4px 4px 16px;\n    }\n  }\n  .subStory:hover {\n    background-color: #eee;\n  }\n  .subStory.selected {\n    background-color: lightgreen;\n  }\n\n  .component {\n    padding: 24px 16px;\n  }\n\n  h4.group-header {\n    margin: 8px 0;\n    text-transform: uppercase;\n    font-weight: 600;\n    font-size: 14px;\n    color: #575757;\n  }\n\n  .group-wrapper {\n    margin-bottom: 24px;\n  }\n\n  .dynamic-display-wrapper {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    bottom: 0;\n    left: 100%;\n    padding: 16px;\n    z-index: 1000;\n    background: white;\n    transform: translateX(-100%);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n    & > :not(:first-child) {\n      margin-top: 12px;\n    }\n\n    p {\n      font-size: 12px;\n      margin: 0;\n      padding: 0;\n    }\n\n    .button-wrapper {\n      display: flex;\n\n      & > :not(:first-child) {\n        margin-left: 12px;\n      }\n    }\n\n    & button {\n      border: 1px solid #eaeaea;\n      background: white;\n      border-radius: 4px;\n      color: #777;\n      padding: 4px 12px;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n\n      &.active {\n        background: #555;\n        border-color: #555;\n        color: white;\n      }\n    }\n  }\n'])));function d$1(n,t){var o,r=t.story.title.split("/"),e=r[1]?r[0]:"_";return i$1({},n,((o={})[e]=[].concat(n[e]||[],[{story:i$1({},t.story,{title:r[1]||r[0]}),subs:t.subs}]).sort(function(n,t){return n.story.title.localeCompare(t.story.title)}),o))}function p$1(n){return {story:n.default,subs:function(n,t){if(null==n)return {};var o,r,e={},i=Object.keys(n);for(r=0;r<i.length;r++)t.indexOf(o=i[r])>=0||(e[o]=n[o]);return e}(n,["default"])}}function f(n,t){var o,r;if(n){var e=decodeURIComponent(n).split("-"),i=e[1],a=e[2],l=null==t||null==(o=t[e[0]])?void 0:o.find(function(n){return n.story.title===i}),s=null==l||null==(r=l.subs)?void 0:r[a],u={key:n,story:s,parent:null==l?void 0:l.story,label:null==s?void 0:s.name};return u.key&&u.story&&u.parent&&u.label?u:void 0}}function y$1(l,y){var m=y.h,g=void 0===m?index.h:m,b=y.title,x=void 0===b?"Stencilbook":b,h=y.homepage,v=void 0===h?g("h3",null,"Select a story!"):h,w=y.addons,k=void 0===w?[]:w,S=stencilHooks_module.useMemo(function(){return l.map(p$1).reduce(d$1,{_:[]})},l),C=decodeURIComponent(window.location.hash).replace("#",""),z=stencilHooks_module.useState(f(C,S)),O=z[0],j=z[1],I=null==O?void 0:O.key,R=stencilHooks_module.useState(!0),U=R[0],_=R[1],B=stencilHooks_module.useState(!1),L=B[0],T=B[1],q=function(){return g("div",{class:"dynamic-display-wrapper"},g("button",{class:L?"active":"",onClick:function(){return T(function(n){return !n})}},"Toggle Dark Background"),g("button",{class:U?"active":"",onClick:function(){return _(function(n){return !n})}},"Toggle Sidebar"))},A=css(s||(s=a$1(["\n    max-width: ",";\n    margin-left: ",";\n  "])),"1124px",U?"250px":"0px"),D=css(u||(u=a$1(["\n    display: none;\n  "])));document.body.style.backgroundColor=L?"#232323":"#fafafa";var N=function(n){var t=n.selected,o=k.reduce(function(n,o){return function(){return g(o,{story:i$1({},t)},g(n,null))}},null==t?void 0:t.story);return g(o,null)},P=function(){return g("div",{class:"story-book-outer-div"},g("div",{class:"story-div "+(U?"":D)},g("div",{class:"header",onClick:function(){j(void 0);}},g("h2",null,x)),g("ul",{class:"parentStoryList"},Object.keys(S).sort().map(function(n){return g("div",{class:"group-wrapper"},"_"!==n&&g("h4",{class:"group-header"},n),S[n].map(function(t){return g("li",{class:"parentStory"},g("details",{style:{marginBottom:"10px"}},g("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map(function(o){var e=n+"-"+t.story.title+"-"+o,i=t.subs[o].storyName||lodash_startcase(o);return g("div",{class:"subStory "+(I===e?"selected":"")},g("a",{onClick:function(){return function(n){window.location.hash=encodeURIComponent(n),j(f(n,S));}(e)}},i))})))}))}))),g(q,null),g("div",{class:"component "+A},!I&&v,I&&g("div",null,g("h3",null,O.label),g(N,{selected:O}))))};return {class:c$1,children:g(P,null),View:P,selected:O}}
 
 const scenario = "@author:noah\n@owner:noah\nFeature: Share Button\n\n  The share button redirects users to a platform where they can share their referral link\n\n  @motivating\n  @ui\n  Scenario Outline: Share button displays for various platforms\n    Given the share button's medium prop is \"<medium>\"\n    And the button's child is text saying \"BUTTON_TEXT\"\n    When the share button is rendered\n    Then the button has text \"BUTTON_TEXT\"\n    And the button is <colour>\n    And it displays an <icon> beside the text\n    And clicking the button redirects to an appropriate link\n    Examples:\n      | medium        | colour       | icon               |\n      | facebook      | #1877f2      | facebook logo      |\n      | twitter       | #000000      | twitter x logo     |\n      | email         | #666666      | envelope           |\n      | direct        | brand colour | paper plane        |\n      | linkedin      | #0077b5      | linkedIn logo      |\n      | sms           | #34DA50      | chat bubble        |\n      | fbmessenger   | #0084ff      | messenger logo     |\n      | whatsapp      | #25d366      | whatsapp logo      |\n      | linemessenger | #00B300      | linemessenger logo |\n      | pinterest     | #e60023      | pinterest logo     |\n\n  @minutia\n  @ui\n  Scenario Outline: Default icons can be overwritten\n    Given a share button for any medium with <iconPropValue>\n    When the share button is rendered\n    Then it displays a <iconPropValue> instead of the share mediums default icon\n    Examples:\n      | iconPropValue |\n      | basket        |\n      | bluetooth     |\n      | bandaid       |\n\n  @motivating\n  @ui\n  Scenario Outline: Default share medium colours can be overwritten\n    Given a share button for any medium with <backgroundColourPropValue>\n    When the share button is rendered\n    Then the share button is <backgroundColourPropValue>\n    Examples:\n      | backgroundColourPropValue |\n      | blue                      |\n      | black                     |\n      | green                     |\n\n  @minutia\n  @ui\n  Scenario Outline: Share medium icons and text can be hidden\n    Given a share button with <prop> <value>\n    When the share button is rendered\n    Then <element> is hidden\n    Examples:\n      | prop     | value | element |\n      | hideicon | true  | icon    |\n      | hidetext | true  | text    |\n\n  @minutia\n  @ui\n  Scenario Outline: Icons can be on either side of the text\n    Given a share button with <iconslotPropValue>\n    When the share button is rendered\n    Then the icon is displayed to the <direction> of the text\n    Examples:\n      | iconslotPropValue | direction |\n      | suffix            | right     |\n      | prefix            | left      |\n      | prefix            | left      |\n\n  @minutia\n  Scenario: Unsupported browsers hide native share buttons\n    Given the share button's medium prop is \"direct\"\n    And your browser does not support the Web Share API\n    Then the share button is hidden\n\n  @minutia\n  Scenario: SMS share buttons are hidden on non Android and iOS devices\n    Given the share button's medium is \"sms\"\n    And the share button is being viewed on a device which is not an Android or iOS device\n    Then the share button is hidden\n\n  @motivating\n  Scenario: Facebook share buttons uses SquatchAndroid sharing features\n    Given the share button's medium is \"facebook\"\n    And the share button is being viewed in a web view with the SquatchAndroid API\n    And the Facebook app is available\n    Then tapping the share button opens the phone's Facebook app\n    And a share activity is opened with the share link prefilled\n\n  @motivating\n  Scenario: SquatchAndroid falls back to the Facebook website if no app is available\n    Given the share button's medium is \"facebook\"\n    And the share button is being viewed in a web view with the SquatchAndroid API\n    And the Facebook app is not available\n    Then tapping the share button opens the the Facebook mobile site in the device's browser\n    And a share activity is opened with the share link prefilled\n\n  @minutia\n  Scenario: A supplied program ID is used if available\n    Given the program id is supplied to the component in the \"programId\" prop\n    Then the program ID in the \"programId\" prop is used to retrieve share links\n\n  @minutia\n  Scenario: The program ID is automatically fetched from context\n    Given the program id is not supplied to the component in the \"programId\" prop\n    Then the program ID is retrieved from context";
 
@@ -1740,37 +1468,37 @@ const WithIconPrefix = () => {
     medium: "whatsapp",
     iconslot: "prefix",
   };
-  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Share");
+  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithIconSuffix = () => {
   const props = { medium: "whatsapp", iconslot: "suffix" };
-  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Share");
+  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithIconOverride = () => {
   const props = {
     medium: "facebook",
     icon: "person-badge",
   };
-  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Share");
+  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const TextStyle = () => {
   const props = {
     medium: "facebook",
     type: "text",
   };
-  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Share");
+  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithoutIcon = () => {
   const props = { medium: "facebook", hideicon: true };
-  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Share");
+  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithoutText = () => {
   const props = { medium: "facebook", hidetext: true };
-  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Share");
+  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const TextStyleWithoutIcon = () => {
   const props = { medium: "facebook", type: "text", hideicon: true };
-  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Share");
+  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithCustomColors = () => {
   const props = {
@@ -1780,7 +1508,7 @@ const WithCustomColors = () => {
     textcolor: "yellow",
     iconslot: "prefix",
   };
-  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Facebook");
+  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Facebook");
 };
 const WithCustomBorderRadius = () => {
   const props = {
@@ -1789,7 +1517,7 @@ const WithCustomBorderRadius = () => {
     borderradius: 8,
     iconslot: "prefix",
   };
-  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Facebook");
+  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Facebook");
 };
 const LinkLocationTest = () => {
   const props = {
@@ -1798,7 +1526,7 @@ const LinkLocationTest = () => {
     onClick: undefined,
     messageLink: "https://www.example.com",
   };
-  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Click me");
+  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Click me");
 };
 const FullStackIcon = () => {
   return (index.h("div", null,
@@ -1923,11 +1651,6 @@ const EmptyState = /*#__PURE__*/Object.freeze({
 const Pagination_stories = {
   title: "Components/Link Button",
 };
-const defaultProps = {
-  link: "https://example.com",
-  openInNewTab: false,
-  buttonText: "Button Text",
-};
 const Default = () => {
   return index.h("sqm-pagination", null);
 };
@@ -2031,7 +1754,7 @@ const BigStat_stories = {
 };
 const Default$2 = () => {
   const props = { value: 990000, statvalue: "9.900,00", loading: false };
-  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
 };
 const LeftAlign = () => {
   const props = {
@@ -2040,7 +1763,7 @@ const LeftAlign = () => {
     alignment: "left",
     loading: false,
   };
-  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
 };
 const RightAlign = () => {
   const props = {
@@ -2049,7 +1772,7 @@ const RightAlign = () => {
     alignment: "right",
     loading: false,
   };
-  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
 };
 const FlexReverse = () => {
   const props = {
@@ -2058,7 +1781,7 @@ const FlexReverse = () => {
     flexReverse: true,
     loading: false,
   };
-  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
 };
 const FlexReverseRight = () => {
   const props = {
@@ -2068,7 +1791,7 @@ const FlexReverseRight = () => {
     alignment: "right",
     loading: false,
   };
-  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
 };
 const FlexReverseLeft = () => {
   const props = {
@@ -2078,7 +1801,7 @@ const FlexReverseLeft = () => {
     alignment: "left",
     loading: false,
   };
-  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
 };
 const NoStatValue = () => {
   const props = {
@@ -2086,7 +1809,7 @@ const NoStatValue = () => {
     statvalue: "...",
     loading: false,
   };
-  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
 };
 const InvalidStatValue = () => {
   const props = {
@@ -2094,7 +1817,7 @@ const InvalidStatValue = () => {
     statvalue: "!!!",
     loading: false,
   };
-  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
 };
 const MultipleStats = () => {
   return (index.h("sqm-stat-container", { space: "xxx-large", display: "flex" },
@@ -2284,7 +2007,6 @@ const defaultStyles$1 = {
   rankSuffix: "{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}",
 };
 const link = index.h("a", null, "Support");
-const tag = "Contact" + link + "about upgrading your plan";
 const defaultElements$1 = {
   empty: (index.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })),
 };
@@ -3003,7 +2725,7 @@ function setupLoggedOut() {
 const PortalFrame_stories = {
   title: "Components/Microsite Frame",
 };
-const defaultProps$1 = {
+const defaultProps = {
   data: {
     footer: index.h("span", null, "example@example.com"),
     header: (index.h("div", { slot: "header", style: { display: "flex", flexDirection: "column" } },
@@ -3020,9 +2742,9 @@ const defaultProps$1 = {
 };
 const FrameWithMenu = () => {
   const props = {
-    ...defaultProps$1,
+    ...defaultProps,
   };
-  return (index.h(sqmPortalFrameView.PortalFrameView, Object.assign({}, props),
+  return (index.h(ShadowViewAddon.PortalFrameView, Object.assign({}, props),
     index.h("sqm-navigation-menu", { "menu-label": "Menu" },
       index.h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/widget" }, "Dashboard"),
       index.h("sl-menu-item", { exportparts: "base: menuitem-base", value: "/editProfile" }, "Edit Profile"),
@@ -3031,9 +2753,9 @@ const FrameWithMenu = () => {
 };
 const FrameWithoutMenu = () => {
   const props = {
-    ...defaultProps$1,
+    ...defaultProps,
   };
-  return index.h(sqmPortalFrameView.PortalFrameView, Object.assign({}, props));
+  return index.h(ShadowViewAddon.PortalFrameView, Object.assign({}, props));
 };
 const FullStackFrame = () => {
   var _a;
@@ -3098,7 +2820,7 @@ const PortalFrame = /*#__PURE__*/Object.freeze({
 const EditProfileForm_stories = {
   title: "Components/Edit Profile Form",
 };
-const defaultProps$2 = {
+const defaultProps$1 = {
   states: {
     loading: false,
     submitDisabled: false,
@@ -3141,15 +2863,15 @@ const defaultProps$2 = {
   },
 };
 const EditProfileFormDisabled = () => {
-  const props = defaultProps$2;
-  return index.h(sqmEditProfileView.EditProfileView, Object.assign({}, props));
+  const props = defaultProps$1;
+  return index.h(ShadowViewAddon.EditProfileView, Object.assign({}, props));
 };
 const EditProfileFormEnabled = () => {
   const props = {
-    ...defaultProps$2,
-    states: { ...defaultProps$2.states, showEdit: true },
+    ...defaultProps$1,
+    states: { ...defaultProps$1.states, showEdit: true },
   };
-  return index.h(sqmEditProfileView.EditProfileView, Object.assign({}, props));
+  return index.h(ShadowViewAddon.EditProfileView, Object.assign({}, props));
 };
 const FullStackFrameWithMenu = () => {
   return (index.h("sqm-edit-profile", { editprofileheader: "Edit Profile", editprofiletext: "Update your profile.", firstnametext: "Bill", lastnametext: "Bob", canceltext: "Cancel", updatetext: "Update", currentregiontext: "Current Region", showregion: true }));
@@ -3190,7 +2912,7 @@ function setupGraphQL$1() {
 }
 const BareBonesView = createHookStory(() => {
   setupGraphQL$1();
-  const res = useShareLink.useShareLink({
+  const res = ShadowViewAddon.useShareLink({
     programId: "klip-referral-program",
     tooltiplifespan: 0,
     tooltiptext: "",
@@ -3202,7 +2924,7 @@ const BareBonesView = createHookStory(() => {
 });
 const RegularView = createHookStory(() => {
   setupGraphQL$1();
-  return (index.h(copyTextView.CopyTextView, Object.assign({}, useShareLink.useShareLink({
+  return (index.h(copyTextView.CopyTextView, Object.assign({}, ShadowViewAddon.useShareLink({
     programId: "klip-referral-program",
     tooltiptext: "Copied to clipboard",
     tooltiplifespan: 1000,
@@ -3210,7 +2932,7 @@ const RegularView = createHookStory(() => {
 });
 const FastTooltip = createHookStory(() => {
   setupGraphQL$1();
-  return (index.h(copyTextView.CopyTextView, Object.assign({}, useShareLink.useShareLink({
+  return (index.h(copyTextView.CopyTextView, Object.assign({}, ShadowViewAddon.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⢀⠢⡑⡀⢂⢊⠠⠁⡂⡐⠀⠅⡈⠪⠪⠪⠣⠫⠑⡁⢔⠕⣜⣜⢦⡰⡎⡯⡾⡽",
     tooltiplifespan: 500,
@@ -3254,11 +2976,11 @@ const BareBonesView$1 = createHookStory(() => {
   setupGraphQL$2();
   const programId = "sam-partner-test-2";
   const res = [
-    useShareButton.useShareButton({ programId, medium: "facebook" }),
-    useShareButton.useShareButton({ programId, medium: "twitter" }),
-    useShareButton.useShareButton({ programId, medium: "email" }),
-    useShareButton.useShareButton({ programId, medium: "direct" }),
-    useShareButton.useShareButton({ programId, medium: "sms" }),
+    ShadowViewAddon.useShareButton({ programId, medium: "facebook" }),
+    ShadowViewAddon.useShareButton({ programId, medium: "twitter" }),
+    ShadowViewAddon.useShareButton({ programId, medium: "email" }),
+    ShadowViewAddon.useShareButton({ programId, medium: "direct" }),
+    ShadowViewAddon.useShareButton({ programId, medium: "sms" }),
   ];
   return (index.h("div", null, res.map((r) => (index.h("div", null,
     index.h("button", { onClick: r.onClick },
@@ -3326,7 +3048,7 @@ const View = (statType, format, label) => {
 };
 const DemoView = () => {
   const [type, setType] = stencilHooks_module.useState("/someRandomThing/with/someArguments/1234");
-  const { props, label } = useDemoBigStat.useDemoBigStat({
+  const { props, label } = ShadowViewAddon.useDemoBigStat({
     statType: type,
     render: () => { },
     disconnectedCallback: () => { },
@@ -3339,7 +3061,7 @@ const DemoView = () => {
       index.h("input", { style: { width: "300px" }, type: "text", value: type, onInput: (e) => setType(e.target.value) })),
     index.h("hr", null),
     index.h("div", null,
-      index.h(sqmBigStatView.BigStatView, Object.assign({}, props), label))));
+      index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), label))));
 };
 const Demo = createHookStory(DemoView);
 const ReferralsCount = createHookStory(() => View("/referralsCount", "/(referralsCount)/:status?"));
@@ -3852,12 +3574,6 @@ const DefaultView = (props) => {
 };
 const RewardList = createHookStory(() => {
   setupGraphQL$6();
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-reward-exchange-list", { "list-type": "something" }));
 });
 const FixedGlobalReward = createHookStory(() => {
@@ -3965,14 +3681,6 @@ function setupGraphQLKlip({ token, id }) {
   return { id, accountId };
 }
 const RewardTableDemoHook = createHookStory(() => {
-  // setupGraphQL();
-  // setProgramId("sam-partner-test-2");
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-rewards-table", { "per-page": "4" },
     index.h("sqm-rewards-table-reward-column", null),
     index.h("sqm-rewards-table-source-column", null),
@@ -3982,12 +3690,6 @@ const RewardTableDemoHook = createHookStory(() => {
 const RewardsTableWithProgram = createHookStory(() => {
   setupGraphQL$7();
   index_module.setProgramId("sam-partner-test-2");
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-rewards-table", null,
     index.h("sqm-rewards-table-reward-column", null),
     index.h("sqm-rewards-table-status-column", null),
@@ -3997,12 +3699,6 @@ const RewardsTableWithProgram = createHookStory(() => {
 const RewardsTableNoProgram = createHookStory(() => {
   setupGraphQL$7();
   index_module.setProgramId(undefined);
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-rewards-table", null,
     index.h("sqm-rewards-table-reward-column", null),
     index.h("sqm-rewards-table-status-column", null),
@@ -4015,12 +3711,6 @@ const RewardsTableEn = createHookStory(() => {
     id: "samenglish",
   });
   index_module.setProgramId(undefined);
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-rewards-table", { "per-page": "4" },
     index.h("sqm-rewards-table-reward-column", null),
     index.h("sqm-rewards-table-status-column", null),
@@ -4033,12 +3723,6 @@ const RewardsTableTr = createHookStory(() => {
     id: "samturkey",
   });
   index_module.setProgramId(undefined);
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-rewards-table", { "per-page": "4", "more-label": "Daha", "prev-label": "\u00D6ncesi", "empty-state-text": "Hen\u00FCz Referans Yok" },
     index.h("sqm-rewards-table-reward-column", { "column-title": "\u00D6d\u00FCller", "redeemed-text": "{redeemedAmount} kullan\u0131ld\u0131", "available-text": "{availableAmount} mevcut" }),
     index.h("sqm-rewards-table-source-column", { "column-title": "Kullan\u0131c\u0131lar", "anonymous-user": "Anonim Kullan\u0131c\u0131", "deleted-user": "Silinmi\u015F Kullan\u0131c\u0131", "reward-exchange-text": "\u00D6d\u00FClleri Kulann\u0131n", "referral-text": "{rewardSource, select, FRIEND_SIGNUP {Referans} REFERRED {Y\u00F6nlendiren} other {}}", "reward-source-text": "{rewardSource, select, MANUAL {Manuel} AUTOMATED {Otomatik} other {}}" }),
@@ -4051,12 +3735,6 @@ const RewardsTableFr = createHookStory(() => {
     id: "samfrench",
   });
   index_module.setProgramId(undefined);
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-rewards-table", { "per-page": "4", "more-label": "Plus", "prev-label": "Pr\u00E9c\u00E9dent", "empty-state-text": "Aucune R\u00E9compenses Maintenant" },
     index.h("sqm-rewards-table-reward-column", { "column-title": "R\u00E9compenses", "redeemed-text": "{redeemedAmount} rachet\u00E9e", "available-text": "{availableAmount} disponible" }),
     index.h("sqm-rewards-table-source-column", { "column-title": "Utilisateur", "anonymous-user": "Utilisateur Anonyme", "deleted-user": "Utilisateur Supprim\u00E9", "reward-exchange-text": "\u00C9change de R\u00E9compenses", "referral-text": "{rewardSource, select, FRIEND_SIGNUP {R\u00E9f\u00E9rence \u00E0} REFERRED {R\u00E9f\u00E9renc\u00E9 par} other {}}", "reward-source-text": "{rewardSource, select, MANUAL {Manuel} AUTOMATED {Automatique} other {}}" }),
@@ -4104,22 +3782,10 @@ function setupGraphQL$8() {
 }
 const TaskCard = createHookStory(() => {
   setupGraphQL$8();
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-task-card", { "card-title": "Comment on 5 articles", "button-text": "Start reading", goal: 5, steps: true, "show-progress-bar": true, "event-key": "testEvent", "open-new-tab": true }));
 });
 const TaskCardFeed = createHookStory(() => {
   setupGraphQL$8();
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-card-feed", null,
     index.h("sqm-task-card", { "reward-amount": "75", "card-title": "Refer a Friend", description: "Invite a friend to Klip and get 75 points when they signup for a free trial or contact our us about an enterprise license.", "button-text": "Start referring", "button-link": "https://klip-staging.vercel.app/app/klip-rewards", goal: 1, repeatable: true, "completed-text": "", demoData: "", "ended-message": "", "event-key": "", "expiry-message": "", "progress-bar-unit": "", "reward-duration": "2022-01-04T08:00:00.000Z/2022-01-20T08:00:00.000Z", "reward-unit": "", "starts-on-message": "", "stat-type": "", "display-duration": "2022-01-04T08:00:00.000Z/2022-01-05T08:00:00.000Z" }),
     index.h("sqb-program-section", { "program-id": "klip-loyalty" },
@@ -4155,8 +3821,8 @@ const style = {
     "text-decoration": "underline",
   },
 };
-const sheet$1 = JSS.createStyleSheet(style);
-const styleString = sheet$1.toString();
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
 const item1Props = {
   states: {
     active: false,
@@ -4241,7 +3907,7 @@ const Dashboard = () => {
     index.h(Sidebar, null),
     index.h("sqm-divided-layout", { direction: "column" },
       index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "xx-small",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -4249,13 +3915,13 @@ const Dashboard = () => {
           content: (index.h("sqm-text", null,
             index.h("h1", null, "John Smith"))),
         })),
-        index.h(sqmStatContainerView.StatContainerView, Object.assign({}, { space: "64px" }),
-          index.h(sqmBigStatView.BigStatView, Object.assign({}, { statvalue: "2,345", value: 234500, loading: false }), "Clicks"),
-          index.h(sqmBigStatView.BigStatView, Object.assign({}, { statvalue: "58", value: 58, loading: false }), "Referrals"),
-          index.h(sqmBigStatView.BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000, loading: false }), "Earned"),
-          index.h(sqmBigStatView.BigStatView, Object.assign({}, { statvalue: "$2,305", value: 230500, loading: false }), "Awaiting Payout"))),
+        index.h(ShadowViewAddon.StatContainerView, Object.assign({}, { space: "64px" }),
+          index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "2,345", value: 234500, loading: false }), "Clicks"),
+          index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "58", value: 58, loading: false }), "Referrals"),
+          index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000, loading: false }), "Earned"),
+          index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "$2,305", value: 230500, loading: false }), "Awaiting Payout"))),
       index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "x-large",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -4263,21 +3929,21 @@ const Dashboard = () => {
           content: (index.h("sqm-text", null,
             index.h("p", null, "Get rewarded for referring potential customers to MyCompany. Earn commission for each successful lead you send our way"))),
         })),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "small",
           padding: "none",
           label: (index.h("sqm-text", null,
             index.h("h3", null, "Share your referral link"))),
           content: index.h(copyTextView.CopyTextView, Object.assign({}, sharelinkProps)),
         })),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "small",
           padding: "none",
           label: (index.h("sqm-text", null,
             index.h("h3", null, "Share your referral code"))),
           content: index.h(copyTextView.CopyTextView, Object.assign({}, sharecodeProps)),
         })),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "small",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -4288,9 +3954,9 @@ const Dashboard = () => {
             gap: "xxx-large",
             minWidth: "150px",
           }),
-            index.h(useShareButton.ShareButtonView, Object.assign({}, twitterButtonProps), "Post about us on X"),
-            index.h(useShareButton.ShareButtonView, Object.assign({}, facebookButtonProps), "Share on Facebook"),
-            index.h(useShareButton.ShareButtonView, Object.assign({}, linkedinButtonProps), "Post on Linkedin"))),
+            index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, twitterButtonProps), "Post about us on X"),
+            index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, facebookButtonProps), "Share on Facebook"),
+            index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, linkedinButtonProps), "Post on Linkedin"))),
         }))))));
 };
 const EditProfile$1 = () => {
@@ -4334,7 +4000,7 @@ const EditProfile$1 = () => {
           onChange: (e) => console.log(e),
         },
       })),
-      index.h(sqmPortalChangePasswordView.PortalChangePasswordView, Object.assign({}, {
+      index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, {
         states: {
           open: true,
           error: "",
@@ -4363,7 +4029,7 @@ const Commissions = () => {
     index.h(Sidebar, null),
     index.h("sqm-divided-layout", { direction: "column" },
       index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "xx-small",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -4372,15 +4038,15 @@ const Commissions = () => {
             index.h("p", null,
               "for the",
               " ",
-              index.h("span", { class: sheet$1.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              index.h("span", { class: sheet.classes.HeaderSubtitleBold }, "Partner Program #1"),
               " ",
               "program"))),
         })),
-        index.h(sqmStatContainerView.StatContainerView, Object.assign({}, { space: "64px" }),
-          index.h(sqmBigStatView.BigStatView, Object.assign({}, { statvalue: "$ 1,000", value: 100000, loading: false }), "Total Earned"),
-          index.h(sqmBigStatView.BigStatView, Object.assign({}, { statvalue: "$ 800", value: 80000, loading: false }), "Available"),
-          index.h(sqmBigStatView.BigStatView, Object.assign({}, { statvalue: "$ 180", value: 18000, loading: false }), "Pending"),
-          index.h(sqmBigStatView.BigStatView, Object.assign({}, { statvalue: "$ 20", value: 2000, loading: false }), "Redeemed"))))));
+        index.h(ShadowViewAddon.StatContainerView, Object.assign({}, { space: "64px" }),
+          index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "$ 1,000", value: 100000, loading: false }), "Total Earned"),
+          index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "$ 800", value: 80000, loading: false }), "Available"),
+          index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "$ 180", value: 18000, loading: false }), "Pending"),
+          index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "$ 20", value: 2000, loading: false }), "Redeemed"))))));
 };
 const Activity = () => {
   return (index.h("sqm-divided-layout", { direction: "row" },
@@ -4388,7 +4054,7 @@ const Activity = () => {
     index.h(Sidebar, null),
     index.h("sqm-divided-layout", { direction: "column" },
       index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "xx-small",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -4397,30 +4063,30 @@ const Activity = () => {
             index.h("p", null,
               "for the",
               " ",
-              index.h("span", { class: sheet$1.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              index.h("span", { class: sheet.classes.HeaderSubtitleBold }, "Partner Program #1"),
               " ",
               "program"))),
         })),
-        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
           labelMargin: "x-large",
           padding: "none",
           label: (index.h("sqm-text", null,
             index.h("h3", null, "Referral Activity"))),
-          content: (index.h(sqmStatContainerView.StatContainerView, Object.assign({}, { space: "64px" }),
-            index.h(sqmBigStatView.BigStatView, Object.assign({}, { statvalue: "1,000", value: 100000, loading: false }), "Total Referrals"),
-            index.h(sqmBigStatView.BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "Converted"),
-            index.h(sqmBigStatView.BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "Pending"),
-            index.h(sqmBigStatView.BigStatView, Object.assign({}, { statvalue: "20", value: 20, loading: false }), "Disqualified"))),
+          content: (index.h(ShadowViewAddon.StatContainerView, Object.assign({}, { space: "64px" }),
+            index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "1,000", value: 100000, loading: false }), "Total Referrals"),
+            index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "Converted"),
+            index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "Pending"),
+            index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "20", value: 20, loading: false }), "Disqualified"))),
         }))),
-      index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+      index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
         labelMargin: "x-large",
         padding: "xxx-large",
         label: (index.h("sqm-text", null,
           index.h("h3", null, "Traffic Generated"))),
-        content: (index.h(sqmStatContainerView.StatContainerView, Object.assign({}, { space: "64px" }),
-          index.h(sqmBigStatView.BigStatView, Object.assign({}, { statvalue: "1,000", value: 1000, loading: false }), "Clicks"),
-          index.h(sqmBigStatView.BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "From share link"),
-          index.h(sqmBigStatView.BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "From share mediums"))),
+        content: (index.h(ShadowViewAddon.StatContainerView, Object.assign({}, { space: "64px" }),
+          index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "1,000", value: 1000, loading: false }), "Clicks"),
+          index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "From share link"),
+          index.h(ShadowViewAddon.BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "From share mediums"))),
       })))));
 };
 
@@ -4496,11 +4162,8 @@ var marked = stencilHooks_module.createCommonjsModule(function (module, exports)
  */
 
 (function (global, factory) {
-  'object' === 'object' && 'object' !== 'undefined' ? module.exports = factory() :
-  typeof undefined === 'function' && undefined.amd ? undefined(factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.marked = factory());
-}(stencilHooks_module.commonjsGlobal, (function () { 'use strict';
-
+   module.exports = factory() ;
+}(stencilHooks_module.commonjsGlobal, (function () {
   function _defineProperties(target, props) {
     for (var i = 0; i < props.length; i++) {
       var descriptor = props[i];
@@ -7583,20 +7246,6 @@ const NavigationSidebar_stories = {
   title: "Components/Navigation Sidebar",
 };
 const DefaultNavigationSidebar = () => {
-  const barProps = {
-    data: {
-      programs: [
-        {
-          key: "program1",
-          label: "My Referral Program",
-        },
-        {
-          key: "program2",
-          label: "My Rewards Program",
-        },
-      ],
-    },
-  };
   const item1Props = {
     states: {
       active: false,
@@ -7631,7 +7280,7 @@ const NavigationSidebar = /*#__PURE__*/Object.freeze({
 const PortalLogin_stories = {
   title: "Components/Microsite Login",
 };
-const defaultProps$3 = {
+const defaultProps$2 = {
   states: {
     error: "",
     loading: false,
@@ -7676,8 +7325,8 @@ const loadingProps = {
     pageLabel: "Sign in to your account",
   },
 };
-const Default$3 = () => (index.h("sqm-portal-login", { demoData: { ...defaultProps$3 } }));
-const IsGoogle = () => (index.h(sqmPortalLoginView.PortalLoginView, Object.assign({}, defaultProps$3, { content: {
+const Default$3 = () => (index.h("sqm-portal-login", { demoData: { ...defaultProps$2 } }));
+const IsGoogle = () => (index.h(sqmPortalLoginView.PortalLoginView, Object.assign({}, defaultProps$2, { content: {
     secondaryButton: (index.h("span", null,
       "Don't have an account?",
       " ",
@@ -7699,7 +7348,7 @@ const PortalLogin = /*#__PURE__*/Object.freeze({
 const PortalRegister_stories = {
   title: "Components/Microsite Register",
 };
-const defaultProps$4 = {
+const defaultProps$3 = {
   states: {
     registrationFormState: {},
     error: "",
@@ -7794,9 +7443,9 @@ const slottedProps = {
       index.h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
   },
 };
-const Default$4 = () => index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultProps$4));
-const RegisterWithError = () => index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, errorProps$1));
-const RegisterLoading = () => index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, loadingProps$1));
+const Default$4 = () => index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultProps$3));
+const RegisterWithError = () => index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, errorProps$1));
+const RegisterLoading = () => index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, loadingProps$1));
 const FieldsHidden = () => {
   return (index.h("sqm-portal-register", { demoData: {
       states: {
@@ -7809,9 +7458,9 @@ const FieldsHidden = () => {
       },
     } }));
 };
-const SlottedInputs = () => index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, slottedProps));
-const TermsAndConditions = () => (index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultProps$4, { content: {
-    ...defaultProps$4.content,
+const SlottedInputs = () => index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, slottedProps));
+const TermsAndConditions = () => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultProps$3, { content: {
+    ...defaultProps$3.content,
     terms: (index.h("p", null,
       "By signing up you agree to the",
       " ",
@@ -7832,7 +7481,7 @@ const PortalRegister = /*#__PURE__*/Object.freeze({
 const PortalRegistrationForm_stories = {
   title: "Components/Microsite Portal Register",
 };
-const defaultProps$5 = {
+const defaultProps$4 = {
   states: {
     error: "",
     loading: false,
@@ -7909,7 +7558,7 @@ const slottedProps$1 = {
       index.h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
   },
 };
-const Default$5 = () => index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$5));
+const Default$5 = () => index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$4));
 const RegisterWithError$1 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, errorProps$2)));
 const RegisterLoading$1 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, loadingProps$2)));
 const FieldsHidden$1 = () => {
@@ -7925,12 +7574,12 @@ const FieldsHidden$1 = () => {
     } }));
 };
 const SlottedInputs$1 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, slottedProps$1)));
-const RegisterWithMarketingEmailsCheckbox = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$5, { content: {
-    ...defaultProps$5.content,
+const RegisterWithMarketingEmailsCheckbox = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$4, { content: {
+    ...defaultProps$4.content,
     emailOptIn: (index.h("sqm-checkbox-field", { checkboxLabel: "I would like to receive marketing and promotional emails for this referral program" })),
   } })));
-const TermsAndConditions$1 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$5, { content: {
-    ...defaultProps$5.content,
+const TermsAndConditions$1 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$4, { content: {
+    ...defaultProps$4.content,
     terms: (index.h("p", null,
       "By signing up you agree to the",
       " ",
@@ -7957,7 +7606,7 @@ const PortalForgotPassword_stories = {
     scenario: scenario$6,
   },
 };
-const defaultProps$6 = {
+const defaultProps$5 = {
   states: {
     error: "",
     loading: false,
@@ -8017,7 +7666,7 @@ const successProps = {
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };
-const Default$6 = () => index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, defaultProps$6));
+const Default$6 = () => index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, defaultProps$5));
 const ForgotPasswordWithError = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, errorProps$3)));
 const ForgotPasswordLoading = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, loadingProps$3)));
 const ForgotPasswordSuccess = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, successProps)));
@@ -8058,7 +7707,7 @@ const defaultStates = {
   loadingVerification: false,
   countdown: 10,
 };
-const defaultProps$7 = {
+const defaultProps$6 = {
   states: defaultStates,
   callbacks: defaultCallbacks,
   content: defaultContent,
@@ -8096,7 +7745,7 @@ const loadingVerificationProps = {
   callbacks: defaultCallbacks,
   content: defaultContent,
 };
-const Default$7 = () => index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, defaultProps$7));
+const Default$7 = () => index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, defaultProps$6));
 const EmailVerificationWithError = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, errorProps$4)));
 const EmailVerificationLoading = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, loadingProps$4)));
 const EmailVerificationCheckingVerification = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, loadingVerificationProps)));
@@ -8120,7 +7769,7 @@ const PortalResetPassword_stories = {
     scenario: scenario$8,
   },
 };
-const defaultProps$8 = {
+const defaultProps$7 = {
   states: {
     error: "",
     loading: false,
@@ -8258,7 +7907,7 @@ const validatingCodeProps = {
     failed: () => console.log("failed"),
   },
 };
-const Default$8 = () => index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, defaultProps$8));
+const Default$8 = () => index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, defaultProps$7));
 const DefaultWithoutConfirmField = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, defaultPropsNoConfirm)));
 const ResetPasswordWithError = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, errorProps$5)));
 const ResetPasswordLoading = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, loadingProps$5)));
@@ -8396,7 +8045,7 @@ const Row = () => {
   return (index.h("sqm-divided-layout", { direction: "row" },
     index.h(Sidebar$1, null),
     index.h("div", { style: { padding: "48px" } },
-      index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+      index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
         labelMargin: "xx-small",
         padding: "none",
         label: (index.h("sqm-text", null,
@@ -8409,7 +8058,7 @@ const Column = () => {
   return (index.h("sqm-divided-layout", { direction: "column" },
     index.h(Sidebar$1, null),
     index.h("div", { style: { padding: "48px" } },
-      index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+      index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
         labelMargin: "xx-small",
         padding: "none",
         label: (index.h("sqm-text", null,
@@ -8422,7 +8071,7 @@ const ColumnCustomDivider = () => {
   return (index.h("sqm-divided-layout", { direction: "column", dividerStyle: "1px solid red" },
     index.h(Sidebar$1, null),
     index.h("div", { style: { padding: "48px" } },
-      index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
+      index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
         labelMargin: "xx-small",
         padding: "none",
         label: (index.h("sqm-text", null,
@@ -8448,7 +8097,7 @@ const ChangePassword_stories = {
     scenario: scenario$a,
   },
 };
-const defaultProps$9 = {
+const defaultProps$8 = {
   states: {
     open: false,
     loading: false,
@@ -8580,12 +8229,12 @@ const successProps$3 = {
     submit: (e) => console.log("Submit", e),
   },
 };
-const Default$a = () => index.h(sqmPortalChangePasswordView.PortalChangePasswordView, Object.assign({}, defaultProps$9));
-const Open = () => index.h(sqmPortalChangePasswordView.PortalChangePasswordView, Object.assign({}, openProps));
-const Error$2 = () => index.h(sqmPortalChangePasswordView.PortalChangePasswordView, Object.assign({}, errorProps$7));
-const PaswordError = () => (index.h(sqmPortalChangePasswordView.PortalChangePasswordView, Object.assign({}, passwordErrorProps)));
-const Loading$1 = () => index.h(sqmPortalChangePasswordView.PortalChangePasswordView, Object.assign({}, loadingProps$6));
-const Success = () => index.h(sqmPortalChangePasswordView.PortalChangePasswordView, Object.assign({}, successProps$3));
+const Default$a = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, defaultProps$8));
+const Open = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, openProps));
+const Error$2 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, errorProps$7));
+const PaswordError = () => (index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, passwordErrorProps)));
+const Loading$1 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, loadingProps$6));
+const Success = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, successProps$3));
 
 const ChangePassword = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -8601,7 +8250,7 @@ const ChangePassword = /*#__PURE__*/Object.freeze({
 const ChangeMarketing_stories = {
   title: "Components/Change Marketing Emails Status",
 };
-const defaultProps$a = {
+const defaultProps$9 = {
   states: {
     success: false,
     loading: false,
@@ -8632,21 +8281,21 @@ const Default$b = () => {
   return index.h("sqm-portal-change-marketing", null);
 };
 const Loading$2 = () => {
-  return (index.h(sqmPortalChangeMarketingView.ChangeMarktingView, Object.assign({}, defaultProps$a, { states: { ...defaultProps$a.states, loading: true } })));
+  return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$9, { states: { ...defaultProps$9.states, loading: true } })));
 };
 const Error$3 = () => {
-  return (index.h(sqmPortalChangeMarketingView.ChangeMarktingView, Object.assign({}, defaultProps$a, { states: {
-      ...defaultProps$a.states,
+  return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$9, { states: {
+      ...defaultProps$9.states,
       formState: {
-        ...defaultProps$a.states.formState,
+        ...defaultProps$9.states.formState,
         errors: { error: true },
         error: "An error string",
       },
     } })));
 };
 const Success$1 = () => {
-  return (index.h(sqmPortalChangeMarketingView.ChangeMarktingView, Object.assign({}, defaultProps$a, { states: {
-      ...defaultProps$a.states,
+  return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$9, { states: {
+      ...defaultProps$9.states,
       success: true,
     } })));
 };
@@ -8663,7 +8312,7 @@ const ChangeMarketing = /*#__PURE__*/Object.freeze({
 const PortalProfile_stories = {
   title: "Components/Microsite Profile",
 };
-const defaultProps$b = {
+const defaultProps$a = {
   states: {
     success: false,
     loading: false,
@@ -8879,7 +8528,7 @@ const successProps$4 = {
     onChange: (e) => console.log(e),
   },
 };
-const Default$c = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, defaultProps$b));
+const Default$c = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, defaultProps$a));
 const DefaultNoCountry = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, noCountry));
 const Loading$3 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, loadingProps$7));
 const Disabled$1 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, disabledProps));
@@ -10268,116 +9917,116 @@ const TaskCard$1 = () => {
   return (index.h("div", { style: storyFrame },
     index.h(Resizer, null,
       index.h("h4", null, "Not Repeatable"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, description: "" }, states: { ...oneAction.states, progress: 0 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, description: "" }, states: { ...oneAction.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, description: "" }, states: { ...coupleActions.states, progress: 0 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, description: "" }, states: { ...coupleActions.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, description: "" }, states: { ...manyActions.states, progress: 230 } }))),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, description: "" }, states: { ...manyActions.states, progress: 230 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Repeatable"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 2 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 2 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } }))),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Complete"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } }))),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Unavailable"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 } }, expireRepeat)),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 } }, expireRepeat)),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 3 } }, expireRepeat)),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 3 } }, expireRepeat)),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 250 } }, expireRepeat)))));
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 250 } }, expireRepeat)))));
 };
 const TaskCardNotRepeatable = () => {
   return (index.h("div", { style: storyFrame },
     index.h("div", { style: resizable },
       index.h("h4", null, "One Action"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 230 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 230 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } })),
       index.h("h5", null))));
 };
 const TaskCardRepeatable = () => {
   return (index.h("div", { style: storyFrame },
     index.h("div", { style: resizable },
       index.h("h4", null, "One Action"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 0 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 1 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 1 } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 0 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 5 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 5 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 10 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 10 } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 0 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 500 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 500 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 1000 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 1000 } })),
       index.h("h5", null))));
 };
 const TaskCardRepeatableFinite = () => {
   return (index.h("div", { style: storyFrame },
     index.h("div", { style: resizable },
       index.h("h4", null, "One Action"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 0 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 1 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 1 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 2 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 2 } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 2 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 2 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 5 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 5 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 10 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 10 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 12 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 12 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 15 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 15 } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 200 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 200 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 500 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 500 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 1000 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 1000 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1200 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1200 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1500 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1500 } })),
       index.h("h5", null))));
 };
 const TaskCardEndDate = () => {
@@ -10390,27 +10039,27 @@ const TaskCardEndDate = () => {
   return (index.h("div", { style: storyFrame },
     index.h("div", { style: resizable },
       index.h("h4", null, "One Action"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expire } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expire } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expireRepeat } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expireRepeat }, states: { ...oneAction.states, progress: 1 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expireRepeat }, states: { ...oneAction.states, progress: 1 } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expire } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expireRepeat } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expireRepeat }, states: { ...coupleActions.states, progress: 5 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expireRepeat }, states: { ...coupleActions.states, progress: 5 } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expire } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat }, states: { ...manyActions.states, progress: 1000 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat }, states: { ...manyActions.states, progress: 1000 } })),
       index.h("h5", null))));
 };
 const TaskCardLoading = () => {
@@ -10420,26 +10069,26 @@ const TaskCardLoading = () => {
   return (index.h("div", { style: storyFrame },
     index.h("div", { style: resizable },
       index.h("h4", null, "One Action"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, loading)),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, loading)),
       " ",
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, loading)),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, loading)),
       " ",
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, loading)),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, loading)),
       " ",
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, loading)),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, loading)),
       " ",
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, loading)),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, loading)),
       " ",
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, loading)),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, loading)),
       " ",
       index.h("h5", null))));
 };
@@ -10453,33 +10102,33 @@ const TaskCardNotStarted = () => {
   return (index.h("div", { style: storyFrame },
     index.h("div", { style: resizable },
       index.h("h4", null, "One Action"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expireRepeat } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expireRepeat } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
       index.h("h5", null))));
 };
 const TaskCardEnded = () => {
@@ -10492,33 +10141,33 @@ const TaskCardEnded = () => {
   return (index.h("div", { style: storyFrame },
     index.h("div", { style: resizable },
       index.h("h4", null, "One Action"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expireRepeat } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expireRepeat } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
       index.h("h5", null))));
 };
 const TaskCardButtonHidden = () => {
@@ -10529,48 +10178,48 @@ const TaskCardButtonHidden = () => {
   return (index.h("div", { style: storyFrame },
     index.h(Resizer, null,
       index.h("h4", null, "Not Repeatable"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, description: "", hideButton: true }, states: { ...oneAction.states, progress: 0 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, description: "", hideButton: true }, states: { ...oneAction.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: {
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: {
           ...coupleActions.content,
           description: "",
           hideButton: true,
         }, states: { ...coupleActions.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: {
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: {
           ...manyActions.content,
           description: "",
           hideButton: true,
         }, states: { ...manyActions.states, progress: 230 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Repeatable"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, hideButton: true }, states: { ...oneAction.states, progress: 2 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, hideButton: true }, states: { ...oneAction.states, progress: 2 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: {
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: {
           ...coupleActions.content,
           repeatable: true,
           hideButton: true,
         }, states: { ...coupleActions.states, progress: 7 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: {
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: {
           ...manyActions.content,
           repeatable: true,
           hideButton: true,
         }, states: { ...manyActions.states, progress: 650 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Complete"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, hideButton: true }, states: { ...oneAction.states, progress: 1 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, hideButton: true }, states: { ...oneAction.states, progress: 1 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, hideButton: true }, states: { ...coupleActions.states, progress: 5 } })),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, hideButton: true }, states: { ...coupleActions.states, progress: 5 } })),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, hideButton: true }, states: { ...manyActions.states, progress: 500 } }))),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, hideButton: true }, states: { ...manyActions.states, progress: 500 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Unavailable"),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, hideButton: true }, states: { ...oneAction.states, progress: 0 } }, expireRepeat)),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, hideButton: true }, states: { ...oneAction.states, progress: 0 } }, expireRepeat)),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, hideButton: true }, states: { ...coupleActions.states, progress: 3 } }, expireRepeat)),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, hideButton: true }, states: { ...coupleActions.states, progress: 3 } }, expireRepeat)),
       index.h("h5", null),
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, hideButton: true }, states: { ...manyActions.states, progress: 250 } }, expireRepeat)))));
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, hideButton: true }, states: { ...manyActions.states, progress: 250 } }, expireRepeat)))));
 };
 const ProgressBar = () => {
   const props = {
@@ -10579,7 +10228,7 @@ const ProgressBar = () => {
     progressBarUnit: "$",
   };
   return (index.h("div", null,
-    index.h(MatrixStory, { matrix: { progress: [0, 100, 500, 650, 1200] }, props: props, Component: sqmTaskCardView.ProgressBarView })));
+    index.h(MatrixStory, { matrix: { progress: [0, 100, 500, 650, 1200] }, props: props, Component: ShadowViewAddon.ProgressBarView })));
 };
 const ProgressBarSteps = () => {
   const props = {
@@ -10588,7 +10237,7 @@ const ProgressBarSteps = () => {
     goal: 5,
   };
   return (index.h("div", null,
-    index.h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: sqmTaskCardView.ProgressBarView })));
+    index.h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: ShadowViewAddon.ProgressBarView })));
 };
 const ProgressBarRepeatable = () => {
   const props = {
@@ -10598,7 +10247,7 @@ const ProgressBarRepeatable = () => {
     repeatable: true,
   };
   return (index.h("div", null,
-    index.h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: sqmTaskCardView.ProgressBarView })));
+    index.h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: ShadowViewAddon.ProgressBarView })));
 };
 const ProgressBarStepsRepeatable = () => {
   const props = {
@@ -10608,7 +10257,7 @@ const ProgressBarStepsRepeatable = () => {
     repeatable: true,
   };
   return (index.h("div", null,
-    index.h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: sqmTaskCardView.ProgressBarView })));
+    index.h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: ShadowViewAddon.ProgressBarView })));
 };
 const ProgressBarFinite = () => {
   const props = {
@@ -10619,7 +10268,7 @@ const ProgressBarFinite = () => {
     finite: 2,
   };
   return (index.h("div", null,
-    index.h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: sqmTaskCardView.ProgressBarView })));
+    index.h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: ShadowViewAddon.ProgressBarView })));
 };
 const ProgressBarStepsFinite = () => {
   const props = {
@@ -10630,7 +10279,7 @@ const ProgressBarStepsFinite = () => {
     finite: 2,
   };
   return (index.h("div", null,
-    index.h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 10, 12] }, props: props, Component: sqmTaskCardView.ProgressBarView })));
+    index.h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 10, 12] }, props: props, Component: ShadowViewAddon.ProgressBarView })));
 };
 
 const TaskCard$2 = /*#__PURE__*/Object.freeze({
@@ -10657,7 +10306,7 @@ const portalTemplate = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n
 
 const portalLeadSubmitTemplate = "<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-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: 1px solid #eaeaea;\n            border-bottom: 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=\"/refer\"\n              icon=\"inbox\"\n              label=\"Submit A Lead\"\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=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\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> <h1>Activity</h1></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><p>Referrals</p></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><p>Rewards Earned</p></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><p>Reward Balance</p></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            </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: 1px solid #eaeaea;\n            border-bottom: 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 who represent a business entity 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-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=\"Beneficiary account name\"\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                  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 W9 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 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: 1px solid #eaeaea;\n            border-bottom: 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 who represent a business entity 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 W9 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 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 portalLeadSubmitTemplateWithDashboard = "<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-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: 1px solid #eaeaea;\n            border-bottom: 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=\"/refer\"\n              icon=\"inbox\"\n              label=\"Submit A Lead\"\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=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\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                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                  ><sqm-titled-section label-margin=\"xx-small\"\n                    ><sqm-text slot=\"label\"> <p>Welcome back,</p> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <h1>\n                        <sqm-user-name\n                          fallback=\"Anonymous User\"\n                        ></sqm-user-name>\n                      </h1> </sqm-text\n                  ></sqm-titled-section>\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><p>Referrals</p></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><p>Rewards Earned</p></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><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container> </sqm-portal-container\n                ><sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-titled-section padding=\"none\" label-margin=\"x-large\"\n                    ><sqm-text slot=\"label\">\n                      <h2>Partner and Profit</h2> </sqm-text\n                    ><sqm-text slot=\"content\">\n                      <p>\n                        Get rewarded for referring potential customers to\n                        SaaSquatch. Earn commission for each successful lead you\n                        send our way\n                      </p>\n                    </sqm-text></sqm-titled-section\n                  >\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share your referral link</h3> </sqm-text\n                    ><sqm-share-link slot=\"content\"></sqm-share-link\n                  ></sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\">\n                    <sqm-text slot=\"label\">\n                      <h3>Share your referral code</h3> </sqm-text\n                    ><sqm-share-code slot=\"content\"></sqm-share-code>\n                  </sqm-titled-section>\n                  <sqm-titled-section label-margin=\"small\" padding=\"none\"\n                    ><sqm-text slot=\"label\">\n                      <h3>Share via social media</h3> </sqm-text\n                    ><sqm-portal-container\n                      slot=\"content\"\n                      direction=\"row\"\n                      padding=\"none\"\n                      gap=\"xxx-large\"\n                      min-width=\"160px\"\n                      ><sqm-share-button\n                        icon=\"envelope\"\n                        medium=\"email\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Email a friend</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"twitter\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Post about us on X</sqm-share-button\n                      ><sqm-share-button\n                        medium=\"facebook\"\n                        size=\"medium\"\n                        pill=\"true\"\n                        >Share on Facebook</sqm-share-button\n                      ></sqm-portal-container\n                    ></sqm-titled-section\n                  ></sqm-portal-container\n                >\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> <h1>Activity</h1></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><p>Referrals</p></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><p>Rewards Earned</p></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><p>Reward Balance</p></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            </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";
 
@@ -10869,13 +10518,13 @@ const PoweredByImg_stories = {
   title: "Powered By",
 };
 const Default$d = () => {
-  return index.h(sqmPortalFooterView.PoweredByImg, null);
+  return index.h(ShadowViewAddon.PoweredByImg, null);
 };
 const CustomColor = () => {
-  return index.h(sqmPortalFooterView.PoweredByImg, { color: "salmon" });
+  return index.h(ShadowViewAddon.PoweredByImg, { color: "salmon" });
 };
 const CustomWidthAndHeight = () => {
-  return index.h(sqmPortalFooterView.PoweredByImg, { width: 300, height: 50 });
+  return index.h(ShadowViewAddon.PoweredByImg, { width: 300, height: 50 });
 };
 
 const PoweredByImg = /*#__PURE__*/Object.freeze({
@@ -10894,7 +10543,7 @@ const PortalFooter_stories = {
     scenario: scenario$f,
   },
 };
-const defaultProps$c = {
+const defaultProps$b = {
   supportEmail: "support@example.com",
   supportText: "For program support, contact {email}",
   hidePoweredBy: false,
@@ -10904,12 +10553,12 @@ const defaultProps$c = {
   paddingBottom: "large",
   paddingLeft: "large",
 };
-const DefaultFooter = () => index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$c));
-const FooterWithTerms = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$c, { termsLink: "https://example.com", termsText: "Terms and Conditions" })));
-const FooterWithFAQ = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$c, { faqLink: "https://example.com", faqText: "FAQ" })));
-const FooterWithTermsAndFAQ = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$c, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
-const FooterNoPoweredBy = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$c, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hidePoweredBy: true })));
-const FooterNoSupportText = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$c, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hideSupportText: true })));
+const DefaultFooter = () => index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b));
+const FooterWithTerms = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b, { termsLink: "https://example.com", termsText: "Terms and Conditions" })));
+const FooterWithFAQ = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b, { faqLink: "https://example.com", faqText: "FAQ" })));
+const FooterWithTermsAndFAQ = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
+const FooterNoPoweredBy = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hidePoweredBy: true })));
+const FooterNoSupportText = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hideSupportText: true })));
 
 const PortalFooter = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -10946,7 +10595,7 @@ const LoginOneColumn = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
+    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
 };
 const LoginOneColumnWithMinHeight = () => {
   return (index.h("sqm-hero", { background: "https://res.cloudinary.com/saasquatch/image/upload/v1683589933/Portal%20Assets/Screen-Shot-2022-01-06-at-3.23.58-AM.png", columns: 1, "padding-size": "medium", "wrap-direction": "wrap", "secondary-background": "#FFFFFF" },
@@ -10966,7 +10615,7 @@ const LoginOneColumnWithColor = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
+    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
 };
 const LoginOneColumnWithImage = () => {
   const props = {
@@ -10980,7 +10629,7 @@ const LoginOneColumnWithImage = () => {
     content: { primaryColumn: index.h("sqm-portal-login", null) },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
+    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
 };
 const TwoColumnLoginLargePadding = () => {
   const props = {
@@ -11000,7 +10649,7 @@ const TwoColumnLoginLargePadding = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
+    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
 };
 const TwoColumnLoginMediumPadding = () => {
   const props = {
@@ -11020,7 +10669,7 @@ const TwoColumnLoginMediumPadding = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
+    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
 };
 const TwoColumnLoginSmallPadding = () => {
   const props = {
@@ -11040,7 +10689,7 @@ const TwoColumnLoginSmallPadding = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
+    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
 };
 const TwoColumnLoginNoPadding = () => {
   const props = {
@@ -11060,7 +10709,7 @@ const TwoColumnLoginNoPadding = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
+    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
 };
 const TwoColumnLoginReverseWrap = () => {
   const props = {
@@ -11080,7 +10729,7 @@ const TwoColumnLoginReverseWrap = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
+    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
 };
 const TwoColumnLoginWithImgElement = () => {
   const props = {
@@ -11100,7 +10749,7 @@ const TwoColumnLoginWithImgElement = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
+    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
 };
 const MinHeight = () => {
   const props = {
@@ -11117,7 +10766,7 @@ const MinHeight = () => {
         index.h("sqm-portal-login", null))),
     },
   };
-  return index.h(sqmHeroView.HeroView, Object.assign({}, props));
+  return index.h(ShadowViewAddon.HeroView, Object.assign({}, props));
 };
 
 const Hero = /*#__PURE__*/Object.freeze({
@@ -11158,7 +10807,7 @@ const props = {
 };
 const ReferralIframe = () => {
   return (index.h("div", { style: { width: "1000px", height: "1000px" } },
-    index.h(sqmReferralIframeView.ReferralIframeView, Object.assign({}, props))));
+    index.h(ShadowViewAddon.ReferralIframeView, Object.assign({}, props))));
 };
 const ReferralIframeError = () => {
   return (index.h("div", { style: { width: "1000px", height: "1000px" } },
@@ -11206,10 +10855,10 @@ const errorProps$9 = {
   },
 };
 const NameFields = () => {
-  return index.h(sqmNameFieldsView.NameFieldsView, Object.assign({}, props$1));
+  return index.h(ShadowViewAddon.NameFieldsView, Object.assign({}, props$1));
 };
 const NameFieldsWithErrors = () => {
-  return index.h(sqmNameFieldsView.NameFieldsView, Object.assign({}, errorProps$9));
+  return index.h(ShadowViewAddon.NameFieldsView, Object.assign({}, errorProps$9));
 };
 
 const NameFields$1 = /*#__PURE__*/Object.freeze({
@@ -11227,7 +10876,7 @@ const CheckboxField_stories = {
     scenario: scenario$j,
   },
 };
-const defaultProps$d = {
+const defaultProps$c = {
   states: {
     registrationFormState: {
       validationErrors: {},
@@ -11268,42 +10917,42 @@ const defaultRegisterProps = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-const Default$e = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$d))));
-const DefaultChecked = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$d, { states: {
-    ...defaultProps$d.states,
+const Default$e = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c))));
+const DefaultChecked = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { states: {
+    ...defaultProps$c.states,
     checked: true,
   } }))));
-const CustomLabel = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$d, { content: {
-    ...defaultProps$d.content,
+const CustomLabel = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { content: {
+    ...defaultProps$c.content,
     checkboxLabel: "I Agree",
   } }))));
-const Error$5 = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$d, { states: {
-    ...defaultProps$d.states,
+const Error$5 = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { states: {
+    ...defaultProps$c.states,
     registrationFormState: {
       validationErrors: {
         agree: "Must be checked",
       },
     },
   } }))));
-const CustomError = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$d, { states: {
-    ...defaultProps$d.states,
+const CustomError = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { states: {
+    ...defaultProps$c.states,
     registrationFormState: {
       validationErrors: {
         agree: "Must be checked",
       },
     },
   }, content: {
-    ...defaultProps$d.content,
+    ...defaultProps$c.content,
     errorMessage: "This checkbox must be checked to continue",
   } }))));
-const TermsAndConditions$2 = createHookStory(() => (index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+const TermsAndConditions$2 = createHookStory(() => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
   //@ts-ignore
   content: {
     ...defaultRegisterProps.content,
     terms: (index.h("p", null,
       index.h("sqm-checkbox-field", null))),
   } }))));
-const TermsAndConditionsCustomLabel = createHookStory(() => (index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+const TermsAndConditionsCustomLabel = createHookStory(() => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
   //@ts-ignore
   content: {
     ...defaultRegisterProps.content,
@@ -11313,7 +10962,7 @@ const TermsAndConditionsCustomLabel = createHookStory(() => (index.h(sqmPortalRe
       index.h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"),
       index.h("sqm-checkbox-field", { "checkbox-label": "I agree" }))),
   } }))));
-const TermsAndConditionsLongCustomLabel = createHookStory(() => (index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+const TermsAndConditionsLongCustomLabel = createHookStory(() => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
   //@ts-ignore
   content: {
     ...defaultRegisterProps.content,
@@ -11428,7 +11077,7 @@ const UseCheckboxField = /*#__PURE__*/Object.freeze({
 const DropdownField_stories = {
   title: "Components/Dropdown Field",
 };
-const defaultProps$e = {
+const defaultProps$d = {
   states: {
     registrationFormState: {},
   },
@@ -11443,24 +11092,24 @@ const defaultProps$e = {
     ],
   },
 };
-const Default$g = createHookStory(() => (index.h(sqmDropdownFieldView.DropdownFieldView, Object.assign({}, defaultProps$e))));
-const CustomLabel$1 = createHookStory(() => (index.h(sqmDropdownFieldView.DropdownFieldView, Object.assign({}, defaultProps$e, { content: {
-    ...defaultProps$e.content,
+const Default$g = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d))));
+const CustomLabel$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d, { content: {
+    ...defaultProps$d.content,
     dropdownLabel: "Pick your favorite",
   } }))));
-const Error$6 = createHookStory(() => (index.h(sqmDropdownFieldView.DropdownFieldView, Object.assign({}, defaultProps$e, { states: {
-    ...defaultProps$e.states,
+const Error$6 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d, { states: {
+    ...defaultProps$d.states,
     registrationFormState: {
       validationErrors: {
         options: "Must select an option",
       },
     },
   } }))));
-const CustomError$1 = createHookStory(() => (index.h(sqmDropdownFieldView.DropdownFieldView, Object.assign({}, defaultProps$e, { content: {
-    ...defaultProps$e.content,
+const CustomError$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d, { content: {
+    ...defaultProps$d.content,
     errorMessage: "An option must be selected to continue",
   }, states: {
-    ...defaultProps$e.states,
+    ...defaultProps$d.states,
     registrationFormState: {
       validationErrors: {
         options: "Must select an option",
@@ -11544,7 +11193,7 @@ const InputField_stories = {
     scenario: scenario$l,
   },
 };
-const defaultProps$f = {
+const defaultProps$e = {
   states: {
     registrationFormState: {
       validationErrors: {},
@@ -11581,21 +11230,21 @@ const defaultRegisterProps$1 = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-const Default$h = () => index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$f));
-const CustomLabel$2 = () => (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$f, { content: { ...defaultProps$f.content, fieldLabel: "My Label" } })));
-const Error$7 = () => (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$f, { states: {
-    ...defaultProps$f.states,
+const Default$h = () => index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e));
+const CustomLabel$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: { ...defaultProps$e.content, fieldLabel: "My Label" } })));
+const Error$7 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { states: {
+    ...defaultProps$e.states,
     registrationFormState: {
       validationErrors: {
         field: "Cannot be empty",
       },
     },
   } })));
-const CustomError$2 = () => (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$f, { content: {
-    ...defaultProps$f.content,
+const CustomError$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
+    ...defaultProps$e.content,
     errorMessage: "A value must be entered to continue",
   }, states: {
-    ...defaultProps$f.states,
+    ...defaultProps$e.states,
     registrationFormState: {
       validationErrors: {
         field: "Cannot be empty",
@@ -11603,27 +11252,27 @@ const CustomError$2 = () => (index.h(sqmInputFieldView.InputFieldView, Object.as
     },
   } })));
 const DateType = () => {
-  return (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$f, { content: {
-      ...defaultProps$f.content,
+  return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
+      ...defaultProps$e.content,
       fieldLabel: "Date",
       fieldType: "date",
     } })));
 };
 const TelType = () => {
-  return (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$f, { content: {
-      ...defaultProps$f.content,
+  return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
+      ...defaultProps$e.content,
       fieldLabel: "Phone Number",
       fieldType: "tel",
     } })));
 };
-const RegistrationField = () => (index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
+const RegistrationField = () => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
     ...defaultRegisterProps$1.content,
-    formData: index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$f)),
+    formData: index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e)),
   } })));
-const RegistrationFieldCustomLabel = () => (index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
+const RegistrationFieldCustomLabel = () => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
     ...defaultRegisterProps$1.content,
-    formData: (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$f, { content: {
-        ...defaultProps$f.content,
+    formData: (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
+        ...defaultProps$e.content,
         fieldLabel: "Data",
       } }))),
   } })));
@@ -11735,26 +11384,26 @@ const RewardExchangeList_stories = {
   },
 };
 const StoryBase = (props) => () => {
-  return index.h(RewardExchangeListData.RewardExchangeView, Object.assign({}, props));
-};
-const ChooseReward = StoryBase(RewardExchangeListData.rewardExchange);
-const CustomErrorMessage = StoryBase(RewardExchangeListData.rewardExchangeCustomErrorMsg);
-const LongTextRewardExhange = StoryBase(RewardExchangeListData.rewardExchangeLongText);
-const ChooseRewardSelected = StoryBase(RewardExchangeListData.rewardExchangeSelected);
-const ChooseAmount = StoryBase(RewardExchangeListData.chooseAmountFixed);
-const ChooseAmountNoDescription = StoryBase(RewardExchangeListData.chooseAmountFixedNoDescription);
-const ChooseAmountVariableAndStepped = StoryBase(RewardExchangeListData.chooseAmountVariable);
-const ChooseAmountVariableAndSteppedNoDescription = StoryBase(RewardExchangeListData.chooseAmountVariableNoDescription);
-const chooseAmountVariableAndSteppedDisabled = StoryBase(RewardExchangeListData.chooseAmountVariableDisabled);
-const chooseAmountVariableAndSteppedUnavailable = StoryBase(RewardExchangeListData.chooseAmountVariableUnavailable);
-const Confirm = StoryBase(RewardExchangeListData.confirmFixed);
-const ConfirmVariableAndStepped = StoryBase(RewardExchangeListData.confirmVariable);
-const RedemptionError = StoryBase(RewardExchangeListData.redemptionError);
-const QueryError = StoryBase(RewardExchangeListData.queryError);
-const SuccessPromo = StoryBase(RewardExchangeListData.success);
-const SuccessVariableAndStepped = StoryBase(RewardExchangeListData.successVariable);
-const Loading$4 = StoryBase(RewardExchangeListData.loading);
-const Empty$2 = StoryBase(RewardExchangeListData.empty);
+  return index.h(ShadowViewAddon.RewardExchangeView, Object.assign({}, props));
+};
+const ChooseReward = StoryBase(ShadowViewAddon.rewardExchange);
+const CustomErrorMessage = StoryBase(ShadowViewAddon.rewardExchangeCustomErrorMsg);
+const LongTextRewardExhange = StoryBase(ShadowViewAddon.rewardExchangeLongText);
+const ChooseRewardSelected = StoryBase(ShadowViewAddon.rewardExchangeSelected);
+const ChooseAmount = StoryBase(ShadowViewAddon.chooseAmountFixed);
+const ChooseAmountNoDescription = StoryBase(ShadowViewAddon.chooseAmountFixedNoDescription);
+const ChooseAmountVariableAndStepped = StoryBase(ShadowViewAddon.chooseAmountVariable);
+const ChooseAmountVariableAndSteppedNoDescription = StoryBase(ShadowViewAddon.chooseAmountVariableNoDescription);
+const chooseAmountVariableAndSteppedDisabled = StoryBase(ShadowViewAddon.chooseAmountVariableDisabled);
+const chooseAmountVariableAndSteppedUnavailable = StoryBase(ShadowViewAddon.chooseAmountVariableUnavailable);
+const Confirm = StoryBase(ShadowViewAddon.confirmFixed);
+const ConfirmVariableAndStepped = StoryBase(ShadowViewAddon.confirmVariable);
+const RedemptionError = StoryBase(ShadowViewAddon.redemptionError);
+const QueryError = StoryBase(ShadowViewAddon.queryError);
+const SuccessPromo = StoryBase(ShadowViewAddon.success);
+const SuccessVariableAndStepped = StoryBase(ShadowViewAddon.successVariable);
+const Loading$4 = StoryBase(ShadowViewAddon.loading);
+const Empty$2 = StoryBase(ShadowViewAddon.empty);
 
 const RewardExchangeList = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -12067,92 +11716,92 @@ const manyActions$1 = {
   states: { progress: 100, loading: false, loadingEvent: false },
 };
 const TaskCardGrid = () => {
-  return (index.h(sqmCardFeedView.CardFeedView, { width: 347, gap: 24 },
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)),
+  return (index.h(ShadowViewAddon.CardFeedView, { width: 347, gap: 24 },
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)),
     index.h("div", null,
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
+        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1)),
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1)),
     index.h("div", null,
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1))));
+        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1))));
 };
 const TaskCardGridHighGap = () => {
-  return (index.h(sqmCardFeedView.CardFeedView, { width: 400, gap: 150 },
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)),
+  return (index.h(ShadowViewAddon.CardFeedView, { width: 400, gap: 150 },
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)),
     index.h("div", null,
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
+        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1)),
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1)),
     index.h("div", null,
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1))));
+        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1))));
 };
 const TaskCardGridLowGap = () => {
-  return (index.h(sqmCardFeedView.CardFeedView, { width: 400, gap: 12 },
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)),
+  return (index.h(ShadowViewAddon.CardFeedView, { width: 400, gap: 12 },
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)),
     index.h("div", null,
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
+        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1)),
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1)),
     index.h("div", null,
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1))));
+        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1))));
 };
 const TaskCardGridHighWidth = () => {
-  return (index.h(sqmCardFeedView.CardFeedView, { width: 1000, gap: 24 },
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)),
+  return (index.h(ShadowViewAddon.CardFeedView, { width: 1000, gap: 24 },
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)),
     index.h("div", null,
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
+        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1)),
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1)),
     index.h("div", null,
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1))));
+        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1))));
 };
 const TaskCardGridLowWidth = () => {
-  return (index.h(sqmCardFeedView.CardFeedView, { width: 250, gap: 24 },
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)),
+  return (index.h(ShadowViewAddon.CardFeedView, { width: 250, gap: 24 },
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)),
     index.h("div", null,
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
+        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1)),
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1)),
     index.h("div", null,
-      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
-    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1))));
+        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1))));
 };
 const CardFeedGeneric = () => {
-  return (index.h(sqmCardFeedView.CardFeedView, { width: 300, gap: 24 },
+  return (index.h(ShadowViewAddon.CardFeedView, { width: 300, gap: 24 },
     index.h("div", { style: {
         padding: "100px",
         border: "1px dashed black",
@@ -12606,7 +12255,7 @@ const SourceCellDeletedUser = () => {
 const SourceCellDeletedReferral = () => {
   return (index.h("sqm-rewards-table-source-cell", { 
     //@ts-ignore
-    reward: { ...rewardsData$1, ...deletedReferral(null) }, referralText: "Referral to", deletedReferralText: "Deleted Referral" }));
+    reward: { ...rewardsData$1, ...deletedReferral() }, referralText: "Referral to", deletedReferralText: "Deleted Referral" }));
 };
 const StatusCellAvailable = () => {
   return (index.h("sqm-rewards-table-status-cell", { statusText: "Available", reward: rewardsData$1 }));
@@ -13079,12 +12728,6 @@ function setupGraphQLKlip$1({ token, id }) {
 const ReferralTable$1 = createHookStory(() => {
   setupGraphQL$c();
   index_module.setProgramId("sam-partner-test-2");
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-referral-table", null,
     index.h("sqm-referral-table-user-column", null),
     index.h("sqm-referral-table-status-column", null),
@@ -13092,14 +12735,6 @@ const ReferralTable$1 = createHookStory(() => {
     index.h("sqm-referral-table-rewards-column", null)));
 });
 const ReferralTableDemoHook = createHookStory(() => {
-  // setupGraphQL();
-  // setProgramId("sam-partner-test-2");
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-referral-table", null,
     index.h("sqm-referral-table-user-column", null),
     index.h("sqm-referral-table-status-column", null),
@@ -13107,14 +12742,6 @@ const ReferralTableDemoHook = createHookStory(() => {
     index.h("sqm-referral-table-rewards-column", null)));
 });
 const ReferralTableDemoHookShowReferrer = createHookStory(() => {
-  // setupGraphQL();
-  // setProgramId("sam-partner-test-2");
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-referral-table", { "show-referrer": "true" },
     index.h("sqm-referral-table-user-column", null),
     index.h("sqm-referral-table-status-column", null),
@@ -13127,12 +12754,6 @@ const ReferralTableEn = createHookStory(() => {
     id: "samenglish",
   });
   index_module.setProgramId("klip-referral-program");
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-referral-table", { "per-page": "4" },
     index.h("sqm-referral-table-user-column", { "column-title": "User" }),
     index.h("sqm-referral-table-status-column", { "column-title": "Referral Status" }),
@@ -13145,12 +12766,6 @@ const ReferralTableTr = createHookStory(() => {
     id: "samturkey",
   });
   index_module.setProgramId("klip-referral-program");
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-referral-table", { "more-label": "Daha", "prev-label": "\u00D6ncesi", "empty-state-text": "Hen\u00FCz \u00D6d\u00FCl Yok", "per-page": "4" },
     index.h("sqm-referral-table-user-column", { "column-title": "Kullan\u0131c\u0131lar", "anonymous-user": "Anonim Kullan\u0131c\u0131", "deleted-user": "Silinmi\u015F Kullan\u0131c\u0131" }),
     index.h("sqm-referral-table-status-column", { "column-title": "Durumu", "converted-status-text": "D\u00F6n\u00FC\u015Ft\u00FCr", "in-progress-status-text": "Devam etmekte" }),
@@ -13163,12 +12778,6 @@ const ReferralTableFr = createHookStory(() => {
     id: "samfrench",
   });
   index_module.setProgramId("klip-referral-program");
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-referral-table", { "more-label": "Plus", "prev-label": "Pr\u00E9c\u00E9dent", "empty-state-text": "Aucune R\u00E9f\u00E9rence Maintenant", "per-page": "4" },
     index.h("sqm-referral-table-user-column", { "column-title": "Utilisateur", "anonymous-user": "Utilisateur Anonyme", "deleted-user": "Utilisateur Supprim\u00E9" }),
     index.h("sqm-referral-table-status-column", { "column-title": "Statut de Parrainage", "converted-status-text": "Converti", "in-progress-status-text": "En cours" }),
@@ -14591,7 +14200,7 @@ const EmailRegistration_stories = {
   // scenario,
   },
 };
-const defaultProps$g = {
+const defaultProps$f = {
   states: {
     error: "",
     loading: false,
@@ -14610,59 +14219,59 @@ const defaultProps$g = {
     fraudErrorMessageTitle: "Looks like you tried referring yourself",
   },
 };
-const Default$i = () => index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, defaultProps$g));
+const Default$i = () => index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, defaultProps$f));
 const HasFirstNameLastName = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$g,
+  ...defaultProps$f,
   content: {
-    ...defaultProps$g.content,
+    ...defaultProps$f.content,
     includeName: true,
   },
 })));
 const WithSlots = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$g,
+  ...defaultProps$f,
   content: {
-    ...defaultProps$g.content,
+    ...defaultProps$f.content,
     topSlot: index.h("div", null, "Hello this is the top slot"),
     bottomSlot: index.h("div", null, "Hello this is the bottom slot"),
   },
 })));
 const NoBorder$1 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$g,
+  ...defaultProps$f,
   content: {
-    ...defaultProps$g.content,
+    ...defaultProps$f.content,
     hideBorder: true,
   },
 })));
 const BackgroundColor$2 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$g,
+  ...defaultProps$f,
   content: {
-    ...defaultProps$g.content,
+    ...defaultProps$f.content,
     backgroundColor: "aquamarine",
   },
 })));
 const Loading$5 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$g,
+  ...defaultProps$f,
   states: {
     error: "",
     loading: true,
   },
 })));
 const Error$a = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$g,
+  ...defaultProps$f,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
   },
 })));
 const FraudError = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$g,
+  ...defaultProps$f,
   states: {
     error: "FRAUD",
     loading: false,
   },
 })));
 const EmptyEmailError = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$g,
+  ...defaultProps$f,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -14694,7 +14303,7 @@ const CouponCode_stories = {
     scenario: scenario$C,
   },
 };
-const defaultProps$h = {
+const defaultProps$g = {
   tooltiptext: "Copied to Clipboard",
   copyString: "THANKSJANE125uv125",
   open: false,
@@ -14719,43 +14328,43 @@ const TextAlignRight$3 = () => {
   return index.h("sqm-coupon-code", { textAlign: "right" });
 };
 const CopyButton$3 = () => {
-  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$h, { buttonStyle: "button-outside" })));
+  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-outside" })));
 };
 const CopyButtonCustomLabel = () => {
-  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$h, { buttonStyle: "button-outside", "copy-button-label": "test long custom label" })));
+  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-outside", "copy-button-label": "test long custom label" })));
 };
 const CopyButtonBelow$3 = () => {
-  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$h, { buttonStyle: "button-below" })));
+  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-below" })));
 };
 const CopyButtonBelowCustomLabel = () => {
-  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$h, { buttonStyle: "button-below", "copy-button-label": "test long custom label" })));
+  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-below", "copy-button-label": "test long custom label" })));
 };
 const Loading$6 = () => {
-  return index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$h, { loading: true }));
+  return index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { loading: true }));
 };
 const CopyButtonLoading = () => {
-  return (index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$h, { buttonStyle: "button-outside", loading: true })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { buttonStyle: "button-outside", loading: true })));
 };
 const CopyButtonBelowLoading = () => {
-  return (index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$h, { buttonStyle: "button-below", loading: true })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { buttonStyle: "button-below", loading: true })));
 };
 const ErrorGeneric = () => {
-  return (index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$h, { errorType: "warning", error: true, errorText: "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue." })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "warning", error: true, errorText: "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue." })));
 };
 const ErrorPending = () => {
-  return (index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$h, { errorType: "info", error: true, errorText: "Your code will be available on April 24, 2023. Mark your calendar and come back then to redeem your reward!" })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "info", error: true, errorText: "Your code will be available on April 24, 2023. Mark your calendar and come back then to redeem your reward!" })));
 };
 const ErrorFullfillment = () => {
-  return (index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$h, { errorType: "warning", error: true, errorText: "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue." })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "warning", error: true, errorText: "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue." })));
 };
 const ErrorCancelled = () => {
-  return (index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$h, { errorType: "warning", error: true, errorText: "This code has been cancelled. Please reach out to the Support team for help resolving this issue." })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "warning", error: true, errorText: "This code has been cancelled. Please reach out to the Support team for help resolving this issue." })));
 };
 const ErrorExpired = () => {
-  return (index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$h, { errorType: "warning", error: true, errorText: "Looks like this code has expired. Please reach out to the Support team for help resolving this issue." })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "warning", error: true, errorText: "Looks like this code has expired. Please reach out to the Support team for help resolving this issue." })));
 };
 const ErrorRedeemed = () => {
-  return (index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$h, { errorType: "success", error: true, errorText: "Looks like you\u2019ve already redeemed this code." })));
+  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "success", error: true, errorText: "Looks like you\u2019ve already redeemed this code." })));
 };
 
 const CouponCode$1 = /*#__PURE__*/Object.freeze({
@@ -14789,7 +14398,7 @@ const LogoutCurrentUser_stories = {
     scenario: scenario$D,
   },
 };
-const defaultProps$i = {
+const defaultProps$h = {
   filledInEmailText: "Currently showing referral data for noah.clarke@saasquatch.com",
   onSwitchClick: () => console.log("clicked"),
   switchUserText: "not you?",
@@ -14797,7 +14406,7 @@ const defaultProps$i = {
   emailErrorText: "Error fetching email",
 };
 const Default$j = () => {
-  return index.h(sqmLogoutCurrentUserView.LogoutCurrentUserView, Object.assign({}, defaultProps$i));
+  return index.h(sqmLogoutCurrentUserView.LogoutCurrentUserView, Object.assign({}, defaultProps$h));
 };
 
 const LogoutCurrentUser = /*#__PURE__*/Object.freeze({
@@ -14814,16 +14423,16 @@ const LinkButton_stories = {
     scenario: scenario$E,
   },
 };
-const defaultProps$j = {
+const defaultProps$i = {
   link: "https://example.com",
   openInNewTab: false,
   buttonText: "Button Text",
 };
 const Default$k = () => {
-  return index.h("sqm-link-button", Object.assign({}, defaultProps$j));
+  return index.h("sqm-link-button", Object.assign({}, defaultProps$i));
 };
 const OpenInNewTab = () => {
-  return (index.h("sqm-link-button", Object.assign({}, { ...defaultProps$j, openInNewTab: true })));
+  return (index.h("sqm-link-button", Object.assign({}, { ...defaultProps$i, openInNewTab: true })));
 };
 
 const LinkButton = /*#__PURE__*/Object.freeze({
@@ -14839,7 +14448,7 @@ const CloseButton_stories = {
   // scenario,
   },
 };
-const defaultProps$k = {};
+const defaultProps$j = {};
 const containerStyles = {
   position: "relative",
   width: "500px",
@@ -14848,15 +14457,15 @@ const containerStyles = {
   padding: "25px",
 };
 const Default$l = () => {
-  return index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$k));
+  return index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$j));
 };
 const InAContainer = () => {
   return (index.h("div", { style: containerStyles },
-    index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$k))));
+    index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$j))));
 };
 const CustomColor$1 = () => {
   return (index.h("div", { style: containerStyles },
-    index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, { ...defaultProps$k, color: "blue" }))));
+    index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, { ...defaultProps$j, color: "blue" }))));
 };
 
 const CloseButton = /*#__PURE__*/Object.freeze({
@@ -14899,10 +14508,10 @@ const style$1 = {
     border: "1px solid var(--sl-color-gray-200)",
   },
 };
-const sheet$2 = JSS.createStyleSheet(style$1);
-const styleString$1 = sheet$2.toString();
+const sheet$1 = JSS.createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
 const DocusignExpiredView = (props) => {
-  const { classes } = sheet$2;
+  const { classes } = sheet$1;
   const { text } = props;
   return (index.h("div", null,
     index.h("style", { type: "text/css" }, styleString$1),
@@ -14949,13 +14558,13 @@ const registeredInCanada = {
   text: indirectDetailsSlotText,
 };
 const RegisteredInOtherRegion = () => {
-  return index.h(IndirectTaxDetailsView.OtherRegionSlotView, Object.assign({}, registeredInOtherRegion));
+  return index.h(sqmInvoiceTableView.OtherRegionSlotView, Object.assign({}, registeredInOtherRegion));
 };
 const RegisteredInCanada = () => {
   return index.h(IndirectDetailsSlotView, Object.assign({}, registeredInCanada));
 };
 const RegisteredInOtherRegionWithErrors = () => {
-  return (index.h(IndirectTaxDetailsView.OtherRegionSlotView, Object.assign({}, registeredInOtherRegion, { states: {
+  return (index.h(sqmInvoiceTableView.OtherRegionSlotView, Object.assign({}, registeredInOtherRegion, { states: {
       ...registeredInOtherRegion.states,
       formState: {
         ...registeredInOtherRegion.states.formState,
@@ -15011,8 +14620,8 @@ const style$2 = {
     gap: "var(--sl-spacing-small)",
   },
 };
-const sheet$3 = JSS.createStyleSheet(style$2);
-const styleString$2 = sheet$3.toString();
+const sheet$2 = JSS.createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
 const vanillaStyle = `
     :host{
       display: block;   
@@ -15036,14 +14645,14 @@ const RadioCardView = ({ title, icon, description, selected, }) => {
   const border = selected
     ? "1px solid var(--sl-color-primary-500)"
     : "1px solid #CACFD3";
-  return (index.h("div", { part: "sqm-base", class: sheet$3.classes.Container, style: {
+  return (index.h("div", { part: "sqm-base", class: sheet$2.classes.Container, style: {
       border,
     } },
     index.h("style", { type: "text/css" },
       styleString$2,
       vanillaStyle),
     index.h("sl-checkbox", { checked: selected }),
-    index.h("div", { part: "sqm-title-container", class: sheet$3.classes.TitleContainer },
+    index.h("div", { part: "sqm-title-container", class: sheet$2.classes.TitleContainer },
       index.h("sl-icon", { name: icon }),
       index.h("p", null, title)),
     index.h("p", null, description)));
@@ -15052,17 +14661,17 @@ const RadioCardView = ({ title, icon, description, selected, }) => {
 const RadioCard_stories = {
   title: "Components/Radio Card",
 };
-const defaultProps$l = {
+const defaultProps$k = {
   selected: false,
   title: "Card Title",
   description: "Description text goes here",
   icon: "apple",
 };
 const DefaultView$1 = () => {
-  return index.h(RadioCardView, Object.assign({}, defaultProps$l));
+  return index.h(RadioCardView, Object.assign({}, defaultProps$k));
 };
 const Selected = () => {
-  return index.h(RadioCardView, Object.assign({}, defaultProps$l, { selected: true }));
+  return index.h(RadioCardView, Object.assign({}, defaultProps$k, { selected: true }));
 };
 
 const RadioCard = /*#__PURE__*/Object.freeze({
@@ -15075,13 +14684,13 @@ const RadioCard = /*#__PURE__*/Object.freeze({
 const ProgressBar_stories = {
   title: "Components/Progress Bar",
 };
-const defaultProps$m = {
+const defaultProps$l = {
   progress: 2,
   goal: 4,
   steps: true,
 };
 const TaxAndPayoutsProgressBar = () => {
-  return index.h(RewardExchangeListData.ProgressBar, Object.assign({}, defaultProps$m, { stageCount: 4, currentStage: 2 }));
+  return index.h(ShadowViewAddon.ProgressBar, Object.assign({}, defaultProps$l, { stageCount: 4, currentStage: 2 }));
 };
 
 const ProgressBar$1 = /*#__PURE__*/Object.freeze({
@@ -15161,6 +14770,7 @@ const bankingFormProps = {
     currency: "USD",
     loadingError: false,
     email: "test@example.com",
+    showModal: false,
   },
   callbacks: {
     onVerificationHide: () => { },
@@ -15170,6 +14780,8 @@ const bankingFormProps = {
     setPaymentScheduleChecked: () => { },
     setCountrySearch: () => { },
     onBack: async () => console.log("back"),
+    onModalOpen: () => { },
+    onModalClose: () => { },
   },
   refs: { formRef: { current: null } },
 };
@@ -15490,6 +15102,15 @@ const BankingInfoFormVerififyIdentityModal = () => {
       },
     } }));
 };
+const BankingInfoFormModalOpen = () => {
+  return (index.h("sqm-banking-info-form", { demoData: {
+      ...bankingFormProps,
+      states: {
+        ...bankingFormProps.states,
+        showModal: true,
+      },
+    } }));
+};
 
 const BankingInfoForm = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -15516,7 +15137,8 @@ const BankingInfoForm = /*#__PURE__*/Object.freeze({
   BankingInfoFormWithFixedDayPaymentSchedule: BankingInfoFormWithFixedDayPaymentSchedule,
   BankingInfoFormWithFixedDayPaymentScheduleWithError: BankingInfoFormWithFixedDayPaymentScheduleWithError,
   BankingInfoFormWithFixedDayPaymentScheduleLoading: BankingInfoFormWithFixedDayPaymentScheduleLoading,
-  BankingInfoFormVerififyIdentityModal: BankingInfoFormVerififyIdentityModal
+  BankingInfoFormVerififyIdentityModal: BankingInfoFormVerififyIdentityModal,
+  BankingInfoFormModalOpen: BankingInfoFormModalOpen
 });
 
 const InvoiceTableCell_stories = {
@@ -15739,12 +15361,6 @@ function setupGraphQL$d() {
 const InvoiceTable$1 = createHookStory(() => {
   setupGraphQL$d();
   index_module.setProgramId("22999");
-  const props = {
-    listType: "",
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  };
   return (index.h("sqm-invoice-table", null,
     index.h("sqm-invoice-table-download-column", null),
     index.h("sqm-invoice-table-date-column", { "column-title": "Date" }),
@@ -15773,7 +15389,7 @@ const UseInvoiceTableCells = /*#__PURE__*/Object.freeze({
 const WidgetEmailVerification_stories = {
   title: "Components/Widget Email Verification",
 };
-const defaultProps$n = {
+const defaultProps$m = {
   email: "",
   error: false,
   loading: false,
@@ -15788,19 +15404,19 @@ const EmailIsPrefilled = () => (index.h("div", null,
     index.h("sub", null, "To get your cash paid out directly to your bank account, please complete your account setup")),
   index.h("sqm-email-verification", { demoData: {
       states: {
-        ...defaultProps$n,
+        ...defaultProps$m,
         email: "test@example.com",
       },
     } })));
 const Loading$8 = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$n,
+      ...defaultProps$m,
       initialLoading: true,
     },
   } }));
 const SaveLoading = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$n,
+      ...defaultProps$m,
       loading: true,
     },
   } }));
@@ -15811,19 +15427,19 @@ const WithHeader$1 = () => (index.h("div", null,
     index.h("sub", null, "To get your cash paid out directly to your bank account, please complete your account setup")),
   index.h("sqm-email-verification", { demoData: {
       states: {
-        ...defaultProps$n,
+        ...defaultProps$m,
         email: "test@example.com",
       },
     } })));
 const InvalidEmail = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$n,
+      ...defaultProps$m,
       error: true,
     },
   } }));
 const SendCodeError = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$n,
+      ...defaultProps$m,
       sendCodeError: true,
     },
   } }));
@@ -15843,35 +15459,35 @@ const WidgetEmailVerification = /*#__PURE__*/Object.freeze({
 const WidgetCodeVerification_stories = {
   title: "Components/Widget Code Verification",
 };
-const defaultProps$o = {
+const defaultProps$n = {
   initialiseLoading: false,
   email: "testemail@example.com",
   loading: false,
   verifyFailed: false,
   emailResent: false,
 };
-const Default$n = () => (index.h("sqm-code-verification", { demoData: { states: defaultProps$o } }));
+const Default$n = () => (index.h("sqm-code-verification", { demoData: { states: defaultProps$n } }));
 const InitialLoading = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$o,
+      ...defaultProps$n,
       initialiseLoading: true,
     },
   } }));
 const Loading$9 = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$o,
+      ...defaultProps$n,
       loading: true,
     },
   } }));
 const CodeResent = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$o,
+      ...defaultProps$n,
       emailResent: true,
     },
   } }));
 const VerificationFailed = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$o,
+      ...defaultProps$n,
       verifyFailed: true,
     },
   } }));
@@ -15889,17 +15505,17 @@ const WidgetCodeVerification = /*#__PURE__*/Object.freeze({
 const PayoutButtonScroll_stories = {
   title: "Components/Payout Scroll Button",
 };
-const defaultProps$p = {
+const defaultProps$o = {
   payoutSettingsComplete: true,
 };
-const CompletedTaxForm = () => (index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$p, payoutSettingsComplete: true } } }));
+const CompletedTaxForm = () => (index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$o, payoutSettingsComplete: true } } }));
 const CompletedTaxFormWithStatsContainer = () => (index.h("sqm-portal-container", { display: "flex", maxWidth: "100%", minWidth: "100%", "justify-content": "space-between", flexWrap: "nowrap" },
   index.h("sqm-portal-container", { display: "flex", "max-width": "fit-content" },
     index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
       index.h("p", null, "Referrals")),
     index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/payoutBalance" },
       index.h("p", null, "Cash Balance"))),
-  index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$p, payoutSettingsComplete: true } } })));
+  index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$o, payoutSettingsComplete: true } } })));
 
 const PayoutButtonScroll = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -15911,20 +15527,20 @@ const PayoutButtonScroll = /*#__PURE__*/Object.freeze({
 const PayoutStatusAlert_stories = {
   title: "Components/Payout Status Alert",
 };
-const defaultProps$q = {
+const defaultProps$p = {
   error: false,
   status: "INFORMATION_REQUIRED",
   loading: false,
   veriffLoading: false,
 };
-const InformationRequired = () => (index.h("sqm-payout-status-alert", { demoData: { states: defaultProps$q } }));
-const VerifyIdentity = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$q, status: "VERIFICATION:REQUIRED" } } }));
-const VerifyIdentityRequiredInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$q, status: "VERIFICATION:INTERNAL" } } }));
-const VerifyIdentityReviewInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$q, status: "VERIFICATION:REVIEW" } } }));
-const VerifyIdentityFailedInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$q, status: "VERIFICATION:FAILED" } } }));
-const Hold = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$q, status: "HOLD" } } }));
-const Loading$a = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$q, loading: true } } }));
-const Error$b = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$q, error: true } } }));
+const InformationRequired = () => (index.h("sqm-payout-status-alert", { demoData: { states: defaultProps$p } }));
+const VerifyIdentity = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$p, status: "VERIFICATION:REQUIRED" } } }));
+const VerifyIdentityRequiredInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$p, status: "VERIFICATION:INTERNAL" } } }));
+const VerifyIdentityReviewInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$p, status: "VERIFICATION:REVIEW" } } }));
+const VerifyIdentityFailedInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$p, status: "VERIFICATION:FAILED" } } }));
+const Hold = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$p, status: "HOLD" } } }));
+const Loading$a = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$p, loading: true } } }));
+const Error$b = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$p, error: true } } }));
 
 const PayoutStatusAlert = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -16018,7 +15634,7 @@ const ReferralCodes$1 = /*#__PURE__*/Object.freeze({
 const BaseRegistrationForm_stories = {
   title: "Components/Microsite Base Registration",
 };
-const defaultProps$r = {
+const defaultProps$q = {
   states: {
     error: "",
   },
@@ -16038,13 +15654,13 @@ const defaultProps$r = {
   },
 };
 const errorProps$a = {
-  ...defaultProps$r,
+  ...defaultProps$q,
   states: {
     error: "Something went wrong. Please try again.",
   },
 };
 const Default$o = () => {
-  return index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, Object.assign({}, defaultProps$r));
+  return index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, Object.assign({}, defaultProps$q));
 };
 const EmailError = () => {
   return index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, Object.assign({}, errorProps$a));
@@ -16060,7 +15676,7 @@ const BaseRegistrationForm = /*#__PURE__*/Object.freeze({
 const PortalGoogleRegistrationForm_stories = {
   title: "Components/Microsite Google Register",
 };
-const defaultProps$s = {
+const defaultProps$r = {
   states: {
     error: "",
     loading: false,
@@ -16086,7 +15702,7 @@ const defaultProps$s = {
     passwordField: null,
     formData: (index.h("div", null,
       " ",
-      index.h(sqmNameFieldsView.NameFieldsView, { states: {
+      index.h(ShadowViewAddon.NameFieldsView, { states: {
           registrationFormState: {
             validationErrors: undefined,
             disabled: true,
@@ -16105,7 +15721,7 @@ const defaultProps$s = {
   },
 };
 const errorProps$b = {
-  ...defaultProps$s,
+  ...defaultProps$r,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -16121,7 +15737,7 @@ const errorProps$b = {
   },
 };
 const loadingProps$8 = {
-  ...defaultProps$s,
+  ...defaultProps$r,
   states: {
     error: "",
     loading: true,
@@ -16136,11 +15752,11 @@ const loadingProps$8 = {
     },
   },
 };
-const Default$p = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$s)));
+const Default$p = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$r)));
 const RegisterWithError$2 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, errorProps$b)));
 const RegisterLoading$2 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, loadingProps$8)));
-const TermsAndConditions$4 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$s, { content: {
-    ...defaultProps$s.content,
+const TermsAndConditions$4 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$r, { content: {
+    ...defaultProps$r.content,
     terms: (index.h("p", null,
       "By signing up you agree to the",
       " ",
@@ -16159,7 +15775,7 @@ const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
 const QRCode_stories = {
   title: "Components/QR Code",
 };
-const defaultProps$t = {
+const defaultProps$s = {
   hideTitle: false,
   loading: false,
   alignment: "center",
@@ -16178,28 +15794,28 @@ const defaultProps$t = {
   errorDescriptionText: "Please refresh this page and try again",
 };
 const Default$q = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s));
 };
 const HideTitle = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t, { hideTitle: true }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { hideTitle: true }));
 };
 const LeftAlign$1 = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t, { alignment: "left" }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { alignment: "left" }));
 };
 const CenterAlign = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t, { alignment: "center" }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { alignment: "center" }));
 };
 const RightAlign$1 = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t, { alignment: "right" }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { alignment: "right" }));
 };
 const Loading$c = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t, { loading: true }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { loading: true }));
 };
 const Error$c = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t, { error: true }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { error: true }));
 };
 const DownloadError = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t, { error: true }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { error: true }));
 };
 
 const QRCode = /*#__PURE__*/Object.freeze({
@@ -16232,29 +15848,29 @@ const Default$r = `
 `;
 const Orangey = `
 :root{
-    ${AutoColor.autoColorScaleCss("orange")}
+    ${ShadowViewAddon.autoColorScaleCss("orange")}
 }
 `;
 const Netflix = `
 :root{
-    ${AutoColor.autoColorScaleCss("#e50914")}
+    ${ShadowViewAddon.autoColorScaleCss("#e50914")}
 }
 `;
 const SaaSquatchCorporate = `
 :root{
-    ${AutoColor.autoColorScaleCss("#65bd60")}
+    ${ShadowViewAddon.autoColorScaleCss("#65bd60")}
     --sl-font-sans: Arial;
 }
 `;
 const NYTimes = `
 :root{
-    ${AutoColor.autoColorScaleCss("black")}
+    ${ShadowViewAddon.autoColorScaleCss("black")}
     --sl-font-sans: Georgia, 'Times New Roman', serif;
 }
 `;
 const Klip = `
 :root{
-    ${AutoColor.autoColorScaleCss("#4225C4")};
+    ${ShadowViewAddon.autoColorScaleCss("#4225C4")};
 }
 
 `;
@@ -17595,7 +17211,7 @@ const mergeHTMLPlugin = {
 /**
  * @param {Node} node
  */
-function tag$1(node) {
+function tag(node) {
   return node.nodeName.toLowerCase();
 }
 
@@ -17619,7 +17235,7 @@ function nodeStream(node) {
         // Prevent void elements from having an end tag that would actually
         // double them in the output. There are more void elements in HTML
         // but we list only those realistically expected in code display.
-        if (!tag$1(child).match(/br|hr|img|input/)) {
+        if (!tag(child).match(/br|hr|img|input/)) {
           result.push({
             event: 'stop',
             offset: offset,
@@ -17678,14 +17294,14 @@ function mergeStreams(original, highlighted, value) {
       return ' ' + attr.nodeName + '="' + escapeHTML(attr.value) + '"';
     }
     // @ts-ignore
-    result += '<' + tag$1(node) + [].map.call(node.attributes, attributeString).join('') + '>';
+    result += '<' + tag(node) + [].map.call(node.attributes, attributeString).join('') + '>';
   }
 
   /**
    * @param {Node} node
    */
   function close(node) {
-    result += '</' + tag$1(node) + '>';
+    result += '</' + tag(node) + '>';
   }
 
   /**
@@ -18936,7 +18552,7 @@ const stories = [
   LinkButton,
   EmailRegistration,
   CloseButton,
-  TaxForm_stories.TaxForm,
+  sqmInvoiceTableView.TaxForm,
   RadioCard,
   ProgressBar$1,
   TaxFormSlots,