@frontify/fondue 12.0.0-beta.122 → 12.0.0-beta.123

package/dist/components/Tooltip/BrightHeader.es.js

@@ -1,42 +1,42 @@
-import t, { cloneElement as r } from "react";
-import { merge as o } from "../../utilities/merge.es.js";
+import t, { cloneElement as o } from "react";
+import { merge as r } from "../../utilities/merge.es.js";
 import { IconSize as n } from "../../foundation/Icon/IconSize.es.js";
 import i from "../../foundation/Icon/Generated/IconExclamationMarkCircle.es.js";
 import a from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
 import m from "../../foundation/Icon/Generated/IconCheckMark.es.js";
-import c from "../../foundation/Icon/Generated/IconDocument.es.js";
-var l = /* @__PURE__ */ ((e) => (e.Information = "Information", e.Warning = "Warning", e.Tip = "Tip", e.Note = "Note", e))(l || {});
-const g = {
-  Information: "tw-bg-violet-60",
-  Warning: "tw-bg-red-60",
-  Tip: "tw-bg-green-60",
-  Note: "tw-bg-yellow-60"
-}, N = {
-  Information: "before:tw-bg-violet-60",
-  Warning: "before:tw-bg-red-60",
-  Tip: "before:tw-bg-green-60",
-  Note: "before:tw-bg-yellow-60"
-}, w = {
+import s from "../../foundation/Icon/Generated/IconDocument.es.js";
+var g = /* @__PURE__ */ ((e) => (e.Information = "Information", e.Warning = "Warning", e.Tip = "Tip", e.Note = "Note", e))(g || {});
+const c = {
+  Information: "tw-bg-box-selected-strong",
+  Warning: "tw-bg-box-negative-strong-pressed",
+  Tip: "tw-bg-box-positive-strong-pressed",
+  Note: "tw-bg-box-warning-strong"
+}, E = {
+  Information: "before:tw-bg-box-selected-strong",
+  Warning: "before:tw-bg-box-negative-strong-pressed",
+  Tip: "before:tw-bg-box-positive-strong-pressed",
+  Note: "before:tw-bg-box-warning-strong"
+}, b = {
   Information: /* @__PURE__ */ t.createElement(i, null),
   Warning: /* @__PURE__ */ t.createElement(a, null),
   Tip: /* @__PURE__ */ t.createElement(m, null),
-  Note: /* @__PURE__ */ t.createElement(c, null)
-}, f = ({ headerStyle: e }) => /* @__PURE__ */ t.createElement(
+  Note: /* @__PURE__ */ t.createElement(s, null)
+}, l = ({ headerStyle: e }) => /* @__PURE__ */ t.createElement(
   "div",
   {
     "data-test-id": "bright-header",
-    className: o([
-      "tw-h-9 tw-relative tw-z-[120000] tw-flex tw-justify-center tw-items-center tw-rounded-t-md tw-text-white",
-      g[e]
+    className: r([
+      "tw-h-9 tw-relative tw-z-[120000] tw-flex tw-justify-center tw-items-center tw-rounded-t-md tw-dark tw-text-text",
+      c[e]
     ])
   },
-  r(w[e], { size: n.Size20 })
+  o(b[e], { size: n.Size20 })
 );
-f.displayName = "FondueBrightHeader";
+l.displayName = "FondueBrightHeader";
 export {
-  f as BrightHeader,
-  l as BrightHeaderStyle,
-  N as brightHeaderArrowBackgroundColors,
-  g as brightHeaderBackgroundColors
+  l as BrightHeader,
+  g as BrightHeaderStyle,
+  E as brightHeaderArrowBackgroundColors,
+  c as brightHeaderBackgroundColors
 };
 //# sourceMappingURL=BrightHeader.es.js.map

package/dist/components/Tooltip/BrightHeader.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrightHeader.es.js","sources":["../../../src/components/Tooltip/BrightHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, ReactElement, cloneElement } from 'react';\nimport { merge } from '@utilities/merge';\nimport {\n    IconCheckMark,\n    IconDocument,\n    IconExclamationMarkCircle,\n    IconExclamationMarkTriangle,\n} from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\n\nexport enum BrightHeaderStyle {\n    Information = 'Information',\n    Warning = 'Warning',\n    Tip = 'Tip',\n    Note = 'Note',\n}\n\nexport const brightHeaderBackgroundColors: Record<BrightHeaderStyle, string> = {\n    [BrightHeaderStyle.Information]: 'tw-bg-violet-60',\n    [BrightHeaderStyle.Warning]: 'tw-bg-red-60',\n    [BrightHeaderStyle.Tip]: 'tw-bg-green-60',\n    [BrightHeaderStyle.Note]: 'tw-bg-yellow-60',\n};\n\nexport const brightHeaderArrowBackgroundColors: Record<BrightHeaderStyle, string> = {\n    [BrightHeaderStyle.Information]: 'before:tw-bg-violet-60',\n    [BrightHeaderStyle.Warning]: 'before:tw-bg-red-60',\n    [BrightHeaderStyle.Tip]: 'before:tw-bg-green-60',\n    [BrightHeaderStyle.Note]: 'before:tw-bg-yellow-60',\n};\n\nconst brightHeaderIcon: Record<BrightHeaderStyle, ReactElement> = {\n    [BrightHeaderStyle.Information]: <IconExclamationMarkCircle />,\n    [BrightHeaderStyle.Warning]: <IconExclamationMarkTriangle />,\n    [BrightHeaderStyle.Tip]: <IconCheckMark />,\n    [BrightHeaderStyle.Note]: <IconDocument />,\n};\n\ntype BrightHeaderProps = {\n    headerStyle: BrightHeaderStyle;\n};\n\nexport const BrightHeader: FC<BrightHeaderProps> = ({ headerStyle }) => {\n    return (\n        <div\n            data-test-id=\"bright-header\"\n            className={merge([\n                'tw-h-9 tw-relative tw-z-[120000] tw-flex tw-justify-center tw-items-center tw-rounded-t-md tw-text-white',\n                brightHeaderBackgroundColors[headerStyle],\n            ])}\n        >\n            {cloneElement(brightHeaderIcon[headerStyle], { size: IconSize.Size20 })}\n        </div>\n    );\n};\nBrightHeader.displayName = 'FondueBrightHeader';\n"],"names":["BrightHeaderStyle","brightHeaderBackgroundColors","brightHeaderArrowBackgroundColors","brightHeaderIcon","React","IconExclamationMarkCircle","IconExclamationMarkTriangle","IconCheckMark","IconDocument","BrightHeader","headerStyle","merge","cloneElement","IconSize"],"mappings":";;;;;;;AAYY,IAAAA,sBAAAA,OACRA,EAAA,cAAc,eACdA,EAAA,UAAU,WACVA,EAAA,MAAM,OACNA,EAAA,OAAO,QAJCA,IAAAA,KAAA,CAAA,CAAA;AAOL,MAAMC,IAAkE;AAAA,EAC1E,aAAgC;AAAA,EAChC,SAA4B;AAAA,EAC5B,KAAwB;AAAA,EACxB,MAAyB;AAC9B,GAEaC,IAAuE;AAAA,EAC/E,aAAgC;AAAA,EAChC,SAA4B;AAAA,EAC5B,KAAwB;AAAA,EACxB,MAAyB;AAC9B,GAEMC,IAA4D;AAAA,EAC7D,aAAgC,gBAAAC,EAAA,cAACC,GAA0B,IAAA;AAAA,EAC3D,SAA4B,gBAAAD,EAAA,cAACE,GAA4B,IAAA;AAAA,EACzD,KAAwB,gBAAAF,EAAA,cAACG,GAAc,IAAA;AAAA,EACvC,MAAyB,gBAAAH,EAAA,cAACI,GAAa,IAAA;AAC5C,GAMaC,IAAsC,CAAC,EAAE,aAAAC,QAE9C,gBAAAN,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAWO,EAAM;AAAA,MACb;AAAA,MACAV,EAA6BS,CAAW;AAAA,IAAA,CAC3C;AAAA,EAAA;AAAA,EAEAE,EAAaT,EAAiBO,CAAW,GAAG,EAAE,MAAMG,EAAS,QAAQ;AAAA;AAIlFJ,EAAa,cAAc;"}
+{"version":3,"file":"BrightHeader.es.js","sources":["../../../src/components/Tooltip/BrightHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, ReactElement, cloneElement } from 'react';\nimport { merge } from '@utilities/merge';\nimport {\n    IconCheckMark,\n    IconDocument,\n    IconExclamationMarkCircle,\n    IconExclamationMarkTriangle,\n} from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\n\nexport enum BrightHeaderStyle {\n    Information = 'Information',\n    Warning = 'Warning',\n    Tip = 'Tip',\n    Note = 'Note',\n}\n\nexport const brightHeaderBackgroundColors: Record<BrightHeaderStyle, string> = {\n    [BrightHeaderStyle.Information]: 'tw-bg-box-selected-strong',\n    [BrightHeaderStyle.Warning]: 'tw-bg-box-negative-strong-pressed',\n    [BrightHeaderStyle.Tip]: 'tw-bg-box-positive-strong-pressed',\n    [BrightHeaderStyle.Note]: 'tw-bg-box-warning-strong',\n};\n\nexport const brightHeaderArrowBackgroundColors: Record<BrightHeaderStyle, string> = {\n    [BrightHeaderStyle.Information]: 'before:tw-bg-box-selected-strong',\n    [BrightHeaderStyle.Warning]: 'before:tw-bg-box-negative-strong-pressed',\n    [BrightHeaderStyle.Tip]: 'before:tw-bg-box-positive-strong-pressed',\n    [BrightHeaderStyle.Note]: 'before:tw-bg-box-warning-strong',\n};\n\nconst brightHeaderIcon: Record<BrightHeaderStyle, ReactElement> = {\n    [BrightHeaderStyle.Information]: <IconExclamationMarkCircle />,\n    [BrightHeaderStyle.Warning]: <IconExclamationMarkTriangle />,\n    [BrightHeaderStyle.Tip]: <IconCheckMark />,\n    [BrightHeaderStyle.Note]: <IconDocument />,\n};\n\ntype BrightHeaderProps = {\n    headerStyle: BrightHeaderStyle;\n};\n\nexport const BrightHeader: FC<BrightHeaderProps> = ({ headerStyle }) => {\n    return (\n        <div\n            data-test-id=\"bright-header\"\n            className={merge([\n                'tw-h-9 tw-relative tw-z-[120000] tw-flex tw-justify-center tw-items-center tw-rounded-t-md tw-dark tw-text-text',\n                brightHeaderBackgroundColors[headerStyle],\n            ])}\n        >\n            {cloneElement(brightHeaderIcon[headerStyle], { size: IconSize.Size20 })}\n        </div>\n    );\n};\nBrightHeader.displayName = 'FondueBrightHeader';\n"],"names":["BrightHeaderStyle","brightHeaderBackgroundColors","brightHeaderArrowBackgroundColors","brightHeaderIcon","React","IconExclamationMarkCircle","IconExclamationMarkTriangle","IconCheckMark","IconDocument","BrightHeader","headerStyle","merge","cloneElement","IconSize"],"mappings":";;;;;;;AAYY,IAAAA,sBAAAA,OACRA,EAAA,cAAc,eACdA,EAAA,UAAU,WACVA,EAAA,MAAM,OACNA,EAAA,OAAO,QAJCA,IAAAA,KAAA,CAAA,CAAA;AAOL,MAAMC,IAAkE;AAAA,EAC1E,aAAgC;AAAA,EAChC,SAA4B;AAAA,EAC5B,KAAwB;AAAA,EACxB,MAAyB;AAC9B,GAEaC,IAAuE;AAAA,EAC/E,aAAgC;AAAA,EAChC,SAA4B;AAAA,EAC5B,KAAwB;AAAA,EACxB,MAAyB;AAC9B,GAEMC,IAA4D;AAAA,EAC7D,aAAgC,gBAAAC,EAAA,cAACC,GAA0B,IAAA;AAAA,EAC3D,SAA4B,gBAAAD,EAAA,cAACE,GAA4B,IAAA;AAAA,EACzD,KAAwB,gBAAAF,EAAA,cAACG,GAAc,IAAA;AAAA,EACvC,MAAyB,gBAAAH,EAAA,cAACI,GAAa,IAAA;AAC5C,GAMaC,IAAsC,CAAC,EAAE,aAAAC,QAE9C,gBAAAN,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAWO,EAAM;AAAA,MACb;AAAA,MACAV,EAA6BS,CAAW;AAAA,IAAA,CAC3C;AAAA,EAAA;AAAA,EAEAE,EAAaT,EAAiBO,CAAW,GAAG,EAAE,MAAMG,EAAS,QAAQ;AAAA;AAIlFJ,EAAa,cAAc;"}

package/dist/components/Tooltip/Tooltip.es.js

@@ -1,10 +1,10 @@
 import { IconSize as V } from "../../foundation/Icon/IconSize.es.js";
 import { useLink as ne } from "@react-aria/link";
-import { FOCUS_VISIBLE_STYLE as we } from "../../utilities/focusStyle.es.js";
+import { FOCUS_VISIBLE_STYLE as fe } from "../../utilities/focusStyle.es.js";
 import { merge as n } from "../../utilities/merge.es.js";
-import t, { useState as d, useRef as Y, useMemo as ie, useCallback as k, useEffect as fe, useLayoutEffect as ce, cloneElement as v } from "react";
-import { BrightHeader as me, brightHeaderArrowBackgroundColors as x } from "./BrightHeader.es.js";
-import { usePopper as de } from "react-popper";
+import t, { useState as c, useRef as Y, useMemo as we, useCallback as h, useEffect as me, useLayoutEffect as ie, cloneElement as x } from "react";
+import { BrightHeader as de, brightHeaderArrowBackgroundColors as B } from "./BrightHeader.es.js";
+import { usePopper as ce } from "react-popper";
 import { useMemoizedId as pe } from "../../hooks/useMemoizedId.es.js";
 import { Button as j } from "../Button/Button.es.js";
 import { ButtonStyle as q, ButtonEmphasis as D, ButtonSize as G } from "../Button/ButtonTypes.es.js";
@@ -16,7 +16,7 @@ const J = {
   large: "tw-pb-4"
 };
 var ue = /* @__PURE__ */ ((e) => (e.Top = "Top", e.Right = "Right", e.Bottom = "Bottom", e.Left = "Left", e))(ue || {}), be = /* @__PURE__ */ ((e) => (e.Start = "Start", e.Middle = "Middle", e.End = "End", e))(be || {});
-const ge = {
+const Ee = {
   ["Top-Start"]: "top-start",
   ["Top-End"]: "top-end",
   ["Bottom-Start"]: "bottom-start",
@@ -29,56 +29,56 @@ const ge = {
   ["Right-Middle"]: "right",
   ["Bottom-Middle"]: "bottom",
   ["Left-Middle"]: "left"
-}, Ee = (e, l, s) => {
+}, ge = (e, s, l) => {
   switch (!0) {
     case e.toString().includes("Top".toLowerCase()):
-      return "before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white";
+      return "before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-dark before:tw-bg-base";
     case e.toString().includes("Right".toLowerCase()):
       return n([
         "before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]",
-        l && s === "Start" && e.toString().includes("Start".toLowerCase()) ? x[l] : "before:tw-bg-black-100 before:dark:tw-bg-white"
+        s && l === "Start" && e.toString().includes("Start".toLowerCase()) ? B[s] : "before:tw-dark before:tw-bg-base"
       ]);
     case e.toString().includes("Bottom".toLowerCase()):
       return n([
         "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]",
-        l ? x[l] : "before:tw-bg-black-100 before:dark:tw-bg-white"
+        s ? B[s] : "before:tw-dark before:tw-bg-base"
       ]);
     case e.toString().includes("Left".toLowerCase()):
       return n([
         "before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]",
-        l && s === "Start" && e.toString().includes("Start".toLowerCase()) ? x[l] : "before:tw-bg-black-100 before:dark:tw-bg-white"
+        s && l === "Start" && e.toString().includes("Start".toLowerCase()) ? B[s] : "before:tw-dark before:tw-bg-base"
       ]);
     default:
-      return "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white";
+      return "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-dark before:tw-bg-base";
   }
 }, Se = ({
   content: e,
-  tooltipIcon: l,
-  heading: s,
+  tooltipIcon: s,
+  heading: l,
   headingIcon: p,
-  linkUrl: c,
+  linkUrl: i,
   linkLabel: Q,
-  brightHeader: m,
+  brightHeader: d,
   buttons: r,
   children: W,
-  position: B = "Bottom",
-  alignment: L = "Middle",
+  position: L = "Bottom",
+  alignment: k = "Middle",
   withArrow: u,
   flip: X = !0,
   triggerElement: T,
   hoverDelay: C = 200,
   enterDelay: b = 0,
   open: M = !1,
-  disabled: g = !1,
-  hidden: E = !1
+  disabled: E = !1,
+  hidden: g = !1
 }) => {
   var I;
-  const [S, Z] = d(
+  const [S, Z] = c(
     null
-  ), R = Y(null), { linkProps: A } = ne({}, R), P = ie(
-    () => c || m || r || s || p,
-    [c, m, r, s, p]
-  ), H = ge[`${B}-${L}`], [w, U] = d(null), [y, ee] = d(null), [te, re] = d(null), z = pe(), i = de(S, w, {
+  ), R = Y(null), { linkProps: A } = ne({}, R), P = we(
+    () => i || d || r || l || p,
+    [i, d, r, l, p]
+  ), H = Ee[`${L}-${k}`], [f, U] = c(null), [y, ee] = c(null), [te, re] = c(null), z = pe(), w = ce(S, f, {
     placement: H,
     strategy: "fixed",
     modifiers: [
@@ -99,81 +99,78 @@ const ge = {
         enabled: X
       }
     ]
-  }), oe = ((I = i.state) == null ? void 0 : I.placement) ?? B, ae = Ee(oe, m, L), [h, o] = d(!1), f = Y(null), N = k(() => {
-    f.current && clearTimeout(f.current), f.current = setTimeout(() => o(!1), C);
-  }, [C]), O = k(() => {
-    if (f.current && clearTimeout(f.current), b) {
-      f.current = setTimeout(() => o(!0), b);
+  }), oe = ((I = w.state) == null ? void 0 : I.placement) ?? L, ae = ge(oe, d, k), [v, o] = c(!1), m = Y(null), N = h(() => {
+    m.current && clearTimeout(m.current), m.current = setTimeout(() => o(!1), C);
+  }, [C]), O = h(() => {
+    if (m.current && clearTimeout(m.current), b) {
+      m.current = setTimeout(() => o(!0), b);
       return;
     }
     o(!0);
-  }, [b]), F = k(
+  }, [b]), F = h(
     (a) => {
       var $;
       const _ = a.path ?? (($ = a.composedPath) == null ? void 0 : $.call(a));
-      _ && [S, y, w].some((se) => _.includes(se)) && O();
+      _ && [S, y, f].some((le) => _.includes(le)) && O();
     },
-    [O, S, y, w]
-  ), le = {
+    [O, S, y, f]
+  ), se = {
     onMouseOver: (a) => F(a.nativeEvent),
     onMouseLeave: N,
     onFocus: () => o(!0),
     onBlur: (a) => {
-      w != null && w.contains(a.relatedTarget) || o(!1);
+      f != null && f.contains(a.relatedTarget) || o(!1);
     }
   };
-  return fe(() => {
+  return me(() => {
     o(M);
-  }, [M]), ce(() => {
-    typeof i.update == "function" && h && i.update();
-  }, [h]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { ...le, ref: ee }, T && v(T, {
+  }, [M]), ie(() => {
+    typeof w.update == "function" && v && w.update();
+  }, [v]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { ...se, ref: ee }, T && x(T, {
     ref: Z,
     "aria-describedby": z,
-    "aria-disabled": !!(E || g)
+    "aria-disabled": !!(g || E)
   })), /* @__PURE__ */ t.createElement(
     "div",
     {
       ref: U,
-      "aria-hidden": !!(E || g),
+      "aria-hidden": !!(g || E),
       className: n([
-        "tw-popper-container tw-inline-block tw-max-w-[200px] tw-bg-black-100 dark:tw-bg-white tw-rounded-md tw-shadow-mid tw-text-white dark:tw-text-black-100 tw-z-[120000]",
-        (E || g) && "tw-hidden",
-        !h && "tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden"
+        "tw-popper-container tw-inline-block tw-max-w-[200px] tw-dark tw-bg-base tw-rounded-md tw-shadow-mid tw-text-text tw-z-[120000]",
+        (g || E) && "tw-hidden",
+        !v && "tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden"
       ]),
       "data-test-id": "tooltip",
       role: "tooltip",
       id: z,
-      style: i.styles.popper,
-      ...i.attributes.popper,
+      style: w.styles.popper,
+      ...w.attributes.popper,
       onFocus: () => o(!0),
       onMouseOver: (a) => F(a.nativeEvent),
       onMouseLeave: N
     },
-    m && /* @__PURE__ */ t.createElement(me, { headerStyle: m }),
+    d && /* @__PURE__ */ t.createElement(de, { headerStyle: d }),
     /* @__PURE__ */ t.createElement(
       "div",
       {
         className: n([
-          "tw-px-4 tw-bg-black-100 dark:tw-bg-white tw-rounded-md tw-relative tw-z-[120000]",
+          "tw-px-4 tw-dark tw-bg-base tw-rounded-md tw-relative tw-z-[120000]",
           P ? J.small : J.large,
-          c ? K.small : K.large
+          i ? K.small : K.large
         ])
       },
-      s && /* @__PURE__ */ t.createElement("h4", { className: "tw-flex tw-text-m tw-font-bold tw-mb-1" }, p && /* @__PURE__ */ t.createElement("span", { className: "tw-mr-1.5" }, v(p, { size: V.Size20 })), s),
-      /* @__PURE__ */ t.createElement("div", { className: "tw-flex" }, l && /* @__PURE__ */ t.createElement("span", { className: "tw-shrink-0 tw-mr-1 tw-leading-4" }, v(l, { size: V.Size16 })), /* @__PURE__ */ t.createElement("span", { className: "tw-text-s tw-min-w-0 tw-break-words" }, e)),
-      c && /* @__PURE__ */ t.createElement(
+      l && /* @__PURE__ */ t.createElement("h4", { className: "tw-flex tw-text-m tw-font-bold tw-mb-1" }, p && /* @__PURE__ */ t.createElement("span", { className: "tw-mr-1.5" }, x(p, { size: V.Size20 })), l),
+      /* @__PURE__ */ t.createElement("div", { className: "tw-flex" }, s && /* @__PURE__ */ t.createElement("span", { className: "tw-shrink-0 tw-mr-1 tw-leading-4" }, x(s, { size: V.Size16 })), /* @__PURE__ */ t.createElement("span", { className: "tw-text-s tw-min-w-0 tw-break-words" }, e)),
+      i && /* @__PURE__ */ t.createElement(
         "a",
         {
           ...A,
           "data-test-id": "tooltip-link",
           ref: R,
-          href: c,
+          href: i,
           target: "_blank",
           rel: "noopener noreferrer",
-          className: n([
-            "tw-text-xs tw-text-black-40 dark:tw-text-black-80 tw-underline tw-mt-1",
-            we
-          ]),
+          className: n(["tw-text-xs tw-text-black-40 tw-underline tw-mt-1", fe]),
           onBlur: () => r && r.length > 0 ? null : o(!1)
         },
         Q ?? "Click here to learn more."
@@ -204,7 +201,7 @@ const ge = {
         "data-test-id": "popover-arrow",
         "data-popper-arrow": u,
         ref: re,
-        style: i.styles.arrow,
+        style: w.styles.arrow,
         className: n([
           u && "tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line",
           u && ae

package/dist/components/Tooltip/Tooltip.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useLink } from '@react-aria/link';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, {\n    FocusEvent,\n    HTMLAttributes,\n    PropsWithChildren,\n    ReactChild,\n    ReactElement,\n    ReactNode,\n    cloneElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { BrightHeader, BrightHeaderStyle, brightHeaderArrowBackgroundColors } from './BrightHeader';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nexport type TooltipButton = {\n    label: string;\n    action: () => void;\n};\n\nexport type TooltipProps = PropsWithChildren<{\n    triggerElement?: ReactElement;\n    content: ReactNode;\n    tooltipIcon?: ReactElement;\n    heading?: ReactNode;\n    headingIcon?: ReactElement;\n    linkUrl?: string;\n    linkLabel?: string;\n    brightHeader?: BrightHeaderStyle;\n    buttons?: [TooltipButton, TooltipButton] | [TooltipButton];\n    children?: ReactChild;\n    position?: TooltipPosition;\n    alignment?: TooltipAlignment;\n    flip?: boolean;\n    withArrow?: boolean;\n    hoverDelay?: number;\n    enterDelay?: number;\n    open?: boolean;\n    disabled?: boolean;\n    /** @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore */\n    hidden?: boolean;\n}>;\n\n/**\n * This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pb-3.5` and `tw-pt-3.5` class.\n */\nconst paddingsTop = {\n    small: 'tw-pt-3.5',\n    large: 'tw-pt-4',\n};\n\nconst paddingsBottom = {\n    small: 'tw-pb-3.5',\n    large: 'tw-pb-4',\n};\n\nexport enum TooltipPosition {\n    Top = 'Top',\n    Right = 'Right',\n    Bottom = 'Bottom',\n    Left = 'Left',\n}\n\nexport enum TooltipAlignment {\n    Start = 'Start',\n    Middle = 'Middle',\n    End = 'End',\n}\n\nconst placementMap: Record<`${TooltipPosition}-${TooltipAlignment}`, Placement> = {\n    ['Top-Start']: 'top-start',\n    ['Top-End']: 'top-end',\n    ['Bottom-Start']: 'bottom-start',\n    ['Bottom-End']: 'bottom-end',\n    ['Left-Start']: 'left-start',\n    ['Left-End']: 'left-end',\n    ['Right-Start']: 'right-start',\n    ['Right-End']: 'right-end',\n    ['Top-Middle']: 'top',\n    ['Right-Middle']: 'right',\n    ['Bottom-Middle']: 'bottom',\n    ['Left-Middle']: 'left',\n};\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle | undefined, alignment: string) => {\n    switch (true) {\n        case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n            return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white';\n        case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n            return merge([\n                'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]',\n                brightHeader &&\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-black-100 before:dark:tw-bg-white',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n                brightHeader\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-black-100 before:dark:tw-bg-white',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]',\n                brightHeader &&\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-black-100 before:dark:tw-bg-white',\n            ]);\n        default:\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white';\n    }\n};\n\nexport const Tooltip = ({\n    content,\n    tooltipIcon,\n    heading,\n    headingIcon,\n    linkUrl,\n    linkLabel,\n    brightHeader,\n    buttons,\n    children,\n    position = TooltipPosition.Bottom,\n    alignment = TooltipAlignment.Middle,\n    withArrow,\n    flip = true,\n    triggerElement,\n    hoverDelay = 200,\n    enterDelay = 0,\n    open = false,\n    disabled = false,\n    hidden = false,\n}: TooltipProps) => {\n    const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement | HTMLDivElement | HTMLButtonElement | null>(\n        null,\n    );\n    const linkRef = useRef<HTMLAnchorElement | null>(null);\n    const { linkProps } = useLink({}, linkRef);\n    const hasLargePaddingTop = useMemo(\n        () => linkUrl || brightHeader || buttons || heading || headingIcon,\n        [linkUrl, brightHeader, buttons, heading, headingIcon],\n    );\n\n    const placement = placementMap[`${position}-${alignment}`];\n    const [tooltipContainerRef, setTooltipContainerRef] = useState<HTMLDivElement | null>(null);\n    const [triggerElementContainerRef, setTriggerElementContainerRef] = useState<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n    const id = useMemoizedId();\n\n    const tooltipOffset = withArrow ? 10 : 5;\n    const popperInstance = usePopper(triggerElementRef, tooltipContainerRef, {\n        placement,\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, tooltipOffset],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    const currentPlacement = popperInstance.state?.placement ?? position;\n    const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n    const [isOpen, setIsOpen] = useState(false);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const handleHideTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n    }, [hoverDelay]);\n\n    const handleShowTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        if (enterDelay) {\n            timeoutRef.current = setTimeout(() => setIsOpen(true), enterDelay);\n            return;\n        }\n\n        setIsOpen(true);\n    }, [enterDelay]);\n\n    const checkIfHovered = useCallback(\n        (event) => {\n            const hoveredElement = event.path ?? event.composedPath?.();\n            const hoverSources = [triggerElementRef, triggerElementContainerRef, tooltipContainerRef];\n\n            if (hoveredElement && hoverSources.some((el) => hoveredElement.includes(el))) {\n                handleShowTooltipOnHover();\n            }\n        },\n        [handleShowTooltipOnHover, triggerElementRef, triggerElementContainerRef, tooltipContainerRef],\n    );\n\n    const triggerProps: HTMLAttributes<HTMLElement> = {\n        onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n        onMouseLeave: handleHideTooltipOnHover,\n        onFocus: () => setIsOpen(true),\n        onBlur: (event: FocusEvent) => {\n            if (!tooltipContainerRef?.contains(event.relatedTarget)) {\n                setIsOpen(false);\n            }\n        },\n    };\n\n    useEffect(() => {\n        setIsOpen(open);\n    }, [open]);\n\n    useLayoutEffect(() => {\n        if (typeof popperInstance.update === 'function' && isOpen) {\n            popperInstance.update();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isOpen]);\n\n    return (\n        <>\n            <div {...triggerProps} ref={setTriggerElementContainerRef}>\n                {triggerElement &&\n                    cloneElement(triggerElement, {\n                        ref: setTriggerElementRef,\n                        'aria-describedby': id,\n                        'aria-disabled': hidden || disabled ? true : false,\n                    })}\n            </div>\n            <div\n                ref={setTooltipContainerRef}\n                aria-hidden={hidden || disabled ? true : false}\n                className={merge([\n                    'tw-popper-container tw-inline-block tw-max-w-[200px] tw-bg-black-100 dark:tw-bg-white tw-rounded-md tw-shadow-mid tw-text-white dark:tw-text-black-100 tw-z-[120000]',\n                    (hidden || disabled) && 'tw-hidden',\n                    !isOpen && 'tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden',\n                ])}\n                data-test-id=\"tooltip\"\n                role=\"tooltip\"\n                id={id}\n                style={popperInstance.styles.popper}\n                {...popperInstance.attributes.popper}\n                onFocus={() => setIsOpen(true)}\n                onMouseOver={(event) => checkIfHovered(event.nativeEvent)}\n                onMouseLeave={handleHideTooltipOnHover}\n            >\n                {brightHeader && <BrightHeader headerStyle={brightHeader} />}\n                <div\n                    className={merge([\n                        'tw-px-4 tw-bg-black-100 dark:tw-bg-white tw-rounded-md tw-relative tw-z-[120000]',\n                        hasLargePaddingTop ? paddingsTop.small : paddingsTop.large,\n                        linkUrl ? paddingsBottom.small : paddingsBottom.large,\n                    ])}\n                >\n                    {heading && (\n                        <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n                            {headingIcon && (\n                                <span className=\"tw-mr-1.5\">\n                                    {cloneElement(headingIcon, { size: IconSize.Size20 })}\n                                </span>\n                            )}\n                            {heading}\n                        </h4>\n                    )}\n                    <div className=\"tw-flex\">\n                        {tooltipIcon && (\n                            <span className=\"tw-shrink-0 tw-mr-1 tw-leading-4\">\n                                {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n                            </span>\n                        )}\n                        <span className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</span>\n                    </div>\n                    {linkUrl && (\n                        <a\n                            {...linkProps}\n                            data-test-id=\"tooltip-link\"\n                            ref={linkRef}\n                            href={linkUrl}\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            className={merge([\n                                'tw-text-xs tw-text-black-40 dark:tw-text-black-80 tw-underline tw-mt-1',\n                                FOCUS_VISIBLE_STYLE,\n                            ])}\n                            onBlur={() => (buttons && buttons.length > 0 ? null : setIsOpen(false))}\n                        >\n                            {linkLabel ?? 'Click here to learn more.'}\n                        </a>\n                    )}\n                    {buttons && (\n                        <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n                            {buttons.length > 0 && (\n                                <div onBlur={() => (buttons && buttons.length < 2 ? setIsOpen(false) : null)}>\n                                    <Button\n                                        style={ButtonStyle.Default}\n                                        emphasis={ButtonEmphasis.Strong}\n                                        size={ButtonSize.Small}\n                                        onClick={buttons[0].action}\n                                    >\n                                        {buttons[0].label}\n                                    </Button>\n                                </div>\n                            )}\n                            {buttons.length === 2 && (\n                                <div onBlur={() => setIsOpen(false)}>\n                                    <Button\n                                        style={ButtonStyle.Default}\n                                        emphasis={ButtonEmphasis.Default}\n                                        size={ButtonSize.Small}\n                                        onClick={buttons[1].action}\n                                    >\n                                        {buttons[1].label}\n                                    </Button>\n                                </div>\n                            )}\n                        </div>\n                    )}\n                </div>\n                {/**\n                 * This container is needed for the arrow element to not be styled by popperJS\n                 * selectors for its immediate children .tw-popper-container > .tw-popper-arrow\n                 * */}\n                <div aria-hidden=\"true\">\n                    <div\n                        data-test-id=\"popover-arrow\"\n                        data-popper-arrow={withArrow}\n                        ref={setArrowElement}\n                        style={popperInstance.styles.arrow}\n                        className={merge([\n                            withArrow &&\n                                'tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line',\n                            withArrow && arrowStyling,\n                        ])}\n                    />\n                </div>\n                {children}\n            </div>\n        </>\n    );\n};\nTooltip.displayName = 'FondueTooltip';\n"],"names":["paddingsTop","paddingsBottom","TooltipPosition","TooltipAlignment","placementMap","getArrowClasses","currentPlacement","brightHeader","alignment","merge","brightHeaderArrowBackgroundColors","Tooltip","content","tooltipIcon","heading","headingIcon","linkUrl","linkLabel","buttons","children","position","withArrow","flip","triggerElement","hoverDelay","enterDelay","open","disabled","hidden","triggerElementRef","setTriggerElementRef","useState","linkRef","useRef","linkProps","useLink","hasLargePaddingTop","useMemo","placement","tooltipContainerRef","setTooltipContainerRef","triggerElementContainerRef","setTriggerElementContainerRef","arrowElement","setArrowElement","id","useMemoizedId","popperInstance","usePopper","_a","arrowStyling","isOpen","setIsOpen","timeoutRef","handleHideTooltipOnHover","useCallback","handleShowTooltipOnHover","checkIfHovered","event","hoveredElement","el","triggerProps","useEffect","useLayoutEffect","React","cloneElement","BrightHeader","IconSize","FOCUS_VISIBLE_STYLE","Button","ButtonStyle","ButtonEmphasis","ButtonSize"],"mappings":"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"}
+{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useLink } from '@react-aria/link';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, {\n    FocusEvent,\n    HTMLAttributes,\n    PropsWithChildren,\n    ReactChild,\n    ReactElement,\n    ReactNode,\n    cloneElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { BrightHeader, BrightHeaderStyle, brightHeaderArrowBackgroundColors } from './BrightHeader';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nexport type TooltipButton = {\n    label: string;\n    action: () => void;\n};\n\nexport type TooltipProps = PropsWithChildren<{\n    triggerElement?: ReactElement;\n    content: ReactNode;\n    tooltipIcon?: ReactElement;\n    heading?: ReactNode;\n    headingIcon?: ReactElement;\n    linkUrl?: string;\n    linkLabel?: string;\n    brightHeader?: BrightHeaderStyle;\n    buttons?: [TooltipButton, TooltipButton] | [TooltipButton];\n    children?: ReactChild;\n    position?: TooltipPosition;\n    alignment?: TooltipAlignment;\n    flip?: boolean;\n    withArrow?: boolean;\n    hoverDelay?: number;\n    enterDelay?: number;\n    open?: boolean;\n    disabled?: boolean;\n    /** @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore */\n    hidden?: boolean;\n}>;\n\n/**\n * This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pb-3.5` and `tw-pt-3.5` class.\n */\nconst paddingsTop = {\n    small: 'tw-pt-3.5',\n    large: 'tw-pt-4',\n};\n\nconst paddingsBottom = {\n    small: 'tw-pb-3.5',\n    large: 'tw-pb-4',\n};\n\nexport enum TooltipPosition {\n    Top = 'Top',\n    Right = 'Right',\n    Bottom = 'Bottom',\n    Left = 'Left',\n}\n\nexport enum TooltipAlignment {\n    Start = 'Start',\n    Middle = 'Middle',\n    End = 'End',\n}\n\nconst placementMap: Record<`${TooltipPosition}-${TooltipAlignment}`, Placement> = {\n    ['Top-Start']: 'top-start',\n    ['Top-End']: 'top-end',\n    ['Bottom-Start']: 'bottom-start',\n    ['Bottom-End']: 'bottom-end',\n    ['Left-Start']: 'left-start',\n    ['Left-End']: 'left-end',\n    ['Right-Start']: 'right-start',\n    ['Right-End']: 'right-end',\n    ['Top-Middle']: 'top',\n    ['Right-Middle']: 'right',\n    ['Bottom-Middle']: 'bottom',\n    ['Left-Middle']: 'left',\n};\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle | undefined, alignment: string) => {\n    switch (true) {\n        case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n            return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-dark before:tw-bg-base';\n        case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n            return merge([\n                'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]',\n                brightHeader &&\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-dark before:tw-bg-base',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n                brightHeader ? brightHeaderArrowBackgroundColors[brightHeader] : 'before:tw-dark before:tw-bg-base',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]',\n                brightHeader &&\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-dark before:tw-bg-base',\n            ]);\n        default:\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-dark before:tw-bg-base';\n    }\n};\n\nexport const Tooltip = ({\n    content,\n    tooltipIcon,\n    heading,\n    headingIcon,\n    linkUrl,\n    linkLabel,\n    brightHeader,\n    buttons,\n    children,\n    position = TooltipPosition.Bottom,\n    alignment = TooltipAlignment.Middle,\n    withArrow,\n    flip = true,\n    triggerElement,\n    hoverDelay = 200,\n    enterDelay = 0,\n    open = false,\n    disabled = false,\n    hidden = false,\n}: TooltipProps) => {\n    const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement | HTMLDivElement | HTMLButtonElement | null>(\n        null,\n    );\n    const linkRef = useRef<HTMLAnchorElement | null>(null);\n    const { linkProps } = useLink({}, linkRef);\n    const hasLargePaddingTop = useMemo(\n        () => linkUrl || brightHeader || buttons || heading || headingIcon,\n        [linkUrl, brightHeader, buttons, heading, headingIcon],\n    );\n\n    const placement = placementMap[`${position}-${alignment}`];\n    const [tooltipContainerRef, setTooltipContainerRef] = useState<HTMLDivElement | null>(null);\n    const [triggerElementContainerRef, setTriggerElementContainerRef] = useState<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n    const id = useMemoizedId();\n\n    const tooltipOffset = withArrow ? 10 : 5;\n    const popperInstance = usePopper(triggerElementRef, tooltipContainerRef, {\n        placement,\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, tooltipOffset],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    const currentPlacement = popperInstance.state?.placement ?? position;\n    const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n    const [isOpen, setIsOpen] = useState(false);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const handleHideTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n    }, [hoverDelay]);\n\n    const handleShowTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        if (enterDelay) {\n            timeoutRef.current = setTimeout(() => setIsOpen(true), enterDelay);\n            return;\n        }\n\n        setIsOpen(true);\n    }, [enterDelay]);\n\n    const checkIfHovered = useCallback(\n        (event) => {\n            const hoveredElement = event.path ?? event.composedPath?.();\n            const hoverSources = [triggerElementRef, triggerElementContainerRef, tooltipContainerRef];\n\n            if (hoveredElement && hoverSources.some((el) => hoveredElement.includes(el))) {\n                handleShowTooltipOnHover();\n            }\n        },\n        [handleShowTooltipOnHover, triggerElementRef, triggerElementContainerRef, tooltipContainerRef],\n    );\n\n    const triggerProps: HTMLAttributes<HTMLElement> = {\n        onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n        onMouseLeave: handleHideTooltipOnHover,\n        onFocus: () => setIsOpen(true),\n        onBlur: (event: FocusEvent) => {\n            if (!tooltipContainerRef?.contains(event.relatedTarget)) {\n                setIsOpen(false);\n            }\n        },\n    };\n\n    useEffect(() => {\n        setIsOpen(open);\n    }, [open]);\n\n    useLayoutEffect(() => {\n        if (typeof popperInstance.update === 'function' && isOpen) {\n            popperInstance.update();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isOpen]);\n\n    return (\n        <>\n            <div {...triggerProps} ref={setTriggerElementContainerRef}>\n                {triggerElement &&\n                    cloneElement(triggerElement, {\n                        ref: setTriggerElementRef,\n                        'aria-describedby': id,\n                        'aria-disabled': hidden || disabled ? true : false,\n                    })}\n            </div>\n            <div\n                ref={setTooltipContainerRef}\n                aria-hidden={hidden || disabled ? true : false}\n                className={merge([\n                    'tw-popper-container tw-inline-block tw-max-w-[200px] tw-dark tw-bg-base tw-rounded-md tw-shadow-mid tw-text-text tw-z-[120000]',\n                    (hidden || disabled) && 'tw-hidden',\n                    !isOpen && 'tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden',\n                ])}\n                data-test-id=\"tooltip\"\n                role=\"tooltip\"\n                id={id}\n                style={popperInstance.styles.popper}\n                {...popperInstance.attributes.popper}\n                onFocus={() => setIsOpen(true)}\n                onMouseOver={(event) => checkIfHovered(event.nativeEvent)}\n                onMouseLeave={handleHideTooltipOnHover}\n            >\n                {brightHeader && <BrightHeader headerStyle={brightHeader} />}\n                <div\n                    className={merge([\n                        'tw-px-4 tw-dark tw-bg-base tw-rounded-md tw-relative tw-z-[120000]',\n                        hasLargePaddingTop ? paddingsTop.small : paddingsTop.large,\n                        linkUrl ? paddingsBottom.small : paddingsBottom.large,\n                    ])}\n                >\n                    {heading && (\n                        <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n                            {headingIcon && (\n                                <span className=\"tw-mr-1.5\">\n                                    {cloneElement(headingIcon, { size: IconSize.Size20 })}\n                                </span>\n                            )}\n                            {heading}\n                        </h4>\n                    )}\n                    <div className=\"tw-flex\">\n                        {tooltipIcon && (\n                            <span className=\"tw-shrink-0 tw-mr-1 tw-leading-4\">\n                                {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n                            </span>\n                        )}\n                        <span className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</span>\n                    </div>\n                    {linkUrl && (\n                        <a\n                            {...linkProps}\n                            data-test-id=\"tooltip-link\"\n                            ref={linkRef}\n                            href={linkUrl}\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            className={merge(['tw-text-xs tw-text-black-40 tw-underline tw-mt-1', FOCUS_VISIBLE_STYLE])}\n                            onBlur={() => (buttons && buttons.length > 0 ? null : setIsOpen(false))}\n                        >\n                            {linkLabel ?? 'Click here to learn more.'}\n                        </a>\n                    )}\n                    {buttons && (\n                        <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n                            {buttons.length > 0 && (\n                                <div onBlur={() => (buttons && buttons.length < 2 ? setIsOpen(false) : null)}>\n                                    <Button\n                                        style={ButtonStyle.Default}\n                                        emphasis={ButtonEmphasis.Strong}\n                                        size={ButtonSize.Small}\n                                        onClick={buttons[0].action}\n                                    >\n                                        {buttons[0].label}\n                                    </Button>\n                                </div>\n                            )}\n                            {buttons.length === 2 && (\n                                <div onBlur={() => setIsOpen(false)}>\n                                    <Button\n                                        style={ButtonStyle.Default}\n                                        emphasis={ButtonEmphasis.Default}\n                                        size={ButtonSize.Small}\n                                        onClick={buttons[1].action}\n                                    >\n                                        {buttons[1].label}\n                                    </Button>\n                                </div>\n                            )}\n                        </div>\n                    )}\n                </div>\n                {/**\n                 * This container is needed for the arrow element to not be styled by popperJS\n                 * selectors for its immediate children .tw-popper-container > .tw-popper-arrow\n                 * */}\n                <div aria-hidden=\"true\">\n                    <div\n                        data-test-id=\"popover-arrow\"\n                        data-popper-arrow={withArrow}\n                        ref={setArrowElement}\n                        style={popperInstance.styles.arrow}\n                        className={merge([\n                            withArrow &&\n                                'tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line',\n                            withArrow && arrowStyling,\n                        ])}\n                    />\n                </div>\n                {children}\n            </div>\n        </>\n    );\n};\nTooltip.displayName = 'FondueTooltip';\n"],"names":["paddingsTop","paddingsBottom","TooltipPosition","TooltipAlignment","placementMap","getArrowClasses","currentPlacement","brightHeader","alignment","merge","brightHeaderArrowBackgroundColors","Tooltip","content","tooltipIcon","heading","headingIcon","linkUrl","linkLabel","buttons","children","position","withArrow","flip","triggerElement","hoverDelay","enterDelay","open","disabled","hidden","triggerElementRef","setTriggerElementRef","useState","linkRef","useRef","linkProps","useLink","hasLargePaddingTop","useMemo","placement","tooltipContainerRef","setTooltipContainerRef","triggerElementContainerRef","setTriggerElementContainerRef","arrowElement","setArrowElement","id","useMemoizedId","popperInstance","usePopper","_a","arrowStyling","isOpen","setIsOpen","timeoutRef","handleHideTooltipOnHover","useCallback","handleShowTooltipOnHover","checkIfHovered","event","hoveredElement","el","triggerProps","useEffect","useLayoutEffect","React","cloneElement","BrightHeader","IconSize","FOCUS_VISIBLE_STYLE","Button","ButtonStyle","ButtonEmphasis","ButtonSize"],"mappings":";;;;;;;;;;AA0DA,MAAMA,IAAc;AAAA,EAChB,OAAO;AAAA,EACP,OAAO;AACX,GAEMC,IAAiB;AAAA,EACnB,OAAO;AAAA,EACP,OAAO;AACX;AAEY,IAAAC,uBAAAA,OACRA,EAAA,MAAM,OACNA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QAJCA,IAAAA,MAAA,CAAA,CAAA,GAOAC,uBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,MAAM,OAHEA,IAAAA,MAAA,CAAA,CAAA;AAMZ,MAAMC,KAA4E;AAAA,EAC9E,CAAC,WAAW,GAAG;AAAA,EACf,CAAC,SAAS,GAAG;AAAA,EACb,CAAC,cAAc,GAAG;AAAA,EAClB,CAAC,YAAY,GAAG;AAAA,EAChB,CAAC,YAAY,GAAG;AAAA,EAChB,CAAC,UAAU,GAAG;AAAA,EACd,CAAC,aAAa,GAAG;AAAA,EACjB,CAAC,WAAW,GAAG;AAAA,EACf,CAAC,YAAY,GAAG;AAAA,EAChB,CAAC,cAAc,GAAG;AAAA,EAClB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,aAAa,GAAG;AACrB,GAEMC,KAAkB,CAACC,GAA0BC,GAA6CC,MAAsB;AAClH,UAAQ,IAAM;AAAA,IACV,KAAKF,EAAiB,WAAW,SAAS,MAAoB,aAAa;AAChE,aAAA;AAAA,IACX,KAAKA,EAAiB,WAAW,SAAS,QAAsB,aAAa;AACzE,aAAOG,EAAM;AAAA,QACT;AAAA,QACAF,KACAC,MAAc,WACdF,EAAiB,SAAS,EAAE,SAAS,QAAuB,YAAY,CAAC,IACnEI,EAAkCH,CAAY,IAC9C;AAAA,MAAA,CACT;AAAA,IACL,KAAKD,EAAiB,WAAW,SAAS,SAAuB,aAAa;AAC1E,aAAOG,EAAM;AAAA,QACT;AAAA,QACAF,IAAeG,EAAkCH,CAAY,IAAI;AAAA,MAAA,CACpE;AAAA,IACL,KAAKD,EAAiB,WAAW,SAAS,OAAqB,aAAa;AACxE,aAAOG,EAAM;AAAA,QACT;AAAA,QACAF,KACAC,MAAc,WACdF,EAAiB,SAAS,EAAE,SAAS,QAAuB,YAAY,CAAC,IACnEI,EAAkCH,CAAY,IAC9C;AAAA,MAAA,CACT;AAAA,IACL;AACW,aAAA;AAAA,EACf;AACJ,GAEaI,KAAU,CAAC;AAAA,EACpB,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAV;AAAA,EACA,SAAAW;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAZ,IAAY;AAAA,EACZ,WAAAa;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,gBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AACb,MAAoB;;AACV,QAAA,CAACC,GAAmBC,CAAoB,IAAIC;AAAA,IAC9C;AAAA,EAAA,GAEEC,IAAUC,EAAiC,IAAI,GAC/C,EAAE,WAAAC,EAAU,IAAIC,GAAQ,IAAIH,CAAO,GACnCI,IAAqBC;AAAA,IACvB,MAAMrB,KAAWT,KAAgBW,KAAWJ,KAAWC;AAAA,IACvD,CAACC,GAAST,GAAcW,GAASJ,GAASC,CAAW;AAAA,EAAA,GAGnDuB,IAAYlC,GAAa,GAAGgB,KAAYZ,GAAW,GACnD,CAAC+B,GAAqBC,CAAsB,IAAIT,EAAgC,IAAI,GACpF,CAACU,GAA4BC,EAA6B,IAAIX,EAAgC,IAAI,GAClG,CAACY,IAAcC,EAAe,IAAIb,EAAgC,IAAI,GACtEc,IAAKC,MAGLC,IAAiBC,GAAUnB,GAAmBU,GAAqB;AAAA,IACrE,WAAAD;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,SAASK;AAAA,QACb;AAAA,MACJ;AAAA,MACA;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAQ,CAAC,GAdHtB,IAAY,KAAK,CAcE;AAAA,QAC7B;AAAA,MACJ;AAAA,MACA;AAAA,QACI,MAAM;AAAA,QACN,SAASC;AAAA,MACb;AAAA,IACJ;AAAA,EAAA,CACH,GAEKhB,OAAmB2C,IAAAF,EAAe,UAAf,gBAAAE,EAAsB,cAAa7B,GACtD8B,KAAe7C,GAAgBC,IAAkBC,GAAcC,CAAS,GACxE,CAAC2C,GAAQC,CAAS,IAAIrB,EAAS,EAAK,GACpCsB,IAAapB,EAA6C,IAAI,GAE9DqB,IAA2BC,EAAY,MAAM;AAC/C,IAAIF,EAAW,WACX,aAAaA,EAAW,OAAO,GAEnCA,EAAW,UAAU,WAAW,MAAMD,EAAU,EAAK,GAAG5B,CAAU;AAAA,EAAA,GACnE,CAACA,CAAU,CAAC,GAETgC,IAA2BD,EAAY,MAAM;AAK/C,QAJIF,EAAW,WACX,aAAaA,EAAW,OAAO,GAG/B5B,GAAY;AACZ,MAAA4B,EAAW,UAAU,WAAW,MAAMD,EAAU,EAAI,GAAG3B,CAAU;AACjE;AAAA,IACJ;AAEA,IAAA2B,EAAU,EAAI;AAAA,EAAA,GACf,CAAC3B,CAAU,CAAC,GAETgC,IAAiBF;AAAA,IACnB,CAACG,MAAU;;AACP,YAAMC,IAAiBD,EAAM,UAAQT,IAAAS,EAAM,iBAAN,gBAAAT,EAAA,KAAAS;AAGjC,MAAAC,KAFiB,CAAC9B,GAAmBY,GAA4BF,CAAmB,EAErD,KAAK,CAACqB,OAAOD,EAAe,SAASC,EAAE,CAAC,KAC9CJ;IAEjC;AAAA,IACA,CAACA,GAA0B3B,GAAmBY,GAA4BF,CAAmB;AAAA,EAAA,GAG3FsB,KAA4C;AAAA,IAC9C,aAAa,CAACH,MAAUD,EAAeC,EAAM,WAAW;AAAA,IACxD,cAAcJ;AAAA,IACd,SAAS,MAAMF,EAAU,EAAI;AAAA,IAC7B,QAAQ,CAACM,MAAsB;AAC3B,MAAKnB,KAAA,QAAAA,EAAqB,SAASmB,EAAM,kBACrCN,EAAU,EAAK;AAAA,IAEvB;AAAA,EAAA;AAGJ,SAAAU,GAAU,MAAM;AACZ,IAAAV,EAAU1B,CAAI;AAAA,EAAA,GACf,CAACA,CAAI,CAAC,GAETqC,GAAgB,MAAM;AAClB,IAAI,OAAOhB,EAAe,UAAW,cAAcI,KAC/CJ,EAAe,OAAO;AAAA,EAC1B,GAED,CAACI,CAAM,CAAC,GAGP,gBAAAa,EAAA,cAAAA,EAAA,UAAA,sCACK,OAAK,EAAA,GAAGH,IAAc,KAAKnB,GAAA,GACvBnB,KACG0C,EAAa1C,GAAgB;AAAA,IACzB,KAAKO;AAAA,IACL,oBAAoBe;AAAA,IACpB,iBAAiB,GAAAjB,KAAUD;AAAA,EAAkB,CAChD,CACT,GACA,gBAAAqC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKxB;AAAA,MACL,eAAa,GAAAZ,KAAUD;AAAA,MACvB,WAAWlB,EAAM;AAAA,QACb;AAAA,SACCmB,KAAUD,MAAa;AAAA,QACxB,CAACwB,KAAU;AAAA,MAAA,CACd;AAAA,MACD,gBAAa;AAAA,MACb,MAAK;AAAA,MACL,IAAAN;AAAA,MACA,OAAOE,EAAe,OAAO;AAAA,MAC5B,GAAGA,EAAe,WAAW;AAAA,MAC9B,SAAS,MAAMK,EAAU,EAAI;AAAA,MAC7B,aAAa,CAACM,MAAUD,EAAeC,EAAM,WAAW;AAAA,MACxD,cAAcJ;AAAA,IAAA;AAAA,IAEb/C,KAAgB,gBAAAyD,EAAA,cAACE,IAAa,EAAA,aAAa3D,GAAc;AAAA,IAC1D,gBAAAyD,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWvD,EAAM;AAAA,UACb;AAAA,UACA2B,IAAqBpC,EAAY,QAAQA,EAAY;AAAA,UACrDgB,IAAUf,EAAe,QAAQA,EAAe;AAAA,QAAA,CACnD;AAAA,MAAA;AAAA,MAEAa,KACI,gBAAAkD,EAAA,cAAA,MAAA,EAAG,WAAU,4CACTjD,qCACI,QAAK,EAAA,WAAU,eACXkD,EAAalD,GAAa,EAAE,MAAMoD,EAAS,QAAQ,CACxD,GAEHrD,CACL;AAAA,MAEJ,gBAAAkD,EAAA,cAAC,SAAI,WAAU,UAAA,GACVnD,KACI,gBAAAmD,EAAA,cAAA,QAAA,EAAK,WAAU,mCAAA,GACXC,EAAapD,GAAa,EAAE,MAAMsD,EAAS,OAAO,CAAC,CACxD,mCAEH,QAAK,EAAA,WAAU,sCAAuC,GAAAvD,CAAQ,CACnE;AAAA,MACCI,KACG,gBAAAgD,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACI,GAAG9B;AAAA,UACJ,gBAAa;AAAA,UACb,KAAKF;AAAA,UACL,MAAMhB;AAAA,UACN,QAAO;AAAA,UACP,KAAI;AAAA,UACJ,WAAWP,EAAM,CAAC,oDAAoD2D,EAAmB,CAAC;AAAA,UAC1F,QAAQ,MAAOlD,KAAWA,EAAQ,SAAS,IAAI,OAAOkC,EAAU,EAAK;AAAA,QAAA;AAAA,QAEpEnC,KAAa;AAAA,MAClB;AAAA,MAEHC,KACI,gBAAA8C,EAAA,cAAA,OAAA,EAAI,WAAU,iDACV,GAAA9C,EAAQ,SAAS,KACd,gBAAA8C,EAAA,cAAC,SAAI,QAAQ,MAAO9C,KAAWA,EAAQ,SAAS,IAAIkC,EAAU,EAAK,IAAI,KACnE,GAAA,gBAAAY,EAAA;AAAA,QAACK;AAAA,QAAA;AAAA,UACG,OAAOC,EAAY;AAAA,UACnB,UAAUC,EAAe;AAAA,UACzB,MAAMC,EAAW;AAAA,UACjB,SAAStD,EAAQ,CAAC,EAAE;AAAA,QAAA;AAAA,QAEnBA,EAAQ,CAAC,EAAE;AAAA,MAEpB,CAAA,GAEHA,EAAQ,WAAW,KACf,gBAAA8C,EAAA,cAAA,OAAA,EAAI,QAAQ,MAAMZ,EAAU,EAAK,EAC9B,GAAA,gBAAAY,EAAA;AAAA,QAACK;AAAA,QAAA;AAAA,UACG,OAAOC,EAAY;AAAA,UACnB,UAAUC,EAAe;AAAA,UACzB,MAAMC,EAAW;AAAA,UACjB,SAAStD,EAAQ,CAAC,EAAE;AAAA,QAAA;AAAA,QAEnBA,EAAQ,CAAC,EAAE;AAAA,MAAA,CAEpB,CAER;AAAA,IAER;AAAA,IAKA,gBAAA8C,EAAA,cAAC,OAAI,EAAA,eAAY,OACb,GAAA,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,qBAAmB3C;AAAA,QACnB,KAAKuB;AAAA,QACL,OAAOG,EAAe,OAAO;AAAA,QAC7B,WAAWtC,EAAM;AAAA,UACbY,KACI;AAAA,UACJA,KAAa6B;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IAAA,CAET;AAAA,IACC/B;AAAA,EAAA,CAET;AAER;AACAR,GAAQ,cAAc;"}