@wallarm-org/design-system 0.87.0 → 0.88.0

package/dist/components/DropdownMenu/classes.d.ts

@@ -1,6 +1,6 @@
 export declare const dropdownMenuClassNames: string;
 export declare const dropdownMenuItemVariants: (props?: ({
-    variant?: "destructive" | "brand" | "default" | null | undefined;
+    variant?: "brand" | "default" | "destructive" | null | undefined;
     inset?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const dropdownMenuItemIndicatorClassName: string;

package/dist/components/DropdownMenu/classes.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
-const dropdownMenuClassNames = cn('flex flex-col gap-1 min-w-128', 'z-[calc(var(--drawer-positioner-z-index)+(var(--layer-index,0)*var(--drawer-level-ratio)))]', 'overflow-y-auto overflow-x-hidden outline-none', 'rounded-12 border border-border-primary-light bg-bg-surface-2 p-8 font-sans text-text-primary shadow-md outline-none', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0  data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2');
+const dropdownMenuClassNames = cn('flex flex-col gap-1 min-w-128', 'z-[calc(var(--drawer-positioner-z-index)+(var(--layer-index,0)*var(--drawer-level-ratio)))]', 'overflow-y-auto overflow-x-hidden outline-none overscroll-none [&_[data-part=viewport]]:overscroll-none', 'rounded-12 border border-border-primary-light bg-bg-surface-2 p-8 font-sans text-text-primary shadow-md outline-none', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0  data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2');
 const dropdownMenuItemVariants = cva([
     'flex items-center gap-8 rounded-6 px-8 py-6 text-sm',
     'relative cursor-pointer select-none outline-none transition-colors',

package/dist/components/Field/Field.d.ts

@@ -3,7 +3,7 @@ import { Field as ArkUiField } from '@ark-ui/react/field';
 import { type VariantProps } from 'class-variance-authority';
 import { type TestableProps } from '../../utils/testId';
 declare const fieldVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+    orientation?: "horizontal" | "responsive" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type FieldNativeProps = Omit<HTMLAttributes<HTMLElement>, 'className'> & Omit<ArkUiField.RootProps, 'className'>;
 type FieldVariantsProps = VariantProps<typeof fieldVariants>;

package/dist/components/FilterInput/FilterInputField/FilterInputChip/classes.d.ts

@@ -16,7 +16,7 @@ export declare const emptyValueHitTarget = "min-w-[4px] self-stretch";
 export declare const editingValueMinWidth = "min-w-0";
 /** Segment text styles by variant */
 export declare const segmentTextVariants: (props?: ({
-    variant?: "value" | "operator" | "attribute" | null | undefined;
+    variant?: "attribute" | "operator" | "value" | null | undefined;
     error?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Remove button styles — hidden by default, shown on chip hover or button focus.

package/dist/components/FilterInput/FilterInputField/FilterInputChip/segmentVariant.d.ts

@@ -1,7 +1,7 @@
 export declare const SEGMENT_VARIANT: {
-    readonly attribute: "attribute";
-    readonly operator: "operator";
-    readonly value: "value";
+    readonly attribute: 'attribute';
+    readonly operator: 'operator';
+    readonly value: 'value';
 };
 export type SegmentVariant = (typeof SEGMENT_VARIANT)[keyof typeof SEGMENT_VARIANT];
 /** data-slot for the decorative ";" between paired triplets (non-interactive). */

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/FlatValueMenu.js

@@ -62,6 +62,7 @@ const FlatValueMenu = ({ values, onSelect, onCommit, open = false, onOpenChange,
                             isPending: pendingIds.has(String(option.value)),
                             multiSelect: multiSelect,
                             registerItem: registerItem,
+                            highlight: filterText,
                             onSelect: ()=>handleItemSelect({
                                     id: String(option.value),
                                     label: option.label,

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/NestedValueMenuItem.js

@@ -5,32 +5,7 @@ import { Badge } from "../../../Badge/index.js";
 import { Checkmark } from "../../../Checkmark/index.js";
 import { DropdownMenuItem } from "../../../DropdownMenu/index.js";
 import { Text } from "../../../Text/index.js";
-const highlightMatch = (text, query)=>{
-    const q = query?.trim().toLowerCase();
-    if (!q) return text;
-    const lower = text.toLowerCase();
-    const parts = [];
-    let cursor = 0;
-    let key = 0;
-    while(cursor < text.length){
-        const at = lower.indexOf(q, cursor);
-        if (-1 === at) {
-            parts.push(/*#__PURE__*/ jsx("span", {
-                children: text.slice(cursor)
-            }, key++));
-            break;
-        }
-        if (at > cursor) parts.push(/*#__PURE__*/ jsx("span", {
-            children: text.slice(cursor, at)
-        }, key++));
-        parts.push(/*#__PURE__*/ jsx("mark", {
-            className: "bg-transparent font-medium text-text-brand",
-            children: text.slice(at, at + q.length)
-        }, key++));
-        cursor = at + q.length;
-    }
-    return parts;
-};
+import { highlightMatch } from "./highlightMatch.js";
 const NestedValueMenuItem = ({ id, option, isGroup, checkedState, isPending, multiSelect, onSelect, onMouseEnter, onMouseLeave, registerRef, expanded, selectAll, highlight })=>{
     const isChecked = true === checkedState;
     const checkmark = multiSelect || !isGroup && checkedState ? /*#__PURE__*/ jsx(Checkmark, {

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/ValueMenuItem.d.ts

@@ -7,6 +7,8 @@ interface ValueMenuItemProps {
     multiSelect: boolean;
     onSelect: () => void;
     registerItem?: (id: string) => (el: HTMLElement | null) => void;
+    /** Active search query — matched substrings in label/description are emphasized. */
+    highlight?: string;
 }
 export declare const ValueMenuItem: FC<ValueMenuItemProps>;
 export {};

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/ValueMenuItem.js

@@ -4,7 +4,8 @@ import { Badge } from "../../../Badge/index.js";
 import { Checkmark } from "../../../Checkmark/index.js";
 import { DropdownMenuItem } from "../../../DropdownMenu/index.js";
 import { Text } from "../../../Text/index.js";
-const ValueMenuItem = ({ option, isChecked, isPending, multiSelect, onSelect, registerItem })=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
+import { highlightMatch } from "./highlightMatch.js";
+const ValueMenuItem = ({ option, isChecked, isPending, multiSelect, onSelect, registerItem, highlight })=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
         value: String(option.value),
         ref: registerItem?.(String(option.value)),
         onSelect: onSelect,
@@ -21,13 +22,13 @@ const ValueMenuItem = ({ option, isChecked, isPending, multiSelect, onSelect, re
                     /*#__PURE__*/ jsx(Text, {
                         size: "sm",
                         truncate: true,
-                        children: option.label
+                        children: highlightMatch(option.label, highlight)
                     }),
                     option.description && /*#__PURE__*/ jsx(Text, {
                         size: "xs",
                         color: "secondary",
                         truncate: true,
-                        children: option.description
+                        children: highlightMatch(option.description, highlight)
                     })
                 ]
             }),

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/highlightMatch.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+/**
+ * Wrap every case-insensitive occurrence of `query` in `text` with a brand-filled
+ * emphasis (orange background + light text — the same tokens DateInput uses for a
+ * focused segment), so a search match reads at a glance. Returns the raw string
+ * when there's no query (the common, non-search path) so nothing changes there.
+ *
+ * Shared by the flat (`ValueMenuItem`) and nested (`NestedValueMenuItem`) value
+ * menus so first- and second-level search highlights stay visually identical.
+ */
+export declare const highlightMatch: (text: string, query?: string) => ReactNode;

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/highlightMatch.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+const highlightMatch = (text, query)=>{
+    const q = query?.trim().toLowerCase();
+    if (!q) return text;
+    const lower = text.toLowerCase();
+    const parts = [];
+    let cursor = 0;
+    let key = 0;
+    while(cursor < text.length){
+        const at = lower.indexOf(q, cursor);
+        if (-1 === at) {
+            parts.push(/*#__PURE__*/ jsx("span", {
+                children: text.slice(cursor)
+            }, key++));
+            break;
+        }
+        if (at > cursor) parts.push(/*#__PURE__*/ jsx("span", {
+            children: text.slice(cursor, at)
+        }, key++));
+        parts.push(/*#__PURE__*/ jsx("mark", {
+            className: "rounded-2 bg-bg-fill-brand font-medium text-text-primary-alt",
+            children: text.slice(at, at + q.length)
+        }, key++));
+        cursor = at + q.length;
+    }
+    return parts;
+};
+export { highlightMatch };

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/useNestedValueMenuState.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { collectLeaves } from "../../lib/index.js";
+import { collapseValueOptions, collectLeaves } from "../../lib/index.js";
 import { useKeyboardNav } from "../hooks/useKeyboardNav.js";
 const SELECT_ALL_ID = '__filter_value_select_all__';
 const leafKeys = (option)=>collectLeaves(option.children).map((leaf)=>String(leaf.value));
@@ -279,7 +279,7 @@ const useNestedValueMenuState = ({ sections, allValues, open, multiSelect, initi
     }, [
         allValues
     ]);
-    const buildingMultiValue = multiSelect && checkedValues.length > 0 ? checkedValues.map((v)=>labelByValue.get(String(v)) ?? String(v)).join(', ') : void 0;
+    const buildingMultiValue = multiSelect && checkedValues.length > 0 ? collapseValueOptions(allValues, checkedValues).map((token)=>'group' === token.kind ? token.label : labelByValue.get(String(token.value)) ?? String(token.value)).join(', ') : void 0;
     useEffect(()=>{
         onBuildingValueChange?.(buildingMultiValue);
     }, [

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/valueOptionSearchText.d.ts

@@ -4,4 +4,4 @@ import type { ValueOption } from './FilterInputValueMenu';
  * its optional `description` (so a path fragment finds the row). Fed to
  * `filterAndSort`. The description entry is omitted when absent.
  */
-export declare const valueOptionSearchText: (option: Pick<ValueOption, "value" | "label" | "description">) => string[];
+export declare const valueOptionSearchText: (option: Pick<ValueOption, 'value' | 'label' | 'description'>) => string[];

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/lib/valueResolution.d.ts

@@ -24,5 +24,5 @@ export declare const resolveDateRangeValue: (trimmed: string) => [string, string
 /** Validate and resolve a date value from text */
 export declare const resolveDateValue: (trimmed: string, editingChipId: string | null, conditions: Condition[]) => {
     error: boolean | undefined;
-    dateOrigin: "relative" | "absolute" | undefined;
+    dateOrigin: 'relative' | 'absolute' | undefined;
 };

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useChipCascade.d.ts

@@ -39,6 +39,6 @@ interface UseChipCascadeOptions {
 export declare const useChipCascade: ({ editing, chips, fields, conditionsRef, selectedField, selectedOperator, buildingMultiValue, upsertCondition, removeCondition, resetState, setInputText, setMenuState, setSelectedOperator, setBuildingMultiValue, }: UseChipCascadeOptions) => {
     switchEditSegment: (targetSegment: ChipSegment) => boolean;
     removeEditingChip: () => void;
-    stepBackBuildingMenu: (current: "field" | "operator" | "value") => void;
+    stepBackBuildingMenu: (current: 'field' | 'operator' | 'value') => void;
 };
 export {};

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useFilterInputAutocomplete.d.ts

@@ -22,7 +22,7 @@ export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, u
     isBuilding: boolean;
     buildingChipData: import("../../FilterInputContext").BuildingChipData | null;
     menuPositioning: {
-        placement: "bottom-start";
+        placement: 'bottom-start';
         gutter: number;
         getAnchorRect: () => {
             x: number;
@@ -55,7 +55,7 @@ export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, u
     handleBuildingChipClick: (segment: ChipSegment, anchorEl: HTMLElement) => void;
     switchEditSegment: (targetSegment: ChipSegment) => boolean;
     removeEditingChip: () => void;
-    handleConnectorChange: (connectorId: string, value: "and" | "or") => void;
+    handleConnectorChange: (connectorId: string, value: 'and' | 'or') => void;
     handleChipRemove: (chipId: string) => void;
     handleClear: () => void;
     handleKeyDown: (e: import("react").KeyboardEvent<HTMLInputElement>) => void;

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useMenuPositioning.d.ts

@@ -32,7 +32,7 @@ interface UseMenuPositioningOptions {
  */
 export declare const useMenuPositioning: ({ containerRef, buildingChipRef, inputRef, isBuilding, insertIndex, chipsCount, isMenuOpen, }: UseMenuPositioningOptions) => {
     menuPositioning: {
-        placement: "bottom-start";
+        placement: 'bottom-start';
         gutter: number;
         getAnchorRect: () => {
             x: number;

package/dist/components/FilterInput/hooks/useFilterInputExpression/buildChips.d.ts

@@ -3,4 +3,4 @@ import type { Condition, FieldMetadata, FilterInputChipData } from '../../types'
  * Derive display chips from conditions + connectors.
  * When AND and OR are mixed, AND-groups of 2+ conditions get wrapped in parentheses.
  */
-export declare const buildChips: (conditions: Condition[], connectors: Array<"and" | "or">, fields: FieldMetadata[], error: boolean) => FilterInputChipData[];
+export declare const buildChips: (conditions: Condition[], connectors: Array<'and' | 'or'>, fields: FieldMetadata[], error: boolean) => FilterInputChipData[];

package/dist/components/FilterInput/hooks/useFilterInputExpression/buildChips.js

@@ -70,7 +70,7 @@ const buildDateChip = (baseChip, condition, chipError)=>{
 const buildMultiValueChip = (baseChip, condition, field, fields, chipError)=>{
     const values = condition.value;
     const invalidIndices = field ? getInvalidValueIndices(field, values) : [];
-    const valueParts = field && 0 === invalidIndices.length ? collapseValues(field, values).map((token)=>'group' === token.kind ? null != token.count ? `${token.label} (${token.count})` : token.label : resolveValueLabel(token.value, field, fields) ?? String(token.value)) : values.map((v)=>resolveValueLabel(v, field, fields) ?? String(v));
+    const valueParts = field && 0 === invalidIndices.length ? collapseValues(field, values).map((token)=>'group' === token.kind ? token.label : resolveValueLabel(token.value, field, fields) ?? String(token.value)) : values.map((v)=>resolveValueLabel(v, field, fields) ?? String(v));
     return {
         ...baseChip,
         value: valueParts.join(MULTI_VALUE_SEPARATOR),

package/dist/components/FilterInput/hooks/useFilterInputExpression/expression.d.ts

@@ -7,7 +7,7 @@ import type { Condition, ExprNode, FieldMetadata } from '../../types';
  * Pass `fields` to expand paired conditions into two AND-joined conditions
  * (the serialization contract). Omit it to keep paired conditions intact.
  */
-export declare const buildExpression: (rawConditions: Condition[], rawConnectors: Array<"and" | "or">, fields?: FieldMetadata[]) => ExprNode | null;
+export declare const buildExpression: (rawConditions: Condition[], rawConnectors: Array<'and' | 'or'>, fields?: FieldMetadata[]) => ExprNode | null;
 /**
  * Flatten a (possibly nested) ExprNode back to flat conditions + connectors.
  * Walks the tree depth-first; between siblings inserts the parent's operator.
@@ -17,5 +17,5 @@ export declare const buildExpression: (rawConditions: Condition[], rawConnectors
  */
 export declare const expressionToConditions: (expr: ExprNode | null, fields?: FieldMetadata[]) => {
     conditions: Condition[];
-    connectors: Array<"and" | "or">;
+    connectors: Array<'and' | 'or'>;
 };

package/dist/components/FilterInput/hooks/useFilterInputExpression/useFilterInputExpression.d.ts

@@ -10,11 +10,11 @@ export declare const useFilterInputExpression: ({ fields, value, onChange, error
     conditions: Condition[];
     connectors: ("and" | "or")[];
     chips: import("../..").FilterInputChipData[];
-    upsertCondition: (field: FieldMetadata, operator: FilterOperator | undefined, val: string | number | boolean | null | Array<string | number | boolean>, editingChipId?: string | null, atIndex?: number, error?: ChipErrorSegment, dateOrigin?: "relative" | "absolute", side?: 0 | 1) => void;
+    upsertCondition: (field: FieldMetadata, operator: FilterOperator | undefined, val: string | number | boolean | null | Array<string | number | boolean>, editingChipId?: string | null, atIndex?: number, error?: ChipErrorSegment, dateOrigin?: 'relative' | 'absolute', side?: 0 | 1) => void;
     removeCondition: (chipId: string) => void;
     removeConditionAtIndex: (idx: number) => void;
     clearAll: () => void;
     replaceExpression: (expr: ExprNode | null) => void;
-    setConnectorValue: (connectorId: string, value: "and" | "or") => void;
+    setConnectorValue: (connectorId: string, value: 'and' | 'or') => void;
 };
 export {};

package/dist/components/FilterInput/hooks/useFilterInputPositioning.d.ts

@@ -18,7 +18,7 @@ interface UseFilterInputPositioningProps {
  * @param deps - extra values that force positioning recalculation (e.g. insertIndex)
  */
 export declare const useFilterInputPositioning: ({ anchorRef, containerRef, getAnchorBounds, gutter }: UseFilterInputPositioningProps, deps?: unknown[]) => {
-    placement: "bottom-start";
+    placement: 'bottom-start';
     gutter: number;
     getAnchorRect: () => {
         x: number;

package/dist/components/FilterInput/hooks/useFilterInputSelection/lib/serialize.d.ts

@@ -1,3 +1,3 @@
 import type { Condition } from '../../../types';
 /** Serialize selected (drag) or all conditions into a text string */
-export declare const serializeSelectedOrAll: (conditions: Condition[], connectors: Array<"and" | "or">, chipRegistry: Map<string, HTMLElement>) => string;
+export declare const serializeSelectedOrAll: (conditions: Condition[], connectors: Array<'and' | 'or'>, chipRegistry: Map<string, HTMLElement>) => string;

package/dist/components/FilterInput/lib/applyKnownFieldHelpers.d.ts

@@ -22,4 +22,4 @@ export declare const applyKnownFieldHelpers: (fields: FieldMetadata[]) => FieldM
  * undefined for unknown names. For consumers that hold their own expression
  * shape but want the same transform as FilterInput's `serializeValue`.
  */
-export declare const getKnownFieldSerializer: (fieldName: string) => NonNullable<FieldMetadata["serializeValue"]> | undefined;
+export declare const getKnownFieldSerializer: (fieldName: string) => NonNullable<FieldMetadata['serializeValue']> | undefined;

package/dist/components/FilterInput/lib/collapseValuesToLabels.d.ts

@@ -1,32 +1,34 @@
-import type { FieldMetadata } from '../types';
+import type { FieldMetadata, FieldValueOption } from '../types';
 /**
- * A display token for a multi-value chip. A `group` token stands in for a
- * **submenu** parent category (e.g. "SQL injection"): `count` present means a
- * partial selection ("SQL injection (4)"), `count` absent means every sub-value
- * is selected ("SQL injection"). A `leaf` token is a single committed value.
+ * A display token for a multi-value chip. A `group` token stands in for a group
+ * whose every descendant leaf is selected (e.g. "SQL injection", or a whole
+ * top-level section like "Input-based attacks") — it renders as just the group
+ * label. A `leaf` token is a single committed value. Partial group selections
+ * are never a group token: they expand to their individual `leaf` tokens.
  */
 export type CollapseToken = {
     kind: 'group';
     label: string;
-    count?: number;
 } | {
     kind: 'leaf';
     value: string | number | boolean;
 };
 /**
- * Collapse a committed leaf-value array into display tokens, folding a submenu
- * parent category into a single group token. Display-only: the stored
- * `Condition.value` array is never mutated and always holds leaf values.
+ * Collapse a leaf-value array into display tokens, folding a **fully selected**
+ * group into a single group token. Display-only: the underlying value array is
+ * never mutated and always holds leaf values.
  *
- * For a field with no nested groups this returns one leaf token per value in
- * the original committed order (identical to the previous flat behavior). For a
- * nested field it walks the config in declaration order:
- * - **Top-level groups are section headers** (no checkbox) — never collapsed;
- *   we recurse so their direct leaves render individually.
- * - **Nested groups are submenu categories** — any selection collapses to a
- *   single group token: fully selected → just the label; partially selected →
- *   label + selected-leaf `count`.
+ * Walks the config in declaration order:
+ * - A group with **every** descendant leaf selected collapses to a single group
+ *   token (its label) — this applies at any depth, so both a submenu category
+ *   ("SQL injection") and a whole top-level section ("Input-based attacks")
+ *   collapse the same way.
+ * - A **partially** selected group is not collapsed: we recurse into it so its
+ *   selected leaves render individually, while any nested fully-selected
+ *   subgroup still folds to its own label.
  *
- * Committed values absent from the config (freeform) trail in committed order.
+ * Values absent from the config (freeform) trail in original committed order.
  */
+export declare const collapseValueOptions: (options: FieldValueOption[] | undefined, values: Array<string | number | boolean>) => CollapseToken[];
+/** {@link collapseValueOptions} keyed off a field's own value config. */
 export declare const collapseValues: (field: FieldMetadata, values: Array<string | number | boolean>) => CollapseToken[];

package/dist/components/FilterInput/lib/collapseValuesToLabels.js

@@ -1,6 +1,5 @@
 import { collectLeaves, isValueGroup } from "./fields.js";
-const collapseValues = (field, values)=>{
-    const options = field.values;
+const collapseValueOptions = (options, values)=>{
     const hasGroups = options?.some(isValueGroup) ?? false;
     if (!options || !hasGroups) return values.map((value)=>({
             kind: 'leaf',
@@ -9,25 +8,18 @@ const collapseValues = (field, values)=>{
     const committed = new Set(values.map(String));
     const consumed = new Set();
     const tokens = [];
-    const walk = (opts, depth)=>{
+    const walk = (opts)=>{
         for (const option of opts)if (isValueGroup(option)) {
-            if (0 === depth) {
-                walk(option.children, depth + 1);
-                continue;
-            }
             const leafKeys = collectLeaves(option.children).map((leaf)=>String(leaf.value));
             const selected = leafKeys.filter((key)=>committed.has(key));
             if (0 === selected.length) continue;
-            const isFull = selected.length === leafKeys.length;
-            tokens.push(isFull ? {
-                kind: 'group',
-                label: option.label
-            } : {
-                kind: 'group',
-                label: option.label,
-                count: selected.length
-            });
-            for (const key of selected)consumed.add(key);
+            if (selected.length === leafKeys.length) {
+                tokens.push({
+                    kind: 'group',
+                    label: option.label
+                });
+                for (const key of selected)consumed.add(key);
+            } else walk(option.children);
         } else if (null != option.value) {
             const key = String(option.value);
             if (committed.has(key) && !consumed.has(key)) {
@@ -39,7 +31,7 @@ const collapseValues = (field, values)=>{
             }
         }
     };
-    walk(options, 0);
+    walk(options);
     for (const value of values){
         const key = String(value);
         if (!consumed.has(key)) {
@@ -52,4 +44,5 @@ const collapseValues = (field, values)=>{
     }
     return tokens;
 };
-export { collapseValues };
+const collapseValues = (field, values)=>collapseValueOptions(field.values, values);
+export { collapseValueOptions, collapseValues };

package/dist/components/FilterInput/lib/conditions.d.ts

@@ -2,13 +2,13 @@ import type { ChipErrorSegment, Condition, FilterInputChipData, FilterOperator }
 /** Map a chip ID (e.g. "chip-2") back to condition index */
 export declare const chipIdToConditionIndex: (chipId: string) => number | null;
 /** A filter value is empty when null/undefined, '', or an empty array. */
-export declare const isEmptyFilterValue: (value: Condition["value"] | undefined) => boolean;
+export declare const isEmptyFilterValue: (value: Condition['value'] | undefined) => boolean;
 /**
  * Error segment for an incomplete triplet, or `undefined` when complete:
  * missing operator → whole triplet (`true`); value-bearing operator with an
  * empty value → the value segment; no-value operator ("is set") → complete.
  */
-export declare const incompleteTripletError: (operator: FilterOperator | null | undefined, value: Condition["value"] | undefined) => ChipErrorSegment | undefined;
+export declare const incompleteTripletError: (operator: FilterOperator | null | undefined, value: Condition['value'] | undefined) => ChipErrorSegment | undefined;
 /**
  * Convert a condition-level insert index to a position in the chips array.
  * When `afterConnector` is true, split AFTER the connector preceding the target chip.

package/dist/components/FilterInput/lib/constants.d.ts

@@ -12,9 +12,12 @@ export declare const QUERY_BAR_SELECTOR = "[data-slot=\"filter-input\"]";
 /** Gap between the dropdown and the field border in the empty/initial state. */
 export declare const MENU_BASE_GUTTER = 4;
 /** Extra vertical offset added to the anchor's bottom when the dropdown is
- *  anchored to a chip / input — total visual gap becomes
- *  MENU_BASE_GUTTER + MENU_CHIP_GUTTER_OFFSET (12). */
-export declare const MENU_CHIP_GUTTER_OFFSET = 8;
+ *  anchored to a chip / input. A building chip (h-22) sits 10px inset from the
+ *  field's bottom edge (measured: 8px py + 2px top-biased placement), so this
+ *  offset cancels that inset — the visual gap below the field border stays =
+ *  MENU_BASE_GUTTER in every state, matching the empty/field-anchored first
+ *  level. Value verified live in Storybook, not derived from nominal sizes. */
+export declare const MENU_CHIP_GUTTER_OFFSET = 10;
 /** Labels for non-chip filter chip variants (connectors, brackets). */
 export declare const VARIANT_LABELS: Partial<Record<FilterInputChipVariant, string>>;
 /** Raw operator symbols shown on the right side of menus. */

package/dist/components/FilterInput/lib/constants.js

@@ -10,7 +10,7 @@ const CHIP_ID_PATTERN = /^chip-(\d+)$/;
 const CONNECTOR_ID_PATTERN = /^connector-(\d+)$/;
 const QUERY_BAR_SELECTOR = '[data-slot="filter-input"]';
 const MENU_BASE_GUTTER = 4;
-const MENU_CHIP_GUTTER_OFFSET = 8;
+const MENU_CHIP_GUTTER_OFFSET = 10;
 const VARIANT_LABELS = {
     and: 'AND',
     or: 'OR',

package/dist/components/FilterInput/lib/index.d.ts

@@ -5,7 +5,7 @@ export { applyFieldValueTransforms } from './applyFieldValueTransforms';
 export { applyKnownFieldHelpers, getKnownFieldSerializer } from './applyKnownFieldHelpers';
 export { buildFieldMenuSections, type FieldMenuSection } from './buildFieldMenuSections';
 export { buildValueMenuSections, type ValueMenuRow, type ValueMenuSection, } from './buildValueMenuSections';
-export { type CollapseToken, collapseValues } from './collapseValuesToLabels';
+export { type CollapseToken, collapseValueOptions, collapseValues, } from './collapseValuesToLabels';
 export { chipIdToConditionIndex, findChipSplitIndex, incompleteTripletError, isEmptyFilterValue, } from './conditions';
 export { CONNECTOR_ID_PATTERN, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, NO_VALUE_OPERATORS, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, OPERATORS_BY_TYPE, QUERY_BAR_SELECTOR, VARIANT_LABELS, } from './constants';
 export { COUNTRY_OPTIONS } from './country';

package/dist/components/FilterInput/lib/index.js

@@ -4,7 +4,7 @@ export { applyFieldValueTransforms } from "./applyFieldValueTransforms.js";
 export { applyKnownFieldHelpers, getKnownFieldSerializer } from "./applyKnownFieldHelpers.js";
 export { buildFieldMenuSections } from "./buildFieldMenuSections.js";
 export { buildValueMenuSections } from "./buildValueMenuSections.js";
-export { collapseValues } from "./collapseValuesToLabels.js";
+export { collapseValueOptions, collapseValues } from "./collapseValuesToLabels.js";
 export { chipIdToConditionIndex, findChipSplitIndex, incompleteTripletError, isEmptyFilterValue } from "./conditions.js";
 export { CONNECTOR_ID_PATTERN, MENU_BASE_GUTTER, MENU_CHIP_GUTTER_OFFSET, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS } from "./constants.js";
 export { COUNTRY_OPTIONS } from "./country/index.js";

package/dist/components/FilterInput/lib/validation.d.ts

@@ -40,4 +40,4 @@ export declare const isValidFieldValue: (fieldValues: FieldValueOption[], v: str
  */
 export declare const getInvalidValueIndices: (field: FieldMetadata, values: Array<string | number | boolean>) => number[];
 /** Check if condition value(s) are valid for the given field. Returns true if error. */
-export declare const validateValueForField: (field: FieldMetadata, value: Condition["value"]) => boolean;
+export declare const validateValueForField: (field: FieldMetadata, value: Condition['value']) => boolean;

package/dist/components/Flex/Flex.d.ts

@@ -3,15 +3,15 @@ import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 declare const flexVariants: (props?: ({
     inline?: boolean | null | undefined;
-    direction?: "row" | "column" | "column-reverse" | "row-reverse" | null | undefined;
-    align?: "center" | "end" | "baseline" | "start" | "stretch" | null | undefined;
-    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
-    wrap?: "reverse" | "nowrap" | "wrap" | null | undefined;
-    gap?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 12 | 20 | 32 | 40 | 24 | 56 | 48 | 28 | 36 | 64 | 96 | 112 | 128 | 144 | null | undefined;
+    direction?: "column" | "column-reverse" | "row" | "row-reverse" | null | undefined;
+    align?: "baseline" | "center" | "end" | "start" | "stretch" | null | undefined;
+    justify?: "around" | "between" | "center" | "end" | "evenly" | "start" | null | undefined;
+    wrap?: "nowrap" | "reverse" | "wrap" | null | undefined;
+    gap?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
     grow?: boolean | null | undefined;
     shrink?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;
-    basis?: 0 | "auto" | "full" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | null | undefined;
+    basis?: "1/12" | "1/2" | "1/3" | "1/4" | "1/5" | "1/6" | "10/12" | "11/12" | "2/12" | "2/3" | "2/4" | "2/5" | "2/6" | "3/12" | "3/4" | "3/5" | "3/6" | "4/12" | "4/5" | "4/6" | "5/12" | "5/6" | "6/12" | "7/12" | "8/12" | "9/12" | "auto" | "full" | 0 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type FlexNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
 type FlexVariantProps = VariantProps<typeof flexVariants>;

package/dist/components/Heading/Heading.d.ts

@@ -3,9 +3,9 @@ import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 import type { PolymorphicComponentProps } from '../Polymorphic';
 declare const headingVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | null | undefined;
-    weight?: "bold" | "light" | "regular" | "medium" | null | undefined;
-    color?: "primary" | "secondary" | "inherit" | "primary-alt" | "secondary-alt" | null | undefined;
+    size?: "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "lg" | "md" | "sm" | "xl" | null | undefined;
+    weight?: "bold" | "light" | "medium" | "regular" | null | undefined;
+    color?: "inherit" | "primary" | "primary-alt" | "secondary" | "secondary-alt" | null | undefined;
     align?: "center" | "left" | "right" | null | undefined;
     grow?: boolean | null | undefined;
     truncate?: boolean | null | undefined;

package/dist/components/InlineEdit/InlineEditSelect.d.ts

@@ -33,7 +33,7 @@ export interface InlineEditSelectProps {
      */
     children: ReactNode;
 }
-export declare const InlineEditSelect: {
-    ({ items, collection, multiple, children, }: InlineEditSelectProps): import("react").JSX.Element;
-    displayName: string;
-};
+export declare function InlineEditSelect({ items, collection, multiple, children, }: InlineEditSelectProps): import("react").JSX.Element;
+export declare namespace InlineEditSelect {
+    var displayName: string;
+}

package/dist/components/Input/classes.d.ts

@@ -1,4 +1,4 @@
 export declare const inputVariants: (props?: ({
     error?: boolean | null | undefined;
-    size?: "small" | "medium" | "default" | "inline-edit" | null | undefined;
+    size?: "default" | "inline-edit" | "medium" | "small" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/InputGroup/InputGroup.d.ts

@@ -2,7 +2,7 @@ import type { FC, HTMLAttributes } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import { type TestableProps } from '../../utils/testId';
 export declare const inputGroupVariants: (props?: ({
-    size?: "small" | "medium" | "default" | "inline-edit" | null | undefined;
+    size?: "default" | "inline-edit" | "medium" | "small" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type InputGroupSize = NonNullable<VariantProps<typeof inputGroupVariants>['size']>;
 type InputGroupProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof inputGroupVariants> & TestableProps;

package/dist/components/InputGroup/InputGroupAddon.d.ts

@@ -1,8 +1,8 @@
 import type { ComponentProps, FC } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-end" | "inline-start" | "block-end" | null | undefined;
-    variant?: "outline" | "ghost" | null | undefined;
+    align?: "block-end" | "inline-end" | "inline-start" | null | undefined;
+    variant?: "ghost" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const InputGroupAddon: FC<ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>>;
 export {};