@saasquatch/mint-components 2.0.5 → 2.0.6-1

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

@@ -16,7 +16,7 @@ const reRender = require('./re-render-d516138a.js');
 const useChildElements = require('./useChildElements-966c9041.js');
 const luxon = require('./luxon-949beaf2.js');
 const useReferralTable = require('./useReferralTable-90d4d6e9.js');
-const sqmUserInfoFormView = require('./sqm-user-info-form-view-c14ba407.js');
+const sqmUserInfoFormView = require('./sqm-user-info-form-view-7446bcdd.js');
 const data = require('./data-24028727.js');
 const keys = require('./keys-cff24974.js');
 const usePayoutStatus = require('./usePayoutStatus-98f2ca76.js');
@@ -3779,6 +3779,7 @@ const style$5 = {
     marginBottom: "var(--sl-spacing-xx-small)",
     margin: "0",
     display: "flex",
+    alignItems: "center",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
       color: "var(--sqm-text)",
@@ -3860,6 +3861,9 @@ const style$5 = {
     display: "flex",
     textAlign: "center",
     width: "250px",
+    "&::part(body)": {
+      pointerEvents: "auto",
+    },
   },
   ToolTip: {
     top: "6px",
@@ -3938,6 +3942,42 @@ const style$5 = {
     gap: "var(--sl-spacing-medium)",
     flexWrap: "wrap",
   },
+  DropdownTooltipContainer: {
+    top: "-4px",
+    "&::part(panel)": {
+      boxShadow: "none",
+      border: "none",
+    },
+  },
+  DropdownContent: {
+    padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
+    fontSize: "var(--sl-font-size-small)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+    lineHeight: "var(--sl-line-height-dense)",
+    minWidth: "225px",
+    backgroundColor: "var(--sl-color-gray-900)",
+    color: "var(--sl-color-white)",
+    borderRadius: "var(--sl-border-radius-medium)",
+    position: "relative",
+    marginLeft: "5px",
+  },
+  DropdownArrow: {
+    position: "absolute",
+    left: "-5px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "0",
+    height: "0",
+    borderTop: "5px solid transparent",
+    borderBottom: "5px solid transparent",
+    borderRight: "5px solid var(--sl-color-gray-900)",
+    zIndex: "1",
+  },
+  DropdownLink: {
+    color: "var(--sl-color-white)",
+    textDecoration: "underline",
+  },
 };
 const sheet$4 = JSS.createStyleSheet(style$5);
 const styleString$4 = sheet$4.toString();
@@ -4253,6 +4293,27 @@ const TaxAndCashDashboardView = (props) => {
     }
   };
   const alertInfo = getAlert(states.payoutStatus);
