@recursica/mui-adapter 0.26.0 → 0.28.0

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mui-adapter"
   },
-  "version": "0.26.0",
+  "version": "0.28.0",
   "publishConfig": {
     "access": "public"
   },

package/src/components/Autocomplete/Autocomplete.tsx

@@ -8,6 +8,8 @@ import {
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
@@ -77,42 +79,50 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
       ListboxProps,
       ...rest
     } = props;
-    const sanitizedProps = filterStylingProps(rest, overStyled);
-    const restRecord = sanitizedProps as Record<string, unknown>;
-
-    // Delete prohibited sizing hooks from bypassing variables natively
-    delete restRecord["size"];
-    delete restRecord["variant"];
-    delete restRecord["radius"];
+    // Props this component intentionally doesn't support — deleted at runtime so they can't leak
+    // through even if a caller forces them via plain JavaScript, bypassing the Omit<> above.
+    const UNSUPPORTED_PROPS = [
+      "size", // Recursica controls sizing via design tokens, not MUI's native small/medium size
+    ] as const satisfies readonly (keyof MuiAutocompleteProps<
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      any,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      any,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      any,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      any,
+      "div"
+    >)[];
 
-    // Securely map core native blocks down ensuring nested CSS modules map precisely
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-      inputRoot: styles.input, // Map Mantine .input (wrapper) to MUI's inputRoot
-      listbox: styles.dropdown, // Map Mantine .dropdown to MUI's listbox
-      option: styles.option,
-    };
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled),
+      UNSUPPORTED_PROPS,
+    );
+    const restRecord = sanitizedProps as Record<string, unknown>;
 
-    const classNamesProp = restRecord.classNames;
-    if (
-      classNamesProp &&
-      typeof classNamesProp === "object" &&
-      !Array.isArray(classNamesProp)
-    ) {
-      const o = classNamesProp as Partial<Record<string, string>>;
-      mergedClassNames.root = o.wrapper
-        ? `${styles.root} ${o.wrapper}`
-        : styles.root;
-      mergedClassNames.inputRoot = o.input
-        ? `${styles.input} ${o.input}`
-        : styles.input;
-      mergedClassNames.listbox = o.dropdown
-        ? `${styles.dropdown} ${o.dropdown}`
-        : styles.dropdown;
-      mergedClassNames.option = o.option
-        ? `${styles.option} ${o.option}`
-        : styles.option;
-    }
+    // Securely map core native blocks down ensuring nested CSS modules map precisely. Note MUI's
+    // actual prop is "classes", not "classNames" (that's Mantine's naming) — this used to read
+    // the wrong key, silently no-op-ing any caller-supplied classes. The caller-facing slot names
+    // below (wrapper/input/dropdown/option) mirror the mantine-adapter's own Autocomplete
+    // classNames slots, translated to MUI's real classes slot names (root/inputRoot/listbox/option).
+    const callerClasses = restRecord.classes as
+      | Partial<Record<string, string>>
+      | undefined;
+    const mergedClassNames = mergeClassNames(
+      {
+        root: styles.root,
+        inputRoot: styles.input, // Map Mantine .input (wrapper) to MUI's inputRoot
+        listbox: styles.dropdown, // Map Mantine .dropdown to MUI's listbox
+        option: styles.option,
+      },
+      callerClasses && {
+        root: callerClasses.wrapper,
+        inputRoot: callerClasses.input,
+        listbox: callerClasses.dropdown,
+        option: callerClasses.option,
+      },
+    );
 
     const wrapperClass = className
       ? `${styles.layoutOverride} ${className}`
@@ -148,6 +158,8 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
           /* Naked Input execution safely decoupled from Mui's macro Input.Wrapper DOM hooks */
           <MuiAutocomplete
             ref={ref}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            {...(sanitizedProps as any)}
             freeSolo
             disableClearable
             classes={mergedClassNames}

