@saasquatch/mint-components 1.15.0-99 → 1.16.0-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-f07bcf90.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,17 @@ 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":
+        return {
+          header: text.w9RequiredHeader,
+          description: text.w9RequiredDescription,
+          buttonText: text.w9RequiredButtonText,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$2.classes.WarningAlertContainer,
         };
       case "HOLD":
         return {
@@ -2618,6 +2379,8 @@ function PayoutStatusAlertView(props) {
           }),
           buttonText: null,
           alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$2.classes.WarningAlertContainer,
         };
       default:
         return;
@@ -2625,33 +2388,33 @@ function PayoutStatusAlertView(props) {
   }
   function getButton(status) {
     switch (status) {
+      case "OVER_W9_THRESHOLD":
+        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 +2469,18 @@ 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 W9 payment threshold alert header
+     */
+    this.w9RequiredHeader = "Your next payout is on hold";
+    /**
+     * @uiName W9 payment threshold alert description
+     */
+    this.w9RequiredDescription = "To remove the hold, you need to submit a W9 tax form as outlines in our Terms and Conditions. Please click 'Submit W9' to start the process.";
+    /**
+     * @uiName W9 payment threshold alert button text
+     */
+    this.w9RequiredButtonText = "Submit W9";
     /**
      * @uiName Payout on hold alert header
      */
@@ -3185,7 +2960,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 +2970,6 @@ function usePortalFrame(footerContent, headerContent, props) {
     callbacks: {
       rerender,
     },
-    backgroundColor: props.backgroundColor,
-    border: props.border,
-    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
   };
 }
 
@@ -3209,25 +2981,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 +2989,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 +3085,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 +3247,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 +3364,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 +3387,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 +3413,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 +3473,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 +3487,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 +3495,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 +3507,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 +3540,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 +3580,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 +3627,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 +3682,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 +3710,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 +3723,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 +3781,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 +4717,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 +4736,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 +4750,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 +4766,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 +4778,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 +4869,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 +4882,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 +4992,6 @@ const ShareCode = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
-     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -5428,18 +5005,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 +5027,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 +5061,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 +5095,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 +5120,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 +5169,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 +5284,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 +5305,6 @@ const TaskCard = class {
 };
 function useTaskCardDemo(props) {
   return cjs({
-    content: { ...props },
     states: { loadingEvent: false, locale: "en" },
     callbacks: {
       sendEvent: (event) => console.log(event),
@@ -5848,7 +5358,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 +5415,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 +5508,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 };