@uipath/apollo-wind 2.55.0 → 2.57.0

package/dist/components/ui/model-picker/utils.d.ts

@@ -0,0 +1,121 @@
+import { type ModelBadgeKind } from './badges';
+import type { ModelPickerLabels } from './labels';
+import type { CostTier, DiscoveryModel, ModelGroup, ModelTag } from './types';
+/**
+ * Context passed to `deriveModelTags`. Carries the `labels` object,
+ * region info, test-only Recommended/Preview overrides, and the
+ * product's badge hooks.
+ */
+export interface DeriveModelTagsContext {
+    /**
+     * Strings for the built-in tag labels and tooltips. When omitted they
+     * fall back to `DEFAULT_MODEL_PICKER_LABELS` (English) — useful for
+     * tests and standalone primitive composition.
+     */
+    labels?: ModelPickerLabels;
+    /** User's home region — used to flag out-of-region models. */
+    homeRegion?: string;
+    /**
+     * Test/storybook override for the `recommended` signal. In
+     * production the signal arrives ON the DTO (`model.isRecommended`),
+     * merged into the Discovery response from Model_hub configs in
+     * `gitops-centralized-cluster` — products should not set this.
+     * When provided (even as an empty array), only listed models get the
+     * chip. Entries match `modelId` OR `modelName`, so a list authored
+     * from Model Hub config (which carries names) works as-is.
+     */
+    recommendedModelIds?: readonly string[];
+    /**
+     * Test/storybook override for the `preview` signal. Production
+     * sources it from the DTO's `isPreview`. Matches by `modelId` or
+     * `modelName`, same as `recommendedModelIds`.
+     */
+    previewModelIds?: readonly string[];
+    /**
+     * Stamp badges from the Apollo badge pool (see `MODEL_BADGES` in
+     * badges.ts). Products return pool kinds per model; the pool owns the
+     * label, tooltip, variant, and localization, so the same badge reads
+     * identically in every product. Pool badges render after the built-in
+     * derived chips (Recommended → Preview → Substituted → Deprecating →
+     * Custom → Out-of-region) and before any `customTagsFor` extras.
+     * Unknown kinds are ignored.
+     */
+    badgesFor?: (model: DiscoveryModel) => readonly ModelBadgeKind[];
+    /**
+     * Escape hatch: free-form product chips, appended last. Prefer
+     * `badgesFor` — anything worth shipping belongs in the shared badge
+     * pool so labels and colors stay consistent across products. Use this
+     * only for experiments or one-offs pending a pool addition, and
+     * register colors for new kinds via `customTagVariants`.
+     */
+    customTagsFor?: (model: DiscoveryModel) => readonly ModelTag[];
+}
+/**
+ * A model is BYO when it is served through a customer-configured
+ * connection: flagged by the Discovery subscription type, or by
+ * connection metadata (`byomDetails`, host-hydrated
+ * `byoConnectionLabel`) for catalogs whose subscription field says
+ * otherwise. Drives the BYO section and the chips that only make sense
+ * for UiPath-hosted models (Preview, Out-of-region).
+ */
+export declare const isByoModel: (m: DiscoveryModel) => boolean;
+/**
+ * Ready-made `filter` predicate for products that only offer text-generation
+ * models: drops embeddings (by API flavor — `OpenAiEmbeddings`,
+ * `GeminiEmbeddings`) and realtime (by `modelType`).
+ *
+ * The picker does NOT apply this itself: which modalities to offer is a
+ * per-product decision — an indexing or context-grounding surface picks
+ * embeddings from the same catalog. Opt in with
+ * `filter={isTextGenerationModel}`.
+ */
+export declare function isTextGenerationModel(m: DiscoveryModel): boolean;
+/**
+ * Resolves the `homeRegion` prop to a Discovery geography code. Accepts a
+ * geography code (`'EU'`) or a raw OMS region name (`'UnitedStates'`,
+ * case-insensitive, separators ignored) so hosts pass
+ * `organization.region` straight through instead of each maintaining a
+ * mapping. Unknown values resolve to `undefined` — no out-of-region chips.
+ * So does `'GLOBAL'`: it is a model routing target, not a place an org
+ * lives, and taking it as one would flag every regional model.
+ */
+export declare function resolveHomeGeography(homeRegion: string | undefined): string | undefined;
+export declare function deriveModelTags(model: DiscoveryModel, context?: DeriveModelTagsContext): ModelTag[];
+export declare function defaultCostTier(model: DiscoveryModel): CostTier | null;
+/**
+ * Returns the model identifier the gateway is *actually* routing to,
+ * if it differs from the user's stored selection. Used to surface
+ * silent substitutions (e.g., a retired model whose traffic is being
+ * routed to a replacement via a gateway rule) so the user understands
+ * what their workflow is really running against.
+ *
+ * Falls back through three sources, in order of trust:
+ *   1. `deprecationDetails.replacedBy` — the explicit replacement name.
+ *      Prefer this because it's the friendly identifier the migration
+ *      rule was authored with.
+ *   2. `effectiveModel` from the Discovery DTO — the actual upstream
+ *      model name being invoked.
+ *   3. `routingDetails.model` — the routed model when no other signal
+ *      is set.
+ *
+ * Returns null when there's no substitution.
+ */
+export declare function getSubstitutionTarget(model: DiscoveryModel): string | null;
+export type GroupStrategy = 'subscription' | 'vendor' | 'flat';
+/**
+ * Optional context for `groupModels` — lets the host override the
+ * Recommended/Preview heuristic with Model_hub-sourced lists so that
+ * grouping and chip rendering agree, and supply the `labels` object so
+ * group labels render in the host's locale.
+ */
+export interface GroupModelsContext {
+    recommendedModelIds?: readonly string[];
+    previewModelIds?: readonly string[];
+    /**
+     * Strings for group labels and hints. When omitted they fall back to
+     * `DEFAULT_MODEL_PICKER_LABELS` (English).
+     */
+    labels?: ModelPickerLabels;
+}
+export declare function groupModels(models: DiscoveryModel[], strategy?: GroupStrategy, context?: GroupModelsContext): ModelGroup[];
+export declare function filterModels(models: DiscoveryModel[], query: string): DiscoveryModel[];

