@uipath/apollo-wind 2.70.0 → 2.72.0

package/dist/components/ui/quick-form-field/utils.cjs

@@ -24,14 +24,12 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    DEFAULT_SELECT_OPTIONS: ()=>DEFAULT_SELECT_OPTIONS,
-    formatDateTimeValue: ()=>formatDateTimeValue,
-    formatDateValue: ()=>formatDateValue,
-    getLockedDisplayValue: ()=>getLockedDisplayValue,
-    parseDateValue: ()=>parseDateValue,
+    toDateOnlyString: ()=>toDateOnlyString,
     parseListValue: ()=>parseListValue,
-    toDateOnlyString: ()=>toDateOnlyString
+    DEFAULT_SELECT_OPTIONS: ()=>DEFAULT_SELECT_OPTIONS,
+    formatDateValue: ()=>formatDateValue
 });
+const date_value_cjs_namespaceObject = require("../../../lib/date-value.cjs");
 const DEFAULT_SELECT_OPTIONS = [
     {
         label: 'Option 1',
@@ -54,17 +52,6 @@ function parseListValue(value) {
         return [];
     }
 }
-const DATE_ONLY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
-function parseDateValue(value) {
-    if (DATE_ONLY_PATTERN.test(value)) {
-        const [year, month, day] = value.split('-').map(Number);
-        const date = new Date(year, month - 1, day);
-        const isValid = !Number.isNaN(date.getTime()) && date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
-        return isValid ? date : void 0;
-    }
-    const date = new Date(value);
-    return Number.isNaN(date.getTime()) ? void 0 : date;
-}
 function toDateOnlyString(date) {
     const year = date.getFullYear();
     const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -72,61 +59,20 @@ function toDateOnlyString(date) {
     return `${year}-${month}-${day}`;
 }
 function formatDateValue(value) {
-    const date = parseDateValue(value);
+    const date = (0, date_value_cjs_namespaceObject.toDateValue)(value);
     return date ? date.toLocaleDateString(void 0, {
         year: 'numeric',
         month: 'long',
         day: 'numeric'
     }) : value;
 }
-function formatDateTimeValue(value) {
-    const date = parseDateValue(value);
-    return date ? date.toLocaleString(void 0, {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: '2-digit'
-    }) : value;
-}
-function getLockedDisplayValue(fieldType, value, options, booleanLabels = {
-    trueLabel: 'True',
-    falseLabel: 'False'
-}) {
-    switch(fieldType){
-        case 'boolean':
-            if ('true' === value) return booleanLabels.trueLabel;
-            if ('false' === value) return booleanLabels.falseLabel;
-            return '';
-        case 'date':
-            return value ? formatDateValue(value) : '';
-        case 'datetime':
-            return value ? formatDateTimeValue(value) : '';
-        case 'single-select':
-            return options.find((option)=>option.value === value)?.label ?? value;
-        case 'multi-select':
-            {
-                const parsed = parseListValue(value);
-                if (0 === parsed.length && value && '[]' !== value) return value;
-                return parsed.map((v)=>options.find((option)=>option.value === v)?.label ?? v).join(', ');
-            }
-        default:
-            return value;
-    }
-}
 exports.DEFAULT_SELECT_OPTIONS = __webpack_exports__.DEFAULT_SELECT_OPTIONS;
-exports.formatDateTimeValue = __webpack_exports__.formatDateTimeValue;
 exports.formatDateValue = __webpack_exports__.formatDateValue;
-exports.getLockedDisplayValue = __webpack_exports__.getLockedDisplayValue;
-exports.parseDateValue = __webpack_exports__.parseDateValue;
 exports.parseListValue = __webpack_exports__.parseListValue;
 exports.toDateOnlyString = __webpack_exports__.toDateOnlyString;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "DEFAULT_SELECT_OPTIONS",
-    "formatDateTimeValue",
     "formatDateValue",
-    "getLockedDisplayValue",
-    "parseDateValue",
     "parseListValue",
     "toDateOnlyString"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];

package/dist/components/ui/quick-form-field/utils.d.ts

@@ -1,29 +1,7 @@
-import type { QuickFieldType, QuickFormFieldOption } from './types';
+import type { QuickFormFieldOption } from './types';
 export declare const DEFAULT_SELECT_OPTIONS: QuickFormFieldOption[];
 export declare function parseListValue(value: string): string[];
-/**
- * Parses a date field's stored value, returning undefined for empty or invalid input.
- *
- * Date-only strings (`YYYY-MM-DD`) are parsed as a local date instead of going through
- * `new Date(string)` directly -- the latter treats date-only strings as UTC midnight,
- * which rolls over to the previous day once formatted in a negative-UTC-offset
- * timezone. Full ISO timestamps (which already carry explicit time/zone info) go
- * through `new Date` as-is.
- */
-export declare function parseDateValue(value: string): Date | undefined;
-/** Formats a Date as a local `YYYY-MM-DD` string, the inverse of parseDateValue's date-only path. */
+/** Formats a Date as a local `YYYY-MM-DD` string, which `toDateValue` reads back as a local date. */
 export declare function toDateOnlyString(date: Date): string;
 /** Formats a date field's value for display, falling back to the raw value if it isn't a valid date. */
 export declare function formatDateValue(value: string): string;
-/** Formats a datetime field's value, falling back to the raw value when unparseable. */
-export declare function formatDateTimeValue(value: string): string;
-/**
- * Computes the plain-text shown in place of the real control once a field is locked.
- * Boolean/single-select/multi-select resolve their stored value to a display label;
- * everything else (including an invalid date, so the component never throws on
- * external input) falls back to the raw value.
- */
-export declare function getLockedDisplayValue(fieldType: QuickFieldType, value: string, options: QuickFormFieldOption[], booleanLabels?: {
-    trueLabel: string;
-    falseLabel: string;
-}): string;

package/dist/components/ui/quick-form-field/utils.js

@@ -1,3 +1,4 @@
+import { toDateValue } from "../../../lib/date-value.js";
 const DEFAULT_SELECT_OPTIONS = [
     {
         label: 'Option 1',
@@ -20,17 +21,6 @@ function parseListValue(value) {
         return [];
     }
 }
-const DATE_ONLY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
-function parseDateValue(value) {
-    if (DATE_ONLY_PATTERN.test(value)) {
-        const [year, month, day] = value.split('-').map(Number);
-        const date = new Date(year, month - 1, day);
-        const isValid = !Number.isNaN(date.getTime()) && date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
-        return isValid ? date : void 0;
-    }
-    const date = new Date(value);
-    return Number.isNaN(date.getTime()) ? void 0 : date;
-}
 function toDateOnlyString(date) {
     const year = date.getFullYear();
     const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -38,46 +28,11 @@ function toDateOnlyString(date) {
     return `${year}-${month}-${day}`;
 }
 function formatDateValue(value) {
-    const date = parseDateValue(value);
+    const date = toDateValue(value);
     return date ? date.toLocaleDateString(void 0, {
         year: 'numeric',
         month: 'long',
         day: 'numeric'
     }) : value;
 }
-function formatDateTimeValue(value) {
-    const date = parseDateValue(value);
-    return date ? date.toLocaleString(void 0, {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: '2-digit'
-    }) : value;
-}
-function getLockedDisplayValue(fieldType, value, options, booleanLabels = {
-    trueLabel: 'True',
-    falseLabel: 'False'
-}) {
-    switch(fieldType){
-        case 'boolean':
-            if ('true' === value) return booleanLabels.trueLabel;
-            if ('false' === value) return booleanLabels.falseLabel;
-            return '';
-        case 'date':
-            return value ? formatDateValue(value) : '';
-        case 'datetime':
-            return value ? formatDateTimeValue(value) : '';
-        case 'single-select':
-            return options.find((option)=>option.value === value)?.label ?? value;
-        case 'multi-select':
-            {
-                const parsed = parseListValue(value);
-                if (0 === parsed.length && value && '[]' !== value) return value;
-                return parsed.map((v)=>options.find((option)=>option.value === v)?.label ?? v).join(', ');
-            }
-        default:
-            return value;
-    }
-}
-export { DEFAULT_SELECT_OPTIONS, formatDateTimeValue, formatDateValue, getLockedDisplayValue, parseDateValue, parseListValue, toDateOnlyString };
+export { DEFAULT_SELECT_OPTIONS, formatDateValue, parseListValue, toDateOnlyString };

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>>;

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

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/index.js";
+import { getReferenceChipColors } from "./reference-chip-colors.js";
+const ReferenceChip = /*#__PURE__*/ forwardRef(({ label, icon, onRemove, removeLabel, readOnly = false, disabled = false, invalid = false, selected = false, className, style, ...props }, ref)=>{
+    const colors = getReferenceChipColors()[invalid ? 'invalid' : 'valid'];
+    return /*#__PURE__*/ 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: 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__*/ 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__*/ jsx("span", {
+                className: "min-w-0 truncate font-normal",
+                style: {
+                    fontFamily: "'Noto Sans', sans-serif"
+                },
+                children: label
+            }),
+            onRemove && !readOnly && /*#__PURE__*/ 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__*/ jsx("svg", {
+                    "aria-hidden": "true",
+                    width: "12",
+                    height: "12",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    children: /*#__PURE__*/ jsx("path", {
+                        d: "M18 6L6 18M6 6L18 18",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    })
+                })
+            })
+        ]
+    });
+});
+ReferenceChip.displayName = 'ReferenceChip';
+export { ReferenceChip };

