@carbon/react 1.112.0 → 1.113.0

package/es/components/Search/Search.js

@@ -5,19 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Enter, Escape, Space } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
-import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
 import { composeEventHandlers } from "../../tools/events.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import { isSearchValuePresent } from "./utils.js";
-import classNames from "classnames";
 import React, { useContext, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close, Search } from "@carbon/icons-react";
@@ -40,7 +40,7 @@ const Search$1 = React.forwardRef(({ autoComplete = "off", className, closeButto
 	const searchId = `${uniqueId}-search`;
 	const [hasContent, setHasContent] = useState(hasPropValue || false);
 	const isExpandableCollapsed = !!onExpand && !isExpanded;
-	const searchClasses = classNames({
+	const searchClasses = cx({
 		[`${prefix}--search`]: true,
 		[`${prefix}--search--${size}`]: size,
 		[`${prefix}--layout--size-${size}`]: size,
@@ -48,7 +48,7 @@ const Search$1 = React.forwardRef(({ autoComplete = "off", className, closeButto
 		[`${prefix}--search--disabled`]: disabled,
 		[`${prefix}--search--fluid`]: isFluid
 	}, className);
-	const clearClasses = classNames({
+	const clearClasses = cx({
 		[`${prefix}--search-close`]: true,
 		[`${prefix}--search-close--hidden`]: !hasContent || !isExpanded
 	});

package/es/components/Search/index.js

@@ -6,7 +6,7 @@
  */
 
 import Search from "./Search.js";
-import "./Search.Skeleton.js";
+import { SearchSkeleton } from "./Search.Skeleton.js";
 //#region src/components/Search/index.tsx
 /**
 * Copyright IBM Corp. 2016, 2023
@@ -16,4 +16,4 @@ import "./Search.Skeleton.js";
 */
 var Search_default = Search;
 //#endregion
-export { Search_default as default };
+export { Search, SearchSkeleton, Search_default as default };

package/es/components/Select/Select.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/Select/Select.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const SelectSkeleton = ({ hideLabel, className, ...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}--select ${prefix}--skeleton`,
@@ -39,4 +39,4 @@ SelectSkeleton.propTypes = {
 	hideLabel: PropTypes.bool
 };
 //#endregion
-export { SelectSkeleton as default };
+export { SelectSkeleton, SelectSkeleton as default };

package/es/components/Select/Select.js

@@ -14,8 +14,8 @@ import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.
 import { AILabel } from "../AILabel/index.js";
 import { composeEventHandlers } from "../../tools/events.js";
 import { FormContext } from "../FluidForm/FormContext.js";
-import classNames from "classnames";
 import React, { cloneElement, forwardRef, useContext, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -43,7 +43,7 @@ const Select = forwardRef(({ className, decorator, id, inline = false, labelText
 		warn,
 		warnText
 	});
-	const selectClasses = classNames({
+	const selectClasses = cx({
 		[`${prefix}--select`]: true,
 		[`${prefix}--select--inline`]: inline,
 		[`${prefix}--select--light`]: light,
@@ -58,13 +58,13 @@ const Select = forwardRef(({ className, decorator, id, inline = false, labelText
 		[`${prefix}--select--${size}`]: size,
 		[`${prefix}--layout--size-${size}`]: size
 	});
-	const labelClasses = classNames(`${prefix}--label`, {
+	const labelClasses = cx(`${prefix}--label`, {
 		[`${prefix}--visually-hidden`]: hideLabel,
 		[`${prefix}--label--disabled`]: normalizedProps.disabled
 	});
-	const inputClasses = classNames({ [`${prefix}--select-input`]: true });
+	const inputClasses = cx({ [`${prefix}--select-input`]: true });
 	const error = normalizedProps.validation;
-	const helperTextClasses = classNames(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled });
+	const helperTextClasses = cx(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled });
 	const helper = hasHelperText(helperText) ? /* @__PURE__ */ jsx(Text, {
 		as: "div",
 		id: normalizedProps.helperId,
@@ -120,7 +120,7 @@ const Select = forwardRef(({ className, decorator, id, inline = false, labelText
 		] });
 	})();
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(`${prefix}--form-item`, className),
+		className: cx(`${prefix}--form-item`, className),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: selectClasses,
 			children: [

package/es/components/Select/index.js

@@ -6,7 +6,7 @@
  */
 
 import Select from "./Select.js";
-import "./Select.Skeleton.js";
+import { SelectSkeleton } from "./Select.Skeleton.js";
 //#region src/components/Select/index.ts
 /**
 * Copyright IBM Corp. 2016, 2023
@@ -16,4 +16,4 @@ import "./Select.Skeleton.js";
 */
 var Select_default = Select;
 //#endregion
-export { Select_default as default };
+export { Select, SelectSkeleton, Select_default as default };

package/es/components/SelectItem/SelectItem.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 } from "react/jsx-runtime";
 //#region src/components/SelectItem/SelectItem.tsx
@@ -18,7 +18,7 @@ import { jsx } from "react/jsx-runtime";
 * LICENSE file in the root directory of this source tree.
 */
 const SelectItem = ({ className, value = "", disabled = false, hidden = false, text = "", ...other }) => {
-	const selectItemClasses = classNames({
+	const selectItemClasses = cx({
 		[`${usePrefix()}--select-option`]: true,
 		...className && { [className]: className }
 	});

package/es/components/SelectItem/index.js

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

package/es/components/SelectItemGroup/SelectItemGroup.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 } from "react/jsx-runtime";
 //#region src/components/SelectItemGroup/SelectItemGroup.tsx
@@ -19,7 +19,7 @@ import { jsx } from "react/jsx-runtime";
 */
 const SelectItemGroup = ({ children, className, disabled = false, label, ...other }) => {
 	return /* @__PURE__ */ jsx("optgroup", {
-		className: classNames(`${usePrefix()}--select-optgroup`, className),
+		className: cx(`${usePrefix()}--select-optgroup`, className),
 		label,
 		disabled,
 		...other,

package/es/components/ShapeIndicator/index.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { DefinitionTooltip } from "../Tooltip/DefinitionTooltip.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Caution, CircleFill, CircleStroke, Critical, CriticalSeverity, DiamondFill, LowSeverity } from "@carbon/icons-react";
@@ -64,7 +64,7 @@ const shapeTypes = {
 };
 const ShapeIndicator = React.forwardRef(({ align = "right", autoAlign = false, className: customClassName, compact = false, kind, label, shapeDescription, textSize = 12 }, ref) => {
 	const prefix = usePrefix();
-	const classNames$1 = classNames(`${prefix}--shape-indicator`, customClassName, { [`${prefix}--shape-indicator--14`]: textSize == 14 });
+	const classNames = cx(`${prefix}--shape-indicator`, customClassName, { [`${prefix}--shape-indicator--14`]: textSize == 14 });
 	const ShapeForKind = shapeTypes[kind];
 	if (!ShapeForKind) return null;
 	const shapeElement = /* @__PURE__ */ jsx(ShapeForKind, {
@@ -72,7 +72,7 @@ const ShapeIndicator = React.forwardRef(({ align = "right", autoAlign = false, c
 		className: `${prefix}--shape-indicator--${kind}`
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames$1,
+		className: classNames,
 		ref,
 		children: compact ? /* @__PURE__ */ jsxs(DefinitionTooltip, {
 			align,
@@ -136,4 +136,4 @@ ShapeIndicator.propTypes = {
 	textSize: PropTypes.oneOf([12, 14])
 };
 //#endregion
-export { ShapeIndicator as default };
+export { ShapeIndicator, ShapeIndicator as default, ShapeIndicatorKinds };

package/es/components/SkeletonIcon/SkeletonIcon.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 } from "react/jsx-runtime";
 //#region src/components/SkeletonIcon/SkeletonIcon.tsx
@@ -19,7 +19,7 @@ import { jsx } from "react/jsx-runtime";
 */
 const SkeletonIcon = ({ className, ...other }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(className, { [`${usePrefix()}--icon--skeleton`]: true }),
+		className: cx(className, { [`${usePrefix()}--icon--skeleton`]: true }),
 		...other
 	});
 };

package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -6,14 +6,14 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.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/SkeletonPlaceholder/SkeletonPlaceholder.tsx
 const SkeletonPlaceholder = ({ className, ...other }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames({ [`${usePrefix()}--skeleton__placeholder`]: true }, className),
+		className: cx({ [`${usePrefix()}--skeleton__placeholder`]: true }, className),
 		...other
 	});
 };

package/es/components/SkeletonText/SkeletonText.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
-import classNames from "classnames";
 import { useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/components/SkeletonText/SkeletonText.tsx
@@ -28,7 +28,7 @@ function getRandomInt(min, max, n) {
 }
 const SkeletonText = ({ paragraph = false, lineCount = 3, width = "100%", heading = false, className = "", ...rest }) => {
 	const prefix = usePrefix();
-	const skeletonTextClasses = classNames({
+	const skeletonTextClasses = cx({
 		[`${prefix}--skeleton__text`]: true,
 		[`${prefix}--skeleton__heading`]: heading,
 		[className]: className

package/es/components/SkeletonText/index.js

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

package/es/components/Slider/Slider.Skeleton.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { LowerHandle, UpperHandle } from "./SliderHandles.js";
-import classNames from "classnames";
 import { useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Slider/Slider.Skeleton.tsx
@@ -25,16 +25,16 @@ const SliderSkeleton = ({ ariaLabel = "slider handle", unstable_ariaLabelHandleU
 	useIsomorphicEffect(() => {
 		setIsRtl(document ? document.dir === "rtl" : false);
 	}, []);
-	const containerClasses = classNames(`${prefix}--slider-container`, `${prefix}--skeleton`, {
+	const containerClasses = cx(`${prefix}--slider-container`, `${prefix}--skeleton`, {
 		[`${prefix}--slider-container--two-handles`]: twoHandles,
 		[`${prefix}--slider-container--rtl`]: isRtl
 	});
-	const lowerThumbClasses = classNames(`${prefix}--slider__thumb`, { [`${prefix}--slider__thumb--lower`]: twoHandles });
-	const upperThumbClasses = classNames(`${prefix}--slider__thumb`, { [`${prefix}--slider__thumb--upper`]: twoHandles });
-	const lowerThumbWrapperClasses = classNames(`${prefix}--slider__thumb-wrapper`, { [`${prefix}--slider__thumb-wrapper--lower`]: twoHandles });
-	const upperThumbWrapperClasses = classNames(`${prefix}--slider__thumb-wrapper`, { [`${prefix}--slider__thumb-wrapper--upper`]: twoHandles });
+	const lowerThumbClasses = cx(`${prefix}--slider__thumb`, { [`${prefix}--slider__thumb--lower`]: twoHandles });
+	const upperThumbClasses = cx(`${prefix}--slider__thumb`, { [`${prefix}--slider__thumb--upper`]: twoHandles });
+	const lowerThumbWrapperClasses = cx(`${prefix}--slider__thumb-wrapper`, { [`${prefix}--slider__thumb-wrapper--lower`]: twoHandles });
+	const upperThumbWrapperClasses = cx(`${prefix}--slider__thumb-wrapper`, { [`${prefix}--slider__thumb-wrapper--upper`]: twoHandles });
 	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__ */ jsxs("div", {
 			className: containerClasses,

package/es/components/Slider/Slider.js

@@ -15,8 +15,8 @@ import { Tooltip } from "../Tooltip/Tooltip.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { clamp } from "../../internal/clamp.js";
 import { LowerHandle, LowerHandleFocus, UpperHandle, UpperHandleFocus } from "./SliderHandles.js";
-import classNames from "classnames";
 import { useEffect, useMemo, useReducer, useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -63,8 +63,8 @@ const calcRawLeftPercent = ({ max, min, value }) => {
 * A value of `16` limits updates to at most ~60 per second.
 */
 const EVENT_THROTTLE = 16;
-const DRAG_EVENT_TYPES = new Set(["mousemove", "touchmove"]);
-const DRAG_STOP_EVENT_TYPES = new Set([
+const DRAG_EVENT_TYPES = /* @__PURE__ */ new Set(["mousemove", "touchmove"]);
+const DRAG_STOP_EVENT_TYPES = /* @__PURE__ */ new Set([
 	"mouseup",
 	"touchend",
 	"touchcancel"
@@ -294,8 +294,9 @@ const Slider = (props) => {
 	onDragRef.current = (evt, activeHandle) => {
 		activeHandle = activeHandle ?? stateRef.current.activeHandle;
 		if (disabled || readOnly) return;
+		const clientX = getClientXFromEvent(evt);
 		const { value, left } = calcValue({
-			clientX: getClientXFromEvent(evt),
+			clientX,
 			value: stateRef.current.value
 		});
 		if (twoHandles && activeHandle) setValueLeftForHandle(activeHandle, {
@@ -334,7 +335,8 @@ const Slider = (props) => {
 		else return;
 		if (evt.shiftKey) delta *= stepMultiplier;
 		if (twoHandles && state.activeHandle) {
-			const { value, left } = calcValue({ value: calcValueForDelta((state.activeHandle === "lower" ? state.value : state.valueUpper) ?? min, delta, step) });
+			const currentValue = state.activeHandle === "lower" ? state.value : state.valueUpper;
+			const { value, left } = calcValue({ value: calcValueForDelta(currentValue ?? min, delta, step) });
 			setValueLeftForHandle(state.activeHandle, {
 				value: nearestStepValue(value),
 				left
@@ -599,23 +601,23 @@ const Slider = (props) => {
 	const showWarning = normalizedProps.warn || correctedPosition === "lower" && isValid;
 	const showWarningUpper = normalizedUpperProps.warn || correctedPosition === (twoHandles ? "upper" : "lower") && (twoHandles ? isValidUpper : isValid);
 	const labelId = `${id}-label`;
-	const labelClasses = classNames(`${prefix}--label`, {
+	const labelClasses = cx(`${prefix}--label`, {
 		[`${prefix}--visually-hidden`]: hideLabel,
 		[`${prefix}--label--disabled`]: disabled
 	});
-	const containerClasses = classNames(`${prefix}--slider-container`, {
+	const containerClasses = cx(`${prefix}--slider-container`, {
 		[`${prefix}--slider-container--two-handles`]: twoHandles,
 		[`${prefix}--slider-container--disabled`]: disabled,
 		[`${prefix}--slider-container--readonly`]: readOnly,
 		[`${prefix}--slider-container--rtl`]: isRtl
 	});
-	const sliderClasses = classNames(`${prefix}--slider`, {
+	const sliderClasses = cx(`${prefix}--slider`, {
 		[`${prefix}--slider--disabled`]: disabled,
 		[`${prefix}--slider--readonly`]: readOnly
 	});
 	const fixedInputClasses = [`${prefix}--text-input`, `${prefix}--slider-text-input`];
 	const conditionalInputClasses = { [`${prefix}--text-input--light`]: light };
-	const lowerInputClasses = classNames([
+	const lowerInputClasses = cx([
 		...fixedInputClasses,
 		`${prefix}--slider-text-input--lower`,
 		conditionalInputClasses,
@@ -624,7 +626,7 @@ const Slider = (props) => {
 			[`${prefix}--slider-text-input--warn`]: showWarning
 		}
 	]);
-	const upperInputClasses = classNames([
+	const upperInputClasses = cx([
 		...fixedInputClasses,
 		`${prefix}--slider-text-input--upper`,
 		conditionalInputClasses,
@@ -633,7 +635,7 @@ const Slider = (props) => {
 			[`${prefix}--slider-text-input--warn`]: showWarningUpper
 		}
 	]);
-	const lowerInputWrapperClasses = classNames([
+	const lowerInputWrapperClasses = cx([
 		`${prefix}--text-input-wrapper`,
 		`${prefix}--slider-text-input-wrapper`,
 		`${prefix}--slider-text-input-wrapper--lower`,
@@ -642,7 +644,7 @@ const Slider = (props) => {
 			[`${prefix}--slider-text-input-wrapper--hidden`]: hideTextInput
 		}
 	]);
-	const upperInputWrapperClasses = classNames([
+	const upperInputWrapperClasses = cx([
 		`${prefix}--text-input-wrapper`,
 		`${prefix}--slider-text-input-wrapper`,
 		`${prefix}--slider-text-input-wrapper--upper`,
@@ -651,14 +653,14 @@ const Slider = (props) => {
 			[`${prefix}--slider-text-input-wrapper--hidden`]: hideTextInput
 		}
 	]);
-	const lowerThumbClasses = classNames(`${prefix}--slider__thumb`, { [`${prefix}--slider__thumb--lower`]: twoHandles });
-	const upperThumbClasses = classNames(`${prefix}--slider__thumb`, { [`${prefix}--slider__thumb--upper`]: twoHandles });
-	const lowerThumbWrapperClasses = classNames([
+	const lowerThumbClasses = cx(`${prefix}--slider__thumb`, { [`${prefix}--slider__thumb--lower`]: twoHandles });
+	const upperThumbClasses = cx(`${prefix}--slider__thumb`, { [`${prefix}--slider__thumb--upper`]: twoHandles });
+	const lowerThumbWrapperClasses = cx([
 		`${prefix}--icon-tooltip`,
 		`${prefix}--slider__thumb-wrapper`,
 		{ [`${prefix}--slider__thumb-wrapper--lower`]: twoHandles }
 	]);
-	const upperThumbWrapperClasses = classNames([
+	const upperThumbWrapperClasses = cx([
 		`${prefix}--icon-tooltip`,
 		`${prefix}--slider__thumb-wrapper`,
 		{ [`${prefix}--slider__thumb-wrapper--upper`]: twoHandles }
@@ -666,7 +668,7 @@ const Slider = (props) => {
 	const lowerThumbWrapperProps = { style: { insetInlineStart: `${state.left}%` } };
 	const upperThumbWrapperProps = { style: { insetInlineStart: `${state.leftUpper}%` } };
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--form-item`, className),
+		className: cx(`${prefix}--form-item`, className),
 		children: [
 			/* @__PURE__ */ jsx(Text, {
 				as: "label",
@@ -808,18 +810,18 @@ const Slider = (props) => {
 			}),
 			(normalizedProps.invalid || normalizedUpperProps.invalid) && /* @__PURE__ */ jsx(Text, {
 				as: "div",
-				className: classNames(`${prefix}--slider__validation-msg`, `${prefix}--slider__validation-msg--invalid`, `${prefix}--form-requirement`),
+				className: cx(`${prefix}--slider__validation-msg`, `${prefix}--slider__validation-msg--invalid`, `${prefix}--form-requirement`),
 				children: invalidText
 			}),
 			(normalizedProps.warn || normalizedUpperProps.warn) && /* @__PURE__ */ jsx(Text, {
 				as: "div",
-				className: classNames(`${prefix}--slider__validation-msg`, `${prefix}--form-requirement`),
+				className: cx(`${prefix}--slider__validation-msg`, `${prefix}--form-requirement`),
 				children: warnText
 			}),
 			correctedValue && /* @__PURE__ */ jsx(Text, {
 				as: "div",
 				role: "alert",
-				className: classNames(`${prefix}--slider__status-msg`, `${prefix}--form-requirement`),
+				className: cx(`${prefix}--slider__status-msg`, `${prefix}--form-requirement`),
 				children: t(translationIds["carbon.slider.auto-correct-announcement"], { correctedValue })
 			})
 		]

package/es/components/Stack/Stack.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import classNames from "classnames";
 import { forwardRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 import { spacing } from "@carbon/layout";
@@ -42,7 +42,7 @@ const SPACING_STEPS = Array.from({ length: spacing.length - 1 }, (_, step) => st
 const Stack = forwardRef((props, ref) => {
 	const { as: BaseComponent = "div", children, className: customClassName, gap, orientation = "vertical", ...rest } = props;
 	const prefix = usePrefix();
-	const className = classNames(customClassName, {
+	const className = cx(customClassName, {
 		[`${prefix}--stack-${orientation}`]: true,
 		[`${prefix}--stack-scale-${gap}`]: typeof gap === "number"
 	});

package/es/components/StructuredList/StructuredList.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/StructuredList/StructuredList.Skeleton.tsx
@@ -19,7 +19,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 function StructuredListSkeleton({ rowCount = 5, className, ...rest }) {
 	const prefix = usePrefix();
-	const classNames$1 = classNames(`${prefix}--skeleton`, `${prefix}--structured-list`, className);
+	const classNames = cx(`${prefix}--skeleton`, `${prefix}--structured-list`, className);
 	const rows = new Array(rowCount).fill(null).map((_, i) => /* @__PURE__ */ jsxs("div", {
 		className: `${prefix}--structured-list-row`,
 		children: [
@@ -29,7 +29,7 @@ function StructuredListSkeleton({ rowCount = 5, className, ...rest }) {
 		]
 	}, i));
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames$1,
+		className: classNames,
 		...rest,
 		children: [/* @__PURE__ */ jsx("div", {
 			className: `${prefix}--structured-list-thead`,

package/es/components/StructuredList/StructuredList.js

@@ -10,8 +10,8 @@ import { Text } from "../Text/Text.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { useOutsideClick } from "../../internal/useOutsideClick.js";
-import classNames from "classnames";
 import React, { useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { RadioButton, RadioButtonChecked } from "@carbon/icons-react";
@@ -27,7 +27,7 @@ const GridSelectedRowDispatchContext = React.createContext(null);
 function StructuredListWrapper(props) {
 	const { children, selection, className, ["aria-label"]: ariaLabel = "Structured list section", ariaLabel: deprecatedAriaLabel, isCondensed, isFlush, selectedInitialRow, ...other } = props;
 	const prefix = usePrefix();
-	const classes = classNames(`${prefix}--structured-list`, {
+	const classes = cx(`${prefix}--structured-list`, {
 		[`${prefix}--structured-list--selection`]: selection,
 		[`${prefix}--structured-list--condensed`]: isCondensed,
 		[`${prefix}--structured-list--flush`]: isFlush && !selection
@@ -86,7 +86,7 @@ function StructuredListHead(props) {
 	const { children, className, ...other } = props;
 	return /* @__PURE__ */ jsx("div", {
 		role: "rowgroup",
-		className: classNames(`${usePrefix()}--structured-list-thead`, className),
+		className: cx(`${usePrefix()}--structured-list-thead`, className),
 		...other,
 		children
 	});
@@ -104,7 +104,7 @@ StructuredListHead.propTypes = {
 function StructuredListBody(props) {
 	const { children, className, ...other } = props;
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(`${usePrefix()}--structured-list-tbody`, className),
+		className: cx(`${usePrefix()}--structured-list-tbody`, className),
 		role: "rowgroup",
 		...other,
 		children
@@ -135,7 +135,7 @@ function StructuredListRow(props) {
 	const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
 	const prefix = usePrefix();
 	const value = { id: rowId };
-	const classes = classNames(`${prefix}--structured-list-row`, {
+	const classes = cx(`${prefix}--structured-list-row`, {
 		[`${prefix}--structured-list-row--header-row`]: head,
 		[`${prefix}--structured-list-row--focused-within`]: hasFocusWithin && !selection || hasFocusWithin && selection && (selectedRow === rowId || selectedRow === null),
 		[`${prefix}--structured-list-row--selected`]: selectedRow === rowId
@@ -211,7 +211,7 @@ function StructuredListInput(props) {
 	const defaultId = useId("structureListInput");
 	const { className, name = `structured-list-input-${defaultId}`, title, id, onChange, ...other } = props;
 	const prefix = usePrefix();
-	const classes = classNames(`${prefix}--structured-list-input`, `${prefix}--visually-hidden`, className);
+	const classes = cx(`${prefix}--structured-list-input`, `${prefix}--visually-hidden`, className);
 	const row = React.useContext(GridRowContext);
 	const selectedRow = React.useContext(GridSelectedRowStateContext);
 	const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
@@ -264,7 +264,7 @@ StructuredListInput.propTypes = {
 function StructuredListCell(props) {
 	const { children, className, head, noWrap, ...other } = props;
 	const prefix = usePrefix();
-	const classes = classNames({
+	const classes = cx({
 		[`${prefix}--structured-list-th`]: head,
 		[`${prefix}--structured-list-td`]: !head,
 		[`${prefix}--structured-list-content--nowrap`]: noWrap

package/es/components/Switch/IconSwitch.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { usePrefix } from "../../internal/usePrefix.js";
 import { noopFn } from "../../internal/noopFn.js";
+import { usePrefix } from "../../internal/usePrefix.js";
 import { IconButton } from "../IconButton/index.js";
-import classNames from "classnames";
 import { forwardRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Switch/IconSwitch.tsx
@@ -32,11 +32,12 @@ const IconSwitch = forwardRef((props, ref) => {
 		});
 	};
 	const handleKeyDown = (event) => {
+		const key = event.key || event.which;
 		onKeyDown({
 			index,
 			name,
 			text,
-			key: event.key || event.which
+			key
 		});
 	};
 	const handleMouseEnter = () => {
@@ -45,8 +46,8 @@ const IconSwitch = forwardRef((props, ref) => {
 	const handleMouseLeave = () => {
 		setIsHovered(false);
 	};
-	const classes = classNames(className, `${prefix}--content-switcher-btn`, { [`${prefix}--content-switcher--selected`]: selected });
-	const iconButtonClasses = classNames(`${prefix}--content-switcher-popover__wrapper`, {
+	const classes = cx(className, `${prefix}--content-switcher-btn`, { [`${prefix}--content-switcher--selected`]: selected });
+	const iconButtonClasses = cx(`${prefix}--content-switcher-popover__wrapper`, {
 		[`${prefix}--content-switcher-popover--selected`]: selected,
 		[`${prefix}--content-switcher-popover--disabled`]: disabled
 	});

package/es/components/Switch/Switch.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { usePrefix } from "../../internal/usePrefix.js";
 import { noopFn } from "../../internal/noopFn.js";
-import classNames from "classnames";
+import { usePrefix } from "../../internal/usePrefix.js";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Switch/Switch.tsx
@@ -41,7 +41,7 @@ const Switch = React.forwardRef((props, tabRef) => {
 	const commonProps = {
 		onClick: handleClick,
 		onKeyDown: handleKeyDown,
-		className: classNames(className, `${prefix}--content-switcher-btn`, { [`${prefix}--content-switcher--selected`]: selected }),
+		className: cx(className, `${prefix}--content-switcher-btn`, { [`${prefix}--content-switcher--selected`]: selected }),
 		disabled
 	};
 	return /* @__PURE__ */ jsx("button", {