@igne-agency/react-web-ui 0.3.0 → 0.4.0

package/dist/components/checkbox-group-field/checkbox-group-field.js

@@ -13,13 +13,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 	label="Statuses"
 * 	optionalLabel="optional"
 * 	items={[{ label: "Open", value: "open" }]}
+* 	checkIcon={<CheckIcon />}
 * 	value={statuses}
 * 	onValueChange={setStatuses}
 * />
 */
 var CheckboxGroupField = (t0) => {
-	const $ = c(38);
-	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, items, readOnly, name, onBlur, className, value, defaultValue, onValueChange, disabled } = t0;
+	const $ = c(40);
+	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, items, checkIcon, readOnly, name, onBlur, className, value, defaultValue, onValueChange, disabled } = t0;
 	const { controlId } = CheckboxGroup.useIds();
 	const prefix = name ?? controlId;
 	const t1 = value !== void 0 && value.length > 0;
@@ -36,31 +37,34 @@ var CheckboxGroupField = (t0) => {
 		$[3] = t2;
 	} else t2 = $[3];
 	let t3;
-	if ($[4] !== items || $[5] !== onBlur || $[6] !== prefix || $[7] !== readOnly) {
+	if ($[4] !== checkIcon || $[5] !== items || $[6] !== onBlur || $[7] !== prefix || $[8] !== readOnly) {
 		let t4;
-		if ($[9] !== onBlur || $[10] !== prefix || $[11] !== readOnly) {
-			t4 = (item) => /* @__PURE__ */ jsxs(CheckboxGroup.Item, { children: [/* @__PURE__ */ jsx(CheckboxGroup.Checkbox, {
+		if ($[10] !== checkIcon || $[11] !== onBlur || $[12] !== prefix || $[13] !== readOnly) {
+			t4 = (item) => /* @__PURE__ */ jsxs(CheckboxGroup.Item, { children: [/* @__PURE__ */ jsx(CheckboxGroup.Control, {
 				id: `${prefix}-${item.value}`,
 				name: prefix,
 				inputRef: detachHiddenInput,
 				value: item.value,
 				onBlur,
-				readOnly
+				readOnly,
+				children: /* @__PURE__ */ jsx(CheckboxGroup.Indicator, { children: checkIcon })
 			}), item.label] }, item.value);
-			$[9] = onBlur;
-			$[10] = prefix;
-			$[11] = readOnly;
-			$[12] = t4;
-		} else t4 = $[12];
+			$[10] = checkIcon;
+			$[11] = onBlur;
+			$[12] = prefix;
+			$[13] = readOnly;
+			$[14] = t4;
+		} else t4 = $[14];
 		t3 = items.map(t4);
-		$[4] = items;
-		$[5] = onBlur;
-		$[6] = prefix;
-		$[7] = readOnly;
-		$[8] = t3;
-	} else t3 = $[8];
+		$[4] = checkIcon;
+		$[5] = items;
+		$[6] = onBlur;
+		$[7] = prefix;
+		$[8] = readOnly;
+		$[9] = t3;
+	} else t3 = $[9];
 	let t4;
-	if ($[13] !== defaultValue || $[14] !== disabled || $[15] !== onValueChange || $[16] !== t3 || $[17] !== value) {
+	if ($[15] !== defaultValue || $[16] !== disabled || $[17] !== onValueChange || $[18] !== t3 || $[19] !== value) {
 		t4 = /* @__PURE__ */ jsx(CheckboxGroup.Group, {
 			value,
 			defaultValue,
@@ -68,27 +72,27 @@ var CheckboxGroupField = (t0) => {
 			disabled,
 			children: t3
 		});
-		$[13] = defaultValue;
-		$[14] = disabled;
-		$[15] = onValueChange;
-		$[16] = t3;
-		$[17] = value;
-		$[18] = t4;
-	} else t4 = $[18];
+		$[15] = defaultValue;
+		$[16] = disabled;
+		$[17] = onValueChange;
+		$[18] = t3;
+		$[19] = value;
+		$[20] = t4;
+	} else t4 = $[20];
 	let t5;
-	if ($[19] !== description) {
+	if ($[21] !== description) {
 		t5 = /* @__PURE__ */ jsx(CheckboxGroup.Description, { children: description });
-		$[19] = description;
-		$[20] = t5;
-	} else t5 = $[20];
+		$[21] = description;
+		$[22] = t5;
+	} else t5 = $[22];
 	let t6;
-	if ($[21] !== errors) {
+	if ($[23] !== errors) {
 		t6 = /* @__PURE__ */ jsx(CheckboxGroup.Error, { children: errors });
-		$[21] = errors;
-		$[22] = t6;
-	} else t6 = $[22];
+		$[23] = errors;
+		$[24] = t6;
+	} else t6 = $[24];
 	let t7;
-	if ($[23] !== className || $[24] !== dirty || $[25] !== disabled || $[26] !== errors || $[27] !== name || $[28] !== pending || $[29] !== readOnly || $[30] !== requiredness || $[31] !== t1 || $[32] !== t2 || $[33] !== t4 || $[34] !== t5 || $[35] !== t6 || $[36] !== touched) {
+	if ($[25] !== className || $[26] !== dirty || $[27] !== disabled || $[28] !== errors || $[29] !== name || $[30] !== pending || $[31] !== readOnly || $[32] !== requiredness || $[33] !== t1 || $[34] !== t2 || $[35] !== t4 || $[36] !== t5 || $[37] !== t6 || $[38] !== touched) {
 		t7 = /* @__PURE__ */ jsxs(CheckboxGroup.Root, {
 			name,
 			className,
@@ -107,22 +111,22 @@ var CheckboxGroupField = (t0) => {
 				t6
 			]
 		});
-		$[23] = className;
-		$[24] = dirty;
-		$[25] = disabled;
-		$[26] = errors;
-		$[27] = name;
-		$[28] = pending;
-		$[29] = readOnly;
-		$[30] = requiredness;
-		$[31] = t1;
-		$[32] = t2;
-		$[33] = t4;
-		$[34] = t5;
-		$[35] = t6;
-		$[36] = touched;
-		$[37] = t7;
-	} else t7 = $[37];
+		$[25] = className;
+		$[26] = dirty;
+		$[27] = disabled;
+		$[28] = errors;
+		$[29] = name;
+		$[30] = pending;
+		$[31] = readOnly;
+		$[32] = requiredness;
+		$[33] = t1;
+		$[34] = t2;
+		$[35] = t4;
+		$[36] = t5;
+		$[37] = t6;
+		$[38] = touched;
+		$[39] = t7;
+	} else t7 = $[39];
 	return t7;
 };
 export { CheckboxGroupField };

package/dist/components/checkbox-group-field/checkbox-group.d.ts

@@ -5,7 +5,9 @@ import { Checkbox } from "../checkbox-field/index.ts";
 import { Field } from "../field/index.ts";
 import { FieldsetLegend, FieldsetRoot, type FieldsetRootProps } from "../fieldset/fieldset-root.tsx";
 export type CheckboxGroupRootProps = FieldsetRootProps;
+/** The group of boxes, which holds the array of ticked values. */
 declare const CheckboxGroupGroup: ({ className, ...props }: BaseCheckboxGroup.Props) => ReactNode;
+/** One box's row: a label wrapping its `Control` and its text. */
 declare const CheckboxGroupItem: ({ className, ...props }: BaseField.Item.Props) => ReactNode;
 /** The parts of a checkbox group. */
 export type CheckboxGroupParts = Readonly<{
@@ -13,7 +15,8 @@ export type CheckboxGroupParts = Readonly<{
     Legend: typeof FieldsetLegend;
     Group: typeof CheckboxGroupGroup;
     Item: typeof CheckboxGroupItem;
-    Checkbox: typeof Checkbox;
+    Control: typeof Checkbox.Control;
+    Indicator: typeof Checkbox.Indicator;
     Description: typeof Field.Description;
     Error: typeof Field.Error;
     useIds: typeof Field.useIds;
@@ -28,7 +31,9 @@ export type CheckboxGroupParts = Readonly<{
  * 	<CheckboxGroup.Legend optionalLabel="optional">Statuses</CheckboxGroup.Legend>
  * 	<CheckboxGroup.Group value={values} onValueChange={setValues}>
  * 		<CheckboxGroup.Item>
- * 			<CheckboxGroup.Checkbox value="open" />
+ * 			<CheckboxGroup.Control value="open">
+ * 				<CheckboxGroup.Indicator><CheckIcon /></CheckboxGroup.Indicator>
+ * 			</CheckboxGroup.Control>
  * 			Open
  * 		</CheckboxGroup.Item>
  * 	</CheckboxGroup.Group>

package/dist/components/checkbox-group-field/checkbox-group.js

@@ -3,11 +3,12 @@ import { Field as Field$1 } from "../field/field.js";
 import { FieldsetLegend, FieldsetRoot } from "../fieldset/fieldset-root.js";
 import checkbox_group_module_default from "./checkbox-group.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { CheckboxGroup } from "@base-ui/react/checkbox-group";
 // src/components/checkbox-group-field/checkbox-group.tsx
+/** The group of boxes, which holds the array of ticked values. */
 var CheckboxGroupGroup = (t0) => {
 	const $ = c(8);
 	let className;
@@ -39,6 +40,7 @@ var CheckboxGroupGroup = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** One box's row: a label wrapping its `Control` and its text. */
 var CheckboxGroupItem = (t0) => {
 	const $ = c(8);
 	let className;
@@ -83,7 +85,9 @@ var CheckboxGroupItem = (t0) => {
 * 	<CheckboxGroup.Legend optionalLabel="optional">Statuses</CheckboxGroup.Legend>
 * 	<CheckboxGroup.Group value={values} onValueChange={setValues}>
 * 		<CheckboxGroup.Item>
-* 			<CheckboxGroup.Checkbox value="open" />
+* 			<CheckboxGroup.Control value="open">
+* 				<CheckboxGroup.Indicator><CheckIcon /></CheckboxGroup.Indicator>
+* 			</CheckboxGroup.Control>
 * 			Open
 * 		</CheckboxGroup.Item>
 * 	</CheckboxGroup.Group>
@@ -94,7 +98,8 @@ var CheckboxGroup$1 = {
 	Legend: FieldsetLegend,
 	Group: CheckboxGroupGroup,
 	Item: CheckboxGroupItem,
-	Checkbox,
+	Control: Checkbox.Control,
+	Indicator: Checkbox.Indicator,
 	Description: Field$1.Description,
 	Error: Field$1.Error,
 	useIds: Field$1.useIds

package/dist/components/collapsible/collapsible.css

@@ -1,10 +1,10 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_gphte_3 {
+  ._root_1pgip_3 {
     display: flex;
     flex-direction: column;
   }
-  ._trigger_gphte_7 {
+  ._trigger_1pgip_7 {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -20,18 +20,18 @@
     text-align: start;
     cursor: pointer;
   }
-  ._trigger_gphte_7 {
+  ._trigger_1pgip_7 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._trigger_gphte_7:focus-visible {
+  ._trigger_1pgip_7:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._trigger_gphte_7 {
+  ._trigger_1pgip_7 {
     position: relative;
     isolation: isolate;
   }
-  ._trigger_gphte_7::after {
+  ._trigger_1pgip_7::after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -42,47 +42,52 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._trigger_gphte_7::after {
+    ._trigger_1pgip_7::after {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._trigger_gphte_7:hover:not(:disabled, [data-disabled])::after {
+  ._trigger_1pgip_7:hover:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-hover);
   }
-  ._trigger_gphte_7:active:not(:disabled, [data-disabled])::after {
+  ._trigger_1pgip_7:active:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-pressed);
   }
-  ._trigger_gphte_7[data-disabled] {
+  ._trigger_1pgip_7[data-disabled] {
     color: var(--sys-color-disabled-fg);
     cursor: not-allowed;
   }
-  ._chevron_gphte_59 {
+  ._indicator_1pgip_59 {
     flex-shrink: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._chevron_gphte_59 {
+    ._indicator_1pgip_59 {
       transition: rotate var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  [data-panel-open] > ._chevron_gphte_59 {
+  [data-panel-open] > ._indicator_1pgip_59 {
     rotate: 180deg;
   }
-  ._panel_gphte_70 {
+  ._indicator_1pgip_59 {
+    display: inline-flex;
+    color: var(--collapsible-indicator-fg, currentcolor);
+    font-size: var(--collapsible-indicator-size, 1.5em);
+  }
+  ._panel_1pgip_75 {
     overflow: hidden;
   }
-  ._panel_gphte_70[hidden]:not([hidden=until-found]) {
+  ._panel_1pgip_75[hidden]:not([hidden=until-found]) {
     display: none;
   }
   @media not (prefers-reduced-motion) {
-    ._panel_gphte_70 {
+    ._panel_1pgip_75 {
       block-size: var(--collapsible-panel-height);
       transition: block-size var(--sys-motion-short) var(--sys-motion-standard);
     }
-    ._panel_gphte_70[data-starting-style], ._panel_gphte_70[data-ending-style] {
+    ._panel_1pgip_75[data-starting-style], ._panel_1pgip_75[data-ending-style] {
       block-size: 0;
     }
   }
-  ._content_gphte_85 {
+  ._content_1pgip_90 {
     padding: var(--collapsible-pad-y, var(--sys-unit-4)) var(--collapsible-pad-x, var(--sys-unit-6));
   }
 }

package/dist/components/collapsible/collapsible.d.ts

@@ -1,22 +1,34 @@
 import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import { useRender } from "@base-ui/react/use-render";
 import type { ReactNode } from "react";
 export type CollapsibleRootProps = Omit<BaseCollapsible.Root.Props, "className"> & Readonly<{
     className?: string;
 }>;
 export type CollapsibleTriggerProps = Omit<BaseCollapsible.Trigger.Props, "className" | "children"> & Readonly<{
     className?: string;
-    /** What the panel holds, as the trigger's label. */
+    /** The label naming what the panel holds, then a `Collapsible.Indicator`. */
     children: ReactNode;
 }>;
+export type CollapsibleIndicatorProps = useRender.ComponentProps<"span">;
 export type CollapsiblePanelProps = Omit<BaseCollapsible.Panel.Props, "className"> & Readonly<{
     className?: string;
 }>;
+/** The trigger and its panel. */
 declare const Root: ({ className, ...props }: CollapsibleRootProps) => ReactNode;
-declare const Trigger: ({ className, children, ...props }: CollapsibleTriggerProps) => ReactNode;
+/** The button that folds the panel open and shut. */
+declare const Trigger: ({ className, ...props }: CollapsibleTriggerProps) => ReactNode;
+/**
+ * The trigger's open-state glyph, such as the app's chevron, turned over while
+ * the panel is open. Put it last in the `Trigger`; without children it renders
+ * nothing.
+ */
+declare const Indicator: ({ render, className, children, ref, ...props }: CollapsibleIndicatorProps) => ReactNode;
+/** What the trigger folds, along its height. */
 declare const Panel: ({ className, children, ...props }: CollapsiblePanelProps) => ReactNode;
 type CollapsibleNamespace = Readonly<{
     Root: typeof Root;
     Trigger: typeof Trigger;
+    Indicator: typeof Indicator;
     Panel: typeof Panel;
 }>;
 /**
@@ -25,7 +37,10 @@ type CollapsibleNamespace = Readonly<{
  *
  * @example
  * <Collapsible.Root>
- * 	<Collapsible.Trigger>Advanced settings</Collapsible.Trigger>
+ * 	<Collapsible.Trigger>
+ * 		Advanced settings
+ * 		<Collapsible.Indicator><ChevronIcon /></Collapsible.Indicator>
+ * 	</Collapsible.Trigger>
  * 	<Collapsible.Panel>{settings}</Collapsible.Panel>
  * </Collapsible.Root>
  */

package/dist/components/collapsible/collapsible.js

@@ -1,11 +1,11 @@
-import SvgExpandMore from "../../vendor/@material-design-icons/svg/outlined/expand_more.js";
-import { Icon } from "../icon/icon.js";
 import collapsible_module_default from "./collapsible.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 import { Collapsible } from "@base-ui/react/collapsible";
 // src/components/collapsible/collapsible.tsx
+/** The trigger and its panel. */
 var Root = (t0) => {
 	const $ = c(8);
 	let className;
@@ -37,52 +37,101 @@ var Root = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** The button that folds the panel open and shut. */
 var Trigger = (t0) => {
-	const $ = c(11);
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(collapsible_module_default.trigger, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Collapsible.Trigger, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* The trigger's open-state glyph, such as the app's chevron, turned over while
+* the panel is open. Put it last in the `Trigger`; without children it renders
+* nothing.
+*/
+var Indicator = (t0) => {
+	const $ = c(16);
 	let children;
 	let className;
 	let props;
+	let ref;
+	let render;
 	if ($[0] !== t0) {
-		({className, children, ...props} = t0);
+		({render, className, children, ref, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
 		$[3] = props;
+		$[4] = ref;
+		$[5] = render;
 	} else {
 		children = $[1];
 		className = $[2];
 		props = $[3];
+		ref = $[4];
+		render = $[5];
 	}
 	let t1;
-	if ($[4] !== className) {
-		t1 = clsx(collapsible_module_default.trigger, className);
-		$[4] = className;
-		$[5] = t1;
-	} else t1 = $[5];
+	if ($[6] !== className) {
+		t1 = clsx(collapsible_module_default.indicator, className);
+		$[6] = className;
+		$[7] = t1;
+	} else t1 = $[7];
 	let t2;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(Icon, {
-			svg: SvgExpandMore,
-			label: "",
-			size: 1.5,
-			className: collapsible_module_default.chevron
-		});
-		$[6] = t2;
-	} else t2 = $[6];
-	let t3;
-	if ($[7] !== children || $[8] !== props || $[9] !== t1) {
-		t3 = /* @__PURE__ */ jsxs(Collapsible.Trigger, {
-			className: t1,
+	if ($[8] !== children || $[9] !== props || $[10] !== t1) {
+		t2 = {
+			"aria-hidden": true,
 			...props,
-			children: [children, t2]
-		});
-		$[7] = children;
-		$[8] = props;
-		$[9] = t1;
-		$[10] = t3;
-	} else t3 = $[10];
-	return t3;
+			className: t1,
+			children
+		};
+		$[8] = children;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== ref || $[13] !== render || $[14] !== t2) {
+		t3 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t2
+		};
+		$[12] = ref;
+		$[13] = render;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	const element = useRender(t3);
+	return children === void 0 || children === null ? null : element;
 };
+/** What the trigger folds, along its height. */
 var Panel = (t0) => {
 	const $ = c(12);
 	let children;
@@ -134,13 +183,17 @@ var Panel = (t0) => {
 *
 * @example
 * <Collapsible.Root>
-* 	<Collapsible.Trigger>Advanced settings</Collapsible.Trigger>
+* 	<Collapsible.Trigger>
+* 		Advanced settings
+* 		<Collapsible.Indicator><ChevronIcon /></Collapsible.Indicator>
+* 	</Collapsible.Trigger>
 * 	<Collapsible.Panel>{settings}</Collapsible.Panel>
 * </Collapsible.Root>
 */
 var Collapsible$1 = {
 	Root,
 	Trigger,
+	Indicator,
 	Panel
 };
 export { Collapsible$1 as Collapsible };

package/dist/components/collapsible/collapsible.module.js

@@ -1,14 +1,14 @@
 import './collapsible.css';// src/components/collapsible/collapsible.module.scss
-var root = "_root_gphte_3";
-var trigger = "_trigger_gphte_7";
-var chevron = "_chevron_gphte_59";
-var panel = "_panel_gphte_70";
-var content = "_content_gphte_85";
+var root = "_root_1pgip_3";
+var trigger = "_trigger_1pgip_7";
+var indicator = "_indicator_1pgip_59";
+var panel = "_panel_1pgip_75";
+var content = "_content_1pgip_90";
 var collapsible_module_default = {
 	root,
 	trigger,
-	chevron,
+	indicator,
 	panel,
 	content
 };
-export { chevron, content, collapsible_module_default as default, panel, root, trigger };
+export { content, collapsible_module_default as default, indicator, panel, root, trigger };

package/dist/components/combobox-field/combobox-field.d.ts

@@ -1,8 +1,8 @@
 import type { QueryKey } from "@tanstack/react-query";
 import { type ReactNode } from "react";
 import { type FieldBlurHandler, type FieldProps } from "../field/index.ts";
+import { type ComboboxPopupLabels } from "./combobox.tsx";
 import { type ComboboxItems, type ItemQuery } from "./combobox-items.ts";
-import { type ComboboxPopupLabels } from "./combobox-popup-body.tsx";
 import { type ComboboxMode } from "./selection.ts";
 import { type ValueStateLabels } from "./value-state.ts";
 /** Everything a combobox field takes besides its items, its value and how it reads them. */
@@ -21,6 +21,10 @@ export type ComboboxFieldChrome = FieldProps & ComboboxPopupLabels & Readonly<{
     searchDelay?: number;
     /** Applied to the field wrapper, so callers can size the control. */
     className?: string;
+    /** The chevron at the end of the control, such as an expand icon. */
+    icon?: ReactNode;
+    /** The mark beside a chosen option, such as a tick. */
+    checkIcon: ReactNode;
 }>;
 /** How a combobox field reads its items. */
 export type ComboboxDerivations<TItem> = Readonly<{
@@ -39,6 +43,8 @@ export type ComboboxItemLookup<TItem, TData = TItem, TKey extends QueryKey = Que
     itemQuery?: never;
 }> | (Readonly<{
     itemQuery: ItemQuery<TItem, TData, TKey>;
+    /** Marks a value that is no longer available, beside its label. */
+    unavailableIcon?: ReactNode;
 }> & ValueStateLabels);
 export type ComboboxFieldProps<TItem, TData = TItem, TKey extends QueryKey = QueryKey> = ComboboxFieldChrome & ComboboxItems<TItem> & ComboboxDerivations<TItem> & ComboboxMode<TItem> & ComboboxItemLookup<TItem, TData, TKey>;
 /**
@@ -59,6 +65,8 @@ export type ComboboxFieldProps<TItem, TData = TItem, TKey extends QueryKey = Que
  * 	itemToStringLabel={user => user.name}
  * 	value={reviewer}
  * 	onValueChange={setReviewer}
+ * 	icon={<ExpandMoreIcon />}
+ * 	checkIcon={<CheckIcon />}
  * 	{...comboboxCopy}>
  * 	{user => user.name}
  * </ComboboxField>