package/src/components/Avatar/Avatar.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Avatar.module.css";
@@ -42,27 +43,16 @@ const _Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
     computedStyle = "icon";
   }
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    image: styles.image,
-    placeholder: styles.placeholder,
-  };
-
-  const classNamesProp = restRecord.classNames;
-  if (
-    classNamesProp &&
-    typeof classNamesProp === "object" &&
-    !Array.isArray(classNamesProp)
-  ) {
-    const o = classNamesProp as Partial<Record<string, string>>;
-    mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
-    mergedClassNames.image = o.image
-      ? `${styles.image} ${o.image}`
-      : styles.image;
-    mergedClassNames.placeholder = o.placeholder
-      ? `${styles.placeholder} ${o.placeholder}`
-      : styles.placeholder;
-  }
+  // Note MUI's actual prop is "classes", not "classNames" (that's Mantine's naming) — this
+  // used to read the wrong key, silently no-op-ing any caller-supplied classes.
+  const mergedClassNames = mergeClassNames(
+    {
+      root: styles.root,
+      image: styles.image,
+      placeholder: styles.placeholder,
+    },
+    restRecord.classes as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
 

package/src/components/Badge/Badge.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Badge.module.css";
@@ -24,19 +25,14 @@ const _Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
   // External layout props like margins are safely preserved.
   const sanitizedProps = filterStylingProps(rest, overStyled);
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-  };
-
-  const classNamesProp = (sanitizedProps as Record<string, unknown>).classNames;
-  if (
-    classNamesProp &&
-    typeof classNamesProp === "object" &&
-    !Array.isArray(classNamesProp)
-  ) {
-    const o = classNamesProp as Partial<Record<string, string>>;
-    mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
-  }
+  // Note MUI's actual prop is "classes", not "classNames" (that's Mantine's naming) — this
+  // used to read the wrong key, silently no-op-ing any caller-supplied classes.
+  const mergedClassNames = mergeClassNames(
+    { root: styles.root },
+    (sanitizedProps as Record<string, unknown>).classes as
+      | Partial<Record<string, string>>
+      | undefined,
+  );
 
   const classNameProp = (sanitizedProps as Record<string, unknown>)
     .className as string | undefined;

package/src/components/Breadcrumb/Breadcrumb.module.css

@@ -3,18 +3,21 @@
 */
 
 .root {
-  /* HARDCODE: Basic structural flex layout for breadcrumbs */
-  display: flex;
-  align-items: center;
-
   /* Base style resets */
   background-color: transparent;
   color: inherit;
 
   /* Apply global breadcrumb properties */
   padding: var(--recursica_ui-kit_components_breadcrumb_properties_padding);
+}
+
+/* MUI renders items/separators inside the <ol>, not directly under <nav> (.root) — the
+   gap must live here to land uniformly between item/separator/item, matching Mantine. */
+.ol {
+  /* HARDCODE: Basic structural flex layout for breadcrumbs */
+  display: flex;
+  align-items: center;
 
-  /* Mantine's breadcrumbs uses gap on the root or pseudo classes, but standard gap is safest since flex is used */
   gap: var(--recursica_ui-kit_components_breadcrumb_properties_item-gap);
 }
 
@@ -23,4 +26,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  /* Neutralize MUI's built-in 8px marginLeft/marginRight so .ol's gap alone controls spacing */
+  margin: 0;
 }

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -56,12 +56,6 @@ export const Default: Story = {
   },
 };
 
