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

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;

package/dist/collection/global/styles.ts

@@ -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

@@ -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}

@@ -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-2984432d.js}

@@ -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';