@carbon/react 1.112.0-rc.0 → 1.113.0-rc.0

package/es/components/RadioButton/RadioButton.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/RadioButton/RadioButton.Skeleton.tsx
@@ -21,7 +21,7 @@ function RadioButtonSkeleton(props) {
 	const { className, ...rest } = props;
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--radio-button-wrapper`, className),
+		className: cx(`${prefix}--radio-button-wrapper`, className),
 		...rest,
 		children: [/* @__PURE__ */ jsx("div", { className: `${prefix}--radio-button ${prefix}--skeleton` }), /* @__PURE__ */ jsx("span", { className: `${prefix}--radio-button__label ${prefix}--skeleton` })]
 	});
@@ -32,4 +32,4 @@ RadioButtonSkeleton.propTypes = {
 */
 className: PropTypes.string };
 //#endregion
-export { RadioButtonSkeleton as default };
+export { RadioButtonSkeleton, RadioButtonSkeleton as default };

package/es/components/RadioButton/RadioButton.js

@@ -13,8 +13,8 @@ import { isComponentElement } from "../../internal/utils.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { AILabel } from "../AILabel/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
-import classNames from "classnames";
 import React, { cloneElement, useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/RadioButton/RadioButton.tsx
@@ -41,8 +41,8 @@ const RadioButton = React.forwardRef((props, ref) => {
 	function handleOnChange(event) {
 		onChange(value, name, event);
 	}
-	const innerLabelClasses = classNames(`${prefix}--radio-button__label-text`, { [`${prefix}--visually-hidden`]: hideLabel });
-	const wrapperClasses = classNames(className, `${prefix}--radio-button-wrapper`, {
+	const innerLabelClasses = cx(`${prefix}--radio-button__label-text`, { [`${prefix}--visually-hidden`]: hideLabel });
+	const wrapperClasses = cx(className, `${prefix}--radio-button-wrapper`, {
 		[`${prefix}--radio-button-wrapper--label-${labelPosition}`]: labelPosition !== "right",
 		[`${prefix}--radio-button-wrapper--slug`]: slug,
 		[`${prefix}--radio-button-wrapper--decorator`]: decorator,

package/es/components/RadioButton/index.js

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

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -14,8 +14,8 @@ import { AILabel } from "../AILabel/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import RadioButton_default from "../RadioButton/index.js";
 import { Legend } from "../Text/createTextComponent.js";
-import classNames from "classnames";
 import React, { Children, cloneElement, createContext, useEffect, useRef, useState } 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";
@@ -57,8 +57,8 @@ const RadioButtonGroup = React.forwardRef((props, ref) => {
 	}
 	const showWarning = !readOnly && !disabled && !invalid && warn;
 	const showHelper = !invalid && !disabled && !warn;
-	const wrapperClasses = classNames(`${prefix}--form-item`, className);
-	const fieldsetClasses = classNames(`${prefix}--radio-button-group`, {
+	const wrapperClasses = cx(`${prefix}--form-item`, className);
+	const fieldsetClasses = cx(`${prefix}--radio-button-group`, {
 		[`${prefix}--radio-button-group--${orientation}`]: orientation === "vertical",
 		[`${prefix}--radio-button-group--label-${labelPosition}`]: labelPosition,
 		[`${prefix}--radio-button-group--readonly`]: readOnly,
@@ -67,7 +67,7 @@ const RadioButtonGroup = React.forwardRef((props, ref) => {
 		[`${prefix}--radio-button-group--slug`]: slug,
 		[`${prefix}--radio-button-group--decorator`]: decorator
 	});
-	const helperClasses = classNames(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
+	const helperClasses = cx(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
 	const hasHelper = hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `radio-button-group-helper-text-${radioButtonGroupInstanceId}`;
 	const helper = hasHelper && /* @__PURE__ */ jsx("div", {

package/es/components/RadioTile/RadioTile.js

@@ -5,18 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { Enter, Space } from "../../internal/keyboard/keys.js";
 import { matches } from "../../internal/keyboard/match.js";
 import { useFallbackId } from "../../internal/useId.js";
-import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { AILabel } from "../AILabel/index.js";
-import classNames from "classnames";
 import React, { cloneElement } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckmarkFilled, RadioButton, RadioButtonChecked } from "@carbon/icons-react";
@@ -30,7 +30,7 @@ import { CheckmarkFilled, RadioButton, RadioButtonChecked } from "@carbon/icons-
 const RadioTile = React.forwardRef(({ children, className: customClassName, decorator, disabled, light, checked, name, value, id, onChange = noopFn, tabIndex = 0, hasRoundedCorners, slug, required, ...rest }, ref) => {
 	const prefix = usePrefix();
 	const inputId = useFallbackId(id);
-	const className = classNames(customClassName, `${prefix}--tile`, `${prefix}--tile--selectable`, `${prefix}--tile--radio`, {
+	const className = cx(customClassName, `${prefix}--tile`, `${prefix}--tile--selectable`, `${prefix}--tile--radio`, {
 		[`${prefix}--tile--is-selected`]: checked,
 		[`${prefix}--tile--light`]: light,
 		[`${prefix}--tile--disabled`]: disabled,

package/es/components/RadioTile/index.js

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

package/es/components/Search/Search.Skeleton.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 } from "react/jsx-runtime";
 //#region src/components/Search/Search.Skeleton.tsx
@@ -22,7 +22,7 @@ const SearchSkeleton = ({ small = false, size, className, ...rest }) => {
 	const prefix = usePrefix();
 	const normalizedSize = small ? "sm" : size;
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(className, {
+		className: cx(className, {
 			[`${prefix}--skeleton`]: true,
 			[`${prefix}--search--sm`]: small,
 			[`${prefix}--layout--size-${normalizedSize}`]: normalizedSize
@@ -51,4 +51,4 @@ SearchSkeleton.propTypes = {
 	small: deprecate(PropTypes.bool, "The `small` prop has been deprecated and will be removed in the next major release. Please use the `size` prop instead.")
 };
 //#endregion
-export { SearchSkeleton as default };
+export { SearchSkeleton, SearchSkeleton as default };

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"
 	});