@saasquatch/mint-components 1.16.0-9 → 2.0.0-1

package/dist/esm/{sqm-big-stat_43.entry.js → sqm-big-stat_46.entry.js}

@@ -1,28 +1,377 @@
-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 { r as registerInstance, h as h$1, c as Host } from './index-b3a06de8.js';
+import { b as buildFontsCssUrl, i as intl } from './global-1099f20d.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 './dom-context-hooks.module-63370afd.js';
+import { i as isDemo, _ as _$1, d as dist, J, H, B, $ as $e, w as wn, u as useCallback, L, y as yn, j as jn, q as Ue, r as un, V as Ve, b as setUserIdentity, Q as Qe, k as kn } from './index.module-c9811a48.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-334c1e34.js';
+import { g as getProps, a as getMissingProps } from './utils-84b4b092.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.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 './useReferralCodes-c2e809cf.js';
+import './mixins-f750863a.js';
+import { C as CopyTextView } from './copy-text-view-83b09456.js';
+import { a as useRequestRerender } from './re-render-7e22fb0d.js';
+import { u as useChildElements } from './useChildElements-3d872cef.js';
+import './luxon-bbf75a9d.js';
+import './sqm-text-span-view-4c17b8c9.js';
 import { p as pathToRegexp } from './index-ffa26b43.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 { E as EmailRegistrationView } from './email-registration-view-1f587f8b.js';
