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

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-require('./global-a3a85ff0.js');
+require('./global-38031ab9.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 require('./cjs-1066ec21.js');
-require('./utils-6847bc06.js');
+require('./utils-7cbd60cc.js');
 const JSS = require('./JSS-8503a151.js');
 require('./useReferralCodes-11cdf43b.js');
 require('./mixins-4761d472.js');
@@ -23,21 +23,20 @@ const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-6a1e63de.js'
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-b61c8bdf.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-de90ef03.js');
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-ec7a5c53.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-aec35ba2.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-f1671646.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-0a8d3243.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-bb50304c.js');
 const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8847804c.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-5a96c2f5.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-cff9bfc7.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-5aabad8c.js');
 require('./utilities-9a0c5e91.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-25eb2099.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-1c4e781f.js');
-const ErrorView = require('./ErrorView-0f564e2a.js');
-const sqmQrCodeView = require('./sqm-qr-code-view-af9f6df7.js');
-const ShadowViewAddon = require('./ShadowViewAddon-dbc78438.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-0c3b2f48.js');
+const ShadowViewAddon = require('./ShadowViewAddon-e0aa9b07.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
-const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-d7d3a220.js');
-const utils = require('./utils-940abb91.js');
+const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-79703291.js');
+const utils = require('./utils-62fd5f09.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -6413,31 +6412,23 @@ const FormMessage_stories = {
 };
 const SuccessAlert = () => {
   return (index.h("sqm-form-message", { type: "success" },
-    index.h("div", null, "This is a success message.")));
+    index.h("p", { part: "alert-title" }, "This is the title"),
+    index.h("p", { part: "alert-description" }, "This is the description")));
 };
 const ErrorAlert = () => {
   return (index.h("sqm-form-message", { type: "error" },
-    index.h("div", null, "This is an error message")));
+    index.h("p", { part: "alert-title" }, "This is the title"),
+    index.h("p", { part: "alert-description" }, "This is the description")));
 };
 const WarningAlert = () => {
   return (index.h("sqm-form-message", { type: "warning" },
-    index.h("div", null, "This is an error message")));
+    index.h("p", { part: "alert-title" }, "This is the title"),
+    index.h("p", { part: "alert-description" }, "This is the description")));
 };
 const InfoAlert = () => {
   return (index.h("sqm-form-message", { type: "info" },
-    index.h("div", null, "This is an info message")));
-};
-const FullStackSuccess = () => {
-  return (index.h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
-    index.h("div", { class: "AlertContent" },
-      index.h("div", { part: "successalert-text" }, "Title"),
-      index.h("div", { part: "successalert-subtext" }, "Body text."),
-      index.h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: () => {
-          console.log("click");
-        } }, "Primary Action"),
-      index.h("sl-button", { class: "SecondaryTextButton", type: "text", onClick: () => {
-          console.log("click");
-        } }, "Secondary Action"))));
+    index.h("p", { part: "alert-title" }, "This is the title"),
+    index.h("p", { part: "alert-description" }, "This is the description")));
 };
 
 const FormMessage = /*#__PURE__*/Object.freeze({
@@ -6446,8 +6437,7 @@ const FormMessage = /*#__PURE__*/Object.freeze({
   SuccessAlert: SuccessAlert,
   ErrorAlert: ErrorAlert,
   WarningAlert: WarningAlert,
-  InfoAlert: InfoAlert,
-  FullStackSuccess: FullStackSuccess
+  InfoAlert: InfoAlert
 });
 
 const scenario$6 = "@author:kutay\n@owner:kutay\nFeature: Hero Image\n\n\tThe Hero Image component displays media images with a header, description and button using an overlay or a double column layout to offer an attrative widget page.\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the Hero Image component\n\n\t@motivating\n\t@ui\n\tScenario: Overlay image displays header, description, and button with brand color\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"overlay\"                                                          |\n\t\tThen they see their image\n\t\tAnd the image has no padding\n\t\tAnd it has a brand colour overlay\n\t\tAnd \"Klip Rewards\" is displayed over top of the image in xxx-large font\n\t\tAnd below \"Refer friends or complete tasks while using Klip to earn rewards\" is displayed over top of the image in x-large font\n\t\tAnd below they see a brand coloured button with text \"Start earning\"\n\t\tAnd the text section has xxx-large padding\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is scaled to fit content\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay image crop can be aligned left, center or right\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"overlay\"                                                          |\n\t\t\t| image-pos   | <value>                                                            |\n\t\tThen the image with overlay is displayed\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is <alignment> to fit content\n\t\tExamples:\n\t\t\t| value  | alignment     |\n\t\t\t| left   | left aligned  |\n\t\t\t| center | centered      |\n\t\t\t| right  | right aligned |\n\t\t\t| N/A    | centered      |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay padding is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop         | value                                                              |\n\t\t\t| image-url    | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header       | \"Klip Rewards\"                                                     |\n\t\t\t| description  | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text  | \"Start earning\"                                                    |\n\t\t\t| layout       | \"overlay\"                                                          |\n\t\t\t| padding-text | <value>                                                            |\n\t\tThen the image with overlay is displayed\n\t\tAnd <padding> is applied around header, description and button\n\t\tExamples:\n\t\t\t| value      | padding    |\n\t\t\t| none       | no padding |\n\t\t\t| xxx-small  | xxx-small  |\n\t\t\t| xx-small   | xx-small   |\n\t\t\t| x-small    | x-small    |\n\t\t\t| small      | small      |\n\t\t\t| medium     | medium     |\n\t\t\t| large      | large      |\n\t\t\t| x-large    | x-large    |\n\t\t\t| xx-large   | xx-large   |\n\t\t\t| xxx-large  | xxx-large  |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A        | no padding |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay color and background is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop            | value                                                              |\n\t\t\t| image-url       | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header          | \"Klip Rewards\"                                                     |\n\t\t\t| description     | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text     | \"Start earning\"                                                    |\n\t\t\t| layout          | \"overlay\"                                                          |\n\t\t\t| text-color      | <textColor>                                                        |\n\t\t\t| overlay-color   | <overlayColor>                                                     |\n\t\t\t| overlay-opacity | <overlayOpacity>                                                   |\n\t\tThen the image with overlay is displayed\n\t\tAnd the overlay is <overlayColor>\n\t\tAnd the overlay has <overlayOpacity>\n\t\tAnd the text is <textColor>\n\t\tExamples:\n\t\t\t| textColor | overlayColor | overlayOpacity |\n\t\t\t| #fffc4b   | #ff7f7f      | 0.9            |\n\t\t\t| #1d0314   | #4baa1a      | 0              |\n\t\t\t| #211a27   | #aa481a      | 1              |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout displays an image on one side and on the other side a header, description, and button\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"columns\"                                                          |\n\t\tThen the image is displayed on the left\n\t\tAnd the following elements are displayed on the right\n\t\t\t| elements    |\n\t\t\t| header      |\n\t\t\t| description |\n\t\t\t| button      |\n\t\tWhen the component is scaled down to 599px\n\t\tThen the two-column layout switches to a row layout\n\t\tAnd the image is displayed on top\n\t\tAnd the content is displayed below\n\n\t@motivating\n\t@ui\n\tScenario Outline: Image position is configurable for desktop and mobile\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| image-pos        | <imagePos>                                                         |\n\t\t\t| image-mobile-pos | <imageMobilePos>                                                   |\n\t\tThen the image is displayed on the <imagePos>\n\t\tWhen the component is scaled down to 599px\n\t\tThen two-column layout switches to a row layout\n\t\tAnd image is displayed on the <imageMobilePos>\n\t\tExamples:\n\t\t\t| imagePos | imageMobilePos |\n\t\t\t| left     | top            |\n\t\t\t| right    | bottom         |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Padding is configurable for the image and text of two column layouts\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop          | value                                                              |\n\t\t\t| image-url     | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header        | \"Klip Rewards\"                                                     |\n\t\t\t| description   | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text   | \"Start earning\"                                                    |\n\t\t\t| layout        | \"columns\"                                                          |\n\t\t\t| padding-text  | <paddingText>                                                      |\n\t\t\t| padding-image | <paddingImage>                                                     |\n\t\tThen the two column layout is displayed\n\t\tAnd the image has padding <paddingImage>\n\t\tAnd the text has padding <paddingText>\n\t\tExamples:\n\t\t\t| paddingText | paddingImage |\n\t\t\t| xxx-small   | xxx-small    |\n\t\t\t| xx-small    | xx-small     |\n\t\t\t| x-small     | x-small      |\n\t\t\t| small       | small        |\n\t\t\t| medium      | medium       |\n\t\t\t| large       | large        |\n\t\t\t| x-large     | x-large      |\n\t\t\t| xx-large    | xx-large     |\n\t\t\t| xxx-large   | xxx-large    |\n\t\t\t| xxxx-large  | xxxx-large   |\n\t\t\t| none        | none         |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Two-column layout image division percentage is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| image-percentage | <percent>                                                          |\n\t\tThen the two column layout is displayed\n\t\tAnd the image takes up <percent> of the two-column layout\n\t\tAnd the text elements take up the remainder of the space\n\t\tExamples:\n\t\t\t| percent |\n\t\t\t| 25%     |\n\t\t\t| 42%     |\n\t\t\t| 66%     |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout text and background color is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| text-color       | <textColor>                                                        |\n\t\t\t| background-color | <backgroundColor>                                                  |\n\t\tThen the two column layout is displayed\n\t\tAnd the text has color <textColor>\n\t\tAnd the background has color <backgroundColor>\n\t\tExamples:\n\t\t\t| textColor | backgroundColor |\n\t\t\t| #fffc4b   | #ff7f7f         |\n\t\t\t| #1d0314   | #4baa1a         |\n\t\t\t| #211a27   | #aa481a         |";
@@ -15851,7 +15841,9 @@ const GeneralLoadingView = () => {
   return index.h(utils.LoadingView, null);
 };
 const GeneralErrorView = () => {
-  return (index.h(ErrorView.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 (index.h("sqm-form-message", { type: "error" },
+    index.h("p", { part: "alert-title" }, "There was a problem loading your form"),
+    index.h("p", { part: "alert-description" }, "Please refresh the page and try again. If this problem continues, contact our support team.")));
 };
 // STEP ONE
 const StepOne = () => {

package/dist/cjs/sqm-tabs.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a43a63b4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
-const utils = require('./utils-6847bc06.js');
+const utils = require('./utils-7cbd60cc.js');
 const reRender = require('./re-render-d516138a.js');
 const useChildElements = require('./useChildElements-966c9041.js');
 

package/dist/cjs/sqm-tax-and-cash.cjs.entry.js

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-require('./global-a3a85ff0.js');
+require('./global-38031ab9.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
-const utils$1 = require('./utils-6847bc06.js');
+const utils$1 = require('./utils-7cbd60cc.js');
 require('./JSS-8503a151.js');
-const ErrorView = require('./ErrorView-0f564e2a.js');
-const utils = require('./utils-940abb91.js');
+const utils = require('./utils-62fd5f09.js');
 const extractProps = require('./extractProps-e9c55ba8.js');
 const data = require('./data-d4339c2e.js');
 
@@ -1230,7 +1229,7 @@ const TaxAndCashMonolith = class {
         case "/dashboard":
           return (index.h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"), extractProps.extractProps(props, "sqm-tax-and-cash-dashboard_"))));
         case "/error":
-          return (index.h(ErrorView.ErrorView, { loadingErrorAlertHeader: this.loadingErrorAlertHeader, loadingErrorAlertDescription: this.loadingErrorAlertDescription }));
+          return (index.h("sqm-form-message", { type: "error" }, index.h("p", { part: "alert-title" }, this.loadingErrorAlertHeader), index.h("p", { part: "alert-description" }, this.loadingErrorAlertDescription)));
       }
     };
     return getStep() || index.h(utils.LoadingView, null);

package/dist/cjs/sqm-widget-verification.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-a43a63b4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-6847bc06.js');
+const utils = require('./utils-7cbd60cc.js');
 const extractProps = require('./extractProps-e9c55ba8.js');
 const keys = require('./keys-cff24974.js');
 

package/dist/cjs/{usePortalLogin-1c022d8d.js → usePortalLogin-6aa864ef.js}

@@ -3,7 +3,7 @@
 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 utils = require('./utils-6847bc06.js');
+const utils = require('./utils-7cbd60cc.js');
 
 function usePortalLogin(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;

package/dist/cjs/{utils-940abb91.js → utils-62fd5f09.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-a3a85ff0.js');
+const global = require('./global-38031ab9.js');
 const JSS = require('./JSS-8503a151.js');
 
 const style = {

package/dist/cjs/{utils-6847bc06.js → utils-7cbd60cc.js}

@@ -39,7 +39,12 @@ function sanitizeUrlPath(path) {
   cleanUrl.hash = url.hash;
   return cleanUrl;
 }
+function capitalizeFirstLetter(word) {
+  return word[0].toUpperCase() + word.slice(1);
+}
+console.log(capitalizeFirstLetter("warning"));
 
+exports.capitalizeFirstLetter = capitalizeFirstLetter;
 exports.getMissingProps = getMissingProps;
 exports.getProps = getProps;
 exports.luxonLocale = luxonLocale;

package/dist/collection/components/sqm-form-message/FormMessage.stories.js

@@ -4,29 +4,21 @@ export default {
 };
 export const SuccessAlert = () => {
   return (h("sqm-form-message", { type: "success" },
-    h("div", null, "This is a success message.")));
+    h("p", { part: "alert-title" }, "This is the title"),
+    h("p", { part: "alert-description" }, "This is the description")));
 };
 export const ErrorAlert = () => {
   return (h("sqm-form-message", { type: "error" },
-    h("div", null, "This is an error message")));
+    h("p", { part: "alert-title" }, "This is the title"),
+    h("p", { part: "alert-description" }, "This is the description")));
 };
 export const WarningAlert = () => {
   return (h("sqm-form-message", { type: "warning" },
-    h("div", null, "This is an error message")));
+    h("p", { part: "alert-title" }, "This is the title"),
+    h("p", { part: "alert-description" }, "This is the description")));
 };
 export const InfoAlert = () => {
   return (h("sqm-form-message", { type: "info" },
-    h("div", null, "This is an info message")));
-};
-export const FullStackSuccess = () => {
-  return (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
-    h("div", { class: "AlertContent" },
-      h("div", { part: "successalert-text" }, "Title"),
-      h("div", { part: "successalert-subtext" }, "Body text."),
-      h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: () => {
-          console.log("click");
-        } }, "Primary Action"),
-      h("sl-button", { class: "SecondaryTextButton", type: "text", onClick: () => {
-          console.log("click");
-        } }, "Secondary Action"))));
+    h("p", { part: "alert-title" }, "This is the title"),
+    h("p", { part: "alert-description" }, "This is the description")));
 };

