@saasquatch/mint-components 1.5.0-49 → 1.5.0-52

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

@@ -2,39 +2,39 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d8fa5d8e.js');
-const stencilHooks_module = require('./stencil-hooks.module-23a5a83a.js');
-const AutoColor = require('./AutoColor-a489ed67.js');
-const sqmBigStatView = require('./sqm-big-stat-view-37e341c1.js');
-const useLeaderboard = require('./useLeaderboard-b712d583.js');
-const index_module = require('./index.module-0f10a4c4.js');
-const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-5e2bcad9.js');
-const useDemoBigStat = require('./useDemoBigStat-1fa1ca6a.js');
-const JSS = require('./JSS-24a85193.js');
-const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-b53fad32.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-7f69e118.js');
-const sqmPortalSectionView = require('./sqm-portal-section-view-073d9dda.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-a78ab7ca.js');
-const sqmStatContainerView = require('./sqm-stat-container-view-fd6e8f8d.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-0c31ff46.js');
-const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-036e5d76.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-2a783b13.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-c2ca03ef.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-1fa62a17.js');
-const sqmAssetCardView = require('./sqm-asset-card-view-0764beab.js');
-const GenericTableView = require('./GenericTableView-f9bd3b19.js');
-const luxon = require('./luxon-751f2e1c.js');
-const sqmPortalFooterView = require('./sqm-portal-footer-view-ff16e344.js');
-const sqmHeroView = require('./sqm-hero-view-6706134d.js');
-const sqmNameFieldsView = require('./sqm-name-fields-view-c684114f.js');
-require('./mixins-7b7c59fe.js');
-require('./sqm-text-span-view-dd99633a.js');
-require('./global-32bf222f.js');
-require('./insertcss-04580cfa.js');
-require('./utils-01dbfd4a.js');
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
+require('./global-08276663.js');
+require('./use-callback-e754042f.js');
+const index_module = require('./index.module-54724339.js');
 require('./extends-08099afd.js');
-require('./use-callback-867e51f6.js');
+require('./insertcss-04580cfa.js');
 require('./cjs-1066ec21.js');
+require('./mixins-7b7c59fe.js');
+const JSS = require('./JSS-c65a40f1.js');
+const GenericTableView = require('./GenericTableView-34662639.js');
+const luxon = require('./luxon-59ca7d19.js');
+require('./utils-01dbfd4a.js');
+require('./sqm-text-span-view-f101dedf.js');
+const sqmAssetCardView = require('./sqm-asset-card-view-d9ac6a95.js');
+const sqmBigStatView = require('./sqm-big-stat-view-e5dc0877.js');
+const useDemoBigStat = require('./useDemoBigStat-42fa7a69.js');
+const sqmHeroView = require('./sqm-hero-view-a13795c0.js');
+const useLeaderboard = require('./useLeaderboard-6110cd94.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-35015d30.js');
+const sqmNameFieldsView = require('./sqm-name-fields-view-c95e4768.js');
+const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-36632c96.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-da648fbc.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-991a6739.js');
+const sqmPortalFooterView = require('./sqm-portal-footer-view-266e5a7d.js');
+const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-10c0b54f.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-185b4bd0.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-fda5946f.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-1fdc957e.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-4c78e231.js');
+const sqmStatContainerView = require('./sqm-stat-container-view-5b2db929.js');
+const AutoColor = require('./AutoColor-db901e98.js');
+const sqmPortalSectionView = require('./sqm-portal-section-view-3b6c990e.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -743,7 +743,7 @@ var StyleSheet = /*#__PURE__*/function () {
   return StyleSheet;
 }();
 
