@carbon/react 1.112.0 → 1.113.0

package/es/components/FluidTextInput/FluidTextInput.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import PasswordInput from "../TextInput/PasswordInput.js";
 import TextInput_default from "../TextInput/index.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FluidTextInput/FluidTextInput.tsx
@@ -21,15 +21,15 @@ import { jsx } from "react/jsx-runtime";
 * LICENSE file in the root directory of this source tree.
 */
 const FluidTextInput = React.forwardRef(({ className, isPassword, ...other }, ref) => {
-	const classNames$1 = classNames(className, { [`${usePrefix()}--text-input--fluid`]: !isPassword });
+	const classNames = cx(className, { [`${usePrefix()}--text-input--fluid`]: !isPassword });
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: { isFluid: true },
 		children: isPassword ? /* @__PURE__ */ jsx(PasswordInput, {
-			className: classNames$1,
+			className: classNames,
 			ref,
 			...other
 		}) : /* @__PURE__ */ jsx(TextInput_default, {
-			className: classNames$1,
+			className: classNames,
 			ref,
 			...other
 		})

package/es/components/FluidTextInput/index.js

@@ -6,8 +6,8 @@
  */
 
 import FluidTextInput from "./FluidTextInput.js";
-import "./FluidPasswordInput.js";
-import "./FluidTextInput.Skeleton.js";
+import FluidPasswordInput from "./FluidPasswordInput.js";
+import FluidTextInputSkeleton from "./FluidTextInput.Skeleton.js";
 //#region src/components/FluidTextInput/index.tsx
 /**
 * Copyright IBM Corp. 2016, 2023
@@ -17,4 +17,4 @@ import "./FluidTextInput.Skeleton.js";
 */
 var FluidTextInput_default = FluidTextInput;
 //#endregion
-export { FluidTextInput_default as default };
+export { FluidPasswordInput, FluidTextInput, FluidTextInputSkeleton, FluidTextInput_default as default };

package/es/components/FluidTimePicker/FluidTimePicker.Skeleton.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import FluidSelectSkeleton from "../FluidSelect/FluidSelect.Skeleton.js";
 import FluidTextInputSkeleton from "../FluidTextInput/FluidTextInput.Skeleton.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/FluidTimePicker/FluidTimePicker.Skeleton.tsx
@@ -22,7 +22,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const FluidTimePickerSkeleton = ({ className, isOnlyTwo, ...rest }) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(className, `${prefix}--time-picker--fluid--skeleton`, { [`${prefix}--time-picker--equal-width`]: isOnlyTwo }),
+		className: cx(className, `${prefix}--time-picker--fluid--skeleton`, { [`${prefix}--time-picker--equal-width`]: isOnlyTwo }),
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx(FluidTextInputSkeleton, {}),

package/es/components/FluidTimePicker/FluidTimePicker.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { isComponentElement } from "../../internal/utils.js";
 import FluidTextInput_default from "../FluidTextInput/index.js";
 import FluidTimePickerSelect_default from "../FluidTimePickerSelect/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 { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -23,7 +23,7 @@ import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
 */
 const FluidTimePicker = React.forwardRef(({ className, children, disabled, invalid, invalidText, warn, warnText, readOnly, ...other }, ref) => {
 	const prefix = usePrefix();
-	const classNames$1 = classNames(className, {
+	const classNames = cx(className, {
 		[`${prefix}--time-picker--fluid`]: true,
 		[`${prefix}--time-picker--equal-width`]: React.Children.toArray(children).length !== 2,
 		[`${prefix}--time-picker--fluid--disabled`]: disabled,
@@ -41,7 +41,7 @@ const FluidTimePicker = React.forwardRef(({ className, children, disabled, inval
 		return children;
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames$1,
+		className: classNames,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: `${prefix}--time-picker--fluid__wrapper`,

package/es/components/FluidTimePickerSelect/index.js

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

package/es/components/Form/Form.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/Form/Form.tsx
@@ -19,7 +19,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function Form({ className, children, ...other }) {
 	return /* @__PURE__ */ jsx("form", {
-		className: classNames(`${usePrefix()}--form`, className),
+		className: cx(`${usePrefix()}--form`, className),
 		...other,
 		children
 	});

package/es/components/FormGroup/FormGroup.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/FormGroup/FormGroup.tsx
@@ -19,7 +19,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 const FormGroup = ({ disabled = false, legendId, legendText, invalid = false, children, className, message = false, messageText = "", ...rest }) => {
 	const prefix = usePrefix();
-	const classNamesFieldset = classNames(`${prefix}--fieldset`, className);
+	const classNamesFieldset = cx(`${prefix}--fieldset`, className);
 	return /* @__PURE__ */ jsxs("fieldset", {
 		disabled,
 		...invalid && { "data-invalid": "" },

package/es/components/FormItem/FormItem.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/FormItem/FormItem.tsx
@@ -19,7 +19,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function FormItem({ className, children, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(`${usePrefix()}--form-item`, className),
+		className: cx(`${usePrefix()}--form-item`, className),
 		...rest,
 		children
 	});

package/es/components/FormLabel/FormLabel.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/FormLabel/FormLabel.tsx
@@ -23,7 +23,7 @@ function FormLabel({ className: customClassName, children, id, ...rest }) {
 	return /* @__PURE__ */ jsx(Text, {
 		as: "label",
 		htmlFor: id,
-		className: classNames(`${prefix}--label`, `${prefix}--label--no-margin`, customClassName),
+		className: cx(`${prefix}--label`, `${prefix}--label--no-margin`, customClassName),
 		...rest,
 		children
 	});

package/es/components/Grid/CSSGrid.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { GridSettings, useGridSettings } from "./GridContext.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Grid/CSSGrid.tsx
@@ -37,7 +37,7 @@ const CSSGrid = React.forwardRef(({ align, as, children, className: customClassN
 			children
 		})
 	});
-	const className = classNames(customClassName, {
+	const className = cx(customClassName, {
 		[`${prefix}--css-grid`]: true,
 		[`${prefix}--css-grid--condensed`]: mode === "condensed",
 		[`${prefix}--css-grid--narrow`]: mode === "narrow",
@@ -100,7 +100,7 @@ CSSGrid.propTypes = {
 };
 const Subgrid = React.forwardRef(({ as, className: customClassName, children, mode, withRowGap, ...rest }, ref) => {
 	const prefix = usePrefix();
-	const className = classNames(customClassName, {
+	const className = cx(customClassName, {
 		[`${prefix}--subgrid`]: true,
 		[`${prefix}--subgrid--condensed`]: mode === "condensed",
 		[`${prefix}--subgrid--narrow`]: mode === "narrow",
@@ -143,4 +143,4 @@ Subgrid.propTypes = {
 };
 const CSSGridComponent = CSSGrid;
 //#endregion
-export { CSSGridComponent };
+export { CSSGridComponent as CSSGrid };

package/es/components/Grid/Column.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { useGridSettings } from "./GridContext.js";
 import { enabled } from "@carbon/feature-flags";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Grid/Column.tsx
@@ -43,7 +43,7 @@ const Column = React.forwardRef(({ as, children, className: customClassName, sm,
 		max
 	], prefix);
 	return /* @__PURE__ */ jsx(BaseComponent, {
-		className: classNames(customClassName, columnClassName, { [`${prefix}--col`]: columnClassName.length === 0 }),
+		className: cx(customClassName, columnClassName, { [`${prefix}--col`]: columnClassName.length === 0 }),
 		ref,
 		...rest,
 		children
@@ -130,7 +130,7 @@ Column.propTypes = {
 const CSSGridColumn = React.forwardRef(({ as: BaseComponent = "div", children, className: containerClassName, sm, md, lg, xlg, max, span, ...rest }, ref) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx(BaseComponent, {
-		className: classNames(containerClassName, getClassNameForBreakpoints([
+		className: cx(containerClassName, getClassNameForBreakpoints([
 			sm,
 			md,
 			lg,

package/es/components/Grid/ColumnHang.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/Grid/ColumnHang.tsx
@@ -22,7 +22,7 @@ import { jsx } from "react/jsx-runtime";
 * trying to align content across different gutter modes
 */
 function ColumnHang({ as: BaseComponent = "div", className: customClassName, children, ...rest }) {
-	const className = classNames(customClassName, `${usePrefix()}--grid-column-hang`);
+	const className = cx(customClassName, `${usePrefix()}--grid-column-hang`);
 	return /* @__PURE__ */ jsx(BaseComponent, {
 		...rest,
 		className,
@@ -45,4 +45,4 @@ ColumnHang.propTypes = {
 };
 const ColumnHangComponent = ColumnHang;
 //#endregion
-export { ColumnHangComponent };
+export { ColumnHangComponent as ColumnHang };

package/es/components/Grid/FlexGrid.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { GridSettings } from "./GridContext.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Grid/FlexGrid.tsx
@@ -20,7 +20,7 @@ import { jsx } from "react/jsx-runtime";
 */
 const FlexGrid = React.forwardRef(({ as, condensed = false, narrow = false, fullWidth = false, withRowGap = false, className: containerClassName, children, ...rest }, ref) => {
 	const prefix = usePrefix();
-	const className = classNames(containerClassName, {
+	const className = cx(containerClassName, {
 		[`${prefix}--grid`]: true,
 		[`${prefix}--grid--condensed`]: condensed,
 		[`${prefix}--grid--narrow`]: narrow,
@@ -73,4 +73,4 @@ FlexGrid.propTypes = {
 };
 const FlexGridComponent = FlexGrid;
 //#endregion
-export { FlexGridComponent };
+export { FlexGridComponent as FlexGrid };

package/es/components/Grid/Grid.js

@@ -6,8 +6,8 @@
  */
 
 import { useFeatureFlag } from "../FeatureFlags/index.js";
-import { FlexGridComponent } from "./FlexGrid.js";
-import { CSSGridComponent } from "./CSSGrid.js";
+import { FlexGrid as FlexGridComponent } from "./FlexGrid.js";
+import { CSSGrid as CSSGridComponent } from "./CSSGrid.js";
 import "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
@@ -65,4 +65,4 @@ Grid.propTypes = {
 };
 const GridAsGridComponent = Grid;
 //#endregion
-export { GridAsGridComponent };
+export { GridAsGridComponent as Grid };

package/es/components/Grid/Row.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/Grid/Row.tsx
@@ -20,7 +20,7 @@ import { jsx } from "react/jsx-runtime";
 function Row({ as: BaseComponent = "div", condensed = false, narrow = false, className: containerClassName, children, ...rest }) {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx(BaseComponent, {
-		className: classNames(containerClassName, {
+		className: cx(containerClassName, {
 			[`${prefix}--row`]: true,
 			[`${prefix}--row--condensed`]: condensed,
 			[`${prefix}--row--narrow`]: narrow

package/es/components/Icon/Icon.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 } from "react/jsx-runtime";
 //#region src/components/Icon/Icon.Skeleton.tsx
@@ -19,7 +19,7 @@ import { jsx } from "react/jsx-runtime";
 */
 const IconSkeleton = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(`${usePrefix()}--icon--skeleton`, className),
+		className: cx(`${usePrefix()}--icon--skeleton`, className),
 		...rest
 	});
 };
@@ -29,4 +29,4 @@ IconSkeleton.propTypes = {
 */
 className: PropTypes.string };
 //#endregion
-export { IconSkeleton as default };
+export { IconSkeleton, IconSkeleton as default };

package/es/components/IconButton/index.js

@@ -11,9 +11,9 @@ import { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js
 import { mapPopoverAlign } from "../../tools/mapPopoverAlign.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
 import ButtonBase from "../Button/ButtonBase.js";
-import BadgeIndicator from "../BadgeIndicator/index.js";
-import classNames from "classnames";
+import { BadgeIndicator } from "../BadgeIndicator/index.js";
 import { forwardRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/IconButton/index.tsx
@@ -31,7 +31,7 @@ const IconButtonKinds = [
 ];
 const IconButton = forwardRef(({ align, autoAlign = false, badgeCount, children, className, closeOnActivation = true, defaultOpen = false, disabled, dropShadow = false, enterDelayMs = 100, highContrast = true, kind, label, leaveDelayMs = 100, wrapperClasses, size, isSelected, ...rest }, ref) => {
 	const prefix = usePrefix();
-	const tooltipClasses = classNames(wrapperClasses, `${prefix}--icon-tooltip`, { [`${prefix}--icon-tooltip--disabled`]: disabled });
+	const tooltipClasses = cx(wrapperClasses, `${prefix}--icon-tooltip`, { [`${prefix}--icon-tooltip--disabled`]: disabled });
 	if (badgeCount && (kind !== "ghost" || size !== "lg")) console.warn("The prop BadgeCount must be used with hasIconOnly=true, kind='ghost' and size='lg'");
 	const badgeId = useId("badge-indicator");
 	return /* @__PURE__ */ jsx(Tooltip, {
@@ -177,6 +177,7 @@ IconButton.propTypes = {
 	* Specify the size of the Button.
 	*/
 	size: PropTypes.oneOf([
+		"xs",
 		"sm",
 		"md",
 		"lg"

package/es/components/IconIndicator/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 { CheckmarkFilled, CheckmarkOutline, CircleDash, ErrorFilled, InProgress, Incomplete, PendingFilled, UndefinedFilled, UnknownFilled, WarningAltFilled, WarningAltInvertedFilled, WarningSquareFilled } from "@carbon/icons-react";
@@ -36,7 +36,7 @@ const iconTypes = {
 const IconIndicatorKinds = Object.keys(iconTypes);
 const IconIndicator = React.forwardRef(({ align = "right", autoAlign = false, className: customClassName, compact = false, iconDescription, kind, label, size = 16 }, ref) => {
 	const prefix = usePrefix();
-	const classNames$1 = classNames(`${prefix}--icon-indicator`, customClassName, { [`${prefix}--icon-indicator--20`]: size === 20 });
+	const classNames = cx(`${prefix}--icon-indicator`, customClassName, { [`${prefix}--icon-indicator--20`]: size === 20 });
 	const IconForKind = iconTypes[kind];
 	if (!IconForKind) return null;
 	const iconElement = /* @__PURE__ */ jsx(IconForKind, {
@@ -44,7 +44,7 @@ const IconIndicator = React.forwardRef(({ align = "right", autoAlign = false, cl
 		className: `${prefix}--icon-indicator--${kind}`
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames$1,
+		className: classNames,
 		ref,
 		children: compact ? /* @__PURE__ */ jsxs(DefinitionTooltip, {
 			align,
@@ -108,4 +108,4 @@ IconIndicator.propTypes = {
 	size: PropTypes.oneOf([16, 20])
 };
 //#endregion
-export { IconIndicator as default };
+export { IconIndicator, IconIndicator as default, IconIndicatorKinds };

package/es/components/InlineCheckbox/index.js

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

package/es/components/InlineLoading/InlineLoading.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import Loading_default from "../Loading/index.js";
-import classNames from "classnames";
 import { useEffect, useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckmarkFilled, ErrorFilled } from "@carbon/icons-react";
@@ -21,7 +21,7 @@ import { CheckmarkFilled, ErrorFilled } from "@carbon/icons-react";
 */
 const InlineLoading = ({ className, status = "active", iconDescription, description, onSuccess, successDelay = 1500, ...rest }) => {
 	const prefix = usePrefix();
-	const loadingClasses = classNames(`${prefix}--inline-loading`, className);
+	const loadingClasses = cx(`${prefix}--inline-loading`, className);
 	const timerRef = useRef(null);
 	useEffect(() => {
 		if (status === "finished") timerRef.current = setTimeout(() => {

package/es/components/InlineLoading/index.js

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

package/es/components/Layer/LayerLevel.js

@@ -25,4 +25,4 @@ const LayerLevels = [
 const MIN_LEVEL = LayerLevels[0];
 const MAX_LEVEL = LayerLevels[LayerLevels.length - 1];
 //#endregion
-export { MAX_LEVEL, MIN_LEVEL, levels };
+export { LayerLevels, MAX_LEVEL, MIN_LEVEL, levels };

package/es/components/Layer/index.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { LayerContext } from "./LayerContext.js";
 import { MAX_LEVEL, MIN_LEVEL, levels } from "./LayerLevel.js";
 import { clamp } from "../../internal/clamp.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Layer/index.tsx
@@ -33,7 +33,7 @@ const Layer = React.forwardRef((props, ref) => {
 	const contextLevel = React.useContext(LayerContext);
 	const level = overrideLevel ?? contextLevel;
 	const prefix = usePrefix();
-	const className = classNames(`${prefix}--layer-${levels[level]}`, { [`${prefix}--layer__with-background`]: withBackground }, customClassName);
+	const className = cx(`${prefix}--layer-${levels[level]}`, { [`${prefix}--layer__with-background`]: withBackground }, customClassName);
 	const value = clamp(level + 1, MIN_LEVEL, MAX_LEVEL);
 	const BaseComponent = as || "div";
 	return /* @__PURE__ */ jsx(LayerContext.Provider, {

package/es/components/Layout/index.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";
 //#region src/components/Layout/index.tsx
@@ -28,7 +28,7 @@ const sizes = [
 const densities = ["condensed", "normal"];
 const Layout = React.forwardRef(({ as: BaseComponent = "div", children, className, density, size, ...rest }, forwardRef) => {
 	const prefix = usePrefix();
-	const classes = classNames(className, `${prefix}--layout`, {
+	const classes = cx(className, `${prefix}--layout`, {
 		[`${prefix}--layout--size-${size}`]: size && sizes.includes(size),
 		[`${prefix}--layout--density-${density}`]: density && densities.includes(density)
 	});
@@ -69,7 +69,7 @@ Layout.propTypes = {
 };
 const LayoutConstraint = React.forwardRef(({ as: BaseComponent = "div", children, className, density, size, ...rest }, forwardRef) => {
 	const prefix = usePrefix();
-	const classes = classNames(className, Object.entries({
+	const classes = cx(className, Object.entries({
 		size,
 		density
 	}).map(([group, constraints]) => ({

package/es/components/LayoutDirection/LayoutDirection.js

@@ -49,4 +49,4 @@ LayoutDirection.propTypes = {
 	dir: PropTypes.oneOf(["ltr", "rtl"]).isRequired
 };
 //#endregion
-export { LayoutDirection };
+export { LayoutDirection, LayoutDirectionContext };

package/es/components/Link/Link.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, jsxs } from "react/jsx-runtime";
 //#region src/components/Link/Link.tsx
@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const Link = React.forwardRef(({ as: BaseComponent, children, className: customClassName, href, disabled = false, inline = false, visited = false, renderIcon: Icon, size, target, ...rest }, ref) => {
 	const prefix = usePrefix();
 	const linkProps = {
-		className: classNames(`${prefix}--link`, customClassName, {
+		className: cx(`${prefix}--link`, customClassName, {
 			[`${prefix}--link--disabled`]: disabled,
 			[`${prefix}--link--inline`]: inline,
 			[`${prefix}--link--visited`]: visited,

package/es/components/Link/index.js

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

package/es/components/ListBox/ListBox.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { ListBoxSizePropType, ListBoxTypePropType } from "./ListBoxPropTypes.js";
 import { FormContext } from "../FluidForm/FormContext.js";
-import classNames from "classnames";
 import { forwardRef, useContext } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ListBox/ListBox.tsx
@@ -36,7 +36,7 @@ const ListBox = forwardRef((props, ref) => {
 	const prefix = usePrefix();
 	const { isFluid } = useContext(FormContext);
 	const showWarning = !invalid && warn;
-	const className = classNames({
+	const className = cx({
 		...containerClassName && { [containerClassName]: true },
 		[`${prefix}--list-box`]: true,
 		[`${prefix}--list-box--${size}`]: size,

package/es/components/ListBox/ListBoxMenuIcon.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";
 import { ChevronDown } from "@carbon/icons-react";
@@ -35,7 +35,7 @@ const defaultTranslateWithId = (messageId) => {
 */
 const ListBoxMenuIcon = ({ isOpen, translateWithId: t = defaultTranslateWithId }) => {
 	const prefix = usePrefix();
-	const className = classNames(`${prefix}--list-box__menu-icon`, { [`${prefix}--list-box__menu-icon--open`]: isOpen });
+	const className = cx(`${prefix}--list-box__menu-icon`, { [`${prefix}--list-box__menu-icon--open`]: isOpen });
 	const description = isOpen ? t("close.menu") : t("open.menu");
 	return /* @__PURE__ */ jsx("div", {
 		className,

package/es/components/ListBox/ListBoxMenuItem.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
-import classNames from "classnames";
 import { forwardRef, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ListBox/ListBoxMenuItem.tsx
@@ -51,8 +51,9 @@ const useIsTruncated = (forwardedRef, deps = []) => {
 */
 const ListBoxMenuItem = forwardRef(({ children, isActive = false, isHighlighted = false, title, ...rest }, forwardedRef) => {
 	const prefix = usePrefix();
-	const { isTruncated, ref: menuItemOptionRef } = useIsTruncated(forwardedRef && typeof forwardedRef !== "function" ? forwardedRef.menuItemOptionRef : void 0, [children]);
-	const className = classNames(`${prefix}--list-box__menu-item`, {
+	const menuItemOptionRefProp = forwardedRef && typeof forwardedRef !== "function" ? forwardedRef.menuItemOptionRef : void 0;
+	const { isTruncated, ref: menuItemOptionRef } = useIsTruncated(menuItemOptionRefProp, [children]);
+	const className = cx(`${prefix}--list-box__menu-item`, {
 		[`${prefix}--list-box__menu-item--active`]: isActive,
 		[`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
 	});

package/es/components/ListBox/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,7 +38,7 @@ const 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
 	});
@@ -49,7 +49,7 @@ const ListBoxSelection = ({ clearSelection, selectionCount, translateWithId: t =
 		if (onClearSelection) onClearSelection(event);
 	};
 	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 });
 	return hasSelectionCount ? /* @__PURE__ */ jsxs("div", {
 		className: tagClasses,
 		children: [/* @__PURE__ */ jsx("span", {