@carbon/react 1.112.0 → 1.113.0

package/es/components/TabContent/TabContent.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/TabContent/TabContent.tsx
@@ -19,7 +19,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function TabContent(props) {
 	const { className, selected, children, ...other } = props;
-	const tabContentClasses = classNames(`${usePrefix()}--tab-content`, className);
+	const tabContentClasses = cx(`${usePrefix()}--tab-content`, className);
 	return /* @__PURE__ */ jsx("div", {
 		role: "tabpanel",
 		...other,

package/es/components/Tabs/Tabs.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/Tabs/Tabs.Skeleton.tsx
@@ -30,7 +30,7 @@ function Tab() {
 function TabsSkeleton({ className, contained, ...rest }) {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(className, `${prefix}--tabs`, `${prefix}--skeleton`, { [`${prefix}--tabs--contained`]: contained }),
+		className: cx(className, `${prefix}--tabs`, `${prefix}--skeleton`, { [`${prefix}--tabs--contained`]: contained }),
 		...rest,
 		children: /* @__PURE__ */ jsxs("ul", {
 			className: `${prefix}--tabs__nav`,
@@ -55,4 +55,4 @@ TabsSkeleton.propTypes = {
 	contained: PropTypes.bool
 };
 //#endregion
-export { TabsSkeleton as default };
+export { TabsSkeleton, TabsSkeleton as default };

package/es/components/Tabs/Tabs.js

@@ -16,13 +16,13 @@ import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { useEvent } from "../../internal/useEvent.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
-import BadgeIndicator from "../BadgeIndicator/index.js";
+import { BadgeIndicator } from "../BadgeIndicator/index.js";
 import { useControllableState } from "../../internal/useControllableState.js";
-import { GridAsGridComponent } from "../Grid/Grid.js";
+import { Grid as GridAsGridComponent } from "../Grid/Grid.js";
 import { useMatchMedia } from "../../internal/useMatchMedia.js";
 import { usePressable } from "./usePressable.js";
-import classNames from "classnames";
 import React, { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight, Close } from "@carbon/icons-react";
@@ -189,6 +189,7 @@ function getNextIndexVertical(event, total, index) {
 function TabList({ activation = "automatic", "aria-label": label, children, className: customClassName, contained = false, fullWidth = false, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait = 200, scrollIntoView, size, ...rest }) {
 	const { activeIndex, selectedIndex, setSelectedIndex, setActiveIndex, dismissable } = React.useContext(TabsContext);
 	const prefix = usePrefix();
+	const containerRef = useRef(null);
 	const ref = useRef(null);
 	const previousButton = useRef(null);
 	const nextButton = useRef(null);
@@ -197,7 +198,7 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 	const hasSecondaryLabelTabs = contained && Children.toArray(children).some((child) => isComponentElement(child, Tab) && typeof child.props.secondaryLabel !== "undefined");
 	const isLg = useMatchMedia(lgMediaQuery);
 	const distributeWidth = fullWidth && contained && isLg && React.Children.toArray(children).length < 9;
-	const className = classNames(`${prefix}--tabs`, {
+	const className = cx(`${prefix}--tabs`, {
 		[`${prefix}--tabs--contained`]: contained,
 		[`${prefix}--tabs--light`]: light,
 		[`${prefix}--tabs__icon--default`]: iconSize === "default",
@@ -209,15 +210,28 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 		[`${prefix}--tabs--dismissable`]: dismissable
 	}, customClassName);
 	const [isNextButtonVisible, setIsNextButtonVisible] = useState(ref.current ? scrollLeft + ref.current.clientWidth < ref.current.scrollWidth : false);
+	const updateOverflowState = useCallback(() => {
+		if (!containerRef.current || !ref.current) return;
+		const hasOverflow = ref.current.scrollWidth > containerRef.current.clientWidth + 1;
+		setIsNextButtonVisible(hasOverflow && ref.current.scrollLeft + ref.current.clientWidth + 1 < ref.current.scrollWidth);
+		setIsScrollable(hasOverflow);
+	}, []);
 	const isPreviousButtonVisible = ref.current ? isScrollable && scrollLeft > 0 : false;
-	const previousButtonClasses = classNames(`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--previous`, { [`${prefix}--tab--overflow-nav-button--hidden`]: !isPreviousButtonVisible });
-	const nextButtonClasses = classNames(`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--next`, { [`${prefix}--tab--overflow-nav-button--hidden`]: !isNextButtonVisible });
+	const previousButtonClasses = cx(`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--previous`, { [`${prefix}--tab--overflow-nav-button--hidden`]: !isPreviousButtonVisible });
+	const nextButtonClasses = cx(`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--next`, { [`${prefix}--tab--overflow-nav-button--hidden`]: !isNextButtonVisible });
 	const tabs = useRef([]);
-	const debouncedOnScroll = useCallback(() => {
-		debounce(() => {
-			if (ref.current) setScrollLeft(ref.current.scrollLeft);
-		}, scrollDebounceWait)();
-	}, [scrollDebounceWait]);
+	const debouncedUpdateScroll = useMemo(() => debounce(() => {
+		if (ref.current) setScrollLeft(ref.current.scrollLeft);
+	}, scrollDebounceWait), [scrollDebounceWait]);
+	useEffect(() => {
+		return () => {
+			debouncedUpdateScroll.cancel();
+		};
+	}, [debouncedUpdateScroll]);
+	const handleScroll = useCallback(() => {
+		updateOverflowState();
+		debouncedUpdateScroll();
+	}, [debouncedUpdateScroll, updateOverflowState]);
 	function onKeyDown(event) {
 		if (matches(event, [
 			ArrowRight$1,
@@ -263,12 +277,11 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 		});
 	}, []);
 	useEffect(() => {
-		setIsNextButtonVisible(ref.current ? scrollLeft + ref.current.clientWidth + 1 < ref.current.scrollWidth : false);
-		if (dismissable && ref.current) setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
+		updateOverflowState();
 	}, [
 		children,
-		dismissable,
-		scrollLeft
+		scrollLeft,
+		updateOverflowState
 	]);
 	useEffect(() => {
 		if (tabs.current[selectedIndex]?.disabled) {
@@ -282,17 +295,15 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 		}
 	}, []);
 	useIsomorphicEffect(() => {
-		if (ref.current) setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
-		function handler() {
-			if (ref.current) setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
-		}
-		const debouncedHandler = debounce(handler, 200);
-		window.addEventListener("resize", debouncedHandler);
+		const element = containerRef.current;
+		if (!element) return;
+		updateOverflowState();
+		const resizeObserver = new ResizeObserver(updateOverflowState);
+		resizeObserver.observe(element);
 		return () => {
-			debouncedHandler.cancel();
-			window.removeEventListener("resize", debouncedHandler);
+			resizeObserver.disconnect();
 		};
-	}, []);
+	}, [updateOverflowState]);
 	useIsomorphicEffect(() => {
 		if (scrollLeft !== null && ref.current) ref.current.scrollLeft = scrollLeft;
 	}, [scrollLeft]);
@@ -324,6 +335,7 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 		}
 	});
 	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
 		className,
 		children: [
 			/* @__PURE__ */ jsx("button", {
@@ -342,7 +354,7 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 				ref,
 				role: "tablist",
 				className: `${prefix}--tab--list`,
-				onScroll: debouncedOnScroll,
+				onScroll: handleScroll,
 				onKeyDown,
 				onBlur: handleBlur,
 				children: Children.map(children, (child, index) => {
@@ -446,7 +458,7 @@ function TabListVertical({ activation = "automatic", "aria-label": label, childr
 	const [isOverflowingBottom, setIsOverflowingBottom] = useState(false);
 	const [isOverflowingTop, setIsOverflowingTop] = useState(false);
 	const isSm = useMatchMedia(smMediaQuery);
-	const className = classNames(`${prefix}--tabs`, `${prefix}--tabs--vertical`, `${prefix}--tabs--contained`, { [`${prefix}--layout--size-${size}`]: size }, customClassName);
+	const className = cx(`${prefix}--tabs`, `${prefix}--tabs--vertical`, `${prefix}--tabs--contained`, { [`${prefix}--layout--size-${size}`]: size }, customClassName);
 	const tabs = useRef([]);
 	function onKeyDown(event) {
 		if (matches(event, [
@@ -623,7 +635,7 @@ const Tab = forwardRef(({ as = "button", children, className: customClassName, d
 		setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
 		return element.offsetHeight < element.scrollHeight;
 	};
-	const className = classNames(`${prefix}--tabs__nav-item`, `${prefix}--tabs__nav-link`, {
+	const className = cx(`${prefix}--tabs__nav-item`, `${prefix}--tabs__nav-link`, {
 		[`${prefix}--tabs__nav-item--selected`]: selectedIndex === index,
 		[`${prefix}--tabs__nav-item--disabled`]: disabled,
 		[`${prefix}--tabs__nav-item--hover-off`]: ignoreHover
@@ -679,7 +691,7 @@ const Tab = forwardRef(({ as = "button", children, className: customClassName, d
 		onKeyDown?.(event);
 	};
 	const DismissIcon = /* @__PURE__ */ jsx("div", {
-		className: classNames({
+		className: cx({
 			[`${prefix}--tabs__nav-item--close`]: dismissable,
 			[`${prefix}--tabs__nav-item--close--hidden`]: !dismissable
 		}),
@@ -689,7 +701,7 @@ const Tab = forwardRef(({ as = "button", children, className: customClassName, d
 			"aria-disabled": disabled,
 			"aria-hidden": selectedIndex === index && dismissable ? "false" : "true",
 			disabled,
-			className: classNames({
+			className: cx({
 				[`${prefix}--tabs__nav-item--close-icon`]: dismissable,
 				[`${prefix}--visually-hidden`]: !dismissable,
 				[`${prefix}--tabs__nav-item--close-icon--selected`]: selectedIndex === index,
@@ -776,7 +788,7 @@ const Tab = forwardRef(({ as = "button", children, className: customClassName, d
 						children
 					}),
 					!dismissable && Icon && /* @__PURE__ */ jsx("div", {
-						className: classNames(`${prefix}--tabs__nav-item--icon`, { [`${prefix}--visually-hidden`]: !hasIcon }),
+						className: cx(`${prefix}--tabs__nav-item--icon`, { [`${prefix}--visually-hidden`]: !hasIcon }),
 						children: !dismissable && Icon && /* @__PURE__ */ jsx(Icon, { size: 16 })
 					})
 				]
@@ -840,7 +852,7 @@ const IconTab = React.forwardRef(({ badgeIndicator, children, className: customC
 	const prefix = usePrefix();
 	const value = useMemo(() => ({ badgeIndicator }), [badgeIndicator]);
 	const hasSize20 = isValidElement(children) && (children.props.size === 20 || children.props.size === "20");
-	const classNames$1 = classNames(`${prefix}--tabs__nav-item--icon-only`, customClassName, { [`${prefix}--tabs__nav-item--icon-only__20`]: hasSize20 });
+	const classNames = cx(`${prefix}--tabs__nav-item--icon-only`, customClassName, { [`${prefix}--tabs__nav-item--icon-only__20`]: hasSize20 });
 	return /* @__PURE__ */ jsx(IconTabContext.Provider, {
 		value,
 		children: /* @__PURE__ */ jsx(Tooltip, {
@@ -851,7 +863,7 @@ const IconTab = React.forwardRef(({ badgeIndicator, children, className: customC
 			label,
 			leaveDelayMs,
 			children: /* @__PURE__ */ jsx(Tab, {
-				className: classNames$1,
+				className: classNames,
 				ref,
 				...rest,
 				children
@@ -899,7 +911,7 @@ const TabPanel = React.forwardRef(({ children, className: customClassName, ...re
 	const index = React.useContext(TabPanelContext);
 	const id = `${baseId}-tabpanel-${index}`;
 	const tabId = `${baseId}-tab-${index}`;
-	const className = classNames(`${prefix}--tab-content`, customClassName);
+	const className = cx(`${prefix}--tab-content`, customClassName);
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
 		"aria-labelledby": tabId,

package/es/components/Tag/DismissibleTag.js

@@ -16,8 +16,8 @@ import { AILabel } from "../AILabel/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import { isEllipsisActive } from "./isEllipsisActive.js";
 import Tag, { SIZES, TYPES } from "./Tag.js";
-import classNames from "classnames";
 import { cloneElement, forwardRef, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@carbon/icons-react";
@@ -33,7 +33,7 @@ const DismissibleTag = forwardRef(({ className, decorator, disabled, id, renderI
 	const tagLabelRef = useRef(null);
 	const generatedTagId = useId();
 	const tagId = id ?? `tag-${generatedTagId}`;
-	const tagClasses = classNames(`${prefix}--tag--filter`, className);
+	const tagClasses = cx(`${prefix}--tag--filter`, className);
 	const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
 	useIsomorphicEffect(() => {
 		const newElement = tagLabelRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
@@ -51,7 +51,7 @@ const DismissibleTag = forwardRef(({ className, decorator, disabled, id, renderI
 		size: "sm",
 		kind: "inline"
 	}) : candidate;
-	const tooltipClasses = classNames(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
+	const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
 	const { onClick, ...otherProps } = other;
 	const dismissActionLabel = isEllipsisApplied ? dismissTooltipLabel : title;
 	return /* @__PURE__ */ jsx(Tag, {
@@ -166,5 +166,6 @@ DismissibleTag.propTypes = {
 	*/
 	type: PropTypes.oneOf(Object.keys(TYPES))
 };
+Object.keys(TYPES);
 //#endregion
 export { DismissibleTag as default };

package/es/components/Tag/OperationalTag.js

@@ -13,8 +13,8 @@ import { Tooltip } from "../Tooltip/Tooltip.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import { isEllipsisActive } from "./isEllipsisActive.js";
 import Tag, { SIZES } from "./Tag.js";
-import classNames from "classnames";
 import { forwardRef, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Tag/OperationalTag.tsx
@@ -41,13 +41,13 @@ const OperationalTag = forwardRef(({ className, disabled, id, renderIcon, size,
 	const tagRef = useRef(null);
 	const generatedTagId = useId();
 	const tagId = id ?? `tag-${generatedTagId}`;
-	const tagClasses = classNames(`${prefix}--tag--operational`, className);
+	const tagClasses = cx(`${prefix}--tag--operational`, className);
 	const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
 	useIsomorphicEffect(() => {
 		const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
 		setIsEllipsisApplied(isEllipsisActive(newElement));
 	}, [prefix, tagRef]);
-	const tooltipClasses = classNames(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
+	const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
 	const combinedRef = mergeRefs(tagRef, forwardRef);
 	if (isEllipsisApplied) return /* @__PURE__ */ jsx(Tooltip, {
 		label: text,
@@ -119,5 +119,6 @@ OperationalTag.propTypes = {
 	*/
 	type: PropTypes.oneOf(Object.keys(TYPES))
 };
+Object.keys(TYPES);
 //#endregion
 export { OperationalTag as default };

package/es/components/Tag/SelectableTag.js

@@ -14,8 +14,8 @@ import { mergeRefs } from "../../tools/mergeRefs.js";
 import { useControllableState } from "../../internal/useControllableState.js";
 import { isEllipsisActive } from "./isEllipsisActive.js";
 import Tag, { SIZES } from "./Tag.js";
-import classNames from "classnames";
 import { forwardRef, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Tag/SelectableTag.tsx
@@ -35,13 +35,13 @@ const SelectableTag = forwardRef(({ className, disabled, id, renderIcon, onChang
 		onChange,
 		defaultValue: defaultSelected
 	});
-	const tagClasses = classNames(`${prefix}--tag--selectable`, className, { [`${prefix}--tag--selectable-selected`]: selectedTag });
+	const tagClasses = cx(`${prefix}--tag--selectable`, className, { [`${prefix}--tag--selectable-selected`]: selectedTag });
 	const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
 	useIsomorphicEffect(() => {
 		const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
 		setIsEllipsisApplied(isEllipsisActive(newElement));
 	}, [prefix, tagRef]);
-	const tooltipClasses = classNames(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
+	const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
 	const combinedRef = mergeRefs(tagRef, forwardRef);
 	const handleClick = (e) => {
 		setSelectedTag(!selectedTag);

package/es/components/Tag/Tag.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/Tag/Tag.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx } from "react/jsx-runtime";
 function TagSkeleton({ className, size, ...rest }) {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx("span", {
-		className: classNames(`${prefix}--tag`, `${prefix}--skeleton`, className, {
+		className: cx(`${prefix}--tag`, `${prefix}--skeleton`, className, {
 			[`${prefix}--tag--${size}`]: size,
 			[`${prefix}--layout--size-${size}`]: size
 		}),
@@ -39,4 +39,4 @@ TagSkeleton.propTypes = {
 	size: PropTypes.oneOf(["sm"])
 };
 //#endregion
-export { TagSkeleton as default };
+export { TagSkeleton, TagSkeleton as default };

package/es/components/Tag/Tag.js

@@ -15,8 +15,8 @@ import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { DefinitionTooltip } from "../Tooltip/DefinitionTooltip.js";
 import { AILabel } from "../AILabel/index.js";
 import { isEllipsisActive } from "./isEllipsisActive.js";
-import classNames from "classnames";
 import React, { cloneElement, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@carbon/icons-react";
@@ -64,7 +64,7 @@ const Tag = React.forwardRef(({ children, className, decorator, id, type, filter
 		`${prefix}--tag--filter`,
 		`${prefix}--tag--operational`
 	].some((el) => className?.includes(el));
-	const tagClasses = classNames(`${prefix}--tag`, className, {
+	const tagClasses = cx(`${prefix}--tag`, className, {
 		[`${prefix}--tag--disabled`]: disabled,
 		[`${prefix}--tag--filter`]: filter,
 		[`${prefix}--tag--${size}`]: size,
@@ -111,7 +111,7 @@ const Tag = React.forwardRef(({ children, className, decorator, id, type, filter
 		]
 	});
 	const ComponentTag = BaseComponent ?? (other.onClick || className?.includes(`${prefix}--tag--operational`) ? "button" : "div");
-	const labelClasses = classNames({ [`${prefix}--tag__label`]: !isInteractiveTag });
+	const labelClasses = cx({ [`${prefix}--tag__label`]: !isInteractiveTag });
 	return /* @__PURE__ */ jsxs(ComponentTag, {
 		ref,
 		disabled,
@@ -201,5 +201,6 @@ Tag.propTypes = {
 	*/
 	type: PropTypes.oneOf(Object.keys(TYPES))
 };
+Object.keys(TYPES);
 //#endregion
 export { SIZES, TYPES, Tag as default };

package/es/components/TextArea/TextArea.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/TextArea/TextArea.Skeleton.tsx
@@ -21,7 +21,7 @@ const TextAreaSkeleton = (props) => {
 	const { className, hideLabel, ...rest } = props;
 	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}--skeleton ${prefix}--text-area` })]
 	});
@@ -37,4 +37,4 @@ TextAreaSkeleton.propTypes = {
 	hideLabel: PropTypes.bool
 };
 //#endregion
-export { TextAreaSkeleton as default };
+export { TextAreaSkeleton, TextAreaSkeleton as default };

package/es/components/TextArea/TextArea.js

@@ -5,11 +5,11 @@
  * 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 useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
-import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
@@ -17,8 +17,8 @@ import { hasHelperText } from "../../internal/hasHelperText.js";
 import { AILabel } from "../AILabel/index.js";
 import { FormContext } from "../FluidForm/FormContext.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";
 import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -137,28 +137,28 @@ const TextArea = forwardRef((props, forwardRef) => {
 			if (!disabled && onClick) onClick(evt);
 		}
 	};
-	const formItemClasses = classNames(`${prefix}--form-item`, className);
-	const textAreaWrapperClasses = classNames(`${prefix}--text-area__wrapper`, {
+	const formItemClasses = cx(`${prefix}--form-item`, className);
+	const textAreaWrapperClasses = cx(`${prefix}--text-area__wrapper`, {
 		[`${prefix}--text-area__wrapper--cols`]: other.cols,
 		[`${prefix}--text-area__wrapper--readonly`]: other.readOnly,
 		[`${prefix}--text-area__wrapper--warn`]: warn,
 		[`${prefix}--text-area__wrapper--slug`]: slug,
 		[`${prefix}--text-area__wrapper--decorator`]: decorator
 	});
-	const labelClasses = classNames(`${prefix}--label`, {
+	const labelClasses = cx(`${prefix}--label`, {
 		[`${prefix}--visually-hidden`]: hideLabel && !isFluid,
 		[`${prefix}--label--disabled`]: disabled
 	});
-	const textareaClasses = classNames(`${prefix}--text-area`, {
+	const textareaClasses = cx(`${prefix}--text-area`, {
 		[`${prefix}--text-area--light`]: light,
 		[`${prefix}--text-area--invalid`]: invalid,
 		[`${prefix}--text-area--warn`]: warn
 	});
-	const counterClasses = classNames(`${prefix}--label`, {
+	const counterClasses = cx(`${prefix}--label`, {
 		[`${prefix}--label--disabled`]: disabled,
 		[`${prefix}--text-area__label-counter`]: true
 	});
-	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(Text, {
 		as: "label",
 		htmlFor: id,

package/es/components/TextArea/index.js

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

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