@carbon/react 1.112.0 → 1.113.0

package/es/components/ListBox/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import "./ListBoxPropTypes.js";
+import { ListBoxSizePropType, ListBoxTypePropType } from "./ListBoxPropTypes.js";
 import ListBox$1 from "./ListBox.js";
 import ListBoxField from "./ListBoxField.js";
 import ListBoxMenuItem from "./ListBoxMenuItem.js";
@@ -21,4 +21,4 @@ const ListBox = Object.assign(ListBox$1, {
 	Selection: ListBoxSelection
 });
 //#endregion
-export { ListBox as default };
+export { ListBoxSizePropType, ListBoxTypePropType, ListBox as default };

package/es/components/ListBox/next/ListBoxSelection.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../../internal/usePrefix.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@carbon/icons-react";
@@ -38,12 +38,12 @@ function ListBoxSelection({ clearSelection, selectionCount, translateWithId: t =
 	const prefix = usePrefix();
 	const hasSelectionCount = (selectionCount ?? 0) > 0;
 	const hasMultipleSelections = (selectionCount ?? 0) > 1;
-	const className = classNames(`${prefix}--list-box__selection`, {
+	const className = cx(`${prefix}--list-box__selection`, {
 		[`${prefix}--tag--filter`]: hasSelectionCount,
 		[`${prefix}--list-box__selection--multi`]: hasSelectionCount
 	});
 	const description = hasMultipleSelections ? t("clear.all") : t("clear.selection");
-	const tagClasses = classNames(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, { [`${prefix}--tag--disabled`]: disabled });
+	const tagClasses = cx(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, { [`${prefix}--tag--disabled`]: disabled });
 	function onClick(event) {
 		event.stopPropagation();
 		if (disabled || readOnly) return;

package/es/components/ListBox/next/ListBoxTrigger.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../../internal/usePrefix.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 import { ChevronDown } from "@carbon/icons-react";
@@ -35,7 +35,7 @@ const defaultTranslateWithId = (messageId) => {
 */
 const ListBoxTrigger = React.forwardRef(({ isOpen, translateWithId: t = defaultTranslateWithId, ...rest }, ref) => {
 	const prefix = usePrefix();
-	const className = classNames({
+	const className = cx({
 		[`${prefix}--list-box__menu-icon`]: true,
 		[`${prefix}--list-box__menu-icon--open`]: isOpen
 	});

package/es/components/ListItem/ListItem.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ListItem/ListItem.tsx
@@ -21,7 +21,7 @@ import { jsx } from "react/jsx-runtime";
 function ListItem({ className, children, ...other }) {
 	return /* @__PURE__ */ jsx(Text, {
 		as: "li",
-		className: classNames(`${usePrefix()}--list__item`, className),
+		className: cx(`${usePrefix()}--list__item`, className),
 		...other,
 		children
 	});

package/es/components/Loading/Loading.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Loading/Loading.tsx
@@ -20,12 +20,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 function Loading({ active = true, className: customClassName, withOverlay = true, small = false, description = "loading", ...rest }) {
 	const prefix = usePrefix();
-	const loadingClassName = classNames(customClassName, {
+	const loadingClassName = cx(customClassName, {
 		[`${prefix}--loading`]: true,
 		[`${prefix}--loading--small`]: small,
 		[`${prefix}--loading--stop`]: !active
 	});
-	const overlayClassName = classNames({
+	const overlayClassName = cx({
 		[`${prefix}--loading-overlay`]: true,
 		[`${prefix}--loading-overlay--stop`]: !active
 	});

package/es/components/Loading/index.js

@@ -15,4 +15,4 @@ import Loading from "./Loading.js";
 */
 var Loading_default = Loading;
 //#endregion
-export { Loading_default as default };
+export { Loading, Loading_default as default };

package/es/components/Menu/Menu.js

@@ -13,8 +13,8 @@ import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { MenuContext, menuReducer } from "./MenuContext.js";
 import { useLayoutDirection } from "../LayoutDirection/useLayoutDirection.js";
 import { canUseDOM } from "../../internal/environment.js";
-import classNames from "classnames";
 import { forwardRef, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
@@ -184,7 +184,7 @@ const Menu = forwardRef(function Menu({ backgroundToken = "layer", border = fals
 		if (open) handleOpen();
 		else setPosition([-1, -1]);
 	}, [open]);
-	const classNames$1 = classNames(className, `${prefix}--menu`, `${prefix}--menu--${menuSize}`, {
+	const classNames = cx(className, `${prefix}--menu`, `${prefix}--menu--${menuSize}`, {
 		[`${prefix}--menu--box-shadow-top`]: menuAlignment && menuAlignment.slice(0, 3) === "top",
 		[`${prefix}--menu--open`]: open,
 		[`${prefix}--menu--shown`]: open && !legacyAutoalign || position[0] >= 0 && position[1] >= 0,
@@ -198,7 +198,7 @@ const Menu = forwardRef(function Menu({ backgroundToken = "layer", border = fals
 		value: childContext,
 		children: /* @__PURE__ */ jsx("ul", {
 			...rest,
-			className: classNames$1,
+			className: classNames,
 			role: "menu",
 			ref,
 			"aria-label": label,

package/es/components/Menu/MenuItem.js

@@ -16,8 +16,8 @@ import { MenuContext } from "./MenuContext.js";
 import { useLayoutDirection } from "../LayoutDirection/useLayoutDirection.js";
 import { Menu as Menu$1 } from "./Menu.js";
 import { useControllableState } from "../../internal/useControllableState.js";
-import classNames from "classnames";
 import React, { forwardRef, useContext, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CaretLeft, CaretRight, Checkmark } from "@carbon/icons-react";
@@ -112,7 +112,7 @@ const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescr
 		if (pendingKeyboardClick.current && keyboardClickEvent(e)) handleClick(e);
 		pendingKeyboardClick.current = false;
 	}
-	const classNames$1 = classNames(className, `${prefix}--menu-item`, {
+	const classNames = cx(className, `${prefix}--menu-item`, {
 		[`${prefix}--menu-item--disabled`]: isDisabled,
 		[`${prefix}--menu-item--danger`]: isDanger
 	});
@@ -145,7 +145,7 @@ const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescr
 			role: "menuitem",
 			...rest,
 			ref,
-			className: classNames$1,
+			className: classNames,
 			tabIndex: !disabled ? 0 : -1,
 			"aria-disabled": isDisabled ?? void 0,
 			"aria-haspopup": hasChildren ?? void 0,
@@ -249,12 +249,12 @@ const MenuItemSelectable = forwardRef(function MenuItemSelectable({ className, d
 	useEffect(() => {
 		if (!context.state.hasSelectableItems) context.dispatch({ type: "enableSelectableItems" });
 	}, [context.state.hasSelectableItems, context]);
-	const classNames$2 = classNames(className, `${prefix}--menu-item-selectable--selected`);
+	const classNames = cx(className, `${prefix}--menu-item-selectable--selected`);
 	return /* @__PURE__ */ jsx(MenuItem, {
 		...rest,
 		ref: forwardRef,
 		label,
-		className: classNames$2,
+		className: classNames,
 		role: "menuitemcheckbox",
 		"aria-checked": checked,
 		onClick: handleClick
@@ -284,7 +284,7 @@ MenuItemSelectable.propTypes = {
 };
 const MenuItemGroup = forwardRef(function MenuItemGroup({ children, className, label, ...rest }, forwardRef) {
 	return /* @__PURE__ */ jsx("li", {
-		className: classNames(className, `${usePrefix()}--menu-item-group`),
+		className: cx(className, `${usePrefix()}--menu-item-group`),
 		role: "none",
 		ref: forwardRef,
 		children: /* @__PURE__ */ jsx("ul", {
@@ -324,7 +324,7 @@ const MenuItemRadioGroup = forwardRef(function MenuItemRadioGroup({ className, d
 		if (!context.state.hasSelectableItems) context.dispatch({ type: "enableSelectableItems" });
 	}, [context.state.hasSelectableItems, context]);
 	return /* @__PURE__ */ jsx("li", {
-		className: classNames(className, `${prefix}--menu-item-radio-group`),
+		className: cx(className, `${prefix}--menu-item-radio-group`),
 		role: "none",
 		ref: forwardRef,
 		children: /* @__PURE__ */ jsx("ul", {
@@ -373,10 +373,10 @@ MenuItemRadioGroup.propTypes = {
 	selectedItem: PropTypes.any
 };
 const MenuItemDivider = forwardRef(function MenuItemDivider({ className, ...rest }, forwardRef) {
-	const classNames$3 = classNames(className, `${usePrefix()}--menu-item-divider`);
+	const classNames = cx(className, `${usePrefix()}--menu-item-divider`);
 	return /* @__PURE__ */ jsx("li", {
 		...rest,
-		className: classNames$3,
+		className: classNames,
 		role: "separator",
 		ref: forwardRef
 	});

package/es/components/MenuButton/index.js

@@ -13,8 +13,8 @@ import Button_default from "../Button/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import { Menu as Menu$1 } from "../Menu/Menu.js";
 import { useAttachedMenu } from "../../internal/useAttachedMenu.js";
-import classNames from "classnames";
 import { forwardRef, useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@carbon/icons-react";
@@ -74,9 +74,9 @@ const MenuButton = forwardRef(({ children, className, disabled, kind = defaultBu
 	function handleClick() {
 		if (triggerRef.current) hookOnClick();
 	}
-	const containerClasses = classNames(`${prefix}--menu-button__container`, className);
-	const triggerClasses = classNames(`${prefix}--menu-button__trigger`, { [`${prefix}--menu-button__trigger--open`]: open });
-	const menuClasses = classNames(`${prefix}--menu-button__${menuAlignment}`);
+	const containerClasses = cx(`${prefix}--menu-button__container`, className);
+	const triggerClasses = cx(`${prefix}--menu-button__trigger`, { [`${prefix}--menu-button__trigger--open`]: open });
+	const menuClasses = cx(`${prefix}--menu-button__${menuAlignment}`);
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		ref,

package/es/components/Modal/Modal.js

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { noopFn } from "../../internal/noopFn.js";
+import { warning } from "../../internal/warning.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { Enter, Escape, Tab } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
 import { selectorTabbable } from "../../internal/keyboard/navigation.js";
 import { useId } from "../../internal/useId.js";
-import { noopFn } from "../../internal/noopFn.js";
-import { warning } from "../../internal/warning.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
@@ -32,8 +32,8 @@ import { isTopmostVisibleModal } from "./isTopmostVisibleModal.js";
 import { requiredIfGivenPropIsTruthy } from "../../prop-types/requiredIfGivenPropIsTruthy.js";
 import { usePreviousValue } from "../../internal/usePreviousValue.js";
 import { ModalPresence, ModalPresenceContext, useExclusiveModalPresenceContext } from "./ModalPresence.js";
-import classNames from "classnames";
 import React, { cloneElement, useCallback, useContext, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@carbon/icons-react";
@@ -88,7 +88,7 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 	const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
 	const modalBodyId = `${prefix}--modal-body--${modalInstanceId}`;
 	const modalCloseButtonClass = `${prefix}--modal-close`;
-	const primaryButtonClass = classNames({ [`${prefix}--btn--loading`]: loadingStatus !== "inactive" });
+	const primaryButtonClass = cx({ [`${prefix}--btn--loading`]: loadingStatus !== "inactive" });
 	const loadingActive = loadingStatus !== "inactive";
 	const presenceContext = useContext(ModalPresenceContext);
 	const mergedRefs = useMergedRefs([
@@ -155,7 +155,7 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 	}
 	const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
 	const { height } = useResizeObserver({ ref: contentRef });
-	const modalClasses = classNames(`${prefix}--modal`, {
+	const modalClasses = cx(`${prefix}--modal`, {
 		[`${prefix}--modal-tall`]: !passiveModal,
 		"is-visible": enablePresence || open,
 		[`${prefix}--modal--enable-presence`]: presenceContext?.autoEnablePresence,
@@ -163,7 +163,7 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 		[`${prefix}--modal--slug`]: slug,
 		[`${prefix}--modal--decorator`]: decorator
 	}, className);
-	const containerClasses = classNames(`${prefix}--modal-container`, {
+	const containerClasses = cx(`${prefix}--modal-container`, {
 		[`${prefix}--modal-container--${size}`]: size,
 		[`${prefix}--modal-container--full-width`]: isFullWidth
 	});
@@ -179,11 +179,11 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 		if (diff > 5) setIsScrollable(true);
 		else if (diff < -5) setIsScrollable(false);
 	}, [currentScrollHeight, currentClientHeight]);
-	const contentClasses = classNames(`${prefix}--modal-content`, {
+	const contentClasses = cx(`${prefix}--modal-content`, {
 		[`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
 		[`${prefix}--modal-scroll-content--no-fade`]: height <= 300
 	});
-	const footerClasses = classNames(`${prefix}--modal-footer`, { [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2 });
+	const footerClasses = cx(`${prefix}--modal-footer`, { [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2 });
 	const asStringOrUndefined = (node) => {
 		return typeof node === "string" ? node : void 0;
 	};
@@ -654,4 +654,4 @@ Modal.propTypes = {
 	slug: deprecate(PropTypes.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.")
 };
 //#endregion
-export { Modal as default };
+export { ModalSizes, Modal as default };

package/es/components/Modal/ModalPresence.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { usePresenceContext } from "../../internal/usePresenceContext.js";
+import { PresenceHoldContext, usePresenceContext } from "../../internal/usePresenceContext.js";
 import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Modal/ModalPresence.tsx
@@ -24,7 +24,10 @@ const ModalPresence = ({ open, _presenceId: presenceId, _autoEnablePresence: aut
 	if (!isPresent) return null;
 	return /* @__PURE__ */ jsx(ModalPresenceContext.Provider, {
 		value: contextValue,
-		children
+		children: /* @__PURE__ */ jsx(PresenceHoldContext.Provider, {
+			value: contextValue,
+			children
+		})
 	});
 };
 const ModalPresenceContext = createContext(void 0);

package/es/components/Modal/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import "./ModalPresence.js";
+import { ModalPresence, withModalPresence } from "./ModalPresence.js";
 import Modal from "./Modal.js";
 //#region src/components/Modal/index.ts
 /**
@@ -16,4 +16,4 @@ import Modal from "./Modal.js";
 */
 var Modal_default = Modal;
 //#endregion
-export { Modal_default as default };
+export { Modal, ModalPresence, Modal_default as default, withModalPresence };

package/es/components/ModalWrapper/ModalWrapper.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Escape } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import { noopFn } from "../../internal/noopFn.js";
 import { warning } from "../../internal/warning.js";
+import { Escape } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
 import { ButtonKinds } from "../Button/Button.js";
 import Button_default from "../Button/index.js";
 import Modal_default from "../Modal/index.js";

package/es/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -125,8 +125,7 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
         selectedItems: ItemType[];
     }): void;
     /**
-     * A utility for this controlled component
-     * to communicate to the currently typed input.
+     * Called whenever the input value changes.
      */
     onInputValueChange?: UseComboboxProps<ItemType>['onInputValueChange'];
     /**

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -29,8 +29,8 @@ import { sortingPropTypes } from "./MultiSelectPropTypes.js";
 import { isSelectAllItem } from "./tools/isSelectAllItem.js";
 import { defaultCompareItems, defaultSortItems } from "./tools/sorting.js";
 import { useSelection } from "../../internal/Selection.js";
-import classNames from "classnames";
 import { cloneElement, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -84,8 +84,10 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	const handleSelectAllClick = useCallback(() => {
 		const selectable = nonSelectAllItems.filter((item) => !isItemDisabled(item));
 		const { checked, indeterminate } = selectAllStatus;
-		if (checked || indeterminate) toggleAll(controlledSelectedItems.filter((sel) => !filteredItems.some((e) => isEqual(e, sel))));
-		else {
+		if (checked || indeterminate) {
+			const remainingSelectedItems = controlledSelectedItems.filter((sel) => !filteredItems.some((e) => isEqual(e, sel)));
+			toggleAll(remainingSelectedItems);
+		} else {
 			const toSelect = selectable.filter((e) => !controlledSelectedItems.some((sel) => isEqual(sel, e)));
 			toggleAll([...controlledSelectedItems, ...toSelect]);
 		}
@@ -167,7 +169,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	const inline = type === "inline";
 	const showWarning = normalizedProps.warn;
 	const showHelperText = !normalizedProps.warn && !normalizedProps.invalid;
-	const wrapperClasses = classNames(`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
+	const wrapperClasses = cx(`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
 		[`${prefix}--multi-select__wrapper--inline`]: inline,
 		[`${prefix}--list-box__wrapper--inline`]: inline,
 		[`${prefix}--multi-select__wrapper--inline--invalid`]: inline && normalizedProps.invalid,
@@ -181,16 +183,16 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	const hasHelper = hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
 	const labelId = `${id}-label`;
-	const titleClasses = classNames({
+	const titleClasses = cx({
 		[`${prefix}--label`]: true,
 		[`${prefix}--label--disabled`]: disabled,
 		[`${prefix}--visually-hidden`]: hideLabel
 	});
-	const helperClasses = classNames({
+	const helperClasses = cx({
 		[`${prefix}--form__helper-text`]: true,
 		[`${prefix}--form__helper-text--disabled`]: disabled
 	});
-	const inputClasses = classNames({
+	const inputClasses = cx({
 		[`${prefix}--text-input`]: true,
 		[`${prefix}--text-input--empty`]: !inputValue,
 		[`${prefix}--text-input--light`]: light
@@ -255,6 +257,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 		menuId,
 		inputId,
 		inputValue,
+		onInputValueChange,
 		stateReducer,
 		isItemDisabled
 	});
@@ -290,7 +293,6 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 					highlightedIndex: controlledSelectedItems.length > 0 ? 0 : -1
 				};
 			case InputChange:
-				if (onInputValueChange) onInputValueChange(changes);
 				setInputValue(changes.inputValue ?? "");
 				setIsOpen(true);
 				return {
@@ -379,7 +381,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	const candidateIsAILabel = isComponentElement(candidate, AILabel);
 	const normalizedDecorator = candidateIsAILabel ? cloneElement(candidate, { size: "mini" }) : candidate;
 	const selectedItemsLength = controlledSelectedItems.filter((item) => !isSelectAllItem(item)).length;
-	const className = classNames(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
+	const className = cx(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
 		[`${prefix}--multi-select--invalid`]: normalizedProps.invalid,
 		[`${prefix}--multi-select--invalid--focused`]: inputFocused && normalizedProps.invalid,
 		[`${prefix}--multi-select--open`]: isOpen,
@@ -684,8 +686,7 @@ FilterableMultiSelect.propTypes = {
 	*/
 	onChange: PropTypes.func,
 	/**
-	* `onInputValueChange` is a utility for this controlled component to communicate to
-	* the currently typed input.
+	* Called whenever the input value changes.
 	*/
 	onInputValueChange: PropTypes.func,
 	/**

package/es/components/MultiSelect/MultiSelect.js

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { ArrowDown, Delete, Enter, Escape, Space, Tab } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
-import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
 import { isItemDisabled } from "../../internal/isItemDisabled.js";
@@ -27,8 +27,8 @@ import { sortingPropTypes } from "./MultiSelectPropTypes.js";
 import { isSelectAllItem } from "./tools/isSelectAllItem.js";
 import { defaultCompareItems, defaultSortItems } from "./tools/sorting.js";
 import { useSelection } from "../../internal/Selection.js";
-import classNames from "classnames";
 import React, { cloneElement, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -171,7 +171,7 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 	const inline = type === "inline";
 	const showWarning = normalizedProps.warn;
 	const showHelperText = !normalizedProps.warn && !normalizedProps.invalid && helperText;
-	const wrapperClasses = classNames(`${prefix}--multi-select__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
+	const wrapperClasses = cx(`${prefix}--multi-select__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
 		[`${prefix}--multi-select__wrapper--inline`]: inline,
 		[`${prefix}--list-box__wrapper--inline`]: inline,
 		[`${prefix}--multi-select__wrapper--inline--invalid`]: inline && normalizedProps.invalid,
@@ -180,14 +180,14 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 		[`${prefix}--list-box__wrapper--slug`]: slug,
 		[`${prefix}--list-box__wrapper--decorator`]: decorator
 	});
-	const titleClasses = classNames(`${prefix}--label`, {
+	const titleClasses = cx(`${prefix}--label`, {
 		[`${prefix}--label--disabled`]: disabled,
 		[`${prefix}--visually-hidden`]: hideLabel
 	});
 	const helperId = !helperText ? void 0 : `multiselect-helper-text-${multiSelectInstanceId}`;
 	const fieldLabelId = `multiselect-field-label-${multiSelectInstanceId}`;
-	const helperClasses = classNames(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
-	const className = classNames(`${prefix}--multi-select`, {
+	const helperClasses = cx(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
+	const className = cx(`${prefix}--multi-select`, {
 		[`${prefix}--multi-select--invalid`]: normalizedProps.invalid,
 		[`${prefix}--multi-select--invalid--focused`]: inputFocused && normalizedProps.invalid,
 		[`${prefix}--multi-select--warning`]: showWarning,
@@ -263,7 +263,7 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 		}
 		return changes;
 	}
-	const multiSelectFieldWrapperClasses = classNames(`${prefix}--list-box__field--wrapper`, { [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused });
+	const multiSelectFieldWrapperClasses = cx(`${prefix}--list-box__field--wrapper`, { [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused });
 	const readOnlyEventHandlers = readOnly ? {
 		onClick: (evt) => {
 			evt.preventDefault();

package/es/components/Notification/Notification.js

@@ -5,22 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { noopFn } from "../../internal/noopFn.js";
+import { warning } from "../../internal/warning.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { Escape, Tab } from "../../internal/keyboard/keys.js";
 import { match, matches } from "../../internal/keyboard/match.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
-import { noopFn } from "../../internal/noopFn.js";
-import { warning } from "../../internal/warning.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { useInteractiveChildrenNeedDescription, useNoInteractiveChildren } from "../../internal/useNoInteractiveChildren.js";
 import Button_default from "../Button/index.js";
 import { wrapFocus, wrapFocusWithoutSentinels } from "../../internal/wrapFocus.js";
-import classNames from "classnames";
 import { useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckmarkFilled, Close, ErrorFilled, InformationFilled, InformationSquareFilled, WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -49,7 +49,7 @@ function useEscapeToClose(ref, callback, override = true) {
 }
 function NotificationActionButton({ children, className: customClassName, onClick, inline, ...rest }) {
 	return /* @__PURE__ */ jsx(Button_default, {
-		className: classNames(customClassName, { [`${usePrefix()}--actionable-notification__action-button`]: true }),
+		className: cx(customClassName, { [`${usePrefix()}--actionable-notification__action-button`]: true }),
 		kind: inline ? "ghost" : "tertiary",
 		onClick,
 		size: "sm",
@@ -77,8 +77,8 @@ NotificationActionButton.propTypes = {
 };
 function NotificationButton({ "aria-label": ariaLabel = "close notification", ariaLabel: deprecatedAriaLabel, className, type = "button", renderIcon: IconTag = Close, name, notificationType = "toast", ...rest }) {
 	const prefix = usePrefix();
-	const buttonClassName = classNames(className, { [`${prefix}--${notificationType}-notification__close-button`]: notificationType });
-	const iconClassName = classNames({ [`${prefix}--${notificationType}-notification__close-icon`]: notificationType });
+	const buttonClassName = cx(className, { [`${prefix}--${notificationType}-notification__close-button`]: notificationType });
+	const iconClassName = cx({ [`${prefix}--${notificationType}-notification__close-icon`]: notificationType });
 	return /* @__PURE__ */ jsx("button", {
 		...rest,
 		type,
@@ -164,7 +164,7 @@ NotificationIcon.propTypes = {
 function ToastNotification({ ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, role = "status", onClose, onCloseButtonClick = noopFn, statusIconDescription, className, children, kind = "error", lowContrast, hideCloseButton = false, timeout = 0, title, caption, subtitle, ...rest }) {
 	const [isOpen, setIsOpen] = useState(true);
 	const prefix = usePrefix();
-	const containerClassName = classNames(className, {
+	const containerClassName = cx(className, {
 		[`${prefix}--toast-notification`]: true,
 		[`${prefix}--toast-notification--low-contrast`]: lowContrast,
 		[`${prefix}--toast-notification--${kind}`]: kind
@@ -313,7 +313,7 @@ ToastNotification.propTypes = {
 function InlineNotification({ ["aria-label"]: ariaLabel, children, title, subtitle, role = "status", onClose, onCloseButtonClick = noopFn, statusIconDescription, className, kind = "error", lowContrast, hideCloseButton = false, ...rest }) {
 	const [isOpen, setIsOpen] = useState(true);
 	const prefix = usePrefix();
-	const containerClassName = classNames(className, {
+	const containerClassName = cx(className, {
 		[`${prefix}--inline-notification`]: true,
 		[`${prefix}--inline-notification--low-contrast`]: lowContrast,
 		[`${prefix}--inline-notification--${kind}`]: kind,
@@ -432,7 +432,7 @@ function ActionableNotification({ actionButtonLabel, ["aria-label"]: ariaLabel,
 	const prefix = usePrefix();
 	const id = useId("actionable-notification");
 	const subtitleId = useId("actionable-notification-subtitle");
-	const containerClassName = classNames(className, {
+	const containerClassName = cx(className, {
 		[`${prefix}--actionable-notification`]: true,
 		[`${prefix}--actionable-notification--toast`]: !inline,
 		[`${prefix}--actionable-notification--low-contrast`]: lowContrast,
@@ -648,7 +648,7 @@ const propMappingFunction = (deprecatedValue) => {
 };
 function Callout({ actionButtonLabel, children, onActionButtonClick, title, titleId, subtitle, statusIconDescription, className, kind = "info", lowContrast, ...rest }) {
 	const prefix = usePrefix();
-	const containerClassName = classNames(className, {
+	const containerClassName = cx(className, {
 		[`${prefix}--actionable-notification`]: true,
 		[`${prefix}--actionable-notification--low-contrast`]: lowContrast,
 		[`${prefix}--actionable-notification--${kind}`]: kind,

package/es/components/NumberInput/NumberInput.Skeleton.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/NumberInput/NumberInput.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function NumberInputSkeleton({ hideLabel, className, size = "md", ...rest }) {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--form-item`, className),
+		className: cx(`${prefix}--form-item`, className),
 		...rest,
 		children: [!hideLabel && /* @__PURE__ */ jsx("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--number ${prefix}--skeleton ${prefix}--number--${size}` })]
 	});