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

package/es/components/TextInput/ControlledPasswordInput.js

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { useId } from "../../internal/useId.js";
-import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { hasHelperText } from "../../internal/hasHelperText.js";
 import { getTextInputProps } from "./util.js";
-import classNames from "classnames";
 import { forwardRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { View, ViewOff, WarningFilled } from "@carbon/icons-react";
@@ -38,18 +38,18 @@ const ControlledPasswordInput = forwardRef(({ labelText, className, id, placehol
 		placeholder,
 		type,
 		ref,
-		className: classNames(`${prefix}--text-input`, `${prefix}--password-input`, className, {
+		className: cx(`${prefix}--text-input`, `${prefix}--password-input`, className, {
 			[`${prefix}--text-input--light`]: light,
 			[`${prefix}--text-input--invalid`]: invalid,
 			[`${prefix}--text-input--${size}`]: size
 		}),
 		...other
 	};
-	const labelClasses = classNames(`${prefix}--label`, {
+	const labelClasses = cx(`${prefix}--label`, {
 		[`${prefix}--visually-hidden`]: hideLabel,
 		[`${prefix}--label--disabled`]: disabled
 	});
-	const helperTextClasses = classNames(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
+	const helperTextClasses = cx(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
 	const label = typeof labelText !== "undefined" && labelText !== null && /* @__PURE__ */ jsx("label", {
 		htmlFor: id,
 		className: labelClasses,
@@ -62,7 +62,7 @@ const ControlledPasswordInput = forwardRef(({ labelText, className, id, placehol
 	}) : null;
 	const passwordIsVisible = type === "text";
 	const passwordVisibilityIcon = passwordIsVisible ? /* @__PURE__ */ jsx(ViewOff, { className: `${prefix}--icon-visibility-off` }) : /* @__PURE__ */ jsx(View, { className: `${prefix}--icon-visibility-on` });
-	const passwordVisibilityToggleClasses = classNames(`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--btn--icon-only`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
+	const passwordVisibilityToggleClasses = cx(`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--btn--icon-only`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
 		[`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
 		[`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
 	});

package/es/components/TextInput/PasswordInput.js

@@ -12,8 +12,8 @@ import { hasHelperText } from "../../internal/hasHelperText.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import { getTextInputProps } from "./util.js";
-import classNames from "classnames";
 import { forwardRef, useContext, useEffect, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { View, ViewOff } from "@carbon/icons-react";
@@ -51,7 +51,7 @@ const PasswordInput = forwardRef(({ className, disabled = false, helperText, hid
 		},
 		placeholder,
 		type: inputType,
-		className: classNames(`${prefix}--text-input`, `${prefix}--password-input`, className, {
+		className: cx(`${prefix}--text-input`, `${prefix}--password-input`, className, {
 			[`${prefix}--text-input--light`]: light,
 			[`${prefix}--text-input--invalid`]: normalizedProps.invalid,
 			[`${prefix}--text-input--warning`]: normalizedProps.warn,
@@ -61,29 +61,29 @@ const PasswordInput = forwardRef(({ className, disabled = false, helperText, hid
 		ref,
 		...rest
 	};
-	const inputWrapperClasses = classNames(`${prefix}--form-item`, `${prefix}--text-input-wrapper`, `${prefix}--password-input-wrapper`, {
+	const inputWrapperClasses = cx(`${prefix}--form-item`, `${prefix}--text-input-wrapper`, `${prefix}--password-input-wrapper`, {
 		[`${prefix}--text-input-wrapper--readonly`]: readOnly,
 		[`${prefix}--text-input-wrapper--light`]: light,
 		[`${prefix}--text-input-wrapper--inline`]: inline,
 		[`${prefix}--text-input-wrapper--inline--invalid`]: inline && normalizedProps.invalid,
 		[`${prefix}--text-input--fluid`]: isFluid
 	});
-	const labelClasses = classNames(`${prefix}--label`, {
+	const labelClasses = cx(`${prefix}--label`, {
 		[`${prefix}--visually-hidden`]: hideLabel,
 		[`${prefix}--label--disabled`]: disabled,
 		[`${prefix}--label--inline`]: inline,
 		[`${prefix}--label--inline--${size}`]: inline && !!size
 	});
-	const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
+	const helperTextClasses = cx(`${prefix}--form__helper-text`, {
 		[`${prefix}--form__helper-text--disabled`]: disabled,
 		[`${prefix}--form__helper-text--inline`]: inline
 	});
-	const fieldOuterWrapperClasses = classNames(`${prefix}--text-input__field-outer-wrapper`, { [`${prefix}--text-input__field-outer-wrapper--inline`]: inline });
-	const fieldWrapperClasses = classNames(`${prefix}--text-input__field-wrapper`, {
+	const fieldOuterWrapperClasses = cx(`${prefix}--text-input__field-outer-wrapper`, { [`${prefix}--text-input__field-outer-wrapper--inline`]: inline });
+	const fieldWrapperClasses = cx(`${prefix}--text-input__field-wrapper`, {
 		[`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,
 		[`${prefix}--layout--size-${size}`]: size
 	});
-	const iconClasses = classNames({
+	const iconClasses = cx({
 		[`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
 		[`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn
 	});
@@ -99,11 +99,11 @@ const PasswordInput = forwardRef(({ className, disabled = false, helperText, hid
 	});
 	const passwordIsVisible = inputType === "text";
 	const passwordVisibilityIcon = passwordIsVisible ? /* @__PURE__ */ jsx(ViewOff, { className: `${prefix}--icon-visibility-off` }) : /* @__PURE__ */ jsx(View, { className: `${prefix}--icon-visibility-on` });
-	const passwordVisibilityToggleClasses = classNames(`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
+	const passwordVisibilityToggleClasses = cx(`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
 		[`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
 		[`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
 	});
-	const tooltipClasses = classNames(`${prefix}--toggle-password-tooltip`, `${prefix}--icon-tooltip`);
+	const tooltipClasses = cx(`${prefix}--toggle-password-tooltip`, `${prefix}--icon-tooltip`);
 	let align = void 0;
 	if (tooltipPosition === "top" || tooltipPosition === "bottom") {
 		if (tooltipAlignment === "center") align = tooltipPosition;

package/es/components/TextInput/TextInput.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/TextInput/TextInput.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const TextInputSkeleton = ({ hideLabel, className, size, ...rest }) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--form-item`, className, { [`${prefix}--layout--size-${size}`]: size }),
+		className: cx(`${prefix}--form-item`, className, { [`${prefix}--layout--size-${size}`]: size }),
 		...rest,
 		children: [!hideLabel && /* @__PURE__ */ jsx("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--skeleton ${prefix}--text-input` })]
 	});
@@ -45,4 +45,4 @@ TextInputSkeleton.propTypes = {
 	])
 };
 //#endregion
-export { TextInputSkeleton as default };
+export { TextInputSkeleton, TextInputSkeleton as default };

package/es/components/TextInput/TextInput.js

@@ -16,8 +16,8 @@ import { AILabel } from "../AILabel/index.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import { getTextInputProps } from "./util.js";
 import { getAnnouncement } from "../../internal/getAnnouncement.js";
-import classNames from "classnames";
 import { cloneElement, forwardRef, useContext, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/TextInput/TextInput.tsx
@@ -66,7 +66,7 @@ const TextInput = forwardRef(({ className, decorator, disabled = false, helperTe
 		placeholder,
 		type,
 		ref: mergedRef,
-		className: classNames(`${prefix}--text-input`, {
+		className: cx(`${prefix}--text-input`, {
 			[`${prefix}--text-input--light`]: light,
 			[`${prefix}--text-input--invalid`]: normalizedProps.invalid,
 			[`${prefix}--text-input--warning`]: normalizedProps.warn,
@@ -80,33 +80,33 @@ const TextInput = forwardRef(({ className, decorator, disabled = false, helperTe
 		...rest
 	};
 	if (enableCounter) sharedTextInputProps.maxLength = maxCount;
-	const inputWrapperClasses = classNames([classNames(`${prefix}--form-item`, className)], `${prefix}--text-input-wrapper`, {
+	const inputWrapperClasses = cx([cx(`${prefix}--form-item`, className)], `${prefix}--text-input-wrapper`, {
 		[`${prefix}--text-input-wrapper--readonly`]: readOnly,
 		[`${prefix}--text-input-wrapper--light`]: light,
 		[`${prefix}--text-input-wrapper--inline`]: inline,
 		[`${prefix}--text-input-wrapper--inline--invalid`]: inline && normalizedProps.invalid
 	});
-	const labelClasses = classNames(`${prefix}--label`, {
+	const labelClasses = cx(`${prefix}--label`, {
 		[`${prefix}--visually-hidden`]: hideLabel,
 		[`${prefix}--label--disabled`]: normalizedProps.disabled,
 		[`${prefix}--label--inline`]: inline,
 		[`${prefix}--label--inline--${size}`]: inline && !!size
 	});
-	const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
+	const helperTextClasses = cx(`${prefix}--form__helper-text`, {
 		[`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled,
 		[`${prefix}--form__helper-text--inline`]: inline
 	});
-	const fieldOuterWrapperClasses = classNames(`${prefix}--text-input__field-outer-wrapper`, { [`${prefix}--text-input__field-outer-wrapper--inline`]: inline });
-	const fieldWrapperClasses = classNames(`${prefix}--text-input__field-wrapper`, {
+	const fieldOuterWrapperClasses = cx(`${prefix}--text-input__field-outer-wrapper`, { [`${prefix}--text-input__field-outer-wrapper--inline`]: inline });
+	const fieldWrapperClasses = cx(`${prefix}--text-input__field-wrapper`, {
 		[`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,
 		[`${prefix}--text-input__field-wrapper--slug`]: slug,
 		[`${prefix}--text-input__field-wrapper--decorator`]: decorator
 	});
-	const iconClasses = classNames({
+	const iconClasses = cx({
 		[`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
 		[`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn
 	});
-	const counterClasses = classNames(`${prefix}--label`, {
+	const counterClasses = cx(`${prefix}--label`, {
 		[`${prefix}--label--disabled`]: disabled,
 		[`${prefix}--text-input__label-counter`]: true
 	});

package/es/components/TextInput/index.js

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

package/es/components/Theme/index.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { LayerContext } from "../Layer/LayerContext.js";
 import { useMatchMedia } from "../../internal/useMatchMedia.js";
-import classNames from "classnames";
 import React, { cloneElement, isValidElement, useMemo } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Theme/index.tsx
@@ -51,7 +51,7 @@ GlobalTheme.propTypes = {
 */
 function Theme({ as: BaseComponent = "div", className: customClassName, theme, ...rest }) {
 	const prefix = usePrefix();
-	const className = classNames(customClassName, {
+	const className = cx(customClassName, {
 		[`${prefix}--white`]: theme === "white",
 		[`${prefix}--g10`]: theme === "g10",
 		[`${prefix}--g90`]: theme === "g90",

package/es/components/Tile/Tile.js

@@ -19,8 +19,8 @@ import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { getInteractiveContent, getRoleContent } from "../../internal/useNoInteractiveChildren.js";
 import { AILabel } from "../AILabel/index.js";
 import { composeEventHandlers } from "../../tools/events.js";
-import classNames from "classnames";
 import React, { Children, cloneElement, forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AiLabel, ArrowRight, Checkbox, CheckboxCheckedFilled, ChevronDown, Error } from "@carbon/icons-react";
@@ -34,7 +34,7 @@ import { AiLabel, ArrowRight, Checkbox, CheckboxCheckedFilled, ChevronDown, Erro
 const Tile = React.forwardRef(({ children, className, decorator, light = false, slug, hasRoundedCorners = false, ...rest }, ref) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--tile`, {
+		className: cx(`${prefix}--tile`, {
 			[`${prefix}--tile--light`]: light,
 			[`${prefix}--tile--slug`]: slug,
 			[`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
@@ -86,7 +86,7 @@ Tile.propTypes = {
 };
 const ClickableTile = React.forwardRef(({ children, className, clicked = false, decorator, disabled, href, light, onClick = () => {}, onKeyDown = () => {}, renderIcon: Icon, hasRoundedCorners, slug, ...rest }, ref) => {
 	const prefix = usePrefix();
-	const classes = classNames(`${prefix}--tile`, `${prefix}--tile--clickable`, {
+	const classes = cx(`${prefix}--tile`, `${prefix}--tile--clickable`, {
 		[`${prefix}--tile--is-clicked`]: clicked,
 		[`${prefix}--tile--light`]: light,
 		[`${prefix}--tile--slug`]: slug,
@@ -111,7 +111,7 @@ const ClickableTile = React.forwardRef(({ children, className, clicked = false,
 		if (!Icon) Icon = ArrowRight;
 		if (disabled) Icon = Error;
 	}
-	const iconClasses = classNames({
+	const iconClasses = cx({
 		[`${prefix}--tile--icon`]: !v12DefaultIcons || v12DefaultIcons && !disabled,
 		[`${prefix}--tile--disabled-icon`]: v12DefaultIcons && disabled
 	});
@@ -205,7 +205,7 @@ const SelectableTile = React.forwardRef(({ children, className, decorator, disab
 	useEffect(() => {
 		setIsSelected(selected);
 	}, [selected]);
-	const classes = classNames(`${prefix}--tile`, `${prefix}--tile--selectable`, {
+	const classes = cx(`${prefix}--tile`, `${prefix}--tile--selectable`, {
 		[`${prefix}--tile--is-selected`]: isSelected,
 		[`${prefix}--tile--light`]: light,
 		[`${prefix}--tile--disabled`]: disabled,
@@ -355,27 +355,30 @@ const ExpandableTile = forwardRef(({ tabIndex = 0, className, children, decorato
 			if (matches(evt, [Enter, Space])) evt.preventDefault();
 		}
 	};
-	const classNames$1 = classNames(`${prefix}--tile`, `${prefix}--tile--expandable`, {
+	const classNames = cx(`${prefix}--tile`, `${prefix}--tile--expandable`, {
 		[`${prefix}--tile--is-expanded`]: isExpanded,
 		[`${prefix}--tile--light`]: light
 	}, className);
-	const interactiveClassNames = classNames(classNames$1, `${prefix}--tile--expandable--interactive`, {
+	const interactiveClassNames = cx(classNames, `${prefix}--tile--expandable--interactive`, {
 		[`${prefix}--tile--slug`]: slug,
 		[`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
 		[`${prefix}--tile--decorator`]: decorator,
 		[`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
 	});
-	const chevronInteractiveClassNames = classNames(`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
+	const chevronInteractiveClassNames = cx(`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
 	const childrenAsArray = Children.toArray(children);
 	useIsomorphicEffect(() => {
 		if (!tile.current || !aboveTheFold.current) return;
 		const style = window.getComputedStyle(tile.current);
-		setMeasuredPadding((parseInt(style.getPropertyValue("padding-top"), 10) || 0) + (parseInt(style.getPropertyValue("padding-bottom"), 10) || 0));
+		const paddingTop = parseInt(style.getPropertyValue("padding-top"), 10) || 0;
+		const paddingBottom = parseInt(style.getPropertyValue("padding-bottom"), 10) || 0;
+		setMeasuredPadding(paddingTop + paddingBottom);
 		setMeasuredAboveHeight(aboveTheFold.current.scrollHeight);
 	}, []);
 	useIsomorphicEffect(() => {
 		if (!aboveTheFold.current || !belowTheFold.current) return;
-		setInteractive(Boolean(getInteractiveContent(aboveTheFold.current)) || Boolean(getRoleContent(aboveTheFold.current)) || Boolean(getInteractiveContent(belowTheFold.current)) || Boolean(getRoleContent(belowTheFold.current)) || Boolean(slug || decorator));
+		const hasInteractive = Boolean(getInteractiveContent(aboveTheFold.current)) || Boolean(getRoleContent(aboveTheFold.current)) || Boolean(getInteractiveContent(belowTheFold.current)) || Boolean(getRoleContent(belowTheFold.current)) || Boolean(slug || decorator);
+		setInteractive(hasInteractive);
 	}, [
 		slug,
 		decorator,
@@ -447,7 +450,7 @@ const ExpandableTile = forwardRef(({ tabIndex = 0, className, children, decorato
 	}) : /* @__PURE__ */ jsx("button", {
 		type: "button",
 		ref,
-		className: classNames$1,
+		className: classNames,
 		"aria-controls": belowTheFoldId,
 		"aria-expanded": isExpanded,
 		title: isExpanded ? tileExpandedIconText : tileCollapsedIconText,

package/es/components/TileGroup/TileGroup.js

@@ -5,8 +5,8 @@
  * 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 { isComponentElement } from "../../internal/utils.js";
 import RadioTile_default from "../RadioTile/index.js";
 import { Children, cloneElement, createElement, isValidElement, useEffect, useState } from "react";

package/es/components/TimePicker/TimePicker.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
-import classNames from "classnames";
 import React, { forwardRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/TimePicker/TimePicker.tsx
@@ -40,11 +40,11 @@ const TimePicker = forwardRef((props, ref) => {
 		warn: warning,
 		warnText: warningText
 	});
-	const timePickerInputClasses = classNames(`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [inputClassName], {
+	const timePickerInputClasses = cx(`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [inputClassName], {
 		[`${prefix}--text-input--light`]: light,
 		[`${prefix}--time-picker__input-field-error`]: normalizedProps.invalid || normalizedProps.warn
 	});
-	const timePickerClasses = classNames({
+	const timePickerClasses = cx({
 		[`${prefix}--time-picker`]: true,
 		[`${prefix}--time-picker--light`]: light,
 		[`${prefix}--time-picker--invalid`]: normalizedProps.invalid,
@@ -53,7 +53,7 @@ const TimePicker = forwardRef((props, ref) => {
 		[`${prefix}--time-picker--${size}`]: size,
 		...pickerClassName && { [pickerClassName]: true }
 	});
-	const labelClasses = classNames(`${prefix}--label`, {
+	const labelClasses = cx(`${prefix}--label`, {
 		[`${prefix}--visually-hidden`]: hideLabel,
 		[`${prefix}--label--disabled`]: disabled
 	});
@@ -91,7 +91,7 @@ const TimePicker = forwardRef((props, ref) => {
 	const readOnlyProps = { readOnly };
 	const describedBy = [normalizedProps.invalid ? normalizedProps.invalidId : normalizedProps.warn ? normalizedProps.warnId : null, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--form-item`, className),
+		className: cx(`${prefix}--form-item`, className),
 		children: [
 			label,
 			/* @__PURE__ */ jsxs("div", {

package/es/components/TimePickerSelect/TimePickerSelect.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, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@carbon/icons-react";
@@ -22,7 +22,7 @@ const TimePickerSelect = forwardRef((props, ref) => {
 	const { ["aria-label"]: ariaLabel = "open list of options", children, id, disabled = false, className, ...rest } = props;
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames({
+		className: cx({
 			[`${prefix}--select`]: true,
 			[`${prefix}--time-picker__select`]: true,
 			...className && { [className]: true }

package/es/components/Toggle/Toggle.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/Toggle/Toggle.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const ToggleSkeleton = ({ className, ...rest }) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--toggle ${prefix}--toggle--skeleton`, className),
+		className: cx(`${prefix}--toggle ${prefix}--toggle--skeleton`, className),
 		...rest,
 		children: [/* @__PURE__ */ jsx("div", { className: `${prefix}--toggle__skeleton-circle` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--toggle__skeleton-rectangle` })]
 	});
@@ -30,4 +30,4 @@ ToggleSkeleton.propTypes = {
 	className: PropTypes.string
 };
 //#endregion
-export { ToggleSkeleton as default };
+export { ToggleSkeleton, ToggleSkeleton as default };

package/es/components/Toggle/Toggle.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { useControllableState } from "../../internal/useControllableState.js";
-import classNames from "classnames";
 import { useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Toggle/Toggle.tsx
@@ -35,13 +35,13 @@ function Toggle({ "aria-labelledby": ariaLabelledby, className, defaultToggled =
 	const sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
 	const renderSideLabel = !(hideLabel && !labelText);
 	const LabelComponent = labelText ? "label" : "div";
-	const wrapperClasses = classNames(`${prefix}--toggle`, {
+	const wrapperClasses = cx(`${prefix}--toggle`, {
 		[`${prefix}--toggle--disabled`]: disabled,
 		[`${prefix}--toggle--readonly`]: readOnly
 	}, className);
-	const labelTextClasses = classNames(`${prefix}--toggle__label-text`, { [`${prefix}--visually-hidden`]: hideLabel });
-	const appearanceClasses = classNames(`${prefix}--toggle__appearance`, { [`${prefix}--toggle__appearance--sm`]: isSm });
-	const switchClasses = classNames(`${prefix}--toggle__switch`, { [`${prefix}--toggle__switch--checked`]: checked });
+	const labelTextClasses = cx(`${prefix}--toggle__label-text`, { [`${prefix}--visually-hidden`]: hideLabel });
+	const appearanceClasses = cx(`${prefix}--toggle__appearance`, { [`${prefix}--toggle__appearance--sm`]: isSm });
+	const switchClasses = cx(`${prefix}--toggle__switch`, { [`${prefix}--toggle__switch--checked`]: checked });
 	const labelId = `${id}_label`;
 	return /* @__PURE__ */ jsxs("div", {
 		className: wrapperClasses,
@@ -154,4 +154,4 @@ Toggle.propTypes = {
 	toggled: PropTypes.bool
 };
 //#endregion
-export { Toggle as default };
+export { Toggle, Toggle as default };

package/es/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -6,8 +6,8 @@
  */
 
 import { PrefixContext } from "../../internal/usePrefix.js";
-import classNames from "classnames";
 import { useContext } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ToggleSmall/ToggleSmall.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const ToggleSmallSkeleton = ({ id, labelText, className, ...rest }) => {
 	const prefix = useContext(PrefixContext);
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--form-item`, className),
+		className: cx(`${prefix}--form-item`, className),
 		...rest,
 		children: [/* @__PURE__ */ jsx("input", {
 			type: "checkbox",

package/es/components/Toggletip/index.js

@@ -11,8 +11,8 @@ import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { useWindowEvent } from "../../internal/useEvent.js";
 import { Popover, PopoverContent } from "../Popover/index.js";
-import classNames from "classnames";
 import React, { forwardRef, useContext, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Toggletip/index.tsx
@@ -27,7 +27,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function ToggletipLabel({ as: BaseComponent = "span", children, className: customClassName, ...rest }) {
 	return /* @__PURE__ */ jsx(BaseComponent, {
-		className: classNames(`${usePrefix()}--toggletip-label`, customClassName),
+		className: cx(`${usePrefix()}--toggletip-label`, customClassName),
 		...rest,
 		children
 	});
@@ -62,7 +62,7 @@ function Toggletip({ align, as, autoAlign, className: customClassName, children,
 	const [open, setOpen] = useState(defaultOpen);
 	const prefix = usePrefix();
 	const id = useId();
-	const className = classNames(`${prefix}--toggletip`, customClassName, {
+	const className = cx(`${prefix}--toggletip`, customClassName, {
 		[`${prefix}--toggletip--open`]: open,
 		[`${prefix}--autoalign`]: autoAlign
 	});
@@ -148,7 +148,7 @@ Toggletip.propTypes = {
 */
 const ToggletipButton = forwardRef(function ToggletipButton({ children, className: customClassName, label = "Show information", as: BaseComponent, ...rest }, ref) {
 	const toggletip = useToggletip();
-	const className = classNames(`${usePrefix()}--toggletip-button`, customClassName);
+	const className = cx(`${usePrefix()}--toggletip-button`, customClassName);
 	const ComponentToggle = BaseComponent ?? "button";
 	if (ComponentToggle !== "button") return /* @__PURE__ */ jsx(ComponentToggle, {
 		...toggletip?.onClick,
@@ -219,7 +219,7 @@ ToggletipContent.displayName = "ToggletipContent";
 */
 function ToggletipActions({ children, className: customClassName }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(`${usePrefix()}--toggletip-actions`, customClassName),
+		className: cx(`${usePrefix()}--toggletip-actions`, customClassName),
 		children
 	});
 }
@@ -235,4 +235,4 @@ ToggletipActions.propTypes = {
 	className: PropTypes.string
 };
 //#endregion
-export { ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Toggletip as default };
+export { Toggletip, Toggletip as default, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel };

package/es/components/Tooltip/DefinitionTooltip.js

@@ -11,8 +11,8 @@ import { match } from "../../internal/keyboard/match.js";
 import { useFallbackId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { Popover, PopoverContent } from "../Popover/index.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/Tooltip/DefinitionTooltip.tsx
@@ -53,7 +53,7 @@ const DefinitionTooltip = ({ align = "bottom", autoAlign, className, children, d
 		open: isOpen,
 		children: [/* @__PURE__ */ jsx("button", {
 			...rest,
-			className: classNames(`${prefix}--definition-term`, triggerClassName),
+			className: cx(`${prefix}--definition-term`, triggerClassName),
 			"aria-controls": tooltipId,
 			"aria-describedby": tooltipId,
 			"aria-expanded": isOpen,

package/es/components/Tooltip/Tooltip.d.ts

@@ -21,7 +21,8 @@ interface TooltipBaseProps {
      */
     className?: string;
     /**
-     * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
+     * Controls whether the tooltip closes when the trigger is activated with
+     * click, Enter, or Space.
      */
     closeOnActivation?: boolean;
     /**

package/es/components/Tooltip/Tooltip.js

@@ -13,8 +13,8 @@ import { useId } from "../../internal/useId.js";
 import { Popover, PopoverContent } from "../Popover/index.js";
 import { useDelayedState } from "../../internal/useDelayedState.js";
 import { useNoInteractiveChildren } from "../../internal/useNoInteractiveChildren.js";
-import classNames from "classnames";
 import React, { useCallback, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Tooltip/Tooltip.tsx
@@ -27,7 +27,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * Event types that trigger a "drag" to stop.
 */
-const DRAG_STOP_EVENT_TYPES = new Set([
+const DRAG_STOP_EVENT_TYPES = /* @__PURE__ */ new Set([
 	"mouseup",
 	"touchend",
 	"touchcancel"
@@ -136,7 +136,7 @@ const Tooltip = React.forwardRef(({ as, align = "top", className: customClassNam
 		ref,
 		...rest,
 		align,
-		className: classNames(`${prefix}--tooltip`, customClassName),
+		className: cx(`${prefix}--tooltip`, customClassName),
 		dropShadow,
 		highContrast,
 		onKeyDown,
@@ -193,7 +193,8 @@ Tooltip.propTypes = {
 	*/
 	className: PropTypes.string,
 	/**
-	* Determines wether the tooltip should close when inner content is activated (click, Enter or Space)
+	* Controls whether the tooltip closes when the trigger is activated with
+	* click, Enter, or Space.
 	*/
 	closeOnActivation: PropTypes.bool,
 	/**