@saasquatch/mint-components 1.14.3-6 → 1.14.3

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

@@ -2,42 +2,72 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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');
+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');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -691,7 +721,7 @@ var StyleSheet = /*#__PURE__*/function () {
       _this.tags.push(tag);
     };
 
-    this.isSpeedy = options.speedy === undefined ? "production" === 'production' : options.speedy;
+    this.isSpeedy = options.speedy === undefined ? "development" === '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
@@ -718,6 +748,18 @@ 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);
 
@@ -726,6 +768,9 @@ 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));
@@ -741,12 +786,31 @@ 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 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 ""}))}}
+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;
+  };
+};
 
 function memoize(fn) {
   var cache = Object.create(null);
@@ -756,6 +820,10 @@ 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;
@@ -857,12 +925,79 @@ 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)
@@ -888,6 +1023,13 @@ 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;
@@ -912,9 +1054,28 @@ 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,  le(function (rule) {
+    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) {
       currentSheet.insert(rule);
     })];
     var serializer = oe(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
@@ -926,6 +1087,14 @@ 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) {
@@ -1055,6 +1224,8 @@ 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;
 
@@ -1095,12 +1266,43 @@ 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;
   }
@@ -1140,6 +1342,10 @@ function handleInterpolation(mergedProps, registered, interpolation) {
 
           var styles = interpolation.styles + ";";
 
+          if ("development" !== 'production' && interpolation.map !== undefined) {
+            styles += interpolation.map;
+          }
+
           return styles;
         }
 
@@ -1153,10 +1359,28 @@ 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)
 
 
@@ -1186,7 +1410,7 @@ function createStringFromObject(mergedProps, registered, obj) {
           string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
         }
       } else {
-        if (_key === 'NO_COMPONENT_SELECTOR' && "production" !== 'production') {
+        if (_key === 'NO_COMPONENT_SELECTOR' && "development" !== 'production') {
           throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
         }
 
@@ -1209,6 +1433,9 @@ function createStringFromObject(mergedProps, registered, obj) {
 
             default:
               {
+                if ("development" !== 'production' && _key === 'undefined') {
+                  console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
+                }
 
                 string += _key + "{" + interpolated + "}";
               }
@@ -1222,6 +1449,11 @@ 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
 
 
@@ -1240,6 +1472,9 @@ 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
@@ -1249,11 +1484,23 @@ 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 = '';
@@ -1266,6 +1513,19 @@ 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,
@@ -1333,6 +1593,9 @@ 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;
   };
@@ -1451,9 +1714,18 @@ var classnames = function classnames(args) {
 var _createEmotion = createEmotion({
   key: 'css'
 }),
-    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}}
+    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}}
 
 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";
 
@@ -1468,37 +1740,37 @@ const WithIconPrefix = () => {
     medium: "whatsapp",
     iconslot: "prefix",
   };