package/dist/collection/components/sqm-form-message/sqm-form-message.css

@@ -1,25 +1,64 @@
 sl-alert::part(base) {
-  border: 1px solid;
-  border-radius: 3px;
-  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.1);
+  border: var(--sqm-border-thickness) solid;
+  border-radius: var(--sqm-border-radius-normal);
+  font-family: var(--sqm-primary-font);
 }
 
 .Error::part(base) {
-  background-color: var(--sl-color-danger-100);
-  border-color: var(--sl-color-danger-200);
+  color: var(--sqm-danger-color-text);
+  background-color: var(--sqm-danger-color-background);
+  border-color: var(--sqm-danger-color-border);
+  font-size: 14px;
+}
+
+.Error::part(icon) {
+  color: var(--sqm-danger-color-icon);
+  font-size: 24px;
 }
 
 .Warning::part(base) {
-  background-color: var(--sl-color-warning-100);
-  border-color: var(--sl-color-warning-200);
+  color: var(--sqm-warning-color-text);
+  background-color: var(--sqm-warning-color-background);
+  border-color: var(--sqm-warning-color-border);
+}
+
+.Warning::part(icon) {
+  color: var(--sqm-warning-color-icon);
+  font-size: 24px;
 }
 
 .Success::part(base) {
-  background-color: var(--sl-color-success-100);
-  border-color: var(--sl-color-success-200);
+  color: var(--sqm-success-color-text);
+  background-color: var(--sqm-success-color-background);
+  border-color: var(--sqm-success-color-border);
+}
+
+.Success::part(icon) {
+  color: var(--sqm-success-color-icon);
+  font-size: 24px;
 }
 
 .Info::part(base) {
-  background-color: var(--sl-color-primary-100);
-  border-color: var(--sl-color-primary-200);
+  color: var(--sqm-informative-color-text);
+  background-color: var(--sqm-informative-color-background);
+  border-color: var(--sqm-informative-color-border);
+}
+
+.Info::part(icon) {
+  color: var(--sqm-informative-color-icon);
+  font-size: 24px;
+}
+
+::slotted(*) {
+  margin: 0;
+}
+
+::slotted(*[part=alert-title]) {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+::slotted(*[part=alert-description]),
+::slotted(*[part=erroralert-text]) {
+  font-size: 14px;
 }

package/dist/collection/components/sqm-form-message/sqm-form-message.js

@@ -13,22 +13,22 @@ export class FormMessage {
   render() {
     if (this.type === "error") {
       return (h("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: "Error", type: "danger", open: true },
-        h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }),
+        h("sl-icon", { part: "alert-icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }),
         h("slot", null)));
     }
     else if (this.type === "info") {
       return (h("sl-alert", { exportparts: "base: infoalert-base, icon:infoalert-icon", class: "Info", type: "primary", open: true },
-        h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }),
+        h("sl-icon", { slot: "icon", part: "alert-icon", name: `${this.icon ? this.icon : "info-circle"}` }),
         h("slot", null)));
     }
     else if (this.type === "warning") {
       return (h("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: "Warning", type: "warning", open: true },
-        h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }),
+        h("sl-icon", { part: "alert-icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }),
         h("slot", null)));
     }
     else {
       return (h("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: "Success", type: "success", open: true },
-        h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }),
+        h("sl-icon", { part: "alert-icon", slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }),
         h("slot", null)));
     }
   }

