@frontify/fondue 12.0.0-beta.424 → 12.0.0-beta.426

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

@@ -1,12 +1,12 @@
-import { jsxs as S, jsx as e } from "react/jsx-runtime";
+import { jsxs as T, jsx as e } from "react/jsx-runtime";
 import { useFocusRing as f } from "@react-aria/focus";
 import { forwardRef as z, useRef as et, useImperativeHandle as rt, useState as ot, useEffect as O } from "react";
 import st from "../../foundation/Icon/Generated/IconCheckMark.es.js";
 import it from "../../foundation/Icon/Generated/IconClipboard.es.js";
 import nt from "../../foundation/Icon/Generated/IconCross.es.js";
 import ct from "../../foundation/Icon/Generated/IconCrossCircle.es.js";
-import lt from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
-import at from "../../foundation/Icon/Generated/IconEye.es.js";
+import at from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
+import lt from "../../foundation/Icon/Generated/IconEye.es.js";
 import wt from "../../foundation/Icon/Generated/IconEyeOff.es.js";
 import { useCopy as ut } from "../../hooks/useCopy.es.js";
 import { useMemoizedId as dt } from "../../hooks/useMemoizedId.es.js";
@@ -15,12 +15,12 @@ import { merge as i } from "../../utilities/merge.es.js";
 import { validationClassMap as pt, Validation as u } from "../../utilities/validation.es.js";
 import { LegacyTooltip as ft } from "../LegacyTooltip/LegacyTooltip.es.js";
 import { LoadingCircle as mt, LoadingCircleSize as bt } from "../LoadingCircle/LoadingCircle.es.js";
