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

package/dist/cjs/sqm-banking-info-form_10.cjs.entry.js

@@ -3,21 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-a3a85ff0.js');
+const global = require('./global-38031ab9.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-6847bc06.js');
+const utils = require('./utils-7cbd60cc.js');
 const JSS = require('./JSS-8503a151.js');
 require('./mixins-4761d472.js');
-const GenericTableView = require('./GenericTableView-107ade89.js');
+const GenericTableView = require('./GenericTableView-a9845e80.js');
 const reRender = require('./re-render-d516138a.js');
 const useChildElements = require('./useChildElements-966c9041.js');
 const luxon = require('./luxon-949beaf2.js');
 const useReferralTable = require('./useReferralTable-90d4d6e9.js');
-const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-14d6e170.js');
-const utils$1 = require('./utils-940abb91.js');
+const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-79703291.js');
+const utils$1 = require('./utils-62fd5f09.js');
 const data = require('./data-d4339c2e.js');
 const keys = require('./keys-cff24974.js');
 const usePayoutStatus = require('./usePayoutStatus-3b34dab1.js');
@@ -574,35 +574,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",
@@ -614,8 +589,8 @@ const style = {
   InputContainer: {
     padding: "16px",
     margin: "16px 0px 16px 0px",
-    borderTop: "1px solid var(--sqm-border-color)",
-    borderBottom: "1px solid var(--sqm-border-color)",
+    borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
+    borderBottom: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
     display: "flex",
     flexDirection: "column",
     width: "100%",
@@ -757,20 +732,16 @@ const BankingInfoFormView = (props) => {
         }, { step: states.step, count: data.FORM_STEPS }))),
         index.h("h3", { style: { fontSize: "24px" } }, text.taxAndPayouts),
         index.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription)),