+import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-24d594ea.js';
+import { u as useInstantAccessRegistration } from './useInstantAccessRegistration-dda1f52b.js';
+import { R as RequiredPropsError, L as LEAD_FORM_STATE_CONTEXT, u as useLeadFormState } from './useLeadFormState-c379e5d7.js';
+import { P as PortalLoginView } from './sqm-portal-login-view-7670cd86.js';
+import { u as usePortalLogin } from './usePortalLogin-95814943.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
-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';
+import { i as isEmpty } from './utilities-72c07b09.js';
+import { u as useDemoBigStat, W 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 LeadDropdownFieldView, Q as LeadFormView, X as withShadowView, L as LeaderboardView, N as NameFieldsView, f as ChangeMarktingView, P as PortalChangePasswordView, g as PortalFooterView, h as PortalForgotPasswordView, i as PortalFrameView, d as PortalRegisterView, R as ReferralIframeView, j as RewardExchangeView, Y as demoRewardExchange, J as useShareButton, a as ShareButtonView, K as useShareLink, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-c0bd62f7.js';
+import './sqm-portal-container-view-176e92e3.js';
+import { p as parseStates } from './parseStates-ed75e224.js';
+import { u as usePayoutStatus } from './usePayoutStatus-42cc6a2c.js';
+
+/**
+ *
+ * Themes
+ *
+ * Export only valid CSS. Those will be injected into style tags.
+ *
+ * Useful links:
+ *  - https://brandcolors.net/
+ *  - Shoelace color generator: https://codepen.io/claviska/full/QWveRgL
+ *
+ */
+// @ts-nocheck
+const Default = null;
+const Netflix = {
+  main: {
+    brandFont: "Netflix Sans, Arial, sans-serif",
+    brandColor: "#E50914",
+  },
+  border: {
+    borderColor: "#333333",
+    borderRadius: 4,
+    borderThickness: 1,
+  },
+  color: {
+    textColorShades: {
+      mainText: "white",
+      subduedText: "#B3B3B3",
+    },
+    backgroundColor: "#101010",
+    accentColorShades: {
+      text: "#E50914",
+      icon: "#E50914",
+      border: "#E50914",
+      background: "#300609",
+    },
+    success: {
+      text: "#66BB6A",
+      border: "#4CAF50",
+      background: "#1B5E20",
+      iconAndBadge: "#4CAF50",
+    },
+    warning: {
+      text: "#FFCA28",
+      border: "#FFA726",
+      background: "#F57C00",
+      iconAndBadge: "#FFA726",
+    },
+    critical: {
+      text: "#EF9A9A",
+      border: "#E50914",
+      background: "#B71C1C",
+      iconAndBadge: "#E50914",
+    },
+    informative: {
+      text: "#64B5F6",
+      border: "#42A5F5",
+      background: "#1976D2",
+      iconAndBadge: "#42A5F5",
+    },
+    neutral: {
+      text: "white",
+      iconAndBadge: "#B3B3B3",
+      border: "#333333",
+      background: "#222222",
+    },
+  },
+  primaryButton: {
+    buttonColor: {
+      background: "#E50914",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#CC0000",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    borderRadius: 4,
+  },
+  secondaryButton: {
+    buttonColor: {
+      background: "transparent",
+      border: "#B3B3B3",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#333333",
+      border: "#B3B3B3",
+      label: "#FFFFFF",
+    },
+    borderRadius: 4,
+  },
+  formFields: {
+    formFieldColor: {
+      background: "#222222",
+      border: "#B3B3B3",
+      inputText: "#B3B3B3",
+    },
+    hoverStateColor: "#777777",
+    selectedStateColor: "#E50914",
+    borderRadius: 4,
+  },
+};
+const Amazon = {
+  main: {
+    brandFont: "Amazon Ember, Arial, sans-serif",
+    brandColor: "#FF9900",
+  },
+  border: {
+    borderColor: "#D5D9D9",
+    borderRadius: 4,
+    borderThickness: 1,
+  },
+  color: {
+    backgroundColor: "#ffffff",
+    textColorShades: {
+      mainText: "#2f2f2f",
+      subduedText: "#565959",
+    },
+    accentColorShades: {
+      text: "#FF9900",
+      icon: "#FF9900",
+      border: "#FFBF66",
+      background: "#FFF4DD",
+    },
+    success: {
+      text: "#198754",
+      border: "#BCE8B2",
+      background: "#D4EDDA",
+      iconAndBadge: "#28A745",
+    },
+    warning: {
+      text: "#856404",
+      border: "#FFEBA2",
+      background: "#FFF3CD",
+      iconAndBadge: "#FFC107",
+    },
+    critical: {
+      text: "#721C24",
+      border: "#F5C6CB",
+      background: "#F8D7DA",
+      iconAndBadge: "#DC3545",
+    },
+    informative: {
+      text: "#004085",
+      border: "#B8DAFF",
+      background: "#CCE5FF",
+      iconAndBadge: "#007BFF",
+    },
+    neutral: {
+      text: "#232F3E",
+      iconAndBadge: "#565959",
+      border: "#D5D9D9",
+      background: "#F0F2F2",
+    },
+  },
+  primaryButton: {
+    buttonColor: {
+      background: "#FF9900",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#EB9100",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    borderRadius: 4,
+  },
+  secondaryButton: {
+    buttonColor: {
+      background: "#FFFFFF",
+      border: "#888C8C",
+      label: "#232F3E",
+    },
+    buttonHoverColor: {
+      background: "#F0F2F2",
+      border: "#888C8C",
+      label: "#232F3E",
+    },
+    borderRadius: 4,
+  },
+  formFields: {
+    formFieldColor: {
+      background: "#FFFFFF",
+      border: "#D5D9D9",
+      inputText: "#2f2f2f",
+    },
+    borderRadius: 4,
+    hoverStateColor: "#A2A2A2",
+    selectedStateColor: "#007185",
+  },
+};
+const Spotify = {
+  main: {
+    brandColor: "#1ed760",
+  },
+  border: {
+    borderColor: "#f4f4f4",
+    borderRadius: 18,
+    borderThickness: 1,
+  },
+  color: {
+    textColorShades: {
+      mainText: "white",
+      subduedText: "white",
+    },
+    backgroundColor: "#121212",
+    accentColorShades: {
+      icon: "#1ed760",
+    },
+  },
+  primaryButton: {
+    buttonColor: {
+      background: "#1ed760",
+      border: "transparent",
+      label: "#121212",
+    },
+    buttonHoverColor: {
+      background: "#1DB954",
+      border: "transparent",
+      label: "#121212",
+    },
+    borderRadius: 30,
+  },
+  secondaryButton: {
+    buttonColor: {
+      background: "#191414",
+      border: "#FFFFFF",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#282828",
+      border: "#FFFFFF",
+      label: "#121212",
+    },
+    borderRadius: 30,
+  },
+  formFields: {
+    formFieldColor: {
+      background: "#121212",
+      border: "#7c7c7c",
+      inputText: "#fff",
+    },
+    borderRadius: 30,
+    hoverStateColor: "white",
+    selectedStateColor: "white",
+  },
+};
+const Google = {
+  main: { brandColor: "#4285F4", brandFont: "Roboto, Arial, sans-serif" },
+  border: {
+    borderColor: "#DADCE0",
+    borderRadius: 4,
+    borderThickness: 1,
+  },
+  color: {
+    textColorShades: {
+      mainText: "#212124",
+      subduedText: "#5F6368",
+    },
+    backgroundColor: "#FFFFFF",
+    accentColorShades: {
+      text: "#1A73E8",
+      border: "#8AB4F8",
+      background: "#E8F0FE",
+      icon: "#4285F4",
+    },
+    success: {
+      text: "#044e1d",
+      border: "#A8DCD7",
+      background: "#E6F4EA",
+      iconAndBadge: "#34A853",
+    },
+    warning: {
+      text: "#996a3d",
+      border: "#FCD667",
+      background: "#FFF7EE",
+      iconAndBadge: "#FBBC04",
+    },
+    critical: {
+      text: "#760b09",
+      border: "#F28B82",
+      background: "#FCE8E6",
+      iconAndBadge: "#EA4335",
+    },
+    informative: {
+      text: "#01368c",
+      border: "#BFDBFE",
+      background: "#E8F0FE",
+      iconAndBadge: "#4285F4",
+    },
+    neutral: {
+      text: "#202124",
+      border: "#DADCE0",
+      background: "#F8F9FA",
+      iconAndBadge: "#5F6368",
+    },
+  },
+  primaryButton: {
+    buttonColor: {
+      background: "#4285F4",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#3C7CD1",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    borderRadius: 4,
+  },
+  secondaryButton: {
+    buttonColor: {
+      background: "#FFFFFF",
+      border: "#DADCE0",
+      label: "#4285F4",
+    },
+    buttonHoverColor: {
+      background: "#E8F0FE",
+      border: "#DADCE0",
+      label: "#4285F4",
+    },
+    borderRadius: 4,
+  },
+  formFields: {
+    formFieldColor: {
+      background: "#FFFFFF",
+      border: "#DADCE0",
+      inputText: "#202124",
+    },
+    borderRadius: 4,
+    hoverStateColor: "#9AA0A6",
+    selectedStateColor: "#4285F4",
+  },
+};
+
+const Themes = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Default: Default,
+  Netflix: Netflix,
+  Amazon: Amazon,
+  Spotify: Spotify,
+  Google: Google
+});
 
 const BigStat = class {
   constructor(hostRef) {
@@ -32,8 +381,19 @@ 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);
   }
@@ -41,24 +401,62 @@ const BigStat = class {
   render() {
     var _a;
     const { props, label } = isDemo() ? useDemoBigStat(this) : useBigStat(this);
-    const host = _();
+    const host = _$1();
     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`;
+  });
+}
 /**
- * Build a font CSS URL using the Google Fonts CSS API
+ * Generated a Shoelace color scale css string from a base color
  *
- * Docs: https://developers.google.com/fonts/docs/css2
- *
- * @param fonts - the font family or families to load
- * @returns url to a .css file
+ * @param color
+ * @param name
+ * @returns
  */
-function buildFontsCssUrl(...fonts) {
-  const queryString = fonts.map(f => `family=${encodeURIComponent(f)}`).join("&");
-  return `https://fonts.googleapis.com/css2?${queryString}`;
+function autoColorScaleCss(color, name = "primary") {
+  return generateScale(color, name).join("\n");
 }
 
 const BrandComponent = class {
@@ -68,7 +466,7 @@ const BrandComponent = class {
   }
   disconnectedCallback() { }
   render() {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     function getCss(brandColor) {
       if (brandColor) {
         try {
@@ -78,11 +476,14 @@ const BrandComponent = class {
       }
       return undefined;
     }
-    const css = (_a = getCss(this.brandColor)) !== null && _a !== void 0 ? _a : "";
-    const sanitizedFont = ((_b = this.brandFont) !== null && _b !== void 0 ? _b : "Nunito Sans").trim() || undefined;
+    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;
     useEffect(() => {
-      if (!sanitizedFont) {
+      if (!sanitizedFont || brandingConfigFont) {
         // Nothing required in default case.
+        // Don't add font if it's set in the global config
         return;
       }
       const sheet = document.createElement("link");
@@ -102,6 +503,10 @@ const BrandComponent = class {
            - resets css variable inheritence for fonts
           
           */
+
+          ${brandingConfigFont
+      ? ``
+      : `
           ::slotted(*) {
             --sl-font-sans: "${font}", arial;
             --sl-input-font-family: "${font}", arial;
@@ -109,6 +514,7 @@ const BrandComponent = class {
             font-family:  "${font}", arial;
 			
             ${css}
+          `}
 
             --sl-focus-ring-color-primary: var(--sl-color-primary-100);
             --sl-input-border-color-focus: var(--sl-color-primary-500);
@@ -117,6 +523,195 @@ 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);
@@ -403,6 +998,7 @@ function useCouponCode(props) {
     dateAvailable,
     loading,
     errorType,
+    buttonType: props.buttonType || "primary",
   };
 }
 
@@ -426,6 +1022,7 @@ const CouponCode = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -439,6 +1036,7 @@ const CouponCode = class {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
      */
     this.buttonStyle = "icon";
     /**
@@ -516,6 +1114,15 @@ 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() { }
@@ -539,6 +1146,11 @@ function useDemoCouponCode(props) {
     error: false,
     couponCodePlaceholder: props.couponCodePlaceholder,
     couponCodeLabel: props.couponCodeLabel,
+    borderColor: props.borderColor,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
     codeSyncErrorText: props.codeSyncErrorText,
     codeSyncErrorRetryText: props.codeSyncErrorRetryText,
     open,
@@ -555,14 +1167,23 @@ function useDemoCouponCode(props) {
 function DividedLayoutView(props, children) {
   const getBorder = () => {
     if (props.direction === "row") {
-      return { "border-right": props.dividerStyle || "1px solid #EAEAEA" };
+      return {
+        "border-right": props.borderless
+          ? "none"
+          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
+      };
     }
     else {
-      return { "border-bottom": props.dividerStyle || "1px solid #EAEAEA" };
+      return {
+        "border-bottom": props.borderless
+          ? "none"
+          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
+      };
     }
   };
   const style = {
     LayoutContainer: {
+      background: props.backgroundColor,
       display: "contents",
       // First style applies when shadow DOM is disabled, second applies when shadow DOM is enabled
       "& > :not(:last-child)": {
@@ -578,11 +1199,10 @@ function DividedLayoutView(props, children) {
     flex: 1;
     box-sizing: border-box;
     flex-direction: ${props.direction};
-    background-color: var(--sqm-content-background);
+    background-color: var(--sqm-portal-background);
+    color: var(--sqm-text);
     overflow-x: clip;
-    ${props.direction === "column"
-    ? "width: 100%; max-width: var(--sqm-portal-main-width);"
-    : ""}
+    ${props.direction === "column" ? "width: 100%; max-width: 100%" : ""}
     ${props.contentAreaWidth !== null
     ? `max-width: ${props.contentAreaWidth} !important;`
     : ""}
@@ -614,10 +1234,17 @@ 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 = "1px solid #EAEAEA";
+    this.dividerStyle = "var(--sqm-border-thickness) solid var(--sqm-border-color)";
+    /**
+     * Background color of the divider
+     * @uiName Background Color
+     * @uiWidget color
+     */
+    this.backgroundColor = "#FFFFFF";
     h(this);
   }
   disconnectedCallback() { }
@@ -938,12 +1565,12 @@ const Hero = class {
      */
     this.minHeight = 200;
     /**
-     * Can be an image url, colour or Shoelace variable.
+     * Add an image or select a color. Recommended image aspect ratio of 4:5
      *
      * @uiName Background
      * @uiWidget Background
      */
-    this.background = "var(--sl-color-gray-50)";
+    this.background = "#f9fafb";
     /**
      * @uiName Padding size
      * @uiEnum ["none", "small", "medium","large"]
@@ -958,6 +1585,13 @@ const Hero = class {
      * @uiEnumNames ["Wrap", "Wrap Reverse"]
      */
     this.wrapDirection = "wrap";
+    /**
+     * Can only be used when two columns are present
+     * @uiName Hide the column in mobile view
+     * @uiEnum ["primary", "secondary", "null"]
+     * @uiEnumNames ["Primary", "Secondary", "None"]
+     */
+    this.columnToHideInMobile = null;
     h(this);
   }
   disconnectedCallback() { }
@@ -986,7 +1620,7 @@ function HeroImageView(props, children) {
         width: "100%",
         height: "100%",
         position: "absolute",
-        background: props.overlayColor || "var(--sl-color-primary-900)",
+        background: props.overlayColor || "var(--sl-color-black)",
         opacity: props.overlayOpacity,
       },
     },
@@ -1012,7 +1646,7 @@ function HeroImageView(props, children) {
         props.paddingImage +
         "))",
       textAlign: "center",
-      color: props.textColor || "var(--sl-color-neutral-0)",
+      color: props.textColor || "var(--sqm-text)",
       lineHeight: "var(--sl-line-height-dense)",
       "@media (max-width: 599px)": {
         padding: "var(--sl-spacing-" + props.paddingText + ")",
@@ -1023,7 +1657,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(--sl-color-neutral-900)",
+      color: props.textColor || "var(--sqm-text)",
       "& .image-area": {
         width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
         padding: "var(--sl-spacing-" + props.paddingImage + ")",
@@ -1070,6 +1704,9 @@ function HeroImageView(props, children) {
       marginTop: "var(--sl-spacing-medium)",
       "&::part(base)": {
         padding: "0 var(--sl-spacing-x-large)",
+        color: "var(--sqm-primary-button-color)",
+        backgroundColor: "var(--sqm-primary-button-background)",
+        border: "var(--sqm-primary-button-color-border)",
       },
       "@media (max-width: 599px)": {
         width: "100%",
@@ -1093,7 +1730,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", onClick: () => props.buttonNewTab
+        props.buttonText && (h$1("sl-button", { class: sheet.classes.Button, type: "primary", exportparts: `base: ${props.buttonType}button-base`, onClick: () => props.buttonNewTab
             ? window.open(props.buttonLink)
             : window.open(props.buttonLink, "_parent") }, props.buttonText)),
         children && children)));
@@ -1117,6 +1754,7 @@ const HeroImage = class {
     registerInstance(this, hostRef);
     /**
      * @uiName Overlay opacity
+     * @uiGroup Style
      */
     this.overlayOpacity = "0.75";
     /**
@@ -1124,11 +1762,13 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["overlay", "columns"]
      * @uiEnumNames ["Overlay", "Two-column"]
+     * @uiGroup Style
      */
     this.layout = "overlay";
     /**
      * @uiName Image percentage
      * @uiType number
+     * @uiGroup Style
      */
     this.imagePercentage = 50;
     /**
@@ -1136,6 +1776,7 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.imagePos = "center";
     /**
@@ -1143,6 +1784,7 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["top", "bottom"]
      * @uiEnumNames ["Top", "Bottom"]
+     * @uiGroup Style
      */
     this.imageMobilePos = "top";
     /**
@@ -1155,6 +1797,7 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     * @uiGroup Style
      */
     this.paddingText = "xxxx-large";
     /**
@@ -1162,8 +1805,18 @@ 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() { }
@@ -1802,13 +2455,6 @@ const Leaderboard = class {
      * @uiName Width
      */
     this.width = "100%";
-    /**
-     * Hide the viewer's leaderboard row if not in the top results.
-     *
-     * @uiName Hide viewing user
-     * @default
-     */
-    this.hideViewer = false;
     /**
      * @uiName Viewing user text
      */
@@ -1831,6 +2477,13 @@ 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);
@@ -1854,6 +2507,12 @@ const Leaderboard = class {
       showRank: this.showRank,
       rankSuffix: this.rankSuffix,
       width: this.width,
+      viewingUserHighlightColor: this.viewingUserHighlightColor,
+      viewingUserHighlightTextColor: this.viewingUserHighlightTextColor,
+      background: this.background,
+      borderColor: this.borderColor,
+      textColor: this.textColor,
+      borderRadius: this.borderRadius,
     };
     const demoProps = { ...props, demoData: this.demoData };
     const viewprops = isDemo()
@@ -1924,6 +2583,12 @@ function useLeaderboardDemo(props) {
         hideNames: props.hideNames,
         rankSuffix: props.rankSuffix,
         width: props.width,
+        viewingUserHighlightColor: props.viewingUserHighlightColor,
+        viewingUserHighlightTextColor: props.viewingUserHighlightTextColor,
+        background: props.background,
+        borderColor: props.borderColor,
+        textColor: props.textColor,
+        borderRadius: props.borderRadius,
       },
     },
     data: {
@@ -2144,7 +2809,7 @@ const style$1 = {
     marginLeft: "auto",
   },
   PayoutButtonDescription: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-small)",
     margin: "0",
   },
@@ -2240,33 +2905,6 @@ const style$2 = {
     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",
@@ -2282,6 +2920,13 @@ const style$2 = {
     "&::part(footer)": {},
   },
 };
+const vanillaStyle$1 = `
+  a {
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`;
 const sheet$2 = createStyleSheet(style$2);
 const styleString$2 = sheet$2.toString();
 function PayoutStatusAlertView(props) {
@@ -2292,9 +2937,7 @@ function PayoutStatusAlertView(props) {
         header: text.errorHeader,
         description: text.errorDescription,
         buttonText: null,
-        alertType: "critical",
-        icon: "exclamation-triangle",
-        class: sheet$2.classes.ErrorAlertContainer,
+        alertType: "error",
       };
     switch (status) {
       case "INFORMATION_REQUIRED":
@@ -2303,8 +2946,6 @@ function PayoutStatusAlertView(props) {
           description: text.informationRequiredDescription,
           buttonText: text.informationRequiredButtonText,
           alertType: "info",
-          icon: "info-circle",
-          class: sheet$2.classes.InfoAlertContainer,
         };
       case "VERIFICATION:REQUIRED":
         return {
@@ -2317,8 +2958,6 @@ function PayoutStatusAlertView(props) {
           }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$2.classes.WarningAlertContainer,
         };
       case "VERIFICATION:INTERNAL":
         return {
@@ -2330,8 +2969,6 @@ 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 {
@@ -2343,8 +2980,6 @@ 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 {
@@ -2355,18 +2990,49 @@ 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,
+          alertType: "error",
         };
       case "OVER_W9_THRESHOLD":
+        if (states.enforceUsTaxComplianceOption === "CASH_ONLY_DEFER_W9") {
+          return {
+            header: text.w9RequiredHeader,
+            description: intl.formatMessage({
+              id: "w9RequiredDescription",
+              defaultMessage: text.w9RequiredDescription,
+            }, {
+              termsAndConditions: (h$1("a", { target: "_blank", href: `https://terms.advocate.impact.com/PayoutTermsAndConditions.html` }, text.termsAndConditions)),
+            }),
+            buttonText: text.w9RequiredButtonText,
+            alertType: "warning",
+            icon: "exclamation-triangle",
+          };
+        }
+        else {
+          return {
+            header: text.holdHeader,
+            description: intl.formatMessage({
+              id: "holdDescription",
+              defaultMessage: text.holdDescription,
+            }, {
+              supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+            }),
+            buttonText: null,
+            alertType: "warning",
+            icon: "exclamation-triangle",
+          };
+        }
+      case "ACCOUNT_REVIEW":
         return {
-          header: text.w9RequiredHeader,
-          description: intl.formatMessage({ id: "w9RequiredDescription", defaultMessage: text.w9RequiredDescription }, { termsAndConditions: (h$1("a", { target: "_blank", href: `https://terms.advocate.impact.com/PayoutTermsAndConditions.html` }, text.termsAndConditions)) }),
-          buttonText: text.w9RequiredButtonText,
+          header: text.accountReviewHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.accountReviewDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          buttonText: null,
           alertType: "warning",
           icon: "exclamation-triangle",
-          class: sheet$2.classes.WarningAlertContainer,
         };
       case "HOLD":
         return {
@@ -2379,8 +3045,6 @@ function PayoutStatusAlertView(props) {
           }),
           buttonText: null,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$2.classes.WarningAlertContainer,
         };
       default:
         return;
@@ -2389,15 +3053,21 @@ function PayoutStatusAlertView(props) {
   function getButton(status) {
     switch (status) {
       case "OVER_W9_THRESHOLD":
+        if (states.enforceUsTaxComplianceOption === "CASH_ONLY")
+          return;
         return data.type === "SquatchJS2" ? (h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.w9RequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h$1("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
         // Demo case
         h$1("sl-button", { type: "default" }, text.w9RequiredButtonText));
       case "INFORMATION_REQUIRED":
-        return data.type === "SquatchJS2" ? (h$1("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)) : (
+        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))) : (
         // Demo case
-        h$1("sl-button", { type: "default" }, text.informationRequiredButtonText));
+        h$1("div", { style: { paddingTop: "10px" } },
+          h$1("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base" }, text.informationRequiredButtonText)));
       case "VERIFICATION:REQUIRED":
-        return (h$1("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
+        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)));
       default:
         return;
     }
@@ -2411,10 +3081,10 @@ function PayoutStatusAlertView(props) {
   }
   return (h$1("div", { part: "sqm-base" },
     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),
+    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),
       getButton(states.status))));
 }
 
@@ -2470,17 +3140,25 @@ const PayoutStatusAlert = class {
      */
     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
+     * @uiName Account review alert header
+     */
+    this.accountReviewHeader = "Your account is under review";
+    /**
+     * @uiName Account review alert description
+     */
+    this.accountReviewDescription = "This process takes 48 hours, payouts are on hold until it's completed. You will receive an email from our referral provider, Impact.com, if any issues arise.  It contains details on how to resolve this issue. If you need further assistance, please reach out to our {supportLink}.";
+    /**
+     * @uiName W-9 payment threshold alert header
      */
     this.w9RequiredHeader = "Your next payout is on hold";
     /**
-     * @uiName W9 payment threshold alert description
+     * @uiName W-9 payment threshold alert description
      */
-    this.w9RequiredDescription = "You have surpassed the $600 threshold for a W9 tax form. To remove the hold, you need to submit a W9 tax form as outlined in our {termsAndConditions}. Please click 'Submit W9' to start the process.";
+    this.w9RequiredDescription = "You have surpassed the $600 threshold requiring a W-9 form or have multiple accounts with impact.com. To remove the hold, please submit your W-9 form.";
     /**
-     * @uiName W9 payment threshold alert button text
+     * @uiName W-9 payment threshold alert button text
      */
-    this.w9RequiredButtonText = "Submit W9";
+    this.w9RequiredButtonText = "Submit W-9";
     /**
      * @uiName Payout on hold alert header
      */
@@ -2492,7 +3170,7 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Cash & Payouts Microsite Page (only set if alert is used in a microsite)
      */
-    this.cashPayoutsPageUrl = "/taxAndCash#3";
+    this.cashPayoutsPageUrl = "/taxAndCash";
     /**
      * @uiName Support link text
      */
@@ -2964,47 +3642,213 @@ const PortalFooter = class {
   static get assetsDirs() { return ["../../assets"]; }
 };
 
-function usePortalFrame(footerContent, headerContent) {
-  const [, rerender] = yn();
+function usePortalForgotPassword(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState("");
+  const [request, { loading, data, errors }] = un();
+  const urlParams = new URLSearchParams(jn.location.search);
+  const nextPage = urlParams.get("nextPage");
+  const submit = async (event) => {
+    var _a;
+    setError("");
+    setSuccess(false);
+    let formData = event.detail.formData;
+    formData === null || formData === void 0 ? void 0 : formData.forEach((value, key) => {
+      jsonpointer.set(formData, key, value);
+    });
+    const urlParams = nextPage ? { nextPage } : null;
+    const redirectPath = props.redirectPath;
+    const variables = { email: formData.email, urlParams, redirectPath };
+    const result = await request(variables);
+    if (result instanceof Error) {
+      if (result.message)
+        setError(props.networkErrorMessage);
+      return;
+    }
+    if ((_a = result.requestManagedIdentityPasswordResetEmail) === null || _a === void 0 ? void 0 : _a.success) {
+      setSuccess(true);
+    }
+  };
   return {
-    data: {
-      footer: footerContent,
-      header: headerContent,
+    states: {
+      loading,
+      error: ((_d = (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.message) || ((_g = (_f = (_e = errors === null || errors === void 0 ? void 0 : errors.response) === null || _e === void 0 ? void 0 : _e.errors) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.message) ||
+        error,
+      success,
+      loginPath: props.loginPath,
+      headerText: props.headerText,
+      loginText: props.loginText,
     },
     callbacks: {
-      rerender,
+      submit,
     },
   };
 }
 
-const PortalFrame = class {
+const PortalForgotPassword = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
     /**
-     * @undocumented
+     * Redirect participants to this page after they verify their email.
+     *
+     * @uiName Email redirect
+     * @uiWidget pageSelect
      */
-    this.notFullScreen = false;
-    h(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const footerContent = h$1("slot", { name: "footer" });
-    const headerContent = h$1("slot", { name: "header" });
-    const props = isDemo()
-      ? usePortalFrameDemo(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,
-    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: {
-          fontSize: "var(--sl-font-size-large)",
-          fontWeight: "bold",
+    this.redirectPath = "/resetPassword";
+    /**
+     * @uiName Email field label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName Password reset button text
+     */
+    this.submitLabel = "Request Password Reset";
+    /**
+     * @uiName Login redirect path
+     * @uiWidget pageSelect
+     */
+    this.loginPath = "/login";
+    /**
+     * @uiName Header text
+     * @uiWidget textArea
+     */
+    this.headerText = "Enter your email below to receive a password reset link.";
+    /**
+     * @uiName Sign in link text
+     */
+    this.loginText = "Sign In";
+    /**
+     * Displayed when the forgot password action fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
+     */
+    this.networkErrorMessage = "An error occurred while loading this page. Please refresh the page.";
+    /**
+     * @uiName Email verification sent text
+     */
+    this.successAlertText = "If an account with that email exists, a password reset email will be sent.";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     */
+    this.backgroundColor = "var(--sqm-portal-background, #ffffff)";
+    /**
+     * @uiName Border radius
+     * @uiWidget number
+     */
+    this.borderRadius = "var(--sqm-border-radius-normal, 8px)";
+    /**
+     * @uiName Border style
+     * @uiWidget textArea
+     */
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks } = isDemo()
+      ? usePortalForgotPasswordDemo(this)
+      : usePortalForgotPassword(this);
+    const content = {
+      messageSlot: h$1("slot", { name: "messageSlot" }, this.headerText),
+      emailLabel: this.emailLabel,
+      submitLabel: this.submitLabel,
+      successAlertText: this.successAlertText,
+      loginText: this.loginText,
+      backgroundColor: this.backgroundColor,
+      borderRadius: this.borderRadius,
+      border: this.border,
+    };
+    return (h$1(PortalForgotPasswordView, { states: states, callbacks: callbacks, content: content }));
+  }
+};
+function usePortalForgotPasswordDemo(props) {
+  return cjs({
+    states: { error: "", loading: false, success: false },
+    callbacks: {
+      submit: async (_event) => { },
+    },
+    content: {
+      secondaryButton: (h$1("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", disabled: false, onClick: () => jn.push(props.loginPath) }, props.loginText)),
+      messageSlot: h$1("span", null, props.headerText),
+      emailLabel: props.emailLabel,
+      submitLabel: props.submitLabel,
+      successAlertText: props.successAlertText,
+      loginText: props.loginText,
+      backgroundColor: props.backgroundColor,
+      borderRadius: props.borderRadius,
+      border: props.border,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+function usePortalFrame(footerContent, headerContent, props) {
+  const [, rerender] = yn();
+  return {
+    data: {
+      footer: footerContent,
+      header: headerContent,
+    },
+    callbacks: {
+      rerender,
+    },
+    backgroundColor: props.backgroundColor,
+    border: props.border,
+    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
+  };
+}
+
+const PortalFrame = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @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() { }
+  render() {
+    const footerContent = h$1("slot", { name: "footer" });
+    const headerContent = h$1("slot", { name: "header" });
+    const props = isDemo()
+      ? usePortalFrameDemo(footerContent, headerContent, this)
+      : usePortalFrame(footerContent, headerContent, this);
+    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: {
+          fontSize: "var(--sl-font-size-large)",
+          fontWeight: "bold",
         } }, "Portal Header"), h$1("span", { style: { fontSize: "var(--sl-font-size-small)" } }, "A description for the portal"))),
     },
     callbacks: {
@@ -3089,7 +3933,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", { 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", { exportparts: "base: secondarybutton-base", type: "text", disabled: states.loading, onClick: () => jn.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -3251,7 +4095,7 @@ function usePortalRegister(props) {
 const PortalRegister = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.ignored = true;
+    this.ignored = false;
     /**
      * Redirect participants to this page from their verification email
      *
@@ -3417,7 +4261,7 @@ function useRegisterDemo$1(props) {
 function ProgramExplainerView(props, children) {
   const style = {
     Container: {
-      color: props.textColor || "var(--sl-color-neutral-900)",
+      color: props.textColor || "var(--sqm-text)",
       background: props.backgroundColor || "",
     },
     Header: {
@@ -3477,8 +4321,11 @@ function ProgramExplainerStepView(props) {
       width: "100%",
       padding: "var(--sl-spacing-x-large)",
       lineHeight: "var(--sl-line-height-dense)",
-      color: props.textColor || "var(--sl-color-neutral-900)",
-      background: props.backgroundColor || "var(--sl-color-primary-50)",
+      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)",
       "@media (max-width: 499px)": {
         flexDirection: "row",
         width: "auto",
@@ -3491,6 +4338,7 @@ 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)",
@@ -3499,6 +4347,7 @@ 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)": {
@@ -3511,11 +4360,14 @@ function ProgramExplainerStepView(props) {
       borderRadius: "100%",
       objectFit: "cover",
       userSelect: "none",
-      background: "#FFF",
-      color: "var(--sl-color-primary-300)",
+      background: props.iconBackgroundColor || "var(--sl-color-white)",
+      color: props.iconColor || "var(--sqm-accent-color-icon)",
       fontSize: "26px",
       textAlign: "center",
       lineHeight: "72px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
     },
   };
   const sheet = createStyleSheet(style);
@@ -3544,7 +4396,7 @@ const debug = browser("sq:useProgramMenu");
 const UPDATE_PROGRAM_EVENT = "sq:update-program-id";
 function useProgramMenu(props) {
   const programId = H();
-  const host = _();
+  const host = _$1();
   debug({ programId, props });
   const ref = useRef();
   const [, rerender] = yn();
@@ -3584,44 +4436,47 @@ const ProgramMenu = class {
   }
 };
 
-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 = `
+const vanillaStyle$2 = `
     :host{
       display: block;   
     }
   `;
 function ReferralCardView(props) {
-  return (h$1("div", { part: "sqm-base", class: sheet$3.classes.Container, style: {
-      border: `${props.hideBorder ? "none" : "1px solid var(--sl-color-neutral-300)"}`,
+  const style = {
+    Container: {
+      borderRadius: props.borderRadius || "var(--sqm-border-radius-normal)",
+      color: props.textColor || "var(--sqm-text)",
+      background: props.backgroundColor || "var(--sqm-portal-background)",
+      display: "flex",
+      flexDirection: "column",
+      rowGap: "var(--sl-spacing-large)",
+    },
+    EndContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+    },
+    ColumnContainer: {
+      "& p": { margin: "0" },
+      display: "grid",
+      gridAutoColumns: "minmax(0, 1fr)",
+      gridAutoFlow: "column",
+      gap: "calc(2 * var(--sl-spacing-medium))",
+      "@media (max-width: 499px)": {
+        gridAutoFlow: "unset",
+        gridAutoColumns: "unset",
+        gridTemplateColumns: "1fr",
+        border: "none",
+      },
+    },
+  };
+  const sheet = 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}`}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,
@@ -3631,15 +4486,15 @@ function ReferralCardView(props) {
       margin: `${props.limitWidth ? "auto" : "none"}`,
     } },
     h$1("style", { type: "text/css" },
-      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: {
+      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: {
         alignItems: props.verticalAlignment,
       } },
       props.slots.left,
       props.slots.right),
-    props.hasFooter && (h$1("div", { class: sheet$3.classes.EndContainer }, props.slots.footer))));
+    props.hasFooter && (h$1("div", { class: sheet.classes.EndContainer }, props.slots.footer))));
 }
 
 const ReferralCard = class {
@@ -3686,12 +4541,6 @@ 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
@@ -3785,6 +4634,161 @@ 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 = {};
 
@@ -4721,6 +5725,13 @@ const SqmRewardExchangeList = class {
      * @uiName Cost row title
      */
     this.costTitle = "Cost to Redeem";
+    /**
+     * @componentState { "title": "Choose reward", "props": { "states": { "redeemStage": "chooseReward" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Reward details", "props": { "states": { "redeemStage": "chooseAmount" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Confirm exchange", "props": { "states": { "redeemStage": "confirmation" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Exchange successful", "props": { "states": { "redeemStage": "success" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     */
+    this.stateController = "{}";
     h(this);
   }
   disconnectedCallback() { }
@@ -4740,37 +5751,45 @@ 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) {
-  return cjs({
-    states: {
-      content: {
-        text: props,
-      },
-      redeemStage: "chooseReward",
-      amount: 0,
-      selectedStep: undefined,
-      selectedItem: undefined,
-      open: false,
-      exchangeError: false,
-      queryError: false,
-      loading: false,
-      noExchangeOptions: false,
-      empty: EmptySlot$1(),
-    },
-    data: {
-      shareCode: "SHARECODE123",
-      exchangeList: demoRewardExchange.data.exchangeList,
-    },
-    callbacks: {
-      exchangeReward: () => { },
-      setExchangeState: (_) => { },
-      setStage: (_) => { },
-      resetState: () => { },
-      copyFuelTankCode: () => { },
-    },
-    refs: {
-      canvasRef: {},
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  const states = parseStates(props.stateController);
+  const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-reward-exchange-list"
+    ? { ...prev, ...states[key] }
+    : { ...prev, [`${key}_stateController`]: states[key] }, {});
+  const finalProps = cjs({ ...demoRewardExchange, content: { text: props } }, 
+  // {
+  //   states: {
+  //     content: {
+  //       text: props,
+  //     },
+  //     redeemStage: "chooseReward",
+  //     amount: 0,
+  //     selectedStep: undefined,
+  //     selectedItem: undefined,
+  //     open: false,
+  //     exchangeError: false,
+  //     queryError: false,
+  //     loading: false,
+  //     noExchangeOptions: false,
+  //     // empty: EmptySlot(),
+  //   },
+  //   data: {
+  //     // shareCode: "SHARECODE123",
+  //     exchangeList: demoRewardExchange.data.exchangeList,
+  //   },
+  //   callbacks: {
+  //     exchangeReward: () => {},
+  //     setExchangeState: (_: ExchangeState) => {},
+  //     setStage: (_: Stages) => {},
+  //     resetState: () => {},
+  //     copyFuelTankCode: () => {},
+  //   },
+  //   refs: {
+  //     canvasRef: {},
+  //   },
+  // },
+  props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
+  console.log({ finalProps });
+  return finalProps;
 }
 
 const debug$1 = browser("sq:useRouter");
@@ -4782,7 +5801,7 @@ function matchPath(pattern, page) {
 }
 function useRouter() {
   const location = kn();
-  const host = _();
+  const host = _$1();
   const [slot, setSlot] = useState(undefined);
   const [container, setContainer] = useState(undefined);
   const page = location.pathname;
@@ -4873,8 +5892,8 @@ const ShareButton = class {
     /**
      * @uiType string
      * @uiName Button style
-     * @uiEnum ["primary" , "success", "info", "warning", "danger", "default", "text" ]
-     * @uiEnumNames ["Primary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
+     * @uiEnum ["primary", "secondary", "success", "info", "warning", "danger", "default", "text" ]
+     * @uiEnumNames ["Primary", "Secondary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
      */
     this.type = "default";
     /**
@@ -4886,11 +5905,13 @@ const ShareButton = class {
     this.iconslot = "prefix";
     /**
      * @uiName Hide icon
+     * @uiGroup Style
      * @default
      */
     this.hideicon = false;
     /**
      * @uiName Hide text
+     * @uiGroup Style
      * @default
      */
     this.hidetext = false;
@@ -4996,6 +6017,7 @@ const ShareCode = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -5009,8 +6031,18 @@ 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() { }
@@ -5031,6 +6063,11 @@ 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: () => {
@@ -5065,19 +6102,30 @@ 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 Style
+     * @uiName Button style
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
      */
     this.buttonStyle = "icon";
     h(this);
@@ -5094,12 +6142,18 @@ const ShareLink = class {
 function useDemoShareLink(props) {
   const [open, setOpen] = useState(false);
   const copyString = "https://www.example.com/sharelink/abc";
+  console.log("Demo props", props);
   return cjs({
     copyString: copyString,
     tooltiptext: props.tooltiptext,
     textAlign: props.textAlign,
     buttonStyle: props.buttonStyle,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
     copyButtonLabel: props.copyButtonLabel,
+    borderColor: props.borderColor,
     rewardStatus: "AVAILABLE",
     open,
     onClick: () => {
@@ -5124,12 +6178,29 @@ const StatContainer = class {
      */
     this.space = "xxx-large";
     /**
+     * @undocumented
      * @uiName Display
      * @uiType string
      * @uiEnum ["grid", "flex"]
      * @uiEnumNames ["Grid", "Flex"]
      */
-    this.display = "grid";
+    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";
     h(this);
   }
   disconnectedCallback() { }
@@ -5173,8 +6244,18 @@ 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 },
   };
 }
@@ -5288,6 +6369,14 @@ 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() { }
@@ -5309,6 +6398,7 @@ const TaskCard = class {
 };
 function useTaskCardDemo(props) {
   return cjs({
+    content: { ...props },
     states: { loadingEvent: false, locale: "en" },
     callbacks: {
       sendEvent: (event) => console.log(event),
@@ -5362,52 +6452,7 @@ 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 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 = `
+const vanillaStyle$3 = `
 	:host{
 		display: block; 
 	}
@@ -5419,10 +6464,55 @@ const vanillaStyle$2 = `
 function TimelineEntryView(props) {
   var _a;
   const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  return (h$1("div", { class: sheet$4.classes.TimelineReward, part: "sqm-base" },
+  const style = {
+    TimelineReward: {
+      color: props.textColor || "var(--sqm-text)",
+      lineHeight: "var(--sl-line-height-dense)",
+      "& .container": {
+        display: "flex",
+      },
+      "& .line": {
+        display: "none",
+        color: "transparent",
+        userSelect: "none",
+        background: props.lineColor || "var(--sqm-accent-color-icon)",
+        width: "4px",
+        borderRadius: "4px",
+        margin: "-2px",
+        position: "relative",
+        left: "12px",
+        top: "34px",
+      },
+      "& .step": {
+        display: "flex",
+      },
+      "& .icon": {
+        position: "relative",
+        top: "4px",
+        zIndex: "1",
+        color: props.lineColor || "var(--sqm-accent-color-icon)",
+        marginRight: "var(--sl-spacing-large)",
+      },
+      "& .reward": {
+        marginRight: "var(--sl-spacing-x-small)",
+        fontSize: "var(--sl-font-size-x-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& .unit": {
+        textTransform: "uppercase",
+        fontSize: "var(--sl-font-size-small)",
+      },
+      "& .description": {
+        fontSize: "var(--sl-font-size-medium)",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h$1("div", { class: sheet.classes.TimelineReward, part: "sqm-base" },
     h$1("style", { type: "text/css" },
-      styleString$4,
-      vanillaStyle$2),
+      styleString,
+      vanillaStyle$3),
     h$1("div", { class: "container", part: "sqm-entry-container" },
       h$1("div", { class: "line" }, "/"),
       h$1("div", { class: "step" },
@@ -5512,4 +6602,4 @@ function useUserNameDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-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 };
+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, 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, PortalForgotPassword as sqm_portal_forgot_password, 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 };