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

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-5504c2b6.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-coupon-code/sqm-coupon-code.js

@@ -512,7 +512,7 @@ export class CouponCode {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "Border color of share link container (default is set to 1px solid transparent)"
+        "text": "Border color of share link container"
       },
       "attribute": "border-color",
       "reflect": false

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout-view.js

@@ -6,14 +6,14 @@ export function DividedLayoutView(props, children) {
       return {
         "border-right": props.borderless
           ? "none"
-          : `1px solid ${props.borderColor || "var(--sqm-text)"}`,
+          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
       };
     }
     else {
       return {
         "border-bottom": props.borderless
           ? "none"
-          : `1px solid ${props.borderColor || "var(--sqm-text)"}`,
+          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
       };
     }
   };

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout.js

@@ -18,7 +18,7 @@ export class DividedLayout {
      * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.
      * @uiName Border style
      */
-    this.dividerStyle = "1px solid #EAEAEA";
+    this.dividerStyle = "var(--sqm-border-thickness) solid var(--sqm-border-color)";
     /**
      * Background color of the divider
      * @uiName Divider Background Color
@@ -109,7 +109,7 @@ export class DividedLayout {
       },
       "attribute": "divider-style",
       "reflect": false,
-      "defaultValue": "\"1px solid #EAEAEA\""
+      "defaultValue": "\"var(--sqm-border-thickness) solid var(--sqm-border-color)\""
     },
     "backgroundColor": {
       "type": "string",

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-name-fields/sqm-name-fields-view.js

@@ -33,7 +33,7 @@ sl-input::part(base):focus,
 sl-select::part(form-control-wrapper):focus,
 sl-textare::part(textarea-label):focus {
   border-color: none;
-  border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
+  border: var(--sqm-input-focus-border, var(--sqm-border-thickness) solid var(--sl-input-border-color-focus));
 }
 
 *::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar-view.js

@@ -72,7 +72,7 @@ export function NavigationSidebarView(props, children) {
   .menu-items {
     display: none;
     padding: 20px;
-    border-right: 1px solid #eaeaea;
+    border-right: var(--sqm-border-thickness) solid var(--sqm-border-color);
     padding-top: 60px;
     background: var(--sqm-portal-background); 
     width: 100vw;

package/dist/collection/components/sqm-portal-forgot-password/sqm-portal-forgot-password.js

@@ -62,7 +62,7 @@ export class PortalForgotPassword {
      * @uiName Border style
      * @uiWidget textArea
      */
-    this.border = "1px solid var(--sqm-border-color, #eaeaea)";
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -332,7 +332,7 @@ export class PortalForgotPassword {
       },
       "attribute": "border",
       "reflect": false,
-      "defaultValue": "\"1px solid var(--sqm-border-color, #eaeaea)\""
+      "defaultValue": "\"var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)\""
     },
     "demoData": {
       "type": "unknown",

package/dist/collection/components/sqm-portal-frame/sqm-portal-frame.js

@@ -20,21 +20,20 @@ export class PortalFrame {
      * @uiWidget color
      * @uiType string
      */
-    this.backgroundColor = "var(--sqm-portal-background, #fff);";
-    // TODO: Replace with border variable later
+    this.backgroundColor = "var(--sqm-portal-background, #fff)";
     /**
      * Borders placed to seperate the header and footer from the body content.
      * @uiName Border
      * @uiType string
      */
-    this.border = "1px solid var(--sqm-text, #eaeaea);";
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
     /**
      * Background color for the header and footer.
      * @uiName Header and Footer Background Color
      * @uiWidget color
      * @uiType string
      */
-    this.headerAndFooterBackgroundColor = "var(--sqm-portal-background, #fff);";
+    this.headerAndFooterBackgroundColor = "var(--sqm-portal-background, #fff)";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -96,7 +95,7 @@ export class PortalFrame {
       },
       "attribute": "background-color",
       "reflect": false,
-      "defaultValue": "\"var(--sqm-portal-background, #fff);\""
+      "defaultValue": "\"var(--sqm-portal-background, #fff)\""
     },
     "border": {
       "type": "string",
@@ -120,7 +119,7 @@ export class PortalFrame {
       },
       "attribute": "border",
       "reflect": false,
-      "defaultValue": "\"1px solid var(--sqm-text, #eaeaea);\""
+      "defaultValue": "\"var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)\""
     },
     "headerAndFooterBackgroundColor": {
       "type": "string",
@@ -147,7 +146,7 @@ export class PortalFrame {
       },
       "attribute": "header-and-footer-background-color",
       "reflect": false,
-      "defaultValue": "\"var(--sqm-portal-background, #fff);\""
+      "defaultValue": "\"var(--sqm-portal-background, #fff)\""
     },
     "demoData": {
       "type": "unknown",

package/dist/collection/components/sqm-radio-card/sqm-radio-card-view.js

@@ -42,8 +42,8 @@ const vanillaStyle = `
   `;
 export const RadioCardView = ({ title, icon, description, selected, }) => {
   const border = selected
-    ? "1px solid var(--sl-color-primary-500)"
-    : "1px solid #CACFD3";
+    ? "var(--sqm-border-thickness) solid var(--sqm-primary-color)"
+    : "var(--sqm-border-thickness) solid var(--sqm-border-color)";
   return (h("div", { part: "sqm-base", class: sheet.classes.Container, style: {
       border,
     } },

package/dist/collection/components/sqm-referral-card/sqm-referral-card-view.js

@@ -38,7 +38,9 @@ export function ReferralCardView(props) {
   const styleString = sheet.toString();
   const borderColor = props.borderColor || "var(--sqm-border-color)";
   return (h("div", { part: "sqm-base", class: sheet.classes.Container, style: {
-      border: `${props.hideBorder ? "none" : "1px solid " + borderColor}`,
+      border: `${props.hideBorder
+        ? "none"
+        : `var(--sqm-border-thickness) solid ${borderColor}`}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,

package/dist/collection/components/sqm-referral-card/sqm-referral-card.js

@@ -299,7 +299,7 @@ export class ReferralCard {
             "text": "color",
             "name": "format"
           }],
-        "text": "Border color of share link container (default is set to 1px solid transparent)"
+        "text": "Border color of container"
       },
       "attribute": "border-color",
       "reflect": false
@@ -348,7 +348,7 @@ export class ReferralCard {
             "text": "number",
             "name": "uiType"
           }],
-        "text": "The border radius on the share link container (in pixels)"
+        "text": "The border radius (in pixels)"
       },
       "attribute": "border-radius",
       "reflect": false

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.js

@@ -36,7 +36,7 @@ export class ReferralTableRewardsCell {
           padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
         },
         "&::part(base)": {
-          border: "1px solid var(--sqm-border-color)",
+          border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
           opacity: "1",
         },
         "&::part(summary-icon)": {

package/dist/collection/components/sqm-share-code/sqm-share-code.js

@@ -364,7 +364,7 @@ export class ShareCode {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "Border color of share link container (default is set to 1px solid transparent)"
+        "text": "Border color of share link container"
       },
       "attribute": "border-color",
       "reflect": false

package/dist/collection/components/sqm-share-link/sqm-share-link.js

@@ -242,7 +242,7 @@ export class ShareLink {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "Border color of share link container (default is set to 1px solid transparent)"
+        "text": "Border color of share link container"
       },
       "attribute": "border-color",
       "reflect": false

package/dist/collection/components/sqm-stat-container/sqm-stat-container-view.js

@@ -25,7 +25,7 @@ export function StatContainerView(props, children) {
       "& > *": {
         "border-right": props.hideBorder
           ? "none"
-          : "1px solid var(--sqm-text-subdued)",
+          : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
         "padding-right": divideSpace(),
       },
       "& > :last-child": {
@@ -34,7 +34,7 @@ export function StatContainerView(props, children) {
       "& > ::slotted(*)": {
         "border-right": props.hideBorder
           ? "none"
-          : "1px solid var(--sqm-text-subdued)",
+          : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
         "padding-right": divideSpace(),
       },
       "& > ::slotted(*:last-child)": {
@@ -50,7 +50,7 @@ export function StatContainerView(props, children) {
       display: "flex",
     },
     BorderFix: {
-      "border-right": "1px solid transparent",
+      "border-right": "var(--sqm-border-thickness) solid transparent",
       width: "0px",
       "margin-left": "-1px",
     },

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-table-row/sqm-table-row.js

@@ -8,7 +8,7 @@ export class TableRow {
     /**
      * @uiName Border
      */
-    this.border = "1px solid #EAEAEA";
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
   }
   render() {
     return (h(Host, { style: { display: "contents" } },
@@ -37,7 +37,7 @@ export class TableRow {
       },
       "attribute": "border",
       "reflect": false,
-      "defaultValue": "\"1px solid #EAEAEA\""
+      "defaultValue": "\"var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)\""
     }
   }; }
 }

package/dist/collection/components/sqm-task-card/sqm-task-card-view.js

@@ -18,7 +18,7 @@ export function TaskCardView(props) {
         position: "relative",
         boxSizing: "border-box",
         background: content.backgroundColor || "var(--sqm-portal-background)",
-        border: `1px solid ${content.borderColor || "var(--sqm-border-color)"}`,
+        border: `var(--sqm-border-thickness) solid ${content.borderColor || "var(--sqm-border-color)"}`,
         borderRadius: "var(--sqm-border-radius-normal)",
         boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
         fontSize: "var(--sl-font-size-small)",
@@ -51,7 +51,7 @@ export function TaskCardView(props) {
       fontSize: "var(--sl-font-size-small)",
       padding: "var(--sl-spacing-medium)",
       color: content.textColor || "var(--sl-color-primary-600)",
-      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
       borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
       borderBottom: "none",
       background: content.backgroundColor || "var(--sl-color-primary-50)",
@@ -68,7 +68,7 @@ export function TaskCardView(props) {
       fontSize: "var(--sl-font-size-small)",
       padding: "var(--sl-spacing-medium)",
       color: content.textColor || "var(--sl-color-warning-600)",
-      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
       borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
       borderBottom: "none",
       background: content.backgroundColor || "var(--sl-color-warning-50)",

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 = () => {