@uipath/apollo-wind 2.32.3 → 2.33.0

package/dist/components/ui/variable-picker/index.cjs

@@ -0,0 +1,39 @@
+"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__, {
+    VariablePicker: ()=>external_variable_picker_cjs_namespaceObject.VariablePicker,
+    VariablePickerContent: ()=>external_variable_picker_cjs_namespaceObject.VariablePickerContent
+});
+const external_variable_picker_cjs_namespaceObject = require("./variable-picker.cjs");
+exports.VariablePicker = __webpack_exports__.VariablePicker;
+exports.VariablePickerContent = __webpack_exports__.VariablePickerContent;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "VariablePicker",
+    "VariablePickerContent"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/variable-picker/index.d.ts

@@ -0,0 +1,2 @@
+export type { VariablePickerContentProps, VariablePickerItem, VariablePickerProps, } from './variable-picker';
+export { VariablePicker, VariablePickerContent } from './variable-picker';

package/dist/components/ui/variable-picker/index.js

@@ -0,0 +1,2 @@
+import { VariablePicker, VariablePickerContent } from "./variable-picker.js";
+export { VariablePicker, VariablePickerContent };

package/dist/components/ui/variable-picker/variable-picker.cjs

@@ -0,0 +1,246 @@
+"use strict";
+"use client";
+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__, {
+    VariablePicker: ()=>VariablePicker,
+    VariablePickerContent: ()=>VariablePickerContent
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const external_command_cjs_namespaceObject = require("../command.cjs");
+const external_popover_cjs_namespaceObject = require("../popover.cjs");
+const index_cjs_namespaceObject = require("../../../lib/index.cjs");
+const TYPE_LABEL = {
+    string: 'T',
+    number: '#',
+    boolean: '?',
+    object: '{}',
+    array: '[]',
+    null: '∅'
+};
+function VariableTypeBadge({ item }) {
+    const type = item.type ?? (item.children?.length ? 'object' : 'string');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+        "aria-hidden": "true",
+        className: "inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded border border-border bg-surface-overlay px-0.5 font-mono text-[9px] font-semibold leading-none text-foreground-muted [&_svg]:size-2.75",
+        children: item.icon ?? TYPE_LABEL[type] ?? type
+    });
+}
+function itemMatches(item, normalizedQuery) {
+    return item.label.toLowerCase().includes(normalizedQuery) || item.value?.toLowerCase().includes(normalizedQuery) === true;
+}
+function filterItems(items, query) {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery) return items;
+    return items.flatMap((item)=>{
+        if (itemMatches(item, normalizedQuery)) return [
+            item
+        ];
+        const children = filterItems(item.children ?? [], normalizedQuery);
+        return children.length ? [
+            {
+                ...item,
+                children
+            }
+        ] : [];
+    });
+}
+function VariableRows({ items, filtering, expandedIds, onToggle, onSelect, insertLabel, depth = 0 }) {
+    return items.map((item)=>{
+        const hasChildren = !!item.children?.length;
+        const selectable = item.selectable ?? (!hasChildren || void 0 !== item.value);
+        const expanded = filtering || expandedIds.has(item.id);
+        const handleKeyDown = (event)=>{
+            if (!hasChildren || 'ArrowLeft' !== event.key && 'ArrowRight' !== event.key) return;
+            const shouldExpand = 'ArrowRight' === event.key;
+            if (expandedIds.has(item.id) !== shouldExpand) onToggle(item.id);
+            event.preventDefault();
+        };
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            role: "none",
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.CommandItem, {
+                    value: item.id,
+                    "aria-label": item.label,
+                    disabled: item.disabled,
+                    onKeyDown: handleKeyDown,
+                    onSelect: ()=>hasChildren ? onToggle(item.id) : selectable && onSelect(item),
+                    "data-expanded": hasChildren ? expanded : void 0,
+                    className: "group min-h-0 gap-2 rounded-none py-1 pr-3.5 text-xs hover:bg-surface-overlay data-[selected=true]:bg-surface-overlay data-[selected=true]:text-foreground",
+                    style: {
+                        paddingLeft: `${8 + 16 * depth}px`
+                    },
+                    children: [
+                        hasChildren ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "grid size-3 shrink-0 place-items-center",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                                size: 10,
+                                className: (0, index_cjs_namespaceObject.cn)('!size-2.5 text-foreground-subtle transition-transform duration-100', !expanded && '-rotate-90')
+                            })
+                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "size-3 shrink-0"
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VariableTypeBadge, {
+                            item: item
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "min-w-0 flex-1 truncate font-mono text-foreground",
+                            children: item.label
+                        }),
+                        item.trailingAdornment,
+                        selectable && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                            type: "button",
+                            "aria-label": `${insertLabel}: ${item.label}`,
+                            disabled: item.disabled,
+                            onClick: (event)=>{
+                                event.stopPropagation();
+                                onSelect(item);
+                            },
+                            className: "grid size-5 shrink-0 place-items-center text-foreground-muted opacity-0 transition-opacity hover:text-foreground group-hover:opacity-100 group-data-[selected=true]:opacity-100 focus-visible:opacity-100",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.SquareArrowRightEnter, {
+                                className: "!size-3.5"
+                            })
+                        })
+                    ]
+                }),
+                hasChildren && expanded && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VariableRows, {
+                    items: item.children,
+                    filtering: filtering,
+                    expandedIds: expandedIds,
+                    onToggle: onToggle,
+                    onSelect: onSelect,
+                    insertLabel: insertLabel,
+                    depth: depth + 1
+                })
+            ]
+        }, item.id);
+    });
+}
+function VariablePickerContent({ items, onSelect, placeholder = 'Search variables...', emptyText = 'No variables found.', query: controlledQuery, initialQuery = '', onQueryChange, defaultExpandedIds, insertLabel = 'Insert variable', className }) {
+    const [uncontrolledQuery, setUncontrolledQuery] = (0, external_react_namespaceObject.useState)(initialQuery);
+    const [expandedIds, setExpandedIds] = (0, external_react_namespaceObject.useState)(()=>new Set(defaultExpandedIds ?? items.slice(0, 1).map((item)=>item.id)));
+    const query = controlledQuery ?? uncontrolledQuery;
+    const filteredItems = (0, external_react_namespaceObject.useMemo)(()=>filterItems(items, query), [
+        items,
+        query
+    ]);
+    const setQuery = (nextQuery)=>{
+        if (void 0 === controlledQuery) setUncontrolledQuery(nextQuery);
+        onQueryChange?.(nextQuery);
+    };
+    const toggleExpanded = (id)=>{
+        setExpandedIds((current)=>{
+            const next = new Set(current);
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+            return next;
+        });
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.Command, {
+        shouldFilter: false,
+        className: className,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandInput, {
+                value: query,
+                onValueChange: setQuery,
+                placeholder: placeholder,
+                autoFocus: true
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.CommandList, {
+                className: "max-h-72 bg-surface-overlay/40 py-1.5",
+                children: [
+                    0 === filteredItems.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandEmpty, {
+                        children: emptyText
+                    }),
+                    filteredItems.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VariableRows, {
+                        items: filteredItems,
+                        filtering: query.trim().length > 0,
+                        expandedIds: expandedIds,
+                        onToggle: toggleExpanded,
+                        onSelect: onSelect,
+                        insertLabel: insertLabel
+                    })
+                ]
+            })
+        ]
+    });
+}
+function VariablePicker({ children, align = 'end', disabled = false, open: controlledOpen, onOpenChange, triggerLabel = 'Insert', triggerAriaLabel = 'Insert variable', className, onSelect, ...contentProps }) {
+    const [uncontrolledOpen, setUncontrolledOpen] = (0, external_react_namespaceObject.useState)(false);
+    const open = controlledOpen ?? uncontrolledOpen;
+    const setOpen = (nextOpen)=>{
+        if (void 0 === controlledOpen) setUncontrolledOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    };
+    const selectItem = (item)=>{
+        onSelect(item);
+        setOpen(false);
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+        open: open,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                asChild: true,
+                disabled: disabled,
+                children: children ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                    type: "button",
+                    "aria-label": triggerAriaLabel,
+                    className: "flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Braces, {
+                            size: 12
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            children: triggerLabel
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                            size: 9
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
+                align: align,
+                className: (0, index_cjs_namespaceObject.cn)('w-[280px] max-w-[calc(100vw-1rem)] overflow-hidden p-0', className),
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VariablePickerContent, {
+                    ...contentProps,
+                    onSelect: selectItem
+                })
+            })
+        ]
+    });
+}
+exports.VariablePicker = __webpack_exports__.VariablePicker;
+exports.VariablePickerContent = __webpack_exports__.VariablePickerContent;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "VariablePicker",
+    "VariablePickerContent"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/variable-picker/variable-picker.d.ts

