@frontify/fondue 12.0.0-beta.302 → 12.0.0-beta.304

package/dist/components/InputLabel/InputLabel.d.ts

@@ -1,7 +1,7 @@
-import { TooltipProps } from '../Tooltip/Tooltip';
+import { LegacyTooltipProps } from '../LegacyTooltip/LegacyTooltip';
 import { TooltipIconProps } from '../TooltipIcon/TooltipIcon';
 import { ReactElement, ReactNode } from 'react';
-export type InputLabelTooltipProps = (TooltipProps & Pick<TooltipIconProps, 'triggerStyle' | 'triggerIcon'>) | (TooltipProps & Pick<TooltipIconProps, 'triggerStyle' | 'triggerIcon'>)[];
+export type InputLabelTooltipProps = (LegacyTooltipProps & Pick<TooltipIconProps, 'triggerStyle' | 'triggerIcon'>) | (LegacyTooltipProps & Pick<TooltipIconProps, 'triggerStyle' | 'triggerIcon'>)[];
 export type InputLabelProps = {
     htmlFor: string;
     required?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"InputLabel.es.js","sources":["../../../src/components/InputLabel/InputLabel.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TooltipProps } from '@components/Tooltip/Tooltip';\nimport { TooltipIcon, TooltipIconProps } from '@components/TooltipIcon/TooltipIcon';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement, ReactNode } from 'react';\n\nexport type InputLabelTooltipProps =\n    | (TooltipProps & Pick<TooltipIconProps, 'triggerStyle' | 'triggerIcon'>)\n    | (TooltipProps & Pick<TooltipIconProps, 'triggerStyle' | 'triggerIcon'>)[];\n\nexport type InputLabelProps = {\n    htmlFor: string;\n    required?: boolean;\n    disabled?: boolean;\n    clickable?: boolean;\n    tooltip?: InputLabelTooltipProps;\n    bold?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const InputLabel = ({\n    children,\n    htmlFor,\n    required = false,\n    disabled = false,\n    clickable = false,\n    tooltip = [],\n    bold,\n    'data-test-id': dataTestId = 'input-label',\n}: InputLabelProps): ReactElement => {\n    const tooltips = Array.isArray(tooltip) ? tooltip : [tooltip];\n\n    const tooltipsWithKeys = tooltips.map((tooltip, index) => ({\n        key: index,\n        ...tooltip,\n    }));\n\n    return (\n        <div\n            className={merge([\n                'tw-inline-flex tw-leading-4 tw-items-center tw-gap-1 tw-font-sans tw-text-s tw-max-w-full tw-min-w-0 tw-flex-initial',\n                disabled ? 'tw-text-text-disabled' : 'tw-text-text-weak',\n            ])}\n            data-test-id={`${dataTestId}-container`}\n        >\n            <div className=\"tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">\n                <label\n                    htmlFor={htmlFor}\n                    className={merge([\n                        'tw-select-none tw-max-w-full',\n                        bold && 'tw-font-medium',\n                        disabled || !clickable\n                            ? 'hover:tw-cursor-not-allowed tw-pointer-events-none'\n                            : 'hover:tw-cursor-pointer hover:tw-text-text group-hover:tw-text-text',\n                    ])}\n                    data-test-id={dataTestId}\n                    title={typeof children === 'string' ? children : ''}\n                >\n                    {children}\n                </label>\n            </div>\n\n            {required && (\n                <span data-test-id={`${dataTestId}-required`} className=\"tw-h-4 tw-text-m tw-text-text-negative\">\n                    *\n                </span>\n            )}\n            {tooltipsWithKeys.map(({ key, triggerIcon, triggerStyle, hoverDelay = 100, ...tooltipProps }) => (\n                <div key={key} className=\"tw-leading-3\">\n                    <TooltipIcon\n                        tooltip={{ ...tooltipProps, hoverDelay }}\n                        iconSize={IconSize.Size16}\n                        triggerIcon={triggerIcon}\n                        triggerStyle={triggerStyle}\n                    />\n                </div>\n            ))}\n        </div>\n    );\n};\nInputLabel.displayName = 'FondueInputLabel';\n"],"names":["InputLabel","children","htmlFor","required","disabled","clickable","tooltip","bold","dataTestId","tooltipsWithKeys","index","React","merge","key","triggerIcon","triggerStyle","hoverDelay","tooltipProps","TooltipIcon","IconSize"],"mappings":";;;;AAuBO,MAAMA,IAAa,CAAC;AAAA,EACvB,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU,CAAC;AAAA,EACX,MAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAqC;AAGjC,QAAMC,KAFW,MAAM,QAAQH,CAAO,IAAIA,IAAU,CAACA,CAAO,GAE1B,IAAI,CAACA,GAASI,OAAW;AAAA,IACvD,KAAKA;AAAA,IACL,GAAGJ;AAAAA,EACL,EAAA;AAGE,SAAA,gBAAAK,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAR,IAAW,0BAA0B;AAAA,MAAA,CACxC;AAAA,MACD,gBAAc,GAAGI;AAAA,IAAA;AAAA,IAEjB,gBAAAG,EAAA,cAAC,OAAI,EAAA,WAAU,qEACX,GAAA,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,SAAAT;AAAA,QACA,WAAWU,EAAM;AAAA,UACb;AAAA,UACAL,KAAQ;AAAA,UACRH,KAAY,CAACC,IACP,uDACA;AAAA,QAAA,CACT;AAAA,QACD,gBAAcG;AAAA,QACd,OAAO,OAAOP,KAAa,WAAWA,IAAW;AAAA,MAAA;AAAA,MAEhDA;AAAA,IAAA,CAET;AAAA,IAECE,qCACI,QAAK,EAAA,gBAAc,GAAGK,cAAuB,WAAU,4CAAyC,GAEjG;AAAA,IAEHC,EAAiB,IAAI,CAAC,EAAE,KAAAI,GAAK,aAAAC,GAAa,cAAAC,GAAc,YAAAC,IAAa,KAAK,GAAGC,EAC1E,MAAA,gBAAAN,EAAA,cAAC,OAAI,EAAA,KAAAE,GAAU,WAAU,eACrB,GAAA,gBAAAF,EAAA;AAAA,MAACO;AAAA,MAAA;AAAA,QACG,SAAS,EAAE,GAAGD,GAAc,YAAAD,EAAW;AAAA,QACvC,UAAUG,EAAS;AAAA,QACnB,aAAAL;AAAA,QACA,cAAAC;AAAA,MAAA;AAAA,IAAA,CAER,CACH;AAAA,EAAA;AAGb;AACAf,EAAW,cAAc;"}
+{"version":3,"file":"InputLabel.es.js","sources":["../../../src/components/InputLabel/InputLabel.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { LegacyTooltipProps } from '@components/LegacyTooltip/LegacyTooltip';\nimport { TooltipIcon, TooltipIconProps } from '@components/TooltipIcon/TooltipIcon';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement, ReactNode } from 'react';\n\nexport type InputLabelTooltipProps =\n    | (LegacyTooltipProps & Pick<TooltipIconProps, 'triggerStyle' | 'triggerIcon'>)\n    | (LegacyTooltipProps & Pick<TooltipIconProps, 'triggerStyle' | 'triggerIcon'>)[];\n\nexport type InputLabelProps = {\n    htmlFor: string;\n    required?: boolean;\n    disabled?: boolean;\n    clickable?: boolean;\n    tooltip?: InputLabelTooltipProps;\n    bold?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const InputLabel = ({\n    children,\n    htmlFor,\n    required = false,\n    disabled = false,\n    clickable = false,\n    tooltip = [],\n    bold,\n    'data-test-id': dataTestId = 'input-label',\n}: InputLabelProps): ReactElement => {\n    const tooltips = Array.isArray(tooltip) ? tooltip : [tooltip];\n\n    const tooltipsWithKeys = tooltips.map((tooltip, index) => ({\n        key: index,\n        ...tooltip,\n    }));\n\n    return (\n        <div\n            className={merge([\n                'tw-inline-flex tw-leading-4 tw-items-center tw-gap-1 tw-font-sans tw-text-s tw-max-w-full tw-min-w-0 tw-flex-initial',\n                disabled ? 'tw-text-text-disabled' : 'tw-text-text-weak',\n            ])}\n            data-test-id={`${dataTestId}-container`}\n        >\n            <div className=\"tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">\n                <label\n                    htmlFor={htmlFor}\n                    className={merge([\n                        'tw-select-none tw-max-w-full',\n                        bold && 'tw-font-medium',\n                        disabled || !clickable\n                            ? 'hover:tw-cursor-not-allowed tw-pointer-events-none'\n                            : 'hover:tw-cursor-pointer hover:tw-text-text group-hover:tw-text-text',\n                    ])}\n                    data-test-id={dataTestId}\n                    title={typeof children === 'string' ? children : ''}\n                >\n                    {children}\n                </label>\n            </div>\n\n            {required && (\n                <span data-test-id={`${dataTestId}-required`} className=\"tw-h-4 tw-text-m tw-text-text-negative\">\n                    *\n                </span>\n            )}\n            {tooltipsWithKeys.map(({ key, triggerIcon, triggerStyle, hoverDelay = 100, ...tooltipProps }) => (\n                <div key={key} className=\"tw-leading-3\">\n                    <TooltipIcon\n                        tooltip={{ ...tooltipProps, hoverDelay }}\n                        iconSize={IconSize.Size16}\n                        triggerIcon={triggerIcon}\n                        triggerStyle={triggerStyle}\n                    />\n                </div>\n            ))}\n        </div>\n    );\n};\nInputLabel.displayName = 'FondueInputLabel';\n"],"names":["InputLabel","children","htmlFor","required","disabled","clickable","tooltip","bold","dataTestId","tooltipsWithKeys","index","React","merge","key","triggerIcon","triggerStyle","hoverDelay","tooltipProps","TooltipIcon","IconSize"],"mappings":";;;;AAuBO,MAAMA,IAAa,CAAC;AAAA,EACvB,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU,CAAC;AAAA,EACX,MAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAqC;AAGjC,QAAMC,KAFW,MAAM,QAAQH,CAAO,IAAIA,IAAU,CAACA,CAAO,GAE1B,IAAI,CAACA,GAASI,OAAW;AAAA,IACvD,KAAKA;AAAA,IACL,GAAGJ;AAAAA,EACL,EAAA;AAGE,SAAA,gBAAAK,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAR,IAAW,0BAA0B;AAAA,MAAA,CACxC;AAAA,MACD,gBAAc,GAAGI;AAAA,IAAA;AAAA,IAEjB,gBAAAG,EAAA,cAAC,OAAI,EAAA,WAAU,qEACX,GAAA,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,SAAAT;AAAA,QACA,WAAWU,EAAM;AAAA,UACb;AAAA,UACAL,KAAQ;AAAA,UACRH,KAAY,CAACC,IACP,uDACA;AAAA,QAAA,CACT;AAAA,QACD,gBAAcG;AAAA,QACd,OAAO,OAAOP,KAAa,WAAWA,IAAW;AAAA,MAAA;AAAA,MAEhDA;AAAA,IAAA,CAET;AAAA,IAECE,qCACI,QAAK,EAAA,gBAAc,GAAGK,cAAuB,WAAU,4CAAyC,GAEjG;AAAA,IAEHC,EAAiB,IAAI,CAAC,EAAE,KAAAI,GAAK,aAAAC,GAAa,cAAAC,GAAc,YAAAC,IAAa,KAAK,GAAGC,EAC1E,MAAA,gBAAAN,EAAA,cAAC,OAAI,EAAA,KAAAE,GAAU,WAAU,eACrB,GAAA,gBAAAF,EAAA;AAAA,MAACO;AAAA,MAAA;AAAA,QACG,SAAS,EAAE,GAAGD,GAAc,YAAAD,EAAW;AAAA,QACvC,UAAUG,EAAS;AAAA,QACnB,aAAAL;AAAA,QACA,cAAAC;AAAA,MAAA;AAAA,IAAA,CAER,CACH;AAAA,EAAA;AAGb;AACAf,EAAW,cAAc;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"BrightHeader.es.js","sources":["../../../src/components/LegacyTooltip/BrightHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { 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 = ({ headerStyle }: BrightHeaderProps): ReactElement => {\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,IAAe,CAAC,EAAE,aAAAC,QAEvB,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.d.ts → LegacyTooltip/LegacyTooltip.d.ts}

@@ -4,7 +4,7 @@ export type TooltipButton = {
     label: string;
     action: () => void;
 };
-export type TooltipProps = {
+export type LegacyTooltipProps = {
     triggerElement?: ReactElement;
     content: ReactNode;
     tooltipIcon?: ReactElement;
@@ -39,7 +39,7 @@ export declare enum TooltipAlignment {
     Middle = "Middle",
     End = "End"
 }
-export declare const Tooltip: {
-    ({ content, tooltipIcon, heading, headingIcon, linkUrl, linkLabel, brightHeader, buttons, children, position, alignment, withArrow, flip, triggerElement, hoverDelay, enterDelay, open, disabled, enablePortal, hidden, "data-test-id": dataTestId, }: TooltipProps): JSX.Element;
+export declare const LegacyTooltip: {
+    ({ content, tooltipIcon, heading, headingIcon, linkUrl, linkLabel, brightHeader, buttons, children, position, alignment, withArrow, flip, triggerElement, hoverDelay, enterDelay, open, disabled, enablePortal, hidden, "data-test-id": dataTestId, }: LegacyTooltipProps): JSX.Element;
     displayName: string;
 };

package/dist/components/{Tooltip/Tooltip.es.js → LegacyTooltip/LegacyTooltip.es.js}

@@ -2,13 +2,13 @@ import { IconSize as V } from "../../foundation/Icon/IconSize.es.js";
 import { useLink as pe } from "@react-aria/link";
 import { FOCUS_VISIBLE_STYLE as ue } from "../../utilities/focusStyle.es.js";
 import { merge as f } from "../../utilities/merge.es.js";
-import t, { useState as b, useRef as W, useMemo as be, useCallback as E, useEffect as Y, useLayoutEffect as Ee, cloneElement as C } from "react";
-import { BrightHeader as ge, brightHeaderArrowBackgroundColors as T } from "./BrightHeader.es.js";
+import t, { useState as b, useRef as W, useMemo as be, useCallback as E, useEffect as Y, useLayoutEffect as Ee, cloneElement as y } from "react";
+import { BrightHeader as ge, brightHeaderArrowBackgroundColors as C } from "./BrightHeader.es.js";
 import { usePopper as Se } from "react-popper";
 import { useMemoizedId as ve } from "../../hooks/useMemoizedId.es.js";
 import { Button as j } from "../Button/Button.es.js";
 import { ButtonStyle as q, ButtonEmphasis as G, ButtonSize as J } from "../Button/ButtonTypes.es.js";
-import { Portal as he } from "../Portal/Portal.es.js";
+import { Portal as Le } from "../Portal/Portal.es.js";
 const K = {
   small: "tw-pt-2",
   large: "tw-pt-3"
@@ -16,8 +16,8 @@ const K = {
   small: "tw-pb-2",
   large: "tw-pb-3"
 };
-var ke = /* @__PURE__ */ ((e) => (e.Top = "Top", e.Right = "Right", e.Bottom = "Bottom", e.Left = "Left", e))(ke || {}), xe = /* @__PURE__ */ ((e) => (e.Start = "Start", e.Middle = "Middle", e.End = "End", e))(xe || {});
-const Le = {
+var he = /* @__PURE__ */ ((e) => (e.Top = "Top", e.Right = "Right", e.Bottom = "Bottom", e.Left = "Left", e))(he || {}), ke = /* @__PURE__ */ ((e) => (e.Start = "Start", e.Middle = "Middle", e.End = "End", e))(ke || {});
+const xe = {
   ["Top-Start"]: "top-start",
   ["Top-End"]: "top-end",
   ["Bottom-Start"]: "bottom-start",
@@ -30,48 +30,48 @@ const Le = {
   ["Right-Middle"]: "right",
   ["Bottom-Middle"]: "bottom",
   ["Left-Middle"]: "left"
-}, Ce = (e, r, i) => {
+}, ye = (e, r, i) => {
   switch (!0) {
     case e.toString().includes("Top".toLowerCase()):
       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 f([
         "before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]",
-        r && i === "Start" && e.toString().includes("Start".toLowerCase()) ? T[r] : "before:tw-dark before:tw-bg-base"
+        r && i === "Start" && e.toString().includes("Start".toLowerCase()) ? C[r] : "before:tw-dark before:tw-bg-base"
       ]);
     case e.toString().includes("Bottom".toLowerCase()):
       return f([
         "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]",
-        r ? T[r] : "before:tw-dark before:tw-bg-base"
+        r ? C[r] : "before:tw-dark before:tw-bg-base"
       ]);
     case e.toString().includes("Left".toLowerCase()):
       return f([
         "before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]",
-        r && i === "Start" && e.toString().includes("Start".toLowerCase()) ? T[r] : "before:tw-dark before:tw-bg-base"
+        r && i === "Start" && e.toString().includes("Start".toLowerCase()) ? C[r] : "before:tw-dark before:tw-bg-base"
       ]);
     default:
       return "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-dark before:tw-bg-base";
   }
-}, Te = ({
+}, Ce = ({
   enablePortal: e = !1,
   children: r
-}) => e ? /* @__PURE__ */ t.createElement(he, null, r) : r, ye = ({
+}) => e ? /* @__PURE__ */ t.createElement(Le, null, r) : r, Te = ({
   content: e,
   tooltipIcon: r,
   heading: i,
   headingIcon: g,
   linkUrl: c,
   linkLabel: X,
-  brightHeader: k,
+  brightHeader: h,
   buttons: o,
   children: Z,
-  position: y = "Bottom",
+  position: T = "Bottom",
   alignment: B = "Middle",
   withArrow: S,
   flip: H = !0,
   triggerElement: R,
   hoverDelay: z = 200,
-  enterDelay: x = 0,
+  enterDelay: k = 0,
   open: M = !1,
   disabled: P = !1,
   enablePortal: A = !1,
@@ -79,12 +79,12 @@ const Le = {
   "data-test-id": N = "tooltip"
 }) => {
   var $;
-  const [L, ee] = b(
+  const [x, ee] = b(
     null
   ), [a, d] = b(!1), O = W(null), n = U || P, { linkProps: te } = pe({ isDisabled: n }, O), re = be(
     () => c || o || i || g,
     [c, o, i, g]
-  ), oe = Le[`${y}-${B}`], [p, ae] = b(null), [v, se] = b(null), [ne, le] = b(null), F = ve(), w = Se(L, p, {
+  ), oe = xe[`${T}-${B}`], [p, ae] = b(null), [v, se] = b(null), [ne, le] = b(null), F = ve(), w = Se(x, p, {
     placement: oe,
     strategy: "fixed",
     modifiers: [
@@ -109,21 +109,21 @@ const Le = {
         enabled: H
       }
     ]
-  }), ie = (($ = w.state) == null ? void 0 : $.placement) ?? y, de = Ce(ie, k, B), l = W(null), fe = E(() => {
+  }), ie = (($ = w.state) == null ? void 0 : $.placement) ?? T, de = ye(ie, h, B), l = W(null), fe = E(() => {
     l.current && clearTimeout(l.current), l.current = setTimeout(() => d(!1), z);
   }, [z]), I = E(() => {
-    if (l.current && clearTimeout(l.current), x) {
-      l.current = setTimeout(() => d(!0), x);
+    if (l.current && clearTimeout(l.current), k) {
+      l.current = setTimeout(() => d(!0), k);
       return;
     }
     d(!0);
-  }, [x]), we = E(
+  }, [k]), we = E(
     (s) => {
       var m;
       const u = (m = s.composedPath) == null ? void 0 : m.call(s);
-      u && [L, v, p].some((D) => D && u.includes(D)) && I();
+      u && [x, v, p].some((D) => D && u.includes(D)) && I();
     },
-    [I, p, v, L]
+    [I, p, v, x]
   ), me = E(
     (s) => {
       const { relatedTarget: u } = s;
@@ -139,7 +139,7 @@ const Le = {
   Y(() => {
     l.current && clearTimeout(l.current), d(n ? !1 : M);
   }, [M, n]);
-  const h = E(
+  const L = E(
     (s) => {
       a && s.key === "Escape" && d(!1);
     },
@@ -147,13 +147,13 @@ const Le = {
   );
   return Ee(() => {
     typeof w.update == "function" && a && w.update();
-  }, [a]), Y(() => (a ? window.addEventListener("keydown", h) : window.removeEventListener("keydown", h), () => {
-    window.removeEventListener("keydown", h);
-  }), [h, a]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { ..._, ref: se }, R && C(R, {
+  }, [a]), Y(() => (a ? window.addEventListener("keydown", L) : window.removeEventListener("keydown", L), () => {
+    window.removeEventListener("keydown", L);
+  }), [L, a]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { ..._, ref: se }, R && y(R, {
     ref: ee,
     "aria-labelledby": F,
     "aria-disabled": n
-  })), /* @__PURE__ */ t.createElement(Te, { enablePortal: A }, /* @__PURE__ */ t.createElement(
+  })), /* @__PURE__ */ t.createElement(Ce, { enablePortal: A }, /* @__PURE__ */ t.createElement(
     "div",
     {
       ref: ae,
@@ -169,7 +169,7 @@ const Le = {
       ...w.attributes.popper,
       ..._
     },
-    k && /* @__PURE__ */ t.createElement(ge, { headerStyle: k }),
+    h && /* @__PURE__ */ t.createElement(ge, { headerStyle: h }),
     /* @__PURE__ */ t.createElement(
       "div",
       {
@@ -179,8 +179,8 @@ const Le = {
           c ? Q.large : Q.small
         ])
       },
-      i && /* @__PURE__ */ t.createElement("h4", { className: "tw-flex tw-text-m tw-font-bold tw-mb-1" }, g && /* @__PURE__ */ t.createElement("span", { className: "tw-mr-1.5" }, C(g, { size: V.Size20 })), i),
-      /* @__PURE__ */ t.createElement("div", { className: "tw-flex" }, r && /* @__PURE__ */ t.createElement("span", { className: "tw-shrink-0 tw-mr-1 tw-leading-4" }, C(r, { size: V.Size16 })), /* @__PURE__ */ t.createElement("span", { className: "tw-text-s tw-min-w-0 tw-break-words" }, e)),
+      i && /* @__PURE__ */ t.createElement("h4", { className: "tw-flex tw-text-m tw-font-bold tw-mb-1" }, g && /* @__PURE__ */ t.createElement("span", { className: "tw-mr-1.5" }, y(g, { size: V.Size20 })), i),
+      /* @__PURE__ */ t.createElement("div", { className: "tw-flex" }, r && /* @__PURE__ */ t.createElement("span", { className: "tw-shrink-0 tw-mr-1 tw-leading-4" }, y(r, { size: V.Size16 })), /* @__PURE__ */ t.createElement("span", { className: "tw-text-s tw-min-w-0 tw-break-words" }, e)),
       c && /* @__PURE__ */ t.createElement(
         "a",
         {
@@ -235,10 +235,10 @@ const Le = {
     Z
   )));
 };
-ye.displayName = "FondueTooltip";
+Te.displayName = "FondueLegacyTooltip";
 export {
-  ye as Tooltip,
-  xe as TooltipAlignment,
-  ke as TooltipPosition
+  Te as LegacyTooltip,
+  ke as TooltipAlignment,
+  he as TooltipPosition
 };
-//# sourceMappingURL=Tooltip.es.js.map
+//# sourceMappingURL=LegacyTooltip.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LegacyTooltip.es.js","sources":["../../../src/components/LegacyTooltip/LegacyTooltip.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    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';\nimport { Portal } from '@components/Portal';\n\nexport type TooltipButton = {\n    label: string;\n    action: () => void;\n};\n\nexport type LegacyTooltipProps = {\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?: ReactNode;\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    enablePortal?: boolean;\n    'data-test-id'?: string;\n};\n\nconst paddingsTop = {\n    small: 'tw-pt-2',\n    large: 'tw-pt-3',\n};\n\nconst paddingsBottom = {\n    small: 'tw-pb-2',\n    large: 'tw-pb-3',\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\nconst TooltipWrapper = ({\n    enablePortal = false,\n    children,\n}: {\n    enablePortal?: boolean;\n    children?: ReactNode | ReactNode[];\n}) => {\n    if (enablePortal) {\n        return (<Portal>{children}</Portal>) as JSX.Element;\n    }\n\n    return children as JSX.Element;\n};\n\nexport const LegacyTooltip = ({\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    enablePortal = false,\n    hidden = false,\n    'data-test-id': dataTestId = 'tooltip',\n}: LegacyTooltipProps) => {\n    const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement | HTMLDivElement | HTMLButtonElement | null>(\n        null,\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const linkRef = useRef<HTMLAnchorElement | null>(null);\n\n    const shouldPreventTooltipOpening = hidden || disabled;\n    const { linkProps } = useLink({ isDisabled: shouldPreventTooltipOpening }, linkRef);\n    const hasLargePaddingTop = useMemo(\n        () => linkUrl || buttons || heading || headingIcon,\n        [linkUrl, 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: 'eventListeners',\n                options: { scroll: isOpen, resize: isOpen },\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 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: MouseEvent) => {\n            const hoveredElement = event.composedPath?.();\n            const hoverSources = [triggerElementRef, triggerElementContainerRef, tooltipContainerRef];\n\n            if (hoveredElement && hoverSources.some((el) => el && hoveredElement.includes(el))) {\n                handleShowTooltipOnHover();\n            }\n        },\n        [handleShowTooltipOnHover, tooltipContainerRef, triggerElementContainerRef, triggerElementRef],\n    );\n\n    const handleCloseIfFocusedOutside = useCallback(\n        (event: FocusEvent<HTMLElement>) => {\n            const { relatedTarget } = event;\n            const elements = [tooltipContainerRef, triggerElementContainerRef];\n\n            if (!relatedTarget || !elements.some((element) => element?.contains(relatedTarget))) {\n                setIsOpen(false);\n            }\n        },\n        [tooltipContainerRef, triggerElementContainerRef],\n    );\n\n    const openingEvents: HTMLAttributes<HTMLElement> = shouldPreventTooltipOpening\n        ? {}\n        : {\n              onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n              onMouseLeave: handleHideTooltipOnHover,\n              onFocus: () => setIsOpen(true),\n              onBlur: handleCloseIfFocusedOutside,\n          };\n\n    useEffect(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        setIsOpen(shouldPreventTooltipOpening ? false : open);\n    }, [open, shouldPreventTooltipOpening]);\n\n    const listenForEsc = useCallback(\n        (event: KeyboardEvent) => {\n            if (isOpen && event.key === 'Escape') {\n                setIsOpen(false);\n            }\n        },\n        [isOpen],\n    );\n\n    useLayoutEffect(() => {\n        if (typeof popperInstance.update === 'function' && isOpen) {\n            popperInstance.update();\n        }\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isOpen) {\n            window.addEventListener('keydown', listenForEsc);\n        } else {\n            window.removeEventListener('keydown', listenForEsc);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', listenForEsc);\n        };\n    }, [listenForEsc, isOpen]);\n\n    return (\n        <>\n            <div {...openingEvents} ref={setTriggerElementContainerRef}>\n                {triggerElement &&\n                    cloneElement(triggerElement, {\n                        ref: setTriggerElementRef,\n                        'aria-labelledby': id,\n                        'aria-disabled': shouldPreventTooltipOpening,\n                    })}\n            </div>\n            <TooltipWrapper enablePortal={enablePortal}>\n                <div\n                    ref={setTooltipContainerRef}\n                    aria-hidden={shouldPreventTooltipOpening}\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                        !isOpen && 'tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden',\n                    ])}\n                    data-test-id={dataTestId}\n                    role=\"tooltip\"\n                    id={id}\n                    style={popperInstance.styles.popper}\n                    {...popperInstance.attributes.popper}\n                    {...openingEvents}\n                >\n                    {brightHeader && <BrightHeader headerStyle={brightHeader} />}\n                    <div\n                        className={merge([\n                            'tw-px-3 tw-dark tw-bg-base tw-rounded-md tw-relative tw-z-[120000]',\n                            hasLargePaddingTop ? paddingsTop.large : paddingsTop.small,\n                            linkUrl ? paddingsBottom.large : paddingsBottom.small,\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={`${dataTestId}-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 tw-underline tw-mt-1',\n                                    FOCUS_VISIBLE_STYLE,\n                                ])}\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                                    <Button\n                                        style={ButtonStyle.Default}\n                                        emphasis={ButtonEmphasis.Strong}\n                                        size={ButtonSize.Small}\n                                        onClick={buttons[0].action}\n                                        disabled={shouldPreventTooltipOpening}\n                                    >\n                                        {buttons[0].label}\n                                    </Button>\n                                )}\n                                {buttons.length === 2 && (\n                                    <Button\n                                        style={ButtonStyle.Default}\n                                        emphasis={ButtonEmphasis.Default}\n                                        size={ButtonSize.Small}\n                                        onClick={buttons[1].action}\n                                        disabled={shouldPreventTooltipOpening}\n                                    >\n                                        {buttons[1].label}\n                                    </Button>\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            </TooltipWrapper>\n        </>\n    );\n};\nLegacyTooltip.displayName = 'FondueLegacyTooltip';\n"],"names":["paddingsTop","paddingsBottom","TooltipPosition","TooltipAlignment","placementMap","getArrowClasses","currentPlacement","brightHeader","alignment","merge","brightHeaderArrowBackgroundColors","TooltipWrapper","enablePortal","children","React","Portal","LegacyTooltip","content","tooltipIcon","heading","headingIcon","linkUrl","linkLabel","buttons","position","withArrow","flip","triggerElement","hoverDelay","enterDelay","open","disabled","hidden","dataTestId","triggerElementRef","setTriggerElementRef","useState","isOpen","setIsOpen","linkRef","useRef","shouldPreventTooltipOpening","linkProps","useLink","hasLargePaddingTop","useMemo","placement","tooltipContainerRef","setTooltipContainerRef","triggerElementContainerRef","setTriggerElementContainerRef","arrowElement","setArrowElement","id","useMemoizedId","popperInstance","usePopper","_a","arrowStyling","timeoutRef","handleHideTooltipOnHover","useCallback","handleShowTooltipOnHover","checkIfHovered","event","hoveredElement","el","handleCloseIfFocusedOutside","relatedTarget","element","openingEvents","useEffect","listenForEsc","useLayoutEffect","cloneElement","BrightHeader","IconSize","FOCUS_VISIBLE_STYLE","Button","ButtonStyle","ButtonEmphasis","ButtonSize"],"mappings":"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"}

package/dist/components/LegacyTooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BrightHeader';
+export * from './LegacyTooltip';

package/dist/components/RadioList/RadioList.es.js

@@ -3,7 +3,7 @@ import { generateRandomId as b } from "../../utilities/generateRandomId.es.js";
 import { merge as n } from "../../utilities/merge.es.js";
 import t, { useRef as x, useState as v, Children as g, isValidElement as k, useEffect as m } from "react";
 import { RadioButtonEmphasis as E } from "./RadioButton.es.js";
-import { Tooltip as h, TooltipAlignment as z, TooltipPosition as N } from "../Tooltip/Tooltip.es.js";
+import { LegacyTooltip as h, TooltipAlignment as z, TooltipPosition as N } from "../LegacyTooltip/LegacyTooltip.es.js";
 import { IconSize as R } from "../../foundation/Icon/IconSize.es.js";
 var T = /* @__PURE__ */ ((a) => (a.Horizontal = "Horizontal", a.Vertical = "Vertical", a))(T || {});
 const V = ({

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

@@ -1 +1 @@
-{"version":3,"file":"RadioList.es.js","sources":["../../../src/components/RadioList/RadioList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Tooltip, TooltipAlignment, TooltipPosition } from '@components/Tooltip';\nimport IconQuestionMarkCircle from '@foundation/Icon/Generated/IconQuestionMarkCircle';\nimport { IconSize } from '@foundation/Icon';\nimport { generateRandomId } from '@utilities/generateRandomId';\nimport { merge } from '@utilities/merge';\nimport React, { Children, ReactNode, isValidElement, useEffect, useRef, useState } from 'react';\nimport { RadioButtonEmphasis, RadioButtonProps } from './RadioButton';\n\nexport enum RadioListDirection {\n    Horizontal = 'Horizontal',\n    Vertical = 'Vertical',\n}\n\nexport type RadioListProps = {\n    children: ReactNode;\n    onChange?: (value: string) => void;\n    direction?: RadioListDirection;\n    defaultValue?: string;\n    name?: string;\n    ariaLabel?: string;\n};\n\nexport const RadioList = ({\n    children,\n    defaultValue,\n    direction = RadioListDirection.Horizontal,\n    onChange,\n    name = 'default-radio',\n    ariaLabel,\n}: RadioListProps) => {\n    const radioGroupRef = useRef<HTMLDivElement | null>(null);\n\n    const [activeValue, setActiveValue] = useState(defaultValue);\n\n    const radioButtons: RadioButtonProps[] =\n        Children.map(children, (child) => {\n            if (!isValidElement<RadioButtonProps>(child)) {\n                return null;\n            }\n            return child?.props;\n        }) ?? [];\n\n    useEffect(() => {\n        setActiveValue(defaultValue);\n    }, [defaultValue]);\n\n    useEffect(() => {\n        if (radioGroupRef.current) {\n            const activeRadioButton = radioGroupRef.current.querySelector(`input[value=\"${activeValue}\"]`);\n            if (activeRadioButton) {\n                (activeRadioButton as HTMLDivElement).focus();\n            }\n        }\n    }, [activeValue]);\n\n    return (\n        <div\n            data-test-id=\"radio-list-wrapper\"\n            role=\"radiogroup\"\n            aria-label={ariaLabel ?? 'Choose an option'}\n            ref={radioGroupRef}\n            className={merge(['tw-flex', direction === RadioListDirection.Horizontal ? 'tw-gap-4' : 'tw-flex-col'])}\n        >\n            {radioButtons.map((radio) => {\n                const id = generateRandomId();\n                return (\n                    <div className=\"tw-flex tw-items-center tw-mb-2\" key={id}>\n                        <input\n                            data-test-id=\"radio-input\"\n                            disabled={radio.disabled}\n                            id={id}\n                            type=\"radio\"\n                            name={name}\n                            value={radio.value}\n                            aria-label=\"radio\"\n                            aria-checked={radio.value === activeValue}\n                            defaultChecked={radio.value === activeValue}\n                            className={merge([\n                                'tw-peer tw-form-radio w-w-4 tw-h-4 tw-border-black-60 disabled:tw-border-black-10 focus:tw-ring-0 focus:tw-ring-offset-0 focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2',\n                                radio.emphasis === RadioButtonEmphasis.Weak\n                                    ? 'tw-text-black-80'\n                                    : 'tw-text-box-selected-strong',\n                            ])}\n                            onChange={() => {\n                                setActiveValue(radio.value);\n                                if (onChange) {\n                                    onChange(radio.value);\n                                }\n                            }}\n                        />\n                        {!radio.hideLabel && (\n                            <label\n                                data-test-id=\"radio-label\"\n                                htmlFor={id}\n                                className={merge([\n                                    'tw-flex tw-flex-col tw-pl-2 tw-text-sm tw-font-normal peer-checked:tw-font-medium tw-text-black-80 peer-disabled:tw-text-black-40',\n                                ])}\n                            >\n                                {radio.value}\n                                {radio.helperText && (\n                                    <span className=\"tw-text-black-80 tw-font-normal\">{radio.helperText}</span>\n                                )}\n                            </label>\n                        )}\n                        {radio.tooltip && (\n                            <Tooltip\n                                alignment={TooltipAlignment.Middle}\n                                content={radio.tooltip}\n                                hoverDelay={75}\n                                position={TooltipPosition.Top}\n                                triggerElement={\n                                    <button className=\"tw-flex tw-text-black-80 tw-mx-2 tw-self-center\">\n                                        <IconQuestionMarkCircle size={IconSize.Size16} />\n                                    </button>\n                                }\n                                withArrow\n                            />\n                        )}\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n"],"names":["RadioListDirection","RadioList","children","defaultValue","direction","onChange","name","ariaLabel","radioGroupRef","useRef","activeValue","setActiveValue","useState","radioButtons","Children","child","isValidElement","useEffect","activeRadioButton","React","merge","radio","id","generateRandomId","RadioButtonEmphasis","Tooltip","TooltipAlignment","TooltipPosition","IconQuestionMarkCircle","IconSize"],"mappings":";;;;;;;AAUY,IAAAA,sBAAAA,OACRA,EAAA,aAAa,cACbA,EAAA,WAAW,YAFHA,IAAAA,KAAA,CAAA,CAAA;AAcL,MAAMC,IAAY,CAAC;AAAA,EACtB,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC;AACJ,MAAsB;AACZ,QAAAC,IAAgBC,EAA8B,IAAI,GAElD,CAACC,GAAaC,CAAc,IAAIC,EAAST,CAAY,GAErDU,IACFC,EAAS,IAAIZ,GAAU,CAACa,MACfC,EAAiCD,CAAK,IAGpCA,KAAA,gBAAAA,EAAO,QAFH,IAGd,KAAK,CAAA;AAEV,SAAAE,EAAU,MAAM;AACZ,IAAAN,EAAeR,CAAY;AAAA,EAAA,GAC5B,CAACA,CAAY,CAAC,GAEjBc,EAAU,MAAM;AACZ,QAAIT,EAAc,SAAS;AACvB,YAAMU,IAAoBV,EAAc,QAAQ,cAAc,gBAAgBE,KAAe;AAC7F,MAAIQ,KACCA,EAAqC,MAAM;AAAA,IAEpD;AAAA,EAAA,GACD,CAACR,CAAW,CAAC,GAGZ,gBAAAS,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,MAAK;AAAA,MACL,cAAYZ,KAAa;AAAA,MACzB,KAAKC;AAAA,MACL,WAAWY,EAAM,CAAC,WAAWhB,MAAc,eAAgC,aAAa,aAAa,CAAC;AAAA,IAAA;AAAA,IAErGS,EAAa,IAAI,CAACQ,MAAU;AACzB,YAAMC,IAAKC;AACX,aACK,gBAAAJ,EAAA,cAAA,OAAA,EAAI,WAAU,mCAAkC,KAAKG,KAClD,gBAAAH,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,gBAAa;AAAA,UACb,UAAUE,EAAM;AAAA,UAChB,IAAAC;AAAA,UACA,MAAK;AAAA,UACL,MAAAhB;AAAA,UACA,OAAOe,EAAM;AAAA,UACb,cAAW;AAAA,UACX,gBAAcA,EAAM,UAAUX;AAAA,UAC9B,gBAAgBW,EAAM,UAAUX;AAAA,UAChC,WAAWU,EAAM;AAAA,YACb;AAAA,YACAC,EAAM,aAAaG,EAAoB,OACjC,qBACA;AAAA,UAAA,CACT;AAAA,UACD,UAAU,MAAM;AACZ,YAAAb,EAAeU,EAAM,KAAK,GACtBhB,KACAA,EAASgB,EAAM,KAAK;AAAA,UAE5B;AAAA,QAAA;AAAA,MACJ,GACC,CAACA,EAAM,aACJ,gBAAAF,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,gBAAa;AAAA,UACb,SAASG;AAAA,UACT,WAAWF,EAAM;AAAA,YACb;AAAA,UAAA,CACH;AAAA,QAAA;AAAA,QAEAC,EAAM;AAAA,QACNA,EAAM,cACH,gBAAAF,EAAA,cAAC,UAAK,WAAU,kCAAA,GAAmCE,EAAM,UAAW;AAAA,MAAA,GAI/EA,EAAM,WACH,gBAAAF,EAAA;AAAA,QAACM;AAAA,QAAA;AAAA,UACG,WAAWC,EAAiB;AAAA,UAC5B,SAASL,EAAM;AAAA,UACf,YAAY;AAAA,UACZ,UAAUM,EAAgB;AAAA,UAC1B,gBACK,gBAAAR,EAAA,cAAA,UAAA,EAAO,WAAU,kDAAA,mCACbS,GAAuB,EAAA,MAAMC,EAAS,OAAQ,CAAA,CACnD;AAAA,UAEJ,WAAS;AAAA,QAAA;AAAA,MAAA,CAGrB;AAAA,IAAA,CAEP;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"RadioList.es.js","sources":["../../../src/components/RadioList/RadioList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { LegacyTooltip, TooltipAlignment, TooltipPosition } from '@components/LegacyTooltip';\nimport IconQuestionMarkCircle from '@foundation/Icon/Generated/IconQuestionMarkCircle';\nimport { IconSize } from '@foundation/Icon';\nimport { generateRandomId } from '@utilities/generateRandomId';\nimport { merge } from '@utilities/merge';\nimport React, { Children, ReactNode, isValidElement, useEffect, useRef, useState } from 'react';\nimport { RadioButtonEmphasis, RadioButtonProps } from './RadioButton';\n\nexport enum RadioListDirection {\n    Horizontal = 'Horizontal',\n    Vertical = 'Vertical',\n}\n\nexport type RadioListProps = {\n    children: ReactNode;\n    onChange?: (value: string) => void;\n    direction?: RadioListDirection;\n    defaultValue?: string;\n    name?: string;\n    ariaLabel?: string;\n};\n\nexport const RadioList = ({\n    children,\n    defaultValue,\n    direction = RadioListDirection.Horizontal,\n    onChange,\n    name = 'default-radio',\n    ariaLabel,\n}: RadioListProps) => {\n    const radioGroupRef = useRef<HTMLDivElement | null>(null);\n\n    const [activeValue, setActiveValue] = useState(defaultValue);\n\n    const radioButtons: RadioButtonProps[] =\n        Children.map(children, (child) => {\n            if (!isValidElement<RadioButtonProps>(child)) {\n                return null;\n            }\n            return child?.props;\n        }) ?? [];\n\n    useEffect(() => {\n        setActiveValue(defaultValue);\n    }, [defaultValue]);\n\n    useEffect(() => {\n        if (radioGroupRef.current) {\n            const activeRadioButton = radioGroupRef.current.querySelector(`input[value=\"${activeValue}\"]`);\n            if (activeRadioButton) {\n                (activeRadioButton as HTMLDivElement).focus();\n            }\n        }\n    }, [activeValue]);\n\n    return (\n        <div\n            data-test-id=\"radio-list-wrapper\"\n            role=\"radiogroup\"\n            aria-label={ariaLabel ?? 'Choose an option'}\n            ref={radioGroupRef}\n            className={merge(['tw-flex', direction === RadioListDirection.Horizontal ? 'tw-gap-4' : 'tw-flex-col'])}\n        >\n            {radioButtons.map((radio) => {\n                const id = generateRandomId();\n                return (\n                    <div className=\"tw-flex tw-items-center tw-mb-2\" key={id}>\n                        <input\n                            data-test-id=\"radio-input\"\n                            disabled={radio.disabled}\n                            id={id}\n                            type=\"radio\"\n                            name={name}\n                            value={radio.value}\n                            aria-label=\"radio\"\n                            aria-checked={radio.value === activeValue}\n                            defaultChecked={radio.value === activeValue}\n                            className={merge([\n                                'tw-peer tw-form-radio w-w-4 tw-h-4 tw-border-black-60 disabled:tw-border-black-10 focus:tw-ring-0 focus:tw-ring-offset-0 focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2',\n                                radio.emphasis === RadioButtonEmphasis.Weak\n                                    ? 'tw-text-black-80'\n                                    : 'tw-text-box-selected-strong',\n                            ])}\n                            onChange={() => {\n                                setActiveValue(radio.value);\n                                if (onChange) {\n                                    onChange(radio.value);\n                                }\n                            }}\n                        />\n                        {!radio.hideLabel && (\n                            <label\n                                data-test-id=\"radio-label\"\n                                htmlFor={id}\n                                className={merge([\n                                    'tw-flex tw-flex-col tw-pl-2 tw-text-sm tw-font-normal peer-checked:tw-font-medium tw-text-black-80 peer-disabled:tw-text-black-40',\n                                ])}\n                            >\n                                {radio.value}\n                                {radio.helperText && (\n                                    <span className=\"tw-text-black-80 tw-font-normal\">{radio.helperText}</span>\n                                )}\n                            </label>\n                        )}\n                        {radio.tooltip && (\n                            <LegacyTooltip\n                                alignment={TooltipAlignment.Middle}\n                                content={radio.tooltip}\n                                hoverDelay={75}\n                                position={TooltipPosition.Top}\n                                triggerElement={\n                                    <button className=\"tw-flex tw-text-black-80 tw-mx-2 tw-self-center\">\n                                        <IconQuestionMarkCircle size={IconSize.Size16} />\n                                    </button>\n                                }\n                                withArrow\n                            />\n                        )}\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n"],"names":["RadioListDirection","RadioList","children","defaultValue","direction","onChange","name","ariaLabel","radioGroupRef","useRef","activeValue","setActiveValue","useState","radioButtons","Children","child","isValidElement","useEffect","activeRadioButton","React","merge","radio","id","generateRandomId","RadioButtonEmphasis","LegacyTooltip","TooltipAlignment","TooltipPosition","IconQuestionMarkCircle","IconSize"],"mappings":";;;;;;;AAUY,IAAAA,sBAAAA,OACRA,EAAA,aAAa,cACbA,EAAA,WAAW,YAFHA,IAAAA,KAAA,CAAA,CAAA;AAcL,MAAMC,IAAY,CAAC;AAAA,EACtB,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC;AACJ,MAAsB;AACZ,QAAAC,IAAgBC,EAA8B,IAAI,GAElD,CAACC,GAAaC,CAAc,IAAIC,EAAST,CAAY,GAErDU,IACFC,EAAS,IAAIZ,GAAU,CAACa,MACfC,EAAiCD,CAAK,IAGpCA,KAAA,gBAAAA,EAAO,QAFH,IAGd,KAAK,CAAA;AAEV,SAAAE,EAAU,MAAM;AACZ,IAAAN,EAAeR,CAAY;AAAA,EAAA,GAC5B,CAACA,CAAY,CAAC,GAEjBc,EAAU,MAAM;AACZ,QAAIT,EAAc,SAAS;AACvB,YAAMU,IAAoBV,EAAc,QAAQ,cAAc,gBAAgBE,KAAe;AAC7F,MAAIQ,KACCA,EAAqC,MAAM;AAAA,IAEpD;AAAA,EAAA,GACD,CAACR,CAAW,CAAC,GAGZ,gBAAAS,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,MAAK;AAAA,MACL,cAAYZ,KAAa;AAAA,MACzB,KAAKC;AAAA,MACL,WAAWY,EAAM,CAAC,WAAWhB,MAAc,eAAgC,aAAa,aAAa,CAAC;AAAA,IAAA;AAAA,IAErGS,EAAa,IAAI,CAACQ,MAAU;AACzB,YAAMC,IAAKC;AACX,aACK,gBAAAJ,EAAA,cAAA,OAAA,EAAI,WAAU,mCAAkC,KAAKG,KAClD,gBAAAH,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,gBAAa;AAAA,UACb,UAAUE,EAAM;AAAA,UAChB,IAAAC;AAAA,UACA,MAAK;AAAA,UACL,MAAAhB;AAAA,UACA,OAAOe,EAAM;AAAA,UACb,cAAW;AAAA,UACX,gBAAcA,EAAM,UAAUX;AAAA,UAC9B,gBAAgBW,EAAM,UAAUX;AAAA,UAChC,WAAWU,EAAM;AAAA,YACb;AAAA,YACAC,EAAM,aAAaG,EAAoB,OACjC,qBACA;AAAA,UAAA,CACT;AAAA,UACD,UAAU,MAAM;AACZ,YAAAb,EAAeU,EAAM,KAAK,GACtBhB,KACAA,EAASgB,EAAM,KAAK;AAAA,UAE5B;AAAA,QAAA;AAAA,MACJ,GACC,CAACA,EAAM,aACJ,gBAAAF,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,gBAAa;AAAA,UACb,SAASG;AAAA,UACT,WAAWF,EAAM;AAAA,YACb;AAAA,UAAA,CACH;AAAA,QAAA;AAAA,QAEAC,EAAM;AAAA,QACNA,EAAM,cACH,gBAAAF,EAAA,cAAC,UAAK,WAAU,kCAAA,GAAmCE,EAAM,UAAW;AAAA,MAAA,GAI/EA,EAAM,WACH,gBAAAF,EAAA;AAAA,QAACM;AAAA,QAAA;AAAA,UACG,WAAWC,EAAiB;AAAA,UAC5B,SAASL,EAAM;AAAA,UACf,YAAY;AAAA,UACZ,UAAUM,EAAgB;AAAA,UAC1B,gBACK,gBAAAR,EAAA,cAAA,UAAA,EAAO,WAAU,kDAAA,mCACbS,GAAuB,EAAA,MAAMC,EAAS,OAAQ,CAAA,CACnD;AAAA,UAEJ,WAAS;AAAA,QAAA;AAAA,MAAA,CAGrB;AAAA,IAAA,CAEP;AAAA,EAAA;AAGb;"}

package/dist/components/TextInput/TextInput.d.ts

@@ -1,6 +1,6 @@
 import { Validation } from '../../utilities/validation';
 import { FocusEvent, KeyboardEvent, ReactElement, ReactNode } from 'react';
-import { TooltipProps } from '../Tooltip';
+import { LegacyTooltipProps } from '../LegacyTooltip';
 export declare enum TextInputType {
     Text = "text",
     Password = "password",
@@ -10,7 +10,7 @@ export type TextInputExtraAction = {
     onClick: () => void;
     icon: ReactElement;
     title: string;
-    tooltip?: Omit<TooltipProps, 'triggerElement'>;
+    tooltip?: Omit<LegacyTooltipProps, 'triggerElement'>;
     disabled?: boolean;
 };
 export type TextInputBaseProps = {

package/dist/components/TextInput/TextInput.es.js

@@ -5,7 +5,7 @@ import { FOCUS_STYLE as m } from "../../utilities/focusStyle.es.js";
 import { merge as s } from "../../utilities/merge.es.js";
 import { validationClassMap as tt, Validation as l } from "../../utilities/validation.es.js";
 import t, { forwardRef as et, useRef as rt, useState as ot, useEffect as R } from "react";
-import { Tooltip as st } from "../Tooltip/Tooltip.es.js";
+import { LegacyTooltip as st } from "../LegacyTooltip/LegacyTooltip.es.js";
 import nt from "../../foundation/Icon/Generated/IconCross.es.js";
 import at from "../../foundation/Icon/Generated/IconEye.es.js";
 import lt from "../../foundation/Icon/Generated/IconEyeOff.es.js";
@@ -53,7 +53,7 @@ const bt = ({ extraAction: r, disabled: a, isFocusVisible: p, focusProps: n }, x
   value: k = "",
   copyable: M = !1,
   onChange: f,
-  onEnterPressed: y,
+  onEnterPressed: h,
   onBlur: W,
   onClear: C,
   onFocus: F,
@@ -64,7 +64,7 @@ const bt = ({ extraAction: r, disabled: a, isFocusVisible: p, focusProps: n }, x
   selectable: K = !1,
   extraActions: g
 }) => {
-  const { isFocusVisible: U, focusProps: Y } = w({ within: !0, isTextInput: !0 }), { isFocusVisible: N, focusProps: _ } = w(), { isFocusVisible: P, focusProps: q } = w(), { isFocusVisible: V, focusProps: G } = w(), { isFocusVisible: B, focusProps: T } = w(), { copy: H, status: h } = Z(), u = rt(null), [b, j] = ot(
+  const { isFocusVisible: U, focusProps: Y } = w({ within: !0, isTextInput: !0 }), { isFocusVisible: N, focusProps: _ } = w(), { isFocusVisible: P, focusProps: q } = w(), { isFocusVisible: V, focusProps: G } = w(), { isFocusVisible: B, focusProps: T } = w(), { copy: H, status: y } = Z(), u = rt(null), [b, j] = ot(
     typeof i == "boolean" ? i : a === "password"
     /* Password */
   );
@@ -77,7 +77,7 @@ const bt = ({ extraAction: r, disabled: a, isFocusVisible: p, focusProps: n }, x
     typeof i == "boolean" && j(i);
   }, [i]);
   const J = (e) => {
-    e.key === "Enter" && y && y(e);
+    e.key === "Enter" && h && h(e);
   }, Q = () => a === "password" ? b ? "password" : "text" : a, X = typeof I == "boolean" ? { spellCheck: I } : null;
   return /* @__PURE__ */ t.createElement(
     "div",
@@ -231,9 +231,9 @@ const bt = ({ extraAction: r, disabled: a, isFocusVisible: p, focusProps: n }, x
         type: "button",
         ...G
       },
-      h === "error" && /* @__PURE__ */ t.createElement("span", { className: "tw-text-box-negative-strong" }, /* @__PURE__ */ t.createElement(wt, null)),
-      h === "idle" && /* @__PURE__ */ t.createElement(mt, null),
-      h === "success" && /* @__PURE__ */ t.createElement("span", { className: "tw-text-box-positive-strong" }, /* @__PURE__ */ t.createElement(pt, null))
+      y === "error" && /* @__PURE__ */ t.createElement("span", { className: "tw-text-box-negative-strong" }, /* @__PURE__ */ t.createElement(wt, null)),
+      y === "idle" && /* @__PURE__ */ t.createElement(mt, null),
+      y === "success" && /* @__PURE__ */ t.createElement("span", { className: "tw-text-box-positive-strong" }, /* @__PURE__ */ t.createElement(pt, null))
     )
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.es.js","sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { useCopy } from '@hooks/useCopy';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, {\n    DOMAttributes,\n    FocusEvent,\n    ForwardRefRenderFunction,\n    KeyboardEvent,\n    ReactElement,\n    ReactNode,\n    forwardRef,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    IconCheckMark,\n    IconClipboard,\n    IconCross,\n    IconCrossCircle,\n    IconExclamationMarkTriangle,\n    IconEye,\n    IconEyeOff,\n} from '@foundation/Icon/Generated';\nimport { Tooltip, TooltipProps } from '../Tooltip';\nimport { FocusableElement } from '@react-types/shared';\n\nexport enum TextInputType {\n    Text = 'text',\n    Password = 'password',\n    Number = 'number',\n}\n\nexport type TextInputExtraAction = {\n    onClick: () => void;\n    icon: ReactElement;\n    title: string;\n    tooltip?: Omit<TooltipProps, 'triggerElement'>;\n    disabled?: boolean;\n};\n\nexport type TextInputBaseProps = {\n    id?: string;\n    type?: TextInputType;\n    decorator?: ReactNode;\n    dotted?: boolean;\n    clearable?: boolean;\n    placeholder?: string;\n    required?: boolean;\n    disabled?: boolean;\n    autocomplete?: boolean;\n    readonly?: boolean;\n    validation?: Validation;\n    copyable?: boolean;\n    value?: string;\n    onChange?: (value: string) => void;\n    onEnterPressed?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n    onClear?: () => void;\n    size?: number;\n    spellcheck?: boolean;\n    focusOnMount?: boolean;\n    selectable?: boolean;\n    extraActions?: TextInputExtraAction[];\n};\n\nexport type TextInputProps =\n    | ({\n          type?: TextInputType.Text;\n          obfuscated?: false;\n      } & TextInputBaseProps)\n    | ({\n          type?: TextInputType.Number;\n          obfuscated?: false;\n          min?: number;\n          max?: number;\n      } & TextInputBaseProps)\n    | ({\n          type: TextInputType.Password;\n          obfuscated?: boolean;\n      } & TextInputBaseProps);\n\ntype ExtraActionButtonProps = {\n    extraAction: TextInputExtraAction;\n    disabled: boolean;\n    isFocusVisible: boolean;\n    focusProps: DOMAttributes<FocusableElement>;\n};\n\nconst ExtraActionButton: ForwardRefRenderFunction<HTMLButtonElement | null, ExtraActionButtonProps> = (\n    { extraAction, disabled, isFocusVisible, focusProps },\n    ref,\n): ReactElement | null => {\n    if (!extraAction) {\n        return null;\n    }\n    const isDisabled = disabled || extraAction.disabled;\n    return (\n        <button\n            className={merge([\n                'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-p-1 -tw-mr-2',\n                isDisabled\n                    ? 'tw-cursor-default tw-text-text-disabled'\n                    : 'tw-text-text-weak hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            onClick={extraAction.onClick}\n            data-test-id=\"fondue-extra-action-icon\"\n            aria-label={extraAction.title.toLowerCase()}\n            disabled={isDisabled}\n            aria-disabled={isDisabled}\n            type=\"button\"\n            ref={ref}\n            {...focusProps}\n        >\n            {extraAction.icon}\n        </button>\n    );\n};\nconst ExtraActionButtonWithRef = forwardRef(ExtraActionButton);\n\nexport const TextInput = ({\n    id: propId,\n    type = TextInputType.Text,\n    decorator,\n    validation = Validation.Default,\n    clearable = false,\n    placeholder,\n    required,\n    obfuscated,\n    disabled = false,\n    autocomplete = false,\n    dotted = false,\n    value = '',\n    copyable = false,\n    onChange,\n    onEnterPressed,\n    onBlur,\n    onClear,\n    onFocus,\n    size,\n    spellcheck,\n    readonly,\n    focusOnMount,\n    selectable = false,\n    extraActions,\n}: TextInputProps): ReactElement => {\n    const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n    const { isFocusVisible: clearButtonIsFocusVisible, focusProps: clearButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: passwordButtonIsFocusVisible, focusProps: passwordButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: copyButtonIsFocusVisible, focusProps: copyButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: extraActionButtonIsFocusVisible, focusProps: extraActionButtonFocusProps } = useFocusRing();\n\n    const { copy, status } = useCopy();\n\n    const inputElement = useRef<HTMLInputElement | null>(null);\n    const [isObfuscated, setIsObfuscated] = useState(\n        typeof obfuscated === 'boolean' ? obfuscated : type === TextInputType.Password,\n    );\n\n    useEffect(() => {\n        setTimeout(() => {\n            focusOnMount && inputElement.current?.focus();\n        }, 0);\n    }, [focusOnMount]);\n\n    useEffect(() => {\n        if (typeof obfuscated === 'boolean') {\n            setIsObfuscated(obfuscated);\n        }\n    }, [obfuscated]);\n\n    const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            onEnterPressed && onEnterPressed(event);\n        }\n    };\n\n    const getInputType = () => {\n        if (type === TextInputType.Password) {\n            return isObfuscated ? TextInputType.Password : TextInputType.Text;\n        }\n        return type;\n    };\n\n    const spellcheckProp = typeof spellcheck === 'boolean' ? { spellCheck: spellcheck } : null;\n\n    return (\n        <div\n            {...focusProps}\n            className={merge([\n                'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n                dotted ? 'tw-border-dashed' : 'tw-border-solid',\n                disabled || readonly\n                    ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n                    : merge([\n                          'focus-within:tw-border-black-90 hover:tw-border-black-90',\n                          validationClassMap[validation],\n                          isFocusVisible &&\n                              !clearButtonIsFocusVisible &&\n                              !passwordButtonIsFocusVisible &&\n                              !copyButtonIsFocusVisible &&\n                              FOCUS_STYLE,\n                      ]),\n            ])}\n            data-test-id=\"fondue-text-input-component\"\n        >\n            {decorator && (\n                <div\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-pl-1',\n                        disabled ? 'tw-text-black-60' : 'tw-text-black-80',\n                    ])}\n                    data-test-id=\"decorator\"\n                >\n                    {decorator}\n                </div>\n            )}\n            <input\n                id={useMemoizedId(propId)}\n                ref={inputElement}\n                className={merge([\n                    'tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows',\n                    disabled || readonly\n                        ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                        : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                ])}\n                onClick={() => inputElement.current?.focus()}\n                onChange={(event) => onChange && onChange(event.currentTarget.value)}\n                onBlur={onBlur}\n                onKeyDown={onKeyDown}\n                placeholder={placeholder}\n                value={value}\n                type={getInputType()}\n                required={required}\n                readOnly={readonly}\n                disabled={disabled}\n                onFocus={(e) => {\n                    if (selectable) {\n                        e.target.select();\n                    }\n                    if (onFocus) {\n                        onFocus(e);\n                    }\n                }}\n                autoComplete={autocomplete ? 'on' : 'off'}\n                size={size}\n                data-test-id=\"text-input\"\n                {...spellcheckProp}\n            />\n            {extraActions &&\n                extraActions.length > 0 &&\n                extraActions.map((extraAction: TextInputExtraAction, index: number) => {\n                    const key = `text-input-extra-action-${index}`;\n                    if (extraAction.tooltip) {\n                        return (\n                            <Tooltip\n                                key={key}\n                                {...extraAction.tooltip}\n                                triggerElement={\n                                    <ExtraActionButtonWithRef\n                                        extraAction={extraAction}\n                                        disabled={disabled}\n                                        isFocusVisible={extraActionButtonIsFocusVisible}\n                                        focusProps={extraActionButtonFocusProps}\n                                    />\n                                }\n                            />\n                        );\n                    }\n                    return (\n                        <ExtraActionButtonWithRef\n                            key={key}\n                            extraAction={extraAction}\n                            disabled={disabled}\n                            isFocusVisible={extraActionButtonIsFocusVisible}\n                            focusProps={extraActionButtonFocusProps}\n                        />\n                    );\n                })}\n            {`${value}`.length > 0 && clearable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60  hover:tw-text-black-100',\n                        clearButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => {\n                        inputElement.current?.focus();\n                        inputElement.current?.setAttribute('value', '');\n\n                        onChange && onChange('');\n                        onClear && onClear();\n                    }}\n                    data-test-id=\"clear-icon\"\n                    title=\"Clear text input\"\n                    aria-label=\"clear text input\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...clearButtonFocusProps}\n                >\n                    <IconCross />\n                </button>\n            )}\n            {type === TextInputType.Password && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        passwordButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => setIsObfuscated(!isObfuscated)}\n                    data-test-id=\"visibility-icon\"\n                    title=\"Toggle text visibility\"\n                    type=\"button\"\n                    aria-label={`${isObfuscated ? 'unveil' : 'obfuscate'} text input`}\n                    disabled={disabled}\n                    {...passwordButtonFocusProps}\n                >\n                    {isObfuscated ? <IconEye /> : <IconEyeOff />}\n                </button>\n            )}\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n            {(validation === Validation.Error || validation === Validation.Warning) && (\n                <span\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center',\n                        validation === Validation.Error && 'tw-text-text-negative',\n                        validation === Validation.Warning && 'tw-text-text-warning',\n                    ])}\n                    data-test-id=\"error-state-exclamation-mark-icon\"\n                >\n                    <IconExclamationMarkTriangle />\n                </span>\n            )}\n            {copyable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        copyButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => copy(value)}\n                    data-test-id=\"copy-icon\"\n                    title=\"Copy input text\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...copyButtonFocusProps}\n                >\n                    {status === 'error' && (\n                        <span className=\"tw-text-box-negative-strong\">\n                            <IconCrossCircle />\n                        </span>\n                    )}\n                    {status === 'idle' && <IconClipboard />}\n                    {status === 'success' && (\n                        <span className=\"tw-text-box-positive-strong\">\n                            <IconCheckMark />\n                        </span>\n                    )}\n                </button>\n            )}\n        </div>\n    );\n};\nTextInput.displayName = 'FondueTextInput';\n"],"names":["TextInputType","ExtraActionButton","extraAction","disabled","isFocusVisible","focusProps","ref","isDisabled","React","merge","FOCUS_STYLE","ExtraActionButtonWithRef","forwardRef","TextInput","propId","type","decorator","validation","Validation","clearable","placeholder","required","obfuscated","autocomplete","dotted","value","copyable","onChange","onEnterPressed","onBlur","onClear","onFocus","size","spellcheck","readonly","focusOnMount","selectable","extraActions","useFocusRing","clearButtonIsFocusVisible","clearButtonFocusProps","passwordButtonIsFocusVisible","passwordButtonFocusProps","copyButtonIsFocusVisible","copyButtonFocusProps","extraActionButtonIsFocusVisible","extraActionButtonFocusProps","copy","status","useCopy","inputElement","useRef","isObfuscated","setIsObfuscated","useState","useEffect","_a","onKeyDown","event","getInputType","spellcheckProp","validationClassMap","useMemoizedId","index","key","Tooltip","_b","IconCross","IconEye","IconEyeOff","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle","IconCrossCircle","IconClipboard","IconCheckMark"],"mappings":"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"}
+{"version":3,"file":"TextInput.es.js","sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { useCopy } from '@hooks/useCopy';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, {\n    DOMAttributes,\n    FocusEvent,\n    ForwardRefRenderFunction,\n    KeyboardEvent,\n    ReactElement,\n    ReactNode,\n    forwardRef,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    IconCheckMark,\n    IconClipboard,\n    IconCross,\n    IconCrossCircle,\n    IconExclamationMarkTriangle,\n    IconEye,\n    IconEyeOff,\n} from '@foundation/Icon/Generated';\nimport { LegacyTooltip, LegacyTooltipProps } from '../LegacyTooltip';\nimport { FocusableElement } from '@react-types/shared';\n\nexport enum TextInputType {\n    Text = 'text',\n    Password = 'password',\n    Number = 'number',\n}\n\nexport type TextInputExtraAction = {\n    onClick: () => void;\n    icon: ReactElement;\n    title: string;\n    tooltip?: Omit<LegacyTooltipProps, 'triggerElement'>;\n    disabled?: boolean;\n};\n\nexport type TextInputBaseProps = {\n    id?: string;\n    type?: TextInputType;\n    decorator?: ReactNode;\n    dotted?: boolean;\n    clearable?: boolean;\n    placeholder?: string;\n    required?: boolean;\n    disabled?: boolean;\n    autocomplete?: boolean;\n    readonly?: boolean;\n    validation?: Validation;\n    copyable?: boolean;\n    value?: string;\n    onChange?: (value: string) => void;\n    onEnterPressed?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n    onClear?: () => void;\n    size?: number;\n    spellcheck?: boolean;\n    focusOnMount?: boolean;\n    selectable?: boolean;\n    extraActions?: TextInputExtraAction[];\n};\n\nexport type TextInputProps =\n    | ({\n          type?: TextInputType.Text;\n          obfuscated?: false;\n      } & TextInputBaseProps)\n    | ({\n          type?: TextInputType.Number;\n          obfuscated?: false;\n          min?: number;\n          max?: number;\n      } & TextInputBaseProps)\n    | ({\n          type: TextInputType.Password;\n          obfuscated?: boolean;\n      } & TextInputBaseProps);\n\ntype ExtraActionButtonProps = {\n    extraAction: TextInputExtraAction;\n    disabled: boolean;\n    isFocusVisible: boolean;\n    focusProps: DOMAttributes<FocusableElement>;\n};\n\nconst ExtraActionButton: ForwardRefRenderFunction<HTMLButtonElement | null, ExtraActionButtonProps> = (\n    { extraAction, disabled, isFocusVisible, focusProps },\n    ref,\n): ReactElement | null => {\n    if (!extraAction) {\n        return null;\n    }\n    const isDisabled = disabled || extraAction.disabled;\n    return (\n        <button\n            className={merge([\n                'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-p-1 -tw-mr-2',\n                isDisabled\n                    ? 'tw-cursor-default tw-text-text-disabled'\n                    : 'tw-text-text-weak hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            onClick={extraAction.onClick}\n            data-test-id=\"fondue-extra-action-icon\"\n            aria-label={extraAction.title.toLowerCase()}\n            disabled={isDisabled}\n            aria-disabled={isDisabled}\n            type=\"button\"\n            ref={ref}\n            {...focusProps}\n        >\n            {extraAction.icon}\n        </button>\n    );\n};\nconst ExtraActionButtonWithRef = forwardRef(ExtraActionButton);\n\nexport const TextInput = ({\n    id: propId,\n    type = TextInputType.Text,\n    decorator,\n    validation = Validation.Default,\n    clearable = false,\n    placeholder,\n    required,\n    obfuscated,\n    disabled = false,\n    autocomplete = false,\n    dotted = false,\n    value = '',\n    copyable = false,\n    onChange,\n    onEnterPressed,\n    onBlur,\n    onClear,\n    onFocus,\n    size,\n    spellcheck,\n    readonly,\n    focusOnMount,\n    selectable = false,\n    extraActions,\n}: TextInputProps): ReactElement => {\n    const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n    const { isFocusVisible: clearButtonIsFocusVisible, focusProps: clearButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: passwordButtonIsFocusVisible, focusProps: passwordButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: copyButtonIsFocusVisible, focusProps: copyButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: extraActionButtonIsFocusVisible, focusProps: extraActionButtonFocusProps } = useFocusRing();\n\n    const { copy, status } = useCopy();\n\n    const inputElement = useRef<HTMLInputElement | null>(null);\n    const [isObfuscated, setIsObfuscated] = useState(\n        typeof obfuscated === 'boolean' ? obfuscated : type === TextInputType.Password,\n    );\n\n    useEffect(() => {\n        setTimeout(() => {\n            focusOnMount && inputElement.current?.focus();\n        }, 0);\n    }, [focusOnMount]);\n\n    useEffect(() => {\n        if (typeof obfuscated === 'boolean') {\n            setIsObfuscated(obfuscated);\n        }\n    }, [obfuscated]);\n\n    const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            onEnterPressed && onEnterPressed(event);\n        }\n    };\n\n    const getInputType = () => {\n        if (type === TextInputType.Password) {\n            return isObfuscated ? TextInputType.Password : TextInputType.Text;\n        }\n        return type;\n    };\n\n    const spellcheckProp = typeof spellcheck === 'boolean' ? { spellCheck: spellcheck } : null;\n\n    return (\n        <div\n            {...focusProps}\n            className={merge([\n                'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n                dotted ? 'tw-border-dashed' : 'tw-border-solid',\n                disabled || readonly\n                    ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n                    : merge([\n                          'focus-within:tw-border-black-90 hover:tw-border-black-90',\n                          validationClassMap[validation],\n                          isFocusVisible &&\n                              !clearButtonIsFocusVisible &&\n                              !passwordButtonIsFocusVisible &&\n                              !copyButtonIsFocusVisible &&\n                              FOCUS_STYLE,\n                      ]),\n            ])}\n            data-test-id=\"fondue-text-input-component\"\n        >\n            {decorator && (\n                <div\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-pl-1',\n                        disabled ? 'tw-text-black-60' : 'tw-text-black-80',\n                    ])}\n                    data-test-id=\"decorator\"\n                >\n                    {decorator}\n                </div>\n            )}\n            <input\n                id={useMemoizedId(propId)}\n                ref={inputElement}\n                className={merge([\n                    'tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows',\n                    disabled || readonly\n                        ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                        : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                ])}\n                onClick={() => inputElement.current?.focus()}\n                onChange={(event) => onChange && onChange(event.currentTarget.value)}\n                onBlur={onBlur}\n                onKeyDown={onKeyDown}\n                placeholder={placeholder}\n                value={value}\n                type={getInputType()}\n                required={required}\n                readOnly={readonly}\n                disabled={disabled}\n                onFocus={(e) => {\n                    if (selectable) {\n                        e.target.select();\n                    }\n                    if (onFocus) {\n                        onFocus(e);\n                    }\n                }}\n                autoComplete={autocomplete ? 'on' : 'off'}\n                size={size}\n                data-test-id=\"text-input\"\n                {...spellcheckProp}\n            />\n            {extraActions &&\n                extraActions.length > 0 &&\n                extraActions.map((extraAction: TextInputExtraAction, index: number) => {\n                    const key = `text-input-extra-action-${index}`;\n                    if (extraAction.tooltip) {\n                        return (\n                            <LegacyTooltip\n                                key={key}\n                                {...extraAction.tooltip}\n                                triggerElement={\n                                    <ExtraActionButtonWithRef\n                                        extraAction={extraAction}\n                                        disabled={disabled}\n                                        isFocusVisible={extraActionButtonIsFocusVisible}\n                                        focusProps={extraActionButtonFocusProps}\n                                    />\n                                }\n                            />\n                        );\n                    }\n                    return (\n                        <ExtraActionButtonWithRef\n                            key={key}\n                            extraAction={extraAction}\n                            disabled={disabled}\n                            isFocusVisible={extraActionButtonIsFocusVisible}\n                            focusProps={extraActionButtonFocusProps}\n                        />\n                    );\n                })}\n            {`${value}`.length > 0 && clearable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60  hover:tw-text-black-100',\n                        clearButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => {\n                        inputElement.current?.focus();\n                        inputElement.current?.setAttribute('value', '');\n\n                        onChange && onChange('');\n                        onClear && onClear();\n                    }}\n                    data-test-id=\"clear-icon\"\n                    title=\"Clear text input\"\n                    aria-label=\"clear text input\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...clearButtonFocusProps}\n                >\n                    <IconCross />\n                </button>\n            )}\n            {type === TextInputType.Password && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        passwordButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => setIsObfuscated(!isObfuscated)}\n                    data-test-id=\"visibility-icon\"\n                    title=\"Toggle text visibility\"\n                    type=\"button\"\n                    aria-label={`${isObfuscated ? 'unveil' : 'obfuscate'} text input`}\n                    disabled={disabled}\n                    {...passwordButtonFocusProps}\n                >\n                    {isObfuscated ? <IconEye /> : <IconEyeOff />}\n                </button>\n            )}\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n            {(validation === Validation.Error || validation === Validation.Warning) && (\n                <span\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center',\n                        validation === Validation.Error && 'tw-text-text-negative',\n                        validation === Validation.Warning && 'tw-text-text-warning',\n                    ])}\n                    data-test-id=\"error-state-exclamation-mark-icon\"\n                >\n                    <IconExclamationMarkTriangle />\n                </span>\n            )}\n            {copyable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        copyButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => copy(value)}\n                    data-test-id=\"copy-icon\"\n                    title=\"Copy input text\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...copyButtonFocusProps}\n                >\n                    {status === 'error' && (\n                        <span className=\"tw-text-box-negative-strong\">\n                            <IconCrossCircle />\n                        </span>\n                    )}\n                    {status === 'idle' && <IconClipboard />}\n                    {status === 'success' && (\n                        <span className=\"tw-text-box-positive-strong\">\n                            <IconCheckMark />\n                        </span>\n                    )}\n                </button>\n            )}\n        </div>\n    );\n};\nTextInput.displayName = 'FondueTextInput';\n"],"names":["TextInputType","ExtraActionButton","extraAction","disabled","isFocusVisible","focusProps","ref","isDisabled","React","merge","FOCUS_STYLE","ExtraActionButtonWithRef","forwardRef","TextInput","propId","type","decorator","validation","Validation","clearable","placeholder","required","obfuscated","autocomplete","dotted","value","copyable","onChange","onEnterPressed","onBlur","onClear","onFocus","size","spellcheck","readonly","focusOnMount","selectable","extraActions","useFocusRing","clearButtonIsFocusVisible","clearButtonFocusProps","passwordButtonIsFocusVisible","passwordButtonFocusProps","copyButtonIsFocusVisible","copyButtonFocusProps","extraActionButtonIsFocusVisible","extraActionButtonFocusProps","copy","status","useCopy","inputElement","useRef","isObfuscated","setIsObfuscated","useState","useEffect","_a","onKeyDown","event","getInputType","spellcheckProp","validationClassMap","useMemoizedId","index","key","LegacyTooltip","_b","IconCross","IconEye","IconEyeOff","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle","IconCrossCircle","IconClipboard","IconCheckMark"],"mappings":"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"}

package/dist/components/TooltipIcon/TooltipIcon.d.ts

@@ -1,9 +1,9 @@
 import { ReactElement } from 'react';
 import { IconSize } from '../../foundation/Icon/IconSize';
-import { TooltipProps } from '../Tooltip/Tooltip';
+import { LegacyTooltipProps } from '../LegacyTooltip/LegacyTooltip';
 import { IconProps } from '../../foundation/Icon/IconProps';
 export type TooltipIconProps = {
-    tooltip?: TooltipProps;
+    tooltip?: LegacyTooltipProps;
     iconSize?: IconSize;
     triggerIcon?: ReactElement<IconProps>;
     triggerStyle?: TooltipIconTriggerStyle;

package/dist/components/TooltipIcon/TooltipIcon.es.js

@@ -1,6 +1,6 @@
 import t, { cloneElement as a } from "react";
 import { IconSize as l } from "../../foundation/Icon/IconSize.es.js";
-import { Tooltip as m } from "../Tooltip/Tooltip.es.js";
+import { LegacyTooltip as m } from "../LegacyTooltip/LegacyTooltip.es.js";
 import { FOCUS_VISIBLE_STYLE as s } from "../../utilities/focusStyle.es.js";
 import { merge as w } from "../../utilities/merge.es.js";
 import c from "../../foundation/Icon/Generated/IconQuestionMarkCircle.es.js";
@@ -9,11 +9,11 @@ const v = {
   Danger: "tw-text-box-negative-inverse",
   Warning: "tw-text-box-warning-inverse",
   Primary: "tw-text-text-weak"
-}, x = {
+}, g = {
   Danger: "hover:tw-text-box-negative-inverse-hover hover:tw-bg-box-neutral",
   Warning: "hover:tw-text-box-warning-inverse-hover hover:tw-bg-box-neutral",
   Primary: "hover:tw-text-text hover:tw-bg-box-neutral"
-}, g = ({
+}, x = ({
   tooltip: e,
   iconSize: o = l.Size16,
   triggerIcon: i = /* @__PURE__ */ t.createElement(c, null),
@@ -32,7 +32,7 @@ const v = {
           "tw-inline-flex tw-justify-center tw-items-center tw-cursor-default tw-outline-none tw-rounded-full",
           s,
           v[r],
-          x[r]
+          g[r]
         ])
       },
       a(i, { size: o })
@@ -41,9 +41,9 @@ const v = {
     ...e
   }
 )));
-g.displayName = "FondueTooltipIcon";
+x.displayName = "FondueTooltipIcon";
 export {
-  g as TooltipIcon,
+  x as TooltipIcon,
   u as TooltipIconTriggerStyle
 };
 //# sourceMappingURL=TooltipIcon.es.js.map