@saasquatch/mint-components 1.15.0-4 → 1.15.0-40

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

@@ -34,7 +34,7 @@ const style = {
     gap: "8px",
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   DescriptionText: {
@@ -43,42 +43,29 @@ const style = {
   BoldText: {
     fontWeight: "bold",
   },
-  SecondaryBtn: {
-    "&::part(base)": {
-      color: "var(--sl-color-gray-800) !important",
-    },
-    "&::part(label)": {
-      padding: "0px",
-      margin: "0px",
-    },
-  },
   ErrorAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      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(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   InfoAlert: {
     "&::part(base)": {
-      backgroundColor: "transparent",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
-      padding: "0px",
-      marginBottom: "16px",
+      padding: "0 16px",
       border: "none",
-    },
-    "&::part(message)": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      padding: "10px",
-      height: "max-content",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-sky-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   Container: {
@@ -88,16 +75,6 @@ const style = {
     flexDirection: "column",
     gap: "16px",
   },
-  Link: {
-    color: "var(--sl-color-sky-500)",
-    textDecoration: "none",
-    "&:visited": {
-      color: "var(--sl-color-sky-500)",
-    },
-    "&:hover": {
-      textDecoration: "underline",
-    },
-  },
   CheckboxWrapper: {
     display: "flex",
     justifyContent: "flex-start",
@@ -111,7 +88,7 @@ const style = {
     fontSize: "var(--sl-font-size-small)",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
 };
@@ -127,14 +104,10 @@ const vanillaStyle = `
        box-sizing: border-box;
     }
 
-    p {
-      line-height: 18px;
-      color: var(--sl-color-gray-800);
-       font-size: var(--sl-font-size-small);
-    }
-
     a {
       cursor: pointer;
+      color: var(--sqm-text);
+      text-decoration: underline;
     }
 
 

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

@@ -648,7 +648,7 @@ function useDocusignFormDemo(props) {
   return deepmerge({
     text: props.getTextProps(),
     states: {
-      step: "4",
+      step: "3",
       disabled: false,
       submitDisabled: false,
       loading: false,
@@ -681,7 +681,7 @@ const DemoDocusignIframe = ({ callbacks }) => {
   return (h("div", { style: {
       width: "100%",
       height: "600px",
-      background: "#fafafa",
+      background: "inherit",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",

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

@@ -14,6 +14,7 @@ const style = {
     justifyContent: "flex-start",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
+    marginBottom: "16px",
     "& sl-radio::part(base)": {
       alignItems: "start",
     },
@@ -54,31 +55,30 @@ const style = {
     marginTop: "10px",
   },
   DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
-  },
-  SecondaryBtn: {
-    "&::part(base)": {
-      color: "var(--sl-color-gray-800) !important",
-    },
+    color: "var(--sqm-text-subdued)",
   },
   AlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   PartnerAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
+      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(--sl-color-blue-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   InfoAlert: {
@@ -103,10 +103,36 @@ const style = {
     width: "26px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
     marginBottom: "var(--sl-spacing-small)",
   },
+  PrimaryButton: {
+    "&::part(base)": {
+      background: "var(--sqm-primary-button-background)",
+      color: "var(--sqm-primary-button-color)",
+      borderColor: "var(--sqm-primary-button-color-border)",
+      borderRadius: "var(--sqm-primary-button-radius)",
+    },
+    "&::part(base):hover": {
+      background: "var(--sqm-primary-button-background-hover)",
+    },
+  },
+  TertiaryButton: {
+    "&::part(base)": {
+      background: "var(--sqm-tertiary-button-background)",
+      color: "var(--sqm-tertiary-button-color)",
+      borderColor: "var(--sqm-tertiary-button-color-border)",
+      borderRadius: "var(--sqm-tertiary-button-radius)",
+      width: "max-content",
+      display: "flex",
+      margin: "auto",
+    },
+    "&::part(base):hover": {
+      color: "var(--sqm-text)",
+      background: "var(--sqm-tertiary-button-background-hover)",
+    },
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -114,17 +140,25 @@ const vanillaStyle = `
     :host{
       display: block;   
     }
+
+    hr {
+      border: 1px solid var(--sqm-border-color);
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+
+    a:hover {
+      cursor: pointer;
+    }
     * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
     }
 
-    p {
-      line-height: 18px;
-      color: var(--sl-color-gray-800);
-       font-size: var(--sl-font-size-small);
-    }
   `;
 export const IndirectTaxFormView = (props) => {
   var _a;
@@ -190,8 +224,8 @@ export const IndirectTaxFormView = (props) => {
               text.otherRegion,
               h("p", { class: classes.DescriptionText }, text.otherRegionSubtext))),
           slots.registeredInDifferentCountryDetailsSlot)),
-      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.InfoAlert },
-        h("sl-icon", { class: classes.InfoWarningIcon, slot: "icon", name: "exclamation-triangle" }),
+      h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "primary", open: true, class: classes.PartnerAlertContainer },
+        h("sl-icon", { slot: "icon", name: "exclamation-triangle" }),
         intl.formatMessage({
           id: "cannotChangeInfoAlert",
           defaultMessage: text.cannotChangeInfoAlert,
@@ -199,6 +233,6 @@ export const IndirectTaxFormView = (props) => {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })),
       h("div", { class: classes.BtnContainer },
-        h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        h("sl-button", { class: classes.SecondaryBtn, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
+        h("sl-button", { class: classes.PrimaryButton, type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
+        h("sl-button", { class: classes.TertiaryButton, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: tertiarybutton-base" }, text.backButton))))));
 };

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

@@ -7,12 +7,12 @@ const style = {
     display: "grid",
     gridTemplateColumns: "1fr",
     gridGap: "var(--sl-spacing-large)",
-    background: "var(--sl-color-neutral-0)",
+    background: "inherit",
     boxShadow: "0px 2px 4px rgba(28, 28, 33, 0.12)",
-    borderRadius: "4px",
+    borderRadius: "var(--sqm-border-radius-normal)",
     padding: "var(--sl-spacing-large)",
     minHeight: "150px",
-    border: "1px solid var(--sl-color-gray-200)",
+    border: "1px solid var(--sqm-border-color)",
     maxWidth: "450px",
   },
   StatusContainer: {
@@ -22,7 +22,7 @@ const style = {
   },
   MainCurrencyLabel: {
     fontWeight: "var(--sl-font-weight-normal)",
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
   },
   MainCurrency: {
     margin: 0,
@@ -31,12 +31,12 @@ const style = {
   },
   SubduedRegularText: {
     fontSize: "var(--sl-font-size-small)",
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     margin: 0,
     width: "auto",
   },
   PaypalEmail: {
-    borderRight: "1px solid var(--sl-color-gray-200)",
+    borderRight: "1px solid var(--sqm-border-color)",
     paddingRight: "var(--sl-spacing-small)",
     "@media (max-width: 499px)": {
       borderRight: "none",
@@ -44,7 +44,7 @@ const style = {
     },
   },
   PaypalDetailsContainer: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     display: "flex",
     gap: "var(--sl-spacing-small)",
     justifyContent: "flex-start",
@@ -65,7 +65,7 @@ const style = {
     },
   },
   AccountDetailsContainer: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     display: "flex",
     gap: "var(--sl-spacing-small)",
     justifyContent: "flex-start",
@@ -78,7 +78,7 @@ const style = {
     gap: "var(--sl-spacing-xx-small) var(--sl-spacing-small)",
     paddingTop: "var(--sq-spacing-xx-small)",
     "& > :not(:last-child)": {
-      borderRight: "1px solid var(--sl-color-gray-200)",
+      borderRight: "1px solid var(--sqm-border-color)",
     },
     "& > :nth-child(3)": {
       border: "none",
@@ -95,7 +95,7 @@ const style = {
   },
   W9Container: {
     paddingTop: "var(--sl-spacing-large)",
-    borderTop: "1px solid var(--sl-color-gray-200)",
+    borderTop: "1px solid var(--sqm-border-color)",
   },
   SkeletonOne: {
     width: "25%",
@@ -111,15 +111,15 @@ const style = {
   },
   Alert: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-warning-100)",
-      border: "1px solid var(--sl-color-warning-200)",
+      backgroundColor: "var(--sqm-warning-color-background)",
+      border: "1px solid var(--sqm-warning-color-border)",
       padding: "0 16px",
     },
     "& sl-icon": {
       margin: 0,
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
+      color: "var(--sqm-warning-color-text)",
       margin: 0,
     },
   },

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

@@ -4,21 +4,21 @@ import { createStyleSheet } from "../../../styling/JSS";
 const style = {
   ErrorAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-text)",
     },
   },
   WarningAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-yellow-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-warning-color-background)",
+      border: "none",
       maxWidth: "600px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
+      color: "var(--sqm-warning-color-text)",
     },
   },
   WarningHoldAlertContainer: {
@@ -29,7 +29,7 @@ const style = {
       backgroundColor: "transparent",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
+      color: "var(--sqm-warning-color-text)",
     },
   },
   ErrorHoldAlertContainer: {
@@ -40,13 +40,13 @@ const style = {
       backgroundColor: "transparent",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   ExpiringSoonAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-yellow-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-warning-color-background)",
+      border: "none",
     },
   },
   BankingInformationContainer: {
@@ -54,7 +54,7 @@ const style = {
   },
   IndirectTaxPreviewContainer: {
     marginTop: "var(--sl-spacing-x-large)",
-    borderTop: "1px solid var(--sl-color-neutral-200)",
+    borderTop: "1px solid var(--sqm-border-color)",
   },
   IndirectTaxPreviewHeaderContainer: {
     marginTop: "var(--sl-spacing-large)",
@@ -63,7 +63,7 @@ const style = {
     display: "flex",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
-      color: "var(--sl-color-green-500)",
+      color: "var(--sqm-success-color-text)",
     },
   },
   IndirectTaxPreviewDetails: {
@@ -77,11 +77,11 @@ const style = {
     marginTop: "var(--sl-spacing-medium)",
   },
   NotRegisteredIndirectTaxText: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
   },
   TaxDocumentsContainer: {
     marginTop: "var(--sl-spacing-xx-large)",
-    borderTop: "1px solid var(--sl-color-neutral-200)",
+    borderTop: "1px solid var(--sqm-border-color)",
   },
   TaxDocumentsSectionHeaderContainer: {
     marginTop: "var(--sl-spacing-x-large)",
@@ -98,7 +98,7 @@ const style = {
     "& p": {
       margin: "0",
       paddingTop: "2px",
-      color: "var(--sl-color-gray-500)",
+      color: "var(--sqm-text-subdued)",
     },
   },
   StatusAlert: {
@@ -133,7 +133,7 @@ const style = {
   },
   TaxDocSubtext: {
     margin: "0",
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     lineHeight: "var(--sl-spacing-medium)",
     fontSize: "var(--sl-font-size-small)",
     marginLeft: "1px",
@@ -154,13 +154,13 @@ const style = {
     gap: "6px",
   },
   DescriptionText: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-x-small)",
     marginBottom: "none",
     maxWidth: "492px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
     marginTop: "0",
   },