@uipath/apollo-wind 2.71.0 → 2.72.1

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

@@ -54,6 +54,7 @@ export * from './message-scroller';
 export * from './model-picker';
 export * from './multi-select';
 export * from './pagination';
+export * from './panel-tabs';
 export * from './popover';
 export * from './portal-container';
 export * from './progress';
@@ -62,13 +63,15 @@ export * from './prompt-suggestions';
 export * from './prompt-value-control';
 export * from './quick-form-field';
 export * from './radio-group';
+export { ReferenceChip, type ReferenceChipProps } from './reference-chip';
+export { getReferenceChipColors } from './reference-chip-colors';
 export * from './resizable';
 export * from './scroll-area';
 export * from './search';
 export * from './select';
 export * from './separator';
-export * from './sidebar';
 export * from './sheet';
+export * from './sidebar';
 export * from './skeleton';
 export * from './slider';
 export * from './sonner';
@@ -78,7 +81,6 @@ export * from './stats-card';
 export * from './stepper';
 export * from './switch';
 export * from './table';
-export * from './panel-tabs';
 export * from './tabs';
 export * from './textarea';
 export * from './thinking-indicator';

package/dist/components/ui/index.js

@@ -1,3 +1,5 @@
+import { ReferenceChip } from "./reference-chip.js";
+import { getReferenceChipColors } from "./reference-chip-colors.js";
 import tree_view, { TreeView } from "./tree-view.js";
 export * from "./accordion.js";
 export * from "./alert.js";
@@ -55,6 +57,7 @@ export * from "./message-scroller/index.js";
 export * from "./model-picker/index.js";
 export * from "./multi-select.js";
 export * from "./pagination.js";
+export * from "./panel-tabs.js";
 export * from "./popover.js";
 export * from "./portal-container.js";
 export * from "./progress.js";
@@ -68,8 +71,8 @@ export * from "./scroll-area.js";
 export * from "./search.js";
 export * from "./select.js";
 export * from "./separator.js";
-export * from "./sidebar/index.js";
 export * from "./sheet.js";
+export * from "./sidebar/index.js";
 export * from "./skeleton.js";
 export * from "./slider.js";
 export * from "./sonner.js";
@@ -79,7 +82,6 @@ export * from "./stats-card.js";
 export * from "./stepper.js";
 export * from "./switch.js";
 export * from "./table.js";
-export * from "./panel-tabs.js";
 export * from "./tabs.js";
 export * from "./textarea.js";
 export * from "./thinking-indicator.js";
@@ -89,4 +91,4 @@ export * from "./tool-call.js";
 export * from "./tooltip.js";
 export * from "./variable-picker/index.js";
 export * from "./variable-value-control.js";
-export { tree_view as FileTreeView, TreeView };
+export { tree_view as FileTreeView, ReferenceChip, TreeView, getReferenceChipColors };

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

@@ -40,6 +40,7 @@ const external_dompurify_namespaceObject = require("dompurify");
 var external_dompurify_default = /*#__PURE__*/ __webpack_require__.n(external_dompurify_namespaceObject);
 const external_marked_namespaceObject = require("marked");
 const external_react_namespaceObject = require("react");
