@carbon/react 1.112.0 → 1.113.0-rc.0

package/es/components/DataTable/TableSelectAll.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import InlineCheckbox_default from "../InlineCheckbox/index.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/DataTable/TableSelectAll.tsx
@@ -23,7 +23,7 @@ const TableSelectAll = ({ ariaLabel: deprecatedAriaLabel = "Select all rows in t
 	return /* @__PURE__ */ jsx("th", {
 		"aria-live": "off",
 		scope: "col",
-		className: classNames(`${usePrefix()}--table-column-checkbox`, className),
+		className: cx(`${usePrefix()}--table-column-checkbox`, className),
 		children: /* @__PURE__ */ jsx(InlineCheckbox_default, {
 			"aria-label": ariaLabel || deprecatedAriaLabel,
 			checked,

package/es/components/DataTable/TableSelectRow.js

@@ -10,8 +10,8 @@ import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import InlineCheckbox_default from "../InlineCheckbox/index.js";
 import RadioButton_default from "../RadioButton/index.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/DataTable/TableSelectRow.tsx
@@ -39,7 +39,7 @@ const TableSelectRow = ({ ariaLabel: deprecatedAriaLabel, ["aria-label"]: ariaLa
 	};
 	const labelValue = ariaLabel || deprecatedAriaLabel || "";
 	return /* @__PURE__ */ jsx("td", {
-		className: classNames(`${prefix}--table-column-checkbox`, {
+		className: cx(`${prefix}--table-column-checkbox`, {
 			...className && { [className]: true },
 			[`${prefix}--table-column-radio`]: radio
 		}),

package/es/components/DataTable/TableSlugRow.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecateComponent } from "../../prop-types/deprecateComponent.js";
-import classNames from "classnames";
 import { cloneElement, isValidElement, useEffect } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/DataTable/TableSlugRow.tsx
@@ -24,7 +24,7 @@ const TableSlugRow = ({ className, slug }) => {
 	}, []);
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx("td", {
-		className: classNames({
+		className: cx({
 			...className && { [className]: true },
 			[`${prefix}--table-column-slug`]: true,
 			[`${prefix}--table-column-slug--active`]: slug

package/es/components/DataTable/TableToolbar.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
-import classNames from "classnames";
 import { createContext, useContext } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/DataTable/TableToolbar.tsx
@@ -22,7 +22,7 @@ const TableToolbarContext = createContext({});
 const useTableToolbar = () => useContext(TableToolbarContext);
 const TableToolbar = ({ ["aria-label"]: ariaLabel = "data table toolbar", ariaLabel: deprecatedAriaLabel, children, size, ...rest }) => {
 	const prefix = usePrefix();
-	const className = classNames({
+	const className = cx({
 		[`${prefix}--table-toolbar`]: true,
 		[`${prefix}--table-toolbar--${size}`]: size,
 		[`${prefix}--layout--size-${size}`]: size
@@ -64,4 +64,4 @@ TableToolbar.propTypes = {
 	])
 };
 //#endregion
-export { TableToolbar as default, useTableToolbar };
+export { TableToolbarContext, TableToolbar as default, useTableToolbar };

package/es/components/DataTable/TableToolbarMenu.js

@@ -7,9 +7,9 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { useTableToolbar } from "./TableToolbar.js";
-import OverflowMenu from "../OverflowMenu/index.js";
-import classNames from "classnames";
+import { OverflowMenu } from "../OverflowMenu/index.js";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 import { Settings } from "@carbon/icons-react";
@@ -27,9 +27,9 @@ const TableToolbarMenu = ({ className, renderIcon = Settings, iconDescription =
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx(OverflowMenu, {
 		renderIcon,
-		className: classNames(className, `${prefix}--toolbar-action ${prefix}--overflow-menu`),
+		className: cx(className, `${prefix}--toolbar-action ${prefix}--overflow-menu`),
 		iconDescription,
-		menuOptionsClass: classNames(menuOptionsClass, `${prefix}--toolbar-action__menu`),
+		menuOptionsClass: cx(menuOptionsClass, `${prefix}--toolbar-action__menu`),
 		size,
 		flipped: true,
 		...rest,

package/es/components/DataTable/TableToolbarSearch.js

@@ -5,13 +5,13 @@
  * 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 Search_default from "../Search/index.js";
 import { useTableToolbar } from "./TableToolbar.js";
-import classNames from "classnames";
 import { useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/DataTable/TableToolbarSearch.tsx
@@ -51,7 +51,7 @@ const TableToolbarSearch = ({ className, searchContainerClass, onChange: onChang
 	useEffect(() => {
 		if (defaultValue) onChangeProp?.("", defaultValue);
 	}, []);
-	const searchClasses = classNames(className, searchContainerClass, {
+	const searchClasses = cx(className, searchContainerClass, {
 		[`${prefix}--toolbar-search-container-active`]: expanded,
 		[`${prefix}--toolbar-search-container-disabled`]: disabled,
 		[`${prefix}--toolbar-search-container-expandable`]: !persistent,

package/es/components/DataTable/state/sorting.js

@@ -39,7 +39,8 @@ const getNextSortDirection = (prevHeader, currentHeader, prevState) => {
 */
 const getNextSortState = (props, state, { key }) => {
 	const { sortDirection, sortHeaderKey } = state;
-	return getSortedState(props, state, key, getNextSortDirection(key, sortHeaderKey ?? "", sortDirection));
+	const nextSortDirection = getNextSortDirection(key, sortHeaderKey ?? "", sortDirection);
+	return getSortedState(props, state, key, nextSortDirection);
 };
 /**
 * Gets a sort state update.
@@ -64,4 +65,4 @@ const getSortedState = ({ locale, sortRow }, { rowIds, cellsById, initialRowOrde
 	};
 };
 //#endregion
-export { getNextSortState, getSortedState, initialSortState };
+export { getNextSortDirection, getNextSortState, getSortedState, initialSortState };

package/es/components/DataTable/tools/sorting.js

@@ -61,4 +61,4 @@ const defaultSortRow = (cellA, cellB, { sortDirection, sortStates, locale }) =>
 	return compare(cellB, cellA, locale);
 };
 //#endregion
-export { sortRows };
+export { compare, defaultSortRow, sortRows };

package/es/components/DataTableSkeleton/DataTableSkeleton.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/DataTableSkeleton/DataTableSkeleton.tsx
@@ -19,7 +19,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 const DataTableSkeleton = ({ headers, rowCount = 5, columnCount = 5, zebra = false, className, showHeader = true, showToolbar = true, size = "lg", ...rest }) => {
 	const prefix = usePrefix();
-	const dataTableSkeletonClasses = classNames(className, {
+	const dataTableSkeletonClasses = cx(className, {
 		[`${prefix}--skeleton`]: true,
 		[`${prefix}--data-table`]: true,
 		[`${prefix}--data-table--${size}`]: size,

package/es/components/DatePicker/DatePicker.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/DatePicker/DatePicker.Skeleton.tsx
@@ -29,7 +29,7 @@ const DatePickerSkeleton = ({ range, id, hideLabel, className, ...rest }) => {
 	if (range) return /* @__PURE__ */ jsx("div", {
 		className: `${prefix}--form-item`,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: classNames(`${prefix}--date-picker`, `${prefix}--date-picker--range`, `${prefix}--skeleton`, className),
+			className: cx(`${prefix}--date-picker`, `${prefix}--date-picker--range`, `${prefix}--skeleton`, className),
 			...rest,
 			children: [dateInput, dateInput]
 		})
@@ -37,7 +37,7 @@ const DatePickerSkeleton = ({ range, id, hideLabel, className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: `${prefix}--form-item`,
 		children: /* @__PURE__ */ jsx("div", {
-			className: classNames(`${prefix}--date-picker`, `${prefix}--date-picker--short`, `${prefix}--date-picker--simple`, `${prefix}--skeleton`, className),
+			className: cx(`${prefix}--date-picker`, `${prefix}--date-picker--short`, `${prefix}--date-picker--simple`, `${prefix}--skeleton`, className),
 			...rest,
 			children: dateInput
 		})
@@ -62,4 +62,4 @@ DatePickerSkeleton.propTypes = {
 	range: PropTypes.bool
 };
 //#endregion
-export { DatePickerSkeleton as default };
+export { DatePickerSkeleton, DatePickerSkeleton as default };

package/es/components/DatePicker/DatePicker.js

@@ -17,8 +17,8 @@ import { isEmptyDateValue } from "./utils.js";
 import { rangePlugin } from "./plugins/rangePlugin.js";
 import { useSavedCallback } from "../../internal/useSavedCallback.js";
 import { SUPPORTED_LOCALES } from "./DatePickerLocales.js";
-import classNames from "classnames";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import flatpickr from "flatpickr";
@@ -166,7 +166,7 @@ const DatePicker = forwardRef((props, ref) => {
 	const savedOnChange = useSavedCallback(onChange);
 	const savedOnOpen = useSavedCallback(onOpen);
 	const wrapperRef = useRef(null);
-	const datePickerClasses = classNames(`${prefix}--date-picker`, {
+	const datePickerClasses = cx(`${prefix}--date-picker`, {
 		[`${prefix}--date-picker--short`]: short,
 		[`${prefix}--date-picker--light`]: light,
 		[`${prefix}--date-picker--simple`]: datePickerType === "simple",
@@ -174,7 +174,7 @@ const DatePicker = forwardRef((props, ref) => {
 		[`${prefix}--date-picker--range`]: datePickerType === "range",
 		[`${prefix}--date-picker--nolabel`]: datePickerType === "range" && isLabelTextEmpty(children)
 	});
-	const wrapperClasses = classNames(`${prefix}--form-item`, { [String(className)]: className });
+	const wrapperClasses = cx(`${prefix}--form-item`, { [String(className)]: className });
 	const childrenWithProps = React.Children.toArray(children).map((child, index) => {
 		const childInvalid = child.props?.invalid;
 		const childWarn = child.props?.warn;

package/es/components/DatePicker/index.js

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

package/es/components/DatePickerInput/DatePickerInput.js

@@ -5,17 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { warning } from "../../internal/warning.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { useId } from "../../internal/useId.js";
-import { warning } from "../../internal/warning.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { AILabel } from "../AILabel/index.js";
 import { FormContext } from "../FluidForm/FormContext.js";
-import classNames from "classnames";
 import { cloneElement, forwardRef, useContext } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Calendar, WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -57,24 +57,24 @@ const DatePickerInput = forwardRef((props, ref) => {
 		warning(false, "The 'value' prop is not supported on the DatePickerInput component. For DatePicker components with 'datePickerType=\"range\"', please pass the 'value' prop (as an array of dates) to the parent DatePicker component instead.");
 		didWarnAboutDatePickerInputValue = true;
 	}
-	const wrapperClasses = classNames(`${prefix}--date-picker-input__wrapper`, {
+	const wrapperClasses = cx(`${prefix}--date-picker-input__wrapper`, {
 		[`${prefix}--date-picker-input__wrapper--invalid`]: normalizedProps.invalid,
 		[`${prefix}--date-picker-input__wrapper--warn`]: normalizedProps.warn,
 		[`${prefix}--date-picker-input__wrapper--slug`]: slug,
 		[`${prefix}--date-picker-input__wrapper--decorator`]: decorator
 	});
-	const labelClasses = classNames(`${prefix}--label`, {
+	const labelClasses = cx(`${prefix}--label`, {
 		[`${prefix}--visually-hidden`]: hideLabel,
 		[`${prefix}--label--disabled`]: normalizedProps.disabled,
 		[`${prefix}--label--readonly`]: readOnly
 	});
-	const helperTextClasses = classNames(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled });
-	const inputClasses = classNames(`${prefix}--date-picker__input`, {
+	const helperTextClasses = cx(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled });
+	const inputClasses = cx(`${prefix}--date-picker__input`, {
 		[`${prefix}--date-picker__input--${size}`]: size,
 		[`${prefix}--date-picker__input--invalid`]: normalizedProps.invalid,
 		[`${prefix}--date-picker__input--warn`]: normalizedProps.warn
 	});
-	const containerClasses = classNames(`${prefix}--date-picker-container`, {
+	const containerClasses = cx(`${prefix}--date-picker-container`, {
 		[`${prefix}--date-picker--nolabel`]: !labelText,
 		[`${prefix}--date-picker--fluid--invalid`]: isFluid && normalizedProps.invalid,
 		[`${prefix}--date-picker--fluid--warn`]: isFluid && normalizedProps.warn

package/es/components/DatePickerInput/index.js

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

package/es/components/Dialog/Dialog.js

@@ -5,10 +5,10 @@
  * 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 { IconButton } from "../IconButton/index.js";
 import Button_default from "../Button/index.js";
@@ -16,8 +16,8 @@ import ButtonSet_default from "../ButtonSet/index.js";
 import { useResizeObserver } from "../../internal/useResizeObserver.js";
 import { Layer } from "../Layer/index.js";
 import InlineLoading from "../InlineLoading/InlineLoading.js";
-import classNames from "classnames";
 import React, { createContext, useContext, useEffect, 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";
@@ -58,7 +58,7 @@ const Dialog = React.forwardRef(({ children, className, focusAfterCloseRef, moda
 			};
 		}
 	}, [open, focusAfterCloseRef]);
-	const containerClasses = classNames(`${prefix}--dialog-container`);
+	const containerClasses = cx(`${prefix}--dialog-container`);
 	const contextValue = {
 		dialogId,
 		titleId,
@@ -86,7 +86,7 @@ const Dialog = React.forwardRef(({ children, className, focusAfterCloseRef, moda
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("dialog", {
 			...rest,
-			className: classNames(`${prefix}--dialog`, { [`${prefix}--dialog--modal`]: modal }, className),
+			className: cx(`${prefix}--dialog`, { [`${prefix}--dialog--modal`]: modal }, className),
 			ref,
 			onCancel,
 			onClick: handleClick,
@@ -225,7 +225,7 @@ const DialogTitle = React.forwardRef(({ children, className, id, ...rest }, ref)
 	return /* @__PURE__ */ jsx(Text, {
 		as: "h2",
 		id: headingId,
-		className: classNames(`${prefix}--dialog-header__heading`, className),
+		className: cx(`${prefix}--dialog-header__heading`, className),
 		ref,
 		...rest,
 		children
@@ -258,7 +258,7 @@ const DialogSubtitle = React.forwardRef(({ children, className, id, ...rest }, r
 	return /* @__PURE__ */ jsx(Text, {
 		as: "h2",
 		id: labelId,
-		className: classNames(`${prefix}--dialog-header__label`, className),
+		className: cx(`${prefix}--dialog-header__label`, className),
 		ref,
 		...rest,
 		children
@@ -290,7 +290,7 @@ const DialogBody = React.forwardRef(({ children, className, hasScrollingContent,
 	* via `useResizeObserver`, clientHeight and scrollHeight get updated too
 	*/
 	const isScrollable = !!contentRef.current && contentRef?.current?.scrollHeight > contentRef?.current?.clientHeight;
-	const contentClasses = classNames(`${prefix}--dialog-content`, {
+	const contentClasses = cx(`${prefix}--dialog-content`, {
 		[`${prefix}--dialog-scroll-content`]: hasScrollingContent || isScrollable,
 		[`${prefix}--dialog-scroll-content--no-fade`]: height <= 300
 	}, className);
@@ -345,9 +345,9 @@ const DialogFooter = React.forwardRef(({ children, className, onRequestClose = n
 		secondaryButtonRef,
 		isOpen
 	]);
-	const classes = classNames(`${prefix}--dialog-footer`, className, { [`${prefix}--dialog-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2 });
+	const classes = cx(`${prefix}--dialog-footer`, className, { [`${prefix}--dialog-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2 });
 	const loadingActive = loadingStatus !== "inactive";
-	const primaryButtonClass = classNames({ [`${prefix}--btn--loading`]: loadingStatus !== "inactive" });
+	const primaryButtonClass = cx({ [`${prefix}--btn--loading`]: loadingStatus !== "inactive" });
 	const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
 	if (children) return /* @__PURE__ */ jsx(ButtonSet_default, {
 		className: classes,

package/es/components/Dialog/index.js

@@ -19,4 +19,4 @@ var Dialog_exports = /* @__PURE__ */ __exportAll({
 	DialogTitle: () => DialogTitle
 });
 //#endregion
-export { Dialog_exports };
+export { Dialog, DialogBody, DialogCloseButton, DialogControls, DialogFooter, DialogHeader, DialogSubtitle, DialogTitle, Dialog_exports };

package/es/components/Dropdown/Dropdown.Skeleton.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { ListBoxSizePropType } from "../ListBox/ListBoxPropTypes.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/Dropdown/Dropdown.Skeleton.tsx
@@ -21,9 +21,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const DropdownSkeleton = ({ className, size, hideLabel, ...rest }) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(className, `${prefix}--skeleton`, `${prefix}--form-item`),
+		className: cx(className, `${prefix}--skeleton`, `${prefix}--form-item`),
 		...rest,
-		children: [!hideLabel && /* @__PURE__ */ jsx("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ jsx("div", { className: classNames(`${prefix}--skeleton ${prefix}--dropdown`, { [`${prefix}--list-box--${size}`]: size }) })]
+		children: [!hideLabel && /* @__PURE__ */ jsx("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ jsx("div", { className: cx(`${prefix}--skeleton ${prefix}--dropdown`, { [`${prefix}--list-box--${size}`]: size }) })]
 	});
 };
 DropdownSkeleton.propTypes = {
@@ -41,4 +41,4 @@ DropdownSkeleton.propTypes = {
 	size: ListBoxSizePropType
 };
 //#endregion
-export { DropdownSkeleton as default };
+export { DropdownSkeleton, DropdownSkeleton as default };

package/es/components/Dropdown/Dropdown.js

@@ -17,8 +17,8 @@ import { ListBoxSizePropType, ListBoxTypePropType } from "../ListBox/ListBoxProp
 import { FormContext } from "../FluidForm/FormContext.js";
 import ListBox from "../ListBox/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
-import classNames from "classnames";
 import React, { cloneElement, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkmark, WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -142,7 +142,7 @@ const Dropdown = React.forwardRef(({ autoAlign = false, className: containerClas
 		warnText
 	});
 	const [isFocused, setIsFocused] = useState(false);
-	const className = classNames(`${prefix}--dropdown`, {
+	const className = cx(`${prefix}--dropdown`, {
 		[`${prefix}--dropdown--invalid`]: normalizedProps.invalid,
 		[`${prefix}--dropdown--warning`]: normalizedProps.warn,
 		[`${prefix}--dropdown--open`]: isOpen,
@@ -155,12 +155,12 @@ const Dropdown = React.forwardRef(({ autoAlign = false, className: containerClas
 		[`${prefix}--list-box--up`]: direction === "top",
 		[`${prefix}--autoalign`]: autoAlign
 	});
-	const titleClasses = classNames(`${prefix}--label`, {
+	const titleClasses = cx(`${prefix}--label`, {
 		[`${prefix}--label--disabled`]: normalizedProps.disabled,
 		[`${prefix}--visually-hidden`]: hideLabel
 	});
-	const helperClasses = classNames(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled });
-	const wrapperClasses = classNames(`${prefix}--dropdown__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
+	const helperClasses = cx(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled });
+	const wrapperClasses = cx(`${prefix}--dropdown__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
 		[`${prefix}--dropdown__wrapper--inline`]: inline,
 		[`${prefix}--list-box__wrapper--inline`]: inline,
 		[`${prefix}--dropdown__wrapper--inline--invalid`]: inline && normalizedProps.invalid,

package/es/components/Dropdown/index.js

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

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -12,8 +12,8 @@ import { composeEventHandlers } from "../../tools/events.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import { isSearchValuePresent } from "../Search/utils.js";
 import Search_default from "../Search/index.js";
-import classNames from "classnames";
 import { forwardRef, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ExpandableSearch/ExpandableSearch.tsx
 /**
@@ -55,7 +55,7 @@ const ExpandableSearch = forwardRef((props, forwardedRef) => {
 			if (!evt.target?.value && !isExpanded) setExpanded(false);
 		}
 	}
-	const classes = classNames(`${prefix}--search--expandable`, { [`${prefix}--search--expanded`]: expanded }, rest.className);
+	const classes = cx(`${prefix}--search--expandable`, { [`${prefix}--search--expanded`]: expanded }, rest.className);
 	return /* @__PURE__ */ jsx(Search_default, {
 		...rest,
 		defaultValue,

package/es/components/ExpandableSearch/index.js

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

package/es/components/FileUploader/FileUploader.Skeleton.js

@@ -7,9 +7,9 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import SkeletonText_default from "../SkeletonText/index.js";
-import ButtonSkeleton from "../Button/Button.Skeleton.js";
-import classNames from "classnames";
+import { ButtonSkeleton } from "../Button/Button.Skeleton.js";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/FileUploader/FileUploader.Skeleton.tsx
@@ -22,7 +22,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function FileUploaderSkeleton({ className, ...rest }) {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--form-item`, className),
+		className: cx(`${prefix}--form-item`, className),
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx(SkeletonText_default, {
@@ -43,4 +43,4 @@ FileUploaderSkeleton.propTypes = {
 */
 className: PropTypes.string };
 //#endregion
-export { FileUploaderSkeleton as default };
+export { FileUploaderSkeleton, FileUploaderSkeleton as default };

package/es/components/FileUploader/FileUploader.js

@@ -14,8 +14,8 @@ import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { ButtonKinds } from "../Button/Button.js";
 import Filename from "./Filename.js";
 import FileUploaderButton from "./FileUploaderButton.js";
-import classNames from "classnames";
 import React, { forwardRef, useCallback, useImperativeHandle, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/FileUploader/FileUploader.tsx
@@ -35,7 +35,7 @@ const FileUploader = forwardRef(({ accept, buttonKind, buttonLabel, className, d
 	const nodes = [];
 	const createFileItem = useCallback((file) => ({
 		name: file.name,
-		uuid: `${fileUploaderInstanceId}-${Date.now()}-${Array.from(crypto.getRandomValues(new Uint8Array(8))).map((b) => b.toString(36)).join("")}`,
+		uuid: `${fileUploaderInstanceId}-${Date.now()}-${Array.from(crypto.getRandomValues(/* @__PURE__ */ new Uint8Array(8))).map((b) => b.toString(36)).join("")}`,
 		file
 	}), [fileUploaderInstanceId]);
 	/**
@@ -56,7 +56,8 @@ const FileUploader = forwardRef(({ accept, buttonKind, buttonLabel, className, d
 	const handleChange = useCallback((evt) => {
 		evt.stopPropagation();
 		const incomingFiles = Array.from(evt.target.files);
-		const validatedFiles = validateFiles(multiple ? incomingFiles : [incomingFiles[0]]);
+		const filesToValidate = multiple ? incomingFiles : [incomingFiles[0]];
+		const validatedFiles = validateFiles(filesToValidate);
 		if (onAddFiles) onAddFiles(evt, { addedFiles: validatedFiles });
 		const validFiles = validatedFiles.filter((file) => !file.invalidFileType);
 		if (validFiles.length === 0) return;
@@ -84,7 +85,8 @@ const FileUploader = forwardRef(({ accept, buttonKind, buttonLabel, className, d
 			}
 		} else {
 			const filenames = validFiles.map((file) => file.name);
-			setLegacyFileNames(multiple ? [...new Set([...legacyFileNames, ...filenames])] : filenames);
+			const updatedFileNames = multiple ? [.../* @__PURE__ */ new Set([...legacyFileNames, ...filenames])] : filenames;
+			setLegacyFileNames(updatedFileNames);
 			if (onChange) onChange(evt);
 		}
 	}, [
@@ -122,7 +124,8 @@ const FileUploader = forwardRef(({ accept, buttonKind, buttonLabel, className, d
 				if (onChange) onChange(enhancedEvent);
 			} else {
 				const deletedFileName = legacyFileNames[index];
-				setLegacyFileNames(legacyFileNames.filter((filename) => filename !== deletedFileName));
+				const filteredArray = legacyFileNames.filter((filename) => filename !== deletedFileName);
+				setLegacyFileNames(filteredArray);
 				if (onDelete) onDelete(evt);
 			}
 			if (onClick) onClick(evt);
@@ -167,12 +170,12 @@ const FileUploader = forwardRef(({ accept, buttonKind, buttonLabel, className, d
 		fileItems,
 		onChange
 	]);
-	const classes = classNames({
+	const classes = cx({
 		[`${prefix}--form-item`]: true,
 		[className]: className
 	});
-	const getHelperLabelClasses = (baseClass) => classNames(baseClass, { [`${prefix}--label-description--disabled`]: disabled });
-	const getSelectedFileClasses = (file) => classNames(`${prefix}--file__selected-file`, {
+	const getHelperLabelClasses = (baseClass) => cx(baseClass, { [`${prefix}--label-description--disabled`]: disabled });
+	const getSelectedFileClasses = (file) => cx(`${prefix}--file__selected-file`, {
 		[`${prefix}--file__selected-file--md`]: size === "field" || size === "md",
 		[`${prefix}--file__selected-file--sm`]: size === "small" || size === "sm",
 		[`${prefix}--file__selected-file--disabled`]: file.disabled

package/es/components/FileUploader/FileUploaderButton.js

@@ -5,15 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Enter, Space } from "../../internal/keyboard/keys.js";
 import { matches } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
-import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { ButtonKinds } from "../Button/Button.js";
-import classNames from "classnames";
 import { useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/FileUploader/FileUploaderButton.tsx
@@ -29,7 +29,7 @@ function FileUploaderButton({ accept, buttonKind = "primary", className, disable
 	const generatedId = useId();
 	const { current: inputId } = useRef(id || generatedId);
 	const inputNode = useRef(null);
-	const classes = classNames(`${prefix}--btn`, className, {
+	const classes = cx(`${prefix}--btn`, className, {
 		[`${prefix}--btn--${buttonKind}`]: buttonKind,
 		[`${prefix}--btn--disabled`]: disabled,
 		[`${prefix}--btn--md`]: size === "field" || size === "md",