@saasquatch/mint-components 1.15.0-8 → 1.15.0-81

package/dist/cjs/{sqm-big-stat_41.cjs.entry.js → sqm-big-stat_43.cjs.entry.js}

@@ -2,30 +2,379 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-124aec2c.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const global = require('./global-16279e95.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-4f54e412.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-6847bc06.js');
+const utils = require('./utils-7cbd60cc.js');
 const JSS = require('./JSS-8503a151.js');
-require('./useReferralCodes-82e8797b.js');
-require('./mixins-f7e0377a.js');
-const copyTextView = require('./copy-text-view-9d4259f4.js');
-const reRender = require('./re-render-b324deab.js');
-const useChildElements = require('./useChildElements-1b35d945.js');
-require('./luxon-2926d85f.js');
-require('./sqm-text-span-view-56e48a78.js');
+require('./useReferralCodes-11cdf43b.js');
+require('./mixins-4761d472.js');
+const copyTextView = require('./copy-text-view-e5223a96.js');
+const reRender = require('./re-render-d516138a.js');
+const useChildElements = require('./useChildElements-966c9041.js');
+require('./luxon-949beaf2.js');
+require('./sqm-text-span-view-7a61ae4c.js');
 const index$1 = require('./index-8c6255f5.js');
-const useRegistrationFormState = require('./useRegistrationFormState-7b820f0c.js');
-const sqmPortalLoginView = require('./sqm-portal-login-view-84e99287.js');
-const usePortalLogin = require('./usePortalLogin-63d896d1.js');
+const emailRegistrationView = require('./email-registration-view-ace50780.js');
+const useRegistrationFormState = require('./useRegistrationFormState-bbee6e7b.js');
+const useInstantAccessRegistration = require('./useInstantAccessRegistration-08bcb487.js');
+const sqmPortalLoginView = require('./sqm-portal-login-view-bb50304c.js');
+const usePortalLogin = require('./usePortalLogin-6aa864ef.js');
 const AsYouType = require('./AsYouType-6788393a.js');