+const external_reference_chip_colors_cjs_namespaceObject = require("../../reference-chip-colors.cjs");
 const external_prompt_editor_config_cjs_namespaceObject = require("../prompt-editor-config.cjs");
 const external_token_icon_markup_cjs_namespaceObject = require("./token-icon-markup.cjs");
 const marked = new external_marked_namespaceObject.Marked({
@@ -47,6 +48,7 @@ const marked = new external_marked_namespaceObject.Marked({
     gfm: true,
     breaks: true
 });
+const referenceColors = (0, external_reference_chip_colors_cjs_namespaceObject.getReferenceChipColors)().valid;
 const MARKDOWN_PREVIEW_STYLES = `
 .prompt-editor-preview { color: var(--color-foreground); }
 .prompt-editor-preview-empty { color: var(--color-muted-foreground); }
@@ -73,8 +75,8 @@ const MARKDOWN_PREVIEW_STYLES = `
 .prompt-editor-preview th { font-weight: 600; background-color: var(--color-muted); }
 .prompt-editor-preview strong { font-weight: 700; }
 .prompt-editor-preview em { font-style: italic; }
-.prompt-editor-preview .token-pill { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 4px; border-radius: 4px; font-size: 13px; line-height: 20px; vertical-align: middle; background: var(--color-info-background); color: var(--color-info-text); }
-.prompt-editor-preview .token-pill svg { display: block; flex-shrink: 0; color: var(--color-info-icon); width: 14px; height: 14px; }
+.prompt-editor-preview .token-pill { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 4px; border-radius: 4px; font-size: 13px; line-height: 20px; vertical-align: middle; background: ${referenceColors.background}; color: ${referenceColors.text}; }
+.prompt-editor-preview .token-pill svg { display: block; flex-shrink: 0; color: ${referenceColors.icon}; width: 14px; height: 14px; }
 `;
 const PURIFY_CONFIG = {
     ALLOWED_TAGS: [

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

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import dompurify from "dompurify";
 import { Marked } from "marked";
 import { useMemo } from "react";
+import { getReferenceChipColors } from "../../reference-chip-colors.js";
 import { usePromptEditorConfig } from "../prompt-editor-config.js";
 import { buildTokenIconSvgMarkup } from "./token-icon-markup.js";
 const marked = new Marked({
@@ -9,6 +10,7 @@ const marked = new Marked({
     gfm: true,
     breaks: true
 });
+const referenceColors = getReferenceChipColors().valid;
 const MARKDOWN_PREVIEW_STYLES = `
 .prompt-editor-preview { color: var(--color-foreground); }
 .prompt-editor-preview-empty { color: var(--color-muted-foreground); }
@@ -35,8 +37,8 @@ const MARKDOWN_PREVIEW_STYLES = `
 .prompt-editor-preview th { font-weight: 600; background-color: var(--color-muted); }
 .prompt-editor-preview strong { font-weight: 700; }
 .prompt-editor-preview em { font-style: italic; }
-.prompt-editor-preview .token-pill { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 4px; border-radius: 4px; font-size: 13px; line-height: 20px; vertical-align: middle; background: var(--color-info-background); color: var(--color-info-text); }
-.prompt-editor-preview .token-pill svg { display: block; flex-shrink: 0; color: var(--color-info-icon); width: 14px; height: 14px; }
+.prompt-editor-preview .token-pill { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 4px; border-radius: 4px; font-size: 13px; line-height: 20px; vertical-align: middle; background: ${referenceColors.background}; color: ${referenceColors.text}; }
+.prompt-editor-preview .token-pill svg { display: block; flex-shrink: 0; color: ${referenceColors.icon}; width: 14px; height: 14px; }
 `;
 const PURIFY_CONFIG = {
     ALLOWED_TAGS: [

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

@@ -29,8 +29,8 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
+const external_reference_chip_cjs_namespaceObject = require("../../reference-chip.cjs");
 const external_prompt_editor_config_cjs_namespaceObject = require("../prompt-editor-config.cjs");
-const external_types_cjs_namespaceObject = require("../types.cjs");
 const TOKEN_TYPE_ICON = {
     input: external_lucide_react_namespaceObject.Variable,
     output: external_lucide_react_namespaceObject.SquareFunction,
@@ -40,75 +40,20 @@ const TOKEN_TYPE_ICON = {
 };
 const TokenPillBase = ({ value, tokenType, onRemove, diffType, readonly, isInvalid, isSelected, onMouseDown })=>{
     const { strings } = (0, external_prompt_editor_config_cjs_namespaceObject.usePromptEditorConfig)();
-    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", {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_reference_chip_cjs_namespaceObject.ReferenceChip, {
+        label: value,
+        icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {}),
+        onRemove: onRemove,
+        removeLabel: strings.removeToken,
+        readOnly: readonly,
+        invalid: isInvalid && !diffType,
+        selected: isSelected,
         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": strings.removeToken,
-                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"
-                    })
-                })
-            })
-        ]
+        className: `${readonly ? 'cursor-default' : 'cursor-pointer'} ${'removed' === diffType ? 'line-through opacity-60' : ''}`,
+        style: diffType ? {
+            backgroundColor: 'added' === diffType ? 'rgba(76, 175, 80, 0.15)' : 'rgba(244, 67, 54, 0.15)'
+        } : void 0
     });
 };
 const TokenPill = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(TokenPillBase);

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

@@ -1,8 +1,8 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Database, Paperclip, SquareFunction, Variable } from "lucide-react";
 import { memo } from "react";
+import { ReferenceChip } from "../../reference-chip.js";
 import { usePromptEditorConfig } from "../prompt-editor-config.js";
