@saasquatch/mint-components 1.14.3-5 → 1.14.3-7

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

@@ -649,6 +649,11 @@ const mockPaymentOptions = {
 };
 
 const style = {
+  ModalTitleContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-small)",
+    alignItems: "center",
+  },
   FormWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -792,14 +797,9 @@ const style = {
     "&::part(panel)": {
       maxWidth: "420px",
     },
-    "&::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-x-large)",
-      padding: "var(--sl-spacing-small) var(--sl-spacing-large) 0 var(--sl-spacing-large)",
     },
     "&::part(body)": {
       padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
@@ -885,11 +885,9 @@ const BankingInfoFormView = (props) => {
       styleString,
       vanillaStyle),
     index.h("sl-dialog", { class: sheet.classes.Dialog, open: states.showModal, "onSl-hide": callbacks.onModalClose },
-      index.h("div", null,
-        index.h("h1", null,
-          index.h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } })),
-        index.h("h2", { style: { fontSize: "var(--sl-font-size-x-large)" } }, text.modalTitle),
-        index.h("br", null)),
+      index.h("div", { class: classes.ModalTitleContainer, slot: "label" },
+        index.h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } }),
+        index.h("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
       index.h("p", null, text.modalDescription),
       index.h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, submit: true, exportparts: "base: primarybutton-base" }, text.modalButtonText)),
     index.h("div", { class: classes.TextContainer },
@@ -2423,6 +2421,11 @@ const DocusignIframe = ({ states, data, callbacks, text, }) => {
 };
 
 const style$3 = {
+  ModalTitleContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-small)",
+    alignItems: "center",
+  },
   FormWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -2538,8 +2541,9 @@ const style$3 = {
     "&::part(panel)": {
       maxWidth: "420px",
     },
-    "&::part(close-button)": {
-      marginBottom: "var(--sl-spacing-xx-large)",
+    "&::part(title)": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "600",
     },
     "&::part(body)": {
       padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
@@ -2588,14 +2592,10 @@ const DocusignFormView = (props) => {
     index.h("style", { type: "text/css" },
       styleString$3,
       vanillaStyle$2),
-    index.h("sl-dialog", { class: sheet$3.classes.Dialog, open: states.showModal, "onSl-hide": callbacks.onModalClose, "no-header": true },
-      index.h("div", { style: {
-          marginTop: "var(--sl-spacing-x-large)",
-          marginBottom: "var(--sl-spacing-large)",
-        } },
-        index.h("h1", null,
-          index.h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } })),
-        index.h("h2", { style: { fontSize: "var(--sl-font-size-x-large)" } }, text.modalTitle)),
+    index.h("sl-dialog", { class: sheet$3.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("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
       index.h("p", null, global.intl.formatMessage({
         id: "modalText",
         defaultMessage: text.modalDescription,
@@ -2763,7 +2763,7 @@ const DocusignForm = class {
     /**
      * @uiName Information modal description text
      */
-    this.modalDescription = "Ensure the name you enter in your tax form matches the name on your bank account, also known as the beneficiary name.{br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.";
+    this.modalDescription = "Remember the name you enter in your tax form. It must match the bank account holder name, also known as beneficiary name, configured in the next step. {br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.";
     /**
      * @uiName Information modal button text
      */

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

@@ -3,6 +3,11 @@ import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
 import { FORM_STEPS } from "../sqm-tax-and-cash/data";
 const style = {
+  ModalTitleContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-small)",
+    alignItems: "center",
+  },
   FormWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -146,14 +151,9 @@ const style = {
     "&::part(panel)": {
       maxWidth: "420px",
     },
-    "&::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-x-large)",
-      padding: "var(--sl-spacing-small) var(--sl-spacing-large) 0 var(--sl-spacing-large)",
     },
     "&::part(body)": {
       padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
@@ -239,11 +239,9 @@ export const BankingInfoFormView = (props) => {
       styleString,
       vanillaStyle),
     h("sl-dialog", { class: sheet.classes.Dialog, open: states.showModal, "onSl-hide": callbacks.onModalClose },
-      h("div", null,
-        h("h1", null,
-          h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } })),
-        h("h2", { style: { fontSize: "var(--sl-font-size-x-large)" } }, text.modalTitle),
-        h("br", null)),
+      h("div", { class: classes.ModalTitleContainer, slot: "label" },
+        h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } }),
+        h("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
       h("p", null, text.modalDescription),
       h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, submit: true, exportparts: "base: primarybutton-base" }, text.modalButtonText)),
     h("div", { class: classes.TextContainer },

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

@@ -3,6 +3,11 @@ import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
 import { FORM_STEPS } from "../sqm-tax-and-cash/data";
 const style = {
+  ModalTitleContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-small)",
+    alignItems: "center",
+  },
   FormWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -118,8 +123,9 @@ const style = {
     "&::part(panel)": {
       maxWidth: "420px",
     },
-    "&::part(close-button)": {
-      marginBottom: "var(--sl-spacing-xx-large)",
+    "&::part(title)": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "600",
     },
     "&::part(body)": {
       padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
@@ -168,14 +174,10 @@ export const DocusignFormView = (props) => {
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    h("sl-dialog", { class: sheet.classes.Dialog, open: states.showModal, "onSl-hide": callbacks.onModalClose, "no-header": true },
-      h("div", { style: {
-          marginTop: "var(--sl-spacing-x-large)",
-          marginBottom: "var(--sl-spacing-large)",
-        } },
-        h("h1", null,
-          h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } })),
-        h("h2", { style: { fontSize: "var(--sl-font-size-x-large)" } }, text.modalTitle)),
+    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("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
       h("p", null, intl.formatMessage({
         id: "modalText",
         defaultMessage: text.modalDescription,

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

@@ -127,7 +127,7 @@ export class DocusignForm {
     /**
      * @uiName Information modal description text
      */
-    this.modalDescription = "Ensure the name you enter in your tax form matches the name on your bank account, also known as the beneficiary name.{br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.";
+    this.modalDescription = "Remember the name you enter in your tax form. It must match the bank account holder name, also known as beneficiary name, configured in the next step. {br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.";
     /**
      * @uiName Information modal button text
      */
@@ -659,7 +659,7 @@ export class DocusignForm {
       },
       "attribute": "modal-description",
       "reflect": false,
-      "defaultValue": "\"Ensure the name you enter in your tax form matches the name on your bank account, also known as the beneficiary name.{br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.\""
+      "defaultValue": "\"Remember the name you enter in your tax form. It must match the bank account holder name, also known as beneficiary name, configured in the next step. {br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.\""
     },
     "modalButtonText": {
       "type": "string",

package/dist/esm/sqm-banking-info-form_17.entry.js

@@ -645,6 +645,11 @@ const mockPaymentOptions = {
 };
 
 const style = {
+  ModalTitleContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-small)",
+    alignItems: "center",
+  },
   FormWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -788,14 +793,9 @@ const style = {
     "&::part(panel)": {
       maxWidth: "420px",
     },
-    "&::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-x-large)",
-      padding: "var(--sl-spacing-small) var(--sl-spacing-large) 0 var(--sl-spacing-large)",
     },
     "&::part(body)": {
       padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
@@ -881,11 +881,9 @@ const BankingInfoFormView = (props) => {
       styleString,
       vanillaStyle),
     h("sl-dialog", { class: sheet.classes.Dialog, open: states.showModal, "onSl-hide": callbacks.onModalClose },
-      h("div", null,
-        h("h1", null,
-          h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } })),
-        h("h2", { style: { fontSize: "var(--sl-font-size-x-large)" } }, text.modalTitle),
-        h("br", null)),
+      h("div", { class: classes.ModalTitleContainer, slot: "label" },
+        h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } }),
+        h("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
       h("p", null, text.modalDescription),
       h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, submit: true, exportparts: "base: primarybutton-base" }, text.modalButtonText)),
     h("div", { class: classes.TextContainer },
@@ -2419,6 +2417,11 @@ const DocusignIframe = ({ states, data, callbacks, text, }) => {
 };
 
 const style$3 = {
+  ModalTitleContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-small)",
+    alignItems: "center",
+  },
   FormWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -2534,8 +2537,9 @@ const style$3 = {
     "&::part(panel)": {
       maxWidth: "420px",
     },
-    "&::part(close-button)": {
-      marginBottom: "var(--sl-spacing-xx-large)",
+    "&::part(title)": {
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "600",
     },
     "&::part(body)": {
       padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
@@ -2584,14 +2588,10 @@ const DocusignFormView = (props) => {
     h("style", { type: "text/css" },
       styleString$3,
       vanillaStyle$2),
-    h("sl-dialog", { class: sheet$3.classes.Dialog, open: states.showModal, "onSl-hide": callbacks.onModalClose, "no-header": true },
-      h("div", { style: {
-          marginTop: "var(--sl-spacing-x-large)",
-          marginBottom: "var(--sl-spacing-large)",
-        } },
-        h("h1", null,
-          h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } })),
-        h("h2", { style: { fontSize: "var(--sl-font-size-x-large)" } }, text.modalTitle)),
+    h("sl-dialog", { class: sheet$3.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("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
       h("p", null, intl.formatMessage({
         id: "modalText",
         defaultMessage: text.modalDescription,
@@ -2759,7 +2759,7 @@ const DocusignForm = class {
     /**
      * @uiName Information modal description text
      */
-    this.modalDescription = "Ensure the name you enter in your tax form matches the name on your bank account, also known as the beneficiary name.{br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.";
+    this.modalDescription = "Remember the name you enter in your tax form. It must match the bank account holder name, also known as beneficiary name, configured in the next step. {br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.";
     /**
      * @uiName Information modal button text
      */