@saasquatch/mint-components 1.15.0-62 → 1.15.0-64

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.js

@@ -1,54 +1,26 @@
 import { h } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
+import { capitalizeFirstLetter } from "../../../utils/utils";
 const style = {
-  ErrorAlertContainer: {
+  DangerBadge: {
     "&::part(base)": {
-      backgroundColor: "var(--sqm-danger-color-background)",
-      border: "none",
-    },
-    "& sl-icon::part(base)": {
+      backgroundColor: "var(--sqm-danger-color-icon)",
       color: "var(--sqm-danger-color-text)",
     },
   },
-  WarningAlertContainer: {
+  SuccessBadge: {
     "&::part(base)": {
-      backgroundColor: "var(--sqm-warning-color-background)",
-      border: "none",
-      maxWidth: "600px",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sqm-warning-color-text)",
+      backgroundColor: "var(--sqm-success-color-icon)",
+      color: "var(--sqm-success-color-text)",
     },
   },
-  WarningHoldAlertContainer: {
-    marginLeft: "-20px",
+  WarningBadge: {
     "&::part(base)": {
-      maxWidth: "850px",
-      border: "none",
-      backgroundColor: "transparent",
-    },
-    "& sl-icon::part(base)": {
+      backgroundColor: "var(--sqm-warning-color-icon)",
       color: "var(--sqm-warning-color-text)",
     },
   },
-  ErrorHoldAlertContainer: {
-    marginLeft: "-20px",
-    "&::part(base)": {
-      maxWidth: "850px",
-      border: "none",
-      backgroundColor: "transparent",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sqm-danger-color-icon)",
-    },
-  },
-  ExpiringSoonAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sqm-warning-color-background)",
-      border: "none",
-    },
-  },
   BankingInformationContainer: {
     maxWidth: "700px",
   },
@@ -164,18 +136,56 @@ const style = {
     fontSize: "var(--sl-font-size-medium)",
     marginTop: "0",
   },
+  WarningButton: {
+    "&::part(base)": {
+      marginTop: "20px",
+      borderColor: "var(--sqm-warning-color-border)",
+      color: "var(--sqm-warning-color-text)",
+      background: "var(--sqm-warning-color-background)",
+      "&:hover": {
+        background: "var(--sqm-warning-color-icon)",
+      },
+    },
+  },
+  ErrorButton: {
+    "&::part(base)": {
+      marginTop: "20px",
+      borderColor: "var(--sqm-danger-color-border)",
+      color: "var(--sqm-danger-color-text)",
+      background: "var(--sqm-danger-color-background)",
+      "&:hover": {
+        background: "var(--sqm-danger-color-icon)",
+      },
+    },
+  },
+  SuccessButton: {
+    "&::part(base)": {
+      marginTop: "20px",
+      borderColor: "var(--sqm-success-color-border)",
+      color: "var(--sqm-success-color-text)",
+      background: "var(--sqm-success-color-background)",
+      "&:hover": {
+        background: "var(--sqm-success-color-icon)",
+      },
+    },
+  },
   Dialog: {
     "&::part(panel)": {
       maxWidth: "420px",
     },
+    "&::part(header)": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      paddingTop: "var(--sl-spacing-large)",
+    },
     "&::part(close-button)": {
       marginBottom: "var(--sl-spacing-xx-large)",
     },
     "&::part(title)": {
-      fontSize: "var(--sl-font-size-x-large)",
+      fontSize: "var(--sl-font-size-large)",
       fontWeight: "600",
-      marginTop: "var(--sl-spacing-xxx-large)",
-      padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+      padding: "0px var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
     },
     "&::part(body)": {
       padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
@@ -192,10 +202,20 @@ const style = {
   },
   DialogButton: { margin: "auto", width: "100%" },
 };