package/dist/collection/components/sqm-stencilbook/Themes.js

@@ -286,7 +286,7 @@ export const Google = {
     },
     informative: {
       text: "#01368c",
-      border: "#A8DCD7",
+      border: "#BFDBFE",
       background: "#E8F0FE",
       iconAndBadge: "#4285F4",
     },

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

@@ -26,6 +26,9 @@ const style = {
   },
   CodeInput: {
     maxWidth: "40px",
+    "&::part(base)": {
+      borderRadius: "4px !important",
+    },
     "&::part(input)": {
       margin: "0",
       padding: "0 var(--sl-input-spacing-small)",
@@ -35,6 +38,9 @@ const style = {
   CodeInputError: {
     ...ErrorStyles,
     maxWidth: "40px",
+    "&::part(base)": {
+      borderRadius: "4px !important",
+    },
     "&::part(input)": {
       margin: "0",
       padding: "0 var(--sl-input-spacing-small)",
@@ -42,7 +48,7 @@ const style = {
     },
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-text)",
     fontSize: "var(--sl-font-size-small)",
     margin: "0",
   },
@@ -85,7 +91,11 @@ export function WidgetCodeVerificationView(props) {
     id: "resendCodeText",
     defaultMessage: text.resendCodeText,
   }, {
-    resendCodeLink: (h("a", { href: "", style: { textDecoration: "none" }, onClick: (e) => {
+    resendCodeLink: (h("a", { href: "", style: {
+        textDecoration: "underline",
+        color: "inherit",
+        cursor: "pointer",
+      }, onClick: (e) => {
         e.preventDefault();
         callbacks.resendEmail();
       } }, text.resendCodeLabel)),

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",
@@ -56,6 +49,12 @@ const vanillaStyle = `
 :host([hidden]): {
   display: none;
 }
+
+a {
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
 `;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -71,10 +70,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,