-export const StaticExample: Story = {
-  args: {
-    items: ["Store", "Electronics", "Computers", "Laptops"],
-  },
-};
-
 export const CustomSeparator: Story = {
   args: {
     items: ["Root", "Branch", "Leaf"],

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Breadcrumb.module.css";
@@ -22,24 +23,18 @@ export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(
       overStyled,
     );
 
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-      separator: styles.separator,
-    };
-
-    const classNamesProp = (sanitizedProps as Record<string, unknown>)
-      .classNames;
-    if (
-      classNamesProp &&
-      typeof classNamesProp === "object" &&
-      !Array.isArray(classNamesProp)
-    ) {
-      const o = classNamesProp as Partial<Record<string, string>>;
-      mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
-      mergedClassNames.separator = o.separator
-        ? `${styles.separator} ${o.separator}`
-        : styles.separator;
-    }
+    // Note MUI's actual prop is "classes", not "classNames" (that's Mantine's naming) — this
+    // used to read the wrong key, silently no-op-ing any caller-supplied classes.
+    const mergedClassNames = mergeClassNames(
+      {
+        root: styles.root,
+        ol: styles.ol,
+        separator: styles.separator,
+      },
+      (sanitizedProps as Record<string, unknown>).classes as
+        | Partial<Record<string, string>>
+        | undefined,
+    );
 
     const classNameProp = (sanitizedProps as Record<string, unknown>)
       .className as string | undefined;

package/src/components/Button/Button.tsx

@@ -6,6 +6,8 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  withCallerOverride,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Button.module.css";
@@ -54,11 +56,17 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref,
   ) {
-    const sanitizedProps = filterStylingProps(rest, overStyled);
-    const restRecord = sanitizedProps as Record<string, unknown>;
+    // Props this component intentionally doesn't support — deleted at runtime so they can't leak
+    // through even if a caller forces them via plain JavaScript, bypassing the Omit<> above.
+    const UNSUPPORTED_PROPS = [
+      "color", // Recursica handles colors internally via tokens
+    ] as const satisfies readonly (keyof MuiButtonProps)[];
 
-    // Explicitly delete blocked semantic expansion dimension props that MUI uses natively
-    delete restRecord["color"]; // Recursica handles colors internally via tokens
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled),
+      UNSUPPORTED_PROPS,
+    );
+    const restRecord = sanitizedProps as Record<string, unknown>;
 
     const hasStartIcon = !!icon || !!restRecord["startIcon"];
     const hasEndIcon = !!restRecord["endIcon"];
@@ -87,18 +95,16 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     const finalClass = classNameProp
       ? `${styles.root} ${classNameProp}`
       : styles.root;
-    // className is merged explicitly above — don't let the {...sanitizedProps} spread below
-    // silently overwrite finalClass with just the caller's own class (same bug class as
-    // mui-adapter's Dropdown/BareDropdown.tsx had).
-    delete restRecord["className"];
 
     // We don't map Recursica variant/size to MUI's because we want to completely disable MUI's native
     // variant logic (e.g., elevation, shadows) and style everything strictly through our CSS Modules.
     // However, Mui Button requires some string, but we can just leave it as standard or ignore since
     // our CSS resets its properties anyway, but to be clean we just don't pass variant to MUI.
 
-    const resolvedLoaderSize =
-      loaderSize ?? (size === "small" ? "small" : "default");
+    const resolvedLoaderSize = withCallerOverride(
+      size === "small" ? "small" : "default",
+      loaderSize,
+    );
 
     let loadingIndicator = restRecord.loadingIndicator as React.ReactNode;
     if (useRecursicaLoader) {
@@ -110,6 +116,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <MuiButton
         ref={ref}
+        {...sanitizedProps}
         disableRipple
         disableElevation
         className={finalClass}
@@ -131,7 +138,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         data-size={size}
         data-content={contentType}
         {...(restRecord.loading ? { "data-loading": "true" } : {})}
-        {...sanitizedProps}
         disabled={!!restRecord.disabled || !!restRecord.loading}
       >
         <span className={styles.labelText}>{children}</span>

package/src/components/Card/Card.tsx

@@ -2,6 +2,7 @@ import { forwardRef } from "react";
 import { Card as MuiCard, type CardProps as MuiCardProps } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Card.module.css";
@@ -51,25 +52,14 @@ const CardBase = forwardRef<HTMLDivElement, CardProps>(function Card(
     }
   });
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-  };
-
-  const classNamesProp = (sanitizedProps as Record<string, unknown>).classNames;
-  if (
-    classNamesProp &&
-    typeof classNamesProp === "object" &&
-    !Array.isArray(classNamesProp)
-  ) {
-    const o = classNamesProp as Record<string, string>;
-    Object.keys(o).forEach((key) => {
-      if (mergedClassNames[key]) {
-        mergedClassNames[key] = `${mergedClassNames[key]} ${o[key]}`;
-      } else {
-        mergedClassNames[key] = o[key];
-      }
-    });
-  }
+  // Note MUI's actual prop is "classes", not "classNames" (that's Mantine's naming) — this
+  // used to read the wrong key, silently no-op-ing any caller-supplied classes.
+  const mergedClassNames = mergeClassNames(
+    { root: styles.root },
+    (sanitizedProps as Record<string, unknown>).classes as
+      | Partial<Record<string, string>>
+      | undefined,
+  );
 
   const classNameProp = (sanitizedProps as Record<string, unknown>)
     .className as string | undefined;

