@uipath/apollo-wind 2.23.0 → 2.24.0

package/dist/components/ui/prompt-editor/components/PromptEditorAutocompleteMenu.cjs

@@ -0,0 +1,194 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    PromptEditorAutocompleteMenu: ()=>PromptEditorAutocompleteMenu
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const external_react_dom_namespaceObject = require("react-dom");
+const external_command_cjs_namespaceObject = require("../../command.cjs");
+const external_types_cjs_namespaceObject = require("../types.cjs");
+const autocomplete_segments_cjs_namespaceObject = require("../utils/autocomplete-segments.cjs");
+const MENU_WIDTH = 320;
+const VIEWPORT_MARGIN = 8;
+const OPTION_ICON = {
+    input: external_lucide_react_namespaceObject.Variable,
+    output: external_lucide_react_namespaceObject.SquareFunction,
+    state: external_lucide_react_namespaceObject.Database,
+    resource: external_lucide_react_namespaceObject.Paperclip
+};
+function resolvePortalTarget(contextElement) {
+    const dialogContent = contextElement?.closest?.('[role="dialog"]');
+    if (dialogContent instanceof HTMLElement) return dialogContent;
+    return document.body;
+}
+const PromptEditorAutocompleteMenu = ({ open, anchorEl, initialSearch, options, onSelect, onCommitFreeForm, onClose })=>{
+    const containerRef = (0, external_react_namespaceObject.useRef)(null);
+    const [search, setSearch] = (0, external_react_namespaceObject.useState)(initialSearch);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (open) setSearch(initialSearch);
+    }, [
+        open,
+        initialSearch
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!open) return;
+        const handlePointerDown = (e)=>{
+            if (containerRef.current && !containerRef.current.contains(e.target)) onClose();
+        };
+        document.addEventListener('pointerdown', handlePointerDown, true);
+        return ()=>document.removeEventListener('pointerdown', handlePointerDown, true);
+    }, [
+        open,
+        onClose
+    ]);
+    const [, forceUpdate] = (0, external_react_namespaceObject.useReducer)((tick)=>tick + 1, 0);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!open || !anchorEl) return;
+        let rafId = null;
+        const onScrollOrResize = (event)=>{
+            if ('scroll' === event.type && containerRef.current?.contains(event.target)) return;
+            if (null !== rafId) return;
+            rafId = requestAnimationFrame(()=>{
+                rafId = null;
+                forceUpdate();
+            });
+        };
+        document.addEventListener('scroll', onScrollOrResize, true);
+        window.addEventListener('resize', onScrollOrResize);
+        return ()=>{
+            document.removeEventListener('scroll', onScrollOrResize, true);
+            window.removeEventListener('resize', onScrollOrResize);
+            if (null !== rafId) cancelAnimationFrame(rafId);
+        };
+    }, [
+        open,
+        anchorEl
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!open) return;
+        const node = containerRef.current;
+        if (!node) return;
+        const handlePointerDown = (e)=>{
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        node.addEventListener('pointerdown', handlePointerDown);
+        return ()=>node.removeEventListener('pointerdown', handlePointerDown);
+    }, [
+        open
+    ]);
+    if (!open || !anchorEl) return null;
+    const rect = anchorEl.getBoundingClientRect();
+    const left = Math.max(VIEWPORT_MARGIN, Math.min(rect.left, window.innerWidth - MENU_WIDTH - VIEWPORT_MARGIN));
+    const portalTarget = resolvePortalTarget(anchorEl.contextElement);
+    const trimmedSearch = search.trim();
+    const freeFormPath = onCommitFreeForm && autocomplete_segments_cjs_namespaceObject.VARIABLE_PATH_REGEX.test(trimmedSearch) && !options.some((o)=>o.value === trimmedSearch) ? trimmedSearch : null;
+    return /*#__PURE__*/ (0, external_react_dom_namespaceObject.createPortal)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: containerRef,
+        "data-variable-picker-popover": "",
+        className: "rounded-md border bg-popover shadow-lg",
+        style: {
+            position: 'fixed',
+            top: rect.bottom + 4,
+            left,
+            width: MENU_WIDTH,
+            zIndex: 1400
+        },
+        onKeyDown: (e)=>{
+            if ('Escape' === e.key) {
+                e.stopPropagation();
+                onClose();
+            }
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.Command, {
+            shouldFilter: true,
+            loop: true,
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandInput, {
+                    value: search,
+                    onValueChange: setSearch,
+                    placeholder: "Search variables…",
+                    autoFocus: true
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.CommandList, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandEmpty, {
+                            children: "No variables found."
+                        }),
+                        options.map((option)=>{
+                            const Icon = OPTION_ICON[option.type];
+                            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.CommandItem, {
+                                value: option.value,
+                                onSelect: ()=>onSelect(option.value),
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
+                                        className: "h-3.5 w-3.5 shrink-0 text-muted-foreground"
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "truncate",
+                                        children: option.value
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "ml-auto pl-2 text-xs text-muted-foreground",
+                                        children: (0, external_types_cjs_namespaceObject.getPromptEditorTokenTypeLabel)(option.type)
+                                    })
+                                ]
+                            }, `${option.type}:${option.value}`);
+                        }),
+                        freeFormPath && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.CommandItem, {
+                            value: freeFormPath,
+                            onSelect: ()=>onCommitFreeForm?.(freeFormPath),
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Variable, {
+                                    className: "h-3.5 w-3.5 shrink-0 text-muted-foreground"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                                    className: "truncate",
+                                    children: [
+                                        "Insert ",
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            className: "font-medium",
+                                            children: freeFormPath
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    }), portalTarget);
+};
+exports.PromptEditorAutocompleteMenu = __webpack_exports__.PromptEditorAutocompleteMenu;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "PromptEditorAutocompleteMenu"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/prompt-editor/components/PromptEditorAutocompleteMenu.d.ts

