@saasquatch/mint-components 1.15.0-40 → 1.15.0-42

package/dist/esm/{sqm-big-stat_41.entry.js → sqm-big-stat_42.entry.js}

@@ -1,27 +1,359 @@
-import { r as registerInstance, h as h$1, c as Host } from './index-91e7729f.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 './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-66746c30.js';
-import { i as isDemo, _, d as dist, J, H, $ as $e, w as wn, B, L, y as yn, j as jn, r as Ue, V as Ve, u as useCallback, 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 { 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 './stencil-hooks.module-20ad2b5f.js';
+import { i as intl } from './global-16971a34.js';
+import { i as isDemo, _ as _$1, d as dist, J, H, $ as $e, w as wn, B, L, y as yn, j as jn, r as Ue, V as Ve, u as useCallback, Q as Qe, k as kn } from './index.module-d49ae5e7.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 { c as createStyleSheet } from './JSS-67b5cff8.js';
-import './useReferralCodes-8f75921a.js';
+import './useReferralCodes-0b798295.js';
 import './mixins-f750863a.js';
-import { C as CopyTextView } from './copy-text-view-4a207b17.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-cd3902e5.js';
+import { C as CopyTextView } from './copy-text-view-38c7c3d5.js';
+import { a as useRequestRerender } from './re-render-789f9123.js';
+import { u as useChildElements } from './useChildElements-0ca9a015.js';
+import './luxon-793b7f13.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 { P as PortalLoginView } from './sqm-portal-login-view-e870b4b0.js';
-import { u as usePortalLogin } from './usePortalLogin-ef647a50.js';
+import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-2db047e9.js';
+import { u as usePortalLogin, P as PortalLoginView } from './usePortalLogin-2b813acc.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { i as isEmpty } from './utilities-5b0ca040.js';
-import { b as useDemoBigStat, U as useBigStat, B as BigStatView, O as autoColorScaleCss, J as CardFeedView, i as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V 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, W as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-5f9b6d07.js';
-import './sqm-portal-container-view-1683ae32.js';
-import { u as usePayoutStatus } from './usePayoutStatus-58aa56b4.js';
+import { i as isEmpty } from './utilities-6341d9fd.js';
+import { b as useDemoBigStat, Q as useBigStat, B as BigStatView, J as CardFeedView, i as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, U 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, V as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-173ce794.js';
+import './sqm-portal-container-view-f0b1ccfc.js';
+import { u as usePayoutStatus } from './usePayoutStatus-3768c8c3.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
+ *
+ */
+//
+const Default = null;
+const Netflix = {
+  font: {
+    font: "Netflix Sans, Arial, sans-serif",
+    textColor: "white",
+    secondaryTextColor: "#B3B3B3",
+  },
+  border: {
+    color: "#333333",
+    radius: "4px",
+    thickness: "1px",
+  },
+  color: {
+    primaryColor: "#E50914",
+    background: "#101010",
+    accentColorShades: {
+      text: "#E50914",
+      icon: "#E50914",
+      border: "#E50914",
+      background: "#300609",
+      iconAndBadge: "#E50914",
+    },
+    success: {
+      text: "#66BB6A",
+      icon: "#4CAF50",
+      border: "#4CAF50",
+      background: "#1B5E20",
+      iconAndBadge: "#4CAF50",
+    },
+    warning: {
+      text: "#FFCA28",
+      icon: "#FFA726",
+      border: "#FFA726",
+      background: "#F57C00",
+      iconAndBadge: "#FFA726",
+    },
+    critical: {
+      text: "#EF9A9A",
+      icon: "#E50914",
+      border: "#E50914",
+      background: "#B71C1C",
+      iconAndBadge: "#E50914",
+    },
+    informative: {
+      text: "#64B5F6",
+      icon: "#42A5F5",
+      border: "#42A5F5",
+      background: "#1976D2",
+      iconAndBadge: "#42A5F5",
+    },
+    neutral: {
+      text: "white",
+      icon: "#B3B3B3",
+      border: "#333333",
+      background: "#222222",
+      iconAndBadge: "#B3B3B3",
+    },
+  },
+  primaryButton: {
+    buttonColor: "#E50914",
+    buttonTextColor: "#FFFFFF",
+    borderRadius: "4px",
+    buttonBorderColor: "transparent",
+    hoverColor: "#CC0000",
+    hoverTextColor: "#FFFFFF",
+  },
+  secondaryButton: {
+    buttonColor: "transparent",
+    buttonTextColor: "#FFFFFF",
+    buttonBorderColor: "#B3B3B3",
+    borderRadius: "4px",
+    hoverColor: "#333333",
+    hoverTextColor: "#FFFFFF",
+  },
+  tertiaryButton: {
+    buttonColor: "transparent",
+    buttonTextColor: "#FFFFFF",
+    borderRadius: "4px",
+  },
+  inputs: {
+    background: "#222222",
+    borderColor: "#B3B3B3",
+    borderRadius: "4px",
+    textColor: "white",
+    labelColor: "#B3B3B3",
+    borderThickness: "1px",
+    disabledBackground: "#333333",
+    disabledTextColor: "#777777",
+    labelFontSize: "14px",
+    focusBorderColor: "#E50914",
+    hoverBorderColor: "#777777",
+  },
+};
+const Amazon = {
+  font: {
+    font: "Amazon Ember, Arial, sans-serif",
+    textColor: "#2f2f2f",
+    secondaryTextColor: "#565959",
+  },
+  border: {
+    color: "#d5d9d9",
+    radius: "4px",
+    thickness: "1px",
+  },
+  color: {
+    primaryColor: "#FF9900",
+    background: "#ffffff",
+    accentColorShades: {
+      text: "#FF9900",
+      icon: "#FF9900",
+      border: "#FFBF66",
+      background: "#FFF4DD",
+      iconAndBadge: "#FF9900",
+    },
+    success: {
+      text: "#198754",
+      icon: "#28A745",
+      border: "#BCE8B2",
+      background: "#D4EDDA",
+      iconAndBadge: "#28A745",
+    },
+    warning: {
+      text: "#856404",
+      icon: "#FFC107",
+      border: "#FFEBA2",
+      background: "#FFF3CD",
+      iconAndBadge: "#FFC107",
+    },
+    critical: {
+      text: "#721C24",
+      icon: "#DC3545",
+      border: "#F5C6CB",
+      background: "#F8D7DA",
+      iconAndBadge: "#DC3545",
+    },
+    informative: {
+      text: "#004085",
+      icon: "#007BFF",
+      border: "#B8DAFF",
+      background: "#CCE5FF",
+      iconAndBadge: "#007BFF",
+    },
+    neutral: {
+      text: "#232F3E",
+      icon: "#565959",
+      border: "#D5D9D9",
+      background: "#F0F2F2",
+      iconAndBadge: "#565959",
+    },
+  },
+  primaryButton: {
+    buttonColor: "#FF9900",
+    buttonTextColor: "#FFFFFF",
+    borderRadius: "7px",
+    buttonBorderColor: "transparent",
+    hoverColor: "#EB9100",
+    hoverTextColor: "#FFFFFF",
+  },
+  secondaryButton: {
+    buttonColor: "#FFFFFF",
+    buttonTextColor: "#232F3E",
+    buttonBorderColor: "#888C8C",
+    borderRadius: "7px",
+    hoverColor: "#F0F2F2",
+    hoverTextColor: "#232F3E",
+  },
+  tertiaryButton: {
+    buttonColor: "transparent",
+    buttonTextColor: "#007185",
+    borderRadius: "7px",
+  },
+  inputs: {
+    background: "#FFFFFF",
+    borderColor: "#D5D9D9",
+    borderRadius: "3px",
+    textColor: "#2f2f2f",
+    labelColor: "#565959",
+    borderThickness: "1px",
+    disabledBackground: "#EAEDED",
+    disabledTextColor: "#888C8C",
+    labelFontSize: "14px",
+    focusBorderColor: "#007185",
+    hoverBorderColor: "#A2A2A2",
+  },
+};
+const Spotify = {
+  font: {
+    textColor: "white",
+  },
+  color: {
+    background: "#121212",
+    accentColorShades: {
+      iconAndBadge: "#1ed760",
+    },
+  },
+  primaryButton: {
+    buttonColor: "#1ed760",
+    buttonTextColor: "#121212",
+    borderRadius: "30px",
+    buttonBorderColor: "transparent",
+    hoverColor: "#1DB954",
+    hoverTextColor: "#121212",
+  },
+  secondaryButton: {
+    buttonColor: "#191414",
+    buttonTextColor: "#FFFFFF",
+    buttonBorderColor: "#FFFFFF",
+    borderRadius: "30px",
+    hoverColor: "#282828",
+    hoverTextColor: "#121212",
+  },
+  inputs: {
+    background: "#121212",
+    borderColor: "#7c7c7c",
+    borderThickness: "1px",
+    borderRadius: "30px",
+    textColor: "#fff",
+    focusBorderColor: "white",
+    labelColor: "white",
+    hoverBorderColor: "white",
+    labelFontSize: "18px",
+    disabledTextColor: "white",
+    disabledBackground: "#303030",
+  },
+};
+const Google = {
+  color: {
+    primaryColor: "#4285F4",
+    background: "#FFFFFF",
+    accentColorShades: {
+      text: "#1A73E8",
+      border: "#8AB4F8",
+      background: "#E8F0FE",
+      iconAndBadge: "#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: "#A8DCD7",
+      background: "#E8F0FE",
+      iconAndBadge: "#4285F4",
+    },
+    neutral: {
+      text: "#202124",
+      border: "#DADCE0",
+      background: "#F8F9FA",
+      iconAndBadge: "#5F6368",
+    },
+  },
+  border: {
+    color: "#DADCE0",
+    radius: "8px",
+    thickness: "1px",
+  },
+  font: {
+    font: "Roboto, Arial, sans-serif",
+    textColor: "#212124",
+    secondaryTextColor: "#5F6368",
+  },
+  primaryButton: {
+    buttonColor: "#4285F4",
+    buttonTextColor: "#FFFFFF",
+    borderRadius: "4px",
+    buttonBorderColor: "transparent",
+    hoverColor: "#3C7CD1",
+    hoverTextColor: "#FFFFFF",
+  },
+  secondaryButton: {
+    buttonColor: "#FFFFFF",
+    buttonTextColor: "#4285F4",
+    buttonBorderColor: "#DADCE0",
+    borderRadius: "4px",
+    hoverColor: "#E8F0FE",
+    hoverTextColor: "#4285F4",
+  },
+  tertiaryButton: {
+    buttonColor: "transparent",
+    buttonTextColor: "#4285F4",
+    borderRadius: "4px",
+  },
+  inputs: {
+    background: "#FFFFFF",
+    borderColor: "#DADCE0",
+    borderThickness: "1px",
+    borderRadius: "8px",
+    textColor: "#202124",
+    focusBorderColor: "#4285F4",
+    labelColor: "#5F6368",
+    hoverBorderColor: "#9AA0A6",
+    labelFontSize: "12px",
+    disabledTextColor: "#9AA0A6",
+    disabledBackground: "#F1F3F4",
+  },
+};
+
+const Themes = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Default: Default,
+  Netflix: Netflix,
+  Amazon: Amazon,
+  Spotify: Spotify,
+  Google: Google
+});
 
 const BigStat = class {
   constructor(hostRef) {
@@ -51,7 +383,7 @@ 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 }));
@@ -71,6 +403,57 @@ function buildFontsCssUrl(...fonts) {
   return `https://fonts.googleapis.com/css2?${queryString}`;
 }
 
+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
+ *
+ * @param color
+ * @param name
+ * @returns
+ */
+function autoColorScaleCss(color, name = "primary") {
+  return generateScale(color, name).join("\n");
+}
+
 const BrandComponent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -127,6 +510,193 @@ 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: absolute;
+            bottom: 0;
+            right: 0;
+            z-index: 999999;
+            border: 1px solid #ccc;
+          }
+
+          .card-heading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-bottom: 10px;
+            color: black;
+            margin: 0;
+          }
+
+          .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: 4px 8px; /* Fixed spacing syntax */
+            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);
@@ -172,7 +742,7 @@ 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 = _();
+  const host = _$1();
   const [detailsOpen, setDetailsOpen] = useState(false);
   return (h$1("sl-alert", { type: "danger", open: true },
     h$1("style", { type: "text/css" }, styleString),
@@ -2779,7 +3349,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: tertiarybutton-base", type: "text", disabled: states.loading, onClick: () => jn.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -2941,7 +3511,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
      *
@@ -3169,9 +3739,9 @@ function ProgramExplainerStepView(props) {
       lineHeight: "var(--sl-line-height-dense)",
       borderRadius: props.borderRadius
         ? `${props.borderRadius}px`
-        : "var(--sl-border-radius-large)",
+        : "var(--sqm-border-radius-normal)",
       color: props.textColor || "var(--sqm-text)",
-      background: props.backgroundColor || "var(--sl-color-primary-50)",
+      background: props.backgroundColor || "var(--sqm-accent-color-background)",
       "@media (max-width: 499px)": {
         flexDirection: "row",
         width: "auto",
@@ -3207,7 +3777,7 @@ function ProgramExplainerStepView(props) {
       objectFit: "cover",
       userSelect: "none",
       background: props.iconBackgroundColor || "var(--sl-color-white)",
-      color: props.iconColor || "var(--sl-color-primary-500)",
+      color: props.iconColor || "var(--sqm-accent-color-icon)",
       fontSize: "26px",
       textAlign: "center",
       lineHeight: "72px",
@@ -3242,7 +3812,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();
@@ -3290,9 +3860,9 @@ const vanillaStyle$1 = `
 function ReferralCardView(props) {
   const style = {
     Container: {
-      borderRadius: props.borderRadius || "var(--sl-border-radius-large)",
+      borderRadius: props.borderRadius || "var(--sqm-border-radius-normal)",
       color: props.textColor || "var(--sqm-text)",
-      background: props.backgroundColor || "var(--sl-color-neutral-0)",
+      background: props.backgroundColor || "var(--sqm-portal-background)",
       display: "flex",
       flexDirection: "column",
       rowGap: "var(--sl-spacing-large)",
@@ -3318,7 +3888,7 @@ function ReferralCardView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const borderColor = props.borderColor || "var(--sl-color-neutral-300)";
+  const borderColor = props.borderColor || "var(--sqm-border-color)";
   return (h$1("div", { part: "sqm-base", class: sheet.classes.Container, style: {
       border: `${props.hideBorder ? "none" : "1px solid " + borderColor}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
@@ -3385,12 +3955,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
@@ -4481,7 +5045,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;
@@ -5281,4 +5845,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, 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, 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 };