@carbon/react 1.112.0 → 1.113.0

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",

package/es/components/FileUploader/FileUploaderDropContainer.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 { composeEventHandlers } from "../../tools/events.js";
-import classNames from "classnames";
 import { useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/FileUploader/FileUploaderDropContainer.tsx
@@ -29,7 +29,7 @@ function FileUploaderDropContainer({ accept = [], className, id, disabled, label
 	const generatedId = useId();
 	const { current: uid } = useRef(id || generatedId);
 	const [isActive, setActive] = useState(false);
-	const dropareaClasses = classNames(`${prefix}--file__drop-container`, `${prefix}--file-browse-btn`, {
+	const dropareaClasses = cx(`${prefix}--file__drop-container`, `${prefix}--file-browse-btn`, {
 		[`${prefix}--file__drop-container--drag-over`]: isActive,
 		[`${prefix}--file-browse-btn--disabled`]: disabled
 	}, className);
@@ -58,17 +58,19 @@ function FileUploaderDropContainer({ accept = [], className, id, disabled, label
 		return onAddFiles(event, { addedFiles: validateFiles(multiple ? files : [files[0]]) });
 	};
 	const handleChange = (event) => {
-		return handleFiles(event, [...event.target.files ?? []]);
+		const files = [...event.target.files ?? []];
+		return handleFiles(event, files);
 	};
 	const handleDrop = (event) => {
 		const items = [...event.dataTransfer.items ?? []];
-		return handleFiles(event, items.length ? items.reduce((acc, item) => {
+		const files = items.length ? items.reduce((acc, item) => {
 			if (item.kind !== "file") return acc;
 			if (item.webkitGetAsEntry()?.isDirectory) return acc;
 			const file = item.getAsFile();
 			if (file) acc.push(file);
 			return acc;
-		}, []) : [...event.dataTransfer.files]);
+		}, []) : [...event.dataTransfer.files];
+		return handleFiles(event, files);
 	};
 	const handleClick = () => {
 		if (!disabled) inputRef.current?.click();

package/es/components/FileUploader/FileUploaderItem.js

@@ -5,17 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { Enter, Space } from "../../internal/keyboard/keys.js";
 import { 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 { Tooltip } from "../Tooltip/Tooltip.js";
 import Filename from "./Filename.js";
-import classNames from "classnames";
 import { useRef, useState } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/FileUploader/FileUploaderItem.tsx
@@ -31,7 +31,7 @@ function FileUploaderItem({ uuid, name, status = "uploading", iconDescription, o
 	const prefix = usePrefix();
 	const generatedId = useId();
 	const { current: id } = useRef(uuid || generatedId);
-	const classes = classNames(`${prefix}--file__selected-file`, className, {
+	const classes = cx(`${prefix}--file__selected-file`, className, {
 		[`${prefix}--file__selected-file--invalid`]: invalid,
 		[`${prefix}--file__selected-file--md`]: size === "md",
 		[`${prefix}--file__selected-file--sm`]: size === "sm",

package/es/components/FluidComboBox/FluidComboBox.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/FluidComboBox/FluidComboBox.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const FluidComboBoxSkeleton = ({ className, ...rest }) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(className, `${prefix}--list-box__wrapper--fluid`),
+		className: cx(className, `${prefix}--list-box__wrapper--fluid`),
 		...rest,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: `${prefix}--skeleton ${prefix}--list-box`,

package/es/components/FluidComboBox/FluidComboBox.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import ComboBox_default from "../ComboBox/index.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FluidComboBox/FluidComboBox.tsx
@@ -21,12 +21,12 @@ import { jsx } from "react/jsx-runtime";
 */
 const FluidComboBox = React.forwardRef(function FluidComboBox({ className, isCondensed, ...other }, ref) {
 	const prefix = usePrefix();
-	const classNames$1 = classNames(`${prefix}--list-box__wrapper--fluid`, className, { [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed });
+	const classNames = cx(`${prefix}--list-box__wrapper--fluid`, className, { [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed });
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: { isFluid: true },
 		children: /* @__PURE__ */ jsx(ComboBox_default, {
 			ref,
-			className: classNames$1,
+			className: classNames,
 			...other
 		})
 	});

package/es/components/FluidDatePicker/FluidDatePicker.Skeleton.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.js";
-import classNames from "classnames";
 import "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Calendar } from "@carbon/icons-react";
@@ -21,11 +21,11 @@ import { Calendar } from "@carbon/icons-react";
 */
 const FluidDatePickerSkeleton = ({ className, datePickerType = "single", ...other }) => {
 	const prefix = usePrefix();
-	const classNames$1 = classNames(className, `${prefix}--form-item ${prefix}--date-picker--fluid__skeleton`, { [`${prefix}--date-picker--fluid__skeleton--range`]: datePickerType === "range" });
+	const classNames = cx(className, `${prefix}--form-item ${prefix}--date-picker--fluid__skeleton`, { [`${prefix}--date-picker--fluid__skeleton--range`]: datePickerType === "range" });
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: { isFluid: true },
 		children: /* @__PURE__ */ jsxs("div", {
-			className: classNames$1,
+			className: classNames,
 			...other,
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: `${prefix}--date-picker--fluid__skeleton--container`,

package/es/components/FluidDatePicker/FluidDatePicker.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import DatePicker_default from "../DatePicker/index.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FluidDatePicker/FluidDatePicker.tsx
@@ -21,7 +21,7 @@ import { jsx } from "react/jsx-runtime";
 */
 const FluidDatePicker = React.forwardRef(function FluidDatePicker({ className, children, invalid, readOnly, warn, ...other }, ref) {
 	const prefix = usePrefix();
-	const classNames$1 = classNames(className, {
+	const classNames = cx(className, {
 		[`${prefix}--date-picker--fluid`]: true,
 		[`${prefix}--date-picker--fluid--invalid`]: invalid,
 		[`${prefix}--date-picker--fluid--readonly`]: readOnly,
@@ -33,7 +33,7 @@ const FluidDatePicker = React.forwardRef(function FluidDatePicker({ className, c
 			invalid,
 			readOnly,
 			warn,
-			className: classNames$1,
+			className: classNames,
 			ref,
 			...other,
 			children

package/es/components/FluidDropdown/FluidDropdown.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/FluidDropdown/FluidDropdown.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const FluidDropdownSkeleton = ({ className, ...rest }) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(className, `${prefix}--list-box__wrapper--fluid`),
+		className: cx(className, `${prefix}--list-box__wrapper--fluid`),
 		...rest,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: `${prefix}--skeleton ${prefix}--list-box`,

package/es/components/FluidDropdown/FluidDropdown.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import Dropdown_default from "../Dropdown/index.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FluidDropdown/FluidDropdown.tsx
@@ -21,12 +21,12 @@ import { jsx } from "react/jsx-runtime";
 */
 const FluidDropdown = React.forwardRef(function FluidDropdown({ className, isCondensed, ...other }, ref) {
 	const prefix = usePrefix();
-	const classNames$1 = classNames(`${prefix}--list-box__wrapper--fluid`, className, { [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed });
+	const classNames = cx(`${prefix}--list-box__wrapper--fluid`, className, { [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed });
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: { isFluid: true },
 		children: /* @__PURE__ */ jsx(Dropdown_default, {
 			ref,
-			className: classNames$1,
+			className: classNames,
 			...other
 		})
 	});

package/es/components/FluidForm/FluidForm.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import Form from "../Form/Form.js";
 import { FormContext } from "./FormContext.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/FluidForm/FluidForm.tsx
@@ -20,11 +20,11 @@ import { jsx } from "react/jsx-runtime";
 * LICENSE file in the root directory of this source tree.
 */
 const FluidForm = ({ className, children, ...other }) => {
-	const classNames$1 = classNames(`${usePrefix()}--form--fluid`, className);
+	const classNames = cx(`${usePrefix()}--form--fluid`, className);
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: { isFluid: true },
 		children: /* @__PURE__ */ jsx(Form, {
-			className: classNames$1,
+			className: classNames,
 			...other,
 			children
 		})

package/es/components/FluidMultiSelect/FluidMultiSelect.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/FluidMultiSelect/FluidMultiSelect.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const FluidMultiSelectSkeleton = ({ className, ...rest }) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(className, `${prefix}--list-box__wrapper--fluid`),
+		className: cx(className, `${prefix}--list-box__wrapper--fluid`),
 		...rest,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: `${prefix}--skeleton ${prefix}--list-box`,

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import { FilterableMultiSelect } from "../MultiSelect/FilterableMultiSelect.js";
 import { MultiSelect } from "../MultiSelect/MultiSelect.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FluidMultiSelect/FluidMultiSelect.tsx
@@ -22,16 +22,16 @@ import { jsx } from "react/jsx-runtime";
 */
 const FluidMultiSelect = React.forwardRef(function FluidMultiSelect({ className, isCondensed, isFilterable, ...other }, ref) {
 	const prefix = usePrefix();
-	const classNames$1 = classNames(`${prefix}--list-box__wrapper--fluid`, className, { [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed });
+	const classNames = cx(`${prefix}--list-box__wrapper--fluid`, className, { [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed });
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: { isFluid: true },
 		children: isFilterable ? /* @__PURE__ */ jsx(FilterableMultiSelect, {
 			ref,
-			className: classNames$1,
+			className: classNames,
 			...other
 		}) : /* @__PURE__ */ jsx(MultiSelect, {
 			ref,
-			className: classNames$1,
+			className: classNames,
 			...other
 		})
 	});

package/es/components/FluidNumberInput/FluidNumberInput.Skeleton.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.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/FluidNumberInput/FluidNumberInput.Skeleton.tsx
@@ -23,7 +23,7 @@ const FluidNumberInputSkeleton = ({ className, ...other }) => {
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: { isFluid: true },
 		children: /* @__PURE__ */ jsxs("div", {
-			className: classNames(`${prefix}--form-item ${prefix}--text-input--fluid__skeleton`, className),
+			className: cx(`${prefix}--form-item ${prefix}--text-input--fluid__skeleton`, className),
 			...other,
 			children: [/* @__PURE__ */ jsx("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--skeleton ${prefix}--text-input` })]
 		})

package/es/components/FluidNumberInput/FluidNumberInput.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import { NumberFormatOptionsPropType } from "../NumberInput/NumberFormatPropTypes.js";
 import { NumberInput } from "../NumberInput/NumberInput.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FluidNumberInput/FluidNumberInput.tsx
@@ -21,12 +21,12 @@ import { jsx } from "react/jsx-runtime";
 * LICENSE file in the root directory of this source tree.
 */
 const FluidNumberInput = React.forwardRef(({ className, ...other }, ref) => {
-	const classNames$1 = classNames(`${usePrefix()}--number-input--fluid`, className);
+	const classNames = cx(`${usePrefix()}--number-input--fluid`, className);
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: { isFluid: true },
 		children: /* @__PURE__ */ jsx(NumberInput, {
 			ref,
-			className: classNames$1,
+			className: classNames,
 			...other
 		})
 	});

package/es/components/FluidSearch/FluidSearch.Skeleton.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.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/FluidSearch/FluidSearch.Skeleton.tsx
@@ -23,7 +23,7 @@ const FluidSearchSkeleton = ({ className, ...other }) => {
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: { isFluid: true },
 		children: /* @__PURE__ */ jsxs("div", {
-			className: classNames(`${prefix}--form-item ${prefix}--text-input--fluid__skeleton`, className),
+			className: cx(`${prefix}--form-item ${prefix}--text-input--fluid__skeleton`, className),
 			...other,
 			children: [/* @__PURE__ */ jsx("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--skeleton ${prefix}--text-input` })]
 		})

package/es/components/FluidSearch/FluidSearch.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import Search_default from "../Search/index.js";
-import classNames from "classnames";
 import { forwardRef } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FluidSearch/FluidSearch.tsx
@@ -20,12 +20,12 @@ import { jsx } from "react/jsx-runtime";
 * LICENSE file in the root directory of this source tree.
 */
 const FluidSearch = forwardRef(({ className, ...other }, ref) => {
-	const classNames$1 = classNames(`${usePrefix()}--search--fluid`, className);
+	const classNames = cx(`${usePrefix()}--search--fluid`, className);
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: { isFluid: true },
 		children: /* @__PURE__ */ jsx(Search_default, {
 			ref,
-			className: classNames$1,
+			className: classNames,
 			...other
 		})
 	});

package/es/components/FluidSelect/FluidSelect.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/FluidSelect/FluidSelect.Skeleton.tsx
@@ -20,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const FluidSelectSkeleton = ({ className, ...rest }) => {
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(className, `${prefix}--list-box__wrapper--fluid`),
+		className: cx(className, `${prefix}--list-box__wrapper--fluid`),
 		...rest,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: `${prefix}--skeleton ${prefix}--list-box`,

package/es/components/FluidSelect/FluidSelect.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import Select_default from "../Select/index.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FluidSelect/FluidSelect.tsx
@@ -20,12 +20,12 @@ import { jsx } from "react/jsx-runtime";
 * LICENSE file in the root directory of this source tree.
 */
 const FluidSelect = React.forwardRef(({ className, children, ...other }, ref) => {
-	const classNames$1 = classNames(`${usePrefix()}--select--fluid`, className);
+	const classNames = cx(`${usePrefix()}--select--fluid`, className);
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: { isFluid: true },
 		children: /* @__PURE__ */ jsx(Select_default, {
 			ref,
-			className: classNames$1,
+			className: classNames,
 			...other,
 			children
 		})

package/es/components/FluidSelect/index.js

@@ -6,7 +6,7 @@
  */
 
 import FluidSelect from "./FluidSelect.js";
-import "./FluidSelect.Skeleton.js";
+import FluidSelectSkeleton from "./FluidSelect.Skeleton.js";
 //#region src/components/FluidSelect/index.tsx
 /**
 * Copyright IBM Corp. 2022
@@ -16,4 +16,4 @@ import "./FluidSelect.Skeleton.js";
 */
 var FluidSelect_default = FluidSelect;
 //#endregion
-export { FluidSelect_default as default };
+export { FluidSelect, FluidSelectSkeleton, FluidSelect_default as default };

package/es/components/FluidTextArea/FluidTextArea.Skeleton.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.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/FluidTextArea/FluidTextArea.Skeleton.tsx
@@ -23,7 +23,7 @@ const FluidTextAreaSkeleton = ({ className, ...other }) => {
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: { isFluid: true },
 		children: /* @__PURE__ */ jsxs("div", {
-			className: classNames(`${prefix}--form-item ${prefix}--text-area--fluid__skeleton`, className),
+			className: cx(`${prefix}--form-item ${prefix}--text-area--fluid__skeleton`, className),
 			...other,
 			children: [/* @__PURE__ */ jsx("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--skeleton ${prefix}--text-area` })]
 		})

package/es/components/FluidTextArea/FluidTextArea.js

@@ -9,8 +9,8 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import TextArea_default from "../TextArea/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/FluidTextArea/FluidTextArea.tsx
@@ -21,11 +21,11 @@ import { jsx } from "react/jsx-runtime";
 * LICENSE file in the root directory of this source tree.
 */
 const FluidTextArea = ({ className, ...other }) => {
-	const classNames$1 = classNames(`${usePrefix()}--text-area--fluid`, className);
+	const classNames = cx(`${usePrefix()}--text-area--fluid`, className);
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: { isFluid: true },
 		children: /* @__PURE__ */ jsx(TextArea_default, {
-			className: classNames$1,
+			className: classNames,
 			...other
 		})
 	});

package/es/components/FluidTextInput/FluidPasswordInput.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.js";
 import PasswordInput from "../TextInput/PasswordInput.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/FluidTextInput/FluidPasswordInput.tsx
@@ -20,11 +20,11 @@ import { jsx } from "react/jsx-runtime";
 * LICENSE file in the root directory of this source tree.
 */
 const FluidPasswordInput = ({ className, ...other }) => {
-	const classNames$1 = classNames(className, `${usePrefix()}--text-input--fluid`);
+	const classNames = cx(className, `${usePrefix()}--text-input--fluid`);
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: { isFluid: true },
 		children: /* @__PURE__ */ jsx(PasswordInput, {
-			className: classNames$1,
+			className: classNames,
 			...other
 		})
 	});

package/es/components/FluidTextInput/FluidTextInput.Skeleton.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { FormContext } from "../FluidForm/FormContext.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/FluidTextInput/FluidTextInput.Skeleton.tsx
@@ -23,7 +23,7 @@ const FluidTextInputSkeleton = ({ className, ...other }) => {
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: { isFluid: true },
 		children: /* @__PURE__ */ jsxs("div", {
-			className: classNames(`${prefix}--form-item ${prefix}--text-input--fluid__skeleton`, className),
+			className: cx(`${prefix}--form-item ${prefix}--text-input--fluid__skeleton`, className),
 			...other,
 			children: [/* @__PURE__ */ jsx("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--skeleton ${prefix}--text-input` })]
 		})