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

package/dist/collection/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.js

@@ -16,13 +16,6 @@ const style = {
     flexDirection: "column",
     maxWidth: "320px",
   },
-  ErrorAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
-    },
-    "&::part(message)": {},
-  },
   ContinueButton: {
     width: "100%",
     maxWidth: "100px",
@@ -41,11 +34,11 @@ const style = {
   },
   ErrorInput: {
     "&::part(base)": {
-      border: "1px solid var(--sl-color-danger-500)",
-      borderRadius: "var(--sl-input-border-radius-medium)",
+      border: "var(--sqm-border-thickness) solid var(--sqm-danger-color-border)",
+      borderRadius: "var(--sqm-input-border-radius)",
     },
     "&::part(help-text)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-text)",
     },
   },
 };
@@ -56,6 +49,109 @@ const vanillaStyle = `
 :host([hidden]): {
   display: none;
 }
+
+a {
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+*::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);
+  border-color: var(--sqm-primary-button-color-border);
+  border-radius: var(--sqm-primary-button-radius);
+}
+
+*::part(primarybutton-base):hover,
+sl-button[type="primary"]::part(base):hover{
+  background-color: var(--sqm-primary-button-background-hover);
+  border-color: var(--sqm-primary-button-border-color-hover);
+  color: var(--sqm-primary-button-color-hover);
+}
+
+
+*::part(primarybutton-base):focus,
+sl-button[type="primary"]::part(base):focus {
+  box-shadow: none;
+}
+
+*::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);
+  border-radius: var(--sqm-secondary-button-radius);
+}
+
+*::part(secondarybutton-base):hover,
+sl-button[type="secondary"]::part(base):hover {
+  background-color: var(--sqm-secondary-button-background-hover);
+  color: var(--sqm-secondary-button-color-hover);
+  border-color: var(--sqm-secondary-button-border-color-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);
+  border-width: var(--sqm-border-thickness, 1px);
+}
+
+*::part(input-base):hover, *::part(select-base):hover, *::part(textarea-base):hover{
+  border-color: var(--sqm-border-color-hover);
+}
+
+*::part(input-base):focus, *::part(select-base):focus, *::part(textarea-base):focus{
+  border-color: var(--sqm-border-color-focus);
+}
+
+sqm-name-fields::part(input-base) {
+  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);
+  border-width: var(--sqm-border-thickness, 1px);
+}
+
+sl-input::part(base):focus,
+sl-select::part(form-control-wrapper):focus,
+sl-textarea::part(textarea-label):focus {
+  border-color: var(--sqm-border-color-focus);
+}
+
+*::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{
+  background: var(--sqm-input-disabled-background, #f5f5f5);
+  color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
+}
+
+*::part(input):-webkit-autofill {
+  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+  -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+}
+
+*::part(input):-webkit-autofill:hover {
+  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+  -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+}
+
+*::part(input):-webkit-autofill:focus {
+  box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+  -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+}
+
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -71,10 +167,8 @@ export function WidgetEmailVerificationView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    states.sendCodeError && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
-      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      h("b", null, text.sendCodeErrorHeader),
-      h("br", null),
+    states.sendCodeError && (h("sqm-form-message", { type: "error" },
+      h("p", { part: "alert-title" }, text.sendCodeErrorHeader),
       intl.formatMessage({
         id: "sendCodeErrorDescription",
         defaultMessage: text.sendCodeErrorDescription,

package/dist/collection/components/tax-and-cash/TaxForm.stories.js

@@ -1,5 +1,4 @@
 import { h } from "@stencil/core";
-import { ErrorView } from "./sqm-tax-and-cash/ErrorView";
 import LoadingView from "./sqm-tax-and-cash/LoadingView";
 import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "./subregions";
 import { taxTypeToName } from "./utils";
@@ -282,7 +281,9 @@ export const GeneralLoadingView = () => {
   return h(LoadingView, null);
 };
 export const GeneralErrorView = () => {
-  return (h(ErrorView, { loadingErrorAlertHeader: "There was a problem loading your form", loadingErrorAlertDescription: "Please refresh the page and try again. If this problem continues, contact our support team." }));
+  return (h("sqm-form-message", { type: "error" },
+    h("p", { part: "alert-title" }, "There was a problem loading your form"),
+    h("p", { part: "alert-description" }, "Please refresh the page and try again. If this problem continues, contact our support team.")));
 };
 // STEP ONE
 export const StepOne = () => {

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

@@ -48,35 +48,10 @@ const style = {
   DescriptionText: {
     color: "var(--sqm-text-subdued)",
   },
-  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)",
-    },
-  },
   RadioContainer: {
     display: "flex",
     flexDirection: "column",
   },
-  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)",
-    },
-  },
   Checkbox: {
     "&::part(control)": {
       borderRadius: "50% !important",
@@ -231,20 +206,16 @@ export const BankingInfoFormView = (props) => {
         }, { step: states.step, count: FORM_STEPS }))),
         h("h3", { style: { fontSize: "24px" } }, text.taxAndPayouts),
         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),
+      ((_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),
         intl.formatMessage({
           id: "generalDescription",
           defaultMessage: text.error.generalDescription,
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      states.isPartner && !states.hideSteps && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: sheet.classes.PartnerAlertContainer },
-        h("sl-icon", { slot: "icon", name: "info-circle" }),
-        h("strong", null, text.isPartnerAlertHeader),
-        h("br", null),
+      states.isPartner && !states.hideSteps && (h("sqm-form-message", { type: "info" },
+        h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
         intl.formatMessage({
           id: "isPartnerAlertDescription",
           defaultMessage: text.isPartnerAlertDescription,

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

@@ -48,31 +48,6 @@ const style = {
   BoldText: {
     fontWeight: "bold",
   },
-  ErrorAlertContainer: {
-    "&::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)",
-    },
-  },
-  InfoAlert: {
-    "&::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)",
-    },
-  },
   Container: {
     width: "100%",
     display: "flex",
@@ -122,20 +97,21 @@ const style = {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 const vanillaStyle = `
-    :host{
-      display: block;   
-    }
-    * {
-       margin: 0;
-       padding: 0;
-       box-sizing: border-box;
-    }
+  :host{
+    display: block;   
+  }
+
+  * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+  }
 