@@ -0,0 +1,28 @@
+import { type PromptEditorAutoCompleteOption } from '../types';
+export interface PromptEditorAutocompleteMenuProps {
+    open: boolean;
+    anchorEl: {
+        getBoundingClientRect: () => DOMRect;
+        contextElement?: Element;
+    } | null;
+    /** Pre-fill the search input with the user's typed prefix (everything after `$`). */
+    initialSearch: string;
+    /** Variable options to offer. */
+    options: PromptEditorAutoCompleteOption[];
+    /** Called with the selected option's value (path). */
+    onSelect: (path: string) => void;
+    /**
+     * Commit the typed query verbatim as a free-form chip. When set, a typed path that matches no
+     * option but is a valid variable path is offered as an "Insert" item so Enter commits it (the
+     * menu owns Enter while focused, so free-form commit has to happen here, not in the editor).
+     */
+    onCommitFreeForm?: (path: string) => void;
+    /** Called when the menu should close (Escape, click-outside, selection committed). */
+    onClose: () => void;
+}
+/**
+ * Caret-anchored variable picker for the prompt editor's `$` trigger. Built on apollo-wind's
+ * `Command` (cmdk) for search + keyboard nav, anchored to the Lexical caret rect via a
+ * `position: fixed` container that tracks the caret across scroll/resize.
+ */
+export declare const PromptEditorAutocompleteMenu: ({ open, anchorEl, initialSearch, options, onSelect, onCommitFreeForm, onClose, }: PromptEditorAutocompleteMenuProps) => import("react").ReactPortal | null;

package/dist/components/ui/prompt-editor/components/PromptEditorAutocompleteMenu.js

