@carbon/react 1.112.0-rc.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

@@ -12,13 +12,13 @@ import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import DatePickerInput_default from "../DatePickerInput/index.js";
 import { appendToPlugin } from "./plugins/appendToPlugin.js";
-import fixEventsPlugin from "./plugins/fixEventsPlugin.js";
+import { fixEventsPlugin } from "./plugins/fixEventsPlugin.js";
 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;
@@ -283,7 +283,6 @@ const DatePicker = forwardRef((props, ref) => {
 				fixEventsPlugin({
 					inputFrom: startInputField.current,
 					inputTo: endInputField.current,
-					lastStartValue,
 					container: wrapperRef.current
 				})
 			],

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/DatePicker/plugins/fixEventsPlugin.d.ts

@@ -8,11 +8,8 @@ import type { Plugin } from 'flatpickr/dist/types/options';
 interface FixEventsPluginConfig {
     inputFrom: HTMLInputElement;
     inputTo?: HTMLInputElement | null;
-    lastStartValue: {
-        current: string;
-    };
     container?: HTMLElement | null;
 }
 type FixEventsPlugin = (config: FixEventsPluginConfig) => Plugin;
-declare const fixEventsPlugin: FixEventsPlugin;
-export default fixEventsPlugin;
+export declare const fixEventsPlugin: FixEventsPlugin;
+export {};

package/es/components/DatePicker/plugins/fixEventsPlugin.js

@@ -9,14 +9,13 @@ import { ArrowDown, Enter } from "../../../internal/keyboard/keys.js";
 import { match } from "../../../internal/keyboard/match.js";
 //#region src/components/DatePicker/plugins/fixEventsPlugin.ts
 const fixEventsPlugin = (config) => (fp) => {
-	const { inputFrom, inputTo, lastStartValue, container } = config;
+	const { inputFrom, inputTo, container } = config;
 	let mouseDownInside = false;
-	const getEventPath = (event) => typeof event.composedPath === "function" ? event.composedPath() : [];
 	const isEventInside = (event) => {
-		const path = getEventPath(event);
+		const path = event.composedPath();
 		const { target } = event;
 		if (!(target instanceof Node)) return false;
-		return Boolean(container && (path.includes(container) || container.contains(target)) || fp.calendarContainer && (path.includes(fp.calendarContainer) || fp.calendarContainer.contains(target)) || inputFrom && (path.includes(inputFrom) || inputFrom.contains(target)) || inputTo && (path.includes(inputTo) || inputTo.contains(target)));
+		return Boolean(container && (path.includes(container) || container.contains(target)) || path.includes(fp.calendarContainer) || fp.calendarContainer.contains(target) || inputFrom && (path.includes(inputFrom) || inputFrom.contains(target)) || inputTo && (path.includes(inputTo) || inputTo.contains(target)));
 	};
 	/**
 	* Handles `click` outside to close calendar
@@ -62,6 +61,7 @@ const fixEventsPlugin = (config) => (fp) => {
 		}
 	};
 	const parseDateWithFormat = (dateStr) => fp.parseDate(dateStr, fp.config.dateFormat);
+	const isValidDate = (date) => date?.toString() !== "Invalid Date";
 	/**
 	* Handles `blur` event.
 	*
@@ -78,16 +78,9 @@ const fixEventsPlugin = (config) => (fp) => {
 			const currentValueToDate = withoutTime(parseDateWithFormat(inputTo.value));
 			if (selectedToDate && currentValueToDate && selectedToDate !== currentValueToDate) fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
 		}
-		const isValidDate = (date) => date?.toString() !== "Invalid Date";
 		if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
 			if (isValidDate(parseDateWithFormat(inputTo.value))) fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
 		}
-		if (inputTo === target && !inputFrom.value && lastStartValue.current) {
-			if (isValidDate(parseDateWithFormat(lastStartValue.current))) {
-				inputFrom.value = lastStartValue.current;
-				if (inputTo.value) fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
-			}
-		}
 	};
 	/**
 	* Releases event listeners used in this Flatpickr plugin.
@@ -128,4 +121,4 @@ const fixEventsPlugin = (config) => (fp) => {
 	};
 };
 //#endregion
-export { fixEventsPlugin as default };
+export { fixEventsPlugin };

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/FeatureFlags/index.d.ts

@@ -9,6 +9,7 @@ import { type ReactNode } from 'react';
 export interface FeatureFlagsProps {
     children?: ReactNode;
     flags?: Record<string, boolean>;
+    enableV12Release?: boolean;
     enableV12TileDefaultIcons?: boolean;
     enableV12TileRadioIcons?: boolean;
     enableV12Overflowmenu?: boolean;
@@ -26,13 +27,14 @@ export interface FeatureFlagsProps {
  * a feature flag is enabled or disabled in a given React tree
  */
 export declare const FeatureFlags: {
-    ({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence, }: FeatureFlagsProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, flags, enableV12Release, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence, }: FeatureFlagsProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Provide the feature flags to enabled or disabled in the current Rea,ct tree
          */
         flags: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
+        enableV12Release: PropTypes.Requireable<boolean>;
         enableV12TileDefaultIcons: PropTypes.Requireable<boolean>;
         enableV12TileRadioIcons: PropTypes.Requireable<boolean>;
         enableV12Overflowmenu: PropTypes.Requireable<boolean>;