-    a {
-      cursor: pointer;
-      color: var(--sqm-text);
-      text-decoration: underline;
-    }
+  a {
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
 
 
   `;
@@ -149,7 +125,7 @@ export const DocusignFormView = (props) => {
       vanillaStyle),
     h("sl-dialog", { class: sheet.classes.Dialog, open: states.showModal, "onSl-hide": callbacks.onModalClose },
       h("div", { class: classes.ModalTitleContainer, slot: "label" },
-        h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } }),
+        h("sl-icon", { name: "info-circle", style: { color: "var(--sqm-informative-color-icon)" } }),
         h("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
       h("p", null, intl.formatMessage({
         id: "modalText",
@@ -167,20 +143,16 @@ export const DocusignFormView = (props) => {
         h("h3", null, text.taxForm),
         h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
     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),
+      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 = 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.ErrorAlertContainer },
-      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      h("strong", null, text.error.generalTitle),
-      h("br", null),
+    ((_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),
       intl.formatMessage({
         id: "generalDescription",
         defaultMessage: text.error.generalDescription,

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

@@ -57,47 +57,6 @@ const style = {
   DescriptionText: {
     color: "var(--sqm-text-subdued)",
   },
-  AlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sqm-danger-color-background)",
-      border: "none",
-      padding: "0 16px",
-      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)",
-    },
-  },
-  InfoAlert: {
-    marginTop: "var(--sl-spacing-large)",
-    "&::part(base)": {
-      backgroundColor: "transparent",
-      borderTop: "none",
-      padding: "0px",
-      border: "none",
-    },
-    "&::part(message)": {
-      alignItems: "center",
-      padding: "var(--sl-spacing-small)",
-      whiteSpace: "nowrap",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-yellow-500)",
-    },
-  },
   InfoWarningIcon: {
     height: "26px",
     width: "26px",
@@ -148,11 +107,9 @@ const vanillaStyle = `
     a {
       color: inherit;
       text-decoration: underline;
-    }
-
-    a:hover {
       cursor: pointer;
     }
+
     * {
        margin: 0;
        padding: 0;
@@ -180,30 +137,24 @@ export const IndirectTaxFormView = (props) => {
         h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription),
         h("p", { class: classes.DescriptionText }, text.indirectTaxDescription)),
       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),
