@mastra/playground-ui 61.0.0 → 62.0.0-alpha.0

package/dist/filter-bar-chip-fXsAVwGZ.js

@@ -0,0 +1,1230 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { CheckIcon, LockIcon, XIcon, SearchIcon, PencilIcon } from 'lucide-react';
+import { createContext, useContext, useRef, useMemo, useState, useCallback, forwardRef, useEffect } from 'react';
+import { i as isFilterBarGroup, p as parseFieldValue } from './types-CIPrYAzY.js';
+import { c as comboboxStyles } from './combobox-styles-DeCDIVg-.js';
+import { Combobox } from '@base-ui/react/combobox';
+import { S as Spinner } from './spinner-CFtgt3oI.js';
+import { useFluidMenu, FluidMenuItems, useFluidMenuItemRef } from './primitives/fluid-menu.es.js';
+import { c as cn } from './cn-coERSHz5.js';
+import { B as Button } from './Button-D76HGlPP.js';
+import { K as Kbd } from './kbd-DECuVAC9.js';
+import { controlHeight } from './primitives/control-size.es.js';
+import { FLOATING_POSITION_METHOD } from './primitives/floating.es.js';
+import { inputSurfaceAndFocusWithinStyle } from './primitives/form-element.es.js';
+import { MENU_SIDE_OFFSET } from './primitives/menu-item.es.js';
+import { usePortalContainer } from './primitives/portal-container.es.js';
+import { useIsApplePlatform } from './hooks/use-keyboard-shortcut-label.es.js';
+
+import './filter-bar-chip.css';const ROOT_GROUP_ID = "root";
+const normalize = (value) => Array.isArray(value) ? { logic: "and", nodes: value } : value;
+const denormalize = (expr, flat) => flat ? expr.nodes.filter((node) => !isFilterBarGroup(node)) : expr;
+const flattenItems = (expr) => {
+  const out = [];
+  const walk = (nodes, groupId) => {
+    for (const node of nodes) {
+      if (isFilterBarGroup(node)) walk(node.nodes, node.id);
+      else out.push(groupId ? { item: node, groupId } : { item: node });
+    }
+  };
+  walk(expr.nodes, void 0);
+  return out;
+};
+const findGroupIn = (nodes, groupId) => {
+  for (const node of nodes) {
+    if (!isFilterBarGroup(node)) continue;
+    if (node.id === groupId) return node;
+    const nested = findGroupIn(node.nodes, groupId);
+    if (nested) return nested;
+  }
+  return void 0;
+};
+const findGroup = (expr, groupId) => findGroupIn(expr.nodes, groupId);
+const groupDepth = (expr, groupId) => {
+  const walk = (nodes, depth) => {
+    for (const node of nodes) {
+      if (!isFilterBarGroup(node)) continue;
+      if (node.id === groupId) return depth;
+      const nested = walk(node.nodes, depth + 1);
+      if (nested) return nested;
+    }
+    return 0;
+  };
+  return walk(expr.nodes, 1);
+};
+const countLeaves = (group) => group.nodes.reduce((sum, node) => sum + (isFilterBarGroup(node) ? countLeaves(node) : 1), 0);
+const collectIds = (group) => [
+  group.id,
+  ...group.nodes.flatMap((node) => isFilterBarGroup(node) ? collectIds(node) : [node.id])
+];
+const mapGroup = (nodes, groupId, fn) => nodes.map((node) => {
+  if (!isFilterBarGroup(node)) return node;
+  return node.id === groupId ? fn(node) : { ...node, nodes: mapGroup(node.nodes, groupId, fn) };
+});
+const mapItems = (nodes, fn) => nodes.map((node) => isFilterBarGroup(node) ? { ...node, nodes: mapItems(node.nodes, fn) } : fn(node));
+const filterNodes = (nodes, keep) => nodes.filter(keep).map((node) => isFilterBarGroup(node) ? { ...node, nodes: filterNodes(node.nodes, keep) } : node);
+const updateItem = (expr, itemId, patch) => ({
+  ...expr,
+  nodes: mapItems(expr.nodes, (item) => item.id === itemId ? { ...item, ...patch } : item)
+});
+const removeNode = (expr, id) => ({
+  ...expr,
+  nodes: filterNodes(expr.nodes, (node) => node.id !== id)
+});
+const pruneNodes = (nodes) => nodes.flatMap((node) => {
+  if (!isFilterBarGroup(node)) return [node];
+  const pruned = pruneNodes(node.nodes);
+  return pruned.length === 0 ? [] : [{ ...node, nodes: pruned }];
+});
+const pruneEmptyGroups = (expr) => ({
+  ...expr,
+  nodes: pruneNodes(expr.nodes)
+});
+const insertItem = (expr, groupId, item) => {
+  if (!groupId || groupId === ROOT_GROUP_ID) return { ...expr, nodes: [...expr.nodes, item] };
+  return { ...expr, nodes: mapGroup(expr.nodes, groupId, (group) => ({ ...group, nodes: [...group.nodes, item] })) };
+};
+const setGroupLogic = (expr, groupId, logic) => {
+  if (groupId === ROOT_GROUP_ID) return { ...expr, logic };
+  return { ...expr, nodes: mapGroup(expr.nodes, groupId, (group) => ({ ...group, logic })) };
+};
+const createGroup = (expr, parentId, group) => {
+  if (!parentId || parentId === ROOT_GROUP_ID) return { ...expr, nodes: [...expr.nodes, group] };
+  return { ...expr, nodes: mapGroup(expr.nodes, parentId, (parent) => ({ ...parent, nodes: [...parent.nodes, group] })) };
+};
+const clearRemovable = (expr, pinned) => pruneEmptyGroups({
+  ...expr,
+  nodes: filterNodes(expr.nodes, (node) => isFilterBarGroup(node) || pinned.has(node.id))
+});
+
+const SEGMENTS_LEFT_TO_RIGHT = ["field", "operator", "value", "remove"];
+const SEGMENTS_RIGHT_TO_LEFT = [...SEGMENTS_LEFT_TO_RIGHT].reverse();
+const DEFAULT_MAX_GROUP_DEPTH = 3;
+const FILTER_BAR_SCOPE_ATTR = "data-filter-bar-scope";
+const scopeOf = (el) => el?.closest(`[${FILTER_BAR_SCOPE_ATTR}]`) ?? null;
+const stageOf = (draft) => {
+  if (!draft) return "none";
+  return draft.operatorId ? "operator" : "field";
+};
+const FilterBarContext = createContext(null);
+function useFilterBarContext() {
+  const ctx = useContext(FilterBarContext);
+  if (!ctx) throw new Error("FilterBar compound components must be rendered inside <FilterBar>.");
+  return ctx;
+}
+let idCounter = 0;
+function createFilterId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") return crypto.randomUUID();
+  idCounter += 1;
+  return `filter-${idCounter}`;
+}
+function emptyValueFor(operator) {
+  return operator?.arity === "many" ? [] : "";
+}
+const idsOf = (nodes, out = /* @__PURE__ */ new Set()) => {
+  for (const node of nodes) {
+    out.add(node.id);
+    if (isFilterBarGroup(node)) idsOf(node.nodes, out);
+  }
+  return out;
+};
+const mergeNodes = (prev, next, leaving) => {
+  const nextById = new Map(next.map((node) => [node.id, node]));
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const old of prev) {
+    const fresh = nextById.get(old.id);
+    if (fresh) {
+      seen.add(old.id);
+      out.push(
+        isFilterBarGroup(fresh) && isFilterBarGroup(old) ? { ...fresh, nodes: mergeNodes(old.nodes, fresh.nodes, leaving) } : fresh
+      );
+    } else if (leaving.has(old.id)) {
+      out.push(old);
+    }
+  }
+  for (const node of next) if (!seen.has(node.id)) out.push(node);
+  return out;
+};
+function FilterBarProvider({
+  fields,
+  operators,
+  value,
+  onValueChange,
+  createItemId,
+  maxDepth = DEFAULT_MAX_GROUP_DEPTH,
+  ariaLabel,
+  children
+}) {
+  const segments = useRef(/* @__PURE__ */ new Map());
+  const inputRef = useRef(null);
+  const flat = Array.isArray(value);
+  const expression = useMemo(() => normalize(value), [value]);
+  const exprRef = useRef(expression);
+  exprRef.current = expression;
+  const [announcement, setAnnouncement] = useState("");
+  const [nonRemovableIds, setNonRemovableIds] = useState(() => /* @__PURE__ */ new Set());
+  const [inputTarget, setInputTarget] = useState(void 0);
+  const [openGroupId, setOpenGroupId] = useState(null);
+  const emit = useCallback(
+    (next) => onValueChange(denormalize(next, flat)),
+    [onValueChange, flat]
+  );
+  const getField = useCallback((fieldId) => fields.find((f) => f.id === fieldId), [fields]);
+  const getOperator = useCallback((operatorId) => operators.find((o) => o.id === operatorId), [operators]);
+  const getFieldOperators = useCallback(
+    (field) => {
+      if (!field.operators) return operators;
+      const allowed = new Set(field.operators);
+      return operators.filter((o) => allowed.has(o.id));
+    },
+    [operators]
+  );
+  const announce = useCallback((message) => setAnnouncement(message), []);
+  const [draft, setDraftState] = useState(null);
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+  const [lastCommit, setLastCommit] = useState(null);
+  const settleCommit = useCallback(() => setLastCommit((prev) => prev ? { ...prev, glint: false } : null), []);
+  const [leavingIds, setLeavingIds] = useState(() => /* @__PURE__ */ new Set());
+  const settleRemove = useCallback((id) => {
+    setLeavingIds((prev) => {
+      if (!prev.has(id)) return prev;
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+  const markLeaving = useCallback((ids) => {
+    const list = [...ids];
+    if (list.length === 0) return;
+    setLeavingIds((prev) => /* @__PURE__ */ new Set([...prev, ...list]));
+  }, []);
+  const renderedTreeRef = useRef(expression.nodes);
+  const { rendered, items, leaving, rootGroupOf } = useMemo(() => {
+    const present = idsOf(expression.nodes);
+    let rendered2 = leavingIds.size === 0 ? expression : { ...expression, nodes: mergeNodes(renderedTreeRef.current, expression.nodes, leavingIds) };
+    if (lastCommit && !present.has(lastCommit.item.id)) {
+      rendered2 = insertItem(rendered2, lastCommit.groupId, lastCommit.item);
+    }
+    renderedTreeRef.current = rendered2.nodes;
+    const shown = idsOf(rendered2.nodes);
+    const leaving2 = new Set([...leavingIds].filter((id) => shown.has(id) && !present.has(id)));
+    const rootGroupOf2 = /* @__PURE__ */ new Map();
+    for (const node of rendered2.nodes) {
+      if (isFilterBarGroup(node))
+        for (const { item } of flattenItems({ nodes: [node] })) rootGroupOf2.set(item.id, node.id);
+    }
+    return { rendered: rendered2, items: flattenItems(rendered2).map((e) => e.item), leaving: leaving2, rootGroupOf: rootGroupOf2 };
+  }, [expression, lastCommit, leavingIds]);
+  const newItemId = useCallback(
+    (fieldId) => createItemId && inputTarget === void 0 ? createItemId(fieldId) : createFilterId(),
+    [createItemId, inputTarget]
+  );
+  const setDraft = useCallback(
+    (next) => {
+      setLastCommit(null);
+      setDraftState(
+        (prev) => next ? {
+          ...next,
+          id: prev?.fieldId === next.fieldId ? prev.id : newItemId(next.fieldId),
+          from: stageOf(prev),
+          groupId: inputTarget
+        } : null
+      );
+    },
+    [newItemId, inputTarget]
+  );
+  const commitDraft = useCallback(
+    ({ fieldId, operatorId }, value2) => {
+      const id = draftRef.current?.id ?? newItemId(fieldId);
+      const groupId = draftRef.current?.groupId ?? inputTarget;
+      const item = { id, fieldId, operatorId, value: value2 };
+      emit(insertItem(exprRef.current, groupId, item));
+      setLastCommit({ item, from: stageOf(draftRef.current), glint: true, groupId });
+      setDraftState(null);
+      announce("Filter added");
+    },
+    [emit, announce, newItemId, inputTarget]
+  );
+  const updateItem$1 = useCallback(
+    (id, patch) => {
+      emit(updateItem(exprRef.current, id, patch));
+    },
+    [emit]
+  );
+  const removeItem = useCallback(
+    (id) => {
+      markLeaving([id]);
+      emit(removeNode(exprRef.current, id));
+      setLastCommit(null);
+      announce("Filter removed");
+    },
+    [emit, announce, markLeaving]
+  );
+  const releaseInputTarget = useCallback((gone) => {
+    setInputTarget((prev) => prev && gone.has(prev) ? void 0 : prev);
+  }, []);
+  const removeGroup = useCallback(
+    (groupId) => {
+      const expr = exprRef.current;
+      const group = findGroup(expr, groupId);
+      const gone = new Set(group ? collectIds(group) : [groupId]);
+      markLeaving(gone);
+      emit(removeNode(expr, groupId));
+      setLastCommit(null);
+      setDraftState(null);
+      releaseInputTarget(gone);
+      setOpenGroupId((prev) => prev === groupId ? null : prev);
+      announce("Advanced filter removed");
+    },
+    [emit, announce, markLeaving, releaseInputTarget]
+  );
+  const addGroup = useCallback(
+    (parentId, logic) => {
+      const group = { id: createFilterId(), kind: "group", logic, nodes: [] };
+      emit(createGroup(exprRef.current, parentId, group));
+      setLastCommit(null);
+      setDraftState(null);
+      setInputTarget(group.id);
+      announce(parentId ? "Nested group added" : "Advanced filter added");
+      return group.id;
+    },
+    [emit, announce]
+  );
+  const setLogic = useCallback(
+    (groupId, logic) => {
+      emit(setGroupLogic(exprRef.current, groupId, logic));
+      announce(`Conditions joined with ${logic}`);
+    },
+    [emit, announce]
+  );
+  const getGroupDepth = useCallback((groupId) => groupDepth(exprRef.current, groupId), []);
+  const setOpenGroup = useCallback(
+    (groupId) => {
+      setOpenGroupId(groupId);
+      if (groupId !== null) return;
+      const expr = exprRef.current;
+      const pruned = pruneEmptyGroups(expr);
+      const kept = idsOf(pruned.nodes);
+      const gone = new Set([...idsOf(expr.nodes)].filter((id) => !kept.has(id)));
+      if (gone.size > 0) {
+        markLeaving(gone);
+        emit(pruned);
+      }
+      setDraftState(null);
+      setInputTarget(void 0);
+    },
+    [emit, markLeaving]
+  );
+  const focusInput = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+  const openGroupInput = useCallback(
+    (groupId) => {
+      setInputTarget(groupId);
+      setDraftState(null);
+      if (groupId === void 0) focusInput();
+    },
+    [focusInput]
+  );
+  const clear = useCallback(() => {
+    const expr = exprRef.current;
+    const next = clearRemovable(expr, nonRemovableIds);
+    const kept = idsOf(next.nodes);
+    const gone = new Set([...idsOf(expr.nodes)].filter((id) => !kept.has(id)));
+    markLeaving(gone);
+    emit(next);
+    setLastCommit(null);
+    setDraftState(null);
+    setInputTarget(void 0);
+    setOpenGroupId(null);
+    announce("All filters removed");
+  }, [emit, announce, nonRemovableIds, markLeaving]);
+  const hasRemovableItems = flattenItems(expression).some(({ item }) => !nonRemovableIds.has(item.id));
+  const registerNonRemovable = useCallback((itemId, nonRemovable) => {
+    setNonRemovableIds((prev) => {
+      if (prev.has(itemId) === nonRemovable) return prev;
+      const next = new Set(prev);
+      if (nonRemovable) next.add(itemId);
+      else next.delete(itemId);
+      return next;
+    });
+  }, []);
+  const registerSegment = useCallback((itemId, segment, el) => {
+    const key = `${itemId}:${segment}`;
+    if (el) segments.current.set(key, el);
+    else segments.current.delete(key);
+  }, []);
+  const registerInput = useCallback((el) => {
+    if (el) inputRef.current = el;
+    else if (!inputRef.current?.isConnected) inputRef.current = null;
+  }, []);
+  const renderedRef = useRef(items);
+  renderedRef.current = items;
+  const rootGroupRef = useRef(rootGroupOf);
+  rootGroupRef.current = rootGroupOf;
+  const focusChip = useCallback((fromIndex, direction, segment) => {
+    const items2 = renderedRef.current;
+    const rootGroupOf2 = rootGroupRef.current;
+    const origin = items2[fromIndex - direction];
+    const originEl = origin ? [...SEGMENTS_LEFT_TO_RIGHT].map((s) => segments.current.get(`${origin.id}:${s}`)).find(Boolean) : null;
+    const scope = scopeOf(typeof document === "undefined" ? null : document.activeElement) ?? scopeOf(originEl) ?? void 0;
+    const fallbacks = direction === -1 ? SEGMENTS_RIGHT_TO_LEFT : SEGMENTS_LEFT_TO_RIGHT;
+    for (let i = fromIndex; i >= 0 && i < items2.length; i += direction) {
+      const item = items2[i];
+      if (!item) break;
+      const ownerIds = [item.id, rootGroupOf2.get(item.id)].filter((id) => id !== void 0);
+      for (const ownerId of ownerIds) {
+        for (const candidate of [segment, ...fallbacks]) {
+          const el = segments.current.get(`${ownerId}:${candidate}`);
+          if (el && (scope === void 0 || scopeOf(el) === scope)) {
+            el.focus();
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  }, []);
+  const focusAfterRemove = useCallback(
+    (removedIndex) => {
+      if (focusChip(removedIndex + 1, 1, "value") || focusChip(removedIndex - 1, -1, "value")) return;
+      focusInput();
+    },
+    [focusChip, focusInput]
+  );
+  const ctx = useMemo(
+    () => ({
+      fields,
+      operators,
+      items,
+      expression: rendered,
+      groupsEnabled: !flat,
+      maxDepth,
+      draft,
+      setDraft,
+      commitDraft,
+      lastCommit,
+      settleCommit,
+      updateItem: updateItem$1,
+      removeItem,
+      leaving,
+      settleRemove,
+      clear,
+      hasRemovableItems,
+      registerNonRemovable,
+      addGroup,
+      removeGroup,
+      setLogic,
+      getGroupDepth,
+      openGroupId,
+      setOpenGroup,
+      inputTarget,
+      openGroupInput,
+      getField,
+      getOperator,
+      getFieldOperators,
+      registerSegment,
+      registerInput,
+      focusChip,
+      focusInput,
+      focusAfterRemove,
+      announce,
+      announcement,
+      ariaLabel
+    }),
+    [
+      fields,
+      operators,
+      items,
+      rendered,
+      flat,
+      maxDepth,
+      draft,
+      setDraft,
+      commitDraft,
+      lastCommit,
+      settleCommit,
+      updateItem$1,
+      removeItem,
+      leaving,
+      settleRemove,
+      clear,
+      hasRemovableItems,
+      registerNonRemovable,
+      addGroup,
+      removeGroup,
+      setLogic,
+      getGroupDepth,
+      openGroupId,
+      setOpenGroup,
+      inputTarget,
+      openGroupInput,
+      getField,
+      getOperator,
+      getFieldOperators,
+      registerSegment,
+      registerInput,
+      focusChip,
+      focusInput,
+      focusAfterRemove,
+      announce,
+      announcement,
+      ariaLabel
+    ]
+  );
+  return /* @__PURE__ */ jsx(FilterBarContext.Provider, { value: ctx, children });
+}
+
+function FilterBarOptionLabel({ option }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    option.start,
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label ?? option.value })
+  ] });
+}
+const FluidItem = forwardRef((props, ref) => /* @__PURE__ */ jsx(Combobox.Item, { ref: useFluidMenuItemRef(ref), ...props }));
+FluidItem.displayName = "FilterBarOptionItem";
+function FilterBarOptionList({
+  getKey,
+  renderOption,
+  isSelected,
+  isLoading,
+  error,
+  emptyText = "No results.",
+  "aria-label": ariaLabel,
+  "aria-multiselectable": multiselectable
+}) {
+  const idle = !isLoading && error === void 0;
+  const menu = useFluidMenu();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isLoading && /* @__PURE__ */ jsxs(Combobox.Status, { className: comboboxStyles.empty, children: [
+      /* @__PURE__ */ jsx(Spinner, { size: "sm" }),
+      /* @__PURE__ */ jsx("span", { children: "Loading…" })
+    ] }),
+    !isLoading && error !== void 0 && /* @__PURE__ */ jsx(Combobox.Status, { className: comboboxStyles.empty, children: "Couldn't load values." }),
+    /* @__PURE__ */ jsx(Combobox.Empty, { className: comboboxStyles.empty, children: idle ? emptyText : null }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          comboboxStyles.listScroller,
+          "max-h-[min(var(--spacing-dropdown),60dvh)]",
+          menu.containerClassName
+        ),
+        ...menu.getContainerProps({}),
+        children: /* @__PURE__ */ jsx(FluidMenuItems, { menu, children: /* @__PURE__ */ jsx(
+          Combobox.List,
+          {
+            "aria-label": ariaLabel,
+            "aria-multiselectable": multiselectable,
+            className: comboboxStyles.list,
+            children: (option) => {
+              const selected = isSelected?.(option) ?? false;
+              return /* @__PURE__ */ jsxs(
+                FluidItem,
+                {
+                  value: option,
+                  "data-selected": selected || void 0,
+                  className: cn(comboboxStyles.item, "min-w-0"),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1.5 truncate", children: renderOption(option) }),
+                    /* @__PURE__ */ jsx("span", { className: comboboxStyles.itemRightSlot, children: /* @__PURE__ */ jsx("span", { className: comboboxStyles.checkContainer, children: isSelected ? selected && /* @__PURE__ */ jsx(CheckIcon, { className: comboboxStyles.checkIcon }) : /* @__PURE__ */ jsx(Combobox.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: comboboxStyles.checkIcon }) }) }) })
+                  ]
+                },
+                getKey(option)
+              );
+            }
+          }
+        ) })
+      }
+    )
+  ] });
+}
+
+function matchesQuery(text, query) {
+  const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
+  if (terms.length === 0) return true;
+  const haystack = text.toLowerCase();
+  return terms.every((term) => haystack.includes(term));
+}
+function matchesQueryFilter(item, query, itemToString) {
+  return matchesQuery(itemToString ? itemToString(item) : String(item), query);
+}
+
+const DEBOUNCE_MS = 150;
+const BOOLEAN_OPTIONS = [
+  { value: "true", label: "True" },
+  { value: "false", label: "False" }
+];
+const getFieldSuggestions = (field) => field?.suggestions ?? (field?.type === "boolean" ? BOOLEAN_OPTIONS : void 0);
+function useValueSuggestions({
+  field,
+  operatorId,
+  query,
+  enabled
+}) {
+  const suggestions = getFieldSuggestions(field);
+  const resolver = typeof suggestions === "function" ? suggestions : void 0;
+  const staticOptions = Array.isArray(suggestions) ? suggestions : void 0;
+  const [remote, setRemote] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(void 0);
+  const requestId = useRef(0);
+  const resolverRef = useRef(resolver);
+  resolverRef.current = resolver;
+  const hasResolver = Boolean(resolver);
+  useEffect(() => {
+    if (!hasResolver || !enabled) {
+      setRemote([]);
+      setIsLoading(false);
+      setError(void 0);
+      return;
+    }
+    const id = ++requestId.current;
+    const controller = new AbortController();
+    setIsLoading(true);
+    const timer = setTimeout(() => {
+      Promise.resolve().then(() => resolverRef.current?.({ query, operatorId, signal: controller.signal }) ?? []).then((result) => {
+        if (id !== requestId.current) return;
+        setRemote(result);
+        setError(void 0);
+        setIsLoading(false);
+      }).catch((err) => {
+        if (id !== requestId.current || controller.signal.aborted) return;
+        setError(err);
+        setIsLoading(false);
+      });
+    }, DEBOUNCE_MS);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [hasResolver, enabled, query, operatorId]);
+  const options = useMemo(() => {
+    if (staticOptions) return staticOptions.filter((o) => matchesQuery(o.label ?? o.value, query));
+    return remote;
+  }, [staticOptions, remote, query]);
+  return {
+    options,
+    isLoading: Boolean(resolver) && isLoading,
+    error,
+    hasSuggestions: Boolean(suggestions)
+  };
+}
+
+const toStrings = (value) => Array.isArray(value) ? value.map(String) : [];
+function useValueStep({ field, operator, query, enabled, initialValue, onCommit }) {
+  const isMany = operator?.arity === "many";
+  const [selected, setSelected] = useState(() => toStrings(initialValue));
+  const initialValueRef = useRef(initialValue);
+  initialValueRef.current = initialValue;
+  useEffect(() => {
+    setSelected(enabled ? toStrings(initialValueRef.current) : []);
+  }, [enabled]);
+  const freeTextOperator = operator?.freeText === true;
+  const suggestions = useValueSuggestions({
+    field: freeTextOperator ? void 0 : field,
+    operatorId: operator?.id ?? "",
+    query,
+    enabled
+  });
+  const type = field?.type;
+  const allowFreeText = (!field?.strict || freeTextOperator) && type !== "boolean";
+  const toggle = useCallback((value) => {
+    setSelected((current) => current.includes(value) ? current.filter((v) => v !== value) : [...current, value]);
+  }, []);
+  const commit = useCallback(
+    (values) => onCommit(Array.isArray(values) ? values.map((v) => parseFieldValue(type, v)) : parseFieldValue(type, values)),
+    [onCommit, type]
+  );
+  const handleSelect = useCallback(
+    (option) => {
+      if (isMany) toggle(option.value);
+      else commit(option.value);
+    },
+    [isMany, toggle, commit]
+  );
+  const commitSelection = useCallback(() => {
+    if (selected.length === 0) return false;
+    commit(selected);
+    return true;
+  }, [selected, commit]);
+  const canCommitFreeText = useCallback(
+    (text) => allowFreeText && text.length > 0 && (type !== "number" || Number.isFinite(Number(text))) && // A text-match literal needs a word: letters, marks, or digits.
+    (!freeTextOperator || /[\p{L}\p{M}\p{N}]/u.test(text)),
+    [allowFreeText, freeTextOperator, type]
+  );
+  const commitFreeText = useCallback(() => {
+    const text = query.trim();
+    if (!canCommitFreeText(text)) return false;
+    commit(isMany ? selected.includes(text) ? selected : [...selected, text] : text);
+    return true;
+  }, [canCommitFreeText, query, isMany, selected, commit]);
+  const handleKeyDown = useCallback(
+    (event, highlighted) => {
+      if (event.key !== "Enter") return false;
+      if (isMany && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        return commitSelection() || commitFreeText();
+      }
+      if (highlighted === null) {
+        event.preventDefault();
+        return commitFreeText();
+      }
+      return false;
+    },
+    [isMany, commitSelection, commitFreeText]
+  );
+  return {
+    isMany,
+    selected,
+    toggle,
+    options: suggestions.options,
+    isLoading: suggestions.isLoading,
+    error: suggestions.error,
+    hasSuggestions: suggestions.hasSuggestions,
+    allowFreeText,
+    /** True when the current query can be committed as free text (non-empty, numeric when the field is a number). */
+    canCommitQuery: canCommitFreeText(query.trim()),
+    handleSelect,
+    handleKeyDown,
+    commitSelection,
+    commitFreeText
+  };
+}
+
+const segmentClass = cn(
+  "filter-bar-segment flex max-w-48 min-w-0 items-center gap-1 overflow-hidden px-2 text-label whitespace-nowrap outline-none"
+);
+const FILTER_BAR_CONTROL_SIZE = "sm";
+const alwaysHighlightProps = { autoHighlight: "always", keepHighlight: true };
+const chipClass = cn(
+  "filter-bar-chip relative flex max-w-full items-stretch divide-x divide-border overflow-hidden rounded-full",
+  inputSurfaceAndFocusWithinStyle,
+  controlHeight[FILTER_BAR_CONTROL_SIZE]
+);
+const editableSegmentClass = cn(
+  segmentClass,
+  "cursor-pointer hover:bg-fill-subtle hover:text-foreground",
+  "focus-visible:bg-fill-hover focus-visible:text-foreground data-[popup-open]:bg-fill-hover data-[popup-open]:text-foreground"
+);
+function FilterBarFieldLabel({ field, label }) {
+  const Icon = field?.icon;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon && /* @__PURE__ */ jsx(Icon, { className: "size-[1.1em] shrink-0", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: label ?? field?.label })
+  ] });
+}
+const fieldSegmentAccentStyle = (field) => field?.color ? { color: field.color } : void 0;
+const settledSegments = (from, operatorImplied) => {
+  if (from === "none") return 0;
+  if (from === "field" || operatorImplied) return 1;
+  return 2;
+};
+const formatValue = (value, field) => {
+  const suggestions = getFieldSuggestions(field);
+  const options = Array.isArray(suggestions) ? suggestions : void 0;
+  const label = (v) => options?.find((o) => o.value === String(v))?.label ?? String(v);
+  return Array.isArray(value) ? value.map(label).join(", ") : label(value);
+};
+const formatValueCompact = (value, field) => {
+  if (!Array.isArray(value) || value.length < 2) return formatValue(value, field);
+  return `${formatValue(value.slice(0, 1), field)} +${value.length - 1}`;
+};
+const ChipContext = createContext(null);
+const useChip = () => {
+  const chip = useContext(ChipContext);
+  if (!chip) throw new Error("FilterBarChip segments must be rendered inside <FilterBarChip>.");
+  return chip;
+};
+function isInsidePopup(target) {
+  return target instanceof Element && Boolean(target.closest('[data-slot="filter-bar-editor"]'));
+}
+function FilterBarChip({
+  item,
+  readOnly = false,
+  removable = true,
+  draft = false,
+  className,
+  children
+}) {
+  const ctx = useFilterBarContext();
+  const [openSegment, setOpenSegment] = useState(null);
+  const field = ctx.getField(item.fieldId);
+  const operator = ctx.getOperator(item.operatorId);
+  const index = ctx.items.findIndex((i) => i.id === item.id);
+  const rootRef = useRef(null);
+  const leaving = ctx.leaving.has(item.id);
+  const pinned = !draft && (readOnly || !removable);
+  const { registerNonRemovable, settleRemove } = ctx;
+  useEffect(() => {
+    registerNonRemovable(item.id, pinned);
+    return () => registerNonRemovable(item.id, false);
+  }, [registerNonRemovable, item.id, pinned]);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!leaving || !root) return;
+    const animations = typeof root.getAnimations === "function" ? root.getAnimations({ subtree: true }) : [];
+    if (animations.length === 0) {
+      settleRemove(item.id);
+      return;
+    }
+    let cancelled = false;
+    Promise.all(animations.map((animation) => animation.finished)).then(() => {
+      if (!cancelled) settleRemove(item.id);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [leaving, item.id, settleRemove]);
+  const operatorImplied = field ? ctx.getFieldOperators(field).length === 1 : false;
+  const label = [
+    field?.label ?? item.fieldId,
+    operatorImplied ? "" : operator?.label ?? item.operatorId,
+    draft ? "" : formatValue(item.value, field)
+  ].filter(Boolean).join(" ");
+  const commit = !draft && ctx.lastCommit?.item.id === item.id ? ctx.lastCommit : null;
+  const from = draft ? ctx.draft?.from ?? "none" : commit?.from ?? "none";
+  const settled = settledSegments(from, operatorImplied);
+  const shine = commit?.glint ?? false;
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (readOnly || draft || leaving || isInsidePopup(event.target)) return;
+      const segments = Array.from(rootRef.current?.querySelectorAll("[data-filter-bar-segment]") ?? []);
+      const current = segments.findIndex((el) => el === event.target);
+      switch (event.key) {
+        case "ArrowRight": {
+          event.preventDefault();
+          const next = segments[current + 1];
+          if (next) next.focus();
+          else if (!ctx.focusChip(index + 1, 1, "field")) ctx.focusInput();
+          return;
+        }
+        case "ArrowLeft": {
+          event.preventDefault();
+          const prev = segments[current - 1];
+          if (prev) prev.focus();
+          else ctx.focusChip(index - 1, -1, "remove");
+          return;
+        }
+        case "Delete":
+        case "Backspace":
+          if (!removable) return;
+          event.preventDefault();
+          ctx.removeItem(item.id);
+          ctx.focusAfterRemove(index);
+          return;
+      }
+    },
+    [readOnly, draft, leaving, removable, ctx, index, item.id]
+  );
+  const chipValue = useMemo(
+    () => ({ item, index, field, operator, openSegment, setOpenSegment, readOnly, draft, leaving, operatorImplied }),
+    [item, index, field, operator, openSegment, readOnly, draft, leaving, operatorImplied]
+  );
+  const content = children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(FilterBarChipField, {}),
+    /* @__PURE__ */ jsx(FilterBarChipOperator, {}),
+    /* @__PURE__ */ jsx(FilterBarChipValue, {}),
+    removable && /* @__PURE__ */ jsx(FilterBarChipRemove, {})
+  ] });
+  return /* @__PURE__ */ jsx(ChipContext.Provider, { value: chipValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      role: "group",
+      "aria-label": label,
+      "aria-hidden": draft || leaving || void 0,
+      "data-slot": "filter-bar-chip",
+      "data-draft": draft || void 0,
+      "data-readonly": readOnly || void 0,
+      "data-leaving": leaving || void 0,
+      "data-shine": shine && !leaving || void 0,
+      className: cn(chipClass, leaving && "pointer-events-none", className),
+      style: {
+        "--filter-bar-segments-settled": settled,
+        "--filter-bar-chip-shine": field?.color ?? "currentColor"
+      },
+      onKeyDown: handleKeyDown,
+      onClick: (event) => event.stopPropagation(),
+      onAnimationEnd: (event) => {
+        if (event.animationName === "filter-bar-chip-shine") ctx.settleCommit();
+      },
+      children: [
+        readOnly && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(segmentClass, "pr-0 text-muted-foreground [--filter-bar-segment-padding:0.5rem_0]"),
+            title: "This filter is locked",
+            children: /* @__PURE__ */ jsx(LockIcon, { className: "size-[1.1em]" })
+          }
+        ),
+        content
+      ]
+    }
+  ) });
+}
+const SegmentPopupContext = createContext({ highlighted: null });
+function SegmentSearchInput({
+  placeholder,
+  icon: Icon = SearchIcon,
+  inputMode,
+  onKeyDown
+}) {
+  const { highlighted } = useContext(SegmentPopupContext);
+  return /* @__PURE__ */ jsxs("div", { className: comboboxStyles.searchContainer, children: [
+    /* @__PURE__ */ jsx(Icon, { className: comboboxStyles.searchIcon }),
+    /* @__PURE__ */ jsx(
+      Combobox.Input,
+      {
+        className: comboboxStyles.searchInput,
+        placeholder,
+        inputMode,
+        onKeyDown: (event) => onKeyDown?.(event, highlighted)
+      }
+    )
+  ] });
+}
+function SegmentCombobox({
+  segment,
+  label,
+  fullLabel = label,
+  ariaLabel,
+  items,
+  itemToString,
+  filter,
+  value = null,
+  query,
+  onQueryChange,
+  onSelect,
+  onOpen,
+  children
+}) {
+  const ctx = useFilterBarContext();
+  const chip = useChip();
+  const container = usePortalContainer();
+  const open = chip.openSegment === segment;
+  const [highlighted, setHighlighted] = useState(null);
+  const isField = segment === "field";
+  const content = isField ? /* @__PURE__ */ jsx(FilterBarFieldLabel, { field: chip.field, label }) : /* @__PURE__ */ jsx("span", { className: "truncate", children: label });
+  if (chip.readOnly || chip.draft || chip.leaving) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(segmentClass, isField && "text-foreground"),
+        style: isField ? fieldSegmentAccentStyle(chip.field) : void 0,
+        title: fullLabel,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Combobox.Root,
+    {
+      items,
+      itemToStringLabel: itemToString,
+      itemToStringValue: itemToString,
+      filter,
+      value,
+      onValueChange: (item, details) => {
+        details.cancel();
+        if (item !== null) onSelect(item);
+      },
+      inputValue: query,
+      onInputValueChange: (next, details) => {
+        if (details.reason === "input-change") onQueryChange(next);
+      },
+      onItemHighlighted: (item) => setHighlighted(item ?? null),
+      open,
+      onOpenChange: (next) => {
+        if (next) onOpen?.();
+        else onQueryChange("");
+        chip.setOpenSegment(next ? segment : null);
+      },
+      ...alwaysHighlightProps,
+      modal: false,
+      children: [
+        /* @__PURE__ */ jsx(
+          Combobox.Trigger,
+          {
+            ref: (el) => ctx.registerSegment(chip.item.id, segment, el),
+            render: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-filter-bar-segment": "",
+                tabIndex: segment === "value" ? 0 : -1,
+                "aria-label": `${ariaLabel}: ${fullLabel}`,
+                title: fullLabel,
+                className: cn(editableSegmentClass, isField && "text-foreground"),
+                style: isField ? fieldSegmentAccentStyle(chip.field) : void 0
+              }
+            ),
+            children: content
+          }
+        ),
+        /* @__PURE__ */ jsx(Combobox.Portal, { container, children: /* @__PURE__ */ jsx(
+          Combobox.Positioner,
+          {
+            align: "start",
+            sideOffset: MENU_SIDE_OFFSET,
+            positionMethod: FLOATING_POSITION_METHOD,
+            className: comboboxStyles.positioner,
+            children: /* @__PURE__ */ jsx(Combobox.Popup, { className: cn(comboboxStyles.popup, "min-w-44"), "data-slot": "filter-bar-editor", children: /* @__PURE__ */ jsx(SegmentPopupContext.Provider, { value: { highlighted }, children }) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+const fieldLabel = (field) => field.label;
+const operatorLabel = (operator) => operator.label;
+const optionLabel = (option) => option.label ?? option.value;
+function FieldEditor() {
+  const ctx = useFilterBarContext();
+  const chip = useChip();
+  const [query, setQuery] = useState("");
+  const onSelect = useCallback(
+    (field) => {
+      const allowed = ctx.getFieldOperators(field);
+      const nextOperator = allowed.find((o) => o.id === chip.item.operatorId) ?? allowed[0];
+      const arityChanged = nextOperator?.arity !== chip.operator?.arity;
+      ctx.updateItem(chip.item.id, {
+        fieldId: field.id,
+        operatorId: nextOperator?.id ?? chip.item.operatorId,
+        value: arityChanged || field.id !== chip.item.fieldId ? emptyValueFor(nextOperator) : chip.item.value
+      });
+      chip.setOpenSegment(null);
+    },
+    [ctx, chip]
+  );
+  return /* @__PURE__ */ jsxs(
+    SegmentCombobox,
+    {
+      segment: "field",
+      ariaLabel: "Field",
+      label: chip.field?.label ?? chip.item.fieldId,
+      items: ctx.fields,
+      itemToString: fieldLabel,
+      filter: matchesQueryFilter,
+      value: chip.field,
+      query,
+      onQueryChange: setQuery,
+      onSelect,
+      children: [
+        /* @__PURE__ */ jsx(SegmentSearchInput, { placeholder: "Change field…" }),
+        /* @__PURE__ */ jsx(
+          FilterBarOptionList,
+          {
+            "aria-label": "Fields",
+            getKey: (f) => f.id,
+            renderOption: (f) => /* @__PURE__ */ jsx(FilterBarFieldLabel, { field: f }),
+            emptyText: "No matching field."
+          }
+        )
+      ]
+    }
+  );
+}
+function OperatorEditor() {
+  const ctx = useFilterBarContext();
+  const chip = useChip();
+  const [query, setQuery] = useState("");
+  const options = useMemo(() => chip.field ? ctx.getFieldOperators(chip.field) : ctx.operators, [ctx, chip.field]);
+  const onSelect = useCallback(
+    (operator) => {
+      const arityChanged = (operator.arity ?? "one") !== (chip.operator?.arity ?? "one");
+      ctx.updateItem(chip.item.id, {
+        operatorId: operator.id,
+        value: arityChanged ? emptyValueFor(operator) : chip.item.value
+      });
+      chip.setOpenSegment(null);
+    },
+    [ctx, chip]
+  );
+  return /* @__PURE__ */ jsxs(
+    SegmentCombobox,
+    {
+      segment: "operator",
+      ariaLabel: "Operator",
+      label: chip.operator?.label ?? chip.item.operatorId,
+      items: options,
+      itemToString: operatorLabel,
+      filter: matchesQueryFilter,
+      value: chip.operator,
+      query,
+      onQueryChange: setQuery,
+      onSelect,
+      children: [
+        /* @__PURE__ */ jsx(SegmentSearchInput, { placeholder: "Change operator…" }),
+        /* @__PURE__ */ jsx(
+          FilterBarOptionList,
+          {
+            "aria-label": "Operators",
+            getKey: (o) => o.id,
+            renderOption: (o) => o.label,
+            emptyText: "No matching operator."
+          }
+        )
+      ]
+    }
+  );
+}
+function ValueEditor() {
+  const ctx = useFilterBarContext();
+  const chip = useChip();
+  const open = chip.openSegment === "value";
+  const [query, setQuery] = useState("");
+  const close = useCallback(() => chip.setOpenSegment(null), [chip]);
+  const onCommit = useCallback(
+    (value) => {
+      ctx.updateItem(chip.item.id, { value });
+      close();
+    },
+    [ctx, chip.item.id, close]
+  );
+  const step = useValueStep({
+    field: chip.field,
+    operator: chip.operator,
+    query,
+    enabled: open,
+    initialValue: chip.item.value,
+    onCommit
+  });
+  const ValueInput = VALUE_INPUTS[chip.field?.type ?? "text"];
+  return /* @__PURE__ */ jsx(
+    SegmentCombobox,
+    {
+      segment: "value",
+      ariaLabel: "Value",
+      label: formatValueCompact(chip.item.value, chip.field) || "…",
+      fullLabel: formatValue(chip.item.value, chip.field) || "…",
+      items: step.options,
+      itemToString: optionLabel,
+      filter: null,
+      query,
+      onQueryChange: setQuery,
+      onSelect: step.handleSelect,
+      onOpen: () => setQuery(!Array.isArray(chip.item.value) && !chip.field?.suggestions ? String(chip.item.value) : ""),
+      children: /* @__PURE__ */ jsx(ValueInput, { step, onCancel: close })
+    }
+  );
+}
+function ValueOptions({ step, onCancel }) {
+  const chip = useChip();
+  const modEnterLabel = useIsApplePlatform() ? "⌘↵" : "Ctrl ↵";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    step.hasSuggestions && /* @__PURE__ */ jsx(
+      FilterBarOptionList,
+      {
+        "aria-label": "Values",
+        "aria-multiselectable": step.isMany || void 0,
+        getKey: (o) => o.value,
+        renderOption: (option) => /* @__PURE__ */ jsx(FilterBarOptionLabel, { option }),
+        isSelected: (o) => step.isMany ? step.selected.includes(o.value) : String(chip.item.value) === o.value,
+        isLoading: step.isLoading,
+        error: step.error,
+        emptyText: step.allowFreeText ? "No suggestions — press Enter to use your text." : "No matching value."
+      }
+    ),
+    step.isMany && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1 border-t border-border p-1", children: [
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "default", onClick: () => step.commitSelection() || step.commitFreeText(), children: [
+        "Done",
+        /* @__PURE__ */ jsx(Kbd, { size: "xs", children: modEnterLabel })
+      ] })
+    ] })
+  ] });
+}
+function freeTextPlaceholder(step, noun) {
+  if (!step.hasSuggestions) return `Type a ${noun}…`;
+  if (step.allowFreeText) return `Search or type a ${noun}…`;
+  return `Search ${noun}s…`;
+}
+function FreeTextValueInput({
+  step,
+  onCancel,
+  inputMode,
+  noun
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SegmentSearchInput,
+      {
+        icon: step.hasSuggestions ? SearchIcon : PencilIcon,
+        inputMode,
+        placeholder: freeTextPlaceholder(step, noun),
+        onKeyDown: (event, highlighted) => {
+          const highlightedOption = step.hasSuggestions ? highlighted : null;
+          const handled = step.handleKeyDown(event, highlightedOption);
+          if (handled || event.key === "Enter" && highlightedOption === null) event.preventBaseUIHandler();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(ValueOptions, { step, onCancel })
+  ] });
+}
+function TextValueInput(props) {
+  return /* @__PURE__ */ jsx(FreeTextValueInput, { ...props, noun: "value" });
+}
+function NumberValueInput(props) {
+  return /* @__PURE__ */ jsx(FreeTextValueInput, { ...props, inputMode: "decimal", noun: "number" });
+}
+function BooleanValueInput(props) {
+  return /* @__PURE__ */ jsx(ValueOptions, { ...props });
+}
+const VALUE_INPUTS = {
+  text: TextValueInput,
+  number: NumberValueInput,
+  boolean: BooleanValueInput
+};
+function FilterBarChipField() {
+  return /* @__PURE__ */ jsx(FieldEditor, {});
+}
+function FilterBarChipOperator() {
+  const chip = useChip();
+  if (chip.operatorImplied) return null;
+  if (chip.draft && !chip.operator) return null;
+  return /* @__PURE__ */ jsx(OperatorEditor, {});
+}
+function FilterBarChipValue() {
+  const chip = useChip();
+  if (chip.draft || (chip.operator?.arity ?? "one") === "none") return null;
+  return /* @__PURE__ */ jsx(ValueEditor, {});
+}
+function FilterBarChipRemove() {
+  const ctx = useFilterBarContext();
+  const chip = useChip();
+  if (chip.readOnly || chip.draft) return null;
+  const removeClass = cn(editableSegmentClass, "px-1.5 text-muted-foreground [--filter-bar-segment-padding:0.375rem]");
+  if (chip.leaving) {
+    return /* @__PURE__ */ jsx("span", { className: removeClass, children: /* @__PURE__ */ jsx(XIcon, { className: "size-[1.1em]" }) });
+  }
+  const label = `Remove ${chip.field?.label ?? chip.item.fieldId} filter`;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-filter-bar-segment": "",
+      tabIndex: -1,
+      "aria-label": label,
+      title: label,
+      ref: (el) => ctx.registerSegment(chip.item.id, "remove", el),
+      className: removeClass,
+      onClick: () => {
+        ctx.removeItem(chip.item.id);
+        ctx.focusAfterRemove(chip.index);
+      },
+      children: /* @__PURE__ */ jsx(XIcon, { className: "size-[1.1em]" })
+    }
+  );
+}
+FilterBarChip.Field = FilterBarChipField;
+FilterBarChip.Operator = FilterBarChipOperator;
+FilterBarChip.Value = FilterBarChipValue;
+FilterBarChip.Remove = FilterBarChipRemove;
+
+export { FilterBarChip as F, FilterBarFieldLabel as a, findGroup as b, useValueStep as c, alwaysHighlightProps as d, editableSegmentClass as e, fieldSegmentAccentStyle as f, FILTER_BAR_CONTROL_SIZE as g, FilterBarOptionList as h, FilterBarOptionLabel as i, countLeaves as j, chipClass as k, FILTER_BAR_SCOPE_ATTR as l, matchesQueryFilter as m, FilterBarProvider as n, FilterBarChipField as o, FilterBarChipOperator as p, FilterBarChipRemove as q, FilterBarChipValue as r, segmentClass as s, formatValue as t, useFilterBarContext as u };
+//# sourceMappingURL=filter-bar-chip-fXsAVwGZ.js.map