@saasquatch/mint-components 1.15.0-16 → 1.15.0-160

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

@@ -1,52 +1,24 @@
 import { h } from "@stencil/core";
 import { intl } from "../../../global/global";
 import { createStyleSheet } from "../../../styling/JSS";
+import { capitalizeFirstLetter } from "../../../utils/utils";
 const style = {
-  ErrorAlertContainer: {
+  DangerBadge: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
-    },
-  },
-  WarningAlertContainer: {
-    "&::part(base)": {
-      backgroundColor: "var(--sl-color-yellow-100)",
-      borderTop: "none",
-      maxWidth: "600px",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
-    },
-  },
-  WarningHoldAlertContainer: {
-    marginLeft: "-20px",
-    "&::part(base)": {
-      maxWidth: "850px",
-      border: "none",
-      backgroundColor: "transparent",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-warning-500)",
+      backgroundColor: "var(--sqm-danger-color-icon)",
+      color: "var(--sl-color-white)",
     },
   },
-  ErrorHoldAlertContainer: {
-    marginLeft: "-20px",
+  SuccessBadge: {
     "&::part(base)": {
-      maxWidth: "850px",
-      border: "none",
-      backgroundColor: "transparent",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      backgroundColor: "var(--sqm-success-color-icon)",
+      color: "var(--sl-color-white)",
     },
   },
-  ExpiringSoonAlertContainer: {
+  WarningBadge: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-yellow-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-warning-color-icon)",
+      color: "var(--sl-color-white)",
     },
   },
   BankingInformationContainer: {
@@ -54,7 +26,7 @@ const style = {
   },
   IndirectTaxPreviewContainer: {
     marginTop: "var(--sl-spacing-x-large)",
-    borderTop: "1px solid var(--sl-color-neutral-200)",
+    borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
   },
   IndirectTaxPreviewHeaderContainer: {
     marginTop: "var(--sl-spacing-large)",
@@ -63,7 +35,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 +49,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: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
   },
   TaxDocumentsSectionHeaderContainer: {
     marginTop: "var(--sl-spacing-x-large)",
@@ -98,7 +70,7 @@ const style = {
     "& p": {
       margin: "0",
       paddingTop: "2px",
-      color: "var(--sl-color-gray-500)",
+      color: "var(--sqm-text-subdued)",
     },
   },
   StatusAlert: {
@@ -133,7 +105,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,28 +126,65 @@ 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",
   },
+  WarningButton: {
+    "&::part(base)": {
+      marginTop: "20px",
+      borderColor: "var(--sqm-warning-color-border)",
+      color: "var(--sqm-warning-color-text)",
+      background: "var(--sqm-warning-color-background)",
+      "&:hover": {
+        background: "var(--sqm-warning-color-icon)",
+      },
+    },
+  },
+  ErrorButton: {
+    "&::part(base)": {
+      marginTop: "20px",
+      borderColor: "var(--sqm-danger-color-border)",
+      color: "var(--sqm-danger-color-text)",
+      background: "var(--sqm-danger-color-background)",
+      "&:hover": {
+        background: "var(--sqm-danger-color-icon)",
+      },
+    },
+  },
+  SuccessButton: {
+    "&::part(base)": {
+      marginTop: "20px",
+      borderColor: "var(--sqm-success-color-border)",
+      color: "var(--sqm-success-color-text)",
+      background: "var(--sqm-success-color-background)",
+      "&:hover": {
+        background: "var(--sqm-success-color-icon)",
+      },
+    },
+  },
   Dialog: {
     "&::part(panel)": {
       maxWidth: "420px",
     },
+    "&::part(header)": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      paddingTop: "var(--sl-spacing-large)",
+    },
     "&::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-xxx-large)",
-      padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
+      padding: "0px var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
     },
     "&::part(body)": {
       padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
@@ -192,10 +201,59 @@ const style = {
   },
   DialogButton: { margin: "auto", width: "100%" },
 };
+const vanillaStyle = `
+  * {
+    font-family: var(--sqm-primary-font);
+    }
+  a {
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  *::part(primarybutton-base),
+  sl-button[type="primary"]::part(base) {
+    font-family: var(--sqm-primary-font);
+    width: 100%;
+    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,
+  sl-button[type="primary"]::part(base):hover{
+    background-color: var(--sqm-primary-button-background-hover);
+    border-color: var(--sqm-primary-button-border-color-hover);
+    color: var(--sqm-primary-button-color-hover);
+  }
+
+
+  *::part(primarybutton-base):focus,
+  sl-button[type="primary"]::part(base):focus {
+    box-shadow: none;
+  }
+
+  *::part(secondarybutton-base),
+  sl-button[type="secondary"]::part(base) {
+  font-family: var(--sqm-primary-font);
+    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,
+  sl-button[type="secondary"]::part(base):hover {
+    background-color: var(--sqm-secondary-button-background-hover);
+    color: var(--sqm-secondary-button-color-hover);
+    border-color: var(--sqm-secondary-button-border-color-hover);
+  }
+`;
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export const TaxAndCashDashboardView = (props) => {
-  var _a, _b, _c, _d;
+  var _a;
   const { states, text, callbacks, slots } = props;
   function getAlert(status) {
     switch (status) {
@@ -210,8 +268,6 @@ export const TaxAndCashDashboardView = (props) => {
           }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:INTERNAL":
         return {
@@ -223,8 +279,6 @@ export const TaxAndCashDashboardView = (props) => {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:REVIEW":
         return {
@@ -236,8 +290,6 @@ export const TaxAndCashDashboardView = (props) => {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningHoldAlertContainer,
         };
       case "VERIFICATION:FAILED":
         return {
@@ -248,9 +300,7 @@ export const TaxAndCashDashboardView = (props) => {
           }, {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
-          alertType: "critical",
-          icon: "exclamation-octagon",
-          class: sheet.classes.ErrorHoldAlertContainer,
+          alertType: "error",
         };
       case "HOLD":
         return {
@@ -263,8 +313,6 @@ export const TaxAndCashDashboardView = (props) => {
           }),
           buttonText: null,
           alertType: "warning",
-          icon: "exclamation-triangle",
-          class: sheet.classes.WarningHoldAlertContainer,
         };
       default:
         return;
@@ -272,7 +320,7 @@ export const TaxAndCashDashboardView = (props) => {
   }
   const statusMap = {
     NOT_VERIFIED: (h("div", { class: sheet.classes.TaxFormDetailsContainer },
-      h("sl-badge", { type: "warning", pill: true }, text.statusTextNotVerified),
+      h("sl-badge", { class: sheet.classes.WarningBadge, type: "warning", pill: true }, text.statusTextNotVerified),
       h("p", null, intl.formatMessage({
         id: `badgeTextAwaitingReview`,
         defaultMessage: text.badgeTextAwaitingReview,
@@ -280,7 +328,7 @@ export const TaxAndCashDashboardView = (props) => {
         dateSubmitted: states.dateSubmitted,
       })))),
     ACTIVE: (h("div", { class: sheet.classes.TaxFormDetailsContainer },
-      h("sl-badge", { type: "success", pill: true }, text.statusTextActive),
+      h("sl-badge", { class: sheet.classes.SuccessBadge, type: "success", pill: true }, text.statusTextActive),
       h("p", null, intl.formatMessage({
         id: `badgeTextSubmittedOn`,
         defaultMessage: states.documentType === "W9"
@@ -290,13 +338,12 @@ export const TaxAndCashDashboardView = (props) => {
         dateSubmitted: states.dateSubmitted,
       })))),
     INACTIVE: (h("div", { class: sheet.classes.TaxFormDetailsContainer },
-      h("sl-badge", { type: "danger", pill: true }, text.statusTextNotActive),
+      h("sl-badge", { class: sheet.classes.DangerBadge, type: "danger", pill: true }, text.statusTextNotActive),
       h("p", null, text.invalidForm))),
   };
   const alertMap = {
-    INACTIVE: (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, intl.formatMessage({
+    INACTIVE: (h("sqm-form-message", { type: "error" },
+      h("p", { part: "alert-title" }, intl.formatMessage({
         id: `taxAlertHeaderNotActive`,
         defaultMessage: states.documentType === "W9"
           ? text.taxAlertHeaderNotActiveW9
@@ -304,7 +351,6 @@ export const TaxAndCashDashboardView = (props) => {
       }, {
         documentType: states.documentTypeString,
       })),
-      h("br", null),
       intl.formatMessage({
         id: `taxAlertMessage`,
         defaultMessage: states.documentType === "W9"
@@ -342,39 +388,35 @@ export const TaxAndCashDashboardView = (props) => {
       });
     }
   };
+  const alert = getAlert(states.payoutStatus);
   return (h("div", null,
     h("div", null,
       h("style", { type: "text/css" }, styleString),
-      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),
-          intl.formatMessage({
-            id: "loadingErrorAlertDescription",
-            defaultMessage: text.error.loadingErrorAlertDescription,
-          }, {
-            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
-          })))),
-      ((_a = states.errors) === null || _a === void 0 ? void 0 : _a.general) && (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.generalTitle),
-        h("br", null),
+      h("style", { type: "text/css" }, vanillaStyle),
+      states.loadingError && (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 = states.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)),
         }))),
-      getAlert(states.payoutStatus) && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", name: (_b = getAlert(states.payoutStatus)) === null || _b === void 0 ? void 0 : _b.alertType, open: true, class: (_c = getAlert(states.payoutStatus)) === null || _c === void 0 ? void 0 : _c.class },
-        h("sl-icon", { slot: "icon", name: (_d = getAlert(states.payoutStatus)) === null || _d === void 0 ? void 0 : _d.icon }),
-        h("strong", null, getAlert(states.payoutStatus).header),
-        h("p", { style: { margin: "0" } }, getAlert(states.payoutStatus).description),
-        getAlert(states.payoutStatus).buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, getAlert(states.payoutStatus).buttonText)))),
+      alert && (h("sqm-form-message", { type: alert.alertType },
+        h("p", { part: "alert-title" }, alert.header),
+        h("p", { part: "alert-description" }, alert.description),
+        alert.buttonText && (h("sl-button", { class: sheet.classes[`${capitalizeFirstLetter(alert.alertType)}Button`], loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, alert.buttonText)))),
       h("sl-dialog", { label: text.replaceTaxFormModalHeader, class: sheet.classes.Dialog, open: states.showNewFormDialog, "onSl-hide": callbacks.onNewFormCancel },
         h("p", null, text.replaceTaxFormModalBodyText),
-        h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
-        h("sl-button", { slot: "footer", type: "default", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
+        h("sl-button", { slot: "footer", type: "primary", exportparts: "base: primarybutton-base", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormClick }, text.newFormButton),
+        h("sl-button", { slot: "footer", type: "secondary", exportparts: "base: secondarybutton-base", class: sheet.classes.DialogButton, onClick: callbacks.onNewFormCancel }, text.cancelButton)),
       states.status === "INACTIVE" && alertMap[states.status],
       h("div", null,
         h("h3", { style: { marginBottom: "0" } }, text.bankingInformationSectionHeader),
@@ -382,7 +424,7 @@ export const TaxAndCashDashboardView = (props) => {
         h("div", { class: sheet.classes.BankingInformationContainer },
           slots.payoutDetailsCardSlot,
           !states.loading && (h("p", { class: sheet.classes.DescriptionText }, text.payoutFromImpact)),
-          states.canEditPayoutInfo && (h("sl-button", { disabled: states.disabled || states.loading, type: "default", class: sheet.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
+          states.canEditPayoutInfo && (h("sl-button", { disabled: states.disabled || states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onEditPayoutInfo, style: { marginTop: states.loading ? "12px" : "0px" } }, text.editPaymentInformationButton)))),
       h("div", { class: sheet.classes.TaxDocumentsContainer },
         h("div", null, states.loading ? (h("div", { class: sheet.classes.TaxSectionSkeletonContainer },
           h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
@@ -398,7 +440,7 @@ export const TaxAndCashDashboardView = (props) => {
                 documentType: states.documentTypeString,
               })),
               h("span", { class: sheet.classes.StatusAlert }, statusMap[states.status]))),
-          states.status !== "NOT_VERIFIED" && (h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
+          states.status !== "NOT_VERIFIED" && (h("sl-button", { style: { marginTop: "20px" }, disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "secondary", exportparts: "base: secondarybutton-base" }, text.newFormButton)))))))),
       h("div", { class: sheet.classes.IndirectTaxPreviewContainer }, states.loading ? (h("div", { class: sheet.classes.TaxSectionSkeletonContainer },
         h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
         h("sl-skeleton", { class: sheet.classes.SkeletonTwo }))) : (h("div", null,

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

@@ -314,6 +314,11 @@ export class TaxAndCashDashboard {
      * @uiName Cancel button label
      */
     this.cancelButton = "Cancel";
+    /**
+     * @undocumented
+     * @componentState { "title": "Payouts on hold", "props": { "states": { "payoutStatus": "HOLD" } }, "uiGroup": "Dashboard Properties" }
+     */
+    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -1720,27 +1725,60 @@ export class TaxAndCashDashboard {
           }],
         "text": ""
       }
+    },
+    "stateController": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "{ \"title\": \"Payouts on hold\", \"props\": { \"states\": { \"payoutStatus\": \"HOLD\" } }, \"uiGroup\": \"Dashboard Properties\" }",
+            "name": "componentState"
+          }],
+        "text": ""
+      },
+      "attribute": "state-controller",
+      "reflect": false,
+      "defaultValue": "\"{}\""
     }
   }; }
 }
 function useDemoTaxAndCashDashboard(props) {
+  console.log("dashboard", { props });
+  // @ts-ignore
   return deepmerge({
     states: {
       dateSubmitted: "today",
       documentType: "W9",
       documentTypeString: "W9",
-      status: "ACTIVE",
       country: "United States",
-      indirectTaxNumber: 55555555,
+      indirectTaxNumber: "55555555",
       indirectTaxType: "Indirect Tax",
-      noFormNeeded: true,
+      noFormNeeded: false,
       disabled: false,
       loading: false,
       showNewFormDialog: false,
       hasHold: false,
-      showVerifyIdentity: false,
+      subRegion: "CA",
+      subRegionTaxNumber: undefined,
+      qstNumber: undefined,
+      isBusinessEntity: false,
+      province: undefined,
+      notRegistered: true,
+      loadingError: false,
       payoutStatus: "DONE",
       veriffLoading: false,
+      canEditPayoutInfo: true,
+      status: "ACTIVE",
     },
     callbacks: {
       onClick: () => console.debug("check step"),
@@ -1750,5 +1788,12 @@ function useDemoTaxAndCashDashboard(props) {
       onVerifyClick: () => console.log("verify"),
     },
     text: props.getTextProps(),
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+    slots: {
+      payoutDetailsCardSlot: (h("sqm-payout-details-card", { demoData: {
+          states: {
+            badgeStatus: "nextPayout",
+          },
+        } })),
+    },
+  }, props.demoData || props.stateController || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -2,11 +2,11 @@ import { useLocale, useParentQueryValue, useSetParent, } from "@saasquatch/compo
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { DateTime } from "luxon";
 import { vatLabels } from "../countries";
-import { TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../sqm-tax-and-cash/data";
-import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "../subregions";
-import { taxTypeToName } from "../utils";
+import { TAX_CONTEXT_NAMESPACE, TAX_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, } from "../data";
 import { getStatus } from "../sqm-payout-status-alert/usePayoutStatus";
+import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, } from "../subregions";
 import { useVeriffApp, VERIFF_COMPLETE_EVENT_KEY } from "../useVeriffApp";
+import { taxTypeToName } from "../utils";
 function getCountryName(countryCode, locale) {
   if (!countryCode)
     return undefined;

package/dist/collection/components/tax-and-cash/sqm-user-info-form/small-views/DocusignExpiredView.js

@@ -10,7 +10,7 @@ const style = {
     gap: "10px",
     margin: "auto",
     textAlign: "center",
-    border: "1px solid var(--sl-color-gray-200)",
+    border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
   },
 };
 const sheet = createStyleSheet(style);

package/dist/collection/components/tax-and-cash/sqm-user-info-form/small-views/IndirectTaxDetailsView.js

@@ -25,7 +25,7 @@ const style = {
     gap: "16px",
   },
   HR: {
-    border: "1px solid #E0E0E0",
+    border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
     margin: "10px 0",
   },
   Input: { maxWidth: "500px" },
@@ -40,11 +40,11 @@ const style = {
   ErrorInput: {
     maxWidth: "500px",
     "&::part(base)": {
-      border: "1px solid var(--sl-color-danger-500)",
+      border: "var(--sqm-border-thickness, 1px) solid var(--sqm-danger-color-border)",
       borderRadius: "var(--sl-input-border-radius-medium)",
     },
     "&::part(help-text)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-text)",
     },
   },
 };
@@ -59,6 +59,13 @@ const vanillaStyle = `
        padding: 0;
        box-sizing: border-box;
     }
+    sl-menu-item::part(base) {
+      color: var(--sqm-input-color);
+    }
+
+    sl-menu-item::part(base):hover {
+      background-color: var(--sqm-input-border-color-hover);
+    }
   `;
 export const OtherRegionSlotView = (props) => {
   var _a, _b, _c;