@saasquatch/mint-components 1.15.0-99 → 1.15.1-0

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

@@ -1,376 +1,28 @@
-import { r as registerInstance, h as h$1, c as Host } from './index-b3a06de8.js';
-import { b as buildFontsCssUrl, i as intl } from './global-f97ae778.js';
-import { n as h, f as useEffect, k as useState, i as d, u as useMemo, m as useRef, b as browser, j as useReducer } from './dom-context-hooks.module-63370afd.js';
-import { i as isDemo, _ as _$1, d as dist, J, H, B, $ as $e, w as wn, L, y as yn, j as jn, r as Ue, V as Ve, u as useCallback, b as setUserIdentity, Q as Qe, k as kn } from './index.module-38dad6c9.js';
+import { r as registerInstance, h as h$1, c as Host } from './index-91e7729f.js';
+import { n as h, f as useEffect, i as d, k as useState, m as useRef, u as useMemo, b as browser, j as useReducer } from './stencil-hooks.module-4bc38af4.js';
+import { i as intl } from './global-be1f9992.js';
+import { i as isDemo, _, d as dist, J, H, $ as $e, w as wn, B, u as useCallback, L, y as yn, j as jn, r as Ue, V as Ve, Q as Qe, k as kn } from './index.module-89a79f66.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps, a as getMissingProps } from './utils-03188de2.js';
+import { g as getProps, a as getMissingProps } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import './useReferralCodes-311e6d72.js';
-import './mixins-f750863a.js';
-import { C as CopyTextView } from './copy-text-view-ab2fda20.js';
-import { a as useRequestRerender } from './re-render-9c90767d.js';
-import { u as useChildElements } from './useChildElements-4e70ac0e.js';
-import './luxon-bbf75a9d.js';
-import './sqm-text-span-view-4c17b8c9.js';
+import './useReferralCodes-8f75921a.js';
+import './mixins-83f90fa1.js';
+import { C as CopyTextView } from './copy-text-view-782137ba.js';
+import { a as useRequestRerender } from './re-render-cc945f38.js';
+import { u as useChildElements } from './useChildElements-7945ae56.js';
+import './luxon-8d51c92b.js';
+import './sqm-text-span-view-ca32495e.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
-import { E as EmailRegistrationView } from './email-registration-view-1f587f8b.js';
-import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-18c2cea7.js';
-import { u as useInstantAccessRegistration } from './useInstantAccessRegistration-0f04459e.js';
-import { P as PortalLoginView } from './sqm-portal-login-view-7670cd86.js';
-import { u as usePortalLogin } from './usePortalLogin-d0720c81.js';
+import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-d6f33135.js';
+import { R as RequiredPropsError, L as LEAD_FORM_STATE_CONTEXT, u as useLeadFormState } from './useLeadFormState-9016d812.js';
+import { P as PortalLoginView } from './sqm-portal-login-view-7e49609a.js';
+import { u as usePortalLogin } from './usePortalLogin-ef647a50.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { i as isEmpty } from './utilities-ad9c2893.js';
-import { u as useDemoBigStat, Q as useBigStat, B as BigStatView, C as CardFeedView, c as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, U as withShadowView, L as LeaderboardView, N as NameFieldsView, f as ChangeMarktingView, P as PortalChangePasswordView, g as PortalFooterView, h as PortalFrameView, d as PortalRegisterView, R as ReferralIframeView, i as RewardExchangeView, V as demoRewardExchange, G as useShareButton, a as ShareButtonView, J as useShareLink, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-cf7c03a0.js';
-import './sqm-portal-container-view-176e92e3.js';
-import { p as parseStates } from './parseStates-ed75e224.js';
-import { u as usePayoutStatus } from './usePayoutStatus-7eeec61b.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
-});
+import { i as isEmpty } from './utilities-5b0ca040.js';
+import { b as useDemoBigStat, W as useBigStat, B as BigStatView, U as autoColorScaleCss, J as CardFeedView, i as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, Q as LeadDropdownFieldView, O as LeadFormView, X as withShadowView, L as LeaderboardView, N as NameFieldsView, C as ChangeMarktingView, d as PortalChangePasswordView, h as PortalFooterView, P as PortalFrameView, e as PortalRegisterView, R as ReferralIframeView, Y as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-f2176779.js';
+import './sqm-portal-container-view-1683ae32.js';
+import { u as usePayoutStatus } from './usePayoutStatus-4a7625b9.js';
 
 const BigStat = class {
   constructor(hostRef) {
@@ -380,19 +32,8 @@ 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;
     h(this);
   }
@@ -400,62 +41,24 @@ const BigStat = class {
   render() {
     var _a;
     const { props, label } = isDemo() ? useDemoBigStat(this) : useBigStat(this);
-    const host = _$1();
+    const host = _();
     const hasLabel = !!((_a = host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim());
     const labelSlot = h$1("slot", { name: "label" }, hasLabel ? h$1("slot", null) : label);
     return h$1(BigStatView, Object.assign({}, props, { labelSlot: labelSlot }));
   }
 };
 
-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
  *
- * @param color
- * @param name
- * @returns
+ * Docs: https://developers.google.com/fonts/docs/css2
+ *
+ * @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 {
@@ -465,7 +68,7 @@ const BrandComponent = class {
   }
   disconnectedCallback() { }
   render() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     function getCss(brandColor) {
       if (brandColor) {
         try {
@@ -475,14 +78,11 @@ const BrandComponent = class {
       }
       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;
+    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;
     useEffect(() => {
-      if (!sanitizedFont || brandingConfigFont) {
+      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");
@@ -502,10 +102,6 @@ const BrandComponent = class {
            - resets css variable inheritence for fonts
           
           */
-
-          ${brandingConfigFont
-      ? ``
-      : `
           ::slotted(*) {
             --sl-font-sans: "${font}", arial;
             --sl-input-font-family: "${font}", arial;
@@ -513,7 +109,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);
@@ -522,195 +117,6 @@ const BrandComponent = class {
   }
 };
 
-const LOCAL_STORAGE_BRAND_KEY = "localStorageBrandKey";
-const LOCAL_STORAGE_BRAND_CONFIG_KEY = "localStorageBrandConfigKey";
-const SqmBrandSelector = class {
-  constructor(hostRef) {
-    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 (h$1(Host, null, h$1("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 */
-              }
-          }
-          `), h$1("div", { class: "card-container" }, h$1("h2", { class: "card-heading" }, "Select Branding"), h$1("div", { class: "segmented-control-container" }, this.brands.map((brand) => (h$1("div", { key: brand.name, class: `brand-segment ${this.selectedBrand === brand.name ? "active" : ""}`, onClick: () => this.updateBrand(brand.name) }, h$1("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) {
     registerInstance(this, hostRef);
@@ -732,58 +138,6 @@ 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 = 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 = _$1();
-  const [detailsOpen, setDetailsOpen] = useState(false);
-  return (h$1("sl-alert", { type: "danger", open: true },
-    h$1("style", { type: "text/css" }, styleString),
-    h$1("div", { slot: "icon", class: sheet.classes.IconStyle },
-      h$1("sl-icon", { name: "exclamation-octagon" })),
-    h$1("div", { class: sheet.classes.DivStyle },
-      h$1("h2", { class: sheet.classes.Heading }, intl.formatMessage({
-        id: `error-heading`,
-        defaultMessage: heading,
-      })),
-      h$1("p", null, intl.formatMessage({
-        id: `error-subheading`,
-        defaultMessage: subheading,
-      }))),
-    h$1("details", { class: sheet.classes.Details },
-      h$1("summary", { onClick: () => setDetailsOpen(!detailsOpen) },
-        detailsOpen ? "Less" : "More",
-        " details"),
-      h$1("p", null, intl.formatMessage({
-        id: `error-description`,
-        defaultMessage: description,
-      }, { tagName: host.tagName.toLowerCase() })),
-      h$1("ul", null, missingProps.map((prop) => (h$1("li", null,
-        h$1("strong", null, prop.attribute)))))),
-    h$1("div", { class: sheet.classes.Children }, children)));
-}
-
 function useCheckboxField(props) {
   var _a;
   const registrationFormState = d(REGISTRATION_FORM_STATE_CONTEXT);
@@ -883,6 +237,7 @@ const FuelTankRewardsQuery = dist.gql `
             dateCancelled
             dateScheduledFor
             datePendingForUnhandledError
+            pendingReasons
           }
           count
           totalCount
@@ -902,16 +257,61 @@ function useCouponCode(props) {
   const programId = H();
   const engagementMedium = B();
   const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT);
+  const [retried, setRetried] = useState(false);
+  const [countdown, setCountdown] = useState(60);
+  const timerRef = useRef(undefined);
+  const countdownRef = useRef(undefined);
   const { data, loading, refetch, errors } = 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
+  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
+  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]);
+  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", {
@@ -949,6 +349,21 @@ function useCouponCode(props) {
         return props.expiredErrorText;
       case "EMPTY_TANK":
         return props.fullfillmentErrorText;
+      case "ERROR_SYNCING_FUEL_TANK_CODE":
+        return retried
+          ? intl.formatMessage({
+            id: "codeSyncErrorText",
+            defaultMessage: props.codeSyncErrorText,
+          }, {
+            supportEmail: "advocate-support@impact.com",
+          })
+          : intl.formatMessage({
+            id: "codeSyncErrorText",
+            defaultMessage: props.codeSyncErrorRetryText,
+          }, {
+            supportEmail: "advocate-support@impact.com",
+            timeRemaining: countdown,
+          });
       case "PENDING":
         return props.pendingErrorText.replace("{unpendDate}", dateAvailable);
       case "REDEEMED":
@@ -965,6 +380,7 @@ function useCouponCode(props) {
       case "EMPTY_TANK":
       case "CANCELLED":
       case "ERROR":
+      case "ERROR_SYNCING_FUEL_TANK_CODE":
         return "warning";
       case "PENDING":
         return "info";
@@ -987,7 +403,6 @@ function useCouponCode(props) {
     dateAvailable,
     loading,
     errorType,
-    buttonType: props.buttonType || "primary",
   };
 }
 
@@ -1011,7 +426,6 @@ const CouponCode = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
-     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -1025,7 +439,6 @@ const CouponCode = class {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
-     * @uiGroup Style
      */
     this.buttonStyle = "icon";
     /**
@@ -1072,6 +485,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.
      *
@@ -1087,15 +516,6 @@ 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";
     h(this);
   }
   disconnectedCallback() { }
@@ -1119,11 +539,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
@@ -1138,23 +555,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)": {
@@ -1170,10 +578,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;`
     : ""}
@@ -1205,17 +614,10 @@ const DividedLayout = class {
   constructor(hostRef) {
     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";
+    this.dividerStyle = "1px solid #EAEAEA";
     h(this);
   }
   disconnectedCallback() { }
@@ -1536,12 +938,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"]
@@ -1556,10 +958,6 @@ 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;
     h(this);
   }
   disconnectedCallback() { }
@@ -1588,7 +986,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,
       },
     },
@@ -1614,7 +1012,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 + ")",
@@ -1625,7 +1023,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 + ")",
@@ -1695,7 +1093,7 @@ function HeroImageView(props, children) {
       h$1("div", { class: sheet.classes.Overlay, part: "sqm-overlay" },
         props.header && (h$1("div", { class: sheet.classes.Header }, props.header)),
         props.description && (h$1("div", { class: sheet.classes.Description }, props.description)),
-        props.buttonText && (h$1("sl-button", { class: sheet.classes.Button, type: "primary", exportparts: `base: ${props.buttonType}button-base`, onClick: () => props.buttonNewTab
+        props.buttonText && (h$1("sl-button", { class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
             ? window.open(props.buttonLink)
             : window.open(props.buttonLink, "_parent") }, props.buttonText)),
         children && children)));
@@ -1719,7 +1117,6 @@ const HeroImage = class {
     registerInstance(this, hostRef);
     /**
      * @uiName Overlay opacity
-     * @uiGroup Style
      */
     this.overlayOpacity = "0.75";
     /**
@@ -1727,13 +1124,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;
     /**
@@ -1741,7 +1136,6 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
-     * @uiGroup Style
      */
     this.imagePos = "center";
     /**
@@ -1749,7 +1143,6 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["top", "bottom"]
      * @uiEnumNames ["Top", "Bottom"]
-     * @uiGroup Style
      */
     this.imageMobilePos = "top";
     /**
@@ -1762,7 +1155,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";
     /**
@@ -1770,18 +1162,8 @@ 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";
     h(this);
   }
   disconnectedCallback() { }
@@ -1907,6 +1289,356 @@ function useInputFieldDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+function useLeadDropdownField() {
+  const leadFormState = d(LEAD_FORM_STATE_CONTEXT);
+  return {
+    states: {
+      leadFormState,
+    },
+  };
+}
+
+const LeadDropdownField = class {
+  constructor(hostRef) {
+    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;
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const missingProps = getMissingProps([
+      {
+        attribute: "dropdown-name",
+        value: this.dropdownName,
+      },
+    ]);
+    if (!isDemo() && missingProps) {
+      return (h$1(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:" }, h$1("slot", null)));
+    }
+    const content = {
+      ...getProps(this),
+      selectOptions: h$1("slot", null),
+    };
+    const { states } = isDemo()
+      ? useLeadDropdownFieldDemo(this)
+      : useLeadDropdownField();
+    return (h$1(LeadDropdownFieldView, { states: states, content: content }));
+  }
+};
+function useLeadDropdownFieldDemo(props) {
+  return cjs({
+    states: {
+      leadFormState: {},
+    },
+    content: {
+      dropdownName: props.dropdownName,
+      dropdownLabel: props.dropdownLabel,
+      requiredFieldErrorMessage: props.requiredFieldErrorMessage,
+      dropdownOptional: props.dropdownOptional,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+const SUBMIT_LEAD = dist.gql `
+  mutation submitForm($formSubmissionInput: FormSubmissionInput!) {
+    submitForm(formSubmissionInput: $formSubmissionInput) {
+      success
+    }
+  }
+`;
+const GET_USER_DETAILS = 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 = useRef(null);
+  const { leadFormState, setLeadFormState } = useLeadFormState({});
+  const programId = H();
+  const user = J();
+  const { data: userDetails } = wn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const [submitLead, { loading, errors, data }] = $e(SUBMIT_LEAD);
+  const [success, setSuccess] = useState(false);
+  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.set(formData, key, value);
+      // required validation
+      if (control.required && !value) {
+        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.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 = 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("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) {
+    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";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks, refs } = isDemo()
+      ? useRegisterDemo(this)
+      : useLeadForm(this);
+    const content = {
+      formData: h$1("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 (h$1(LeadFormView, { states: states, callbacks: callbacks, content: content, refs: refs }));
+  }
+};
+function useRegisterDemo(props) {
+  return 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 = dist.gql `
   query (
     $type: String!
@@ -2070,6 +1802,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
      */
@@ -2092,13 +1831,6 @@ 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;
     h(this);
     withShadowView(this);
@@ -2122,12 +1854,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 = isDemo()
@@ -2198,12 +1924,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: {
@@ -2216,7 +1936,7 @@ function useLeaderboardDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$1 = {
+const style = {
   Container: { display: "contents" },
   Link: {
     textDecoration: "none",
@@ -2228,16 +1948,16 @@ const vanillaStyle = `
   display: inline;   
 }
 `;
-const sheet$1 = createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
 function LinkButtonView(props) {
   const { onClick, buttonText } = props;
-  return (h$1("span", { class: sheet$1.classes.Container, part: "sqm-base" },
+  return (h$1("span", { class: sheet.classes.Container, part: "sqm-base" },
     h$1("style", { type: "text/css" },
-      styleString$1,
+      styleString,
       vanillaStyle),
     h$1("sl-button", { onClick: onClick, type: "primary", exportparts: "base: primarybutton-base" },
-      h$1("a", { class: sheet$1.classes.Link, part: "sqm-link" }, buttonText))));
+      h$1("a", { class: sheet.classes.Link, part: "sqm-link" }, buttonText))));
 }
 
 const LinkButton = class {
@@ -2418,27 +2138,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 = createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
+const sheet$1 = createStyleSheet(style$1);
+const styleString$1 = sheet$1.toString();
 function PayoutButtonScrollView(props) {
   const { text, states } = props;
   if (!states.payoutSettingsComplete)
     return h$1("div", null);
-  return (h$1("div", { class: sheet$2.classes.Wrapper },
-    h$1("style", { type: "text/css" }, styleString$2),
+  return (h$1("div", { class: sheet$1.classes.Wrapper },
+    h$1("style", { type: "text/css" }, styleString$1),
     h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.payoutButtonText, "scroll-animation": "smooth" }),
-    h$1("p", { class: sheet$2.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
+    h$1("p", { class: sheet$1.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
 }
 
 const GET_PAYOUT_DETAILS = dist.gql `
@@ -2511,7 +2231,7 @@ function useDemoPayoutButtonScroll(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$3 = {
+const style$2 = {
   SkeletonOne: {
     width: "50%",
     height: "16px",
@@ -2520,6 +2240,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",
@@ -2535,15 +2282,8 @@ const style$3 = {
     "&::part(footer)": {},
   },
 };
-const vanillaStyle$1 = `
-  a {
-    color: inherit;
-    text-decoration: underline;
-    cursor: pointer;
-  }
-`;
-const sheet$3 = createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
+const sheet$2 = createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
 function PayoutStatusAlertView(props) {
   const { text, states, data, callbacks } = props;
   function getAlert(status) {
@@ -2553,6 +2293,8 @@ function PayoutStatusAlertView(props) {
         description: text.errorDescription,
         buttonText: null,
         alertType: "critical",
+        icon: "exclamation-triangle",
+        class: sheet$2.classes.ErrorAlertContainer,
       };
     switch (status) {
       case "INFORMATION_REQUIRED":
@@ -2561,6 +2303,8 @@ function PayoutStatusAlertView(props) {
           description: text.informationRequiredDescription,
           buttonText: text.informationRequiredButtonText,
           alertType: "info",
+          icon: "info-circle",
+          class: sheet$2.classes.InfoAlertContainer,
         };
       case "VERIFICATION:REQUIRED":
         return {
@@ -2573,6 +2317,8 @@ function PayoutStatusAlertView(props) {
           }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$2.classes.WarningAlertContainer,
         };
       case "VERIFICATION:INTERNAL":
         return {
@@ -2584,6 +2330,8 @@ function PayoutStatusAlertView(props) {
             supportLink: (h$1("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 {
@@ -2595,6 +2343,8 @@ function PayoutStatusAlertView(props) {
             supportLink: (h$1("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 {
@@ -2606,6 +2356,53 @@ function PayoutStatusAlertView(props) {
             supportLink: (h$1("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: intl.formatMessage({
+              id: "w9RequiredDescription",
+              defaultMessage: text.w9RequiredDescription,
+            }, {
+              termsAndConditions: (h$1("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: intl.formatMessage({
+              id: "holdDescription",
+              defaultMessage: text.holdDescription,
+            }, {
+              supportLink: (h$1("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: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.accountReviewDescription,
+          }, {
+            supportLink: (h$1("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 {
@@ -2618,6 +2415,8 @@ function PayoutStatusAlertView(props) {
           }),
           buttonText: null,
           alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$2.classes.WarningAlertContainer,
         };
       default:
         return;
@@ -2625,33 +2424,35 @@ function PayoutStatusAlertView(props) {
   }
   function getButton(status) {
     switch (status) {
+      case "OVER_W9_THRESHOLD":
+        if (states.enforceUsTaxComplianceOption === "CASH_ONLY")
+          return;
+        return data.type === "SquatchJS2" ? (h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.w9RequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h$1("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
+        // Demo case
+        h$1("sl-button", { type: "default" }, text.w9RequiredButtonText));
       case "INFORMATION_REQUIRED":
-        return data.type === "SquatchJS2" ? (h$1("div", { style: { paddingTop: "10px" } },
-          h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" }))) : data.type === "SquatchPortal" ? (h$1("div", { style: { paddingTop: "10px" } },
-          h$1("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText))) : (
+        return data.type === "SquatchJS2" ? (h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h$1("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (
         // Demo case
-        h$1("div", { style: { paddingTop: "10px" } },
-          h$1("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base" }, text.informationRequiredButtonText)));
+        h$1("sl-button", { type: "default" }, text.informationRequiredButtonText));
       case "VERIFICATION:REQUIRED":
-        return (h$1("div", { style: { paddingTop: "10px" } },
-          h$1("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText)));
+        return (h$1("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
       default:
         return;
     }
   }
   if (states.loading) {
-    return h$1("sl-skeleton", { class: sheet$3.classes.SkeletonOne });
+    return h$1("sl-skeleton", { class: sheet$2.classes.SkeletonOne });
   }
   const alertDetails = getAlert(states.status);
   if (states.status === "DONE" || !alertDetails) {
     return h$1("div", null);
   }
   return (h$1("div", { part: "sqm-base" },
-    h$1("style", { type: "text/css" }, styleString$3),
-    h$1("style", { type: "text/css" }, vanillaStyle$1),
-    h$1("sqm-form-message", { type: alertDetails.alertType },
-      h$1("p", { part: "alert-title" }, alertDetails.header),
-      h$1("p", { part: "alert-description" }, alertDetails.description),
+    h$1("style", { type: "text/css" }, styleString$2),
+    h$1("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: alertDetails.alertType, class: alertDetails.class, open: true },
+      h$1("sl-icon", { slot: "icon", name: alertDetails.icon }),
+      h$1("strong", null, alertDetails.header),
+      h$1("p", { class: sheet$2.classes.AlertDescriptionText }, alertDetails.description),
       getButton(states.status))));
 }
 
@@ -2706,6 +2507,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
      */
@@ -2717,11 +2538,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
      */
@@ -3185,7 +3010,7 @@ const PortalFooter = class {
   static get assetsDirs() { return ["../../assets"]; }
 };
 
-function usePortalFrame(footerContent, headerContent, props) {
+function usePortalFrame(footerContent, headerContent) {
   const [, rerender] = yn();
   return {
     data: {
@@ -3195,9 +3020,6 @@ function usePortalFrame(footerContent, headerContent, props) {
     callbacks: {
       rerender,
     },
-    backgroundColor: props.backgroundColor,
-    border: props.border,
-    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
   };
 }
 
@@ -3209,25 +3031,6 @@ 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)";
     h(this);
   }
   disconnectedCallback() { }
@@ -3236,16 +3039,13 @@ const PortalFrame = class {
     const headerContent = h$1("slot", { name: "header" });
     const props = isDemo()
       ? usePortalFrameDemo(footerContent, headerContent, this)
-      : usePortalFrame(footerContent, headerContent, this);
+      : usePortalFrame(footerContent, headerContent);
     return (h$1(PortalFrameView, Object.assign({}, props), h$1("slot", null)));
   }
 };
 function usePortalFrameDemo(footerContent, headerContent, props) {
   return cjs({
     notFullScreen: true,
-    backgroundColor: props.backgroundColor,
-    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
-    border: props.border,
     data: {
       footer: footerContent ? (footerContent) : (h$1("span", null, "example@example.com")),
       header: headerContent ? (headerContent) : (h$1("div", { style: { display: "flex", flexDirection: "column" } }, h$1("span", { style: {
@@ -3335,7 +3135,7 @@ const PortalLogin = class {
     const content = {
       forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { onClick: () => jn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
       googleButton: null,
-      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("style", null, styleString), h$1("sl-button", { exportparts: "base: secondarybutton-base", type: "text", disabled: states.loading, onClick: () => jn.push(states.registerPath) }, this.registerLabel))),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("style", null, styleString), h$1("sl-button", { type: "text", disabled: states.loading, onClick: () => jn.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -3497,7 +3297,7 @@ function usePortalRegister(props) {
 const PortalRegister = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.ignored = false;
+    this.ignored = true;
     /**
      * Redirect participants to this page from their verification email
      *
@@ -3614,7 +3414,7 @@ const PortalRegister = class {
   disconnectedCallback() { }
   render() {
     const { states, callbacks, refs } = isDemo()
-      ? useRegisterDemo(this)
+      ? useRegisterDemo$1(this)
       : usePortalRegister(this);
     const content = {
       formData: h$1("slot", { name: "formData" }),
@@ -3637,7 +3437,7 @@ const PortalRegister = class {
     return (h$1(PortalRegisterView, { states: states, callbacks: callbacks, content: content, refs: refs }));
   }
 };
-function useRegisterDemo(props) {
+function useRegisterDemo$1(props) {
   return cjs({
     states: {
       error: "",
@@ -3663,7 +3463,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: {
@@ -3723,11 +3523,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",
@@ -3740,7 +3537,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)",
@@ -3749,7 +3545,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)": {
@@ -3762,14 +3557,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 = createStyleSheet(style);
@@ -3798,7 +3590,7 @@ const debug = browser("sq:useProgramMenu");
 const UPDATE_PROGRAM_EVENT = "sq:update-program-id";
 function useProgramMenu(props) {
   const programId = H();
-  const host = _$1();
+  const host = _();
   debug({ programId, props });
   const ref = useRef();
   const [, rerender] = yn();
@@ -3838,47 +3630,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 = 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 = createStyleSheet(style);
-  const styleString = sheet.toString();
-  const borderColor = props.borderColor || "var(--sqm-border-color)";
-  return (h$1("div", { part: "sqm-base", class: sheet.classes.Container, style: {
-      border: `${props.hideBorder
-        ? "none"
-        : `var(--sqm-border-thickness) solid ${borderColor}`}`,
+  return (h$1("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})`,
@@ -3888,15 +3677,15 @@ function ReferralCardView(props) {
       margin: `${props.limitWidth ? "auto" : "none"}`,
     } },
     h$1("style", { type: "text/css" },
-      styleString,
-      vanillaStyle$2),
-    props.hasHeader && (h$1("div", { class: sheet.classes.EndContainer }, props.slots.header)),
-    h$1("div", { part: "sqm-column-container", class: sheet.classes.ColumnContainer, style: {
+      styleString$3,
+      vanillaStyle$1),
+    props.hasHeader && (h$1("div", { class: sheet$3.classes.EndContainer }, props.slots.header)),
+    h$1("div", { part: "sqm-column-container", class: sheet$3.classes.ColumnContainer, style: {
         alignItems: props.verticalAlignment,
       } },
       props.slots.left,
       props.slots.right),
-    props.hasFooter && (h$1("div", { class: sheet.classes.EndContainer }, props.slots.footer))));
+    props.hasFooter && (h$1("div", { class: sheet$3.classes.EndContainer }, props.slots.footer))));
 }
 
 const ReferralCard = class {
@@ -3943,6 +3732,12 @@ const ReferralCard = class {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingLeft = "large";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.backgroundColor = "#ffffff";
     /**
      * @uiName Limit width
      * @uiType boolean
@@ -3965,7 +3760,7 @@ const ReferralCard = class {
   }
 };
 
-const GET_USER_DETAILS = dist.gql `
+const GET_USER_DETAILS$1 = dist.gql `
   query getUser($programId: ID) {
     viewer {
       ... on User {
@@ -3978,7 +3773,7 @@ function useReferralIframe(props) {
   var _a;
   const programId = H();
   const user = J();
-  const { data } = wn(GET_USER_DETAILS, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
+  const { data } = wn(GET_USER_DETAILS$1, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId);
   return {
     states: {
       content: props,
@@ -4036,161 +3831,6 @@ function useReferralIframeDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const ReferredRegistration = class {
-  constructor(hostRef) {
-    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;
-    h(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const { states, callbacks } = isDemo()
-      ? useRegistrationDemo(this)
-      : 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: h$1("slot", { name: "top" }),
-      bottomSlot: h$1("slot", { name: "bottom" }),
-    };
-    return (h$1(EmailRegistrationView, { states: states, callbacks: callbacks, content: content }));
-  }
-};
-function useRegistrationDemo(props) {
-  const onSubmit = () => {
-    setUserIdentity({
-      id: "referrer@example.com",
-      accountId: "referrer@example.com",
-      jwt: "eyJraWQiOiJlNjI2NzQxNy1jMzZlLTRlM2EtYjM5NS1lYTFmY2YyNmU3YzIiLCJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJjbVZtWlhKeVpYSkFaWGhoYlhCc1pTNWpiMjA9OmNtVm1aWEp5WlhKQVpYaGhiWEJzWlM1amIyMD1AdGVzdF9heGJndGF0dzF0Y2NwOnVzZXJzIiwicGFzc3dvcmRsZXNzIjp0cnVlLCJpc3MiOiJodHRwczovL3N0YWdpbmcucmVmZXJyYWxzYWFzcXVhdGNoLmNvbS8iLCJleHAiOjE2ODA4ODU5MTksImlhdCI6MTY4MDc5OTUxOX0.kjmTVVf_BTb-uMNKnadLyNLxMFwpkefsY02O3iAfBVIJJZZfeZMwunPlKsS3Vbp28aYRClBjH5Wj4pYxDn23D0CdZx8KNCqiJ8yF6149O9SPMkRseoJkliqS6LyvMOEDjGDkuLfcC8_hq1AHBXFt5BdCtWOk1gwf_5R9A0w5gXEIvprBzbNDLbuo88bVAlrmFNvfttXXryrpUeruMal7cBKuy02YblBrB4kKoyJiprU5GLEjciBA4A56u8TwQc0kbsPf2YcQaJsY_IvkC7S1u4sPyObpq6iF6Ed8UYHAo6nU5KjZXyVtoUyeIS11mf_6OtDO6LyMNHV2FtEUUDdPCg",
-    });
-  };
-  return 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 = {};
 
@@ -5127,13 +4767,6 @@ 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 = "{}";
     h(this);
   }
   disconnectedCallback() { }
@@ -5153,10 +4786,6 @@ function EmptySlot$1() {
   return (h$1("slot", { name: "empty" }, h$1("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(props.stateController);
-  const formatted = Object.keys(states).reduce((prev, key) => key === "reward-exchange-list"
-    ? { ...prev, ...states[key] }
-    : { ...prev, [`${key}_stateController`]: states[key] }, {});
   return cjs({
     states: {
       content: {
@@ -5171,9 +4800,10 @@ function useRewardExchangeListDemo(props) {
       queryError: false,
       loading: false,
       noExchangeOptions: false,
+      empty: EmptySlot$1(),
     },
     data: {
-      // shareCode: "SHARECODE123",
+      shareCode: "SHARECODE123",
       exchangeList: demoRewardExchange.data.exchangeList,
     },
     callbacks: {
@@ -5186,7 +4816,7 @@ function useRewardExchangeListDemo(props) {
     refs: {
       canvasRef: {},
     },
-  }, props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
 const debug$1 = browser("sq:useRouter");
@@ -5198,7 +4828,7 @@ function matchPath(pattern, page) {
 }
 function useRouter() {
   const location = kn();
-  const host = _$1();
+  const host = _();
   const [slot, setSlot] = useState(undefined);
   const [container, setContainer] = useState(undefined);
   const page = location.pathname;
@@ -5289,8 +4919,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";
     /**
@@ -5302,13 +4932,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;
@@ -5414,7 +5042,6 @@ const ShareCode = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
-     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -5428,18 +5055,8 @@ 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";
     h(this);
   }
   disconnectedCallback() { }
@@ -5460,11 +5077,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: () => {
@@ -5499,30 +5111,19 @@ 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";
     h(this);
@@ -5544,12 +5145,7 @@ function useDemoShareLink(props) {
     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: () => {
@@ -5574,29 +5170,12 @@ 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";
+    this.display = "grid";
     h(this);
   }
   disconnectedCallback() { }
@@ -5640,18 +5219,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 },
   };
 }
@@ -5765,14 +5334,6 @@ const TaskCard = class {
      * @uiGroup Button
      */
     this.hideButton = false;
-    /**
-     * @uiName Button Style
-     * @uiType string
-     * @uiEnum ["primary", "secondary"]
-     * @uiEnumNames ["Primary", "Secondary"]
-     * @uiGroup Style
-     */
-    this.buttonType = "primary";
     h(this);
   }
   disconnectedCallback() { }
@@ -5794,7 +5355,6 @@ const TaskCard = class {
 };
 function useTaskCardDemo(props) {
   return cjs({
-    content: { ...props },
     states: { loadingEvent: false, locale: "en" },
     callbacks: {
       sendEvent: (event) => console.log(event),
@@ -5848,7 +5408,52 @@ const Gift = () => (h$1("svg", { width: "24", height: "24", viewBox: "0 0 24 24"
 const Circle = () => (h$1("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h$1("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 = createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
+const vanillaStyle$2 = `
 	:host{
 		display: block; 
 	}
@@ -5860,55 +5465,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 = createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h$1("div", { class: sheet.classes.TimelineReward, part: "sqm-base" },
+  return (h$1("div", { class: sheet$4.classes.TimelineReward, part: "sqm-base" },
     h$1("style", { type: "text/css" },
-      styleString,
-      vanillaStyle$3),
+      styleString$4,
+      vanillaStyle$2),
     h$1("div", { class: "container", part: "sqm-entry-container" },
       h$1("div", { class: "line" }, "/"),
       h$1("div", { class: "step" },
@@ -5998,4 +5558,4 @@ function useUserNameDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-export { BigStat as sqm_big_stat, BrandComponent as sqm_brand, SqmBrandSelector as sqm_brand_selector, CardFeed as sqm_card_feed, CheckboxField as sqm_checkbox_field, CouponCode as sqm_coupon_code, DividedLayout as sqm_divided_layout, DropdownField as sqm_dropdown_field, EditProfile as sqm_edit_profile, Hero as sqm_hero, HeroImage as sqm_hero_image, SqmHookStoryContainer as sqm_hook_story_container, Image as sqm_image, InputField as sqm_input_field, Leaderboard as sqm_leaderboard, LinkButton as sqm_link_button, MarketingEmailsCheckbox as sqm_marketing_emails_checkbox, NameFields as sqm_name_fields, NavigationMenu as sqm_navigation_menu, PayoutButtonScroll as sqm_payout_button_scroll, PayoutStatusAlert as sqm_payout_status_alert, PortalChangeMarketing as sqm_portal_change_marketing, PortalChangePassword as sqm_portal_change_password, PortalFooter as sqm_portal_footer, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, ReferredRegistration as sqm_referred_registration, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, StatContainer as sqm_stat_container, TaskCard as sqm_task_card, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, UserName as sqm_user_name };
+export { BigStat as sqm_big_stat, BrandComponent as sqm_brand, CardFeed as sqm_card_feed, CheckboxField as sqm_checkbox_field, CouponCode as sqm_coupon_code, DividedLayout as sqm_divided_layout, DropdownField as sqm_dropdown_field, EditProfile as sqm_edit_profile, Hero as sqm_hero, HeroImage as sqm_hero_image, SqmHookStoryContainer as sqm_hook_story_container, Image as sqm_image, InputField as sqm_input_field, LeadDropdownField as sqm_lead_dropdown_field, LeadForm as sqm_lead_form, Leaderboard as sqm_leaderboard, LinkButton as sqm_link_button, MarketingEmailsCheckbox as sqm_marketing_emails_checkbox, NameFields as sqm_name_fields, NavigationMenu as sqm_navigation_menu, PayoutButtonScroll as sqm_payout_button_scroll, PayoutStatusAlert as sqm_payout_status_alert, PortalChangeMarketing as sqm_portal_change_marketing, PortalChangePassword as sqm_portal_change_password, PortalFooter as sqm_portal_footer, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, StatContainer as sqm_stat_container, TaskCard as sqm_task_card, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, UserName as sqm_user_name };