-import { getPromptEditorTokenColors } from "../types.js";
 const TOKEN_TYPE_ICON = {
     input: Variable,
     output: SquareFunction,
@@ -12,75 +12,20 @@ const TOKEN_TYPE_ICON = {
 };
 const TokenPillBase = ({ value, tokenType, onRemove, diffType, readonly, isInvalid, isSelected, onMouseDown })=>{
     const { strings } = usePromptEditorConfig();
-    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", {
+    return /*#__PURE__*/ jsx(ReferenceChip, {
+        label: value,
+        icon: /*#__PURE__*/ jsx(Icon, {}),
+        onRemove: onRemove,
+        removeLabel: strings.removeToken,
+        readOnly: readonly,
+        invalid: isInvalid && !diffType,
+        selected: isSelected,
         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": strings.removeToken,
-                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"
-                    })
-                })
-            })
-        ]
+        className: `${readonly ? 'cursor-default' : 'cursor-pointer'} ${'removed' === diffType ? 'line-through opacity-60' : ''}`,
+        style: diffType ? {
+            backgroundColor: 'added' === diffType ? 'rgba(76, 175, 80, 0.15)' : 'rgba(244, 67, 54, 0.15)'
+        } : void 0
     });
 };
 const TokenPill = /*#__PURE__*/ memo(TokenPillBase);

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

@@ -29,20 +29,8 @@ __webpack_require__.d(__webpack_exports__, {
     isPromptEditorNonTextToken: ()=>isPromptEditorNonTextToken,
     isPromptEditorTextToken: ()=>isPromptEditorTextToken
 });
