cetec-design-system 4.6.0-0 → 4.7.0-0

package/dist/index.js

@@ -974,7 +974,7 @@ const spinnerVariantKeys = [
   "inverse",
   "centered"
 ];
-const getVariantProps$y = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
+const getVariantProps$z = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
 const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
   __recipe__: false,
   __name__: "spinner",
@@ -999,7 +999,7 @@ const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
   splitVariantProps(props) {
     return splitProps$1(props, spinnerVariantKeys);
   },
-  getVariantProps: getVariantProps$y
+  getVariantProps: getVariantProps$z
 });
 const tagFn = /* @__PURE__ */ createRecipe("tag", {
   "variant": "default",
@@ -1667,7 +1667,7 @@ const toggleFn = memo((props = {}) => {
   return Object.fromEntries(toggleSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const toggleVariantKeys = [];
-const getVariantProps$x = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
+const getVariantProps$y = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
 const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   __recipe__: false,
   __name__: "toggle",
@@ -1678,7 +1678,7 @@ const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   splitVariantProps(props) {
     return splitProps$1(props, toggleVariantKeys);
   },
-  getVariantProps: getVariantProps$x
+  getVariantProps: getVariantProps$y
 });
 const alertDefaultVariants = {
   "tone": "info"
@@ -1721,7 +1721,7 @@ const alertFn = memo((props = {}) => {
 const alertVariantKeys = [
   "tone"
 ];
-const getVariantProps$w = (variants) => ({ ...alertDefaultVariants, ...compact(variants) });
+const getVariantProps$x = (variants) => ({ ...alertDefaultVariants, ...compact(variants) });
 const alert = /* @__PURE__ */ Object.assign(alertFn, {
   __recipe__: false,
   __name__: "alert",
@@ -1740,7 +1740,7 @@ const alert = /* @__PURE__ */ Object.assign(alertFn, {
   splitVariantProps(props) {
     return splitProps$1(props, alertVariantKeys);
   },
-  getVariantProps: getVariantProps$w
+  getVariantProps: getVariantProps$x
 });
 const autocompleteDefaultVariants = {
   "size": "md",
@@ -1797,7 +1797,7 @@ const autocompleteVariantKeys = [
   "layer",
   "size"
 ];
-const getVariantProps$v = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
+const getVariantProps$w = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
 const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   __recipe__: false,
   __name__: "autocomplete",
@@ -1819,7 +1819,7 @@ const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   splitVariantProps(props) {
     return splitProps$1(props, autocompleteVariantKeys);
   },
-  getVariantProps: getVariantProps$v
+  getVariantProps: getVariantProps$w
 });
 const avatarDefaultVariants = {
   "size": "md",
@@ -1856,7 +1856,7 @@ const avatarVariantKeys = [
   "size",
   "shape"
 ];
-const getVariantProps$u = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
+const getVariantProps$v = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
 const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   __recipe__: false,
   __name__: "avatar",
@@ -1881,7 +1881,7 @@ const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   splitVariantProps(props) {
     return splitProps$1(props, avatarVariantKeys);
   },
-  getVariantProps: getVariantProps$u
+  getVariantProps: getVariantProps$v
 });
 const badgeDefaultVariants = {
   "size": "md",
@@ -1908,7 +1908,7 @@ const badgeVariantKeys = [
   "dot",
   "variant"
 ];
-const getVariantProps$t = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
+const getVariantProps$u = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
 const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   __recipe__: false,
   __name__: "badge",
@@ -1944,7 +1944,7 @@ const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   splitVariantProps(props) {
     return splitProps$1(props, badgeVariantKeys);
   },
-  getVariantProps: getVariantProps$t
+  getVariantProps: getVariantProps$u
 });
 const breadcrumbsDefaultVariants = {};
 const breadcrumbsCompoundVariants = [];
@@ -1971,7 +1971,7 @@ const breadcrumbsFn = memo((props = {}) => {
   return Object.fromEntries(breadcrumbsSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const breadcrumbsVariantKeys = [];
-const getVariantProps$s = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
+const getVariantProps$t = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
 const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
   __recipe__: false,
   __name__: "breadcrumbs",
@@ -1982,7 +1982,7 @@ const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
   splitVariantProps(props) {
     return splitProps$1(props, breadcrumbsVariantKeys);
   },
-  getVariantProps: getVariantProps$s
+  getVariantProps: getVariantProps$t
 });
 const buttonDefaultVariants = {
   "variant": "standard",
@@ -2013,7 +2013,7 @@ const buttonVariantKeys = [
   "before",
   "after"
 ];
-const getVariantProps$r = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
+const getVariantProps$s = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
 const button = /* @__PURE__ */ Object.assign(buttonFn, {
   __recipe__: false,
   __name__: "button",
@@ -2047,7 +2047,7 @@ const button = /* @__PURE__ */ Object.assign(buttonFn, {
   splitVariantProps(props) {
     return splitProps$1(props, buttonVariantKeys);
   },
-  getVariantProps: getVariantProps$r
+  getVariantProps: getVariantProps$s
 });
 const calendarDefaultVariants = {
   "type": "days"
@@ -2086,7 +2086,7 @@ const calendarFn = memo((props = {}) => {
 const calendarVariantKeys = [
   "type"
 ];
-const getVariantProps$q = (variants) => ({ ...calendarDefaultVariants, ...compact(variants) });
+const getVariantProps$r = (variants) => ({ ...calendarDefaultVariants, ...compact(variants) });
 const calendar = /* @__PURE__ */ Object.assign(calendarFn, {
   __recipe__: false,
   __name__: "calendar",
@@ -2103,7 +2103,7 @@ const calendar = /* @__PURE__ */ Object.assign(calendarFn, {
   splitVariantProps(props) {
     return splitProps$1(props, calendarVariantKeys);
   },
-  getVariantProps: getVariantProps$q
+  getVariantProps: getVariantProps$r
 });
 const checkboxDefaultVariants = {};
 const checkboxCompoundVariants = [];
@@ -2130,7 +2130,7 @@ const checkboxFn = memo((props = {}) => {
   return Object.fromEntries(checkboxSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const checkboxVariantKeys = [];
-const getVariantProps$p = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
+const getVariantProps$q = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
 const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   __recipe__: false,
   __name__: "checkbox",
@@ -2141,7 +2141,7 @@ const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   splitVariantProps(props) {
     return splitProps$1(props, checkboxVariantKeys);
   },
-  getVariantProps: getVariantProps$p
+  getVariantProps: getVariantProps$q
 });
 const chipDefaultVariants = {
   "size": "md"
@@ -2179,7 +2179,7 @@ const chipVariantKeys = [
   "after",
   "dismissable"
 ];
-const getVariantProps$o = (variants) => ({ ...chipDefaultVariants, ...compact(variants) });
+const getVariantProps$p = (variants) => ({ ...chipDefaultVariants, ...compact(variants) });
 const chip = /* @__PURE__ */ Object.assign(chipFn, {
   __recipe__: false,
   __name__: "chip",
@@ -2206,7 +2206,7 @@ const chip = /* @__PURE__ */ Object.assign(chipFn, {
   splitVariantProps(props) {
     return splitProps$1(props, chipVariantKeys);
   },
-  getVariantProps: getVariantProps$o
+  getVariantProps: getVariantProps$p
 });
 const codeBlockDefaultVariants = {
   "tone": "default",
@@ -2275,7 +2275,7 @@ const codeBlockVariantKeys = [
   "collapsed",
   "actionGutter"
 ];
-const getVariantProps$n = (variants) => ({ ...codeBlockDefaultVariants, ...compact(variants) });
+const getVariantProps$o = (variants) => ({ ...codeBlockDefaultVariants, ...compact(variants) });
 const codeBlock = /* @__PURE__ */ Object.assign(codeBlockFn, {
   __recipe__: false,
   __name__: "codeBlock",
@@ -2311,7 +2311,7 @@ const codeBlock = /* @__PURE__ */ Object.assign(codeBlockFn, {
   splitVariantProps(props) {
     return splitProps$1(props, codeBlockVariantKeys);
   },
-  getVariantProps: getVariantProps$n
+  getVariantProps: getVariantProps$o
 });
 const dateMenusDefaultVariants = {};
 const dateMenusCompoundVariants = [];
@@ -2334,7 +2334,7 @@ const dateMenusFn = memo((props = {}) => {
   return Object.fromEntries(dateMenusSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dateMenusVariantKeys = [];
-const getVariantProps$m = (variants) => ({ ...dateMenusDefaultVariants, ...compact(variants) });
+const getVariantProps$n = (variants) => ({ ...dateMenusDefaultVariants, ...compact(variants) });
 const dateMenus = /* @__PURE__ */ Object.assign(dateMenusFn, {
   __recipe__: false,
   __name__: "dateMenus",
@@ -2345,7 +2345,7 @@ const dateMenus = /* @__PURE__ */ Object.assign(dateMenusFn, {
   splitVariantProps(props) {
     return splitProps$1(props, dateMenusVariantKeys);
   },
-  getVariantProps: getVariantProps$m
+  getVariantProps: getVariantProps$n
 });
 const dateTimeMenusDefaultVariants = {};
 const dateTimeMenusCompoundVariants = [];
@@ -2368,7 +2368,7 @@ const dateTimeMenusFn = memo((props = {}) => {
   return Object.fromEntries(dateTimeMenusSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dateTimeMenusVariantKeys = [];
-const getVariantProps$l = (variants) => ({ ...dateTimeMenusDefaultVariants, ...compact(variants) });
+const getVariantProps$m = (variants) => ({ ...dateTimeMenusDefaultVariants, ...compact(variants) });
 const dateTimeMenus = /* @__PURE__ */ Object.assign(dateTimeMenusFn, {
   __recipe__: false,
   __name__: "dateTimeMenus",
@@ -2379,7 +2379,7 @@ const dateTimeMenus = /* @__PURE__ */ Object.assign(dateTimeMenusFn, {
   splitVariantProps(props) {
     return splitProps$1(props, dateTimeMenusVariantKeys);
   },
-  getVariantProps: getVariantProps$l
+  getVariantProps: getVariantProps$m
 });
 const drawerDefaultVariants = {
   "side": "right",
@@ -2426,7 +2426,7 @@ const drawerVariantKeys = [
   "size",
   "scrollable"
 ];
-const getVariantProps$k = (variants) => ({ ...drawerDefaultVariants, ...compact(variants) });
+const getVariantProps$l = (variants) => ({ ...drawerDefaultVariants, ...compact(variants) });
 const drawer = /* @__PURE__ */ Object.assign(drawerFn, {
   __recipe__: false,
   __name__: "drawer",
@@ -2453,6 +2453,64 @@ const drawer = /* @__PURE__ */ Object.assign(drawerFn, {
   splitVariantProps(props) {
     return splitProps$1(props, drawerVariantKeys);
   },
+  getVariantProps: getVariantProps$l
+});
+const filterFieldDefaultVariants = {};
+const filterFieldCompoundVariants = [];
+const filterFieldSlotNames = [
+  [
+    "root",
+    "filterField__root"
+  ],
+  [
+    "icon",
+    "filterField__icon"
+  ],
+  [
+    "values",
+    "filterField__values"
+  ],
+  [
+    "sizer",
+    "filterField__sizer"
+  ],
+  [
+    "token",
+    "filterField__token"
+  ],
+  [
+    "input",
+    "filterField__input"
+  ],
+  [
+    "more",
+    "filterField__more"
+  ],
+  [
+    "shortcut",
+    "filterField__shortcut"
+  ],
+  [
+    "clear",
+    "filterField__clear"
+  ]
+];
+const filterFieldSlotFns = /* @__PURE__ */ filterFieldSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, filterFieldDefaultVariants, getSlotCompoundVariant(filterFieldCompoundVariants, slotName))]);
+const filterFieldFn = memo((props = {}) => {
+  return Object.fromEntries(filterFieldSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const filterFieldVariantKeys = [];
+const getVariantProps$k = (variants) => ({ ...filterFieldDefaultVariants, ...compact(variants) });
+const filterField = /* @__PURE__ */ Object.assign(filterFieldFn, {
+  __recipe__: false,
+  __name__: "filterField",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: filterFieldVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps$1(props, filterFieldVariantKeys);
+  },
   getVariantProps: getVariantProps$k
 });
 const filterMenuDefaultVariants = {
@@ -15592,6 +15650,9 @@ const defaultLocaleLabels = {
   optionCreated: (value) => `${value} created and selected.`,
   optionRemoved: (label2) => `${label2} removed.`,
   moreSelected: (count2) => `${count2} more selected`,
+  filterOrSearch: "Filter or search",
+  clearFilters: "Clear all filters",
+  moreFilters: (count2) => `+${count2} more`,
   copyCode: "Copy code",
   copied: "Copied",
   copyFailed: "Copy failed",
@@ -22699,6 +22760,433 @@ const DrawerFooter = (props) => {
   const classes = drawer();
   return /* @__PURE__ */ jsx(Box, { className: cx(classes.footer, className), ...otherProps, children });
 };
+const MAX_VISIBLE_VALUES = 2;
+const FilterToken = (props) => {
+  const {
+    field,
+    operator,
+    value,
+    state = "applied",
+    tone = "default",
+    operatorLocked,
+    editor,
+    disabled,
+    retainFocus,
+    onFieldClick,
+    onOperatorClick,
+    onValueClick,
+    onRemove,
+    removeLabel,
+    ...rest
+  } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = filterToken();
+  const { labels } = useLocale();
+  const values = Array.isArray(value) ? value : void 0;
+  const fullValue = Array.isArray(value) ? value.join(", ") : value;
+  const hidden = values ? Math.max(0, values.length - MAX_VISIBLE_VALUES) : 0;
+  const shownValue = values ? values.slice(0, MAX_VISIBLE_VALUES).join(", ") : value;
+  const sentence = [field, operator, fullValue].filter(Boolean).join(" ");
+  const keepFocus = retainFocus ? (e) => e.preventDefault() : void 0;
+  const valueTextRef = useRef(null);
+  const [clipped, setClipped] = useState(false);
+  useLayoutEffect(() => {
+    const node = valueTextRef.current;
+    if (!node) {
+      setClipped(false);
+      return;
+    }
+    const check = () => setClipped(node.scrollWidth > node.clientWidth);
+    check();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(check);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [shownValue, editor]);
+  const part = (slot, content, onClick, extra) => onClick ? /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "button",
+      type: "button",
+      className: cx(classes.part, slot),
+      disabled,
+      onMouseDown: keepFocus,
+      onClick,
+      ...extra,
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx(Box, { as: "span", className: cx(classes.part, slot), ...extra, children: content });
+  const valueContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "span",
+        ref: valueTextRef,
+        className: classes.valueText,
+        "aria-hidden": hidden > 0 || void 0,
+        children: shownValue || "…"
+      }
+    ),
+    hidden > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { as: "span", className: classes.count, "aria-hidden": true, children: `+${hidden}` }),
+      /* @__PURE__ */ jsx(Box, { as: "span", srOnly: true, children: fullValue })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...dsComponent("FilterToken"),
+      as: "span",
+      role: "group",
+      "aria-label": sentence,
+      className: cx(classes.root, className),
+      "data-state": state,
+      "data-tone": tone,
+      "data-disabled": disabled || void 0,
+      ...otherProps,
+      children: [
+        part(classes.field, field, onFieldClick ?? onValueClick),
+        part(
+          classes.operator,
+          operator,
+          operatorLocked ? void 0 : onOperatorClick,
+          operatorLocked ? { "data-locked": true } : void 0
+        ),
+        editor !== void 0 ? (
+          // `inert` keeps a disabled token's editor out of the tab order.
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              as: "span",
+              className: cx(classes.part, classes.editor),
+              inert: disabled || void 0,
+              children: [
+                shownValue && /* @__PURE__ */ jsx(Box, { as: "span", className: classes.value, children: valueContent }),
+                editor
+              ]
+            }
+          )
+        ) : value !== void 0 && /* @__PURE__ */ jsx(Tooltip, { text: fullValue ?? "", disabled: hidden === 0 && !clipped, children: part(classes.value, valueContent, onValueClick) }),
+        onRemove && state !== "removing" && /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "button",
+            type: "button",
+            className: classes.remove,
+            "aria-label": removeLabel ?? labels.removeFilter(sentence),
+            disabled,
+            onMouseDown: keepFocus,
+            onClick: onRemove,
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: "16", "aria-hidden": true })
+          }
+        )
+      ]
+    }
+  );
+};
+const specialSymbols = {
+  "⌘": "command",
+  "⌥": "option",
+  "⌃": "control",
+  "⇪": "shift",
+  "⎋": "escape",
+  "⌫": "delete",
+  "↩": "return",
+  "⇥": "tab",
+  "←": "left",
+  "→": "right",
+  "↑": "up",
+  "↓": "down"
+};
+const isSpecialSymbol = (value) => value in specialSymbols;
+const getKbdLabel = (value) => isSpecialSymbol(value) ? specialSymbols[value] : value;
+const defaultClasses = kbd({});
+const symbolClasses = kbd({ variant: "symbol" });
+const Kbd = (props) => {
+  const { keys, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const tooltipText = keys.map(getKbdLabel).join(" + ");
+  const keyOccurrences = /* @__PURE__ */ new Map();
+  const renderedKeys = keys.map((keyValue) => {
+    const occurrence = keyOccurrences.get(keyValue) ?? 0;
+    keyOccurrences.set(keyValue, occurrence + 1);
+    return { id: `${keyValue}-${occurrence}`, value: keyValue };
+  });
+  const content = /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...dsComponent("Kbd"),
+      as: "span",
+      className: cx(defaultClasses.kbdGroup, className),
+      ...otherProps,
+      children: renderedKeys.map(({ id, value }) => /* @__PURE__ */ jsx(
+        Box,
+        {
+          as: "kbd",
+          className: isSpecialSymbol(value) ? symbolClasses.key : defaultClasses.key,
+          children: value
+        },
+        id
+      ))
+    }
+  );
+  return /* @__PURE__ */ jsx(Tooltip, { text: tooltipText, children: content });
+};
+const MORE_BUTTON_RESERVE = 96;
+const isTextEntry = (target) => target instanceof HTMLElement && Boolean(
+  target.closest(
+    'input, textarea, select, [contenteditable=""], [contenteditable="true"]'
+  )
+);
+const FilterField = (props) => {
+  const {
+    tokens: tokens2,
+    inputValue,
+    onInputChange,
+    inputProps,
+    inputRef,
+    placeholder,
+    editingKey = null,
+    onMoreClick,
+    moreOpen,
+    onClearAll,
+    clearLabel,
+    shortcut,
+    disabled,
+    ...rest
+  } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = filterField();
+  const { labels } = useLocale();
+  const [armedKey, setArmedKey] = useState(null);
+  const [hasFocus, setHasFocus] = useState(false);
+  const rootRef = useRef(null);
+  const sizerRef = useRef(null);
+  const moreRef = useRef(null);
+  const inputElement = useRef(null);
+  const tokenElements = useRef(/* @__PURE__ */ new Map());
+  const refocus = useRef(false);
+  const trackInput = useCallback((node) => {
+    if (node) {
+      inputElement.current = node;
+      if (refocus.current) {
+        refocus.current = false;
+        node.focus();
+      }
+      return;
+    }
+    if (inputElement.current && inputElement.current === inputElement.current.ownerDocument.activeElement) {
+      refocus.current = true;
+    }
+  }, []);
+  const mergedInputRef = useMergeRefs([trackInput, inputRef]);
+  const focusInput = useCallback(() => {
+    var _a;
+    return (_a = inputElement.current) == null ? void 0 : _a.focus();
+  }, []);
+  const removable = tokens2.filter(
+    (token2) => token2.onRemove && token2.state !== "removing"
+  );
+  const lastRemovable = removable[removable.length - 1];
+  const armed = armedKey !== null && (lastRemovable == null ? void 0 : lastRemovable.key) === armedKey ? armedKey : null;
+  const keys = tokens2.map((token2) => token2.key);
+  const getItemElement = useCallback(
+    (key) => tokenElements.current.get(key) ?? null,
+    []
+  );
+  const { visible, overflow } = useOverflowItems({
+    items: keys,
+    containerRef: sizerRef,
+    getItemElement,
+    activeItem: editingKey ?? armed,
+    reserve: MORE_BUTTON_RESERVE,
+    reserveRef: moreRef
+  });
+  const hiddenKeys = overflow.filter((key) => keys.includes(key));
+  const hiddenTokens = tokens2.filter((token2) => hiddenKeys.includes(token2.key));
+  const visibleKeys = new Set(visible);
+  useEffect(() => {
+    if (!shortcut || disabled) return;
+    const onKeyDown2 = (event) => {
+      if (event.key !== shortcut || event.metaKey || event.ctrlKey || event.altKey || event.defaultPrevented || isTextEntry(event.target)) {
+        return;
+      }
+      event.preventDefault();
+      focusInput();
+    };
+    document.addEventListener("keydown", onKeyDown2);
+    return () => document.removeEventListener("keydown", onKeyDown2);
+  }, [shortcut, disabled, focusInput]);
+  const onKeyDown = (event) => {
+    var _a, _b;
+    (_a = inputProps == null ? void 0 : inputProps.onKeyDown) == null ? void 0 : _a.call(inputProps, event);
+    if (event.defaultPrevented) return;
+    if (event.key !== "Backspace") {
+      setArmedKey(null);
+      return;
+    }
+    if (inputValue !== "" || editingKey !== null || !lastRemovable) return;
+    event.preventDefault();
+    if (armed === lastRemovable.key) {
+      setArmedKey(null);
+      (_b = lastRemovable.onRemove) == null ? void 0 : _b.call(lastRemovable);
+    } else {
+      setArmedKey(lastRemovable.key);
+    }
+  };
+  const withFocus = (handler) => handler && ((...args) => {
+    focusInput();
+    handler(...args);
+  });
+  const input = (inline) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      autoComplete: "off",
+      spellCheck: false,
+      "aria-label": labels.filterOrSearch,
+      "aria-keyshortcuts": shortcut,
+      ...inputProps,
+      ref: mergedInputRef,
+      className: cx(classes.input, inputProps == null ? void 0 : inputProps.className),
+      "data-inline": inline || void 0,
+      size: inline ? Math.max(inputValue.length, 1) : void 0,
+      value: inputValue,
+      placeholder: inline ? void 0 : placeholder,
+      disabled,
+      onChange: (event) => {
+        setArmedKey(null);
+        onInputChange(event.target.value);
+      },
+      onKeyDown
+    }
+  );
+  const editingVisible = editingKey !== null && visibleKeys.has(editingKey);
+  const showClear = Boolean(onClearAll) && !disabled && (tokens2.length > 0 || inputValue !== "");
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...dsComponent("FilterField"),
+      ref: rootRef,
+      className: cx(classes.root, className),
+      "data-disabled": disabled || void 0,
+      "data-has-clear": showClear || void 0,
+      onFocusCapture: () => setHasFocus(true),
+      onBlurCapture: (event) => {
+        var _a;
+        if ((_a = rootRef.current) == null ? void 0 : _a.contains(event.relatedTarget)) {
+          return;
+        }
+        setHasFocus(false);
+        setArmedKey(null);
+      },
+      onMouseDown: (event) => {
+        if (disabled || event.target !== event.currentTarget) return;
+        event.preventDefault();
+        focusInput();
+      },
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "search",
+            size: "20",
+            fill: disabled ? "icon.disabled" : "icon.subtle",
+            className: classes.icon,
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            className: classes.values,
+            onMouseDown: (event) => {
+              if (disabled || event.target !== event.currentTarget) return;
+              event.preventDefault();
+              focusInput();
+            },
+            children: [
+              /* @__PURE__ */ jsx(Box, { ref: sizerRef, className: classes.sizer, "aria-hidden": true }),
+              tokens2.map(({ key, ...token2 }) => {
+                const overflowed = !visibleKeys.has(key);
+                const editing = key === editingKey && !overflowed;
+                return /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    as: "span",
+                    ref: (node) => {
+                      if (node) tokenElements.current.set(key, node);
+                      else tokenElements.current.delete(key);
+                    },
+                    className: classes.token,
+                    "data-overflowed": overflowed || void 0,
+                    inert: overflowed || void 0,
+                    children: /* @__PURE__ */ jsx(
+                      FilterToken,
+                      {
+                        ...token2,
+                        state: key === armed ? "armed" : token2.state,
+                        disabled,
+                        retainFocus: true,
+                        editor: editing ? input(true) : void 0,
+                        onFieldClick: withFocus(token2.onFieldClick),
+                        onOperatorClick: withFocus(token2.onOperatorClick),
+                        onValueClick: withFocus(token2.onValueClick),
+                        onRemove: withFocus(token2.onRemove)
+                      }
+                    )
+                  },
+                  key
+                );
+              }),
+              hiddenTokens.length > 0 && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ref: moreRef,
+                  size: "sm",
+                  variant: "hollow",
+                  iconAfter: "caret-down",
+                  className: classes.more,
+                  disabled,
+                  "aria-expanded": onMoreClick ? Boolean(moreOpen) : void 0,
+                  "data-open": moreOpen || void 0,
+                  "data-pending": hiddenTokens.some(
+                    (token2) => token2.state === "pending" || token2.state === "removing"
+                  ) || void 0,
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: (event) => {
+                    focusInput();
+                    onMoreClick == null ? void 0 : onMoreClick(hiddenKeys, event.currentTarget);
+                  },
+                  children: labels.moreFilters(hiddenTokens.length)
+                }
+              ),
+              !editingVisible && input(false)
+            ]
+          }
+        ),
+        shortcut && !hasFocus && !disabled && /* @__PURE__ */ jsx(Kbd, { keys: [shortcut], className: classes.shortcut }),
+        showClear && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "ghost",
+            size: "sm",
+            iconName: "x",
+            altText: clearLabel ?? labels.clearFilters,
+            className: classes.clear,
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => {
+              setArmedKey(null);
+              focusInput();
+              onClearAll == null ? void 0 : onClearAll();
+            }
+          }
+        )
+      ]
+    }
+  );
+};
 const getFilterMenuOptionId = (menuId, key) => `${menuId}-option-${encodeURIComponent(key)}`;
 const isPickable = (row) => row.type === "item" && !row.disabled;
 const useFilterMenu = (options) => {
@@ -22906,130 +23394,6 @@ const FilterMenu = (props) => {
     }
   ) }) });
 };
-const MAX_VISIBLE_VALUES = 2;
-const FilterToken = (props) => {
-  const {
-    field,
-    operator,
-    value,
-    state = "applied",
-    tone = "default",
-    operatorLocked,
-    editor,
-    disabled,
-    retainFocus,
-    onFieldClick,
-    onOperatorClick,
-    onValueClick,
-    onRemove,
-    removeLabel,
-    ...rest
-  } = props;
-  const [className, otherProps] = splitProps(rest);
-  const classes = filterToken();
-  const { labels } = useLocale();
-  const values = Array.isArray(value) ? value : void 0;
-  const fullValue = Array.isArray(value) ? value.join(", ") : value;
-  const hidden = values ? Math.max(0, values.length - MAX_VISIBLE_VALUES) : 0;
-  const shownValue = values ? values.slice(0, MAX_VISIBLE_VALUES).join(", ") : value;
-  const sentence = [field, operator, fullValue].filter(Boolean).join(" ");
-  const keepFocus = retainFocus ? (e) => e.preventDefault() : void 0;
-  const valueTextRef = useRef(null);
-  const [clipped, setClipped] = useState(false);
-  useLayoutEffect(() => {
-    const node = valueTextRef.current;
-    if (!node) {
-      setClipped(false);
-      return;
-    }
-    const check = () => setClipped(node.scrollWidth > node.clientWidth);
-    check();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(check);
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, [shownValue, editor]);
-  const part = (slot, content, onClick, extra) => onClick ? /* @__PURE__ */ jsx(
-    Box,
-    {
-      as: "button",
-      type: "button",
-      className: cx(classes.part, slot),
-      disabled,
-      onMouseDown: keepFocus,
-      onClick,
-      ...extra,
-      children: content
-    }
-  ) : /* @__PURE__ */ jsx(Box, { as: "span", className: cx(classes.part, slot), ...extra, children: content });
-  const valueContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        as: "span",
-        ref: valueTextRef,
-        className: classes.valueText,
-        "aria-hidden": hidden > 0 || void 0,
-        children: shownValue || "…"
-      }
-    ),
-    hidden > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Box, { as: "span", className: classes.count, "aria-hidden": true, children: `+${hidden}` }),
-      /* @__PURE__ */ jsx(Box, { as: "span", srOnly: true, children: fullValue })
-    ] })
-  ] });
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ...dsComponent("FilterToken"),
-      as: "span",
-      role: "group",
-      "aria-label": sentence,
-      className: cx(classes.root, className),
-      "data-state": state,
-      "data-tone": tone,
-      "data-disabled": disabled || void 0,
-      ...otherProps,
-      children: [
-        part(classes.field, field, onFieldClick ?? onValueClick),
-        part(
-          classes.operator,
-          operator,
-          operatorLocked ? void 0 : onOperatorClick,
-          operatorLocked ? { "data-locked": true } : void 0
-        ),
-        editor !== void 0 ? (
-          // `inert` keeps a disabled token's editor out of the tab order.
-          /* @__PURE__ */ jsxs(
-            Box,
-            {
-              as: "span",
-              className: cx(classes.part, classes.editor),
-              inert: disabled || void 0,
-              children: [
-                shownValue && /* @__PURE__ */ jsx(Box, { as: "span", className: classes.value, children: valueContent }),
-                editor
-              ]
-            }
-          )
-        ) : value !== void 0 && /* @__PURE__ */ jsx(Tooltip, { text: fullValue ?? "", disabled: hidden === 0 && !clipped, children: part(classes.value, valueContent, onValueClick) }),
-        onRemove && state !== "removing" && /* @__PURE__ */ jsx(
-          Box,
-          {
-            as: "button",
-            type: "button",
-            className: classes.remove,
-            "aria-label": removeLabel ?? labels.removeFilter(sentence),
-            disabled,
-            onMouseDown: keepFocus,
-            onClick: onRemove,
-            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: "16", "aria-hidden": true })
-          }
-        )
-      ]
-    }
-  );
-};
 const Required = () => {
   return /* @__PURE__ */ jsx(Text, { color: "text.danger", fontSize: "inherit", lineHeight: "tight", children: "*" });
 };
