@frontify/fondue 13.0.0-rc.14 → 13.0.0-rc.16

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

@@ -1,54 +1,48 @@
 import { jsxs as S, jsx as e } from "react/jsx-runtime";
+import { IconCross as et, IconEye as ot, IconEyeOff as rt, IconExclamationMarkTriangle as st, IconCrossCircle as it, IconClipboard as nt, IconCheckMark as ct } from "@frontify/fondue-icons";
 import { useFocusRing as f } from "@react-aria/focus";
-import { forwardRef as z, useRef as et, useImperativeHandle as ot, useState as rt, useEffect as O } from "react";
-import { LoadingCircle as st, LoadingCircleSize as it } from "../LoadingCircle/LoadingCircle.es.js";
-import nt from "../../foundation/Icon/Generated/IconCheckMark.es.js";
-import ct from "../../foundation/Icon/Generated/IconClipboard.es.js";
-import lt from "../../foundation/Icon/Generated/IconCross.es.js";
-import at from "../../foundation/Icon/Generated/IconCrossCircle.es.js";
-import wt from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
-import ut from "../../foundation/Icon/Generated/IconEye.es.js";
-import pt from "../../foundation/Icon/Generated/IconEyeOff.es.js";
-import { useCopy as dt } from "../../hooks/useCopy.es.js";
+import { forwardRef as z, useRef as lt, useImperativeHandle as at, useState as wt, useEffect as O } from "react";
+import { LoadingCircle as ut, LoadingCircleSize as dt } from "../LoadingCircle/LoadingCircle.es.js";
+import { useCopy as pt } from "../../hooks/useCopy.es.js";
 import { useMemoizedId as ft } from "../../hooks/useMemoizedId.es.js";
-import { FOCUS_STYLE as m } from "../../utilities/focusStyle.es.js";
+import { FOCUS_STYLE as b } from "../../utilities/focusStyle.es.js";
 import { merge as s } from "../../utilities/merge.es.js";