-var e="-ms-";var r="-moz-";var a$1="-webkit-";var c$1="comm";var n="rule";var t="decl";var i$1="@import";var p$1="@keyframes";var k=Math.abs;var d$1=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$1(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$1(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$1,d$1(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$1+"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$1+c+c;case 5349:case 4246:case 4810:case 6968:case 2756:return a$1+c+r+c+e+c+c;case 6828:case 4268:return a$1+c+e+c+c;case 6165:return a$1+c+e+"flex-"+c+c;case 5187:return a$1+c+y(c,/(\w+).+(:[^]+)/,a$1+"box-$1$2"+e+"flex-$1$2")+c;case 5443:return a$1+c+e+"flex-item-"+y(c,/flex-|-self/,"")+c;case 4675:return a$1+c+e+"flex-line-pack"+y(c,/align-content|flex-|-self/,"")+c;case 5548:return a$1+c+e+y(c,"shrink","negative")+c;case 5292:return a$1+c+e+y(c,"basis","preferred-size")+c;case 6060:return a$1+"box-"+y(c,"-grow","")+a$1+c+e+y(c,"grow","positive")+c;case 4554:return a$1+y(c,/([^-])(transform)/g,"$1"+a$1+"$2")+c;case 6187:return y(y(y(c,/(zoom-|grab)/,a$1+"$1"),/(image-set)/,a$1+"$1"),c,"")+c;case 5495:case 3959:return y(c,/(image-set\([^]*)/,a$1+"$1"+"$`$1");case 4968:return y(y(c,/(.+:)(flex-)?(.*)/,a$1+"box-pack:$3"+e+"flex-pack:$3"),/s.+-b[^;]+/,"justify")+a$1+c+c;case 4095:case 3583:case 4068:case 2532:return y(c,/(.+)-inline(.+)/,a$1+"$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$1+"$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$1)+c;case 101:return y(c,/(.+:)([^;!]+)(;|!.+)?/,"$1"+a$1+(z(c,14)===45?"inline-":"")+"box$3"+"$1"+a$1+"$2$3"+"$1"+e+"$2box$3")+c}break;case 5936:switch(z(c,n+11)){case 114:return a$1+c+e+y(c,/[svh]\w+-[tblr]{2}/,"tb")+c;case 108:return a$1+c+e+y(c,/[svh]\w+-[tblr]{2}/,"tb-rl")+c;case 45:return a$1+c+e+y(c,/[svh]\w+-[tblr]{2}/,"lr")+c}return a$1+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$1:case t:return e.return=e.return||e.value;case c$1: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$1:return ie([I(y(c.value,"@","@"+a$1),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$1+"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 i="@import";var p="@keyframes";var k=Math.abs;var d=String.fromCharCode;function m(e,r){return (((r<<2^z(e,0))<<2^z(e,1))<<2^z(e,2))<<2^z(e,3)}function g(e){return e.trim()}function x(e,r){return (e=r.exec(e))?e[0]:e}function y(e,r,a){return e.replace(r,a)}function j(e,r){return e.indexOf(r)}function z(e,r){return e.charCodeAt(r)|0}function C(e,r,a){return e.slice(r,a)}function A(e){return e.length}function M(e){return e.length}function O(e,r){return r.push(e),e}function S(e,r){return e.map(r).join("")}var q=1;var B=1;var D=0;var E=0;var F=0;var G="";function H(e,r,a,c,n,t,s){return {value:e,root:r,parent:a,type:c,props:n,children:t,line:q,column:B,length:s,return:""}}function I(e,r,a){return H(e,r.root,r.parent,a,r.props,r.children,0)}function J(){return F}function K(){F=E>0?z(G,--E):0;if(B--,F===10)B=1,q--;return F}function L(){F=E<D?z(G,E++):0;if(B++,F===10)B=1,q++;return F}function N(){return z(G,E)}function P(){return E}function Q(e,r){return C(G,e,r)}function R(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function T(e){return q=B=1,D=A(G=e),E=0,[]}function U(e){return G="",e}function V(e){return g(Q(E-1,_(e===91?e+2:e===40?e+1:e)))}function X(e){while(F=N())if(F<33)L();else break;return R(e)>2||R(F)>3?"":" "}function Z(e,r){while(--r&&L())if(F<48||F>102||F>57&&F<65||F>70&&F<97)break;return Q(e,P()+(r<6&&N()==32&&L()==32))}function _(e){while(L())switch(F){case e:return E;case 34:case 39:return _(e===34||e===39?e:F);case 40:if(e===41)_(e);break;case 92:L();break}return E}function ee(e,r){while(L())if(e+F===47+10)break;else if(e+F===42+42&&N()===47)break;return "/*"+Q(r,E-1)+"*"+d(e===47?e:L())}function re(e){while(!R(N()))L();return Q(e,E)}function ae(e){return U(ce("",null,null,null,[""],e=T(e),0,[0],e))}function ce(e,r,a,c,n,t,s,u,i){var f=0;var o=0;var l=s;var v=0;var h=0;var p=0;var b=1;var w=1;var $=1;var k=0;var m="";var g=n;var x=t;var j=c;var z=m;while(w)switch(p=k,k=L()){case 34:case 39:case 91:case 40:z+=V(k);break;case 9:case 10:case 13:case 32:z+=X(p);break;case 92:z+=Z(P()-1,7);continue;case 47:switch(N()){case 42:case 47:O(te(ee(L(),P()),r,a),i);break;default:z+="/";}break;case 123*b:u[f++]=A(z)*$;case 125*b:case 59:case 0:switch(k){case 0:case 125:w=0;case 59+o:if(h>0&&A(z)-l)O(h>32?se(z+";",c,a,l-1):se(y(z," ","")+";",c,a,l-2),i);break;case 59:z+=";";default:O(j=ne(z,r,a,f,o,n,u,m,g=[],x=[],l),t);if(k===123)if(o===0)ce(z,r,j,j,g,t,l,u,x);else switch(v){case 100:case 109:case 115:ce(e,j,j,c&&O(ne(e,j,j,0,0,n,u,m,n,g=[],l),x),n,x,l,u,c?g:x);break;default:ce(z,j,j,j,[""],x,l,u,x);}}f=o=h=0,b=$=1,m=z="",l=s;break;case 58:l=1+A(z),h=p;default:if(b<1)if(k==123)--b;else if(k==125&&b++==0&&K()==125)continue;switch(z+=d(k),k*b){case 38:$=o>0?1:(z+="\f",-1);break;case 44:u[f++]=(A(z)-1)*$,$=1;break;case 64:if(N()===45)z+=V(L());v=N(),o=A(m=z+=re(P())),k++;break;case 45:if(p===45&&A(z)==2)b=0;}}return t}function ne(e,r,a,c,t,s,u,i,f,o,l){var v=t-1;var h=t===0?s:[""];var p=M(h);for(var b=0,w=0,$=0;b<c;++b)for(var d=0,m=C(e,v+1,v=k(w=u[b])),x=e;d<p;++d)if(x=g(w>0?h[d]+" "+m:y(m,/&\f/g,h[d])))f[$++]=x;return H(e,r,a,t===0?n:i,f,o,l)}function te(e,r,a){return H(e,r,a,c,d(J()),C(e,2,-2),0)}function se(e,r,a,c){return H(e,r,a,t,C(e,0,c),C(e,c+1,-1),c)}function ue(c,n){switch(m(c,n)){case 5103:return a+"print-"+c+c;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 6391:case 5879:case 5623:case 6135:case 4599:case 4855:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:return a+c+c;case 5349:case 4246:case 4810:case 6968:case 2756:return a+c+r+c+e+c+c;case 6828:case 4268:return a+c+e+c+c;case 6165:return a+c+e+"flex-"+c+c;case 5187:return a+c+y(c,/(\w+).+(:[^]+)/,a+"box-$1$2"+e+"flex-$1$2")+c;case 5443:return a+c+e+"flex-item-"+y(c,/flex-|-self/,"")+c;case 4675:return a+c+e+"flex-line-pack"+y(c,/align-content|flex-|-self/,"")+c;case 5548:return a+c+e+y(c,"shrink","negative")+c;case 5292:return a+c+e+y(c,"basis","preferred-size")+c;case 6060:return a+"box-"+y(c,"-grow","")+a+c+e+y(c,"grow","positive")+c;case 4554:return a+y(c,/([^-])(transform)/g,"$1"+a+"$2")+c;case 6187:return y(y(y(c,/(zoom-|grab)/,a+"$1"),/(image-set)/,a+"$1"),c,"")+c;case 5495:case 3959:return y(c,/(image-set\([^]*)/,a+"$1"+"$`$1");case 4968:return y(y(c,/(.+:)(flex-)?(.*)/,a+"box-pack:$3"+e+"flex-pack:$3"),/s.+-b[^;]+/,"justify")+a+c+c;case 4095:case 3583:case 4068:case 2532:return y(c,/(.+)-inline(.+)/,a+"$1$2")+c;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(A(c)-1-n>6)switch(z(c,n+1)){case 109:if(z(c,n+4)!==45)break;case 102:return y(c,/(.+:)(.+)-([^]+)/,"$1"+a+"$2-$3"+"$1"+r+(z(c,n+3)==108?"$3":"$2-$3"))+c;case 115:return ~j(c,"stretch")?ue(y(c,"stretch","fill-available"),n)+c:c}break;case 4949:if(z(c,n+1)!==115)break;case 6444:switch(z(c,A(c)-3-(~j(c,"!important")&&10))){case 107:return y(c,":",":"+a)+c;case 101:return y(c,/(.+:)([^;!]+)(;|!.+)?/,"$1"+a+(z(c,14)===45?"inline-":"")+"box$3"+"$1"+a+"$2$3"+"$1"+e+"$2box$3")+c}break;case 5936:switch(z(c,n+11)){case 114:return a+c+e+y(c,/[svh]\w+-[tblr]{2}/,"tb")+c;case 108:return a+c+e+y(c,/[svh]\w+-[tblr]{2}/,"tb-rl")+c;case 45:return a+c+e+y(c,/[svh]\w+-[tblr]{2}/,"lr")+c}return a+c+e+c+c}return c}function ie(e,r){var a="";var c=M(e);for(var n=0;n<c;n++)a+=r(e[n],n,e,r)||"";return a}function fe(e,r,a,s){switch(e.type){case i:case t:return e.return=e.return||e.value;case c:return "";case n:e.value=e.props.join(",");}return A(a=ie(e.children,s))?e.return=e.value+"{"+a+"}":""}function oe(e){var r=M(e);return function(a,c,n,t){var s="";for(var u=0;u<r;u++)s+=e[u](a,c,n,t)||"";return s}}function le(e){return function(r){if(!r.root)if(r=r.return)e(r);}}function ve(c,s,u,i){if(!c.return)switch(c.type){case t:c.return=ue(c.value,c.length);break;case p:return ie([I(y(c.value,"@","@"+a),c,"")],i);case n:if(c.length)return S(c.props,(function(n){switch(x(n,/(::plac\w+|:read-\w+)/)){case":read-only":case":read-write":return ie([I(y(n,/:(read-\w+)/,":"+r+"$1"),c,"")],i);case"::placeholder":return ie([I(y(n,/:(plac\w+)/,":"+a+"input-$1"),c,""),I(y(n,/:(plac\w+)/,":"+r+"$1"),c,""),I(y(n,/:(plac\w+)/,e+"input-$1"),c,"")],i)}return ""}))}}
 
 function memoize(fn) {
   var cache = Object.create(null);
@@ -789,7 +789,7 @@ var toRules = function toRules(parsed, points) {
       // fallthrough
 
       default:
-        parsed[index] += d$1(character);
+        parsed[index] += d(character);
     }
   } while (character = L());
 
@@ -911,7 +911,7 @@ var createCache = function createCache(options) {
 
   {
     var currentSheet;
-    var finalizingPlugins = [fe, le(function (rule) {
+    var finalizingPlugins = [fe,  le(function (rule) {
       currentSheet.insert(rule);
     })];
     var serializer = oe(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
@@ -1302,7 +1302,7 @@ var insertStyles = function insertStyles(cache, serialized, isStringTag) {
     var current = serialized;
 
     do {
-      cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
+      var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
 
       current = current.next;
     } while (current !== undefined);
@@ -1450,7 +1450,7 @@ var _createEmotion = createEmotion({
 }),
     css = _createEmotion.css;
 
-function i(){return (i=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 s(n,t){return t||(t=n.slice(0)),n.raw=t,n}var a,l,u,c=css(a||(a=s(['\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 p(n,t){var o,r=t.story.title.split("/"),e=r[1]?r[0]:"_";return i({},n,((o={})[e]=[].concat(n[e]||[],[{story:i({},t.story,{title:r[1]||r[0]}),subs:t.subs}]).sort(function(n,t){return n.story.title.localeCompare(t.story.title)}),o))}function d(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(a,f){var b=f.h,y=void 0===b?index.h:b,g=f.title,m=void 0===g?"Stencilbook":g,x=f.homepage,h=void 0===x?y("h3",null,"Select a story!"):x,v=f.addons,k=void 0===v?[]:v,w=stencilHooks_module.useMemo(function(){return a.map(d).reduce(p,{_:[]})},a),S=stencilHooks_module.useState(void 0),C=S[0],z=S[1],O=null==C?void 0:C.key,j=stencilHooks_module.useState("desktop"),T=j[0],_=j[1],B=stencilHooks_module.useState(!0),D=B[0],L=B[1],N=stencilHooks_module.useState(!1),q=N[0],A=N[1],M=function(){return y("div",{class:"dynamic-display-wrapper"},y("div",{class:"button-wrapper"},y("button",{class:"desktop"===T?"active":"",onClick:function(){return _("desktop")}},"Desktop"),y("button",{class:"tablet"===T?"active":"",onClick:function(){return _("tablet")}},"Tablet"),y("button",{class:"mobile"===T?"active":"",onClick:function(){return _("mobile")}},"Mobile")),y("p",null,"Note: Currently doesn't test breakpoints, use the native tester for now"),y("hr",null),y("button",{class:q?"active":"",onClick:function(){return A(function(n){return !n})}},"Toggle Dark Background"),y("hr",null),y("button",{class:D?"active":"",onClick:function(){return L(function(n){return !n})}},"Toggle Sidebar"))},P="mobile"===T?"375px":"tablet"===T?"768px":"1124px",V=css(l||(l=s(["\n    max-width: ",";\n    margin-left: ",";\n  "])),P,D?"250px":"0px"),X=css(u||(u=s(["\n    display: none;\n  "])));document.body.style.backgroundColor=q?"#232323":"#fafafa";var E=function(n){var t=n.selected,o=k.reduce(function(n,o){return function(){return y(o,{story:i({},t)},y(n,null))}},null==t?void 0:t.story);return y(o,null)},F=function(){return y("div",{class:"story-book-outer-div"},y("div",{class:"story-div "+(D?"":X)},y("div",{class:"header",onClick:function(){z(void 0);}},y("h2",null,m)),y("ul",{class:"parentStoryList"},Object.keys(w).sort().map(function(n){return y("div",{class:"group-wrapper"},"_"!==n&&y("h4",{class:"group-header"},n),w[n].map(function(t){return y("li",{class:"parentStory"},y("details",{style:{marginBottom:"10px"}},y("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map(function(o){var e=n+"/"+o,i=t.subs[o],s=i.storyName||lodash_startcase(o);return y("div",{class:"subStory "+(O===e?"selected":"")},y("a",{onClick:function(){return function(n,t,o,r){z({key:t,story:n,parent:o,label:r});}(i,e,t.story,s)}},s))})))}))}))),y(M,null),y("div",{class:"component "+V},!O&&h,O&&y("div",null,y("h3",null,C.label),y(E,{selected:C}))))};return {class:c,children:y(F,null),View:F,selected:C}}
+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 s(n,t){return t||(t=n.slice(0)),n.raw=t,n}var a$1,l,u,c$1=css(a$1||(a$1=s(['\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 p$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 d$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(a,f){var b=f.h,y=void 0===b?index.h:b,g=f.title,m=void 0===g?"Stencilbook":g,x=f.homepage,h=void 0===x?y("h3",null,"Select a story!"):x,v=f.addons,k=void 0===v?[]:v,w=stencilHooks_module.useMemo(function(){return a.map(d$1).reduce(p$1,{_:[]})},a),S=stencilHooks_module.useState(void 0),C=S[0],z=S[1],O=null==C?void 0:C.key,j=stencilHooks_module.useState("desktop"),T=j[0],_=j[1],B=stencilHooks_module.useState(!0),D=B[0],L=B[1],N=stencilHooks_module.useState(!1),q=N[0],A=N[1],M=function(){return y("div",{class:"dynamic-display-wrapper"},y("div",{class:"button-wrapper"},y("button",{class:"desktop"===T?"active":"",onClick:function(){return _("desktop")}},"Desktop"),y("button",{class:"tablet"===T?"active":"",onClick:function(){return _("tablet")}},"Tablet"),y("button",{class:"mobile"===T?"active":"",onClick:function(){return _("mobile")}},"Mobile")),y("p",null,"Note: Currently doesn't test breakpoints, use the native tester for now"),y("hr",null),y("button",{class:q?"active":"",onClick:function(){return A(function(n){return !n})}},"Toggle Dark Background"),y("hr",null),y("button",{class:D?"active":"",onClick:function(){return L(function(n){return !n})}},"Toggle Sidebar"))},P="mobile"===T?"375px":"tablet"===T?"768px":"1124px",V=css(l||(l=s(["\n    max-width: ",";\n    margin-left: ",";\n  "])),P,D?"250px":"0px"),X=css(u||(u=s(["\n    display: none;\n  "])));document.body.style.backgroundColor=q?"#232323":"#fafafa";var E=function(n){var t=n.selected,o=k.reduce(function(n,o){return function(){return y(o,{story:i$1({},t)},y(n,null))}},null==t?void 0:t.story);return y(o,null)},F=function(){return y("div",{class:"story-book-outer-div"},y("div",{class:"story-div "+(D?"":X)},y("div",{class:"header",onClick:function(){z(void 0);}},y("h2",null,m)),y("ul",{class:"parentStoryList"},Object.keys(w).sort().map(function(n){return y("div",{class:"group-wrapper"},"_"!==n&&y("h4",{class:"group-header"},n),w[n].map(function(t){return y("li",{class:"parentStory"},y("details",{style:{marginBottom:"10px"}},y("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map(function(o){var e=n+"/"+o,i=t.subs[o],s=i.storyName||lodash_startcase(o);return y("div",{class:"subStory "+(O===e?"selected":"")},y("a",{onClick:function(){return function(n,t,o,r){z({key:t,story:n,parent:o,label:r});}(i,e,t.story,s)}},s))})))}))}))),y(M,null),y("div",{class:"component "+V},!O&&h,O&&y("div",null,y("h3",null,C.label),y(E,{selected:C}))))};return {class:c$1,children:y(F,null),View:F,selected:C}}
 
 const ShareButton_stories = {
   title: "Components/Share Button",
@@ -1564,7 +1564,7 @@ const ShareButton = /*#__PURE__*/Object.freeze({
 const ShareLink_stories = {
   title: "Components/Share Link",
 };
-const Default$b = () => {
+const Default = () => {
   const props = {
     shareString: "https://noah.example.com",
     open: false,
@@ -1580,7 +1580,7 @@ const Tooltip = () => {
   };
   return index.h(AutoColor.ShareLinkView, Object.assign({}, props));
 };
-const Disabled$1 = () => {
+const Disabled = () => {
   const props = {
     shareString: "https://noah.example.com",
     disabled: true,
@@ -1596,16 +1596,16 @@ const FullStack = () => {
 const ShareLink = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': ShareLink_stories,
-  Default: Default$b,
+  Default: Default,
   Tooltip: Tooltip,
-  Disabled: Disabled$1,
+  Disabled: Disabled,
   FullStack: FullStack
 });
 
 const BigStat_stories = {
   title: "Components/Big Stat",
 };
-const Default$a = () => {
+const Default$1 = () => {
   const props = { value: 990000, statvalue: "9.900,00", loading: false };
   return index.h(sqmBigStatView.BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -1676,7 +1676,7 @@ const InvalidStatValue = () => {
 const BigStat = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': BigStat_stories,
-  Default: Default$a,
+  Default: Default$1,
   LeftAlign: LeftAlign,
   RightAlign: RightAlign,
   FlexReverse: FlexReverse,
@@ -1719,7 +1719,7 @@ const Empty = () => {
   };
   return index.h(useLeaderboard.LeaderboardView, Object.assign({}, props));
 };
-const Loading$3 = () => {
+const Loading = () => {
   const props = {
     states: {
       loading: true,
@@ -1991,7 +1991,7 @@ const Leaderboard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': Leaderboard_stories,
   Empty: Empty,
-  Loading: Loading$3,
+  Loading: Loading,
   One: One,
   Five: Five,
   FiveWithRank: FiveWithRank,
@@ -2086,36 +2086,36 @@ const routes = `
 `;
 const TemplateNavigation = createHookStory(() => {
   return (index.h("div", null,
-    index.h("button", { onClick: () => index_module.dn.push("/") }, "/"),
-    index.h("button", { onClick: () => index_module.dn.push("/foo") }, "/foo"),
-    index.h("button", { onClick: () => index_module.dn.push("/bar") }, "/bar"),
-    index.h("button", { onClick: () => index_module.dn.push("/baz/bang") }, "/baz/bang"),
-    index.h("button", { onClick: () => index_module.dn.push("/refer") }, "/refer"),
-    index.h("button", { onClick: () => index_module.dn.push("/refer/1") }, "/refer/1"),
-    index.h("button", { onClick: () => index_module.dn.push("/refer/2") }, "/refer/2"),
-    index.h("button", { onClick: () => index_module.dn.back() }, "Back"),
-    index.h("button", { onClick: () => index_module.dn.forward() }, "Forward"),
+    index.h("button", { onClick: () => index_module.pn.push("/") }, "/"),
+    index.h("button", { onClick: () => index_module.pn.push("/foo") }, "/foo"),
+    index.h("button", { onClick: () => index_module.pn.push("/bar") }, "/bar"),
+    index.h("button", { onClick: () => index_module.pn.push("/baz/bang") }, "/baz/bang"),
+    index.h("button", { onClick: () => index_module.pn.push("/refer") }, "/refer"),
+    index.h("button", { onClick: () => index_module.pn.push("/refer/1") }, "/refer/1"),
+    index.h("button", { onClick: () => index_module.pn.push("/refer/2") }, "/refer/2"),
+    index.h("button", { onClick: () => index_module.pn.back() }, "Back"),
+    index.h("button", { onClick: () => index_module.pn.forward() }, "Forward"),
     index.h("hr", null),
     index.h("sqm-router", { innerHTML: templates })));
 });
 const RouteNavigation = createHookStory(() => {
   return (index.h("div", null,
-    index.h("button", { onClick: () => index_module.dn.push("/") }, "/"),
-    index.h("button", { onClick: () => index_module.dn.push("/foo") }, "/foo"),
-    index.h("button", { onClick: () => index_module.dn.push("/bar") }, "/bar"),
-    index.h("button", { onClick: () => index_module.dn.push("/baz/bang") }, "/baz/bang"),
-    index.h("button", { onClick: () => index_module.dn.push("/refer") }, "/refer"),
-    index.h("button", { onClick: () => index_module.dn.push("/refer/1") }, "/refer/1"),
-    index.h("button", { onClick: () => index_module.dn.push("/refer/2") }, "/refer/2"),
-    index.h("button", { onClick: () => index_module.dn.back() }, "Back"),
-    index.h("button", { onClick: () => index_module.dn.forward() }, "Forward"),
+    index.h("button", { onClick: () => index_module.pn.push("/") }, "/"),
+    index.h("button", { onClick: () => index_module.pn.push("/foo") }, "/foo"),
+    index.h("button", { onClick: () => index_module.pn.push("/bar") }, "/bar"),
+    index.h("button", { onClick: () => index_module.pn.push("/baz/bang") }, "/baz/bang"),
+    index.h("button", { onClick: () => index_module.pn.push("/refer") }, "/refer"),
+    index.h("button", { onClick: () => index_module.pn.push("/refer/1") }, "/refer/1"),
+    index.h("button", { onClick: () => index_module.pn.push("/refer/2") }, "/refer/2"),
+    index.h("button", { onClick: () => index_module.pn.back() }, "Back"),
+    index.h("button", { onClick: () => index_module.pn.forward() }, "Forward"),
     index.h("hr", null),
     index.h("sqm-router", { innerHTML: routes })));
 });
 const Styling = createHookStory(() => {
   return (index.h("div", null,
-    index.h("button", { onClick: () => index_module.dn.push("/") }, "/"),
-    index.h("button", { onClick: () => index_module.dn.push("/foo") }, "/foo"),
+    index.h("button", { onClick: () => index_module.pn.push("/") }, "/"),
+    index.h("button", { onClick: () => index_module.pn.push("/foo") }, "/foo"),
     index.h("hr", null),
     index.h("div", { style: { display: "flex", justifyContent: "space-around" } },
       index.h("sqm-router", { innerHTML: `<template path="/">
@@ -2124,12 +2124,12 @@ const Styling = createHookStory(() => {
       <div>Column 2 </div>
       </template>` }))));
 });
-function useTemplate$1(templateString) {
+function useTemplate(templateString) {
   const [editedTemplate, setEditedTemplate] = stencilHooks_module.useState(templateString);
   const [previewTemplate, setPreviewTemplate] = stencilHooks_module.useState(templateString);
   function setPath(e) {
     //@ts-ignore
-    index_module.dn.push(e.target.value);
+    index_module.pn.push(e.target.value);
   }
   return {
     states: { previewTemplate, editedTemplate },
@@ -2143,7 +2143,7 @@ const defaultRouter = `
   </template>
 </sqm-router>
 `;
-function TemplateView$1(props) {
+function TemplateView(props) {
   const { states, callbacks } = props;
   return [
     index.h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
@@ -2155,8 +2155,8 @@ function TemplateView$1(props) {
   ];
 }
 const RouterPlayground = createHookStory(() => {
-  const { states, callbacks } = useTemplate$1(defaultRouter);
-  return index.h(TemplateView$1, { states: states, callbacks: callbacks });
+  const { states, callbacks } = useTemplate(defaultRouter);
+  return index.h(TemplateView, { states: states, callbacks: callbacks });
 });
 
 const Router = /*#__PURE__*/Object.freeze({
@@ -2185,7 +2185,7 @@ const LeaderboardRank = /*#__PURE__*/Object.freeze({
   First: First
 });
 
-function setupGraphQL$9() {
+function setupGraphQL() {
   const id = "worried-camera@uexwltgh.mailosaur.net";
   const accountId = id;
   const programId = "a-referral-program";
@@ -2218,7 +2218,7 @@ function setupLoggedOut() {
 const PortalFrame_stories = {
   title: "Components/Portal Frame",
 };
-const defaultProps$9 = {
+const defaultProps = {
   data: {
     footer: index.h("span", null, "example@example.com"),
     header: (index.h("div", { slot: "header", style: { display: "flex", flexDirection: "column" } },
@@ -2235,7 +2235,7 @@ const defaultProps$9 = {
 };
 const FrameWithMenu = () => {
   const props = {
-    ...defaultProps$9,
+    ...defaultProps,
   };
   return (index.h(AutoColor.PortalFrameView, Object.assign({}, props),
     index.h("sqm-navigation-menu", { "menu-label": "Menu" },
@@ -2246,13 +2246,13 @@ const FrameWithMenu = () => {
 };
 const FrameWithoutMenu = () => {
   const props = {
-    ...defaultProps$9,
+    ...defaultProps,
   };
   return index.h(AutoColor.PortalFrameView, Object.assign({}, props));
 };
 const FullStackFrame = () => {
   var _a;
-  setupGraphQL$9();
+  setupGraphQL();
   return (index.h("div", null,
     index.h("sqm-portal-frame", null,
       index.h("div", { slot: "header", style: { display: "flex", flexDirection: "column" } },
@@ -2272,8 +2272,8 @@ const FullStackFrame = () => {
       "Current path:",
       " ",
       index.h("code", null,
-        index.h("strong", null, (_a = index_module.ln()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    index.h("button", { onClick: index_module.dn.back }, "Go Back")));
+        index.h("strong", null, (_a = index_module.hn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    index.h("button", { onClick: index_module.pn.back }, "Go Back")));
 };
 const FullStackFrameLoggedOut = () => {
   var _a;
@@ -2297,8 +2297,8 @@ const FullStackFrameLoggedOut = () => {
       "Current path:",
       " ",
       index.h("code", null,
-        index.h("strong", null, (_a = index_module.ln()) === null || _a === void 0 ? void 0 : _a.pathname))),
-    index.h("button", { onClick: index_module.dn.back }, "Go Back")));
+        index.h("strong", null, (_a = index_module.hn()) === null || _a === void 0 ? void 0 : _a.pathname))),
+    index.h("button", { onClick: index_module.pn.back }, "Go Back")));
 };
 
 const PortalFrame = /*#__PURE__*/Object.freeze({
@@ -2313,7 +2313,7 @@ const PortalFrame = /*#__PURE__*/Object.freeze({
 const EditProfileForm_stories = {
   title: "Components/Edit Profile Form",
 };
-const defaultProps$8 = {
+const defaultProps$1 = {
   states: {
     loading: false,
     submitDisabled: false,
@@ -2356,13 +2356,13 @@ const defaultProps$8 = {
   },
 };
 const EditProfileFormDisabled = () => {
-  const props = defaultProps$8;
+  const props = defaultProps$1;
   return index.h(AutoColor.EditProfileView, Object.assign({}, props));
 };
 const EditProfileFormEnabled = () => {
   const props = {
-    ...defaultProps$8,
-    states: { ...defaultProps$8.states, showEdit: true },
+    ...defaultProps$1,
+    states: { ...defaultProps$1.states, showEdit: true },
   };
   return index.h(AutoColor.EditProfileView, Object.assign({}, props));
 };
@@ -2370,7 +2370,7 @@ 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 }));
 };
 
-const EditProfile$2 = /*#__PURE__*/Object.freeze({
+const EditProfile = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': EditProfileForm_stories,
   EditProfileFormDisabled: EditProfileFormDisabled,
@@ -2381,7 +2381,7 @@ const EditProfile$2 = /*#__PURE__*/Object.freeze({
 const UseShareLink_stories = {
   title: "Hooks / useShareLink",
 };
-function setupGraphQL$8() {
+function setupGraphQL$1() {
   const id = "testestest";
   const accountId = id;
   const programId = "sam-partner-test-2";
@@ -2392,19 +2392,19 @@ function setupGraphQL$8() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ae({
+    index_module.Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ae(undefined);
+      index_module.Y(undefined);
     };
   }, []);
 }
-const BareBonesView$1 = createHookStory(() => {
-  setupGraphQL$8();
+const BareBonesView = createHookStory(() => {
+  setupGraphQL$1();
   const res = AutoColor.useShareLink({
     programId: "sam-partner-test-2",
     tooltiplifespan: 0,
@@ -2415,8 +2415,8 @@ const BareBonesView$1 = createHookStory(() => {
     " ",
     index.h("code", { style: { borderStyle: "solid", borderWidth: "1px", padding: "2px" } }, res.shareString)));
 });
-const RegularView$2 = createHookStory(() => {
-  setupGraphQL$8();
+const RegularView = createHookStory(() => {
+  setupGraphQL$1();
   return (index.h(AutoColor.ShareLinkView, Object.assign({}, AutoColor.useShareLink({
     programId: "sam-partner-test-2",
     tooltiptext: "Copied to clipboard",
@@ -2424,7 +2424,7 @@ const RegularView$2 = createHookStory(() => {
   }))));
 });
 const FastTooltip = createHookStory(() => {
-  setupGraphQL$8();
+  setupGraphQL$1();
   return (index.h(AutoColor.ShareLinkView, Object.assign({}, AutoColor.useShareLink({
     programId: "sam-partner-test-2",
     tooltiptext: "⠀⠀⠀⠀⠀⠀⠀⠀⠀HELLO THERE!!!\n⠀⠀⠀⡯⡯⡾⠝⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢊⠘⡮⣣⠪⠢⡑⡌\n⠀⠀⠀⠟⠝⠈⠀⠀⠀⠡⠀⠠⢈⠠⢐⢠⢂⢔⣐⢄⡂⢔⠀⡁⢉⠸⢨⢑⠕⡌\n⠀⠀⡀⠁⠀⠀⠀⡀⢂⠡⠈⡔⣕⢮⣳⢯⣿⣻⣟⣯⣯⢷⣫⣆⡂⠀⠀⢐⠑⡌\n⢀⠠⠐⠈⠀⢀⢂⠢⡂⠕⡁⣝⢮⣳⢽⡽⣾⣻⣿⣯⡯⣟⣞⢾⢜⢆⠀⡀⠀⠪\n⣬⠂⠀⠀⢀⢂⢪⠨⢂⠥⣺⡪⣗⢗⣽⢽⡯⣿⣽⣷⢿⡽⡾⡽⣝⢎⠀⠀⠀⢡\n⣿⠀⠀⠀⢂⠢⢂⢥⢱⡹⣪⢞⡵⣻⡪⡯⡯⣟⡾⣿⣻⡽⣯⡻⣪⠧⠑⠀⠁⢐\n⣿⠀⠀⠀⠢⢑⠠⠑⠕⡝⡎⡗⡝⡎⣞⢽⡹⣕⢯⢻⠹⡹⢚⠝⡷⡽⡨⠀⠀⢔\n⣿⡯⠀⢈⠈⢄⠂⠂⠐⠀⠌⠠⢑⠱⡱⡱⡑⢔⠁⠀⡀⠐⠐⠐⡡⡹⣪⠀⠀⢘\n⣿⣽⠀⡀⡊⠀⠐⠨⠈⡁⠂⢈⠠⡱⡽⣷⡑⠁⠠⠑⠀⢉⢇⣤⢘⣪⢽⠀⢌⢎\n⣿⢾⠀⢌⠌⠀⡁⠢⠂⠐⡀⠀⢀⢳⢽⣽⡺⣨⢄⣑⢉⢃⢭⡲⣕⡭⣹⠠⢐⢗\n⣿⡗⠀⠢⠡⡱⡸⣔⢵⢱⢸⠈⠀⡪⣳⣳⢹⢜⡵⣱⢱⡱⣳⡹⣵⣻⢔⢅⢬⡷\n⣷⡇⡂⠡⡑⢕⢕⠕⡑⠡⢂⢊⢐⢕⡝⡮⡧⡳⣝⢴⡐⣁⠃⡫⡒⣕⢏⡮⣷⡟\n⣷⣻⣅⠑⢌⠢⠁⢐⠠⠑⡐⠐⠌⡪⠮⡫⠪⡪⡪⣺⢸⠰⠡⠠⠐⢱⠨⡪⡪⡰\n⣯⢷⣟⣇⡂⡂⡌⡀⠀⠁⡂⠅⠂⠀⡑⡄⢇⠇⢝⡨⡠⡁⢐⠠⢀⢪⡐⡜⡪⡊\n⣿⢽⡾⢹⡄⠕⡅⢇⠂⠑⣴⡬⣬⣬⣆⢮⣦⣷⣵⣷⡗⢃⢮⠱⡸⢰⢱⢸⢨⢌\n⣯⢯⣟⠸⣳⡅⠜⠔⡌⡐⠈⠻⠟⣿⢿⣿⣿⠿⡻⣃⠢⣱⡳⡱⡩⢢⠣⡃⠢⠁\n⡯⣟⣞⡇⡿⣽⡪⡘⡰⠨⢐⢀⠢⢢⢄⢤⣰⠼⡾⢕⢕⡵⣝⠎⢌⢪⠪⡘⡌⠀\n⡯⣳⠯⠚⢊⠡⡂⢂⠨⠊⠔⡑⠬⡸⣘⢬⢪⣪⡺⡼⣕⢯⢞⢕⢝⠎⢻⢼⣀⠀\n⠁⡂⠔⡁⡢⠣⢀⠢⠀⠅⠱⡐⡱⡘⡔⡕⡕⣲⡹⣎⡮⡏⡑⢜⢼⡱⢩⣗⣯⣟\n⢀⢂⢑⠀⡂⡃⠅⠊⢄⢑⠠⠑⢕⢕⢝⢮⢺⢕⢟⢮⢊⢢⢱⢄⠃⣇⣞⢞⣞⢾\n⢀⠢⡑⡀⢂⢊⠠⠁⡂⡐⠀⠅⡈⠪⠪⠪⠣⠫⠑⡁⢔⠕⣜⣜⢦⡰⡎⡯⡾⡽",
@@ -2435,15 +2435,15 @@ const FastTooltip = createHookStory(() => {
 const UseShareLink = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': UseShareLink_stories,
-  BareBonesView: BareBonesView$1,
-  RegularView: RegularView$2,
+  BareBonesView: BareBonesView,
+  RegularView: RegularView,
   FastTooltip: FastTooltip
 });
 
 const UseShareButton_stories = {
   title: "Hooks / useShareButton",
 };
-function setupGraphQL$7() {
+function setupGraphQL$2() {
   const id = "testestest";
   const accountId = id;
   const programId = "sam-partner-test-2";
@@ -2454,19 +2454,19 @@ function setupGraphQL$7() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ae({
+    index_module.Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ae(undefined);
+      index_module.Y(undefined);
     };
   }, []);
 }
-const BareBonesView = createHookStory(() => {
-  setupGraphQL$7();
+const BareBonesView$1 = createHookStory(() => {
+  setupGraphQL$2();
   const programId = "sam-partner-test-2";
   const res = [
     AutoColor.useShareButton({ programId, medium: "facebook" }),
@@ -2482,7 +2482,7 @@ const BareBonesView = createHookStory(() => {
       ")"))))));
 });
 const RegularView$1 = createHookStory(() => {
-  setupGraphQL$7();
+  setupGraphQL$2();
   const programId = "sam-partner-test-2";
   const mediums = [
     "facebook",
@@ -2498,14 +2498,14 @@ const RegularView$1 = createHookStory(() => {
 const UseShareButton = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': UseShareButton_stories,
-  BareBonesView: BareBonesView,
+  BareBonesView: BareBonesView$1,
   RegularView: RegularView$1
 });
 
 const UseBigStat_stories = {
   title: "Hooks / useBigStat",
 };
-function setupGraphQL$6() {
+function setupGraphQL$3() {
   const id = "nynellie";
   const accountId = id;
   const programId = "ny-post-referrals";
@@ -2516,20 +2516,20 @@ function setupGraphQL$6() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ae({
+    index_module.Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6Im55bmVsbGllIiwiaWQiOiJueW5lbGxpZSJ9fQ.3KV974VPLgk4tD8LQfJTi4IPkKCmnaB8w48HzVJYDuI",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ae(undefined);
+      index_module.Y(undefined);
     };
   }, []);
 }
-const View$1 = (statType, format) => {
+const View = (statType, format) => {
   console.log(`View("${statType}") - CALLED`);
-  setupGraphQL$6();
+  setupGraphQL$3();
   const { props, label } = useDemoBigStat.useBigStat({
     statType,
     render: () => { },
@@ -2563,44 +2563,44 @@ const DemoView = () => {
       index.h(sqmBigStatView.BigStatView, Object.assign({}, props), label))));
 };
 const Demo = createHookStory(DemoView);
-const ReferralsCount = createHookStory(() => View$1("/referralsCount", "/(referralsCount)/:status?"));
+const ReferralsCount = createHookStory(() => View("/referralsCount", "/(referralsCount)/:status?"));
 const referralsConvertedCount = createHookStory(() => {
-  return View$1("/referralsCount/converted", "/(referralsCount)/:status?");
+  return View("/referralsCount/converted", "/(referralsCount)/:status?");
 });
 const referralsStartedCount = createHookStory(() => {
-  return View$1("/referralsCount/started", "/(referralsCount)/:status?");
+  return View("/referralsCount/started", "/(referralsCount)/:status?");
 });
-const ReferralsMonth = createHookStory(() => View$1("/referralsMonth", "/(referralsMonth)"));
-const ReferralsWeek = createHookStory(() => View$1("/referralsWeek", "/(referralsWeek)"));
-const RewardsCount = createHookStory(() => View$1("/rewardsCount", "/(rewardsCount)/:global?"));
-const GlobalRewardsCount = createHookStory(() => View$1("/rewardsCount/global", "/(rewardsCount)/:global"));
-const GlobalRewardsCountFiltered = createHookStory(() => View$1("/rewardsCountFiltered/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-const GlobalRewardsCountPctDiscount = createHookStory(() => View$1("/rewardsCountFiltered/PCT_DISCOUNT/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-const GlobalRewardsCountPctDiscountPending = createHookStory(() => View$1("/rewardsCountFiltered/PCT_DISCOUNT/PENDING/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-const RewardsCountByUnit = createHookStory(() => View$1("/rewardsCountFiltered/CREDIT/COFFEE", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-const GlobalRewardsCountByUnit = createHookStory(() => View$1("/rewardsCountFiltered/CREDIT/COFFEE/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-const GlobalPendingRewardsCount = createHookStory(() => View$1("/rewardsCountFiltered/CREDIT/COFFEE/PENDING/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-const RewardsAvailableCount = createHookStory(() => View$1("/rewardsCountFiltered/AVAILABLE", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-const GlobalRewardsCountByIntegration = createHookStory(() => View$1("/integrationRewardsCountFiltered/AVAILABLE/global", "/(integrationRewardsCountFiltered)/:format([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-const GlobalRewardsCountByPendingIntegration = createHookStory(() => View$1("/integrationRewardsCountFiltered/PENDING/global", "/(integrationRewardsCountFiltered)/:format([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-const RewardsMonth = createHookStory(() => View$1("/rewardsMonth", "/(rewardsMonth)/:global?"));
-const RewardsWeek = createHookStory(() => View$1("/rewardsWeek", "/(rewardsWeek)/:global?"));
-const RewardsAssigned = createHookStory(() => View$1("/rewardsAssigned/CREDIT/COFFEE", "/(rewardsAssigned)/:statType/:unit/:global?"));
-const RewardsAssignedCashUSD = createHookStory(() => View$1("/rewardsAssigned/CREDIT/CASH%2FUSD", "/(rewardsAssigned)/:statType/:unit/:global?"));
-const RewardsRedeemed = createHookStory(() => View$1("/rewardsRedeemed/CREDIT/COFFEE", "/(rewardsRedeemed)/:statType/:unit/:global?"));
-const RewardsAvailable = createHookStory(() => View$1("/rewardsAvailable/CREDIT/COFFEE", "/(rewardsAvailable)/:statType/:unit/:global?"));
-const RewardsAvailableWithSlash = createHookStory(() => View$1("/rewardsAvailable/CREDIT/CASH%2FUSD", "/(rewardsAvailable)/:statType/:unit/:global?"));
-const RewardBalance = createHookStory(() => View$1("/rewardBalance/CREDIT/COFFEE/prettyValue", "/(rewardBalance)/:statType/:unit/:format([prettyValue|value]*)?/:global?"));
+const ReferralsMonth = createHookStory(() => View("/referralsMonth", "/(referralsMonth)"));
+const ReferralsWeek = createHookStory(() => View("/referralsWeek", "/(referralsWeek)"));
+const RewardsCount = createHookStory(() => View("/rewardsCount", "/(rewardsCount)/:global?"));
+const GlobalRewardsCount = createHookStory(() => View("/rewardsCount/global", "/(rewardsCount)/:global"));
+const GlobalRewardsCountFiltered = createHookStory(() => View("/rewardsCountFiltered/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+const GlobalRewardsCountPctDiscount = createHookStory(() => View("/rewardsCountFiltered/PCT_DISCOUNT/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+const GlobalRewardsCountPctDiscountPending = createHookStory(() => View("/rewardsCountFiltered/PCT_DISCOUNT/PENDING/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+const RewardsCountByUnit = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+const GlobalRewardsCountByUnit = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+const GlobalPendingRewardsCount = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE/PENDING/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+const RewardsAvailableCount = createHookStory(() => View("/rewardsCountFiltered/AVAILABLE", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+const GlobalRewardsCountByIntegration = createHookStory(() => View("/integrationRewardsCountFiltered/AVAILABLE/global", "/(integrationRewardsCountFiltered)/:format([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+const GlobalRewardsCountByPendingIntegration = createHookStory(() => View("/integrationRewardsCountFiltered/PENDING/global", "/(integrationRewardsCountFiltered)/:format([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+const RewardsMonth = createHookStory(() => View("/rewardsMonth", "/(rewardsMonth)/:global?"));
+const RewardsWeek = createHookStory(() => View("/rewardsWeek", "/(rewardsWeek)/:global?"));
+const RewardsAssigned = createHookStory(() => View("/rewardsAssigned/CREDIT/COFFEE", "/(rewardsAssigned)/:statType/:unit/:global?"));
+const RewardsAssignedCashUSD = createHookStory(() => View("/rewardsAssigned/CREDIT/CASH%2FUSD", "/(rewardsAssigned)/:statType/:unit/:global?"));
+const RewardsRedeemed = createHookStory(() => View("/rewardsRedeemed/CREDIT/COFFEE", "/(rewardsRedeemed)/:statType/:unit/:global?"));
+const RewardsAvailable = createHookStory(() => View("/rewardsAvailable/CREDIT/COFFEE", "/(rewardsAvailable)/:statType/:unit/:global?"));
+const RewardsAvailableWithSlash = createHookStory(() => View("/rewardsAvailable/CREDIT/CASH%2FUSD", "/(rewardsAvailable)/:statType/:unit/:global?"));
+const RewardBalance = createHookStory(() => View("/rewardBalance/CREDIT/COFFEE/prettyValue", "/(rewardBalance)/:statType/:unit/:format([prettyValue|value]*)?/:global?"));
 const RewardBalanceCashUSD = createHookStory(() => {
   const unit = encodeURIComponent("CASH/USD");
-  return View$1(`/rewardBalance/CREDIT/${unit}/prettyValue`, "/(rewardBalance)/:statType/:unit/:format([prettyValue|value]*)?/:global?");
+  return View(`/rewardBalance/CREDIT/${unit}/prettyValue`, "/(rewardBalance)/:statType/:unit/:format([prettyValue|value]*)?/:global?");
 });
 const ProgramGoals = createHookStory(() => {
   const dummy = encodeURIComponent("Paid-Member-Goal/referrals");
-  return View$1(`/programGoals/count/${dummy}`, "/(programGoals)/:metricType/:goalId");
+  return View(`/programGoals/count/${dummy}`, "/(programGoals)/:metricType/:goalId");
 });
 const CustomField = createHookStory(() => {
-  return View$1(`/customFields/thingCount`, "/(customFields)/:customField");
+  return View(`/customFields/thingCount`, "/(customFields)/:customField");
 });
 
 const UseBigStat = /*#__PURE__*/Object.freeze({
@@ -2636,7 +2636,7 @@ const UseBigStat = /*#__PURE__*/Object.freeze({
   CustomField: CustomField
 });
 
-function setupGraphQL$5() {
+function setupGraphQL$4() {
   const id = "worried-camera@uexwltgh.mailosaur.net";
   const accountId = id;
   const programId = "a-referral-program";
@@ -2647,22 +2647,22 @@ function setupGraphQL$5() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ae({
+    index_module.Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJpZCI6IndvcnJpZWQtY2FtZXJhQHVleHdsdGdoLm1haWxvc2F1ci5uZXQiLCJmaXJzdE5hbWUiOiJ0ZXN0IiwibGFzdE5hbWUiOiJ0ZXN0In19.ziDWbdCwsTo1ijxl8d2__Ga-6iFOVShaJUPp2ZBMeO0",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ae(undefined);
+      index_module.Y(undefined);
     };
   }, []);
 }
 const UseEditProfile_stories = {
   title: "Hooks / useEditProfile",
 };
-const RegularView = createHookStory(() => {
-  setupGraphQL$5();
+const RegularView$2 = createHookStory(() => {
+  setupGraphQL$4();
   return (index.h("sqm-edit-profile", Object.assign({}, {
     editprofileheader: "HEADER",
     editprofiletext: "TEXT",
@@ -2677,13 +2677,13 @@ const RegularView = createHookStory(() => {
 const UseEditProfile = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': UseEditProfile_stories,
-  RegularView: RegularView
+  RegularView: RegularView$2
 });
 
 const UseLeaderboard_stories = {
   title: "Hooks / useLeaderboard",
 };
-function setupGraphQL$4() {
+function setupGraphQL$5() {
   const id = "testestest";
   const accountId = id;
   const programId = "sam-partner-test-2";
@@ -2694,18 +2694,18 @@ function setupGraphQL$4() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ae({
+    index_module.Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ae(undefined);
+      index_module.Y(undefined);
     };
   }, []);
 }
-const View = (overrideProps) => {
+const View$1 = (overrideProps) => {
   const props = {
     leaderboardType: "topConvertedReferrers",
     showRank: true,
@@ -2719,7 +2719,7 @@ const View = (overrideProps) => {
   };
   const { leaderboardType, rankType } = props;
   console.log(`View("${leaderboardType}") - CALLED`);
-  setupGraphQL$4();
+  setupGraphQL$5();
   const { states, data, elements } = useLeaderboard.useLeaderboard(props);
   return (index.h("div", { style: { marginBottom: "20px" } },
     index.h("sqm-divided-layout", { direction: "row" },
@@ -2733,20 +2733,20 @@ const View = (overrideProps) => {
     index.h("hr", null)));
 };
 const TopConvertedReferrers = createHookStory(() => {
-  return [View(), View({ rankType: "rank" }), View({ rankType: "denseRank" })];
+  return [View$1(), View$1({ rankType: "rank" }), View$1({ rankType: "denseRank" })];
 });
 const TopStartedReferrers = createHookStory(() => {
   return [
-    View({
+    View$1({
       leaderboardType: "topStartedReferrers",
       statsheading: "New Referrals",
     }),
-    View({
+    View$1({
       leaderboardType: "topStartedReferrers",
       rankType: "rank",
       statsheading: "New Referrals",
     }),
-    View({
+    View$1({
       leaderboardType: "topStartedReferrers",
       rankType: "denseRank",
       statsheading: "New Referrals",
@@ -2810,7 +2810,7 @@ const EXCHANGE = index_module.dist.gql `
 const UseRewardExchangeList_stories = {
   title: "Hooks / useRewardExchange",
 };
-function setupGraphQL$3() {
+function setupGraphQL$6() {
   const id = "testestest";
   const accountId = id;
   const programId = "sam-partner-test-2";
@@ -2821,23 +2821,23 @@ function setupGraphQL$3() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ae({
+    index_module.Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ae(undefined);
+      index_module.Y(undefined);
     };
   }, []);
   return { id, accountId };
 }
 function useExchangeButton() {
-  const { id, accountId } = setupGraphQL$3();
+  const { id, accountId } = setupGraphQL$6();
   const [points, setPoints] = stencilHooks_module.useState(10);
   const [rate, setRate] = stencilHooks_module.useState(100);
-  const [exchange, { data, errors }] = index_module._e(EXCHANGE);
+  const [exchange, { data, errors }] = index_module.Ke(EXCHANGE);
   return {
     states: {
       points,
@@ -2878,7 +2878,7 @@ const DefaultView = (props) => {
         index.h("pre", { style: { maxWidth: "500px", whiteSpace: "pre-wrap" } }, JSON.stringify(data.errors))))));
 };
 const RewardList = createHookStory(() => {
-  setupGraphQL$3();
+  setupGraphQL$6();
   return (index.h("sqm-reward-exchange-list", { "list-type": "something" }));
 });
 const FixedGlobalReward = createHookStory(() => {
@@ -2892,9 +2892,6 @@ const FixedGlobalReward = createHookStory(() => {
           unit: "POINT",
         },
         globalRewardKey: "gc1",
-        // rewardInput: {
-        //   valueInCents: states.points * 100,
-        // },
       },
     } }));
 });
@@ -2946,52 +2943,50 @@ const UseRewardExchangeList = /*#__PURE__*/Object.freeze({
 const UseRewardsTable_stories = {
   title: "Hooks / useRewardsTable",
 };
-function setupGraphQL$2() {
+function setupGraphQL$7() {
   const id = "testestest";
   const accountId = id;
   //@ts-ignore
   window.widgetIdent = {
     tenantAlias: "test_a8b41jotf8a1v",
     appDomain: "https://staging.referralsaasquatch.com",
-    // programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ae({
+    index_module.Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ae(undefined);
+      index_module.Y(undefined);
     };
   }, []);
   return { id, accountId };
 }
-function setupGraphQLKlip$1({ token, id }) {
+function setupGraphQLKlip({ token, id }) {
   const accountId = id;
   // const programId = "klip-referral-program";
   //@ts-ignore
   window.widgetIdent = {
     tenantAlias: "test_a74miwdpofztj",
     appDomain: "https://staging.referralsaasquatch.com",
-    // programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ae({
+    index_module.Y({
       accountId,
       id,
       jwt: token,
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ae(undefined);
+      index_module.Y(undefined);
     };
   }, []);
   return { id, accountId };
 }
 const RewardsTableWithProgram = createHookStory(() => {
-  setupGraphQL$2();
+  setupGraphQL$7();
   index_module.A("sam-partner-test-2");
   return (index.h("sqm-rewards-table", null,
     index.h("sqm-rewards-table-reward-column", null),
@@ -3000,7 +2995,7 @@ const RewardsTableWithProgram = createHookStory(() => {
     index.h("sqm-rewards-table-date-column", null)));
 });
 const RewardsTableNoProgram = createHookStory(() => {
-  setupGraphQL$2();
+  setupGraphQL$7();
   index_module.A(undefined);
   return (index.h("sqm-rewards-table", null,
     index.h("sqm-rewards-table-reward-column", null),
@@ -3009,7 +3004,7 @@ const RewardsTableNoProgram = createHookStory(() => {
     index.h("sqm-rewards-table-date-column", null)));
 });
 const RewardsTableEn = createHookStory(() => {
-  setupGraphQLKlip$1({
+  setupGraphQLKlip({
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWVuZ2xpc2giLCJpZCI6InNhbWVuZ2xpc2gifX0._6OTVF3gcipu_ibgthUNr5UHwC-2E_lhCENI5HpYvcw",
     id: "samenglish",
   });
@@ -3021,7 +3016,7 @@ const RewardsTableEn = createHookStory(() => {
     index.h("sqm-rewards-table-date-column", null)));
 });
 const RewardsTableTr = createHookStory(() => {
-  setupGraphQLKlip$1({
+  setupGraphQLKlip({
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbXR1cmtleSIsImlkIjoic2FtdHVya2V5In19.usSMe0RWg8W5FtwcvJayvAlxTw6vMxjTyWXaP8jI8_U",
     id: "samturkey",
   });
@@ -3033,7 +3028,7 @@ const RewardsTableTr = createHookStory(() => {
     index.h("sqm-rewards-table-date-column", { "column-title": "Tarih" })));
 });
 const RewardsTableFr = createHookStory(() => {
-  setupGraphQLKlip$1({
+  setupGraphQLKlip({
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWZyZW5jaCIsImlkIjoic2FtZnJlbmNoIn19.cwhasHpfU5MLV4vGbCQcazb6p19iSw5pD2zyrVHgePg",
     id: "samfrench",
   });
@@ -3059,7 +3054,7 @@ const JWT = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6In
 const UseTaskCard_stories = {
   title: "Hooks / useTaskCard",
 };
-function setupGraphQL$1() {
+function setupGraphQL$8() {
   const id = "sam+klip@saasquat.ch";
   const accountId = id;
   const programId = "klip-referral-program";
@@ -3070,24 +3065,24 @@ function setupGraphQL$1() {
     programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ae({
+    index_module.Y({
       accountId,
       id,
       jwt: JWT,
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ae(undefined);
+      index_module.Y(undefined);
     };
   }, []);
   return { id, accountId };
 }
-const TaskCard$2 = createHookStory(() => {
-  setupGraphQL$1();
+const TaskCard = createHookStory(() => {
+  setupGraphQL$8();
   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$1();
+  setupGraphQL$8();
   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" },
@@ -3110,7 +3105,7 @@ const TaskCardFeed = createHookStory(() => {
 const UseTaskCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': UseTaskCard_stories,
-  TaskCard: TaskCard$2,
+  TaskCard: TaskCard,
   TaskCardFeed: TaskCardFeed
 });
 
@@ -3125,7 +3120,7 @@ const style = {
 };
 const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
-const barProps$1 = {
+const barProps = {
   data: {
     programs: [
       {
@@ -3139,7 +3134,7 @@ const barProps$1 = {
     ],
   },
 };
-const item1Props$1 = {
+const item1Props = {
   states: {
     active: false,
   },
@@ -3149,7 +3144,7 @@ const item1Props$1 = {
     path: "/",
   },
 };
-const item2Props$1 = {
+const item2Props = {
   states: {
     active: true,
   },
@@ -3159,12 +3154,12 @@ const item2Props$1 = {
     path: "/",
   },
 };
-const Sidebar$1 = () => {
-  return (index.h(sqmNavigationSidebarView.NavigationSidebarView, Object.assign({}, barProps$1),
-    index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item1Props$1)),
-    index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item2Props$1))));
+const Sidebar = () => {
+  return (index.h(sqmNavigationSidebarView.NavigationSidebarView, Object.assign({}, barProps),
+    index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item1Props)),
+    index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item2Props))));
 };
-const Dashboard$1 = () => {
+const Dashboard = () => {
   const sharelinkProps = {
     shareString: "https://ssqt.co/johnsmithrox",
     open: false,
@@ -3220,7 +3215,7 @@ const Dashboard$1 = () => {
   };
   return (index.h("sqm-divided-layout", { direction: "row" },
     index.h("style", { type: "text/css" }, styleString),
-    index.h(Sidebar$1, null),
+    index.h(Sidebar, null),
     index.h("sqm-divided-layout", { direction: "column" },
       index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
         index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
@@ -3278,7 +3273,7 @@ const Dashboard$1 = () => {
 const EditProfile$1 = () => {
   return (index.h("sqm-divided-layout", { direction: "row" },
     index.h("style", { type: "text/css" }, styleString),
-    index.h(Sidebar$1, null),
+    index.h(Sidebar, null),
     index.h("sqm-divided-layout", { direction: "column" },
       index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, {
         states: {
@@ -3342,7 +3337,7 @@ const EditProfile$1 = () => {
 const Commissions = () => {
   return (index.h("sqm-divided-layout", { direction: "row" },
     index.h("style", { type: "text/css" }, styleString),
-    index.h(Sidebar$1, null),
+    index.h(Sidebar, null),
     index.h("sqm-divided-layout", { direction: "column" },
       index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
         index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
@@ -3364,10 +3359,10 @@ const Commissions = () => {
           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$1 = () => {
+const Activity = () => {
   return (index.h("sqm-divided-layout", { direction: "row" },
     index.h("style", { type: "text/css" }, styleString),
-    index.h(Sidebar$1, null),
+    index.h(Sidebar, null),
     index.h("sqm-divided-layout", { direction: "column" },
       index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
         index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
@@ -3409,10 +3404,10 @@ const Activity$1 = () => {
 const NewPortal = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': NewPortal_stories,
-  Dashboard: Dashboard$1,
+  Dashboard: Dashboard,
   EditProfile: EditProfile$1,
   Commissions: Commissions,
-  Activity: Activity$1
+  Activity: Activity
 });
 
 const SidebarItem_stories = {
@@ -3504,7 +3499,7 @@ const NavigationSidebar = /*#__PURE__*/Object.freeze({
 const PortalLogin_stories = {
   title: "Components/Portal Login",
 };
-const defaultProps$7 = {
+const defaultProps$2 = {
   states: {
     error: "",
     loading: false,
@@ -3516,7 +3511,7 @@ const defaultProps$7 = {
   },
   content: { pageLabel: "Sign in to your account" }
 };
-const errorProps$8 = {
+const errorProps = {
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -3528,7 +3523,7 @@ const errorProps$8 = {
   },
   content: { pageLabel: "Sign in to your account" }
 };
-const loadingProps$6 = {
+const loadingProps = {
   states: {
     error: "",
     loading: true,
@@ -3540,14 +3535,14 @@ const loadingProps$6 = {
   },
   content: { pageLabel: "Sign in to your account" }
 };
-const Default$9 = () => index.h(AutoColor.PortalLoginView, Object.assign({}, defaultProps$7));
-const LoginWithError = () => index.h(AutoColor.PortalLoginView, Object.assign({}, errorProps$8));
-const LoginLoading = () => index.h(AutoColor.PortalLoginView, Object.assign({}, loadingProps$6));
+const Default$2 = () => index.h(AutoColor.PortalLoginView, Object.assign({}, defaultProps$2));
+const LoginWithError = () => index.h(AutoColor.PortalLoginView, Object.assign({}, errorProps));
+const LoginLoading = () => index.h(AutoColor.PortalLoginView, Object.assign({}, loadingProps));
 
 const PortalLogin = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalLogin_stories,
-  Default: Default$9,
+  Default: Default$2,
   LoginWithError: LoginWithError,
   LoginLoading: LoginLoading
 });
@@ -3555,7 +3550,7 @@ const PortalLogin = /*#__PURE__*/Object.freeze({
 const PortalRegister_stories = {
   title: "Components/Portal Register",
 };
-const defaultProps$6 = {
+const defaultProps$3 = {
   states: {
     error: "",
     loading: false,
@@ -3572,7 +3567,7 @@ const defaultProps$6 = {
   },
   content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
 };
-const errorProps$7 = {
+const errorProps$1 = {
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -3592,7 +3587,7 @@ const errorProps$7 = {
     confirmPasswordLabel: "Confirm Password",
   },
 };
-const loadingProps$5 = {
+const loadingProps$1 = {
   states: {
     error: "",
     loading: true,
@@ -3632,9 +3627,9 @@ const slottedProps = {
       index.h("sl-input", { exportparts: "label: input-label", label: "Slotted Input 2", required: true }))),
   },
 };
-const Default$8 = () => index.h(AutoColor.PortalRegisterView, Object.assign({}, defaultProps$6));
-const RegisterWithError = () => index.h(AutoColor.PortalRegisterView, Object.assign({}, errorProps$7));
-const RegisterLoading = () => index.h(AutoColor.PortalRegisterView, Object.assign({}, loadingProps$5));
+const Default$3 = () => index.h(AutoColor.PortalRegisterView, Object.assign({}, defaultProps$3));
+const RegisterWithError = () => index.h(AutoColor.PortalRegisterView, Object.assign({}, errorProps$1));
+const RegisterLoading = () => index.h(AutoColor.PortalRegisterView, Object.assign({}, loadingProps$1));
 const FieldsHidden = () => {
   return (index.h("sqm-portal-register", { demoData: {
       states: {
@@ -3647,8 +3642,8 @@ const FieldsHidden = () => {
     } }));
 };
 const SlottedInputs = () => index.h(AutoColor.PortalRegisterView, Object.assign({}, slottedProps));
-const TermsAndConditions = () => (index.h(AutoColor.PortalRegisterView, Object.assign({}, defaultProps$6, { content: {
-    ...defaultProps$6.content,
+const TermsAndConditions = () => (index.h(AutoColor.PortalRegisterView, Object.assign({}, defaultProps$3, { content: {
+    ...defaultProps$3.content,
     terms: (index.h("p", null,
       "By signing up you agree to the",
       " ",
@@ -3658,7 +3653,7 @@ const TermsAndConditions = () => (index.h(AutoColor.PortalRegisterView, Object.a
 const PortalRegister = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalRegister_stories,
-  Default: Default$8,
+  Default: Default$3,
   RegisterWithError: RegisterWithError,
   RegisterLoading: RegisterLoading,
   FieldsHidden: FieldsHidden,
@@ -3666,15 +3661,15 @@ const PortalRegister = /*#__PURE__*/Object.freeze({
   TermsAndConditions: TermsAndConditions
 });
 
-const scenario$a = "@author:derek\r\n@owner:ian\r\nFeature: Forgot Password\r\n\r\n  @motivating\r\n  Scenario: Users can request to reset their password\r\n    Given a user enters their email address\r\n    And that email address is linked to a previously created account\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    When the password reset email is sent\r\n    Then a confirmation banner is shown stating a password reset email was sent\r\n\r\n  @motivating\r\n  Scenario: Users are notified if sending their password reset email fails\r\n    Given a user enters their email address\r\n    And that email address is linked to a previously created account\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    When the password reset email fails to send\r\n    Then the user does not receive a password reset email\r\n    And an error banner is shown stating that they should try again\r\n\r\n  @motivating\r\n  @landmine\r\n  Scenario: If the input email is not associated to an account a success banner is shown but an email is not be sent\r\n    Given the user entered an email address that is not associated to an accoun\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    But no email is sent\r\n    And a success banner is shown stating a password reset email was sent if the given email was associated to an account\r\n\r\n  @motivating\r\n  Scenario: Users can resend password reset email\r\n    Given a user had previously requested to reset their password\r\n    When they enter their email address\r\n    And that email address is linked to a previously created account\r\n    And they click \"Reset Password\"\r\n    Then the user receives a second password reset email\r\n    And a success banner is shown stating that their email was sent\r\n\r\n  @motivating\r\n  Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/resetPassword\"\r\n    Given a user viewing the password reset component\r\n    And the component <mayHave> \"redirect-path\" with <value>\r\n    When they request a password reset email\r\n    And they click the link in the email\r\n    Then they are redirected to <redirectPath>\r\n    Examples:\r\n      | mayHave      | value            | redirectPath     |\r\n      | doesn't have | N/A              | /resetPassword   |\r\n      | has          | /resetMyPassword | /resetMyPassword |\r\n\r\n  @minutae\r\n  Scenario Outline: Navigation back to the login page can be customized but defaults to \"/login\"\r\n    Given a user viewing the password reset component\r\n    And the component <mayHave> \"login-path\" with <value>\r\n    Then they see a \"Sign In\" text button\r\n    When they click \"Sign In\"\r\n    Then they are redirected to <redirectPath>\r\n    Examples:\r\n      | mayHave      | value   | redirectPath |\r\n      | doesn't have | N/A     | /login       |\r\n      | has          | /signin | /signin      |";
+const scenario = "@author:derek\r\n@owner:ian\r\nFeature: Forgot Password\r\n\r\n  @motivating\r\n  Scenario: Users can request to reset their password\r\n    Given a user enters their email address\r\n    And that email address is linked to a previously created account\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    When the password reset email is sent\r\n    Then a confirmation banner is shown stating a password reset email was sent\r\n\r\n  @motivating\r\n  Scenario: Users are notified if sending their password reset email fails\r\n    Given a user enters their email address\r\n    And that email address is linked to a previously created account\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    When the password reset email fails to send\r\n    Then the user does not receive a password reset email\r\n    And an error banner is shown stating that they should try again\r\n\r\n  @motivating\r\n  @landmine\r\n  Scenario: If the input email is not associated to an account a success banner is shown but an email is not be sent\r\n    Given the user entered an email address that is not associated to an accoun\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    But no email is sent\r\n    And a success banner is shown stating a password reset email was sent if the given email was associated to an account\r\n\r\n  @motivating\r\n  Scenario: Users can resend password reset email\r\n    Given a user had previously requested to reset their password\r\n    When they enter their email address\r\n    And that email address is linked to a previously created account\r\n    And they click \"Reset Password\"\r\n    Then the user receives a second password reset email\r\n    And a success banner is shown stating that their email was sent\r\n\r\n  @motivating\r\n  Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/resetPassword\"\r\n    Given a user viewing the password reset component\r\n    And the component <mayHave> \"redirect-path\" with <value>\r\n    When they request a password reset email\r\n    And they click the link in the email\r\n    Then they are redirected to <redirectPath>\r\n    Examples:\r\n      | mayHave      | value            | redirectPath     |\r\n      | doesn't have | N/A              | /resetPassword   |\r\n      | has          | /resetMyPassword | /resetMyPassword |\r\n\r\n  @minutae\r\n  Scenario Outline: Navigation back to the login page can be customized but defaults to \"/login\"\r\n    Given a user viewing the password reset component\r\n    And the component <mayHave> \"login-path\" with <value>\r\n    Then they see a \"Sign In\" text button\r\n    When they click \"Sign In\"\r\n    Then they are redirected to <redirectPath>\r\n    Examples:\r\n      | mayHave      | value   | redirectPath |\r\n      | doesn't have | N/A     | /login       |\r\n      | has          | /signin | /signin      |";
 
 const PortalForgotPassword_stories = {
   title: "Components/Portal Forgot Password",
   parameters: {
-    scenario: scenario$a,
+    scenario,
   },
 };
-const defaultProps$5 = {
+const defaultProps$4 = {
   states: {
     error: "",
     loading: false,
@@ -3689,7 +3684,7 @@ const defaultProps$5 = {
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };
-const errorProps$6 = {
+const errorProps$2 = {
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -3704,7 +3699,7 @@ const errorProps$6 = {
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };
-const loadingProps$4 = {
+const loadingProps$2 = {
   states: {
     error: "",
     loading: true,
@@ -3719,7 +3714,7 @@ const loadingProps$4 = {
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };
-const successProps$4 = {
+const successProps = {
   states: {
     error: "",
     loading: false,
@@ -3734,29 +3729,29 @@ const successProps$4 = {
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };
-const Default$7 = () => index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, defaultProps$5));
-const ForgotPasswordWithError = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, errorProps$6)));
-const ForgotPasswordLoading = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, loadingProps$4)));
-const ForgotPasswordSuccess = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, successProps$4)));
+const Default$4 = () => index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, defaultProps$4));
+const ForgotPasswordWithError = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, errorProps$2)));
+const ForgotPasswordLoading = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, loadingProps$2)));
+const ForgotPasswordSuccess = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, successProps)));
 
 const PortalForgotPassword = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalForgotPassword_stories,
-  Default: Default$7,
+  Default: Default$4,
   ForgotPasswordWithError: ForgotPasswordWithError,
   ForgotPasswordLoading: ForgotPasswordLoading,
   ForgotPasswordSuccess: ForgotPasswordSuccess
 });
 
-const scenario$9 = "@author:derek\r\n@owner:ian\r\nFeature: Email Verification\r\n\r\n    @minutae\r\n    Scenario: User's redirected from registration can re-send their verification email\r\n        Given a user has registered\r\n        And they have been sent a verification email\r\n        When they are redirected to the email verification page\r\n        Then a message is displayed\r\n        And it reflects that a email has been sent to their email\r\n        But they can still re-send the email\r\n        When they click to \"Resend-Email\"\r\n        Then they receive a verification email\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message fails\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When an error occurs trying to send the verification email\r\n        Then the user does not receive a verification email\r\n        And an error banner is shown stating that they should try again\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message succeeds\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When the email verification message sends\r\n        Then the user receives a verification email\r\n        And a success banner is shown stating that their email was resent\r\n\r\n    @motivating\r\n    Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/verifyEmail\"\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        And the component <mayHave> \"redirect-path\" with <value>\r\n        When they resend their verification email\r\n        And they click the link in the email\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | mayHave      | value          | redirectPath   |\r\n            | doesn't have | N/A            | /verifyEmail   |\r\n            | has          | /verifyMyEmail | /verifyMyEmail |";
+const scenario$1 = "@author:derek\r\n@owner:ian\r\nFeature: Email Verification\r\n\r\n    @minutae\r\n    Scenario: User's redirected from registration can re-send their verification email\r\n        Given a user has registered\r\n        And they have been sent a verification email\r\n        When they are redirected to the email verification page\r\n        Then a message is displayed\r\n        And it reflects that a email has been sent to their email\r\n        But they can still re-send the email\r\n        When they click to \"Resend-Email\"\r\n        Then they receive a verification email\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message fails\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When an error occurs trying to send the verification email\r\n        Then the user does not receive a verification email\r\n        And an error banner is shown stating that they should try again\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message succeeds\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When the email verification message sends\r\n        Then the user receives a verification email\r\n        And a success banner is shown stating that their email was resent\r\n\r\n    @motivating\r\n    Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/verifyEmail\"\r\n        Given a user viewing the email verification component\r\n        And they have an email stored in session data from registration\r\n        And the component <mayHave> \"redirect-path\" with <value>\r\n        When they resend their verification email\r\n        And they click the link in the email\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | mayHave      | value          | redirectPath   |\r\n            | doesn't have | N/A            | /verifyEmail   |\r\n            | has          | /verifyMyEmail | /verifyMyEmail |";
 
 const PortalEmailVerification_stories = {
   title: "Components/Portal Email Verification",
   parameters: {
-    scenario: scenario$9,
+    scenario: scenario$1,
   },
 };
-const defaultProps$4 = {
+const defaultProps$5 = {
   states: {
     error: "",
     loading: false,
@@ -3772,7 +3767,7 @@ const defaultProps$4 = {
     resendEmailButtonText: "Re-send Email",
   },
 };
-const errorProps$5 = {
+const errorProps$3 = {
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -3804,7 +3799,7 @@ const loadingProps$3 = {
     resendEmailButtonText: "Re-send Email",
   },
 };
-const successProps$3 = {
+const successProps$1 = {
   states: {
     error: "",
     loading: false,
@@ -3820,29 +3815,29 @@ const successProps$3 = {
     resendEmailButtonText: "Re-send Email",
   },
 };
-const Default$6 = () => index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, defaultProps$4));
-const EmailVerificationWithError$1 = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, errorProps$5)));
+const Default$5 = () => index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, defaultProps$5));
+const EmailVerificationWithError = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, errorProps$3)));
 const EmailVerificationLoading = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, loadingProps$3)));
-const EmailVerificationSuccess$1 = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, successProps$3)));
+const EmailVerificationSuccess = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, successProps$1)));
 
 const PortalEmailVerification = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalEmailVerification_stories,
-  Default: Default$6,
-  EmailVerificationWithError: EmailVerificationWithError$1,
+  Default: Default$5,
+  EmailVerificationWithError: EmailVerificationWithError,
   EmailVerificationLoading: EmailVerificationLoading,
-  EmailVerificationSuccess: EmailVerificationSuccess$1
+  EmailVerificationSuccess: EmailVerificationSuccess
 });
 
-const scenario$8 = "@author:derek\r\n@owner:ian\r\nFeature: Reset Password\r\n\r\n    Background: A user in on the password reset page\r\n        Given a user who has been redirected to the password reset page\r\n\r\n    @motivating\r\n    Scenario: Users can reset their password\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they enter their password twice\r\n        And they click \"Update\"\r\n        Then their password is updated\r\n        And a banner with a success message is displayed\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot reset their password with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        And the component <mayHave> \"failed-page\" with <value>\r\n        Then they see an error message saying that their password reset code is invalid/expired\r\n        When they click \"Continue\"\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | oobCode               | mayHave      | value  | redirectPath |\r\n            | invalid oob code      | doesn't have | N/A    | /            |\r\n            | non existant oob code | doesn't have | N/A    | /            |\r\n            | invalid oob code      | has          | /login | /login       |\r\n            | non existant oob code | has          | /login | /login       |\r\n\r\n    @motivating\r\n    Scenario: Users must enter the same password twice to successfully reset their password\r\n        Given a user has been redirected to the password reset page\r\n        And they have a valid oob code as a url query parameter\r\n        When they enter two different passwords into the password reset form\r\n        And they click \"Update\"\r\n        Then their password is not be reset\r\n        And an error banner stating the input passwords must match appears\r\n        And their password is not be reset\r\n        When they enter the same password twice\r\n        And they click \"Update\"\r\n        Then a banner appears with a success message\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/activity\"";
+const scenario$2 = "@author:derek\r\n@owner:ian\r\nFeature: Reset Password\r\n\r\n    Background: A user in on the password reset page\r\n        Given a user who has been redirected to the password reset page\r\n\r\n    @motivating\r\n    Scenario: Users can reset their password\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they enter their password twice\r\n        And they click \"Update\"\r\n        Then their password is updated\r\n        And a banner with a success message is displayed\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot reset their password with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        And the component <mayHave> \"failed-page\" with <value>\r\n        Then they see an error message saying that their password reset code is invalid/expired\r\n        When they click \"Continue\"\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | oobCode               | mayHave      | value  | redirectPath |\r\n            | invalid oob code      | doesn't have | N/A    | /            |\r\n            | non existant oob code | doesn't have | N/A    | /            |\r\n            | invalid oob code      | has          | /login | /login       |\r\n            | non existant oob code | has          | /login | /login       |\r\n\r\n    @motivating\r\n    Scenario: Users must enter the same password twice to successfully reset their password\r\n        Given a user has been redirected to the password reset page\r\n        And they have a valid oob code as a url query parameter\r\n        When they enter two different passwords into the password reset form\r\n        And they click \"Update\"\r\n        Then their password is not be reset\r\n        And an error banner stating the input passwords must match appears\r\n        And their password is not be reset\r\n        When they enter the same password twice\r\n        And they click \"Update\"\r\n        Then a banner appears with a success message\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/activity\"";
 
 const PortalResetPassword_stories = {
   title: "Components/Portal Reset Password",
   parameters: {
-    scenario: scenario$8,
+    scenario: scenario$2,
   },
 };
-const defaultProps$3 = {
+const defaultProps$6 = {
   states: {
     error: "",
     loading: false,
@@ -3911,7 +3906,7 @@ const errorProps$4 = {
     failed: () => console.log("failed"),
   },
 };
-const loadingProps$2 = {
+const loadingProps$4 = {
   states: {
     error: "",
     loading: true,
@@ -3980,17 +3975,17 @@ const validatingCodeProps = {
     failed: () => console.log("failed"),
   },
 };
-const Default$5 = () => index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, defaultProps$3));
+const Default$6 = () => index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, defaultProps$6));
 const DefaultWithoutConfirmField = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, defaultPropsNoConfirm)));
 const ResetPasswordWithError = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, errorProps$4)));
-const ResetPasswordLoading = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, loadingProps$2)));
+const ResetPasswordLoading = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, loadingProps$4)));
 const ResetPasswordSuccess = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, successProps$2)));
 const CodeValidating = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, validatingCodeProps)));
 
 const PortalResetPassword = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalResetPassword_stories,
-  Default: Default$5,
+  Default: Default$6,
   DefaultWithoutConfirmField: DefaultWithoutConfirmField,
   ResetPasswordWithError: ResetPasswordWithError,
   ResetPasswordLoading: ResetPasswordLoading,
@@ -3998,15 +3993,15 @@ const PortalResetPassword = /*#__PURE__*/Object.freeze({
   CodeValidating: CodeValidating
 });
 
-const scenario$7 = "@author:derek\r\n@owner:ian\r\nFeature: Verify Email\r\n\r\n    Background: A user is on the email verification page\r\n        Given a user who has been redirected to the email verification page\r\n\r\n    @motivating\r\n    Scenario: Verifying your email takes you to the portal login page\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" appears\r\n        When they click \"Continue\"\r\n        Then they are redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are automatically redirected if they dont click \"Continue\"\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" appears\r\n        When they wait 5 seconds\r\n        Then they are redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are notified if verifying their email has failed\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email fails to be validated\r\n        Then an banner is shown stating that an error occured\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot verify their email with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        And the component <mayHave> \"failed-page\" with <value>\r\n        Then they see an error message saying that their verification code is invalid/expired\r\n        When they click \"Continue\"\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | oobCode               | mayHave      | value  | redirectPath |\r\n            | invalid oob code      | doesn't have | N/A    | /            |\r\n            | non existant oob code | doesn't have | N/A    | /            |\r\n            | invalid oob code      | has          | /login | /login       |\r\n            | non existant oob code | has          | /login | /login       |\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to \"/activity\"\r\n\r\n    @motivating\r\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter if it exists\r\n        Given the component <mayHave> prop \"nextPage\" with <nextPageValue>\r\n        And the users url contains a \"nextPage\" query paramater with <nextPageParamValue>\r\n        And the user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to <nextPageParamValue>\r\n        Examples:\r\n            | mayHave       | nextPageValue | nextPageParamValue |\r\n            | has           | /dashboard    | /activity          |\r\n            | does not have | N/A           | /activity          |";
+const scenario$3 = "@author:derek\r\n@owner:ian\r\nFeature: Verify Email\r\n\r\n    Background: A user is on the email verification page\r\n        Given a user who has been redirected to the email verification page\r\n\r\n    @motivating\r\n    Scenario: Verifying your email takes you to the portal login page\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" appears\r\n        When they click \"Continue\"\r\n        Then they are redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are automatically redirected if they dont click \"Continue\"\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" appears\r\n        When they wait 5 seconds\r\n        Then they are redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are notified if verifying their email has failed\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button enters a loading state\r\n        When their email fails to be validated\r\n        Then an banner is shown stating that an error occured\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot verify their email with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        And the component <mayHave> \"failed-page\" with <value>\r\n        Then they see an error message saying that their verification code is invalid/expired\r\n        When they click \"Continue\"\r\n        Then they are redirected to <redirectPath>\r\n        Examples:\r\n            | oobCode               | mayHave      | value  | redirectPath |\r\n            | invalid oob code      | doesn't have | N/A    | /            |\r\n            | non existant oob code | doesn't have | N/A    | /            |\r\n            | invalid oob code      | has          | /login | /login       |\r\n            | non existant oob code | has          | /login | /login       |\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to \"/activity\"\r\n\r\n    @motivating\r\n    Scenario Outline: Users are redirected to the value of the nextPage url parameter if it exists\r\n        Given the component <mayHave> prop \"nextPage\" with <nextPageValue>\r\n        And the users url contains a \"nextPage\" query paramater with <nextPageParamValue>\r\n        And the user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to <nextPageParamValue>\r\n        Examples:\r\n            | mayHave       | nextPageValue | nextPageParamValue |\r\n            | has           | /dashboard    | /activity          |\r\n            | does not have | N/A           | /activity          |";
 
 const PortalVerifyEmail_stories = {
   title: "Components/Portal Verify Email",
   parameters: {
-    scenario: scenario$7,
+    scenario: scenario$3,
   },
 };
-const errorProps$3 = {
+const errorProps$5 = {
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
@@ -4034,20 +4029,20 @@ const verifiedProps = {
     failed: () => console.log("failed"),
   },
 };
-const EmailVerificationWithError = () => (index.h(sqmPortalVerifyEmailView.PortalVerifyEmailView, Object.assign({}, errorProps$3)));
-const EmailVerificationSuccess = () => (index.h(sqmPortalVerifyEmailView.PortalVerifyEmailView, Object.assign({}, verifiedProps)));
+const EmailVerificationWithError$1 = () => (index.h(sqmPortalVerifyEmailView.PortalVerifyEmailView, Object.assign({}, errorProps$5)));
+const EmailVerificationSuccess$1 = () => (index.h(sqmPortalVerifyEmailView.PortalVerifyEmailView, Object.assign({}, verifiedProps)));
 
 const PortalVerifyEmail = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalVerifyEmail_stories,
-  EmailVerificationWithError: EmailVerificationWithError,
-  EmailVerificationSuccess: EmailVerificationSuccess
+  EmailVerificationWithError: EmailVerificationWithError$1,
+  EmailVerificationSuccess: EmailVerificationSuccess$1
 });
 
 const AssetCard_stories = {
   title: "Components/Asset Card",
 };
-const Default$4 = () => {
+const Default$7 = () => {
   const props = {
     text: { titleText: "Marketing Banner" },
     imgUrl: "../../assets/saasquatch-logo.png",
@@ -4075,7 +4070,7 @@ const CardWithNoImg = () => {
 const AssetCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': AssetCard_stories,
-  Default: Default$4,
+  Default: Default$7,
   CardWithLongText: CardWithLongText,
   CardWithNoImg: CardWithNoImg
 });
@@ -4083,7 +4078,7 @@ const AssetCard = /*#__PURE__*/Object.freeze({
 const DividedLayout_stories = {
   title: "Components/Divided Layout",
 };
-const barProps = {
+const barProps$1 = {
   data: {
     programs: [
       {
@@ -4097,7 +4092,7 @@ const barProps = {
     ],
   },
 };
-const item1Props = {
+const item1Props$1 = {
   states: {
     active: false,
   },
@@ -4107,7 +4102,7 @@ const item1Props = {
     path: "/",
   },
 };
-const item2Props = {
+const item2Props$1 = {
   states: {
     active: true,
   },
@@ -4117,14 +4112,14 @@ const item2Props = {
     path: "/",
   },
 };
-const Sidebar = () => {
-  return (index.h(sqmNavigationSidebarView.NavigationSidebarView, Object.assign({}, barProps),
-    index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item1Props)),
-    index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item2Props))));
+const Sidebar$1 = () => {
+  return (index.h(sqmNavigationSidebarView.NavigationSidebarView, Object.assign({}, barProps$1),
+    index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item1Props$1)),
+    index.h(sqmNavigationSidebarItemView.NavigationSidebarItemView, Object.assign({}, item2Props$1))));
 };
 const Row = () => {
   return (index.h("sqm-divided-layout", { direction: "row" },
-    index.h(Sidebar, null),
+    index.h(Sidebar$1, null),
     index.h("div", { style: { padding: "48px" } },
       index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
         labelMargin: "xx-small",
@@ -4137,7 +4132,7 @@ const Row = () => {
 };
 const Column = () => {
   return (index.h("sqm-divided-layout", { direction: "column" },
-    index.h(Sidebar, null),
+    index.h(Sidebar$1, null),
     index.h("div", { style: { padding: "48px" } },
       index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
         labelMargin: "xx-small",
@@ -4150,7 +4145,7 @@ const Column = () => {
 };
 const ColumnCustomDivider = () => {
   return (index.h("sqm-divided-layout", { direction: "column", dividerStyle: "1px solid red" },
-    index.h(Sidebar, null),
+    index.h(Sidebar$1, null),
     index.h("div", { style: { padding: "48px" } },
       index.h(sqmPortalSectionView.PortalSectionView, Object.assign({}, {
         labelMargin: "xx-small",
@@ -4170,15 +4165,15 @@ const DividedLayout = /*#__PURE__*/Object.freeze({
   ColumnCustomDivider: ColumnCustomDivider
 });
 
-const scenario$6 = "Feature: Change Password\r\n\r\n    @motivating\r\n    Scenario: Users can change their password\r\n        Given a user has registered for the portal\r\n        And they have a password\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they enter their new password\r\n        And confirm it\r\n        And click \"Change Password\"\r\n        Then they will see a success banner stating that the change was successful\r\n        When they logout\r\n        And try to login\r\n        Then they will not be able to login with their old password\r\n        But they will be able to login with their new password\r\n\r\n    @motivating\r\n    Scenario: Users must confirm their password change\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they enter their new password\r\n        But they enter a different password to confirm\r\n        And click \"Change Password\"\r\n        Then they will see an error banner stating that the passwords didnt match\r\n        When they logout\r\n        And try to login\r\n        Then they will be able to login with their existing password\r\n\r\n    @motivating\r\n    Scenario: Users must enter a new password and confirm it to change their password\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they click \"Change password\"\r\n        Then a validation error will appear for the new password field\r\n        And their password will not be changed\r\n        When they enter a new password\r\n        And they click \"Change password\"\r\n        Then a validation error will appear for the confirm new password field\r\n        And their password will not be changed\r\n\r\n    @motivating\r\n    Scenario: An error banner will be displayed if the password change fails\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        When they enter their new password\r\n        And confirm it\r\n        And click \"Change Password\"\r\n        But the change fails\r\n        Then they will see an error banner stating that the change failed\r\n        When they logout\r\n        And try to login\r\n        Then they will be able to login with their existing password";
+const scenario$4 = "Feature: Change Password\r\n\r\n    @motivating\r\n    Scenario: Users can change their password\r\n        Given a user has registered for the portal\r\n        And they have a password\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they enter their new password\r\n        And confirm it\r\n        And click \"Change Password\"\r\n        Then they will see a success banner stating that the change was successful\r\n        When they logout\r\n        And try to login\r\n        Then they will not be able to login with their old password\r\n        But they will be able to login with their new password\r\n\r\n    @motivating\r\n    Scenario: Users must confirm their password change\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they enter their new password\r\n        But they enter a different password to confirm\r\n        And click \"Change Password\"\r\n        Then they will see an error banner stating that the passwords didnt match\r\n        When they logout\r\n        And try to login\r\n        Then they will be able to login with their existing password\r\n\r\n    @motivating\r\n    Scenario: Users must enter a new password and confirm it to change their password\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they click \"Change password\"\r\n        Then a validation error will appear for the new password field\r\n        And their password will not be changed\r\n        When they enter a new password\r\n        And they click \"Change password\"\r\n        Then a validation error will appear for the confirm new password field\r\n        And their password will not be changed\r\n\r\n    @motivating\r\n    Scenario: An error banner will be displayed if the password change fails\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        When they enter their new password\r\n        And confirm it\r\n        And click \"Change Password\"\r\n        But the change fails\r\n        Then they will see an error banner stating that the change failed\r\n        When they logout\r\n        And try to login\r\n        Then they will be able to login with their existing password";
 
 const ChangePassword_stories = {
   title: "Components/Change Password",
   parameters: {
-    scenario: scenario$6,
+    scenario: scenario$4,
   },
 };
-const defaultProps$2 = {
+const defaultProps$7 = {
   states: {
     open: false,
     loading: false,
@@ -4222,7 +4217,7 @@ const openProps = {
     submit: (e) => console.log("Submit", e),
   },
 };
-const errorProps$2 = {
+const errorProps$6 = {
   states: {
     open: true,
     loading: false,
@@ -4266,7 +4261,7 @@ const passwordErrorProps = {
     submit: (e) => console.log("Submit", e),
   },
 };
-const loadingProps$1 = {
+const loadingProps$5 = {
   states: {
     open: true,
     loading: true,
@@ -4288,7 +4283,7 @@ const loadingProps$1 = {
     submit: (e) => console.log("Submit", e),
   },
 };
-const successProps$1 = {
+const successProps$3 = {
   states: {
     open: true,
     loading: false,
@@ -4310,28 +4305,28 @@ const successProps$1 = {
     submit: (e) => console.log("Submit", e),
   },
 };
-const Default$3 = () => index.h(AutoColor.PortalChangePasswordView, Object.assign({}, defaultProps$2));
+const Default$8 = () => index.h(AutoColor.PortalChangePasswordView, Object.assign({}, defaultProps$7));
 const Open = () => index.h(AutoColor.PortalChangePasswordView, Object.assign({}, openProps));
-const Error$3 = () => index.h(AutoColor.PortalChangePasswordView, Object.assign({}, errorProps$2));
+const Error$1 = () => index.h(AutoColor.PortalChangePasswordView, Object.assign({}, errorProps$6));
 const PaswordError = () => (index.h(AutoColor.PortalChangePasswordView, Object.assign({}, passwordErrorProps)));
-const Loading$2 = () => index.h(AutoColor.PortalChangePasswordView, Object.assign({}, loadingProps$1));
-const Success$1 = () => index.h(AutoColor.PortalChangePasswordView, Object.assign({}, successProps$1));
+const Loading$1 = () => index.h(AutoColor.PortalChangePasswordView, Object.assign({}, loadingProps$5));
+const Success = () => index.h(AutoColor.PortalChangePasswordView, Object.assign({}, successProps$3));
 
 const ChangePassword = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': ChangePassword_stories,
-  Default: Default$3,
+  Default: Default$8,
   Open: Open,
-  Error: Error$3,
+  Error: Error$1,
   PaswordError: PaswordError,
-  Loading: Loading$2,
-  Success: Success$1
+  Loading: Loading$1,
+  Success: Success
 });
 
 const PortalProfile_stories = {
   title: "Components/Portal Profile",
 };
-const defaultProps$1 = {
+const defaultProps$8 = {
   states: {
     success: false,
     loading: false,
@@ -4403,7 +4398,7 @@ const noCountry = {
     onChange: (e) => console.log(e),
   },
 };
-const loadingProps = {
+const loadingProps$6 = {
   states: {
     success: false,
     loading: true,
@@ -4475,7 +4470,7 @@ const disabledProps = {
     onChange: (e) => console.log(e),
   },
 };
-const errorProps$1 = {
+const errorProps$7 = {
   states: {
     success: false,
     loading: false,
@@ -4511,7 +4506,7 @@ const errorProps$1 = {
     onChange: (e) => console.log(e),
   },
 };
-const successProps = {
+const successProps$4 = {
   states: {
     success: true,
     loading: false,
@@ -4547,28 +4542,28 @@ const successProps = {
     onChange: (e) => console.log(e),
   },
 };
-const Default$2 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, defaultProps$1));
+const Default$9 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, defaultProps$8));
 const DefaultNoCountry = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, noCountry));
-const Loading$1 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, loadingProps));
-const Disabled = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, disabledProps));
-const Error$2 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, errorProps$1));
-const Success = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, successProps));
+const Loading$2 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, loadingProps$6));
+const Disabled$1 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, disabledProps));
+const Error$2 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, errorProps$7));
+const Success$1 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, successProps$4));
 
 const PortalProfile = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalProfile_stories,
-  Default: Default$2,
+  Default: Default$9,
   DefaultNoCountry: DefaultNoCountry,
-  Loading: Loading$1,
-  Disabled: Disabled,
+  Loading: Loading$2,
+  Disabled: Disabled$1,
   Error: Error$2,
-  Success: Success
+  Success: Success$1
 });
 
 const ReferralTableRewardsCell_stories = {
   title: "Components/Referral Table Rewards Cell",
 };
-const baseReward$2 = {
+const baseReward = {
   id: "123",
   type: "CREDIT",
   value: 19,
@@ -4602,7 +4597,7 @@ const baseReward$2 = {
     ],
   },
 };
-const nullExpiresIn$1 = {
+const nullExpiresIn = {
   dateExpires: null,
 };
 const nullScheduledFor = {
@@ -4625,62 +4620,62 @@ const integrationReward = {
   type: "INTEGRATION",
 };
 // Reward Status Cases
-const pendingReward$1 = {
+const pendingReward = {
   statuses: ["AVAILABLE", "PENDING"],
 };
-const cancelledReward$1 = {
+const cancelledReward = {
   statuses: ["PENDING", "CANCELLED"],
   dateCancelled: 1626850800000,
 };
-const expiredReward$1 = {
+const expiredReward = {
   statuses: ["EXPIRED", "AVAILABLE"],
   dateExpires: 1626850800000,
 };
 const redeemedReward = {
   statuses: ["AVAILABLE", "EXPIRED", "REDEEMED"],
 };
-const availableReward$1 = {
+const availableReward = {
   statuses: ["AVAILABLE"],
 };
 const zeroRewards = [];
-const oneReward = [{ ...baseReward$2, ...availableReward$1 }];
+const oneReward = [{ ...baseReward, ...availableReward }];
 const twoRewards = [
-  { ...baseReward$2, ...discountReward, ...pendingReward$1 },
-  { ...baseReward$2, ...creditReward },
+  { ...baseReward, ...discountReward, ...pendingReward },
+  { ...baseReward, ...creditReward },
 ];
 const threeRewards = [
-  { ...baseReward$2, ...fuelTankReward, ...nullExpiresIn$1 },
-  { ...baseReward$2, ...fuelTankReward, ...expiredReward$1 },
-  { ...baseReward$2, ...pendingReward$1, ...nullFuelTank },
+  { ...baseReward, ...fuelTankReward, ...nullExpiresIn },
+  { ...baseReward, ...fuelTankReward, ...expiredReward },
+  { ...baseReward, ...pendingReward, ...nullFuelTank },
 ];
 const fiveRewards = [
-  { ...baseReward$2, ...fuelTankReward },
-  { ...baseReward$2, ...integrationReward },
-  { ...baseReward$2, ...pendingReward$1 },
-  { ...baseReward$2, ...cancelledReward$1, ...nullExpiresIn$1, ...nullFuelTank },
-  { ...baseReward$2, ...expiredReward$1, ...nullFuelTank },
+  { ...baseReward, ...fuelTankReward },
+  { ...baseReward, ...integrationReward },
+  { ...baseReward, ...pendingReward },
+  { ...baseReward, ...cancelledReward, ...nullExpiresIn, ...nullFuelTank },
+  { ...baseReward, ...expiredReward, ...nullFuelTank },
 ];
 const eightRewards = [
-  { ...baseReward$2, ...redeemedReward, ...nullFuelTank },
-  { ...baseReward$2, ...availableReward$1, ...nullExpiresIn$1 },
-  { ...baseReward$2, ...pendingReward$1 },
-  { ...baseReward$2, ...cancelledReward$1 },
-  { ...baseReward$2, ...expiredReward$1 },
-  { ...baseReward$2, ...pendingReward$1, ...nullExpiresIn$1, ...nullScheduledFor },
-  { ...baseReward$2, ...cancelledReward$1 },
-  { ...baseReward$2, ...expiredReward$1 },
+  { ...baseReward, ...redeemedReward, ...nullFuelTank },
+  { ...baseReward, ...availableReward, ...nullExpiresIn },
+  { ...baseReward, ...pendingReward },
+  { ...baseReward, ...cancelledReward },
+  { ...baseReward, ...expiredReward },
+  { ...baseReward, ...pendingReward, ...nullExpiresIn, ...nullScheduledFor },
+  { ...baseReward, ...cancelledReward },
+  { ...baseReward, ...expiredReward },
 ];
 const tenRewards = [
-  { ...baseReward$2, ...integrationReward },
-  { ...baseReward$2, ...redeemedReward },
-  { ...baseReward$2, ...availableReward$1 },
-  { ...baseReward$2, ...cancelledReward$1, ...nullExpiresIn$1 },
-  { ...baseReward$2, ...expiredReward$1 },
-  { ...baseReward$2, ...pendingReward$1 },
-  { ...baseReward$2, ...discountReward },
-  { ...baseReward$2, ...fuelTankReward },
-  { ...baseReward$2, ...cancelledReward$1, ...nullExpiresIn$1 },
-  { ...baseReward$2, ...creditReward },
+  { ...baseReward, ...integrationReward },
+  { ...baseReward, ...redeemedReward },
+  { ...baseReward, ...availableReward },
+  { ...baseReward, ...cancelledReward, ...nullExpiresIn },
+  { ...baseReward, ...expiredReward },
+  { ...baseReward, ...pendingReward },
+  { ...baseReward, ...discountReward },
+  { ...baseReward, ...fuelTankReward },
+  { ...baseReward, ...cancelledReward, ...nullExpiresIn },
+  { ...baseReward, ...creditReward },
 ];
 function getSeconds() {
   return luxon.luxon.DateTime.now().toMillis() + 10000;
@@ -4701,62 +4696,62 @@ function getYears() {
   return luxon.luxon.DateTime.now().toMillis() + 200000000000;
 }
 const PendingNoUnpend = () => {
-  return (index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward$2, ...pendingReward$1, ...nullScheduledFor }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...pendingReward, ...nullScheduledFor }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
 };
 const PendingNoUnpendNoDetails = () => {
-  return (index.h("sqm-referral-table-rewards-cell", { hideDetails: true, rewards: [{ ...baseReward$2, ...pendingReward$1, ...nullScheduledFor }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+  return (index.h("sqm-referral-table-rewards-cell", { hideDetails: true, rewards: [{ ...baseReward, ...pendingReward, ...nullScheduledFor }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
 };
 const PendingWithUnpend = () => {
   return [
     index.h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward$2, ...pendingReward$1, dateScheduledFor: getSeconds() },
+        { ...baseReward, ...pendingReward, dateScheduledFor: getSeconds() },
       ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
     index.h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward$2, ...pendingReward$1, dateScheduledFor: getMinutes() },
+        { ...baseReward, ...pendingReward, dateScheduledFor: getMinutes() },
       ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
     index.h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward$2, ...pendingReward$1, dateScheduledFor: getHours() },
+        { ...baseReward, ...pendingReward, dateScheduledFor: getHours() },
       ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
     index.h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward$2, ...pendingReward$1, dateScheduledFor: getDays() },
+        { ...baseReward, ...pendingReward, dateScheduledFor: getDays() },
       ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
     index.h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward$2, ...pendingReward$1, dateScheduledFor: getMonths() },
+        { ...baseReward, ...pendingReward, dateScheduledFor: getMonths() },
       ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
     index.h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward$2, ...pendingReward$1, dateScheduledFor: getYears() },
+        { ...baseReward, ...pendingReward, dateScheduledFor: getYears() },
       ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
   ];
 };
 const AvailableNoExpiry = () => {
-  return (index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward$2, ...availableReward$1, ...nullExpiresIn$1 }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, ...nullExpiresIn }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
 };
 const AvailableWithExpiry = () => {
   return [
     index.h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward$2, ...availableReward$1, dateExpires: getSeconds() },
+        { ...baseReward, ...availableReward, dateExpires: getSeconds() },
       ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
     index.h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward$2, ...availableReward$1, dateExpires: getMinutes() },
+        { ...baseReward, ...availableReward, dateExpires: getMinutes() },
       ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-    index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward$2, ...availableReward$1, dateExpires: getHours() }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-    index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward$2, ...availableReward$1, dateExpires: getDays() }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, dateExpires: getHours() }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, dateExpires: getDays() }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
     index.h("sqm-referral-table-rewards-cell", { rewards: [
-        { ...baseReward$2, ...availableReward$1, dateExpires: getMonths() },
+        { ...baseReward, ...availableReward, dateExpires: getMonths() },
       ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-    index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward$2, ...availableReward$1, dateExpires: getYears() }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+    index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...availableReward, dateExpires: getYears() }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
   ];
 };
 const Redeemed = () => {
-  return (index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward$2, ...redeemedReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...redeemedReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
 };
 const Cancelled = () => {
-  return (index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward$2, ...cancelledReward$1 }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...cancelledReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
 };
 const Expired = () => {
-  return (index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward$2, ...expiredReward$1 }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
+  return (index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...expiredReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
 };
-const EmptyCell$3 = () => {
+const EmptyCell = () => {
   return (index.h("sqm-referral-table-rewards-cell", { rewards: zeroRewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
 };
 const oneRewardCell = () => {
@@ -4789,7 +4784,7 @@ const ReferralTableRewardsCell = /*#__PURE__*/Object.freeze({
   Redeemed: Redeemed,
   Cancelled: Cancelled,
   Expired: Expired,
-  EmptyCell: EmptyCell$3,
+  EmptyCell: EmptyCell,
   oneRewardCell: oneRewardCell,
   twoRewardsCell: twoRewardsCell,
   threeRewardsCell: threeRewardsCell,
@@ -4864,21 +4859,21 @@ const baseReward$1 = {
   },
 };
 // Reward Status Cases
-const pendingReward = {
+const pendingReward$1 = {
   statuses: ["AVAILABLE", "PENDING"],
 };
-const cancelledReward = {
+const cancelledReward$1 = {
   statuses: ["PENDING", "CANCELLED"],
   dateCancelled: 1626850800000,
 };
-const expiredReward = {
+const expiredReward$1 = {
   statuses: ["EXPIRED", "AVAILABLE"],
   dateExpires: 1626850800000,
 };
-const availableReward = {
+const availableReward$1 = {
   statuses: ["AVAILABLE"],
 };
-const nullExpiresIn = {
+const nullExpiresIn$1 = {
   dateExpires: null,
 };
 const simpleUserTableProps = {
@@ -5279,9 +5274,9 @@ const FullRewardsTable = () => {
           [
             index.h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
             index.h("sqm-referral-table-rewards-cell", { rewards: [
-                { ...baseReward$1, ...availableReward },
-                { ...baseReward$1, ...pendingReward },
-                { ...baseReward$1, ...cancelledReward },
+                { ...baseReward$1, ...availableReward$1 },
+                { ...baseReward$1, ...pendingReward$1 },
+                { ...baseReward$1, ...cancelledReward$1 },
               ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
             index.h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
             index.h("sqm-referral-table-date-cell", { date: 1626764400000 }),
@@ -5289,7 +5284,7 @@ const FullRewardsTable = () => {
           ],
           [
             index.h("sqm-referral-table-user-cell", { name: "Sarah Williams" }),
-            index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward$1, ...expiredReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+            index.h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward$1, ...expiredReward$1 }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
             index.h("sqm-referral-table-status-cell", { statusText: "Incomplete", converted: false }),
             index.h("sqm-referral-table-date-cell", { date: 1626764400000 }),
             index.h("sqm-referral-table-date-cell", { date: null }),
@@ -5297,8 +5292,8 @@ const FullRewardsTable = () => {
           [
             index.h("sqm-referral-table-user-cell", { name: "Marvin Smith" }),
             index.h("sqm-referral-table-rewards-cell", { rewards: [
-                { ...baseReward$1, ...nullExpiresIn },
-                { ...baseReward$1, ...pendingReward },
+                { ...baseReward$1, ...nullExpiresIn$1 },
+                { ...baseReward$1, ...pendingReward$1 },
               ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
             index.h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
             index.h("sqm-referral-table-date-cell", { date: 1626764400000 }),
@@ -5309,7 +5304,7 @@ const FullRewardsTable = () => {
     } }));
 };
 
-const ReferralTable$1 = /*#__PURE__*/Object.freeze({
+const ReferralTable = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': ReferralTable_stories,
   SimpleUserTable: SimpleUserTable,
@@ -5332,13 +5327,13 @@ const TableCell = () => {
 const TableUserCell = () => {
   return (index.h("sqm-referral-table-user-cell", { name: "Table User Cell Text" }));
 };
-const EmptyCell$2 = () => (index.h("sqm-sqm-referral-table-cell", null, "-"));
+const EmptyCell$1 = () => (index.h("sqm-sqm-referral-table-cell", null, "-"));
 const StatusCell = () => {
   return (index.h("div", null,
     index.h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
     index.h("sqm-referral-table-status-cell", { statusText: "In Progress", converted: false })));
 };
-const DateCell$1 = () => {
+const DateCell = () => {
   return (index.h("sqm-referral-table-date-cell", { date: 800000000000 }));
 };
 /*
@@ -5347,7 +5342,7 @@ const DateCell$1 = () => {
   - Empty and Loading states for tables
   - Build rewards for every type of reward
 */
-const rewardsData$1 = {
+const rewardsData = {
   id: "123",
   type: "CREDIT",
   value: 19,
@@ -5381,7 +5376,7 @@ const rewardsData$1 = {
     ],
   },
 };
-const rewards = [rewardsData$1];
+const rewards = [rewardsData];
 const RewardsCell = () => {
   return (index.h("sqm-referral-table-rewards-cell", { rewards: rewards, statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }));
 };
@@ -5391,9 +5386,9 @@ const ReferralTableCell = /*#__PURE__*/Object.freeze({
   'default': ReferralTableCell_stories,
   TableCell: TableCell,
   TableUserCell: TableUserCell,
-  EmptyCell: EmptyCell$2,
+  EmptyCell: EmptyCell$1,
   StatusCell: StatusCell,
-  DateCell: DateCell$1,
+  DateCell: DateCell,
   RewardsCell: RewardsCell
 });
 
@@ -5532,9 +5527,9 @@ function cartesian(...args) {
   return r;
 }
 
-const scenarioTaskCard = "@author:derek\r\n@owner:\r\nFeature: Task Card\r\n\r\n\tScenario: A header, body title, description and a CTA button are always displayed\r\n\t\tGiven the Task Card is configured with the following props\r\n\t\t\t| prop         | value                                        |\r\n\t\t\t| rewardAmount | \"40\"                                         |\r\n\t\t\t| rewardUnit   | \"Points\"                                     |\r\n\t\t\t| cardTitle    | Complete a survey                            |\r\n\t\t\t| description  | Fill out our survey form and receive points! |\r\n\t\t\t| buttonText   | Take Survey                                  |\r\n\t\t\t| buttonLink   | https://example.com/                         |\r\n\t\tWhen a user views the Task Card\r\n\t\tThen they see \"40 Points\" as the heading\r\n\t\tAnd the \"40\" is bolded\r\n\t\tAnd they see \"Complete a survey\" bolded in the body\r\n\t\tAnd a details icon in the top right hand corner\r\n\t\tAnd a button with text \"Take Survey\" in the bottom right hand corner\r\n\t\tWhen they click the button\r\n\t\tThen they are redirected to \"example.com\" in a new window\r\n\t\tWhen they click the details icon\r\n\t\tThen \"Fill out our survey form and receive points!\" is shown as the card description\r\n\r\n\tScenario: A loading state is displayed while the Task Card is loading\r\n\t\tGiven a Task Card component\r\n\t\tWhen a user views the Task Card\r\n\t\tThen a loading state is displayed\r\n\t\tWhen the Task Card has loaded\r\n\t\tThen the loading state disapears\r\n\r\n\tScenario Outline: The Progress Bar can be shown or hidden but is hidden by default\r\n\t\tGiven a Task Card component\r\n\t\tAnd it <mayHave> \"showProgressBar\" <value>\r\n\t\tWhen a user views the Task Card\r\n\t\tThen the progress bar <mayBe> displayed\r\n\t\tExamples:\r\n\t\t\t| mayHave      | value | mayBe |\r\n\t\t\t| has          | true  | is    |\r\n\t\t\t| has          | false | isn't |\r\n\t\t\t| doesn't have |       | isn't |\r\n\r\n\tScenario Outline: Tasks can be repeatable or one-time only but are one-time only be default\r\n\t\tGiven a Task Card component\r\n\t\tAnd it <mayHave> \"repeatable\" <value>\r\n\t\tAnd a user who has already completed the task\r\n\t\tWhen they views the Task Card\r\n\t\tThen they see a green checkmark icon beside the card heading\r\n\t\tAnd the card <mayBe> green\r\n\t\tAnd the card's border <mayBe> green\r\n\t\tAnd the CTA button <mayBe> disabled\r\n\t\tAnd the CTA button <mayBe> grey\r\n\t\tExamples:\r\n\t\t\t| mayHave      | value | mayBe |\r\n\t\t\t| has          | true  | isn't |\r\n\t\t\t| has          | false | is    |\r\n\t\t\t| doesn't have |       | is    |\r\n\r\n\tScenario: Task Expiries can be configured and disable the CTA after the expiry\r\n\t\tGiven a Task Card component\r\n\t\tAnd it is configured for <expiry>\r\n\t\tWhen a user views the Card on <day>\r\n\t\tThen they the expiry on <cardLocation>\r\n\t\tAnd the text <mayBe> orange\r\n\t\tAnd the card <mayBe> disabled\r\n\t\tAnd the card <mayBe> grey\r\n\t\tAnd the user <mayBe> unable to complete the loyalty task\r\n\t\tExamples:\r\n\t\t\t| expiry               | day                    | cardLocation | mayBe |\r\n\t\t\t| Dec 31 2021 11:59:59 | Dec 1st 2021 12:00:00  | bottom left  | isn't |\r\n\t\t\t| Dec 31 2021 11:59:59 | Dec 31 2021 11:00:00   | top right    | isn't |\r\n\t\t\t| Dec 31 2021 11:59:59 | Jan 15th 2022 10:00:00 | top right    | is    |\r\n\r\n\tScenario Outline: Task expiry can be hidden or shown but is hidden by default\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured with an expiry\r\n\t\tAnd it <mayHave> \"showExpiry\" <value>\r\n\t\tWhen a user views the Task card\r\n\t\tThen the expiry <mayBe> shown in the bottom left hand corner\r\n\t\tExamples:\r\n\t\t\t| mayHave      | value | mayBe |\r\n\t\t\t| has          | true  | is    |\r\n\t\t\t| has          | false | isn't |\r\n\t\t\t| doesn't have |       | isn't |\r\n\r\n\t#DS: Currently this text is non configurable and isnt set up for proper pluralization\r\n\tScenario Outline: A task completion count is displayed for repeatable tasks\r\n\t\tGiven a Task Card is configured for a repeatable task\r\n\t\tAnd has \"goalCompletionNumber\" <goalCompletionNumberValue>\r\n\t\tAnd a user with <userGoalProgress>\r\n\t\tWhen the user views the task card\r\n\t\tThen they see a repeat icon\r\n\t\tAnd the <text> in the bottom left hand corner\r\n\t\tAnd the <text> is green\r\n\t\tExamples:\r\n\t\t\t| goalCompletionNumber | userGoalProgress | text              |\r\n\t\t\t| 1                    | 0                | Completed 0 times |\r\n\t\t\t| 1                    | 1                | Completed 1 times |\r\n\t\t\t| 1                    | 2                | Completed 2 times |\r\n\t\t\t| 10                   | 5                | Completed 0 times |\r\n\t\t\t| 10                   | 12               | Completed 1 times |\r\n\t\t\t| 10                   | 29               | Completed 2 times |\r\n\r\n\tScenario Outline: The source of a user's progress can be a custom field or a program goal\r\n\t\tGiven a Task Card is configured to have <progressSourcePath> progress source\r\n\t\tAnd a user\r\n\t\tWhen they view the Task card\r\n\t\tThen the value at <progressSourcePath> is used to benchmark their progress against the Goal Completion Count\r\n\t\tExamples:\r\n\t\t\t| value                                            |\r\n\t\t\t| /customFields/activityCount                      |\r\n\t\t\t| /customFields/purchaseTotal                      |\r\n\t\t\t| /programGoals/count%2FComment-on-Article         |\r\n\t\t\t| /programGoals/count/Referral-Started%2Freferrals |\r\n\r\n\tScenario Outline: The users completion of a goal is calculated by the Goal Completion Number\r\n\t\tGiven a Task Card is configured to have <goalValue>\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen they are shown to have <progressValue> towards <goalValue>\r\n\t\tWhen their progress grows larger than <goalValue>\r\n\t\tThen the task is marked as completed\r\n\t\tExamples:\r\n\t\t\t| goalValue | progressValue |\r\n\t\t\t| 1         | 0             |\r\n\t\t\t| 10        | 9             |\r\n\t\t\t| 5         | 2             |\r\n\r\n\tScenario: The Goal Completion Number defaults to 1\r\n\t\tGiven a Task Card without a configured \"goalCompletionNumber\"\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen it <mayBe> marked as completed\r\n\t\tExamples:\r\n\t\t\t| progressValue | mayBe |\r\n\t\t\t| 0             | isn't |\r\n\t\t\t| 1             | is    |\r\n\t\t\t| 2             | is    |";
+const scenarioTaskCard = "@author:derek\r\n@owner:kutay\r\nFeature: Task Card\r\n\r\n\t@motivating\r\n\tScenario: A header, body title and a CTA button are always displayed\r\n\t\tGiven the Task Card is configured with the following props\r\n\t\t\t| prop         | value             |\r\n\t\t\t| rewardAmount | \"40\"              |\r\n\t\t\t| rewardUnit   | \"Points\"          |\r\n\t\t\t| cardTitle    | Complete a survey |\r\n\t\t\t| buttonText   | Take Survey       |\r\n\t\tWhen a user views the Task Card\r\n\t\tThen they see \"40 Points\" as the heading\r\n\t\tAnd the \"40\" is bolded\r\n\t\tAnd they see \"Complete a survey\" bolded in the body\r\n\t\tAnd a details icon in the top right hand corner\r\n\t\tAnd a button with text \"Take Survey\" in the bottom right hand corner\r\n\t\tWhen they click the button\r\n\t\tThen they are redirected to \"example.com\" in a new window\r\n\r\n\t@motivating\r\n\tScenario Outline: A Task Card description can be included but is not required\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <descriptionPropValue>\r\n\t\tWhen a user views the Task card\r\n\t\tThen they <maySee> a chevron icon in the top right\r\n\t\tWhen they attempt to click the chevron\r\n\t\tThen they <maySee> the card description\r\n\t\tExamples:\r\n\t\t\t| descriptionPropValue             | maySee    |\r\n\t\t\t| This is my task card description | see       |\r\n\t\t\t|                                  | don't see |\r\n\r\n\t@motivating\r\n\tScenario Outline: CTA links can open in a new tab or the same tab\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <openNewTabPropValue>\r\n\t\tWhen a user views the Task card\r\n\t\tAnd they click on the CTA\r\n\t\tThen they are redirected to the CTA link in <tab>\r\n\t\tExamples:\r\n\t\t\t| openNewTabPropValue | tab          |\r\n\t\t\t| true                | a new tab    |\r\n\t\t\t| false               | the same tab |\r\n\t\t\t| N/A                 | the same tab |\r\n\r\n\t@minutae\r\n\tScenario: A loading state is displayed while the Task Card is loading\r\n\t\tGiven a Task Card component\r\n\t\tWhen a user views the Task Card\r\n\t\tThen a loading state is displayed\r\n\t\tWhen the Task Card has loaded\r\n\t\tThen the loading state disapears\r\n\r\n\t@motivating\r\n\tScenario Outline: The Progress Bar can be shown or hidden but is hidden by default\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <showProgressBarPropValue>\r\n\t\tWhen a user views the Task Card\r\n\t\tThen the progress bar <mayBe> displayed\r\n\t\tExamples:\r\n\t\t\t| showProgressBarPropValue | mayBe |\r\n\t\t\t| true                     | is    |\r\n\t\t\t| false                    | isn't |\r\n\t\t\t| N/A                      | isn't |\r\n\r\n\t@motivating\r\n\tScenario: Clicking the CTA Button can trigger an event to be sent and refresh the widget\r\n\t\tGiven a Task card\r\n\t\tAnd it is configured to send an \"test\" event\r\n\t\tWhen a user views the Task card\r\n\t\tAnd clicks on the CTA\r\n\t\tThen a \"test\" event is sent to SSQT on the users behalf\r\n\t\tAnd the contents of the widget the card is dislayed within are refreshed\r\n\r\n\t@motivating\r\n\tScenario Outline: Tasks can be repeatable or one-time only but are one-time only by default\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <repeatablePropValue>\r\n\t\tAnd a user who has already completed the task\r\n\t\tWhen they view the Task Card\r\n\t\tThen they see a brand colour checkmark icon beside the card heading\r\n\t\tAnd the card <mayBe> brand colour\r\n\t\tAnd the CTA button <mayBe> disabled\r\n\t\tAnd the CTA button <mayBe> grey\r\n\t\tExamples:\r\n\t\t\t| repeatablePropValue | mayBe |\r\n\t\t\t| true                | isn't |\r\n\t\t\t| false               | is    |\r\n\t\t\t| N/A                 | is    |\r\n\r\n\t@motivating\r\n\tScenario Outline: Display duration hides or shows a task\r\n\t\tGiven a Task Card\r\n\t\tAnd it has a \"display-duration\" interval\r\n\t\tWhen a user views the Card on <day>\r\n\t\tThen card <mayBeHidden>\r\n\t\tExamples:\r\n\t\t\t| day                       | mayBeHidden   |\r\n\t\t\t| a day before the interval | is hidden     |\r\n\t\t\t| a day during the interval | is not hidden |\r\n\t\t\t| a day after the interval  | is hidden     |\r\n\r\n\t@motivating\r\n\tScenario: Task Expiries can be configured and disable the CTA after the expiry\r\n\t\tGiven a Task Card\r\n\t\tAnd it has an \"reward-duration\" interval\r\n\t\tAnd it is configured to show expiry\r\n\t\tWhen a user views the card on <day>\r\n\t\tThen the card <mayBeDisabled>\r\n\t\tAnd it <mayHaveAlert>\r\n\t\tAnd it <mayHaveExpiryText> on the bottom left hand side of the card\r\n\t\tExamples:\r\n\t\t\t| day                              | mayBeDisabled  | mayHaveAlert                                                      | mayHaveExpiryText                                   |\r\n\t\t\t| a day before the expiry interval | is disabled    | has alert stating the month, date, year and time the task starts  | doesn't have expiry text                            |\r\n\t\t\t| a day during the expiry interval | isn't disabled | doesn't have an alert                                             | has the month, date, year and time the task expires |\r\n\t\t\t| a day after the expiry interval  | is disabled    | has alert stating the month, date, year and time the task expired | doesn't have expiry text                            |\r\n\r\n\t@minutae\r\n\tScenario Outline: Task expiry can be hidden or shown but is hidden by default\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured with an expiry duration interval\r\n\t\tAnd it has <showExpiryPropValue>\r\n\t\tWhen a user views the Task card during the interval\r\n\t\tThen the expiry <mayBe> shown in the bottom left hand corner\r\n\t\tAnd it is in form \"Month-Date-Year-Time\"\r\n\t\tExamples:\r\n\t\t\t| showExpiryPropValue | mayBe |\r\n\t\t\t| true                | is    |\r\n\t\t\t| false               | isn't |\r\n\t\t\t| N/A                 | isn't |\r\n\r\n\t@motivating\r\n\tScenario Outline: Task Card dates support localization\r\n\t\tGiven a Task Card\r\n\t\tAnd it's configured with a expiry duration interval\r\n\t\tWhen a user with <locale> views the task card <atTime>\r\n\t\tThen they <seeDate> translated for <locale>\r\n\t\tExamples:\r\n\t\t\t| atTime              | locale | seeDate         |\r\n\t\t\t| before the interval | en     | Task Start Date |\r\n\t\t\t| during the interval | en     | Task End Date   |\r\n\t\t\t| after the interval  | en     | Task Ended Date |\r\n\t\t\t| before the interval | fr     | Task Start Date |\r\n\t\t\t| during the interval | fr     | Task End Date   |\r\n\t\t\t| after the interval  | fr     | Task Ended Date |\r\n\r\n\t@motivating\r\n\tScenario Outline: A task completion count is displayed for repeatable tasks\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured for a repeatable task\r\n\t\tAnd has it has <goalValue>\r\n\t\tAnd a user with <userGoalProgress>\r\n\t\tWhen the user views the task card\r\n\t\tThen they see a repeat icon\r\n\t\tAnd the <text> in the bottom left hand corner\r\n\t\tAnd the <text> is brand colour\r\n\t\tExamples:\r\n\t\t\t| goalValue | userGoalProgress | text              |\r\n\t\t\t| 2         | 0                | Completed 0 times |\r\n\t\t\t| 2         | 1                | Completed 0 times |\r\n\t\t\t| 2         | 2                | Completed 1 times |\r\n\t\t\t| 2         | 4                | Completed 2 times |\r\n\r\n\t@motivating\r\n\tScenario Outline: The source of a user's progress can be a custom field or a program goal\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured <progressSourcePath>\r\n\t\tWhen a user views the Task card\r\n\t\tThen the value at <progressSourcePath> is used to benchmark their progress against the \"Goal Completion Count\"\r\n\t\tExamples:\r\n\t\t\t| progressSourcePath                               |\r\n\t\t\t| /customFields/activityCount                      |\r\n\t\t\t| /customFields/purchaseTotal                      |\r\n\t\t\t| /programGoals/count%2FComment-on-Article         |\r\n\t\t\t| /programGoals/count/Referral-Started%2Freferrals |\r\n\r\n\t@motivating\r\n\tScenario Outline: The users completion of a goal is calculated by the Goal Completion Number\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured for <goalValue>\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen they are shown to have <progressValue> towards <goalValue>\r\n\t\tWhen their progress grows larger than <goalValue>\r\n\t\tThen the task is marked as completed\r\n\t\tExamples:\r\n\t\t\t| goalValue | progressValue |\r\n\t\t\t| 1         | 0             |\r\n\t\t\t| 10        | 9             |\r\n\t\t\t| 5         | 2             |\r\n\r\n\t@motivating\r\n\tScenario: The Goal Completion Number defaults to 1\r\n\t\tGiven a Task Card without a configured \"goal\" value\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen it <mayBe> marked as completed\r\n\t\tExamples:\r\n\t\t\t| progressValue | mayBe |\r\n\t\t\t| 0             | isn't |\r\n\t\t\t| 1             | is    |\r\n\t\t\t| 2             | is    |";
 
-const scenarioProgressBar = "@author:\r\n@owner:\r\nFeature: Task Card Progress Bar\r\n\r\n\tScenario Outline: Progress Bar\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> shows <progress> with <unit> above\r\n\t\tAnd gift icon has <color>\r\n\t\tAnd gift icon shows <goal> with <unit> below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar           | unit | color |\r\n\t\t\t| -100     | 500  | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 0        | 500  | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 250      | 500  | ―――――――――●―――――――――🎁 | $    | no    |\r\n\t\t\t| 500      | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 1000     | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\r\n\tScenario Outline: Progress Bar Steps\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd steps is enabled\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> has incrementing steps from 1 to <goal>\r\n\t\tAnd gift icon has <color>\r\n\t\tAnd gift icon shows <goal> below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar           | color |\r\n\t\t\t| -1       | 5    | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 0        | 5    | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 1        | 5    | ―――●―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 5        | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\t\t\t| 7        | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\r\n\r\n\tScenario Outline: Progress Bar Repeatable\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> shows <progress> with <unit> above\r\n\t\tAnd <icon1> is <color1> with <text1> displayed below\r\n\t\tAnd <icon2> is <color2> with <text2> displayed below\r\n\t\tAnd <icon3> is <color3> with <text3> displayed below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar          | unit | icon1 | color1   | text1 | icon2 | color2    | text 2 | icon3 | color3    | text 1 | text 3 |\r\n\t\t\t| 250      | 500  | ――――●――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | greyscale | 500    | gift  | greyscale | NA     | 1000   |\r\n\t\t\t| 500      | 500  | ―――――――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | NA     | 1000   |\r\n\t\t\t| 750      | 500  | ―――――――――🎁―――●―――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | NA     | 1000   |\r\n\t\t\t| 1000     | 500  | 🎁―――――――🎁―――――――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 500    | 1500   |\r\n\t\t\t| 1250     | 500  | 🎁―――――――🎁―――●―――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 500    | 1500   |\r\n\r\n\tScenario Outline: Progress Bar Steps Repeatable\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd steps is enabled\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar |";
+const scenarioProgressBar = "@author:\r\n@owner:\r\nFeature: Task Card Progress Bar\r\n\r\n\tScenario Outline: Progress Bar\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> shows <progress> with <unit> above\r\n\t\tAnd gift icon has <color>\r\n\t\tAnd gift icon shows <goal> with <unit> below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar           | unit | color |\r\n\t\t\t| 0        | 500  | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 100      | 500  | ―――――――――●―――――――――🎁 | $    | no    |\r\n\t\t\t| 500      | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 650      | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 1200     | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\r\n\tScenario Outline: Progress Bar Steps\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd steps is enabled\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> has incrementing steps up to <goal>\r\n\t\tAnd gift icon has <color>\r\n\t\tAnd gift icon shows <goal> below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar           | color |\r\n\t\t\t| 0        | 5    | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 1        | 5    | ―――●―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 5        | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\t\t\t| 7        | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\t\t\t| 12       | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\r\n\r\n\tScenario Outline: Progress Bar Repeatable\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> shows <progress> with <unit> above\r\n\t\tAnd first <icon1> is <color1> with <text1> displayed below\r\n\t\tAnd second <icon2> is <color2> with <text2> displayed below\r\n\t\tAnd third <icon3> is <color3> with <text3> displayed below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar          | unit | icon1 | color1   | text1 | icon2 | color2    | text 2 | icon3 | color3    | text 3 |\r\n\t\t\t| 250      | 500  | ――――●――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | greyscale | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 500      | 500  | ―――――――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 750      | 500  | ―――――――――🎁―――●―――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 1000     | 500  | 🎁―――――――🎁―――――――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\r\n\t\t\t| 1250     | 500  | 🎁―――――――🎁―――●―――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\r\n\r\n\tScenario Outline: Progress Bar Steps Repeatable\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd steps is enabled\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> has incrementing steps up to <goal>\r\n\t\tAnd first <icon1> is <color1>\r\n\t\tAnd second <icon2> is <color2>\r\n\t\tAnd third <icon3> is <color3>\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar              | icon1 | color1   | icon2 | color2    | icon3 | color3    |\r\n\t\t\t| 0        | 5    | ―――○―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\r\n\t\t\t| 1        | 5    | ―――●―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\r\n\t\t\t| 5        | 5    | ―――●―●―●―●―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\r\n\t\t\t| 7        | 5    | ―――●―●―●―●―🎁―●―●―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\r\n\t\t\t| 12       | 5    | 🎁―●―●―●―●―🎁―●―●―○―○―🎁 | gift  | colorful | gift  | colorful  | gift  | greyscale |";
 
 const ResizerStylesheet = `
 
@@ -5612,7 +5607,7 @@ const oneAction = {
     loadingEvent: false,
   },
 };
-const coupleActions$1 = {
+const coupleActions = {
   callbacks: {
     sendEvent: () => void 0,
     onClick: () => void 0,
@@ -5644,7 +5639,7 @@ const coupleActions$1 = {
     loadingEvent: false,
   },
 };
-const manyActions$1 = {
+const manyActions = {
   callbacks: {
     sendEvent: () => void 0,
     onClick: () => void 0,
@@ -5673,7 +5668,7 @@ const manyActions$1 = {
   },
   states: { progress: 100, loading: false, loadingEvent: false },
 };
-const TaskCard = () => {
+const TaskCard$1 = () => {
   const expire = {
     showExpiry: true,
     rewardDuration: "2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",
@@ -5684,30 +5679,30 @@ const TaskCard = () => {
       index.h("h4", null, "Not Repeatable"),
       index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, description: "" }, states: { ...oneAction.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, description: "" }, states: { ...coupleActions$1.states, progress: 0 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, description: "" }, states: { ...coupleActions.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, description: "" }, states: { ...manyActions$1.states, progress: 230 } }))),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, description: "" }, states: { ...manyActions.states, progress: 230 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Repeatable"),
       index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 2 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true }, states: { ...coupleActions$1.states, progress: 7 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true }, states: { ...manyActions$1.states, progress: 650 } }))),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Complete"),
       index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 5 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 } }))),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } }))),
     index.h(Resizer, null,
       index.h("h4", null, "Unavailable"),
       index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 } }, expireRepeat)),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 3 } }, expireRepeat)),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 3 } }, expireRepeat)),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 250 } }, expireRepeat)))));
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 250 } }, expireRepeat)))));
 };
 const TaskCardNotRepeatable = () => {
   return (index.h("div", { style: storyFrame },
@@ -5719,15 +5714,15 @@ const TaskCardNotRepeatable = () => {
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 5 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 230 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 230 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } })),
       index.h("h5", null))));
 };
 const TaskCardRepeatable = () => {
@@ -5740,23 +5735,23 @@ const TaskCardRepeatable = () => {
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true }, states: { ...coupleActions$1.states, progress: 0 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true }, states: { ...coupleActions$1.states, progress: 5 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 5 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true }, states: { ...coupleActions$1.states, progress: 7 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true }, states: { ...coupleActions$1.states, progress: 10 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 10 } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true }, states: { ...manyActions$1.states, progress: 0 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 0 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true }, states: { ...manyActions$1.states, progress: 500 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 500 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true }, states: { ...manyActions$1.states, progress: 650 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true }, states: { ...manyActions$1.states, progress: 1000 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 1000 } })),
       index.h("h5", null))));
 };
 const TaskCardRepeatableFinite = () => {
@@ -5771,27 +5766,27 @@ const TaskCardRepeatableFinite = () => {
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true, finite: 2 }, states: { ...coupleActions$1.states, progress: 2 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 2 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true, finite: 2 }, states: { ...coupleActions$1.states, progress: 5 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 5 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true, finite: 2 }, states: { ...coupleActions$1.states, progress: 10 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 10 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true, finite: 3 }, states: { ...coupleActions$1.states, progress: 12 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 12 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { content: { ...coupleActions$1.content, repeatable: true, finite: 3 }, states: { ...coupleActions$1.states, progress: 15 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 15 } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true, finite: 2 }, states: { ...manyActions$1.states, progress: 200 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 200 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true, finite: 3 }, states: { ...manyActions$1.states, progress: 500 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 500 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true, finite: 2 }, states: { ...manyActions$1.states, progress: 1000 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 1000 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true, finite: 3 }, states: { ...manyActions$1.states, progress: 1200 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1200 } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { content: { ...manyActions$1.content, repeatable: true, finite: 3 }, states: { ...manyActions$1.states, progress: 1500 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1500 } })),
       index.h("h5", null))));
 };
 const TaskCardEndDate = () => {
@@ -5813,19 +5808,19 @@ const TaskCardEndDate = () => {
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions$1.content, ...expire } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions$1.content, ...expireRepeat } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions$1.content, ...expireRepeat }, states: { ...coupleActions$1.states, progress: 5 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expireRepeat }, states: { ...coupleActions.states, progress: 5 } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions$1.content, ...expire } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions$1.content, ...expireRepeat } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions$1.content, ...expireRepeat }, states: { ...manyActions$1.states, progress: 1000 } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat }, states: { ...manyActions.states, progress: 1000 } })),
       index.h("h5", null))));
 };
 const TaskCardLoading = () => {
@@ -5843,18 +5838,18 @@ const TaskCardLoading = () => {
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, loading)),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, loading)),
       " ",
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, loading)),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, loading)),
       " ",
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, loading)),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, loading)),
       " ",
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, loading)),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, loading)),
       " ",
       index.h("h5", null))));
 };
@@ -5879,23 +5874,23 @@ const TaskCardNotStarted = () => {
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expire } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expire } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expireRepeat } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expireRepeat } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 100 }, content: { ...manyActions$1.content, ...expire } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 }, content: { ...manyActions$1.content, ...expire } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 100 }, content: { ...manyActions$1.content, ...expireRepeat } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 }, content: { ...manyActions$1.content, ...expireRepeat } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
       index.h("h5", null))));
 };
 const TaskCardEnded = () => {
@@ -5919,23 +5914,23 @@ const TaskCardEnded = () => {
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expire } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expire } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expireRepeat } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1, { states: { ...coupleActions$1.states, progress: 1 }, content: { ...coupleActions$1.content, ...expireRepeat } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 100 }, content: { ...manyActions$1.content, ...expire } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 }, content: { ...manyActions$1.content, ...expire } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 100 }, content: { ...manyActions$1.content, ...expireRepeat } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
       index.h("h5", null),
-      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1, { states: { ...manyActions$1.states, progress: 500 }, content: { ...manyActions$1.content, ...expireRepeat } })),
+      index.h(AutoColor.TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
       index.h("h5", null))));
 };
 const ProgressBar = () => {
@@ -5955,7 +5950,7 @@ const ProgressBarSteps = () => {
     progressBarUnit: "$",
   };
   return (index.h("div", null,
-    index.h(MatrixStory, { matrix: { progress: [0, 1, 5, 7] }, props: props, Component: AutoColor.ProgressBarView })));
+    index.h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: AutoColor.ProgressBarView })));
 };
 const ProgressBarRepeatable = () => {
   const props = {
@@ -5965,7 +5960,7 @@ const ProgressBarRepeatable = () => {
     repeatable: true,
   };
   return (index.h("div", null,
-    index.h(MatrixStory, { matrix: { progress: [0, 100, 500, 650, 1200] }, props: props, Component: AutoColor.ProgressBarView })));
+    index.h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: AutoColor.ProgressBarView })));
 };
 const ProgressBarStepsRepeatable = () => {
   const props = {
@@ -5991,10 +5986,10 @@ const ProgressBarStepsRepeatableFinite = () => {
     index.h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 10, 12] }, props: props, Component: AutoColor.ProgressBarView })));
 };
 
-const TaskCard$1 = /*#__PURE__*/Object.freeze({
+const TaskCard$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': TaskCard_stories,
-  TaskCard: TaskCard,
+  TaskCard: TaskCard$1,
   TaskCardNotRepeatable: TaskCardNotRepeatable,
   TaskCardRepeatable: TaskCardRepeatable,
   TaskCardRepeatableFinite: TaskCardRepeatableFinite,
@@ -6058,7 +6053,7 @@ var marked = stencilHooks_module.createCommonjsModule(function (module, exports)
  */
 
 (function (global, factory) {
-  module.exports = factory() ;
+   module.exports = factory() ;
 }(stencilHooks_module.commonjsGlobal, (function () {
   function _defineProperties(target, props) {
     for (var i = 0; i < props.length; i++) {
@@ -9021,7 +9016,7 @@ const ReferralIframeReadme = "# sqm-referral-iframe\r\n\r\n\r\n\r\n<!-- Auto Gen
 
 const ForgotPasswordReadme = "# sqm-portal-forgot-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property       | Attribute       | Description                                                          | Type                                                                                                                                                                                        | Default                    |\r\n| -------------- | --------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |\r\n| `demoData`     | --              |                                                                      | `{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined`                |\r\n| `emailLabel`   | `email-label`   |                                                                      | `string`                                                                                                                                                                                    | `\"Email\"`                  |\r\n| `loginPath`    | `login-path`    |                                                                      | `string`                                                                                                                                                                                    | `\"/login\"`                 |\r\n| `redirectPath` | `redirect-path` | The page that users are redirected to from the password reset email. | `string`                                                                                                                                                                                    | `\"/resetPassword\"`         |\r\n| `submitLabel`  | `submit-label`  |                                                                      | `string`                                                                                                                                                                                    | `\"Request Password Reset\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-forgot-password --> sqm-form-message\r\n  style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                   | Attribute                    | Description                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default              |\r\n| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword`          | `confirm-password`           |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\r\n| `confirmPasswordLabel`     | `confirm-password-label`     |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Confirm Password\"` |\r\n| `demoData`                 | --                           |                                                                    | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }` | `undefined`          |\r\n| `emailLabel`               | `email-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Email\"`            |\r\n| `enablePasswordValidation` | `enable-password-validation` |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `true`               |\r\n| `hideInputs`               | `hide-inputs`                |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\r\n| `loginLabel`               | `login-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Sign in\"`          |\r\n| `loginPath`                | `login-path`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/login\"`           |\r\n| `nextPage`                 | `next-page`                  |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/\"`                |\r\n| `pageLabel`                | `page-label`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\r\n| `passwordLabel`            | `password-label`             |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Password\"`         |\r\n| `redirectPath`             | `redirect-path`              | The page that users are redirected to from the verification email. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/verifyEmail\"`     |\r\n| `submitLabel`              | `submit-label`               |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-register --> sqm-form-message\r\n  sqm-portal-register --> sqm-password-field\r\n  sqm-stencilbook --> sqm-portal-register\r\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                   | Attribute                    | Description                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default              |\n| -------------------------- | ---------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\n| `confirmPassword`          | `confirm-password`           |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\n| `confirmPasswordLabel`     | `confirm-password-label`     |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Confirm Password\"` |\n| `demoData`                 | --                           |                                                                    | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }` | `undefined`          |\n| `emailLabel`               | `email-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Email\"`            |\n| `enablePasswordValidation` | `enable-password-validation` |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `true`               |\n| `hideInputs`               | `hide-inputs`                |                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`              |\n| `loginLabel`               | `login-label`                |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Sign in\"`          |\n| `loginPath`                | `login-path`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/login\"`           |\n| `nextPage`                 | `next-page`                  |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/\"`                |\n| `pageLabel`                | `page-label`                 |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\n| `passwordLabel`            | `password-label`             |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Password\"`         |\n| `redirectPath`             | `redirect-path`              | The page that users are redirected to from the verification email. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"/verifyEmail\"`     |\n| `submitLabel`              | `submit-label`               |                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                               | `\"Register\"`         |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-register --> sqm-form-message\n  sqm-portal-register --> sqm-password-field\n  sqm-stencilbook --> sqm-portal-register\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
 const EditProfileReadme = "# sqm-portal-profile\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                 | Attribute                   | Description | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default                  |\r\n| ------------------------ | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\r\n| `countrytext`            | `countrytext`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Country\"`              |\r\n| `demoData`               | --                          |             | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }` | `undefined`              |\r\n| `editProfileHeader`      | `edit-profile-header`       |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Edit your profile\"`    |\r\n| `editProfileSubHeader`   | `edit-profile-sub-header`   |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Personal Information\"` |\r\n| `emailtext`              | `emailtext`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Email\"`                |\r\n| `firstnametext`          | `firstnametext`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"First Name\"`           |\r\n| `lastnametext`           | `lastnametext`              |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Last Name\"`            |\r\n| `showCountry`            | `show-country`              |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `true`                   |\r\n| `submitChangeButtonText` | `submit-change-button-text` |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Submit Changes\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-profile --> sqm-form-message\r\n  style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
@@ -9041,7 +9036,7 @@ const PortalTemplates_stories = {
 // padding="large"
 // show-powered-by="false"
 // powered-by-link="https://www.saasquatch.com/"
-function useTemplate(templateString) {
+function useTemplate$1(templateString) {
   const [editedTemplate, setEditedTemplate] = stencilHooks_module.useState(templateString);
   const [previewTemplate, setPreviewTemplate] = stencilHooks_module.useState(templateString);
   return {
@@ -9049,7 +9044,7 @@ function useTemplate(templateString) {
     callbacks: { setEditedTemplate, setPreviewTemplate },
   };
 }
-function TemplateView(props) {
+function TemplateView$1(props) {
   const { states, callbacks, readme } = props;
   return [
     index.h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
@@ -9076,70 +9071,70 @@ function DefaultTemplateView(props) {
         gridTemplateColumns: "repeat(9, 80px)",
         gridGap: "10px",
       } },
-      index.h("button", { onClick: () => index_module.dn.push("/") }, "Dashboard"),
-      props.leadSubmit && (index.h("button", { onClick: () => index_module.dn.push("/refer") }, "Submit a Referral")),
-      index.h("button", { onClick: () => index_module.dn.push("/activity") }, "Activity"),
-      index.h("button", { onClick: () => index_module.dn.push("/editProfile") }, "Edit Profile"),
-      index.h("button", { onClick: () => index_module.dn.push("/login") }, "Login"),
-      index.h("button", { onClick: () => index_module.dn.push("/register") }, "Register"),
-      index.h("button", { onClick: () => index_module.dn.push("/emailVerification") }, "Email Verification"),
-      index.h("button", { onClick: () => index_module.dn.push("/verifyEmail") }, "Verify Email"),
-      index.h("button", { onClick: () => index_module.dn.push("/forgotPassword") }, "Forgot Password"),
-      index.h("button", { onClick: () => index_module.dn.push("/resetPassword") }, "Reset Password")),
+      index.h("button", { onClick: () => index_module.pn.push("/") }, "Dashboard"),
+      props.leadSubmit && (index.h("button", { onClick: () => index_module.pn.push("/refer") }, "Submit a Referral")),
+      index.h("button", { onClick: () => index_module.pn.push("/activity") }, "Activity"),
+      index.h("button", { onClick: () => index_module.pn.push("/editProfile") }, "Edit Profile"),
+      index.h("button", { onClick: () => index_module.pn.push("/login") }, "Login"),
+      index.h("button", { onClick: () => index_module.pn.push("/register") }, "Register"),
+      index.h("button", { onClick: () => index_module.pn.push("/emailVerification") }, "Email Verification"),
+      index.h("button", { onClick: () => index_module.pn.push("/verifyEmail") }, "Verify Email"),
+      index.h("button", { onClick: () => index_module.pn.push("/forgotPassword") }, "Forgot Password"),
+      index.h("button", { onClick: () => index_module.pn.push("/resetPassword") }, "Reset Password")),
     index.h("br", null),
     index.h("div", { innerHTML: states.previewTemplate })));
 }
 const DefaultPortal = createHookStory(() => {
-  const { states, callbacks } = useTemplate(portalTemplate);
+  const { states, callbacks } = useTemplate$1(portalTemplate);
   return (index.h(DefaultTemplateView, { states: states, callbacks: callbacks, template: portalTemplateWithDashboard }));
 });
 const MultiProgramPortal = createHookStory(() => {
-  const { states, callbacks } = useTemplate(multiProgramTemplate);
+  const { states, callbacks } = useTemplate$1(multiProgramTemplate);
   return (index.h(DefaultTemplateView, { states: states, callbacks: callbacks, template: multiProgramTemplateWithDashboard }));
 });
 const LeadSubmitPortal = createHookStory(() => {
-  const { states, callbacks } = useTemplate(portalLeadSubmitTemplate);
+  const { states, callbacks } = useTemplate$1(portalLeadSubmitTemplate);
   return (index.h(DefaultTemplateView, { states: states, callbacks: callbacks, template: portalLeadSubmitTemplateWithDashboard, leadSubmit: true }));
 });
 const Login = createHookStory(() => {
-  const { states, callbacks } = useTemplate(loginTemplate);
-  return (index.h(TemplateView, { states: states, callbacks: callbacks, readme: LoginReadme }));
+  const { states, callbacks } = useTemplate$1(loginTemplate);
+  return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: LoginReadme }));
 });
 const ForgotPassword = createHookStory(() => {
-  const { states, callbacks } = useTemplate(forgotPasswordTemplate);
-  return (index.h(TemplateView, { states: states, callbacks: callbacks, readme: ForgotPasswordReadme }));
+  const { states, callbacks } = useTemplate$1(forgotPasswordTemplate);
+  return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: ForgotPasswordReadme }));
 });
 const Register = createHookStory(() => {
-  const { states, callbacks } = useTemplate(registerTemplate);
-  return (index.h(TemplateView, { states: states, callbacks: callbacks, readme: RegisterReadme }));
+  const { states, callbacks } = useTemplate$1(registerTemplate);
+  return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: RegisterReadme }));
 });
-const Dashboard = createHookStory(() => {
-  const { states, callbacks } = useTemplate(dashboardTemplate);
-  return index.h(TemplateView, { states: states, callbacks: callbacks });
+const Dashboard$1 = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(dashboardTemplate);
+  return index.h(TemplateView$1, { states: states, callbacks: callbacks });
 });
 const LeadSubmitIframe = createHookStory(() => {
-  const { states, callbacks } = useTemplate(leadSubmitTemplate);
-  return (index.h(TemplateView, { states: states, callbacks: callbacks, readme: ReferralIframeReadme }));
+  const { states, callbacks } = useTemplate$1(leadSubmitTemplate);
+  return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: ReferralIframeReadme }));
 });
-const Activity = createHookStory(() => {
-  const { states, callbacks } = useTemplate(activityTemplate);
-  return index.h(TemplateView, { states: states, callbacks: callbacks });
+const Activity$1 = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(activityTemplate);
+  return index.h(TemplateView$1, { states: states, callbacks: callbacks });
 });
-const EditProfile = createHookStory(() => {
-  const { states, callbacks } = useTemplate(editProfileTemplate);
-  return (index.h(TemplateView, { states: states, callbacks: callbacks, readme: EditProfileReadme }));
+const EditProfile$2 = createHookStory(() => {
+  const { states, callbacks } = useTemplate$1(editProfileTemplate);
+  return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: EditProfileReadme }));
 });
 const ResetPassword = createHookStory(() => {
-  const { states, callbacks } = useTemplate(resetPasswordTemplate);
-  return (index.h(TemplateView, { states: states, callbacks: callbacks, readme: ResetPasswordReadme }));
+  const { states, callbacks } = useTemplate$1(resetPasswordTemplate);
+  return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: ResetPasswordReadme }));
 });
 const EmailVerification = createHookStory(() => {
-  const { states, callbacks } = useTemplate(emailVerificationTemplate);
-  return (index.h(TemplateView, { states: states, callbacks: callbacks, readme: EmailVerificationReadme }));
+  const { states, callbacks } = useTemplate$1(emailVerificationTemplate);
+  return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: EmailVerificationReadme }));
 });
 const EmailVerified = createHookStory(() => {
-  const { states, callbacks } = useTemplate(emailVerifiedTemplate);
-  return (index.h(TemplateView, { states: states, callbacks: callbacks, readme: EmailVerifiedReadme }));
+  const { states, callbacks } = useTemplate$1(emailVerifiedTemplate);
+  return (index.h(TemplateView$1, { states: states, callbacks: callbacks, readme: EmailVerifiedReadme }));
 });
 const Widget = createHookStory(() => {
   return (index.h("sqb-widget", { "widget-type": "p/Vacay-referral/w/referrerWidget", demoData: {
@@ -9149,12 +9144,12 @@ const Widget = createHookStory(() => {
     } }));
 });
 const ResetPasswordEmail = createHookStory(() => {
-  const { states, callbacks } = useTemplate(resetPasswordEmailTemplate);
-  return index.h(TemplateView, { states: states, callbacks: callbacks });
+  const { states, callbacks } = useTemplate$1(resetPasswordEmailTemplate);
+  return index.h(TemplateView$1, { states: states, callbacks: callbacks });
 });
 const VerifyEmail = createHookStory(() => {
-  const { states, callbacks } = useTemplate(verifyEmailTemplate);
-  return index.h(TemplateView, { states: states, callbacks: callbacks });
+  const { states, callbacks } = useTemplate$1(verifyEmailTemplate);
+  return index.h(TemplateView$1, { states: states, callbacks: callbacks });
 });
 
 const PortalTemplates = /*#__PURE__*/Object.freeze({
@@ -9166,10 +9161,10 @@ const PortalTemplates = /*#__PURE__*/Object.freeze({
   Login: Login,
   ForgotPassword: ForgotPassword,
   Register: Register,
-  Dashboard: Dashboard,
+  Dashboard: Dashboard$1,
   LeadSubmitIframe: LeadSubmitIframe,
-  Activity: Activity,
-  EditProfile: EditProfile,
+  Activity: Activity$1,
+  EditProfile: EditProfile$2,
   ResetPassword: ResetPassword,
   EmailVerification: EmailVerification,
   EmailVerified: EmailVerified,
@@ -9227,7 +9222,7 @@ const ProgramMenu = /*#__PURE__*/Object.freeze({
 const PoweredByImg_stories = {
   title: "Powered By",
 };
-const Default$1 = () => {
+const Default$a = () => {
   return index.h(sqmPortalFooterView.PoweredByImg, null);
 };
 const CustomColor = () => {
@@ -9240,20 +9235,20 @@ const CustomWidthAndHeight = () => {
 const PoweredByImg = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PoweredByImg_stories,
-  Default: Default$1,
+  Default: Default$a,
   CustomColor: CustomColor,
   CustomWidthAndHeight: CustomWidthAndHeight
 });
 
-const scenario$4 = "Feature: Portal Footer\r\n\r\n    Background: A user is viewing the portal\r\n        Given a hosted portal\r\n        And a user is viewing the portal\r\n        And the portal has a footer\r\n\r\n    Scenario Outline: FAQ and T&C links/text are configurable and open in a new page when clicked\r\n        Given the footer has prop \"terms-link\" with value \"https://example.com/terms\"\r\n        And prop \"terms-text\" with value \"Terms and Conditions\"\r\n        And prop \"faq-link\" with value \"https://example.com/FAQ\"\r\n        And prop \"faq-text\" with value \"Visit FAQ\"\r\n        When a user clicks on the \"Visit FAQ\" link\r\n        Then they will be redirected to \"https://example.com/FAQ\" in a new page\r\n        When they go back to the portal\r\n        And click on the \"Terms and Conditions\" link\r\n        Then they will be redirected to \"https://example.com/terms\" in a new page\r\n\r\n    Scenario Outline: FAQ/T&C Links are not shown if a link is not provided\r\n        Given the footer does not have <linkProp>\r\n        But it <mayHave> <textProp> with <value>\r\n        Then the <link> will not be shown in the footer\r\n        Examples:\r\n            | linkProp   | mayHave      | textProp  | value                | link     |\r\n            | terms-link | has          | termsText | Terms and Conditions | T&C Link |\r\n            | faq-link   | has          | faqText   | Visit FAQ            | FAQ Link |\r\n            | terms-link | doesn't have |           |                      | T&C Link |\r\n            | faq-link   | doesn't have |           |                      | FAQ Link |\r\n\r\n    Scenario Outline: The support email and text is configurable but has a default\r\n        Given the footer <mayHave> <emailPropWithValue>\r\n        And the footer <mayAlsoHave> <textPropWithValue>\r\n        Then the footer's support email text is <renderedEmailText>\r\n        And the email address will be a mailto link with <mailtoEmail>\r\n        When the user clicks on the email address mailto Link\r\n        Then the users preferred email client will open with a draft email to <mailtoEmail>\r\n        Examples:\r\n            | mayHave      | emailPropWithValue     | mayAlsoHave  | textPropWithValue                  | mailtoEmail            | renderedEmailText                                 |\r\n            | has          | support@saasquatch.com | has          | For support please contact {email} | support@saasquatch.com | For support please contact support@saasquatch.com |\r\n            | doesn't have | N/A                    | doesn't have | N/A                                | support@example.com    | For program support, contact support@example.com  |\r\n\r\n    Scenario Outline: Powered by SaaSquatch is shown by default\r\n        Given the footer <mayHaveProp> \"show-powered-by\" with <value>\r\n        Then the powered by SaaSquatch image <mayBeShown>\r\n        Examples:\r\n            | mayHaveProp       | value | mayBeShown  |\r\n            | has prop          | true  | is shown    |\r\n            | has prop          | false | isn't shown |\r\n            | has prop          | test  | is shown    |\r\n            | has prop          |       | is shown    |\r\n            | doesn't have prop |       | is shown    |\r\n\r\n    Scenario: Powered By Saasquatch links out to \"https://saasquatch.com\"\r\n        Given the footer has the powered by SaaSquatch image\r\n        When a user clicks on it\r\n        Then they will be redirected to \"https://saasquatch.com\" in a new page";
+const scenario$6 = "Feature: Portal Footer\r\n\r\n    Background: A user is viewing the portal\r\n        Given a hosted portal\r\n        And a user is viewing the portal\r\n        And the portal has a footer\r\n\r\n    Scenario Outline: FAQ and T&C links/text are configurable and open in a new page when clicked\r\n        Given the footer has prop \"terms-link\" with value \"https://example.com/terms\"\r\n        And prop \"terms-text\" with value \"Terms and Conditions\"\r\n        And prop \"faq-link\" with value \"https://example.com/FAQ\"\r\n        And prop \"faq-text\" with value \"Visit FAQ\"\r\n        When a user clicks on the \"Visit FAQ\" link\r\n        Then they will be redirected to \"https://example.com/FAQ\" in a new page\r\n        When they go back to the portal\r\n        And click on the \"Terms and Conditions\" link\r\n        Then they will be redirected to \"https://example.com/terms\" in a new page\r\n\r\n    Scenario Outline: FAQ/T&C Links are not shown if a link is not provided\r\n        Given the footer does not have <linkProp>\r\n        But it <mayHave> <textProp> with <value>\r\n        Then the <link> will not be shown in the footer\r\n        Examples:\r\n            | linkProp   | mayHave      | textProp  | value                | link     |\r\n            | terms-link | has          | termsText | Terms and Conditions | T&C Link |\r\n            | faq-link   | has          | faqText   | Visit FAQ            | FAQ Link |\r\n            | terms-link | doesn't have |           |                      | T&C Link |\r\n            | faq-link   | doesn't have |           |                      | FAQ Link |\r\n\r\n    Scenario Outline: The support email and text is configurable but has a default\r\n        Given the footer <mayHave> <emailPropWithValue>\r\n        And the footer <mayAlsoHave> <textPropWithValue>\r\n        Then the footer's support email text is <renderedEmailText>\r\n        And the email address will be a mailto link with <mailtoEmail>\r\n        When the user clicks on the email address mailto Link\r\n        Then the users preferred email client will open with a draft email to <mailtoEmail>\r\n        Examples:\r\n            | mayHave      | emailPropWithValue     | mayAlsoHave  | textPropWithValue                  | mailtoEmail            | renderedEmailText                                 |\r\n            | has          | support@saasquatch.com | has          | For support please contact {email} | support@saasquatch.com | For support please contact support@saasquatch.com |\r\n            | doesn't have | N/A                    | doesn't have | N/A                                | support@example.com    | For program support, contact support@example.com  |\r\n\r\n    Scenario Outline: Powered by SaaSquatch is shown by default\r\n        Given the footer <mayHaveProp> \"show-powered-by\" with <value>\r\n        Then the powered by SaaSquatch image <mayBeShown>\r\n        Examples:\r\n            | mayHaveProp       | value | mayBeShown  |\r\n            | has prop          | true  | is shown    |\r\n            | has prop          | false | isn't shown |\r\n            | has prop          | test  | is shown    |\r\n            | has prop          |       | is shown    |\r\n            | doesn't have prop |       | is shown    |\r\n\r\n    Scenario: Powered By Saasquatch links out to \"https://saasquatch.com\"\r\n        Given the footer has the powered by SaaSquatch image\r\n        When a user clicks on it\r\n        Then they will be redirected to \"https://saasquatch.com\" in a new page";
 
 const PortalFooter_stories = {
   title: "Portal Footer",
   parameters: {
-    scenario: scenario$4,
+    scenario: scenario$6,
   },
 };
-const defaultProps = {
+const defaultProps$9 = {
   supportEmail: "support@example.com",
   supportText: "For program support, contact {email}",
   showPoweredBy: true,
@@ -9263,11 +9258,11 @@ const defaultProps = {
   paddingBottom: "large",
   paddingLeft: "large",
 };
-const DefaultFooter = () => index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps));
-const FooterWithTerms = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps, { termsLink: "https://example.com", termsText: "Terms and Conditions" })));
-const FooterWithFAQ = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps, { faqLink: "https://example.com", faqText: "FAQ" })));
-const FooterWithTermsAndFAQ = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
-const FooterNoPoweredBy = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", showPoweredBy: false })));
+const DefaultFooter = () => index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$9));
+const FooterWithTerms = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions" })));
+const FooterWithFAQ = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$9, { faqLink: "https://example.com", faqText: "FAQ" })));
+const FooterWithTermsAndFAQ = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
+const FooterNoPoweredBy = () => (index.h(sqmPortalFooterView.PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", showPoweredBy: false })));
 
 const PortalFooter = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9279,12 +9274,12 @@ const PortalFooter = /*#__PURE__*/Object.freeze({
   FooterNoPoweredBy: FooterNoPoweredBy
 });
 
-const scenario$3 = "Feature: Hero Unit\r\n\r\n    Background: A portal with a hero unit exists\r\n        Given a hosted portal\r\n        And the portal has hero unit on the login page\r\n        And a user is viewing the login page\r\n\r\n    Scenario: The hero unit defaults to a single column layout\r\n        Given a hero unit does not have a \"columns\" prop\r\n        But the following html is wrapped by the hero unit\r\n            \"\"\"\r\n            <sqm-portal-login></sqm-portal-login>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Get Referring!</h1>\r\n            <p style=\"text-align:center\">\r\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\r\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\r\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\r\n            pariatur.\r\n            </p>\r\n            </div>\r\n            \"\"\"\r\n        Then only a single column will be displayed\r\n        And within it will be the login component\r\n\r\n    Scenario Outline: The hero unit supports single or dual column layouts\r\n        Given a hero unit with prop \"columns\" having <columnValue>\r\n        And it wraps <html>\r\n        Then the hero unit displays <columnValue> columns\r\n        Examples:\r\n            | columnValue | html                                                                                              |\r\n            | 1           | <h1>Column 1!</h1>                                                                                |\r\n            | 2           | <h1>Column 1!</h1><div slot=\"secondary-column\"><h1 style=\"text-align:center\">Column 2!</h1></div> |\r\n\r\n    Scenario: HTML to be displayed in the second column comes from the \"secondary-column\" slot\r\n        Given a hero unit with \"columns\" \"2\"\r\n        And the following html\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div>\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        When the hero unit is rendered\r\n        Then only one column is displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 1 will contain the \"Column 2!\" text\r\n        When the div for column two is updated to have 'slot=\"secondary-column\"'\r\n        Then the two columns are displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 2 will contain the \"Column 2!\" text\r\n\r\n    Scenario Outline: A background for the hero unit can be set as an image or colour\r\n        Given a hero unit with <backgroundPropValue>\r\n        Then the background will be <background>\r\n        Examples:\r\n            | background                                                  | background               |\r\n            | https://images.unsplash.com/photo-1599676821464-3555954838d | image of misty mountains |\r\n            | LightSlateGrey                                              | light slate grey         |\r\n            | #00FF00                                                     | green                    |\r\n            | rgb(128,0,128)                                              | purple                   |\r\n\r\n    Scenario Outline: Wrap Direction can be configured for mobile experiences\r\n        Given a hero unit with the following HTML\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        And prop \"wrap-direction\" has <value>\r\n        When the window width is less than 600px\r\n        Then the two columns will stack\r\n        And <column> will be on top\r\n        Examples:\r\n            | value        | column |\r\n            | wrap         | 1      |\r\n            | wrap-reverse | 2      |\r\n            |              | 1      |";
+const scenario$7 = "Feature: Hero Unit\r\n\r\n    Background: A portal with a hero unit exists\r\n        Given a hosted portal\r\n        And the portal has hero unit on the login page\r\n        And a user is viewing the login page\r\n\r\n    Scenario: The hero unit defaults to a single column layout\r\n        Given a hero unit does not have a \"columns\" prop\r\n        But the following html is wrapped by the hero unit\r\n            \"\"\"\r\n            <sqm-portal-login></sqm-portal-login>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Get Referring!</h1>\r\n            <p style=\"text-align:center\">\r\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\r\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\r\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\r\n            pariatur.\r\n            </p>\r\n            </div>\r\n            \"\"\"\r\n        Then only a single column will be displayed\r\n        And within it will be the login component\r\n\r\n    Scenario Outline: The hero unit supports single or dual column layouts\r\n        Given a hero unit with prop \"columns\" having <columnValue>\r\n        And it wraps <html>\r\n        Then the hero unit displays <columnValue> columns\r\n        Examples:\r\n            | columnValue | html                                                                                              |\r\n            | 1           | <h1>Column 1!</h1>                                                                                |\r\n            | 2           | <h1>Column 1!</h1><div slot=\"secondary-column\"><h1 style=\"text-align:center\">Column 2!</h1></div> |\r\n\r\n    Scenario: HTML to be displayed in the second column comes from the \"secondary-column\" slot\r\n        Given a hero unit with \"columns\" \"2\"\r\n        And the following html\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div>\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        When the hero unit is rendered\r\n        Then only one column is displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 1 will contain the \"Column 2!\" text\r\n        When the div for column two is updated to have 'slot=\"secondary-column\"'\r\n        Then the two columns are displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 2 will contain the \"Column 2!\" text\r\n\r\n    Scenario Outline: A background for the hero unit can be set as an image or colour\r\n        Given a hero unit with <backgroundPropValue>\r\n        Then the background will be <background>\r\n        Examples:\r\n            | background                                                  | background               |\r\n            | https://images.unsplash.com/photo-1599676821464-3555954838d | image of misty mountains |\r\n            | LightSlateGrey                                              | light slate grey         |\r\n            | #00FF00                                                     | green                    |\r\n            | rgb(128,0,128)                                              | purple                   |\r\n\r\n    Scenario Outline: Wrap Direction can be configured for mobile experiences\r\n        Given a hero unit with the following HTML\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        And prop \"wrap-direction\" has <value>\r\n        When the window width is less than 600px\r\n        Then the two columns will stack\r\n        And <column> will be on top\r\n        Examples:\r\n            | value        | column |\r\n            | wrap         | 1      |\r\n            | wrap-reverse | 2      |\r\n            |              | 1      |";
 
 const Hero_stories = {
   title: "Hero Layout",
   parameters: {
-    scenario: scenario$3,
+    scenario: scenario$7,
   },
 };
 const LoginOneColumn = () => {
@@ -9461,15 +9456,15 @@ const Hero = /*#__PURE__*/Object.freeze({
   TwoColumnLoginWithImgElement: TwoColumnLoginWithImgElement
 });
 
-const scenario$2 = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Referral Iframe\r\n\r\n  Used to provide an external form for submitting referral leads using the current user's referral code\r\n\r\n  Background: A user is logged in\r\n    Given there is a logged in user\r\n\r\n  @motivating\r\n  Scenario: Referral code is passed to the iframe as a query parameter\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the user has navigated to \"/refer\"\r\n    And the user's referral code is \"BOBBYREFER\"\r\n    When the iframe content is loaded\r\n    Then the iframe url will be \"https://example.com?rsCode=BOBBYREFER\"\r\n\r\n  @ui\r\n  Scenario Outline: The height and width of the iFrame can be controlled via props\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the iframe content is 1000x1000\r\n    And the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the content of the iframe will be displayed with scrollbars\r\n    And the dimension of the iFrame displayed will be 500x500\r\n    When the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the full content of the iframe will be displayed on the page\r\n    And the dimension of the iFrame displayed will be 1000x1000\r\n    Examples:\r\n      | heightValue | widthValue |\r\n      | 500px       | 500px      |\r\n      | 50%         | 50%        |\r\n\r\n  @minutae\r\n  Scenario Outline: The iFrame will fail fast if a iFrame source isn't provided\r\n    Given \"iframe-src\" <mayBeAnAttribute>\r\n    And it <mayHaveValue>\r\n    When a user views the referral iFrame component\r\n    Then an alert with an error message is displayed in place of the iFrame\r\n    And it has a details section\r\n    When \"More details\" is clicked\r\n    Then the following information will be displayed\r\n      | component being used |\r\n      | missing attribute(s) |\r\n\r\n    Examples:\r\n      | mayBeAnAttribute    | mayHaveValue |\r\n      | is not an attribute | N/A          |\r\n      | is an attribute     | \"\"           |\r\n      | is an attribute     |              |";
+const scenario$8 = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Referral Iframe\r\n\r\n  Used to provide an external form for submitting referral leads using the current user's referral code\r\n\r\n  Background: A user is logged in\r\n    Given there is a logged in user\r\n\r\n  @motivating\r\n  Scenario: Referral code is passed to the iframe as a query parameter\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the user has navigated to \"/refer\"\r\n    And the user's referral code is \"BOBBYREFER\"\r\n    When the iframe content is loaded\r\n    Then the iframe url will be \"https://example.com?rsCode=BOBBYREFER\"\r\n\r\n  @ui\r\n  Scenario Outline: The height and width of the iFrame can be controlled via props\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the iframe content is 1000x1000\r\n    And the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the content of the iframe will be displayed with scrollbars\r\n    And the dimension of the iFrame displayed will be 500x500\r\n    When the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the full content of the iframe will be displayed on the page\r\n    And the dimension of the iFrame displayed will be 1000x1000\r\n    Examples:\r\n      | heightValue | widthValue |\r\n      | 500px       | 500px      |\r\n      | 50%         | 50%        |\r\n\r\n  @minutae\r\n  Scenario Outline: The iFrame will fail fast if a iFrame source isn't provided\r\n    Given \"iframe-src\" <mayBeAnAttribute>\r\n    And it <mayHaveValue>\r\n    When a user views the referral iFrame component\r\n    Then an alert with an error message is displayed in place of the iFrame\r\n    And it has a details section\r\n    When \"More details\" is clicked\r\n    Then the following information will be displayed\r\n      | component being used |\r\n      | missing attribute(s) |\r\n\r\n    Examples:\r\n      | mayBeAnAttribute    | mayHaveValue |\r\n      | is not an attribute | N/A          |\r\n      | is an attribute     | \"\"           |\r\n      | is an attribute     |              |";
 
 const ReferralIframe_stories = {
   title: "Referral Iframe",
   parameters: {
-    scenario: scenario$2,
+    scenario: scenario$8,
   },
 };
-const props$2 = {
+const props = {
   data: {
     shareCode: "BOBBYREFER",
   },
@@ -9483,7 +9478,7 @@ const props$2 = {
 };
 const ReferralIframe = () => {
   return (index.h("div", { style: { width: "1000px", height: "1000px" } },
-    index.h(AutoColor.ReferralIframeView, Object.assign({}, props$2))));
+    index.h(AutoColor.ReferralIframeView, Object.assign({}, props))));
 };
 const ReferralIframeError = () => {
   return (index.h("div", { style: { width: "1000px", height: "1000px" } },
@@ -9497,12 +9492,12 @@ const ReferralIframe$1 = /*#__PURE__*/Object.freeze({
   ReferralIframeError: ReferralIframeError
 });
 
-const scenario$1 = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Name Fields\r\n\r\n  Fields to be used to fill the first and last name of a user during registration\r\n\r\n  Background:\r\n    Given the current page is \"/register\"\r\n\r\n  @motivating\r\n  Scenario: Both first name and last name are required\r\n    Given the email field has valid input\r\n    And the password field has valid input\r\n    And first name field is empty\r\n    And last name field is empty\r\n    When register is clicked\r\n    Then the name fields will be highlighted in red\r\n    And the error messages will say \"Cannot be empty\"\r\n\r\n  @motivating\r\n  Scenario: First and last name are upserted with the SaaSquatch user\r\n    Given all fields have been filled with data\r\n      | firstName | lastName  | email           | password        |\r\n      | Bob       | Testerson | bob@example.com | SecurePassword1 |\r\n    When register is clicked\r\n    Then the email verification page will be loaded\r\n    And the user will be upserted\r\n    And the SaaSquatch user will contain data\r\n      | firstName | lastName  | email           |\r\n      | Bob       | Testerson | bob@example.com |\r\n\r\n";
+const scenario$9 = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Name Fields\r\n\r\n  Fields to be used to fill the first and last name of a user during registration\r\n\r\n  Background:\r\n    Given the current page is \"/register\"\r\n\r\n  @motivating\r\n  Scenario: Both first name and last name are required\r\n    Given the email field has valid input\r\n    And the password field has valid input\r\n    And first name field is empty\r\n    And last name field is empty\r\n    When register is clicked\r\n    Then the name fields will be highlighted in red\r\n    And the error messages will say \"Cannot be empty\"\r\n\r\n  @motivating\r\n  Scenario: First and last name are upserted with the SaaSquatch user\r\n    Given all fields have been filled with data\r\n      | firstName | lastName  | email           | password        |\r\n      | Bob       | Testerson | bob@example.com | SecurePassword1 |\r\n    When register is clicked\r\n    Then the email verification page will be loaded\r\n    And the user will be upserted\r\n    And the SaaSquatch user will contain data\r\n      | firstName | lastName  | email           |\r\n      | Bob       | Testerson | bob@example.com |\r\n\r\n";
 
 const NameFields_stories = {
   title: "Name Fields",
   parameters: {
-    scenario: scenario$1,
+    scenario: scenario$9,
   },
 };
 const props$1 = {
@@ -9514,7 +9509,7 @@ const props$1 = {
     },
   },
 };
-const errorProps = {
+const errorProps$8 = {
   states: {
     validationErrors: {
       firstName: "Cannot be empty",
@@ -9530,7 +9525,7 @@ const NameFields = () => {
   return index.h(sqmNameFieldsView.NameFieldsView, Object.assign({}, props$1));
 };
 const NameFieldsWithErrors = () => {
-  return index.h(sqmNameFieldsView.NameFieldsView, Object.assign({}, errorProps));
+  return index.h(sqmNameFieldsView.NameFieldsView, Object.assign({}, errorProps$8));
 };
 
 const NameFields$1 = /*#__PURE__*/Object.freeze({
@@ -9592,7 +9587,7 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
   },
   refs: null,
 });
-const baseReward = {
+const baseReward$2 = {
   key: "",
   name: "",
   description: "Description of reward. Lorem ipsum dolor sit amet, consectetur adipiscing. Id nec semper sapien dignissim rhoncus nunc.",
@@ -9644,52 +9639,52 @@ const variableValue = (min, max, unit) => ({
 });
 const data = [
   {
-    ...baseReward,
+    ...baseReward$2,
     ...name("Free swag with a promo code"),
     ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
     ...fixedValue("40 SaaSquatch Points"),
   },
   {
-    ...baseReward,
+    ...baseReward$2,
     ...selected,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
     ...variableValue(20, 80, "Points"),
   },
   {
-    ...baseReward,
+    ...baseReward$2,
     ...name("A very exclusive gift box"),
     ...imageUrl("https://i.imgur.com/93BvEgH.png"),
     ...fixedValue("30 SaaSquatch Points"),
   },
   {
-    ...baseReward,
+    ...baseReward$2,
     ...name("$50 Store credit"),
     ...imageUrl("https://i.imgur.com/WkCMVSE.png"),
     ...fixedValue("100 SaaSquatch Points"),
   },
   {
-    ...baseReward,
+    ...baseReward$2,
     ...name("Variable amount of store credit"),
     ...imageUrl("https://i.imgur.com/Jn2fE0s.png"),
     ...variableValue(20, 100, "Points"),
   },
   {
-    ...baseReward,
+    ...baseReward$2,
     ...notEnoughPoints,
     ...name("A very rare cactus"),
     ...imageUrl("https://i.imgur.com/hhlF2Ey.png"),
     ...fixedValue("2000 SaaSquatch Points"),
   },
   {
-    ...baseReward,
+    ...baseReward$2,
     ...usTax,
     ...name("$1000 Store credit with a really super long name in the front page"),
     ...imageUrl("https://i.imgur.com/y9HSls1.png"),
     ...fixedValue("2000 SaaSquatch Long Points"),
   },
   {
-    ...baseReward,
+    ...baseReward$2,
     ...notEnoughPoints,
     ...name("A holiday gift box"),
     ...imageUrl("https://i.imgur.com/dWEdB3p.png"),
@@ -9701,7 +9696,7 @@ const rewardExchange = {
 };
 const rewardExchangeSelected = {
   ...baseResponse(data, "chooseReward", {
-    ...baseReward,
+    ...baseReward$2,
     ...selected,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
@@ -9718,7 +9713,7 @@ const baseStep = (dst, dstUnit, src, srcUnit, available = true) => ({
 });
 const chooseAmountVariable = {
   ...baseResponse(data, "chooseAmount", {
-    ...baseReward,
+    ...baseReward$2,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
     ...variableValue(20, 80, "Points"),
@@ -9733,7 +9728,7 @@ const chooseAmountVariable = {
 };
 const chooseAmountFixed = {
   ...baseResponse(data, "chooseAmount", {
-    ...baseReward,
+    ...baseReward$2,
     ...name("Free swag with a promo code"),
     ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
     ...fixedValue("40 SaaSquatch Points"),
@@ -9741,7 +9736,7 @@ const chooseAmountFixed = {
 };
 const confirmFixed = {
   ...baseResponse(data, "confirmation", {
-    ...baseReward,
+    ...baseReward$2,
     ...name("Free swag with a promo code"),
     ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
     ...fixedValue("40 SaaSquatch Points"),
@@ -9749,15 +9744,15 @@ const confirmFixed = {
 };
 const confirmVariable = {
   ...baseResponse(data, "confirmation", {
-    ...baseReward,
+    ...baseReward$2,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
     ...variableValue(20, 80, "Points"),
   }, baseStep(20, "$", 40, "Points")),
 };
-const error$1 = {
+const error = {
   ...baseResponse(data, "confirmation", {
-    ...baseReward,
+    ...baseReward$2,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
     ...variableValue(20, 80, "Points"),
@@ -9765,7 +9760,7 @@ const error$1 = {
 };
 const success = {
   ...baseResponse(data, "success", {
-    ...baseReward,
+    ...baseReward$2,
     ...name("Free swag with a promo code"),
     ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
     ...fixedValue("40 SaaSquatch Points"),
@@ -9773,7 +9768,7 @@ const success = {
 };
 const successVariable = {
   ...baseResponse(data, "success", {
-    ...baseReward,
+    ...baseReward$2,
     ...name("Visa® Prepaid Card USD"),
     ...imageUrl("https://i.imgur.com/93BvEgH.png"),
     ...variableValue(20, 80, "Points"),
@@ -9796,10 +9791,10 @@ const ChooseAmount = StoryBase(chooseAmountFixed);
 const ChooseAmountVariable = StoryBase(chooseAmountVariable);
 const Confirm = StoryBase(confirmFixed);
 const ConfirmVariable = StoryBase(confirmVariable);
-const Error$1 = StoryBase(error$1);
+const Error$3 = StoryBase(error);
 const SuccessPromo = StoryBase(success);
 const SuccessVariable = StoryBase(successVariable);
-const Loading = StoryBase(loading);
+const Loading$3 = StoryBase(loading);
 
 const RewardExchangeList = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9810,10 +9805,10 @@ const RewardExchangeList = /*#__PURE__*/Object.freeze({
   ChooseAmountVariable: ChooseAmountVariable,
   Confirm: Confirm,
   ConfirmVariable: ConfirmVariable,
-  Error: Error$1,
+  Error: Error$3,
   SuccessPromo: SuccessPromo,
   SuccessVariable: SuccessVariable,
-  Loading: Loading
+  Loading: Loading$3
 });
 
 const ProgramExplainer_stories = {
@@ -9977,7 +9972,7 @@ const BrandStories = /*#__PURE__*/Object.freeze({
 const CardFeed_stories = {
   title: "Components/Card Feed",
 };
-const props = {
+const props$2 = {
   width: 347,
   gap: 24,
 };
@@ -10005,7 +10000,7 @@ const taskCardProps = {
   },
   states: { progress: 0, loading: false, loadingEvent: false },
 };
-const coupleActions = {
+const coupleActions$1 = {
   content: {
     rewardAmount: "40",
     rewardUnit: "SaaSquatch Points",
@@ -10029,7 +10024,7 @@ const coupleActions = {
   },
   states: { progress: 1, loading: false, loadingEvent: false },
 };
-const manyActions = {
+const manyActions$1 = {
   content: {
     rewardAmount: "150",
     rewardUnit: "SaaSquatch Points",
@@ -10059,21 +10054,21 @@ const manyActions = {
   },
 };
 const TaskCardGrid = () => {
-  return (index.h(AutoColor.CardFeedView, Object.assign({}, props),
+  return (index.h(AutoColor.CardFeedView, Object.assign({}, props$2),
     index.h(AutoColor.TaskCardView, Object.assign({}, taskCardProps)),
     index.h("div", null,
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions))),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
         index.h(AutoColor.TaskCardView, Object.assign({}, taskCardProps)))),
-    index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions)),
-    index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions)),
+    index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1)),
+    index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1)),
     index.h("div", null,
-      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions))),
+      index.h(AutoColor.TaskCardView, Object.assign({}, coupleActions$1))),
     index.h("div", null,
       index.h("div", null,
         index.h(AutoColor.TaskCardView, Object.assign({}, taskCardProps)))),
-    index.h(AutoColor.TaskCardView, Object.assign({}, manyActions))));
+    index.h(AutoColor.TaskCardView, Object.assign({}, manyActions$1))));
 };
 
 const CardFeed = /*#__PURE__*/Object.freeze({
@@ -10082,12 +10077,12 @@ const CardFeed = /*#__PURE__*/Object.freeze({
   TaskCardGrid: TaskCardGrid
 });
 
-const scenario = "Feature: Portal Container\r\n\r\n\r\n    Scenario: Horizontal content overflows, but does not stretch\r\n\r\n        Bad elements should not affect other elements in the page\r\n\r\n        Given there are two element in the container\r\n        And the first is small\r\n        And the second would stretch the container wider than it's parent\r\n        Then the second one is clipped\r\n        And the first one doesn't stretch\r\n\r\n    @landmine\r\n    Scenario: `max-width` is required for displaying as a row\r\n        Given I have `direction` to \"row\"\r\n        And I have not set a `max-width`\r\n        Then it will display as a column\r\n";
+const scenario$a = "Feature: Portal Container\r\n\r\n\r\n    Scenario: Horizontal content overflows, but does not stretch\r\n\r\n        Bad elements should not affect other elements in the page\r\n\r\n        Given there are two element in the container\r\n        And the first is small\r\n        And the second would stretch the container wider than it's parent\r\n        Then the second one is clipped\r\n        And the first one doesn't stretch\r\n\r\n    @landmine\r\n    Scenario: `max-width` is required for displaying as a row\r\n        Given I have `direction` to \"row\"\r\n        And I have not set a `max-width`\r\n        Then it will display as a column\r\n";
 
 const PortalContainer_stories = {
   title: "Components/Portal Container",
   parameters: {
-    scenario,
+    scenario: scenario$a,
   },
 };
 const TooWideColumn = () => (index.h("div", { style: { width: "200px", border: "1px dashed grey" } },
@@ -10122,7 +10117,7 @@ const PortalContainer = /*#__PURE__*/Object.freeze({
 const RewardsTableCell_stories = {
   title: "Components/Rewards Table Cell",
 };
-const rewardsData = {
+const rewardsData$1 = {
   id: "61c100117a82a376d8804166",
   type: "CREDIT",
   value: 19,
@@ -10153,7 +10148,7 @@ const rewardsData = {
   },
 };
 const RewardsCellCreditFull = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData }, availableText: "19 Points remaining" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1 }, availableText: "19 Points remaining" }));
 };
 const partial = {
   prettyAvailableValue: "10 Points",
@@ -10162,7 +10157,7 @@ const partial = {
   dateRedeemed: 1640038417468,
 };
 const RewardsCellCreditPartial = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial }, availableText: "10 Points remaining" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial }, availableText: "10 Points remaining" }));
 };
 const empty = {
   prettyAvailableValue: "0 Points",
@@ -10171,7 +10166,7 @@ const empty = {
   dateRedeemed: 1640038417468,
 };
 const RewardsCellCreditEmpty = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...empty }, availableText: "0 Points remaining" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...empty }, availableText: "0 Points remaining" }));
 };
 const singleRedeemed = {
   prettyValue: "1 Points",
@@ -10183,13 +10178,13 @@ const singleRedeemed = {
   dateRedeemed: 1640038417468,
 };
 const RewardsCellSingleRedeemed = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...singleRedeemed } }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...singleRedeemed } }));
 };
 const RewardsCellNonCredit = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, type: "FUELTANK", prettyValue: "SaaSquatch Giftcard" } }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, type: "FUELTANK", prettyValue: "SaaSquatch Giftcard" } }));
 };
 const SourceCellText = () => {
-  return (index.h("sqm-rewards-table-source-cell", { reward: rewardsData, rewardSourceText: "Manual" }));
+  return (index.h("sqm-rewards-table-source-cell", { reward: rewardsData$1, rewardSourceText: "Manual" }));
 };
 const exchange = {
   exchangedRewardRedemptionTransaction: {
@@ -10203,7 +10198,7 @@ const exchange = {
   },
 };
 const SourceCellExchange = () => {
-  return (index.h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...exchange }, rewardExchangeText: "Reward Exchange" }));
+  return (index.h("sqm-rewards-table-source-cell", { reward: { ...rewardsData$1, ...exchange }, rewardExchangeText: "Reward Exchange" }));
 };
 const johnDoe = {
   firstName: "John",
@@ -10248,57 +10243,57 @@ const referred = (user = null) => {
   };
 };
 const SourceCellReferral = () => {
-  return (index.h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(johnDoe) }, referralText: "Referral to" }));
+  return (index.h("sqm-rewards-table-source-cell", { reward: { ...rewardsData$1, ...referral(johnDoe) }, referralText: "Referral to" }));
 };
 const SourceCellReferred = () => {
-  return (index.h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referred(johnDoe) }, referralText: "Referred by" }));
+  return (index.h("sqm-rewards-table-source-cell", { reward: { ...rewardsData$1, ...referred(johnDoe) }, referralText: "Referred by" }));
 };
 const SourceCellAnonymousUser = () => {
-  return (index.h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(anon) }, referralText: "Referral to", anonymousUserText: "Anonymous User" }));
+  return (index.h("sqm-rewards-table-source-cell", { reward: { ...rewardsData$1, ...referral(anon) }, referralText: "Referral to", anonymousUserText: "Anonymous User" }));
 };
 const SourceCellDeletedUser = () => {
-  return (index.h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(null) }, referralText: "Referral to", deletedUserText: "Deleted User" }));
+  return (index.h("sqm-rewards-table-source-cell", { reward: { ...rewardsData$1, ...referral(null) }, referralText: "Referral to", deletedUserText: "Deleted User" }));
 };
 const StatusCellAvailable = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Available", reward: rewardsData }));
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Available", reward: rewardsData$1 }));
 };
 const expire = {
   dateExpires: 1640038417468,
 };
 const StatusCellAvailableExpiry = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Available", reward: { ...rewardsData, ...expire }, expiryText: "Expires" }));
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Available", reward: { ...rewardsData$1, ...expire }, expiryText: "Expires" }));
 };
 const redeemed = {
   statuses: ["REDEEMED"],
   dateRedeemed: 1640038417468,
 };
 const StatusCellRedeemed = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Redeemed", reward: { ...rewardsData, ...redeemed } }));
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Redeemed", reward: { ...rewardsData$1, ...redeemed } }));
 };
 const cancelled = {
   statuses: ["CANCELLED"],
   dateCancelled: 1640038417468,
 };
 const StatusCellCancelled = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Cancelled", reward: { ...rewardsData, ...cancelled } }));
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Cancelled", reward: { ...rewardsData$1, ...cancelled } }));
 };
 const expired = {
   statuses: ["EXPIRED"],
   dateExpires: 1640038417468,
 };
 const StatusCellExpired = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Expired", reward: { ...rewardsData, ...expired } }));
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Expired", reward: { ...rewardsData$1, ...expired } }));
 };
 const pending = {
   statuses: ["PENDING"],
 };
 const StatusCellPending = () => {
-  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending } }));
+  return (index.h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData$1, ...pending } }));
 };