@@ -0,0 +1,160 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Database, Paperclip, SquareFunction, Variable } from "lucide-react";
+import { useEffect, useReducer, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "../../command.js";
+import { getPromptEditorTokenTypeLabel } from "../types.js";
+import { VARIABLE_PATH_REGEX } from "../utils/autocomplete-segments.js";
+const MENU_WIDTH = 320;
+const VIEWPORT_MARGIN = 8;
+const OPTION_ICON = {
+    input: Variable,
+    output: SquareFunction,
+    state: Database,
+    resource: Paperclip
+};
+function resolvePortalTarget(contextElement) {
+    const dialogContent = contextElement?.closest?.('[role="dialog"]');
+    if (dialogContent instanceof HTMLElement) return dialogContent;
+    return document.body;
+}
+const PromptEditorAutocompleteMenu = ({ open, anchorEl, initialSearch, options, onSelect, onCommitFreeForm, onClose })=>{
+    const containerRef = useRef(null);
+    const [search, setSearch] = useState(initialSearch);
+    useEffect(()=>{
+        if (open) setSearch(initialSearch);
+    }, [
+        open,
+        initialSearch
+    ]);
+    useEffect(()=>{
+        if (!open) return;
+        const handlePointerDown = (e)=>{
+            if (containerRef.current && !containerRef.current.contains(e.target)) onClose();
+        };
+        document.addEventListener('pointerdown', handlePointerDown, true);
+        return ()=>document.removeEventListener('pointerdown', handlePointerDown, true);
+    }, [
+        open,
+        onClose
+    ]);
+    const [, forceUpdate] = useReducer((tick)=>tick + 1, 0);
+    useEffect(()=>{
+        if (!open || !anchorEl) return;
+        let rafId = null;
+        const onScrollOrResize = (event)=>{
+            if ('scroll' === event.type && containerRef.current?.contains(event.target)) return;
+            if (null !== rafId) return;
+            rafId = requestAnimationFrame(()=>{
+                rafId = null;
+                forceUpdate();
+            });
+        };
+        document.addEventListener('scroll', onScrollOrResize, true);
+        window.addEventListener('resize', onScrollOrResize);
+        return ()=>{
+            document.removeEventListener('scroll', onScrollOrResize, true);
+            window.removeEventListener('resize', onScrollOrResize);
+            if (null !== rafId) cancelAnimationFrame(rafId);
+        };
+    }, [
+        open,
+        anchorEl
+    ]);
+    useEffect(()=>{
+        if (!open) return;
+        const node = containerRef.current;
+        if (!node) return;
+        const handlePointerDown = (e)=>{
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        node.addEventListener('pointerdown', handlePointerDown);
+        return ()=>node.removeEventListener('pointerdown', handlePointerDown);
+    }, [
+        open
+    ]);
+    if (!open || !anchorEl) return null;
+    const rect = anchorEl.getBoundingClientRect();
+    const left = Math.max(VIEWPORT_MARGIN, Math.min(rect.left, window.innerWidth - MENU_WIDTH - VIEWPORT_MARGIN));
+    const portalTarget = resolvePortalTarget(anchorEl.contextElement);
+    const trimmedSearch = search.trim();
+    const freeFormPath = onCommitFreeForm && VARIABLE_PATH_REGEX.test(trimmedSearch) && !options.some((o)=>o.value === trimmedSearch) ? trimmedSearch : null;
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
+        ref: containerRef,
+        "data-variable-picker-popover": "",
+        className: "rounded-md border bg-popover shadow-lg",
+        style: {
+            position: 'fixed',
+            top: rect.bottom + 4,
+            left,
+            width: MENU_WIDTH,
+            zIndex: 1400
+        },
+        onKeyDown: (e)=>{
+            if ('Escape' === e.key) {
+                e.stopPropagation();
+                onClose();
+            }
+        },
+        children: /*#__PURE__*/ jsxs(Command, {
+            shouldFilter: true,
+            loop: true,
+            children: [
+                /*#__PURE__*/ jsx(CommandInput, {
+                    value: search,
+                    onValueChange: setSearch,
+                    placeholder: "Search variables…",
+                    autoFocus: true
+                }),
+                /*#__PURE__*/ jsxs(CommandList, {
+                    children: [
+                        /*#__PURE__*/ jsx(CommandEmpty, {
+                            children: "No variables found."
+                        }),
+                        options.map((option)=>{
+                            const Icon = OPTION_ICON[option.type];
+                            return /*#__PURE__*/ jsxs(CommandItem, {
+                                value: option.value,
+                                onSelect: ()=>onSelect(option.value),
+                                children: [
+                                    /*#__PURE__*/ jsx(Icon, {
+                                        className: "h-3.5 w-3.5 shrink-0 text-muted-foreground"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "truncate",
+                                        children: option.value
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "ml-auto pl-2 text-xs text-muted-foreground",
+                                        children: getPromptEditorTokenTypeLabel(option.type)
+                                    })
+                                ]
+                            }, `${option.type}:${option.value}`);
+                        }),
+                        freeFormPath && /*#__PURE__*/ jsxs(CommandItem, {
+                            value: freeFormPath,
+                            onSelect: ()=>onCommitFreeForm?.(freeFormPath),
+                            children: [
+                                /*#__PURE__*/ jsx(Variable, {
+                                    className: "h-3.5 w-3.5 shrink-0 text-muted-foreground"
+                                }),
+                                /*#__PURE__*/ jsxs("span", {
+                                    className: "truncate",
+                                    children: [
+                                        "Insert ",
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "font-medium",
+                                            children: freeFormPath
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    }), portalTarget);
+};
+export { PromptEditorAutocompleteMenu };

package/dist/components/ui/prompt-editor/components/TokenPill.cjs

@@ -0,0 +1,119 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    TokenPill: ()=>TokenPill
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_types_cjs_namespaceObject = require("../types.cjs");
+const TOKEN_TYPE_ICON = {
+    input: external_lucide_react_namespaceObject.Variable,
+    output: external_lucide_react_namespaceObject.SquareFunction,
+    state: external_lucide_react_namespaceObject.Database,
+    resource: external_lucide_react_namespaceObject.Paperclip,
+    text: external_lucide_react_namespaceObject.Variable
+};
+const TokenPillBase = ({ value, tokenType, onRemove, diffType, readonly, isInvalid, isSelected, onMouseDown })=>{
+    const PROMPT_EDITOR_TOKEN_COLORS = (0, external_types_cjs_namespaceObject.getPromptEditorTokenColors)();
+    const colors = isInvalid && !diffType ? PROMPT_EDITOR_TOKEN_COLORS.invalid : PROMPT_EDITOR_TOKEN_COLORS.valid;
+    const Icon = TOKEN_TYPE_ICON[tokenType];
+    const handleRemoveMouseDown = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const handleRemoveClick = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        onRemove?.();
+    };
+    const bgColor = diffType ? 'added' === diffType ? 'rgba(76, 175, 80, 0.15)' : 'rgba(244, 67, 54, 0.15)' : colors.background;
+    const outerClassName = [
+        'relative inline-flex items-center align-middle gap-[3px] h-5 rounded px-1 text-[13px] leading-5 outline-offset-1',
+        readonly ? 'cursor-default' : 'cursor-pointer',
+        'removed' === diffType ? 'line-through opacity-60' : '',
+        isSelected ? 'z-10' : ''
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+        onMouseDown: onMouseDown,
+        className: outerClassName,
+        style: {
+            backgroundColor: bgColor,
+            outline: isSelected ? `2px solid ${colors.border}` : 'none'
+        },
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "inline-flex shrink-0",
+                style: {
+                    color: colors.icon
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
+                    className: "h-3.5 w-3.5"
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "font-normal whitespace-nowrap",
+                style: {
+                    color: colors.text,
+                    fontFamily: "'Noto Sans', sans-serif"
+                },
+                children: value
+            }),
+            !readonly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                type: "button",
+                "aria-label": "Remove token",
+                className: "inline-flex items-center justify-center p-px border-0 bg-transparent cursor-pointer rounded-[2px] w-4 h-4",
+                style: {
+                    color: colors.text
+                },
+                onMouseDown: handleRemoveMouseDown,
+                onClick: handleRemoveClick,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", {
+                    width: "12",
+                    height: "12",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                        d: "M18 6L6 18M6 6L18 18",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    })
+                })
+            })
+        ]
+    });
+};
+const TokenPill = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(TokenPillBase);
+exports.TokenPill = __webpack_exports__.TokenPill;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "TokenPill"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/prompt-editor/components/TokenPill.d.ts

@@ -0,0 +1,15 @@
+import type { PromptEditorDiffType, PromptEditorTokenType } from '../types';
+export interface TokenPillProps {
+    value: string;
+    /** Token type — selects the leading icon and (via the wrapper) the tooltip label. */
+    tokenType: PromptEditorTokenType;
+    onRemove?: () => void;
+    diffType?: PromptEditorDiffType;
+    readonly?: boolean;
+    isInvalid?: boolean;
+    /** True when the underlying Lexical decorator is in `NodeSelection` — drives the focus outline. */
+    isSelected?: boolean;
+    /** Mouse-down on the pill body (not the X). The wrapper uses it to set NodeSelection on the decorator. */
+    onMouseDown?: (e: React.MouseEvent) => void;
+}
+export declare const TokenPill: import("react").MemoExoticComponent<({ value, tokenType, onRemove, diffType, readonly, isInvalid, isSelected, onMouseDown, }: TokenPillProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/ui/prompt-editor/components/TokenPill.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Database, Paperclip, SquareFunction, Variable } from "lucide-react";
+import { getPromptEditorTokenColors } from "../types.js";
+const TOKEN_TYPE_ICON = {
+    input: Variable,
+    output: SquareFunction,
+    state: Database,
+    resource: Paperclip,
+    text: Variable
+};
+const TokenPillBase = ({ value, tokenType, onRemove, diffType, readonly, isInvalid, isSelected, onMouseDown })=>{
+    const PROMPT_EDITOR_TOKEN_COLORS = getPromptEditorTokenColors();
+    const colors = isInvalid && !diffType ? PROMPT_EDITOR_TOKEN_COLORS.invalid : PROMPT_EDITOR_TOKEN_COLORS.valid;
+    const Icon = TOKEN_TYPE_ICON[tokenType];
+    const handleRemoveMouseDown = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const handleRemoveClick = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        onRemove?.();
+    };
+    const bgColor = diffType ? 'added' === diffType ? 'rgba(76, 175, 80, 0.15)' : 'rgba(244, 67, 54, 0.15)' : colors.background;
+    const outerClassName = [
+        'relative inline-flex items-center align-middle gap-[3px] h-5 rounded px-1 text-[13px] leading-5 outline-offset-1',
+        readonly ? 'cursor-default' : 'cursor-pointer',
+        'removed' === diffType ? 'line-through opacity-60' : '',
+        isSelected ? 'z-10' : ''
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ jsxs("span", {
+        onMouseDown: onMouseDown,
+        className: outerClassName,
+        style: {
+            backgroundColor: bgColor,
+            outline: isSelected ? `2px solid ${colors.border}` : 'none'
+        },
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "inline-flex shrink-0",
+                style: {
+                    color: colors.icon
+                },
+                children: /*#__PURE__*/ jsx(Icon, {
+                    className: "h-3.5 w-3.5"
+                })
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "font-normal whitespace-nowrap",
+                style: {
+                    color: colors.text,
+                    fontFamily: "'Noto Sans', sans-serif"
+                },
+                children: value
+            }),
+            !readonly && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                "aria-label": "Remove token",
+                className: "inline-flex items-center justify-center p-px border-0 bg-transparent cursor-pointer rounded-[2px] w-4 h-4",
+                style: {
+                    color: colors.text
+                },
+                onMouseDown: handleRemoveMouseDown,
+                onClick: handleRemoveClick,
+                children: /*#__PURE__*/ jsx("svg", {
+                    width: "12",
+                    height: "12",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /*#__PURE__*/ jsx("path", {
+                        d: "M18 6L6 18M6 6L18 18",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    })
+                })
+            })
+        ]
+    });
+};
+const TokenPill = /*#__PURE__*/ memo(TokenPillBase);
+export { TokenPill };