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

package/dist/cjs/{ErrorView-b2fcf954.js → ErrorView-5504c2b6.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
+const index = require('./index-a43a63b4.js');
 const JSS = require('./JSS-8503a151.js');
 
 const styles = {

package/dist/cjs/{GenericTableView-a9d0b798.js → GenericTableView-107ade89.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
+const index = require('./index-a43a63b4.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-4761d472.js');
 

package/dist/cjs/{ShadowViewAddon-fcd0c52f.js → ShadowViewAddon-42af4b57.js}

@@ -1,21 +1,21 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-a38a094f.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+const global = require('./global-b34bf5f2.js');
+const index_module = require('./index.module-39955732.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-const useReferralCodes = require('./useReferralCodes-82e8797b.js');
+const useReferralCodes = require('./useReferralCodes-a47dcbc2.js');
 const mixins = require('./mixins-4761d472.js');
-const copyTextView = require('./copy-text-view-ee147291.js');
-const useChildElements = require('./useChildElements-1b35d945.js');
-const luxon = require('./luxon-2926d85f.js');
-const sqmTextSpanView = require('./sqm-text-span-view-ce4c0178.js');
+const copyTextView = require('./copy-text-view-af017955.js');
+const useChildElements = require('./useChildElements-e5fa605c.js');
+const luxon = require('./luxon-3b809948.js');
+const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
 const index$1 = require('./index-8c6255f5.js');
-const utilities = require('./utilities-78f5e169.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
+const utilities = require('./utilities-be3ce1f8.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-70eaf785.js');
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -113,7 +113,7 @@ function LeaderboardView(props) {
         fontWeight: "var(--sl-font-weight-semibold)",
       },
       "& tr:not(:first-child)": {
-        borderTop: `1px solid ${styles.borderColor || "var(--sl-color-neutral-200)"}`,
+        borderTop: `var(--sqm-bordr-thickness) solid ${styles.borderColor || "var(--sqm-border-color)"}`,
       },
       "& td": {
         fontSize: "var(--sl-font-size-medium)",
@@ -354,7 +354,7 @@ const EditProfileView = (props) => {
             }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext),
           index.h("sl-button", { onClick: () => {
               callbacks.setShowEdit(false);
-            }, exportparts: "base: secondarybutton-base" }, text.canceltext)))));
+            }, type: "secondary", exportparts: "base: secondarybutton-base" }, text.canceltext)))));
   }
   return (index.h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
     index.h("div", { class: "FormSection" },
@@ -1632,13 +1632,13 @@ function PortalChangePasswordView(props) {
               index.h("sl-input", { exportparts: "label: input-label, base: input-base", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
             index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, { direction: "row", padding: "none", gap: "20px" }),
               index.h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", exportparts: "base: primarybutton-base", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
-              index.h("sl-button", { class: sheet.classes.CancelButton, type: "text", exportparts: "base: secondarybutton-base", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
+              index.h("sl-button", { class: sheet.classes.CancelButton, type: "secondary", exportparts: "base: secondarybutton-base", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
       }))),
     index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
       labelMargin: "x-large",
       padding: "xxx-large",
       label: (index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), states.content.portalChangePasswordHeader)),
-      content: (index.h("sl-button", { exportparts: "base: primarybutton-base", onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
+      content: (index.h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
     }),
       index.h("style", { type: "text/css" }, styleString))));
 }
@@ -2314,7 +2314,7 @@ function TaskCardView(props) {
       "& .main": {
         position: "relative",
         boxSizing: "border-sizing",
-        background: content.backgroundColor || "var(--sl-color-neutral-0)",
+        background: content.backgroundColor || "var(--sqm-portal-background)",
         border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
         borderRadius: "var(--sl-border-radius-large)",
         boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
@@ -3563,7 +3563,7 @@ function RewardExchangeView(props) {
             ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.ruleType) === "FIXED_GLOBAL_REWARD" ? (index.h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (index.h("div", null, input)),
             index.h("div", { class: "space" }))),
         index.h("div", { class: sheet$8.classes.Button },
-          index.h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+          index.h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "secondary", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
           index.h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
   function confirmation() {
@@ -4114,57 +4114,6 @@ function CouponCodeView(props) {
       index.h("div", { part: "erroralert-text" }, props.errorText))) : (index.h(copyTextView.CopyTextView, Object.assign({}, props)))));
 }
 