-  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
+  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithIconSuffix = () => {
   const props = { medium: "whatsapp", iconslot: "suffix" };
-  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
+  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithIconOverride = () => {
   const props = {
     medium: "facebook",
     icon: "person-badge",
   };
-  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
+  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Share");
 };
 const TextStyle = () => {
   const props = {
     medium: "facebook",
     type: "text",
   };
-  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
+  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithoutIcon = () => {
   const props = { medium: "facebook", hideicon: true };
-  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
+  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithoutText = () => {
   const props = { medium: "facebook", hidetext: true };
-  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
+  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Share");
 };
 const TextStyleWithoutIcon = () => {
   const props = { medium: "facebook", type: "text", hideicon: true };
-  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
+  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithCustomColors = () => {
   const props = {
@@ -1508,7 +1780,7 @@ const WithCustomColors = () => {
     textcolor: "yellow",
     iconslot: "prefix",
   };
-  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Facebook");
+  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Facebook");
 };
 const WithCustomBorderRadius = () => {
   const props = {
@@ -1517,7 +1789,7 @@ const WithCustomBorderRadius = () => {
     borderradius: 8,
     iconslot: "prefix",
   };
-  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Facebook");
+  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Facebook");
 };
 const LinkLocationTest = () => {
   const props = {
@@ -1526,7 +1798,7 @@ const LinkLocationTest = () => {
     onClick: undefined,
     messageLink: "https://www.example.com",
   };
-  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Click me");
+  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Click me");
 };
 const FullStackIcon = () => {
   return (index.h("div", null,
@@ -1651,6 +1923,11 @@ 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);
 };
@@ -1754,7 +2031,7 @@ const BigStat_stories = {
 };
 const Default$2 = () => {
   const props = { value: 990000, statvalue: "9.900,00", loading: false };
-  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
 };
 const LeftAlign = () => {
   const props = {
@@ -1763,7 +2040,7 @@ const LeftAlign = () => {
     alignment: "left",
     loading: false,
   };
-  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
 };
 const RightAlign = () => {
   const props = {
@@ -1772,7 +2049,7 @@ const RightAlign = () => {
     alignment: "right",
     loading: false,
   };
-  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
 };
 const FlexReverse = () => {
   const props = {
@@ -1781,7 +2058,7 @@ const FlexReverse = () => {
     flexReverse: true,
     loading: false,
   };
-  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
 };
 const FlexReverseRight = () => {
   const props = {
@@ -1791,7 +2068,7 @@ const FlexReverseRight = () => {
     alignment: "right",
     loading: false,
   };
-  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
 };
 const FlexReverseLeft = () => {
   const props = {
@@ -1801,7 +2078,7 @@ const FlexReverseLeft = () => {
     alignment: "left",
     loading: false,
   };
-  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
 };
 const NoStatValue = () => {
   const props = {
@@ -1809,7 +2086,7 @@ const NoStatValue = () => {
     statvalue: "...",
     loading: false,
   };
-  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
 };
 const InvalidStatValue = () => {
   const props = {
@@ -1817,7 +2094,7 @@ const InvalidStatValue = () => {
     statvalue: "!!!",
     loading: false,
   };
-  return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
+  return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
 };
 const MultipleStats = () => {
   return (index.h("sqm-stat-container", { space: "xxx-large", display: "flex" },
@@ -2007,6 +2284,7 @@ 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" })),
 };
@@ -2725,7 +3003,7 @@ function setupLoggedOut() {
 const PortalFrame_stories = {
   title: "Components/Microsite Frame",
 };
-const defaultProps = {
+const defaultProps$1 = {
   data: {
     footer: index.h("span", null, "example@example.com"),
     header: (index.h("div", { slot: "header", style: { display: "flex", flexDirection: "column" } },
@@ -2742,9 +3020,9 @@ const defaultProps = {
 };
 const FrameWithMenu = () => {
   const props = {
-    ...defaultProps,
+    ...defaultProps$1,
   };
-  return (index.h(ShadowViewAddon.PortalFrameView, Object.assign({}, props),
+  return (index.h(sqmPortalFrameView.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"),
@@ -2753,9 +3031,9 @@ const FrameWithMenu = () => {
 };
 const FrameWithoutMenu = () => {
   const props = {
-    ...defaultProps,
+    ...defaultProps$1,
   };
-  return index.h(ShadowViewAddon.PortalFrameView, Object.assign({}, props));
+  return index.h(sqmPortalFrameView.PortalFrameView, Object.assign({}, props));
 };
 const FullStackFrame = () => {
   var _a;
@@ -2820,7 +3098,7 @@ const PortalFrame = /*#__PURE__*/Object.freeze({
 const EditProfileForm_stories = {
   title: "Components/Edit Profile Form",
 };
-const defaultProps$1 = {
+const defaultProps$2 = {
   states: {
     loading: false,
     submitDisabled: false,
@@ -2863,15 +3141,15 @@ const defaultProps$1 = {
   },
 };
 const EditProfileFormDisabled = () => {
-  const props = defaultProps$1;
-  return index.h(ShadowViewAddon.EditProfileView, Object.assign({}, props));
+  const props = defaultProps$2;
+  return index.h(sqmEditProfileView.EditProfileView, Object.assign({}, props));
 };
 const EditProfileFormEnabled = () => {
   const props = {
-    ...defaultProps$1,
-    states: { ...defaultProps$1.states, showEdit: true },
+    ...defaultProps$2,
+    states: { ...defaultProps$2.states, showEdit: true },
   };
-  return index.h(ShadowViewAddon.EditProfileView, Object.assign({}, props));
+  return index.h(sqmEditProfileView.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 }));
@@ -2912,7 +3190,7 @@ function setupGraphQL$1() {
 }
 const BareBonesView = createHookStory(() => {
   setupGraphQL$1();
-  const res = ShadowViewAddon.useShareLink({
+  const res = useShareLink.useShareLink({
     programId: "klip-referral-program",
     tooltiplifespan: 0,
     tooltiptext: "",
@@ -2924,7 +3202,7 @@ const BareBonesView = createHookStory(() => {
 });
 const RegularView = createHookStory(() => {
   setupGraphQL$1();
-  return (index.h(copyTextView.CopyTextView, Object.assign({}, ShadowViewAddon.useShareLink({
+  return (index.h(copyTextView.CopyTextView, Object.assign({}, useShareLink.useShareLink({
     programId: "klip-referral-program",
     tooltiptext: "Copied to clipboard",
     tooltiplifespan: 1000,
@@ -2932,7 +3210,7 @@ const RegularView = createHookStory(() => {
 });
 const FastTooltip = createHookStory(() => {
   setupGraphQL$1();
-  return (index.h(copyTextView.CopyTextView, Object.assign({}, ShadowViewAddon.useShareLink({
+  return (index.h(copyTextView.CopyTextView, Object.assign({}, useShareLink.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,
@@ -2976,11 +3254,11 @@ const BareBonesView$1 = createHookStory(() => {
   setupGraphQL$2();
   const programId = "sam-partner-test-2";
   const res = [
-    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" }),
+    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" }),
   ];
   return (index.h("div", null, res.map((r) => (index.h("div", null,
     index.h("button", { onClick: r.onClick },
@@ -3048,7 +3326,7 @@ const View = (statType, format, label) => {
 };
 const DemoView = () => {
   const [type, setType] = stencilHooks_module.useState("/someRandomThing/with/someArguments/1234");
-  const { props, label } = ShadowViewAddon.useDemoBigStat({
+  const { props, label } = useDemoBigStat.useDemoBigStat({
     statType: type,
     render: () => { },
     disconnectedCallback: () => { },
@@ -3061,7 +3339,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(ShadowViewAddon.BigStatView, Object.assign({}, props), label))));
+      index.h(sqmBigStatView.BigStatView, Object.assign({}, props), label))));
 };
 const Demo = createHookStory(DemoView);
 const ReferralsCount = createHookStory(() => View("/referralsCount", "/(referralsCount)/:status?"));
@@ -3574,6 +3852,12 @@ 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(() => {
@@ -3681,6 +3965,14 @@ 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),
@@ -3690,6 +3982,12 @@ 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),
@@ -3699,6 +3997,12 @@ 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),
@@ -3711,6 +4015,12 @@ 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),
@@ -3723,6 +4033,12 @@ 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 {}}" }),
@@ -3735,6 +4051,12 @@ 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 {}}" }),
@@ -3782,10 +4104,22 @@ 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" },
@@ -3821,8 +4155,8 @@ const style = {
     "text-decoration": "underline",
   },
 };
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
+const sheet$1 = JSS.createStyleSheet(style);
+const styleString = sheet$1.toString();
 const item1Props = {
   states: {
     active: false,
@@ -3907,7 +4241,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(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
           labelMargin: "xx-small",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -3915,13 +4249,13 @@ const Dashboard = () => {
           content: (index.h("sqm-text", null,
             index.h("h1", null, "John Smith"))),
         })),
-        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(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(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
-        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
           labelMargin: "x-large",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -3929,21 +4263,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(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalSectionView.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(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalSectionView.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(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
           labelMargin: "small",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -3954,9 +4288,9 @@ const Dashboard = () => {
             gap: "xxx-large",
             minWidth: "150px",
           }),
-            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"))),
+            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"))),
         }))))));
 };
 const EditProfile$1 = () => {
@@ -4000,7 +4334,7 @@ const EditProfile$1 = () => {
           onChange: (e) => console.log(e),
         },
       })),
-      index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, {
+      index.h(sqmPortalChangePasswordView.PortalChangePasswordView, Object.assign({}, {
         states: {
           open: true,
           error: "",
@@ -4029,7 +4363,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(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
           labelMargin: "xx-small",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -4038,15 +4372,15 @@ const Commissions = () => {
             index.h("p", null,
               "for the",
               " ",
-              index.h("span", { class: sheet.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              index.h("span", { class: sheet$1.classes.HeaderSubtitleBold }, "Partner Program #1"),
               " ",
               "program"))),
         })),
-        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"))))));
+        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"))))));
 };
 const Activity = () => {
   return (index.h("sqm-divided-layout", { direction: "row" },
@@ -4054,7 +4388,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(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
           labelMargin: "xx-small",
           padding: "none",
           label: (index.h("sqm-text", null,
@@ -4063,30 +4397,30 @@ const Activity = () => {
             index.h("p", null,
               "for the",
               " ",
-              index.h("span", { class: sheet.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              index.h("span", { class: sheet$1.classes.HeaderSubtitleBold }, "Partner Program #1"),
               " ",
               "program"))),
         })),
-        index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
+        index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
           labelMargin: "x-large",
           padding: "none",
           label: (index.h("sqm-text", null,
             index.h("h3", null, "Referral Activity"))),
-          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"))),
+          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"))),
         }))),
-      index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
+      index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
         labelMargin: "x-large",
         padding: "xxx-large",
         label: (index.h("sqm-text", null,
           index.h("h3", null, "Traffic Generated"))),
-        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"))),
+        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"))),
       })))));
 };
 
@@ -4162,8 +4496,11 @@ var marked = stencilHooks_module.createCommonjsModule(function (module, exports)
  */
 
 (function (global, factory) {
-   module.exports = factory() ;
-}(stencilHooks_module.commonjsGlobal, (function () {
+  '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';
+
   function _defineProperties(target, props) {
     for (var i = 0; i < props.length; i++) {
       var descriptor = props[i];
@@ -7246,6 +7583,20 @@ 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,
@@ -7280,7 +7631,7 @@ const NavigationSidebar = /*#__PURE__*/Object.freeze({
 const PortalLogin_stories = {
   title: "Components/Microsite Login",
 };
-const defaultProps$2 = {
+const defaultProps$3 = {
   states: {
     error: "",
     loading: false,
@@ -7325,8 +7676,8 @@ const loadingProps = {
     pageLabel: "Sign in to your account",
   },
 };
-const Default$3 = () => (index.h("sqm-portal-login", { demoData: { ...defaultProps$2 } }));
-const IsGoogle = () => (index.h(sqmPortalLoginView.PortalLoginView, Object.assign({}, defaultProps$2, { content: {
+const Default$3 = () => (index.h("sqm-portal-login", { demoData: { ...defaultProps$3 } }));
+const IsGoogle = () => (index.h(sqmPortalLoginView.PortalLoginView, Object.assign({}, defaultProps$3, { content: {
     secondaryButton: (index.h("span", null,
       "Don't have an account?",
       " ",
@@ -7348,7 +7699,7 @@ const PortalLogin = /*#__PURE__*/Object.freeze({
 const PortalRegister_stories = {
   title: "Components/Microsite Register",
 };
-const defaultProps$3 = {
+const defaultProps$4 = {
   states: {
     registrationFormState: {},
     error: "",
@@ -7443,9 +7794,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(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 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 FieldsHidden = () => {
   return (index.h("sqm-portal-register", { demoData: {
       states: {
@@ -7458,9 +7809,9 @@ const FieldsHidden = () => {
       },
     } }));
 };
-const SlottedInputs = () => index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, slottedProps));
-const TermsAndConditions = () => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultProps$3, { content: {
-    ...defaultProps$3.content,
+const SlottedInputs = () => index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, slottedProps));
+const TermsAndConditions = () => (index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultProps$4, { content: {
+    ...defaultProps$4.content,
     terms: (index.h("p", null,
       "By signing up you agree to the",
       " ",
@@ -7481,7 +7832,7 @@ const PortalRegister = /*#__PURE__*/Object.freeze({
 const PortalRegistrationForm_stories = {
   title: "Components/Microsite Portal Register",
 };
-const defaultProps$4 = {
+const defaultProps$5 = {
   states: {
     error: "",
     loading: false,
@@ -7558,7 +7909,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$4));
+const Default$5 = () => index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$5));
 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 = () => {
@@ -7574,12 +7925,12 @@ const FieldsHidden$1 = () => {
     } }));
 };
 const SlottedInputs$1 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, slottedProps$1)));
-const RegisterWithMarketingEmailsCheckbox = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$4, { content: {
-    ...defaultProps$4.content,
+const RegisterWithMarketingEmailsCheckbox = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$5, { content: {
+    ...defaultProps$5.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$4, { content: {
-    ...defaultProps$4.content,
+const TermsAndConditions$1 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$5, { content: {
+    ...defaultProps$5.content,
     terms: (index.h("p", null,
       "By signing up you agree to the",
       " ",
@@ -7606,7 +7957,7 @@ const PortalForgotPassword_stories = {
     scenario: scenario$6,
   },
 };
-const defaultProps$5 = {
+const defaultProps$6 = {
   states: {
     error: "",
     loading: false,
@@ -7666,7 +8017,7 @@ const successProps = {
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };
-const Default$6 = () => index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, defaultProps$5));
+const Default$6 = () => index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, defaultProps$6));
 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)));
@@ -7707,7 +8058,7 @@ const defaultStates = {
   loadingVerification: false,
   countdown: 10,
 };
-const defaultProps$6 = {
+const defaultProps$7 = {
   states: defaultStates,
   callbacks: defaultCallbacks,
   content: defaultContent,
@@ -7745,7 +8096,7 @@ const loadingVerificationProps = {
   callbacks: defaultCallbacks,
   content: defaultContent,
 };
-const Default$7 = () => index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, defaultProps$6));
+const Default$7 = () => index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, defaultProps$7));
 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)));
@@ -7769,7 +8120,7 @@ const PortalResetPassword_stories = {
     scenario: scenario$8,
   },
 };
-const defaultProps$7 = {
+const defaultProps$8 = {
   states: {
     error: "",
     loading: false,
@@ -7907,7 +8258,7 @@ const validatingCodeProps = {
     failed: () => console.log("failed"),
   },
 };
-const Default$8 = () => index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, defaultProps$7));
+const Default$8 = () => index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, defaultProps$8));
 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)));
@@ -8045,7 +8396,7 @@ const Row = () => {
   return (index.h("sqm-divided-layout", { direction: "row" },
     index.h(Sidebar$1, null),
     index.h("div", { style: { padding: "48px" } },
-      index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
+      index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
         labelMargin: "xx-small",
         padding: "none",
         label: (index.h("sqm-text", null,
@@ -8058,7 +8409,7 @@ const Column = () => {
   return (index.h("sqm-divided-layout", { direction: "column" },
     index.h(Sidebar$1, null),
     index.h("div", { style: { padding: "48px" } },
-      index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
+      index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
         labelMargin: "xx-small",
         padding: "none",
         label: (index.h("sqm-text", null,
@@ -8071,7 +8422,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(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
+      index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
         labelMargin: "xx-small",
         padding: "none",
         label: (index.h("sqm-text", null,
@@ -8097,7 +8448,7 @@ const ChangePassword_stories = {
     scenario: scenario$a,
   },
 };
-const defaultProps$8 = {
+const defaultProps$9 = {
   states: {
     open: false,
     loading: false,
@@ -8229,12 +8580,12 @@ const successProps$3 = {
     submit: (e) => console.log("Submit", e),
   },
 };
-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 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 ChangePassword = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -8250,7 +8601,7 @@ const ChangePassword = /*#__PURE__*/Object.freeze({
 const ChangeMarketing_stories = {
   title: "Components/Change Marketing Emails Status",
 };
-const defaultProps$9 = {
+const defaultProps$a = {
   states: {
     success: false,
     loading: false,
@@ -8281,21 +8632,21 @@ const Default$b = () => {
   return index.h("sqm-portal-change-marketing", null);
 };
 const Loading$2 = () => {
-  return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$9, { states: { ...defaultProps$9.states, loading: true } })));
+  return (index.h(sqmPortalChangeMarketingView.ChangeMarktingView, Object.assign({}, defaultProps$a, { states: { ...defaultProps$a.states, loading: true } })));
 };
 const Error$3 = () => {
-  return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$9, { states: {
-      ...defaultProps$9.states,
+  return (index.h(sqmPortalChangeMarketingView.ChangeMarktingView, Object.assign({}, defaultProps$a, { states: {
+      ...defaultProps$a.states,
       formState: {
-        ...defaultProps$9.states.formState,
+        ...defaultProps$a.states.formState,
         errors: { error: true },
         error: "An error string",
       },
     } })));
 };
 const Success$1 = () => {
-  return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$9, { states: {
-      ...defaultProps$9.states,
+  return (index.h(sqmPortalChangeMarketingView.ChangeMarktingView, Object.assign({}, defaultProps$a, { states: {
+      ...defaultProps$a.states,
       success: true,
     } })));
 };
@@ -8312,7 +8663,7 @@ const ChangeMarketing = /*#__PURE__*/Object.freeze({
 const PortalProfile_stories = {
   title: "Components/Microsite Profile",
 };
-const defaultProps$a = {
+const defaultProps$b = {
   states: {
     success: false,
     loading: false,
@@ -8528,7 +8879,7 @@ const successProps$4 = {
     onChange: (e) => console.log(e),
   },
 };
-const Default$c = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, defaultProps$a));
+const Default$c = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, defaultProps$b));
 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));
@@ -9917,116 +10268,116 @@ const TaskCard$1 = () => {
   return (index.h("div", { style: storyFrame },
     index.h(Resizer, null,
       index.h("h4", null, "Not Repeatable"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, description: "" }, states: { ...oneAction.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, description: "" }, states: { ...oneAction.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, description: "" }, states: { ...coupleActions.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, description: "" }, states: { ...coupleActions.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, description: "" }, states: { ...manyActions.states, progress: 230 } }))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, description: "" }, states: { ...manyActions.states, progress: 230 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Repeatable"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 2 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 2 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } }))),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } }))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Unavailable"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 } }, expireRepeat)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 } }, expireRepeat)),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 3 } }, expireRepeat)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 3 } }, expireRepeat)),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 250 } }, expireRepeat)))));
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 } })),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 230 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 230 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } })),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 1 } })),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 5 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 5 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 10 } })),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 500 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 500 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 1000 } })),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 1 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 1 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 2 } })),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 2 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 2 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 5 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 5 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 10 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 10 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 12 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 12 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 15 } })),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 200 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 200 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 500 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 500 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 1000 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 1000 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1200 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1200 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1500 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1500 } })),
       index.h("h5", null))));
 };
 const TaskCardEndDate = () => {
@@ -10039,27 +10390,27 @@ const TaskCardEndDate = () => {
   return (index.h("div", { style: storyFrame },
     index.h("div", { style: resizable },
       index.h("h4", null, "One Action"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expireRepeat }, states: { ...oneAction.states, progress: 1 } })),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expireRepeat }, states: { ...coupleActions.states, progress: 5 } })),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat }, states: { ...manyActions.states, progress: 1000 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat }, states: { ...manyActions.states, progress: 1000 } })),
       index.h("h5", null))));
 };
 const TaskCardLoading = () => {
@@ -10069,26 +10420,26 @@ const TaskCardLoading = () => {
   return (index.h("div", { style: storyFrame },
     index.h("div", { style: resizable },
       index.h("h4", null, "One Action"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, loading)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, loading)),
       " ",
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, loading)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, loading)),
       " ",
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, loading)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, loading)),
       " ",
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, loading)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, loading)),
       " ",
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, loading)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, loading)),
       " ",
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, loading)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, loading)),
       " ",
       index.h("h5", null))));
 };
@@ -10102,33 +10453,33 @@ const TaskCardNotStarted = () => {
   return (index.h("div", { style: storyFrame },
     index.h("div", { style: resizable },
       index.h("h4", null, "One Action"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
       index.h("h5", null))));
 };
 const TaskCardEnded = () => {
@@ -10141,33 +10492,33 @@ const TaskCardEnded = () => {
   return (index.h("div", { style: storyFrame },
     index.h("div", { style: resizable },
       index.h("h4", null, "One Action"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
       index.h("h5", null))));
 };
 const TaskCardButtonHidden = () => {
@@ -10178,48 +10529,48 @@ const TaskCardButtonHidden = () => {
   return (index.h("div", { style: storyFrame },
     index.h(Resizer, null,
       index.h("h4", null, "Not Repeatable"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, description: "", hideButton: true }, states: { ...oneAction.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, description: "", hideButton: true }, states: { ...oneAction.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: {
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: {
           ...coupleActions.content,
           description: "",
           hideButton: true,
         }, states: { ...coupleActions.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: {
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, hideButton: true }, states: { ...oneAction.states, progress: 2 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, hideButton: true }, states: { ...oneAction.states, progress: 2 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: {
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: {
           ...coupleActions.content,
           repeatable: true,
           hideButton: true,
         }, states: { ...coupleActions.states, progress: 7 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: {
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, hideButton: true }, states: { ...oneAction.states, progress: 1 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, hideButton: true }, states: { ...oneAction.states, progress: 1 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, hideButton: true }, states: { ...coupleActions.states, progress: 5 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, hideButton: true }, states: { ...coupleActions.states, progress: 5 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, hideButton: true }, states: { ...manyActions.states, progress: 500 } }))),
+      index.h(sqmTaskCardView.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(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, hideButton: true }, states: { ...oneAction.states, progress: 0 } }, expireRepeat)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, hideButton: true }, states: { ...oneAction.states, progress: 0 } }, expireRepeat)),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, hideButton: true }, states: { ...coupleActions.states, progress: 3 } }, expireRepeat)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, hideButton: true }, states: { ...coupleActions.states, progress: 3 } }, expireRepeat)),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, hideButton: true }, states: { ...manyActions.states, progress: 250 } }, expireRepeat)))));
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, hideButton: true }, states: { ...manyActions.states, progress: 250 } }, expireRepeat)))));
 };
 const ProgressBar = () => {
   const props = {
@@ -10228,7 +10579,7 @@ const ProgressBar = () => {
     progressBarUnit: "$",
   };
   return (index.h("div", null,
-    index.h(MatrixStory, { matrix: { progress: [0, 100, 500, 650, 1200] }, props: props, Component: ShadowViewAddon.ProgressBarView })));
+    index.h(MatrixStory, { matrix: { progress: [0, 100, 500, 650, 1200] }, props: props, Component: sqmTaskCardView.ProgressBarView })));
 };
 const ProgressBarSteps = () => {
   const props = {
@@ -10237,7 +10588,7 @@ const ProgressBarSteps = () => {
     goal: 5,
   };
   return (index.h("div", null,
-    index.h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: ShadowViewAddon.ProgressBarView })));
+    index.h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: sqmTaskCardView.ProgressBarView })));
 };
 const ProgressBarRepeatable = () => {
   const props = {
@@ -10247,7 +10598,7 @@ const ProgressBarRepeatable = () => {
     repeatable: true,
   };
   return (index.h("div", null,
-    index.h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: ShadowViewAddon.ProgressBarView })));
+    index.h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: sqmTaskCardView.ProgressBarView })));
 };
 const ProgressBarStepsRepeatable = () => {
   const props = {
@@ -10257,7 +10608,7 @@ const ProgressBarStepsRepeatable = () => {
     repeatable: true,
   };
   return (index.h("div", null,
-    index.h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: ShadowViewAddon.ProgressBarView })));
+    index.h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: sqmTaskCardView.ProgressBarView })));
 };
 const ProgressBarFinite = () => {
   const props = {
@@ -10268,7 +10619,7 @@ const ProgressBarFinite = () => {
     finite: 2,
   };
   return (index.h("div", null,
-    index.h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: ShadowViewAddon.ProgressBarView })));
+    index.h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: sqmTaskCardView.ProgressBarView })));
 };
 const ProgressBarStepsFinite = () => {
   const props = {
@@ -10279,7 +10630,7 @@ const ProgressBarStepsFinite = () => {
     finite: 2,
   };
   return (index.h("div", null,
-    index.h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 10, 12] }, props: props, Component: ShadowViewAddon.ProgressBarView })));
+    index.h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 10, 12] }, props: props, Component: sqmTaskCardView.ProgressBarView })));
 };
 
 const TaskCard$2 = /*#__PURE__*/Object.freeze({
@@ -10518,13 +10869,13 @@ const PoweredByImg_stories = {
   title: "Powered By",
 };
 const Default$d = () => {
-  return index.h(ShadowViewAddon.PoweredByImg, null);
+  return index.h(sqmPortalFooterView.PoweredByImg, null);
 };
 const CustomColor = () => {
-  return index.h(ShadowViewAddon.PoweredByImg, { color: "salmon" });
+  return index.h(sqmPortalFooterView.PoweredByImg, { color: "salmon" });
 };
 const CustomWidthAndHeight = () => {
-  return index.h(ShadowViewAddon.PoweredByImg, { width: 300, height: 50 });
+  return index.h(sqmPortalFooterView.PoweredByImg, { width: 300, height: 50 });
 };
 
 const PoweredByImg = /*#__PURE__*/Object.freeze({
@@ -10543,7 +10894,7 @@ const PortalFooter_stories = {
     scenario: scenario$f,
   },
 };
-const defaultProps$b = {
+const defaultProps$c = {
   supportEmail: "support@example.com",
   supportText: "For program support, contact {email}",
   hidePoweredBy: false,
@@ -10553,12 +10904,12 @@ const defaultProps$b = {
   paddingBottom: "large",
   paddingLeft: "large",
 };
-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 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 PortalFooter = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -10595,7 +10946,7 @@ const LoginOneColumn = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
+    index.h(sqmHeroView.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" },
@@ -10615,7 +10966,7 @@ const LoginOneColumnWithColor = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
+    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
 };
 const LoginOneColumnWithImage = () => {
   const props = {
@@ -10629,7 +10980,7 @@ const LoginOneColumnWithImage = () => {
     content: { primaryColumn: index.h("sqm-portal-login", null) },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
+    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
 };
 const TwoColumnLoginLargePadding = () => {
   const props = {
@@ -10649,7 +11000,7 @@ const TwoColumnLoginLargePadding = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
+    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
 };
 const TwoColumnLoginMediumPadding = () => {
   const props = {
@@ -10669,7 +11020,7 @@ const TwoColumnLoginMediumPadding = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
+    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
 };
 const TwoColumnLoginSmallPadding = () => {
   const props = {
@@ -10689,7 +11040,7 @@ const TwoColumnLoginSmallPadding = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
+    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
 };
 const TwoColumnLoginNoPadding = () => {
   const props = {
@@ -10709,7 +11060,7 @@ const TwoColumnLoginNoPadding = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
+    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
 };
 const TwoColumnLoginReverseWrap = () => {
   const props = {
@@ -10729,7 +11080,7 @@ const TwoColumnLoginReverseWrap = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
+    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
 };
 const TwoColumnLoginWithImgElement = () => {
   const props = {
@@ -10749,7 +11100,7 @@ const TwoColumnLoginWithImgElement = () => {
     },
   };
   return (index.h("div", { style: { height: "800px" } },
-    index.h(ShadowViewAddon.HeroView, Object.assign({}, props))));
+    index.h(sqmHeroView.HeroView, Object.assign({}, props))));
 };
 const MinHeight = () => {
   const props = {
@@ -10766,7 +11117,7 @@ const MinHeight = () => {
         index.h("sqm-portal-login", null))),
     },
   };
-  return index.h(ShadowViewAddon.HeroView, Object.assign({}, props));
+  return index.h(sqmHeroView.HeroView, Object.assign({}, props));
 };
 
 const Hero = /*#__PURE__*/Object.freeze({
@@ -10807,7 +11158,7 @@ const props = {
 };
 const ReferralIframe = () => {
   return (index.h("div", { style: { width: "1000px", height: "1000px" } },
-    index.h(ShadowViewAddon.ReferralIframeView, Object.assign({}, props))));
+    index.h(sqmReferralIframeView.ReferralIframeView, Object.assign({}, props))));
 };
 const ReferralIframeError = () => {
   return (index.h("div", { style: { width: "1000px", height: "1000px" } },
@@ -10855,10 +11206,10 @@ const errorProps$9 = {
   },
 };
 const NameFields = () => {
-  return index.h(ShadowViewAddon.NameFieldsView, Object.assign({}, props$1));
+  return index.h(sqmNameFieldsView.NameFieldsView, Object.assign({}, props$1));
 };
 const NameFieldsWithErrors = () => {
-  return index.h(ShadowViewAddon.NameFieldsView, Object.assign({}, errorProps$9));
+  return index.h(sqmNameFieldsView.NameFieldsView, Object.assign({}, errorProps$9));
 };
 
 const NameFields$1 = /*#__PURE__*/Object.freeze({
@@ -10876,7 +11227,7 @@ const CheckboxField_stories = {
     scenario: scenario$j,
   },
 };
-const defaultProps$c = {
+const defaultProps$d = {
   states: {
     registrationFormState: {
       validationErrors: {},
@@ -10917,42 +11268,42 @@ const defaultRegisterProps = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-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,
+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,
     checked: true,
   } }))));
-const CustomLabel = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { content: {
-    ...defaultProps$c.content,
+const CustomLabel = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$d, { content: {
+    ...defaultProps$d.content,
     checkboxLabel: "I Agree",
   } }))));
-const Error$5 = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { states: {
-    ...defaultProps$c.states,
+const Error$5 = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$d, { states: {
+    ...defaultProps$d.states,
     registrationFormState: {
       validationErrors: {
         agree: "Must be checked",
       },
     },
   } }))));
-const CustomError = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { states: {
-    ...defaultProps$c.states,
+const CustomError = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$d, { states: {
+    ...defaultProps$d.states,
     registrationFormState: {
       validationErrors: {
         agree: "Must be checked",
       },
     },
   }, content: {
-    ...defaultProps$c.content,
+    ...defaultProps$d.content,
     errorMessage: "This checkbox must be checked to continue",
   } }))));
-const TermsAndConditions$2 = createHookStory(() => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+const TermsAndConditions$2 = createHookStory(() => (index.h(sqmPortalRegisterView.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(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+const TermsAndConditionsCustomLabel = createHookStory(() => (index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
   //@ts-ignore
   content: {
     ...defaultRegisterProps.content,
@@ -10962,7 +11313,7 @@ const TermsAndConditionsCustomLabel = createHookStory(() => (index.h(ShadowViewA
       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(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+const TermsAndConditionsLongCustomLabel = createHookStory(() => (index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
   //@ts-ignore
   content: {
     ...defaultRegisterProps.content,
@@ -11077,7 +11428,7 @@ const UseCheckboxField = /*#__PURE__*/Object.freeze({
 const DropdownField_stories = {
   title: "Components/Dropdown Field",
 };
-const defaultProps$d = {
+const defaultProps$e = {
   states: {
     registrationFormState: {},
   },
@@ -11092,24 +11443,24 @@ const defaultProps$d = {
     ],
   },
 };
-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,
+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,
     dropdownLabel: "Pick your favorite",
   } }))));
-const Error$6 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d, { states: {
-    ...defaultProps$d.states,
+const Error$6 = createHookStory(() => (index.h(sqmDropdownFieldView.DropdownFieldView, Object.assign({}, defaultProps$e, { states: {
+    ...defaultProps$e.states,
     registrationFormState: {
       validationErrors: {
         options: "Must select an option",
       },
     },
   } }))));
-const CustomError$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d, { content: {
-    ...defaultProps$d.content,
+const CustomError$1 = createHookStory(() => (index.h(sqmDropdownFieldView.DropdownFieldView, Object.assign({}, defaultProps$e, { content: {
+    ...defaultProps$e.content,
     errorMessage: "An option must be selected to continue",
   }, states: {
-    ...defaultProps$d.states,
+    ...defaultProps$e.states,
     registrationFormState: {
       validationErrors: {
         options: "Must select an option",
@@ -11193,7 +11544,7 @@ const InputField_stories = {
     scenario: scenario$l,
   },
 };
-const defaultProps$e = {
+const defaultProps$f = {
   states: {
     registrationFormState: {
       validationErrors: {},
@@ -11230,21 +11581,21 @@ const defaultRegisterProps$1 = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-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,
+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,
     registrationFormState: {
       validationErrors: {
         field: "Cannot be empty",
       },
     },
   } })));
-const CustomError$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
-    ...defaultProps$e.content,
+const CustomError$2 = () => (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$f, { content: {
+    ...defaultProps$f.content,
     errorMessage: "A value must be entered to continue",
   }, states: {
-    ...defaultProps$e.states,
+    ...defaultProps$f.states,
     registrationFormState: {
       validationErrors: {
         field: "Cannot be empty",
@@ -11252,27 +11603,27 @@ const CustomError$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assi
     },
   } })));
 const DateType = () => {
-  return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
-      ...defaultProps$e.content,
+  return (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$f, { content: {
+      ...defaultProps$f.content,
       fieldLabel: "Date",
       fieldType: "date",
     } })));
 };
 const TelType = () => {
-  return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
-      ...defaultProps$e.content,
+  return (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$f, { content: {
+      ...defaultProps$f.content,
       fieldLabel: "Phone Number",
       fieldType: "tel",
     } })));
 };
-const RegistrationField = () => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
+const RegistrationField = () => (index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
     ...defaultRegisterProps$1.content,
-    formData: index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e)),
+    formData: index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$f)),
   } })));
-const RegistrationFieldCustomLabel = () => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
+const RegistrationFieldCustomLabel = () => (index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
     ...defaultRegisterProps$1.content,
-    formData: (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
-        ...defaultProps$e.content,
+    formData: (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$f, { content: {
+        ...defaultProps$f.content,
         fieldLabel: "Data",
       } }))),
   } })));
@@ -11384,26 +11735,26 @@ const RewardExchangeList_stories = {
   },
 };
 const StoryBase = (props) => () => {
-  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);
+  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);
 
 const RewardExchangeList = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -11716,92 +12067,92 @@ const manyActions$1 = {
   states: { progress: 100, loading: false, loadingEvent: false },
 };
 const TaskCardGrid = () => {
-  return (index.h(ShadowViewAddon.CardFeedView, { width: 347, gap: 24 },
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)),
+  return (index.h(sqmCardFeedView.CardFeedView, { width: 347, gap: 24 },
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        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(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)))),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1))));
+        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1))));
 };
 const TaskCardGridHighGap = () => {
-  return (index.h(ShadowViewAddon.CardFeedView, { width: 400, gap: 150 },
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)),
+  return (index.h(sqmCardFeedView.CardFeedView, { width: 400, gap: 150 },
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        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(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)))),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1))));
+        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1))));
 };
 const TaskCardGridLowGap = () => {
-  return (index.h(ShadowViewAddon.CardFeedView, { width: 400, gap: 12 },
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)),
+  return (index.h(sqmCardFeedView.CardFeedView, { width: 400, gap: 12 },
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        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(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)))),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1))));
+        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1))));
 };
 const TaskCardGridHighWidth = () => {
-  return (index.h(ShadowViewAddon.CardFeedView, { width: 1000, gap: 24 },
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)),
+  return (index.h(sqmCardFeedView.CardFeedView, { width: 1000, gap: 24 },
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        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(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)))),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1))));
+        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1))));
 };
 const TaskCardGridLowWidth = () => {
-  return (index.h(ShadowViewAddon.CardFeedView, { width: 250, gap: 24 },
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)),
+  return (index.h(sqmCardFeedView.CardFeedView, { width: 250, gap: 24 },
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        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(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
-        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1)))),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1))));
+        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1))));
 };
 const CardFeedGeneric = () => {
-  return (index.h(ShadowViewAddon.CardFeedView, { width: 300, gap: 24 },
+  return (index.h(sqmCardFeedView.CardFeedView, { width: 300, gap: 24 },
     index.h("div", { style: {
         padding: "100px",
         border: "1px dashed black",
@@ -12028,7 +12379,7 @@ const scenario1 = "@author:derek\n@owner:derek\nFeature: Reward Table Date Colum
 
 const scenario2 = "@author:derek\n@owner:derek\nFeature: Reward Table reward Column\n\n    Shows the exact reward\n\n    Background:\n        Given the reward column is included in the reward table\n        And rewards with translations exist\n\n    @motivating\n    @ui\n    Scenario Outline: The title of the reward column is configurable\n        Given the \"column-title\" prop is set to <value>\n        Then the reward column is shown with <columnTitle>\n        Examples:\n            | value           | columnTitle     |\n            | Reward          |                 |\n            | My column title | My column title |\n\n    @motivating\n    Scenario: The reward column displays the prettyValue of the reward given\n        Given a user with a reward\n        When they view the rewards table\n        Then they see the name of their reward in the reward column\n        And the name is the prettyValue translated for the users locale\n\n    @motivating\n    @ui\n    Scenario: The reward column displays an availability bar if the reward is redeemable\n        Given a user with a <status> credit reward of <value>\n        But the user has <redeemedAmount>\n        When they view the rewards table\n        Then the reward column displays <value>\n        And under it displays an availability bar with <percentage> filled\n        And under it displays <availabilityText>\n        Examples:\n            | status    | value     | percentage | availableAmount | availabilityText    |\n            | AVAILABLE | 10 Points | 100%       | 10 Points       | 10 Points remaining |\n            | AVAILABLE | 10 Points | 90%        | 9 Points        | 9 Points remaining  |\n            | AVAILABLE | 10 Points | 10%        | 1 Point         | 1 Point  remaining  |\n            | PENDING   | 10 Points | 100%       | 10 Points       | 10 Points remaining |\n            | PENDING   | 10 Points | 90%        | 9 Points        | 9 Points remaining  |\n            | PENDING   | 10 Points | 10%        | 1 Point         | 1 Point  remaining  |\n\n    @motivating\n    @ui\n    Scenario Outline: The reward column displays an availability bar if the reward was redeemable but had been cancelled or expired\n        Given a user with a credit reward of <value>\n        And the reward has <status>\n        But the user has <redeemedAmount>\n        When they view the rewards table\n        When they view the rewards table\n        Then the reward column displays <value>\n        And under it displays an availability bar with <percentage> filled\n        And under it displays <redeemedText>\n        Examples:\n            | status    | value     | percentage | redeemedAmount | redeemedText     |\n            | EXPIRED   | 10 Points | 100%       | 0 Point        | 0 Point redeemed |\n            | EXPIRED   | 10 Points | 80%        | 2 Point        | 2 Point redeemed |\n            | CANCELLED | 10 Points | 100%       | 0 Point        | 0 Point redeemed |\n            | CANCELLED | 10 Points | 20%        | 8 Point        | 8 Point redeemed |\n\n    @motivating\n    @ui\n    Scenario: The reward column doesn't display the availability bar if the reward is not redeemable\n        Given a user with a non credit reward\n        When they view the rewards table\n        Then they see the name of the reward\n        But they do not see the availablity bar\n\n    @motivating\n    @ui\n    Scenario Outline: The reward column doesn't display the availability bar if the reward is only 1 reward unit\n        Given a user with a credit reward for 1 of a reward unit\n        And it has <status>\n        When they view the rewards table\n        Then they see the name of the reward\n        But they do not see the availablity bar\n        Examples:\n            | status    |\n            | AVAILABLE |\n            | PENDING   |\n            | EXPIRED   |\n            | CANCELLED |\n\n    @motivating\n    @ui\n    Scenario: The reward column doesn't display the availability bar for redeemed credit rewards\n        Given a user with a \"REDEEMED\" credit reward\n        When they view the rewards table\n        Then they see the name of the reward\n        But they do not see the availablity bar\n\n    @motivating\n    @ui\n    Scenario: Users can copy their fuel tank codes\n        Given a user with a fuel tank reward\n        When they view the rewards table\n        Then they see their fuel tank reward\n        And they see their fuel tank code bolded in blue\n        When they click on their code\n        Then a tool tip appears saying it has been copied to their clipboard\n        And their code is copied to their clipboard";
 
-const scenario3 = "@author:derek @owner:derek\nFeature: Reward Table Status Column\n  Shows the status of each reward\n\n  Background: \n    Given the status column is included in the reward table\n\n  @motivating @ui\n  Scenario Outline: The title of the status column is configurable\n    Given the \"column-title\" prop is set to <value>\n    Then the status column is shown with <columnTitle>\n\n    Examples: \n      | value           | columnTitle     |\n      | Status          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario Outline: The status column displays the status of each reward\n    Given a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples: \n      | status                   | text             | pillColour |\n      | AVAILABLE                | Available        | Green      |\n      | CANCELLED                | Cancelled        | Red        |\n      | PENDING                  | Pending          | Orange     |\n      | EXPIRED                  | Expired          | Red        |\n      | REDEEMED                 | Redeemed         | Blue       |\n      | PENDING_REVIEW           | Pending          | Orange     |\n      | PAYOUT_TRANSFERRED       | Payout Approved  | blue       |\n      | PAYOUT_NOT_YET_DUE       | Payout Approved  | blue       |\n      | PAYOUT_OVERDUE           | Payout Failed    | Red        |\n      | PAYOUT_REVERSED          | Payout Cancelled | Red        |\n      | PENDING_TAX_REVIEW       | Pending          | Orange     |\n      | PENDING_NEW_TAX_FORM     | Pending          | Orange     |\n      | PENDING_TAX_SUBMISSION   | Pending          | Orange     |\n      | PENDING_PARTNER_CREATION | Pending          | Orange     |\n      | DENIED                   | Denied           | Red        |\n\n  @motivating\n  Scenario Outline: Reward status related information is displayed under status pills\n    Given a user\n    And they have a <reward>\n    And their program is\n    When they view the reward table\n    Then they see their reward\n    And under the pill is <text>\n    And the date is localized to the users locale\n\n    Examples: \n      | reward                                                       | text                                                                             |\n      | available reward with an expiry date                         | localized expiry date in format \"Month-Day-Year\"                                 |\n      | redeemed reward                                              | localized redemption date in format \"Month-Day-Year\"                             |\n      | expired reward                                               | localized expired date in format \"Month-Day-Year\"                                |\n      | cancelled reward                                             | localized cancelled date in format \"Month-Day-Year\"                              |\n      | pending reward with a end date                               | localized pending for date in format \"Month-Day-Year\"                            |\n      | pending reward due to W9                                     | W-9 required                                                                     |\n      | pending reward due to fufillment error                       | Fulfillment error                                                                |\n      | reward pending review of referral                            | Pending review                                                                   |\n      | pending reward due to no connected Impact partner            | Complete your tax and cash payout setup to receive your rewards.                 |\n      | pending reward due to an invalid tax document                | Invalid tax form. Submit a new form to receive your rewards.                     |\n      | pending reward due to user required to submit a tax document | Submit your tax documents to receive your rewards.                               |\n      | pending reward due to tax document being in review           | Awaiting tax form review.                                                        |\n      | reward whose payout failed                                   | Payout failed due to a fulfillment issue and is currently being retried.         |\n      | reward whose payout was approved                             | Reward approved for payout and was scheduled for payment based on your settings. |\n      | reward whose payout was cancelled                            | If you think this is a mistake, contact our Support team.                        |\n      | cancelled reward from denied referral                        | Flagged as fraud                                                                 |\n\n  @minutia\n  Scenario Outline: Tax-related reward statuses are based on the user's Impact tax connection\n    Given a user\n    And they are in a program that has Impact tax handling enabled\n    And they have at least one pending reward\n    And the reward's pending reasons include \"PAYOUT_CONFIGURATION_MISSING\"\n    Then the status description will be\n      \"\"\"\n      Complete your tax and cash payout setup to receive your rewards.\n      \"\"\"\n\n  @motivating\n  Scenario Outline: Statuses can be customized\n    Given the \"status-text\" prop is \"{status, select, AVAILABLE {Redeem me!} CANCELLED {Unavailable} PENDING {Coming soon!} EXPIRED {Past due} REDEEMED {Spent} PENDING_REVIEW {Pending Review!} PAYOUT_SENT {Payout Sent!} PAYOUT_FAILED {Payout Failed!} PENDING_TAX_REVIEW {Pending Tax Review!} PENDING_NEW_TAX_FORM {Pending new tax form!} PENDING_TAX_SUBMISSION {Pending tax submission!} PENDING_PARTNER_CREATION {Pending partner creation!} DENIED {Unlucky!}}\"\n    And a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples: \n      | status             | text              | pillColour |\n      | AVAILABLE          | Redeem me!        | Green      |\n      | CANCELLED          | Unavailable       | Red        |\n      | PENDING            | Coming soon!      | Orange     |\n      | EXPIRED            | Past due          | Red        |\n      | REDEEMED           | Spent             | Blue       |\n      | PENDING_REVIEW     | Pending Review!   | Orange     |\n      | PAYOUT_TRANSFERRED | Payout Approved!  | Blue       |\n      | PAYOUT_NOT_YET_DUE | Payout Approved!  | Blue       |\n      | PAYOUT_OVERDUE     | Payout Failed!    | Red        |\n      | PAYOUT_REVERSED    | Payout Cancelled! | Red        |\n      | DENIED             | Unlucky!          | Red        |\n\n  @minutia @ui\n  Scenario: Expiry status date text can be configured\n    Given the \"expiry-text\" prop has <value>\n    And a user with an available reward with an expiry date\n    When they view the reward table\n    Then they see <text> under the Available Status pill\n\n    Examples: \n      | value         | text                        |\n      |               | Expires on <EXPIRY DATE>    |\n      | Redeem before | Redeem before <EXPIRY DATE> |\n";
+const scenario3 = "@author:derek @owner:derek\nFeature: Reward Table Status Column\n  Shows the status of each reward\n\n  Background:\n    Given the status column is included in the reward table\n\n  @motivating @ui\n  Scenario Outline: The title of the status column is configurable\n    Given the \"column-title\" prop is set to <value>\n    Then the status column is shown with <columnTitle>\n\n    Examples:\n      | value           | columnTitle     |\n      | Status          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario Outline: The status column displays the status of each reward\n    Given a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples:\n      | status                   | text             | pillColour |\n      | AVAILABLE                | Available        | Green      |\n      | CANCELLED                | Cancelled        | Red        |\n      | PENDING                  | Pending          | Orange     |\n      | EXPIRED                  | Expired          | Red        |\n      | REDEEMED                 | Redeemed         | Blue       |\n      | PENDING_REVIEW           | Pending          | Orange     |\n      | PAYOUT_TRANSFERRED       | Payout Approved  | blue       |\n      | PAYOUT_NOT_YET_DUE       | Payout Approved  | blue       |\n      | PAYOUT_OVERDUE           | Payout Failed    | Red        |\n      | PAYOUT_REVERSED          | Payout Cancelled | Red        |\n      | PENDING_TAX_REVIEW       | Pending          | Orange     |\n      | PENDING_NEW_TAX_FORM     | Pending          | Orange     |\n      | PENDING_TAX_SUBMISSION   | Pending          | Orange     |\n      | PENDING_PARTNER_CREATION | Pending          | Orange     |\n      | DENIED                   | Denied           | Red        |\n\n  @motivating\n  Scenario Outline: Reward status related information is displayed under status pills\n    Given a user\n    And they have a <reward>\n    And their program is\n    When they view the reward table\n    Then they see their reward\n    And under the pill is <text>\n    And the date is localized to the users locale\n\n    Examples:\n      | reward                                                       | text                                                                             |\n      | available reward with an expiry date                         | localized expiry date in format \"Month-Day-Year\"                                 |\n      | redeemed reward                                              | localized redemption date in format \"Month-Day-Year\"                             |\n      | expired reward                                               | localized expired date in format \"Month-Day-Year\"                                |\n      | cancelled reward                                             | localized cancelled date in format \"Month-Day-Year\"                              |\n      | pending reward with a end date                               | localized pending for date in format \"Month-Day-Year\"                            |\n      | pending reward due to W9                                     | W-9 required                                                                     |\n      | pending reward due to fufillment error                       | Fulfillment error                                                                |\n      | reward pending review of referral                            | Pending review                                                                   |\n      | pending reward due to no connected Impact partner            | Complete your tax and cash payout setup to receive your rewards.                 |\n      | pending reward due to an invalid tax document                | Invalid tax form. Submit a new form to receive your rewards.                     |\n      | pending reward due to user required to submit a tax document | Submit your tax documents to receive your rewards.                               |\n      | pending reward due to tax document being in review           | Awaiting tax form review.                                                        |\n      | reward whose payout failed                                   | Payout failed due to a fulfillment issue and is currently being retried.         |\n      | reward whose payout was approved                             | Reward approved for payout and was scheduled for payment based on your settings. |\n      | reward whose payout was cancelled                            | If you think this is a mistake, contact our Support team.                        |\n      | cancelled reward from denied referral                        | Flagged as fraud                                                                 |\n\n  @minutia\n  Scenario Outline: Tax-related reward statuses are based on the user's Impact tax connection\n    Given a user\n    And they are in a program that has Impact tax handling enabled\n    And they have at least one pending reward\n    And the reward's pending reasons include \"MISSING_PAYOUT_CONFIGURATION\"\n    Then the status description will be\n      \"\"\"\n      Complete your tax and cash payout setup to receive your rewards.\n      \"\"\"\n\n  @motivating\n  Scenario Outline: Statuses can be customized\n    Given the \"status-text\" prop is \"{status, select, AVAILABLE {Redeem me!} CANCELLED {Unavailable} PENDING {Coming soon!} EXPIRED {Past due} REDEEMED {Spent} PENDING_REVIEW {Pending Review!} PAYOUT_SENT {Payout Sent!} PAYOUT_FAILED {Payout Failed!} PENDING_TAX_REVIEW {Pending Tax Review!} PENDING_NEW_TAX_FORM {Pending new tax form!} PENDING_TAX_SUBMISSION {Pending tax submission!} PENDING_PARTNER_CREATION {Pending partner creation!} DENIED {Unlucky!}}\"\n    And a user\n    And they have a <status> reward\n    When they view the reward table\n    Then the status of their reward is displayed in <pillColour> pill with <text>\n\n    Examples:\n      | status             | text              | pillColour |\n      | AVAILABLE          | Redeem me!        | Green      |\n      | CANCELLED          | Unavailable       | Red        |\n      | PENDING            | Coming soon!      | Orange     |\n      | EXPIRED            | Past due          | Red        |\n      | REDEEMED           | Spent             | Blue       |\n      | PENDING_REVIEW     | Pending Review!   | Orange     |\n      | PAYOUT_TRANSFERRED | Payout Approved!  | Blue       |\n      | PAYOUT_NOT_YET_DUE | Payout Approved!  | Blue       |\n      | PAYOUT_OVERDUE     | Payout Failed!    | Red        |\n      | PAYOUT_REVERSED    | Payout Cancelled! | Red        |\n      | DENIED             | Unlucky!          | Red        |\n\n  @minutia @ui\n  Scenario: Expiry status date text can be configured\n    Given the \"expiry-text\" prop has <value>\n    And a user with an available reward with an expiry date\n    When they view the reward table\n    Then they see <text> under the Available Status pill\n\n    Examples:\n      | value         | text                        |\n      |               | Expires on <EXPIRY DATE>    |\n      | Redeem before | Redeem before <EXPIRY DATE> |\n";
 
 const scenario4 = "@author:derek @owner:derek\nFeature: Reward Table Source Column\n    Shows the source of each reward\n\n  @motivating @ui\n  Scenario Outline: The title of the source column is configurable\n    Given the \"column-title\" prop is set to <value>\n    Then the source column is shown with <columnTitle>\n\n    Examples:\n      | value           | columnTitle     |\n      | Source          |                 |\n      | My column title | My column title |\n\n  @motivating @ui\n  Scenario: The source column displays manual if the reward is caused by a manual action\n    Given a user with a \"MANUAL\" reward\n    When they view the rewards table\n    Then the source of their reward is displayed as \"Manual\"\n\n  @motivating @ui\n  Scenario: The source column displays the program name if the reward is caused automatically by a program\n    Given a user with a \"AUTOMATED\" program reward\n    And the program has name \"Loyalty Program\"\n    When they view the rewards table\n    Then the source of their reward is displayed as \"Loyalty Program\"\n\n  @motivating @ui\n  Scenario Outline: The source column displays customizable reward exchange text with amount if the reward is caused by reward exchange\n    Given the \"reward-exchange-text\" prop is <propValue>\n    And a user with a \"MANUAL\" reward\n    But it was created by a reward exchange\n    Then they view the rewards table\n    Then the source displays <exchangeText>\n    And under it displays the following\n      | prettyRedeemedCredit → prettyValue |\n\n    Examples:\n      | propValue | exchangeText    |\n      |           | Reward Exchange |\n      | Exchanged | Exchanged       |\n\n  @motivating @ui\n  Scenario Outline: The source column displays customizable referral information if the reward is from a referral\n    Given the \"reward-source-text\" prop is <propValue>\n    And a user with a referral reward\n    And that reward has <rewardSource>\n    When they view the rewards table\n    Then then source displays <referralText>\n    And under it displays the full name of the <referralUser>\n\n    Examples:\n      | propValue                                                                             | rewardSource  | referralText | referralUser  |\n      |                                                                                       | REFERRED      | Referred by  | referrer user |\n      |                                                                                       | FRIEND_SIGNUP | Referral to  | referred user |\n      | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | REFERRED      | Referred you | referrer user |\n      | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | FRIEND_SIGNUP | You Referred | referred user |\n\n  @motivating @ui\n  Scenario Outline: The source column displays the existing name for a referral if either the first name or last name does not exist\n    Given a user with a referral reward\n    And referral user exists\n    And referral user has <name>\n    But referral user has no <otherName>\n    When they view the rewards table\n    Then referral user's name is displayed as <name>\n\n    Examples:\n      | name       | otherName  |\n      | first.name | last.name  |\n      | last.name  | first.name |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as \"Anonymous User\" if the referral user has no names\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    And the <referralUser> has no first name\n    And the <referralUser> has no last name\n    When they view the rewards table\n    Then then source displays <sourceText>\n    And under it displays \"Anonymous User\"\n\n    Examples:\n      | rewardSource  | referralUser  | sourceText  |\n      | FRIEND_SIGNUP | referrer      | Referral to |\n      | REFERRED      | referred user | Referred by |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as \"Deleted User\" if the referral user is deleted in the system\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    But <referral> user was deleted\n    When they view the rewards table\n    Then the source displays <sourceText>\n    And under it displays \"Deleted User\"\n\n    Examples:\n      | rewardSource    | referral | sourceText  |\n      | \"FRIEND_SIGNUP\" | referrer | Referral to |\n      | \"REFERRED\"      | referred | Referred by |\n\n  @motivating @ui\n  Scenario Outline: The source column displays referral as \"Deleted referral\" if the referral user is deleted in the system\n    Given a user with a referral reward\n    And that reward has <rewardSource>\n    But <referral> user was deleted\n    When they view the rewards table\n    Then the source displays <sourceText>\n    And under it displays \"Deleted referral\"\n\n    Examples:\n      | rewardSource    | referral | sourceText  |\n      | \"FRIEND_SIGNUP\" | referrer | Referral to |\n      | \"REFERRED\"      | referred | Referred by |\n\n  @minutia @ui\n  Scenario Outline: Name fallbacks for referral users without names are customizable\n    Given <prop> with <value>\n    And a user with a referral reward\n    But the referral user <hadAction>\n    When they view the rewards table\n    Then the source displays <value> as the referral user\n\n    Examples:\n      | prop           | value           | hadAction                       |\n      | deleted-user   | Former Customer | was deleted                     |\n      | anonymous-user | Nameless User   | had first and last name deleted |\n\n  @motivating\n  Scenario Outline: Source text can be customized\n    Given the \"reward-source-text\" prop is \"{rewardSource, select, MANUAL {Support} AUTOMATED {Loyalty Program} other {}}\"\n    And a user with a <rewardSource> reward\n    When they view the rewards table\n    Then the source is <sourceText>\n\n    Examples:\n      | rewardSource | sourceText      |\n      | MANUAL       | Support         |\n      | AUTOMATED    | Loyalty Program |\n";
 
@@ -12059,7 +12410,7 @@ const rewardsData$1 = {
   prettyAvailableNumber: "19",
   prettyRedeemedNumber: "0",
   statuses: ["AVAILABLE", "PENDING"],
-  pendingReasons: ["US_TAX", "PAYOUT_CONFIGURATION_MISSING"],
+  pendingReasons: ["US_TAX", "MISSING_PAYOUT_CONFIGURATION"],
   globalRewardKey: null,
   rewardSource: "MANUAL",
   prettyRedeemedCredit: "0 Points",
@@ -12255,7 +12606,7 @@ const SourceCellDeletedUser = () => {
 const SourceCellDeletedReferral = () => {
   return (index.h("sqm-rewards-table-source-cell", { 
     //@ts-ignore
-    reward: { ...rewardsData$1, ...deletedReferral() }, referralText: "Referral to", deletedReferralText: "Deleted Referral" }));
+    reward: { ...rewardsData$1, ...deletedReferral(null) }, referralText: "Referral to", deletedReferralText: "Deleted Referral" }));
 };
 const StatusCellAvailable = () => {
   return (index.h("sqm-rewards-table-status-cell", { statusText: "Available", reward: rewardsData$1 }));
@@ -12352,7 +12703,7 @@ const StatusCellPendingTaxSubmission = () => {
 const StatusCellPendingPartnerCreation = () => {
   return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
       ...rewardsData$1,
-      pendingReasons: ["PAYOUT_CONFIGURATION_MISSING"],
+      pendingReasons: ["MISSING_PAYOUT_CONFIGURATION"],
     } }));
 };
 const StatusCellPayoutSent = () => {
@@ -12728,6 +13079,12 @@ 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),
@@ -12735,6 +13092,14 @@ 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),
@@ -12742,6 +13107,14 @@ 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),
@@ -12754,6 +13127,12 @@ 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" }),
@@ -12766,6 +13145,12 @@ 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" }),
@@ -12778,6 +13163,12 @@ 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" }),
@@ -14200,7 +14591,7 @@ const EmailRegistration_stories = {
   // scenario,
   },
 };
-const defaultProps$f = {
+const defaultProps$g = {
   states: {
     error: "",
     loading: false,
@@ -14219,59 +14610,59 @@ const defaultProps$f = {
     fraudErrorMessageTitle: "Looks like you tried referring yourself",
   },
 };
-const Default$i = () => index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, defaultProps$f));
+const Default$i = () => index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, defaultProps$g));
 const HasFirstNameLastName = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$f,