-const getPromptEditorTokenColors = ()=>({
-        valid: {
-            background: 'var(--color-info-background)',
-            border: 'var(--color-info-icon)',
-            text: 'var(--color-info-text)',
-            icon: 'var(--color-info-icon)'
-        },
-        invalid: {
-            background: 'var(--color-error-background)',
-            border: 'var(--color-error-icon)',
-            text: 'var(--color-error-text)',
-            icon: 'var(--color-error-icon)'
-        }
-    });
+const external_reference_chip_colors_cjs_namespaceObject = require("../reference-chip-colors.cjs");
+const getPromptEditorTokenColors = external_reference_chip_colors_cjs_namespaceObject.getReferenceChipColors;
 const getPromptEditorTokenTypeLabel = (type, labels)=>{
     switch(type){
         case 'input':

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

@@ -63,7 +63,20 @@ export interface PromptEditorTokenColorConfig {
  * Two-state palette: invalid = red, valid = blue. Backed by apollo-wind's semantic design tokens,
  * which already resolve per light/dark theme via CSS — no JS theme detection needed.
  */
-export declare const getPromptEditorTokenColors: () => Record<"valid" | "invalid", PromptEditorTokenColorConfig>;
+export declare const getPromptEditorTokenColors: () => {
+    valid: {
+        background: string;
+        border: string;
+        text: string;
+        icon: string;
+    };
+    invalid: {
+        background: string;
+        border: string;
+        text: string;
+        icon: string;
+    };
+};
 /** The token-type label subset of `PromptEditorStrings` (structural, to avoid a config↔types cycle). */
 export interface PromptEditorTokenTypeLabels {
     tokenTypeInput: string;

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

@@ -1,17 +1,5 @@
-const getPromptEditorTokenColors = ()=>({
-        valid: {
-            background: 'var(--color-info-background)',
-            border: 'var(--color-info-icon)',
-            text: 'var(--color-info-text)',
-            icon: 'var(--color-info-icon)'
-        },
-        invalid: {
-            background: 'var(--color-error-background)',
-            border: 'var(--color-error-icon)',
-            text: 'var(--color-error-text)',
-            icon: 'var(--color-error-icon)'
-        }
-    });
+import { getReferenceChipColors } from "../reference-chip-colors.js";
+const getPromptEditorTokenColors = getReferenceChipColors;
 const getPromptEditorTokenTypeLabel = (type, labels)=>{
     switch(type){
         case 'input':

package/dist/components/ui/reference-chip-colors.cjs

@@ -0,0 +1,49 @@
+"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__, {
+    getReferenceChipColors: ()=>getReferenceChipColors
+});
+const getReferenceChipColors = ()=>({
+        valid: {
+            background: 'var(--color-info-background)',
+            border: 'var(--color-info-icon)',
+            text: 'var(--color-info-text)',
+            icon: 'var(--color-info-icon)'
+        },
+        invalid: {
+            background: 'var(--color-error-background)',
+            border: 'var(--color-error-icon)',
+            text: 'var(--color-error-text)',
+            icon: 'var(--color-error-icon)'
+        }
+    });
+exports.getReferenceChipColors = __webpack_exports__.getReferenceChipColors;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "getReferenceChipColors"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/reference-chip-colors.d.ts

@@ -0,0 +1,15 @@
+/** Paired reference colors. Keep labels, icons and backgrounds on the same semantic palette. */
+export declare const getReferenceChipColors: () => {
+    valid: {
+        background: string;
+        border: string;
+        text: string;
+        icon: string;
+    };
+    invalid: {
+        background: string;
+        border: string;
+        text: string;
+        icon: string;
+    };
+};

package/dist/components/ui/reference-chip-colors.js

@@ -0,0 +1,15 @@
+const getReferenceChipColors = ()=>({
+        valid: {
+            background: 'var(--color-info-background)',
+            border: 'var(--color-info-icon)',
+            text: 'var(--color-info-text)',
+            icon: 'var(--color-info-icon)'
+        },
+        invalid: {
+            background: 'var(--color-error-background)',
+            border: 'var(--color-error-icon)',
+            text: 'var(--color-error-text)',
+            icon: 'var(--color-error-icon)'
+        }
+    });
+export { getReferenceChipColors };

package/dist/components/ui/reference-chip.cjs

@@ -0,0 +1,104 @@
+"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__, {
+    ReferenceChip: ()=>ReferenceChip
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const external_reference_chip_colors_cjs_namespaceObject = require("./reference-chip-colors.cjs");
+const ReferenceChip = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ label, icon, onRemove, removeLabel, readOnly = false, disabled = false, invalid = false, selected = false, className, style, ...props }, ref)=>{
+    const colors = (0, external_reference_chip_colors_cjs_namespaceObject.getReferenceChipColors)()[invalid ? 'invalid' : 'valid'];
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+        ...props,
+        ref: ref,
+        "data-slot": "reference-chip",
+        "data-invalid": invalid || void 0,
+        "data-selected": selected || void 0,
+        "aria-disabled": disabled || void 0,
+        className: (0, index_cjs_namespaceObject.cn)('relative inline-flex max-w-full min-w-0 items-center align-middle gap-[3px] h-5 rounded px-1 text-[13px] leading-5 outline-offset-1', selected && 'z-10', disabled && 'opacity-50', className),
+        style: {
+            backgroundColor: colors.background,
+            color: colors.text,
+            outline: selected ? `2px solid ${colors.border}` : void 0,
+            ...style
+        },
+        children: [
+            icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                "aria-hidden": "true",
+                className: "inline-flex shrink-0 [&_svg]:size-3.5 [&_img]:size-3.5",
+                style: {
+                    color: colors.icon
+                },
+                children: icon
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "min-w-0 truncate font-normal",
+                style: {
+                    fontFamily: "'Noto Sans', sans-serif"
+                },
+                children: label
+            }),
+            onRemove && !readOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                type: "button",
+                disabled: disabled,
+                "aria-label": removeLabel ?? `Remove ${label}`,
+                className: "inline-flex shrink-0 items-center justify-center p-px border-0 bg-transparent cursor-pointer rounded-[2px] w-4 h-4 text-inherit focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-current disabled:cursor-default",
+                onMouseDown: (event)=>{
+                    event.preventDefault();
+                    event.stopPropagation();
+                },
+                onClick: (event)=>{
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onRemove();
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", {
+                    "aria-hidden": "true",
+                    width: "12",
+                    height: "12",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                        d: "M18 6L6 18M6 6L18 18",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    })
+                })
+            })
+        ]
+    });
+});
+ReferenceChip.displayName = 'ReferenceChip';
+exports.ReferenceChip = __webpack_exports__.ReferenceChip;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ReferenceChip"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/reference-chip.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface ReferenceChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Display name of the referenced variable, resource or connection. */
+    label: string;
+    /** Decorative icon. Branded icons may preserve their original colors. */
+    icon?: ReactNode;
+    onRemove?: () => void;
+    /** Localized accessible name for the remove button. */
+    removeLabel?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Visual selection only. The containing editor or picker owns selection semantics. */
+    selected?: boolean;
+}
+/** Shared visual primitive. Picker behavior and editor selection remain with the host. */
+export declare const ReferenceChip: import("react").ForwardRefExoticComponent<ReferenceChipProps & import("react").RefAttributes<HTMLSpanElement>>;