@carbon/react 1.112.0 → 1.113.0

package/es/components/Pagination/experimental/Pagination-story.d.ts

@@ -4,111 +4,146 @@ declare namespace _default {
     export namespace subcomponents {
         export { PageSelector };
     }
-    export let decorators: ((story: any) => import("react/jsx-runtime").JSX.Element)[];
-}
-export default _default;
-export function WithAPageSelector(): import("react/jsx-runtime").JSX.Element;
-export namespace WithAPageSelector {
-    let storyName: string;
-}
-export function WithNoSizerChildInputOrChildSelector(): import("react/jsx-runtime").JSX.Element;
-export namespace WithNoSizerChildInputOrChildSelector {
-    let storyName_1: string;
-    export { storyName_1 as storyName };
-}
-export function Playground(args: any): import("react/jsx-runtime").JSX.Element;
-export namespace Playground {
-    namespace argTypes {
-        namespace className {
-            let control: boolean;
+    export namespace argTypes {
+        namespace backwardText {
+            namespace control {
+                let type: string;
+            }
         }
         namespace children {
             let control_1: boolean;
             export { control_1 as control };
         }
-        namespace id {
+        namespace className {
             let control_2: boolean;
             export { control_2 as control };
         }
-        namespace itemText {
-            let control_3: boolean;
-            export { control_3 as control };
-        }
-        namespace forwardText {
-            export namespace control_4 {
-                let type: string;
-            }
-            export { control_4 as control };
-            export let defaultValue: string;
-        }
         namespace disabled {
-            export namespace control_5 {
+            export namespace control_3 {
                 let type_1: string;
                 export { type_1 as type };
             }
-            export { control_5 as control };
-            let defaultValue_1: string;
-            export { defaultValue_1 as defaultValue };
-        }
-        namespace itemRangeText {
-            let control_6: boolean;
-            export { control_6 as control };
+            export { control_3 as control };
         }
-        namespace itemsPerPageText {
-            export namespace control_7 {
+        namespace forwardText {
+            export namespace control_4 {
                 let type_2: string;
                 export { type_2 as type };
             }
-            export { control_7 as control };
-            let defaultValue_2: string;
-            export { defaultValue_2 as defaultValue };
+            export { control_4 as control };
+        }
+        namespace id {
+            let control_5: boolean;
+            export { control_5 as control };
         }
         namespace initialPage {
-            export namespace control_8 {
+            export namespace control_6 {
                 let type_3: string;
                 export { type_3 as type };
             }
-            export { control_8 as control };
-            let defaultValue_3: number;
-            export { defaultValue_3 as defaultValue };
+            export { control_6 as control };
         }
-        namespace pageSize {
-            export namespace control_9 {
+        namespace itemRangeText {
+            let control_7: boolean;
+            export { control_7 as control };
+        }
+        namespace itemsPerPageText {
+            export namespace control_8 {
                 let type_4: string;
                 export { type_4 as type };
             }
+            export { control_8 as control };
+        }
+        namespace itemText {
+            let control_9: boolean;
             export { control_9 as control };
-            let defaultValue_4: number;
-            export { defaultValue_4 as defaultValue };
         }
-        namespace pageSizes {
-            export namespace control_10 {
+        namespace onChange {
+            let action: string;
+        }
+        namespace pageRangeText {
+            let control_10: boolean;
+            export { control_10 as control };
+        }
+        namespace pageSize {
+            export namespace control_11 {
                 let type_5: string;
                 export { type_5 as type };
             }
-            export { control_10 as control };
-            let defaultValue_5: number[];
-            export { defaultValue_5 as defaultValue };
+            export { control_11 as control };
         }
-        namespace pagesUnknown {
-            export namespace control_11 {
+        namespace pageSizes {
+            export namespace control_12 {
                 let type_6: string;
                 export { type_6 as type };
             }
-            export { control_11 as control };
-            let defaultValue_6: string;
-            export { defaultValue_6 as defaultValue };
+            export { control_12 as control };
         }
-        namespace totalItems {
-            export namespace control_12 {
+        namespace pagesUnknown {
+            export namespace control_13 {
                 let type_7: string;
                 export { type_7 as type };
             }
-            export { control_12 as control };
-            let defaultValue_7: number;
-            export { defaultValue_7 as defaultValue };
+            export { control_13 as control };
+        }
+        namespace pageText {
+            let control_14: boolean;
+            export { control_14 as control };
+        }
+        namespace totalItems {
+            export namespace control_15 {
+                let type_8: string;
+                export { type_8 as type };
+            }
+            export { control_15 as control };
+        }
+    }
+    export let decorators: ((story: any) => import("react/jsx-runtime").JSX.Element)[];
+}
+export default _default;
+export function WithAPageSelector(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace WithAPageSelector {
+    let storyName: string;
+    namespace args {
+        let backwardText_1: string;
+        export { backwardText_1 as backwardText };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
+        let forwardText_1: string;
+        export { forwardText_1 as forwardText };
+        let initialPage_1: number;
+        export { initialPage_1 as initialPage };
+        let itemsPerPageText_1: string;
+        export { itemsPerPageText_1 as itemsPerPageText };
+        let pageSize_1: number;
+        export { pageSize_1 as pageSize };
+        let pageSizes_1: number[];
+        export { pageSizes_1 as pageSizes };
+        let pagesUnknown_1: boolean;
+        export { pagesUnknown_1 as pagesUnknown };
+        let totalItems_1: number;
+        export { totalItems_1 as totalItems };
+    }
+}
+export function WithNoSizerChildInputOrChildSelector(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace WithNoSizerChildInputOrChildSelector {
+    let storyName_1: string;
+    export { storyName_1 as storyName };
+    export namespace args_1 {
+        let pageSizes_2: undefined;
+        export { pageSizes_2 as pageSizes };
+    }
+    export { args_1 as args };
+    export namespace parameters {
+        namespace controls {
+            let exclude: string[];
         }
     }
 }
+export function Playground(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace Playground {
+    export namespace args_2 { }
+    export { args_2 as args };
+}
 import { preview_Pagination as Pagination } from '../../..';
 import { preview_PageSelector as PageSelector } from '../../..';

package/es/components/Pagination/experimental/Pagination.d.ts

@@ -1,4 +1,8 @@
 export default Pagination;
+/**
+ * @deprecated Use the stable `Pagination` component with the `renderPageSelect`
+ * prop instead. `unstable_Pagination` / `preview_Pagination` will be removed in v12.
+ */
 declare function Pagination({ backwardText, children, className, disabled, forwardText, id, initialPage, itemsPerPageText, itemRangeText, itemText, onChange, pageRangeText, pageSize, pageSizes, pageText, pagesUnknown, totalItems, ...other }: {
     [x: string]: any;
     backwardText?: string | undefined;

package/es/components/Pagination/experimental/Pagination.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../../internal/usePrefix.js";
 import { IconButton } from "../../IconButton/index.js";
 import Select_default from "../../Select/index.js";
 import SelectItem_default from "../../SelectItem/index.js";
-import classNames from "classnames";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CaretLeft, CaretRight } from "@carbon/icons-react";
@@ -21,10 +21,17 @@ import { CaretLeft, CaretRight } from "@carbon/icons-react";
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
+/**
+* @deprecated Use the stable `Pagination` component with the `renderPageSelect`
+* prop instead. `unstable_Pagination` / `preview_Pagination` will be removed in v12.
+*/
 function Pagination({ backwardText = "Previous page", children = void 0, className = null, disabled = false, forwardText = "Next page", id = 1, initialPage = 1, itemsPerPageText = "Items per page:", itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`, itemText = (min, max) => `${min}–${max} items`, onChange, pageRangeText = (current, total) => `${current} of ${total} pages`, pageSize = 10, pageSizes = void 0, pageText = (page) => `page ${page}`, pagesUnknown = false, totalItems = void 0, ...other }) {
 	const [currentPage, setCurrentPage] = useState(initialPage);
 	const [currentPageSize, setCurrentPageSize] = useState(pageSize);
 	const prefix = usePrefix();
+	useEffect(() => {
+		console.warn("[Carbon] `unstable_Pagination` / `preview_Pagination` is deprecated and will be removed in v12. Use the stable `Pagination` component with the `renderPageSelect` prop instead.");
+	}, []);
 	const totalPages = totalItems ? Math.max(Math.ceil(totalItems / currentPageSize), 1) : void 0;
 	const backButtonDisabled = disabled || currentPage === 1;
 	const forwardButtonDisabled = disabled || currentPage === totalPages;
@@ -49,7 +56,7 @@ function Pagination({ backwardText = "Previous page", children = void 0, classNa
 	}
 	const namespace = `${prefix}--unstable-pagination`;
 	return /* @__PURE__ */ jsxs("section", {
-		className: classNames(namespace, className),
+		className: cx(namespace, className),
 		...other,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: `${namespace}__left`,
@@ -113,7 +120,7 @@ function Pagination({ backwardText = "Previous page", children = void 0, classNa
 					align: "top",
 					disabled: backButtonDisabled,
 					kind: "ghost",
-					className: classNames(`${namespace}__button`, `${namespace}__button--backward`, { [`${namespace}__button--no-index`]: backButtonDisabled }),
+					className: cx(`${namespace}__button`, `${namespace}__button--backward`, { [`${namespace}__button--no-index`]: backButtonDisabled }),
 					label: backwardText,
 					onClick: () => decrementPage(),
 					children: /* @__PURE__ */ jsx(CaretLeft, {})
@@ -121,7 +128,7 @@ function Pagination({ backwardText = "Previous page", children = void 0, classNa
 					align: "top-right",
 					disabled: forwardButtonDisabled,
 					kind: "ghost",
-					className: classNames(`${namespace}__button`, `${namespace}__button--forward`, { [`${namespace}__button--no-index`]: forwardButtonDisabled }),
+					className: cx(`${namespace}__button`, `${namespace}__button--forward`, { [`${namespace}__button--no-index`]: forwardButtonDisabled }),
 					label: forwardText,
 					onClick: () => incrementPage(),
 					children: /* @__PURE__ */ jsx(CaretRight, {})

package/es/components/PaginationNav/PaginationNav.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { IconButton } from "../IconButton/index.js";
 import { clamp } from "../../internal/clamp.js";
 import { useMatchMedia } from "../../internal/useMatchMedia.js";
-import classNames from "classnames";
 import React, { useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CaretLeft, CaretRight, OverflowMenuHorizontal } from "@carbon/icons-react";
@@ -89,7 +89,7 @@ function PaginationItem({ page, isActive, onClick, translateWithId: t = defaultT
 		className: `${prefix}--pagination-nav__list-item`,
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: classNames(`${prefix}--pagination-nav__page`, { [`${prefix}--pagination-nav__page--active`]: isActive }),
+			className: cx(`${prefix}--pagination-nav__page`, { [`${prefix}--pagination-nav__page--active`]: isActive }),
 			onClick,
 			"data-page": page,
 			"aria-current": isActive ? "page" : void 0,
@@ -207,18 +207,20 @@ const PaginationNav = React.forwardRef(({ className, onChange = () => {}, totalI
 		size
 	]);
 	useEffect(() => {
-		if (pageWouldBeHidden(currentPage)) if (currentPage - (prevPage || 0) > 0) setCuts(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage, itemsDisplayedOnPage - 3));
-		else setCuts(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage, itemsDisplayedOnPage > 4 ? 2 : 1));
+		if (pageWouldBeHidden(currentPage)) if (currentPage - (prevPage || 0) > 0) {
+			const splitPoint = itemsDisplayedOnPage - 3;
+			setCuts(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage, splitPoint));
+		} else setCuts(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage, itemsDisplayedOnPage > 4 ? 2 : 1));
 	}, [currentPage]);
 	useEffect(() => {
 		setIsOverFlowDisabled(disableOverflow);
 	}, [disableOverflow]);
-	const classNames$1 = classNames(`${prefix}--pagination-nav`, className, { [`${prefix}--layout--size-${size}`]: size });
+	const classNames = cx(`${prefix}--pagination-nav`, className, { [`${prefix}--layout--size-${size}`]: size });
 	const backwardButtonDisabled = !loop && currentPage === 0;
 	const forwardButtonDisabled = !loop && currentPage === totalItems - 1;
 	const startOffset = itemsDisplayedOnPage <= 4 && currentPage > 1 ? 0 : 1;
 	return /* @__PURE__ */ jsxs("nav", {
-		className: classNames$1,
+		className: classNames,
 		ref,
 		...rest,
 		children: [/* @__PURE__ */ jsxs("ul", {

package/es/components/Popover/index.js

@@ -6,6 +6,7 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
+import { selectorTabbable } from "../../internal/keyboard/navigation.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
 import { isComponentElement } from "../../internal/utils.js";
@@ -13,8 +14,8 @@ import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { useEvent, useWindowEvent } from "../../internal/useEvent.js";
 import { mapPopoverAlign } from "../../tools/mapPopoverAlign.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
-import classNames from "classnames";
 import React, { forwardRef, useEffect, useMemo, useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { arrow, autoUpdate, flip, hide, offset, useFloating } from "@floating-ui/react";
@@ -72,6 +73,13 @@ const Popover = React.forwardRef(function PopoverRenderFunction({ isTabTip, alig
 			if (isOutsideFloating && !isFocusableWrapper) onRequestClose?.();
 		}
 	});
+	useWindowEvent("keydown", (event) => {
+		if (!open || event.key !== "Escape" || event.defaultPrevented) return;
+		const target = event.target;
+		if (!(target instanceof Element) || target.closest(`.${prefix}--popover-content`) !== refs.floating.current) return;
+		onRequestClose?.();
+		(popover.current?.querySelector(selectorTabbable))?.focus();
+	});
 	useWindowEvent("click", ({ target }) => {
 		if (open && target instanceof Node && !popover.current?.contains(target) && !isTargetInDatePickerInsidePopover(target)) onRequestClose?.();
 	});
@@ -201,7 +209,7 @@ const Popover = React.forwardRef(function PopoverRenderFunction({ isTabTip, alig
 	]);
 	const ref = useMergedRefs([forwardRef, popover]);
 	const currentAlignment = autoAlign && placement !== align ? placement : align;
-	const className = classNames({
+	const className = cx({
 		[`${prefix}--popover-container`]: true,
 		[`${prefix}--popover--caret`]: caret,
 		[`${prefix}--popover--drop-shadow`]: dropShadow,
@@ -231,7 +239,7 @@ const Popover = React.forwardRef(function PopoverRenderFunction({ isTabTip, alig
 		if (React.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
 			const className = (item?.props)?.className;
 			const ref = (item?.props).ref;
-			const tabTipClasses = classNames(`${prefix}--popover--tab-tip__button`, className);
+			const tabTipClasses = cx(`${prefix}--popover--tab-tip__button`, className);
 			return React.cloneElement(item, {
 				className: isTabTip && item?.type === "button" ? tabTipClasses : className || "",
 				ref: (node) => {
@@ -375,17 +383,17 @@ const PopoverContent = forwardRef((props, forwardRef) => {
 		...rest,
 		className: `${prefix}--popover`,
 		children: [/* @__PURE__ */ jsxs("span", {
-			className: classNames(`${prefix}--popover-content`, className),
+			className: cx(`${prefix}--popover-content`, className),
 			ref,
 			children: [children, enableFloatingStyles && /* @__PURE__ */ jsx("span", {
-				className: classNames({
+				className: cx({
 					[`${prefix}--popover-caret`]: true,
 					[`${prefix}--popover--auto-align`]: true
 				}),
 				ref: caretRef
 			})]
 		}), !enableFloatingStyles && /* @__PURE__ */ jsx("span", {
-			className: classNames({ [`${prefix}--popover-caret`]: true }),
+			className: cx({ [`${prefix}--popover-caret`]: true }),
 			ref: caretRef
 		})]
 	});

package/es/components/ProgressBar/ProgressBar.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
-import classNames from "classnames";
 import React, { 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";
@@ -34,12 +34,12 @@ function ProgressBar({ className, helperText, hideLabel, label, max = 100, size
 	if (isError) cappedValue = 0;
 	else if (isFinished) cappedValue = max;
 	const percentage = (cappedValue ?? NaN) / max;
-	const wrapperClasses = classNames(`${prefix}--progress-bar`, `${prefix}--progress-bar--${size}`, `${prefix}--progress-bar--${type}`, {
+	const wrapperClasses = cx(`${prefix}--progress-bar`, `${prefix}--progress-bar--${size}`, `${prefix}--progress-bar--${type}`, {
 		[`${prefix}--progress-bar--indeterminate`]: indeterminate,
 		[`${prefix}--progress-bar--finished`]: isFinished,
 		[`${prefix}--progress-bar--error`]: isError
 	}, className);
-	const labelClasses = classNames(`${prefix}--progress-bar__label`, { [`${prefix}--visually-hidden`]: hideLabel });
+	const labelClasses = cx(`${prefix}--progress-bar__label`, { [`${prefix}--visually-hidden`]: hideLabel });
 	let StatusIcon = null;
 	if (isError) StatusIcon = React.forwardRef((props, ref) => {
 		return /* @__PURE__ */ jsx(ErrorFilled, {

package/es/components/ProgressIndicator/ProgressIndicator.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";
 import { CircleDash } from "@carbon/icons-react";
@@ -35,7 +35,7 @@ function Step() {
 function ProgressIndicatorSkeleton({ className, vertical, ...rest }) {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("ul", {
-		className: classNames(`${prefix}--progress`, `${prefix}--skeleton`, { [`${prefix}--progress--vertical`]: vertical }, className),
+		className: cx(`${prefix}--progress`, `${prefix}--skeleton`, { [`${prefix}--progress--vertical`]: vertical }, className),
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx(Step, {}),
@@ -56,4 +56,4 @@ ProgressIndicatorSkeleton.propTypes = {
 	vertical: PropTypes.bool
 };
 //#endregion
-export { ProgressIndicatorSkeleton as default };
+export { ProgressIndicatorSkeleton, ProgressIndicatorSkeleton as default };

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { Enter, Space } from "../../internal/keyboard/keys.js";
 import { matches } from "../../internal/keyboard/match.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckmarkOutline, CircleDash, Incomplete, Warning } from "@carbon/icons-react";
@@ -39,7 +39,7 @@ const defaultTranslateWithId = (messageId) => {
 function ProgressIndicator({ children, className: customClassName, currentIndex: controlledIndex = 0, onChange, spaceEqually, vertical, ...rest }) {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx("ul", {
-		className: classNames({
+		className: cx({
 			[`${prefix}--progress`]: true,
 			[`${prefix}--progress--vertical`]: vertical,
 			[`${prefix}--progress--space-equal`]: spaceEqually && !vertical,
@@ -98,7 +98,7 @@ ProgressIndicator.propTypes = {
 };
 function ProgressStep({ label, description, className, current, complete, invalid, secondaryLabel, disabled, onClick, translateWithId: t = defaultTranslateWithId, ...rest }) {
 	const prefix = usePrefix();
-	const classes = classNames({
+	const classes = cx({
 		[`${prefix}--progress-step`]: true,
 		[`${prefix}--progress-step--current`]: current,
 		[`${prefix}--progress-step--complete`]: complete,
@@ -126,7 +126,7 @@ function ProgressStep({ label, description, className, current, complete, invali
 		className: classes,
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: classNames(`${prefix}--progress-step-button`, { [`${prefix}--progress-step-button--unclickable`]: !onClick || current }),
+			className: cx(`${prefix}--progress-step-button`, { [`${prefix}--progress-step-button--unclickable`]: !onClick || current }),
 			disabled,
 			"aria-disabled": disabled,
 			tabIndex: disabled ? -1 : 0,

package/es/components/RadioButton/RadioButton.Skeleton.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/RadioButton/RadioButton.Skeleton.tsx
@@ -21,7 +21,7 @@ function RadioButtonSkeleton(props) {
 	const { className, ...rest } = props;
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--radio-button-wrapper`, className),
+		className: cx(`${prefix}--radio-button-wrapper`, className),
 		...rest,
 		children: [/* @__PURE__ */ jsx("div", { className: `${prefix}--radio-button ${prefix}--skeleton` }), /* @__PURE__ */ jsx("span", { className: `${prefix}--radio-button__label ${prefix}--skeleton` })]
 	});
@@ -32,4 +32,4 @@ RadioButtonSkeleton.propTypes = {
 */
 className: PropTypes.string };
 //#endregion
-export { RadioButtonSkeleton as default };
+export { RadioButtonSkeleton, RadioButtonSkeleton as default };

package/es/components/RadioButton/RadioButton.js

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

package/es/components/RadioButton/index.js

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

package/es/components/RadioButtonGroup/RadioButtonGroup.js

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

package/es/components/RadioTile/RadioTile.js

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

package/es/components/RadioTile/index.js

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

package/es/components/Search/Search.Skeleton.js

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