-      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet.classes.AlertContainer },
-        index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        index.h("strong", null, text.error.generalTitle),
-        index.h("br", null),
+      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sqm-form-message", { type: "error" },
+        index.h("p", { part: "alert-title" }, text.error.generalTitle),
         global.intl.formatMessage({
           id: "generalDescription",
           defaultMessage: text.error.generalDescription,
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      states.isPartner && !states.hideSteps && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: sheet.classes.PartnerAlertContainer },
-        index.h("sl-icon", { slot: "icon", name: "info-circle" }),
-        index.h("strong", null, text.isPartnerAlertHeader),
-        index.h("br", null),
+      states.isPartner && !states.hideSteps && (index.h("sqm-form-message", { type: "info" },
+        index.h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
         global.intl.formatMessage({
           id: "isPartnerAlertDescription",
           defaultMessage: text.isPartnerAlertDescription,
@@ -1861,7 +1832,7 @@ const style$1 = {
     gap: "10px",
     margin: "auto",
     textAlign: "center",
-    border: "1px solid var(--sqm-border-color)",
+    border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
     justifyContent: "center",
   },
   MessageContainer: {
@@ -2000,31 +1971,6 @@ const style$2 = {
   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",
@@ -2074,20 +2020,21 @@ const style$2 = {
 const sheet$2 = JSS.createStyleSheet(style$2);
 const styleString$2 = sheet$2.toString();
 const vanillaStyle$1 = `
-    :host{
-      display: block;   
-    }
-    * {
-       margin: 0;
-       padding: 0;
-       box-sizing: border-box;
-    }
+  :host{
+    display: block;   
+  }
 
-    a {
-      cursor: pointer;
-      color: var(--sqm-text);
-      text-decoration: underline;
-    }
+  * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
 
 
   `;
@@ -2101,7 +2048,7 @@ const DocusignFormView = (props) => {
       vanillaStyle$1),
     index.h("sl-dialog", { class: sheet$2.classes.Dialog, open: states.showModal, "onSl-hide": callbacks.onModalClose },
       index.h("div", { class: classes.ModalTitleContainer, slot: "label" },
-        index.h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } }),
+        index.h("sl-icon", { name: "info-circle", style: { color: "var(--sqm-informative-color-icon)" } }),
         index.h("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
       index.h("p", null, global.intl.formatMessage({
         id: "modalText",
@@ -2119,20 +2066,16 @@ const DocusignFormView = (props) => {
         index.h("h3", null, text.taxForm),
         index.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
     states.loadingError && (index.h("div", null,
-      index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$2.classes.ErrorAlertContainer },
-        index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        index.h("strong", null, text.error.loadingErrorAlertHeader),
-        index.h("br", null),
+      index.h("sqm-form-message", { type: "error" },
+        index.h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
         global.intl.formatMessage({
           id: "loadingErrorAlertDescription",
           defaultMessage: text.error.loadingErrorAlertDescription,
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })))),
-    ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$2.classes.ErrorAlertContainer },
-      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      index.h("strong", null, text.error.generalTitle),
-      index.h("br", null),
+    ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sqm-form-message", { type: "error" },
+      index.h("p", { part: "alert-title" }, text.error.generalTitle),
       global.intl.formatMessage({
         id: "generalDescription",
         defaultMessage: text.error.generalDescription,
@@ -2419,47 +2362,6 @@ const style$3 = {
   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",
@@ -2504,17 +2406,15 @@ const vanillaStyle$2 = `
     }
 
     hr {
-      border: 1px solid var(--sqm-border-color);
+      border: var(--sqm-border-thickness, 1px) solid var(--sqm-border-color);
     }
 
     a {
       color: inherit;
       text-decoration: underline;
-    }
-
-    a:hover {
       cursor: pointer;
     }
+
     * {
        margin: 0;
        padding: 0;
@@ -2542,30 +2442,24 @@ const IndirectTaxFormView = (props) => {
         index.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription),
         index.h("p", { class: classes.DescriptionText }, text.indirectTaxDescription)),
       states.loadingError && (index.h("div", null,
-        index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$3.classes.AlertContainer },
-          index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-          index.h("strong", null, text.error.loadingErrorAlertHeader),
-          index.h("br", null),
+        index.h("sqm-form-message", { type: "error" },
+          index.h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
           global.intl.formatMessage({
             id: "loadingErrorAlertDescription",
             defaultMessage: text.error.loadingErrorAlertDescription,
           }, {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           })))),
-      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$3.classes.AlertContainer },
-        index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        index.h("strong", null, text.error.generalTitle),
-        index.h("br", null),
+      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sqm-form-message", { type: "error" },
+        index.h("p", { part: "alert-title" }, text.error.generalTitle),
         global.intl.formatMessage({
           id: "generalDescription",
           defaultMessage: text.error.generalDescription,
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      states.isPartner && (index.h("sl-alert", { type: "primary", open: true, class: sheet$3.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
-        index.h("sl-icon", { slot: "icon", name: "info-circle" }),
-        index.h("strong", null, text.isPartnerAlertHeader),
-        index.h("br", null),
+      states.isPartner && (index.h("sqm-form-message", { type: "info" },
+        index.h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
         global.intl.formatMessage({
           id: "isPartnerAlertDescription",
           defaultMessage: text.isPartnerAlertDescription,
@@ -2586,14 +2480,12 @@ const IndirectTaxFormView = (props) => {
               text.otherRegion,
               index.h("p", { class: classes.DescriptionText }, text.otherRegionSubtext))),
           slots.registeredInDifferentCountryDetailsSlot)),
-      index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.PartnerAlertContainer },
-        index.h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
-        global.intl.formatMessage({
-          id: "cannotChangeInfoAlert",
-          defaultMessage: text.cannotChangeInfoAlert,
-        }, {
-          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        })),
+      index.h("sqm-form-message", { type: "info" }, global.intl.formatMessage({
+        id: "cannotChangeInfoAlert",
+        defaultMessage: text.cannotChangeInfoAlert,
+      }, {
+        supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+      })),
       index.h("div", { class: classes.BtnContainer },
         index.h("sl-button", { class: classes.PrimaryButton, type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
         index.h("sl-button", { class: classes.SecondaryButton, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
@@ -3503,7 +3395,7 @@ const style$4 = {
     borderRadius: "var(--sqm-border-radius-normal)",
     padding: "var(--sl-spacing-large)",
     minHeight: "150px",
-    border: "1px solid var(--sqm-border-color)",
+    border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
     maxWidth: "450px",
   },
   StatusContainer: {
@@ -3527,7 +3419,7 @@ const style$4 = {
     width: "auto",
   },
   PaypalEmail: {
-    borderRight: "1px solid var(--sqm-border-color)",
+    borderRight: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
     paddingRight: "var(--sl-spacing-small)",
     "@media (max-width: 499px)": {
       borderRight: "none",
@@ -3569,7 +3461,7 @@ const style$4 = {
     gap: "var(--sl-spacing-xx-small) var(--sl-spacing-small)",
     paddingTop: "var(--sq-spacing-xx-small)",
     "& > :not(:last-child)": {
-      borderRight: "1px solid var(--sqm-border-color)",
+      borderRight: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
     },
     "& > :nth-child(3)": {
       border: "none",
@@ -3586,7 +3478,7 @@ const style$4 = {
   },
   W9Container: {
     paddingTop: "var(--sl-spacing-large)",
-    borderTop: "1px solid var(--sqm-border-color)",
+    borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
   },
   SkeletonOne: {
     width: "25%",
@@ -3603,7 +3495,7 @@ const style$4 = {
   Alert: {
     "&::part(base)": {
       backgroundColor: "var(--sqm-warning-color-background)",
-      border: "1px solid var(--sqm-warning-color-border)",
+      border: "var(--sqm-border-thickness, 1px) solid var(--sqm-warning-color-border)",
       padding: "0 16px",
     },
     "& sl-icon": {
@@ -3630,12 +3522,6 @@ const style$4 = {
       color: "var(--sqm-informative-color-text)",
     },
   },
-  AlertContent: {
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "flex-start",
-    flexDirection: "column",
-  },
   Container: {
     display: "flex",
     flexDirection: "column",
@@ -3816,59 +3702,30 @@ function useDemoPayoutDetailsCard(props) {
 }
 
 const style$5 = {
-  ErrorAlertContainer: {
+  DangerBadge: {
     "&::part(base)": {
-      backgroundColor: "var(--sqm-danger-color-background)",
-      border: "none",
-    },
-    "& sl-icon::part(base)": {
+      backgroundColor: "var(--sqm-danger-color-icon)",
       color: "var(--sqm-danger-color-text)",
     },
   },
-  WarningAlertContainer: {
+  SuccessBadge: {
     "&::part(base)": {
-      backgroundColor: "var(--sqm-warning-color-background)",
-      border: "none",
-      maxWidth: "600px",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sqm-warning-color-text)",
+      backgroundColor: "var(--sqm-success-color-icon)",
+      color: "var(--sqm-success-color-text)",
     },
   },
-  WarningHoldAlertContainer: {
-    marginLeft: "-20px",
+  WarningBadge: {
     "&::part(base)": {
-      maxWidth: "850px",
-      border: "none",
-      backgroundColor: "transparent",
-    },
-    "& sl-icon::part(base)": {
+      backgroundColor: "var(--sqm-warning-color-icon)",
       color: "var(--sqm-warning-color-text)",
     },
   },
-  ErrorHoldAlertContainer: {
-    marginLeft: "-20px",
-    "&::part(base)": {
-      maxWidth: "850px",
-      border: "none",
-      backgroundColor: "transparent",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sqm-danger-color-icon)",
-    },
-  },
-  ExpiringSoonAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sqm-warning-color-background)",
-      border: "none",
-    },
-  },
   BankingInformationContainer: {
     maxWidth: "700px",
   },
   IndirectTaxPreviewContainer: {
     marginTop: "var(--sl-spacing-x-large)",
-    borderTop: "1px solid var(--sqm-border-color)",
+    borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
   },
   IndirectTaxPreviewHeaderContainer: {
     marginTop: "var(--sl-spacing-large)",
@@ -3978,18 +3835,56 @@ const style$5 = {
     fontSize: "var(--sl-font-size-medium)",
     marginTop: "0",
   },
+  WarningButton: {
+    "&::part(base)": {
+      marginTop: "20px",
+      borderColor: "var(--sqm-warning-color-border)",
+      color: "var(--sqm-warning-color-text)",
+      background: "var(--sqm-warning-color-background)",
+      "&:hover": {
+        background: "var(--sqm-warning-color-icon)",
+      },
+    },
+  },
+  ErrorButton: {
+    "&::part(base)": {
+      marginTop: "20px",
+      borderColor: "var(--sqm-danger-color-border)",
+      color: "var(--sqm-danger-color-text)",
+      background: "var(--sqm-danger-color-background)",
+      "&:hover": {
+        background: "var(--sqm-danger-color-icon)",
+      },
+    },
+  },
+  SuccessButton: {
+    "&::part(base)": {
+      marginTop: "20px",
+      borderColor: "var(--sqm-success-color-border)",
+      color: "var(--sqm-success-color-text)",
+      background: "var(--sqm-success-color-background)",
+      "&:hover": {
+        background: "var(--sqm-success-color-icon)",
+      },
+    },
+  },
   Dialog: {
     "&::part(panel)": {
       maxWidth: "420px",
     },
+    "&::part(header)": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      paddingTop: "var(--sl-spacing-large)",
+    },
     "&::part(close-button)": {
       marginBottom: "var(--sl-spacing-xx-large)",
     },
     "&::part(title)": {
-      fontSize: "var(--sl-font-size-x-large)",
+      fontSize: "var(--sl-font-size-large)",
       fontWeight: "600",
-      marginTop: "var(--sl-spacing-xxx-large)",
-      padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+      padding: "0px var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
     },
     "&::part(body)": {
       padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
@@ -4006,10 +3901,20 @@ const style$5 = {
   },
   DialogButton: { margin: "auto", width: "100%" },
 };
+const vanillaStyle$3 = `
+  * {
+    font-family: var(--sqm-primary-font);
+    }
+  a {
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`;
 const sheet$4 = JSS.createStyleSheet(style$5);
 const styleString$4 = sheet$4.toString();
 const TaxAndCashDashboardView = (props) => {
-  var _a, _b, _c, _d;
+  var _a;
   const { states, text, callbacks, slots } = props;
   function getAlert(status) {
     switch (status) {
@@ -4024,8 +3929,6 @@ const TaxAndCashDashboardView = (props) => {
           }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$4.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:INTERNAL":
         return {
@@ -4037,8 +3940,6 @@ const TaxAndCashDashboardView = (props) => {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$4.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:REVIEW":
         return {
@@ -4050,8 +3951,6 @@ const TaxAndCashDashboardView = (props) => {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$4.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:FAILED":
         return {
@@ -4062,9 +3961,7 @@ const TaxAndCashDashboardView = (props) => {
           }, {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
-          alertType: "critical",
-          icon: "exclamation-octagon",
-          class: sheet$4.classes.ErrorHoldAlertContainer,
+          alertType: "error",
         };
       case "HOLD":
         return {
@@ -4077,8 +3974,6 @@ const TaxAndCashDashboardView = (props) => {
           }),
           buttonText: null,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet$4.classes.WarningHoldAlertContainer,
         };
       default:
         return;
@@ -4086,7 +3981,7 @@ const TaxAndCashDashboardView = (props) => {
   }
   const statusMap = {
     NOT_VERIFIED: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      index.h("sl-badge", { type: "warning", pill: true }, text.statusTextNotVerified),
+      index.h("sl-badge", { class: sheet$4.classes.WarningBadge, type: "warning", pill: true }, text.statusTextNotVerified),
       index.h("p", null, global.intl.formatMessage({
         id: `badgeTextAwaitingReview`,
         defaultMessage: text.badgeTextAwaitingReview,
@@ -4094,7 +3989,7 @@ const TaxAndCashDashboardView = (props) => {
         dateSubmitted: states.dateSubmitted,
       })))),
     ACTIVE: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      index.h("sl-badge", { type: "success", pill: true }, text.statusTextActive),
+      index.h("sl-badge", { class: sheet$4.classes.SuccessBadge, type: "success", pill: true }, text.statusTextActive),
       index.h("p", null, global.intl.formatMessage({
         id: `badgeTextSubmittedOn`,
         defaultMessage: states.documentType === "W9"
@@ -4104,13 +3999,12 @@ const TaxAndCashDashboardView = (props) => {
         dateSubmitted: states.dateSubmitted,
       })))),
     INACTIVE: (index.h("div", { class: sheet$4.classes.TaxFormDetailsContainer },
-      index.h("sl-badge", { type: "danger", pill: true }, text.statusTextNotActive),
+      index.h("sl-badge", { class: sheet$4.classes.DangerBadge, type: "danger", pill: true }, text.statusTextNotActive),
       index.h("p", null, text.invalidForm))),
   };
   const alertMap = {
-    INACTIVE: (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.ErrorAlertContainer },
-      index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-      index.h("strong", null, global.intl.formatMessage({
+    INACTIVE: (index.h("sqm-form-message", { type: "error" },
+      index.h("p", { part: "alert-title" }, global.intl.formatMessage({
         id: `taxAlertHeaderNotActive`,
         defaultMessage: states.documentType === "W9"
           ? text.taxAlertHeaderNotActiveW9
@@ -4118,7 +4012,6 @@ const TaxAndCashDashboardView = (props) => {
       }, {
         documentType: states.documentTypeString,
       })),
-      index.h("br", null),
       global.intl.formatMessage({
         id: `taxAlertMessage`,
         defaultMessage: states.documentType === "W9"
@@ -4156,39 +4049,35 @@ const TaxAndCashDashboardView = (props) => {
       });
     }
   };
+  const alert = getAlert(states.payoutStatus);
   return (index.h("div", null,
     index.h("div", null,
       index.h("style", { type: "text/css" }, styleString$4),
-      states.loadingError && (index.h("div", null,
-        index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.ErrorAlertContainer },
-          index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-          index.h("strong", null, text.error.loadingErrorAlertHeader),
-          index.h("br", null),
-          global.intl.formatMessage({
-            id: "loadingErrorAlertDescription",
-            defaultMessage: text.error.loadingErrorAlertDescription,
-          }, {
-            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-          })))),
-      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$4.classes.ErrorAlertContainer },
-        index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        index.h("strong", null, text.error.generalTitle),
-        index.h("br", null),
+      index.h("style", { type: "text/css" }, vanillaStyle$3),
+      states.loadingError && (index.h("sqm-form-message", { type: "error" },
+        index.h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
+        global.intl.formatMessage({
+          id: "loadingErrorAlertDescription",
+          defaultMessage: text.error.loadingErrorAlertDescription,
+        }, {
+          supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+        }))),
+      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sqm-form-message", { type: "error" },
+        index.h("p", { part: "alert-title" }, text.error.generalTitle),
         global.intl.formatMessage({
           id: "generalDescription",
           defaultMessage: text.error.generalDescription,
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      getAlert(states.payoutStatus) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
-        index.h("sl-icon", { slot: "icon", name: (_d = getAlert(states.payoutStatus)) === null || _d === void 0 ? void 0 : _d.icon }),
-        index.h("strong", null, getAlert(states.payoutStatus).header),
-        index.h("p", { style: { margin: "0" } }, getAlert(states.payoutStatus).description),
-        getAlert(states.payoutStatus).buttonText && (index.h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, getAlert(states.payoutStatus).buttonText)))),
+      alert && (index.h("sqm-form-message", { type: alert.alertType },
+        index.h("p", { part: "alert-title" }, alert.header),
+        index.h("p", { part: "alert-description" }, alert.description),
+        alert.buttonText && (index.h("sl-button", { class: sheet$4.classes[`${utils.capitalizeFirstLetter(alert.alertType)}Button`], loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, alert.buttonText)))),
       index.h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet$4.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
         index.h("p", null, text.replaceTaxFormModalBodyText),
-        index.h("sl-button", { slot: "footer", type: "primary", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
-        index.h("sl-button", { slot: "footer", type: "default", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
+        index.h("sl-button", { slot: "footer", type: "primary", exportparts: "base: primarybutton-base", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
+        index.h("sl-button", { slot: "footer", type: "secondary", exportparts: "base: secondarybutton-base", class: sheet$4.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
       states.status === "INACTIVE" && alertMap[states.status],
       index.h("div", null,
         index.h("h3", { style: { marginBottom: "0" } }, text.bankingInformationSectionHeader),
@@ -4196,7 +4085,7 @@ const TaxAndCashDashboardView = (props) => {
         index.h("div", { class: sheet$4.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,
           !states.loading && (index.h("p", { class: sheet$4.classes.DescriptionText }, text.payoutFromImpact)),
-          states.canEditPayoutInfo && (index.h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet$4.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
+          states.canEditPayoutInfo && (index.h("sl-button", { disabled: states.disabled || states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
       index.h("div", { class: sheet$4.classes.TaxDocumentsContainer },
         index.h("div", null, states.loading ? (index.h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
           index.h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
@@ -4212,7 +4101,7 @@ const TaxAndCashDashboardView = (props) => {
                 documentType: states.documentTypeString,
               })),
               index.h("span", { class: sheet$4.classes.StatusAlert }, statusMap[states.status]))),
-          states.status !== "NOT_VERIFIED" && (index.h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet$4.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
+          states.status !== "NOT_VERIFIED" && (index.h("sl-button", { style: { marginTop: "20px" }, disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "primary", exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
       index.h("div", { class: sheet$4.classes.IndirectTaxPreviewContainer }, states.loading ? (index.h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
         index.h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
         index.h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (index.h("div", null,
@@ -5725,7 +5614,7 @@ const style$6 = {
   FormWrapper: {},
   ErrorInput: {
     "&::part(base)": {
-      border: "1px solid var(--sqm-danger-color-icon)",
+      border: "var(--sqm-border-thickness, 1px) solid var(--sqm-danger-color-icon)",
       borderRadius: "var(--sl-input-border-radius-medium)",
     },
     "&::part(help-text)": {
@@ -5772,31 +5661,6 @@ const style$6 = {
       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)",
@@ -5823,7 +5687,7 @@ const style$6 = {
 };
 const sheet$5 = JSS.createStyleSheet(style$6);
 const styleString$5 = sheet$5.toString();
-const vanillaStyle$3 = `
+const vanillaStyle$4 = `
     :host{
       display: block;   
     }
@@ -6017,19 +5881,16 @@ const UserInfoFormView = (props) => {
   return (index.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     index.h("style", { type: "text/css" },
       styleString$5,
-      vanillaStyle$3),
+      vanillaStyle$4),
     states.loadingError && (index.h("div", null,
-      index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", open: true, class: sheet$5.classes.AlertContainer },
-        index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        index.h("strong", null, text.error.loadingErrorAlertHeader),
-        index.h("br", null),
-        global.intl.formatMessage({
+      index.h("sqm-form-message", { type: "error" },
+        index.h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
+        index.h("p", { part: "alert-description" }, global.intl.formatMessage({
           id: "loadingErrorAlertDescription",
           defaultMessage: text.error.loadingErrorAlertDescription,
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        })),
-      index.h("br", null))),
+        }))))),
     states.loading ? (index.h(utils$1.LoadingView, null)) : (index.h("div", null,
       index.h("div", { class: classes.TextContainer },
         index.h("div", null,
@@ -6039,26 +5900,22 @@ const UserInfoFormView = (props) => {
           }, { step: states.step, count: data.FORM_STEPS }))),
           index.h("h3", null, text.personalInformation),
           index.h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
-      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "warning", open: true, class: sheet$5.classes.AlertContainer },
-        index.h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-        index.h("strong", null, text.error.generalTitle),
-        index.h("br", null),
-        global.intl.formatMessage({
+      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (index.h("sqm-form-message", { type: "error" },
+        index.h("p", { part: "alert-title" }, text.error.generalTitle),
+        index.h("p", { part: "alert-description" }, global.intl.formatMessage({
           id: "generalDescription",
           defaultMessage: text.error.generalDescription,
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        }))),
-      (states.isPartner || states.isUser) && (index.h("sl-alert", { type: "primary", open: true, class: sheet$5.classes.PartnerAlertContainer, exportparts: "base: alert-base, icon:alert-icon" },
-        index.h("sl-icon", { slot: "icon", name: "info-circle" }),
-        index.h("strong", null, text.isPartnerAlertHeader),
-        index.h("br", null),
-        global.intl.formatMessage({
+        })))),
+      (states.isPartner || states.isUser) && (index.h("sqm-form-message", { type: "info" },
+        index.h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
+        index.h("p", { part: "alert-description" }, global.intl.formatMessage({
           id: "isPartnerAlertDescription",
           defaultMessage: text.isPartnerAlertDescription,
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-        }))),
+        })))),
       index.h("div", null,
         index.h("div", { class: classes.InputContainer },
           index.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) ? {