-const utilities = require('./utilities-78f5e169.js');
-const ShadowViewAddon = require('./ShadowViewAddon-afc40c22.js');
-require('./sqm-portal-container-view-4f15143a.js');
-const usePayoutStatus = require('./usePayoutStatus-4b5894ef.js');
+const utilities = require('./utilities-9a0c5e91.js');
+const ShadowViewAddon = require('./ShadowViewAddon-9bf35bfe.js');
+require('./sqm-portal-container-view-07e4343f.js');
+const parseStates = require('./parseStates-d1effc19.js');
+const usePayoutStatus = require('./usePayoutStatus-3b34dab1.js');
+
+/**
+ *
+ * Themes
+ *
+ * Export only valid CSS. Those will be injected into style tags.
+ *
+ * Useful links:
+ *  - https://brandcolors.net/
+ *  - Shoelace color generator: https://codepen.io/claviska/full/QWveRgL
+ *
+ */
+// @ts-nocheck
+const Default = null;
+const Netflix = {
+  main: {
+    brandFont: "Netflix Sans, Arial, sans-serif",
+    brandColor: "#E50914",
+  },
+  border: {
+    borderColor: "#333333",
+    borderRadius: 4,
+    borderThickness: 1,
+  },
+  color: {
+    textColorShades: {
+      mainText: "white",
+      subduedText: "#B3B3B3",
+    },
+    backgroundColor: "#101010",
+    accentColorShades: {
+      text: "#E50914",
+      icon: "#E50914",
+      border: "#E50914",
+      background: "#300609",
+    },
+    success: {
+      text: "#66BB6A",
+      border: "#4CAF50",
+      background: "#1B5E20",
+      iconAndBadge: "#4CAF50",
+    },
+    warning: {
+      text: "#FFCA28",
+      border: "#FFA726",
+      background: "#F57C00",
+      iconAndBadge: "#FFA726",
+    },
+    critical: {
+      text: "#EF9A9A",
+      border: "#E50914",
+      background: "#B71C1C",
+      iconAndBadge: "#E50914",
+    },
+    informative: {
+      text: "#64B5F6",
+      border: "#42A5F5",
+      background: "#1976D2",
+      iconAndBadge: "#42A5F5",
+    },
+    neutral: {
+      text: "white",
+      iconAndBadge: "#B3B3B3",
+      border: "#333333",
+      background: "#222222",
+    },
+  },
+  primaryButton: {
+    buttonColor: {
+      background: "#E50914",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#CC0000",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    borderRadius: 4,
+  },
+  secondaryButton: {
+    buttonColor: {
+      background: "transparent",
+      border: "#B3B3B3",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#333333",
+      border: "#B3B3B3",
+      label: "#FFFFFF",
+    },
+    borderRadius: 4,
+  },
+  formFields: {
+    formFieldColor: {
+      background: "#222222",
+      border: "#B3B3B3",
+      inputText: "#B3B3B3",
+    },
+    hoverStateColor: "#777777",
+    selectedStateColor: "#E50914",
+    borderRadius: 4,
+  },
+};
+const Amazon = {
+  main: {
+    brandFont: "Amazon Ember, Arial, sans-serif",
+    brandColor: "#FF9900",
+  },
+  border: {
+    borderColor: "#D5D9D9",
+    borderRadius: 4,
+    borderThickness: 1,
+  },
+  color: {
+    backgroundColor: "#ffffff",
+    textColorShades: {
+      mainText: "#2f2f2f",
+      subduedText: "#565959",
+    },
+    accentColorShades: {
+      text: "#FF9900",
+      icon: "#FF9900",
+      border: "#FFBF66",
+      background: "#FFF4DD",
+    },
+    success: {
+      text: "#198754",
+      border: "#BCE8B2",
+      background: "#D4EDDA",
+      iconAndBadge: "#28A745",
+    },
+    warning: {
+      text: "#856404",
+      border: "#FFEBA2",
+      background: "#FFF3CD",
+      iconAndBadge: "#FFC107",
+    },
+    critical: {
+      text: "#721C24",
+      border: "#F5C6CB",
+      background: "#F8D7DA",
+      iconAndBadge: "#DC3545",
+    },
+    informative: {
+      text: "#004085",
+      border: "#B8DAFF",
+      background: "#CCE5FF",
+      iconAndBadge: "#007BFF",
+    },
+    neutral: {
+      text: "#232F3E",
+      iconAndBadge: "#565959",
+      border: "#D5D9D9",
+      background: "#F0F2F2",
+    },
+  },
+  primaryButton: {
+    buttonColor: {
+      background: "#FF9900",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#EB9100",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    borderRadius: 4,
+  },
+  secondaryButton: {
+    buttonColor: {
+      background: "#FFFFFF",
+      border: "#888C8C",
+      label: "#232F3E",
+    },
+    buttonHoverColor: {
+      background: "#F0F2F2",
+      border: "#888C8C",
+      label: "#232F3E",
+    },
+    borderRadius: 4,
+  },
+  formFields: {
+    formFieldColor: {
+      background: "#FFFFFF",
+      border: "#D5D9D9",
+      inputText: "#2f2f2f",
+    },
+    borderRadius: 4,
+    hoverStateColor: "#A2A2A2",
+    selectedStateColor: "#007185",
+  },
+};
+const Spotify = {
+  main: {
+    brandColor: "#1ed760",
+  },
+  border: {
+    borderColor: "#f4f4f4",
+    borderRadius: 18,
+    borderThickness: 1,
+  },
+  color: {
+    textColorShades: {
+      mainText: "white",
+      subduedText: "white",
+    },
+    backgroundColor: "#121212",
+    accentColorShades: {
+      icon: "#1ed760",
+    },
+  },
+  primaryButton: {
+    buttonColor: {
+      background: "#1ed760",
+      border: "transparent",
+      label: "#121212",
+    },
+    buttonHoverColor: {
+      background: "#1DB954",
+      border: "transparent",
+      label: "#121212",
+    },
+    borderRadius: 30,
+  },
+  secondaryButton: {
+    buttonColor: {
+      background: "#191414",
+      border: "#FFFFFF",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#282828",
+      border: "#FFFFFF",
+      label: "#121212",
+    },
+    borderRadius: 30,
+  },
+  formFields: {
+    formFieldColor: {
+      background: "#121212",
+      border: "#7c7c7c",
+      inputText: "#fff",
+    },
+    borderRadius: 30,
+    hoverStateColor: "white",
+    selectedStateColor: "white",
+  },
+};
+const Google = {
+  main: { brandColor: "#4285F4", brandFont: "Roboto, Arial, sans-serif" },
+  border: {
+    borderColor: "#DADCE0",
+    borderRadius: 4,
+    borderThickness: 1,
+  },
+  color: {
+    textColorShades: {
+      mainText: "#212124",
+      subduedText: "#5F6368",
+    },
+    backgroundColor: "#FFFFFF",
+    accentColorShades: {
+      text: "#1A73E8",
+      border: "#8AB4F8",
+      background: "#E8F0FE",
+      icon: "#4285F4",
+    },
+    success: {
+      text: "#044e1d",
+      border: "#A8DCD7",
+      background: "#E6F4EA",
+      iconAndBadge: "#34A853",
+    },
+    warning: {
+      text: "#996a3d",
+      border: "#FCD667",
+      background: "#FFF7EE",
+      iconAndBadge: "#FBBC04",
+    },
+    critical: {
+      text: "#760b09",
+      border: "#F28B82",
+      background: "#FCE8E6",
+      iconAndBadge: "#EA4335",
+    },
+    informative: {
+      text: "#01368c",
+      border: "#BFDBFE",
+      background: "#E8F0FE",
+      iconAndBadge: "#4285F4",
+    },
+    neutral: {
+      text: "#202124",
+      border: "#DADCE0",
+      background: "#F8F9FA",
+      iconAndBadge: "#5F6368",
+    },
+  },
+  primaryButton: {
+    buttonColor: {
+      background: "#4285F4",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#3C7CD1",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    borderRadius: 4,
+  },
+  secondaryButton: {
+    buttonColor: {
+      background: "#FFFFFF",
+      border: "#DADCE0",
+      label: "#4285F4",
+    },
+    buttonHoverColor: {
+      background: "#E8F0FE",
+      border: "#DADCE0",
+      label: "#4285F4",
+    },
+    borderRadius: 4,
+  },
+  formFields: {
+    formFieldColor: {
+      background: "#FFFFFF",
+      border: "#DADCE0",
+      inputText: "#202124",
+    },
+    borderRadius: 4,
+    hoverStateColor: "#9AA0A6",
+    selectedStateColor: "#4285F4",
+  },
+};
+
+const Themes = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Default: Default,
+  Netflix: Netflix,
+  Amazon: Amazon,
+  Spotify: Spotify,
+  Google: Google
+});
 
 const BigStat = class {
   constructor(hostRef) {
@@ -35,10 +384,21 @@ const BigStat = class {
      *
      * @uiName Flex reverse
      * @default
+     * @uiGroup Additional Settings
      */
     this.flexReverse = false;
+    /**
+     * Controls the alignment of the flexbox
+     *
+     * @uiName Alignment
+     * @uiType string
+     * @uiEnum ["left", "right", "center"]
+     * @uiEnumNames ["Left", "Right", "Center"]
+     * @uiGroup Additional Settings
+     */
+    this.alignment = "center";
     this.ignored = true;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -51,45 +411,86 @@ const BigStat = class {
   }
 };
 
+function t(t,n,r){return Math.min(Math.max(t,r),n)}class n extends Error{constructor(t){super(`Failed to parse color: "${t}"`);}}function r(r){if("string"!=typeof r)throw new n(r);if("transparent"===r.trim().toLowerCase())return [0,0,0,0];let e=r.trim();e=u.test(r)?function(t){const r=t.toLowerCase().trim(),e=o[function(t){let n=5381,r=t.length;for(;r;)n=33*n^t.charCodeAt(--r);return (n>>>0)%2341}(r)];if(!e)throw new n(t);return `#${e}`}(r):r;const f=s.exec(e);if(f){const t=Array.from(f).slice(1);return [...t.slice(0,3).map(t=>parseInt(_(t,2),16)),parseInt(_(t[3]||"f",2),16)/255]}const p=i.exec(e);if(p){const t=Array.from(p).slice(1);return [...t.slice(0,3).map(t=>parseInt(t,16)),parseInt(t[3]||"ff",16)/255]}const z=a.exec(e);if(z){const t=Array.from(z).slice(1);return [...t.slice(0,3).map(t=>parseInt(t,10)),parseFloat(t[3]||"1")]}const h=c.exec(e);if(h){const[e,o,_,s]=Array.from(h).slice(1).map(parseFloat);if(t(0,100,o)!==o)throw new n(r);if(t(0,100,_)!==_)throw new n(r);return [...l(e,o,_),s||1]}throw new n(r)}const e=t=>parseInt(t.replace(/_/g,""),36),o="1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce((t,n)=>{const r=e(n.substring(0,3)),o=e(n.substring(3)).toString(16);let _="";for(let t=0;t<6-o.length;t++)_+="0";return t[r]=`${_}${o}`,t},{}),_=(t,n)=>Array.from(Array(n)).map(()=>t).join(""),s=new RegExp(`^#${_("([a-f0-9])",3)}([a-f0-9])?$`,"i"),i=new RegExp(`^#${_("([a-f0-9]{2})",3)}([a-f0-9]{2})?$`,"i"),a=new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${_(",\\s*(\\d+)\\s*",2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,"i"),c=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,u=/^[a-z]+$/i,f=t=>Math.round(255*t),l=(t,n,r)=>{let e=r/100;if(0===n)return [e,e,e].map(f);const o=(t%360+360)%360/60,_=(1-Math.abs(2*e-1))*(n/100),s=_*(1-Math.abs(o%2-1));let i=0,a=0,c=0;o>=0&&o<1?(i=_,a=s):o>=1&&o<2?(i=s,a=_):o>=2&&o<3?(a=_,c=s):o>=3&&o<4?(a=s,c=_):o>=4&&o<5?(i=s,c=_):o>=5&&o<6&&(i=_,c=s);const u=e-_/2;return [i+u,a+u,c+u].map(f)};function p(t){const[n,e,o,_]=r(t).map((t,n)=>3===n?t:t/255),s=Math.max(n,e,o),i=Math.min(n,e,o),a=(s+i)/2;if(s===i)return [0,0,a,_];const c=s-i;return [60*(n===s?(e-o)/c+(e<o?6:0):e===s?(o-n)/c+2:(n-e)/c+4),a>.5?c/(2-s-i):c/(s+i),a,_]}function z(n,r,e,o){return `hsla(${(n%360).toFixed()}, ${t(0,100,100*r).toFixed()}%, ${t(0,100,100*e).toFixed()}%, ${parseFloat(t(0,1,o).toFixed(3))})`}
+
+const colorScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+const lScale = [
+  0.95,
+  0.86,
+  0.76,
+  0.66,
+  0.56,
+  0.46,
+  0.39,
+  0.32,
+  0.25,
+  0.18,
+  0.15,
+];
+// https://github.com/ricokahler/color2k/blob/main/src/parseToRgba.ts
+const hslaRegex = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;
+function niceParseToHsla(color) {
+  const normalizedColor = color.trim();
+  const hslaMatch = hslaRegex.exec(normalizedColor);
+  if (hslaMatch) {
+    const [h, s, l, a] = Array.from(hslaMatch).slice(1).map(parseFloat);
+    if (t(0, 100, s) !== s)
+      throw new n(color);
+    if (t(0, 100, l) !== l)
+      throw new n(color);
+    return [h, s / 100, l, a || 1];
+  }
+  // Warning -- converts to RGB first, so is lossy
+  return p(color);
+}
+function generateScale(color, name = "primary") {
+  const [h, s, l, a] = niceParseToHsla(color);
+  return lScale
+    .map((l) => z(h, s, l, a))
+    .map((color, index) => {
+    return `--sl-color-${name}-${colorScale[index]}: ${color};\n`;
+  });
+}
 /**
- * Build a font CSS URL using the Google Fonts CSS API
- *
- * Docs: https://developers.google.com/fonts/docs/css2
+ * Generated a Shoelace color scale css string from a base color
  *
- * @param fonts - the font family or families to load
- * @returns url to a .css file
+ * @param color
+ * @param name
+ * @returns
  */
-function buildFontsCssUrl(...fonts) {
-  const queryString = fonts.map(f => `family=${encodeURIComponent(f)}`).join("&");
-  return `https://fonts.googleapis.com/css2?${queryString}`;
+function autoColorScaleCss(color, name = "primary") {
+  return generateScale(color, name).join("\n");
 }
 
 const BrandComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     function getCss(brandColor) {
       if (brandColor) {
         try {
-          return ShadowViewAddon.autoColorScaleCss(brandColor);
+          return autoColorScaleCss(brandColor);
         }
         catch { }
       }
       return undefined;
     }
-    const css = (_a = getCss(this.brandColor)) !== null && _a !== void 0 ? _a : "";
-    const sanitizedFont = ((_b = this.brandFont) !== null && _b !== void 0 ? _b : "Nunito Sans").trim() || undefined;
-    stencilHooks_module.useEffect(() => {
-      if (!sanitizedFont) {
+    const brandingConfigFont = (_b = (_a = window.SquatchBrandingConfig) === null || _a === void 0 ? void 0 : _a.main) === null || _b === void 0 ? void 0 : _b.brandFont;
+    const css = ((_d = (_c = window.SquatchBrandingConfig) === null || _c === void 0 ? void 0 : _c.main) === null || _d === void 0 ? void 0 : _d.brandColor) ? ""
+      : (_e = getCss(this.brandColor)) !== null && _e !== void 0 ? _e : "";
+    const sanitizedFont = ((_f = this.brandFont) !== null && _f !== void 0 ? _f : "Nunito Sans").trim() || undefined;
+    domContextHooks_module.useEffect(() => {
+      if (!sanitizedFont || brandingConfigFont) {
         // Nothing required in default case.
+        // Don't add font if it's set in the global config
         return;
       }
       const sheet = document.createElement("link");
-      sheet.setAttribute("href", buildFontsCssUrl(sanitizedFont));
+      sheet.setAttribute("href", global.buildFontsCssUrl(sanitizedFont));
       sheet.setAttribute("rel", "stylesheet");
       document.head.appendChild(sheet);
       return () => document.head.removeChild(sheet);
@@ -105,6 +506,10 @@ const BrandComponent = class {
            - resets css variable inheritence for fonts
           
           */
+
+          ${brandingConfigFont
+      ? ``
+      : `
           ::slotted(*) {
             --sl-font-sans: "${font}", arial;
             --sl-input-font-family: "${font}", arial;
@@ -112,6 +517,7 @@ const BrandComponent = class {
             font-family:  "${font}", arial;
 			
             ${css}
+          `}
 
             --sl-focus-ring-color-primary: var(--sl-color-primary-100);
             --sl-input-border-color-focus: var(--sl-color-primary-500);
@@ -120,6 +526,195 @@ const BrandComponent = class {
   }
 };
 
+const LOCAL_STORAGE_BRAND_KEY = "localStorageBrandKey";
+const LOCAL_STORAGE_BRAND_CONFIG_KEY = "localStorageBrandConfigKey";
+const SqmBrandSelector = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selectedBrand = "Netflix";
+    this.brands = [
+      {
+        name: "Netflix",
+        logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803365/netflix_ftjbrr.png",
+      },
+      {
+        name: "Amazon",
+        logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803366/amazon_mc22fr.png",
+      },
+      {
+        name: "Spotify",
+        logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803510/spotify_j5qi1r.png",
+      },
+      {
+        name: "Google",
+        logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803168/pngimg.com_-_google_PNG19644_jvypwl.png",
+      },
+    ];
+    const storedBrand = localStorage.getItem(LOCAL_STORAGE_BRAND_KEY);
+    const initialBrandName = storedBrand;
+    this.selectedBrand = initialBrandName;
+    // Initialize window.SquatchBrandingConfig based on the loaded brand
+    const initialConfig = Themes[initialBrandName] || Netflix;
+    window.SquatchBrandingConfig = initialConfig;
+    const event = new CustomEvent("brandingConfigUpdated", {
+      detail: window.SquatchBrandingConfig,
+    });
+    window.dispatchEvent(event);
+  }
+  componentDidLoad() {
+    const storedBrand = localStorage.getItem(LOCAL_STORAGE_BRAND_KEY);
+    const initialBrandName = storedBrand;
+    this.selectedBrand = initialBrandName;
+  }
+  disconnectedCallback() { }
+  updateBrand(brandName) {
+    this.selectedBrand = brandName;
+    const configToSet = Themes[brandName] || Netflix;
+    const brandConfigString = JSON.stringify(configToSet);
+    localStorage.setItem(LOCAL_STORAGE_BRAND_KEY, brandName);
+    localStorage.setItem(LOCAL_STORAGE_BRAND_CONFIG_KEY, brandConfigString);
+    window.SquatchBrandingConfig = configToSet;
+    window.location.reload();
+    const event = new CustomEvent("brandingConfigUpdated", {
+      detail: window.SquatchBrandingConfig,
+    });
+    window.dispatchEvent(event);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("style", null, `
+          @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+
+          :host {
+            display: block; /* Ensure the custom element itself is a block-level element */
+            font-family: 'Inter', sans-serif;
+          }
+
+          .card-container {
+            background-color: #fff !important; 
+            border-radius: 18px; 
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); 
+            width: 100%;
+            max-width: 350px;
+            overflow: hidden;
+            padding: 10px;
+            position: fixed;
+            bottom: 0;
+            right: 0;
+            z-index: 999999;
+            border: 1px solid #ccc;
+            margin: 10px;
+          }
+
+          .card-heading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-bottom: 10px;
+            color: black;
+            margin: 0;
+            font-size: 16px;
+          }
+
+          .segmented-control-container {
+            display: flex;
+            background-color: #e5e7eb !important; 
+            border-radius: 9999px; 
+            padding: 0.25rem; 
+            margin-left: auto;
+            margin-right: auto;
+            max-width: 28rem;
+            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); 
+          }
+
+          .brand-segment {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            flex: 1;
+            padding: 0px 8px; 
+            cursor: pointer;
+            transition: all 300ms ease-in-out;
+            border-radius: 9999px;
+            color: #4b5563; 
+            cursor: pointer;
+          }
+
+          .brand-segment:hover {
+            background-color: #f3f4f6 !important;
+          }
+
+          .brand-segment.active {
+            background-color: #fff !important;
+            color: #1f2937; 
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+          }
+
+          .brand-logo {
+            height: 40px;
+            width: 40px; 
+            object-fit: contain;
+          }
+
+          .brand-name {
+            font-size: 0.75rem; 
+            line-height: 1rem; 
+            font-weight: 600; 
+            color: #4b5563;
+          }
+
+          .brand-segment.active .brand-name {
+            color: #1f2937; 
+          }
+
+          .content-area {
+            padding: 2rem; 
+          }
+
+          .selected-text {
+            color: #4b5563; 
+            text-align: center;
+            font-size: 1.125rem; 
+            line-height: 1.75rem; 
+          }
+
+          .selected-brand-name {
+            font-weight: 700; /* font-bold */
+            color: #6d28d9; /* text-purple-700 */
+          }
+
+          .dynamic-content-box {
+            margin-top: 1.5rem; /* mt-6 */
+            padding: 1rem; /* p-4 */
+            background-color: #f9fafb; /* bg-gray-50 */
+            border-radius: 0.5rem; /* rounded-lg */
+            color: #374151; /* text-gray-700 */
+            font-size: 0.875rem; /* text-sm */
+            line-height: 1.25rem; /* text-sm */
+            font-style: italic;
+          }
+
+          /* Responsive adjustments for smaller screens if needed */
+          @media (max-width: 640px) {
+              .segmented-control-container {
+                  max-width: 100%; /* Allows it to take full width on small screens */
+                  padding: 0.15rem; /* Slightly less padding */
+              }
+              .brand-segment {
+                  padding-left: 0.5rem;
+                  padding-right: 0.5rem;
+              }
+              .brand-logo {
+                  height: 1.8rem; /* Slightly smaller on mobile */
+              }
+          }
+          `), index.h("div", { class: "card-container" }, index.h("h2", { class: "card-heading" }, "Select Branding"), index.h("div", { class: "segmented-control-container" }, this.brands.map((brand) => (index.h("div", { key: brand.name, class: `brand-segment ${this.selectedBrand === brand.name ? "active" : ""}`, onClick: () => this.updateBrand(brand.name) }, index.h("img", { src: brand.logoUrl, alt: `${brand.name} Logo`, class: "brand-logo", onError: (e) => {
+        e.target.src =
+          "https://placehold.co/80x40/cccccc/000000?text=Logo";
+      } }))))))));
+  }
+};
+
 const CardFeed = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -133,7 +728,7 @@ const CardFeed = class {
      * @uiType number
      */
     this.gap = 24;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -166,7 +761,7 @@ function RequiredPropsError({ missingProps, heading = "There was a problem loadi
   if (!missingProps)
     return false;
   const host = index_module._();
-  const [detailsOpen, setDetailsOpen] = stencilHooks_module.useState(false);
+  const [detailsOpen, setDetailsOpen] = domContextHooks_module.useState(false);
   return (index.h("sl-alert", { type: "danger", open: true },
     index.h("style", { type: "text/css" }, styleString),
     index.h("div", { slot: "icon", class: sheet.classes.IconStyle },
@@ -195,9 +790,9 @@ function RequiredPropsError({ missingProps, heading = "There was a problem loadi
 
 function useCheckboxField(props) {
   var _a;
-  const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
-  const [checked, setChecked] = stencilHooks_module.useState(false);
-  stencilHooks_module.useEffect(() => {
+  const registrationFormState = domContextHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
+  const [checked, setChecked] = domContextHooks_module.useState(false);
+  domContextHooks_module.useEffect(() => {
     var _a, _b;
     if ((_a = registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData) === null || _a === void 0 ? void 0 : _a[props.checkboxName]) {
       setChecked(!!((_b = registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData) === null || _b === void 0 ? void 0 : _b[props.checkboxName]));
@@ -241,7 +836,7 @@ const CheckboxField = class {
      * @uiName Optional
      */
     this.checkboxOptional = false;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -330,7 +925,7 @@ function useCouponCode(props) {
     })
     : undefined;
   const copyString = (reward === null || reward === void 0 ? void 0 : reward.fuelTankCode) || "...";
-  const [open, setOpen] = stencilHooks_module.useState(false);
+  const [open, setOpen] = domContextHooks_module.useState(false);
   function onClick() {
     // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
     // Only if called from a user-initiated event
@@ -396,6 +991,7 @@ function useCouponCode(props) {
     dateAvailable,
     loading,
     errorType,
+    buttonType: props.buttonType || "primary",
   };
 }
 
@@ -419,6 +1015,7 @@ const CouponCode = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -432,6 +1029,7 @@ const CouponCode = class {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
      */
     this.buttonStyle = "icon";
     /**
@@ -493,7 +1091,16 @@ const CouponCode = class {
      * @uiGroup Coupon code error
      */
     this.couponCodePlaceholder = "...";
-    stencilHooks_module.h$1(this);
+    /**
+     * The type of the button (primary or secondary) that will be used to copy the link.
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -505,7 +1112,7 @@ const CouponCode = class {
   }
 };
 function useDemoCouponCode(props) {
-  const [open, setOpen] = stencilHooks_module.useState(false);
+  const [open, setOpen] = domContextHooks_module.useState(false);
   const copyString = "THANKSJANE125uv125";
   return cjs.cjs({
     copyString,
@@ -516,6 +1123,11 @@ function useDemoCouponCode(props) {
     error: false,
     couponCodePlaceholder: props.couponCodePlaceholder,
     couponCodeLabel: props.couponCodeLabel,
+    borderColor: props.borderColor,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
@@ -530,14 +1142,23 @@ function useDemoCouponCode(props) {
 function DividedLayoutView(props, children) {
   const getBorder = () => {
     if (props.direction === "row") {
-      return { "border-right": props.dividerStyle || "1px solid #EAEAEA" };
+      return {
+        "border-right": props.borderless
+          ? "none"
+          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
+      };
     }
     else {
-      return { "border-bottom": props.dividerStyle || "1px solid #EAEAEA" };
+      return {
+        "border-bottom": props.borderless
+          ? "none"
+          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
+      };
     }
   };
   const style = {
     LayoutContainer: {
+      background: props.backgroundColor,
       display: "contents",
       // First style applies when shadow DOM is disabled, second applies when shadow DOM is enabled
       "& > :not(:last-child)": {
@@ -553,11 +1174,10 @@ function DividedLayoutView(props, children) {
     flex: 1;
     box-sizing: border-box;
     flex-direction: ${props.direction};
-    background-color: var(--sqm-content-background);
+    background-color: var(--sqm-portal-background);
+    color: var(--sqm-text);
     overflow-x: clip;
-    ${props.direction === "column"
-    ? "width: 100%; max-width: var(--sqm-portal-main-width);"
-    : ""}
+    ${props.direction === "column" ? "width: 100%; max-width: 100%" : ""}
     ${props.contentAreaWidth !== null
     ? `max-width: ${props.contentAreaWidth} !important;`
     : ""}
@@ -589,11 +1209,18 @@ const DividedLayout = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     /**
+     * @undocumented
      * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.
      * @uiName Border style
      */
-    this.dividerStyle = "1px solid #EAEAEA";
-    stencilHooks_module.h$1(this);
+    this.dividerStyle = "var(--sqm-border-thickness) solid var(--sqm-border-color)";
+    /**
+     * Background color of the divider
+     * @uiName Divider Background Color
+     * @uiWidget color
+     */
+    this.backgroundColor = "#FFFFFF";
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -602,7 +1229,7 @@ const DividedLayout = class {
 };
 
 function useDropdownField() {
-  const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
+  const registrationFormState = domContextHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
   return {
     states: {
       registrationFormState,
@@ -627,7 +1254,7 @@ const DropdownField = class {
      * @default
      */
     this.dropdownOptional = false;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -702,13 +1329,13 @@ const defaultFormState = {
 };
 function useEditProfile(props) {
   const userIdent = index_module.J();
-  const [showEdit, setShowEdit] = stencilHooks_module.useState(false);
-  const [error, setError] = stencilHooks_module.useState("");
-  const [userData, setUserData] = stencilHooks_module.useState(undefined);
-  const [formState, setFormState] = stencilHooks_module.useState(defaultFormState);
+  const [showEdit, setShowEdit] = domContextHooks_module.useState(false);
+  const [error, setError] = domContextHooks_module.useState("");
+  const [userData, setUserData] = domContextHooks_module.useState(undefined);
+  const [formState, setFormState] = domContextHooks_module.useState(defaultFormState);
   const userDataResponse = index_module.wn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
   const [upsertUser, upsertUserResponse] = index_module.$e(UPSERT_USER);
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     if ((upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading) || !showEdit)
       return;
     if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) {
@@ -731,10 +1358,10 @@ function useEditProfile(props) {
       setShowEdit(false);
     }
   }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading]);
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     setUserData((data) => { var _a; return ({ ...data, ...(_a = userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer }); });
   }, [userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data]);
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     var _a;
     if ((_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) === null || _a === void 0 ? void 0 : _a.message) {
       setFormState((state) => ({ ...state, error: props.networkErrorMessage }));
@@ -830,7 +1457,7 @@ const EditProfile = class {
      * @uiName Form error message
      */
     this.formErrorText = "Please correct the errors below to update your profile.";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -913,12 +1540,12 @@ const Hero = class {
      */
     this.minHeight = 200;
     /**
-     * Can be an image url, colour or Shoelace variable.
+     * Add an image or select a color. Recommended image aspect ratio of 4:5
      *
      * @uiName Background
      * @uiWidget Background
      */
-    this.background = "var(--sl-color-gray-50)";
+    this.background = "#f9fafb";
     /**
      * @uiName Padding size
      * @uiEnum ["none", "small", "medium","large"]
@@ -933,7 +1560,11 @@ const Hero = class {
      * @uiEnumNames ["Wrap", "Wrap Reverse"]
      */
     this.wrapDirection = "wrap";
-    stencilHooks_module.h$1(this);
+    /**
+     * @uiName Hide the column in mobile view (can only be used when two columns are present)
+     */
+    this.columnToHideInMobile = null;
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   // TODO: Improve empty slot behavior with useChildElements to check for empty slot
@@ -961,7 +1592,7 @@ function HeroImageView(props, children) {
         width: "100%",
         height: "100%",
         position: "absolute",
-        background: props.overlayColor || "var(--sl-color-primary-900)",
+        background: props.overlayColor || "var(--sl-color-black)",
         opacity: props.overlayOpacity,
       },
     },
@@ -1068,7 +1699,7 @@ function HeroImageView(props, children) {
       index.h("div", { class: sheet.classes.Overlay, part: "sqm-overlay" },
         props.header && (index.h("div", { class: sheet.classes.Header }, props.header)),
         props.description && (index.h("div", { class: sheet.classes.Description }, props.description)),
-        props.buttonText && (index.h("sl-button", { class: sheet.classes.Button, type: "primary", exportparts: "base: primarybutton-base", onClick: () => props.buttonNewTab
+        props.buttonText && (index.h("sl-button", { class: sheet.classes.Button, type: "primary", exportparts: `base: ${props.buttonType}button-base`, onClick: () => props.buttonNewTab
             ? window.open(props.buttonLink)
             : window.open(props.buttonLink, "_parent") }, props.buttonText)),
         children && children)));
@@ -1092,6 +1723,7 @@ const HeroImage = class {
     index.registerInstance(this, hostRef);
     /**
      * @uiName Overlay opacity
+     * @uiGroup Style
      */
     this.overlayOpacity = "0.75";
     /**
@@ -1099,11 +1731,13 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["overlay", "columns"]
      * @uiEnumNames ["Overlay", "Two-column"]
+     * @uiGroup Style
      */
     this.layout = "overlay";
     /**
      * @uiName Image percentage
      * @uiType number
+     * @uiGroup Style
      */
     this.imagePercentage = 50;
     /**
@@ -1111,6 +1745,7 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.imagePos = "center";
     /**
@@ -1118,6 +1753,7 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["top", "bottom"]
      * @uiEnumNames ["Top", "Bottom"]
+     * @uiGroup Style
      */
     this.imageMobilePos = "top";
     /**
@@ -1130,6 +1766,7 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     * @uiGroup Style
      */
     this.paddingText = "xxxx-large";
     /**
@@ -1137,9 +1774,19 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     * @uiGroup Style
      */
     this.paddingImage = "none";
-    stencilHooks_module.h$1(this);
+    /**
+     * The type of the button that is used (primary or secondary).
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1151,7 +1798,7 @@ const SqmHookStoryContainer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1208,7 +1855,7 @@ const Image = class {
 };
 
 function useInputField() {
-  const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
+  const registrationFormState = domContextHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
   return {
     states: {
       registrationFormState: registrationFormState,
@@ -1236,7 +1883,7 @@ const InputField = class {
      * @default
      */
     this.fieldOptional = false;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1396,7 +2043,7 @@ function useLeaderboard(props) {
     rowNumber: (_k = (_j = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _j === void 0 ? void 0 : _j.leaderboardRank) === null || _k === void 0 ? void 0 : _k.rowNumber,
   };
   // Show feature enforcement if request was forbidden
-  const isEssentials = stencilHooks_module.useMemo(() => {
+  const isEssentials = domContextHooks_module.useMemo(() => {
     var _a, _b;
     return !!((_b = (_a = leaderboardErrors === null || leaderboardErrors === void 0 ? void 0 : leaderboardErrors.response) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b.find((error) => { var _a, _b; return ((_b = (_a = error === null || error === void 0 ? void 0 : error.extensions) === null || _a === void 0 ? void 0 : _a.apiError) === null || _b === void 0 ? void 0 : _b.statusCode) === 403; }));
   }, [leaderboardErrors]);
@@ -1427,13 +2074,6 @@ const Leaderboard = class {
      * @uiName Width
      */
     this.width = "100%";
-    /**
-     * Hide the viewer's leaderboard row if not in the top results.
-     *
-     * @uiName Hide viewing user
-     * @default
-     */
-    this.hideViewer = false;
     /**
      * @uiName Viewing user text
      */
@@ -1456,8 +2096,15 @@ const Leaderboard = class {
      * @uiName Maximum rows number
      */
     this.maxRows = 10;
+    /**
+     * Hide the viewer's leaderboard row if not in the top results.
+     *
+     * @uiName Hide viewing user
+     * @default
+     */
+    this.hideViewer = false;
     this.ignored = true;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
     ShadowViewAddon.withShadowView(this);
   }
   disconnectedCallback() { }
@@ -1479,6 +2126,12 @@ const Leaderboard = class {
       showRank: this.showRank,
       rankSuffix: this.rankSuffix,
       width: this.width,
+      viewingUserHighlightColor: this.viewingUserHighlightColor,
+      viewingUserHighlightTextColor: this.viewingUserHighlightTextColor,
+      background: this.background,
+      borderColor: this.borderColor,
+      textColor: this.textColor,
+      borderRadius: this.borderRadius,
     };
     const demoProps = { ...props, demoData: this.demoData };
     const viewprops = index_module.isDemo()
@@ -1533,7 +2186,6 @@ function useLeaderboardDemo(props) {
       hasLeaders: true,
       isEssentials: false,
       styles: {
-        // viewingUserHighlightColor: props.viewingUserHighlightColor,
         usersheading: props.usersheading
           ? props.usersheading
           : "Top referrers",
@@ -1550,6 +2202,12 @@ function useLeaderboardDemo(props) {
         hideNames: props.hideNames,
         rankSuffix: props.rankSuffix,
         width: props.width,
+        viewingUserHighlightColor: props.viewingUserHighlightColor,
+        viewingUserHighlightTextColor: props.viewingUserHighlightTextColor,
+        background: props.background,
+        borderColor: props.borderColor,
+        textColor: props.textColor,
+        borderRadius: props.borderRadius,
       },
     },
     data: {
@@ -1622,7 +2280,7 @@ const MarketingEmailsCheckbox = class {
      * @undocumented
      */
     this.checkboxName = "marketingEmailOptIn";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1648,7 +2306,7 @@ function useCheckboxFieldDemo$1(props) {
 }
 
 function useNameFields(props) {
-  const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
+  const registrationFormState = domContextHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
   return {
     states: {
       registrationFormState,
@@ -1672,7 +2330,7 @@ const NameFields = class {
      * @uiName Last name label
      */
     this.lastNameLabel = "Last Name";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1710,10 +2368,10 @@ function handleMenu(e) {
   index_module.jn.push(e.detail.item.value);
 }
 function useNavigationMenu(props) {
-  const ref = stencilHooks_module.useRef();
+  const ref = domContextHooks_module.useRef();
   const [, rerender] = index_module.yn();
   const user = index_module.J();
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => handleMenu(e));
   }, [ref.current]);
@@ -1737,7 +2395,7 @@ const NavigationMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1770,7 +2428,7 @@ const style$2 = {
     marginLeft: "auto",
   },
   PayoutButtonDescription: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-small)",
     margin: "0",
   },
@@ -1809,7 +2467,7 @@ const GET_PAYOUT_DETAILS = index_module.dist.gql `
 function usePayoutButton(props) {
   var _a, _b, _c;
   const { data, refetch } = index_module.wn(GET_PAYOUT_DETAILS, {});
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     const cb = () => refetch();
     window.addEventListener("sqm:tax-form-updated", cb);
     return () => window.removeEventListener("sqm:tax-form-updated", cb);
@@ -1835,7 +2493,7 @@ const PayoutButtonScroll = class {
      */
     this.payoutButtonDescription = "Check your payout settings to see when you’ll get paid out next";
     this.ignored = true;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   getTextProps() {
@@ -1866,33 +2524,6 @@ const style$3 = {
     margin: "0",
     marginBottom: "var(--sl-spacing-small)",
   },
-  ErrorAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
-  },
-  WarningAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-yellow-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
-  },
-  InfoAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
-    },
-  },
   Dialog: {
     "&::part(panel)": {
       height: "600px",
@@ -1908,6 +2539,13 @@ const style$3 = {
     "&::part(footer)": {},
   },
 };
+const vanillaStyle$1 = `
+  a {
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`;
 const sheet$3 = JSS.createStyleSheet(style$3);
 const styleString$3 = sheet$3.toString();
 function PayoutStatusAlertView(props) {
@@ -1919,8 +2557,6 @@ function PayoutStatusAlertView(props) {
         description: text.errorDescription,
         buttonText: null,
         alertType: "critical",
-        icon: "exclamation-triangle",
-        class: sheet$3.classes.ErrorAlertContainer,
       };
     switch (status) {
       case "INFORMATION_REQUIRED":
@@ -1929,8 +2565,6 @@ function PayoutStatusAlertView(props) {
           description: text.informationRequiredDescription,
           buttonText: text.informationRequiredButtonText,
           alertType: "info",
-          icon: "info-circle",
-          class: sheet$3.classes.InfoAlertContainer,
         };
       case "VERIFICATION:REQUIRED":
         return {
@@ -1943,8 +2577,6 @@ function PayoutStatusAlertView(props) {
           }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
         };
       case "VERIFICATION:INTERNAL":
         return {
@@ -1956,8 +2588,6 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
         };
       case "VERIFICATION:REVIEW":
         return {
@@ -1969,8 +2599,6 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
         };
       case "VERIFICATION:FAILED":
         return {
@@ -1982,8 +2610,6 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "critical",
-          icon: "exclamation-octagon",
-          class: sheet$3.classes.ErrorAlertContainer,
         };
       case "HOLD":
         return {
@@ -1996,8 +2622,6 @@ function PayoutStatusAlertView(props) {
           }),
           buttonText: null,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$3.classes.WarningAlertContainer,
         };
       default:
         return;
@@ -2006,11 +2630,15 @@ function PayoutStatusAlertView(props) {
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
-        return data.type === "SquatchJS2" ? (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (index.h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (
+        return data.type === "SquatchJS2" ? (index.h("div", { style: { paddingTop: "10px" } },
+          index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" }))) : data.type === "SquatchPortal" ? (index.h("div", { style: { paddingTop: "10px" } },
+          index.h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText))) : (
         // Demo case
-        index.h("sl-button", { type: "default" }, text.informationRequiredButtonText));
+        index.h("div", { style: { paddingTop: "10px" } },
+          index.h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base" }, text.informationRequiredButtonText)));
       case "VERIFICATION:REQUIRED":
-        return (index.h("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
+        return (index.h("div", { style: { paddingTop: "10px" } },
+          index.h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText)));
       default:
         return;
     }
@@ -2024,10 +2652,10 @@ function PayoutStatusAlertView(props) {
   }
   return (index.h("div", { part: "sqm-base" },
     index.h("style", { type: "text/css" }, styleString$3),
-    index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: alertDetails.alertType, class: alertDetails.class, open: true },
-      index.h("sl-icon", { slot: "icon", name: alertDetails.icon }),
-      index.h("strong", null, alertDetails.header),
-      index.h("p", { class: sheet$3.classes.AlertDescriptionText }, alertDetails.description),
+    index.h("style", { type: "text/css" }, vanillaStyle$1),
+    index.h("sqm-form-message", { type: alertDetails.alertType },
+      index.h("p", { part: "alert-title" }, alertDetails.header),
+      index.h("p", { part: "alert-description" }, alertDetails.description),
       getButton(states.status))));
 }
 
@@ -2106,7 +2734,7 @@ const PayoutStatusAlert = class {
      * @uiName Error description
      */
     this.errorDescription = "There was an error with determining your payout status.";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   getTextProps() {
@@ -2163,12 +2791,12 @@ const defaultFormState$1 = {
 };
 function usePortalProfile(props) {
   const userIdent = index_module.J();
-  const [success, setSuccess] = stencilHooks_module.useState(false);
-  const [userData, setUserData] = stencilHooks_module.useState(undefined);
-  const [formState, setFormState] = stencilHooks_module.useState(defaultFormState$1);
+  const [success, setSuccess] = domContextHooks_module.useState(false);
+  const [userData, setUserData] = domContextHooks_module.useState(undefined);
+  const [formState, setFormState] = domContextHooks_module.useState(defaultFormState$1);
   const userDataResponse = index_module.wn(GET_USER$1, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
   const [upsertUser, upsertUserResponse] = index_module.$e(UPSERT_USER$1);
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading)
       return;
     if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) {
@@ -2192,7 +2820,7 @@ function usePortalProfile(props) {
         setSuccess(true);
     }
   }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading]);
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     var _a, _b;
     setUserData((data) => { var _a; return ({ ...data, ...(_a = userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer }); });
     setFormState({
@@ -2201,7 +2829,7 @@ function usePortalProfile(props) {
       ...(_b = upsertUserResponse.data) === null || _b === void 0 ? void 0 : _b.upsertUser,
     });
   }, [userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data]);
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     var _a, _b;
     if ((_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) === null || _a === void 0 ? void 0 : _a.message) {
       setFormState({
@@ -2274,7 +2902,7 @@ const PortalChangeMarketing = class {
      * @uiName Successful update message
      */
     this.successMessage = "Opt-in preference has been changed.";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2317,9 +2945,9 @@ function usePortalProfileDemo(props) {
 function usePortalChangePassword(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const [request, { loading, errors, data }] = index_module.Ue();
-  const [open, setOpen] = stencilHooks_module.useState(false);
-  const [error, setError] = stencilHooks_module.useState("");
-  const [success, setSuccess] = stencilHooks_module.useState(false);
+  const [open, setOpen] = domContextHooks_module.useState(false);
+  const [error, setError] = domContextHooks_module.useState("");
+  const [success, setSuccess] = domContextHooks_module.useState(false);
   const user = index_module.J();
   const submit = async (event) => {
     var _a, _b;
@@ -2457,7 +3085,7 @@ const PortalChangePassword = class {
      * @uiName Missing number or symbol text
      */
     this.hasErrorText = "contain at least 1 number or symbol";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2468,7 +3096,7 @@ const PortalChangePassword = class {
   }
 };
 function usePortalChangePasswordDemo(props) {
-  const [open, setOpen] = stencilHooks_module.useState(false);
+  const [open, setOpen] = domContextHooks_module.useState(false);
   return cjs.cjs({
     states: {
       open,
@@ -2552,7 +3180,7 @@ const PortalFooter = class {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingLeft = "large";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2561,7 +3189,7 @@ const PortalFooter = class {
   static get assetsDirs() { return ["../../assets"]; }
 };
 
-function usePortalFrame(footerContent, headerContent) {
+function usePortalFrame(footerContent, headerContent, props) {
   const [, rerender] = index_module.yn();
   return {
     data: {
@@ -2571,6 +3199,9 @@ function usePortalFrame(footerContent, headerContent) {
     callbacks: {
       rerender,
     },
+    backgroundColor: props.backgroundColor,
+    border: props.border,
+    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
   };
 }
 
@@ -2582,7 +3213,26 @@ const PortalFrame = class {
      * @undocumented
      */
     this.notFullScreen = false;
-    stencilHooks_module.h$1(this);
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.backgroundColor = "var(--sqm-portal-background, #fff)";
+    /**
+     * Borders placed to seperate the header and footer from the body content.
+     * @uiName Border
+     * @uiType string
+     */
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
+    /**
+     * Background color for the header and footer.
+     * @uiName Header and Footer Background Color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.headerAndFooterBackgroundColor = "var(--sqm-portal-background, #fff)";
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2590,13 +3240,16 @@ const PortalFrame = class {
     const headerContent = index.h("slot", { name: "header" });
     const props = index_module.isDemo()
       ? usePortalFrameDemo(footerContent, headerContent, this)
-      : usePortalFrame(footerContent, headerContent);
+      : usePortalFrame(footerContent, headerContent, this);
     return (index.h(ShadowViewAddon.PortalFrameView, Object.assign({}, props), index.h("slot", null)));
   }
 };
 function usePortalFrameDemo(footerContent, headerContent, props) {
   return cjs.cjs({
     notFullScreen: true,
+    backgroundColor: props.backgroundColor,
+    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
+    border: props.border,
     data: {
       footer: footerContent ? (footerContent) : (index.h("span", null, "example@example.com")),
       header: headerContent ? (headerContent) : (index.h("div", { style: { display: "flex", flexDirection: "column" } }, index.h("span", { style: {
@@ -2667,7 +3320,7 @@ const PortalLogin = class {
      * @uiName Register CTA
      */
     this.registerCTA = "Don't have an account?";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2686,7 +3339,7 @@ const PortalLogin = class {
     const content = {
       forgotPasswordButton: (index.h("slot", { name: "forgotPassword" }, index.h("a", { onClick: () => index_module.jn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
       googleButton: null,
-      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("style", null, styleString), index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.jn.push(states.registerPath) }, this.registerLabel))),
+      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("style", null, styleString), index.h("sl-button", { exportparts: "base: secondarybutton-base", type: "text", disabled: states.loading, onClick: () => index_module.jn.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -2720,10 +3373,10 @@ function useLoginDemo(props) {
 
 function usePortalRegister(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-  const formRef = stencilHooks_module.useRef(null);
+  const formRef = domContextHooks_module.useRef(null);
   const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
   const [request, { loading, errors, data }] = index_module.Ve();
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     if (!formRef.current)
       return;
     const form = formRef.current;
@@ -2848,7 +3501,7 @@ function usePortalRegister(props) {
 const PortalRegister = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.ignored = true;
+    this.ignored = false;
     /**
      * Redirect participants to this page from their verification email
      *
@@ -2960,7 +3613,7 @@ const PortalRegister = class {
      * @uiName Missing number or symbol text
      */
     this.hasErrorText = "contain at least 1 number or symbol";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3058,7 +3711,7 @@ const ProgramExplainer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3074,9 +3727,11 @@ function ProgramExplainerStepView(props) {
       width: "100%",
       padding: "var(--sl-spacing-x-large)",
       lineHeight: "var(--sl-line-height-dense)",
-      borderRadius: props.borderRadius || "var(--sl-border-radius-large)",
+      borderRadius: props.borderRadius
+        ? `${props.borderRadius}px`
+        : "var(--sqm-border-radius-normal)",
       color: props.textColor || "var(--sqm-text)",
-      background: props.backgroundColor || "var(--sl-color-primary-50)",
+      background: props.backgroundColor || "var(--sqm-accent-color-background)",
       "@media (max-width: 499px)": {
         flexDirection: "row",
         width: "auto",
@@ -3112,7 +3767,7 @@ function ProgramExplainerStepView(props) {
       objectFit: "cover",
       userSelect: "none",
       background: props.iconBackgroundColor || "var(--sl-color-white)",
-      color: props.iconColor || "var(--sl-color-primary-500)",
+      color: props.iconColor || "var(--sqm-accent-color-icon)",
       fontSize: "26px",
       textAlign: "center",
       lineHeight: "72px",
@@ -3135,7 +3790,7 @@ function ProgramExplainerStepView(props) {
 const ProgramExplainerStep = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3143,15 +3798,15 @@ const ProgramExplainerStep = class {
   }
 };
 
-const debug = stencilHooks_module.browser("sq:useProgramMenu");
+const debug = domContextHooks_module.browser("sq:useProgramMenu");
 const UPDATE_PROGRAM_EVENT = "sq:update-program-id";
 function useProgramMenu(props) {
   const programId = index_module.H();
   const host = index_module._();
   debug({ programId, props });
-  const ref = stencilHooks_module.useRef();
+  const ref = domContextHooks_module.useRef();
   const [, rerender] = index_module.yn();
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => {
       const programId = e.detail.item.value;
@@ -3178,7 +3833,7 @@ const ProgramMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3187,44 +3842,47 @@ const ProgramMenu = class {
   }
 };
 
-const style$4 = {
-  Container: {
-    borderRadius: "var(--sl-border-radius-large)",
-    color: "var(--sqm-text)",
-    background: "var(--sl-color-neutral-0)",
-    display: "flex",
-    flexDirection: "column",
-    rowGap: "var(--sl-spacing-large)",
-  },
-  EndContainer: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-  },
-  ColumnContainer: {
-    "& p": { margin: "0" },
-    display: "grid",
-    gridAutoColumns: "minmax(0, 1fr)",
-    gridAutoFlow: "column",
-    gap: "calc(2 * var(--sl-spacing-medium))",
-    "@media (max-width: 499px)": {
-      gridAutoFlow: "unset",
-      gridAutoColumns: "unset",
-      gridTemplateColumns: "1fr",
-      border: "none",
-    },
-  },
-};
-const sheet$4 = JSS.createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
-const vanillaStyle$1 = `
+const vanillaStyle$2 = `
     :host{
       display: block;   
     }
   `;
 function ReferralCardView(props) {
-  return (index.h("div", { part: "sqm-base", class: sheet$4.classes.Container, style: {
-      border: `${props.hideBorder ? "none" : "1px solid var(--sl-color-neutral-300)"}`,
+  const style = {
+    Container: {
+      borderRadius: props.borderRadius || "var(--sqm-border-radius-normal)",
+      color: props.textColor || "var(--sqm-text)",
+      background: props.backgroundColor || "var(--sqm-portal-background)",
+      display: "flex",
+      flexDirection: "column",
+      rowGap: "var(--sl-spacing-large)",
+    },
+    EndContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+    },
+    ColumnContainer: {
+      "& p": { margin: "0" },
+      display: "grid",
+      gridAutoColumns: "minmax(0, 1fr)",
+      gridAutoFlow: "column",
+      gap: "calc(2 * var(--sl-spacing-medium))",
+      "@media (max-width: 499px)": {
+        gridAutoFlow: "unset",
+        gridAutoColumns: "unset",
+        gridTemplateColumns: "1fr",
+        border: "none",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const borderColor = props.borderColor || "var(--sqm-border-color)";
+  return (index.h("div", { part: "sqm-base", class: sheet.classes.Container, style: {
+      border: `${props.hideBorder
+        ? "none"
+        : `var(--sqm-border-thickness) solid ${borderColor}`}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,
@@ -3234,15 +3892,15 @@ function ReferralCardView(props) {
       margin: `${props.limitWidth ? "auto" : "none"}`,
     } },
     index.h("style", { type: "text/css" },
-      styleString$4,
-      vanillaStyle$1),
-    props.hasHeader && (index.h("div", { class: sheet$4.classes.EndContainer }, props.slots.header)),
-    index.h("div", { part: "sqm-column-container", class: sheet$4.classes.ColumnContainer, style: {
+      styleString,
+      vanillaStyle$2),
+    props.hasHeader && (index.h("div", { class: sheet.classes.EndContainer }, props.slots.header)),
+    index.h("div", { part: "sqm-column-container", class: sheet.classes.ColumnContainer, style: {
         alignItems: props.verticalAlignment,
       } },
       props.slots.left,
       props.slots.right),
-    props.hasFooter && (index.h("div", { class: sheet$4.classes.EndContainer }, props.slots.footer))));
+    props.hasFooter && (index.h("div", { class: sheet.classes.EndContainer }, props.slots.footer))));
 }
 
 const ReferralCard = class {
@@ -3289,18 +3947,12 @@ const ReferralCard = class {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingLeft = "large";
-    /**
-     * @uiName Background color
-     * @uiWidget color
-     * @uiType string
-     */
-    this.backgroundColor = "#ffffff";
     /**
      * @uiName Limit width
      * @uiType boolean
      */
     this.limitWidth = false;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3355,7 +4007,7 @@ const SqmReferralIframe = class {
      * @uiName IFrame width
      */
     this.iframeWidth = "100%";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3388,6 +4040,161 @@ function useReferralIframeDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+const ReferredRegistration = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Email field label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName First name field label
+     */
+    this.firstNameLabel = "First Name";
+    /**
+     * @uiName Last name field label
+     */
+    this.lastNameLabel = "Last Name";
+    /**
+     * @uiName Register button text
+     */
+    this.registerLabel = "Start Referring";
+    /**
+     * Require your participants to enter their first and last name.
+     *
+     * @uiName Include name fields
+     */
+    this.includeName = false;
+    /**
+     * @uiName Hide border
+     * @uiGroup Card style
+     */
+    this.hideBorder = false;
+    /**
+     * Display this message when a required field has not been filled out.
+     *
+     * @uiName Required field message
+     * @uiWidget textArea
+     * @uiGroup Error messages
+     */
+    this.requiredFieldErrorMessage = "Cannot be empty";
+    /**
+     * Display this message when the given email is invalid.
+     *
+     * @uiName Invalid email message
+     * @uiWidget textArea
+     * @uiGroup Error messages
+     */
+    this.invalidEmailErrorMessage = "Please enter a valid email address";
+    /**
+     * Display this message when the form submission unexpectedly fails.
+     *
+     * @uiName Network error message
+     * @uiWidget textArea
+     * @uiGroup Error messages
+     */
+    this.networkErrorMessage = "There was a problem signing you in. Please wait a moment and try again. If this problem continues, contact Support for help resolving this issue.";
+    /**
+     * Display this message when there is suspected fraud.
+     *
+     * @uiName Fraud error message
+     * @uiWidget textArea
+     * @uiGroup Error messages
+     */
+    this.fraudErrorMessage = "Our team will review this referral. If approved, you and your friend will receive your rewards. Need help? Reach out to our Support team.";
+    /**
+     * Display this message when there is suspected fraud.
+     *
+     * @uiName Fraud error message title
+     * @uiWidget textArea
+     * @uiGroup Error messages
+     */
+    this.fraudErrorMessageTitle = "Looks like you tried referring yourself";
+    /**
+     * @uiName Top padding
+     * @uiGroup Card style
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingTop = "large";
+    /**
+     * @uiName Right padding
+     * @uiGroup Card style
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingRight = "large";
+    /**
+     * @uiName Bottom padding
+     * @uiGroup Card style
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingBottom = "large";
+    /**
+     * @uiName Left padding
+     * @uiGroup Card style
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingLeft = "large";
+    /**
+     * @undocumented
+     * @uiType boolean
+     */
+    this.includeCookies = true;
+    domContextHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks } = index_module.isDemo()
+      ? useRegistrationDemo(this)
+      : useInstantAccessRegistration.useInstantAccessRegistration(this);
+    const content = {
+      fraudErrorMessage: this.fraudErrorMessage,
+      fraudErrorMessageTitle: this.fraudErrorMessageTitle,
+      emailLabel: this.emailLabel,
+      registerLabel: this.registerLabel,
+      firstNameLabel: this.firstNameLabel,
+      lastNameLabel: this.lastNameLabel,
+      includeName: this.includeName,
+      hideBorder: this.hideBorder,
+      invalidEmailErrorMessage: this.invalidEmailErrorMessage,
+      requiredFieldErrorMessage: this.requiredFieldErrorMessage,
+      paddingTop: this.paddingTop,
+      paddingBottom: this.paddingBottom,
+      paddingLeft: this.paddingLeft,
+      paddingRight: this.paddingRight,
+      backgroundColor: this.backgroundColor,
+      // slots
+      topSlot: index.h("slot", { name: "top" }),
+      bottomSlot: index.h("slot", { name: "bottom" }),
+    };
+    return (index.h(emailRegistrationView.EmailRegistrationView, { states: states, callbacks: callbacks, content: content }));
+  }
+};
+function useRegistrationDemo(props) {
+  const onSubmit = () => {
+    index_module.setUserIdentity({
+      id: "referrer@example.com",
+      accountId: "referrer@example.com",
+      jwt: "eyJraWQiOiJlNjI2NzQxNy1jMzZlLTRlM2EtYjM5NS1lYTFmY2YyNmU3YzIiLCJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJjbVZtWlhKeVpYSkFaWGhoYlhCc1pTNWpiMjA9OmNtVm1aWEp5WlhKQVpYaGhiWEJzWlM1amIyMD1AdGVzdF9heGJndGF0dzF0Y2NwOnVzZXJzIiwicGFzc3dvcmRsZXNzIjp0cnVlLCJpc3MiOiJodHRwczovL3N0YWdpbmcucmVmZXJyYWxzYWFzcXVhdGNoLmNvbS8iLCJleHAiOjE2ODA4ODU5MTksImlhdCI6MTY4MDc5OTUxOX0.kjmTVVf_BTb-uMNKnadLyNLxMFwpkefsY02O3iAfBVIJJZZfeZMwunPlKsS3Vbp28aYRClBjH5Wj4pYxDn23D0CdZx8KNCqiJ8yF6149O9SPMkRseoJkliqS6LyvMOEDjGDkuLfcC8_hq1AHBXFt5BdCtWOk1gwf_5R9A0w5gXEIvprBzbNDLbuo88bVAlrmFNvfttXXryrpUeruMal7cBKuy02YblBrB4kKoyJiprU5GLEjciBA4A56u8TwQc0kbsPf2YcQaJsY_IvkC7S1u4sPyObpq6iF6Ed8UYHAo6nU5KjZXyVtoUyeIS11mf_6OtDO6LyMNHV2FtEUUDdPCg",
+    });
+  };
+  return cjs.cjs({
+    states: {
+      error: "",
+      loading: false,
+    },
+    callbacks: {
+      submit: async (_event) => {
+        onSubmit();
+      },
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
 // canvas-confetti v1.4.0 built on 2021-03-10T12:32:33.488Z
 var module$1 = {};
 
@@ -4043,7 +4850,7 @@ const EXCHANGE = index_module.dist.gql `
 `;
 function useRewardExchangeList(props) {
   var _a, _b, _c, _d, _e;
-  const [exchangeState, setExchangeState] = stencilHooks_module.useReducer((state, next) => ({
+  const [exchangeState, setExchangeState] = domContextHooks_module.useReducer((state, next) => ({
     ...state,
     ...next,
   }), {
@@ -4053,12 +4860,12 @@ function useRewardExchangeList(props) {
     amount: 0,
     exchangeError: false,
   });
-  const [open, setOpen] = stencilHooks_module.useState(false);
+  const [open, setOpen] = domContextHooks_module.useState(false);
   const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
   const user = index_module.J();
   const [exchange, { data: exchangeResponse, loading: exchangeLoading, errors },] = index_module.$e(EXCHANGE);
   const { data, loading, refetch, errors: queryError, } = index_module.wn(GET_EXCHANGE_LIST, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     var _a, _b;
     if ((_b = (_a = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _a === void 0 ? void 0 : _a.reward) === null || _b === void 0 ? void 0 : _b.id) {
       setExchangeState({ redeemStage: "success", exchangeError: false });
@@ -4067,8 +4874,8 @@ function useRewardExchangeList(props) {
       setExchangeState({ exchangeError: true });
     }
   }, [exchangeResponse, errors]);
-  const canvasRef = stencilHooks_module.useRef();
-  stencilHooks_module.useEffect(() => {
+  const canvasRef = domContextHooks_module.useRef();
+  domContextHooks_module.useEffect(() => {
     if (!canvasRef.current)
       return;
     const canvas = canvasRef.current;
@@ -4324,7 +5131,14 @@ const SqmRewardExchangeList = class {
      * @uiName Cost row title
      */
     this.costTitle = "Cost to Redeem";
-    stencilHooks_module.h$1(this);
+    /**
+     * @componentState { "title": "Choose reward", "props": { "redeemStage": "chooseReward" }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Reward details", "props": { "redeemStage": "chooseAmount",  }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Confirm exchange", "props": { "redeemStage": "confirmation" }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Exchange successful", "props": { "redeemStage": "success" }, "dependencies": ["sqm-reward-exchange-list"] }
+     */
+    this.stateController = "{}";
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4343,6 +5157,10 @@ function EmptySlot$1() {
   return (index.h("slot", { name: "empty" }, index.h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })));
 }
 function useRewardExchangeListDemo(props) {
+  const states = parseStates.parseStates(props.stateController);
+  const formatted = Object.keys(states).reduce((prev, key) => key === "reward-exchange-list"
+    ? { ...prev, ...states[key] }
+    : { ...prev, [`${key}_stateController`]: states[key] }, {});
   return cjs.cjs({
     states: {
       content: {
@@ -4357,10 +5175,9 @@ function useRewardExchangeListDemo(props) {
       queryError: false,
       loading: false,
       noExchangeOptions: false,
-      empty: EmptySlot$1(),
     },
     data: {
-      shareCode: "SHARECODE123",
+      // shareCode: "SHARECODE123",
       exchangeList: ShadowViewAddon.demoRewardExchange.data.exchangeList,
     },
     callbacks: {
@@ -4373,10 +5190,10 @@ function useRewardExchangeListDemo(props) {
     refs: {
       canvasRef: {},
     },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
 }
 
-const debug$1 = stencilHooks_module.browser("sq:useRouter");
+const debug$1 = domContextHooks_module.browser("sq:useRouter");
 function matchPath(pattern, page) {
   if (!pattern)
     return;
@@ -4386,11 +5203,11 @@ function matchPath(pattern, page) {
 function useRouter() {
   const location = index_module.kn();
   const host = index_module._();
-  const [slot, setSlot] = stencilHooks_module.useState(undefined);
-  const [container, setContainer] = stencilHooks_module.useState(undefined);
+  const [slot, setSlot] = domContextHooks_module.useState(undefined);
+  const [container, setContainer] = domContextHooks_module.useState(undefined);
   const page = location.pathname;
   // convert sqm-routes into templates
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     const routes = host.querySelectorAll(`sqm-route`);
     const routesArray = Array.from(routes);
     routesArray.forEach((route) => {
@@ -4401,7 +5218,7 @@ function useRouter() {
       route.parentNode.removeChild(route);
     });
   }, []);
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     var _a, _b;
     if (!container || !slot) {
       debug$1("DOM not ready for navigation rendering on:", page);
@@ -4458,7 +5275,7 @@ const SqmRouter = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4476,8 +5293,8 @@ const ShareButton = class {
     /**
      * @uiType string
      * @uiName Button style
-     * @uiEnum ["primary" , "success", "info", "warning", "danger", "default", "text" ]
-     * @uiEnumNames ["Primary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
+     * @uiEnum ["primary", "secondary", "success", "info", "warning", "danger", "default", "text" ]
+     * @uiEnumNames ["Primary", "Secondary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
      */
     this.type = "default";
     /**
@@ -4489,11 +5306,13 @@ const ShareButton = class {
     this.iconslot = "prefix";
     /**
      * @uiName Hide icon
+     * @uiGroup Style
      * @default
      */
     this.hideicon = false;
     /**
      * @uiName Hide text
+     * @uiGroup Style
      * @default
      */
     this.hidetext = false;
@@ -4507,7 +5326,7 @@ const ShareButton = class {
      * @uiName Unsupported platform text
      */
     this.unsupportedPlatformText = "Error: not on a supported device";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4554,7 +5373,7 @@ function useShareCode(props) {
   const copyString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
-  const [open, setOpen] = stencilHooks_module.useState(false);
+  const [open, setOpen] = domContextHooks_module.useState(false);
   function onClick() {
     // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
     // Only if called from a user-initiated event
@@ -4617,7 +5436,7 @@ const ShareCode = class {
      */
     this.buttonStyle = "icon";
     /**
-     * The type of the button (primary or secondary) that will be used to copy the link.
+     * The type of the button that is used (primary or secondary).
      * @uiName Button Type
      * @uiType string
      * @uiEnum ["primary", "secondary"]
@@ -4625,7 +5444,7 @@ const ShareCode = class {
      * @uiGroup Style
      */
     this.buttonType = "primary";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4637,7 +5456,7 @@ const ShareCode = class {
   }
 };
 function useDemoShareCode(props) {
-  const [open, setOpen] = stencilHooks_module.useState(false);
+  const [open, setOpen] = domContextHooks_module.useState(false);
   const copyString = "SHARECODE001";
   return cjs.cjs({
     copyString: copyString,
@@ -4648,6 +5467,7 @@ function useDemoShareCode(props) {
     backgroundColor: props.backgroundColor,
     textColor: props.textColor,
     borderRadius: props.borderRadius,
+    borderColor: props.borderColor,
     buttonType: props.buttonType,
     rewardStatus: "AVAILABLE",
     open,
@@ -4683,6 +5503,7 @@ const ShareLink = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -4690,7 +5511,7 @@ const ShareLink = class {
      */
     this.copyButtonLabel = "Copy Link";
     /**
-     * The type of the button (primary or secondary) that will be used to copy the link.
+     * The type of the button that is used (primary or secondary).
      * @uiName Button Type
      * @uiType string
      * @uiEnum ["primary", "secondary"]
@@ -4708,7 +5529,7 @@ const ShareLink = class {
      * @uiGroup Style
      */
     this.buttonStyle = "icon";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4720,7 +5541,7 @@ const ShareLink = class {
   }
 };
 function useDemoShareLink(props) {
-  const [open, setOpen] = stencilHooks_module.useState(false);
+  const [open, setOpen] = domContextHooks_module.useState(false);
   const copyString = "https://www.example.com/sharelink/abc";
   return cjs.cjs({
     copyString: copyString,
@@ -4757,13 +5578,30 @@ const StatContainer = class {
      */
     this.space = "xxx-large";
     /**
+     * @undocumented
      * @uiName Display
      * @uiType string
      * @uiEnum ["grid", "flex"]
      * @uiEnumNames ["Grid", "Flex"]
      */
-    this.display = "grid";
-    stencilHooks_module.h$1(this);
+    this.display = "flex";
+    /**
+     * Controls the alignment of the flexbox
+     *
+     * @uiName Alignment
+     * @uiType string
+     * @uiEnum ["left", "right", "center"]
+     * @uiEnumNames ["Left", "Right", "Center"]
+     */
+    this.alignment = "center";
+    /**
+     * @uiName Gap
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.gap = "x-large";
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4783,7 +5621,7 @@ function useTaskCard(props) {
   const locale = index_module.L();
   const [sendUserEvent, { data, loading: loadingEvent }] = index_module.$e(SEND_EVENT);
   const { refresh } = index_module.Qe();
-  stencilHooks_module.useEffect(() => {
+  domContextHooks_module.useEffect(() => {
     if (data) {
       refresh();
       openLink();
@@ -4812,7 +5650,7 @@ function useTaskCard(props) {
       textColor: props.textColor,
       borderColor: props.borderColor,
       borderRadius: props.borderRadius,
-      buttonStyle: props.buttonStyle,
+      buttonType: props.buttonType,
     },
   };
   return {
@@ -4938,8 +5776,8 @@ const TaskCard = class {
      * @uiEnumNames ["Primary", "Secondary"]
      * @uiGroup Style
      */
-    this.buttonStyle = "primary";
-    stencilHooks_module.h$1(this);
+    this.buttonType = "primary";
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4950,7 +5788,6 @@ const TaskCard = class {
     const { states, callbacks } = index_module.isDemo()
       ? useTaskCardDemo(this)
       : useTaskCard(this);
-    console.log("button style from controller", this.buttonStyle);
     return (index.h(ShadowViewAddon.TaskCardView, { callbacks: callbacks, states: {
         loading,
         loadingEvent: states.loadingEvent,
@@ -4961,6 +5798,7 @@ const TaskCard = class {
 };
 function useTaskCardDemo(props) {
   return cjs.cjs({
+    content: { ...props },
     states: { loadingEvent: false, locale: "en" },
     callbacks: {
       sendEvent: (event) => console.log(event),
@@ -4980,7 +5818,7 @@ const Timeline = class {
      * @uiEnumNames ["Gift", "Circle"]
      */
     this.icon = "gift";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -5014,52 +5852,7 @@ const Gift = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24
 const Circle = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor", stroke: "currentColor", "stroke-width": "2" })));
 
-const style$5 = {
-  TimelineReward: {
-    color: "var(--sqm-text)",
-    lineHeight: "var(--sl-line-height-dense)",
-    "& .container": {
-      display: "flex",
-    },
-    "& .line": {
-      display: "none",
-      color: "transparent",
-      userSelect: "none",
-      background: "var(--sl-color-primary-300)",
-      width: "4px",
-      borderRadius: "4px",
-      margin: "-2px",
-      position: "relative",
-      left: "12px",
-      top: "34px",
-    },
-    "& .step": {
-      display: "flex",
-    },
-    "& .icon": {
-      position: "relative",
-      top: "4px",
-      zIndex: "1",
-      color: "var(--sl-color-primary-300)",
-      marginRight: "var(--sl-spacing-large)",
-    },
-    "& .reward": {
-      marginRight: "var(--sl-spacing-x-small)",
-      fontSize: "var(--sl-font-size-x-large)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-    },
-    "& .unit": {
-      textTransform: "uppercase",
-      fontSize: "var(--sl-font-size-small)",
-    },
-    "& .description": {
-      fontSize: "var(--sl-font-size-medium)",
-    },
-  },
-};
-const sheet$5 = JSS.createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
-const vanillaStyle$2 = `
+const vanillaStyle$3 = `
 	:host{
 		display: block; 
 	}
@@ -5071,10 +5864,55 @@ const vanillaStyle$2 = `
 function TimelineEntryView(props) {
   var _a;
   const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  return (index.h("div", { class: sheet$5.classes.TimelineReward, part: "sqm-base" },
+  const style = {
+    TimelineReward: {
+      color: props.textColor || "var(--sqm-text)",
+      lineHeight: "var(--sl-line-height-dense)",
+      "& .container": {
+        display: "flex",
+      },
+      "& .line": {
+        display: "none",
+        color: "transparent",
+        userSelect: "none",
+        background: props.lineColor || "var(--sqm-accent-color-icon)",
+        width: "4px",
+        borderRadius: "4px",
+        margin: "-2px",
+        position: "relative",
+        left: "12px",
+        top: "34px",
+      },
+      "& .step": {
+        display: "flex",
+      },
+      "& .icon": {
+        position: "relative",
+        top: "4px",
+        zIndex: "1",
+        color: props.lineColor || "var(--sqm-accent-color-icon)",
+        marginRight: "var(--sl-spacing-large)",
+      },
+      "& .reward": {
+        marginRight: "var(--sl-spacing-x-small)",
+        fontSize: "var(--sl-font-size-x-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& .unit": {
+        textTransform: "uppercase",
+        fontSize: "var(--sl-font-size-small)",
+      },
+      "& .description": {
+        fontSize: "var(--sl-font-size-medium)",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.TimelineReward, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      styleString$5,
-      vanillaStyle$2),
+      styleString,
+      vanillaStyle$3),
     index.h("div", { class: "container", part: "sqm-entry-container" },
       index.h("div", { class: "line" }, "/"),
       index.h("div", { class: "step" },
@@ -5094,7 +5932,7 @@ const TimelineReward = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     this.iconState = "gift";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   async setIcon(value) {
     this.iconState = value;
@@ -5148,7 +5986,7 @@ const UserName = class {
      * @uiName Loading text
      */
     this.loadingText = "...";
-    stencilHooks_module.h$1(this);
+    domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -5166,6 +6004,7 @@ function useUserNameDemo(props) {
 
 exports.sqm_big_stat = BigStat;
 exports.sqm_brand = BrandComponent;
+exports.sqm_brand_selector = SqmBrandSelector;
 exports.sqm_card_feed = CardFeed;
 exports.sqm_checkbox_field = CheckboxField;
 exports.sqm_coupon_code = CouponCode;
@@ -5195,6 +6034,7 @@ exports.sqm_program_explainer_step = ProgramExplainerStep;
 exports.sqm_program_menu = ProgramMenu;
 exports.sqm_referral_card = ReferralCard;
 exports.sqm_referral_iframe = SqmReferralIframe;
+exports.sqm_referred_registration = ReferredRegistration;
 exports.sqm_reward_exchange_list = SqmRewardExchangeList;
 exports.sqm_router = SqmRouter;
 exports.sqm_share_button = ShareButton;