@@ -0,0 +1,42 @@
+import type { ReactElement, ReactNode } from 'react';
+export interface VariablePickerItem {
+    id: string;
+    label: string;
+    value?: string;
+    children?: VariablePickerItem[];
+    disabled?: boolean;
+    /** Branches are selectable when this is true or when they provide a value. */
+    selectable?: boolean;
+    icon?: ReactNode;
+    /** Consumer-defined type name. Known primitive types use the standard compact badge. */
+    type?: string;
+    /** Optional content rendered at the trailing edge, such as a type label or status chip. */
+    trailingAdornment?: ReactNode;
+    metadata?: unknown;
+}
+export interface VariablePickerContentProps {
+    items: VariablePickerItem[];
+    onSelect: (item: VariablePickerItem) => void;
+    placeholder?: string;
+    emptyText?: string;
+    query?: string;
+    initialQuery?: string;
+    onQueryChange?: (query: string) => void;
+    defaultExpandedIds?: Iterable<string>;
+    insertLabel?: string;
+    className?: string;
+}
+export interface VariablePickerProps extends VariablePickerContentProps {
+    /** A single element that Radix can use as the popover trigger. */
+    children?: ReactElement;
+    align?: 'start' | 'center' | 'end';
+    disabled?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    triggerLabel?: string;
+    triggerAriaLabel?: string;
+}
+/** Search and tree content for embedding in a consumer-owned popover or caret-anchored surface. */
+export declare function VariablePickerContent({ items, onSelect, placeholder, emptyText, query: controlledQuery, initialQuery, onQueryChange, defaultExpandedIds, insertLabel, className, }: VariablePickerContentProps): import("react/jsx-runtime").JSX.Element;
+/** Popover-wrapped convenience picker for inserting a variable into a consumer-owned value. */
+export declare function VariablePicker({ children, align, disabled, open: controlledOpen, onOpenChange, triggerLabel, triggerAriaLabel, className, onSelect, ...contentProps }: VariablePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/variable-picker/variable-picker.js

@@ -0,0 +1,209 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Braces, ChevronDown, SquareArrowRightEnter } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "../command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover.js";
+import { cn } from "../../../lib/index.js";
+const TYPE_LABEL = {
+    string: 'T',
+    number: '#',
+    boolean: '?',
+    object: '{}',
+    array: '[]',
+    null: '∅'
+};
+function VariableTypeBadge({ item }) {
+    const type = item.type ?? (item.children?.length ? 'object' : 'string');
+    return /*#__PURE__*/ jsx("span", {
+        "aria-hidden": "true",
+        className: "inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded border border-border bg-surface-overlay px-0.5 font-mono text-[9px] font-semibold leading-none text-foreground-muted [&_svg]:size-2.75",
+        children: item.icon ?? TYPE_LABEL[type] ?? type
+    });
+}
+function itemMatches(item, normalizedQuery) {
+    return item.label.toLowerCase().includes(normalizedQuery) || item.value?.toLowerCase().includes(normalizedQuery) === true;
+}
+function filterItems(items, query) {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery) return items;
+    return items.flatMap((item)=>{
+        if (itemMatches(item, normalizedQuery)) return [
+            item
+        ];
+        const children = filterItems(item.children ?? [], normalizedQuery);
+        return children.length ? [
+            {
+                ...item,
+                children
+            }
+        ] : [];
+    });
+}
+function VariableRows({ items, filtering, expandedIds, onToggle, onSelect, insertLabel, depth = 0 }) {
+    return items.map((item)=>{
+        const hasChildren = !!item.children?.length;
+        const selectable = item.selectable ?? (!hasChildren || void 0 !== item.value);
+        const expanded = filtering || expandedIds.has(item.id);
+        const handleKeyDown = (event)=>{
+            if (!hasChildren || 'ArrowLeft' !== event.key && 'ArrowRight' !== event.key) return;
+            const shouldExpand = 'ArrowRight' === event.key;
+            if (expandedIds.has(item.id) !== shouldExpand) onToggle(item.id);
+            event.preventDefault();
+        };
+        return /*#__PURE__*/ jsxs("div", {
+            role: "none",
+            children: [
+                /*#__PURE__*/ jsxs(CommandItem, {
+                    value: item.id,
+                    "aria-label": item.label,
+                    disabled: item.disabled,
+                    onKeyDown: handleKeyDown,
+                    onSelect: ()=>hasChildren ? onToggle(item.id) : selectable && onSelect(item),
+                    "data-expanded": hasChildren ? expanded : void 0,
+                    className: "group min-h-0 gap-2 rounded-none py-1 pr-3.5 text-xs hover:bg-surface-overlay data-[selected=true]:bg-surface-overlay data-[selected=true]:text-foreground",
+                    style: {
+                        paddingLeft: `${8 + 16 * depth}px`
+                    },
+                    children: [
+                        hasChildren ? /*#__PURE__*/ jsx("span", {
+                            className: "grid size-3 shrink-0 place-items-center",
+                            children: /*#__PURE__*/ jsx(ChevronDown, {
+                                size: 10,
+                                className: cn('!size-2.5 text-foreground-subtle transition-transform duration-100', !expanded && '-rotate-90')
+                            })
+                        }) : /*#__PURE__*/ jsx("span", {
+                            className: "size-3 shrink-0"
+                        }),
+                        /*#__PURE__*/ jsx(VariableTypeBadge, {
+                            item: item
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            className: "min-w-0 flex-1 truncate font-mono text-foreground",
+                            children: item.label
+                        }),
+                        item.trailingAdornment,
+                        selectable && /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            "aria-label": `${insertLabel}: ${item.label}`,
+                            disabled: item.disabled,
+                            onClick: (event)=>{
+                                event.stopPropagation();
+                                onSelect(item);
+                            },
+                            className: "grid size-5 shrink-0 place-items-center text-foreground-muted opacity-0 transition-opacity hover:text-foreground group-hover:opacity-100 group-data-[selected=true]:opacity-100 focus-visible:opacity-100",
+                            children: /*#__PURE__*/ jsx(SquareArrowRightEnter, {
+                                className: "!size-3.5"
+                            })
+                        })
+                    ]
+                }),
+                hasChildren && expanded && /*#__PURE__*/ jsx(VariableRows, {
+                    items: item.children,
+                    filtering: filtering,
+                    expandedIds: expandedIds,
+                    onToggle: onToggle,
+                    onSelect: onSelect,
+                    insertLabel: insertLabel,
+                    depth: depth + 1
+                })
+            ]
+        }, item.id);
+    });
+}
+function VariablePickerContent({ items, onSelect, placeholder = 'Search variables...', emptyText = 'No variables found.', query: controlledQuery, initialQuery = '', onQueryChange, defaultExpandedIds, insertLabel = 'Insert variable', className }) {
+    const [uncontrolledQuery, setUncontrolledQuery] = useState(initialQuery);
+    const [expandedIds, setExpandedIds] = useState(()=>new Set(defaultExpandedIds ?? items.slice(0, 1).map((item)=>item.id)));
+    const query = controlledQuery ?? uncontrolledQuery;
+    const filteredItems = useMemo(()=>filterItems(items, query), [
+        items,
+        query
+    ]);
+    const setQuery = (nextQuery)=>{
+        if (void 0 === controlledQuery) setUncontrolledQuery(nextQuery);
+        onQueryChange?.(nextQuery);
+    };
+    const toggleExpanded = (id)=>{
+        setExpandedIds((current)=>{
+            const next = new Set(current);
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+            return next;
+        });
+    };
+    return /*#__PURE__*/ jsxs(Command, {
+        shouldFilter: false,
+        className: className,
+        children: [
+            /*#__PURE__*/ jsx(CommandInput, {
+                value: query,
+                onValueChange: setQuery,
+                placeholder: placeholder,
+                autoFocus: true
+            }),
+            /*#__PURE__*/ jsxs(CommandList, {
+                className: "max-h-72 bg-surface-overlay/40 py-1.5",
+                children: [
+                    0 === filteredItems.length && /*#__PURE__*/ jsx(CommandEmpty, {
+                        children: emptyText
+                    }),
+                    filteredItems.length > 0 && /*#__PURE__*/ jsx(VariableRows, {
+                        items: filteredItems,
+                        filtering: query.trim().length > 0,
+                        expandedIds: expandedIds,
+                        onToggle: toggleExpanded,
+                        onSelect: onSelect,
+                        insertLabel: insertLabel
+                    })
+                ]
+            })
+        ]
+    });
+}
+function VariablePicker({ children, align = 'end', disabled = false, open: controlledOpen, onOpenChange, triggerLabel = 'Insert', triggerAriaLabel = 'Insert variable', className, onSelect, ...contentProps }) {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+    const open = controlledOpen ?? uncontrolledOpen;
+    const setOpen = (nextOpen)=>{
+        if (void 0 === controlledOpen) setUncontrolledOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    };
+    const selectItem = (item)=>{
+        onSelect(item);
+        setOpen(false);
+    };
+    return /*#__PURE__*/ jsxs(Popover, {
+        open: open,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ jsx(PopoverTrigger, {
+                asChild: true,
+                disabled: disabled,
+                children: children ?? /*#__PURE__*/ jsxs("button", {
+                    type: "button",
+                    "aria-label": triggerAriaLabel,
+                    className: "flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
+                    children: [
+                        /*#__PURE__*/ jsx(Braces, {
+                            size: 12
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            children: triggerLabel
+                        }),
+                        /*#__PURE__*/ jsx(ChevronDown, {
+                            size: 9
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(PopoverContent, {
+                align: align,
+                className: cn('w-[280px] max-w-[calc(100vw-1rem)] overflow-hidden p-0', className),
+                children: /*#__PURE__*/ jsx(VariablePickerContent, {
+                    ...contentProps,
+                    onSelect: selectItem
+                })
+            })
+        ]
+    });
+}
+export { VariablePicker, VariablePickerContent };