@frontify/fondue 12.0.0-beta.115 → 12.0.0-beta.117

package/dist/components/Button/Button.d.ts

@@ -15,6 +15,7 @@ export type ButtonProps = {
     onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;
     hugWidth?: boolean;
     'aria-label'?: string;
+    'aria-describedby'?: string;
     formId?: string;
     /** @deprecated use emphasis with ButtonEmphasis.Weak */
     solid?: boolean;

package/dist/components/Button/Button.es.js

@@ -1,79 +1,81 @@
-import i, { forwardRef as I, cloneElement as M } from "react";
-import { useButton as P } from "@react-aria/button";
+import l, { forwardRef as M, cloneElement as P } from "react";
+import { useButton as T } from "@react-aria/button";
 import { merge as r } from "../../utilities/merge.es.js";
-import { useForwardedRef as T } from "../../utilities/useForwardedRef.es.js";
-import { ButtonStyle as o, ButtonEmphasis as u, ButtonType as O, ButtonSize as U, ButtonRounding as V } from "./ButtonTypes.es.js";
-import { UpdatedButtonStyle as nt } from "./ButtonTypes.es.js";
-import { ButtonCommonClasses as _, ButtonRoundingClasses as k, ButtonSizeClasses as B, IconSpacingClasses as z, ButtonStyleClasses as W, ButtonDisabledClasses as Y } from "./ButtonClasses.es.js";
-import { FOCUS_VISIBLE_STYLE as $ } from "../../utilities/focusStyle.es.js";
-import { buttonTypeMap as j, buttonIconSizeMap as q } from "./mappings.es.js";
-import { useFocusRing as v } from "@react-aria/focus";
-const A = ({
-  type: S = O.Button,
+import { useForwardedRef as O } from "../../utilities/useForwardedRef.es.js";
+import { ButtonStyle as o, ButtonEmphasis as u, ButtonType as U, ButtonSize as V, ButtonRounding as _ } from "./ButtonTypes.es.js";
+import { UpdatedButtonStyle as at } from "./ButtonTypes.es.js";
+import { ButtonCommonClasses as k, ButtonRoundingClasses as z, ButtonSizeClasses as d, IconSpacingClasses as W, ButtonStyleClasses as Y, ButtonDisabledClasses as $ } from "./ButtonClasses.es.js";
+import { FOCUS_VISIBLE_STYLE as j } from "../../utilities/focusStyle.es.js";
+import { buttonTypeMap as q, buttonIconSizeMap as v } from "./mappings.es.js";
+import { useFocusRing as A } from "@react-aria/focus";
+const G = ({
+  type: B = U.Button,
   style: t = o.Default,
-  size: e = U.Medium,
-  rounding: d = V.Medium,
+  size: e = V.Medium,
+  rounding: b = _.Medium,
   emphasis: n = u.Strong,
   hideLabel: m = !1,
   disabled: a = !1,
   icon: f,
   children: s,
   onClick: p,
-  hugWidth: b = !0,
-  "aria-label": C,
+  hugWidth: S = !0,
+  "aria-label": y,
+  "aria-describedby": C,
   formId: g,
-  solid: y,
-  inverted: E
-}, w) => {
-  t === o.Primary ? (t = o.Default, n = u.Strong) : t === o.Secondary && (t = o.Default, n = u.Default), y === !1 && (n = u.Weak);
-  const c = T(w), { buttonProps: D } = P(
-    { onPress: () => p && p(), isDisabled: a, type: j[S] },
+  solid: E,
+  inverted: w
+}, D) => {
+  t === o.Primary ? (t = o.Default, n = u.Strong) : t === o.Secondary && (t = o.Default, n = u.Default), E === !1 && (n = u.Weak);
+  const c = O(D), { buttonProps: R } = T(
+    { onPress: () => p && p(), isDisabled: a, type: q[B] },
     c
-  ), { isFocusVisible: R, focusProps: F } = v(), l = (x) => a ? Y : `${W[n][t][x]}`, N = r([
-    l("button"),
-    _,
-    k[d],
-    f && !s || m ? B[e].iconOnly : B[e].default,
-    !b && "tw-w-full"
+  ), { isFocusVisible: F, focusProps: N } = A(), i = (I) => a ? $ : `${Y[n][t][I]}`, x = r([
+    i("button"),
+    k,
+    z[b],
+    f && !s || m ? d[e].iconOnly : d[e].default,
+    !S && "tw-w-full"
   ]);
-  return /* @__PURE__ */ i.createElement(
+  return /* @__PURE__ */ l.createElement(
     "button",
     {
-      "aria-label": C,
+      "aria-label": y,
       "aria-disabled": a,
+      "aria-describedby": C,
       ref: c,
-      className: r([N, E && "tw-dark", R && $]),
+      className: r([x, w && "tw-dark", F && j]),
       disabled: a,
       "data-test-id": "button",
       form: g,
-      ...D,
-      ...F
+      ...R,
+      ...N
     },
-    f && /* @__PURE__ */ i.createElement(
+    f && /* @__PURE__ */ l.createElement(
       "span",
       {
         "data-test-id": "button-icon",
-        className: r([s && !m ? z[e] : "", l("icon")])
+        className: r([s && !m ? W[e] : "", i("icon")])
       },
-      M(f, { size: q[e] })
+      P(f, { size: v[e] })
     ),
-    s && /* @__PURE__ */ i.createElement("span", { "data-test-id": "button-text", className: r([l("text"), m && "tw-sr-only"]) }, s)
+    s && /* @__PURE__ */ l.createElement("span", { "data-test-id": "button-text", className: r([i("text"), m && "tw-sr-only"]) }, s)
   );
-}, G = I(A);
-G.displayName = "FondueButton";
+}, H = M(G);
+H.displayName = "FondueButton";
 export {
-  G as Button,
-  _ as ButtonCommonClasses,
-  Y as ButtonDisabledClasses,
+  H as Button,
+  k as ButtonCommonClasses,
+  $ as ButtonDisabledClasses,
   u as ButtonEmphasis,
-  V as ButtonRounding,
-  k as ButtonRoundingClasses,
-  U as ButtonSize,
-  B as ButtonSizeClasses,
+  _ as ButtonRounding,
+  z as ButtonRoundingClasses,
+  V as ButtonSize,
+  d as ButtonSizeClasses,
   o as ButtonStyle,
-  W as ButtonStyleClasses,
-  O as ButtonType,
-  z as IconSpacingClasses,
-  nt as UpdatedButtonStyle
+  Y as ButtonStyleClasses,
+  U as ButtonType,
+  W as IconSpacingClasses,
+  at as UpdatedButtonStyle
 };
 //# sourceMappingURL=Button.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.es.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ForwardRefRenderFunction, MouseEvent, ReactElement, ReactNode, cloneElement, forwardRef } from 'react';\n\nimport { useButton } from '@react-aria/button';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport {\n    ButtonElements,\n    ButtonEmphasis,\n    ButtonRounding,\n    ButtonSize,\n    ButtonStyle,\n    ButtonType,\n    UpdatedButtonStyle,\n} from './ButtonTypes';\nimport {\n    ButtonCommonClasses,\n    ButtonDisabledClasses,\n    ButtonRoundingClasses,\n    ButtonSizeClasses,\n    ButtonStyleClasses,\n    IconSpacingClasses,\n} from './ButtonClasses';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { buttonIconSizeMap, buttonTypeMap } from '@components/Button/mappings';\nimport { useFocusRing } from '@react-aria/focus';\n\n// To be NON-Breaking but import should be done through index.ts\nexport * from './ButtonClasses';\nexport * from './ButtonTypes';\n\nexport type ButtonProps = {\n    type?: ButtonType;\n    style?: ButtonStyle;\n    emphasis?: ButtonEmphasis;\n    hideLabel?: boolean;\n    size?: ButtonSize;\n    rounding?: ButtonRounding;\n    disabled?: boolean;\n    icon?: ReactElement;\n    children?: ReactNode;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    hugWidth?: boolean;\n    'aria-label'?: string;\n    formId?: string;\n    /** @deprecated use emphasis with ButtonEmphasis.Weak */\n    solid?: boolean;\n    /** @deprecated inverted can be done by wrapping the component in a className=\"tw-dark\" */\n    inverted?: boolean;\n};\n\nconst ButtonComponent: ForwardRefRenderFunction<HTMLButtonElement | null, ButtonProps> = (\n    {\n        type = ButtonType.Button,\n        style = ButtonStyle.Default,\n        size = ButtonSize.Medium,\n        rounding = ButtonRounding.Medium,\n        emphasis = ButtonEmphasis.Strong,\n        hideLabel = false,\n        disabled = false,\n        icon,\n        children,\n        onClick,\n        hugWidth = true,\n        'aria-label': ariaLabel,\n        formId,\n        solid,\n        inverted,\n    },\n    externalRef,\n) => {\n    // Map Style Primary, Secondary to style and emphasis\n    // Primary and Secondary can be omitted from the style type\n    if (style === ButtonStyle.Primary) {\n        style = ButtonStyle.Default;\n        emphasis = ButtonEmphasis.Strong;\n    } else if (style === ButtonStyle.Secondary) {\n        style = ButtonStyle.Default;\n        emphasis = ButtonEmphasis.Default;\n    }\n\n    // Rewrite Solid to property emphasis\n    if (solid === false) {\n        emphasis = ButtonEmphasis.Weak;\n    }\n\n    const ref = useForwardedRef<HTMLButtonElement | null>(externalRef);\n    const { buttonProps } = useButton(\n        { onPress: () => onClick && onClick(), isDisabled: disabled, type: buttonTypeMap[type] },\n        ref,\n    );\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const getStyles = (kind: keyof ButtonElements) =>\n        !disabled\n            ? `${ButtonStyleClasses[emphasis][style as unknown as UpdatedButtonStyle][kind]}`\n            : ButtonDisabledClasses;\n\n    const buttonClassName = merge([\n        getStyles('button'),\n        ButtonCommonClasses,\n        ButtonRoundingClasses[rounding],\n        (icon && !children) || hideLabel ? ButtonSizeClasses[size].iconOnly : ButtonSizeClasses[size].default,\n        !hugWidth && 'tw-w-full',\n    ]);\n\n    return (\n        <button\n            aria-label={ariaLabel}\n            aria-disabled={disabled}\n            ref={ref}\n            className={merge([buttonClassName, inverted && 'tw-dark', isFocusVisible && FOCUS_VISIBLE_STYLE])}\n            disabled={disabled}\n            data-test-id=\"button\"\n            form={formId}\n            {...buttonProps}\n            {...focusProps}\n        >\n            {icon && (\n                <span\n                    data-test-id=\"button-icon\"\n                    className={merge([children && !hideLabel ? IconSpacingClasses[size] : '', getStyles('icon')])}\n                >\n                    {cloneElement(icon, { size: buttonIconSizeMap[size] })}\n                </span>\n            )}\n            {children && (\n                <span data-test-id=\"button-text\" className={merge([getStyles('text'), hideLabel && 'tw-sr-only'])}>\n                    {children}\n                </span>\n            )}\n        </button>\n    );\n};\n\nexport const Button = forwardRef(ButtonComponent);\nButton.displayName = 'FondueButton';\n"],"names":["ButtonComponent","type","ButtonType","style","ButtonStyle","size","ButtonSize","rounding","ButtonRounding","emphasis","ButtonEmphasis","hideLabel","disabled","icon","children","onClick","hugWidth","ariaLabel","formId","solid","inverted","externalRef","ref","useForwardedRef","buttonProps","useButton","buttonTypeMap","isFocusVisible","focusProps","useFocusRing","getStyles","kind","ButtonDisabledClasses","ButtonStyleClasses","buttonClassName","merge","ButtonCommonClasses","ButtonRoundingClasses","ButtonSizeClasses","React","FOCUS_VISIBLE_STYLE","IconSpacingClasses","cloneElement","buttonIconSizeMap","Button","forwardRef"],"mappings":";;;;;;;;;;AAoDA,MAAMA,IAAmF,CACrF;AAAA,EACI,MAAAC,IAAOC,EAAW;AAAA,EAClB,OAAAC,IAAQC,EAAY;AAAA,EACpB,MAAAC,IAAOC,EAAW;AAAA,EAClB,UAAAC,IAAWC,EAAe;AAAA,EAC1B,UAAAC,IAAWC,EAAe;AAAA,EAC1B,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,cAAcC;AAAA,EACd,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACJ,GACAC,MACC;AAGG,EAAAlB,MAAUC,EAAY,WACtBD,IAAQC,EAAY,SACpBK,IAAWC,EAAe,UACnBP,MAAUC,EAAY,cAC7BD,IAAQC,EAAY,SACpBK,IAAWC,EAAe,UAI1BS,MAAU,OACVV,IAAWC,EAAe;AAGxB,QAAAY,IAAMC,EAA0CF,CAAW,GAC3D,EAAE,aAAAG,MAAgBC;AAAA,IACpB,EAAE,SAAS,MAAMV,KAAWA,EAAW,GAAA,YAAYH,GAAU,MAAMc,EAAczB,CAAI,EAAE;AAAA,IACvFqB;AAAA,EAAA,GAEE,EAAE,gBAAAK,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAE9CC,IAAY,CAACC,MACdnB,IAEKoB,IADA,GAAGC,EAAmBxB,CAAQ,EAAEN,CAAsC,EAAE4B,CAAI,KAGhFG,IAAkBC,EAAM;AAAA,IAC1BL,EAAU,QAAQ;AAAA,IAClBM;AAAA,IACAC,EAAsB9B,CAAQ;AAAA,IAC7BM,KAAQ,CAACC,KAAaH,IAAY2B,EAAkBjC,CAAI,EAAE,WAAWiC,EAAkBjC,CAAI,EAAE;AAAA,IAC9F,CAACW,KAAY;AAAA,EAAA,CAChB;AAGG,SAAA,gBAAAuB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAYtB;AAAA,MACZ,iBAAeL;AAAA,MACf,KAAAU;AAAA,MACA,WAAWa,EAAM,CAACD,GAAiBd,KAAY,WAAWO,KAAkBa,CAAmB,CAAC;AAAA,MAChG,UAAA5B;AAAA,MACA,gBAAa;AAAA,MACb,MAAMM;AAAA,MACL,GAAGM;AAAA,MACH,GAAGI;AAAA,IAAA;AAAA,IAEHf,KACG,gBAAA0B,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,WAAWJ,EAAM,CAACrB,KAAY,CAACH,IAAY8B,EAAmBpC,CAAI,IAAI,IAAIyB,EAAU,MAAM,CAAC,CAAC;AAAA,MAAA;AAAA,MAE3FY,EAAa7B,GAAM,EAAE,MAAM8B,EAAkBtC,CAAI,GAAG;AAAA,IACzD;AAAA,IAEHS,KACG,gBAAAyB,EAAA,cAAC,QAAK,EAAA,gBAAa,eAAc,WAAWJ,EAAM,CAACL,EAAU,MAAM,GAAGnB,KAAa,YAAY,CAAC,KAC3FG,CACL;AAAA,EAAA;AAIhB,GAEa8B,IAASC,EAAW7C,CAAe;AAChD4C,EAAO,cAAc;"}
+{"version":3,"file":"Button.es.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ForwardRefRenderFunction, MouseEvent, ReactElement, ReactNode, cloneElement, forwardRef } from 'react';\n\nimport { useButton } from '@react-aria/button';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport {\n    ButtonElements,\n    ButtonEmphasis,\n    ButtonRounding,\n    ButtonSize,\n    ButtonStyle,\n    ButtonType,\n    UpdatedButtonStyle,\n} from './ButtonTypes';\nimport {\n    ButtonCommonClasses,\n    ButtonDisabledClasses,\n    ButtonRoundingClasses,\n    ButtonSizeClasses,\n    ButtonStyleClasses,\n    IconSpacingClasses,\n} from './ButtonClasses';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { buttonIconSizeMap, buttonTypeMap } from '@components/Button/mappings';\nimport { useFocusRing } from '@react-aria/focus';\n\n// To be NON-Breaking but import should be done through index.ts\nexport * from './ButtonClasses';\nexport * from './ButtonTypes';\n\nexport type ButtonProps = {\n    type?: ButtonType;\n    style?: ButtonStyle;\n    emphasis?: ButtonEmphasis;\n    hideLabel?: boolean;\n    size?: ButtonSize;\n    rounding?: ButtonRounding;\n    disabled?: boolean;\n    icon?: ReactElement;\n    children?: ReactNode;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    hugWidth?: boolean;\n    'aria-label'?: string;\n    'aria-describedby'?: string;\n    formId?: string;\n    /** @deprecated use emphasis with ButtonEmphasis.Weak */\n    solid?: boolean;\n    /** @deprecated inverted can be done by wrapping the component in a className=\"tw-dark\" */\n    inverted?: boolean;\n};\n\nconst ButtonComponent: ForwardRefRenderFunction<HTMLButtonElement | null, ButtonProps> = (\n    {\n        type = ButtonType.Button,\n        style = ButtonStyle.Default,\n        size = ButtonSize.Medium,\n        rounding = ButtonRounding.Medium,\n        emphasis = ButtonEmphasis.Strong,\n        hideLabel = false,\n        disabled = false,\n        icon,\n        children,\n        onClick,\n        hugWidth = true,\n        'aria-label': ariaLabel,\n        'aria-describedby': ariaDescribedBy,\n        formId,\n        solid,\n        inverted,\n    },\n    externalRef,\n) => {\n    // Map Style Primary, Secondary to style and emphasis\n    // Primary and Secondary can be omitted from the style type\n    if (style === ButtonStyle.Primary) {\n        style = ButtonStyle.Default;\n        emphasis = ButtonEmphasis.Strong;\n    } else if (style === ButtonStyle.Secondary) {\n        style = ButtonStyle.Default;\n        emphasis = ButtonEmphasis.Default;\n    }\n\n    // Rewrite Solid to property emphasis\n    if (solid === false) {\n        emphasis = ButtonEmphasis.Weak;\n    }\n\n    const ref = useForwardedRef<HTMLButtonElement | null>(externalRef);\n    const { buttonProps } = useButton(\n        { onPress: () => onClick && onClick(), isDisabled: disabled, type: buttonTypeMap[type] },\n        ref,\n    );\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const getStyles = (kind: keyof ButtonElements) =>\n        !disabled\n            ? `${ButtonStyleClasses[emphasis][style as unknown as UpdatedButtonStyle][kind]}`\n            : ButtonDisabledClasses;\n\n    const buttonClassName = merge([\n        getStyles('button'),\n        ButtonCommonClasses,\n        ButtonRoundingClasses[rounding],\n        (icon && !children) || hideLabel ? ButtonSizeClasses[size].iconOnly : ButtonSizeClasses[size].default,\n        !hugWidth && 'tw-w-full',\n    ]);\n\n    return (\n        <button\n            aria-label={ariaLabel}\n            aria-disabled={disabled}\n            aria-describedby={ariaDescribedBy}\n            ref={ref}\n            className={merge([buttonClassName, inverted && 'tw-dark', isFocusVisible && FOCUS_VISIBLE_STYLE])}\n            disabled={disabled}\n            data-test-id=\"button\"\n            form={formId}\n            {...buttonProps}\n            {...focusProps}\n        >\n            {icon && (\n                <span\n                    data-test-id=\"button-icon\"\n                    className={merge([children && !hideLabel ? IconSpacingClasses[size] : '', getStyles('icon')])}\n                >\n                    {cloneElement(icon, { size: buttonIconSizeMap[size] })}\n                </span>\n            )}\n            {children && (\n                <span data-test-id=\"button-text\" className={merge([getStyles('text'), hideLabel && 'tw-sr-only'])}>\n                    {children}\n                </span>\n            )}\n        </button>\n    );\n};\n\nexport const Button = forwardRef(ButtonComponent);\nButton.displayName = 'FondueButton';\n"],"names":["ButtonComponent","type","ButtonType","style","ButtonStyle","size","ButtonSize","rounding","ButtonRounding","emphasis","ButtonEmphasis","hideLabel","disabled","icon","children","onClick","hugWidth","ariaLabel","ariaDescribedBy","formId","solid","inverted","externalRef","ref","useForwardedRef","buttonProps","useButton","buttonTypeMap","isFocusVisible","focusProps","useFocusRing","getStyles","kind","ButtonDisabledClasses","ButtonStyleClasses","buttonClassName","merge","ButtonCommonClasses","ButtonRoundingClasses","ButtonSizeClasses","React","FOCUS_VISIBLE_STYLE","IconSpacingClasses","cloneElement","buttonIconSizeMap","Button","forwardRef"],"mappings":";;;;;;;;;;AAqDA,MAAMA,IAAmF,CACrF;AAAA,EACI,MAAAC,IAAOC,EAAW;AAAA,EAClB,OAAAC,IAAQC,EAAY;AAAA,EACpB,MAAAC,IAAOC,EAAW;AAAA,EAClB,UAAAC,IAAWC,EAAe;AAAA,EAC1B,UAAAC,IAAWC,EAAe;AAAA,EAC1B,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,cAAcC;AAAA,EACd,oBAAoBC;AAAA,EACpB,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACJ,GACAC,MACC;AAGG,EAAAnB,MAAUC,EAAY,WACtBD,IAAQC,EAAY,SACpBK,IAAWC,EAAe,UACnBP,MAAUC,EAAY,cAC7BD,IAAQC,EAAY,SACpBK,IAAWC,EAAe,UAI1BU,MAAU,OACVX,IAAWC,EAAe;AAGxB,QAAAa,IAAMC,EAA0CF,CAAW,GAC3D,EAAE,aAAAG,MAAgBC;AAAA,IACpB,EAAE,SAAS,MAAMX,KAAWA,EAAW,GAAA,YAAYH,GAAU,MAAMe,EAAc1B,CAAI,EAAE;AAAA,IACvFsB;AAAA,EAAA,GAEE,EAAE,gBAAAK,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAE9CC,IAAY,CAACC,MACdpB,IAEKqB,IADA,GAAGC,EAAmBzB,CAAQ,EAAEN,CAAsC,EAAE6B,CAAI,KAGhFG,IAAkBC,EAAM;AAAA,IAC1BL,EAAU,QAAQ;AAAA,IAClBM;AAAA,IACAC,EAAsB/B,CAAQ;AAAA,IAC7BM,KAAQ,CAACC,KAAaH,IAAY4B,EAAkBlC,CAAI,EAAE,WAAWkC,EAAkBlC,CAAI,EAAE;AAAA,IAC9F,CAACW,KAAY;AAAA,EAAA,CAChB;AAGG,SAAA,gBAAAwB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAYvB;AAAA,MACZ,iBAAeL;AAAA,MACf,oBAAkBM;AAAA,MAClB,KAAAK;AAAA,MACA,WAAWa,EAAM,CAACD,GAAiBd,KAAY,WAAWO,KAAkBa,CAAmB,CAAC;AAAA,MAChG,UAAA7B;AAAA,MACA,gBAAa;AAAA,MACb,MAAMO;AAAA,MACL,GAAGM;AAAA,MACH,GAAGI;AAAA,IAAA;AAAA,IAEHhB,KACG,gBAAA2B,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,WAAWJ,EAAM,CAACtB,KAAY,CAACH,IAAY+B,EAAmBrC,CAAI,IAAI,IAAI0B,EAAU,MAAM,CAAC,CAAC;AAAA,MAAA;AAAA,MAE3FY,EAAa9B,GAAM,EAAE,MAAM+B,EAAkBvC,CAAI,GAAG;AAAA,IACzD;AAAA,IAEHS,KACG,gBAAA0B,EAAA,cAAC,QAAK,EAAA,gBAAa,eAAc,WAAWJ,EAAM,CAACL,EAAU,MAAM,GAAGpB,KAAa,YAAY,CAAC,KAC3FG,CACL;AAAA,EAAA;AAIhB,GAEa+B,IAASC,EAAW9C,CAAe;AAChD6C,EAAO,cAAc;"}

package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.es.js

@@ -45,7 +45,7 @@ const i = (t, r) => t.reduce((c, E) => (E.type === r && c++, E.children ? c + i(
     case a.ELEMENT_QUOTE:
       return `<p class="${s}" style="${l(r.quote)}">${e}</p>`;
     case H:
-      return `<p class="${s} style="${l(r.p)}">${e}</p>`;
+      return `<p class="${s}" style="${l(r.p)}">${e}</p>`;
     case a.ELEMENT_IMAGE_TITLE:
       return `<p class="${s}" style="${l(r.imageTitle)}">${e}</p>`;
     case a.ELEMENT_IMAGE_CAPTION:

package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"serializeNodeToHtmlRecursive.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    ELEMENT_BUTTON,\n    ELEMENT_CHECK_ITEM,\n    MappedMentionableItems,\n    UL_CLASSES,\n    getOrderedListClasses,\n} from '@components/RichTextEditor/Plugins';\nimport { getTextStyle } from '@components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement';\nimport { TextStyles, alignmentClassnames } from '@components/RichTextEditor/Plugins/TextStylePlugin/TextStyles';\nimport { DesignTokens } from '@components/RichTextEditor/types';\nimport {\n    ELEMENT_LI,\n    ELEMENT_LIC,\n    ELEMENT_LINK,\n    ELEMENT_MENTION,\n    ELEMENT_OL,\n    ELEMENT_PARAGRAPH,\n    ELEMENT_UL,\n    TDescendant,\n    TElement,\n    TText,\n    isText,\n} from '@udecode/plate';\nimport { buttonNode } from '../nodes/button';\nimport { checkItemNode } from '../nodes/checkItem';\nimport { linkNode } from '../nodes/link';\nimport { mentionHtmlNode } from '../nodes/mentionHtmlNode';\nimport { reactCssPropsToCss } from './reactCssPropsToCss';\nimport { serializeLeafToHtml } from './serializeLeafToHtml';\nimport { merge } from '@utilities/merge';\n\nconst countNodesOfType = (nodes: TDescendant[], type: string): number => {\n    return nodes.reduce((acc, node) => {\n        if (node.type === type) {\n            acc++;\n        }\n        if (node.children) {\n            return acc + countNodesOfType(node.children as TDescendant[], type);\n        }\n        return acc;\n    }, 0);\n};\n\ntype NestingCount = {\n    [type: string]: number;\n};\n\ntype SerializeNodeToHtmlRecursiveOptions = {\n    designTokens: DesignTokens;\n    mappedMentionable?: MappedMentionableItems;\n    nestingCount?: NestingCount;\n};\n\nexport const serializeNodeToHtmlRecursive = (\n    node: TDescendant,\n    { designTokens, mappedMentionable, nestingCount = {} }: SerializeNodeToHtmlRecursiveOptions,\n): string => {\n    if (isText(node)) {\n        return serializeLeafToHtml(node as TText);\n    }\n\n    const rootNestingCount = nestingCount[node.type] || countNodesOfType([node], node.type);\n    const children = (node.children as TDescendant[])\n        .map((n: TDescendant) =>\n            serializeNodeToHtmlRecursive(n, {\n                designTokens,\n                nestingCount: {\n                    ...nestingCount,\n                    [n.type as string]: rootNestingCount,\n                },\n                mappedMentionable,\n            }),\n        )\n        .join('');\n\n    const hasColumnBreak = node.breakAfterColumn === 'active';\n    const columnBreakClasses = hasColumnBreak ? 'tw-break-after-column tw-break-inside-avoid-column' : '';\n    const breakWordsClass = 'tw-break-words';\n    const alignClass = node?.align ? alignmentClassnames[node.align as string] : '';\n    const classNames = merge([alignClass, breakWordsClass, columnBreakClasses]);\n\n    switch (node.type) {\n        case TextStyles.ELEMENT_HEADING1:\n            return `<h1 class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.heading1)}\">${children}</h1>`;\n        case TextStyles.ELEMENT_HEADING2:\n            return `<h2 class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.heading2)}\">${children}</h2>`;\n        case TextStyles.ELEMENT_HEADING3:\n            return `<h3 class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.heading3)}\">${children}</h3>`;\n        case TextStyles.ELEMENT_HEADING4:\n            return `<h4 class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.heading4)}\">${children}</h4>`;\n        case TextStyles.ELEMENT_CUSTOM1:\n            return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.custom1)}\">${children}</p>`;\n        case TextStyles.ELEMENT_CUSTOM2:\n            return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.custom2)}\">${children}</p>`;\n        case TextStyles.ELEMENT_CUSTOM3:\n            return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.custom3)}\">${children}</p>`;\n        case TextStyles.ELEMENT_QUOTE:\n            return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.quote)}\">${children}</p>`;\n        case ELEMENT_PARAGRAPH:\n            return `<p class=\"${classNames} style=\"${reactCssPropsToCss(designTokens.p)}\">${children}</p>`;\n        case TextStyles.ELEMENT_IMAGE_TITLE:\n            return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.imageTitle)}\">${children}</p>`;\n        case TextStyles.ELEMENT_IMAGE_CAPTION:\n            return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.imageCaption)}\">${children}</p>`;\n        case ELEMENT_UL:\n            return `<ul class=\"${UL_CLASSES} ${classNames}\">${children}</ul>`;\n        case ELEMENT_OL:\n            const nestingLevel = Math.max(rootNestingCount - countNodesOfType([node], ELEMENT_OL), 0);\n            return `<ol class=\"${getOrderedListClasses(nestingLevel)} ${classNames}\">${children}</ol>`;\n        case ELEMENT_LI:\n            const liElement = node as TElement;\n            const styledLicElement = (liElement.children[0]?.children as TDescendant[])?.[0];\n            const liStyles = { ...designTokens[getTextStyle(styledLicElement)], textDecoration: 'none' };\n\n            return `<li class=\"${classNames}\" style=\"${reactCssPropsToCss(liStyles)}\">${children}</li>`;\n        case ELEMENT_LIC:\n            const licElement = node as TElement;\n            const licStyles = { textDecoration: designTokens[getTextStyle(licElement.children[0])]?.textDecoration };\n            return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(licStyles)}\">${children}</p>`;\n        case ELEMENT_LINK:\n            return linkNode(node, children, designTokens, classNames);\n        case ELEMENT_BUTTON:\n            return buttonNode(node, children, designTokens, classNames);\n        case ELEMENT_CHECK_ITEM:\n            return checkItemNode(node, children, classNames);\n        case ELEMENT_MENTION:\n            return mentionHtmlNode(node, { mentionable: mappedMentionable });\n\n        default:\n            return children;\n    }\n};\n"],"names":["countNodesOfType","nodes","type","acc","node","serializeNodeToHtmlRecursive","designTokens","mappedMentionable","nestingCount","isText","serializeLeafToHtml","rootNestingCount","children","n","columnBreakClasses","breakWordsClass","alignClass","alignmentClassnames","classNames","merge","TextStyles","reactCssPropsToCss","ELEMENT_PARAGRAPH","ELEMENT_UL","UL_CLASSES","ELEMENT_OL","nestingLevel","getOrderedListClasses","ELEMENT_LI","styledLicElement","_b","_a","liStyles","getTextStyle","ELEMENT_LIC","licStyles","_c","ELEMENT_LINK","linkNode","ELEMENT_BUTTON","buttonNode","ELEMENT_CHECK_ITEM","checkItemNode","ELEMENT_MENTION","mentionHtmlNode"],"mappings":"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"}
+{"version":3,"file":"serializeNodeToHtmlRecursive.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    ELEMENT_BUTTON,\n    ELEMENT_CHECK_ITEM,\n    MappedMentionableItems,\n    UL_CLASSES,\n    getOrderedListClasses,\n} from '@components/RichTextEditor/Plugins';\nimport { getTextStyle } from '@components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement';\nimport { TextStyles, alignmentClassnames } from '@components/RichTextEditor/Plugins/TextStylePlugin/TextStyles';\nimport { DesignTokens } from '@components/RichTextEditor/types';\nimport {\n    ELEMENT_LI,\n    ELEMENT_LIC,\n    ELEMENT_LINK,\n    ELEMENT_MENTION,\n    ELEMENT_OL,\n    ELEMENT_PARAGRAPH,\n    ELEMENT_UL,\n    TDescendant,\n    TElement,\n    TText,\n    isText,\n} from '@udecode/plate';\nimport { buttonNode } from '../nodes/button';\nimport { checkItemNode } from '../nodes/checkItem';\nimport { linkNode } from '../nodes/link';\nimport { mentionHtmlNode } from '../nodes/mentionHtmlNode';\nimport { reactCssPropsToCss } from './reactCssPropsToCss';\nimport { serializeLeafToHtml } from './serializeLeafToHtml';\nimport { merge } from '@utilities/merge';\n\nconst countNodesOfType = (nodes: TDescendant[], type: string): number => {\n    return nodes.reduce((acc, node) => {\n        if (node.type === type) {\n            acc++;\n        }\n        if (node.children) {\n            return acc + countNodesOfType(node.children as TDescendant[], type);\n        }\n        return acc;\n    }, 0);\n};\n\ntype NestingCount = {\n    [type: string]: number;\n};\n\ntype SerializeNodeToHtmlRecursiveOptions = {\n    designTokens: DesignTokens;\n    mappedMentionable?: MappedMentionableItems;\n    nestingCount?: NestingCount;\n};\n\nexport const serializeNodeToHtmlRecursive = (\n    node: TDescendant,\n    { designTokens, mappedMentionable, nestingCount = {} }: SerializeNodeToHtmlRecursiveOptions,\n): string => {\n    if (isText(node)) {\n        return serializeLeafToHtml(node as TText);\n    }\n\n    const rootNestingCount = nestingCount[node.type] || countNodesOfType([node], node.type);\n    const children = (node.children as TDescendant[])\n        .map((n: TDescendant) =>\n            serializeNodeToHtmlRecursive(n, {\n                designTokens,\n                nestingCount: {\n                    ...nestingCount,\n                    [n.type as string]: rootNestingCount,\n                },\n                mappedMentionable,\n            }),\n        )\n        .join('');\n\n    const hasColumnBreak = node.breakAfterColumn === 'active';\n    const columnBreakClasses = hasColumnBreak ? 'tw-break-after-column tw-break-inside-avoid-column' : '';\n    const breakWordsClass = 'tw-break-words';\n    const alignClass = node?.align ? alignmentClassnames[node.align as string] : '';\n    const classNames = merge([alignClass, breakWordsClass, columnBreakClasses]);\n\n    switch (node.type) {\n        case TextStyles.ELEMENT_HEADING1:\n            return `<h1 class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.heading1)}\">${children}</h1>`;\n        case TextStyles.ELEMENT_HEADING2:\n            return `<h2 class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.heading2)}\">${children}</h2>`;\n        case TextStyles.ELEMENT_HEADING3:\n            return `<h3 class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.heading3)}\">${children}</h3>`;\n        case TextStyles.ELEMENT_HEADING4:\n            return `<h4 class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.heading4)}\">${children}</h4>`;\n        case TextStyles.ELEMENT_CUSTOM1:\n            return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.custom1)}\">${children}</p>`;\n        case TextStyles.ELEMENT_CUSTOM2:\n            return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.custom2)}\">${children}</p>`;\n        case TextStyles.ELEMENT_CUSTOM3:\n            return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.custom3)}\">${children}</p>`;\n        case TextStyles.ELEMENT_QUOTE:\n            return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.quote)}\">${children}</p>`;\n        case ELEMENT_PARAGRAPH:\n            return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.p)}\">${children}</p>`;\n        case TextStyles.ELEMENT_IMAGE_TITLE:\n            return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.imageTitle)}\">${children}</p>`;\n        case TextStyles.ELEMENT_IMAGE_CAPTION:\n            return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(designTokens.imageCaption)}\">${children}</p>`;\n        case ELEMENT_UL:\n            return `<ul class=\"${UL_CLASSES} ${classNames}\">${children}</ul>`;\n        case ELEMENT_OL:\n            const nestingLevel = Math.max(rootNestingCount - countNodesOfType([node], ELEMENT_OL), 0);\n            return `<ol class=\"${getOrderedListClasses(nestingLevel)} ${classNames}\">${children}</ol>`;\n        case ELEMENT_LI:\n            const liElement = node as TElement;\n            const styledLicElement = (liElement.children[0]?.children as TDescendant[])?.[0];\n            const liStyles = { ...designTokens[getTextStyle(styledLicElement)], textDecoration: 'none' };\n\n            return `<li class=\"${classNames}\" style=\"${reactCssPropsToCss(liStyles)}\">${children}</li>`;\n        case ELEMENT_LIC:\n            const licElement = node as TElement;\n            const licStyles = { textDecoration: designTokens[getTextStyle(licElement.children[0])]?.textDecoration };\n            return `<p class=\"${classNames}\" style=\"${reactCssPropsToCss(licStyles)}\">${children}</p>`;\n        case ELEMENT_LINK:\n            return linkNode(node, children, designTokens, classNames);\n        case ELEMENT_BUTTON:\n            return buttonNode(node, children, designTokens, classNames);\n        case ELEMENT_CHECK_ITEM:\n            return checkItemNode(node, children, classNames);\n        case ELEMENT_MENTION:\n            return mentionHtmlNode(node, { mentionable: mappedMentionable });\n\n        default:\n            return children;\n    }\n};\n"],"names":["countNodesOfType","nodes","type","acc","node","serializeNodeToHtmlRecursive","designTokens","mappedMentionable","nestingCount","isText","serializeLeafToHtml","rootNestingCount","children","n","columnBreakClasses","breakWordsClass","alignClass","alignmentClassnames","classNames","merge","TextStyles","reactCssPropsToCss","ELEMENT_PARAGRAPH","ELEMENT_UL","UL_CLASSES","ELEMENT_OL","nestingLevel","getOrderedListClasses","ELEMENT_LI","styledLicElement","_b","_a","liStyles","getTextStyle","ELEMENT_LIC","licStyles","_c","ELEMENT_LINK","linkNode","ELEMENT_BUTTON","buttonNode","ELEMENT_CHECK_ITEM","checkItemNode","ELEMENT_MENTION","mentionHtmlNode"],"mappings":"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"}

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

@@ -1,21 +1,22 @@
 import { IconSize as _ } from "../../foundation/Icon/IconSize.es.js";
-import { useLink as se } from "@react-aria/link";
-import { FOCUS_VISIBLE_STYLE as ne } from "../../utilities/focusStyle.es.js";
+import { useLink as ne } from "@react-aria/link";
+import { FOCUS_VISIBLE_STYLE as we } from "../../utilities/focusStyle.es.js";
 import { merge as n } from "../../utilities/merge.es.js";
-import t, { useState as d, useRef as I, useMemo as we, useCallback as S, useEffect as fe, useLayoutEffect as ie, cloneElement as h } from "react";
-import { BrightHeader as ce, brightHeaderArrowBackgroundColors as k } from "./BrightHeader.es.js";
+import t, { useState as m, useRef as $, useMemo as ie, useCallback as S, useEffect as fe, useLayoutEffect as ce, cloneElement as h } from "react";
+import { BrightHeader as de, brightHeaderArrowBackgroundColors as k } from "./BrightHeader.es.js";
 import { usePopper as me } from "react-popper";
-import { Button as $ } from "../Button/Button.es.js";
-import { ButtonStyle as V, ButtonEmphasis as Y, ButtonSize as j } from "../Button/ButtonTypes.es.js";
-const q = {
+import { useMemoizedId as pe } from "../../hooks/useMemoizedId.es.js";
+import { Button as V } from "../Button/Button.es.js";
+import { ButtonStyle as Y, ButtonEmphasis as j, ButtonSize as q } from "../Button/ButtonTypes.es.js";
+const D = {
   small: "tw-pt-3.5",
   large: "tw-pt-4"
-}, D = {
+}, G = {
   small: "tw-pb-3.5",
   large: "tw-pb-4"
 };
-var de = /* @__PURE__ */ ((e) => (e.Top = "Top", e.Right = "Right", e.Bottom = "Bottom", e.Left = "Left", e))(de || {}), pe = /* @__PURE__ */ ((e) => (e.Start = "Start", e.Middle = "Middle", e.End = "End", e))(pe || {});
-const ue = {
+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 = {
   ["Top-Start"]: "top-start",
   ["Top-End"]: "top-end",
   ["Bottom-Start"]: "bottom-start",
@@ -28,7 +29,7 @@ const ue = {
   ["Right-Middle"]: "right",
   ["Bottom-Middle"]: "bottom",
   ["Left-Middle"]: "left"
-}, be = (e, l, s) => {
+}, Ee = (e, l, s) => {
   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";
@@ -50,41 +51,41 @@ const ue = {
     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";
   }
-}, ge = ({
+}, Se = ({
   content: e,
   tooltipIcon: l,
   heading: s,
   headingIcon: p,
   linkUrl: c,
-  linkLabel: G,
-  brightHeader: m,
+  linkLabel: J,
+  brightHeader: d,
   buttons: r,
-  children: J,
+  children: K,
   position: v = "Bottom",
   alignment: x = "Middle",
   withArrow: u,
-  flip: K = !0,
+  flip: Q = !0,
   triggerElement: B,
   hoverDelay: L = 200,
   enterDelay: b = 0,
   open: T = !1,
-  disabled: Q = !1,
-  hidden: W = !1
+  disabled: W = !1,
+  hidden: X = !1
 }) => {
-  var N;
-  const [g, X] = d(
+  var O;
+  const [g, Z] = m(
     null
-  ), C = I(null), { linkProps: Z } = se({}, C), A = we(
-    () => c || m || r || s || p,
-    [c, m, r, s, p]
-  ), P = ue[`${v}-${x}`], [w, H] = d(null), [R, U] = d(null), [ee, te] = d(null), f = me(g, w, {
-    placement: P,
+  ), C = $(null), { linkProps: A } = ne({}, C), P = ie(
+    () => c || d || r || s || p,
+    [c, d, r, s, p]
+  ), H = ge[`${v}-${x}`], [w, U] = m(null), [M, ee] = m(null), [te, re] = m(null), R = pe(), i = me(g, w, {
+    placement: H,
     strategy: "fixed",
     modifiers: [
       {
         name: "arrow",
         options: {
-          element: ee
+          element: te
         }
       },
       {
@@ -95,27 +96,27 @@ const ue = {
       },
       {
         name: "flip",
-        enabled: K
+        enabled: Q
       }
     ]
-  }), re = ((N = f.state) == null ? void 0 : N.placement) ?? v, oe = be(re, m, x), [E, o] = d(!1), i = I(null), M = S(() => {
-    i.current && clearTimeout(i.current), i.current = setTimeout(() => o(!1), L);
-  }, [L]), y = S(() => {
-    if (i.current && clearTimeout(i.current), b) {
-      i.current = setTimeout(() => o(!0), b);
+  }), oe = ((O = i.state) == null ? void 0 : O.placement) ?? v, ae = Ee(oe, d, x), [E, o] = m(!1), f = $(null), y = S(() => {
+    f.current && clearTimeout(f.current), f.current = setTimeout(() => o(!1), L);
+  }, [L]), z = S(() => {
+    if (f.current && clearTimeout(f.current), b) {
+      f.current = setTimeout(() => o(!0), b);
       return;
     }
     o(!0);
-  }, [b]), z = S(
+  }, [b]), N = S(
     (a) => {
-      var F;
-      const O = a.path ?? ((F = a.composedPath) == null ? void 0 : F.call(a));
-      O && [g, R, w].some((le) => O.includes(le)) && y();
+      var I;
+      const F = a.path ?? ((I = a.composedPath) == null ? void 0 : I.call(a));
+      F && [g, M, w].some((se) => F.includes(se)) && z();
     },
-    [y, g, R, w]
-  ), ae = {
-    onMouseOver: (a) => z(a.nativeEvent),
-    onMouseLeave: M,
+    [z, g, M, w]
+  ), le = {
+    onMouseOver: (a) => N(a.nativeEvent),
+    onMouseLeave: y,
     onFocus: () => o(!0),
     onBlur: (a) => {
       w != null && w.contains(a.relatedTarget) || o(!1);
@@ -123,35 +124,37 @@ const ue = {
   };
   return fe(() => {
     o(T);
-  }, [T]), ie(() => {
-    typeof f.update == "function" && E && f.update();
-  }, [E]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { ...ae, ref: U }, B && h(B, {
-    ref: X
+  }, [T]), ce(() => {
+    typeof i.update == "function" && E && i.update();
+  }, [E]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { ...le, ref: ee }, B && h(B, {
+    ref: Z,
+    "aria-describedby": R
   })), /* @__PURE__ */ t.createElement(
     "div",
     {
-      ref: H,
+      ref: U,
       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]",
-        (W || Q) && "tw-hidden",
+        (X || W) && "tw-hidden",
         !E && "tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden"
       ]),
       "data-test-id": "tooltip",
       role: "tooltip",
-      style: f.styles.popper,
-      ...f.attributes.popper,
+      id: R,
+      style: i.styles.popper,
+      ...i.attributes.popper,
       onFocus: () => o(!0),
-      onMouseOver: (a) => z(a.nativeEvent),
-      onMouseLeave: M
+      onMouseOver: (a) => N(a.nativeEvent),
+      onMouseLeave: y
     },
-    m && /* @__PURE__ */ t.createElement(ce, { 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]",
-          A ? q.small : q.large,
-          c ? D.small : D.large
+          P ? D.small : D.large,
+          c ? G.small : G.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" }, h(p, { size: _.Size20 })), s),
@@ -159,7 +162,7 @@ const ue = {
       c && /* @__PURE__ */ t.createElement(
         "a",
         {
-          ...Z,
+          ...A,
           "data-test-id": "tooltip-link",
           ref: C,
           href: c,
@@ -167,27 +170,27 @@ const ue = {
           rel: "noopener noreferrer",
           className: n([
             "tw-text-xs tw-text-black-40 dark:tw-text-black-80 tw-underline tw-mt-1",
-            ne
+            we
           ]),
           onBlur: () => r && r.length > 0 ? null : o(!1)
         },
-        G ?? "Click here to learn more."
+        J ?? "Click here to learn more."
       ),
       r && /* @__PURE__ */ t.createElement("div", { className: "tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4" }, r.length > 0 && /* @__PURE__ */ t.createElement("div", { onBlur: () => r && r.length < 2 ? o(!1) : null }, /* @__PURE__ */ t.createElement(
-        $,
+        V,
         {
-          style: V.Default,
-          emphasis: Y.Strong,
-          size: j.Small,
+          style: Y.Default,
+          emphasis: j.Strong,
+          size: q.Small,
           onClick: r[0].action
         },
         r[0].label
       )), r.length === 2 && /* @__PURE__ */ t.createElement("div", { onBlur: () => o(!1) }, /* @__PURE__ */ t.createElement(
-        $,
+        V,
         {
-          style: V.Default,
-          emphasis: Y.Default,
-          size: j.Small,
+          style: Y.Default,
+          emphasis: j.Default,
+          size: q.Small,
           onClick: r[1].action
         },
         r[1].label
@@ -198,21 +201,21 @@ const ue = {
       {
         "data-test-id": "popover-arrow",
         "data-popper-arrow": u,
-        ref: te,
-        style: f.styles.arrow,
+        ref: re,
+        style: i.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 && oe
+          u && ae
         ])
       }
     )),
-    J
+    K
   ));
 };
-ge.displayName = "FondueTooltip";
+Se.displayName = "FondueTooltip";
 export {
-  ge as Tooltip,
-  pe as TooltipAlignment,
-  de as TooltipPosition
+  Se as Tooltip,
+  be as TooltipAlignment,
+  ue as TooltipPosition
 };
 //# sourceMappingURL=Tooltip.es.js.map

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';\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\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                    })}\n            </div>\n            <div\n                ref={setTooltipContainerRef}\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                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                        <p className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</p>\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","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-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                    })}\n            </div>\n            <div\n                ref={setTooltipContainerRef}\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                        <p className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</p>\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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"}