@saasquatch/mint-components 2.1.8-2 → 2.1.8-22

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

@@ -2,42 +2,78 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8277cbb3.js');
-require('./global-b7b1b8fe.js');
-const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-f8c8495f.js');
-require('./cjs-1066ec21.js');
-require('./utils-6847bc06.js');
-const JSS = require('./JSS-8503a151.js');
-require('./useReferralCodes-0f7948af.js');
-require('./mixins-4761d472.js');
-const copyTextView = require('./copy-text-view-bb2c0ea7.js');
-require('./sqm-text-span-view-f274fdf2.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-424e406a.js');
-const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-020f661c.js');
-const GenericTableView = require('./GenericTableView-be5648e4.js');
-require('./useChildElements-041127d7.js');
-const luxon = require('./luxon-c1ad356a.js');
-const sqmCloseButtonView = require('./sqm-close-button-view-e9f2a454.js');
-require('./index-8c6255f5.js');
+const index = require('./index-fd67d7bc.js');
+require('./global-746daf93.js');
+const domContextHooks_module = require('./dom-context-hooks.module-224e09d4.js');
+const index_module = require('./index.module-c79bd5b0.js');
+require('./GoogleFonts-039d880f.js');
+require('./jss-preset-default.esm-b48f0c33.js');
+const JSS = require('./JSS-518e9b4d.js');
+require('./mixins-f51b04f1.js');
+const sqmCloseButtonView = require('./sqm-close-button-view-f0739ccb.js');
+require('./utils-e326d1b5.js');
+require('./index-9a829282.js');
 require('./imageUrl-a7880cab.js');
-const emailRegistrationView = require('./email-registration-view-306c8878.js');
-const sqmLeadCheckboxFieldView = require('./sqm-lead-checkbox-field-view-0af2a157.js');
-const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-67fd7934.js');
-const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-f330d641.js');
-const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-6616e3e0.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-49b152dd.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-c81fe7f1.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-639337e3.js');
-require('./utilities-fcdb9504.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-6b1acd90.js');
-require('./ErrorView-ee7b0f36.js');
-const sqmQrCodeView = require('./sqm-qr-code-view-1f2daa76.js');
-const ShadowViewAddon = require('./ShadowViewAddon-a26deae6.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-70a47420.js');
-const sqmUserInfoFormView = require('./sqm-user-info-form-view-53306f6e.js');
-const data = require('./data-8c8a08f6.js');
-const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-0cd7ebdb.js');
+require('./cjs-2bf512b9.js');
+const emailRegistrationView = require('./email-registration-view-efcb8798.js');
+const sqmLeadCheckboxFieldView = require('./sqm-lead-checkbox-field-view-66bf79c7.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-141b8e74.js');
+const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-edbe1348.js');
+const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-c9f45972.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-dfa1e885.js');
+require('./data-7eb11f12.js');
+require('./sqm-text-span-view-ca0a70ba.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-f24758ec.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-5950c3eb.js');
+require('./utilities-25747d38.js');
+const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-5264d4ba.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-93b37b10.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-ba89eede.js');
+require('./ErrorView-dd328bfc.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-914906e4.js');
+require('./useReferralCodes-4304f68f.js');
+const sqmBigStatView = require('./sqm-big-stat-view-b695364f.js');
+const useShareButton = require('./useShareButton-51b74885.js');
+const copyTextView = require('./copy-text-view-fd17b89a.js');
+const sqmPortalSectionView = require('./sqm-portal-section-view-f9b0ae2c.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-39599a6d.js');
+const sqmStatContainerView = require('./sqm-stat-container-view-731eadab.js');
+const sqmPortalChangePasswordView = require('./sqm-portal-change-password-view-aa777a10.js');
+const sqmPortalFooterView = require('./sqm-portal-footer-view-9d4a593d.js');
+const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-a08708f4.js');
+require('./useChildElements-708e8262.js');
+const useDemoBigStat = require('./useDemoBigStat-4fb173ba.js');
+const sqmCardFeedView = require('./sqm-card-feed-view-46b4a93a.js');
+const luxon = require('./luxon-99375875.js');
+const sqmTaskCardView = require('./sqm-task-card-view-34f94a28.js');
+const sqmPortalRegisterView = require('./sqm-portal-register-view-c04ac7eb.js');
+const sqmCheckboxFieldView = require('./sqm-checkbox-field-view-09bcdb50.js');
+const sqmCouponCodeView = require('./sqm-coupon-code-view-7a7ca5bb.js');
+const sqmDropdownFieldView = require('./sqm-dropdown-field-view-e8493bb3.js');
+const sqmEditProfileView = require('./sqm-edit-profile-view-2eb33fff.js');
+const ShadowViewAddon = require('./ShadowViewAddon-bb6d86c8.js');
+const sqmHeroView = require('./sqm-hero-view-b48fa1bd.js');
+const sqmInputFieldView = require('./sqm-input-field-view-2268467f.js');
+const GenericTableView = require('./GenericTableView-6ca805d1.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-31892cf3.js');
+const sqmNameFieldsView = require('./sqm-name-fields-view-98361d92.js');
+const sqmPortalChangeMarketingView = require('./sqm-portal-change-marketing-view-8961e575.js');
+const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-3ff8e40d.js');
+const sqmPortalFrameView = require('./sqm-portal-frame-view-d07af74c.js');
+const sqmPortalLoginView = require('./sqm-portal-login-view-f5ac5571.js');
+const sqmReferralIframeView = require('./sqm-referral-iframe-view-ad358e47.js');
+const RewardExchangeListData = require('./RewardExchangeListData-7d1aff90.js');
+const useShareLink = require('./useShareLink-1282123e.js');
+const LoadingView = require('./LoadingView-a567e2eb.js');
+const subregions = require('./subregions-d43680d2.js');
+const utils = require('./utils-a63cf4f4.js');
+require('./countries-473a6e62.js');
+const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-d8458b7b.js');
+const sqmLeadFormView = require('./sqm-lead-form-view-21432255.js');
+const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-2569b521.js');
+const sqmLeadDropdownFieldView = require('./sqm-lead-dropdown-field-view-07e55fbc.js');
+const sqmUserInfoFormView = require('./sqm-user-info-form-view-68d199ec.js');
+const Themes = require('./Themes-77883dd2.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -691,7 +727,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 +754,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 +774,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 +792,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 +826,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 +931,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 +1029,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 +1060,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 +1093,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 +1230,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 +1272,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 +1348,10 @@ function handleInterpolation(mergedProps, registered, interpolation) {
 
           var styles = interpolation.styles + ";";
 
+          if ("development" !== 'production' && interpolation.map !== undefined) {
+            styles += interpolation.map;
+          }
+
           return styles;
         }
 
@@ -1153,10 +1365,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 +1416,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 +1439,9 @@ function createStringFromObject(mergedProps, registered, obj) {
 
             default:
               {
+                if ("development" !== 'production' && _key === 'undefined') {
+                  console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);
+                }
 
                 string += _key + "{" + interpolated + "}";
               }
@@ -1222,6 +1455,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 +1478,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 +1490,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 +1519,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 +1599,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 +1720,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=domContextHooks_module.useMemo(function(){return l.map(p$1).reduce(d$1,{_:[]})},l),C=decodeURIComponent(window.location.hash).replace("#",""),z=domContextHooks_module.useState(f(C,S)),O=z[0],j=z[1],I=null==O?void 0:O.key,R=domContextHooks_module.useState(!0),U=R[0],_=R[1],B=domContextHooks_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=domContextHooks_module.useMemo(function(){return l.map(p$1).reduce(d$1,{_:[]})},l),C=decodeURIComponent(window.location.hash).replace("#",""),z=domContextHooks_module.useState(f$1(C,S)),O=z[0],j=z[1],I=null==O?void 0:O.key,R=domContextHooks_module.useState(!0),U=R[0],_=R[1],B=domContextHooks_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 NewPortal_stories = {
   title: "New Portal",
@@ -1464,8 +1742,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,
@@ -1550,7 +1828,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,
@@ -1558,13 +1836,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,
@@ -1572,21 +1850,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,
@@ -1597,9 +1875,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 = () => {
@@ -1643,7 +1921,7 @@ const EditProfile = () => {
           onChange: (e) => console.log(e),
         },
       })),
-      index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, {
+      index.h(sqmPortalChangePasswordView.PortalChangePasswordView, Object.assign({}, {
         states: {
           open: true,
           error: "",
@@ -1672,7 +1950,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,
@@ -1681,15 +1959,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" },
@@ -1697,7 +1975,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,
@@ -1706,30 +1984,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"))),
       })))));
 };
 
@@ -1844,8 +2122,11 @@ var marked = domContextHooks_module.createCommonjsModule(function (module, expor
  */
 
 (function (global, factory) {
-   module.exports = factory() ;
-}(domContextHooks_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());
+}(domContextHooks_module.commonjsGlobal, (function () { 'use strict';
+
   function _defineProperties(target, props) {
     for (var i = 0; i < props.length; i++) {
       var descriptor = props[i];
@@ -4927,13 +5208,13 @@ const PoweredByImg_stories = {
   title: "Powered By",
 };
 const Default = () => {
-  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({
@@ -5067,10 +5348,10 @@ const errorProps = {
   },
 };
 const Default$1 = () => {
-  return index.h(ShadowViewAddon.BaseRegistrationFormView, Object.assign({}, defaultProps));
+  return index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, Object.assign({}, defaultProps));
 };
 const EmailError = () => {
-  return index.h(ShadowViewAddon.BaseRegistrationFormView, Object.assign({}, errorProps));
+  return index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, Object.assign({}, errorProps));
 };
 
 const BaseRegistrationForm = /*#__PURE__*/Object.freeze({
@@ -5090,7 +5371,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 = {
@@ -5099,7 +5380,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 = {
@@ -5108,7 +5389,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 = {
@@ -5117,7 +5398,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 = {
@@ -5127,7 +5408,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 = {
@@ -5137,7 +5418,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 = {
@@ -5145,7 +5426,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 = {
@@ -5153,7 +5434,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 CustomStyles = () => {
   return (index.h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
@@ -5236,7 +5517,7 @@ const View = (statType, format, label) => {
 };
 const DemoView = () => {
   const [type, setType] = domContextHooks_module.useState("/someRandomThing/with/someArguments/1234");
-  const { props, label } = ShadowViewAddon.useDemoBigStat({
+  const { props, label } = useDemoBigStat.useDemoBigStat({
     statType: type,
     render: () => { },
     disconnectedCallback: () => { },
@@ -5249,7 +5530,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?"));
@@ -5582,92 +5863,92 @@ const manyActions = {
   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)),
+  return (index.h(sqmCardFeedView.CardFeedView, { width: 347, gap: 24 },
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions))),
     index.h("div", null,
       index.h("div", null,
-        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction)))),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions)),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions)),
+        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions)),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions))),
     index.h("div", null,
       index.h("div", null,
-        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction)))),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions))));
+        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions))));
 };
 const TaskCardGridHighGap = () => {
-  return (index.h(ShadowViewAddon.CardFeedView, { width: 400, gap: 150 },
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction)),
+  return (index.h(sqmCardFeedView.CardFeedView, { width: 400, gap: 150 },
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions))),
     index.h("div", null,
       index.h("div", null,
-        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction)))),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions)),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions)),
+        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions)),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions))),
     index.h("div", null,
       index.h("div", null,
-        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction)))),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions))));
+        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions))));
 };
 const TaskCardGridLowGap = () => {
-  return (index.h(ShadowViewAddon.CardFeedView, { width: 400, gap: 12 },
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction)),
+  return (index.h(sqmCardFeedView.CardFeedView, { width: 400, gap: 12 },
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions))),
     index.h("div", null,
       index.h("div", null,
-        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction)))),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions)),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions)),
+        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions)),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions))),
     index.h("div", null,
       index.h("div", null,
-        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction)))),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions))));
+        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions))));
 };
 const TaskCardGridHighWidth = () => {
-  return (index.h(ShadowViewAddon.CardFeedView, { width: 1000, gap: 24 },
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction)),
+  return (index.h(sqmCardFeedView.CardFeedView, { width: 1000, gap: 24 },
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions))),
     index.h("div", null,
       index.h("div", null,
-        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction)))),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions)),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions)),
+        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions)),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions))),
     index.h("div", null,
       index.h("div", null,
-        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction)))),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions))));
+        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions))));
 };
 const TaskCardGridLowWidth = () => {
-  return (index.h(ShadowViewAddon.CardFeedView, { width: 250, gap: 24 },
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction)),
+  return (index.h(sqmCardFeedView.CardFeedView, { width: 250, gap: 24 },
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions))),
     index.h("div", null,
       index.h("div", null,
-        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction)))),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions)),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions)),
+        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions)),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions)),
     index.h("div", null,
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions))),
     index.h("div", null,
       index.h("div", null,
-        index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction)))),
-    index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions))));
+        index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction)))),
+    index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions))));
 };
 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",
@@ -5774,16 +6055,16 @@ const defaultRegisterProps = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-const Default$3 = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$1))));
-const DefaultChecked = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$1, { states: {
+const Default$3 = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$1))));
+const DefaultChecked = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$1, { states: {
     ...defaultProps$1.states,
     checked: true,
   } }))));
-const CustomLabel = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$1, { content: {
+const CustomLabel = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$1, { content: {
     ...defaultProps$1.content,
     checkboxLabel: "I Agree",
   } }))));
-const Error$1 = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$1, { states: {
+const Error$1 = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$1, { states: {
     ...defaultProps$1.states,
     registrationFormState: {
       validationErrors: {
@@ -5791,7 +6072,7 @@ const Error$1 = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView
       },
     },
   } }))));
