@saasquatch/mint-components 1.15.0-45 → 1.15.0-47

package/dist/collection/components/sqm-stencilbook/Themes.js

@@ -9,53 +9,44 @@
  *  - Shoelace color generator: https://codepen.io/claviska/full/QWveRgL
  *
  */
-//
+// @ts-nocheck
 export const Default = null;
 export const Netflix = {
-  font: {
-    font: "Netflix Sans, Arial, sans-serif",
-    textColor: "white",
-    secondaryTextColor: "#B3B3B3",
-  },
-  border: {
-    color: "#333333",
-    radius: "4px",
-    thickness: "1px",
+  main: {
+    brandFont: "Netflix Sans, Arial, sans-serif",
   },
   color: {
-    primaryColor: "#E50914",
-    background: "#101010",
+    textColorShades: {
+      mainText: "white",
+      subduedText: "#B3B3B3",
+    },
+    backgroundColor: "#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",
@@ -69,85 +60,75 @@ export const Netflix = {
     },
   },
   primaryButton: {
-    buttonColor: "#E50914",
-    buttonTextColor: "#FFFFFF",
-    borderRadius: "4px",
-    buttonBorderColor: "transparent",
-    hoverColor: "#CC0000",
-    hoverTextColor: "#FFFFFF",
+    buttonColor: {
+      background: "#E50914",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#CC0000",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
   },
   secondaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#FFFFFF",
-    buttonBorderColor: "#B3B3B3",
-    borderRadius: "4px",
-    hoverColor: "#333333",
-    hoverTextColor: "#FFFFFF",
-  },
-  tertiaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#FFFFFF",
-    borderRadius: "4px",
+    buttonColor: {
+      background: "transparent",
+      border: "#B3B3B3",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#333333",
+      border: "#B3B3B3",
+      label: "#FFFFFF",
+    },
   },
-  inputs: {
-    background: "#222222",
-    borderColor: "#B3B3B3",
-    borderRadius: "4px",
-    textColor: "white",
-    labelColor: "#B3B3B3",
-    borderThickness: "1px",
-    disabledBackground: "#333333",
-    disabledTextColor: "#777777",
-    labelFontSize: "14px",
-    focusBorderColor: "#E50914",
-    hoverBorderColor: "#777777",
+  formFields: {
+    formFieldColor: {
+      background: "#222222",
+      border: "#B3B3B3",
+      inputText: "#B3B3B3",
+    },
+    hoverStateColor: "#777777",
+    selectedStateColor: "#E50914",
   },
 };
 export const Amazon = {
-  font: {
-    font: "Amazon Ember, Arial, sans-serif",
-    textColor: "#2f2f2f",
-    secondaryTextColor: "#565959",
-  },
-  border: {
-    color: "#d5d9d9",
-    radius: "4px",
-    thickness: "1px",
+  main: {
+    brandFont: "Amazon Ember, Arial, sans-serif",
   },
   color: {
-    primaryColor: "#FF9900",
-    background: "#ffffff",
+    backgroundColor: "#ffffff",
+    textColorShades: {
+      mainText: "#2f2f2f",
+      subduedText: "#565959",
+    },
     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",
@@ -161,89 +142,97 @@ export const Amazon = {
     },
   },
   primaryButton: {
-    buttonColor: "#FF9900",
-    buttonTextColor: "#FFFFFF",
-    borderRadius: "7px",
-    buttonBorderColor: "transparent",
-    hoverColor: "#EB9100",
-    hoverTextColor: "#FFFFFF",
+    buttonColor: {
+      background: "#FF9900",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#EB9100",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
   },
   secondaryButton: {
-    buttonColor: "#FFFFFF",
-    buttonTextColor: "#232F3E",
-    buttonBorderColor: "#888C8C",
-    borderRadius: "7px",
-    hoverColor: "#F0F2F2",
-    hoverTextColor: "#232F3E",
-  },
-  tertiaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#007185",
-    borderRadius: "7px",
+    buttonColor: {
+      background: "#FFFFFF",
+      border: "#888C8C",
+      label: "#232F3E",
+    },
+    buttonHoverColor: {
+      background: "#F0F2F2",
+      border: "#888C8C",
+      label: "#232F3E",
+    },
   },
-  inputs: {
-    background: "#FFFFFF",
-    borderColor: "#D5D9D9",
-    borderRadius: "3px",
-    textColor: "#2f2f2f",
-    labelColor: "#565959",
-    borderThickness: "1px",
-    disabledBackground: "#EAEDED",
-    disabledTextColor: "#888C8C",
-    labelFontSize: "14px",
-    focusBorderColor: "#007185",
-    hoverBorderColor: "#A2A2A2",
+  formFields: {
+    formFieldColor: {
+      background: "#FFFFFF",
+      border: "#D5D9D9",
+      inputText: "#2f2f2f",
+    },
+    hoverStateColor: "#A2A2A2",
+    selectedStateColor: "#007185",
   },
 };
 export const Spotify = {
-  font: {
-    textColor: "white",
-  },
   color: {
-    background: "#121212",
+    textColorShades: {
+      mainText: "white",
+      subduedText: "white",
+    },
+    backgroundColor: "#121212",
     accentColorShades: {
-      iconAndBadge: "#1ed760",
+      icon: "#1ed760",
     },
   },
   primaryButton: {
-    buttonColor: "#1ed760",
-    buttonTextColor: "#121212",
-    borderRadius: "30px",
-    buttonBorderColor: "transparent",
-    hoverColor: "#1DB954",
-    hoverTextColor: "#121212",
+    buttonColor: {
+      background: "#1ed760",
+      border: "transparent",
+      label: "#121212",
+    },
+    buttonHoverColor: {
+      background: "#1DB954",
+      border: "transparent",
+      label: "#121212",
+    },
   },
   secondaryButton: {
-    buttonColor: "#191414",
-    buttonTextColor: "#FFFFFF",
-    buttonBorderColor: "#FFFFFF",
-    borderRadius: "30px",
-    hoverColor: "#282828",
-    hoverTextColor: "#121212",
+    buttonColor: {
+      background: "#191414",
+      border: "#FFFFFF",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#282828",
+      border: "#FFFFFF",
+      label: "#121212",
+    },
   },
-  inputs: {
-    background: "#121212",
-    borderColor: "#7c7c7c",
-    borderThickness: "1px",
-    borderRadius: "30px",
-    textColor: "#fff",
-    focusBorderColor: "white",
-    labelColor: "white",
-    hoverBorderColor: "white",
-    labelFontSize: "18px",
-    disabledTextColor: "white",
-    disabledBackground: "#303030",
+  formFields: {
+    formFieldColor: {
+      background: "#121212",
+      border: "#7c7c7c",
+      inputText: "#fff",
+    },
+    hoverStateColor: "white",
+    selectedStateColor: "white",
   },
 };
 export const Google = {
+  main: { brandColor: "#4285F4", brandFont: "Roboto, Arial, sans-serif" },
   color: {
-    primaryColor: "#4285F4",
-    background: "#FFFFFF",
+    textColorShades: {
+      mainText: "#212124",
+      subduedText: "#5F6368",
+    },
+    backgroundColor: "#FFFFFF",
     accentColorShades: {
       text: "#1A73E8",
       border: "#8AB4F8",
       background: "#E8F0FE",
-      iconAndBadge: "#4285F4",
+      icon: "#4285F4",
     },
     success: {
       text: "#044e1d",
@@ -276,48 +265,37 @@ export const Google = {
       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",
+    buttonColor: {
+      background: "#4285F4",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
+    buttonHoverColor: {
+      background: "#3C7CD1",
+      border: "transparent",
+      label: "#FFFFFF",
+    },
   },
   secondaryButton: {
-    buttonColor: "#FFFFFF",
-    buttonTextColor: "#4285F4",
-    buttonBorderColor: "#DADCE0",
-    borderRadius: "4px",
-    hoverColor: "#E8F0FE",
-    hoverTextColor: "#4285F4",
-  },
-  tertiaryButton: {
-    buttonColor: "transparent",
-    buttonTextColor: "#4285F4",
-    borderRadius: "4px",
+    buttonColor: {
+      background: "#FFFFFF",
+      border: "#DADCE0",
+      label: "#4285F4",
+    },
+    buttonHoverColor: {
+      background: "#E8F0FE",
+      border: "#DADCE0",
+      label: "#4285F4",
+    },
   },
-  inputs: {
-    background: "#FFFFFF",
-    borderColor: "#DADCE0",
-    borderThickness: "1px",
-    borderRadius: "8px",
-    textColor: "#202124",
-    focusBorderColor: "#4285F4",
-    labelColor: "#5F6368",
-    hoverBorderColor: "#9AA0A6",
-    labelFontSize: "12px",
-    disabledTextColor: "#9AA0A6",
-    disabledBackground: "#F1F3F4",
+  formFields: {
+    formFieldColor: {
+      background: "#FFFFFF",
+      border: "#DADCE0",
+      inputText: "#202124",
+    },
+    hoverStateColor: "9AA0A6",
+    selectedStateColor: "4285F4",
   },
 };

package/dist/collection/global/styles.js

@@ -70,7 +70,7 @@
   --teal-6: #0b6270;
   --teal-7: #004551;
 } */
-var _a, _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;
+var _a, _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;
 const style = `
 /* vietnamese */
 @font-face {
@@ -725,7 +725,7 @@ html {
 }
 
 body {
-  font-family: ${((_88 = window.SquatchBrandingConfig.main) === null || _88 === void 0 ? void 0 : _88.brandFont) || "var(--sl-font-sans)"};
+  font-family: ${((_89 = (_88 = window.SquatchBrandingConfig) === null || _88 === void 0 ? void 0 : _88.main) === null || _89 === void 0 ? void 0 : _89.brandFont) || "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);

package/dist/collection/global/styles.ts

@@ -821,7 +821,7 @@ html {
 
 body {
   font-family: ${
-    window.SquatchBrandingConfig.main?.brandFont || "var(--sl-font-sans)"
+    window.SquatchBrandingConfig?.main?.brandFont || "var(--sl-font-sans)"
   };
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);

package/dist/collection/stories/PortalTemplates.stories.js

@@ -1,34 +1,26 @@
 import { useState } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
 import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+import activityTemplate from "../templates/Activity.html";
+import dashboardTemplate from "../templates/Dashboard.html";
+import editProfileTemplate from "../templates/EditProfile.html";
+import emailVerificationTemplate from "../templates/EmailVerification.html";
+import emailVerifiedTemplate from "../templates/EmailVerified.html";
+import forgotPasswordTemplate from "../templates/ForgotPassword.html";
+import leadSubmitTemplate from "../templates/LeadSubmit.html";
+import loginTemplate from "../templates/Login.html";
+import multiProgramTemplate from "../templates/MultiProgramPortal.html";
+import multiProgramTemplateWithDashboard from "../templates/MultiProgramPortalWithDashboard.html";
 import portalTemplate from "../templates/Portal.html";
 import portalLeadSubmitTemplate from "../templates/PortalLeadSubmit.html";
-import taxAndCashTemplate from "../templates/TaxAndCash.html";
 import portalLeadSubmitTemplateWithDashboard from "../templates/PortalLeadSubmitWithDashboard.html";
 import portalTemplateWithDashboard from "../templates/PortalWithDashboard.html";
-import multiProgramTemplate from "../templates/MultiProgramPortal.html";
-import multiProgramTemplateWithDashboard from "../templates/MultiProgramPortalWithDashboard.html";
-import dashboardTemplate from "../templates/Dashboard.html";
-import leadSubmitTemplate from "../templates/LeadSubmit.html";
-import editProfileTemplate from "../templates/EditProfile.html";
-import activityTemplate from "../templates/Activity.html";
-import resetPasswordEmailTemplate from "../templates/ResetPasswordEmail.html";
-import verifyEmailTemplate from "../templates/VerifyEmail.html";
-import taxPayoutReminderEmailTemplate from "../templates/TaxPayoutReminderEmail.html";
-import loginTemplate from "../templates/Login.html";
 import registerTemplate from "../templates/Register.html";
-import forgotPasswordTemplate from "../templates/ForgotPassword.html";
 import resetPasswordTemplate from "../templates/ResetPassword.html";
-import emailVerifiedTemplate from "../templates/EmailVerified.html";
-import emailVerificationTemplate from "../templates/EmailVerification.html";
-import LoginReadme from "../components/sqm-portal-login/readme.md";
-import ReferralIframeReadme from "../components/sqm-referral-iframe/readme.md";
-import ForgotPasswordReadme from "../components/sqm-portal-forgot-password/readme.md";
-import RegisterReadme from "../components/sqm-portal-register/readme.md";
-import EditProfileReadme from "../components/sqm-portal-profile/readme.md";
-import ResetPasswordReadme from "../components/sqm-portal-reset-password/readme.md";
-import EmailVerificationReadme from "../components/sqm-portal-email-verification/readme.md";
-import EmailVerifiedReadme from "../components/sqm-portal-verify-email/readme.md";
+import resetPasswordEmailTemplate from "../templates/ResetPasswordEmail.html";
+import taxAndCashTemplate from "../templates/TaxAndCash.html";
+import taxPayoutReminderEmailTemplate from "../templates/TaxPayoutReminderEmail.html";
+import verifyEmailTemplate from "../templates/VerifyEmail.html";
 import { DefaultTemplateView } from "../utils/DefaultTemplateView";
 import { TemplateView } from "../utils/TemplateView";
 export default {
@@ -60,15 +52,15 @@ export const TaxAndCash = createHookStory(() => {
 });
 export const Login = createHookStory(() => {
   const { states, callbacks } = useTemplate(loginTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: LoginReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const ForgotPassword = createHookStory(() => {
   const { states, callbacks } = useTemplate(forgotPasswordTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: ForgotPasswordReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const Register = createHookStory(() => {
   const { states, callbacks } = useTemplate(registerTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: RegisterReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const Dashboard = createHookStory(() => {
   const { states, callbacks } = useTemplate(dashboardTemplate);
@@ -76,7 +68,7 @@ export const Dashboard = createHookStory(() => {
 });
 export const LeadSubmitIframe = createHookStory(() => {
   const { states, callbacks } = useTemplate(leadSubmitTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: ReferralIframeReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const Activity = createHookStory(() => {
   const { states, callbacks } = useTemplate(activityTemplate);
@@ -84,19 +76,19 @@ export const Activity = createHookStory(() => {
 });
 export const EditProfile = createHookStory(() => {
   const { states, callbacks } = useTemplate(editProfileTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: EditProfileReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const ResetPassword = createHookStory(() => {
   const { states, callbacks } = useTemplate(resetPasswordTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: ResetPasswordReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const EmailVerification = createHookStory(() => {
   const { states, callbacks } = useTemplate(emailVerificationTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: EmailVerificationReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const EmailVerified = createHookStory(() => {
   const { states, callbacks } = useTemplate(emailVerifiedTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: EmailVerifiedReadme }));
+  return h(TemplateView, { states: states, callbacks: callbacks });
 });
 export const Widget = createHookStory(() => {
   return (h("sqb-widget", { "widget-type": "p/Vacay-referral/w/referrerWidget", demoData: {

package/dist/esm/{IndirectTaxDetailsView-89731480.js → IndirectTaxDetailsView-7c8fb28e.js}

@@ -1,7 +1,7 @@
 import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-f33bb903.js';
+import { i as intl } from './global-28b9c531.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { f as formatErrorMessage } from './utils-79d81bca.js';
+import { f as formatErrorMessage } from './utils-0dc9e217.js';
 
 const style = {
   Description: {

package/dist/esm/{ShadowViewAddon-b439f9c5.js → ShadowViewAddon-fe5ada08.js}

@@ -1,6 +1,6 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-b3a06de8.js';
 import { b as browser, u as useMemo, k as useState } from './stencil-hooks.module-20ad2b5f.js';
-import { i as intl } from './global-f33bb903.js';
+import { i as intl } from './global-28b9c531.js';
 import { H, L, J, d as dist, w as wn, F as Fn, $ as $e, B, g as getEnvironmentSDK } from './index.module-d49ae5e7.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';

package/dist/esm/{global-f33bb903.js → global-28b9c531.js}

@@ -25974,7 +25974,7 @@ 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;
+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;
 const style = `
 /* vietnamese */
 @font-face {
@@ -26629,7 +26629,7 @@ html {
 }
 
 body {
-  font-family: ${((_88 = window.SquatchBrandingConfig.main) === null || _88 === void 0 ? void 0 : _88.brandFont) || "var(--sl-font-sans)"};
+  font-family: ${((_89 = (_88 = window.SquatchBrandingConfig) === null || _88 === void 0 ? void 0 : _88.main) === null || _89 === void 0 ? void 0 : _89.brandFont) || "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);