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

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

@@ -1,20 +1,20 @@
 import { h, r as registerInstance, c as Host, g as getElement } from './index-91e7729f.js';
 import { m as useRef, k as useState, f as useEffect, n as h$1, l, u as useMemo, b as browser, j as useReducer } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-1d207c9e.js';
+import { i as intl } from './global-66746c30.js';
 import { d as dist, _, L, J, t as Pn, F as Fn, x as $n, $ as $e, i as isDemo, q as En, u as useCallback, R as Rn, M as Mn, I as In, S as Sn } from './index.module-89a79f66.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { g as getProps, l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { E as ErrorStyles } from './mixins-83f90fa1.js';
-import { G as GenericTableView } from './GenericTableView-7b9087af.js';
+import { E as ErrorStyles } from './mixins-f750863a.js';
+import { G as GenericTableView } from './GenericTableView-3b6f9ccc.js';
 import { u as useRerenderListener, a as useRequestRerender } from './re-render-cc945f38.js';
 import { u as useChildElements } from './useChildElements-7945ae56.js';
 import { l as luxon } from './luxon-8d51c92b.js';
 import { g as generateUserError } from './useReferralTable-b3876ed6.js';
-import { T as TextSpanView } from './sqm-text-span-view-ca32495e.js';
+import { T as TextSpanView } from './sqm-text-span-view-cd3902e5.js';
 import { E as ErrorView } from './ErrorView-48e2b969.js';
-import { t as taxTypeToName, v as validTaxDocument, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, g as getCountryObj, O as OtherRegionSlotView, I as InvoiceTableView, L as LoadingView, c as vatLabels, G as GeneralLoadingView, f as formatErrorMessage, d as validateBillingField, o as objectIsFull, A as ADDRESS_REGIONS } from './sqm-invoice-table-view-e0c9772a.js';
+import { t as taxTypeToName, v as validTaxDocument, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, g as getCountryObj, O as OtherRegionSlotView, I as InvoiceTableView, L as LoadingView, c as vatLabels, G as GeneralLoadingView, f as formatErrorMessage, d as validateBillingField, o as objectIsFull, A as ADDRESS_REGIONS } from './sqm-invoice-table-view-b7e91eef.js';
 import { e as extractProps } from './extractProps-ae1afbb3.js';
 import { b as VERIFICATION_EVENT_KEY, V as VERIFICATION_EMAIL_NAMESPACE, S as SHOW_CODE_NAMESPACE, a as VERIFICATION_PARENT_NAMESPACE } from './keys-406491dc.js';
 import { T as TAX_FORM_UPDATED_EVENT_KEY, a as useVeriffApp, g as getStatus, V as VERIFF_COMPLETE_EVENT_KEY } from './usePayoutStatus-58aa56b4.js';