+  const dropdownHover = (el) => {
+    var _a;
+    if (!el)
+      return;
+    const trigger = el.querySelector('[slot="trigger"]');
+    const panel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dropdown__panel");
+    if (!trigger || !panel)
+      return;
+    let hideTimeout;
+    const show = () => {
+      clearTimeout(hideTimeout);
+      el.show();
+    };
+    const scheduleHide = () => {
+      hideTimeout = setTimeout(() => el.hide(), 100);
+    };
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", scheduleHide);
+    panel.addEventListener("mouseenter", show);
+    panel.addEventListener("mouseleave", scheduleHide);
+  };
   return (index.h("div", null,
     index.h("div", null,
       index.h("style", { type: "text/css" },
@@ -4316,8 +4377,16 @@ const TaxAndCashDashboardView = (props) => {
         index.h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (index.h("div", null,
         index.h("h3", { class: sheet$4.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
-          index.h("sl-tooltip", { trigger: "hover", placement: "right", content: text.indirectTaxTooltipSupport, class: sheet$4.classes.TooltipContainer },
-            index.h("sl-icon", { name: "info-circle", class: sheet$4.classes.ToolTip }))),
+          index.h("sl-dropdown", { placement: "right", distance: 1, ref: dropdownHover, class: sheet$4.classes.DropdownTooltipContainer },
+            index.h("sl-icon", { slot: "trigger", name: "info-circle", class: sheet$4.classes.ToolTip, style: { cursor: "pointer" } }),
+            index.h("div", { class: sheet$4.classes.DropdownContent },
+              index.h("div", { class: sheet$4.classes.DropdownArrow }),
+              global.intl.formatMessage({
+                id: "indirectTaxTooltipSupport",
+                defaultMessage: text.indirectTaxTooltipSupport,
+              }, {
+                supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com`, class: sheet$4.classes.DropdownLink }, text.supportLink)),
+              })))),
         index.h("div", { class: sheet$4.classes.IndirectTaxPreviewDetails },
           index.h("span", null, states.notRegistered ? (index.h("span", { class: sheet$4.classes.NotRegisteredIndirectTaxText }, global.intl.formatMessage({
             id: "notRegisteredForTax",
@@ -4612,7 +4681,7 @@ const TaxAndCashDashboard = class {
      * @uiName Indirect tax tooltip
      * @uiWidget textArea
      */
-    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our Support team.";
+    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our {supportLink}.";
     /**
      * Displayed to participants who have submitted their indirect tax information.
      *

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -36,7 +36,7 @@ require('./ErrorView-3f91e5ab.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-4ccf89da.js');
 const ShadowViewAddon = require('./ShadowViewAddon-ae3a32c3.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
-const sqmUserInfoFormView = require('./sqm-user-info-form-view-c14ba407.js');
+const sqmUserInfoFormView = require('./sqm-user-info-form-view-7446bcdd.js');
 const data = require('./data-24028727.js');
 const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-2006001f.js');
 

package/dist/cjs/{sqm-user-info-form-view-c14ba407.js → sqm-user-info-form-view-7446bcdd.js}

@@ -1688,6 +1688,35 @@ const style$2 = {
       fontWeight: "var(--sl-font-weight-semibold)",
     },
   },
+  DropdownContent: {
+    padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
+    fontSize: "var(--sl-font-size-small)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+    lineHeight: "var(--sl-line-height-dense)",
+    minWidth: "225px",
+    backgroundColor: "var(--sl-color-gray-900)",
+    color: "var(--sl-color-white)",
+    borderRadius: "var(--sl-border-radius-medium)",
+    position: "relative",
+    marginLeft: "5px",
+  },
+  DropdownArrow: {
+    position: "absolute",
+    left: "-5px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "0",
+    height: "0",
+    borderTop: "5px solid transparent",
+    borderBottom: "5px solid transparent",
+    borderRight: "5px solid var(--sl-color-gray-900)",
+    zIndex: "1",
+  },
+  DropdownLink: {
+    color: "var(--sl-color-white)",
+    textDecoration: "underline",
+  },
   PhoneInputsContainer: {
     display: "flex",
     gap: "4px",
@@ -1913,6 +1942,27 @@ const UserInfoFormView = (props) => {
     var _a;
     return states.isUser && !!((_a = data$1.userData) === null || _a === void 0 ? void 0 : _a[field]);
   }
+  const dropdownHover = (el) => {
+    var _a;
+    if (!el)
+      return;
+    const trigger = el.querySelector('[slot="trigger"]');
+    const panel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dropdown__panel");
+    if (!trigger || !panel)
+      return;
+    let hideTimeout;
+    const show = () => {
+      clearTimeout(hideTimeout);
+      el.show();
+    };
+    const scheduleHide = () => {
+      hideTimeout = setTimeout(() => el.hide(), 100);
+    };
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", scheduleHide);
+    panel.addEventListener("mouseenter", show);
+    panel.addEventListener("mouseleave", scheduleHide);
+  };
   return (index.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     index.h("style", { type: "text/css" },
       styleString$1,
@@ -1951,6 +2001,16 @@ const UserInfoFormView = (props) => {
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })))),
+      index.h("sl-dropdown", { placement: "right", distance: 1, ref: dropdownHover, style: { top: "-4px" } },
+        index.h("sl-icon", { slot: "trigger", name: "info-circle", style: { cursor: "pointer", width: "16px", height: "16px" } }),
+        index.h("div", { class: sheet$1.classes.DropdownContent },
+          index.h("div", { class: sheet$1.classes.DropdownArrow }),
+          "This is a test tooltip with a",
+          " ",
+          index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com`, style: {
+              color: "var(--sl-color-white)",
+              textDecoration: "underline",
+            } }, "clickable link"))),
       index.h("div", null,
         index.h("div", { class: classes.InputContainer },
           index.h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || isDisabledUserInput("firstName") }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {

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

@@ -57,6 +57,7 @@ const style = {
     marginBottom: "var(--sl-spacing-xx-small)",
     margin: "0",
     display: "flex",
+    alignItems: "center",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
       color: "var(--sqm-text)",
@@ -138,6 +139,9 @@ const style = {
     display: "flex",
     textAlign: "center",
     width: "250px",
+    "&::part(body)": {
+      pointerEvents: "auto",
+    },
   },
   ToolTip: {
     top: "6px",
@@ -216,6 +220,42 @@ const style = {
     gap: "var(--sl-spacing-medium)",
     flexWrap: "wrap",
   },
+  DropdownTooltipContainer: {
+    top: "-4px",
+    "&::part(panel)": {
+      boxShadow: "none",
+      border: "none",
+    },
+  },
+  DropdownContent: {
+    padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
+    fontSize: "var(--sl-font-size-small)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+    lineHeight: "var(--sl-line-height-dense)",
+    minWidth: "225px",
+    backgroundColor: "var(--sl-color-gray-900)",
+    color: "var(--sl-color-white)",
+    borderRadius: "var(--sl-border-radius-medium)",
+    position: "relative",
+    marginLeft: "5px",
+  },
+  DropdownArrow: {
+    position: "absolute",
+    left: "-5px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "0",
+    height: "0",
+    borderTop: "5px solid transparent",
+    borderBottom: "5px solid transparent",
+    borderRight: "5px solid var(--sl-color-gray-900)",
+    zIndex: "1",
+  },
+  DropdownLink: {
+    color: "var(--sl-color-white)",
+    textDecoration: "underline",
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -531,6 +571,27 @@ export const TaxAndCashDashboardView = (props) => {
     }
   };
   const alertInfo = getAlert(states.payoutStatus);
+  const dropdownHover = (el) => {
+    var _a;
+    if (!el)
+      return;
+    const trigger = el.querySelector('[slot="trigger"]');
+    const panel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dropdown__panel");
+    if (!trigger || !panel)
+      return;
+    let hideTimeout;
+    const show = () => {
+      clearTimeout(hideTimeout);
+      el.show();
+    };
+    const scheduleHide = () => {
+      hideTimeout = setTimeout(() => el.hide(), 100);
+    };
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", scheduleHide);
+    panel.addEventListener("mouseenter", show);
+    panel.addEventListener("mouseleave", scheduleHide);
+  };
   return (h("div", null,
     h("div", null,
       h("style", { type: "text/css" },
@@ -594,8 +655,16 @@ export const TaxAndCashDashboardView = (props) => {
         h("sl-skeleton", { class: sheet.classes.SkeletonTwo }))) : (h("div", null,
         h("h3", { class: sheet.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
-          h("sl-tooltip", { trigger: "hover", placement: "right", content: text.indirectTaxTooltipSupport, class: sheet.classes.TooltipContainer },
-            h("sl-icon", { name: "info-circle", class: sheet.classes.ToolTip }))),
+          h("sl-dropdown", { placement: "right", distance: 1, ref: dropdownHover, class: sheet.classes.DropdownTooltipContainer },
+            h("sl-icon", { slot: "trigger", name: "info-circle", class: sheet.classes.ToolTip, style: { cursor: "pointer" } }),
+            h("div", { class: sheet.classes.DropdownContent },
+              h("div", { class: sheet.classes.DropdownArrow }),
+              intl.formatMessage({
+                id: "indirectTaxTooltipSupport",
+                defaultMessage: text.indirectTaxTooltipSupport,
+              }, {
+                supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com`, class: sheet.classes.DropdownLink }, text.supportLink)),
+              })))),
         h("div", { class: sheet.classes.IndirectTaxPreviewDetails },
           h("span", null, states.notRegistered ? (h("span", { class: sheet.classes.NotRegisteredIndirectTaxText }, intl.formatMessage({
             id: "notRegisteredForTax",

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

@@ -129,7 +129,7 @@ export class TaxAndCashDashboard {
      * @uiName Indirect tax tooltip
      * @uiWidget textArea
      */
-    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our Support team.";
+    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our {supportLink}.";
     /**
      * Displayed to participants who have submitted their indirect tax information.
      *
@@ -872,7 +872,7 @@ export class TaxAndCashDashboard {
       },
       "attribute": "indirect-tax-tooltip-support",
       "reflect": false,
-      "defaultValue": "\"To make changes to your indirect tax information, please contact our Support team.\""
+      "defaultValue": "\"To make changes to your indirect tax information, please contact our {supportLink}.\""
     },
     "indirectTaxDetails": {
       "type": "string",

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

@@ -70,6 +70,35 @@ const style = {
       fontWeight: "var(--sl-font-weight-semibold)",
     },
   },
+  DropdownContent: {
+    padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
+    fontSize: "var(--sl-font-size-small)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+    lineHeight: "var(--sl-line-height-dense)",
+    minWidth: "225px",
+    backgroundColor: "var(--sl-color-gray-900)",
+    color: "var(--sl-color-white)",
+    borderRadius: "var(--sl-border-radius-medium)",
+    position: "relative",
+    marginLeft: "5px",
+  },
+  DropdownArrow: {
+    position: "absolute",
+    left: "-5px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "0",
+    height: "0",
+    borderTop: "5px solid transparent",
+    borderBottom: "5px solid transparent",
+    borderRight: "5px solid var(--sl-color-gray-900)",
+    zIndex: "1",
+  },
+  DropdownLink: {
+    color: "var(--sl-color-white)",
+    textDecoration: "underline",
+  },
   PhoneInputsContainer: {
     display: "flex",
     gap: "4px",
@@ -295,6 +324,27 @@ export const UserInfoFormView = (props) => {
     var _a;
     return states.isUser && !!((_a = data.userData) === null || _a === void 0 ? void 0 : _a[field]);
   }
+  const dropdownHover = (el) => {
+    var _a;
+    if (!el)
+      return;
+    const trigger = el.querySelector('[slot="trigger"]');
+    const panel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dropdown__panel");
+    if (!trigger || !panel)
+      return;
+    let hideTimeout;
+    const show = () => {
+      clearTimeout(hideTimeout);
+      el.show();
+    };
+    const scheduleHide = () => {
+      hideTimeout = setTimeout(() => el.hide(), 100);
+    };
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", scheduleHide);
+    panel.addEventListener("mouseenter", show);
+    panel.addEventListener("mouseleave", scheduleHide);
+  };
   return (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     h("style", { type: "text/css" },
       styleString,
@@ -333,6 +383,16 @@ export const UserInfoFormView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })))),
+      h("sl-dropdown", { placement: "right", distance: 1, ref: dropdownHover, style: { top: "-4px" } },
+        h("sl-icon", { slot: "trigger", name: "info-circle", style: { cursor: "pointer", width: "16px", height: "16px" } }),
+        h("div", { class: sheet.classes.DropdownContent },
+          h("div", { class: sheet.classes.DropdownArrow }),
+          "This is a test tooltip with a",
+          " ",
+          h("a", { target: "_blank", href: `mailto:advocate-support@impact.com`, style: {
+              color: "var(--sl-color-white)",
+              textDecoration: "underline",
+            } }, "clickable link"))),
       h("div", null,
         h("div", { class: classes.InputContainer },
           h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || isDisabledUserInput("firstName") }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {

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

@@ -12,7 +12,7 @@ import { u as useRerenderListener, a as useRequestRerender } from './re-render-7
 import { u as useChildElements } from './useChildElements-3d872cef.js';
 import { l as luxon } from './luxon-bbf75a9d.js';
 import { g as generateUserError } from './useReferralTable-909ccb28.js';
-import { a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, O as OtherRegionSlotView, I as InvoiceTableView, v as vatLabels, A as ADDRESS_REGIONS, U as UserInfoFormView } from './sqm-user-info-form-view-9a3048d9.js';
+import { a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, O as OtherRegionSlotView, I as InvoiceTableView, v as vatLabels, A as ADDRESS_REGIONS, U as UserInfoFormView } from './sqm-user-info-form-view-0b068018.js';
 import { F as FORM_STEPS, a as TAX_FORM_CONTEXT_NAMESPACE, S as SORTED_COUNTRIES_NAMESPACE, c as USER_QUERY_NAMESPACE, T as TAX_CONTEXT_NAMESPACE, h as FINANCE_NETWORK_SETTINGS_NAMESPACE, t as taxTypeToName, l as validTaxDocument, U as USER_FORM_CONTEXT_NAMESPACE, d as COUNTRIES_QUERY_NAMESPACE, g as getCountryObj, C as CURRENCIES_NAMESPACE, o as objectIsFull } from './data-a581119a.js';
 import { b as VERIFICATION_EVENT_KEY } 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-7404eb9d.js';
@@ -3775,6 +3775,7 @@ const style$5 = {
     marginBottom: "var(--sl-spacing-xx-small)",
     margin: "0",
     display: "flex",
+    alignItems: "center",
     gap: "var(--sl-spacing-x-small)",
     "&::part(base)": {
       color: "var(--sqm-text)",
@@ -3856,6 +3857,9 @@ const style$5 = {
     display: "flex",
     textAlign: "center",
     width: "250px",
+    "&::part(body)": {
+      pointerEvents: "auto",
+    },
   },
   ToolTip: {
     top: "6px",
@@ -3934,6 +3938,42 @@ const style$5 = {
     gap: "var(--sl-spacing-medium)",
     flexWrap: "wrap",
   },
+  DropdownTooltipContainer: {
+    top: "-4px",
+    "&::part(panel)": {
+      boxShadow: "none",
+      border: "none",
+    },
+  },
+  DropdownContent: {
+    padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
+    fontSize: "var(--sl-font-size-small)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+    lineHeight: "var(--sl-line-height-dense)",
+    minWidth: "225px",
+    backgroundColor: "var(--sl-color-gray-900)",
+    color: "var(--sl-color-white)",
+    borderRadius: "var(--sl-border-radius-medium)",
+    position: "relative",
+    marginLeft: "5px",
+  },
+  DropdownArrow: {
+    position: "absolute",
+    left: "-5px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "0",
+    height: "0",
+    borderTop: "5px solid transparent",
+    borderBottom: "5px solid transparent",
+    borderRight: "5px solid var(--sl-color-gray-900)",
+    zIndex: "1",
+  },
+  DropdownLink: {
+    color: "var(--sl-color-white)",
+    textDecoration: "underline",
+  },
 };
 const sheet$4 = createStyleSheet(style$5);
 const styleString$4 = sheet$4.toString();
@@ -4249,6 +4289,27 @@ const TaxAndCashDashboardView = (props) => {
     }
   };
   const alertInfo = getAlert(states.payoutStatus);
+  const dropdownHover = (el) => {
+    var _a;
+    if (!el)
+      return;
+    const trigger = el.querySelector('[slot="trigger"]');
+    const panel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dropdown__panel");
+    if (!trigger || !panel)
+      return;
+    let hideTimeout;
+    const show = () => {
+      clearTimeout(hideTimeout);
+      el.show();
+    };
+    const scheduleHide = () => {
+      hideTimeout = setTimeout(() => el.hide(), 100);
+    };
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", scheduleHide);
+    panel.addEventListener("mouseenter", show);
+    panel.addEventListener("mouseleave", scheduleHide);
+  };
   return (h("div", null,
     h("div", null,
       h("style", { type: "text/css" },
@@ -4312,8 +4373,16 @@ const TaxAndCashDashboardView = (props) => {
         h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (h("div", null,
         h("h3", { class: sheet$4.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
-          h("sl-tooltip", { trigger: "hover", placement: "right", content: text.indirectTaxTooltipSupport, class: sheet$4.classes.TooltipContainer },
-            h("sl-icon", { name: "info-circle", class: sheet$4.classes.ToolTip }))),
+          h("sl-dropdown", { placement: "right", distance: 1, ref: dropdownHover, class: sheet$4.classes.DropdownTooltipContainer },
+            h("sl-icon", { slot: "trigger", name: "info-circle", class: sheet$4.classes.ToolTip, style: { cursor: "pointer" } }),
+            h("div", { class: sheet$4.classes.DropdownContent },
+              h("div", { class: sheet$4.classes.DropdownArrow }),
+              intl.formatMessage({
+                id: "indirectTaxTooltipSupport",
+                defaultMessage: text.indirectTaxTooltipSupport,
+              }, {
+                supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com`, class: sheet$4.classes.DropdownLink }, text.supportLink)),
+              })))),
         h("div", { class: sheet$4.classes.IndirectTaxPreviewDetails },
           h("span", null, states.notRegistered ? (h("span", { class: sheet$4.classes.NotRegisteredIndirectTaxText }, intl.formatMessage({
             id: "notRegisteredForTax",
@@ -4608,7 +4677,7 @@ const TaxAndCashDashboard = class {
      * @uiName Indirect tax tooltip
      * @uiWidget textArea
      */
-    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our Support team.";
+    this.indirectTaxTooltipSupport = "To make changes to your indirect tax information, please contact our {supportLink}.";
     /**
      * Displayed to participants who have submitted their indirect tax information.
      *

package/dist/esm/sqm-stencilbook.entry.js

@@ -32,7 +32,7 @@ import './ErrorView-bbf0a042.js';
 import { Q as QrCodeView } from './sqm-qr-code-view-ea505213.js';
 import { S as StatContainerView, B as BigStatView, a as ShareButtonView, P as PortalChangePasswordView, b as PoweredByImg$1, u as useDemoBigStat, T as TaskCardView, C as CardFeedView, c as CheckboxFieldView, d as PortalRegisterView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, L as LeaderboardView, H as HeroView, I as InputFieldView, N as NameFieldsView, f as ChangeMarktingView, g as PortalFooterView, h as PortalForgotPasswordView, i as PortalFrameView, R as ReferralIframeView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as useShareButton, K as useShareLink, M as ProgressBarView, O as ProgressBar$2, Q as LeadFormView, U as LeadDropdownFieldView, V as ShadowViewAddon } from './ShadowViewAddon-78a1c35c.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-176e92e3.js';
-import { I as InvoiceTableView, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, O as OtherRegionSlotView, U as UserInfoFormView$1 } from './sqm-user-info-form-view-9a3048d9.js';
+import { I as InvoiceTableView, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, O as OtherRegionSlotView, U as UserInfoFormView$1 } from './sqm-user-info-form-view-0b068018.js';
 import { t as taxTypeToName, L as LoadingView } from './data-a581119a.js';
 import { L as LeadInputFieldView } from './sqm-lead-input-field-view-d543d939.js';
 

package/dist/esm/{sqm-user-info-form-view-9a3048d9.js → sqm-user-info-form-view-0b068018.js}

@@ -1686,6 +1686,35 @@ const style$2 = {
       fontWeight: "var(--sl-font-weight-semibold)",
     },
   },
+  DropdownContent: {
+    padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
+    fontSize: "var(--sl-font-size-small)",
+    fontFamily: "var(--sl-font-sans)",
+    fontWeight: "var(--sl-font-weight-normal)",
+    lineHeight: "var(--sl-line-height-dense)",
+    minWidth: "225px",
+    backgroundColor: "var(--sl-color-gray-900)",
+    color: "var(--sl-color-white)",
+    borderRadius: "var(--sl-border-radius-medium)",
+    position: "relative",
+    marginLeft: "5px",
+  },
+  DropdownArrow: {
+    position: "absolute",
+    left: "-5px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "0",
+    height: "0",
+    borderTop: "5px solid transparent",
+    borderBottom: "5px solid transparent",
+    borderRight: "5px solid var(--sl-color-gray-900)",
+    zIndex: "1",
+  },
+  DropdownLink: {
+    color: "var(--sl-color-white)",
+    textDecoration: "underline",
+  },
   PhoneInputsContainer: {
     display: "flex",
     gap: "4px",
@@ -1911,6 +1940,27 @@ const UserInfoFormView = (props) => {
     var _a;
     return states.isUser && !!((_a = data.userData) === null || _a === void 0 ? void 0 : _a[field]);
   }
+  const dropdownHover = (el) => {
+    var _a;
+    if (!el)
+      return;
+    const trigger = el.querySelector('[slot="trigger"]');
+    const panel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dropdown__panel");
+    if (!trigger || !panel)
+      return;
+    let hideTimeout;
+    const show = () => {
+      clearTimeout(hideTimeout);
+      el.show();
+    };
+    const scheduleHide = () => {
+      hideTimeout = setTimeout(() => el.hide(), 100);
+    };
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", scheduleHide);
+    panel.addEventListener("mouseenter", show);
+    panel.addEventListener("mouseleave", scheduleHide);
+  };
   return (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     h("style", { type: "text/css" },
       styleString$1,
@@ -1949,6 +1999,16 @@ const UserInfoFormView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })))),
+      h("sl-dropdown", { placement: "right", distance: 1, ref: dropdownHover, style: { top: "-4px" } },
+        h("sl-icon", { slot: "trigger", name: "info-circle", style: { cursor: "pointer", width: "16px", height: "16px" } }),
+        h("div", { class: sheet$1.classes.DropdownContent },
+          h("div", { class: sheet$1.classes.DropdownArrow }),
+          "This is a test tooltip with a",
+          " ",
+          h("a", { target: "_blank", href: `mailto:advocate-support@impact.com`, style: {
+              color: "var(--sl-color-white)",
+              textDecoration: "underline",
+            } }, "clickable link"))),
       h("div", null,
         h("div", { class: classes.InputContainer },
           h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled || isDisabledUserInput("firstName") }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {