@carbon/react 1.112.0 → 1.113.0

package/es/components/AILabel/index.js

@@ -9,9 +9,9 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { IconButton } from "../IconButton/index.js";
-import Toggletip, { ToggletipActions, ToggletipButton, ToggletipContent } from "../Toggletip/index.js";
-import classNames from "classnames";
+import { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent } from "../Toggletip/index.js";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Undo } from "@carbon/icons-react";
@@ -25,7 +25,7 @@ import { Undo } from "@carbon/icons-react";
 const AILabelContent = ({ className, children }) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx(ToggletipContent, {
-		className: classNames(className, {
+		className: cx(className, {
 			[`${prefix}--ai-label-content`]: true,
 			[`${prefix}--ai-label-content--with-actions`]: false
 		}),
@@ -45,7 +45,7 @@ AILabelContent.propTypes = {
 };
 const AILabelActions = ({ className, children }) => {
 	return /* @__PURE__ */ jsx(ToggletipActions, {
-		className: classNames(className, { [`${usePrefix()}--ai-label-actions`]: true }),
+		className: cx(className, { [`${usePrefix()}--ai-label-actions`]: true }),
 		children
 	});
 };
@@ -63,11 +63,11 @@ AILabelActions.propTypes = {
 const AILabel = React.forwardRef(function AILabel({ aiText = "AI", aiTextLabel, textLabel, align, autoAlign = true, children, className, kind = "default", onRevertClick, revertActive, revertLabel = "Revert to AI input", slugLabel = "Show information", ["aria-label"]: ariaLabel = "Show information", size = "xs", ...rest }, ref) {
 	const prefix = usePrefix();
 	const id = useId("AILabel");
-	const aiLabelClasses = classNames(className, {
+	const aiLabelClasses = cx(className, {
 		[`${prefix}--ai-label`]: true,
 		[`${prefix}--ai-label--revert`]: revertActive
 	});
-	const aiLabelButtonClasses = classNames({
+	const aiLabelButtonClasses = cx({
 		[`${prefix}--ai-label__button`]: true,
 		[`${prefix}--ai-label__button--${size}`]: size,
 		[`${prefix}--ai-label__button--${kind}`]: kind,

package/es/components/AISkeleton/AISkeletonIcon.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import SkeletonIcon from "../SkeletonIcon/SkeletonIcon.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/AISkeleton/AISkeletonIcon.tsx
@@ -20,7 +20,7 @@ import { jsx } from "react/jsx-runtime";
 */
 const AISkeletonIcon = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx(SkeletonIcon, {
-		className: classNames(className, { [`${usePrefix()}--skeleton__icon--ai`]: true }),
+		className: cx(className, { [`${usePrefix()}--skeleton__icon--ai`]: true }),
 		...rest
 	});
 };

package/es/components/AISkeleton/AISkeletonPlaceholder.js

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

package/es/components/AISkeleton/AISkeletonText.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import SkeletonText from "../SkeletonText/SkeletonText.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/AISkeleton/AISkeletonText.tsx
@@ -20,7 +20,7 @@ import { jsx } from "react/jsx-runtime";
 */
 const AISkeletonText = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx(SkeletonText, {
-		className: classNames(className, { [`${usePrefix()}--skeleton__text--ai`]: true }),
+		className: cx(className, { [`${usePrefix()}--skeleton__text--ai`]: true }),
 		...rest
 	});
 };

package/es/components/Accordion/Accordion.Skeleton.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import SkeletonText_default from "../SkeletonText/index.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "@carbon/icons-react";
@@ -21,7 +21,7 @@ import { ChevronRight } from "@carbon/icons-react";
 */
 function AccordionSkeleton({ align = "end", className, count = 4, isFlush, open = true, ordered = false, ...rest }) {
 	const prefix = usePrefix();
-	const classes = classNames(`${prefix}--accordion`, `${prefix}--skeleton`, className, {
+	const classes = cx(`${prefix}--accordion`, `${prefix}--skeleton`, className, {
 		[`${prefix}--accordion--${align}`]: align,
 		[`${prefix}--accordion--flush`]: isFlush && align !== "start"
 	});
@@ -78,4 +78,4 @@ function AccordionSkeletonItem() {
 	});
 }
 //#endregion
-export { AccordionSkeleton as default };
+export { AccordionSkeleton, AccordionSkeleton as default };

package/es/components/Accordion/Accordion.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { AccordionProvider } from "./AccordionProvider.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/Accordion/Accordion.tsx
@@ -20,7 +20,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function Accordion({ align = "end", children, className: customClassName, disabled = false, isFlush = false, ordered = false, size, ...rest }) {
 	const prefix = usePrefix();
-	const className = classNames(`${prefix}--accordion`, customClassName, {
+	const className = cx(`${prefix}--accordion`, customClassName, {
 		[`${prefix}--accordion--${align}`]: align,
 		[`${prefix}--accordion--${size}`]: size,
 		[`${prefix}--layout--size-${size}`]: size,

package/es/components/Accordion/AccordionItem.js

@@ -12,8 +12,8 @@ import { Escape } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
-import classNames from "classnames";
 import React, { useContext, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "@carbon/icons-react";
@@ -35,7 +35,7 @@ function AccordionItem({ children, className: customClassName = "", open = false
 	const disabled = typeof controlledDisabled === "boolean" ? controlledDisabled : accordionState.disabled;
 	const id = useId("accordion-item");
 	const prefix = usePrefix();
-	const className = classNames({
+	const className = cx({
 		[`${prefix}--accordion__item`]: true,
 		[`${prefix}--accordion__item--active`]: isOpen && !disabled,
 		[`${prefix}--accordion__item--disabled`]: disabled,

package/es/components/AspectRatio/AspectRatio.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/AspectRatio/AspectRatio.tsx
@@ -26,7 +26,7 @@ import { jsx } from "react/jsx-runtime";
 const AspectRatio = ({ as: BaseComponent = "div", className: containerClassName, children, ratio = "1x1", ...rest }) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx(BaseComponent, {
-		className: classNames(containerClassName, `${prefix}--aspect-ratio`, `${prefix}--aspect-ratio--${ratio}`),
+		className: cx(containerClassName, `${prefix}--aspect-ratio`, `${prefix}--aspect-ratio--${ratio}`),
 		...rest,
 		children
 	});

package/es/components/BadgeIndicator/index.js

@@ -6,17 +6,17 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import classNames from "classnames";
 import { forwardRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 const BadgeIndicator = forwardRef((props, ref) => {
 	const { className: customClassName, count, ...rest } = props;
 	const prefix = usePrefix();
-	const classNames$1 = classNames(`${prefix}--badge-indicator`, customClassName, { [`${prefix}--badge-indicator--count`]: count });
+	const classNames = cx(`${prefix}--badge-indicator`, customClassName, { [`${prefix}--badge-indicator--count`]: count });
 	const displayCount = count && count > 999 ? "999+" : count;
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames$1,
+		className: classNames,
 		ref,
 		...rest,
 		children: displayCount
@@ -37,4 +37,4 @@ BadgeIndicator.propTypes = {
 	id: PropTypes.string
 };
 //#endregion
-export { BadgeIndicator as default };
+export { BadgeIndicator, BadgeIndicator as default };

package/es/components/Breadcrumb/Breadcrumb.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/Breadcrumb/Breadcrumb.Skeleton.tsx
@@ -30,7 +30,7 @@ function Item() {
 function BreadcrumbSkeleton({ className, items = 3, noTrailingSlash, size, ...rest }) {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames({
+		className: cx({
 			[`${prefix}--breadcrumb`]: true,
 			[`${prefix}--skeleton`]: true,
 			[`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash,
@@ -59,4 +59,4 @@ BreadcrumbSkeleton.propTypes = {
 	size: PropTypes.oneOf(["sm", "md"])
 };
 //#endregion
-export { BreadcrumbSkeleton as default };
+export { BreadcrumbSkeleton, BreadcrumbSkeleton as default };

package/es/components/Breadcrumb/Breadcrumb.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import classNames from "classnames";
 import { forwardRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Breadcrumb/Breadcrumb.tsx
@@ -20,7 +20,7 @@ import { jsx } from "react/jsx-runtime";
 const Breadcrumb = forwardRef((props, ref) => {
 	const { "aria-label": ariaLabel, children, className: customClassNameNav, noTrailingSlash, size, ...rest } = props;
 	const prefix = usePrefix();
-	const className = classNames({
+	const className = cx({
 		[`${prefix}--breadcrumb`]: true,
 		[`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash,
 		[`${prefix}--breadcrumb--sm`]: size === "sm"

package/es/components/Breadcrumb/BreadcrumbItem.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import Link_default from "../Link/index.js";
-import classNames from "classnames";
 import React, { cloneElement, forwardRef, isValidElement } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 import { OverflowMenuHorizontal } from "@carbon/icons-react";
@@ -23,7 +23,7 @@ import { OverflowMenuHorizontal } from "@carbon/icons-react";
 const BreadcrumbItem = forwardRef((props, ref) => {
 	const { "aria-current": ariaCurrent, children, className: customClassName = "", href, isCurrentPage, ...rest } = props;
 	const prefix = usePrefix();
-	const className = classNames({
+	const className = cx({
 		[`${prefix}--breadcrumb-item`]: true,
 		[`${prefix}--breadcrumb-item--current`]: isCurrentPage && ariaCurrent !== "page",
 		[customClassName]: !!customClassName
@@ -65,7 +65,7 @@ const BreadcrumbItem = forwardRef((props, ref) => {
 		...rest,
 		children: child ? cloneElement(child, {
 			"aria-current": ariaCurrent,
-			className: classNames(`${prefix}--link`, child.props.className)
+			className: cx(`${prefix}--link`, child.props.className)
 		}) : children
 	});
 });

package/es/components/Button/Button.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/Button/Button.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx } from "react/jsx-runtime";
 const ButtonSkeleton = ({ className, small = false, href, size = "lg", ...rest }) => {
 	const prefix = usePrefix();
 	const commonProps = {
-		className: classNames(className, {
+		className: cx(className, {
 			[`${prefix}--skeleton`]: true,
 			[`${prefix}--btn`]: true,
 			[`${prefix}--btn--xs`]: size === "xs",
@@ -72,4 +72,4 @@ ButtonSkeleton.propTypes = {
 	small: PropTypes.bool
 };
 //#endregion
-export { ButtonSkeleton as default };
+export { ButtonSkeleton, ButtonSkeleton as default };

package/es/components/Button/Button.js

@@ -55,10 +55,10 @@ const Button = React.forwardRef((props, ref) => {
 	if (ButtonImageElement && !children && !iconDescription) console.error("Button: renderIcon property specified without also providing an iconDescription property. This may impact accessibility for screen reader users.");
 	const iconOnlyImage = !ButtonImageElement ? null : /* @__PURE__ */ jsx(ButtonImageElement, {});
 	if (!isIconOnlyButton(hasIconOnly, kind)) {
-		const { tooltipAlignment, ...propsWithoutTooltipAlignment } = props;
+		const { autoAlign, tooltipAlignment, tooltipDropShadow, tooltipHighContrast, tooltipPosition, ...propsWithoutIconOnlyTooltipProps } = props;
 		return /* @__PURE__ */ jsx(ButtonBase, {
 			ref,
-			...propsWithoutTooltipAlignment
+			...propsWithoutIconOnlyTooltipProps
 		});
 	} else {
 		let align = void 0;

package/es/components/Button/ButtonBase.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { useId } from "../../internal/useId.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Button/ButtonBase.tsx
 /**
@@ -21,7 +21,7 @@ const ButtonBase = React.forwardRef(function ButtonBase({ as, children, classNam
 	const prefix = usePrefix();
 	const commonProps = {
 		tabIndex,
-		className: classNames(className, {
+		className: cx(className, {
 			[`${prefix}--btn`]: true,
 			[`${prefix}--btn--xs`]: size === "xs" && !isExpressive,
 			[`${prefix}--btn--sm`]: size === "sm" && !isExpressive,

package/es/components/Button/index.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import Button from "./Button.js";
-import "./Button.Skeleton.js";
+import Button, { ButtonKinds, ButtonSizes, ButtonTooltipAlignments, ButtonTooltipPositions } from "./Button.js";
+import { ButtonSkeleton } from "./Button.Skeleton.js";
 //#region src/components/Button/index.ts
 /**
 * Copyright IBM Corp. 2016, 2023
@@ -16,4 +16,4 @@ import "./Button.Skeleton.js";
 */
 var Button_default = Button;
 //#endregion
-export { Button_default as default };
+export { Button, ButtonKinds, ButtonSizes, ButtonSkeleton, ButtonTooltipAlignments, ButtonTooltipPositions, Button_default as default };

package/es/components/ButtonSet/ButtonSet.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
-import classNames from "classnames";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ButtonSet/ButtonSet.tsx
@@ -59,7 +59,7 @@ const ButtonSet = forwardRef((props, ref) => {
 		});
 		setSortedChildren(newSortedChildren);
 	}, [children, isStacked]);
-	const buttonSetClasses = classNames(className, `${prefix}--btn-set`, {
+	const buttonSetClasses = cx(className, `${prefix}--btn-set`, {
 		[`${prefix}--btn-set--stacked`]: isStacked,
 		[`${prefix}--btn-set--fluid`]: fluid
 	});
@@ -69,7 +69,7 @@ const ButtonSet = forwardRef((props, ref) => {
 		ref,
 		children: fluid ? /* @__PURE__ */ jsx("div", {
 			ref: fluidInnerRef,
-			className: classNames(`${prefix}--btn-set__fluid-inner`, { [`${prefix}--btn-set__fluid-inner--auto-stack`]: true }),
+			className: cx(`${prefix}--btn-set__fluid-inner`, { [`${prefix}--btn-set__fluid-inner--auto-stack`]: true }),
 			children: sortedChildren
 		}) : children
 	});

package/es/components/ButtonSet/index.js

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

package/es/components/ChatButton/ChatButton.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/ChatButton/ChatButton.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx } from "react/jsx-runtime";
 const ChatButtonSkeleton = ({ className, size, ...rest }) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(className, `${prefix}--skeleton`, `${prefix}--btn`, `${prefix}--chat-btn`, { [`${prefix}--layout--size-${size}`]: size }),
+		className: cx(className, `${prefix}--skeleton`, `${prefix}--btn`, `${prefix}--chat-btn`, { [`${prefix}--layout--size-${size}`]: size }),
 		...rest
 	});
 };

package/es/components/ChatButton/ChatButton.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import Button_default from "../Button/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/ChatButton/ChatButton.tsx
@@ -20,7 +20,7 @@ import { jsx } from "react/jsx-runtime";
 */
 const ChatButton = React.forwardRef(function ChatButton({ className, children, disabled, isQuickAction, isSelected, kind, renderIcon, size, ...other }, ref) {
 	const prefix = usePrefix();
-	const classNames$1 = classNames(className, {
+	const classNames = cx(className, {
 		[`${prefix}--chat-btn`]: true,
 		[`${prefix}--chat-btn--with-icon`]: renderIcon,
 		[`${prefix}--chat-btn--quick-action`]: isQuickAction,
@@ -40,7 +40,7 @@ const ChatButton = React.forwardRef(function ChatButton({ className, children, d
 	}
 	return /* @__PURE__ */ jsx(Button_default, {
 		disabled,
-		className: classNames$1,
+		className: classNames,
 		kind,
 		ref,
 		size,

package/es/components/Checkbox/Checkbox.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/Checkbox/Checkbox.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx } from "react/jsx-runtime";
 const CheckboxSkeleton = ({ className, ...rest }) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(`${prefix}--form-item`, `${prefix}--checkbox-wrapper`, `${prefix}--checkbox-skeleton`, className),
+		className: cx(`${prefix}--form-item`, `${prefix}--checkbox-wrapper`, `${prefix}--checkbox-skeleton`, className),
 		...rest,
 		children: /* @__PURE__ */ jsx("div", {
 			className: `${prefix}--checkbox-label`,
@@ -34,4 +34,4 @@ CheckboxSkeleton.propTypes = {
 */
 className: PropTypes.string };
 //#endregion
-export { CheckboxSkeleton as default };
+export { CheckboxSkeleton, CheckboxSkeleton as default };

package/es/components/Checkbox/Checkbox.js

@@ -5,17 +5,17 @@
  * 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 { 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 { hasHelperText } from "../../internal/hasHelperText.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { AILabel } from "../AILabel/index.js";
-import classNames from "classnames";
 import React, { cloneElement } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -47,14 +47,14 @@ const Checkbox$1 = React.forwardRef(({ className, decorator, helperText, id, lab
 		className: `${prefix}--form__helper-text`,
 		children: helperText
 	});
-	const wrapperClasses = classNames(`${prefix}--form-item`, `${prefix}--checkbox-wrapper`, className, {
+	const wrapperClasses = cx(`${prefix}--form-item`, `${prefix}--checkbox-wrapper`, className, {
 		[`${prefix}--checkbox-wrapper--readonly`]: readOnly,
 		[`${prefix}--checkbox-wrapper--invalid`]: normalizedProps.invalid,
 		[`${prefix}--checkbox-wrapper--warning`]: showWarning,
 		[`${prefix}--checkbox-wrapper--slug`]: slug,
 		[`${prefix}--checkbox-wrapper--decorator`]: decorator
 	});
-	const innerLabelClasses = classNames(`${prefix}--checkbox-label-text`, { [`${prefix}--visually-hidden`]: hideLabel });
+	const innerLabelClasses = cx(`${prefix}--checkbox-label-text`, { [`${prefix}--visually-hidden`]: hideLabel });
 	const candidate = slug ?? decorator;
 	const normalizedDecorator = isComponentElement(candidate, AILabel) ? cloneElement(candidate, { size: candidate.props.kind === "inline" ? "md" : "mini" }) : candidate;
 	return /* @__PURE__ */ jsxs("div", {

package/es/components/Checkbox/index.js

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

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -13,8 +13,8 @@ import { hasHelperText } from "../../internal/hasHelperText.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { AILabel } from "../AILabel/index.js";
 import Checkbox$1 from "../Checkbox/Checkbox.js";
-import classNames from "classnames";
 import { Children, cloneElement } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -46,7 +46,7 @@ const CheckboxGroup = ({ children, className, decorator, helperText, invalid, in
 		className: `${prefix}--form__helper-text`,
 		children: helperText
 	});
-	const fieldsetClasses = classNames(`${prefix}--checkbox-group`, className, {
+	const fieldsetClasses = cx(`${prefix}--checkbox-group`, className, {
 		[`${prefix}--checkbox-group--${orientation}`]: orientation === "horizontal",
 		[`${prefix}--checkbox-group--readonly`]: readOnly,
 		[`${prefix}--checkbox-group--invalid`]: normalizedProps.invalid,

package/es/components/CodeSnippet/CodeSnippet.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/CodeSnippet/CodeSnippet.Skeleton.tsx
@@ -19,7 +19,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 function CodeSnippetSkeleton({ className: containerClassName, type = "single", ...rest }) {
 	const prefix = usePrefix();
-	const className = classNames(containerClassName, {
+	const className = cx(containerClassName, {
 		[`${prefix}--snippet`]: true,
 		[`${prefix}--skeleton`]: true,
 		[`${prefix}--snippet--single`]: type === "single",
@@ -57,4 +57,4 @@ CodeSnippetSkeleton.propTypes = {
 	type: PropTypes.oneOf(["single", "multi"])
 };
 //#endregion
-export { CodeSnippetSkeleton as default };
+export { CodeSnippetSkeleton, CodeSnippetSkeleton as default };

package/es/components/CodeSnippet/CodeSnippet.js

@@ -14,8 +14,8 @@ import Button_default from "../Button/index.js";
 import { useResizeObserver } from "../../internal/useResizeObserver.js";
 import Copy_default from "../Copy/index.js";
 import CopyButton_default from "../CopyButton/index.js";
-import classNames from "classnames";
 import { useCallback, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@carbon/icons-react";
@@ -60,7 +60,7 @@ function CodeSnippet({ align = "bottom", autoAlign = false, className, type = "s
 		if (copyText || innerCodeRef?.current) copy(copyText ?? innerCodeRef?.current?.innerText ?? "");
 		if (onClick) onClick(evt);
 	};
-	const codeSnippetClasses = classNames(className, `${prefix}--snippet`, {
+	const codeSnippetClasses = cx(className, `${prefix}--snippet`, {
 		[`${prefix}--snippet--${type}`]: type,
 		[`${prefix}--snippet--disabled`]: type !== "inline" && disabled,
 		[`${prefix}--snippet--expand`]: expandedCode,