@@ -675,29 +675,26 @@ const style = {
     gap: "8px",
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
   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",
+      color: "var(--sqm-danger-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   RadioContainer: {
@@ -706,12 +703,15 @@ const style = {
   },
   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)",
     },
   },
   Checkbox: {
@@ -725,8 +725,8 @@ const style = {
   InputContainer: {
     padding: "16px",
     margin: "16px 0px 16px 0px",
-    borderTop: "1px solid var(--sl-color-gray-300)",
-    borderBottom: "1px solid var(--sl-color-gray-300)",
+    borderTop: "1px solid var(--sqm-border-color)",
+    borderBottom: "1px solid var(--sqm-border-color)",
     display: "flex",
     flexDirection: "column",
     width: "100%",
@@ -763,23 +763,6 @@ const style = {
     borderRadius: "50px",
     background: "var(--sl-color-gray-200)",
   },
-  InfoAlert: {
-    "&::part(base)": {
-      backgroundColor: "transparent",
-      borderTop: "none",
-      border: "none",
-    },
-    "&::part(message)": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      padding: "10px",
-      height: "max-content",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-yellow-500)",
-    },
-  },
   InfoWarningIcon: {
     height: "26px",
     width: "26px",
@@ -802,20 +785,14 @@ const vanillaStyle = `
       font-weight: 600
     }
 
-    p {
-      line-height: 18px;
-      color: var(--sl-color-gray-800);
-      font-size: var(--sl-font-size-small);
-    }
-
     /* this class is dynamically applied in controller */
     .error-input::part(base) {
-      border: 1px solid var(--sl-color-danger-500);
-      border-radius: var(--sl-input-border-radius-medium);
+      border: 1px solid var(--sqm-danger-color-border);
+      border-radius: var(--sqm-input-border-radius);
     }
 
     .error-input::part(help-text) {
-      color: var(--sl-color-danger-500) !important;
+      color: var(--sqm-danger-color-text);
     }
     
   `;
@@ -913,7 +890,7 @@ const BankingInfoFormView = (props) => {
           : slots.paymentFixedDaySelectSlot))))),
       h("div", { class: classes.BtnContainer },
         h("sl-button", { type: "primary", disabled: states.disabled || states.saveDisabled, loading: states.saveLoading, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        !states.hideBackButton && (h("sl-button", { exportparts: "base: secondarybutton-base", class: classes.SecondaryBtn, type: "text", onClick: callbacks.onBack }, text.backButton))))));
+        !states.hideBackButton && (h("sl-button", { exportparts: "base: secondarybutton-base", type: "text", onClick: callbacks.onBack }, text.backButton))))));
 };
 
 // Hardcoded in Impact backend