package/dist/components/ui/model-picker/utils.js

@@ -0,0 +1,272 @@
+import { MODEL_BADGES } from "./badges.js";
+import { DEFAULT_MODEL_PICKER_LABELS } from "./labels.js";
+const RECOMMENDED_SUBSCRIPTION = 'UiPathOwned';
+const isByoModel = (m)=>'BYOMAdded' === m.modelSubscriptionType || 'BYOMReplacedAlternative' === m.modelSubscriptionType || 'BYOMReplacedLikeForLike' === m.modelSubscriptionType || !!m.byomDetails || !!m.byoConnectionLabel;
+function isTextGenerationModel(m) {
+    if ('Realtime' === m.modelType) return false;
+    return !(m.apiFlavor ?? '').includes('Embeddings');
+}
+const OMS_REGION_TO_GEOGRAPHY = {
+    europe: 'EU',
+    unitedstates: 'US',
+    japan: 'JA',
+    canada: 'CA',
+    australia: 'AU',
+    india: 'IN',
+    unitedkingdom: 'UK',
+    singapore: 'SI',
+    switzerland: 'CH',
+    unitedarabemirates: 'UAE',
+    southkorea: 'SK'
+};
+const GEOGRAPHY_CODES = new Set([
+    'EU',
+    'CA',
+    'US',
+    'SI',
+    'JA',
+    'AU',
+    'IN',
+    'UK',
+    'CH',
+    'UAE',
+    'SK',
+    'GLOBAL'
+]);
+function resolveHomeGeography(homeRegion) {
+    const raw = homeRegion?.trim();
+    if (!raw) return;
+    const upper = raw.toUpperCase();
+    if ('GLOBAL' === upper) return;
+    if (GEOGRAPHY_CODES.has(upper)) return upper;
+    return OMS_REGION_TO_GEOGRAPHY[raw.toLowerCase().replace(/[\s_-]/g, '')];
+}
+function listMatchesModel(ids, model) {
+    return ids.includes(model.modelId) || ids.includes(model.modelName);
+}
+function deriveModelTags(model, context = {}) {
+    const tags = [];
+    const labels = context.labels ?? DEFAULT_MODEL_PICKER_LABELS;
+    const isByo = isByoModel(model);
+    const isRecommended = void 0 !== context.recommendedModelIds ? listMatchesModel(context.recommendedModelIds, model) : model.isRecommended ?? (model.modelSubscriptionType === RECOMMENDED_SUBSCRIPTION && !model.isPreview && !model.deprecationDetails?.usageEndDate);
+    if (isRecommended) tags.push({
+        kind: 'recommended',
+        label: labels.recommendedTag,
+        tooltip: labels.recommendedTagTooltip
+    });
+    const isPreview = void 0 !== context.previewModelIds ? listMatchesModel(context.previewModelIds, model) : !!model.isPreview;
+    if (!isByo && isPreview) tags.push({
+        kind: 'preview',
+        label: labels.previewTag
+    });
+    const substitutionTarget = getSubstitutionTarget(model);
+    if (substitutionTarget) tags.push({
+        kind: 'substituted',
+        label: labels.substitutedTag(substitutionTarget),
+        tooltip: labels.substitutedTagTooltip(substitutionTarget)
+    });
+    else if (model.deprecationDetails?.usageEndDate) {
+        const date = formatDate(model.deprecationDetails.usageEndDate);
+        tags.push({
+            kind: 'deprecating',
+            label: labels.deprecatingTag(date),
+            tooltip: model.deprecationDetails.replacedBy ? labels.deprecatingTagTooltip(model.deprecationDetails.replacedBy) : void 0
+        });
+    }
+    if (isByo) tags.push({
+        kind: 'custom',
+        label: labels.customTag
+    });
+    if (!isByo) {
+        const geo = model.routingDetails?.geography;
+        const home = 'GLOBAL' === context.homeRegion ? void 0 : context.homeRegion;
+        if (geo && home && 'GLOBAL' !== geo && geo !== home) tags.push({
+            kind: 'out-of-region',
+            label: labels.outOfRegionTag(geo),
+            tooltip: labels.outOfRegionTagTooltip(home)
+        });
+    }
+    const poolBadges = context.badgesFor?.(model) ?? (()=>{
+        const tier = defaultCostTier(model);
+        return tier ? [
+            `cost-${tier}`
+        ] : [];
+    })();
+    for (const kind of poolBadges){
+        const def = MODEL_BADGES[kind];
+        if (def) tags.push({
+            kind,
+            label: labels[def.label],
+            tooltip: def.tooltip ? labels[def.tooltip] : void 0,
+            variant: def.variant
+        });
+    }
+    if (context.customTagsFor) {
+        const extra = context.customTagsFor(model);
+        if (extra?.length) tags.push(...extra);
+    }
+    return tags;
+}
+const DEFAULT_BASIC_THRESHOLD = 100;
+const DEFAULT_PREMIUM_THRESHOLD = 500;
+function defaultCostTier(model) {
+    const costDetails = model.modelDetails?.costDetails;
+    const inputCost = costDetails?.flatCosts?.inputTokenCost ?? costDetails?.tieredCosts?.[0]?.inputTokenCost;
+    if (null == inputCost) return null;
+    if (inputCost < DEFAULT_BASIC_THRESHOLD) return 'basic';
+    if (inputCost < DEFAULT_PREMIUM_THRESHOLD) return 'standard';
+    return 'premium';
+}
+function getSubstitutionTarget(model) {
+    const effective = model.effectiveModel;
+    if (effective && effective !== model.modelName && effective !== model.modelId) return model.deprecationDetails?.replacedBy ?? effective;
+    const routed = model.routingDetails?.model;
+    if (routed && routed !== model.modelName && routed !== model.modelId) return model.deprecationDetails?.replacedBy ?? routed;
+    return null;
+}
+const VENDOR_LABELS = {
+    AnthropicClaude: 'Anthropic',
+    OpenAi: 'OpenAI',
+    AzureOpenAi: 'Azure OpenAI',
+    VertexAi: 'Google Vertex',
+    AwsBedrock: 'AWS Bedrock'
+};
+function vendorLabel(vendor) {
+    return VENDOR_LABELS[vendor] ?? vendor;
+}
+function formatDate(iso) {
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime())) return iso;
+    const dateOnly = /^\d{4}-\d{2}-\d{2}$/.test(iso);
+    return date.toLocaleDateString(void 0, {
+        month: 'short',
+        year: 'numeric',
+        ...dateOnly ? {
+            timeZone: 'UTC'
+        } : {}
+    });
+}
+function buildSubscriptionMatchers(ctx) {
+    const isRecommended = (m)=>void 0 !== ctx.recommendedModelIds ? listMatchesModel(ctx.recommendedModelIds, m) : m.isRecommended ?? (m.modelSubscriptionType === RECOMMENDED_SUBSCRIPTION && !m.isPreview && !m.deprecationDetails?.usageEndDate);
+    const isPreview = (m)=>void 0 !== ctx.previewModelIds ? listMatchesModel(ctx.previewModelIds, m) : !!m.isPreview;
+    const labels = ctx.labels ?? DEFAULT_MODEL_PICKER_LABELS;
+    return [
+        {
+            key: 'byo',
+            label: labels.byoGroup,
+            hint: labels.byoGroupHint,
+            match: (m)=>isByoModel(m)
+        },
+        {
+            key: 'recommended',
+            label: labels.recommendedGroup,
+            hint: labels.recommendedGroupHint,
+            match: (m)=>isRecommended(m) && !m.deprecationDetails?.usageEndDate
+        },
+        {
+            key: 'preview',
+            label: labels.previewGroup,
+            hint: labels.previewGroupHint,
+            match: (m)=>isPreview(m) && !isByoModel(m) && !m.deprecationDetails?.usageEndDate
+        },
+        {
+            key: 'more',
+            label: labels.moreGroup,
+            hint: labels.moreGroupHint,
+            match: (m)=>!isByoModel(m) && !m.deprecationDetails?.usageEndDate
+        },
+        {
+            key: 'deprecating',
+            label: labels.deprecatingGroup,
+            hint: labels.deprecatingGroupHint,
+            match: (m)=>!!m.deprecationDetails?.usageEndDate
+        },
+        {
+            key: 'shared',
+            label: labels.otherGroup,
+            match: ()=>true
+        }
+    ];
+}
+function groupModels(models, strategy = "subscription", context = {}) {
+    const labels = context.labels ?? DEFAULT_MODEL_PICKER_LABELS;
+    if ('flat' === strategy) return [
+        {
+            key: 'all',
+            label: labels.allModelsGroup,
+            models
+        }
+    ];
+    if ('vendor' === strategy) {
+        const byVendor = new Map();
+        const byo = [];
+        for (const m of models){
+            if (isByoModel(m)) {
+                byo.push(m);
+                continue;
+            }
+            const k = m.vendor || 'Other';
+            if (!byVendor.has(k)) byVendor.set(k, []);
+            byVendor.get(k).push(m);
+        }
+        const groups = [];
+        if (byo.length) groups.push({
+            key: 'byo',
+            label: labels.byoGroup,
+            models: byo
+        });
+        const matchers = buildSubscriptionMatchers(context);
+        const ranks = new Map();
+        const lifecycleRank = (m)=>{
+            let r = ranks.get(m);
+            if (void 0 === r) {
+                const i = matchers.findIndex((g)=>g.match(m));
+                r = -1 === i ? matchers.length : i;
+                ranks.set(m, r);
+            }
+            return r;
+        };
+        for (const [key, list] of byVendor.entries())groups.push({
+            key,
+            label: vendorLabel(key),
+            models: list.sort((a, b)=>lifecycleRank(a) - lifecycleRank(b))
+        });
+        return groups;
+    }
+    const matchers = buildSubscriptionMatchers(context);
+    const buckets = {};
+    for (const m of models){
+        const bucket = matchers.find((g)=>g.match(m));
+        if (!bucket) continue;
+        const list = buckets[bucket.key] ?? (buckets[bucket.key] = []);
+        list.push(m);
+    }
+    const out = [];
+    for (const g of matchers){
+        const list = buckets[g.key];
+        if (list?.length) out.push({
+            key: g.key,
+            label: g.label,
+            hint: g.hint,
+            models: list
+        });
+    }
+    return out;
+}
+function filterModels(models, query) {
+    const q = query.trim().toLowerCase();
+    if (!q) return models;
+    return models.filter((m)=>{
+        const haystack = [
+            m.modelName,
+            m.displayName,
+            m.modelId,
+            m.vendor,
+            m.modelFamily,
+            m.effectiveModel,
+            m.byoConnectionLabel
+        ].filter(Boolean).join(' ').toLowerCase();
+        return haystack.includes(q);
+    });
+}
+export { defaultCostTier, deriveModelTags, filterModels, getSubstitutionTarget, groupModels, isByoModel, isTextGenerationModel, resolveHomeGeography };