package/src/components/Checkbox/Checkbox.tsx

@@ -7,6 +7,8 @@ import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import { CheckboxGroup, CheckboxGroupContext } from "./CheckboxGroup";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import {
@@ -58,33 +60,27 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
       ...rest
     } = props;
 
-    const sanitizedProps = filterStylingProps(rest, overStyled);
-    const restRecord = sanitizedProps as Record<string, unknown>;
-
-    delete restRecord["size"];
-    delete restRecord["color"];
+    // Props this component intentionally doesn't support — deleted at runtime so they can't leak
+    // through even if a caller forces them via plain JavaScript, bypassing the Omit<> above.
+    const UNSUPPORTED_PROPS = [
+      "size", // Recursica controls sizing via design tokens, not MUI's native small/medium size
+      "color", // Colors are token-driven; MUI's native palette isn't exposed
+    ] as const satisfies readonly (keyof MuiCheckboxProps)[];
 
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-      checked: styles.checked,
-      disabled: styles.disabled,
-    };
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled),
+      UNSUPPORTED_PROPS,
+    );
+    const restRecord = sanitizedProps as Record<string, unknown>;
 
-    const classesProp = restRecord.classes;
-    if (
-      classesProp &&
-      typeof classesProp === "object" &&
-      !Array.isArray(classesProp)
-    ) {
-      const o = classesProp as Partial<Record<string, string>>;
-      mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
-      mergedClassNames.checked = o.checked
-        ? `${styles.checked} ${o.checked}`
-        : styles.checked;
-      mergedClassNames.disabled = o.disabled
-        ? `${styles.disabled} ${o.disabled}`
-        : styles.disabled;
-    }
+    const mergedClassNames = mergeClassNames(
+      {
+        root: styles.root,
+        checked: styles.checked,
+        disabled: styles.disabled,
+      },
+      restRecord.classes as Partial<Record<string, string>> | undefined,
+    );
 
     const classNameProp = restRecord.className as string | undefined;
     const finalClass = classNameProp
@@ -172,10 +168,10 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
     const checkboxNode = (
       <MuiCheckbox
         ref={ref}
+        {...(sanitizedProps as unknown as MuiCheckboxProps)}
         className={!label ? `${finalClass} ${styles.inner}` : styles.inner}
         classes={mergedClassNames}
         disabled={readOnly || disabled || isGroupReadOnly}
-        {...(sanitizedProps as unknown as MuiCheckboxProps)}
         {...(isControlled ? { checked: isChecked as boolean } : {})}
         onChange={handleChange}
         disableRipple

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -75,12 +75,12 @@ export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
       row,
       ...rest
     } = props;
+    // NOTE: this component's props surface (HTMLAttributes<HTMLDivElement>-based) has no native
+    // "size" (or other Recursica-unsupported) prop to leak through here — nothing to add to an
+    // UNSUPPORTED_PROPS list beyond what filterStylingProps already blocks.
     const sanitizedProps = filterStylingProps(rest, overStyled);
     const restRecord = sanitizedProps as Record<string, unknown>;
 