package/dist/components/ui/variable-value-control.cjs

@@ -27,11 +27,13 @@ __webpack_require__.d(__webpack_exports__, {
     VariableValueControl: ()=>VariableValueControl
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const aria_ids_cjs_namespaceObject = require("../forms/aria-ids.cjs");
 const value_mode_strings_cjs_namespaceObject = require("./field-addons/value-mode-strings.cjs");
 const external_input_group_cjs_namespaceObject = require("./input-group.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
+const external_reference_chip_cjs_namespaceObject = require("./reference-chip.cjs");
 const index_cjs_namespaceObject = require("./variable-picker/index.cjs");
 const external_lib_index_cjs_namespaceObject = require("../../lib/index.cjs");
 const VariableValueControl = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ id, value, onChange, onBlur, inputRef, variables, disabled, placeholder, strings, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, controlProps }, ref)=>{
@@ -72,9 +74,9 @@ const VariableValueControl = /*#__PURE__*/ external_react_namespaceObject.forwar
                 "aria-label": ariaLabel,
                 "aria-labelledby": ariaLabelledBy,
                 "aria-describedby": (0, aria_ids_cjs_namespaceObject.joinIds)(ariaDescribedBy, controlProps?.['aria-describedby']),
-                children: reference && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                    className: "truncate font-mono text-sm",
-                    children: reference
+                children: reference && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_reference_chip_cjs_namespaceObject.ReferenceChip, {
+                    label: reference,
+                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Variable, {})
                 })
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {

package/dist/components/ui/variable-value-control.js

@@ -1,9 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Variable } from "lucide-react";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { joinIds } from "../forms/aria-ids.js";
 import { DEFAULT_VALUE_MODE_STRINGS } from "./field-addons/value-mode-strings.js";
 import { InputGroupPopoverTrigger } from "./input-group.js";
 import { Popover, PopoverContent } from "./popover.js";
+import { ReferenceChip } from "./reference-chip.js";
 import { VariablePickerContent } from "./variable-picker/index.js";
 import { composeRefs } from "../../lib/index.js";
 const VariableValueControl = /*#__PURE__*/ forwardRef(({ id, value, onChange, onBlur, inputRef, variables, disabled, placeholder, strings, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, controlProps }, ref)=>{
@@ -44,9 +46,9 @@ const VariableValueControl = /*#__PURE__*/ forwardRef(({ id, value, onChange, on
                 "aria-label": ariaLabel,
                 "aria-labelledby": ariaLabelledBy,
                 "aria-describedby": joinIds(ariaDescribedBy, controlProps?.['aria-describedby']),
-                children: reference && /*#__PURE__*/ jsx("span", {
-                    className: "truncate font-mono text-sm",
-                    children: reference
+                children: reference && /*#__PURE__*/ jsx(ReferenceChip, {
+                    label: reference,
+                    icon: /*#__PURE__*/ jsx(Variable, {})
                 })
             }),
             /*#__PURE__*/ jsx(PopoverContent, {