package/dist/components/ui/multi-select.cjs

@@ -33,17 +33,18 @@ const external_badge_cjs_namespaceObject = require("./badge.cjs");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_checkbox_cjs_namespaceObject = require("./checkbox.cjs");
 const external_command_cjs_namespaceObject = require("./command.cjs");
+const external_input_group_cjs_namespaceObject = require("./input-group.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
+const external_input_group_context_cjs_namespaceObject = require("./input-group-context.cjs");
 const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ id, options, selected, onChange, placeholder = 'Select items...', emptyMessage = 'No items found.', className, maxSelected, disabled = false, searchPlaceholder = 'Search...', clearAllText, onBlur, error, errorId, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref)=>{
     const [open, setOpen] = external_react_namespaceObject.useState(false);
+    const group = (0, external_input_group_context_cjs_namespaceObject.useInputGroup)();
+    const groupAnchor = group.anchor;
+    const grouped = group.inGroup;
     const generatedId = external_react_namespaceObject.useId();
     const validationId = errorId ?? `${id ?? `multi-select-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
     const handleUnselect = (value)=>{
         onChange(selected.filter((s)=>s !== value));
     };
@@ -60,10 +61,74 @@ const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ i
     const handleClearAll = ()=>{
         onChange([]);
     };
+    const validation = (0, external_input_group_context_cjs_namespaceObject.useControlValidation)(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const triggerProps = {
+        id,
+        role: 'combobox',
+        'aria-expanded': open,
+        ...validation.aria,
+        'aria-label': id ? void 0 : selected.length > 0 ? `${selected.length} ${1 === selected.length ? 'item' : 'items'} selected` : placeholder,
+        disabled: disabled || group.disabled
+    };
+    const triggerContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: (0, index_cjs_namespaceObject.cn)('flex flex-wrap gap-1 flex-1', grouped && 'min-h-6.5 items-center py-0.5 future:min-h-6 future:py-px'),
+                children: 0 === selected.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "text-foreground-muted",
+                    children: placeholder
+                }) : selected.map((value)=>{
+                    const option = options.find((opt)=>opt.value === value);
+                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_badge_cjs_namespaceObject.Badge, {
+                        variant: "secondary",
+                        className: "mr-1 future:bg-surface-raised future:hover:bg-surface-raised",
+                        onClick: (e)=>{
+                            e.stopPropagation();
+                            handleUnselect(value);
+                        },
+                        children: [
+                            option?.label,
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                type: "button",
+                                "aria-label": `Remove ${option?.label}`,
+                                className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer bg-transparent border-0 p-0 inline-flex items-center",
+                                onMouseDown: (e)=>{
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                },
+                                onClick: (e)=>{
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleUnselect(value);
+                                },
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
+                                    className: "h-3 w-3 text-muted-foreground hover:text-foreground"
+                                })
+                            })
+                        ]
+                    }, value);
+                })
+            }),
+            grouped ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "flex h-6.5 shrink-0 items-center self-start future:h-6",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronsUpDown, {
+                    className: "h-4 w-4 opacity-50"
+                })
+            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronsUpDown, {
+                className: "h-4 w-4 shrink-0 opacity-50"
+            })
+        ]
+    });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         ref: ref,
         "data-slot": "multi-select",