-    // Delete prohibited sizing hooks
-    delete restRecord["size"];
-
     const handleChange = (_event: React.SyntheticEvent, childValue: any) => {
       if (onChange) {
         onChange(childValue);

package/src/components/Chip/Chip.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef } from "react";
 import { Chip as MuiChip, type ChipProps as MuiChipProps } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Chip.module.css";
@@ -75,25 +76,17 @@ export const Chip = forwardRef<HTMLInputElement, ChipProps>(function Chip(
   const sanitizedProps = filterStylingProps(rest, overStyled);
   const restRecord = sanitizedProps as Record<string, unknown>;
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    label: styles.label,
-    icon: styles.leadingIcon,
-    deleteIcon: styles.removeIconWrapper,
-  };
-
-  const classNamesProp = restRecord.classNames;
-  if (
-    classNamesProp &&
-    typeof classNamesProp === "object" &&
-    !Array.isArray(classNamesProp)
-  ) {
-    const o = classNamesProp as Partial<Record<string, string>>;
-    mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
-    mergedClassNames.label = o.label
-      ? `${styles.label} ${o.label}`
-      : styles.label;
-  }
+  // Note MUI's actual prop is "classes", not "classNames" (that's Mantine's naming) — this
+  // used to read the wrong key, silently no-op-ing any caller-supplied classes.
+  const mergedClassNames = mergeClassNames(
+    {
+      root: styles.root,
+      label: styles.label,
+      icon: styles.leadingIcon,
+      deleteIcon: styles.removeIconWrapper,
+    },
+    restRecord.classes as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
   const finalClass = classNameProp

package/src/components/Dropdown/BareDropdown.tsx

@@ -6,6 +6,7 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Dropdown.module.css";
@@ -52,14 +53,19 @@ export const BareDropdown = forwardRef<
     error,
     ...rest
   } = props;
-  const sanitizedProps = filterStylingProps(rest, overStyled);
-  const restRecord = sanitizedProps as Record<string, unknown>;
+  // Props this component intentionally doesn't support — deleted at runtime so they can't leak
+  // through even if a caller forces them via plain JavaScript, bypassing the Omit<> above.
+  const UNSUPPORTED_PROPS = [
+    "size", // Recursica controls sizing via design tokens, not MUI's native small/medium size
+    "variant", // Recursica styles the naked select directly; MUI's standard/filled/outlined unused
+    "classes", // Recursica computes its own classes object below; caller's would silently clobber it
+  ] as const satisfies readonly (keyof MuiSelectProps)[];
 
-  delete restRecord["size"];
-  delete restRecord["variant"];
-  // className is merged explicitly below — don't let the spread further down silently overwrite
-  // styles.root with just the caller's own class.
-  delete restRecord["className"];
+  const sanitizedProps = omitUnsupportedProps(
+    filterStylingProps(rest, overStyled),
+    UNSUPPORTED_PROPS,
+  );
+  const restRecord = sanitizedProps as Record<string, unknown>;
 
   const mergedClassName = className
     ? `${styles.root} ${className}`
@@ -100,6 +106,7 @@ export const BareDropdown = forwardRef<
   return (
     <MuiSelect
       ref={ref}
+      {...(sanitizedProps as unknown as MuiSelectProps)}
       disabled={disabled}
       value={value}
       defaultValue={defaultValue}
@@ -125,7 +132,6 @@ export const BareDropdown = forwardRef<
         "data-error": error ? "true" : undefined,
         ...(restRecord.inputProps as Record<string, unknown>),
       }}
-      {...(sanitizedProps as unknown as MuiSelectProps)}
     >
       {renderOptions()}
     </MuiSelect>

package/src/components/Dropdown/Dropdown.icons.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+/**
+ * Chevron rendered in the right section alongside the clear button (item 3a). Only used for that
+ * combined case — MUI's own default `IconComponent` (`ArrowDropDown`) is left untouched everywhere
+ * else, so this is a hand-rolled copy of the exact same MUI glyph path, not a new icon design.
+ */
+export function ChevronIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden {...props}>
+      <path d="M7 10l5 5 5-5z" />
+    </svg>
+  );
+}
+
+/** Clear ("x") icon for the clearable Dropdown's clear button (item 3a). */
+export function ClearIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+      {...props}
+    >
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}