-var xt = /* @__PURE__ */ ((r) => (r.Text = "text", r.Password = "password", r.Number = "number", r))(xt || {});
-const kt = ({ extraAction: r, disabled: l }, b) => {
+var xt = /* @__PURE__ */ ((r) => (r.Text = "text", r.Password = "password", r.Number = "number", r.Search = "search", r))(xt || {});
+const kt = ({ extraAction: r, disabled: a }, b) => {
   const { isFocusVisible: n, focusProps: k } = f();
   if (!r)
     return null;
-  const d = l || r.disabled;
+  const d = a || r.disabled;
   return /* @__PURE__ */ e(
     "button",
     {
@@ -43,7 +43,7 @@ const kt = ({ extraAction: r, disabled: l }, b) => {
 }, R = z(kt), ht = z(
   ({
     id: r,
-    type: l = "text",
+    type: a = "text",
     decorator: b,
     validation: n = u.Default,
     clearable: k = !1,
@@ -55,7 +55,7 @@ const kt = ({ extraAction: r, disabled: l }, b) => {
     dotted: W = !1,
     value: h = "",
     copyable: $ = !1,
-    onChange: a,
+    onChange: l,
     onEnterPressed: N,
     onBlur: g,
     onClear: y,
@@ -73,8 +73,8 @@ const kt = ({ extraAction: r, disabled: l }, b) => {
     rt(_, () => w.current, []);
     const { isFocusVisible: q, focusProps: c } = f({
       isTextInput: !0
-    }), { isFocusVisible: j, focusProps: G } = f(), { isFocusVisible: B, focusProps: J } = f(), { isFocusVisible: P, focusProps: Q } = f(), { copy: X, status: F } = ut(), [x, T] = ot(
-      typeof p == "boolean" ? p : l === "password"
+    }), { isFocusVisible: j, focusProps: G } = f(), { isFocusVisible: B, focusProps: J } = f(), { isFocusVisible: P, focusProps: Q } = f(), { copy: X, status: F } = ut(), [x, L] = ot(
+      typeof p == "boolean" ? p : a === "password"
       /* Password */
     );
     O(() => {
@@ -83,12 +83,12 @@ const kt = ({ extraAction: r, disabled: l }, b) => {
         C && ((t = w.current) == null || t.focus());
       }, 0);
     }, [C]), O(() => {
-      typeof p == "boolean" && T(p);
+      typeof p == "boolean" && L(p);
     }, [p]);
     const Z = (t) => {
       t.key === "Enter" && N && N(t);
-    }, A = () => l === "password" ? x ? "password" : "text" : l, tt = typeof V == "boolean" ? { spellCheck: V } : null;
-    return /* @__PURE__ */ S(
+    }, A = () => a === "password" ? x ? "password" : "text" : a, tt = typeof V == "boolean" ? { spellCheck: V } : null;
+    return /* @__PURE__ */ T(
       "div",
       {
         ...Y,
@@ -128,7 +128,7 @@ const kt = ({ extraAction: r, disabled: l }, b) => {
                 var t;
                 return (t = w.current) == null ? void 0 : t.focus();
               },
-              onChange: (t) => a == null ? void 0 : a(t.currentTarget.value),
+              onChange: (t) => l == null ? void 0 : l(t.currentTarget.value),
               onBlur: (t) => {
                 var s;
                 (s = c.onBlur) == null || s.call(c, t), g == null || g(t);
@@ -152,15 +152,15 @@ const kt = ({ extraAction: r, disabled: l }, b) => {
             }
           ),
           I && I.length > 0 && I.map((t, s) => {
-            const L = `text-input-extra-action-${s}`;
+            const S = `text-input-extra-action-${s}`;
             return t.tooltip ? /* @__PURE__ */ e(
               ft,
               {
                 ...t.tooltip,
                 triggerElement: /* @__PURE__ */ e(R, { extraAction: t, disabled: o })
               },
-              L
-            ) : /* @__PURE__ */ e(R, { extraAction: t, disabled: o }, L);
+              S
+            ) : /* @__PURE__ */ e(R, { extraAction: t, disabled: o }, S);
           }),
           `${h}`.length > 0 && k && /* @__PURE__ */ e(
             "button",
@@ -172,7 +172,7 @@ const kt = ({ extraAction: r, disabled: l }, b) => {
               ]),
               onClick: () => {
                 var t, s;
-                (t = w.current) == null || t.focus(), (s = w.current) == null || s.setAttribute("value", ""), a == null || a(""), y == null || y();
+                (t = w.current) == null || t.focus(), (s = w.current) == null || s.setAttribute("value", ""), l == null || l(""), y == null || y();
               },
               "data-test-id": "clear-icon",
               title: "Clear text input",
@@ -183,7 +183,7 @@ const kt = ({ extraAction: r, disabled: l }, b) => {
               children: /* @__PURE__ */ e(nt, {})
             }
           ),
-          l === "password" && /* @__PURE__ */ e(
+          a === "password" && /* @__PURE__ */ e(
             "button",
             {
               className: i([
@@ -191,14 +191,14 @@ const kt = ({ extraAction: r, disabled: l }, b) => {
                 o ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
                 B && m
               ]),
-              onClick: () => T(!x),
+              onClick: () => L(!x),
               "data-test-id": "visibility-icon",
               title: "Toggle text visibility",
               type: "button",
               "aria-label": `${x ? "unveil" : "obfuscate"} text input`,
               disabled: o,
               ...J,
-              children: x ? /* @__PURE__ */ e(at, {}) : /* @__PURE__ */ e(wt, {})
+              children: x ? /* @__PURE__ */ e(lt, {}) : /* @__PURE__ */ e(wt, {})
             }
           ),
           n === 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(mt, { size: bt.ExtraSmall }) }),
@@ -211,10 +211,10 @@ const kt = ({ extraAction: r, disabled: l }, b) => {
                 n === u.Warning && "tw-text-text-warning"
               ]),
               "data-test-id": "error-state-exclamation-mark-icon",
-              children: /* @__PURE__ */ e(lt, {})
+              children: /* @__PURE__ */ e(at, {})
             }
           ),
-          $ && /* @__PURE__ */ S(
+          $ && /* @__PURE__ */ T(
             "button",
             {
               className: i([

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    type AriaAttributes,\n    type FocusEvent,\n    type ForwardRefRenderFunction,\n    type KeyboardEvent,\n    type ReactElement,\n    type ReactNode,\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/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';\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    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\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};\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\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            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' && 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                )}\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":["TextInputType","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","_a","onKeyDown","event","getInputType","spellcheckProp","jsxs","validationClassMap","useMemoizedId","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 { useFocusRing } from '@react-aria/focus';\nimport {\n    type AriaAttributes,\n    type FocusEvent,\n    type ForwardRefRenderFunction,\n    type KeyboardEvent,\n    type ReactElement,\n    type ReactNode,\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/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';\n\nexport enum TextInputType {\n    Text = 'text',\n    Password = 'password',\n    Number = 'number',\n    Search = 'search',\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    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};\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\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            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' && 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                )}\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":["TextInputType","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","_a","onKeyDown","event","getInputType","spellcheckProp","jsxs","validationClassMap","useMemoizedId","e","index","key","LegacyTooltip","_b","IconCross","IconEye","IconEyeOff","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle","IconCrossCircle","IconClipboard","IconCheckMark"],"mappings":";;;;;;;;;;;;;;;;;AAiCY,IAAAA,uBAAAA,OACRA,EAAA,OAAO,QACPA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,SAAS,UAJDA,IAAAA,MAAA,CAAA,CAAA;AAqFZ,MAAMC,KAAgG,CAClG,EAAE,aAAAC,GAAa,UAAAC,EAAA,GACfC,MACsB;AACtB,QAAM,EAAE,gBAAgBC,GAAiC,YAAYC,EAAA,IAAgCC;AAErG,MAAI,CAACL;AACM,WAAA;AAGL,QAAAM,IAAaL,KAAYD,EAAY;AAEvC,SAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACAF,IACM,4CACA;AAAA,QACNH,KAAmCM;AAAA,MAAA,CACtC;AAAA,MACD,SAAST,EAAY;AAAA,MACrB,gBAAa;AAAA,MACb,cAAYA,EAAY,MAAM,YAAY;AAAA,MAC1C,UAAUM;AAAA,MACV,iBAAeA;AAAA,MACf,MAAK;AAAA,MACL,KAAAJ;AAAA,MACC,GAAGE;AAAA,MAEH,UAAYJ,EAAA;AAAA,IAAA;AAAA,EAAA;AAGzB,GACMU,IAA2BC,EAAWZ,EAAiB,GAEhDa,KAAYD;AAAA,EACrB,CACI;AAAA,IACI,IAAIE;AAAA,IACJ,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,YAAAC,IAAaC,EAAW;AAAA,IACxB,WAAAC,IAAY;AAAA,IACZ,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAApB,IAAW;AAAA,IACX,cAAAqB,IAAe;AAAA,IACf,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,KAEPpC,MACe;AACT,UAAAqC,IAAeC,GAAgC,IAAI;AACzD,IAAAC,GAAoBvC,GAAK,MAAMqC,EAAa,SAAU,CAAE,CAAA;AAExD,UAAM,EAAE,gBAAgBG,GAAqB,YAAYC,EAAA,IAAoBtC,EAAa;AAAA,MACtF,aAAa;AAAA,IAAA,CAChB,GACK,EAAE,gBAAgBuC,GAA2B,YAAYC,EAAA,IAA0BxC,KACnF,EAAE,gBAAgByC,GAA8B,YAAYC,EAAA,IAA6B1C,KACzF,EAAE,gBAAgB2C,GAA0B,YAAYC,EAAA,IAAyB5C,KAEjF,EAAE,MAAA6C,GAAM,QAAAC,EAAO,IAAIC,GAAQ,GAE3B,CAACC,GAAcC,CAAe,IAAIC;AAAA,MACpC,OAAOlC,KAAe,YAAYA,IAAaP,MAAS;AAAA;AAAA,IAAA;AAG5D,IAAA0C,EAAU,MAAM;AACZ,iBAAW,MAAM;;AACG,QAAAtB,OAAAuB,IAAAlB,EAAa,YAAb,QAAAkB,EAAsB;AAAA,SACvC,CAAC;AAAA,IAAA,GACL,CAACvB,CAAY,CAAC,GAEjBsB,EAAU,MAAM;AACR,MAAA,OAAOnC,KAAe,aACtBiC,EAAgBjC,CAAU;AAAA,IAC9B,GACD,CAACA,CAAU,CAAC;AAET,UAAAqC,IAAY,CAACC,MAA2C;AACtD,MAAAA,EAAM,QAAQ,WAAWhC,KACzBA,EAAegC,CAAK;AAAA,IACxB,GAGEC,IAAe,MACb9C,MAAS,aACFuC,IAAe,aAAyB,SAE5CvC,GAGL+C,KAAiB,OAAO7B,KAAe,YAAY,EAAE,YAAYA,EAAe,IAAA;AAGlF,WAAA,gBAAA8B;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAGxB;AAAA,QACJ,WAAW9B,EAAM;AAAA,UACb;AAAA,UACAe,IAAS,qBAAqB;AAAA,UAC9BtB,KAAYgC,IACN,wHACAzB,EAAM;AAAA,YACF;AAAA,YACAuD,GAAmB/C,CAAU;AAAA,YAC7B0B,KACI,CAACE,KACD,CAACE,KACD,CAACE,KACDvC;AAAA,UAAA,CACP;AAAA,QAAA,CACV;AAAA,QACD,gBAAa;AAAA,QAEZ,UAAA;AAAA,UACGM,KAAA,gBAAAR;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWC,EAAM;AAAA,gBACb;AAAA,gBACAP,IAAW,qBAAqB;AAAA,cAAA,CACnC;AAAA,cACD,gBAAa;AAAA,cAEZ,UAAAc;AAAA,YAAA;AAAA,UACL;AAAA,UAEJ,gBAAAR;AAAA,YAAC;AAAA,YAAA;AAAA,cACI,GAAGoC;AAAA,cACJ,IAAIqB,GAAcnD,CAAM;AAAA,cACxB,KAAK0B;AAAA,cACL,WAAW/B,EAAM;AAAA,gBACb;AAAA,gBACAP,KAAYgC,IACN,sIACA;AAAA,cAAA,CACT;AAAA,cACD,SAAS,MAAM;;AAAA,wBAAAwB,IAAAlB,EAAa,YAAb,gBAAAkB,EAAsB;AAAA;AAAA,cACrC,UAAU,CAACE,MAAUjC,KAAA,gBAAAA,EAAWiC,EAAM,cAAc;AAAA,cACpD,QAAQ,CAACM,MAAM;;AACX,iBAAAR,IAAAd,EAAgB,WAAhB,QAAAc,EAAA,KAAAd,GAAyBsB,IACzBrC,KAAA,QAAAA,EAASqC;AAAA,cACb;AAAA,cACA,WAAAP;AAAA,cACA,aAAAvC;AAAA,cACA,OAAAK;AAAA,cACA,MAAMoC,EAAa;AAAA,cACnB,UAAAxC;AAAA,cACA,UAAUa;AAAA,cACV,UAAAhC;AAAA,cACA,SAAS,CAACgE,MAAM;;AACZ,iBAAAR,IAAAd,EAAgB,YAAhB,QAAAc,EAAA,KAAAd,GAA0BsB,IACtB9B,KACA8B,EAAE,OAAO,UAETnC,KACAA,EAAQmC,CAAC;AAAA,cAEjB;AAAA,cACA,cAAc3C,IAAe,OAAO;AAAA,cACpC,WAAAe;AAAA,cACA,MAAAN;AAAA,cACA,gBAAa;AAAA,cACZ,GAAG8B;AAAA,YAAA;AAAA,UACR;AAAA,UACCzB,KACGA,EAAa,SAAS,KACtBA,EAAa,IAAI,CAACpC,GAAmCkE,MAAkB;AAC7D,kBAAAC,IAAM,2BAA2BD,CAAK;AAC5C,mBAAIlE,EAAY,UAER,gBAAAO;AAAA,cAAC6D;AAAA,cAAA;AAAA,gBAEI,GAAGpE,EAAY;AAAA,gBAChB,gBACI,gBAAAO,EAACG,GAAyB,EAAA,aAAAV,GAA0B,UAAAC,EAAoB,CAAA;AAAA,cAAA;AAAA,cAHvEkE;AAAA,YAAA,IAQT,gBAAA5D,EAAAG,GAAA,EAAmC,aAAAV,GAA0B,UAAAC,EAAA,GAA/BkE,CAAmD;AAAA,UAAA,CAC5F;AAAA,UACJ,GAAG3C,CAAK,GAAG,SAAS,KAAKN,KACtB,gBAAAX;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWC,EAAM;AAAA,gBACb;AAAA,gBACAP,IACM,uCACA;AAAA,gBACN2C,KAA6BnC;AAAA,cAAA,CAChC;AAAA,cACD,SAAS,MAAM;;AACX,iBAAAgD,IAAAlB,EAAa,YAAb,QAAAkB,EAAsB,UACTY,IAAA9B,EAAA,YAAA,QAAA8B,EAAS,aAAa,SAAS,KAE5C3C,KAAA,QAAAA,EAAW,KACDG,KAAA,QAAAA;AAAA,cACd;AAAA,cACA,gBAAa;AAAA,cACb,OAAM;AAAA,cACN,cAAW;AAAA,cACX,UAAA5B;AAAA,cACA,MAAK;AAAA,cACJ,GAAG4C;AAAA,cAEJ,4BAACyB,IAAU,EAAA;AAAA,YAAA;AAAA,UACf;AAAA,UAEHxD,MAAS,cACN,gBAAAP;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWC,EAAM;AAAA,gBACb;AAAA,gBACAP,IACM,uCACA;AAAA,gBACN6C,KAAgCrC;AAAA,cAAA,CACnC;AAAA,cACD,SAAS,MAAM6C,EAAgB,CAACD,CAAY;AAAA,cAC5C,gBAAa;AAAA,cACb,OAAM;AAAA,cACN,MAAK;AAAA,cACL,cAAY,GAAGA,IAAe,WAAW,WAAW;AAAA,cACpD,UAAApD;AAAA,cACC,GAAG8C;AAAA,cAEH,UAAeM,IAAA,gBAAA9C,EAACgE,IAAQ,CAAA,CAAA,sBAAMC,IAAW,EAAA;AAAA,YAAA;AAAA,UAC9C;AAAA,UAEHxD,MAAeC,EAAW,WACvB,gBAAAV,EAAC,QAAK,EAAA,WAAU,yHACZ,UAAA,gBAAAA,EAACkE,IAAc,EAAA,MAAMC,GAAkB,WAAY,CAAA,GACvD;AAAA,WAEF1D,MAAeC,EAAW,SAASD,MAAeC,EAAW,YAC3D,gBAAAV;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWC,EAAM;AAAA,gBACb;AAAA,gBACAQ,MAAeC,EAAW,SAAS;AAAA,gBACnCD,MAAeC,EAAW,WAAW;AAAA,cAAA,CACxC;AAAA,cACD,gBAAa;AAAA,cAEb,4BAAC0D,IAA4B,EAAA;AAAA,YAAA;AAAA,UACjC;AAAA,UAEHlD,KACG,gBAAAqC;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWtD,EAAM;AAAA,gBACb;AAAA,gBACAP,IACM,uCACA;AAAA,gBACN+C,KAA4BvC;AAAA,cAAA,CAC/B;AAAA,cACD,SAAS,MAAMyC,EAAK1B,CAAK;AAAA,cACzB,gBAAa;AAAA,cACb,OAAM;AAAA,cACN,UAAAvB;AAAA,cACA,MAAK;AAAA,cACJ,GAAGgD;AAAA,cAEH,UAAA;AAAA,gBAAAE,MAAW,WACP,gBAAA5C,EAAA,QAAA,EAAK,WAAU,+BACZ,UAAA,gBAAAA,EAACqE,MAAgB,EACrB,CAAA;AAAA,gBAEHzB,MAAW,UAAU,gBAAA5C,EAACsE,IAAc,CAAA,CAAA;AAAA,gBACpC1B,MAAW,aACP,gBAAA5C,EAAA,QAAA,EAAK,WAAU,+BACZ,UAAA,gBAAAA,EAACuE,MAAc,EACnB,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAER;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIhB;AACJ;AACAlE,GAAU,cAAc;"}