@carbon/react 1.106.0-rc.0 → 1.107.0-rc.0

package/es/components/Grid/FlexGrid.js

@@ -18,13 +18,14 @@ import { jsx } from "react/jsx-runtime";
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const FlexGrid = React.forwardRef(({ as, condensed = false, narrow = false, fullWidth = false, className: containerClassName, children, ...rest }, ref) => {
+const FlexGrid = React.forwardRef(({ as, condensed = false, narrow = false, fullWidth = false, withRowGap = false, className: containerClassName, children, ...rest }, ref) => {
 	const prefix = usePrefix();
 	const className = classNames(containerClassName, {
 		[`${prefix}--grid`]: true,
 		[`${prefix}--grid--condensed`]: condensed,
 		[`${prefix}--grid--narrow`]: narrow,
-		[`${prefix}--grid--full-width`]: fullWidth
+		[`${prefix}--grid--full-width`]: fullWidth,
+		[`${prefix}--grid--with-row-gap`]: withRowGap
 	});
 	return /* @__PURE__ */ jsx(GridSettings, {
 		mode: "flexbox",
@@ -43,7 +44,8 @@ FlexGrid.propTypes = {
 	className: PropTypes.string,
 	condensed: PropTypes.bool,
 	fullWidth: PropTypes.bool,
-	narrow: PropTypes.bool
+	narrow: PropTypes.bool,
+	withRowGap: PropTypes.bool
 };
 const FlexGridComponent = FlexGrid;
 //#endregion

package/es/components/Grid/Grid.js

@@ -33,7 +33,8 @@ Grid.propTypes = {
 	className: PropTypes.string,
 	condensed: PropTypes.bool,
 	fullWidth: PropTypes.bool,
-	narrow: PropTypes.bool
+	narrow: PropTypes.bool,
+	withRowGap: PropTypes.bool
 };
 const GridAsGridComponent = Grid;
 //#endregion

package/es/components/Grid/GridTypes.d.ts

@@ -33,6 +33,11 @@ export interface GridBaseProps {
      * typographic alignment with and without containers.
      */
     narrow?: boolean;
+    /**
+     * Add a row gap to the grid that matches the current gutter size.
+     * This is useful when you want consistent vertical spacing between rows.
+     */
+    withRowGap?: boolean;
 }
 export type GridProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, GridBaseProps>;
 export interface GridComponent {

package/es/components/Grid/Row.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, { type ReactElement } from 'react';
 import { PolymorphicProps } from '../../types/common';
 export interface RowBaseProps {
     /**
@@ -28,7 +28,7 @@ export interface RowBaseProps {
 }
 export type RowProps<T extends React.ElementType> = PolymorphicProps<T, RowBaseProps>;
 export interface RowComponent {
-    <T extends React.ElementType>(props: RowProps<T>, context?: any): React.ReactElement<any, any> | null;
+    <T extends React.ElementType>(props: RowProps<T>, context?: any): ReactElement | null;
 }
 declare const _default: RowComponent;
 export default _default;

package/es/components/Grid/Row.js

@@ -12,7 +12,7 @@ import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Grid/Row.tsx
 /**
-* Copyright IBM Corp. 2016, 2023
+* Copyright IBM Corp. 2016, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.

package/es/components/Menu/Menu.js

@@ -108,7 +108,7 @@ const Menu = forwardRef(function Menu({ backgroundToken = "layer", border = fals
 		}
 	}
 	function handleBlur(e) {
-		if (open && onClose && isRoot && e.relatedTarget && !menu.current?.contains(e.relatedTarget)) handleClose();
+		if (open && onClose && isRoot && !menu.current?.contains(e.relatedTarget)) handleClose();
 	}
 	function fitValue(range, axis) {
 		if (!menu.current) return;

package/es/components/Menu/MenuItem.js

@@ -84,6 +84,9 @@ const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescr
 	}
 	const pendingKeyboardClick = useRef(false);
 	const keyboardClickEvent = (e) => match(e, Enter) || match(e, Space);
+	function handleMouseDown(e) {
+		if (isDisabled) e.preventDefault();
+	}
 	function handleKeyDown(e) {
 		if (hasChildren && match(e, ArrowRight$1)) {
 			openSubmenu();
@@ -138,6 +141,7 @@ const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescr
 			"aria-disabled": isDisabled ?? void 0,
 			"aria-haspopup": hasChildren ?? void 0,
 			"aria-expanded": hasChildren ? submenuOpen : void 0,
+			onMouseDown: handleMouseDown,
 			onClick: handleClick,
 			onKeyDown: handleKeyDown,
 			onKeyUp: handleKeyUp,

package/es/components/Modal/Modal.js

@@ -136,6 +136,9 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 		}
 		const modalContent = document.querySelector(`.${prefix}--modal-content`);
 		if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) return;
+		const modalRect = modalContent.getBoundingClientRect();
+		const elementRect = currentActiveNode.getBoundingClientRect();
+		if (elementRect.top >= modalRect.top && elementRect.bottom <= modalRect.bottom) return;
 		currentActiveNode.scrollIntoView({ block: "center" });
 	}
 	const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;

package/es/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -195,7 +195,7 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 export declare const FilterableMultiSelect: {
-    <ItemType>(props: FilterableMultiSelectProps<ItemType>): ReactElement<any>;
+    <ItemType>(props: FilterableMultiSelectProps<ItemType>): ReactElement;
     propTypes?: any;
     contextTypes?: any;
     defaultProps?: any;

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -13,6 +13,7 @@ import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { hasHelperText } from "../../internal/hasHelperText.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { AILabel } from "../AILabel/index.js";
 import Checkbox_default from "../Checkbox/index.js";
@@ -175,7 +176,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 		[`${prefix}--list-box__wrapper--decorator`]: decorator,
 		[`${prefix}--autoalign`]: autoAlign
 	});
-	const hasHelper = typeof helperText !== "undefined" && helperText !== null;
+	const hasHelper = hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
 	const labelId = `${id}-label`;
 	const titleClasses = classNames({
@@ -394,7 +395,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	});
 	const inputProp = getInputProps(getDropdownProps({
 		"aria-controls": isOpen ? menuId : void 0,
-		"aria-describedby": helperText && showHelperText ? helperId : void 0,
+		"aria-describedby": hasHelper && showHelperText ? helperId : void 0,
 		"aria-haspopup": "listbox",
 		"aria-labelledby": void 0,
 		disabled,

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -178,6 +178,6 @@ type MultiSelectComponentProps<ItemType> = React.PropsWithChildren<MultiSelectPr
 interface MultiSelectComponent {
     propTypes: Record<string, any>;
     displayName: string;
-    <ItemType>(props: MultiSelectComponentProps<ItemType>): React.ReactElement<any> | null;
+    <ItemType>(props: MultiSelectComponentProps<ItemType>): React.ReactElement | null;
 }
 export {};

package/es/components/OverflowMenu/OverflowMenu.js

@@ -12,13 +12,15 @@ import { setupGetInstanceId } from "../../tools/setupGetInstanceId.js";
 import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
+import { isComponentElement } from "../../internal/utils.js";
 import { mapPopoverAlign } from "../../tools/mapPopoverAlign.js";
 import { IconButton } from "../IconButton/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
+import OverflowMenuItem from "../OverflowMenuItem/OverflowMenuItem.js";
 import { DIRECTION_BOTTOM, FloatingMenu } from "../../internal/FloatingMenu.js";
 import { useOutsideClick } from "../../internal/useOutsideClick.js";
 import classNames from "classnames";
-import React, { Children, cloneElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useRef, useState } from "react";
+import React, { Children, cloneElement, forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { OverflowMenuVertical } from "@carbon/icons-react";
@@ -222,17 +224,14 @@ const OverflowMenu = forwardRef(({ align, ["aria-label"]: ariaLabel = null, aria
 	});
 	const overflowMenuIconClasses = classNames(`${prefix}--overflow-menu__icon`, iconClass);
 	const childrenWithProps = Children.toArray(children).map((child, index) => {
-		if (isValidElement(child)) {
-			const childElement = child;
-			return cloneElement(childElement, {
-				closeMenu: childElement.props.closeMenu || closeMenuAndFocus,
-				handleOverflowMenuItemFocus,
-				ref: (el) => {
-					menuItemRefs.current[index] = el;
-				},
-				index
-			});
-		}
+		if (isComponentElement(child, OverflowMenuItem)) return cloneElement(child, {
+			closeMenu: child.props.closeMenu || closeMenuAndFocus,
+			handleOverflowMenuItemFocus,
+			ref: (el) => {
+				menuItemRefs.current[index] = el;
+			},
+			index
+		});
 		return null;
 	});
 	const wrappedMenuBody = /* @__PURE__ */ jsx(FloatingMenu, {

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

@@ -96,7 +96,7 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     /**
      * Specify the size of the Pagination.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * The total number of items.
      */

package/es/components/Pagination/Pagination.js

@@ -70,6 +70,7 @@ const Pagination = React.forwardRef(({ backwardText = "Previous page", className
 	const className = classNames({
 		[`${prefix}--pagination`]: true,
 		[`${prefix}--pagination--${size}`]: size,
+		[`${prefix}--layout--size-${size}`]: size,
 		[customClassName]: !!customClassName
 	});
 	const totalPages = totalItems ? Math.max(Math.ceil(totalItems / pageSize), 1) : 1;
@@ -287,6 +288,7 @@ Pagination.propTypes = {
 	pageText: PropTypes.func,
 	pagesUnknown: PropTypes.bool,
 	size: PropTypes.oneOf([
+		"xs",
 		"sm",
 		"md",
 		"lg"

package/es/components/Popover/index.js

@@ -37,6 +37,18 @@ const Popover = React.forwardRef(function PopoverRenderFunction({ isTabTip, alig
 	const popover = useRef(null);
 	const enableFloatingStyles = useFeatureFlag("enable-v12-dynamic-floating-styles") || autoAlign;
 	const lastClickWasInsidePopoverContent = useRef(false);
+	const isTargetInDatePickerInsidePopover = (target) => {
+		if (!popover.current) return false;
+		const calendar = target instanceof Element && target.closest(".flatpickr-calendar");
+		if (!calendar) return false;
+		const inputs = popover.current.querySelectorAll("input");
+		for (const input of inputs) {
+			if (!("_flatpickr" in input)) continue;
+			const fp = input._flatpickr;
+			if (fp && typeof fp === "object" && "calendarContainer" in fp && fp.calendarContainer === calendar) return true;
+		}
+		return false;
+	};
 	let align = mapPopoverAlign(initialAlign);
 	useEvent(popover, "mousedown", (event) => {
 		const target = event.target;
@@ -54,13 +66,14 @@ const Popover = React.forwardRef(function PopoverRenderFunction({ isTabTip, alig
 			}
 			onRequestClose?.();
 		} else if (relatedTarget && !popover.current?.contains(relatedTarget)) {
+			if (isTargetInDatePickerInsidePopover(relatedTarget)) return;
 			const isOutsideFloating = enableFloatingStyles && refs.floating.current ? !refs.floating.current.contains(relatedTarget) : true;
 			const isFocusableWrapper = relatedTarget && popover.current && relatedTarget.contains(popover.current);
 			if (isOutsideFloating && !isFocusableWrapper) onRequestClose?.();
 		}
 	});
 	useWindowEvent("click", ({ target }) => {
-		if (open && target instanceof Node && !popover.current?.contains(target)) onRequestClose?.();
+		if (open && target instanceof Node && !popover.current?.contains(target) && !isTargetInDatePickerInsidePopover(target)) onRequestClose?.();
 	});
 	const popoverDimensions = useRef({
 		offset: 10,

package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ReactNode } from 'react';
-import type { RadioButtonProps } from '../RadioButton';
+import { type RadioButtonProps } from '../RadioButton';
 export declare const RadioButtonGroupContext: React.Context<null>;
 type ExcludedAttributes = 'onChange';
 export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HTMLFieldSetElement>, ExcludedAttributes> {

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -9,11 +9,13 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { hasHelperText } from "../../internal/hasHelperText.js";
 import { AILabel } from "../AILabel/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
+import RadioButton_default from "../RadioButton/index.js";
 import { Legend } from "../Text/createTextComponent.js";
 import classNames from "classnames";
-import React, { cloneElement, createContext, useEffect, useRef, useState } from "react";
+import React, { Children, cloneElement, createContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -31,8 +33,8 @@ const RadioButtonGroup = React.forwardRef((props, ref) => {
 		}
 	}, [valueSelected]);
 	function getRadioButtons() {
-		return React.Children.map(children, (radioButton) => {
-			if (!radioButton) return;
+		return Children.map(children, (radioButton) => {
+			if (!isComponentElement(radioButton, RadioButton_default)) return radioButton;
 			const newProps = {
 				name,
 				key: radioButton.props.value,
@@ -42,7 +44,7 @@ const RadioButtonGroup = React.forwardRef((props, ref) => {
 				required
 			};
 			if (!selected && radioButton.props.checked) newProps.checked = true;
-			return React.cloneElement(radioButton, newProps);
+			return cloneElement(radioButton, newProps);
 		});
 	}
 	function handleOnChange(newSelection, value, evt) {
@@ -66,7 +68,7 @@ const RadioButtonGroup = React.forwardRef((props, ref) => {
 		[`${prefix}--radio-button-group--decorator`]: decorator
 	});
 	const helperClasses = classNames(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: disabled });
-	const hasHelper = typeof helperText !== "undefined" && helperText !== null;
+	const hasHelper = hasHelperText(helperText);
 	const helperId = !hasHelper ? void 0 : `radio-button-group-helper-text-${radioButtonGroupInstanceId}`;
 	const helper = hasHelper && /* @__PURE__ */ jsx("div", {
 		id: helperId,
@@ -87,7 +89,7 @@ const RadioButtonGroup = React.forwardRef((props, ref) => {
 				className: fieldsetClasses,
 				disabled,
 				"data-invalid": invalid ? true : void 0,
-				"aria-describedby": showHelper && helperText ? helperId : void 0,
+				"aria-describedby": showHelper && hasHelper ? helperId : void 0,
 				...rest,
 				children: [legendText && /* @__PURE__ */ jsxs(Legend, {
 					className: `${prefix}--label`,

package/es/components/Search/Search.Skeleton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -11,22 +11,31 @@ export interface SearchSkeletonProps extends React.HTMLAttributes<HTMLDivElement
      * Specify an optional className to add.
      */
     className?: string;
+    /**
+     * Specify the size of the SearchSkeleton
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * Specify whether the Search should be a small variant.
+     * @deprecated Use `size` prop instead. This prop will be removed in the next major release.
      */
     small?: boolean;
 }
 declare const SearchSkeleton: {
-    ({ small, className, ...rest }: SearchSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    ({ small, size, className, ...rest }: SearchSkeletonProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add.
          */
         className: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the SearchSkeleton
+         */
+        size: PropTypes.Requireable<string>;
         /**
          * Specify whether the Search should be a small variant
          */
-        small: PropTypes.Requireable<boolean>;
+        small: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
     };
 };
 export default SearchSkeleton;

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

@@ -6,32 +6,40 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
+import { deprecate } from "../../prop-types/deprecate.js";
 import classNames from "classnames";
 import "react";
 import PropTypes from "prop-types";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/Search/Search.Skeleton.tsx
 /**
-* Copyright IBM Corp. 2016, 2023
+* Copyright IBM Corp. 2016, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const SearchSkeleton = ({ small = false, className, ...rest }) => {
+const SearchSkeleton = ({ small = false, size, className, ...rest }) => {
 	const prefix = usePrefix();
-	return /* @__PURE__ */ jsxs("div", {
+	const normalizedSize = small ? "sm" : size;
+	return /* @__PURE__ */ jsx("div", {
 		className: classNames(className, {
 			[`${prefix}--skeleton`]: true,
-			[`${prefix}--search--xl`]: !small,
-			[`${prefix}--search--sm`]: small
+			[`${prefix}--search--sm`]: small,
+			[`${prefix}--layout--size-${normalizedSize}`]: normalizedSize
 		}),
 		...rest,
-		children: [/* @__PURE__ */ jsx("span", { className: `${prefix}--label` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--search-input` })]
+		children: /* @__PURE__ */ jsx("div", { className: `${prefix}--search-input` })
 	});
 };
 SearchSkeleton.propTypes = {
 	className: PropTypes.string,
-	small: PropTypes.bool
+	size: PropTypes.oneOf([
+		"xs",
+		"sm",
+		"md",
+		"lg"
+	]),
+	small: deprecate(PropTypes.bool, "The `small` prop has been deprecated and will be removed in the next major release. Please use the `size` prop instead.")
 };
 //#endregion
 export { SearchSkeleton as default };

package/es/components/Search/Search.d.ts

@@ -71,7 +71,7 @@ export interface SearchProps extends InputPropsBase {
     /**
      * Specify the size of the Search
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * Specify the type of the `<input>`
      */

package/es/components/Search/Search.js

@@ -28,7 +28,7 @@ import { Close, Search } from "@carbon/icons-react";
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const Search$1 = React.forwardRef(({ autoComplete = "off", className, closeButtonLabelText = "Clear search input", defaultValue, disabled, isExpanded = true, id, labelText, light, onChange = () => {}, onClear = () => {}, onKeyDown, onExpand, placeholder = "Search", renderIcon, role, size = "md", type = "search", value, ...rest }, forwardRef) => {
+const Search$1 = React.forwardRef(({ autoComplete = "off", className, closeButtonLabelText = "Clear search input", defaultValue, disabled, isExpanded = true, id, labelText, light, onChange = () => {}, onClear = () => {}, onKeyDown, onExpand, placeholder = "Search", renderIcon, role, size, type = "search", value, ...rest }, forwardRef) => {
 	const hasPropValue = isSearchValuePresent(value) || isSearchValuePresent(defaultValue);
 	const prefix = usePrefix();
 	const { isFluid } = useContext(FormContext);
@@ -41,9 +41,8 @@ const Search$1 = React.forwardRef(({ autoComplete = "off", className, closeButto
 	const [hasContent, setHasContent] = useState(hasPropValue || false);
 	const searchClasses = classNames({
 		[`${prefix}--search`]: true,
-		[`${prefix}--search--sm`]: size === "sm",
-		[`${prefix}--search--md`]: size === "md",
-		[`${prefix}--search--lg`]: size === "lg",
+		[`${prefix}--search--${size}`]: size,
+		[`${prefix}--layout--size-${size}`]: size,
 		[`${prefix}--search--light`]: light,
 		[`${prefix}--search--disabled`]: disabled,
 		[`${prefix}--search--fluid`]: isFluid
@@ -173,6 +172,7 @@ Search$1.propTypes = {
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 	role: deprecate(PropTypes.string, "The `role` prop has been deprecated since <input type=\"search\"> already provides correct semantics. It will be removed in the next major release of Carbon."),
 	size: PropTypes.oneOf([
+		"xs",
 		"sm",
 		"md",
 		"lg"

package/es/components/Select/Select.d.ts

@@ -79,7 +79,7 @@ export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, Exclu
     /**
      * Specify the size of the Select Input.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component

package/es/components/Select/Select.js

@@ -9,6 +9,7 @@ import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { hasHelperText } from "../../internal/hasHelperText.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { AILabel } from "../AILabel/index.js";
 import { composeEventHandlers } from "../../tools/events.js";
@@ -53,19 +54,18 @@ const Select = forwardRef(({ className, decorator, id, inline = false, labelText
 		[`${prefix}--select--fluid--invalid`]: isFluid && normalizedProps.invalid,
 		[`${prefix}--select--fluid--focus`]: isFluid && isFocused,
 		[`${prefix}--select--slug`]: slug,
-		[`${prefix}--select--decorator`]: decorator
+		[`${prefix}--select--decorator`]: decorator,
+		[`${prefix}--select--${size}`]: size,
+		[`${prefix}--layout--size-${size}`]: size
 	});
 	const labelClasses = classNames(`${prefix}--label`, {
 		[`${prefix}--visually-hidden`]: hideLabel,
 		[`${prefix}--label--disabled`]: normalizedProps.disabled
 	});
-	const inputClasses = classNames({
-		[`${prefix}--select-input`]: true,
-		[`${prefix}--select-input--${size}`]: size
-	});
+	const inputClasses = classNames({ [`${prefix}--select-input`]: true });
 	const error = normalizedProps.validation;
 	const helperTextClasses = classNames(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled });
-	const helper = typeof helperText !== "undefined" && helperText !== null ? /* @__PURE__ */ jsx(Text, {
+	const helper = hasHelperText(helperText) ? /* @__PURE__ */ jsx(Text, {
 		as: "div",
 		id: normalizedProps.helperId,
 		className: helperTextClasses,
@@ -175,6 +175,7 @@ Select.propTypes = {
 	onChange: PropTypes.func,
 	readOnly: PropTypes.bool,
 	size: PropTypes.oneOf([
+		"xs",
 		"sm",
 		"md",
 		"lg"