@@ -2284,7 +2261,7 @@ const DocusignExpiredView = (props) => {
       h("sl-icon", { style: {
           width: "50px",
           height: "50px",
-          color: "var(--sl-color-neutral-500)",
+          color: "var(--sqm-text)",
         }, name: "clock" }),
       h("div", { class: classes.MessageContainer },
         h("p", { style: { margin: "0" } }, text.docusignExpired)),
@@ -2299,7 +2276,7 @@ const DocusignErrorView = (props) => {
       h("sl-icon", { style: {
           width: "50px",
           height: "50px",
-          color: "var(--sl-color-gray-500)",
+          color: "var(--sqm-text)",
         }, name: "exclamation-octagon" }),
       h("div", { class: classes.MessageContainer },
         h("p", { style: { margin: "0" } }, text.docusignError)),
@@ -2383,7 +2360,7 @@ const style$3 = {
     gap: "8px",
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   DescriptionText: {
@@ -2392,42 +2369,29 @@ const style$3 = {
   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: {
@@ -2437,16 +2401,6 @@ const style$3 = {
     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",
@@ -2460,7 +2414,7 @@ const style$3 = {
     fontSize: "var(--sl-font-size-small)",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
 };
@@ -2476,14 +2430,10 @@ const vanillaStyle$2 = `
        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;
     }
 
 
@@ -2690,7 +2640,7 @@ function useDocusignFormDemo(props) {
   return cjs({
     text: props.getTextProps(),
     states: {
-      step: "4",
+      step: "3",
       disabled: false,
       submitDisabled: false,
       loading: false,
@@ -2723,7 +2673,7 @@ const DemoDocusignIframe = ({ callbacks }) => {
   return (h("div", { style: {
       width: "100%",
       height: "600px",
-      background: "#fafafa",
+      background: "inherit",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -2747,6 +2697,7 @@ const style$4 = {
     justifyContent: "flex-start",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
+    marginBottom: "16px",
     "& sl-radio::part(base)": {
       alignItems: "start",
     },
@@ -2787,31 +2738,30 @@ const style$4 = {
     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: {
@@ -2836,10 +2786,36 @@ const style$4 = {
     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$4 = createStyleSheet(style$4);
 const styleString$4 = sheet$4.toString();
@@ -2847,17 +2823,25 @@ const vanillaStyle$3 = `
     :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);
-    }
   `;
 const IndirectTaxFormView = (props) => {
   var _a;
@@ -2923,8 +2907,8 @@ 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,
@@ -2932,8 +2916,8 @@ 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))))));
 };
 
 const CONNECT_PARTNER = dist.gql `
@@ -3848,7 +3832,7 @@ const InvoiceTableDownloadCell = class {
     const vanillaStyle = `svg:hover, svg:hover * {
       cursor: pointer;
     }`;
-    return (h(Host, null, h("style", null, vanillaStyle), !!this.downloadUrl && (h("a", { href: this.downloadUrl, target: "_blank" }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.625 12.4375C0.79076 12.4375 0.949732 12.5033 1.06694 12.6206C1.18415 12.7378 1.25 12.8967 1.25 13.0625V16.1875C1.25 16.519 1.3817 16.837 1.61612 17.0714C1.85054 17.3058 2.16848 17.4375 2.5 17.4375H17.5C17.8315 17.4375 18.1495 17.3058 18.3839 17.0714C18.6183 16.837 18.75 16.519 18.75 16.1875V13.0625C18.75 12.8967 18.8158 12.7378 18.9331 12.6206C19.0503 12.5033 19.2092 12.4375 19.375 12.4375C19.5408 12.4375 19.6997 12.5033 19.8169 12.6206C19.9342 12.7378 20 12.8967 20 13.0625V16.1875C20 16.8505 19.7366 17.4864 19.2678 17.9553C18.7989 18.4241 18.163 18.6875 17.5 18.6875H2.5C1.83696 18.6875 1.20107 18.4241 0.732233 17.9553C0.263392 17.4864 0 16.8505 0 16.1875V13.0625C0 12.8967 0.065848 12.7378 0.183058 12.6206C0.300269 12.5033 0.45924 12.4375 0.625 12.4375Z", fill: "#717179" }), h("path", { d: "M9.5575 14.88C9.61556 14.9382 9.68453 14.9844 9.76046 15.0159C9.83639 15.0474 9.91779 15.0636 10 15.0636C10.0822 15.0636 10.1636 15.0474 10.2395 15.0159C10.3155 14.9844 10.3844 14.9382 10.4425 14.88L14.1925 11.13C14.3099 11.0126 14.3758 10.8535 14.3758 10.6875C14.3758 10.5215 14.3099 10.3624 14.1925 10.245C14.0751 10.1276 13.916 10.0617 13.75 10.0617C13.584 10.0617 13.4249 10.1276 13.3075 10.245L10.625 12.9288V1.9375C10.625 1.77174 10.5592 1.61277 10.4419 1.49556C10.3247 1.37835 10.1658 1.3125 10 1.3125C9.83424 1.3125 9.67527 1.37835 9.55806 1.49556C9.44085 1.61277 9.375 1.77174 9.375 1.9375V12.9288L6.6925 10.245C6.57514 10.1276 6.41597 10.0617 6.25 10.0617C6.08403 10.0617 5.92486 10.1276 5.8075 10.245C5.69014 10.3624 5.62421 10.5215 5.62421 10.6875C5.62421 10.8535 5.69014 11.0126 5.8075 11.13L9.5575 14.88Z", fill: "#717179" }))))));
+    return (h(Host, null, h("style", null, vanillaStyle), !!this.downloadUrl && (h("a", { href: this.downloadUrl, target: "_blank" }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.625 12.4375C0.79076 12.4375 0.949732 12.5033 1.06694 12.6206C1.18415 12.7378 1.25 12.8967 1.25 13.0625V16.1875C1.25 16.519 1.3817 16.837 1.61612 17.0714C1.85054 17.3058 2.16848 17.4375 2.5 17.4375H17.5C17.8315 17.4375 18.1495 17.3058 18.3839 17.0714C18.6183 16.837 18.75 16.519 18.75 16.1875V13.0625C18.75 12.8967 18.8158 12.7378 18.9331 12.6206C19.0503 12.5033 19.2092 12.4375 19.375 12.4375C19.5408 12.4375 19.6997 12.5033 19.8169 12.6206C19.9342 12.7378 20 12.8967 20 13.0625V16.1875C20 16.8505 19.7366 17.4864 19.2678 17.9553C18.7989 18.4241 18.163 18.6875 17.5 18.6875H2.5C1.83696 18.6875 1.20107 18.4241 0.732233 17.9553C0.263392 17.4864 0 16.8505 0 16.1875V13.0625C0 12.8967 0.065848 12.7378 0.183058 12.6206C0.300269 12.5033 0.45924 12.4375 0.625 12.4375Z", fill: "var(--sqm-text-subdued)" }), h("path", { d: "M9.5575 14.88C9.61556 14.9382 9.68453 14.9844 9.76046 15.0159C9.83639 15.0474 9.91779 15.0636 10 15.0636C10.0822 15.0636 10.1636 15.0474 10.2395 15.0159C10.3155 14.9844 10.3844 14.9382 10.4425 14.88L14.1925 11.13C14.3099 11.0126 14.3758 10.8535 14.3758 10.6875C14.3758 10.5215 14.3099 10.3624 14.1925 10.245C14.0751 10.1276 13.916 10.0617 13.75 10.0617C13.584 10.0617 13.4249 10.1276 13.3075 10.245L10.625 12.9288V1.9375C10.625 1.77174 10.5592 1.61277 10.4419 1.49556C10.3247 1.37835 10.1658 1.3125 10 1.3125C9.83424 1.3125 9.67527 1.37835 9.55806 1.49556C9.44085 1.61277 9.375 1.77174 9.375 1.9375V12.9288L6.6925 10.245C6.57514 10.1276 6.41597 10.0617 6.25 10.0617C6.08403 10.0617 5.92486 10.1276 5.8075 10.245C5.69014 10.3624 5.62421 10.5215 5.62421 10.6875C5.62421 10.8535 5.69014 11.0126 5.8075 11.13L9.5575 14.88Z", fill: "var(--sqm-text-subdued)" }))))));
   }
 };
 
@@ -3879,12 +3863,12 @@ const style$5 = {
     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: {
@@ -3894,7 +3878,7 @@ const style$5 = {
   },
   MainCurrencyLabel: {
     fontWeight: "var(--sl-font-weight-normal)",
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
   },
   MainCurrency: {
     margin: 0,
@@ -3903,12 +3887,12 @@ const style$5 = {
   },
   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",
@@ -3916,7 +3900,7 @@ const style$5 = {
     },
   },
   PaypalDetailsContainer: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     display: "flex",
     gap: "var(--sl-spacing-small)",
     justifyContent: "flex-start",
@@ -3937,7 +3921,7 @@ const style$5 = {
     },
   },
   AccountDetailsContainer: {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     display: "flex",
     gap: "var(--sl-spacing-small)",
     justifyContent: "flex-start",
@@ -3950,7 +3934,7 @@ const style$5 = {
     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",
@@ -3967,7 +3951,7 @@ const style$5 = {
   },
   W9Container: {
     paddingTop: "var(--sl-spacing-large)",
-    borderTop: "1px solid var(--sl-color-gray-200)",
+    borderTop: "1px solid var(--sqm-border-color)",
   },
   SkeletonOne: {
     width: "25%",
@@ -3983,15 +3967,15 @@ const style$5 = {
   },
   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,
     },
   },
@@ -5391,21 +5375,21 @@ function useDemoTaxAndCash(props) {
 const style$6 = {
   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: {
@@ -5416,7 +5400,7 @@ const style$6 = {
       backgroundColor: "transparent",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
+      color: "var(--sqm-warning-color-text)",
     },
   },
   ErrorHoldAlertContainer: {
@@ -5427,13 +5411,13 @@ const style$6 = {
       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: {
@@ -5441,7 +5425,7 @@ const style$6 = {
   },
   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)",
@@ -5450,7 +5434,7 @@ const style$6 = {
     display: "flex",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
-      color: "var(--sl-color-green-500)",
+      color: "var(--sqm-success-color-text)",
     },
   },
   IndirectTaxPreviewDetails: {
@@ -5464,11 +5448,11 @@ const style$6 = {
     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)",
@@ -5485,7 +5469,7 @@ const style$6 = {
     "& p": {
       margin: "0",
       paddingTop: "2px",
-      color: "var(--sl-color-gray-500)",
+      color: "var(--sqm-text-subdued)",
     },
   },
   StatusAlert: {
@@ -5520,7 +5504,7 @@ const style$6 = {
   },
   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",
@@ -5541,13 +5525,13 @@ const style$6 = {
     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",
   },
@@ -7283,15 +7267,15 @@ const style$7 = {
   FormWrapper: {},
   ErrorInput: {
     "&::part(base)": {
-      border: "1px solid var(--sl-color-danger-500)",
+      border: "1px solid var(--sqm-danger-color-icon)",
       borderRadius: "var(--sl-input-border-radius-medium)",
     },
     "&::part(help-text)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   TextContainer: {
@@ -7322,9 +7306,6 @@ const style$7 = {
     justifyContent: "flex-start",
     flexDirection: "column",
   },
-  DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
-  },
   BoldText: {
     fontWeight: "bold",
   },
@@ -7335,26 +7316,31 @@ const style$7 = {
   },
   AlertContainer: {
     "&::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)",
     },
   },
   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)",
     },
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
   PhoneInputsSection: {
@@ -7388,11 +7374,15 @@ const vanillaStyle$4 = `
        padding: 0;
        box-sizing: border-box;
     }
+    a {
+      color: var(--sqm-text);
+      color: inherit !important;
+      text-decoration: underline;
+    }
 
     p {
       line-height: 18px;
-      color: var(--sl-color-gray-800);
-       font-size: var(--sl-font-size-small);
+      font-size: var(--sl-font-size-small);
     }
 
     sl-radio-group::part(base) {
@@ -7403,7 +7393,153 @@ const vanillaStyle$4 = `
     sl-select#phoneNumberCountryCode::part(menu) {
       min-width: 250px;
     }
-  `;
+
+    /* Corrected: Target sl-button::part(base) for primary button */
+    sl-button[type="primary"]::part(base){
+        background-color: var(--sqm-primary-button-background);
+        color: var(--sqm-primary-button-color);
+        border-color: var(--sqm-primary-button-color-border);
+        border-radius: var(--sqm-primary-button-radius);
+    }
+
+    sl-button[type="primary"]::part(base):hover{
+        background-color: var(--sqm-primary-button-background-hover);
+    }
+
+    sl-button[type="primary"]::part(base):focus{
+        box-shadow: none;
+    }
+
+    /* Corrected: Target sl-button::part(base) for secondary button */
+    sl-button[type="secondary"]::part(base){
+        background-color: var(--sqm-secondary-button-background);
+        color: var(--sqm-secondary-button-color);
+        border-color: var(--sqm-secondary-button-color-border);
+        border-radius: var(--sqm-secondary-button-radius);
+    }
+
+    sl-button[type="secondary"]::part(base):hover{
+        background-color: var(--sqm-secondary-button-background-hover);
+    }
+
+    /* Corrected: Target sl-button::part(base) for tertiary button */
+    sl-button[type="tertiary"]::part(base){
+        color: var(--sqm-text, var(--sl-color-neutral-800));
+        width: max-content;
+        display: flex;
+        margin: auto;
+    }
+
+*::part(primarybutton-base){
+  background-color: var(--sqm-primary-button-background);
+  color: var(--sqm-primary-button-color);
+  border-color: var(--sqm-primary-button-color-border);
+  border-radius: var(--sqm-primary-button-radius);
+}
+
+*::part(primarybutton-base):hover{
+  background-color: var(--sqm-primary-button-background-hover);
+}
+
+*::part(primarybutton-base):focus{
+  box-shadow: none;
+}
+
+*::part(secondarybutton-base){
+  background-color: var(--sqm-secondary-button-background);
+  color: var(--sqm-secondary-button-color);
+  border-color: var(--sqm-secondary-button-color-border);
+  border-radius: var(--sqm-secondary-button-radius);
+}
+
+*::part(secondarybutton-base):hover{
+  background-color: var(--sqm-secondary-button-background-hover);
+}
+
+*::part(tertiarybutton-base){
+  background-color: var(--sqm-tertiary-button-background);
+  color: var(--sqm-tertiary-button-color);
+  border-color: var(--sqm-tertiary-button-color-border);
+  border-radius: var(--sqm-tertiary-button-radius);
+  width: max-content;
+  display: flex;
+  margin: auto;
+}
+
+*::part(tertiarybutton-base):hover{
+  background: var(--sqm-tertiary-button-background-hover);
+}
+
+    sl-input::part(label),
+    sl-select::part(label),
+    sl-textarea::part(label){
+      font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
+      font-weight: var(--sl-font-weight-semibold);
+      color: var(--sqm-input-label-color, var(--sqm-text), black);
+    }
+
+    /* Corrected: Target sl-input, sl-select, sl-textarea base elements */
+    sl-input::part(base),
+    sl-dropdown::part(base),
+    sl-textarea::part(base){
+      background-color: var(--sqm-input-background, #fff);
+      border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+      color: var(--sqm-input-color, white);
+      border-width: var(--sqm-border-width, 1px);
+      border-style: solid; 
+      border-color: var(--sqm-input-border-color, #ccc); 
+    }
+
+
+    sl-select::part(menu) {
+      background: var(--sqm-input-background, inherit);
+      color: var(--sqm-input-color, inherit);
+      border:none;
+    }
+
+    sl-select::part(panel) {
+      border-radius: var(--sqm-border-radius-normal);
+    }
+
+    sl-select::part(help-text) {
+      color: var(--sqm-text-subdued, var(--sl-input-help-text-color, #6c757d));
+    }
+
+    sl-input::part(base):focus,
+    sl-select::part(base):focus, /* Corrected part name for sl-select */
+    sl-textarea::part(base):focus { /* Corrected part name for sl-textarea */
+      border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus, #007bff)); /* Added fallback for --sl-input-border-color-focus */
+    }
+
+    sl-input[disabled]::part(label),
+    sl-select[disabled]::part(label),
+    sl-textarea[disabled]::part(label){
+      color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
+    }
+
+    sl-input[disabled]::part(base),
+    sl-select[disabled]::part(base),
+    sl-textarea[disabled]::part(base){
+      background: var(--sqm-input-disabled-background, #f5f5f5);
+      border-color: var(--sl-input-border-color-disabled, #e0e0e0); /* Example disabled border color */
+    }
+
+
+    sl-input::part(input):-webkit-autofill {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+
+    sl-input::part(input):-webkit-autofill:hover {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+
+    sl-input::part(input):-webkit-autofill:focus {
+      box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important;
+      -webkit-text-fill-color: var(--sqm-input-color, white) !important;
+    }
+`;
 const UserInfoFormView = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
   const { states, states: { formState }, callbacks, text, refs, data, } = props;
@@ -7475,7 +7611,7 @@ const UserInfoFormView = (props) => {
         }))),
       h("div", null,
         h("div", { class: classes.InputContainer },
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
+          h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || states.isUser || states.isPartner }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
             class: classes.ErrorInput,
             helpText: formatErrorMessage(text.firstName, formState.errors.firstName),
           }