-const CustomError = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$1, { states: {
+const CustomError = createHookStory(() => (index.h(sqmCheckboxFieldView.CheckboxFieldView, Object.assign({}, defaultProps$1, { states: {
     ...defaultProps$1.states,
     registrationFormState: {
       validationErrors: {
@@ -5802,14 +6083,14 @@ const CustomError = createHookStory(() => (index.h(ShadowViewAddon.CheckboxField
     ...defaultProps$1.content,
     errorMessage: "This checkbox must be checked to continue",
   } }))));
-const TermsAndConditions = createHookStory(() => (index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+const TermsAndConditions = 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(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+const TermsAndConditionsCustomLabel = createHookStory(() => (index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
   //@ts-ignore
   content: {
     ...defaultRegisterProps.content,
@@ -5819,7 +6100,7 @@ const TermsAndConditionsCustomLabel = createHookStory(() => (index.h(sqmPortalVe
       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(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+const TermsAndConditionsLongCustomLabel = createHookStory(() => (index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
   //@ts-ignore
   content: {
     ...defaultRegisterProps.content,
@@ -5996,31 +6277,31 @@ const CopyButtonBelowCustomLabel = () => {
   return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$3, { buttonStyle: "button-below", "copy-button-label": "test long custom label" })));
 };
 const Loading = () => {
-  return index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$3, { loading: true }));
+  return index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$3, { loading: true }));
 };
 const CopyButtonLoading = () => {
-  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$3, { buttonStyle: "button-outside", loading: true })));
+  return (index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$3, { buttonStyle: "button-outside", loading: true })));
 };
 const CopyButtonBelowLoading = () => {
-  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$3, { buttonStyle: "button-below", loading: true })));
+  return (index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$3, { buttonStyle: "button-below", loading: true })));
 };
 const ErrorGeneric = () => {
-  return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$3, { 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$3, { 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$3, { 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$3, { 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$3, { 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$3, { 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$3, { 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$3, { 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$3, { 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$3, { 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$3, { errorType: "success", error: true, errorText: "Looks like you\u2019ve already redeemed this code." })));
+  return (index.h(sqmCouponCodeView.CouponCodeView, Object.assign({}, defaultProps$3, { errorType: "success", error: true, errorText: "Looks like you\u2019ve already redeemed this code." })));
 };
 
 const CouponCode$1 = /*#__PURE__*/Object.freeze({
@@ -6079,7 +6360,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,
@@ -6092,7 +6373,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,
@@ -6105,7 +6386,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,
@@ -6141,12 +6422,12 @@ const defaultProps$4 = {
     ],
   },
 };
-const Default$5 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$4))));
-const CustomLabel$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$4, { content: {
+const Default$5 = createHookStory(() => (index.h(sqmDropdownFieldView.DropdownFieldView, Object.assign({}, defaultProps$4))));
+const CustomLabel$1 = createHookStory(() => (index.h(sqmDropdownFieldView.DropdownFieldView, Object.assign({}, defaultProps$4, { content: {
     ...defaultProps$4.content,
     dropdownLabel: "Pick your favorite",
   } }))));
-const Error$2 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$4, { states: {
+const Error$2 = createHookStory(() => (index.h(sqmDropdownFieldView.DropdownFieldView, Object.assign({}, defaultProps$4, { states: {
     ...defaultProps$4.states,
     registrationFormState: {
       validationErrors: {
@@ -6154,7 +6435,7 @@ const Error$2 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView
       },
     },
   } }))));
-const CustomError$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$4, { content: {
+const CustomError$1 = createHookStory(() => (index.h(sqmDropdownFieldView.DropdownFieldView, Object.assign({}, defaultProps$4, { content: {
     ...defaultProps$4.content,
     errorMessage: "An option must be selected to continue",
   }, states: {
@@ -6281,14 +6562,14 @@ const defaultProps$5 = {
 };
 const EditProfileFormDisabled = () => {
   const props = defaultProps$5;
-  return index.h(ShadowViewAddon.EditProfileView, Object.assign({}, props));
+  return index.h(sqmEditProfileView.EditProfileView, Object.assign({}, props));
 };
 const EditProfileFormEnabled = () => {
   const props = {
     ...defaultProps$5,
     states: { ...defaultProps$5.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 }));
@@ -6567,7 +6848,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" },
@@ -6587,7 +6868,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 = {
@@ -6601,7 +6882,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 = {
@@ -6621,7 +6902,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 = {
@@ -6641,7 +6922,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 = {
@@ -6661,7 +6942,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 = {
@@ -6681,7 +6962,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 = {
@@ -6701,7 +6982,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 = {
@@ -6721,7 +7002,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 = {
@@ -6738,7 +7019,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 InstantAccessLoggedOutView = () => {
   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: 2, "padding-size": "medium", "wrap-direction": "wrap", "secondary-background": "var(--sqm-portal-background)", "column-to-hide-in-mobile": "primary" },
@@ -6852,9 +7133,9 @@ const defaultRegisterProps$1 = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-const Default$6 = () => index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$6));
-const CustomLabel$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$6, { content: { ...defaultProps$6.content, fieldLabel: "My Label" } })));
-const Error$3 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$6, { states: {
+const Default$6 = () => index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$6));
+const CustomLabel$2 = () => (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$6, { content: { ...defaultProps$6.content, fieldLabel: "My Label" } })));
+const Error$3 = () => (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$6, { states: {
     ...defaultProps$6.states,
     registrationFormState: {
       validationErrors: {
@@ -6862,7 +7143,7 @@ const Error$3 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({},
       },
     },
   } })));
-const CustomError$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$6, { content: {
+const CustomError$2 = () => (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$6, { content: {
     ...defaultProps$6.content,
     errorMessage: "A value must be entered to continue",
   }, states: {
@@ -6874,26 +7155,26 @@ const CustomError$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assi
     },
   } })));
 const DateType = () => {
-  return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$6, { content: {
+  return (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$6, { content: {
       ...defaultProps$6.content,
       fieldLabel: "Date",
       fieldType: "date",
     } })));
 };
 const TelType = () => {
-  return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$6, { content: {
+  return (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$6, { content: {
       ...defaultProps$6.content,
       fieldLabel: "Phone Number",
       fieldType: "tel",
     } })));
 };
-const RegistrationField = () => (index.h(sqmPortalVerifyEmailView.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$6)),
+    formData: index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$6)),
   } })));
-const RegistrationFieldCustomLabel = () => (index.h(sqmPortalVerifyEmailView.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$6, { content: {
+    formData: (index.h(sqmInputFieldView.InputFieldView, Object.assign({}, defaultProps$6, { content: {
         ...defaultProps$6.content,
         fieldLabel: "Data",
       } }))),
@@ -7117,7 +7398,7 @@ const simpleInvoiceTableProps = {
   },
 };
 const SimpleInvoiceTable = () => {
-  return (index.h(sqmUserInfoFormView.InvoiceTableView, { header: "Invoices", description: "Invoice table description" },
+  return (index.h(sqmInvoiceTableView.InvoiceTableView, { header: "Invoices", description: "Invoice table description" },
     index.h(GenericTableView.GenericTableView, Object.assign({}, simpleInvoiceTableProps))));
 };
 const EmptyTable = () => {
@@ -7217,6 +7498,12 @@ function setupGraphQL$5() {
 const InvoiceTable$1 = createHookStory(() => {
   setupGraphQL$5();
   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" }),
@@ -7441,6 +7728,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" })),
 };
@@ -8281,10 +8569,10 @@ const errorProps$1 = {
   },
 };
 const NameFields = () => {
-  return index.h(ShadowViewAddon.NameFieldsView, Object.assign({}, props));
+  return index.h(sqmNameFieldsView.NameFieldsView, Object.assign({}, props));
 };
 const NameFieldsWithErrors = () => {
-  return index.h(ShadowViewAddon.NameFieldsView, Object.assign({}, errorProps$1));
+  return index.h(sqmNameFieldsView.NameFieldsView, Object.assign({}, errorProps$1));
 };
 
 const NameFields$1 = /*#__PURE__*/Object.freeze({
@@ -8335,6 +8623,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,
@@ -8369,6 +8671,11 @@ const NavigationSidebar = /*#__PURE__*/Object.freeze({
 const Pagination_stories = {
   title: "Components/Link Button",
 };
+const defaultProps$9 = {
+  link: "https://example.com",
+  openInNewTab: false,
+  buttonText: "Button Text",
+};
 const Default$a = () => {
   return index.h("sqm-pagination", null);
 };
@@ -8436,17 +8743,17 @@ const PasswordField = /*#__PURE__*/Object.freeze({
 const PayoutButtonScroll_stories = {
   title: "Components/Payout Scroll Button",
 };
-const defaultProps$9 = {
+const defaultProps$a = {
   payoutSettingsComplete: true,
 };
-const CompletedTaxForm = () => (index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$9, payoutSettingsComplete: true } } }));
+const CompletedTaxForm = () => (index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$a, 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$9, payoutSettingsComplete: true } } })));
+  index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$a, payoutSettingsComplete: true } } })));
 
 const PayoutButtonScroll = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -8458,7 +8765,7 @@ const PayoutButtonScroll = /*#__PURE__*/Object.freeze({
 const ChangeMarketing_stories = {
   title: "Components/Change Marketing Emails Status",
 };
-const defaultProps$a = {
+const defaultProps$b = {
   states: {
     success: false,
     loading: false,
@@ -8489,21 +8796,21 @@ const Default$b = () => {
   return index.h("sqm-portal-change-marketing", null);
 };
 const Loading$3 = () => {
-  return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$a, { states: { ...defaultProps$a.states, loading: true } })));
+  return (index.h(sqmPortalChangeMarketingView.ChangeMarktingView, Object.assign({}, defaultProps$b, { states: { ...defaultProps$b.states, loading: true } })));
 };
 const Error$4 = () => {
-  return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$a, { states: {
-      ...defaultProps$a.states,
+  return (index.h(sqmPortalChangeMarketingView.ChangeMarktingView, Object.assign({}, defaultProps$b, { states: {
+      ...defaultProps$b.states,
       formState: {
-        ...defaultProps$a.states.formState,
+        ...defaultProps$b.states.formState,
         errors: { error: true },
         error: "An error string",
       },
     } })));
 };
 const Success = () => {
-  return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$a, { states: {
-      ...defaultProps$a.states,
+  return (index.h(sqmPortalChangeMarketingView.ChangeMarktingView, Object.assign({}, defaultProps$b, { states: {
+      ...defaultProps$b.states,
       success: true,
     } })));
 };
@@ -8525,7 +8832,7 @@ const ChangePassword_stories = {
     scenario: scenario$g,
   },
 };
-const defaultProps$b = {
+const defaultProps$c = {
   states: {
     open: false,
     loading: false,
@@ -8657,12 +8964,12 @@ const successProps = {
     submit: (e) => console.log("Submit", e),
   },
 };
-const Default$c = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, defaultProps$b));
-const Open = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, openProps));
-const Error$5 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, errorProps$2));
-const PaswordError = () => (index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, passwordErrorProps)));
-const Loading$4 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, loadingProps));
-const Success$1 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, successProps));
+const Default$c = () => index.h(sqmPortalChangePasswordView.PortalChangePasswordView, Object.assign({}, defaultProps$c));
+const Open = () => index.h(sqmPortalChangePasswordView.PortalChangePasswordView, Object.assign({}, openProps));
+const Error$5 = () => index.h(sqmPortalChangePasswordView.PortalChangePasswordView, Object.assign({}, errorProps$2));
+const PaswordError = () => (index.h(sqmPortalChangePasswordView.PortalChangePasswordView, Object.assign({}, passwordErrorProps)));
+const Loading$4 = () => index.h(sqmPortalChangePasswordView.PortalChangePasswordView, Object.assign({}, loadingProps));
+const Success$1 = () => index.h(sqmPortalChangePasswordView.PortalChangePasswordView, Object.assign({}, successProps));
 
 const ChangePassword = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -8868,7 +9175,7 @@ const defaultStates = {
   loadingVerification: false,
   countdown: 10,
 };
-const defaultProps$c = {
+const defaultProps$d = {
   states: defaultStates,
   callbacks: defaultCallbacks,
   content: defaultContent,
@@ -8906,7 +9213,7 @@ const loadingVerificationProps = {
   callbacks: defaultCallbacks,
   content: defaultContent,
 };
-const Default$d = () => index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, defaultProps$c));
+const Default$d = () => index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, defaultProps$d));
 const EmailVerificationWithError = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, errorProps$3)));
 const EmailVerificationLoading = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, loadingProps$1)));
 const EmailVerificationCheckingVerification = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, loadingVerificationProps)));
@@ -8930,7 +9237,7 @@ const PortalFooter_stories = {
     scenario: scenario$j,
   },
 };
-const defaultProps$d = {
+const defaultProps$e = {
   supportEmail: "support@example.com",
   supportText: "For program support, contact {email}",
   hidePoweredBy: false,
@@ -8940,12 +9247,12 @@ const defaultProps$d = {
   paddingBottom: "large",
   paddingLeft: "large",
 };
-const DefaultFooter = () => index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$d));
-const FooterWithTerms = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$d, { termsLink: "https://example.com", termsText: "Terms and Conditions" })));
-const FooterWithFAQ = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$d, { faqLink: "https://example.com", faqText: "FAQ" })));
-const FooterWithTermsAndFAQ = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$d, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
-const FooterNoPoweredBy = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$d, { 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$d, { 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$e));
+const FooterWithTerms = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$e, { termsLink: "https://example.com", termsText: "Terms and Conditions" })));
+const FooterWithFAQ = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$e, { faqLink: "https://example.com", faqText: "FAQ" })));
+const FooterWithTermsAndFAQ = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$e, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
+const FooterNoPoweredBy = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$e, { 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$e, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hideSupportText: true })));
 
 const PortalFooter = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -8966,7 +9273,7 @@ const PortalForgotPassword_stories = {
     scenario: scenario$k,
   },
 };
-const defaultProps$e = {
+const defaultProps$f = {
   states: {
     error: "",
     loading: false,
@@ -9027,11 +9334,11 @@ const successProps$2 = {
     successAlertText: "An email has been sent with instructions to reset your password.",
   },
 };
-const Default$e = () => index.h(sqmPortalVerifyEmailView.PortalForgotPasswordView, Object.assign({}, defaultProps$e));
+const Default$e = () => index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, defaultProps$f));
 const DemoDataTest = () => (index.h("sqm-portal-forgot-password", null));