+        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 = 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),
+      ((_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),
         intl.formatMessage({
           id: "generalDescription",
           defaultMessage: text.error.generalDescription,
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      states.isPartner && (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),
+      states.isPartner && (h("sqm-form-message", { type: "info" },
+        h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
         intl.formatMessage({
           id: "isPartnerAlertDescription",
           defaultMessage: text.isPartnerAlertDescription,
@@ -224,14 +175,12 @@ export const IndirectTaxFormView = (props) => {
               text.otherRegion,
               h("p", { class: classes.DescriptionText }, text.otherRegionSubtext))),
           slots.registeredInDifferentCountryDetailsSlot)),
-      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.PartnerAlertContainer },
-        h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
-        intl.formatMessage({
-          id: "cannotChangeInfoAlert",
-          defaultMessage: text.cannotChangeInfoAlert,
-        }, {
-          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        })),
+      h("sqm-form-message", { type: "info" }, intl.formatMessage({
+        id: "cannotChangeInfoAlert",
+        defaultMessage: text.cannotChangeInfoAlert,
+      }, {
+        supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+      })),
       h("div", { class: classes.BtnContainer },
         h("sl-button", { class: classes.PrimaryButton, type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
         h("sl-button", { class: classes.SecondaryButton, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));

package/dist/collection/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.js

@@ -139,12 +139,6 @@ const style = {
       color: "var(--sqm-informative-color-text)",
     },
   },
-  AlertContent: {
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "flex-start",
-    flexDirection: "column",
-  },
   Container: {
     display: "flex",
     flexDirection: "column",

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.js

@@ -10,33 +10,6 @@ const style = {
     margin: "0",
     marginBottom: "var(--sl-spacing-small)",
   },
-  ErrorAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
-  },
-  WarningAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-yellow-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
-  },
-  InfoAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
-    },
-  },
   Dialog: {
     "&::part(panel)": {
       height: "600px",
@@ -52,6 +25,13 @@ const style = {
     "&::part(footer)": {},
   },
 };
+const vanillaStyle = `
+  a {
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PayoutStatusAlertView(props) {
@@ -63,8 +43,6 @@ export function PayoutStatusAlertView(props) {
         description: text.errorDescription,
         buttonText: null,
         alertType: "critical",
-        icon: "exclamation-triangle",
-        class: sheet.classes.ErrorAlertContainer,
       };
     switch (status) {
       case "INFORMATION_REQUIRED":
@@ -73,8 +51,6 @@ export function PayoutStatusAlertView(props) {
           description: text.informationRequiredDescription,
           buttonText: text.informationRequiredButtonText,
           alertType: "info",
-          icon: "info-circle",
-          class: sheet.classes.InfoAlertContainer,
         };
       case "VERIFICATION:REQUIRED":
         return {
@@ -87,8 +63,6 @@ export function PayoutStatusAlertView(props) {
           }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningAlertContainer,
         };
       case "VERIFICATION:INTERNAL":
         return {
@@ -100,8 +74,6 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningAlertContainer,
         };
       case "VERIFICATION:REVIEW":
         return {
@@ -113,8 +85,6 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningAlertContainer,
         };
       case "VERIFICATION:FAILED":
         return {
@@ -126,8 +96,6 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "critical",
-          icon: "exclamation-octagon",
-          class: sheet.classes.ErrorAlertContainer,
         };
       case "HOLD":
         return {
@@ -140,8 +108,6 @@ export function PayoutStatusAlertView(props) {
           }),
           buttonText: null,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningAlertContainer,
         };
       default:
         return;
@@ -150,11 +116,15 @@ export function PayoutStatusAlertView(props) {
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
-        return data.type === "SquatchJS2" ? (h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (
+        return data.type === "SquatchJS2" ? (h("div", { style: { paddingTop: "10px" } },
+          h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" }))) : data.type === "SquatchPortal" ? (h("div", { style: { paddingTop: "10px" } },
+          h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText))) : (
         // Demo case
-        h("sl-button", { type: "default" }, text.informationRequiredButtonText));
+        h("div", { style: { paddingTop: "10px" } },
+          h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base" }, text.informationRequiredButtonText)));
       case "VERIFICATION:REQUIRED":
-        return (h("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
+        return (h("div", { style: { paddingTop: "10px" } },
+          h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText)));
       default:
         return;
     }
@@ -168,9 +138,9 @@ export function PayoutStatusAlertView(props) {
   }
   return (h("div", { part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
-    h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: alertDetails.alertType, class: alertDetails.class, open: true },
-      h("sl-icon", { slot: "icon", name: alertDetails.icon }),
-      h("strong", null, alertDetails.header),
-      h("p", { class: sheet.classes.AlertDescriptionText }, alertDetails.description),
+    h("style", { type: "text/css" }, vanillaStyle),
+    h("sqm-form-message", { type: alertDetails.alertType },
+      h("p", { part: "alert-title" }, alertDetails.header),
+      h("p", { part: "alert-description" }, alertDetails.description),
       getButton(states.status))));
 }

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

@@ -1,30 +1,6 @@
 import { h } from "@stencil/core";
-import { createStyleSheet } from "../../../styling/JSS";
-const styles = {
-  Alert: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-danger-100)",
-      border: "var(--sqm-border-thickness, 1px) solid var(--sl-color-danger-200)",
-      padding: "0 16px",
-    },
-    "& sl-icon": {
-      margin: 0,
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-      margin: 0,
-    },
-  },
-};
 export const ErrorView = (props) => {
-  const sheet = createStyleSheet(styles);
-  const styleString = sheet.toString();
-  const { classes } = sheet;
-  return (h("div", null,
-    h("style", null, styleString),
-    h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: classes.Alert },
-      h("sl-icon", { slot: "icon", name: "exclamation-octagon", class: "Error" }),
-      h("strong", null, props.loadingErrorAlertHeader),
-      h("br", null),
-      props.loadingErrorAlertDescription)));
+  return (h("sqm-form-message", { type: "error" },
+    h("p", { part: "alert-title" }, props.loadingErrorAlertHeader),
+    h("p", { part: "alert-description" }, props.loadingErrorAlertDescription)));
 };

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

@@ -5,7 +5,6 @@ import deepmerge from "deepmerge";
 import { parseStates } from "../../../utils/parseStates";
 import { getProps } from "../../../utils/utils";
 import { TAX_CONTEXT_NAMESPACE } from "../data";
-import { ErrorView } from "./ErrorView";
 import { extractProps } from "./extractProps";
 import LoadingView from "./LoadingView";
 import { useTaxAndCash } from "./useTaxAndCash";
@@ -1075,7 +1074,9 @@ export class TaxAndCashMonolith {
         case "/dashboard":
           return (h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"), extractProps(props, "sqm-tax-and-cash-dashboard_"))));
         case "/error":
-          return (h(ErrorView, { loadingErrorAlertHeader: this.loadingErrorAlertHeader, loadingErrorAlertDescription: this.loadingErrorAlertDescription }));
+          return (h("sqm-form-message", { type: "error" },
+            h("p", { part: "alert-title" }, this.loadingErrorAlertHeader),
+            h("p", { part: "alert-description" }, this.loadingErrorAlertDescription)));
       }
     };
     return getStep() || h(LoadingView, null);