@saasquatch/mint-components 1.15.0-99 → 1.15.0

package/dist/cjs/sqm-big-stat_43.cjs.entry.js

@@ -2,379 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
-const global = require('./global-4cd8623e.js');
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const global = require('./global-e31dc4f5.js');
+const index_module = require('./index.module-ee84433d.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-7cbd60cc.js');
+const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-require('./useReferralCodes-11cdf43b.js');
-require('./mixins-4761d472.js');
-const copyTextView = require('./copy-text-view-97ae8a48.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');
+require('./useReferralCodes-82e8797b.js');
+require('./mixins-f7e0377a.js');
+const copyTextView = require('./copy-text-view-c85acaaa.js');
+const reRender = require('./re-render-b324deab.js');
+const useChildElements = require('./useChildElements-1b35d945.js');
+require('./luxon-2926d85f.js');
+require('./sqm-text-span-view-0aa82125.js');
 const index$1 = require('./index-8c6255f5.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 useRegistrationFormState = require('./useRegistrationFormState-7b820f0c.js');
+const useLeadFormState = require('./useLeadFormState-c83d2034.js');
+const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
+const usePortalLogin = require('./usePortalLogin-63d896d1.js');
 const AsYouType = require('./AsYouType-6788393a.js');
-const utilities = require('./utilities-9a0c5e91.js');
-const ShadowViewAddon = require('./ShadowViewAddon-c06b2910.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 utilities = require('./utilities-78f5e169.js');
+const ShadowViewAddon = require('./ShadowViewAddon-28865623.js');
+require('./sqm-portal-container-view-4f15143a.js');
+const usePayoutStatus = require('./usePayoutStatus-d459ddde.js');
 
 const BigStat = class {
   constructor(hostRef) {
@@ -384,21 +36,10 @@ 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;
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -411,86 +52,45 @@ 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`;
-  });
-}
 /**
- * Generated a Shoelace color scale css string from a base color
+ * Build a font CSS URL using the Google Fonts CSS API
+ *
+ * Docs: https://developers.google.com/fonts/docs/css2
  *
- * @param color
- * @param name
- * @returns
+ * @param fonts - the font family or families to load
+ * @returns url to a .css file
  */
-function autoColorScaleCss(color, name = "primary") {
-  return generateScale(color, name).join("\n");
+function buildFontsCssUrl(...fonts) {
+  const queryString = fonts.map(f => `family=${encodeURIComponent(f)}`).join("&");
+  return `https://fonts.googleapis.com/css2?${queryString}`;
 }
 
 const BrandComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     function getCss(brandColor) {
       if (brandColor) {
         try {
-          return autoColorScaleCss(brandColor);
+          return ShadowViewAddon.autoColorScaleCss(brandColor);
         }
         catch { }
       }
       return undefined;
     }
-    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) {
+    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) {
         // 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", global.buildFontsCssUrl(sanitizedFont));
+      sheet.setAttribute("href", buildFontsCssUrl(sanitizedFont));
       sheet.setAttribute("rel", "stylesheet");
       document.head.appendChild(sheet);
       return () => document.head.removeChild(sheet);
@@ -506,10 +106,6 @@ const BrandComponent = class {
            - resets css variable inheritence for fonts
           
           */
-
-          ${brandingConfigFont
-      ? ``
-      : `
           ::slotted(*) {
             --sl-font-sans: "${font}", arial;
             --sl-input-font-family: "${font}", arial;
@@ -517,7 +113,6 @@ 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);
@@ -526,195 +121,6 @@ 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);
@@ -728,7 +134,7 @@ const CardFeed = class {
      * @uiType number
      */
     this.gap = 24;
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -736,63 +142,11 @@ const CardFeed = class {
   }
 };
 
-const style = {
-  IconStyle: {
-    display: "block",
-    position: "absolute",
-    top: "23px",
-  },
-  DivStyle: {
-    marginLeft: "28px",
-  },
-  Details: {
-    marginLeft: "28px",
-  },
-  Heading: {
-    display: "inline-block",
-  },
-  Children: {
-    display: "none",
-  },
-};
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-function RequiredPropsError({ missingProps, heading = "There was a problem loading this section", subheading = "There was a technical problem that prevented this section from loading. Please contact us with the link to this page.", description = "Error occured while loading <{tagName}>. Values for the following attributes are missing:", }, children) {
-  if (!missingProps)
-    return false;
-  const host = index_module._();
-  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 },
-      index.h("sl-icon", { name: "exclamation-octagon" })),
-    index.h("div", { class: sheet.classes.DivStyle },
-      index.h("h2", { class: sheet.classes.Heading }, global.intl.formatMessage({
-        id: `error-heading`,
-        defaultMessage: heading,
-      })),
-      index.h("p", null, global.intl.formatMessage({
-        id: `error-subheading`,
-        defaultMessage: subheading,
-      }))),
-    index.h("details", { class: sheet.classes.Details },
-      index.h("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
-        detailsOpen ? "Less" : "More",
-        " details"),
-      index.h("p", null, global.intl.formatMessage({
-        id: `error-description`,
-        defaultMessage: description,
-      }, { tagName: host.tagName.toLowerCase() })),
-      index.h("ul", null, missingProps.map((prop) => (index.h("li", null,
-        index.h("strong", null, prop.attribute)))))),
-    index.h("div", { class: sheet.classes.Children }, children)));
-}
-
 function useCheckboxField(props) {
   var _a;
-  const registrationFormState = domContextHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
-  const [checked, setChecked] = domContextHooks_module.useState(false);
-  domContextHooks_module.useEffect(() => {
+  const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
+  const [checked, setChecked] = stencilHooks_module.useState(false);
+  stencilHooks_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]));
@@ -836,7 +190,7 @@ const CheckboxField = class {
      * @uiName Optional
      */
     this.checkboxOptional = false;
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -847,7 +201,7 @@ const CheckboxField = class {
       },
     ]);
     if (!index_module.isDemo() && missingProps) {
-      return (index.h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this checkbox field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
+      return (index.h(useLeadFormState.RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this checkbox field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
     }
     const content = {
       ...utils.getProps(this),
@@ -887,6 +241,7 @@ const FuelTankRewardsQuery = index_module.dist.gql `
             dateCancelled
             dateScheduledFor
             datePendingForUnhandledError
+            pendingReasons
           }
           count
           totalCount
@@ -906,16 +261,61 @@ function useCouponCode(props) {
   const programId = index_module.H();
   const engagementMedium = index_module.B();
   const [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
+  const [retried, setRetried] = stencilHooks_module.useState(false);
+  const [countdown, setCountdown] = stencilHooks_module.useState(60);
+  const timerRef = stencilHooks_module.useRef(undefined);
+  const countdownRef = stencilHooks_module.useRef(undefined);
   const { data, loading, refetch, errors } = index_module.wn(FuelTankRewardsQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  async function checkReward() {
+    var _a, _b, _c, _d, _e, _f;
+    const data = await refetch();
+    setRetried(true);
+    if (!((_f = (_e = (_d = (_c = (_b = (_a = data) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.instantAccessRewards) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.pendingReasons) === null || _f === void 0 ? void 0 : _f.includes("ERROR_SYNCING_FUEL_TANK_CODE"))) {
+      return clearInterval(timerRef.current);
+    }
+  }
+  const reward = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.instantAccessRewards) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c[0];
+  const startTimer = (countdown = 61000) => setInterval(checkReward, countdown);
+  const startCountdown = (countdown) => setInterval(() => setCountdown(countdown), 1000);
+  // Refetch reward status timer
+  stencilHooks_module.useEffect(() => {
+    var _a, _b;
+    if (!timerRef.current && ((_a = reward === null || reward === void 0 ? void 0 : reward.statuses) === null || _a === void 0 ? void 0 : _a.includes("PENDING")) && ((_b = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _b === void 0 ? void 0 : _b.includes("ERROR_SYNCING_FUEL_TANK_CODE"))) {
+      timerRef.current = startTimer();
+    }
+    return () => {
+      clearInterval(timerRef.current);
+    };
+  }, []);
+  // Countdown timer
+  stencilHooks_module.useEffect(() => {
+    var _a, _b;
+    if (countdown > 0 && ((_a = reward === null || reward === void 0 ? void 0 : reward.statuses) === null || _a === void 0 ? void 0 : _a.includes("PENDING")) && ((_b = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _b === void 0 ? void 0 : _b.includes("ERROR_SYNCING_FUEL_TANK_CODE"))) {
+      clearInterval(countdownRef.current);
+      countdownRef.current = startCountdown(countdown - 1);
+    }
+    return () => {
+      clearInterval(countdownRef.current);
+    };
+  }, [countdown, reward]);
+  stencilHooks_module.useEffect(() => {
+    var _a, _b;
+    // Retry after a minute if the reward is pending and has an error syncing the fuel tank code
+    if (((_a = reward === null || reward === void 0 ? void 0 : reward.statuses) === null || _a === void 0 ? void 0 : _a.includes("PENDING")) && ((_b = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _b === void 0 ? void 0 : _b.includes("ERROR_SYNCING_FUEL_TANK_CODE"))) {
+      startTimer();
+    }
+  }, [reward]);
   const getStatus = (reward) => {
     if (!reward || !reward.statuses)
       return "ERROR";
     const state = reward.statuses[reward.statuses.length - 1];
+    if (state === "PENDING" &&
+      reward.pendingReasons.includes("ERROR_SYNCING_FUEL_TANK_CODE"))
+      return "ERROR_SYNCING_FUEL_TANK_CODE";
     if (state === "PENDING" && reward.dateScheduledFor === null)
       return "EMPTY_TANK";
     return state;
   };
-  const reward = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.instantAccessRewards) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c[0];
   const rewardStatus = getStatus(reward);
   const dateAvailable = rewardStatus === "PENDING" && reward.dateScheduledFor
     ? new Date(reward.dateScheduledFor).toLocaleDateString("default", {
@@ -925,7 +325,7 @@ function useCouponCode(props) {
     })
     : undefined;
   const copyString = (reward === null || reward === void 0 ? void 0 : reward.fuelTankCode) || "...";
-  const [open, setOpen] = domContextHooks_module.useState(false);
+  const [open, setOpen] = stencilHooks_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
@@ -953,6 +353,21 @@ function useCouponCode(props) {
         return props.expiredErrorText;
       case "EMPTY_TANK":
         return props.fullfillmentErrorText;
+      case "ERROR_SYNCING_FUEL_TANK_CODE":
+        return retried
+          ? global.intl.formatMessage({
+            id: "codeSyncErrorText",
+            defaultMessage: props.codeSyncErrorText,
+          }, {
+            supportEmail: "advocate-support@impact.com",
+          })
+          : global.intl.formatMessage({
+            id: "codeSyncErrorText",
+            defaultMessage: props.codeSyncErrorRetryText,
+          }, {
+            supportEmail: "advocate-support@impact.com",
+            timeRemaining: countdown,
+          });
       case "PENDING":
         return props.pendingErrorText.replace("{unpendDate}", dateAvailable);
       case "REDEEMED":
@@ -969,6 +384,7 @@ function useCouponCode(props) {
       case "EMPTY_TANK":
       case "CANCELLED":
       case "ERROR":
+      case "ERROR_SYNCING_FUEL_TANK_CODE":
         return "warning";
       case "PENDING":
         return "info";
@@ -991,7 +407,6 @@ function useCouponCode(props) {
     dateAvailable,
     loading,
     errorType,
-    buttonType: props.buttonType || "primary",
   };
 }
 
@@ -1015,7 +430,6 @@ const CouponCode = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
-     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -1029,7 +443,6 @@ const CouponCode = class {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
-     * @uiGroup Style
      */
     this.buttonStyle = "icon";
     /**
@@ -1076,6 +489,22 @@ const CouponCode = class {
      * @uiGroup Coupon code error
      */
     this.pendingErrorText = "Your code will be available on {unpendDate}. Mark your calendar and come back then to redeem your reward!";
+    /**
+     * Display this message when the code fails to load before retrying.
+     *
+     * @uiWidget textArea
+     * @uiName Code sync error retry message
+     * @uiGroup Coupon code error
+     */
+    this.codeSyncErrorRetryText = "We're experiencing an issue generating your coupon code. If it doesn't appear shortly, please contact {supportEmail}. Retrying in {timeRemaining} seconds.";
+    /**
+     * Display this message when the code fails to load after retrying.
+     *
+     * @uiWidget textArea
+     * @uiName Code sync error message
+     * @uiGroup Coupon code error
+     */
+    this.codeSyncErrorText = "We're still experiencing an issue generating your coupon code. Please contact {supportEmail} for assistance.";
     /**
      * Display this message when the code fails to load due to an unspecified error.
      *
@@ -1091,16 +520,7 @@ const CouponCode = class {
      * @uiGroup Coupon code error
      */
     this.couponCodePlaceholder = "...";
-    /**
-     * 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);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1112,7 +532,7 @@ const CouponCode = class {
   }
 };
 function useDemoCouponCode(props) {
-  const [open, setOpen] = domContextHooks_module.useState(false);
+  const [open, setOpen] = stencilHooks_module.useState(false);
   const copyString = "THANKSJANE125uv125";
   return cjs.cjs({
     copyString,
@@ -1123,11 +543,8 @@ 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,
+    codeSyncErrorText: props.codeSyncErrorText,
+    codeSyncErrorRetryText: props.codeSyncErrorRetryText,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
@@ -1142,23 +559,14 @@ function useDemoCouponCode(props) {
 function DividedLayoutView(props, children) {
   const getBorder = () => {
     if (props.direction === "row") {
-      return {
-        "border-right": props.borderless
-          ? "none"
-          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
-      };
+      return { "border-right": props.dividerStyle || "1px solid #EAEAEA" };
     }
     else {
-      return {
-        "border-bottom": props.borderless
-          ? "none"
-          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
-      };
+      return { "border-bottom": props.dividerStyle || "1px solid #EAEAEA" };
     }
   };
   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)": {
@@ -1174,10 +582,11 @@ function DividedLayoutView(props, children) {
     flex: 1;
     box-sizing: border-box;
     flex-direction: ${props.direction};
-    background-color: var(--sqm-portal-background);
-    color: var(--sqm-text);
+    background-color: var(--sqm-content-background);
     overflow-x: clip;
-    ${props.direction === "column" ? "width: 100%; max-width: 100%" : ""}
+    ${props.direction === "column"
+    ? "width: 100%; max-width: var(--sqm-portal-main-width);"
+    : ""}
     ${props.contentAreaWidth !== null
     ? `max-width: ${props.contentAreaWidth} !important;`
     : ""}
@@ -1209,18 +618,11 @@ 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 = "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);
+    this.dividerStyle = "1px solid #EAEAEA";
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1229,7 +631,7 @@ const DividedLayout = class {
 };
 
 function useDropdownField() {
-  const registrationFormState = domContextHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
+  const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
   return {
     states: {
       registrationFormState,
@@ -1254,7 +656,7 @@ const DropdownField = class {
      * @default
      */
     this.dropdownOptional = false;
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1265,7 +667,7 @@ const DropdownField = class {
       },
     ]);
     if (!index_module.isDemo() && missingProps) {
-      return (index.h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this drop down field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }, index.h("slot", null)));
+      return (index.h(useLeadFormState.RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this drop down field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }, index.h("slot", null)));
     }
     const content = {
       ...utils.getProps(this),
@@ -1329,13 +731,13 @@ const defaultFormState = {
 };
 function useEditProfile(props) {
   const userIdent = index_module.J();
-  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 [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 userDataResponse = index_module.wn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
   const [upsertUser, upsertUserResponse] = index_module.$e(UPSERT_USER);
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     if ((upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading) || !showEdit)
       return;
     if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) {
@@ -1358,10 +760,10 @@ function useEditProfile(props) {
       setShowEdit(false);
     }
   }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading]);
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_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]);
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_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 }));
@@ -1457,7 +859,7 @@ const EditProfile = class {
      * @uiName Form error message
      */
     this.formErrorText = "Please correct the errors below to update your profile.";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1540,12 +942,12 @@ const Hero = class {
      */
     this.minHeight = 200;
     /**
-     * Add an image or select a color. Recommended image aspect ratio of 4:5
+     * Can be an image url, colour or Shoelace variable.
      *
      * @uiName Background
      * @uiWidget Background
      */
-    this.background = "#f9fafb";
+    this.background = "var(--sl-color-gray-50)";
     /**
      * @uiName Padding size
      * @uiEnum ["none", "small", "medium","large"]
@@ -1560,11 +962,7 @@ const Hero = class {
      * @uiEnumNames ["Wrap", "Wrap Reverse"]
      */
     this.wrapDirection = "wrap";
-    /**
-     * @uiName Hide the column in mobile view (can only be used when two columns are present)
-     */
-    this.columnToHideInMobile = null;
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   // TODO: Improve empty slot behavior with useChildElements to check for empty slot
@@ -1592,7 +990,7 @@ function HeroImageView(props, children) {
         width: "100%",
         height: "100%",
         position: "absolute",
-        background: props.overlayColor || "var(--sl-color-black)",
+        background: props.overlayColor || "var(--sl-color-primary-900)",
         opacity: props.overlayOpacity,
       },
     },
@@ -1618,7 +1016,7 @@ function HeroImageView(props, children) {
         props.paddingImage +
         "))",
       textAlign: "center",
-      color: props.textColor || "var(--sqm-text)",
+      color: props.textColor || "var(--sl-color-neutral-0)",
       lineHeight: "var(--sl-line-height-dense)",
       "@media (max-width: 599px)": {
         padding: "var(--sl-spacing-" + props.paddingText + ")",
@@ -1629,7 +1027,7 @@ function HeroImageView(props, children) {
       background: props.backgroundColor || "",
       flexDirection: props.imagePos === "right" ? "row-reverse" : "row",
       lineHeight: "var(--sl-line-height-dense)",
-      color: props.textColor || "var(--sqm-text)",
+      color: props.textColor || "var(--sl-color-neutral-900)",
       "& .image-area": {
         width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
         padding: "var(--sl-spacing-" + props.paddingImage + ")",
@@ -1699,7 +1097,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: ${props.buttonType}button-base`, onClick: () => props.buttonNewTab
+        props.buttonText && (index.h("sl-button", { class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
             ? window.open(props.buttonLink)
             : window.open(props.buttonLink, "_parent") }, props.buttonText)),
         children && children)));
@@ -1723,7 +1121,6 @@ const HeroImage = class {
     index.registerInstance(this, hostRef);
     /**
      * @uiName Overlay opacity
-     * @uiGroup Style
      */
     this.overlayOpacity = "0.75";
     /**
@@ -1731,13 +1128,11 @@ 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;
     /**
@@ -1745,7 +1140,6 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
-     * @uiGroup Style
      */
     this.imagePos = "center";
     /**
@@ -1753,7 +1147,6 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["top", "bottom"]
      * @uiEnumNames ["Top", "Bottom"]
-     * @uiGroup Style
      */
     this.imageMobilePos = "top";
     /**
@@ -1766,7 +1159,6 @@ 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";
     /**
@@ -1774,19 +1166,9 @@ 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";
-    /**
-     * 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);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1798,7 +1180,7 @@ const SqmHookStoryContainer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1855,7 +1237,7 @@ const Image = class {
 };
 
 function useInputField() {
-  const registrationFormState = domContextHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
+  const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
   return {
     states: {
       registrationFormState: registrationFormState,
@@ -1883,7 +1265,7 @@ const InputField = class {
      * @default
      */
     this.fieldOptional = false;
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1897,7 +1279,7 @@ const InputField = class {
       },
     ]);
     if (!index_module.isDemo() && missingProps) {
-      return (index.h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this input field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
+      return (index.h(useLeadFormState.RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this input field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
     }
     const { states } = index_module.isDemo() ? useInputFieldDemo(this) : useInputField();
     return index.h(ShadowViewAddon.InputFieldView, { states: states, content: content });
@@ -1911,6 +1293,356 @@ function useInputFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+function useLeadDropdownField() {
+  const leadFormState = stencilHooks_module.d(useLeadFormState.LEAD_FORM_STATE_CONTEXT);
+  return {
+    states: {
+      leadFormState,
+    },
+  };
+}
+
+const LeadDropdownField = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Dropdown label
+     */
+    this.dropdownLabel = "Select an option";
+    /**
+     * The message to be displayed when a required field is not filled.
+     *
+     * @uiName Required field message
+     * @uiWidget textArea
+     */
+    this.requiredFieldErrorMessage = "Please select a {dropdownLabel}";
+    /**
+     * @uiName Optional label
+     */
+    this.optionalLabel = "(optional)";
+    /**
+     * @uiName Optional
+     * @default
+     */
+    this.dropdownOptional = false;
+    /**
+     * @uiName Multiple selection
+     * @default
+     */
+    this.multiple = false;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const missingProps = utils.getMissingProps([
+      {
+        attribute: "dropdown-name",
+        value: this.dropdownName,
+      },
+    ]);
+    if (!index_module.isDemo() && missingProps) {
+      return (index.h(useLeadFormState.RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this drop down field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }, index.h("slot", null)));
+    }
+    const content = {
+      ...utils.getProps(this),
+      selectOptions: index.h("slot", null),
+    };
+    const { states } = index_module.isDemo()
+      ? useLeadDropdownFieldDemo(this)
+      : useLeadDropdownField();
+    return (index.h(ShadowViewAddon.LeadDropdownFieldView, { states: states, content: content }));
+  }
+};
+function useLeadDropdownFieldDemo(props) {
+  return cjs.cjs({
+    states: {
+      leadFormState: {},
+    },
+    content: {
+      dropdownName: props.dropdownName,
+      dropdownLabel: props.dropdownLabel,
+      requiredFieldErrorMessage: props.requiredFieldErrorMessage,
+      dropdownOptional: props.dropdownOptional,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+const SUBMIT_LEAD = index_module.dist.gql `
+  mutation submitForm($formSubmissionInput: FormSubmissionInput!) {
+    submitForm(formSubmissionInput: $formSubmissionInput) {
+      success
+    }
+  }
+`;
+const GET_USER_DETAILS = index_module.dist.gql `
+  query getUser($programId: ID) {
+    viewer {
+      ... on User {
+        referralCode(programId: $programId)
+      }
+    }
+  }
+`;
+function useLeadForm(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+  const formRef = stencilHooks_module.useRef(null);
+  const { leadFormState, setLeadFormState } = useLeadFormState.useLeadFormState({});
+  const programId = index_module.H();
+  const user = index_module.J();
+  const { data: userDetails } = index_module.wn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const [submitLead, { loading, errors, data }] = index_module.$e(SUBMIT_LEAD);
+  const [success, setSuccess] = stencilHooks_module.useState(false);
+  stencilHooks_module.useEffect(() => {
+    if (!formRef.current)
+      return;
+    const form = formRef.current;
+    form.addEventListener("sl-input", inputFunction);
+    return () => {
+      form.removeEventListener("sl-input", inputFunction);
+    };
+  }, [formRef.current]);
+  const submit = async (event) => {
+    var _a;
+    let formControls = event.target.getFormControls();
+    let formData = {};
+    let validationErrors = {};
+    formControls === null || formControls === void 0 ? void 0 : formControls.forEach((control) => {
+      if (!control.name)
+        return;
+      const key = control.name;
+      const value = control.value;
+      jsonpointer.jsonpointer.set(formData, key, value);
+      // required validation
+      if (control.required && !value) {
+        jsonpointer.jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
+      }
+      // custom validation
+      if (typeof control.validationError === "function") {
+        const validate = control.validationError;
+        const validationError = validate({ control, key, value });
+        if (validationError)
+          jsonpointer.jsonpointer.set(validationErrors, key, validationError);
+      }
+    });
+    if (Object.keys(validationErrors).length) {
+      setLeadFormState({ loading: false, error: "", validationErrors });
+      // early return for validation errors
+      return;
+    }
+    setLeadFormState({
+      loading: true,
+      error: "",
+      validationErrors: {},
+    });
+    const variables = {
+      key: props.formKey,
+      formData,
+    };
+    try {
+      const result = await submitLead({ formSubmissionInput: variables });
+      if (result instanceof Error) {
+        throw result;
+      }
+      setLeadFormState({
+        loading: false,
+        error: "",
+        validationErrors: {},
+      });
+      if ((_a = result === null || result === void 0 ? void 0 : result.submitForm) === null || _a === void 0 ? void 0 : _a.success) {
+        setSuccess(true);
+      }
+    }
+    catch (error) {
+      setLeadFormState({
+        loading: false,
+        error: props.networkErrorMessage,
+        validationErrors: {},
+      });
+    }
+  };
+  const inputFunction = index_module.useCallback((e) => {
+    var _a, _b;
+    const name = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    if (name !== "tel")
+      return;
+    const asYouType = new AsYouType.AsYouType("US");
+    e.target.value = asYouType.input(e.target.value);
+  }, []);
+  function resetForm() {
+    var _a, _b;
+    setLeadFormState({
+      loading: false,
+      error: "",
+      validationErrors: {},
+    });
+    (_b = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.getFormControls()) === null || _b === void 0 ? void 0 : _b.forEach((c) => {
+      var _a;
+      if (((_a = c.input) === null || _a === void 0 ? void 0 : _a.type) === "checkbox") {
+        c.checked = false;
+        c.value = false;
+      }
+      else {
+        c.value = "";
+      }
+    });
+    setSuccess(false);
+  }
+  let errorMessage = "";
+  if ((_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a["error"]) {
+    errorMessage = props.networkErrorMessage;
+  }
+  else if ((errors === null || errors === void 0 ? void 0 : errors.message) && !((_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors.length)) {
+    errorMessage = props.networkErrorMessage;
+  }
+  else {
+    errorMessage =
+      ((_f = (_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) || (leadFormState === null || leadFormState === void 0 ? void 0 : leadFormState.error);
+  }
+  return {
+    states: {
+      loading,
+      error: errorMessage,
+      success,
+      leadFormState,
+      referralCode: ((_k = userDetails === null || userDetails === void 0 ? void 0 : userDetails.viewer) === null || _k === void 0 ? void 0 : _k.referralCode) || "",
+    },
+    callbacks: {
+      submit,
+      inputFunction,
+      resetForm,
+    },
+    refs: {
+      formRef,
+    },
+  };
+}
+
+const LeadForm = 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 Submit button text
+     */
+    this.submitLabel = "Submit";
+    /**
+     * @uiName Submit another form button label
+     */
+    this.resubmitFormLabel = "Refer Another Friend";
+    /**
+     * @uiName Header text
+     */
+    this.pageLabel = "Refer your friend";
+    /**
+     * Key of the form to connect to. Create and manage forms in the /advocate dashboard under Data > Forms.
+     * @uiName Form key
+     */
+    this.formKey = "lead-form";
+    /**
+     * Optional support link text for error messages.
+     * @uiName Support link text
+     */
+    this.supportLinkText = "Support";
+    /**
+     * Header text shown on successful lead submission.
+     * @uiName Submit success header
+     */
+    this.submitSuccessHeader = "Lead submitted";
+    /**
+     * Description text shown on successful lead submission.
+     * @uiName Submit success description
+     */
+    this.submitSuccessDescription = "Our team will contact your friend to see if they’re a good fit. In the meantime, you can track this referral on Activity page.";
+    /**
+     *  Header text shown if an error occurs.
+     * @uiName Submit error header
+     */
+    this.submitErrorHeader = "An error occurred while submitting";
+    /**
+     * Description text shown if an error occurs.
+     * @uiName Submit error description
+     */
+    this.submitErrorDescription = "Please try again later. If the problem continues, contact {supportLink}";
+    /**
+     * The message to be displayed if a required field is not filled.
+     *
+     * @uiName Required field message
+     * @uiWidget textArea
+     */
+    this.requiredFieldErrorMessage = "Please enter a valid {fieldLabel}";
+    /**
+     * The message to be displayed if a the form submission fails unexpectedly.
+     *
+     * @uiName Network error message
+     * @uiWidget textArea
+     */
+    this.networkErrorMessage = "Network request failed.";
+    /**
+     * The message to be displayed if the email used is invalid.
+     *
+     * @uiName Invalid email message
+     * @uiWidget textArea
+     */
+    this.invalidEmailErrorMessage = "Must be a valid email address";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks, refs } = index_module.isDemo()
+      ? useRegisterDemo(this)
+      : useLeadForm(this);
+    const content = {
+      formData: index.h("slot", { name: "formData" }),
+      emailLabel: this.emailLabel,
+      submitLabel: this.submitLabel,
+      resubmitFormLabel: this.resubmitFormLabel,
+      pageLabel: this.pageLabel,
+      supportLinkText: this.supportLinkText,
+      submitSuccessHeader: this.submitSuccessHeader,
+      submitSuccessDescription: this.submitSuccessDescription,
+      submitErrorHeader: this.submitErrorHeader,
+      submitErrorDescription: this.submitErrorDescription,
+      invalidEmailErrorMessage: this.invalidEmailErrorMessage,
+      requiredFieldErrorMessage: this.requiredFieldErrorMessage,
+      firstNameLabel: this.firstNameLabel,
+      lastNameLabel: this.lastNameLabel,
+    };
+    return (index.h(ShadowViewAddon.LeadFormView, { states: states, callbacks: callbacks, content: content, refs: refs }));
+  }
+};
+function useRegisterDemo(props) {
+  return cjs.cjs({
+    states: {
+      error: "",
+      loading: false,
+      success: false,
+    },
+    callbacks: {
+      submit: async (_event) => {
+        console.log("submit");
+      },
+      inputFunction: () => { },
+      resetForm: () => { },
+    },
+    refs: {
+      formRef: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
 const GET_LEADERBOARD = index_module.dist.gql `
   query (
     $type: String!
@@ -2043,7 +1775,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 = domContextHooks_module.useMemo(() => {
+  const isEssentials = stencilHooks_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]);
@@ -2074,6 +1806,13 @@ 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
      */
@@ -2096,15 +1835,8 @@ 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;
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
     ShadowViewAddon.withShadowView(this);
   }
   disconnectedCallback() { }
@@ -2126,12 +1858,6 @@ 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()
@@ -2202,12 +1928,6 @@ 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: {
@@ -2220,7 +1940,7 @@ function useLeaderboardDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$1 = {
+const style = {
   Container: { display: "contents" },
   Link: {
     textDecoration: "none",
@@ -2232,16 +1952,16 @@ const vanillaStyle = `
   display: inline;   
 }
 `;
-const sheet$1 = JSS.createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
 function LinkButtonView(props) {
   const { onClick, buttonText } = props;
-  return (index.h("span", { class: sheet$1.classes.Container, part: "sqm-base" },
+  return (index.h("span", { class: sheet.classes.Container, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      styleString$1,
+      styleString,
       vanillaStyle),
     index.h("sl-button", { onClick: onClick, type: "primary", exportparts: "base: primarybutton-base" },
-      index.h("a", { class: sheet$1.classes.Link, part: "sqm-link" }, buttonText))));
+      index.h("a", { class: sheet.classes.Link, part: "sqm-link" }, buttonText))));
 }
 
 const LinkButton = class {
@@ -2280,7 +2000,7 @@ const MarketingEmailsCheckbox = class {
      * @undocumented
      */
     this.checkboxName = "marketingEmailOptIn";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2306,7 +2026,7 @@ function useCheckboxFieldDemo$1(props) {
 }
 
 function useNameFields(props) {
-  const registrationFormState = domContextHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
+  const registrationFormState = stencilHooks_module.d(useRegistrationFormState.REGISTRATION_FORM_STATE_CONTEXT);
   return {
     states: {
       registrationFormState,
@@ -2330,7 +2050,7 @@ const NameFields = class {
      * @uiName Last name label
      */
     this.lastNameLabel = "Last Name";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2368,10 +2088,10 @@ function handleMenu(e) {
   index_module.jn.push(e.detail.item.value);
 }
 function useNavigationMenu(props) {
-  const ref = domContextHooks_module.useRef();
+  const ref = stencilHooks_module.useRef();
   const [, rerender] = index_module.yn();
   const user = index_module.J();
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => handleMenu(e));
   }, [ref.current]);
@@ -2395,7 +2115,7 @@ const NavigationMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2422,27 +2142,27 @@ function useNavigationMenuDemo(props) {
 }
 NavigationMenu.style = sqmNavigationMenuCss;
 
-const style$2 = {
+const style$1 = {
   Wrapper: {
     maxWidth: "200px",
     marginLeft: "auto",
   },
   PayoutButtonDescription: {
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-neutral-500)",
     fontSize: "var(--sl-font-size-small)",
     margin: "0",
   },
 };
-const sheet$2 = JSS.createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
+const sheet$1 = JSS.createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
 function PayoutButtonScrollView(props) {
   const { text, states } = props;
   if (!states.payoutSettingsComplete)
     return index.h("div", null);
-  return (index.h("div", { class: sheet$2.classes.Wrapper },
-    index.h("style", { type: "text/css" }, styleString$2),
+  return (index.h("div", { class: sheet$1.classes.Wrapper },
+    index.h("style", { type: "text/css" }, styleString$1),
     index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.payoutButtonText, "scroll-animation": "smooth" }),
-    index.h("p", { class: sheet$2.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
+    index.h("p", { class: sheet$1.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
 }
 
 const GET_PAYOUT_DETAILS = index_module.dist.gql `
@@ -2467,7 +2187,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, {});
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     const cb = () => refetch();
     window.addEventListener("sqm:tax-form-updated", cb);
     return () => window.removeEventListener("sqm:tax-form-updated", cb);
@@ -2493,7 +2213,7 @@ const PayoutButtonScroll = class {
      */
     this.payoutButtonDescription = "Check your payout settings to see when you’ll get paid out next";
     this.ignored = true;
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   getTextProps() {
@@ -2515,7 +2235,7 @@ function useDemoPayoutButtonScroll(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$3 = {
+const style$2 = {
   SkeletonOne: {
     width: "50%",
     height: "16px",
@@ -2524,6 +2244,33 @@ 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",
@@ -2539,15 +2286,8 @@ 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();
+const sheet$2 = JSS.createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
 function PayoutStatusAlertView(props) {
   const { text, states, data, callbacks } = props;
   function getAlert(status) {
@@ -2557,6 +2297,8 @@ function PayoutStatusAlertView(props) {
         description: text.errorDescription,
         buttonText: null,
         alertType: "critical",
+        icon: "exclamation-triangle",
+        class: sheet$2.classes.ErrorAlertContainer,
       };
     switch (status) {
       case "INFORMATION_REQUIRED":
@@ -2565,6 +2307,8 @@ function PayoutStatusAlertView(props) {
           description: text.informationRequiredDescription,
           buttonText: text.informationRequiredButtonText,
           alertType: "info",
+          icon: "info-circle",
+          class: sheet$2.classes.InfoAlertContainer,
         };
       case "VERIFICATION:REQUIRED":
         return {
@@ -2577,6 +2321,8 @@ function PayoutStatusAlertView(props) {
           }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$2.classes.WarningAlertContainer,
         };
       case "VERIFICATION:INTERNAL":
         return {
@@ -2588,6 +2334,8 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$2.classes.WarningAlertContainer,
         };
       case "VERIFICATION:REVIEW":
         return {
@@ -2599,6 +2347,8 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$2.classes.WarningAlertContainer,
         };
       case "VERIFICATION:FAILED":
         return {
@@ -2610,6 +2360,53 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "critical",
+          icon: "exclamation-octagon",
+          class: sheet$2.classes.ErrorAlertContainer,
+        };
+      case "OVER_W9_THRESHOLD":
+        if (states.enforceUsTaxComplianceOption === "CASH_ONLY_DEFER_W9") {
+          return {
+            header: text.w9RequiredHeader,
+            description: global.intl.formatMessage({
+              id: "w9RequiredDescription",
+              defaultMessage: text.w9RequiredDescription,
+            }, {
+              termsAndConditions: (index.h("a", { target: "_blank", href: `https://terms.advocate.impact.com/PayoutTermsAndConditions.html` }, text.termsAndConditions)),
+            }),
+            buttonText: text.w9RequiredButtonText,
+            alertType: "warning",
+            icon: "exclamation-triangle",
+            class: sheet$2.classes.WarningAlertContainer,
+          };
+        }
+        else {
+          return {
+            header: text.holdHeader,
+            description: global.intl.formatMessage({
+              id: "holdDescription",
+              defaultMessage: text.holdDescription,
+            }, {
+              supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+            }),
+            buttonText: null,
+            alertType: "warning",
+            icon: "exclamation-triangle",
+            class: sheet$2.classes.WarningAlertContainer,
+          };
+        }
+      case "ACCOUNT_REVIEW":
+        return {
+          header: text.accountReviewHeader,
+          description: global.intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.accountReviewDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          buttonText: null,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$2.classes.WarningAlertContainer,
         };
       case "HOLD":
         return {
@@ -2622,6 +2419,8 @@ function PayoutStatusAlertView(props) {
           }),
           buttonText: null,
           alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$2.classes.WarningAlertContainer,
         };
       default:
         return;
@@ -2629,33 +2428,35 @@ function PayoutStatusAlertView(props) {
   }
   function getButton(status) {
     switch (status) {
+      case "OVER_W9_THRESHOLD":
+        if (states.enforceUsTaxComplianceOption === "CASH_ONLY")
+          return;
+        return data.type === "SquatchJS2" ? (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.w9RequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (index.h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
+        // Demo case
+        index.h("sl-button", { type: "default" }, text.w9RequiredButtonText));
       case "INFORMATION_REQUIRED":
-        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))) : (
+        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)) : (
         // Demo case
-        index.h("div", { style: { paddingTop: "10px" } },
-          index.h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base" }, text.informationRequiredButtonText)));
+        index.h("sl-button", { type: "default" }, text.informationRequiredButtonText));
       case "VERIFICATION:REQUIRED":
-        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)));
+        return (index.h("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
       default:
         return;
     }
   }
   if (states.loading) {
-    return index.h("sl-skeleton", { class: sheet$3.classes.SkeletonOne });
+    return index.h("sl-skeleton", { class: sheet$2.classes.SkeletonOne });
   }
   const alertDetails = getAlert(states.status);
   if (states.status === "DONE" || !alertDetails) {
     return index.h("div", null);
   }
   return (index.h("div", { part: "sqm-base" },
-    index.h("style", { type: "text/css" }, styleString$3),
-    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),
+    index.h("style", { type: "text/css" }, styleString$2),
+    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$2.classes.AlertDescriptionText }, alertDetails.description),
       getButton(states.status))));
 }
 
@@ -2710,6 +2511,26 @@ const PayoutStatusAlert = class {
      * @uiName Verification failed internal alert description
      */
     this.verificationFailedInternalDescription = "Identity verification has failed. Our team is reviewing the report and will contact you with further information. If you don't hear from us contact our {supportLink}.";
+    /**
+     * @uiName Account review alert header
+     */
+    this.accountReviewHeader = "Your account is under review";
+    /**
+     * @uiName Account review alert description
+     */
+    this.accountReviewDescription = "This process takes 48 hours, payouts are on hold until it's completed. You will receive an email from our referral provider, Impact.com, if any issues arise.  It contains details on how to resolve this issue. If you need further assistance, please reach out to our {supportLink}.";
+    /**
+     * @uiName W-9 payment threshold alert header
+     */
+    this.w9RequiredHeader = "Your next payout is on hold";
+    /**
+     * @uiName W-9 payment threshold alert description
+     */
+    this.w9RequiredDescription = "You have surpassed the $600 threshold requiring a W-9 form or have multiple accounts with impact.com. To remove the hold, please submit your W-9 form.";
+    /**
+     * @uiName W-9 payment threshold alert button text
+     */
+    this.w9RequiredButtonText = "Submit W-9";
     /**
      * @uiName Payout on hold alert header
      */
@@ -2721,11 +2542,15 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Cash & Payouts Microsite Page (only set if alert is used in a microsite)
      */
-    this.cashPayoutsPageUrl = "/cash";
+    this.cashPayoutsPageUrl = "/taxAndCash";
     /**
      * @uiName Support link text
      */
     this.supportLink = "support team";
+    /**
+     * @uiName Terms and Conditions text
+     */
+    this.termsAndConditions = "Terms and Conditions";
     /**
      * @uiName Error header
      */
@@ -2734,7 +2559,7 @@ const PayoutStatusAlert = class {
      * @uiName Error description
      */
     this.errorDescription = "There was an error with determining your payout status.";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   getTextProps() {
@@ -2791,12 +2616,12 @@ const defaultFormState$1 = {
 };
 function usePortalProfile(props) {
   const userIdent = index_module.J();
-  const [success, setSuccess] = domContextHooks_module.useState(false);
-  const [userData, setUserData] = domContextHooks_module.useState(undefined);
-  const [formState, setFormState] = domContextHooks_module.useState(defaultFormState$1);
+  const [success, setSuccess] = stencilHooks_module.useState(false);
+  const [userData, setUserData] = stencilHooks_module.useState(undefined);
+  const [formState, setFormState] = stencilHooks_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);
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading)
       return;
     if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) {
@@ -2820,7 +2645,7 @@ function usePortalProfile(props) {
         setSuccess(true);
     }
   }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading]);
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_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({
@@ -2829,7 +2654,7 @@ function usePortalProfile(props) {
       ...(_b = upsertUserResponse.data) === null || _b === void 0 ? void 0 : _b.upsertUser,
     });
   }, [userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data]);
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_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({
@@ -2902,7 +2727,7 @@ const PortalChangeMarketing = class {
      * @uiName Successful update message
      */
     this.successMessage = "Opt-in preference has been changed.";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -2945,9 +2770,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] = domContextHooks_module.useState(false);
-  const [error, setError] = domContextHooks_module.useState("");
-  const [success, setSuccess] = domContextHooks_module.useState(false);
+  const [open, setOpen] = stencilHooks_module.useState(false);
+  const [error, setError] = stencilHooks_module.useState("");
+  const [success, setSuccess] = stencilHooks_module.useState(false);
   const user = index_module.J();
   const submit = async (event) => {
     var _a, _b;
@@ -3085,7 +2910,7 @@ const PortalChangePassword = class {
      * @uiName Missing number or symbol text
      */
     this.hasErrorText = "contain at least 1 number or symbol";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3096,7 +2921,7 @@ const PortalChangePassword = class {
   }
 };
 function usePortalChangePasswordDemo(props) {
-  const [open, setOpen] = domContextHooks_module.useState(false);
+  const [open, setOpen] = stencilHooks_module.useState(false);
   return cjs.cjs({
     states: {
       open,
@@ -3180,7 +3005,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";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3189,7 +3014,7 @@ const PortalFooter = class {
   static get assetsDirs() { return ["../../assets"]; }
 };
 
-function usePortalFrame(footerContent, headerContent, props) {
+function usePortalFrame(footerContent, headerContent) {
   const [, rerender] = index_module.yn();
   return {
     data: {
@@ -3199,9 +3024,6 @@ function usePortalFrame(footerContent, headerContent, props) {
     callbacks: {
       rerender,
     },
-    backgroundColor: props.backgroundColor,
-    border: props.border,
-    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
   };
 }
 
@@ -3213,26 +3035,7 @@ const PortalFrame = class {
      * @undocumented
      */
     this.notFullScreen = false;
-    /**
-     * @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);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3240,16 +3043,13 @@ const PortalFrame = class {
     const headerContent = index.h("slot", { name: "header" });
     const props = index_module.isDemo()
       ? usePortalFrameDemo(footerContent, headerContent, this)
-      : usePortalFrame(footerContent, headerContent, this);
+      : usePortalFrame(footerContent, headerContent);
     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: {
@@ -3320,7 +3120,7 @@ const PortalLogin = class {
      * @uiName Register CTA
      */
     this.registerCTA = "Don't have an account?";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3339,7 +3139,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", { exportparts: "base: secondarybutton-base", 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", { type: "text", disabled: states.loading, onClick: () => index_module.jn.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -3373,10 +3173,10 @@ function useLoginDemo(props) {
 
 function usePortalRegister(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-  const formRef = domContextHooks_module.useRef(null);
+  const formRef = stencilHooks_module.useRef(null);
   const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
   const [request, { loading, errors, data }] = index_module.Ve();
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     if (!formRef.current)
       return;
     const form = formRef.current;
@@ -3501,7 +3301,7 @@ function usePortalRegister(props) {
 const PortalRegister = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.ignored = false;
+    this.ignored = true;
     /**
      * Redirect participants to this page from their verification email
      *
@@ -3613,12 +3413,12 @@ const PortalRegister = class {
      * @uiName Missing number or symbol text
      */
     this.hasErrorText = "contain at least 1 number or symbol";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
     const { states, callbacks, refs } = index_module.isDemo()
-      ? useRegisterDemo(this)
+      ? useRegisterDemo$1(this)
       : usePortalRegister(this);
     const content = {
       formData: index.h("slot", { name: "formData" }),
@@ -3641,7 +3441,7 @@ const PortalRegister = class {
     return (index.h(ShadowViewAddon.PortalRegisterView, { states: states, callbacks: callbacks, content: content, refs: refs }));
   }
 };
-function useRegisterDemo(props) {
+function useRegisterDemo$1(props) {
   return cjs.cjs({
     states: {
       error: "",
@@ -3667,7 +3467,7 @@ function useRegisterDemo(props) {
 function ProgramExplainerView(props, children) {
   const style = {
     Container: {
-      color: props.textColor || "var(--sqm-text)",
+      color: props.textColor || "var(--sl-color-neutral-900)",
       background: props.backgroundColor || "",
     },
     Header: {
@@ -3711,7 +3511,7 @@ const ProgramExplainer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3727,11 +3527,8 @@ function ProgramExplainerStepView(props) {
       width: "100%",
       padding: "var(--sl-spacing-x-large)",
       lineHeight: "var(--sl-line-height-dense)",
-      borderRadius: props.borderRadius
-        ? `${props.borderRadius}px`
-        : "var(--sqm-border-radius-normal)",
-      color: props.textColor || "var(--sqm-text)",
-      background: props.backgroundColor || "var(--sqm-accent-color-background)",
+      color: props.textColor || "var(--sl-color-neutral-900)",
+      background: props.backgroundColor || "var(--sl-color-primary-50)",
       "@media (max-width: 499px)": {
         flexDirection: "row",
         width: "auto",
@@ -3744,7 +3541,6 @@ function ProgramExplainerStepView(props) {
       },
     },
     Header: {
-      color: props.textColor || "var(--sqm-text)",
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-bold)",
       marginTop: "var(--sl-spacing-x-large)",
@@ -3753,7 +3549,6 @@ function ProgramExplainerStepView(props) {
       },
     },
     Description: {
-      color: props.textColor || "var(--sqm-text)",
       fontSize: "var(--sl-font-size-medium)",
       marginTop: "var(--sl-spacing-small)",
       "@media (max-width: 499px)": {
@@ -3766,14 +3561,11 @@ function ProgramExplainerStepView(props) {
       borderRadius: "100%",
       objectFit: "cover",
       userSelect: "none",
-      background: props.iconBackgroundColor || "var(--sl-color-white)",
-      color: props.iconColor || "var(--sqm-accent-color-icon)",
+      background: "#FFF",
+      color: "var(--sl-color-primary-300)",
       fontSize: "26px",
       textAlign: "center",
       lineHeight: "72px",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
     },
   };
   const sheet = JSS.createStyleSheet(style);
@@ -3790,7 +3582,7 @@ function ProgramExplainerStepView(props) {
 const ProgramExplainerStep = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3798,15 +3590,15 @@ const ProgramExplainerStep = class {
   }
 };
 
-const debug = domContextHooks_module.browser("sq:useProgramMenu");
+const debug = stencilHooks_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 = domContextHooks_module.useRef();
+  const ref = stencilHooks_module.useRef();
   const [, rerender] = index_module.yn();
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     var _a;
     (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => {
       const programId = e.detail.item.value;
@@ -3833,7 +3625,7 @@ const ProgramMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3842,47 +3634,44 @@ const ProgramMenu = class {
   }
 };
 
-const vanillaStyle$2 = `
+const style$3 = {
+  Container: {
+    borderRadius: "var(--sl-border-radius-large)",
+    color: "var(--sl-color-neutral-900)",
+    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$3 = JSS.createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
+const vanillaStyle$1 = `
     :host{
       display: block;   
     }
   `;
 function ReferralCardView(props) {
-  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}`}`,
+  return (index.h("div", { part: "sqm-base", class: sheet$3.classes.Container, style: {
+      border: `${props.hideBorder ? "none" : "1px solid var(--sl-color-neutral-300)"}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,
@@ -3892,15 +3681,15 @@ function ReferralCardView(props) {
       margin: `${props.limitWidth ? "auto" : "none"}`,
     } },
     index.h("style", { type: "text/css" },
-      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: {
+      styleString$3,
+      vanillaStyle$1),
+    props.hasHeader && (index.h("div", { class: sheet$3.classes.EndContainer }, props.slots.header)),
+    index.h("div", { part: "sqm-column-container", class: sheet$3.classes.ColumnContainer, style: {
         alignItems: props.verticalAlignment,
       } },
       props.slots.left,
       props.slots.right),
-    props.hasFooter && (index.h("div", { class: sheet.classes.EndContainer }, props.slots.footer))));
+    props.hasFooter && (index.h("div", { class: sheet$3.classes.EndContainer }, props.slots.footer))));
 }
 
 const ReferralCard = class {
@@ -3947,12 +3736,18 @@ 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;
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -3969,7 +3764,7 @@ const ReferralCard = class {
   }
 };
 
-const GET_USER_DETAILS = index_module.dist.gql `
+const GET_USER_DETAILS$1 = index_module.dist.gql `
   query getUser($programId: ID) {
     viewer {
       ... on User {
@@ -3982,7 +3777,7 @@ function useReferralIframe(props) {
   var _a;
   const programId = index_module.H();
   const user = index_module.J();
-  const { data } = index_module.wn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const { data } = index_module.wn(GET_USER_DETAILS$1, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   return {
     states: {
       content: props,
@@ -4007,7 +3802,7 @@ const SqmReferralIframe = class {
      * @uiName IFrame width
      */
     this.iframeWidth = "100%";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -4018,7 +3813,7 @@ const SqmReferralIframe = class {
       },
     ]);
     if (missingProps) {
-      return (index.h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this page", subheading: "A technical problem prevented this iframe from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
+      return (index.h(useLeadFormState.RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this page", subheading: "A technical problem prevented this iframe from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
     }
     const { states, data } = index_module.isDemo()
       ? useReferralIframeDemo(utils.getProps(this))
@@ -4040,161 +3835,6 @@ 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 = {};
 
@@ -4850,7 +4490,7 @@ const EXCHANGE = index_module.dist.gql `
 `;
 function useRewardExchangeList(props) {
   var _a, _b, _c, _d, _e;
-  const [exchangeState, setExchangeState] = domContextHooks_module.useReducer((state, next) => ({
+  const [exchangeState, setExchangeState] = stencilHooks_module.useReducer((state, next) => ({
     ...state,
     ...next,
   }), {
@@ -4860,12 +4500,12 @@ function useRewardExchangeList(props) {
     amount: 0,
     exchangeError: false,
   });
-  const [open, setOpen] = domContextHooks_module.useState(false);
+  const [open, setOpen] = stencilHooks_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));
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_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 });
@@ -4874,8 +4514,8 @@ function useRewardExchangeList(props) {
       setExchangeState({ exchangeError: true });
     }
   }, [exchangeResponse, errors]);
-  const canvasRef = domContextHooks_module.useRef();
-  domContextHooks_module.useEffect(() => {
+  const canvasRef = stencilHooks_module.useRef();
+  stencilHooks_module.useEffect(() => {
     if (!canvasRef.current)
       return;
     const canvas = canvasRef.current;
@@ -5131,14 +4771,7 @@ const SqmRewardExchangeList = class {
      * @uiName Cost row title
      */
     this.costTitle = "Cost to Redeem";
-    /**
-     * @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);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -5157,10 +4790,6 @@ 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: {
@@ -5175,9 +4804,10 @@ function useRewardExchangeListDemo(props) {
       queryError: false,
       loading: false,
       noExchangeOptions: false,
+      empty: EmptySlot$1(),
     },
     data: {
-      // shareCode: "SHARECODE123",
+      shareCode: "SHARECODE123",
       exchangeList: ShadowViewAddon.demoRewardExchange.data.exchangeList,
     },
     callbacks: {
@@ -5190,10 +4820,10 @@ function useRewardExchangeListDemo(props) {
     refs: {
       canvasRef: {},
     },
-  }, props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const debug$1 = domContextHooks_module.browser("sq:useRouter");
+const debug$1 = stencilHooks_module.browser("sq:useRouter");
 function matchPath(pattern, page) {
   if (!pattern)
     return;
@@ -5203,11 +4833,11 @@ function matchPath(pattern, page) {
 function useRouter() {
   const location = index_module.kn();
   const host = index_module._();
-  const [slot, setSlot] = domContextHooks_module.useState(undefined);
-  const [container, setContainer] = domContextHooks_module.useState(undefined);
+  const [slot, setSlot] = stencilHooks_module.useState(undefined);
+  const [container, setContainer] = stencilHooks_module.useState(undefined);
   const page = location.pathname;
   // convert sqm-routes into templates
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     const routes = host.querySelectorAll(`sqm-route`);
     const routesArray = Array.from(routes);
     routesArray.forEach((route) => {
@@ -5218,7 +4848,7 @@ function useRouter() {
       route.parentNode.removeChild(route);
     });
   }, []);
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     var _a, _b;
     if (!container || !slot) {
       debug$1("DOM not ready for navigation rendering on:", page);
@@ -5275,7 +4905,7 @@ const SqmRouter = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -5293,8 +4923,8 @@ const ShareButton = class {
     /**
      * @uiType string
      * @uiName Button style
-     * @uiEnum ["primary", "secondary", "success", "info", "warning", "danger", "default", "text" ]
-     * @uiEnumNames ["Primary", "Secondary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
+     * @uiEnum ["primary" , "success", "info", "warning", "danger", "default", "text" ]
+     * @uiEnumNames ["Primary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
      */
     this.type = "default";
     /**
@@ -5306,13 +4936,11 @@ const ShareButton = class {
     this.iconslot = "prefix";
     /**
      * @uiName Hide icon
-     * @uiGroup Style
      * @default
      */
     this.hideicon = false;
     /**
      * @uiName Hide text
-     * @uiGroup Style
      * @default
      */
     this.hidetext = false;
@@ -5326,7 +4954,7 @@ const ShareButton = class {
      * @uiName Unsupported platform text
      */
     this.unsupportedPlatformText = "Error: not on a supported device";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -5373,7 +5001,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] = domContextHooks_module.useState(false);
+  const [open, setOpen] = stencilHooks_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
@@ -5418,7 +5046,6 @@ const ShareCode = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
-     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -5432,19 +5059,9 @@ const ShareCode = class {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
-     * @uiGroup Style
      */
     this.buttonStyle = "icon";
-    /**
-     * 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);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -5456,7 +5073,7 @@ const ShareCode = class {
   }
 };
 function useDemoShareCode(props) {
-  const [open, setOpen] = domContextHooks_module.useState(false);
+  const [open, setOpen] = stencilHooks_module.useState(false);
   const copyString = "SHARECODE001";
   return cjs.cjs({
     copyString: copyString,
@@ -5464,11 +5081,6 @@ function useDemoShareCode(props) {
     textAlign: props.textAlign,
     copyButtonLabel: props.copyButtonLabel,
     buttonStyle: props.buttonStyle,
-    backgroundColor: props.backgroundColor,
-    textColor: props.textColor,
-    borderRadius: props.borderRadius,
-    borderColor: props.borderColor,
-    buttonType: props.buttonType,
     rewardStatus: "AVAILABLE",
     open,
     onClick: () => {
@@ -5503,33 +5115,22 @@ const ShareLink = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
-     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
      * @uiName Copy button label
      */
     this.copyButtonLabel = "Copy Link";
-    /**
-     * 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";
     /**
      * Set the copy button style and placement
      *
-     * @uiName Button style
+     * @uiName Style
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
-     * @uiGroup Style
      */
     this.buttonStyle = "icon";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -5541,19 +5142,14 @@ const ShareLink = class {
   }
 };
 function useDemoShareLink(props) {
-  const [open, setOpen] = domContextHooks_module.useState(false);
+  const [open, setOpen] = stencilHooks_module.useState(false);
   const copyString = "https://www.example.com/sharelink/abc";
   return cjs.cjs({
     copyString: copyString,
     tooltiptext: props.tooltiptext,
     textAlign: props.textAlign,
     buttonStyle: props.buttonStyle,
-    backgroundColor: props.backgroundColor,
-    textColor: props.textColor,
-    borderRadius: props.borderRadius,
-    buttonType: props.buttonType,
     copyButtonLabel: props.copyButtonLabel,
-    borderColor: props.borderColor,
     rewardStatus: "AVAILABLE",
     open,
     onClick: () => {
@@ -5578,30 +5174,13 @@ const StatContainer = class {
      */
     this.space = "xxx-large";
     /**
-     * @undocumented
      * @uiName Display
      * @uiType string
      * @uiEnum ["grid", "flex"]
      * @uiEnumNames ["Grid", "Flex"]
      */
-    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);
+    this.display = "grid";
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -5621,7 +5200,7 @@ function useTaskCard(props) {
   const locale = index_module.L();
   const [sendUserEvent, { data, loading: loadingEvent }] = index_module.$e(SEND_EVENT);
   const { refresh } = index_module.Qe();
-  domContextHooks_module.useEffect(() => {
+  stencilHooks_module.useEffect(() => {
     if (data) {
       refresh();
       openLink();
@@ -5644,18 +5223,8 @@ function useTaskCard(props) {
   function onClick() {
     props.eventKey ? sendEvent(props.eventKey) : openLink();
   }
-  const styles = {
-    card: {
-      backgroundColor: props.backgroundColor,
-      textColor: props.textColor,
-      borderColor: props.borderColor,
-      borderRadius: props.borderRadius,
-      buttonType: props.buttonType,
-    },
-  };
   return {
     states: { loadingEvent, locale },
-    styles,
     callbacks: { sendEvent, onClick },
   };
 }
@@ -5769,15 +5338,7 @@ const TaskCard = class {
      * @uiGroup Button
      */
     this.hideButton = false;
-    /**
-     * @uiName Button Style
-     * @uiType string
-     * @uiEnum ["primary", "secondary"]
-     * @uiEnumNames ["Primary", "Secondary"]
-     * @uiGroup Style
-     */
-    this.buttonType = "primary";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -5798,7 +5359,6 @@ const TaskCard = class {
 };
 function useTaskCardDemo(props) {
   return cjs.cjs({
-    content: { ...props },
     states: { loadingEvent: false, locale: "en" },
     callbacks: {
       sendEvent: (event) => console.log(event),
@@ -5818,7 +5378,7 @@ const Timeline = class {
      * @uiEnumNames ["Gift", "Circle"]
      */
     this.icon = "gift";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -5852,7 +5412,52 @@ 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 vanillaStyle$3 = `
+const style$4 = {
+  TimelineReward: {
+    color: "var(--sl-color-neutral-900)",
+    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$4 = JSS.createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
+const vanillaStyle$2 = `
 	:host{
 		display: block; 
 	}
@@ -5864,55 +5469,10 @@ const vanillaStyle$3 = `
 function TimelineEntryView(props) {
   var _a;
   const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  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" },
+  return (index.h("div", { class: sheet$4.classes.TimelineReward, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      styleString,
-      vanillaStyle$3),
+      styleString$4,
+      vanillaStyle$2),
     index.h("div", { class: "container", part: "sqm-entry-container" },
       index.h("div", { class: "line" }, "/"),
       index.h("div", { class: "step" },
@@ -5932,7 +5492,7 @@ const TimelineReward = class {
     index.registerInstance(this, hostRef);
     this.ignored = true;
     this.iconState = "gift";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   async setIcon(value) {
     this.iconState = value;
@@ -5986,7 +5546,7 @@ const UserName = class {
      * @uiName Loading text
      */
     this.loadingText = "...";
-    domContextHooks_module.h$1(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
@@ -6004,7 +5564,6 @@ 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;
@@ -6016,6 +5575,8 @@ exports.sqm_hero_image = HeroImage;
 exports.sqm_hook_story_container = SqmHookStoryContainer;
 exports.sqm_image = Image;
 exports.sqm_input_field = InputField;
+exports.sqm_lead_dropdown_field = LeadDropdownField;
+exports.sqm_lead_form = LeadForm;
 exports.sqm_leaderboard = Leaderboard;
 exports.sqm_link_button = LinkButton;
 exports.sqm_marketing_emails_checkbox = MarketingEmailsCheckbox;
@@ -6034,7 +5595,6 @@ 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;