-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 map = new Map();
 function withShadowView(component) {
   // TODO: Could only do this if rendered in a Stencilbook environment to prevent unintended side-effects
@@ -4223,7 +4172,6 @@ exports.ShadowViewAddon = ShadowViewAddon;
 exports.ShareButtonView = ShareButtonView;
 exports.StatContainerView = StatContainerView;
 exports.TaskCardView = TaskCardView;
-exports.autoColorScaleCss = autoColorScaleCss;
 exports.chooseAmountFixed = chooseAmountFixed;
 exports.chooseAmountFixedNoDescription = chooseAmountFixedNoDescription;
 exports.chooseAmountVariable = chooseAmountVariable;

package/dist/cjs/{copy-text-view-ee147291.js → copy-text-view-af017955.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
+const index = require('./index-a43a63b4.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-4761d472.js');
 

package/dist/cjs/{email-registration-view-37b44222.js → email-registration-view-996fb438.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
+const index = require('./index-a43a63b4.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-4761d472.js');
 
@@ -46,7 +46,7 @@ function EmailRegistrationView(props) {
   };
   const emailValidationRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   return (index.h("div", { part: "sqm-base", class: sheet.classes.Wrapper, style: {
-      border: `${content.hideBorder ? "none" : "1px solid #eaeaea"}`,
+      border: `${content.hideBorder ? "none" : "1px solid var(--sqm-border-color)"}`,
       backgroundColor: content.backgroundColor,
       "padding-top": `var(--sl-spacing-${content.paddingTop})`,
       "padding-right": `var(--sl-spacing-${content.paddingRight})`,

package/dist/cjs/{global-a38a094f.js → global-b34bf5f2.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+const index_module = require('./index.module-39955732.js');
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -25976,6 +25976,8 @@ function createStyleElement() {
   --teal-6: #0b6270;
   --teal-7: #004551;
 } */
+var _a$1, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83, _84, _85, _86, _87, _88, _89;
+console.log("The branding config is ", window.SquatchBrandingConfig);
 const style = `
 /* vietnamese */
 @font-face {
@@ -26473,32 +26475,31 @@ html {
   --sqm-color-text-error: #e63717;
   --sqm-content-max-width: 700px;
   --sqm-content-background: var(--sl-color-white);
-  --sqm-portal-background: #121212;
+  --sqm-portal-background: ${((_b = (_a$1 = window.SquatchBrandingConfig) === null || _a$1 === void 0 ? void 0 : _a$1.color) === null || _b === void 0 ? void 0 : _b.background) || "#121212"};
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
   
-  /*
-  --sqm-text: var(--sl-color-neutral-800);
-  --sqm-text-subdued: var(--sl-color-neutral-500);
- */
+  --sqm-text: ${((_c = window.SquatchBrandingConfig) === null || _c === void 0 ? void 0 : _c.font.textColor) || "white"};
+  --sqm-text-subdued: ${((_d = window.SquatchBrandingConfig) === null || _d === void 0 ? void 0 : _d.font.secondaryTextColor) || "#b3b3b3"};
 
-  --sqm-text: white;
-  --sqm-text-subdued: #b3b3b3;
-  --sqm-primary-color: #1ed760;
+  --sqm-primary-color: ${((_f = (_e = window.SquatchBrandingConfig) === null || _e === void 0 ? void 0 : _e.color) === null || _f === void 0 ? void 0 : _f.primaryColor) || "#1ed760"};
+  --sqm-primary-button-background:${((_h = (_g = window.SquatchBrandingConfig) === null || _g === void 0 ? void 0 : _g.primaryButton) === null || _h === void 0 ? void 0 : _h.buttonColor) || "#1ed760"};
+  --sqm-primary-button-background-hover: ${((_k = (_j = window.SquatchBrandingConfig) === null || _j === void 0 ? void 0 : _j.primaryButton) === null || _k === void 0 ? void 0 : _k.hoverColor) || "#1ed760"};
+  --sqm-primary-button-color: ${((_m = (_l = window.SquatchBrandingConfig) === null || _l === void 0 ? void 0 : _l.primaryButton) === null || _m === void 0 ? void 0 : _m.buttonTextColor) || "#FFFFFF"};
+  --sqm-primary-button-color-border: ${((_p = (_o = window.SquatchBrandingConfig) === null || _o === void 0 ? void 0 : _o.primaryButton) === null || _p === void 0 ? void 0 : _p.buttonBorderColor) ||
+  "transparent"};
+  --sqm-primary-button-radius: ${((_r = (_q = window.SquatchBrandingConfig) === null || _q === void 0 ? void 0 : _q.primaryButton) === null || _r === void 0 ? void 0 : _r.borderRadius) || "4px"};
 
-  --sqm-primary-button-background: #1ed760;
-  --sqm-primary-button-background-hover: #1DB954;
-  --sqm-primary-button-color: #121212;
-  --sqm-primary-button-color-border: transparent;
-  --sqm-primary-button-radius: 30px;
 
+  --sqm-secondary-button-background: ${((_t = (_s = window.SquatchBrandingConfig) === null || _s === void 0 ? void 0 : _s.secondaryButton) === null || _t === void 0 ? void 0 : _t.buttonColor) || "#191414"};
+  --sqm-secondary-button-background-hover: ${((_v = (_u = window.SquatchBrandingConfig) === null || _u === void 0 ? void 0 : _u.secondaryButton) === null || _v === void 0 ? void 0 : _v.hoverColor) || "#282828"};
 
-  --sqm-secondary-button-background: #191414;
-  --sqm-secondary-button-background-hover: #282828; 
-  --sqm-secondary-button-color: #FFFFFF; 
-  --sqm-secondary-button-color-border: #FFFFFF; 
-  --sqm-secondary-button-radius: 30px;
+  
+  --sqm-secondary-button-color: ${((_x = (_w = window.SquatchBrandingConfig) === null || _w === void 0 ? void 0 : _w.secondaryButton) === null || _x === void 0 ? void 0 : _x.buttonTextColor) || "#FFFFFF"};
+  --sqm-secondary-button-color-border: ${((_z = (_y = window.SquatchBrandingConfig) === null || _y === void 0 ? void 0 : _y.secondaryButton) === null || _z === void 0 ? void 0 : _z.buttonBorderColor) ||
+  "#FFFFFF"};
+  --sqm-secondary-button-radius: ${((_1 = (_0 = window.SquatchBrandingConfig) === null || _0 === void 0 ? void 0 : _0.secondaryButton) === null || _1 === void 0 ? void 0 : _1.borderRadius) || "30px"};
 
   --sqm-tertiary-button-background: transparent;
   --sqm-tertiary-button-background-hover: var(--sqm-primary-color); 
@@ -26506,52 +26507,69 @@ html {
   --sqm-tertiary-button-color-border: transparent; 
   --sqm-tertiary-button-radius: 30px;
   
-  --sqm-border-radius-normal: 18px;
-  --sqm-border-color: white;
-  --sqm-border-thickness: 1px;
-
-  --sqm-accent-color-icon: #1ed760;       
-  --sqm-accent-color-text: #ffffff;     
-  --sqm-accent-color-border: #1db954;
-  --sqm-accent-color-background: #0d4a27;
-
-  --sqm-success-color-icon: var(--sl-color-success-600);
-  --sqm-success-color-text: var(--sl-color-success-950);
-  --sqm-success-color-border: var(--sl-color-success-400);
-  --sqm-success-color-background: var(--sl-color-success-300);
+  --sqm-border-radius-normal: ${((_3 = (_2 = window.SquatchBrandingConfig) === null || _2 === void 0 ? void 0 : _2.border) === null || _3 === void 0 ? void 0 : _3.radius) || "18px"}; 
+  --sqm-border-color: ${((_5 = (_4 = window.SquatchBrandingConfig) === null || _4 === void 0 ? void 0 : _4.border) === null || _5 === void 0 ? void 0 : _5.color) || "white"};
+
+  --sqm-border-thickness: ${((_7 = (_6 = window.SquatchBrandingConfig) === null || _6 === void 0 ? void 0 : _6.border) === null || _7 === void 0 ? void 0 : _7.thickness) || "1px"};
+
+  --sqm-accent-color-icon: ${((_10 = (_9 = (_8 = window.SquatchBrandingConfig) === null || _8 === void 0 ? void 0 : _8.color) === null || _9 === void 0 ? void 0 : _9.accentColorShades) === null || _10 === void 0 ? void 0 : _10.iconAndBadge) ||
+  "#1ed760"};
+  --sqm-accent-color-text: ${((_13 = (_12 = (_11 = window.SquatchBrandingConfig) === null || _11 === void 0 ? void 0 : _11.color) === null || _12 === void 0 ? void 0 : _12.accentColorShades) === null || _13 === void 0 ? void 0 : _13.text) || "#fff"};    
+  --sqm-accent-color-border: ${((_16 = (_15 = (_14 = window.SquatchBrandingConfig) === null || _14 === void 0 ? void 0 : _14.color) === null || _15 === void 0 ? void 0 : _15.accentColorShades) === null || _16 === void 0 ? void 0 : _16.border) || "#1ed760"};
+  --sqm-accent-color-background: ${((_19 = (_18 = (_17 = window.SquatchBrandingConfig) === null || _17 === void 0 ? void 0 : _17.color) === null || _18 === void 0 ? void 0 : _18.accentColorShades) === null || _19 === void 0 ? void 0 : _19.background) ||
+  "#0d4a27"};
+
+  --sqm-success-color-icon: ${((_22 = (_21 = (_20 = window.SquatchBrandingConfig) === null || _20 === void 0 ? void 0 : _20.color) === null || _21 === void 0 ? void 0 : _21.success) === null || _22 === void 0 ? void 0 : _22.iconAndBadge) ||
+  "var(--sl-color-success-600)"};
+  --sqm-success-color-text: ${((_25 = (_24 = (_23 = window.SquatchBrandingConfig) === null || _23 === void 0 ? void 0 : _23.color) === null || _24 === void 0 ? void 0 : _24.success) === null || _25 === void 0 ? void 0 : _25.text) ||
+  "var(--sl-color-success-950)"};
+  --sqm-success-color-border: ${((_28 = (_27 = (_26 = window.SquatchBrandingConfig) === null || _26 === void 0 ? void 0 : _26.color) === null || _27 === void 0 ? void 0 : _27.success) === null || _28 === void 0 ? void 0 : _28.border) ||
+  "var(--sl-color-success-400)"};
+  --sqm-success-color-background: ${((_31 = (_30 = (_29 = window.SquatchBrandingConfig) === null || _29 === void 0 ? void 0 : _29.color) === null || _30 === void 0 ? void 0 : _30.success) === null || _31 === void 0 ? void 0 : _31.background) ||
+  "var(--sl-color-success-300)"};
   
-  --sqm-warning-color-icon: var(--sl-color-warning-600);
-  --sqm-warning-color-text: var(--sl-color-warning-950);
-  --sqm-warning-color-border: var(--sl-color-warning-400);
-  --sqm-warning-color-background: var(--sl-color-warning-300);
-
-  --sqm-danger-color-icon: var(--sl-color-danger-600);
-  --sqm-danger-color-text: var(--sl-color-danger-950);
-  --sqm-danger-color-border: var(--sl-color-danger-400);
-  --sqm-danger-color-background: var(--sl-color-danger-300);
-
-  --sqm-informative-color-icon: var(--sl-color-sky-600);
-  --sqm-informative-color-text: var(--sl-color-sky-950);
-  --sqm-informative-color-border: var(--sl-color-sky-400);
-  --sqm-informative-color-background: var(--sl-color-sky-300);
-
-  --sqm-input-background: #121212;
-  --sqm-input-border: 1px solid #7c7c7c;
-  --sqm-input-border-color: #7c7c7c;
-  --sqm-input-border-radius: 30px;
-  --sqm-input-color: var(--sqm-text);
-  --sqm-input-focus-border: 1px solid white;
-  --sqm-input-label-color: white;
-  --sqm-border-width: 1px;
-  --sqm-border-color-focus: white;
-  --sqm-border-color-hover: white;
-  --sqm-input-label-font-size: white;
-  --sqm-input-disabled-color: white;
-  --sqm-input-disabled-background: #303030;
+  --sqm-warning-color-icon: ${((_34 = (_33 = (_32 = window.SquatchBrandingConfig) === null || _32 === void 0 ? void 0 : _32.color) === null || _33 === void 0 ? void 0 : _33.warning) === null || _34 === void 0 ? void 0 : _34.iconAndBadge) ||
+  "var(--sl-color-warning-600)"};
+  --sqm-warning-color-text: ${((_37 = (_36 = (_35 = window.SquatchBrandingConfig) === null || _35 === void 0 ? void 0 : _35.color) === null || _36 === void 0 ? void 0 : _36.warning) === null || _37 === void 0 ? void 0 : _37.text) ||
+  "var(--sl-color-warning-950)"};
+  --sqm-warning-color-border: ${((_40 = (_39 = (_38 = window.SquatchBrandingConfig) === null || _38 === void 0 ? void 0 : _38.color) === null || _39 === void 0 ? void 0 : _39.warning) === null || _40 === void 0 ? void 0 : _40.border) ||
+  "var(--sl-color-warning-400)"};
+  --sqm-warning-color-background: ${((_43 = (_42 = (_41 = window.SquatchBrandingConfig) === null || _41 === void 0 ? void 0 : _41.color) === null || _42 === void 0 ? void 0 : _42.warning) === null || _43 === void 0 ? void 0 : _43.background) ||
+  "var(--sl-color-warning-300)"};
+
+  --sqm-danger-color-icon: ${((_46 = (_45 = (_44 = window.SquatchBrandingConfig) === null || _44 === void 0 ? void 0 : _44.color) === null || _45 === void 0 ? void 0 : _45.critical) === null || _46 === void 0 ? void 0 : _46.iconAndBadge) ||
+  "var(--sl-color-danger-600)"};
+  --sqm-danger-color-text: ${((_49 = (_48 = (_47 = window.SquatchBrandingConfig) === null || _47 === void 0 ? void 0 : _47.color) === null || _48 === void 0 ? void 0 : _48.critical) === null || _49 === void 0 ? void 0 : _49.text) ||
+  "var(--sl-color-danger-950)"};
+  --sqm-danger-color-border: ${((_52 = (_51 = (_50 = window.SquatchBrandingConfig) === null || _50 === void 0 ? void 0 : _50.color) === null || _51 === void 0 ? void 0 : _51.critical) === null || _52 === void 0 ? void 0 : _52.border) ||
+  "var(--sl-color-danger-400)"};
+  --sqm-danger-color-background: ${((_55 = (_54 = (_53 = window.SquatchBrandingConfig) === null || _53 === void 0 ? void 0 : _53.color) === null || _54 === void 0 ? void 0 : _54.critical) === null || _55 === void 0 ? void 0 : _55.background) ||
+  "var(--sl-color-danger-300)"};
+
+  --sqm-informative-color-icon: ${((_58 = (_57 = (_56 = window.SquatchBrandingConfig) === null || _56 === void 0 ? void 0 : _56.color) === null || _57 === void 0 ? void 0 : _57.informative) === null || _58 === void 0 ? void 0 : _58.iconAndBadge) ||
+  "var(--sl-color-sky-600)"};
+  --sqm-informative-color-text: ${((_61 = (_60 = (_59 = window.SquatchBrandingConfig) === null || _59 === void 0 ? void 0 : _59.color) === null || _60 === void 0 ? void 0 : _60.informative) === null || _61 === void 0 ? void 0 : _61.text) ||
+  "var(--sl-color-sky-950)"};
+  --sqm-informative-color-border: ${((_64 = (_63 = (_62 = window.SquatchBrandingConfig) === null || _62 === void 0 ? void 0 : _62.color) === null || _63 === void 0 ? void 0 : _63.informative) === null || _64 === void 0 ? void 0 : _64.border) ||
+  "var(--sl-color-sky-400)"};
+  --sqm-informative-color-background: ${((_67 = (_66 = (_65 = window.SquatchBrandingConfig) === null || _65 === void 0 ? void 0 : _65.color) === null || _66 === void 0 ? void 0 : _66.informative) === null || _67 === void 0 ? void 0 : _67.background) ||
+  "var(--sl-color-sky-300)"};
+
+  --sqm-input-background: ${((_69 = (_68 = window.SquatchBrandingConfig) === null || _68 === void 0 ? void 0 : _68.inputs) === null || _69 === void 0 ? void 0 : _69.background) || "#fff"};
+  --sqm-input-border-color: ${((_71 = (_70 = window.SquatchBrandingConfig) === null || _70 === void 0 ? void 0 : _70.inputs) === null || _71 === void 0 ? void 0 : _71.borderColor) || "#eaeaea"};
+  --sqm-input-border-radius: ${((_73 = (_72 = window.SquatchBrandingConfig) === null || _72 === void 0 ? void 0 : _72.inputs) === null || _73 === void 0 ? void 0 : _73.borderRadius) || "4px"};
+  --sqm-input-color: ${((_75 = (_74 = window.SquatchBrandingConfig) === null || _74 === void 0 ? void 0 : _74.inputs) === null || _75 === void 0 ? void 0 : _75.textColor) || "#000"};
+  --sqm-input-label-color: ${((_77 = (_76 = window.SquatchBrandingConfig) === null || _76 === void 0 ? void 0 : _76.inputs) === null || _77 === void 0 ? void 0 : _77.labelColor) || "#000"};
+  --sqm-border-width: ${((_79 = (_78 = window.SquatchBrandingConfig) === null || _78 === void 0 ? void 0 : _78.inputs) === null || _79 === void 0 ? void 0 : _79.borderThickness) || "1px"};
+  --sqm-border-color-focus: ${((_81 = (_80 = window.SquatchBrandingConfig) === null || _80 === void 0 ? void 0 : _80.inputs) === null || _81 === void 0 ? void 0 : _81.focusBorderColor) || "#eaeaea"};
+  --sqm-border-color-hover: ${((_83 = (_82 = window.SquatchBrandingConfig) === null || _82 === void 0 ? void 0 : _82.inputs) === null || _83 === void 0 ? void 0 : _83.hoverBorderColor) || "#ccc"};
+  --sqm-input-label-font-size: ${((_85 = (_84 = window.SquatchBrandingConfig) === null || _84 === void 0 ? void 0 : _84.inputs) === null || _85 === void 0 ? void 0 : _85.labelFontSize) || "18px"};
+  --sqm-input-disabled-color: ${((_87 = (_86 = window.SquatchBrandingConfig) === null || _86 === void 0 ? void 0 : _86.inputs) === null || _87 === void 0 ? void 0 : _87.labelFontSize) || "#fff"};
+  --sqm-input-disabled-background: ${((_89 = (_88 = window.SquatchBrandingConfig) === null || _88 === void 0 ? void 0 : _88.inputs) === null || _89 === void 0 ? void 0 : _89.disabledBackground) || "#fff"};
 
   --sl-input-border-radius-medium: var(--sqm-input-border-radius, var(--sqm-border-radius-normal));
-  --sl-input-color-hover: var(--sqm-input-color);
-  --sl-input-color-focus: var(--sqm-input-color);
+  --sl-input-color-hover: var(--sqm-input-color-hover);
+  --sl-input-color-focus: var(--sqm-input-color-focus);
   --sl-input-color-disabled: var(--sqm-input-disabled-color);
   --sl-input-border-color-disabled: #7c7c7c;
   --sl-input-border-color-focus: var(--sqm-input-border-color-focus, white);
@@ -26590,47 +26608,19 @@ html {
 }
 
 body {
-  font-family: var(--sl-font-sans);
+  font-family: ${window.SquatchBrandingConfig.font.font || "var(--sl-font-sans)"};
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
   letter-spacing: var(--sl-letter-spacing-small);
   color: var(--sqm-text);
   line-height: var(--sl-line-height-normal);
   margin: 0;
-  background-color: var(--sqm-portal-background);
-}
-
-sqm-tabs::part(active-tab-indicator) {
-  border: red;
-  :root {
-    --tabs-border-color: pink;
-  
-  }
-}
-
-sl-tab-group::part(nav) {
-  border-bottom: 1px solid blue; /* Emphasize the separator */
-}
-
-sl-tab-group {
-  /* Set the active tab indicator color to Spotify Green */
-  --indicator-color: #1db954; 
-
-  /* Set the border color separating tabs from content */
-  --sl-tab-group-border-color: #333333; 
-
-  /* You might also want to adjust the nav area's background */
-  background-color: #1a1a1a; /* Dark background for the entire group or just the nav */
-  border-radius: 8px; /* Rounded corners for the entire tab group */
-  padding: 1rem; /* Adjust overall padding */
+  background-color: var(--sqm-portal-background) !important;
 }
 
-sl-tab::part(base)[active] {
-  /* You can add a top/left/right border to the active tab button itself if desired */
-  /* For a look like your previous input fields, you might want to mimic that border. */
-  border: 1px solid #1db954; /* Spotify Green border */
-  border-bottom-color: transparent; /* Hide the bottom border to let the indicator show */
-  border-radius: 4px 4px 0 0; /* Keep top corners rounded */
+.story-div {
+  background: var(--sqm-portal-background) !important;
+  color: var(--sqm-text) !important;
 }
 
 sl-spinner {
@@ -26718,10 +26708,6 @@ h1, h2, h3, h4{
   line-height: var(--sl-line-height-dense);
 }
 
-sl-button::part(base){
-  width: 100%;
-}
-
 sqm-share-button{
   flex: 1;
 }
@@ -26733,7 +26719,7 @@ sqm-hero img {
 
 sl-details::part(base){
   background-color: inherit;
-  border-color: var(--sqm-border-color)
+  border-color: var(--sqm-border-color);
 }
 
 sl-details::part(summary) {
@@ -26743,7 +26729,8 @@ sl-details::part(summary) {
 }
 
 *::part(primarybutton-base){
-  background-color: var(--sqm-primary-button-background);
+  width: 100%;
+  background-color: var(--sqm-primary-button-background) !important;
   color: var(--sqm-primary-button-color);
   border-color: var(--sqm-primary-button-color-border);
   border-radius: var(--sqm-primary-button-radius);
@@ -26773,7 +26760,7 @@ sl-details::part(summary) {
   color: var(--sqm-tertiary-button-color);
   border-color: var(--sqm-tertiary-button-color-border);
   border-radius: var(--sqm-tertiary-button-radius);
-  width: max-content;
+  width: 100%;
   display: flex;
   margin: auto;
 }
@@ -26795,6 +26782,14 @@ sl-details::part(summary) {
   border-width: var(--sqm-border-width, 1px);
 }
 
+*::part(input-base):hover, *::part(select-base):hover, *::part(textarea-base):hover{
+  border-color: var(--sqm-border-color-hover);
+}
+
+*::part(input-base):focus, *::part(select-base):focus, *::part(textarea-base):focus{
+  border-color: var(--sqm-border-color-focus);
+}
+
 sqm-name-fields::part(input-base) {
   background-color: var(--sqm-input-background, #fff);
   border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
@@ -26805,8 +26800,7 @@ sqm-name-fields::part(input-base) {
 sl-input::part(base):focus,
 sl-select::part(form-control-wrapper):focus,
 sl-textarea::part(textarea-label):focus {
-  border-color: none;
-  border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
+  border-color: var(--sqm-border-color-focus);
 }
 
 *::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{

package/dist/cjs/{index-a29c60ef.js → index-a43a63b4.js}

@@ -1134,6 +1134,7 @@ const postUpdateComponent = (hostRef) => {
     const tagName = hostRef.$cmpMeta$.$tagName$;
     const elm = hostRef.$hostElement$;
     const endPostUpdate = createTime('postUpdate', tagName);
+    const instance =  hostRef.$lazyInstance$ ;
     const ancestorComponent = hostRef.$ancestorComponent$;
     if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* hasLoadedComponent */;
@@ -1141,6 +1142,9 @@ const postUpdateComponent = (hostRef) => {
             // DOM WRITE!
             addHydratedFlag(elm);
         }
+        {
+            safeCall(instance, 'componentDidLoad');
+        }
         endPostUpdate();
         {
             hostRef.$onReadyResolve$(elm);

package/dist/cjs/{index.module-ee84433d.js → index.module-39955732.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
 
 const useCallback = (fn, inputs) => stencilHooks_module.useMemo(() => fn, inputs);