npm - @saasquatch/mint-components - Versions diffs - 1.15.0-62 → 1.15.0-64 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (241) hide show

package/dist/collection/global/styles.ts CHANGED Viewed

@@ -552,7 +552,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);
@@ -580,6 +580,7 @@ html {
   --sqm-content-max-width: 700px;
   --sqm-content-background: var(--sl-color-white);
   --sqm-portal-background: ${config?.color?.backgroundColor || "#fff"};
+  --sqm-primary-font: ${config?.main?.brandFont || "var(--sl-font-sans)"};
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
@@ -781,7 +782,7 @@ html {
 }
 body {
-  font-family: ${config?.main?.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);
@@ -903,6 +904,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);
@@ -925,6 +927,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);
@@ -939,12 +942,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);
@@ -960,6 +965,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);
@@ -993,6 +999,7 @@ sl-textarea::part(textarea-label):focus {
 }
 a {
+  font-family: var(--sqm-primary-font);
   color: inherit;
   text-decoration: underline;
   cursor: pointer;

package/dist/collection/utils/utils.js CHANGED Viewed

@@ -47,3 +47,7 @@ export function sanitizeUrlPath(path) {
   cleanUrl.hash = url.hash;
   return cleanUrl;
 }
+export function capitalizeFirstLetter(word) {
+  return word[0].toUpperCase() + word.slice(1);
+}
+console.log(capitalizeFirstLetter("warning"));

package/dist/esm/{IndirectTaxDetailsView-0ae0aeb9.js → IndirectTaxDetailsView-3bf366d5.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-e9173b4c.js';
+import { i as intl } from './global-75f87c77.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { f as formatErrorMessage } from './utils-985d9996.js';
+import { f as formatErrorMessage } from './utils-edd7677f.js';
 const style = {
   Description: {

package/dist/esm/{ShadowViewAddon-51e9ebf7.js → ShadowViewAddon-976c7e5e.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-b3a06de8.js';
-import { i as intl } from './global-e9173b4c.js';
+import { i as intl } from './global-75f87c77.js';
 import { b as browser, u as useMemo, k as useState } from './dom-context-hooks.module-63370afd.js';
 import { H, L, J, d as dist, w as wn, B, F as Fn, $ as $e, g as getEnvironmentSDK } from './index.module-38dad6c9.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { l as luxonLocale } from './utils-334c1e34.js';
+import { l as luxonLocale } from './utils-03188de2.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
 import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-311e6d72.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f750863a.js';
@@ -103,7 +103,7 @@ function ShareButtonView(props, children) {
   const vanillaStyle = `
 	sl-button::part(base) {
 	  border: ${props.border || "none"};
+    font-family: var(--sqm-primary-font);
 	background: ${props.backgroundcolor
     ? props.backgroundcolor

package/dist/esm/{global-e9173b4c.js → global-75f87c77.js} RENAMED Viewed

@@ -26480,7 +26480,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);
@@ -26508,73 +26508,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);
@@ -26623,7 +26624,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);
@@ -26745,6 +26746,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);
@@ -26767,6 +26769,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);
@@ -26781,12 +26784,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);
@@ -26802,6 +26807,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);
@@ -26835,6 +26841,7 @@ sl-textarea::part(textarea-label):focus {
 }
 a {
+  font-family: var(--sqm-primary-font);
   color: inherit;
   text-decoration: underline;
   cursor: pointer;