@@ -23172,54 +23536,6 @@ const InlineNote = (props) => {
     }
   );
 };
-const specialSymbols = {
-  "⌘": "command",
-  "⌥": "option",
-  "⌃": "control",
-  "⇪": "shift",
-  "⎋": "escape",
-  "⌫": "delete",
-  "↩": "return",
-  "⇥": "tab",
-  "←": "left",
-  "→": "right",
-  "↑": "up",
-  "↓": "down"
-};
-const isSpecialSymbol = (value) => value in specialSymbols;
-const getKbdLabel = (value) => isSpecialSymbol(value) ? specialSymbols[value] : value;
-const defaultClasses = kbd({});
-const symbolClasses = kbd({ variant: "symbol" });
-const Kbd = (props) => {
-  const { keys, ...rest } = props;
-  const [className, otherProps] = splitProps(rest);
-  const tooltipText = keys.map(getKbdLabel).join(" + ");
-  const keyOccurrences = /* @__PURE__ */ new Map();
-  const renderedKeys = keys.map((keyValue) => {
-    const occurrence = keyOccurrences.get(keyValue) ?? 0;
-    keyOccurrences.set(keyValue, occurrence + 1);
-    return { id: `${keyValue}-${occurrence}`, value: keyValue };
-  });
-  const content = /* @__PURE__ */ jsx(
-    Box,
-    {
-      ...dsComponent("Kbd"),
-      as: "span",
-      className: cx(defaultClasses.kbdGroup, className),
-      ...otherProps,
-      children: renderedKeys.map(({ id, value }) => /* @__PURE__ */ jsx(
-        Box,
-        {
-          as: "kbd",
-          className: isSpecialSymbol(value) ? symbolClasses.key : defaultClasses.key,
-          children: value
-        },
-        id
-      ))
-    }
-  );
-  return /* @__PURE__ */ jsx(Tooltip, { text: tooltipText, children: content });
-};
 const ModalWrapperContext = createContext(null);
 const useModalWrapperContext = () => {
   const context2 = useContext(ModalWrapperContext);
@@ -26493,6 +26809,7 @@ export {
   DrawerFooter,
   DrawerHeader,
   DsChainScope,
+  FilterField,
   FilterMenu,
   FilterToken,
   FormField,