-const DateCell = () => {
+const DateCell$1 = () => {
   return (index.h("sqm-rewards-table-date-cell", { date: 1640038417468 }));
 };
-const EmptyCell$1 = () => {
+const EmptyCell$2 = () => {
   return index.h("sqm-rewards-table-date-cell", null);
 };
 
@@ -10322,8 +10317,8 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
   StatusCellCancelled: StatusCellCancelled,
   StatusCellExpired: StatusCellExpired,
   StatusCellPending: StatusCellPending,
-  DateCell: DateCell,
-  EmptyCell: EmptyCell$1
+  DateCell: DateCell$1,
+  EmptyCell: EmptyCell$2
 });
 
 const RewardsTable_stories = {
@@ -10332,7 +10327,7 @@ const RewardsTable_stories = {
 const Tab = () => {
   return index.h("sqm-rewards-table-date-cell", null);
 };
-const EmptyCell = () => {
+const EmptyCell$3 = () => {
   return index.h("sqm-rewards-table-date-cell", null);
 };
 
@@ -10340,58 +10335,56 @@ const RewardsTable = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': RewardsTable_stories,
   Tab: Tab,
-  EmptyCell: EmptyCell
+  EmptyCell: EmptyCell$3
 });
 
 const UseReferralTable_stories = {
   title: "Hooks / useReferralTable",
 };
-function setupGraphQL() {
+function setupGraphQL$9() {
   const id = "testestest";
   const accountId = id;
   //@ts-ignore
   window.widgetIdent = {
     tenantAlias: "test_a8b41jotf8a1v",
     appDomain: "https://staging.referralsaasquatch.com",
-    // programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ae({
+    index_module.Y({
       accountId,
       id,
       jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ae(undefined);
+      index_module.Y(undefined);
     };
   }, []);
   return { id, accountId };
 }
-function setupGraphQLKlip({ token, id }) {
+function setupGraphQLKlip$1({ token, id }) {
   const accountId = id;
   // const programId = "klip-referral-program";
   //@ts-ignore
   window.widgetIdent = {
     tenantAlias: "test_a74miwdpofztj",
     appDomain: "https://staging.referralsaasquatch.com",
-    // programId,
   };
   stencilHooks_module.useEffect(() => {
-    index_module.ae({
+    index_module.Y({
       accountId,
       id,
       jwt: token,
     });
     return () => {
       window.widgetIdent = undefined;
-      index_module.ae(undefined);
+      index_module.Y(undefined);
     };
   }, []);
   return { id, accountId };
 }
-const ReferralTable = createHookStory(() => {
-  setupGraphQL();
+const ReferralTable$1 = createHookStory(() => {
+  setupGraphQL$9();
   index_module.A("sam-partner-test-2");
   return (index.h("sqm-referral-table", null,
     index.h("sqm-referral-table-user-column", null),
@@ -10400,7 +10393,7 @@ const ReferralTable = createHookStory(() => {
     index.h("sqm-referral-table-rewards-column", null)));
 });
 const ReferralTableEn = createHookStory(() => {
-  setupGraphQLKlip({
+  setupGraphQLKlip$1({
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWVuZ2xpc2giLCJpZCI6InNhbWVuZ2xpc2gifX0._6OTVF3gcipu_ibgthUNr5UHwC-2E_lhCENI5HpYvcw",
     id: "samenglish",
   });
@@ -10412,7 +10405,7 @@ const ReferralTableEn = createHookStory(() => {
     index.h("sqm-referral-table-date-column", { "column-title": "Date Referred", "date-shown": "dateReferralStarted" })));
 });
 const ReferralTableTr = createHookStory(() => {
-  setupGraphQLKlip({
+  setupGraphQLKlip$1({
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbXR1cmtleSIsImlkIjoic2FtdHVya2V5In19.usSMe0RWg8W5FtwcvJayvAlxTw6vMxjTyWXaP8jI8_U",
     id: "samturkey",
   });
@@ -10424,7 +10417,7 @@ const ReferralTableTr = createHookStory(() => {
     index.h("sqm-referral-table-date-column", { "column-title": "Tarih", "date-shown": "dateReferralStarted" })));
 });
 const ReferralTableFr = createHookStory(() => {
-  setupGraphQLKlip({
+  setupGraphQLKlip$1({
     token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWZyZW5jaCIsImlkIjoic2FtZnJlbmNoIn19.cwhasHpfU5MLV4vGbCQcazb6p19iSw5pD2zyrVHgePg",
     id: "samfrench",
   });
@@ -10439,51 +10432,63 @@ const ReferralTableFr = createHookStory(() => {
 const UseReferralTable = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': UseReferralTable_stories,
-  ReferralTable: ReferralTable,
+  ReferralTable: ReferralTable$1,
   ReferralTableEn: ReferralTableEn,
   ReferralTableTr: ReferralTableTr,
   ReferralTableFr: ReferralTableFr
 });
 
-const Media_stories = {
-  title: "Components/Media",
+const HeroImage_stories = {
+  title: "Components/Hero Image",
+};
+const OverlayHeader = () => {
+  return (index.h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", layout: "overlay" }));
+};
+const OverlayDescription = () => {
+  return (index.h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", layout: "overlay" }));
 };
-const ImageOnly = () => {
-  return (index.h("sqm-media", { "image-url": "https://i.imgur.com/bTwu1Um.png", layout: "overlay" }));
+const OverlayButton = () => {
+  return (index.h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay" }));
 };
-const ImageWithHeader = () => {
-  return (index.h("sqm-media", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", layout: "overlay" }));
+const OverlayLong = () => {
+  return (index.h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "overlay" }));
 };
-const ImageWithDescription = () => {
-  return (index.h("sqm-media", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", layout: "overlay" }));
+const OverlayLeft = () => {
+  return (index.h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "left" }));
 };
-const ImageWithButton = () => {
-  return (index.h("sqm-media", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay" }));
+const OverlayCenter = () => {
+  return (index.h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "center" }));
 };
-const ImageCustomOverlay = () => {
-  return (index.h("sqm-media", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.9", layout: "overlay" }));
+const OverlayRight = () => {
+  return (index.h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "right" }));
 };
-const ImageTwoColumnLayout = () => {
-  return (index.h("sqm-media", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns" }));
+const OverlayCustom = () => {
+  return (index.h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.9", layout: "overlay" }));
 };
-const ImageTwoColumnLayoutReverse = () => {
-  return (index.h("sqm-media", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", imagePos: "right", imageMobilePos: "bottom" }));
+const Columns = () => {
+  return (index.h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns" }));
 };
-const ImageTwoColumnCustom = () => {
-  return (index.h("sqm-media", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "text-color": "#fffc4b", "background-color": "#ff7f7f" }));
+const ColumnsReverse = () => {
+  return (index.h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", imagePos: "right", imageMobilePos: "bottom" }));
+};
+const ColumnsCustom = () => {
+  return (index.h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "text-color": "#fffc4b", "background-color": "#ff7f7f" }));
 };
 
-const Media = /*#__PURE__*/Object.freeze({
+const HeroImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  'default': Media_stories,
-  ImageOnly: ImageOnly,
-  ImageWithHeader: ImageWithHeader,
-  ImageWithDescription: ImageWithDescription,
-  ImageWithButton: ImageWithButton,
-  ImageCustomOverlay: ImageCustomOverlay,
-  ImageTwoColumnLayout: ImageTwoColumnLayout,
-  ImageTwoColumnLayoutReverse: ImageTwoColumnLayoutReverse,
-  ImageTwoColumnCustom: ImageTwoColumnCustom
+  'default': HeroImage_stories,
+  OverlayHeader: OverlayHeader,
+  OverlayDescription: OverlayDescription,
+  OverlayButton: OverlayButton,
+  OverlayLong: OverlayLong,
+  OverlayLeft: OverlayLeft,
+  OverlayCenter: OverlayCenter,
+  OverlayRight: OverlayRight,
+  OverlayCustom: OverlayCustom,
+  Columns: Columns,
+  ColumnsReverse: ColumnsReverse,
+  ColumnsCustom: ColumnsCustom
 });
 
 const ReferralCard_stories = {
@@ -10492,7 +10497,7 @@ const ReferralCard_stories = {
 const media = (slot) => {
   return (index.h("sqm-portal-container", { gap: "large", slot: slot },
     "Get rewarded when your friend uses Klip",
-    index.h("sqm-media", { "image-url": "https://i.imgur.com/L3aRMde.png", "min-height": "0" })));
+    index.h("sqm-image", { "image-url": "https://i.imgur.com/IqB7GeS.png" })));
 };
 const sharebutton = (slot) => {
   return (index.h("sqm-portal-container", { gap: "large", slot: slot },
@@ -10642,6 +10647,43 @@ const ReferralCard = /*#__PURE__*/Object.freeze({
   TimelineWith4Rewards: TimelineWith4Rewards
 });
 
+const Image_stories = {
+  title: "Components/Image",
+};
+const Image = () => {
+  return index.h("sqm-image", { "image-url": "https://i.imgur.com/Amf0HWx.png" });
+};
+const ImageAlignLeft = () => {
+  return index.h("sqm-image", { "image-url": "https://i.imgur.com/Amf0HWx.png", align: "left" });
+};
+const ImageAlignCenter = () => {
+  return (index.h("sqm-image", { "image-url": "https://i.imgur.com/Amf0HWx.png", align: "center" }));
+};
+const ImageAlignRight = () => {
+  return (index.h("sqm-image", { "image-url": "https://i.imgur.com/Amf0HWx.png", align: "right" }));
+};
+const ImageMarginLeft = () => {
+  return index.h("sqm-image", { "image-url": "https://i.imgur.com/Amf0HWx.png", left: "100px" });
+};
+const ImageMarginRight = () => {
+  return (index.h("sqm-image", { "image-url": "https://i.imgur.com/Amf0HWx.png", right: "100px" }));
+};
+const ImageBackground = () => {
+  return (index.h("sqm-image", { "image-url": "https://i.imgur.com/Amf0HWx.png", "background-color": "firebrick" }));
+};
+
+const Image$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': Image_stories,
+  Image: Image,
+  ImageAlignLeft: ImageAlignLeft,
+  ImageAlignCenter: ImageAlignCenter,
+  ImageAlignRight: ImageAlignRight,
+  ImageMarginLeft: ImageMarginLeft,
+  ImageMarginRight: ImageMarginRight,
+  ImageBackground: ImageBackground
+});
+
 /**
  *
  * Themes
@@ -10654,7 +10696,7 @@ const ReferralCard = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default = `
+const Default$b = `
  // No CSS
 `;
 const Orangey = `
@@ -10688,7 +10730,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default,
+  Default: Default$b,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -12166,7 +12208,7 @@ const seenDeprecations = {};
 /**
  * @param {string} message
  */
-const error = (message) => {
+const error$1 = (message) => {
   console.error(message);
 };
 
@@ -12666,7 +12708,7 @@ const HLJS = function(hljs) {
 
     const language = getLanguage(languageName);
     if (!language) {
-      error(LANGUAGE_NOT_FOUND.replace("{}", languageName));
+      error$1(LANGUAGE_NOT_FOUND.replace("{}", languageName));
       throw new Error('Unknown language: "' + languageName + '"');
     }
 
@@ -13002,10 +13044,10 @@ const HLJS = function(hljs) {
     let lang = null;
     try {
       lang = languageDefinition(hljs);
-    } catch (error$1) {
-      error("Language definition for '{}' could not be registered.".replace("{}", languageName));
+    } catch (error$1$1) {
+      error$1("Language definition for '{}' could not be registered.".replace("{}", languageName));
       // hard or soft error
-      if (!SAFE_MODE) { throw error$1; } else { error(error$1); }
+      if (!SAFE_MODE) { throw error$1$1; } else { error$1(error$1$1); }
       // languages that have serious errors are replaced with essentially a
       // "plaintext" stand-in so that the code blocks will still get normal
       // css classes applied to them - and one bad language won't break the
@@ -13295,7 +13337,7 @@ const stories = [
   UseLeaderboard,
   Router,
   PortalFrame,
-  EditProfile$2,
+  EditProfile,
   FormMessage,
   NewPortal,
   SidebarItem,
@@ -13310,12 +13352,12 @@ const stories = [
   DividedLayout,
   ChangePassword,
   PortalProfile,
-  ReferralTable$1,
+  ReferralTable,
   ReferralTableCell,
   ReferralTableRewardsCell,
   UserName,
   PasswordField,
-  TaskCard$1,
+  TaskCard$2,
   PortalTemplates,
   ProgramMenu,
   PoweredByImg,
@@ -13335,10 +13377,11 @@ const stories = [
   RewardsTableCell,
   RewardsTable,
   UseReferralTable,
-  Media,
+  HeroImage,
   ReferralCard,
+  Image$1,
 ];
-let StencilStorybook = class {
+const StencilStorybook = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;