+  ...defaultProps$g,
   content: {
-    ...defaultProps$f.content,
+    ...defaultProps$g.content,
     includeName: true,
   },
 })));
 const WithSlots = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$f,
+  ...defaultProps$g,
   content: {
-    ...defaultProps$f.content,
+    ...defaultProps$g.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$f,
+  ...defaultProps$g,
   content: {
-    ...defaultProps$f.content,
+    ...defaultProps$g.content,
     hideBorder: true,
   },
 })));
 const BackgroundColor$2 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$f,
+  ...defaultProps$g,
   content: {
-    ...defaultProps$f.content,
+    ...defaultProps$g.content,
     backgroundColor: "aquamarine",
   },
 })));
 const Loading$5 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$f,
+  ...defaultProps$g,
   states: {
     error: "",
     loading: true,
   },
 })));
 const Error$a = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$f,
+  ...defaultProps$g,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
   },
 })));
 const FraudError = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$f,
+  ...defaultProps$g,
   states: {
     error: "FRAUD",
     loading: false,
   },
 })));
 const EmptyEmailError = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$f,
+  ...defaultProps$g,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -14303,7 +14694,7 @@ const CouponCode_stories = {
     scenario: scenario$C,
   },
 };
-const defaultProps$g = {
+const defaultProps$h = {
   tooltiptext: "Copied to Clipboard",
   copyString: "THANKSJANE125uv125",
   open: false,
@@ -14328,43 +14719,43 @@ const TextAlignRight$3 = () => {
   return index.h("sqm-coupon-code", { textAlign: "right" });
 };
 const CopyButton$3 = () => {
-  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-outside" })));
+  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$h, { buttonStyle: "button-outside" })));
 };
 const CopyButtonCustomLabel = () => {
-  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-outside", "copy-button-label": "test long custom label" })));
+  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$h, { buttonStyle: "button-outside", "copy-button-label": "test long custom label" })));
 };
 const CopyButtonBelow$3 = () => {
-  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-below" })));
+  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$h, { buttonStyle: "button-below" })));
 };
 const CopyButtonBelowCustomLabel = () => {
-  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-below", "copy-button-label": "test long custom label" })));
+  return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$h, { buttonStyle: "button-below", "copy-button-label": "test long custom label" })));
 };
 const Loading$6 = () => {
-  return index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { loading: true }));
+  return index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$h, { loading: true }));
 };
 const CopyButtonLoading = () => {
-  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { buttonStyle: "button-outside", loading: true })));
+  return (index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$h, { buttonStyle: "button-outside", loading: true })));
 };
 const CopyButtonBelowLoading = () => {
-  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { buttonStyle: "button-below", loading: true })));
+  return (index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$h, { buttonStyle: "button-below", loading: true })));
 };
 const ErrorGeneric = () => {
-  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." })));
+  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." })));
 };
 const ErrorPending = () => {
-  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!" })));
+  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!" })));
 };
 const ErrorFullfillment = () => {
-  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." })));
+  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." })));
 };
 const ErrorCancelled = () => {
-  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." })));
+  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." })));
 };
 const ErrorExpired = () => {
-  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." })));
+  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." })));
 };
 const ErrorRedeemed = () => {
-  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "success", error: true, errorText: "Looks like you\u2019ve already redeemed this code." })));
+  return (index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$h, { errorType: "success", error: true, errorText: "Looks like you\u2019ve already redeemed this code." })));
 };
 
 const CouponCode$1 = /*#__PURE__*/Object.freeze({
@@ -14398,7 +14789,7 @@ const LogoutCurrentUser_stories = {
     scenario: scenario$D,
   },
 };
-const defaultProps$h = {
+const defaultProps$i = {
   filledInEmailText: "Currently showing referral data for noah.clarke@saasquatch.com",
   onSwitchClick: () => console.log("clicked"),
   switchUserText: "not you?",
@@ -14406,7 +14797,7 @@ const defaultProps$h = {
   emailErrorText: "Error fetching email",
 };
 const Default$j = () => {
-  return index.h(sqmLogoutCurrentUserView.LogoutCurrentUserView, Object.assign({}, defaultProps$h));
+  return index.h(sqmLogoutCurrentUserView.LogoutCurrentUserView, Object.assign({}, defaultProps$i));
 };
 
 const LogoutCurrentUser = /*#__PURE__*/Object.freeze({
@@ -14423,16 +14814,16 @@ const LinkButton_stories = {
     scenario: scenario$E,
   },
 };
-const defaultProps$i = {
+const defaultProps$j = {
   link: "https://example.com",
   openInNewTab: false,
   buttonText: "Button Text",
 };
 const Default$k = () => {
-  return index.h("sqm-link-button", Object.assign({}, defaultProps$i));
+  return index.h("sqm-link-button", Object.assign({}, defaultProps$j));
 };
 const OpenInNewTab = () => {
-  return (index.h("sqm-link-button", Object.assign({}, { ...defaultProps$i, openInNewTab: true })));
+  return (index.h("sqm-link-button", Object.assign({}, { ...defaultProps$j, openInNewTab: true })));
 };
 
 const LinkButton = /*#__PURE__*/Object.freeze({
@@ -14448,7 +14839,7 @@ const CloseButton_stories = {
   // scenario,
   },
 };
-const defaultProps$j = {};
+const defaultProps$k = {};
 const containerStyles = {
   position: "relative",
   width: "500px",
@@ -14457,15 +14848,15 @@ const containerStyles = {
   padding: "25px",
 };
 const Default$l = () => {
-  return index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$j));
+  return index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$k));
 };
 const InAContainer = () => {
   return (index.h("div", { style: containerStyles },
-    index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$j))));
+    index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$k))));
 };
 const CustomColor$1 = () => {
   return (index.h("div", { style: containerStyles },
-    index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, { ...defaultProps$j, color: "blue" }))));
+    index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, { ...defaultProps$k, color: "blue" }))));
 };
 
 const CloseButton = /*#__PURE__*/Object.freeze({
@@ -14508,10 +14899,10 @@ const style$1 = {
     border: "1px solid var(--sl-color-gray-200)",
   },
 };
-const sheet$1 = JSS.createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
+const sheet$2 = JSS.createStyleSheet(style$1);
+const styleString$1 = sheet$2.toString();
 const DocusignExpiredView = (props) => {
-  const { classes } = sheet$1;
+  const { classes } = sheet$2;
   const { text } = props;
   return (index.h("div", null,
     index.h("style", { type: "text/css" }, styleString$1),
@@ -14558,13 +14949,13 @@ const registeredInCanada = {
   text: indirectDetailsSlotText,
 };
 const RegisteredInOtherRegion = () => {
-  return index.h(sqmInvoiceTableView.OtherRegionSlotView, Object.assign({}, registeredInOtherRegion));
+  return index.h(IndirectTaxDetailsView.OtherRegionSlotView, Object.assign({}, registeredInOtherRegion));
 };
 const RegisteredInCanada = () => {
   return index.h(IndirectDetailsSlotView, Object.assign({}, registeredInCanada));
 };
 const RegisteredInOtherRegionWithErrors = () => {
-  return (index.h(sqmInvoiceTableView.OtherRegionSlotView, Object.assign({}, registeredInOtherRegion, { states: {
+  return (index.h(IndirectTaxDetailsView.OtherRegionSlotView, Object.assign({}, registeredInOtherRegion, { states: {
       ...registeredInOtherRegion.states,
       formState: {
         ...registeredInOtherRegion.states.formState,
@@ -14620,8 +15011,8 @@ const style$2 = {
     gap: "var(--sl-spacing-small)",
   },
 };
-const sheet$2 = JSS.createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
+const sheet$3 = JSS.createStyleSheet(style$2);
+const styleString$2 = sheet$3.toString();
 const vanillaStyle = `
     :host{
       display: block;   
@@ -14645,14 +15036,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$2.classes.Container, style: {
+  return (index.h("div", { part: "sqm-base", class: sheet$3.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$2.classes.TitleContainer },
+    index.h("div", { part: "sqm-title-container", class: sheet$3.classes.TitleContainer },
       index.h("sl-icon", { name: icon }),
       index.h("p", null, title)),
     index.h("p", null, description)));
@@ -14661,17 +15052,17 @@ const RadioCardView = ({ title, icon, description, selected, }) => {
 const RadioCard_stories = {
   title: "Components/Radio Card",
 };
-const defaultProps$k = {
+const defaultProps$l = {
   selected: false,
   title: "Card Title",
   description: "Description text goes here",
   icon: "apple",
 };
 const DefaultView$1 = () => {
-  return index.h(RadioCardView, Object.assign({}, defaultProps$k));
+  return index.h(RadioCardView, Object.assign({}, defaultProps$l));
 };
 const Selected = () => {
-  return index.h(RadioCardView, Object.assign({}, defaultProps$k, { selected: true }));
+  return index.h(RadioCardView, Object.assign({}, defaultProps$l, { selected: true }));
 };
 
 const RadioCard = /*#__PURE__*/Object.freeze({
@@ -14684,13 +15075,13 @@ const RadioCard = /*#__PURE__*/Object.freeze({
 const ProgressBar_stories = {
   title: "Components/Progress Bar",
 };
-const defaultProps$l = {
+const defaultProps$m = {
   progress: 2,
   goal: 4,
   steps: true,
 };
 const TaxAndPayoutsProgressBar = () => {
-  return index.h(ShadowViewAddon.ProgressBar, Object.assign({}, defaultProps$l, { stageCount: 4, currentStage: 2 }));
+  return index.h(RewardExchangeListData.ProgressBar, Object.assign({}, defaultProps$m, { stageCount: 4, currentStage: 2 }));
 };
 
 const ProgressBar$1 = /*#__PURE__*/Object.freeze({
@@ -14770,7 +15161,6 @@ const bankingFormProps = {
     currency: "USD",
     loadingError: false,
     email: "test@example.com",
-    showModal: false,
   },
   callbacks: {
     onVerificationHide: () => { },
@@ -14780,8 +15170,6 @@ const bankingFormProps = {
     setPaymentScheduleChecked: () => { },
     setCountrySearch: () => { },
     onBack: async () => console.log("back"),
-    onModalOpen: () => { },
-    onModalClose: () => { },
   },
   refs: { formRef: { current: null } },
 };
@@ -15102,15 +15490,6 @@ 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,
@@ -15137,8 +15516,7 @@ const BankingInfoForm = /*#__PURE__*/Object.freeze({
   BankingInfoFormWithFixedDayPaymentSchedule: BankingInfoFormWithFixedDayPaymentSchedule,
   BankingInfoFormWithFixedDayPaymentScheduleWithError: BankingInfoFormWithFixedDayPaymentScheduleWithError,
   BankingInfoFormWithFixedDayPaymentScheduleLoading: BankingInfoFormWithFixedDayPaymentScheduleLoading,
-  BankingInfoFormVerififyIdentityModal: BankingInfoFormVerififyIdentityModal,
-  BankingInfoFormModalOpen: BankingInfoFormModalOpen
+  BankingInfoFormVerififyIdentityModal: BankingInfoFormVerififyIdentityModal
 });
 
 const InvoiceTableCell_stories = {
@@ -15361,6 +15739,12 @@ 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" }),
@@ -15389,7 +15773,7 @@ const UseInvoiceTableCells = /*#__PURE__*/Object.freeze({
 const WidgetEmailVerification_stories = {
   title: "Components/Widget Email Verification",
 };
-const defaultProps$m = {
+const defaultProps$n = {
   email: "",
   error: false,
   loading: false,
@@ -15404,19 +15788,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$m,
+        ...defaultProps$n,
         email: "test@example.com",
       },
     } })));
 const Loading$8 = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$m,
+      ...defaultProps$n,
       initialLoading: true,
     },
   } }));
 const SaveLoading = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$m,
+      ...defaultProps$n,
       loading: true,
     },
   } }));
@@ -15427,19 +15811,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$m,
+        ...defaultProps$n,
         email: "test@example.com",
       },
     } })));
 const InvalidEmail = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$m,
+      ...defaultProps$n,
       error: true,
     },
   } }));
 const SendCodeError = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$m,
+      ...defaultProps$n,
       sendCodeError: true,
     },
   } }));
@@ -15459,35 +15843,35 @@ const WidgetEmailVerification = /*#__PURE__*/Object.freeze({
 const WidgetCodeVerification_stories = {
   title: "Components/Widget Code Verification",
 };
-const defaultProps$n = {
+const defaultProps$o = {
   initialiseLoading: false,
   email: "testemail@example.com",
   loading: false,
   verifyFailed: false,
   emailResent: false,
 };
-const Default$n = () => (index.h("sqm-code-verification", { demoData: { states: defaultProps$n } }));
+const Default$n = () => (index.h("sqm-code-verification", { demoData: { states: defaultProps$o } }));
 const InitialLoading = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$n,
+      ...defaultProps$o,
       initialiseLoading: true,
     },
   } }));
 const Loading$9 = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$n,
+      ...defaultProps$o,
       loading: true,
     },
   } }));
 const CodeResent = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$n,
+      ...defaultProps$o,
       emailResent: true,
     },
   } }));
 const VerificationFailed = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$n,
+      ...defaultProps$o,
       verifyFailed: true,
     },
   } }));
@@ -15505,17 +15889,17 @@ const WidgetCodeVerification = /*#__PURE__*/Object.freeze({
 const PayoutButtonScroll_stories = {
   title: "Components/Payout Scroll Button",
 };
-const defaultProps$o = {
+const defaultProps$p = {
   payoutSettingsComplete: true,
 };
-const CompletedTaxForm = () => (index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$o, payoutSettingsComplete: true } } }));
+const CompletedTaxForm = () => (index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$p, 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$o, payoutSettingsComplete: true } } })));
+  index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$p, payoutSettingsComplete: true } } })));
 
 const PayoutButtonScroll = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -15527,20 +15911,20 @@ const PayoutButtonScroll = /*#__PURE__*/Object.freeze({
 const PayoutStatusAlert_stories = {
   title: "Components/Payout Status Alert",
 };
-const defaultProps$p = {
+const defaultProps$q = {
   error: false,
   status: "INFORMATION_REQUIRED",
   loading: false,
   veriffLoading: false,
 };
-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 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 PayoutStatusAlert = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -15634,7 +16018,7 @@ const ReferralCodes$1 = /*#__PURE__*/Object.freeze({
 const BaseRegistrationForm_stories = {
   title: "Components/Microsite Base Registration",
 };
-const defaultProps$q = {
+const defaultProps$r = {
   states: {
     error: "",
   },
@@ -15654,13 +16038,13 @@ const defaultProps$q = {
   },
 };
 const errorProps$a = {
-  ...defaultProps$q,
+  ...defaultProps$r,
   states: {
     error: "Something went wrong. Please try again.",
   },
 };
 const Default$o = () => {
-  return index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, Object.assign({}, defaultProps$q));
+  return index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, Object.assign({}, defaultProps$r));
 };
 const EmailError = () => {
   return index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, Object.assign({}, errorProps$a));
@@ -15676,7 +16060,7 @@ const BaseRegistrationForm = /*#__PURE__*/Object.freeze({
 const PortalGoogleRegistrationForm_stories = {
   title: "Components/Microsite Google Register",
 };
-const defaultProps$r = {
+const defaultProps$s = {
   states: {
     error: "",
     loading: false,
@@ -15702,7 +16086,7 @@ const defaultProps$r = {
     passwordField: null,
     formData: (index.h("div", null,
       " ",
-      index.h(ShadowViewAddon.NameFieldsView, { states: {
+      index.h(sqmNameFieldsView.NameFieldsView, { states: {
           registrationFormState: {
             validationErrors: undefined,
             disabled: true,
@@ -15721,7 +16105,7 @@ const defaultProps$r = {
   },
 };
 const errorProps$b = {
-  ...defaultProps$r,
+  ...defaultProps$s,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -15737,7 +16121,7 @@ const errorProps$b = {
   },
 };
 const loadingProps$8 = {
-  ...defaultProps$r,
+  ...defaultProps$s,
   states: {
     error: "",
     loading: true,
@@ -15752,11 +16136,11 @@ const loadingProps$8 = {
     },
   },
 };
-const Default$p = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$r)));
+const Default$p = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$s)));
 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$r, { content: {
-    ...defaultProps$r.content,
+const TermsAndConditions$4 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$s, { content: {
+    ...defaultProps$s.content,
     terms: (index.h("p", null,
       "By signing up you agree to the",
       " ",
@@ -15775,7 +16159,7 @@ const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
 const QRCode_stories = {
   title: "Components/QR Code",
 };
-const defaultProps$s = {
+const defaultProps$t = {
   hideTitle: false,
   loading: false,
   alignment: "center",
@@ -15794,28 +16178,28 @@ const defaultProps$s = {
   errorDescriptionText: "Please refresh this page and try again",
 };
 const Default$q = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t));
 };
 const HideTitle = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { hideTitle: true }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t, { hideTitle: true }));
 };
 const LeftAlign$1 = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { alignment: "left" }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t, { alignment: "left" }));
 };
 const CenterAlign = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { alignment: "center" }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t, { alignment: "center" }));
 };
 const RightAlign$1 = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { alignment: "right" }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t, { alignment: "right" }));
 };
 const Loading$c = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { loading: true }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t, { loading: true }));
 };
 const Error$c = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { error: true }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t, { error: true }));
 };
 const DownloadError = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$s, { error: true }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$t, { error: true }));
 };
 
 const QRCode = /*#__PURE__*/Object.freeze({
@@ -15848,29 +16232,29 @@ const Default$r = `
 `;
 const Orangey = `
 :root{
-    ${ShadowViewAddon.autoColorScaleCss("orange")}
+    ${AutoColor.autoColorScaleCss("orange")}
 }
 `;
 const Netflix = `
 :root{
-    ${ShadowViewAddon.autoColorScaleCss("#e50914")}
+    ${AutoColor.autoColorScaleCss("#e50914")}
 }
 `;
 const SaaSquatchCorporate = `
 :root{
-    ${ShadowViewAddon.autoColorScaleCss("#65bd60")}
+    ${AutoColor.autoColorScaleCss("#65bd60")}
     --sl-font-sans: Arial;
 }
 `;
 const NYTimes = `
 :root{
-    ${ShadowViewAddon.autoColorScaleCss("black")}
+    ${AutoColor.autoColorScaleCss("black")}
     --sl-font-sans: Georgia, 'Times New Roman', serif;
 }
 `;
 const Klip = `
 :root{
-    ${ShadowViewAddon.autoColorScaleCss("#4225C4")};
+    ${AutoColor.autoColorScaleCss("#4225C4")};
 }
 
 `;
@@ -17211,7 +17595,7 @@ const mergeHTMLPlugin = {
 /**
  * @param {Node} node
  */
-function tag(node) {
+function tag$1(node) {
   return node.nodeName.toLowerCase();
 }
 
@@ -17235,7 +17619,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(child).match(/br|hr|img|input/)) {
+        if (!tag$1(child).match(/br|hr|img|input/)) {
           result.push({
             event: 'stop',
             offset: offset,
@@ -17294,14 +17678,14 @@ function mergeStreams(original, highlighted, value) {
       return ' ' + attr.nodeName + '="' + escapeHTML(attr.value) + '"';
     }
     // @ts-ignore
-    result += '<' + tag(node) + [].map.call(node.attributes, attributeString).join('') + '>';
+    result += '<' + tag$1(node) + [].map.call(node.attributes, attributeString).join('') + '>';
   }
 
   /**
    * @param {Node} node
    */
   function close(node) {
-    result += '</' + tag(node) + '>';
+    result += '</' + tag$1(node) + '>';
   }
 
   /**
@@ -18552,7 +18936,7 @@ const stories = [
   LinkButton,
   EmailRegistration,
   CloseButton,
-  sqmInvoiceTableView.TaxForm,
+  TaxForm_stories.TaxForm,
   RadioCard,
   ProgressBar$1,
   TaxFormSlots,