-import { Validation as u, validationClassMap as mt } from "../../utilities/validation.es.js";
-import { LegacyTooltip as bt } from "../LegacyTooltip/LegacyTooltip.es.js";
-const xt = ({ extraAction: n, disabled: a }, b) => {
+import { Validation as u, validationClassMap as bt } from "../../utilities/validation.es.js";
+import { LegacyTooltip as xt } from "../LegacyTooltip/LegacyTooltip.es.js";
+const mt = ({ extraAction: n, disabled: a }, x) => {
   const { isFocusVisible: i, focusProps: k } = f();
   if (!n)
     return null;
-  const p = a || n.disabled;
+  const d = a || n.disabled;
   return /* @__PURE__ */ e(
     "button",
     {
       className: s([
         "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-p-1",
-        p ? "tw-cursor-default tw-text-text-disabled" : "tw-text-text-weak hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover",
-        i && m
+        d ? "tw-cursor-default tw-text-text-disabled" : "tw-text-text-weak hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover",
+        i && b
       ]),
       onClick: n.onClick,
       "data-test-id": "fondue-extra-action-icon",
       "aria-label": n.title.toLowerCase(),
-      disabled: p,
-      "aria-disabled": p,
+      disabled: d,
+      "aria-disabled": d,
       type: "button",
-      ref: b,
+      ref: x,
       ...k,
       children: n.icon
     }
   );
-}, R = z(xt), kt = z(
+}, R = z(mt), kt = z(
   ({
     id: n,
     type: a = "text",
-    decorator: b,
+    decorator: x,
     validation: i = u.Default,
     clearable: k = !1,
-    placeholder: p,
+    placeholder: d,
     required: D,
-    obfuscated: d,
+    obfuscated: p,
     disabled: o = !1,
     autocomplete: M = !1,
     dotted: W = !1,
@@ -68,12 +62,12 @@ const xt = ({ extraAction: n, disabled: a }, b) => {
     maxLength: U,
     ...Y
   }, _) => {
-    const c = et(null);
-    ot(_, () => c.current, []);
+    const c = lt(null);
+    at(_, () => c.current, []);
     const { isFocusVisible: q, focusProps: l } = f({
       isTextInput: !0
-    }), { isFocusVisible: C, focusProps: G } = f(), { isFocusVisible: j, focusProps: J } = f(), { isFocusVisible: B, focusProps: Q } = f(), { copy: X, status: F } = dt(), [x, L] = rt(
-      typeof d == "boolean" ? d : a === "password"
+    }), { isFocusVisible: C, focusProps: G } = f(), { isFocusVisible: j, focusProps: J } = f(), { isFocusVisible: B, focusProps: Q } = f(), { copy: X, status: F } = pt(), [m, L] = wt(
+      typeof p == "boolean" ? p : a === "password"
       /* Password */
     );
     O(() => {
@@ -84,11 +78,11 @@ const xt = ({ extraAction: n, disabled: a }, b) => {
         clearTimeout(t);
       };
     }, [V]), O(() => {
-      typeof d == "boolean" && L(d);
-    }, [d]);
+      typeof p == "boolean" && L(p);
+    }, [p]);
     const Z = (t) => {
       t.key === "Enter" && E && E(t);
-    }, A = () => a === "password" ? x ? "password" : "text" : a, tt = typeof T == "boolean" ? { spellCheck: T } : null;
+    }, A = () => a === "password" ? m ? "password" : "text" : a, tt = typeof T == "boolean" ? { spellCheck: T } : null;
     return /* @__PURE__ */ S(
       "div",
       {
@@ -98,13 +92,13 @@ const xt = ({ extraAction: n, disabled: a }, b) => {
           W ? "tw-border-dashed" : "tw-border-solid",
           o || I ? "tw-bg-box-disabled dark:tw-bg-box-disabled hover:tw-cursor-not-allowed tw-border-line-weak dark:tw-border-line-weak" : s([
             "focus-within:tw-border-line-xx-strong focus-within:hover:tw-border-line-xx-strong hover:tw-border-line-x-strong",
-            mt[i],
-            q && !C && !j && !B && m
+            bt[i],
+            q && !C && !j && !B && b
           ])
         ]),
         "data-test-id": "fondue-text-input-component",
         children: [
-          b ? /* @__PURE__ */ e(
+          x ? /* @__PURE__ */ e(
             "div",
             {
               className: s([
@@ -112,7 +106,7 @@ const xt = ({ extraAction: n, disabled: a }, b) => {
                 o ? "tw-text-black-60" : "tw-text-black-80"
               ]),
               "data-test-id": "decorator",
-              children: b
+              children: x
             }
           ) : null,
           /* @__PURE__ */ e(
@@ -135,7 +129,7 @@ const xt = ({ extraAction: n, disabled: a }, b) => {
                 (r = l.onBlur) == null || r.call(l, t), g == null || g(t);
               },
               onKeyDown: Z,
-              placeholder: p,
+              placeholder: d,
               value: h,
               type: A(),
               required: D,
@@ -155,7 +149,7 @@ const xt = ({ extraAction: n, disabled: a }, b) => {
           v && v.length > 0 && v.map((t, r) => {
             const P = `text-input-extra-action-${r}`;
             return t.tooltip ? /* @__PURE__ */ e(
-              bt,
+              xt,
               {
                 ...t.tooltip,
                 triggerElement: /* @__PURE__ */ e(R, { extraAction: t, disabled: o })
@@ -169,7 +163,7 @@ const xt = ({ extraAction: n, disabled: a }, b) => {
               className: s([
                 "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
                 o ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60  hover:tw-text-black-100",
-                C && m
+                C && b
               ]),
               onClick: () => {
                 var t, r;
@@ -181,7 +175,7 @@ const xt = ({ extraAction: n, disabled: a }, b) => {
               disabled: o,
               type: "button",
               ...G,
-              children: /* @__PURE__ */ e(lt, {})
+              children: /* @__PURE__ */ e(et, {})
             }
           ),
           a === "password" && /* @__PURE__ */ e(
@@ -190,19 +184,19 @@ const xt = ({ extraAction: n, disabled: a }, b) => {
               className: s([
                 "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
                 o ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
-                j && m
+                j && b
               ]),
-              onClick: () => L(!x),
+              onClick: () => L(!m),
               "data-test-id": "visibility-icon",
               title: "Toggle text visibility",
               type: "button",
-              "aria-label": `${x ? "unveil" : "obfuscate"} text input`,
+              "aria-label": `${m ? "unveil" : "obfuscate"} text input`,
               disabled: o,
               ...J,
-              children: x ? /* @__PURE__ */ e(ut, {}) : /* @__PURE__ */ e(pt, {})
+              children: m ? /* @__PURE__ */ e(ot, {}) : /* @__PURE__ */ e(rt, {})
             }
           ),
-          i === u.Loading && /* @__PURE__ */ e("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", children: /* @__PURE__ */ e(st, { size: it.ExtraSmall }) }),
+          i === u.Loading && /* @__PURE__ */ e("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", children: /* @__PURE__ */ e(ut, { size: dt.ExtraSmall }) }),
           (i === u.Error || i === u.Warning) && /* @__PURE__ */ e(
             "span",
             {
@@ -212,7 +206,7 @@ const xt = ({ extraAction: n, disabled: a }, b) => {
                 i === u.Warning && "tw-text-text-warning"
               ]),
               "data-test-id": "error-state-exclamation-mark-icon",
-              children: /* @__PURE__ */ e(wt, {})
+              children: /* @__PURE__ */ e(st, {})
             }
           ),
           $ && /* @__PURE__ */ S(
@@ -221,7 +215,7 @@ const xt = ({ extraAction: n, disabled: a }, b) => {
               className: s([
                 "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
                 o ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
-                B && m
+                B && b
               ]),
               onClick: () => X(h),
               "data-test-id": "copy-icon",
@@ -230,9 +224,9 @@ const xt = ({ extraAction: n, disabled: a }, b) => {
               type: "button",
               ...Q,
               children: [
-                F === "error" && /* @__PURE__ */ e("span", { className: "tw-text-box-negative-strong", children: /* @__PURE__ */ e(at, {}) }),
-                F === "idle" && /* @__PURE__ */ e(ct, {}),
-                F === "success" && /* @__PURE__ */ e("span", { className: "tw-text-box-positive-strong", children: /* @__PURE__ */ e(nt, {}) })
+                F === "error" && /* @__PURE__ */ e("span", { className: "tw-text-box-negative-strong", children: /* @__PURE__ */ e(it, {}) }),
+                F === "idle" && /* @__PURE__ */ e(nt, {}),
+                F === "success" && /* @__PURE__ */ e("span", { className: "tw-text-box-positive-strong", children: /* @__PURE__ */ e(ct, {}) })
               ]
             }
           )

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 { useFocusRing } from '@react-aria/focus';\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n    type AriaAttributes,\n    type FocusEvent,\n    type ForwardRefRenderFunction,\n    type KeyboardEvent,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle/LoadingCircle';\nimport IconCheckMark from '@foundation/Icon/Generated/IconCheckMark';\nimport IconClipboard from '@foundation/Icon/Generated/IconClipboard';\nimport IconCross from '@foundation/Icon/Generated/IconCross';\nimport IconCrossCircle from '@foundation/Icon/Generated/IconCrossCircle';\nimport IconExclamationMarkTriangle from '@foundation/Icon/Generated/IconExclamationMarkTriangle';\nimport IconEye from '@foundation/Icon/Generated/IconEye';\nimport IconEyeOff from '@foundation/Icon/Generated/IconEyeOff';\nimport { useCopy } from '@hooks/useCopy';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\n\nimport { LegacyTooltip, type LegacyTooltipProps } from '../LegacyTooltip/LegacyTooltip';\n\n/**\n * @deprecated Use `TextInput` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md} the migration guide}.\n */\nexport enum TextInputType {\n    Text = 'text',\n    Password = 'password',\n    Number = 'number',\n    Search = 'search',\n}\n\n/**\n * @deprecated Use `TextInput` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md} the migration guide}.\n */\nexport type TextInputExtraAction = {\n    onClick: () => void;\n    icon: ReactElement;\n    title: string;\n    tooltip?: Omit<LegacyTooltipProps, 'triggerElement'>;\n    disabled?: boolean;\n};\n\n/**\n * @deprecated Use `TextInput` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md} the migration guide}.\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    maxLength?: number;\n    size?: number;\n    spellcheck?: boolean;\n    /** @deprecated a `ref` can be forwarded to expose the underlying `<input />` DOM node.\n        @example\n        ```tsx\n            import { TextInput } from '@frontify/fondue';\n\n            const Component = () => {\n            const inputRef = useRef();\n\n            useEffect(() => {\n                if (inputRef.current) {\n                    inputRef.current.focus();\n                }\n            }, [)\n            return <TextInput ref={inputRef} />\n         }\n         ```\n    */\n    focusOnMount?: boolean;\n    selectable?: boolean;\n    extraActions?: TextInputExtraAction[];\n    ariaLabel?: string;\n} & AriaAttributes;\n\ntype TextInputTextProps = TextInputBaseProps & {\n    type?: TextInputType.Text;\n    obfuscated?: false;\n};\ntype TextInputSearchProps = TextInputBaseProps & {\n    type: TextInputType.Search;\n    obfuscated?: false;\n};\ntype TextInputNumberProps = TextInputBaseProps & {\n    type: TextInputType.Number;\n    min?: number;\n    max?: number;\n    obfuscated?: false;\n};\ntype TextInputPasswordProps = TextInputBaseProps & {\n    type: TextInputType.Password;\n    obfuscated?: boolean;\n};\n\n/**\n * @deprecated Use `TextInput` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md} the migration guide}.\n */\nexport type TextInputProps = TextInputTextProps | TextInputNumberProps | TextInputPasswordProps | TextInputSearchProps;\n\ntype ExtraActionButtonProps = {\n    extraAction: TextInputExtraAction;\n    disabled: boolean;\n};\n\nconst ExtraActionButton: ForwardRefRenderFunction<HTMLButtonElement | null, ExtraActionButtonProps> = (\n    { extraAction, disabled },\n    ref,\n): ReactElement | null => {\n    const { isFocusVisible: extraActionButtonIsFocusVisible, focusProps: extraActionButtonFocusProps } = useFocusRing();\n\n    if (!extraAction) {\n        return null;\n    }\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',\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                extraActionButtonIsFocusVisible && 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            {...extraActionButtonFocusProps}\n        >\n            {extraAction.icon}\n        </button>\n    );\n};\nconst ExtraActionButtonWithRef = forwardRef(ExtraActionButton);\n\n/**\n * @deprecated Use `TextInput` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#text-input the migration guide}.\n */\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n    (\n        {\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            maxLength,\n            ...props\n        },\n        ref,\n    ): ReactElement => {\n        const inputElement = useRef<HTMLInputElement | null>(null);\n        useImperativeHandle(ref, () => inputElement.current!, []);\n\n        const { isFocusVisible: inputIsFocusVisible, focusProps: inputFocusProps } = useFocusRing({\n            isTextInput: true,\n        });\n        const { isFocusVisible: clearButtonIsFocusVisible, focusProps: clearButtonFocusProps } = useFocusRing();\n        const { isFocusVisible: passwordButtonIsFocusVisible, focusProps: passwordButtonFocusProps } = useFocusRing();\n        const { isFocusVisible: copyButtonIsFocusVisible, focusProps: copyButtonFocusProps } = useFocusRing();\n\n        const { copy, status } = useCopy();\n\n        const [isObfuscated, setIsObfuscated] = useState(\n            typeof obfuscated === 'boolean' ? obfuscated : type === TextInputType.Password,\n        );\n\n        useEffect(() => {\n            const timeoutId = setTimeout(() => {\n                if (focusOnMount && inputElement.current) {\n                    inputElement.current.focus();\n                }\n            }, 0);\n            return () => {\n                clearTimeout(timeoutId);\n            };\n        }, [focusOnMount]);\n\n        useEffect(() => {\n            if (typeof obfuscated === 'boolean') {\n                // eslint-disable-next-line react-hooks/set-state-in-effect\n                setIsObfuscated(obfuscated);\n            }\n        }, [obfuscated]);\n\n        const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter' && onEnterPressed) {\n                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                {...props}\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-body-small tw-font-sans tw-relative tw-bg-base dark:tw-bg-transparent',\n                    dotted ? 'tw-border-dashed' : 'tw-border-solid',\n                    disabled || readonly\n                        ? 'tw-bg-box-disabled dark:tw-bg-box-disabled hover:tw-cursor-not-allowed tw-border-line-weak dark:tw-border-line-weak'\n                        : merge([\n                              'focus-within:tw-border-line-xx-strong focus-within:hover:tw-border-line-xx-strong hover:tw-border-line-x-strong',\n                              validationClassMap[validation],\n                              inputIsFocusVisible &&\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                ) : null}\n                <input\n                    {...inputFocusProps}\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-text-disabled tw-placeholder-text-disabled dark:tw-text-black-30 dark:tw-placeholder-black-40 hover:tw-cursor-not-allowed'\n                            : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                    ])}\n                    onClick={() => inputElement.current?.focus()}\n                    onChange={(event) => onChange?.(event.currentTarget.value)}\n                    onBlur={(e) => {\n                        inputFocusProps.onBlur?.(e);\n                        onBlur?.(e);\n                    }}\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                        inputFocusProps.onFocus?.(e);\n                        if (selectable) {\n                            e.target.select();\n                        }\n                        if (onFocus) {\n                            onFocus(e);\n                        }\n                    }}\n                    autoComplete={autocomplete ? 'on' : 'off'}\n                    maxLength={maxLength}\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 extraAction={extraAction} disabled={disabled} />\n                                    }\n                                />\n                            );\n                        }\n                        return <ExtraActionButtonWithRef key={key} extraAction={extraAction} disabled={disabled} />;\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\n                                ? 'tw-cursor-default tw-text-black-40'\n                                : '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?.('');\n                            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\n                                ? 'tw-cursor-default tw-text-black-40'\n                                : '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\n                                ? 'tw-cursor-default tw-text-black-40'\n                                : '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    },\n);\nTextInput.displayName = 'FondueTextInput';\n"],"names":["ExtraActionButton","extraAction","disabled","ref","extraActionButtonIsFocusVisible","extraActionButtonFocusProps","useFocusRing","isDisabled","jsx","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","maxLength","props","inputElement","useRef","useImperativeHandle","inputIsFocusVisible","inputFocusProps","clearButtonIsFocusVisible","clearButtonFocusProps","passwordButtonIsFocusVisible","passwordButtonFocusProps","copyButtonIsFocusVisible","copyButtonFocusProps","copy","status","useCopy","isObfuscated","setIsObfuscated","useState","useEffect","timeoutId","onKeyDown","event","getInputType","spellcheckProp","jsxs","validationClassMap","useMemoizedId","_a","e","index","key","LegacyTooltip","_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 {\n    IconCheckMark,\n    IconClipboard,\n    IconCross,\n    IconCrossCircle,\n    IconExclamationMarkTriangle,\n    IconEye,\n    IconEyeOff,\n} from '@frontify/fondue-icons';\nimport { useFocusRing } from '@react-aria/focus';\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n    type AriaAttributes,\n    type FocusEvent,\n    type ForwardRefRenderFunction,\n    type KeyboardEvent,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle/LoadingCircle';\nimport { useCopy } from '@hooks/useCopy';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\n\nimport { LegacyTooltip, type LegacyTooltipProps } from '../LegacyTooltip/LegacyTooltip';\n\n/**\n * @deprecated Use `TextInput` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md} the migration guide}.\n */\nexport enum TextInputType {\n    Text = 'text',\n    Password = 'password',\n    Number = 'number',\n    Search = 'search',\n}\n\n/**\n * @deprecated Use `TextInput` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md} the migration guide}.\n */\nexport type TextInputExtraAction = {\n    onClick: () => void;\n    icon: ReactElement;\n    title: string;\n    tooltip?: Omit<LegacyTooltipProps, 'triggerElement'>;\n    disabled?: boolean;\n};\n\n/**\n * @deprecated Use `TextInput` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md} the migration guide}.\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    maxLength?: number;\n    size?: number;\n    spellcheck?: boolean;\n    /** @deprecated a `ref` can be forwarded to expose the underlying `<input />` DOM node.\n        @example\n        ```tsx\n            import { TextInput } from '@frontify/fondue';\n\n            const Component = () => {\n            const inputRef = useRef();\n\n            useEffect(() => {\n                if (inputRef.current) {\n                    inputRef.current.focus();\n                }\n            }, [)\n            return <TextInput ref={inputRef} />\n         }\n         ```\n    */\n    focusOnMount?: boolean;\n    selectable?: boolean;\n    extraActions?: TextInputExtraAction[];\n    ariaLabel?: string;\n} & AriaAttributes;\n\ntype TextInputTextProps = TextInputBaseProps & {\n    type?: TextInputType.Text;\n    obfuscated?: false;\n};\ntype TextInputSearchProps = TextInputBaseProps & {\n    type: TextInputType.Search;\n    obfuscated?: false;\n};\ntype TextInputNumberProps = TextInputBaseProps & {\n    type: TextInputType.Number;\n    min?: number;\n    max?: number;\n    obfuscated?: false;\n};\ntype TextInputPasswordProps = TextInputBaseProps & {\n    type: TextInputType.Password;\n    obfuscated?: boolean;\n};\n\n/**\n * @deprecated Use `TextInput` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md} the migration guide}.\n */\nexport type TextInputProps = TextInputTextProps | TextInputNumberProps | TextInputPasswordProps | TextInputSearchProps;\n\ntype ExtraActionButtonProps = {\n    extraAction: TextInputExtraAction;\n    disabled: boolean;\n};\n\nconst ExtraActionButton: ForwardRefRenderFunction<HTMLButtonElement | null, ExtraActionButtonProps> = (\n    { extraAction, disabled },\n    ref,\n): ReactElement | null => {\n    const { isFocusVisible: extraActionButtonIsFocusVisible, focusProps: extraActionButtonFocusProps } = useFocusRing();\n\n    if (!extraAction) {\n        return null;\n    }\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',\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                extraActionButtonIsFocusVisible && 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            {...extraActionButtonFocusProps}\n        >\n            {extraAction.icon}\n        </button>\n    );\n};\nconst ExtraActionButtonWithRef = forwardRef(ExtraActionButton);\n\n/**\n * @deprecated Use `TextInput` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#text-input the migration guide}.\n */\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n    (\n        {\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            maxLength,\n            ...props\n        },\n        ref,\n    ): ReactElement => {\n        const inputElement = useRef<HTMLInputElement | null>(null);\n        useImperativeHandle(ref, () => inputElement.current!, []);\n\n        const { isFocusVisible: inputIsFocusVisible, focusProps: inputFocusProps } = useFocusRing({\n            isTextInput: true,\n        });\n        const { isFocusVisible: clearButtonIsFocusVisible, focusProps: clearButtonFocusProps } = useFocusRing();\n        const { isFocusVisible: passwordButtonIsFocusVisible, focusProps: passwordButtonFocusProps } = useFocusRing();\n        const { isFocusVisible: copyButtonIsFocusVisible, focusProps: copyButtonFocusProps } = useFocusRing();\n\n        const { copy, status } = useCopy();\n\n        const [isObfuscated, setIsObfuscated] = useState(\n            typeof obfuscated === 'boolean' ? obfuscated : type === TextInputType.Password,\n        );\n\n        useEffect(() => {\n            const timeoutId = setTimeout(() => {\n                if (focusOnMount && inputElement.current) {\n                    inputElement.current.focus();\n                }\n            }, 0);\n            return () => {\n                clearTimeout(timeoutId);\n            };\n        }, [focusOnMount]);\n\n        useEffect(() => {\n            if (typeof obfuscated === 'boolean') {\n                // eslint-disable-next-line react-hooks/set-state-in-effect\n                setIsObfuscated(obfuscated);\n            }\n        }, [obfuscated]);\n\n        const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter' && onEnterPressed) {\n                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                {...props}\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-body-small tw-font-sans tw-relative tw-bg-base dark:tw-bg-transparent',\n                    dotted ? 'tw-border-dashed' : 'tw-border-solid',\n                    disabled || readonly\n                        ? 'tw-bg-box-disabled dark:tw-bg-box-disabled hover:tw-cursor-not-allowed tw-border-line-weak dark:tw-border-line-weak'\n                        : merge([\n                              'focus-within:tw-border-line-xx-strong focus-within:hover:tw-border-line-xx-strong hover:tw-border-line-x-strong',\n                              validationClassMap[validation],\n                              inputIsFocusVisible &&\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                ) : null}\n                <input\n                    {...inputFocusProps}\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-text-disabled tw-placeholder-text-disabled dark:tw-text-black-30 dark:tw-placeholder-black-40 hover:tw-cursor-not-allowed'\n                            : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                    ])}\n                    onClick={() => inputElement.current?.focus()}\n                    onChange={(event) => onChange?.(event.currentTarget.value)}\n                    onBlur={(e) => {\n                        inputFocusProps.onBlur?.(e);\n                        onBlur?.(e);\n                    }}\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                        inputFocusProps.onFocus?.(e);\n                        if (selectable) {\n                            e.target.select();\n                        }\n                        if (onFocus) {\n                            onFocus(e);\n                        }\n                    }}\n                    autoComplete={autocomplete ? 'on' : 'off'}\n                    maxLength={maxLength}\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 extraAction={extraAction} disabled={disabled} />\n                                    }\n                                />\n                            );\n                        }\n                        return <ExtraActionButtonWithRef key={key} extraAction={extraAction} disabled={disabled} />;\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\n                                ? 'tw-cursor-default tw-text-black-40'\n                                : '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?.('');\n                            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\n                                ? 'tw-cursor-default tw-text-black-40'\n                                : '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\n                                ? 'tw-cursor-default tw-text-black-40'\n                                : '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    },\n);\nTextInput.displayName = 'FondueTextInput';\n"],"names":["ExtraActionButton","extraAction","disabled","ref","extraActionButtonIsFocusVisible","extraActionButtonFocusProps","useFocusRing","isDisabled","jsx","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","maxLength","props","inputElement","useRef","useImperativeHandle","inputIsFocusVisible","inputFocusProps","clearButtonIsFocusVisible","clearButtonFocusProps","passwordButtonIsFocusVisible","passwordButtonFocusProps","copyButtonIsFocusVisible","copyButtonFocusProps","copy","status","useCopy","isObfuscated","setIsObfuscated","useState","useEffect","timeoutId","onKeyDown","event","getInputType","spellcheckProp","jsxs","validationClassMap","useMemoizedId","_a","e","index","key","LegacyTooltip","_b","IconCross","IconEye","IconEyeOff","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle","IconCrossCircle","IconClipboard","IconCheckMark"],"mappings":"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"}

package/dist/components/Toast/Toast.es.js

@@ -2,8 +2,8 @@ import { jsx as e, jsxs as w } from "react/jsx-runtime";
 import { MIGHTY_INSET_BORDER as p, INSET_BORDER as T } from "../../utilities/borderStyle.es.js";
 import { merge as o } from "../../utilities/merge.es.js";
 import { toastStylesBackgroundColorsMap as S, ToastAnimationDirection as r } from "./types.es.js";
-import { motion as y } from "../../node_modules/.pnpm/framer-motion@12.23.27_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
-import { AnimatePresence as A } from "../../node_modules/.pnpm/framer-motion@12.23.27_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.es.js";
+import { motion as y } from "../../node_modules/.pnpm/framer-motion@12.28.1_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
+import { AnimatePresence as A } from "../../node_modules/.pnpm/framer-motion@12.28.1_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.es.js";
 const f = "tw-min-h-[2rem] tw-rounded-lg tw-shadow-mid tw-z-[120000] before:!tw-rounded-lg", g = o([T, "tw-bg-base"]), h = o([p, "tw-bg-box-neutral-mighty"]), a = (t) => t === r.BottomToTop ? "150%" : "-150%", N = (t) => o([f, t === "dark" ? h : g]), u = ({
   isOpen: t,
   style: s,

package/dist/components/Tree/TreeItem/DragHandle.es.js

@@ -1,10 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import m from "../../../foundation/Icon/Generated/IconGrabHandle12.es.js";
+import { IconGrabHandle as d } from "@frontify/fondue-icons";
+import { forwardRef as m } from "react";
 import { FOCUS_VISIBLE_STYLE as s } from "../../../utilities/focusStyle.es.js";
 import { merge as p } from "../../../utilities/merge.es.js";
 import { TreeItemColorsClassMap as w } from "../types.es.js";
-const c = d(
+const c = m(
   ({ active: r, showDragHandlerOnHoverOnly: o, activeColorStyle: a, ...t }, i) => {
     const { selectedDragHanlderTextColor: n, dragHanlderTextColor: l } = w[a ?? "neutral"];
     return /* @__PURE__ */ e(
@@ -22,7 +22,7 @@ const c = d(
           r ? n : l
         ]),
         "data-test-id": "fondue-tree-item-drag-handle",
-        children: /* @__PURE__ */ e(m, {})
+        children: /* @__PURE__ */ e(d, { size: 12 })
       }
     );
   }

package/dist/components/Tree/TreeItem/DragHandle.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragHandle.es.js","sources":["../../../../src/components/Tree/TreeItem/DragHandle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ButtonHTMLAttributes, type DetailedHTMLProps, forwardRef } from 'react';\n\nimport IconGrabHandle12 from '@foundation/Icon/Generated/IconGrabHandle12';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type TreeItemColors, TreeItemColorsClassMap } from '../types';\n\nexport type DragHandleProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {\n    active?: boolean;\n    showDragHandlerOnHoverOnly?: boolean;\n    activeColorStyle?: TreeItemColors;\n};\n\nexport const DragHandle = forwardRef<HTMLButtonElement, DragHandleProps>(\n    ({ active, showDragHandlerOnHoverOnly, activeColorStyle, ...props }, ref) => {\n        const { selectedDragHanlderTextColor, dragHanlderTextColor } =\n            TreeItemColorsClassMap[activeColorStyle ?? 'neutral'];\n\n        return (\n            <button\n                type=\"button\"\n                aria-label=\"Draggable item\"\n                {...props}\n                ref={ref}\n                className={merge([\n                    FOCUS_VISIBLE_STYLE,\n                    'tw-p-1 first:tw-ml-2 tw-rounded-sm hover:tw-cursor-grab group-hover:tw-opacity-100 group-focus-within:tw-opacity-100',\n                    props.disabled ? 'tw-invisible tw-pointer-events-none' : 'tw-visible',\n                    showDragHandlerOnHoverOnly ? !active && 'tw-opacity-0' : 'tw-opacity-100',\n                    active ? selectedDragHanlderTextColor : dragHanlderTextColor,\n                ])}\n                data-test-id=\"fondue-tree-item-drag-handle\"\n            >\n                <IconGrabHandle12 />\n            </button>\n        );\n    },\n);\n\nDragHandle.displayName = 'FondueDragHandle';\n"],"names":["DragHandle","forwardRef","active","showDragHandlerOnHoverOnly","activeColorStyle","props","ref","selectedDragHanlderTextColor","dragHanlderTextColor","TreeItemColorsClassMap","jsx","merge","FOCUS_VISIBLE_STYLE","IconGrabHandle12"],"mappings":";;;;;;AAgBO,MAAMA,IAAaC;AAAA,EACtB,CAAC,EAAE,QAAAC,GAAQ,4BAAAC,GAA4B,kBAAAC,GAAkB,GAAGC,EAAA,GAASC,MAAQ;AACzE,UAAM,EAAE,8BAAAC,GAA8B,sBAAAC,EAAA,IAClCC,EAAuBL,KAAoB,SAAS;AAExD,WACI,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,cAAW;AAAA,QACV,GAAGL;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWK,EAAM;AAAA,UACbC;AAAA,UACA;AAAA,UACAP,EAAM,WAAW,wCAAwC;AAAA,UACzDF,IAA6B,CAACD,KAAU,iBAAiB;AAAA,UACzDA,IAASK,IAA+BC;AAAA,QAAA,CAC3C;AAAA,QACD,gBAAa;AAAA,QAEb,4BAACK,GAAA,CAAA,CAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,EAG9B;AACJ;AAEAb,EAAW,cAAc;"}
+{"version":3,"file":"DragHandle.es.js","sources":["../../../../src/components/Tree/TreeItem/DragHandle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconGrabHandle } from '@frontify/fondue-icons';\nimport { type ButtonHTMLAttributes, type DetailedHTMLProps, forwardRef } from 'react';\n\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type TreeItemColors, TreeItemColorsClassMap } from '../types';\n\nexport type DragHandleProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {\n    active?: boolean;\n    showDragHandlerOnHoverOnly?: boolean;\n    activeColorStyle?: TreeItemColors;\n};\n\nexport const DragHandle = forwardRef<HTMLButtonElement, DragHandleProps>(\n    ({ active, showDragHandlerOnHoverOnly, activeColorStyle, ...props }, ref) => {\n        const { selectedDragHanlderTextColor, dragHanlderTextColor } =\n            TreeItemColorsClassMap[activeColorStyle ?? 'neutral'];\n\n        return (\n            <button\n                type=\"button\"\n                aria-label=\"Draggable item\"\n                {...props}\n                ref={ref}\n                className={merge([\n                    FOCUS_VISIBLE_STYLE,\n                    'tw-p-1 first:tw-ml-2 tw-rounded-sm hover:tw-cursor-grab group-hover:tw-opacity-100 group-focus-within:tw-opacity-100',\n                    props.disabled ? 'tw-invisible tw-pointer-events-none' : 'tw-visible',\n                    showDragHandlerOnHoverOnly ? !active && 'tw-opacity-0' : 'tw-opacity-100',\n                    active ? selectedDragHanlderTextColor : dragHanlderTextColor,\n                ])}\n                data-test-id=\"fondue-tree-item-drag-handle\"\n            >\n                <IconGrabHandle size={12} />\n            </button>\n        );\n    },\n);\n\nDragHandle.displayName = 'FondueDragHandle';\n"],"names":["DragHandle","forwardRef","active","showDragHandlerOnHoverOnly","activeColorStyle","props","ref","selectedDragHanlderTextColor","dragHanlderTextColor","TreeItemColorsClassMap","jsx","merge","FOCUS_VISIBLE_STYLE","IconGrabHandle"],"mappings":";;;;;;AAgBO,MAAMA,IAAaC;AAAA,EACtB,CAAC,EAAE,QAAAC,GAAQ,4BAAAC,GAA4B,kBAAAC,GAAkB,GAAGC,EAAA,GAASC,MAAQ;AACzE,UAAM,EAAE,8BAAAC,GAA8B,sBAAAC,EAAA,IAClCC,EAAuBL,KAAoB,SAAS;AAExD,WACI,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,cAAW;AAAA,QACV,GAAGL;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWK,EAAM;AAAA,UACbC;AAAA,UACA;AAAA,UACAP,EAAM,WAAW,wCAAwC;AAAA,UACzDF,IAA6B,CAACD,KAAU,iBAAiB;AAAA,UACzDA,IAASK,IAA+BC;AAAA,QAAA,CAC3C;AAAA,QACD,gBAAa;AAAA,QAEb,UAAA,gBAAAE,EAACG,GAAA,EAAe,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtC;AACJ;AAEAb,EAAW,cAAc;"}

package/dist/components/Tree/TreeItem/TreeItemOverlay.es.js

@@ -1,6 +1,6 @@
 import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { Children as b } from "react";
-import f from "../../../foundation/Icon/Generated/IconGrabHandle12.es.js";
+import { IconGrabHandle as b } from "@frontify/fondue-icons";
+import { Children as f } from "react";
 import { merge as i } from "../../../utilities/merge.es.js";
 import { INDENTATION_WIDTH as x } from "../helpers/constants.es.js";
 const h = ({
@@ -13,7 +13,7 @@ const h = ({
   dragHandlerPosition: o = "left",
   showContentWhileDragging: l = !1
 }) => {
-  const m = b.count(s) > 0, c = { marginLeft: r * x }, a = /* @__PURE__ */ t("button", { type: "button", tabIndex: -1, className: "tw-p-1 tw-touch-none", children: /* @__PURE__ */ t(f, {}) });
+  const m = f.count(s) > 0, c = { marginLeft: r * x }, a = /* @__PURE__ */ t("button", { type: "button", tabIndex: -1, className: "tw-p-1 tw-touch-none", children: /* @__PURE__ */ t(b, { size: 12 }) });
   return /* @__PURE__ */ p(
     "li",
     {

package/dist/components/Tree/TreeItem/TreeItemOverlay.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItemOverlay.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItemOverlay.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, type ReactNode } from 'react';\n\nimport IconGrabHandle12 from '@foundation/Icon/Generated/IconGrabHandle12';\nimport { merge } from '@utilities/merge';\n\nimport { INDENTATION_WIDTH } from '../helpers';\nimport { type DragHandlerPosition } from '../types';\n\nexport type Overlay = {\n    id: string;\n    label?: string;\n    level?: number;\n    children: ReactNode;\n    contentComponent?: ReactNode;\n    isSelected?: boolean;\n    dragHandlerPosition?: DragHandlerPosition;\n    showContentWhileDragging: boolean;\n};\n\nexport const TreeItemOverlay = ({\n    id,\n    label,\n    level = 0,\n    children,\n    contentComponent,\n    isSelected,\n    dragHandlerPosition = 'left',\n    showContentWhileDragging = false,\n}: Overlay) => {\n    const hasChildren = Children.count(children) > 0;\n\n    const indentation = level * INDENTATION_WIDTH;\n\n    const liStyle = { marginLeft: indentation };\n\n    const dragHandler = (\n        <button type=\"button\" tabIndex={-1} className=\"tw-p-1 tw-touch-none\">\n            <IconGrabHandle12 />\n        </button>\n    );\n\n    return (\n        <li\n            role=\"treeitem\"\n            style={liStyle}\n            id={id.toString()}\n            aria-label={label}\n            aria-level={level + 1}\n            aria-selected={isSelected}\n            data-test-id=\"fondue-tree-item-overlay\"\n            className={merge([\n                'tw-pointer-events-none tw-bg-white tw-flex tw-items-center tw-gap-x-1 tw-p-2 tw-no-underline tw-leading-5 tw-box-border tw-w-fit tw-drop-shadow-xl tw-rounded',\n                showContentWhileDragging ? 'tw-opacity-90' : '',\n            ])}\n        >\n            {dragHandlerPosition === 'left' && dragHandler}\n\n            {hasChildren && (\n                <button type=\"button\" tabIndex={-1} data-test-id=\"tree-item-toggle\" className=\"tw-p-1\">\n                    <div\n                        className={merge([\n                            'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                            isSelected && 'tw-text-box-selected-strong-inverse',\n                        ])}\n                    />\n                </button>\n            )}\n\n            {label !== undefined && <span>{label}</span>}\n\n            {contentComponent}\n\n            {dragHandlerPosition === 'right' && dragHandler}\n        </li>\n    );\n};\n\nTreeItemOverlay.displayName = 'FondueTreeItemOverlay';\n"],"names":["TreeItemOverlay","id","label","level","children","contentComponent","isSelected","dragHandlerPosition","showContentWhileDragging","hasChildren","Children","liStyle","INDENTATION_WIDTH","dragHandler","jsx","IconGrabHandle12","jsxs","merge"],"mappings":";;;;;AAqBO,MAAMA,IAAkB,CAAC;AAAA,EAC5B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,0BAAAC,IAA2B;AAC/B,MAAe;AACX,QAAMC,IAAcC,EAAS,MAAMN,CAAQ,IAAI,GAIzCO,IAAU,EAAE,YAFER,IAAQS,EAEE,GAExBC,IACF,gBAAAC,EAAC,UAAA,EAAO,MAAK,UAAS,UAAU,IAAI,WAAU,wBAC1C,UAAA,gBAAAA,EAACC,GAAA,CAAA,CAAiB,GACtB;AAGJ,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,OAAOL;AAAA,MACP,IAAIV,EAAG,SAAA;AAAA,MACP,cAAYC;AAAA,MACZ,cAAYC,IAAQ;AAAA,MACpB,iBAAeG;AAAA,MACf,gBAAa;AAAA,MACb,WAAWW,EAAM;AAAA,QACb;AAAA,QACAT,IAA2B,kBAAkB;AAAA,MAAA,CAChD;AAAA,MAEA,UAAA;AAAA,QAAAD,MAAwB,UAAUM;AAAA,QAElCJ,KACG,gBAAAK,EAAC,UAAA,EAAO,MAAK,UAAS,UAAU,IAAI,gBAAa,oBAAmB,WAAU,UAC1E,UAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWG,EAAM;AAAA,cACb;AAAA,cACAX,KAAc;AAAA,YAAA,CACjB;AAAA,UAAA;AAAA,QAAA,GAET;AAAA,QAGHJ,MAAU,UAAa,gBAAAY,EAAC,QAAA,EAAM,UAAAZ,GAAM;AAAA,QAEpCG;AAAA,QAEAE,MAAwB,WAAWM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhD;AAEAb,EAAgB,cAAc;"}
+{"version":3,"file":"TreeItemOverlay.es.js","sources":["../../../../src/components/Tree/TreeItem/TreeItemOverlay.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconGrabHandle } from '@frontify/fondue-icons';\nimport { Children, type ReactNode } from 'react';\n\nimport { merge } from '@utilities/merge';\n\nimport { INDENTATION_WIDTH } from '../helpers';\nimport { type DragHandlerPosition } from '../types';\n\nexport type Overlay = {\n    id: string;\n    label?: string;\n    level?: number;\n    children: ReactNode;\n    contentComponent?: ReactNode;\n    isSelected?: boolean;\n    dragHandlerPosition?: DragHandlerPosition;\n    showContentWhileDragging: boolean;\n};\n\nexport const TreeItemOverlay = ({\n    id,\n    label,\n    level = 0,\n    children,\n    contentComponent,\n    isSelected,\n    dragHandlerPosition = 'left',\n    showContentWhileDragging = false,\n}: Overlay) => {\n    const hasChildren = Children.count(children) > 0;\n\n    const indentation = level * INDENTATION_WIDTH;\n\n    const liStyle = { marginLeft: indentation };\n\n    const dragHandler = (\n        <button type=\"button\" tabIndex={-1} className=\"tw-p-1 tw-touch-none\">\n            <IconGrabHandle size={12} />\n        </button>\n    );\n\n    return (\n        <li\n            role=\"treeitem\"\n            style={liStyle}\n            id={id.toString()}\n            aria-label={label}\n            aria-level={level + 1}\n            aria-selected={isSelected}\n            data-test-id=\"fondue-tree-item-overlay\"\n            className={merge([\n                'tw-pointer-events-none tw-bg-white tw-flex tw-items-center tw-gap-x-1 tw-p-2 tw-no-underline tw-leading-5 tw-box-border tw-w-fit tw-drop-shadow-xl tw-rounded',\n                showContentWhileDragging ? 'tw-opacity-90' : '',\n            ])}\n        >\n            {dragHandlerPosition === 'left' && dragHandler}\n\n            {hasChildren && (\n                <button type=\"button\" tabIndex={-1} data-test-id=\"tree-item-toggle\" className=\"tw-p-1\">\n                    <div\n                        className={merge([\n                            'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                            isSelected && 'tw-text-box-selected-strong-inverse',\n                        ])}\n                    />\n                </button>\n            )}\n\n            {label !== undefined && <span>{label}</span>}\n\n            {contentComponent}\n\n            {dragHandlerPosition === 'right' && dragHandler}\n        </li>\n    );\n};\n\nTreeItemOverlay.displayName = 'FondueTreeItemOverlay';\n"],"names":["TreeItemOverlay","id","label","level","children","contentComponent","isSelected","dragHandlerPosition","showContentWhileDragging","hasChildren","Children","liStyle","INDENTATION_WIDTH","dragHandler","jsx","IconGrabHandle","jsxs","merge"],"mappings":";;;;;AAqBO,MAAMA,IAAkB,CAAC;AAAA,EAC5B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,0BAAAC,IAA2B;AAC/B,MAAe;AACX,QAAMC,IAAcC,EAAS,MAAMN,CAAQ,IAAI,GAIzCO,IAAU,EAAE,YAFER,IAAQS,EAEE,GAExBC,IACF,gBAAAC,EAAC,UAAA,EAAO,MAAK,UAAS,UAAU,IAAI,WAAU,wBAC1C,UAAA,gBAAAA,EAACC,GAAA,EAAe,MAAM,IAAI,GAC9B;AAGJ,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,OAAOL;AAAA,MACP,IAAIV,EAAG,SAAA;AAAA,MACP,cAAYC;AAAA,MACZ,cAAYC,IAAQ;AAAA,MACpB,iBAAeG;AAAA,MACf,gBAAa;AAAA,MACb,WAAWW,EAAM;AAAA,QACb;AAAA,QACAT,IAA2B,kBAAkB;AAAA,MAAA,CAChD;AAAA,MAEA,UAAA;AAAA,QAAAD,MAAwB,UAAUM;AAAA,QAElCJ,KACG,gBAAAK,EAAC,UAAA,EAAO,MAAK,UAAS,UAAU,IAAI,gBAAa,oBAAmB,WAAU,UAC1E,UAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWG,EAAM;AAAA,cACb;AAAA,cACAX,KAAc;AAAA,YAAA,CACjB;AAAA,UAAA;AAAA,QAAA,GAET;AAAA,QAGHJ,MAAU,UAAa,gBAAAY,EAAC,QAAA,EAAM,UAAAZ,GAAM;AAAA,QAEpCG;AAAA,QAEAE,MAAwB,WAAWM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhD;AAEAb,EAAgB,cAAc;"}

package/dist/components/Trigger/Trigger.es.js

@@ -1,43 +1,39 @@
 import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { IconCross as v, IconTrashBin as F, IconCaretDown as C, IconExclamationMarkTriangle as N } from "@frontify/fondue-icons";
 import { useFocusRing as b } from "@react-aria/focus";
-import F from "../../foundation/Icon/Generated/IconCaretDown.es.js";
-import S from "../../foundation/Icon/Generated/IconCross.es.js";
-import C from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
-import N from "../../foundation/Icon/Generated/IconTrashBin.es.js";
-import { IconSize as w } from "../../foundation/Icon/IconSize.es.js";
-import { FOCUS_STYLE as m, FOCUS_VISIBLE_STYLE as I } from "../../utilities/focusStyle.es.js";
+import { FOCUS_STYLE as w, FOCUS_VISIBLE_STYLE as D } from "../../utilities/focusStyle.es.js";
 import { merge as e } from "../../utilities/merge.es.js";
-import { Validation as a, validationClassMap as z } from "../../utilities/validation.es.js";
-var D = /* @__PURE__ */ ((r) => (r.Default = "Default", r.Weak = "Weak", r))(D || {});
-const y = (r, i, s, l, o) => e([
+import { Validation as a, validationClassMap as I } from "../../utilities/validation.es.js";
+var y = /* @__PURE__ */ ((r) => (r.Default = "Default", r.Weak = "Weak", r))(y || {});
+const S = (r, s, i, l, o) => e([
   "tw-group tw-relative tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-rounded tw-transition-colors tw-min-h-[36px]",
-  r && m,
-  i ? "tw-border-black-5 tw-bg-black-5 tw-pointer-events-none" : e([
+  r && w,
+  s ? "tw-border-black-5 tw-bg-black-5 tw-pointer-events-none" : e([
     "hover:tw-border-line-xx-strong",
     l === "Weak" ? "" : "tw-bg-base",
-    s ? "tw-border-line-xx-strong" : "tw-border-line",
-    l === "Weak" ? "tw-border-0 hover:tw-outline hover:tw-outline-1" : z[o]
+    i ? "tw-border-line-xx-strong" : "tw-border-line",
+    l === "Weak" ? "tw-border-0 hover:tw-outline hover:tw-outline-1" : I[o]
   ])
 ]), T = ({
   buttonProps: r,
-  onClear: i,
-  onDelete: s,
+  onClear: s,
+  onDelete: i,
   children: l,
   disabled: o = !1,
   isOpen: c = !1,
   isFocusVisible: d = !1,
-  size: f = "Small",
-  showClear: p = !1,
+  size: m = "Small",
+  showClear: x = !1,
   validation: n = a.Default,
-  emphasis: x = "Default"
+  emphasis: g = "Default"
   /* Default */
 }) => {
-  const { focusProps: g, isFocusVisible: k } = b(), { focusProps: h, isFocusVisible: v } = b();
+  const { focusProps: f, isFocusVisible: p } = b(), { focusProps: k, isFocusVisible: h } = b();
   return /* @__PURE__ */ u(
     "div",
     {
       "data-test-id": "trigger",
-      className: y(d, o, c, x, n),
+      className: S(d, o, c, g, n),
       children: [
         l,
         /* @__PURE__ */ u(
@@ -45,38 +41,38 @@ const y = (r, i, s, l, o) => e([
           {
             className: e([
               "tw-flex-none tw-flex tw-items-center tw-absolute",
-              f === "Large" ? "tw-right-5 tw-gap-1.5" : "tw-right-3 tw-gap-1"
+              m === "Large" ? "tw-right-5 tw-gap-1.5" : "tw-right-3 tw-gap-1"
             ]),
             children: [
-              p && /* @__PURE__ */ t(
+              x && /* @__PURE__ */ t(
                 "button",
                 {
-                  ...g,
+                  ...f,
                   "data-test-id": "dropdown-clear-button",
                   "aria-label": "Clear selection",
                   type: "button",
                   className: e([
-                    k && m,
+                    p && w,
                     o ? "tw-pointer-events-none tw-text-black-40" : "tw-text-black-80"
                   ]),
-                  onClick: () => !!i && i(),
-                  children: /* @__PURE__ */ t(S, { size: w.Size12 })
+                  onClick: () => !!s && s(),
+                  children: /* @__PURE__ */ t(v, { size: 12 })
                 }
               ),
-              !!s && /* @__PURE__ */ t(
+              !!i && /* @__PURE__ */ t(
                 "button",
                 {
-                  ...h,
+                  ...k,
                   "data-test-id": "dropdown-delete-button",
                   "aria-label": "Delete selection",
                   type: "button",
                   className: e([
                     "tw-rounded",
-                    v && m,
+                    h && w,
                     o ? "tw-pointer-events-none tw-text-black-40" : "tw-text-black-80"
                   ]),
-                  onClick: s,
-                  children: /* @__PURE__ */ t(N, { size: w.Size12 })
+                  onClick: i,
+                  children: /* @__PURE__ */ t(F, { size: 12 })
                 }
               ),
               /* @__PURE__ */ t(
@@ -92,10 +88,10 @@ const y = (r, i, s, l, o) => e([
                     o ? "tw-pointer-events-none tw-text-black-40" : e([
                       "group-hover:tw-text-black ",
                       c ? "tw-text-black-100" : "tw-text-black-80",
-                      I
+                      D
                     ])
                   ]),
-                  children: /* @__PURE__ */ t("div", { className: e(["tw-transition-transform", c && "tw-rotate-180"]), children: /* @__PURE__ */ t(F, { size: w.Size16 }) })
+                  children: /* @__PURE__ */ t("div", { className: e(["tw-transition-transform", c && "tw-rotate-180"]), children: /* @__PURE__ */ t(C, { size: 16 }) })
                 }
               ),
               (n === a.Error || n === a.Warning) && /* @__PURE__ */ t(
@@ -107,7 +103,7 @@ const y = (r, i, s, l, o) => e([
                     n === a.Warning && "tw-text-text-warning"
                   ]),
                   "data-test-id": "error-state-exclamation-mark-icon",
-                  children: /* @__PURE__ */ t(C, {})
+                  children: /* @__PURE__ */ t(N, {})
                 }
               )
             ]
@@ -120,6 +116,6 @@ const y = (r, i, s, l, o) => e([
 T.displayName = "FondueTrigger";
 export {
   T as Trigger,
-  D as TriggerEmphasis
+  y as TriggerEmphasis
 };
 //# sourceMappingURL=Trigger.es.js.map