@carbon/react 1.112.0 → 1.113.0-rc.0

package/es/components/Menu/Menu.js

@@ -13,8 +13,8 @@ import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { MenuContext, menuReducer } from "./MenuContext.js";
 import { useLayoutDirection } from "../LayoutDirection/useLayoutDirection.js";
 import { canUseDOM } from "../../internal/environment.js";
-import classNames from "classnames";
 import { forwardRef, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
@@ -184,7 +184,7 @@ const Menu = forwardRef(function Menu({ backgroundToken = "layer", border = fals
 		if (open) handleOpen();
 		else setPosition([-1, -1]);
 	}, [open]);
-	const classNames$1 = classNames(className, `${prefix}--menu`, `${prefix}--menu--${menuSize}`, {
+	const classNames = cx(className, `${prefix}--menu`, `${prefix}--menu--${menuSize}`, {
 		[`${prefix}--menu--box-shadow-top`]: menuAlignment && menuAlignment.slice(0, 3) === "top",
 		[`${prefix}--menu--open`]: open,
 		[`${prefix}--menu--shown`]: open && !legacyAutoalign || position[0] >= 0 && position[1] >= 0,
@@ -198,7 +198,7 @@ const Menu = forwardRef(function Menu({ backgroundToken = "layer", border = fals
 		value: childContext,
 		children: /* @__PURE__ */ jsx("ul", {
 			...rest,
-			className: classNames$1,
+			className: classNames,
 			role: "menu",
 			ref,
 			"aria-label": label,

package/es/components/Menu/MenuItem.js

@@ -16,8 +16,8 @@ import { MenuContext } from "./MenuContext.js";
 import { useLayoutDirection } from "../LayoutDirection/useLayoutDirection.js";
 import { Menu as Menu$1 } from "./Menu.js";
 import { useControllableState } from "../../internal/useControllableState.js";
-import classNames from "classnames";
 import React, { forwardRef, useContext, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CaretLeft, CaretRight, Checkmark } from "@carbon/icons-react";
@@ -112,7 +112,7 @@ const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescr
 		if (pendingKeyboardClick.current && keyboardClickEvent(e)) handleClick(e);
 		pendingKeyboardClick.current = false;
 	}
-	const classNames$1 = classNames(className, `${prefix}--menu-item`, {
+	const classNames = cx(className, `${prefix}--menu-item`, {
 		[`${prefix}--menu-item--disabled`]: isDisabled,
 		[`${prefix}--menu-item--danger`]: isDanger
 	});
@@ -145,7 +145,7 @@ const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescr
 			role: "menuitem",
 			...rest,
 			ref,
-			className: classNames$1,
+			className: classNames,
 			tabIndex: !disabled ? 0 : -1,
 			"aria-disabled": isDisabled ?? void 0,
 			"aria-haspopup": hasChildren ?? void 0,
@@ -249,12 +249,12 @@ const MenuItemSelectable = forwardRef(function MenuItemSelectable({ className, d
 	useEffect(() => {
 		if (!context.state.hasSelectableItems) context.dispatch({ type: "enableSelectableItems" });
 	}, [context.state.hasSelectableItems, context]);
-	const classNames$2 = classNames(className, `${prefix}--menu-item-selectable--selected`);
+	const classNames = cx(className, `${prefix}--menu-item-selectable--selected`);
 	return /* @__PURE__ */ jsx(MenuItem, {
 		...rest,
 		ref: forwardRef,
 		label,
-		className: classNames$2,
+		className: classNames,
 		role: "menuitemcheckbox",
 		"aria-checked": checked,
 		onClick: handleClick
@@ -284,7 +284,7 @@ MenuItemSelectable.propTypes = {
 };
 const MenuItemGroup = forwardRef(function MenuItemGroup({ children, className, label, ...rest }, forwardRef) {
 	return /* @__PURE__ */ jsx("li", {
-		className: classNames(className, `${usePrefix()}--menu-item-group`),
+		className: cx(className, `${usePrefix()}--menu-item-group`),
 		role: "none",
 		ref: forwardRef,
 		children: /* @__PURE__ */ jsx("ul", {
@@ -324,7 +324,7 @@ const MenuItemRadioGroup = forwardRef(function MenuItemRadioGroup({ className, d
 		if (!context.state.hasSelectableItems) context.dispatch({ type: "enableSelectableItems" });
 	}, [context.state.hasSelectableItems, context]);
 	return /* @__PURE__ */ jsx("li", {
-		className: classNames(className, `${prefix}--menu-item-radio-group`),
+		className: cx(className, `${prefix}--menu-item-radio-group`),
 		role: "none",
 		ref: forwardRef,
 		children: /* @__PURE__ */ jsx("ul", {
@@ -373,10 +373,10 @@ MenuItemRadioGroup.propTypes = {
 	selectedItem: PropTypes.any
 };
 const MenuItemDivider = forwardRef(function MenuItemDivider({ className, ...rest }, forwardRef) {
-	const classNames$3 = classNames(className, `${usePrefix()}--menu-item-divider`);
+	const classNames = cx(className, `${usePrefix()}--menu-item-divider`);
 	return /* @__PURE__ */ jsx("li", {
 		...rest,
-		className: classNames$3,
+		className: classNames,
 		role: "separator",
 		ref: forwardRef
 	});

package/es/components/MenuButton/index.js

@@ -13,8 +13,8 @@ import Button_default from "../Button/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import { Menu as Menu$1 } from "../Menu/Menu.js";
 import { useAttachedMenu } from "../../internal/useAttachedMenu.js";
-import classNames from "classnames";
 import { forwardRef, useRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@carbon/icons-react";
@@ -74,9 +74,9 @@ const MenuButton = forwardRef(({ children, className, disabled, kind = defaultBu
 	function handleClick() {
 		if (triggerRef.current) hookOnClick();
 	}
-	const containerClasses = classNames(`${prefix}--menu-button__container`, className);
-	const triggerClasses = classNames(`${prefix}--menu-button__trigger`, { [`${prefix}--menu-button__trigger--open`]: open });
-	const menuClasses = classNames(`${prefix}--menu-button__${menuAlignment}`);
+	const containerClasses = cx(`${prefix}--menu-button__container`, className);
+	const triggerClasses = cx(`${prefix}--menu-button__trigger`, { [`${prefix}--menu-button__trigger--open`]: open });
+	const menuClasses = cx(`${prefix}--menu-button__${menuAlignment}`);
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		ref,

package/es/components/Modal/Modal.js

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { noopFn } from "../../internal/noopFn.js";
+import { warning } from "../../internal/warning.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { Enter, Escape, Tab } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
 import { selectorTabbable } from "../../internal/keyboard/navigation.js";
 import { useId } from "../../internal/useId.js";
-import { noopFn } from "../../internal/noopFn.js";
-import { warning } from "../../internal/warning.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
@@ -32,8 +32,8 @@ import { isTopmostVisibleModal } from "./isTopmostVisibleModal.js";
 import { requiredIfGivenPropIsTruthy } from "../../prop-types/requiredIfGivenPropIsTruthy.js";
 import { usePreviousValue } from "../../internal/usePreviousValue.js";
 import { ModalPresence, ModalPresenceContext, useExclusiveModalPresenceContext } from "./ModalPresence.js";
-import classNames from "classnames";
 import React, { cloneElement, useCallback, useContext, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@carbon/icons-react";
@@ -88,7 +88,7 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 	const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
 	const modalBodyId = `${prefix}--modal-body--${modalInstanceId}`;
 	const modalCloseButtonClass = `${prefix}--modal-close`;
-	const primaryButtonClass = classNames({ [`${prefix}--btn--loading`]: loadingStatus !== "inactive" });
+	const primaryButtonClass = cx({ [`${prefix}--btn--loading`]: loadingStatus !== "inactive" });
 	const loadingActive = loadingStatus !== "inactive";
 	const presenceContext = useContext(ModalPresenceContext);
 	const mergedRefs = useMergedRefs([
@@ -155,7 +155,7 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 	}
 	const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
 	const { height } = useResizeObserver({ ref: contentRef });
-	const modalClasses = classNames(`${prefix}--modal`, {
+	const modalClasses = cx(`${prefix}--modal`, {
 		[`${prefix}--modal-tall`]: !passiveModal,
 		"is-visible": enablePresence || open,
 		[`${prefix}--modal--enable-presence`]: presenceContext?.autoEnablePresence,
@@ -163,7 +163,7 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 		[`${prefix}--modal--slug`]: slug,
 		[`${prefix}--modal--decorator`]: decorator
 	}, className);
-	const containerClasses = classNames(`${prefix}--modal-container`, {
+	const containerClasses = cx(`${prefix}--modal-container`, {
 		[`${prefix}--modal-container--${size}`]: size,
 		[`${prefix}--modal-container--full-width`]: isFullWidth
 	});
@@ -179,11 +179,11 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 		if (diff > 5) setIsScrollable(true);
 		else if (diff < -5) setIsScrollable(false);
 	}, [currentScrollHeight, currentClientHeight]);
-	const contentClasses = classNames(`${prefix}--modal-content`, {
+	const contentClasses = cx(`${prefix}--modal-content`, {
 		[`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
 		[`${prefix}--modal-scroll-content--no-fade`]: height <= 300
 	});
-	const footerClasses = classNames(`${prefix}--modal-footer`, { [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2 });
+	const footerClasses = cx(`${prefix}--modal-footer`, { [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2 });
 	const asStringOrUndefined = (node) => {
 		return typeof node === "string" ? node : void 0;
 	};
@@ -654,4 +654,4 @@ Modal.propTypes = {
 	slug: deprecate(PropTypes.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.")
 };
 //#endregion
-export { Modal as default };
+export { ModalSizes, Modal as default };

package/es/components/Modal/ModalPresence.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { usePresenceContext } from "../../internal/usePresenceContext.js";
+import { PresenceHoldContext, usePresenceContext } from "../../internal/usePresenceContext.js";
 import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Modal/ModalPresence.tsx
@@ -24,7 +24,10 @@ const ModalPresence = ({ open, _presenceId: presenceId, _autoEnablePresence: aut
 	if (!isPresent) return null;
 	return /* @__PURE__ */ jsx(ModalPresenceContext.Provider, {
 		value: contextValue,
-		children
+		children: /* @__PURE__ */ jsx(PresenceHoldContext.Provider, {
+			value: contextValue,
+			children
+		})
 	});
 };
 const ModalPresenceContext = createContext(void 0);

package/es/components/Modal/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import "./ModalPresence.js";
+import { ModalPresence, withModalPresence } from "./ModalPresence.js";
 import Modal from "./Modal.js";
 //#region src/components/Modal/index.ts
 /**
@@ -16,4 +16,4 @@ import Modal from "./Modal.js";
 */
 var Modal_default = Modal;
 //#endregion
-export { Modal_default as default };
+export { Modal, ModalPresence, Modal_default as default, withModalPresence };

package/es/components/ModalWrapper/ModalWrapper.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Escape } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import { noopFn } from "../../internal/noopFn.js";
 import { warning } from "../../internal/warning.js";
+import { Escape } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
 import { ButtonKinds } from "../Button/Button.js";
 import Button_default from "../Button/index.js";
 import Modal_default from "../Modal/index.js";

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -29,8 +29,8 @@ import { sortingPropTypes } from "./MultiSelectPropTypes.js";
 import { isSelectAllItem } from "./tools/isSelectAllItem.js";
 import { defaultCompareItems, defaultSortItems } from "./tools/sorting.js";
 import { useSelection } from "../../internal/Selection.js";
-import classNames from "classnames";
 import { cloneElement, forwardRef, 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 { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -84,8 +84,10 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	const handleSelectAllClick = useCallback(() => {
 		const selectable = nonSelectAllItems.filter((item) => !isItemDisabled(item));
 		const { checked, indeterminate } = selectAllStatus;
-		if (checked || indeterminate) toggleAll(controlledSelectedItems.filter((sel) => !filteredItems.some((e) => isEqual(e, sel))));
-		else {
+		if (checked || indeterminate) {
+			const remainingSelectedItems = controlledSelectedItems.filter((sel) => !filteredItems.some((e) => isEqual(e, sel)));
+			toggleAll(remainingSelectedItems);
+		} else {
 			const toSelect = selectable.filter((e) => !controlledSelectedItems.some((sel) => isEqual(sel, e)));
 			toggleAll([...controlledSelectedItems, ...toSelect]);
 		}
@@ -167,7 +169,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	const inline = type === "inline";
 	const showWarning = normalizedProps.warn;
 	const showHelperText = !normalizedProps.warn && !normalizedProps.invalid;
-	const wrapperClasses = classNames(`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
+	const wrapperClasses = cx(`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
 		[`${prefix}--multi-select__wrapper--inline`]: inline,
 		[`${prefix}--list-box__wrapper--inline`]: inline,
 		[`${prefix}--multi-select__wrapper--inline--invalid`]: inline && normalizedProps.invalid,
@@ -181,16 +183,16 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	const hasHelper = hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
 	const labelId = `${id}-label`;
-	const titleClasses = classNames({
+	const titleClasses = cx({
 		[`${prefix}--label`]: true,
 		[`${prefix}--label--disabled`]: disabled,
 		[`${prefix}--visually-hidden`]: hideLabel
 	});
-	const helperClasses = classNames({
+	const helperClasses = cx({
 		[`${prefix}--form__helper-text`]: true,
 		[`${prefix}--form__helper-text--disabled`]: disabled
 	});
-	const inputClasses = classNames({
+	const inputClasses = cx({
 		[`${prefix}--text-input`]: true,
 		[`${prefix}--text-input--empty`]: !inputValue,
 		[`${prefix}--text-input--light`]: light
@@ -379,7 +381,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	const candidateIsAILabel = isComponentElement(candidate, AILabel);
 	const normalizedDecorator = candidateIsAILabel ? cloneElement(candidate, { size: "mini" }) : candidate;
 	const selectedItemsLength = controlledSelectedItems.filter((item) => !isSelectAllItem(item)).length;
-	const className = classNames(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
+	const className = cx(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
 		[`${prefix}--multi-select--invalid`]: normalizedProps.invalid,
 		[`${prefix}--multi-select--invalid--focused`]: inputFocused && normalizedProps.invalid,
 		[`${prefix}--multi-select--open`]: isOpen,

package/es/components/MultiSelect/MultiSelect.js

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { ArrowDown, Delete, Enter, Escape, Space, Tab } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
-import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
 import { isItemDisabled } from "../../internal/isItemDisabled.js";
@@ -27,8 +27,8 @@ import { sortingPropTypes } from "./MultiSelectPropTypes.js";
 import { isSelectAllItem } from "./tools/isSelectAllItem.js";
 import { defaultCompareItems, defaultSortItems } from "./tools/sorting.js";
 import { useSelection } from "../../internal/Selection.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 { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -171,7 +171,7 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 	const inline = type === "inline";
 	const showWarning = normalizedProps.warn;
 	const showHelperText = !normalizedProps.warn && !normalizedProps.invalid && helperText;
-	const wrapperClasses = classNames(`${prefix}--multi-select__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
+	const wrapperClasses = cx(`${prefix}--multi-select__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
 		[`${prefix}--multi-select__wrapper--inline`]: inline,
 		[`${prefix}--list-box__wrapper--inline`]: inline,
 		[`${prefix}--multi-select__wrapper--inline--invalid`]: inline && normalizedProps.invalid,
@@ -180,14 +180,14 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 		[`${prefix}--list-box__wrapper--slug`]: slug,
 		[`${prefix}--list-box__wrapper--decorator`]: decorator
 	});
-	const titleClasses = classNames(`${prefix}--label`, {
+	const titleClasses = cx(`${prefix}--label`, {
 		[`${prefix}--label--disabled`]: disabled,
 		[`${prefix}--visually-hidden`]: hideLabel
 	});
 	const helperId = !helperText ? void 0 : `multiselect-helper-text-${multiSelectInstanceId}`;
 	const fieldLabelId = `multiselect-field-label-${multiSelectInstanceId}`;
-	const helperClasses = classNames(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
-	const className = classNames(`${prefix}--multi-select`, {
+	const helperClasses = cx(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
+	const className = cx(`${prefix}--multi-select`, {
 		[`${prefix}--multi-select--invalid`]: normalizedProps.invalid,
 		[`${prefix}--multi-select--invalid--focused`]: inputFocused && normalizedProps.invalid,
 		[`${prefix}--multi-select--warning`]: showWarning,
@@ -263,7 +263,7 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 		}
 		return changes;
 	}
-	const multiSelectFieldWrapperClasses = classNames(`${prefix}--list-box__field--wrapper`, { [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused });
+	const multiSelectFieldWrapperClasses = cx(`${prefix}--list-box__field--wrapper`, { [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused });
 	const readOnlyEventHandlers = readOnly ? {
 		onClick: (evt) => {
 			evt.preventDefault();

package/es/components/Notification/Notification.js

@@ -5,22 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { noopFn } from "../../internal/noopFn.js";
+import { warning } from "../../internal/warning.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { Escape, Tab } from "../../internal/keyboard/keys.js";
 import { match, matches } from "../../internal/keyboard/match.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
-import { noopFn } from "../../internal/noopFn.js";
-import { warning } from "../../internal/warning.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { useInteractiveChildrenNeedDescription, useNoInteractiveChildren } from "../../internal/useNoInteractiveChildren.js";
 import Button_default from "../Button/index.js";
 import { wrapFocus, wrapFocusWithoutSentinels } from "../../internal/wrapFocus.js";
-import classNames from "classnames";
 import { useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckmarkFilled, Close, ErrorFilled, InformationFilled, InformationSquareFilled, WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -49,7 +49,7 @@ function useEscapeToClose(ref, callback, override = true) {
 }
 function NotificationActionButton({ children, className: customClassName, onClick, inline, ...rest }) {
 	return /* @__PURE__ */ jsx(Button_default, {
-		className: classNames(customClassName, { [`${usePrefix()}--actionable-notification__action-button`]: true }),
+		className: cx(customClassName, { [`${usePrefix()}--actionable-notification__action-button`]: true }),
 		kind: inline ? "ghost" : "tertiary",
 		onClick,
 		size: "sm",
@@ -77,8 +77,8 @@ NotificationActionButton.propTypes = {
 };
 function NotificationButton({ "aria-label": ariaLabel = "close notification", ariaLabel: deprecatedAriaLabel, className, type = "button", renderIcon: IconTag = Close, name, notificationType = "toast", ...rest }) {
 	const prefix = usePrefix();
-	const buttonClassName = classNames(className, { [`${prefix}--${notificationType}-notification__close-button`]: notificationType });
-	const iconClassName = classNames({ [`${prefix}--${notificationType}-notification__close-icon`]: notificationType });
+	const buttonClassName = cx(className, { [`${prefix}--${notificationType}-notification__close-button`]: notificationType });
+	const iconClassName = cx({ [`${prefix}--${notificationType}-notification__close-icon`]: notificationType });
 	return /* @__PURE__ */ jsx("button", {
 		...rest,
 		type,
@@ -164,7 +164,7 @@ NotificationIcon.propTypes = {
 function ToastNotification({ ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, role = "status", onClose, onCloseButtonClick = noopFn, statusIconDescription, className, children, kind = "error", lowContrast, hideCloseButton = false, timeout = 0, title, caption, subtitle, ...rest }) {
 	const [isOpen, setIsOpen] = useState(true);
 	const prefix = usePrefix();
-	const containerClassName = classNames(className, {
+	const containerClassName = cx(className, {
 		[`${prefix}--toast-notification`]: true,
 		[`${prefix}--toast-notification--low-contrast`]: lowContrast,
 		[`${prefix}--toast-notification--${kind}`]: kind
@@ -313,7 +313,7 @@ ToastNotification.propTypes = {
 function InlineNotification({ ["aria-label"]: ariaLabel, children, title, subtitle, role = "status", onClose, onCloseButtonClick = noopFn, statusIconDescription, className, kind = "error", lowContrast, hideCloseButton = false, ...rest }) {
 	const [isOpen, setIsOpen] = useState(true);
 	const prefix = usePrefix();
-	const containerClassName = classNames(className, {
+	const containerClassName = cx(className, {
 		[`${prefix}--inline-notification`]: true,
 		[`${prefix}--inline-notification--low-contrast`]: lowContrast,
 		[`${prefix}--inline-notification--${kind}`]: kind,
@@ -432,7 +432,7 @@ function ActionableNotification({ actionButtonLabel, ["aria-label"]: ariaLabel,
 	const prefix = usePrefix();
 	const id = useId("actionable-notification");
 	const subtitleId = useId("actionable-notification-subtitle");
-	const containerClassName = classNames(className, {
+	const containerClassName = cx(className, {
 		[`${prefix}--actionable-notification`]: true,
 		[`${prefix}--actionable-notification--toast`]: !inline,
 		[`${prefix}--actionable-notification--low-contrast`]: lowContrast,
@@ -648,7 +648,7 @@ const propMappingFunction = (deprecatedValue) => {
 };
 function Callout({ actionButtonLabel, children, onActionButtonClick, title, titleId, subtitle, statusIconDescription, className, kind = "info", lowContrast, ...rest }) {
 	const prefix = usePrefix();
-	const containerClassName = classNames(className, {
+	const containerClassName = cx(className, {
 		[`${prefix}--actionable-notification`]: true,
 		[`${prefix}--actionable-notification--low-contrast`]: lowContrast,
 		[`${prefix}--actionable-notification--${kind}`]: kind,

package/es/components/NumberInput/NumberInput.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/NumberInput/NumberInput.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function NumberInputSkeleton({ hideLabel, className, size = "md", ...rest }) {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(`${prefix}--form-item`, className),
+		className: cx(`${prefix}--form-item`, className),
 		...rest,
 		children: [!hideLabel && /* @__PURE__ */ jsx("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--number ${prefix}--skeleton ${prefix}--number--${size}` })]
 	});

package/es/components/NumberInput/NumberInput.js

@@ -18,8 +18,8 @@ import { FormContext } from "../FluidForm/FormContext.js";
 import { useControllableState } from "../../internal/useControllableState.js";
 import { clamp } from "../../internal/clamp.js";
 import { NumberFormatOptionsPropType } from "./NumberFormatPropTypes.js";
-import classNames from "classnames";
 import React, { cloneElement, 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 { Add, Subtract } from "@carbon/icons-react";
@@ -150,13 +150,22 @@ const validateNumberSeparators = (input, locale) => {
 	const sign = "[\\-\\u2212]?";
 	const scientific = `([eE][+-]?${digit}+)?`;
 	const usesGrouping = group && (groupSeparator?.trim() === "" ? /[\u00A0\u202F\s]/.test(input) : groupSeparator === "," || groupSeparator === "٬" ? /[,٬]/.test(input) : groupSeparator ? input.includes(groupSeparator) : false);
+	const isIndianLocale = locale === "en-IN" || locale.toLowerCase().endsWith("-in");
 	const scientificMatch = input?.match(/^([^eE]+)([eE][+-]?.*)?$/);
 	const baseNumber = scientificMatch ? scientificMatch[1] : input;
 	let integerPart;
 	if (decimalSeparator === "." || decimalSeparator === "٫") integerPart = baseNumber?.split(/[.,]/)[0];
 	else integerPart = baseNumber?.split(decimalSeparator)[0];
-	if (!(usesGrouping ? new RegExp(`^${sign}(${digit}{1,3}|${digit}{1,3}(${group}${digit}{3})+)$`) : new RegExp(`^${sign}${digit}+$`)).test(integerPart)) return false;
-	return new RegExp(`^${sign}${digit}+` + (usesGrouping ? `(${group}${digit}{3})*` : "") + `(${decimal}${digit}+)?${scientific}$`).test(input);
+	let integerRegex;
+	if (!usesGrouping) integerRegex = new RegExp(`^${sign}${digit}+$`);
+	else if (isIndianLocale) integerRegex = new RegExp(`^${sign}(${digit}{1,3}|${digit}{1,3}${group}${digit}{3}|${digit}{1,2}(${group}${digit}{2})+${group}${digit}{3})$`);
+	else integerRegex = new RegExp(`^${sign}(${digit}{1,3}|${digit}{1,3}(${group}${digit}{3})+)$`);
+	if (!integerRegex.test(integerPart)) return false;
+	let fullRegex;
+	if (!usesGrouping) fullRegex = new RegExp(`^${sign}${digit}+(${decimal}${digit}+)?${scientific}$`);
+	else if (isIndianLocale) fullRegex = new RegExp(`^${sign}(${digit}{1,3}|${digit}{1,3}${group}${digit}{3}|${digit}{1,2}(${group}${digit}{2})+${group}${digit}{3})(${decimal}${digit}+)?${scientific}$`);
+	else fullRegex = new RegExp(`^${sign}${digit}{1,3}(${group}${digit}{3})*(${decimal}${digit}+)?${scientific}$`);
+	return fullRegex.test(input);
 };
 const NumberInput = React.forwardRef((props, forwardRef) => {
 	const { allowEmpty = false, className: customClassName, decorator, disabled = false, disableWheel: disableWheelProp = false, formatOptions, helperText = "", hideLabel = false, hideSteppers, iconDescription, id, inputMode = "decimal", invalid = false, invalidText, label, light, locale = "en-US", max, min, onBlur, onStepperBlur, onChange, onClick, onKeyUp, pattern = "[0-9]*", readOnly, size = "md", slug, step = 1, translateWithId: t = defaultTranslateWithId, type = "number", defaultValue = type === "number" ? 0 : NaN, validate, warn = false, warnText = "", stepStartValue = 0, value: controlledValue, ...rest } = props;
@@ -214,7 +223,7 @@ const NumberInput = React.forwardRef((props, forwardRef) => {
 	]);
 	const inputRef = useRef(null);
 	const ref = useMergedRefs([forwardRef, inputRef]);
-	const numberInputClasses = classNames({
+	const numberInputClasses = cx({
 		[`${prefix}--number`]: true,
 		[`${prefix}--number--helpertext`]: true,
 		[`${prefix}--number--readonly`]: readOnly,
@@ -241,12 +250,12 @@ const NumberInput = React.forwardRef((props, forwardRef) => {
 		warnText
 	});
 	const [incrementNumLabel, decrementNumLabel] = [t("increment.number"), t("decrement.number")];
-	const wrapperClasses = classNames(`${prefix}--number__input-wrapper`, {
+	const wrapperClasses = cx(`${prefix}--number__input-wrapper`, {
 		[`${prefix}--number__input-wrapper--warning`]: normalizedProps.warn,
 		[`${prefix}--number__input-wrapper--slug`]: slug,
 		[`${prefix}--number__input-wrapper--decorator`]: decorator
 	});
-	const iconClasses = classNames({
+	const iconClasses = cx({
 		[`${prefix}--number__invalid`]: normalizedProps.invalid || normalizedProps.warn,
 		[`${prefix}--number__invalid--warning`]: normalizedProps.warn
 	});
@@ -283,7 +292,7 @@ const NumberInput = React.forwardRef((props, forwardRef) => {
 		if ("type" in evt.target && evt.target.type === "button") setIsFocused(false);
 		else setIsFocused(evt.type === "focus");
 	};
-	const outerElementClasses = classNames(`${prefix}--form-item`, {
+	const outerElementClasses = cx(`${prefix}--form-item`, {
 		...customClassName ? { [customClassName]: true } : {},
 		[`${prefix}--number-input--fluid--invalid`]: isFluid && normalizedProps.invalid,
 		[`${prefix}--number-input--fluid--focus`]: isFluid && isFocused,
@@ -410,7 +419,8 @@ const NumberInput = React.forwardRef((props, forwardRef) => {
 										onBlur(e, value);
 										return;
 									}
-									onBlur(e, parsedValueForBlur ?? (isControlled ? numberParser.parse(inputValue) : numberValue));
+									const parsedTextValue = parsedValueForBlur ?? (isControlled ? numberParser.parse(inputValue) : numberValue);
+									onBlur(e, parsedTextValue);
 								}
 							},
 							pattern,
@@ -658,7 +668,7 @@ NumberInput.propTypes = {
 };
 const Label = ({ disabled, id, hideLabel, label }) => {
 	const prefix = usePrefix();
-	const className = classNames({
+	const className = cx({
 		[`${prefix}--label`]: true,
 		[`${prefix}--label--disabled`]: disabled,
 		[`${prefix}--visually-hidden`]: hideLabel
@@ -673,7 +683,7 @@ const Label = ({ disabled, id, hideLabel, label }) => {
 };
 const HelperText = ({ disabled, description, id }) => {
 	const prefix = usePrefix();
-	const className = classNames(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
+	const className = cx(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
 	if (description) return /* @__PURE__ */ jsx(Text, {
 		as: "div",
 		id,
@@ -728,4 +738,4 @@ function disableWheel(e) {
 	e.preventDefault();
 }
 //#endregion
-export { NumberInput, validateNumberSeparators };
+export { NumberInput, parseNumberWithLocale, validateNumberSeparators };

package/es/components/OrderedList/OrderedList.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/OrderedList/OrderedList.tsx
@@ -20,7 +20,7 @@ import { jsx } from "react/jsx-runtime";
 function OrderedList({ className, nested = false, native = false, isExpressive = false, ...other }) {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx("ol", {
-		className: classNames({
+		className: cx({
 			[`${prefix}--list--ordered`]: !native,
 			[`${prefix}--list--ordered--native`]: native,
 			[`${prefix}--list--nested`]: nested,