-const ForgotPasswordWithError = () => (index.h(sqmPortalVerifyEmailView.PortalForgotPasswordView, Object.assign({}, errorProps$4)));
-const ForgotPasswordLoading = () => (index.h(sqmPortalVerifyEmailView.PortalForgotPasswordView, Object.assign({}, loadingProps$2)));
-const ForgotPasswordSuccess = () => (index.h(sqmPortalVerifyEmailView.PortalForgotPasswordView, Object.assign({}, successProps$2)));
+const ForgotPasswordWithError = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, errorProps$4)));
+const ForgotPasswordLoading = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, loadingProps$2)));
+const ForgotPasswordSuccess = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, successProps$2)));
 
 const PortalForgotPassword = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9076,7 +9383,7 @@ function setupLoggedOut() {
 const PortalFrame_stories = {
   title: "Components/Microsite Frame",
 };
-const defaultProps$f = {
+const defaultProps$g = {
   data: {
     footer: index.h("span", null, "example@example.com"),
     header: (index.h("div", { slot: "header", style: { display: "flex", flexDirection: "column" } },
@@ -9093,9 +9400,9 @@ const defaultProps$f = {
 };
 const FrameWithMenu = () => {
   const props = {
-    ...defaultProps$f,
+    ...defaultProps$g,
   };
-  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"),
@@ -9104,9 +9411,9 @@ const FrameWithMenu = () => {
 };
 const FrameWithoutMenu = () => {
   const props = {
-    ...defaultProps$f,
+    ...defaultProps$g,
   };
-  return index.h(ShadowViewAddon.PortalFrameView, Object.assign({}, props));
+  return index.h(sqmPortalFrameView.PortalFrameView, Object.assign({}, props));
 };
 const FullStackFrame = () => {
   var _a;
@@ -9171,7 +9478,7 @@ const PortalFrame = /*#__PURE__*/Object.freeze({
 const PortalGoogleRegistrationForm_stories = {
   title: "Components/Microsite Google Register",
 };
-const defaultProps$g = {
+const defaultProps$h = {
   states: {
     error: "",
     loading: false,
@@ -9197,7 +9504,7 @@ const defaultProps$g = {
     passwordField: null,
     formData: (index.h("div", null,
       " ",
-      index.h(ShadowViewAddon.NameFieldsView, { states: {
+      index.h(sqmNameFieldsView.NameFieldsView, { states: {
           optional: false,
           registrationFormState: {
             validationErrors: undefined,
@@ -9217,7 +9524,7 @@ const defaultProps$g = {
   },
 };
 const errorProps$5 = {
-  ...defaultProps$g,
+  ...defaultProps$h,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -9233,7 +9540,7 @@ const errorProps$5 = {
   },
 };
 const loadingProps$3 = {
-  ...defaultProps$g,
+  ...defaultProps$h,
   states: {
     error: "",
     loading: true,
@@ -9251,8 +9558,8 @@ const loadingProps$3 = {
 const Default$f = () => (index.h("sqm-portal-google-registration-form", null));
 const RegisterWithError = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, errorProps$5)));
 const RegisterLoading = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, loadingProps$3)));
-const TermsAndConditions$2 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$g, { content: {
-    ...defaultProps$g.content,
+const TermsAndConditions$2 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$h, { content: {
+    ...defaultProps$h.content,
     terms: (index.h("p", null,
       "By signing up you agree to the",
       " ",
@@ -9316,7 +9623,7 @@ const PortalGoogleLoginFormStories = /*#__PURE__*/Object.freeze({
 const PortalLogin_stories = {
   title: "Components/Microsite Login",
 };
-const defaultProps$h = {
+const defaultProps$i = {
   states: {
     error: "",
     loading: false,
@@ -9362,7 +9669,7 @@ const loadingProps$4 = {
   },
 };
 const googleProps = {
-  ...defaultProps$h,
+  ...defaultProps$i,
   content: {
     secondaryButton: (index.h("span", null,
       "Don't have an account?",
@@ -9371,8 +9678,8 @@ const googleProps = {
     googleButton: index.h("sl-button", null, "Sign in with Google"),
   },
 };
-const Default$h = () => (index.h("sqm-portal-login", { demoData: { ...defaultProps$h } }));
-const Text = () => index.h(sqmPortalVerifyEmailView.PortalLoginView, Object.assign({}, defaultProps$h));
+const Default$h = () => (index.h("sqm-portal-login", { demoData: { ...defaultProps$i } }));
+const Text = () => index.h(sqmPortalLoginView.PortalLoginView, Object.assign({}, defaultProps$i));
 const IsGoogle = () => (index.h("sqm-portal-login", { demoData: { ...googleProps } }));
 const LoginWithError = () => (index.h("sqm-portal-login", { demoData: { ...errorProps$6 } }));
 const LoginLoading = () => (index.h("sqm-portal-login", { demoData: { ...loadingProps$4 } }));
@@ -9390,7 +9697,7 @@ const PortalLogin = /*#__PURE__*/Object.freeze({
 const PortalProfile_stories = {
   title: "Components/Microsite Profile",
 };
-const defaultProps$i = {
+const defaultProps$j = {
   states: {
     success: false,
     loading: false,
@@ -9606,7 +9913,7 @@ const successProps$3 = {
     onChange: (e) => console.log(e),
   },
 };
-const Default$i = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, defaultProps$i));
+const Default$i = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, defaultProps$j));
 const DefaultNoCountry = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, noCountry));
 const Loading$6 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, loadingProps$5));
 const Disabled = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, disabledProps));
@@ -9627,7 +9934,7 @@ const PortalProfile = /*#__PURE__*/Object.freeze({
 const PortalRegister_stories = {
   title: "Components/Microsite Register",
 };
-const defaultProps$j = {
+const defaultProps$k = {
   states: {
     registrationFormState: {},
     error: "",
@@ -9722,9 +10029,9 @@ const slottedProps = {
       index.h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
   },
 };
-const Default$j = () => index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, defaultProps$j));
-const RegisterWithError$1 = () => index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, errorProps$8));
-const RegisterLoading$1 = () => index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, loadingProps$6));
+const Default$j = () => index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultProps$k));
+const RegisterWithError$1 = () => index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, errorProps$8));
+const RegisterLoading$1 = () => index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, loadingProps$6));
 const FieldsHidden = () => {
   return (index.h("sqm-portal-register", { demoData: {
       states: {
@@ -9737,9 +10044,9 @@ const FieldsHidden = () => {
       },
     } }));
 };
-const SlottedInputs = () => index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, slottedProps));
-const TermsAndConditions$3 = () => (index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, defaultProps$j, { content: {
-    ...defaultProps$j.content,
+const SlottedInputs = () => index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, slottedProps));
+const TermsAndConditions$3 = () => (index.h(sqmPortalRegisterView.PortalRegisterView, Object.assign({}, defaultProps$k, { content: {
+    ...defaultProps$k.content,
     terms: (index.h("p", null,
       "By signing up you agree to the",
       " ",
@@ -9761,7 +10068,7 @@ const PortalRegistrationForm_stories = {
   title: "Components/Microsite Portal Register",
 };
 // TODO: Figure out if we can delete this component and it's stories since we have a duplicate
-const defaultProps$k = {
+const defaultProps$l = {
   states: {
     error: "",
     loading: false,
@@ -9838,7 +10145,7 @@ const slottedProps$1 = {
       index.h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
   },
 };
-const Default$k = () => index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$k));
+const Default$k = () => index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$l));
 const RegisterWithError$2 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, errorProps$9)));
 const RegisterLoading$2 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, loadingProps$7)));
 const FieldsHidden$1 = () => {
@@ -9854,12 +10161,12 @@ const FieldsHidden$1 = () => {
     } }));
 };
 const SlottedInputs$1 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, slottedProps$1)));
-const RegisterWithMarketingEmailsCheckbox = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$k, { content: {
-    ...defaultProps$k.content,
+const RegisterWithMarketingEmailsCheckbox = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$l, { content: {
+    ...defaultProps$l.content,
     emailOptIn: (index.h("sqm-checkbox-field", { checkboxLabel: "I would like to receive marketing and promotional emails for this referral program" })),
   } })));
-const TermsAndConditions$4 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$k, { content: {
-    ...defaultProps$k.content,
+const TermsAndConditions$4 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$l, { content: {
+    ...defaultProps$l.content,
     terms: (index.h("p", null,
       "By signing up you agree to the",
       " ",
@@ -9886,7 +10193,7 @@ const PortalResetPassword_stories = {
     scenario: scenario$l,
   },
 };
-const defaultProps$l = {
+const defaultProps$m = {
   states: {
     error: "",
     loading: false,
@@ -10024,7 +10331,7 @@ const validatingCodeProps = {
     failed: () => console.log("failed"),
   },
 };
-const Default$l = () => index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, defaultProps$l));
+const Default$l = () => index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, defaultProps$m));
 const DefaultWithoutConfirmField = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, defaultPropsNoConfirm)));
 const ResetPasswordWithError = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, errorProps$a)));
 const ResetPasswordLoading = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, loadingProps$8)));
@@ -10226,7 +10533,7 @@ const ProgramMenu = /*#__PURE__*/Object.freeze({
 const QRCode_stories = {
   title: "Components/QR Code",
 };
-const defaultProps$m = {
+const defaultProps$n = {
   hideTitle: false,
   loading: false,
   alignment: "center",
@@ -10245,28 +10552,28 @@ const defaultProps$m = {
   errorDescriptionText: "Please refresh this page and try again",
 };
 const Default$m = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$m));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$n));
 };
 const HideTitle = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$m, { hideTitle: true }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$n, { hideTitle: true }));
 };
 const LeftAlign$1 = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$m, { alignment: "left" }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$n, { alignment: "left" }));
 };
 const CenterAlign = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$m, { alignment: "center" }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$n, { alignment: "center" }));
 };
 const RightAlign$1 = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$m, { alignment: "right" }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$n, { alignment: "right" }));
 };
 const Loading$7 = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$m, { loading: true }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$n, { loading: true }));
 };
 const Error$7 = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$m, { error: true }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$n, { error: true }));
 };
 const DownloadError = () => {
-  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$m, { error: true }));
+  return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$n, { error: true }));
 };
 
 const QRCode = /*#__PURE__*/Object.freeze({
@@ -10301,8 +10608,8 @@ const style$1 = {
     gap: "var(--sl-spacing-small)",
   },
 };
-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 vanillaStyle = `
     :host{
       display: block;   
@@ -10333,14 +10640,14 @@ const RadioCardView = ({ title, icon, description, selected, }) => {
   const border = selected
     ? "var(--sqm-border-thickness) solid var(--sqm-primary-color)"
     : "var(--sqm-border-thickness) solid var(--sqm-border-color)";
-  return (index.h("div", { part: "sqm-base", class: sheet$1.classes.Container, style: {
+  return (index.h("div", { part: "sqm-base", class: sheet$2.classes.Container, style: {
       border,
     } },
     index.h("style", { type: "text/css" },
       styleString$1,
       vanillaStyle),
     index.h("sl-checkbox", { checked: selected }),
-    index.h("div", { part: "sqm-title-container", class: sheet$1.classes.TitleContainer },
+    index.h("div", { part: "sqm-title-container", class: sheet$2.classes.TitleContainer },
       index.h("sl-icon", { name: icon }),
       index.h("p", null, title)),
     index.h("p", null, description)));
@@ -10349,17 +10656,17 @@ const RadioCardView = ({ title, icon, description, selected, }) => {
 const RadioCard_stories = {
   title: "Components/Radio Card",
 };
-const defaultProps$n = {
+const defaultProps$o = {
   selected: false,
   title: "Card Title",
   description: "Description text goes here",
   icon: "apple",
 };
 const DefaultView = () => {
-  return index.h(RadioCardView, Object.assign({}, defaultProps$n));
+  return index.h(RadioCardView, Object.assign({}, defaultProps$o));
 };
 const Selected = () => {
-  return index.h(RadioCardView, Object.assign({}, defaultProps$n, { selected: true }));
+  return index.h(RadioCardView, Object.assign({}, defaultProps$o, { selected: true }));
 };
 
 const RadioCard = /*#__PURE__*/Object.freeze({
@@ -10704,13 +11011,12 @@ const props$1 = {
       iframeSrc: "https://example.com",
       iframeHeight: "100%",
       iframeWidth: "100%",
-      codeParam: "rsCode",
     },
   },
 };
 const ReferralIframe = () => {
   return (index.h("div", { style: { width: "1000px", height: "1000px" } },
-    index.h(ShadowViewAddon.ReferralIframeView, Object.assign({}, props$1))));
+    index.h(sqmReferralIframeView.ReferralIframeView, Object.assign({}, props$1))));
 };
 const ReferralIframeError = () => {
   return (index.h("div", { style: { width: "1000px", height: "1000px" } },
@@ -11861,14 +12167,14 @@ const defaultTaxDocument = {
   type: "W9",
   dateCreated: luxon.luxon.DateTime.now().toMillis() - 1000000,
 };
-const defaultProps$o = {
+const defaultProps$p = {
   statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }",
   statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PROCESSING {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }",
   rewardReceivedText: "Reward received on",
   hideDetails: false,
 };
 const CashReward = () => {
-  return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [{ ...cashReward }], taxConnection: taxConnection }, defaultProps$o)));
+  return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [{ ...cashReward }], taxConnection: taxConnection }, defaultProps$p)));
 };
 const PayoutApproved = () => {
   return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
@@ -11880,7 +12186,7 @@ const PayoutApproved = () => {
           dateScheduled: Date.now() - 600000000,
         },
       },
-    ], taxConnection: taxConnection }, defaultProps$o)));
+    ], taxConnection: taxConnection }, defaultProps$p)));
 };
 const PayoutProcessing = () => {
   return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
@@ -11892,7 +12198,7 @@ const PayoutProcessing = () => {
           dateScheduled: getDays$1(),
         },
       },
-    ], taxConnection: taxConnection }, defaultProps$o)));
+    ], taxConnection: taxConnection }, defaultProps$p)));
 };
 const PayoutFailed$1 = () => {
   return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
@@ -11904,7 +12210,7 @@ const PayoutFailed$1 = () => {
           dateScheduled: Date.now() - 100000,
         },
       },
-    ], taxConnection: taxConnection }, defaultProps$o)));
+    ], taxConnection: taxConnection }, defaultProps$p)));
 };
 const PayoutCancelled$1 = () => {
   return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
@@ -11916,7 +12222,7 @@ const PayoutCancelled$1 = () => {
           dateScheduled: Date.now() - 100000,
         },
       },
-    ], taxConnection: taxConnection }, defaultProps$o)));
+    ], taxConnection: taxConnection }, defaultProps$p)));
 };
 const PendingTaxReview$1 = () => {
   return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
@@ -11934,7 +12240,7 @@ const PendingTaxReview$1 = () => {
           status: "NOT_VERIFIED",
         },
       },
-    } }, defaultProps$o)));
+    } }, defaultProps$p)));
 };
 const PendingNewTaxForm$1 = () => {
   return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
@@ -11952,7 +12258,7 @@ const PendingNewTaxForm$1 = () => {
           status: "INACTIVE",
         },
       },
-    } }, defaultProps$o)));
+    } }, defaultProps$p)));
 };
 const PendingTaxSubmission$1 = () => {
   return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
@@ -11967,7 +12273,7 @@ const PendingTaxSubmission$1 = () => {
         ...taxConnection.publisher,
         currentTaxDocument: null,
       },
-    } }, defaultProps$o)));
+    } }, defaultProps$p)));
 };
 const PendingPartnerCreation$1 = () => {
   return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
@@ -11979,7 +12285,7 @@ const PendingPartnerCreation$1 = () => {
     ], taxConnection: {
       ...taxConnection,
       connected: false,
-    } }, defaultProps$o)));
+    } }, defaultProps$p)));
 };
 const PendingW9 = () => {
   return (index.h("sqm-referral-table-rewards-cell", Object.assign({ rewards: [
@@ -11991,7 +12297,7 @@ const PendingW9 = () => {
     ], taxConnection: {
       ...taxConnection,
       taxHandlingEnabled: false,
-    } }, defaultProps$o)));
+    } }, defaultProps$p)));
 };
 
 const TaxAndCashReferralTableRewardsCell = /*#__PURE__*/Object.freeze({
@@ -12157,6 +12463,12 @@ function setupGraphQLKlip({ token, id }) {
 const ReferralTable$1 = createHookStory(() => {
   setupGraphQL$8();
   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),
@@ -12164,6 +12476,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),
@@ -12171,6 +12491,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),
@@ -12183,6 +12511,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" }),
@@ -12195,6 +12529,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" }),
@@ -12207,6 +12547,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" }),
@@ -12234,26 +12580,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$9 = () => StoryBase(ShadowViewAddon.loading);
-const Empty$3 = () => 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$9 = () => StoryBase(RewardExchangeListData.loading);
+const Empty$3 = () => StoryBase(RewardExchangeListData.empty);
 
 const RewardExchangeList = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -12359,6 +12705,12 @@ const DefaultView$1 = (props) => {
 };
 const RewardList = createHookStory(() => {
   setupGraphQL$9();
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
   return (index.h("sqm-reward-exchange-list", { "list-type": "something" }));
 });
 const FixedGlobalReward = createHookStory(() => {
@@ -12468,6 +12820,112 @@ const rewardsData$1 = {
   },
   partnerFundsTransfer: null,
 };
+const cashReward$1 = {
+  id: "68c34fd98a6cb4f5f8394084",
+  type: "CREDIT",
+  value: 59900,
+  prettyValue: "$599.00",
+  availableValue: 0,
+  prettyAvailableValue: "$0.00",
+  prettyAssignedCredit: "$599.00",
+  prettyRedeemedCredit: "$599.00",
+  prettyValueNumber: "599",
+  prettyAvailableNumber: "0",
+  prettyRedeemedNumber: "599",
+  unit: "CASH/USD",
+  baseUnit: "CASH",
+  rewardUnit: {
+    key: "CASH/USD",
+    name: "Cash",
+  },
+  name: null,
+  dateCreated: 1757630425085,
+  dateScheduledFor: 1757631025115,
+  dateGiven: 1757630737115,
+  dateExpires: null,
+  dateCancelled: null,
+  dateRedeemed: 1757630737115,
+  dateModified: 1757630737115,
+  rewardSource: "MANUAL",
+  fuelTankCode: null,
+  fuelTankType: null,
+  fuelTankSyncSetting: null,
+  currency: "USD",
+  meta: null,
+  programId: "40444",
+  programRewardKey: null,
+  globalRewardKey: "cash",
+  program: {
+    id: "40444",
+    name: "Make Money Program",
+    template: {
+      id: "2qdmAx1fi31deo3P9O36sQ",
+      name: "Referral Program With Objectives",
+    },
+  },
+  partnerFundsTransfer: {
+    id: "693503",
+    status: "TRANSFERRED",
+    dateScheduled: 1768583958000,
+    dateTransferred: 1768583958000,
+    dateCreated: 1767979159000,
+  },
+  user: {
+    id: "8da2c67e05e3e56de7ea638c2705017945211621c80e1cd4b4aac0e423d1cdb2",
+    accountId: "8da2c67e05e3e56de7ea638c2705017945211621c80e1cd4b4aac0e423d1cdb2",
+    firstName: "Billy",
+    lastName: "Jean",
+    email: "billy.jean@impact.com",
+    impactConnection: {
+      connected: true,
+      taxHandlingEnabled: true,
+      publisher: null,
+    },
+  },
+  referral: null,
+  description: null,
+  statuses: ["REDEEMED"],
+  // rewardRedemptionTransactions: {
+  //   data: [
+  //     {
+  //       exchangedRewards: {
+  //         data: [],
+  //       },
+  //       redeemedRewards: {
+  //         data: [
+  //           {
+  //             prettyValue: "$599.00",
+  //           },
+  //         ],
+  //       },
+  //       creditRedeemed: 59900,
+  //       prettyRedeemedCredit: "$599.00",
+  //       dateRedeemed: 1757630737115,
+  //     },
+  //   ],
+  // },
+  rewardRedemptionTransactions: {
+    data: null,
+  },
+  exchangedRewardRedemptionTransaction: null,
+  pendingReasons: [],
+};
+const taxConnection$1 = {
+  connected: true,
+  taxHandlingEnabled: true,
+  publisher: {
+    requiredTaxDocumentType: "W8BEN",
+    currentTaxDocument: {
+      status: "NOT_VERIFIED",
+      type: "W8BEN",
+      dateCreated: 321321487,
+    },
+    withdrawalSettings: {
+      paymentMethod: "BANK_TRANSFER",
+    },
+    payoutsAccount: null,
+  },
+};
 const RewardsCellCreditSingle = () => {
   return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...singleRedeemed } }));
 };
@@ -12636,7 +13094,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 }));
@@ -12954,7 +13412,7 @@ const RewardsTable$1 = /*#__PURE__*/Object.freeze({
 const TaxAndCashRewardsTableCell_stories = {
   title: "Components/Tax And Cash Rewards Table Cell",
 };
-const cashReward$1 = {
+const cashReward$2 = {
   id: "68c34fd98a6cb4f5f8394084",
   type: "CREDIT",
   value: 59900,
@@ -13022,6 +13480,16 @@ const cashReward$1 = {
 const pending$1 = {
   statuses: ["PENDING"],
 };
+const payoutSent = {
+  statuses: ["PAYOUT_APPROVED"],
+};
+const payoutFailed = {
+  statuses: ["PAYOUT_FAILED"],
+};
+const payoutCancelled = {
+  statuses: ["PAYOUT_CANCELLED"],
+  dateCancelled: 1355612521321,
+};
 const processingPFT = {
   partnerFundsTransfer: {
     id: "123",
@@ -13031,7 +13499,7 @@ const processingPFT = {
     dateTransferred: null,
   },
 };
-const taxConnection$1 = {
+const taxConnection$2 = {
   connected: true,
   taxHandlingEnabled: true,
   publisher: {
@@ -13048,23 +13516,23 @@ const taxConnection$1 = {
   },
 };
 const CashReward$1 = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...cashReward$1 }, availableText: "{availableAmount} remaining" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...cashReward$2 }, availableText: "{availableAmount} remaining" }));
 };
 const StatusCellPendingTaxReview = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...cashReward$1, ...pending$1, pendingReasons: ["US_TAX"] }, taxConnection: {
-      ...taxConnection$1,
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...cashReward$2, ...pending$1, pendingReasons: ["US_TAX"] }, taxConnection: {
+      ...taxConnection$2,
       publisher: {
         requiredTaxDocumentType: "W8BEN",
         currentTaxDocument: {
           status: "",
         },
-        ...taxConnection$1.publisher,
+        ...taxConnection$2.publisher,
       },
     } }));
 };
 const StatusCellPendingNewTaxForm = () => {
   return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
-      ...cashReward$1,
+      ...cashReward$2,
       statuses: ["PENDING"],
       pendingReasons: ["US_TAX"],
     }, taxConnection: {
@@ -13085,10 +13553,10 @@ const StatusCellPendingNewTaxForm = () => {
     } }));
 };
 const StatusCellPendingTaxSubmission = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...cashReward$1, ...pending$1, pendingReasons: ["US_TAX"] }, taxConnection: {
-      ...taxConnection$1,
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...cashReward$2, ...pending$1, pendingReasons: ["US_TAX"] }, taxConnection: {
+      ...taxConnection$2,
       publisher: {
-        ...taxConnection$1.publisher,
+        ...taxConnection$2.publisher,
         requiredTaxDocumentType: "W8BEN",
         currentTaxDocument: null,
       },
@@ -13096,27 +13564,27 @@ const StatusCellPendingTaxSubmission = () => {
 };
 const StatusCellPendingPartnerCreation = () => {
   return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
-      ...cashReward$1,
+      ...cashReward$2,
       ...pending$1,
       pendingReasons: ["US_TAX"],
     }, taxConnection: {
-      ...taxConnection$1,
+      ...taxConnection$2,
       connected: false,
     } }));
 };
 const StatusCellPendingW9 = () => {
   return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
-      ...cashReward$1,
+      ...cashReward$2,
       ...pending$1,
       pendingReasons: ["US_TAX"],
     }, taxConnection: {
-      ...taxConnection$1,
+      ...taxConnection$2,
       taxHandlingEnabled: false,
     } }));
 };
 const StatusCellPayoutSent = () => {
   return (index.h("sqm-rewards-table-status-cell", { statusText: "Payout Sent", reward: {
-      ...cashReward$1,
+      ...cashReward$2,
       partnerFundsTransfer: {
         id: "transfer-123",
         status: "TRANSFERRED",
@@ -13124,11 +13592,11 @@ const StatusCellPayoutSent = () => {
         dateTransferred: 1640995200000,
         dateCreated: 1640995200000,
       },
-    }, taxConnection: taxConnection$1 }));
+    }, taxConnection: taxConnection$2 }));
 };
 const StatusCellPayoutFailed = () => {
   return (index.h("sqm-rewards-table-status-cell", { statusText: "Payout Failed", reward: {
-      ...cashReward$1,
+      ...cashReward$2,
       partnerFundsTransfer: {
         id: "transfer-failed",
         status: "OVERDUE",
@@ -13139,11 +13607,11 @@ const StatusCellPayoutFailed = () => {
     } }));
 };
 const StatusCellPayoutProcessing = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Payment Processing", reward: { ...cashReward$1, ...processingPFT } }));
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Payment Processing", reward: { ...cashReward$2, ...processingPFT } }));
 };
 const StatusCellPayoutCancelled = () => {
   return (index.h("sqm-rewards-table-status-cell", { statusText: "Payout Cancelled", reward: {
-      ...cashReward$1,
+      ...cashReward$2,
       partnerFundsTransfer: {
         id: "transfer-reversed",
         status: "REVERSED",
@@ -13331,6 +13799,14 @@ function setupGraphQLKlip$1({ 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),
@@ -13340,6 +13816,12 @@ const RewardTableDemoHook = createHookStory(() => {
 const RewardsTableWithProgram = createHookStory(() => {
   setupGraphQL$a();
   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),
@@ -13349,6 +13831,12 @@ const RewardsTableWithProgram = createHookStory(() => {
 const RewardsTableNoProgram = createHookStory(() => {
   setupGraphQL$a();
   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),
@@ -13361,6 +13849,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),
@@ -13373,6 +13867,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 {}}" }),
@@ -13385,6 +13885,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 {}}" }),
@@ -13732,37 +14238,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 WithCustomColorsAndBranding = () => {
   const props = {
@@ -13774,7 +14280,7 @@ const WithCustomColorsAndBranding = () => {
     border: "2px solid yellow",
     borderradius: 30,
   };
-  return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Facebook");
+  return index.h(useShareButton.ShareButtonView, Object.assign({}, props), "Facebook");
 };
 const WithCustomBorderRadius = () => {
   const props = {
@@ -13783,7 +14289,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 = {
@@ -13792,7 +14298,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,
@@ -13881,11 +14387,11 @@ const BareBonesView = createHookStory(() => {
   setupGraphQL$b();
   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 },
@@ -14055,21 +14561,140 @@ const CustomStyles$1 = () => {
   return index.h(copyTextView.CopyTextView, Object.assign({}, props));
 };
 const CustomStylesWithDemoHooks = () => {
-  const props = {
-    copyString: "https://noah.example.com",
-    open: false,
-    tooltiptext: "Copied!",
-    backgroundColor: "#1ed760",
-    borderRadius: "30px",
-    textColor: "red",
-    buttonType: "primary",
-    borderColor: "#121212",
-  };
-  return (index.h("sqm-share-link", { demoData: { ...props }, backgroundColor: "#1ed760" }));
+  return (index.h("sqm-share-link", { demoData: {
+      copyTextViewProps: {
+        copyString: "https://noah.example.com",
+        open: false,
+        tooltiptext: "Copied!",
+        backgroundColor: "#1ed760",
+        borderRadius: "30px",
+        textColor: "red",
+        buttonType: "primary",
+        borderColor: "#121212",
+      },
+    }, backgroundColor: "#1ed760" }));
 };
 const FullStack = () => {
   return index.h("sqm-share-link", null);
 };
+// Customize URL stories
+const noopFn = () => { };
+const defaultCustomizeProps = {
+  copyTextViewProps: {
+    copyString: "https://ssqt.co/abc123",
+    open: false,
+    tooltiptext: "Copied!",
+  },
+  customizeUrl: true,
+  customizeLinkLabel: "Customize Link",
+  saveLabelText: "Save",
+  cancelLabelText: "Cancel",
+  isEditing: false,
+  editValue: "",
+  domainPrefix: "https://ssqt.co/",
+  editsRemaining: 3,
+  maxEdits: 5,
+  limitReached: false,
+  validationError: null,
+  isValidating: false,
+  isSaving: false,
+  characterLimit: 15,
+  minCharacters: 3,
+  charactersRemaining: 15,
+  editLimitText: "You can edit your link up to 5 times.",
+  editLimitReachedText: "5 edit limit reached. To make more changes, please contact {supportLink}.",
+  supportLinkText: "Support",
+  customizeDisabled: false,
+  customizeDisabledTooltip: "Link customization is not available.",
+  onCustomizeClick: noopFn,
+  onEditValueChange: noopFn,
+  onSave: noopFn,
+  onCancel: noopFn,
+};
+const CustomizeUrlDefault = () => {
+  return index.h(useShareLink.ShareLinkView, Object.assign({}, defaultCustomizeProps));
+};
+const CustomizeUrlEditing = () => {
+  return (index.h(useShareLink.ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+  })));
+};
+const CustomizeUrlCustomized = () => {
+  return (index.h(useShareLink.ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    copyTextViewProps: {
+      ...defaultCustomizeProps.copyTextViewProps,
+      copyString: "https://ssqt.co/bobtesterson",
+    },
+  })));
+};
+const CustomizeUrlLimitReached = () => {
+  return (index.h(useShareLink.ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    copyTextViewProps: {
+      ...defaultCustomizeProps.copyTextViewProps,
+      copyString: "https://ssqt.co/bobtesterson",
+    },
+    editsRemaining: 0,
+    limitReached: true,
+  })));
+};
+const CustomizeUrlDisabled = () => {
+  return (index.h(useShareLink.ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    customizeDisabled: true,
+  })));
+};
+const CustomizeUrlValidationError = () => {
+  return (index.h(useShareLink.ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+    validationError: {
+      code: "EXISTING_CODE_CONFLICT",
+      title: "This link is already taken",
+      description: "Try adding numbers, a dash or underscore to create a unique link.",
+    },
+  })));
+};
+const CustomizeUrlInvalidCharacters = () => {
+  return (index.h(useShareLink.ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+    validationError: {
+      code: "INVALID_CHARACTER",
+      title: "Please use only letters, numbers, dashes and underscores",
+      description: "Special characters can break the link when sharing.",
+    },
+  })));
+};
+const CustomizeUrlProfanity = () => {
+  return (index.h(useShareLink.ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+    validationError: {
+      code: "BLOCKED_WORD",
+      title: "Please try a different link",
+      description: "This link contains a restricted word.",
+    },
+  })));
+};
+const CustomizeUrlSaving = () => {
+  return (index.h(useShareLink.ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "bobtesterson",
+    isSaving: true,
+  })));
+};
 
 const ShareLink = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -14084,7 +14709,16 @@ const ShareLink = /*#__PURE__*/Object.freeze({
   CopyButtonBelow: CopyButtonBelow$3,
   CustomStyles: CustomStyles$1,
   CustomStylesWithDemoHooks: CustomStylesWithDemoHooks,
-  FullStack: FullStack
+  FullStack: FullStack,
+  CustomizeUrlDefault: CustomizeUrlDefault,
+  CustomizeUrlEditing: CustomizeUrlEditing,
+  CustomizeUrlCustomized: CustomizeUrlCustomized,
+  CustomizeUrlLimitReached: CustomizeUrlLimitReached,
+  CustomizeUrlDisabled: CustomizeUrlDisabled,
+  CustomizeUrlValidationError: CustomizeUrlValidationError,
+  CustomizeUrlInvalidCharacters: CustomizeUrlInvalidCharacters,
+  CustomizeUrlProfanity: CustomizeUrlProfanity,
+  CustomizeUrlSaving: CustomizeUrlSaving
 });
 
 const UseShareLink_stories = {
@@ -14114,7 +14748,7 @@ function setupGraphQL$c() {
 }
 const BareBonesView$1 = createHookStory(() => {
   setupGraphQL$c();
-  const res = ShadowViewAddon.useShareLink({
+  const res = useShareLink.useShareLink({
     programId: "klip-referral-program",
     tooltiplifespan: 0,
     tooltiptext: "",
@@ -14122,11 +14756,11 @@ const BareBonesView$1 = createHookStory(() => {
   return (index.h("div", null,
     "Sharelink:",
     " ",
-    index.h("code", { style: { borderStyle: "solid", borderWidth: "1px", padding: "2px" } }, res.copyString)));
+    index.h("code", { style: { borderStyle: "solid", borderWidth: "1px", padding: "2px" } }, res.copyTextViewProps.copyString)));
 });
 const RegularView$2 = createHookStory(() => {
   setupGraphQL$c();
-  return (index.h(copyTextView.CopyTextView, Object.assign({}, ShadowViewAddon.useShareLink({
+  return (index.h(useShareLink.ShareLinkView, Object.assign({}, useShareLink.useShareLink({
     programId: "klip-referral-program",
     tooltiptext: "Copied to clipboard",
     tooltiplifespan: 1000,
@@ -14134,19 +14768,29 @@ const RegularView$2 = createHookStory(() => {
 });
 const FastTooltip = createHookStory(() => {
   setupGraphQL$c();
-  return (index.h(copyTextView.CopyTextView, Object.assign({}, ShadowViewAddon.useShareLink({
+  return (index.h(useShareLink.ShareLinkView, 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⢀⠢⡑⡀⢂⢊⠠⠁⡂⡐⠀⠅⡈⠪⠪⠪⠣⠫⠑⡁⢔⠕⣜⣜⢦⡰⡎⡯⡾⡽",
+    tooltiptext: "Copied to clipboard",
     tooltiplifespan: 500,
   }))));
 });
+const CustomizeUrlEnabled = createHookStory(() => {
+  setupGraphQL$c();
+  return (index.h(useShareLink.ShareLinkView, Object.assign({}, useShareLink.useShareLink({
+    programId: "klip-referral-program",
+    tooltiptext: "Copied to clipboard",
+    tooltiplifespan: 1000,
+    customizeUrl: true,
+  }))));
+});
 
 const UseShareLink = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': UseShareLink_stories,
   BareBonesView: BareBonesView$1,
   RegularView: RegularView$2,
-  FastTooltip: FastTooltip
+  FastTooltip: FastTooltip,
+  CustomizeUrlEnabled: CustomizeUrlEnabled
 });
 
 const scenario$C = "@author:Zach\n@owner:Zach\nFeature: Tabs\n\n  The Tabs takes in the Tab component as children and maps through to display their header and content.\n\n  Background: A user on the portal is viewing the widget\n    Given a user viewing the Tabs component\n\n  @motivating\n  Scenario: Content inside the active tab is shown\n    Given the header is set to <tabHeader>\n    And the content inside is <tabContent>\n    And the user has clicked <tabHeader>\n    Then the <tabContent> is shown\n    Examples:\n      | tabHeader | tabContent               |\n      | Settings  | This is the settings tab |\n      | General   | This is the general tab  |\n      | History   | This is the history tab  |\n\n  @motivating\n  @ui\n  Scenario: The placement of the tabs is configurable\n    Given The placement prop has been passed a valid <placement>\n    Then tabs are placed on the <placementResult>\n    Examples:\n      | placement | placementResult                |\n      |           | top of the content             |\n      | left      | left hand side of the content  |\n      | right     | right hand side of the content |\n      | bottom    | bottom of the content          |\n\n\n  @minutia\n  @ui\n  Scenario Outline: Tabs are setup to use the brand color\n    Given the brand color is set to darkblue\n    Then the text inside the active tab is darkblue\n    And the underline of the active tab is darkblue\n\n  @ui\n  Scenario: Tabs are responsive\n    Given the user is on a mobile device\n    When there are more tabs than the horizontal space allows for\n    Then clickable arrows appear on the left and right of the tabs\n    And the tabs are scrollable\n\n  @landmine\n  Scenario: Program section cannot be used inside of tabs\n    Given a tabs component\n    And tab containing a program section with program-id \"test123\"\n    And the program section wraps a component using program context\n    When the tabs component is rendered\n    Then the \"sq:program-id\" event listener for the program section is removed\n    And the component does not use program-id \"test123\" to source its data\n    And falls back to the global program id";
@@ -14732,6 +15376,31 @@ const scenarioTaskCard = "@author:derek\n@owner:kutay\nFeature: Task Card\n\n\t@
 
 const scenarioProgressBar = "@author:kutay\n@owner:kutay\nFeature: The progress bar can be shown as a continuous line with progress and end goal. \n\n\t@motivating\n\t@ui\n\tScenario Outline: The progress bar displays a continuous bar with the goal represented by a present\n\t\tGiven a Task Card component\n\t\tAnd the users progress is <progress>\n\t\tAnd the task goal is \"500\"\n\t\tAnd the task is not repeatable\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> shows <progress> with <unit> on the right\n\t\tAnd the circle on the progress bar is brand colour\n\t\tAnd the line behind the circle is brand colour\n\t\tAnd the line infront of the circle is grey\n\t\tAnd the gift icon has <color>\n\t\tAnd the gift icon shows \"500\" with <unit> below\n\t\tExamples:\n\t\t\t| progress | progressBar           | unit | color |\n\t\t\t| 0        | ●――――――――――――――――――🎁 | $    | no    |\n\t\t\t| 100      | ―――●―――――――――――――――🎁 | $    | no    |\n\t\t\t| 500      | ―――――――――――――――――――🎁 | $    | yes   |\n\t\t\t| 650      | ―――――――――――――――――――🎁 | $    | yes   |\n\t\t\t| 1200     | ―――――――――――――――――――🎁 | $    | yes   |\n\n\t@motivating\n\t@ui\n\tScenario Outline: The progress bar can be displayed with steps instead of a continuous line\n\t\tGiven a Task Card component\n\t\tAnd the user progress is <progress>\n\t\tAnd the goal is \"5\"\n\t\tAnd steps are enabled\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> has incrementing steps up to \"5\" in increments of 1\n\t\tAnd the steps behind the users progress are brand colour\n\t\tAnd the steps infront of the users progress are grey\n\t\tAnd the gift icon has <color>\n\t\tAnd the gift icon shows \"5\" below\n\t\tExamples:\n\t\t\t| progress | progressBar           | color |\n\t\t\t| 0        | ―――○―――○―――○―――○―――🎁 | no    |\n\t\t\t| 1        | ―――●―――○―――○―――○―――🎁 | no    |\n\t\t\t| 5        | ―――●―――●―――●―――●―――🎁 | yes   |\n\t\t\t| 7        | ―――●―――●―――●―――●―――🎁 | yes   |\n\t\t\t| 12       | ―――●―――●―――●―――●―――🎁 | yes   |\n\n\t@motivating\n\t@ui\n\tScenario Outline: The continuous progress bar will continue to progress for repeatable rewards\n\t\tGiven a Task Card component\n\t\tAnd the user progress is <progress>\n\t\tAnd the goal is \"500\"\n\t\tAnd it is repeatable\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> shows <progress> with <unit> to the right\n\t\tAnd the first <icon1> is <color1> with <text1> displayed below\n\t\tAnd the second <icon2> is <color2> with <text2> displayed below\n\t\tAnd the third <icon3> is <color3> with <text3> displayed below\n\t\tAnd the circle on the progress bar is brand colour\n\t\tAnd the line behind the circle is brand colour\n\t\tAnd the line infront of the circle is grey\n\t\tExamples:\n\t\t\t| progress | progressBar          | unit | icon1 | color1   | text1 | icon2 | color2    | text 2 | icon3 | color3    | text 3 |\n\t\t\t| 250      | ――――●――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | greyscale | 500    | gift  | greyscale | 1000   |\n\t\t\t| 500      | ―――――――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\n\t\t\t| 750      | ―――――――――🎁―――●―――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\n\t\t\t| 1000     | 🎁―――――――🎁―――――――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\n\t\t\t| 1250     | 🎁―――――――🎁―――●―――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\n\n\t@motivating\n\t@ui\n\tScenario Outline: The stepped progress bar will continue to progress for repeatable rewards\n\t\tGiven a Task Card component\n\t\tAnd the user progress is <progress>\n\t\tAnd the goal is \"5\"\n\t\tAnd steps are enabled\n\t\tAnd it is repeatable\n\t\tThen I have <progressBar>\n\t\tAnd the <progressBar> has incrementing steps up to \"5\" in increments of 1\n\t\tAnd the first <icon1> is <color1>\n\t\tAnd the second <icon2> is <color2>\n\t\tAnd the third <icon3> is <color3>\n\t\tAnd the steps behind the users progress are brand colour\n\t\tAnd the steps infront of the users progress are grey\n\t\tExamples:\n\t\t\t| progress | progressBar              | icon1 | color1   | icon2 | color2    | icon3 | color3    |\n\t\t\t| 0        | ―――○―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\n\t\t\t| 1        | ―――●―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\n\t\t\t| 5        | ―――●―●―●―●―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\n\t\t\t| 7        | ―――●―●―●―●―🎁―●―●―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\n\t\t\t| 12       | 🎁―●―●―●―●―🎁―●―●―○―○―🎁 | gift  | colorful | gift  | colorful  | gift  | greyscale |";
 
+const ResizerStylesheet = `
+
+:root{
+    --checker-color-1: #ffffff00;
+    --checker-color-2: #ffffff00;
+    --checker-size: 7px;
+    --checker-gradient: linear-gradient(45deg, var(--checker-color-1) 25%, transparent 25%, transparent 75%, var(--checker-color-1) 75%);
+}
+.resizer{
+    resize: horizontal;
+    border: 2px dashed gray;
+	margin: -2px;
+    padding: 12px;
+    height: fit-content;
+    overflow: hidden;
+	width: 100%;
+}
+
+.resizer{
+    background-color: var(--checker-color-2);
+    background-image: var(--checker-gradient), var(--checker-gradient);
+    background-position: 0 0, var(--checker-size) var(--checker-size);
+    background-size: calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
+}
+`;
 const Resizer = (_, children) => (index.h("div", { class: "resizer" }, children));
 
 const scenario$D = scenarioTaskCard + scenarioProgressBar;
@@ -14850,116 +15519,116 @@ const TaskCard = () => {
   return (index.h("div", { style: storyFrame },
     index.h(Resizer, null,
       index.h("h4", null, "Not Repeatable"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, description: "" }, states: { ...oneAction$1.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, description: "" }, states: { ...oneAction$1.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, description: "" }, states: { ...coupleActions$1.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, description: "" }, states: { ...coupleActions$1.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, description: "" }, states: { ...manyActions$1.states, progress: 230 } }))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, description: "" }, states: { ...manyActions$1.states, progress: 230 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Repeatable"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, repeatable: true }, states: { ...oneAction$1.states, progress: 2 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, repeatable: true }, states: { ...oneAction$1.states, progress: 2 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true }, states: { ...coupleActions$1.states, progress: 7 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true }, states: { ...coupleActions$1.states, progress: 7 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true }, states: { ...manyActions$1.states, progress: 650 } }))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true }, states: { ...manyActions$1.states, progress: 650 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Complete"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 1 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 1 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 5 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 5 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 } }))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Unavailable"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 0 } }, expireRepeat)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 0 } }, expireRepeat)),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 3 } }, expireRepeat)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 3 } }, expireRepeat)),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 250 } }, expireRepeat)))));
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.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$1, { states: { ...oneAction$1.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 1 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.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$1, { states: { ...coupleActions$1.states, progress: 1 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 5 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.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$1, { states: { ...manyActions$1.states, progress: 230 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 230 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.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$1, { content: { ...oneAction$1.content, repeatable: true }, states: { ...oneAction$1.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, repeatable: true }, states: { ...oneAction$1.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, repeatable: true }, states: { ...oneAction$1.states, progress: 1 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, repeatable: true }, states: { ...oneAction$1.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$1, { content: { ...coupleActions$1.content, repeatable: true }, states: { ...coupleActions$1.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true }, states: { ...coupleActions$1.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true }, states: { ...coupleActions$1.states, progress: 5 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true }, states: { ...coupleActions$1.states, progress: 5 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true }, states: { ...coupleActions$1.states, progress: 7 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true }, states: { ...coupleActions$1.states, progress: 7 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true }, states: { ...coupleActions$1.states, progress: 10 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true }, states: { ...coupleActions$1.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$1, { content: { ...manyActions$1.content, repeatable: true }, states: { ...manyActions$1.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true }, states: { ...manyActions$1.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true }, states: { ...manyActions$1.states, progress: 500 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true }, states: { ...manyActions$1.states, progress: 500 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true }, states: { ...manyActions$1.states, progress: 650 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true }, states: { ...manyActions$1.states, progress: 650 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true }, states: { ...manyActions$1.states, progress: 1000 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true }, states: { ...manyActions$1.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$1, { content: { ...oneAction$1.content, repeatable: true, finite: 2 }, states: { ...oneAction$1.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, repeatable: true, finite: 2 }, states: { ...oneAction$1.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, repeatable: true, finite: 2 }, states: { ...oneAction$1.states, progress: 1 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, repeatable: true, finite: 2 }, states: { ...oneAction$1.states, progress: 1 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, repeatable: true, finite: 2 }, states: { ...oneAction$1.states, progress: 2 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, repeatable: true, finite: 2 }, states: { ...oneAction$1.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$1, { content: { ...coupleActions$1.content, repeatable: true, finite: 2 }, states: { ...coupleActions$1.states, progress: 2 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true, finite: 2 }, states: { ...coupleActions$1.states, progress: 2 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true, finite: 2 }, states: { ...coupleActions$1.states, progress: 5 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true, finite: 2 }, states: { ...coupleActions$1.states, progress: 5 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true, finite: 2 }, states: { ...coupleActions$1.states, progress: 10 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true, finite: 2 }, states: { ...coupleActions$1.states, progress: 10 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true, finite: 3 }, states: { ...coupleActions$1.states, progress: 12 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true, finite: 3 }, states: { ...coupleActions$1.states, progress: 12 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true, finite: 3 }, states: { ...coupleActions$1.states, progress: 15 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true, finite: 3 }, states: { ...coupleActions$1.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$1, { content: { ...manyActions$1.content, repeatable: true, finite: 2 }, states: { ...manyActions$1.states, progress: 200 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true, finite: 2 }, states: { ...manyActions$1.states, progress: 200 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true, finite: 3 }, states: { ...manyActions$1.states, progress: 500 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true, finite: 3 }, states: { ...manyActions$1.states, progress: 500 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true, finite: 2 }, states: { ...manyActions$1.states, progress: 1000 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true, finite: 2 }, states: { ...manyActions$1.states, progress: 1000 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true, finite: 3 }, states: { ...manyActions$1.states, progress: 1200 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true, finite: 3 }, states: { ...manyActions$1.states, progress: 1200 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true, finite: 3 }, states: { ...manyActions$1.states, progress: 1500 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true, finite: 3 }, states: { ...manyActions$1.states, progress: 1500 } })),
       index.h("h5", null))));
 };
 const TaskCardEndDate = () => {
@@ -14972,27 +15641,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$1, { content: { ...oneAction$1.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, ...expireRepeat }, states: { ...oneAction$1.states, progress: 1 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, ...expireRepeat }, states: { ...oneAction$1.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$1, { content: { ...coupleActions$1.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...coupleActions$1.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { content: { ...coupleActions$1.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...coupleActions$1.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { content: { ...coupleActions$1.content, ...expireRepeat }, states: { ...coupleActions$1.states, progress: 5 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...coupleActions$1.content, ...expireRepeat }, states: { ...coupleActions$1.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$1, { content: { ...manyActions$1.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...manyActions$1.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { content: { ...manyActions$1.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...manyActions$1.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { content: { ...manyActions$1.content, ...expireRepeat }, states: { ...manyActions$1.states, progress: 1000 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...manyActions$1.content, ...expireRepeat }, states: { ...manyActions$1.states, progress: 1000 } })),
       index.h("h5", null))));
 };
 const TaskCardLoading = () => {
@@ -15002,26 +15671,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$1, loading)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, loading)),
       " ",
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, loading)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, loading)),
       " ",
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, loading)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, loading)),
       " ",
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, loading)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, loading)),
       " ",
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, loading)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, loading)),
       " ",
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, loading)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, loading)),
       " ",
       index.h("h5", null))));
 };
@@ -15035,33 +15704,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$1, { states: { ...oneAction$1.states, progress: 0 }, content: { ...oneAction$1.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 0 }, content: { ...oneAction$1.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 1 }, content: { ...oneAction$1.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 1 }, content: { ...oneAction$1.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 0 }, content: { ...oneAction$1.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 0 }, content: { ...oneAction$1.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 1 }, content: { ...oneAction$1.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 1 }, content: { ...oneAction$1.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$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expireRepeat } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 100 }, content: { ...manyActions$1.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 100 }, content: { ...manyActions$1.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 }, content: { ...manyActions$1.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 }, content: { ...manyActions$1.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 100 }, content: { ...manyActions$1.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 100 }, content: { ...manyActions$1.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 }, content: { ...manyActions$1.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 }, content: { ...manyActions$1.content, ...expireRepeat } })),
       index.h("h5", null))));
 };
 const TaskCardEnded = () => {
@@ -15074,33 +15743,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$1, { states: { ...oneAction$1.states, progress: 0 }, content: { ...oneAction$1.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 0 }, content: { ...oneAction$1.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 1 }, content: { ...oneAction$1.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 1 }, content: { ...oneAction$1.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 0 }, content: { ...oneAction$1.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 0 }, content: { ...oneAction$1.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 1 }, content: { ...oneAction$1.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { states: { ...oneAction$1.states, progress: 1 }, content: { ...oneAction$1.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$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expireRepeat } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 100 }, content: { ...manyActions$1.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 100 }, content: { ...manyActions$1.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 }, content: { ...manyActions$1.content, ...expire } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 }, content: { ...manyActions$1.content, ...expire } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 100 }, content: { ...manyActions$1.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 100 }, content: { ...manyActions$1.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 }, content: { ...manyActions$1.content, ...expireRepeat } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 }, content: { ...manyActions$1.content, ...expireRepeat } })),
       index.h("h5", null))));
 };
 const TaskCardButtonHidden = () => {
@@ -15111,48 +15780,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$1, { content: { ...oneAction$1.content, description: "", hideButton: true }, states: { ...oneAction$1.states, progress: 0 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, description: "", hideButton: true }, states: { ...oneAction$1.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { content: {
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { content: {
           ...coupleActions$1.content,
           description: "",
           hideButton: true,
         }, states: { ...coupleActions$1.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { content: {
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { content: {
           ...manyActions$1.content,
           description: "",
           hideButton: true,
         }, states: { ...manyActions$1.states, progress: 230 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Repeatable"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, repeatable: true, hideButton: true }, states: { ...oneAction$1.states, progress: 2 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, repeatable: true, hideButton: true }, states: { ...oneAction$1.states, progress: 2 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { content: {
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { content: {
           ...coupleActions$1.content,
           repeatable: true,
           hideButton: true,
         }, states: { ...coupleActions$1.states, progress: 7 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { content: {
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { content: {
           ...manyActions$1.content,
           repeatable: true,
           hideButton: true,
         }, states: { ...manyActions$1.states, progress: 650 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Complete"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, hideButton: true }, states: { ...oneAction$1.states, progress: 1 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, hideButton: true }, states: { ...oneAction$1.states, progress: 1 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, hideButton: true }, states: { ...coupleActions$1.states, progress: 5 } })),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, hideButton: true }, states: { ...coupleActions$1.states, progress: 5 } })),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, hideButton: true }, states: { ...manyActions$1.states, progress: 500 } }))),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, hideButton: true }, states: { ...manyActions$1.states, progress: 500 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Unavailable"),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, hideButton: true }, states: { ...oneAction$1.states, progress: 0 } }, expireRepeat)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction$1, { content: { ...oneAction$1.content, hideButton: true }, states: { ...oneAction$1.states, progress: 0 } }, expireRepeat)),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, hideButton: true }, states: { ...coupleActions$1.states, progress: 3 } }, expireRepeat)),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, hideButton: true }, states: { ...coupleActions$1.states, progress: 3 } }, expireRepeat)),
       index.h("h5", null),
-      index.h(ShadowViewAddon.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, hideButton: true }, states: { ...manyActions$1.states, progress: 250 } }, expireRepeat)))));
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, hideButton: true }, states: { ...manyActions$1.states, progress: 250 } }, expireRepeat)))));
 };
 const ProgressBar = () => {
   const props = {
@@ -15161,7 +15830,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 = {
@@ -15170,7 +15839,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 = {
@@ -15180,7 +15849,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 = {
@@ -15190,7 +15859,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 = {
@@ -15201,7 +15870,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 = {
@@ -15212,7 +15881,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$1 = /*#__PURE__*/Object.freeze({
@@ -15264,10 +15933,22 @@ function setupGraphQL$d() {
 }
 const TaskCard$2 = createHookStory(() => {
   setupGraphQL$d();
+  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$d();
+  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" },
@@ -15297,13 +15978,13 @@ const UseTaskCard = /*#__PURE__*/Object.freeze({
 const ProgressBar_stories = {
   title: "Components/Progress Bar",
 };
-const defaultProps$p = {
+const defaultProps$q = {
   progress: 2,
   goal: 4,
   steps: true,
 };
 const TaxAndPayoutsProgressBar = () => {
-  return index.h(ShadowViewAddon.ProgressBar, Object.assign({}, defaultProps$p, { stageCount: 4, currentStage: 2 }));
+  return index.h(RewardExchangeListData.ProgressBar, Object.assign({}, defaultProps$q, { stageCount: 4, currentStage: 2 }));
 };
 
 const ProgressBar$1 = /*#__PURE__*/Object.freeze({
@@ -15679,35 +16360,35 @@ const UserName = /*#__PURE__*/Object.freeze({
 const WidgetCodeVerification_stories = {
   title: "Components/Widget Code Verification",
 };
-const defaultProps$q = {
+const defaultProps$r = {
   initialiseLoading: false,
   email: "testemail@example.com",
   loading: false,
   verifyFailed: false,
   emailResent: false,
 };
-const Default$o = () => (index.h("sqm-code-verification", { demoData: { states: defaultProps$q } }));
+const Default$o = () => (index.h("sqm-code-verification", { demoData: { states: defaultProps$r } }));
 const InitialLoading = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$q,
+      ...defaultProps$r,
       initialiseLoading: true,
     },
   } }));
 const Loading$a = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$q,
+      ...defaultProps$r,
       loading: true,
     },
   } }));
 const CodeResent = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$q,
+      ...defaultProps$r,
       emailResent: true,
     },
   } }));
 const VerificationFailed = () => (index.h("sqm-code-verification", { demoData: {
     states: {
-      ...defaultProps$q,
+      ...defaultProps$r,
       verifyFailed: true,
     },
   } }));
@@ -15725,7 +16406,7 @@ const WidgetCodeVerification = /*#__PURE__*/Object.freeze({
 const WidgetEmailVerification_stories = {
   title: "Components/Widget Email Verification",
 };
-const defaultProps$r = {
+const defaultProps$s = {
   email: "",
   error: false,
   loading: false,
@@ -15740,19 +16421,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$r,
+        ...defaultProps$s,
         email: "test@example.com",
       },
     } })));
 const Loading$b = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$r,
+      ...defaultProps$s,
       initialLoading: true,
     },
   } }));
 const SaveLoading = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$r,
+      ...defaultProps$s,
       loading: true,
     },
   } }));
@@ -15763,19 +16444,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$r,
+        ...defaultProps$s,
         email: "test@example.com",
       },
     } })));
 const InvalidEmail = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$r,
+      ...defaultProps$s,
       error: true,
     },
   } }));
 const SendCodeError = () => (index.h("sqm-email-verification", { demoData: {
     states: {
-      ...defaultProps$r,
+      ...defaultProps$s,
       sendCodeError: true,
     },
   } }));
@@ -16332,7 +17013,7 @@ const stepTwoProps = {
     setCountrySearch: (c) => console.log(c),
   },
   data: {
-    esRegions: sqmUserInfoFormView.INDIRECT_TAX_SPAIN_REGIONS,
+    esRegions: subregions.INDIRECT_TAX_SPAIN_REGIONS,
     countries: [
       {
         countryCode: "CA",
@@ -16369,7 +17050,7 @@ const stepTwoProps = {
         displayName: "United States",
       },
     ],
-    provinces: sqmUserInfoFormView.INDIRECT_TAX_PROVINCES,
+    provinces: subregions.INDIRECT_TAX_PROVINCES,
   },
   slotProps: {
     formState: {
@@ -16447,7 +17128,7 @@ const dashboardProps = {
     disabled: false,
     status: "ACTIVE",
     documentType: "W9",
-    documentTypeString: data.taxTypeToName("W9"),
+    documentTypeString: utils.taxTypeToName("W9"),
     dateSubmitted: "Jan 18th, 2025",
     noFormNeeded: false,
     country: "United Kingdom",
@@ -16465,7 +17146,7 @@ const dashboardProps = {
   },
 };
 const GeneralLoadingView = () => {
-  return index.h(data.LoadingView, null);
+  return index.h(LoadingView.LoadingView, null);
 };
 const GeneralErrorView = () => {
   return (index.h("sqm-form-message", { type: "error" },
@@ -16804,7 +17485,7 @@ const StepThreeWithDocusign = () => {
   return (index.h("sqm-docusign-form", { demoData: {
       states: {
         documentType: "W9",
-        documentTypeString: data.taxTypeToName("W9"),
+        documentTypeString: utils.taxTypeToName("W9"),
         ...docusignFormProps.states,
       },
     } }));
@@ -16814,7 +17495,7 @@ const StepThreeWithDocusignW8BEN = () => {
       states: {
         ...docusignFormProps.states,
         documentType: "W8BEN",
-        documentTypeString: data.taxTypeToName("W8BEN"),
+        documentTypeString: utils.taxTypeToName("W8BEN"),
       },
     } }));
 };
@@ -16823,7 +17504,7 @@ const StepThreeWithDocusignW8BENE = () => {
       states: {
         ...docusignFormProps.states,
         documentType: "W8BENE",
-        documentTypeString: data.taxTypeToName("W8BENE"),
+        documentTypeString: utils.taxTypeToName("W8BENE"),
         formState: {
           taxFormExpired: false,
           participantType: "businessEntity",
@@ -16919,7 +17600,7 @@ const StepThreeWithDocusignModalOpen = () => {
   return (index.h("sqm-docusign-form", { demoData: {
       states: {
         documentType: "W9",
-        documentTypeString: data.taxTypeToName("W9"),
+        documentTypeString: utils.taxTypeToName("W9"),
         ...docusignFormProps.states,
         showModal: true,
       },
@@ -16992,7 +17673,7 @@ const TaxAndCashDashboardActiveW8BENForm = () => {
         noFormNeeded: false,
         canEditPayoutInfo: true,
         documentType: "W8BEN",
-        documentTypeString: data.taxTypeToName("W8BEN"),
+        documentTypeString: utils.taxTypeToName("W8BEN"),
         country: "United Kingdom",
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
@@ -17010,7 +17691,7 @@ const TaxAndCashDashboardActiveW8BENEForm = () => {
         noFormNeeded: false,
         canEditPayoutInfo: true,
         documentType: "W8BENE",
-        documentTypeString: data.taxTypeToName("W8BENE"),
+        documentTypeString: utils.taxTypeToName("W8BENE"),
         country: "United Kingdom",
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
@@ -17028,7 +17709,7 @@ const TaxAndCashDashboardNotActiveW9Form = () => {
         canEditPayoutInfo: true,
         status: "INACTIVE",
         documentType: "W9",
-        documentTypeString: data.taxTypeToName("W9"),
+        documentTypeString: utils.taxTypeToName("W9"),
         country: "United Kingdom",
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
@@ -17048,7 +17729,7 @@ const TaxAndCashDashboardNotActiveW8Form = () => {
         canEditPayoutInfo: true,
         status: "INACTIVE",
         documentType: "W8BEN",
-        documentTypeString: data.taxTypeToName("W8BEN"),
+        documentTypeString: utils.taxTypeToName("W8BEN"),
         country: "United Kingdom",
         indirectTaxType: "VAT",
         indirectTaxNumber: "123456",
@@ -17085,7 +17766,7 @@ const TaxAndCashDashboardNotVerifiedW9Form = () => {
         disabled: false,
         status: "NOT_VERIFIED",
         documentType: "W9",
-        documentTypeString: data.taxTypeToName("W9"),
+        documentTypeString: utils.taxTypeToName("W9"),
         noFormNeeded: false,
         country: "United States",
         indirectTaxType: "VAT",
@@ -17106,7 +17787,7 @@ const TaxAndCashDashboardNotVerifiedW8BENForm = () => {
         disabled: false,
         status: "NOT_VERIFIED",
         documentType: "W8BEN",
-        documentTypeString: data.taxTypeToName("W8BEN"),
+        documentTypeString: utils.taxTypeToName("W8BEN"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         country: "United Kingdom",
@@ -17127,7 +17808,7 @@ const TaxAndCashDashboardNotVerifiedW8BENEForm = () => {
         disabled: false,
         status: "NOT_VERIFIED",
         documentType: "W8BENE",
-        documentTypeString: data.taxTypeToName("W8BENE"),
+        documentTypeString: utils.taxTypeToName("W8BENE"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         country: "United Kingdom",
@@ -17148,7 +17829,7 @@ const TaxAndCashDashboardNotActiveW8BENEForm = () => {
         disabled: false,
         status: "NOT_ACTIVE",
         documentType: "W8BENE",
-        documentTypeString: data.taxTypeToName("W8BENE"),
+        documentTypeString: utils.taxTypeToName("W8BENE"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         indirectTaxNumber: "123456",
@@ -17168,7 +17849,7 @@ const TaxAndCashDashboardNoFormNeeded = () => {
         canEditPayoutInfo: true,
         disabled: false,
         documentType: "W9",
-        documentTypeString: data.taxTypeToName("W9"),
+        documentTypeString: utils.taxTypeToName("W9"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: true,
         province: "Ontario",
@@ -17190,7 +17871,7 @@ const TaxAndCashDashboardIndirectTaxCanada = () => {
         status: "ACTIVE",
         disabled: false,
         documentType: "W8BENE",
-        documentTypeString: data.taxTypeToName("W8BENE"),
+        documentTypeString: utils.taxTypeToName("W8BENE"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         province: "Ontario",
@@ -17212,7 +17893,7 @@ const TaxAndCashDashboardIndirectTaxCanadaQuebec = () => {
         status: "ACTIVE",
         disabled: false,
         documentType: "W8BENE",
-        documentTypeString: data.taxTypeToName("W8BENE"),
+        documentTypeString: utils.taxTypeToName("W8BENE"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         province: "Quebec",
@@ -17235,7 +17916,7 @@ const TaxAndCashDashboardIndirectTaxSpain = () => {
         status: "ACTIVE",
         disabled: false,
         documentType: "W8BENE",
-        documentTypeString: data.taxTypeToName("W8BENE"),
+        documentTypeString: utils.taxTypeToName("W8BENE"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         country: "Spain",
@@ -17257,7 +17938,7 @@ const TaxAndCashDashboardIndirectTaxNotRegistered = () => {
         canEditPayoutInfo: true,
         status: "ACTIVE",
         documentType: "W8BEN",
-        documentTypeString: data.taxTypeToName("W8BEN"),
+        documentTypeString: utils.taxTypeToName("W8BEN"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         notRegistered: true,
@@ -17275,7 +17956,7 @@ const TaxAndCashDashboardIdentityVerifcationRequired = () => {
         canEditPayoutInfo: true,
         status: "ACTIVE",
         documentType: "W8BEN",
-        documentTypeString: data.taxTypeToName("W8BEN"),
+        documentTypeString: utils.taxTypeToName("W8BEN"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         notRegistered: true,
@@ -17293,7 +17974,7 @@ const TaxAndCashDashboardIdentityVerifcationRequiredInternal = () => {
         canEditPayoutInfo: true,
         status: "ACTIVE",
         documentType: "W8BEN",
-        documentTypeString: data.taxTypeToName("W8BEN"),
+        documentTypeString: utils.taxTypeToName("W8BEN"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         notRegistered: true,
@@ -17311,7 +17992,7 @@ const TaxAndCashDashboardIdentityVerifcationReviewInternal = () => {
         canEditPayoutInfo: true,
         status: "ACTIVE",
         documentType: "W8BEN",
-        documentTypeString: data.taxTypeToName("W8BEN"),
+        documentTypeString: utils.taxTypeToName("W8BEN"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         notRegistered: true,
@@ -17329,7 +18010,7 @@ const TaxAndCashDashboardIdentityVerifcationFailedInternal = () => {
         canEditPayoutInfo: true,
         status: "ACTIVE",
         documentType: "W8BEN",
-        documentTypeString: data.taxTypeToName("W8BEN"),
+        documentTypeString: utils.taxTypeToName("W8BEN"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         notRegistered: true,
@@ -17347,7 +18028,7 @@ const TaxAndCashDashboardW9ThresholdReached = () => {
         canEditPayoutInfo: true,
         status: null,
         documentType: "W9",
-        documentTypeString: data.taxTypeToName("W9"),
+        documentTypeString: utils.taxTypeToName("W9"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         notRegistered: false,
@@ -17366,7 +18047,7 @@ const TaxAndCashDashboardNewTaxForm = () => {
         canEditPayoutInfo: true,
         status: "ACTIVE",
         documentType: "W8BEN",
-        documentTypeString: data.taxTypeToName("W8BEN"),
+        documentTypeString: utils.taxTypeToName("W8BEN"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         notRegistered: true,
@@ -17385,7 +18066,7 @@ const TaxAndCashDashboardPayoutsOnHold = () => {
         disabled: true,
         status: "ACTIVE",
         documentType: "W8BEN",
-        documentTypeString: data.taxTypeToName("W8BEN"),
+        documentTypeString: utils.taxTypeToName("W8BEN"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         indirectTaxNumber: "123456",
@@ -17405,7 +18086,7 @@ const TaxAndCashDashboardNoTaxFormRequiredAndBeneficiaryNameInvalid = () => {
         disabled: true,
         status: "ACTIVE",
         documentType: undefined,
-        documentTypeString: data.taxTypeToName("W9"),
+        documentTypeString: utils.taxTypeToName("W9"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: true,
         indirectTaxNumber: "123456",
@@ -17425,7 +18106,7 @@ const TaxAndCashDashboardNoTaxFormRequiredAndBeneficiaryNameInvalidUS = () => {
         disabled: true,
         status: "ACTIVE",
         documentType: undefined,
-        documentTypeString: data.taxTypeToName("W9"),
+        documentTypeString: utils.taxTypeToName("W9"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: true,
         indirectTaxNumber: "123456",
@@ -17486,7 +18167,7 @@ const TaxAndCashDashboardFallbackDocumentTypeW9 = () => {
         disabled: false,
         status: "ACTIVE",
         documentType: "W9",
-        documentTypeString: data.taxTypeToName("W9"),
+        documentTypeString: utils.taxTypeToName("W9"),
         dateSubmitted: "Mar 15, 2025",
         noFormNeeded: false,
         indirectTaxNumber: "123456",
@@ -17507,7 +18188,7 @@ const TaxAndCashDashboardFallbackDocumentTypeW8BEN = () => {
         disabled: false,
         status: "ACTIVE",
         documentType: "W8BEN",
-        documentTypeString: data.taxTypeToName("W8BEN"),
+        documentTypeString: utils.taxTypeToName("W8BEN"),
         dateSubmitted: "Feb 20, 2025",
         noFormNeeded: false,
         indirectTaxNumber: "654321",
@@ -17549,7 +18230,7 @@ const TaxAndCashDashboardLoading = () => {
         disabled: false,
         status: "ACTIVE",
         documentType: "W9",
-        documentTypeString: data.taxTypeToName("W9"),
+        documentTypeString: utils.taxTypeToName("W9"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         loading: true,
@@ -17568,7 +18249,7 @@ const TaxAndCashDashboardWithLoadingError = () => {
         canEditPayoutInfo: true,
         status: "ACTIVE",
         documentType: "W9",
-        documentTypeString: data.taxTypeToName("W9"),
+        documentTypeString: utils.taxTypeToName("W9"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         loading: true,
@@ -17588,7 +18269,7 @@ const TaxAndCashDashboardWithGeneralError = () => {
         disabled: false,
         status: "ACTIVE",
         documentType: "W9",
-        documentTypeString: data.taxTypeToName("W9"),
+        documentTypeString: utils.taxTypeToName("W9"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         indirectTaxNumber: "123456",
@@ -17612,7 +18293,7 @@ const TaxAndCashDashboardDisabled = () => {
         disabled: true,
         status: "ACTIVE",
         documentType: "W8BEN",
-        documentTypeString: data.taxTypeToName("W8BEN"),
+        documentTypeString: utils.taxTypeToName("W8BEN"),
         dateSubmitted: "Jan 18th, 2025",
         noFormNeeded: false,
         indirectTaxNumber: "123456",
@@ -17763,45 +18444,45 @@ const PayoutDetailsCard = /*#__PURE__*/Object.freeze({
 const PayoutStatusAlert_stories = {
   title: "Components/Payout Status Alert",
 };
-const defaultProps$s = {
+const defaultProps$t = {
   error: false,
   status: "INFORMATION_REQUIRED",
   loading: false,
   veriffLoading: false,
 };
-const InformationRequired = () => (index.h("sqm-payout-status-alert", { demoData: { states: defaultProps$s } }));
-const VerifyIdentity = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "VERIFICATION:REQUIRED" } } }));
-const VerifyIdentityRequiredInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "VERIFICATION:INTERNAL" } } }));
+const InformationRequired = () => (index.h("sqm-payout-status-alert", { demoData: { states: defaultProps$t } }));
+const VerifyIdentity = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$t, status: "VERIFICATION:REQUIRED" } } }));
+const VerifyIdentityRequiredInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$t, status: "VERIFICATION:INTERNAL" } } }));
 const VerifyIdentityReviewInternal = () => (index.h("sqm-payout-status-alert", { demoData: {
     states: {
-      ...defaultProps$s,
+      ...defaultProps$t,
       status: "VERIFICATION:REVIEW",
     },
   } }));
-const VerifyIdentityFailedInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "VERIFICATION:FAILED" } } }));
+const VerifyIdentityFailedInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$t, status: "VERIFICATION:FAILED" } } }));
 const W9ThresholdReached = () => (index.h("sqm-payout-status-alert", { demoData: {
     states: {
-      ...defaultProps$s,
+      ...defaultProps$t,
       enforceUsTaxComplianceOption: "CASH_ONLY_DEFER_W9",
       status: "OVER_W9_THRESHOLD",
     },
   } }));
-const Hold = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "HOLD" } } }));
-const Loading$d = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, loading: true } } }));
-const Error$b = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, error: true } } }));
-const NewPayeeReview = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "NEW_PAYEE_REVIEW" } } }));
-const PaymentHoldOnChange = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "PAYMENT_HOLD_ON_CHANGE" } } }));
+const Hold = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$t, status: "HOLD" } } }));
+const Loading$d = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$t, loading: true } } }));
+const Error$b = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$t, error: true } } }));
+const NewPayeeReview = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$t, status: "NEW_PAYEE_REVIEW" } } }));
+const PaymentHoldOnChange = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$t, status: "PAYMENT_HOLD_ON_CHANGE" } } }));
 const BeneficiaryNameInvalid = () => (index.h("sqm-payout-status-alert", { demoData: {
-    states: { ...defaultProps$s, status: "BENEFICIARY_NAME_INVALID" },
+    states: { ...defaultProps$t, status: "BENEFICIARY_NAME_INVALID" },
   } }));
 const BeneficiaryNameMismatch = () => (index.h("sqm-payout-status-alert", { demoData: {
-    states: { ...defaultProps$s, status: "BENEFICIARY_NAME_MISMATCH" },
+    states: { ...defaultProps$t, status: "BENEFICIARY_NAME_MISMATCH" },
   } }));
-const BankTaxNameMismatch = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "BANK_TAX_NAME_MISMATCH" } } }));
+const BankTaxNameMismatch = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$t, status: "BANK_TAX_NAME_MISMATCH" } } }));
 const WithdrawalSettingsInvalid = () => (index.h("sqm-payout-status-alert", { demoData: {
-    states: { ...defaultProps$s, status: "WITHDRAWAL_SETTINGS_INVALID" },
+    states: { ...defaultProps$t, status: "WITHDRAWAL_SETTINGS_INVALID" },
   } }));
-const PaymentReturned = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "PAYMENT_RETURNED" } } }));
+const PaymentReturned = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$t, status: "PAYMENT_RETURNED" } } }));
 
 const PayoutStatusAlert = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -17856,10 +18537,10 @@ const style$2 = {
     border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
   },
 };
-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 DocusignExpiredView = (props) => {
-  const { classes } = sheet$2;
+  const { classes } = sheet$3;
   const { text } = props;
   return (index.h("div", null,
     index.h("style", { type: "text/css" }, styleString$2),
@@ -17906,13 +18587,13 @@ const registeredInCanada = {
   text: indirectDetailsSlotText,
 };
 const RegisteredInOtherRegion = () => {
-  return index.h(sqmUserInfoFormView.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(sqmUserInfoFormView.OtherRegionSlotView, Object.assign({}, registeredInOtherRegion, { states: {
+  return (index.h(IndirectTaxDetailsView.OtherRegionSlotView, Object.assign({}, registeredInOtherRegion, { states: {
       ...registeredInOtherRegion.states,
       formState: {
         ...registeredInOtherRegion.states.formState,
@@ -17956,7 +18637,7 @@ const EmailRegistration_stories = {
   // scenario,
   },
 };
-const defaultProps$t = {
+const defaultProps$u = {
   states: {
     error: "",
     loading: false,
@@ -17975,59 +18656,59 @@ const defaultProps$t = {
     fraudErrorMessageTitle: "Looks like you tried referring yourself",
   },
 };
-const Default$q = () => index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, defaultProps$t));
+const Default$q = () => index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, defaultProps$u));
 const HasFirstNameLastName = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$t,
+  ...defaultProps$u,
   content: {
-    ...defaultProps$t.content,
+    ...defaultProps$u.content,
     includeName: true,
   },
 })));
 const WithSlots = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$t,
+  ...defaultProps$u,
   content: {
-    ...defaultProps$t.content,
+    ...defaultProps$u.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$t,
+  ...defaultProps$u,
   content: {
-    ...defaultProps$t.content,
+    ...defaultProps$u.content,
     hideBorder: true,
   },
 })));
 const BackgroundColor$2 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$t,
+  ...defaultProps$u,
   content: {
-    ...defaultProps$t.content,
+    ...defaultProps$u.content,
     backgroundColor: "aquamarine",
   },
 })));
 const Loading$e = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$t,
+  ...defaultProps$u,
   states: {
     error: "",
     loading: true,
   },
 })));
 const Error$c = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$t,
+  ...defaultProps$u,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
   },
 })));
 const FraudError = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$t,
+  ...defaultProps$u,
   states: {
     error: "FRAUD",
     loading: false,
   },
 })));
 const EmptyEmailError = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
-  ...defaultProps$t,
+  ...defaultProps$u,
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -18054,7 +18735,7 @@ const EmailRegistration = /*#__PURE__*/Object.freeze({
 const LeadForm_stories = {
   title: "Components/Lead Form",
 };
-const defaultProps$u = {
+const defaultProps$v = {
   states: {
     success: false,
     leadFormState: {},
@@ -18083,21 +18764,21 @@ const defaultProps$u = {
   },
 };
 const successProps$5 = {
-  ...defaultProps$u,
+  ...defaultProps$v,
   states: {
-    ...defaultProps$u.states,
+    ...defaultProps$v.states,
     success: true,
     error: null,
   },
   content: {
-    ...defaultProps$u.content,
+    ...defaultProps$v.content,
     pageLabel: "Refer your friend",
   },
 };
 const errorProps$c = {
-  ...defaultProps$u,
+  ...defaultProps$v,
   states: {
-    ...defaultProps$u.states,
+    ...defaultProps$v.states,
     error: "Something went wrong. Please try again.",
     leadFormState: {
       validationErrors: {
@@ -18109,16 +18790,16 @@ const errorProps$c = {
   },
 };
 const loadingProps$9 = {
-  ...defaultProps$u,
+  ...defaultProps$v,
   states: {
-    ...defaultProps$u.states,
+    ...defaultProps$v.states,
     loading: true,
   },
 };
 const slottedProps$2 = {
-  ...defaultProps$u,
+  ...defaultProps$v,
   content: {
-    ...defaultProps$u.content,
+    ...defaultProps$v.content,
     formData: (index.h("div", null,
       index.h("sqm-lead-input-field", { "field-name": "firstName", "field-label": "First Name", "field-type": "text", "required-field-error-message": "Please enter a first name" }),
       index.h("sqm-lead-input-field", { "field-name": "lastName", "field-label": "Last Name", "field-type": "text", "required-field-error-message": "Please enter a last name" }),
@@ -18126,10 +18807,10 @@ const slottedProps$2 = {
       index.h("sqm-lead-dropdown-field", null))),
   },
 };
-const Default$r = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, defaultProps$u));
-const LeadSubmitSuccess = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, successProps$5));
-const LeadSubmitWithErrors = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, errorProps$c));
-const LeadSubmitLoading = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, loadingProps$9));
+const Default$r = () => index.h(sqmLeadFormView.LeadFormView, Object.assign({}, defaultProps$v));
+const LeadSubmitSuccess = () => index.h(sqmLeadFormView.LeadFormView, Object.assign({}, successProps$5));
+const LeadSubmitWithErrors = () => index.h(sqmLeadFormView.LeadFormView, Object.assign({}, errorProps$c));
+const LeadSubmitLoading = () => index.h(sqmLeadFormView.LeadFormView, Object.assign({}, loadingProps$9));
 const FieldsHidden$2 = () => {
   return (index.h("sqm-lead-form", { demoData: {
       states: {
@@ -18141,7 +18822,7 @@ const FieldsHidden$2 = () => {
       },
     } }));
 };
-const SlottedInputs$2 = () => index.h(ShadowViewAddon.LeadFormView, Object.assign({}, slottedProps$2));
+const SlottedInputs$2 = () => index.h(sqmLeadFormView.LeadFormView, Object.assign({}, slottedProps$2));
 
 const LeadForm = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -18157,7 +18838,7 @@ const LeadForm = /*#__PURE__*/Object.freeze({
 const LeadInputField_stories = {
   title: "Components/Lead Form Input Field",
 };
-const defaultProps$v = {
+const defaultProps$w = {
   states: {
     leadFormState: {
       validationErrors: {},
@@ -18175,27 +18856,27 @@ const defaultProps$v = {
     fieldOptional: false,
   },
 };
-const Default$s = () => index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$v));
-const WithError$1 = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$v, { states: {
-    ...defaultProps$v.states,
+const Default$s = () => index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$w));
+const WithError$1 = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$w, { states: {
+    ...defaultProps$w.states,
     leadFormState: {
-      ...defaultProps$v.states.leadFormState,
+      ...defaultProps$w.states.leadFormState,
       validationErrors: {
         firstName: "Please enter a first name",
       },
     },
   } })));
-const Disabled$2 = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$v, { states: {
-    ...defaultProps$v.states,
+const Disabled$2 = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$w, { states: {
+    ...defaultProps$w.states,
     leadFormState: {
-      ...defaultProps$v.states.leadFormState,
+      ...defaultProps$w.states.leadFormState,
       disabled: true,
     },
   } })));
-const WithInitialValue = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$v, { states: {
-    ...defaultProps$v.states,
+const WithInitialValue = () => (index.h(sqmLeadInputFieldView.LeadInputFieldView, Object.assign({}, defaultProps$w, { states: {
+    ...defaultProps$w.states,
     leadFormState: {
-      ...defaultProps$v.states.leadFormState,
+      ...defaultProps$w.states.leadFormState,
       initialData: {
         firstName: "Jane",
       },
@@ -18214,7 +18895,7 @@ const LeadInputField = /*#__PURE__*/Object.freeze({
 const LeadFormDropdownField_stories = {
   title: "Components/Lead Form Dropdown Field",
 };
-const defaultProps$w = {
+const defaultProps$x = {
   states: {
     leadFormState: {
       validationErrors: {},
@@ -18237,35 +18918,35 @@ const defaultProps$w = {
     ],
   },
 };
-const Default$t = () => index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$w));
-const Multiple = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$w, { content: { ...defaultProps$w.content, multiple: true } })));
-const WithError$2 = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$w, { states: {
-    ...defaultProps$w.states,
+const Default$t = () => index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$x));
+const Multiple = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$x, { content: { ...defaultProps$x.content, multiple: true } })));
+const WithError$2 = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$x, { states: {
+    ...defaultProps$x.states,
     leadFormState: {
-      ...defaultProps$w.states.leadFormState,
+      ...defaultProps$x.states.leadFormState,
       validationErrors: {
         country: "Please select a country",
       },
     },
   } })));
-const Disabled$3 = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$w, { states: {
-    ...defaultProps$w.states,
+const Disabled$3 = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$x, { states: {
+    ...defaultProps$x.states,
     leadFormState: {
-      ...defaultProps$w.states.leadFormState,
+      ...defaultProps$x.states.leadFormState,
       disabled: true,
     },
   } })));
-const Loading$f = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$w, { states: {
-    ...defaultProps$w.states,
+const Loading$f = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$x, { states: {
+    ...defaultProps$x.states,
     leadFormState: {
-      ...defaultProps$w.states.leadFormState,
+      ...defaultProps$x.states.leadFormState,
       loading: true,
     },
   } })));
-const WithInitialValue$1 = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$w, { states: {
-    ...defaultProps$w.states,
+const WithInitialValue$1 = () => (index.h(sqmLeadDropdownFieldView.LeadDropdownFieldView, Object.assign({}, defaultProps$x, { states: {
+    ...defaultProps$x.states,
     leadFormState: {
-      ...defaultProps$w.states.leadFormState,
+      ...defaultProps$x.states.leadFormState,
       initialData: {
         country: "Canada",
       },
@@ -18286,7 +18967,7 @@ const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
 const LeadCheckboxField_stories = {
   title: "Components/Lead Checkbox Field",
 };
-const defaultProps$x = {
+const defaultProps$y = {
   states: {
     leadFormState: {
       validationErrors: {},
@@ -18300,28 +18981,28 @@ const defaultProps$x = {
     errorMessage: "{checkboxLabel} Must be checked",
   },
 };
-const Default$u = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$x))));
-const CustomLabel$3 = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$x, { content: {
-    ...defaultProps$x.content,
+const Default$u = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$y))));
+const CustomLabel$3 = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$y, { content: {
+    ...defaultProps$y.content,
     checkboxLabel: "I Agree",
   } }))));
-const Error$d = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$x, { states: {
-    ...defaultProps$x.states,
+const Error$d = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$y, { states: {
+    ...defaultProps$y.states,
     leadFormState: {
       validationErrors: {
         terms: "{checkboxLabel} Must be checked",
       },
     },
   } }))));
-const CustomError$3 = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$x, { states: {
-    ...defaultProps$x.states,
+const CustomError$3 = createHookStory(() => (index.h(sqmLeadCheckboxFieldView.LeadCheckboxFieldView, Object.assign({}, defaultProps$y, { states: {
+    ...defaultProps$y.states,
     leadFormState: {
       validationErrors: {
         terms: "{checkboxLabel} Must be checked",
       },
     },
   }, content: {
-    ...defaultProps$x.content,
+    ...defaultProps$y.content,
     errorMessage: "This checkbox must be checked to continue",
   } }))));
 
@@ -20027,7 +20708,7 @@ const mergeHTMLPlugin = {
 /**
  * @param {Node} node
  */
-function tag(node) {
+function tag$1(node) {
   return node.nodeName.toLowerCase();
 }
 
@@ -20051,7 +20732,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,
@@ -20110,14 +20791,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) + '>';
   }
 
   /**
@@ -21410,8 +22091,20 @@ const StencilStorybook = class {
     });
     const [selectedTheme, setSelected] = domContextHooks_module.useState("Default");
     const [checkerboard, setCheckerboard] = domContextHooks_module.useState(true);
+    const themes = Object.keys(Themes.Themes);
+    const theme = Themes.Themes[selectedTheme];
     return (index.h(index.Host, { class: Style, onClick: {} }, index.h("sqm-brand-selector", null), children));
   }
 };
+function ColorScale() {
+  return (index.h("span", null, index.h(ColorToken, null), index.h(ColorToken, { type: "success" }), index.h(ColorToken, { type: "warning" }), index.h(ColorToken, { type: "danger" }), index.h(ColorToken, { type: "neutral" })));
+}
+function ColorToken({ type = "primary" }) {
+  return (index.h("span", { style: {
+      width: "1em",
+      marginRight: "2px",
+      padding: "0 4px",
+    }, title: type }, type.charAt(0)));
+}
 
 exports.sqm_stencilbook = StencilStorybook;