-        className: (0, index_cjs_namespaceObject.cn)('relative', className),
+        className: (0, index_cjs_namespaceObject.cn)('relative', grouped && 'min-w-0 flex-1', className),
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
                 open: open,
@@ -74,63 +139,22 @@ const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ i
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
                         asChild: true,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
-                            id: id,
+                        children: grouped ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupTrigger, {
+                            ...triggerProps,
+                            className: (0, index_cjs_namespaceObject.cn)('items-start', selected.length > 0 && 'h-auto'),
+                            children: triggerContent
+                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
                             variant: "outline",
-                            role: "combobox",
-                            "aria-expanded": open,
-                            "aria-invalid": error ? true : ariaInvalid,
-                            "aria-describedby": describedBy || void 0,
-                            "aria-errormessage": error ? validationId : ariaErrorMessage,
-                            "aria-label": id ? void 0 : selected.length > 0 ? `${selected.length} ${1 === selected.length ? 'item' : 'items'} selected` : placeholder,
+                            ...triggerProps,
                             className: (0, index_cjs_namespaceObject.cn)('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
-                            disabled: disabled,
-                            children: [
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                    className: "flex flex-wrap gap-1 flex-1",
-                                    children: 0 === selected.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                        className: "text-foreground-muted",
-                                        children: placeholder
-                                    }) : selected.map((value)=>{
-                                        const option = options.find((opt)=>opt.value === value);
-                                        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_badge_cjs_namespaceObject.Badge, {
-                                            variant: "secondary",
-                                            className: "mr-1 future:bg-surface-raised future:hover:bg-surface-raised",
-                                            onClick: (e)=>{
-                                                e.stopPropagation();
-                                                handleUnselect(value);
-                                            },
-                                            children: [
-                                                option?.label,
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                                                    type: "button",
-                                                    "aria-label": `Remove ${option?.label}`,
-                                                    className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer bg-transparent border-0 p-0 inline-flex items-center",
-                                                    onMouseDown: (e)=>{
-                                                        e.preventDefault();
-                                                        e.stopPropagation();
-                                                    },
-                                                    onClick: (e)=>{
-                                                        e.preventDefault();
-                                                        e.stopPropagation();
-                                                        handleUnselect(value);
-                                                    },
-                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
-                                                        className: "h-3 w-3 text-muted-foreground hover:text-foreground"
-                                                    })
-                                                })
-                                            ]
-                                        }, value);
-                                    })
-                                }),
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronsUpDown, {
-                                    className: "h-4 w-4 shrink-0 opacity-50"
-                                })
-                            ]
+                            children: triggerContent
                         })
                     }),
+                    groupAnchor && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverAnchor, {
+                        virtualRef: groupAnchor
+                    }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.PopoverContent, {
-                        className: "w-[--radix-popover-trigger-width] p-0",
+                        className: "w-(--radix-popover-trigger-width) p-0",
                         align: "start",
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.Command, {
@@ -184,7 +208,7 @@ const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ i
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
                 id: validationId,
                 children: error
             })