+const vanillaStyle = `
+  * {
+    font-family: var(--sqm-primary-font);
+    }
+  a {
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export const TaxAndCashDashboardView = (props) => {
-  var _a, _b, _c, _d;
+  var _a;
   const { states, text, callbacks, slots } = props;
   function getAlert(status) {
     switch (status) {
@@ -210,8 +230,6 @@ export const TaxAndCashDashboardView = (props) => {
           }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:INTERNAL":
         return {
@@ -223,8 +241,6 @@ export const TaxAndCashDashboardView = (props) => {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:REVIEW":
         return {
@@ -236,8 +252,6 @@ export const TaxAndCashDashboardView = (props) => {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:FAILED":
         return {
@@ -248,9 +262,7 @@ export const TaxAndCashDashboardView = (props) => {
           }, {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
-          alertType: "critical",
-          icon: "exclamation-octagon",
-          class: sheet.classes.ErrorHoldAlertContainer,
+          alertType: "error",
         };
       case "HOLD":
         return {
@@ -263,8 +275,6 @@ export const TaxAndCashDashboardView = (props) => {
           }),
           buttonText: null,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningHoldAlertContainer,
         };
       default:
         return;
@@ -272,7 +282,7 @@ export const TaxAndCashDashboardView = (props) => {
   }
   const statusMap = {
     NOT_VERIFIED: (h("div", { class: sheet.classes.TaxFormDetailsContainer },
-      h("sl-badge", { type: "warning", pill: true }, text.statusTextNotVerified),
+      h("sl-badge", { class: sheet.classes.WarningBadge, type: "warning", pill: true }, text.statusTextNotVerified),
       h("p", null, intl.formatMessage({
         id: `badgeTextAwaitingReview`,
         defaultMessage: text.badgeTextAwaitingReview,
@@ -280,7 +290,7 @@ export const TaxAndCashDashboardView = (props) => {
         dateSubmitted: states.dateSubmitted,
       })))),
     ACTIVE: (h("div", { class: sheet.classes.TaxFormDetailsContainer },
-      h("sl-badge", { type: "success", pill: true }, text.statusTextActive),
+      h("sl-badge", { class: sheet.classes.SuccessBadge, type: "success", pill: true }, text.statusTextActive),
       h("p", null, intl.formatMessage({
         id: `badgeTextSubmittedOn`,
         defaultMessage: states.documentType === "W9"
@@ -290,13 +300,12 @@ export const TaxAndCashDashboardView = (props) => {
         dateSubmitted: states.dateSubmitted,
       })))),
     INACTIVE: (h("div", { class: sheet.classes.TaxFormDetailsContainer },
-      h("sl-badge", { type: "danger", pill: true }, text.statusTextNotActive),
+      h("sl-badge", { class: sheet.classes.DangerBadge, type: "danger", pill: true }, text.statusTextNotActive),
       h("p", null, text.invalidForm))),
   };
   const alertMap = {
-    INACTIVE: (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.ErrorAlertContainer },
-      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      h("strong", null, intl.formatMessage({
+    INACTIVE: (h("sqm-form-message", { type: "error" },
+      h("p", { part: "alert-title" }, intl.formatMessage({
         id: `taxAlertHeaderNotActive`,
         defaultMessage: states.documentType === "W9"
           ? text.taxAlertHeaderNotActiveW9
@@ -304,7 +313,6 @@ export const TaxAndCashDashboardView = (props) => {
       }, {
         documentType: states.documentTypeString,
       })),
-      h("br", null),
       intl.formatMessage({
         id: `taxAlertMessage`,
         defaultMessage: states.documentType === "W9"
@@ -342,39 +350,35 @@ export const TaxAndCashDashboardView = (props) => {
       });
     }
   };
+  const alert = getAlert(states.payoutStatus);
   return (h("div", null,
     h("div", null,
       h("style", { type: "text/css" }, styleString),
-      states.loadingError && (h("div", null,
-        h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.ErrorAlertContainer },
-          h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-          h("strong", null, text.error.loadingErrorAlertHeader),
-          h("br", null),
-          intl.formatMessage({
-            id: "loadingErrorAlertDescription",
-            defaultMessage: text.error.loadingErrorAlertDescription,
-          }, {
-            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-          })))),
-      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.ErrorAlertContainer },
-        h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        h("strong", null, text.error.generalTitle),
-        h("br", null),
+      h("style", { type: "text/css" }, vanillaStyle),
+      states.loadingError && (h("sqm-form-message", { type: "error" },
+        h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
+        intl.formatMessage({
+          id: "loadingErrorAlertDescription",
+          defaultMessage: text.error.loadingErrorAlertDescription,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
+      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sqm-form-message", { type: "error" },
+        h("p", { part: "alert-title" }, text.error.generalTitle),
         intl.formatMessage({
           id: "generalDescription",
           defaultMessage: text.error.generalDescription,
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      getAlert(states.payoutStatus) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
-        h("sl-icon", { slot: "icon", name: (_d = getAlert(states.payoutStatus)) === null || _d === void 0 ? void 0 : _d.icon }),
-        h("strong", null, getAlert(states.payoutStatus).header),
-        h("p", { style: { margin: "0" } }, getAlert(states.payoutStatus).description),
-        getAlert(states.payoutStatus).buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, getAlert(states.payoutStatus).buttonText)))),
+      alert && (h("sqm-form-message", { type: alert.alertType },
+        h("p", { part: "alert-title" }, alert.header),
+        h("p", { part: "alert-description" }, alert.description),
+        alert.buttonText && (h("sl-button", { class: sheet.classes[`${capitalizeFirstLetter(alert.alertType)}Button`], loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, alert.buttonText)))),
       h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
         h("p", null, text.replaceTaxFormModalBodyText),
-        h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
-        h("sl-button", { slot: "footer", type: "default", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
+        h("sl-button", { slot: "footer", type: "primary", exportparts: "base: primarybutton-base", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
+        h("sl-button", { slot: "footer", type: "secondary", exportparts: "base: secondarybutton-base", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
       states.status === "INACTIVE" && alertMap[states.status],
       h("div", null,
         h("h3", { style: { marginBottom: "0" } }, text.bankingInformationSectionHeader),
@@ -382,7 +386,7 @@ export const TaxAndCashDashboardView = (props) => {
         h("div", { class: sheet.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,
           !states.loading && (h("p", { class: sheet.classes.DescriptionText }, text.payoutFromImpact)),
-          states.canEditPayoutInfo && (h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
+          states.canEditPayoutInfo && (h("sl-button", { disabled: states.disabled || states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
       h("div", { class: sheet.classes.TaxDocumentsContainer },
         h("div", null, states.loading ? (h("div", { class: sheet.classes.TaxSectionSkeletonContainer },
           h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
@@ -398,7 +402,7 @@ export const TaxAndCashDashboardView = (props) => {
                 documentType: states.documentTypeString,
               })),
               h("span", { class: sheet.classes.StatusAlert }, statusMap[states.status]))),
-          states.status !== "NOT_VERIFIED" && (h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
+          states.status !== "NOT_VERIFIED" && (h("sl-button", { style: { marginTop: "20px" }, disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "primary", exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
       h("div", { class: sheet.classes.IndirectTaxPreviewContainer }, states.loading ? (h("div", { class: sheet.classes.TaxSectionSkeletonContainer },
         h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
         h("sl-skeleton", { class: sheet.classes.SkeletonTwo }))) : (h("div", null,

package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.js

@@ -57,31 +57,6 @@ const style = {
       borderRadius: "50%",
     },
   },
-  AlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sqm-danger-color-background)",
-      border: "none",
-      padding: "0 16px",
-      color: "var(--sqm-danger-color-text)",
-      marginBottom: "16px",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sqm-danger-color-icon)",
-    },
-  },
-  PartnerAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sqm-informative-color-background)",
-      borderTop: "none",
-      padding: "0 16px",
-      border: "none",
-      color: "var(--sqm-informative-color-text)",
-      marginBottom: "16px",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sqm-informative-color-icon)",
-    },
-  },
   PageDescriptionText: {
     color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
@@ -304,17 +279,14 @@ export const UserInfoFormView = (props) => {
       styleString,
       vanillaStyle),
     states.loadingError && (h("div", null,
-      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet.classes.AlertContainer },
-        h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        h("strong", null, text.error.loadingErrorAlertHeader),
-        h("br", null),
-        intl.formatMessage({
+      h("sqm-form-message", { type: "error" },
+        h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
+        h("p", { part: "alert-description" }, intl.formatMessage({
           id: "loadingErrorAlertDescription",
           defaultMessage: text.error.loadingErrorAlertDescription,
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        })),
-      h("br", null))),
+        }))))),
     states.loading ? (h(LoadingView, null)) : (h("div", null,
       h("div", { class: classes.TextContainer },
         h("div", null,
@@ -324,26 +296,22 @@ export const UserInfoFormView = (props) => {
           }, { step: states.step, count: FORM_STEPS }))),
           h("h3", null, text.personalInformation),
           h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
-      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet.classes.AlertContainer },
-        h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        h("strong", null, text.error.generalTitle),
-        h("br", null),
-        intl.formatMessage({
+      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sqm-form-message", { type: "error" },
+        h("p", { part: "alert-title" }, text.error.generalTitle),
+        h("p", { part: "alert-description" }, intl.formatMessage({
           id: "generalDescription",
           defaultMessage: text.error.generalDescription,
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        }))),
-      (states.isPartner || states.isUser) && (h("sl-alert", { type: "primary", open: true, class: sheet.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
-        h("sl-icon", { slot: "icon", name: "info-circle" }),
-        h("strong", null, text.isPartnerAlertHeader),
-        h("br", null),
-        intl.formatMessage({
+        })))),
+      (states.isPartner || states.isUser) && (h("sqm-form-message", { type: "info" },
+        h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
+        h("p", { part: "alert-description" }, intl.formatMessage({
           id: "isPartnerAlertDescription",
           defaultMessage: text.isPartnerAlertDescription,
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        }))),
+        })))),
       h("div", null,
         h("div", { class: classes.InputContainer },
           h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {

package/dist/collection/global/styles.js

@@ -545,7 +545,7 @@ html {
   --sl-input-help-text-color: var(--sl-color-gray-400);
   --sl-toggle-size: 1rem;
   --sl-overlay-background-color: #37415180;
-  --sl-panel-background-color: var(--sl-color-white);
+  --sl-panel-background-color: var(--sqm-portal-background);
   --sl-panel-border-color: var(--sl-color-gray-200);
   --sl-tooltip-border-radius: var(--sl-border-radius-medium);
   --sl-tooltip-background-color: var(--sl-color-gray-900);
@@ -573,73 +573,74 @@ html {
   --sqm-content-max-width: 700px;
   --sqm-content-background: var(--sl-color-white);
   --sqm-portal-background: ${((_a = config === null || config === void 0 ? void 0 : config.color) === null || _a === void 0 ? void 0 : _a.backgroundColor) || "#fff"};
+  --sqm-primary-font: ${((_b = config === null || config === void 0 ? void 0 : config.main) === null || _b === void 0 ? void 0 : _b.brandFont) || "var(--sl-font-sans)"};
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
   --sqm-skeleton-background: #eee;
-  --sqm-text: ${((_c = (_b = config === null || config === void 0 ? void 0 : config.color) === null || _b === void 0 ? void 0 : _b.textColorShades) === null || _c === void 0 ? void 0 : _c.mainText) || "#27272A"};
-  --sqm-text-subdued: ${((_e = (_d = config === null || config === void 0 ? void 0 : config.color) === null || _d === void 0 ? void 0 : _d.textColorShades) === null || _e === void 0 ? void 0 : _e.subduedText) || "#717179"};
-
-  --sqm-primary-color: ${((_f = config === null || config === void 0 ? void 0 : config.main) === null || _f === void 0 ? void 0 : _f.brandColor) || "#236AEB"};
-  --sqm-primary-button-background:${((_h = (_g = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _g === void 0 ? void 0 : _g.buttonColor) === null || _h === void 0 ? void 0 : _h.background) || "#236AEB"};
-  --sqm-primary-button-background-hover: ${((_k = (_j = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _j === void 0 ? void 0 : _j.buttonHoverColor) === null || _k === void 0 ? void 0 : _k.background) || "#3698df"};
-  --sqm-primary-button-color-hover: ${((_m = (_l = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _l === void 0 ? void 0 : _l.buttonHoverColor) === null || _m === void 0 ? void 0 : _m.label) || "#FFFFFF"};
-  --sqm-primary-button-border-color-hover: ${((_p = (_o = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _o === void 0 ? void 0 : _o.buttonHoverColor) === null || _p === void 0 ? void 0 : _p.border) || "transparent"};
-  --sqm-primary-button-color: ${((_r = (_q = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _q === void 0 ? void 0 : _q.buttonColor) === null || _r === void 0 ? void 0 : _r.label) || "#FFFFFF"};
-  --sqm-primary-button-color-border: ${((_t = (_s = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _s === void 0 ? void 0 : _s.buttonColor) === null || _t === void 0 ? void 0 : _t.border) || "transparent"};
-  --sqm-primary-button-radius: ${((_u = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _u === void 0 ? void 0 : _u.borderRadius) ? ((_v = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _v === void 0 ? void 0 : _v.borderRadius) + "px"
+  --sqm-text: ${((_d = (_c = config === null || config === void 0 ? void 0 : config.color) === null || _c === void 0 ? void 0 : _c.textColorShades) === null || _d === void 0 ? void 0 : _d.mainText) || "#27272A"};
+  --sqm-text-subdued: ${((_f = (_e = config === null || config === void 0 ? void 0 : config.color) === null || _e === void 0 ? void 0 : _e.textColorShades) === null || _f === void 0 ? void 0 : _f.subduedText) || "#717179"};
+
+  --sqm-primary-color: ${((_g = config === null || config === void 0 ? void 0 : config.main) === null || _g === void 0 ? void 0 : _g.brandColor) || "#236AEB"};
+  --sqm-primary-button-background:${((_j = (_h = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _h === void 0 ? void 0 : _h.buttonColor) === null || _j === void 0 ? void 0 : _j.background) || "#236AEB"};
+  --sqm-primary-button-background-hover: ${((_l = (_k = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _k === void 0 ? void 0 : _k.buttonHoverColor) === null || _l === void 0 ? void 0 : _l.background) || "#3698df"};
+  --sqm-primary-button-color-hover: ${((_o = (_m = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _m === void 0 ? void 0 : _m.buttonHoverColor) === null || _o === void 0 ? void 0 : _o.label) || "#FFFFFF"};
+  --sqm-primary-button-border-color-hover: ${((_q = (_p = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _p === void 0 ? void 0 : _p.buttonHoverColor) === null || _q === void 0 ? void 0 : _q.border) || "transparent"};
+  --sqm-primary-button-color: ${((_s = (_r = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _r === void 0 ? void 0 : _r.buttonColor) === null || _s === void 0 ? void 0 : _s.label) || "#FFFFFF"};
+  --sqm-primary-button-color-border: ${((_u = (_t = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _t === void 0 ? void 0 : _t.buttonColor) === null || _u === void 0 ? void 0 : _u.border) || "transparent"};
+  --sqm-primary-button-radius: ${((_v = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _v === void 0 ? void 0 : _v.borderRadius) ? ((_w = config === null || config === void 0 ? void 0 : config.primaryButton) === null || _w === void 0 ? void 0 : _w.borderRadius) + "px"
       : "4px"};
-  --sqm-secondary-button-background: ${((_w = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _w === void 0 ? void 0 : _w.buttonColor) || "transparent"};
-  --sqm-secondary-button-background-hover: ${((_y = (_x = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _x === void 0 ? void 0 : _x.buttonHoverColor) === null || _y === void 0 ? void 0 : _y.background) || "#DEF0FC"};
-  --sqm-secondary-button-color-hover: ${((_0 = (_z = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _z === void 0 ? void 0 : _z.buttonHoverColor) === null || _0 === void 0 ? void 0 : _0.label) || "#3878DB"};
-  --sqm-secondary-button-border-color-hover: ${((_2 = (_1 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _1 === void 0 ? void 0 : _1.buttonHoverColor) === null || _2 === void 0 ? void 0 : _2.border) || "#3798DF"};
-  --sqm-secondary-button-color: ${((_4 = (_3 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _3 === void 0 ? void 0 : _3.buttonColor) === null || _4 === void 0 ? void 0 : _4.label) || "#27272A"};
-  --sqm-secondary-button-color-border: ${((_6 = (_5 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _5 === void 0 ? void 0 : _5.buttonColor) === null || _6 === void 0 ? void 0 : _6.border) || "#E4E4E7"};
-  --sqm-secondary-button-radius: ${((_7 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _7 === void 0 ? void 0 : _7.borderRadius) ? ((_8 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _8 === void 0 ? void 0 : _8.borderRadius) + "px"
+  --sqm-secondary-button-background: ${((_x = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _x === void 0 ? void 0 : _x.buttonColor) || "transparent"};
+  --sqm-secondary-button-background-hover: ${((_z = (_y = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _y === void 0 ? void 0 : _y.buttonHoverColor) === null || _z === void 0 ? void 0 : _z.background) || "#DEF0FC"};
+  --sqm-secondary-button-color-hover: ${((_1 = (_0 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _0 === void 0 ? void 0 : _0.buttonHoverColor) === null || _1 === void 0 ? void 0 : _1.label) || "#3878DB"};
+  --sqm-secondary-button-border-color-hover: ${((_3 = (_2 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _2 === void 0 ? void 0 : _2.buttonHoverColor) === null || _3 === void 0 ? void 0 : _3.border) || "#3798DF"};
+  --sqm-secondary-button-color: ${((_5 = (_4 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _4 === void 0 ? void 0 : _4.buttonColor) === null || _5 === void 0 ? void 0 : _5.label) || "#27272A"};
+  --sqm-secondary-button-color-border: ${((_7 = (_6 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _6 === void 0 ? void 0 : _6.buttonColor) === null || _7 === void 0 ? void 0 : _7.border) || "#E4E4E7"};
+  --sqm-secondary-button-radius: ${((_8 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _8 === void 0 ? void 0 : _8.borderRadius) ? ((_9 = config === null || config === void 0 ? void 0 : config.secondaryButton) === null || _9 === void 0 ? void 0 : _9.borderRadius) + "px"
       : "4px"};
 
-  --sqm-border-radius-normal: ${((_9 = config === null || config === void 0 ? void 0 : config.border) === null || _9 === void 0 ? void 0 : _9.borderRadius) ? ((_10 = config === null || config === void 0 ? void 0 : config.border) === null || _10 === void 0 ? void 0 : _10.borderRadius) + "px" : "4px"}; 
-  --sqm-border-color: ${((_11 = config === null || config === void 0 ? void 0 : config.border) === null || _11 === void 0 ? void 0 : _11.borderColor) || "#E4E4E7"};
+  --sqm-border-radius-normal: ${((_10 = config === null || config === void 0 ? void 0 : config.border) === null || _10 === void 0 ? void 0 : _10.borderRadius) ? ((_11 = config === null || config === void 0 ? void 0 : config.border) === null || _11 === void 0 ? void 0 : _11.borderRadius) + "px" : "4px"}; 
+  --sqm-border-color: ${((_12 = config === null || config === void 0 ? void 0 : config.border) === null || _12 === void 0 ? void 0 : _12.borderColor) || "#E4E4E7"};
 
-  --sqm-border-thickness: ${((_12 = config === null || config === void 0 ? void 0 : config.border) === null || _12 === void 0 ? void 0 : _12.borderThickness) ? ((_13 = config === null || config === void 0 ? void 0 : config.border) === null || _13 === void 0 ? void 0 : _13.borderThickness) + "px"
+  --sqm-border-thickness: ${((_13 = config === null || config === void 0 ? void 0 : config.border) === null || _13 === void 0 ? void 0 : _13.borderThickness) ? ((_14 = config === null || config === void 0 ? void 0 : config.border) === null || _14 === void 0 ? void 0 : _14.borderThickness) + "px"
       : "1px"};
 
-  --sqm-accent-color-icon: ${((_15 = (_14 = config === null || config === void 0 ? void 0 : config.color) === null || _14 === void 0 ? void 0 : _14.accentColorShades) === null || _15 === void 0 ? void 0 : _15.icon) || "#7ECCF7"};
-  --sqm-accent-color-text: ${((_17 = (_16 = config === null || config === void 0 ? void 0 : config.color) === null || _16 === void 0 ? void 0 : _16.accentColorShades) === null || _17 === void 0 ? void 0 : _17.text) || "#3798DF"};    
-  --sqm-accent-color-border: ${((_19 = (_18 = config === null || config === void 0 ? void 0 : config.color) === null || _18 === void 0 ? void 0 : _18.accentColorShades) === null || _19 === void 0 ? void 0 : _19.border) || "#3798DF"};
-  --sqm-accent-color-background: ${((_21 = (_20 = config === null || config === void 0 ? void 0 : config.color) === null || _20 === void 0 ? void 0 : _20.accentColorShades) === null || _21 === void 0 ? void 0 : _21.background) || "#EFF8FE"};
+  --sqm-accent-color-icon: ${((_16 = (_15 = config === null || config === void 0 ? void 0 : config.color) === null || _15 === void 0 ? void 0 : _15.accentColorShades) === null || _16 === void 0 ? void 0 : _16.icon) || "#7ECCF7"};
+  --sqm-accent-color-text: ${((_18 = (_17 = config === null || config === void 0 ? void 0 : config.color) === null || _17 === void 0 ? void 0 : _17.accentColorShades) === null || _18 === void 0 ? void 0 : _18.text) || "#3798DF"};    
+  --sqm-accent-color-border: ${((_20 = (_19 = config === null || config === void 0 ? void 0 : config.color) === null || _19 === void 0 ? void 0 : _19.accentColorShades) === null || _20 === void 0 ? void 0 : _20.border) || "#3798DF"};
+  --sqm-accent-color-background: ${((_22 = (_21 = config === null || config === void 0 ? void 0 : config.color) === null || _21 === void 0 ? void 0 : _21.accentColorShades) === null || _22 === void 0 ? void 0 : _22.background) || "#EFF8FE"};
 
-  --sqm-success-color-icon: ${((_23 = (_22 = config === null || config === void 0 ? void 0 : config.color) === null || _22 === void 0 ? void 0 : _22.success) === null || _23 === void 0 ? void 0 : _23.iconAndBadge) || "var(--sl-color-success-600)"};
-  --sqm-success-color-text: ${((_25 = (_24 = config === null || config === void 0 ? void 0 : config.color) === null || _24 === void 0 ? void 0 : _24.success) === null || _25 === void 0 ? void 0 : _25.text) || "#fff"};
-  --sqm-success-color-border: ${((_27 = (_26 = config === null || config === void 0 ? void 0 : config.color) === null || _26 === void 0 ? void 0 : _26.success) === null || _27 === void 0 ? void 0 : _27.border) || "var(--sl-color-success-400)"};
-  --sqm-success-color-background: ${((_29 = (_28 = config === null || config === void 0 ? void 0 : config.color) === null || _28 === void 0 ? void 0 : _28.success) === null || _29 === void 0 ? void 0 : _29.background) || "var(--sl-color-success-300)"};
+  --sqm-success-color-icon: ${((_24 = (_23 = config === null || config === void 0 ? void 0 : config.color) === null || _23 === void 0 ? void 0 : _23.success) === null || _24 === void 0 ? void 0 : _24.iconAndBadge) || "var(--sl-color-success-600)"};
+  --sqm-success-color-text: ${((_26 = (_25 = config === null || config === void 0 ? void 0 : config.color) === null || _25 === void 0 ? void 0 : _25.success) === null || _26 === void 0 ? void 0 : _26.text) || "#fff"};
+  --sqm-success-color-border: ${((_28 = (_27 = config === null || config === void 0 ? void 0 : config.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: ${((_30 = (_29 = config === null || config === void 0 ? void 0 : config.color) === null || _29 === void 0 ? void 0 : _29.success) === null || _30 === void 0 ? void 0 : _30.background) || "var(--sl-color-success-300)"};
   
-  --sqm-warning-color-icon: ${((_31 = (_30 = config === null || config === void 0 ? void 0 : config.color) === null || _30 === void 0 ? void 0 : _30.warning) === null || _31 === void 0 ? void 0 : _31.iconAndBadge) || "var(--sl-color-warning-600)"};
-  --sqm-warning-color-text: ${((_33 = (_32 = config === null || config === void 0 ? void 0 : config.color) === null || _32 === void 0 ? void 0 : _32.warning) === null || _33 === void 0 ? void 0 : _33.text) || "#fff"};
-  --sqm-warning-color-border: ${((_35 = (_34 = config === null || config === void 0 ? void 0 : config.color) === null || _34 === void 0 ? void 0 : _34.warning) === null || _35 === void 0 ? void 0 : _35.border) || "var(--sl-color-warning-400)"};
-  --sqm-warning-color-background: ${((_37 = (_36 = config === null || config === void 0 ? void 0 : config.color) === null || _36 === void 0 ? void 0 : _36.warning) === null || _37 === void 0 ? void 0 : _37.background) || "var(--sl-color-warning-300)"};
-
-  --sqm-danger-color-icon: ${((_39 = (_38 = config === null || config === void 0 ? void 0 : config.color) === null || _38 === void 0 ? void 0 : _38.critical) === null || _39 === void 0 ? void 0 : _39.iconAndBadge) || "var(--sl-color-danger-600)"};
-  --sqm-danger-color-text: ${((_41 = (_40 = config === null || config === void 0 ? void 0 : config.color) === null || _40 === void 0 ? void 0 : _40.critical) === null || _41 === void 0 ? void 0 : _41.text) || "#fff"};
-  --sqm-danger-color-border: ${((_43 = (_42 = config === null || config === void 0 ? void 0 : config.color) === null || _42 === void 0 ? void 0 : _42.critical) === null || _43 === void 0 ? void 0 : _43.border) || "var(--sl-color-danger-400)"};
-  --sqm-danger-color-background: ${((_45 = (_44 = config === null || config === void 0 ? void 0 : config.color) === null || _44 === void 0 ? void 0 : _44.critical) === null || _45 === void 0 ? void 0 : _45.background) || "var(--sl-color-danger-300)"};
-
-  --sqm-informative-color-icon: ${((_47 = (_46 = config === null || config === void 0 ? void 0 : config.color) === null || _46 === void 0 ? void 0 : _46.informative) === null || _47 === void 0 ? void 0 : _47.iconAndBadge) || "var(--sl-color-sky-600)"};
-  --sqm-informative-color-text: ${((_49 = (_48 = config === null || config === void 0 ? void 0 : config.color) === null || _48 === void 0 ? void 0 : _48.informative) === null || _49 === void 0 ? void 0 : _49.text) || "#fff"};
-  --sqm-informative-color-border: ${((_51 = (_50 = config === null || config === void 0 ? void 0 : config.color) === null || _50 === void 0 ? void 0 : _50.informative) === null || _51 === void 0 ? void 0 : _51.border) || "var(--sl-color-sky-400)"};
-  --sqm-informative-color-background: ${((_53 = (_52 = config === null || config === void 0 ? void 0 : config.color) === null || _52 === void 0 ? void 0 : _52.informative) === null || _53 === void 0 ? void 0 : _53.background) || "var(--sl-color-sky-300)"};
-
-  --sqm-input-background: ${((_55 = (_54 = config === null || config === void 0 ? void 0 : config.formFields) === null || _54 === void 0 ? void 0 : _54.formFieldColor) === null || _55 === void 0 ? void 0 : _55.background) || "#fff"};
-  --sqm-input-border-color: ${((_57 = (_56 = config === null || config === void 0 ? void 0 : config.formFields) === null || _56 === void 0 ? void 0 : _56.formFieldColor) === null || _57 === void 0 ? void 0 : _57.border) || "#E4E4E7"};
-  --sqm-input-border-radius: ${((_58 = config === null || config === void 0 ? void 0 : config.formFields) === null || _58 === void 0 ? void 0 : _58.borderRadius) ? ((_59 = config === null || config === void 0 ? void 0 : config.formFields) === null || _59 === void 0 ? void 0 : _59.borderRadius) + "px"
+  --sqm-warning-color-icon: ${((_32 = (_31 = config === null || config === void 0 ? void 0 : config.color) === null || _31 === void 0 ? void 0 : _31.warning) === null || _32 === void 0 ? void 0 : _32.iconAndBadge) || "var(--sl-color-warning-600)"};
+  --sqm-warning-color-text: ${((_34 = (_33 = config === null || config === void 0 ? void 0 : config.color) === null || _33 === void 0 ? void 0 : _33.warning) === null || _34 === void 0 ? void 0 : _34.text) || "#fff"};
+  --sqm-warning-color-border: ${((_36 = (_35 = config === null || config === void 0 ? void 0 : config.color) === null || _35 === void 0 ? void 0 : _35.warning) === null || _36 === void 0 ? void 0 : _36.border) || "var(--sl-color-warning-400)"};
+  --sqm-warning-color-background: ${((_38 = (_37 = config === null || config === void 0 ? void 0 : config.color) === null || _37 === void 0 ? void 0 : _37.warning) === null || _38 === void 0 ? void 0 : _38.background) || "var(--sl-color-warning-300)"};
+
+  --sqm-danger-color-icon: ${((_40 = (_39 = config === null || config === void 0 ? void 0 : config.color) === null || _39 === void 0 ? void 0 : _39.critical) === null || _40 === void 0 ? void 0 : _40.iconAndBadge) || "var(--sl-color-danger-600)"};
+  --sqm-danger-color-text: ${((_42 = (_41 = config === null || config === void 0 ? void 0 : config.color) === null || _41 === void 0 ? void 0 : _41.critical) === null || _42 === void 0 ? void 0 : _42.text) || "#fff"};
+  --sqm-danger-color-border: ${((_44 = (_43 = config === null || config === void 0 ? void 0 : config.color) === null || _43 === void 0 ? void 0 : _43.critical) === null || _44 === void 0 ? void 0 : _44.border) || "var(--sl-color-danger-400)"};
+  --sqm-danger-color-background: ${((_46 = (_45 = config === null || config === void 0 ? void 0 : config.color) === null || _45 === void 0 ? void 0 : _45.critical) === null || _46 === void 0 ? void 0 : _46.background) || "var(--sl-color-danger-300)"};
+
+  --sqm-informative-color-icon: ${((_48 = (_47 = config === null || config === void 0 ? void 0 : config.color) === null || _47 === void 0 ? void 0 : _47.informative) === null || _48 === void 0 ? void 0 : _48.iconAndBadge) || "var(--sl-color-sky-600)"};
+  --sqm-informative-color-text: ${((_50 = (_49 = config === null || config === void 0 ? void 0 : config.color) === null || _49 === void 0 ? void 0 : _49.informative) === null || _50 === void 0 ? void 0 : _50.text) || "#fff"};
+  --sqm-informative-color-border: ${((_52 = (_51 = config === null || config === void 0 ? void 0 : config.color) === null || _51 === void 0 ? void 0 : _51.informative) === null || _52 === void 0 ? void 0 : _52.border) || "var(--sl-color-sky-400)"};
+  --sqm-informative-color-background: ${((_54 = (_53 = config === null || config === void 0 ? void 0 : config.color) === null || _53 === void 0 ? void 0 : _53.informative) === null || _54 === void 0 ? void 0 : _54.background) || "var(--sl-color-sky-300)"};
+
+  --sqm-input-background: ${((_56 = (_55 = config === null || config === void 0 ? void 0 : config.formFields) === null || _55 === void 0 ? void 0 : _55.formFieldColor) === null || _56 === void 0 ? void 0 : _56.background) || "#fff"};
+  --sqm-input-border-color: ${((_58 = (_57 = config === null || config === void 0 ? void 0 : config.formFields) === null || _57 === void 0 ? void 0 : _57.formFieldColor) === null || _58 === void 0 ? void 0 : _58.border) || "#E4E4E7"};
+  --sqm-input-border-radius: ${((_59 = config === null || config === void 0 ? void 0 : config.formFields) === null || _59 === void 0 ? void 0 : _59.borderRadius) ? ((_60 = config === null || config === void 0 ? void 0 : config.formFields) === null || _60 === void 0 ? void 0 : _60.borderRadius) + "px"
       : "4px"};
-  --sqm-input-color: ${((_61 = (_60 = config === null || config === void 0 ? void 0 : config.formFields) === null || _60 === void 0 ? void 0 : _60.formFieldColor) === null || _61 === void 0 ? void 0 : _61.inputText) || "#27272A"};
-  --sqm-input-label-color: ${((_63 = (_62 = config === null || config === void 0 ? void 0 : config.color) === null || _62 === void 0 ? void 0 : _62.textColorShades) === null || _63 === void 0 ? void 0 : _63.mainText) || "#27272A"};
-  --sqm-input-border-color-focus: ${((_64 = config === null || config === void 0 ? void 0 : config.formFields) === null || _64 === void 0 ? void 0 : _64.selectedStateColor) || "#E4E4E7"};
-  --sqm-input-border-color-hover: ${((_65 = config === null || config === void 0 ? void 0 : config.formFields) === null || _65 === void 0 ? void 0 : _65.hoverStateColor) || "#E4E4E7"};
+  --sqm-input-color: ${((_62 = (_61 = config === null || config === void 0 ? void 0 : config.formFields) === null || _61 === void 0 ? void 0 : _61.formFieldColor) === null || _62 === void 0 ? void 0 : _62.inputText) || "#27272A"};
+  --sqm-input-label-color: ${((_64 = (_63 = config === null || config === void 0 ? void 0 : config.color) === null || _63 === void 0 ? void 0 : _63.textColorShades) === null || _64 === void 0 ? void 0 : _64.mainText) || "#27272A"};
+  --sqm-input-border-color-focus: ${((_65 = config === null || config === void 0 ? void 0 : config.formFields) === null || _65 === void 0 ? void 0 : _65.selectedStateColor) || "#E4E4E7"};
+  --sqm-input-border-color-hover: ${((_66 = config === null || config === void 0 ? void 0 : config.formFields) === null || _66 === void 0 ? void 0 : _66.hoverStateColor) || "#E4E4E7"};
   --sqm-input-label-font-size: inherit;
   --sqm-input-disabled-color: var(--sqm-text-subdued);
-  --sqm-input-disabled-background: ${((_66 = config === null || config === void 0 ? void 0 : config.formFields) === null || _66 === void 0 ? void 0 : _66.disabledBackgroundColor) || "#F4F4F5"};
+  --sqm-input-disabled-background: ${((_67 = config === null || config === void 0 ? void 0 : config.formFields) === null || _67 === void 0 ? void 0 : _67.disabledBackgroundColor) || "#F4F4F5"};
 
   --sl-color-primary-100: var(--sqm-primary-color);
   --sl-color-primary-200: var(--sqm-primary-color);
@@ -688,7 +689,7 @@ html {
 }
 
 body {
-  font-family: ${((_67 = config === null || config === void 0 ? void 0 : config.main) === null || _67 === void 0 ? void 0 : _67.brandFont) || "var(--sl-font-sans)"};
+  font-family: var(--sqm-primary-font);
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
   letter-spacing: var(--sl-letter-spacing-small);
@@ -810,6 +811,7 @@ sl-details::part(summary) {
 
 *::part(primarybutton-base),
 sl-button[type="primary"]::part(base) {
+  font-family: var(--sqm-primary-font);
   width: 100%;
   background-color: var(--sqm-primary-button-background);
   color: var(--sqm-primary-button-color);
@@ -832,6 +834,7 @@ sl-button[type="primary"]::part(base):focus {
 
 *::part(secondarybutton-base),
 sl-button[type="secondary"]::part(base) {
+font-family: var(--sqm-primary-font);
   background-color: var(--sqm-secondary-button-background);
   color: var(--sqm-secondary-button-color);
   border-color: var(--sqm-secondary-button-color-border);
@@ -846,12 +849,14 @@ sl-button[type="secondary"]::part(base):hover {
 }
 
 *::part(input-label), *::part(select-label), *::part(textarea-label){
+  font-family: var(--sqm-primary-font);
   font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
   font-weight: var(--sl-font-weight-semibold);
   color: var(--sqm-input-label-color, var(--sqm-text), black);
 }
 
 *::part(input-base), *::part(select-base), *::part(textarea-base){
+  font-family: var(--sqm-primary-font);
   background-color: var(--sqm-input-background, #fff);
   border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
   color: var(--sqm-input-color, white);
@@ -867,6 +872,7 @@ sl-button[type="secondary"]::part(base):hover {
 }
 
 sqm-name-fields::part(input-base) {
+  font-family: var(--sqm-primary-font);
   background-color: var(--sqm-input-background, #fff);
   border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
   color: var(--sqm-input-color, white);
@@ -900,6 +906,7 @@ sl-textarea::part(textarea-label):focus {
 }
 
 a {
+  font-family: var(--sqm-primary-font);
   color: inherit;
   text-decoration: underline;
   cursor: pointer;