@carbon/react 1.78.1 → 1.79.0-rc.0

package/es/components/OverflowMenu/index.d.ts

@@ -1,13 +1,13 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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 { type OverflowMenuProps } from './OverflowMenu';
-declare function OverflowMenu(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace OverflowMenu {
-    var displayName: string;
-}
+declare const OverflowMenu: {
+    (props: OverflowMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default OverflowMenu;
 export { OverflowMenu, type OverflowMenuProps };

package/es/components/OverflowMenu/index.js

@@ -12,10 +12,10 @@ import { OverflowMenu as OverflowMenu$1 } from './OverflowMenu.js';
 import { createClassWrapper } from '../../internal/createClassWrapper.js';
 
 const OverflowMenuV11 = createClassWrapper(OverflowMenu$1);
-function OverflowMenu(props) {
+const OverflowMenu = props => {
   const enableV12OverflowMenu = useFeatureFlag('enable-v12-overflowmenu');
   return enableV12OverflowMenu ? /*#__PURE__*/React__default.createElement(OverflowMenu$2, props) : /*#__PURE__*/React__default.createElement(OverflowMenuV11, props);
-}
+};
 OverflowMenu.displayName = 'OverflowMenu';
 
 export { OverflowMenu, OverflowMenu as default };

package/es/components/OverflowMenu/next/index.d.ts

@@ -4,7 +4,7 @@
  * 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, { type ComponentType, type FunctionComponent } from 'react';
+import React, { type ElementType } from 'react';
 interface OverflowMenuProps {
     /**
      * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
@@ -29,7 +29,7 @@ interface OverflowMenuProps {
     /**
      * A component used to render an icon.
      */
-    renderIcon?: ComponentType | FunctionComponent;
+    renderIcon?: ElementType;
     /**
      * Specify the size of the menu, from a list of available sizes.
      */

package/es/components/Slider/Slider.d.ts

@@ -164,11 +164,6 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      */
     warnText?: React.ReactNode;
 }
-interface CalcValueProps {
-    clientX?: number;
-    value?: number;
-    useRawValue?: boolean;
-}
 interface CalcLeftPercentProps {
     clientX?: number;
     value?: number;
@@ -415,30 +410,29 @@ declare class Slider extends PureComponent<SliderProps> {
     onInputKeyDown: (evt: any) => void;
     processNewInputValue: (input: HTMLInputElement) => void;
     calcLeftPercent: ({ clientX, value, range }: CalcLeftPercentProps) => number;
-    calcSteppedValuePercent: ({ leftPercent, range }: {
-        leftPercent: any;
-        range: any;
-    }) => number[];
-    /**
-     * Calculates a new Slider `value` and `left` (thumb offset) given a `clientX`,
-     * `value`, or neither of those.
-     * - If `clientX` is specified, it will be used in
-     *   conjunction with the Slider's bounding rectangle to calculate the new
-     *   values.
-     * - If `clientX` is not specified and `value` is, it will be used to
-     *   calculate new values as though it were the current value of the Slider.
-     * - If neither `clientX` nor `value` are specified, `this.props.value` will
-     *   be used to calculate the new values as though it were the current value
-     *   of the Slider.
-     *
-     * @param {object} params
-     * @param {number} [params.clientX] Optional clientX value expected to be from
-     *   an event fired by one of the Slider's `DRAG_EVENT_TYPES` events.
-     * @param {number} [params.value] Optional value use during calculations if
-     *   clientX is not provided.
-     * @param {boolean} [params.useRawValue=false] `true` to use the given value as-is.
-     */
-    calcValue: ({ clientX, value, useRawValue }: CalcValueProps) => {
+    /**
+     * Calculates the discrete value (snapped to the nearest step) along
+     * with the corresponding handle position percentage.
+     */
+    calcDiscreteValueAndPercent: ({ leftPercent, }: {
+        /** The percentage representing the position on the track. */
+        leftPercent: number;
+    }) => {
+        discreteValue: number;
+        discretePercent: number;
+    };
+    /**
+     * Calculates the slider's value and handle position based on either a
+     * mouse/touch event or an explicit value.
+     */
+    calcValue: ({ clientX, value, useRawValue, }: {
+        /** The x-coordinate from a mouse/touch event. */
+        clientX?: number;
+        /** Value to base the calculations on (if no `clientX`). */
+        value?: number;
+        /** Whether to bypass the stepping logic and use the raw value. */
+        useRawValue?: boolean;
+    }) => {
         value: number | undefined;
         left: number;
     };

package/es/components/Slider/Slider.js

@@ -523,67 +523,65 @@ class Slider extends PureComponent {
       // re-assure Typescript, return 0.
       return 0;
     });
-    _defineProperty(this, "calcSteppedValuePercent", _ref3 => {
+    /**
+     * Calculates the discrete value (snapped to the nearest step) along
+     * with the corresponding handle position percentage.
+     */
+    _defineProperty(this, "calcDiscreteValueAndPercent", _ref3 => {
       let {
-        leftPercent,
-        range
+        leftPercent
       } = _ref3;
       const {
-        step = 1
+        step = 1,
+        min,
+        max
       } = this.props;
-      const totalSteps = range / step;
-      let steppedValue = Math.round(leftPercent * totalSteps) * step;
-      const steppedPercent = this.clamp(steppedValue / range, 0, 1);
-      steppedValue = this.clamp(steppedValue + this.props.min, this.props.min, this.props.max);
-      return [steppedValue, steppedPercent];
+      const numSteps = Math.floor((max - min) / step) + ((max - min) % step === 0 ? 1 : 2);
+      /** Index of the step that corresponds to `leftPercent`. */
+      const stepIndex = Math.round(leftPercent * (numSteps - 1));
+      const discreteValue = stepIndex === numSteps - 1 ? max : min + step * stepIndex;
+      /** Percentage corresponding to the step index. */
+      const discretePercent = stepIndex / (numSteps - 1);
+      return {
+        discreteValue,
+        discretePercent
+      };
     });
     /**
-     * Calculates a new Slider `value` and `left` (thumb offset) given a `clientX`,
-     * `value`, or neither of those.
-     * - If `clientX` is specified, it will be used in
-     *   conjunction with the Slider's bounding rectangle to calculate the new
-     *   values.
-     * - If `clientX` is not specified and `value` is, it will be used to
-     *   calculate new values as though it were the current value of the Slider.
-     * - If neither `clientX` nor `value` are specified, `this.props.value` will
-     *   be used to calculate the new values as though it were the current value
-     *   of the Slider.
-     *
-     * @param {object} params
-     * @param {number} [params.clientX] Optional clientX value expected to be from
-     *   an event fired by one of the Slider's `DRAG_EVENT_TYPES` events.
-     * @param {number} [params.value] Optional value use during calculations if
-     *   clientX is not provided.
-     * @param {boolean} [params.useRawValue=false] `true` to use the given value as-is.
+     * Calculates the slider's value and handle position based on either a
+     * mouse/touch event or an explicit value.
      */
     _defineProperty(this, "calcValue", _ref4 => {
       let {
         clientX,
         value,
-        useRawValue = false
+        useRawValue
       } = _ref4;
       const range = this.props.max - this.props.min;
-
-      // @todo solve for rtl.
-      const leftPercent = this.calcLeftPercent({
+      const leftPercentRaw = this.calcLeftPercent({
         clientX,
         value,
         range
       });
+      /** `leftPercentRaw` clamped between 0 and 1. */
+      const leftPercent = Math.min(1, Math.max(0, leftPercentRaw));
       if (useRawValue) {
-        // Adjusts only for min/max of thumb position
         return {
           value,
-          left: Math.min(1, Math.max(0, leftPercent)) * 100
+          left: leftPercent * 100
         };
       }
-      const [steppedValue, steppedPercent] = this.calcSteppedValuePercent({
-        leftPercent,
-        range
+
+      // Use the discrete value and percentage for snapping.
+      const {
+        discreteValue,
+        discretePercent
+      } = this.calcDiscreteValueAndPercent({
+        leftPercent
       });
       return {
-        value: steppedValue,
-        left: steppedPercent * 100
+        value: discreteValue,
+        left: discretePercent * 100
       };
     });
     _defineProperty(this, "calcDistanceToHandle", (handle, clientX) => {

package/es/components/Tabs/Tabs.js

@@ -21,7 +21,6 @@ import { isElement } from 'react-is';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { useControllableState } from '../../internal/useControllableState.js';
-import { useEffectOnce } from '../../internal/useEffectOnce.js';
 import { useId } from '../../internal/useId.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
@@ -382,7 +381,7 @@ function TabList(_ref4) {
       }
     }
   }
-  useEffectOnce(() => {
+  useEffect(() => {
     const tab = tabs.current[selectedIndex];
     if (scrollIntoView && tab) {
       tab.scrollIntoView({
@@ -390,7 +389,7 @@ function TabList(_ref4) {
         inline: 'nearest'
       });
     }
-  });
+  }, []);
   useEffect(() => {
     //adding 1 in calculation for firefox support
     setIsNextButtonVisible(ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth + 1 < ref.current.scrollWidth : false);
@@ -400,7 +399,7 @@ function TabList(_ref4) {
       }
     }
   }, [scrollLeft, children, dismissable, isScrollable]);
-  useEffectOnce(() => {
+  useEffect(() => {
     if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {
         return !tab.disabled;
@@ -410,7 +409,7 @@ function TabList(_ref4) {
         setSelectedIndex(tabs.current.indexOf(tab));
       }
     }
-  });
+  }, []);
   useIsomorphicEffect(() => {
     if (ref.current) {
       // adding 1 in calculation for firefox support
@@ -624,7 +623,7 @@ function TabListVertical(_ref8) {
       setActiveIndex(selectedIndex);
     }
   }
-  useEffectOnce(() => {
+  useEffect(() => {
     if (tabs.current[selectedIndex]?.disabled) {
       const activeTabs = tabs.current.filter(tab => {
         return !tab.disabled;
@@ -634,7 +633,7 @@ function TabListVertical(_ref8) {
         setSelectedIndex(tabs.current.indexOf(tab));
       }
     }
-  });
+  }, []);
   useEffect(() => {
     function handler() {
       const containerHeight = ref.current?.offsetHeight;
@@ -1123,7 +1122,7 @@ const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref12
   const className = cx(`${prefix}--tab-content`, customClassName, {
     [`${prefix}--tab-content--interactive`]: interactiveContent
   });
-  useEffectOnce(() => {
+  useEffect(() => {
     if (!panel.current) {
       return;
     }
@@ -1132,7 +1131,7 @@ const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref12
       setInteractiveContent(true);
       setTabIndex(-1);
     }
-  });
+  }, []);
 
   // tabindex should only be 0 if no interactive content in children
   useEffect(() => {

package/es/components/Tile/Tile.js

@@ -255,14 +255,18 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
     evt?.persist?.();
     if (matches(evt, [Enter, Space])) {
       evt.preventDefault();
-      setIsSelected(!isSelected);
-      onChange(evt, isSelected, id);
+      setIsSelected(prevSelected => {
+        const newSelected = !prevSelected;
+        onChange(evt, newSelected, id);
+        return newSelected;
+      });
     }
     keyDownHandler(evt);
   }
   function handleChange(event) {
-    setIsSelected(event.target.checked);
-    onChange(event, isSelected, id);
+    const newSelected = event.target.checked;
+    setIsSelected(newSelected);
+    onChange(event, newSelected, id);
   }
   if (selected !== prevSelected) {
     setIsSelected(selected);

package/es/index.js

@@ -207,6 +207,7 @@ export { default as unstable_PageSelector } from './components/Pagination/experi
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
 export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as ContainedList } from './components/ContainedList/ContainedList.js';
+export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { default as TextInput } from './components/TextInput/TextInput.js';
@@ -238,4 +239,3 @@ export { default as TableToolbarContent } from './components/DataTable/TableTool
 export { default as TableToolbarSearch } from './components/DataTable/TableToolbarSearch.js';
 export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';
 export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
-export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';

package/es/internal/FloatingMenu.d.ts

@@ -10,8 +10,8 @@ export declare const DIRECTION_TOP = "top";
 export declare const DIRECTION_RIGHT = "right";
 export declare const DIRECTION_BOTTOM = "bottom";
 export interface Offset {
-    top?: number;
-    left?: number;
+    top: number;
+    left: number;
 }
 interface Container {
     rect: DOMRect;

package/es/internal/FloatingMenu.js

@@ -83,7 +83,10 @@ const FloatingMenu = _ref2 => {
     flipped,
     focusTrap,
     menuDirection = DIRECTION_BOTTOM,
-    menuOffset = {},
+    menuOffset = {
+      top: 0,
+      left: 0
+    },
     menuRef: externalMenuRef,
     onPlace,
     selectorPrimaryFocus,

package/es/internal/createClassWrapper.d.ts

@@ -1,12 +1,12 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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 { ComponentClass, FunctionComponent } from 'react';
+import { type ComponentClass, type ForwardRefExoticComponent, type FunctionComponent, type PropsWithChildren } from 'react';
 /**
  * Wrap a class component with a functional component. This prevents an end-user
  * from being able to pass `ref` and access the underlying class instance.
  */
-export declare function createClassWrapper<Props>(Component: ComponentClass<Props>): FunctionComponent<Props>;
+export declare const createClassWrapper: <Props extends PropsWithChildren>(Component: ComponentClass<Props> | ForwardRefExoticComponent<Props>) => FunctionComponent<Props>;

package/es/internal/createClassWrapper.js

@@ -11,13 +11,13 @@ import React__default from 'react';
  * Wrap a class component with a functional component. This prevents an end-user
  * from being able to pass `ref` and access the underlying class instance.
  */
-function createClassWrapper(Component) {
-  function ClassWrapper(props) {
+const createClassWrapper = Component => {
+  const ClassWrapper = props => {
     return /*#__PURE__*/React__default.createElement(Component, props);
-  }
+  };
   const name = Component.displayName || Component.name;
   ClassWrapper.displayName = `ClassWrapper(${name})`;
   return ClassWrapper;
-}
+};
 
 export { createClassWrapper };

package/es/internal/useMatchMedia.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/** Listens to changes in a media query and returns whether it matches. */
+export declare const useMatchMedia: (mediaQuery: string) => boolean;

package/es/internal/useMatchMedia.js

@@ -8,37 +8,27 @@
 import { useState, useEffect } from 'react';
 import { canUseDOM } from './environment.js';
 
-function useMatchMedia(mediaQueryString) {
+/** Listens to changes in a media query and returns whether it matches. */
+const useMatchMedia = mediaQuery => {
   const [matches, setMatches] = useState(() => {
     if (canUseDOM) {
-      const mediaQueryList = window.matchMedia(mediaQueryString);
+      const mediaQueryList = window.matchMedia(mediaQuery);
       return mediaQueryList.matches;
     }
     return false;
   });
   useEffect(() => {
-    function listener(event) {
+    const listener = event => {
       setMatches(event.matches);
-    }
-    const mediaQueryList = window.matchMedia(mediaQueryString);
-    // Support fallback to `addListener` for broader browser support
-    if (mediaQueryList.addEventListener) {
-      mediaQueryList.addEventListener('change', listener);
-    } else {
-      mediaQueryList.addListener(listener);
-    }
-
-    // Make sure the media query list is in sync with the matches state
+    };
+    const mediaQueryList = window.matchMedia(mediaQuery);
+    mediaQueryList.addEventListener('change', listener);
     setMatches(mediaQueryList.matches);
     return () => {
-      if (mediaQueryList.addEventListener) {
-        mediaQueryList.removeEventListener('change', listener);
-      } else {
-        mediaQueryList.removeListener(listener);
-      }
+      mediaQueryList.removeEventListener('change', listener);
     };
-  }, [mediaQueryString]);
+  }, [mediaQuery]);
   return matches;
-}
+};
 
 export { useMatchMedia };

package/es/internal/useNormalizedInputProps.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ *
+ * 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 { type ComponentType, type ReactNode } from 'react';
+interface InputProps {
+    /** The ID for the input. */
+    id: string;
+    /** Whether the input is read-only. */
+    readOnly?: boolean;
+    /** Whether the input is disabled. */
+    disabled: boolean;
+    /** Whether the input is an invalid state. */
+    invalid: boolean;
+    /** The message displayed when the input is invalid. */
+    invalidText?: ReactNode;
+    /** Whether the input is in a warning state. */
+    warn: boolean;
+    /** The message displayed when the input is in a warning state. */
+    warnText?: ReactNode;
+}
+interface NormalizedInputProps {
+    /** Disabled state. */
+    disabled: boolean;
+    /** Invalid state. */
+    invalid: boolean;
+    /** The generated ID for the error message. */
+    invalidId: string;
+    /** The generated ID for the helper text. */
+    helperId: string;
+    /** Warning state. */
+    warn: boolean;
+    /** The generated ID for the warning message. */
+    warnId: string;
+    /** A React node containing the validation message. */
+    validation: ReactNode | null;
+    /** A React component representing the accompanying icon. */
+    icon: ComponentType | null;
+}
+/**
+ * Returns an object containing normalized properties for an input component.
+ *
+ * This hook ensures that only one of `invalid` or `warn` is active (with
+ * `invalid` taking precedence) and that `readOnly` overrides the `disabled`,
+ * `invalid`, and `warn` states. It generates unique IDs for error, warning, and
+ * helper messages, and conditionally provides the appropriate validation
+ * message and accompanying icon.
+ */
+export declare const useNormalizedInputProps: ({ id, readOnly, disabled, invalid, invalidText, warn, warnText, }: InputProps) => NormalizedInputProps;
+export {};

package/es/internal/useNormalizedInputProps.js

@@ -7,47 +7,20 @@
 
 import React__default from 'react';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
-import { usePrefix } from './usePrefix.js';
 import '../components/Text/index.js';
+import { usePrefix } from './usePrefix.js';
 import { Text } from '../components/Text/Text.js';
 
 /**
- * @typedef {object} InputProps
- * @property {string} id - The input's id
- * @property {boolean | undefined} readOnly - Whether the input should be readonly
- * @property {boolean} disabled - Whether the input should be disabled
- * @property {boolean} invalid - Whether the input should be marked as invalid
- * @property {React.ReactNode | undefined} invalidText - The validation message displayed in case the input is considered invalid
- * @property {boolean} warn - Whether the input should be in warning state
- * @property {React.ReactNode | undefined} warnText - The validation message displayed in case the input is in warning state
- */
-
-/**
- * @typedef {object} NormalizedInputProps
- * @property {boolean} disabled - Whether the input is disabled
- * @property {boolean} invalid - Whether the input is invalid (takes precedence over warn)
- * @property {string} invalidId - The invalid message's id
- * @property {string} helperId - id used for helper text
- * @property {boolean} warn - Whether the input is in warning state
- * @property {string} warnId - The warning message's id
- * @property {React.ReactNode | null} validation – React node rendering the appropriate validation message (if any)
- * @property {React.ReactNode | null} icon – React node rendering the appropriate accompanying icon (if any)
- */
-
-/**
- * Returns an object containing non-colliding props and additional, generated ones.
- * This hook ensures that only either "invalid" or "warn" is true but never both at
- * the same time. Regardless whether "invalid" or "warn", the appropriate validation
- * message is passed as "validation". If the input should be accompanied by an icon
- * (to visually represent a readonly, invalid or warning state), the appropriate icon
- * is passed as "icon".
- * It also ensure that neither "invalid", nor "warn", nor "disabled" are enabled when
- * "readonly" is passed as "readonly" takes precedence over these variants.
+ * Returns an object containing normalized properties for an input component.
  *
- * @param {InputProps} props - The props passed to the component
- * @returns {NormalizedInputProps}
+ * This hook ensures that only one of `invalid` or `warn` is active (with
+ * `invalid` taking precedence) and that `readOnly` overrides the `disabled`,
+ * `invalid`, and `warn` states. It generates unique IDs for error, warning, and
+ * helper messages, and conditionally provides the appropriate validation
+ * message and accompanying icon.
  */
-function useNormalizedInputProps(_ref) {
+const useNormalizedInputProps = _ref => {
   let {
     id,
     readOnly,
@@ -84,6 +57,6 @@ function useNormalizedInputProps(_ref) {
     }, warnText);
   }
   return normalizedProps;
-}
+};
 
 export { useNormalizedInputProps };

package/lib/components/Button/Button.js

@@ -85,23 +85,34 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef((props, ref) =>
     if (tooltipPosition === 'right' || tooltipPosition === 'left') {
       align = tooltipPosition;
     }
-    return /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({}, rest, {
-      ref: ref,
-      as: as,
-      align: align,
-      label: iconDescription,
-      kind: kind,
-      size: size,
-      highContrast: tooltipHighContrast,
-      dropShadow: tooltipDropShadow,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      autoAlign: autoAlign,
-      onClick: events.composeEventHandlers([onClick, handleClick]),
-      renderIcon: iconOnlyImage ? null : ButtonImageElement // avoid doubling the icon.
-    }), iconOnlyImage ?? children);
+    return (
+      /*#__PURE__*/
+      // @ts-expect-error - `IconButton` does not support all `size`s that
+      // `Button` supports.
+      //
+      // TODO: What should be done here?
+      // 1. Should the `IconButton` not be rendered if the `size` is not
+      //    supported?
+      // 2. Should an error be thrown?
+      // 3. Something else?
+      React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({}, rest, {
+        ref: ref,
+        as: as,
+        align: align,
+        label: iconDescription,
+        kind: kind,
+        size: size,
+        highContrast: tooltipHighContrast,
+        dropShadow: tooltipDropShadow,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        autoAlign: autoAlign,
+        onClick: events.composeEventHandlers([onClick, handleClick]),
+        renderIcon: iconOnlyImage ? null : ButtonImageElement // avoid doubling the icon.
+      }), iconOnlyImage ?? children)
+    );
   }
 });
 Button.displayName = 'Button';

package/lib/components/Button/ButtonBase.js

@@ -50,6 +50,8 @@ const ButtonBase = /*#__PURE__*/React__default["default"].forwardRef(function Bu
     // TODO: V12 - Remove this class
     [`${prefix}--btn--md`]: size === 'md' && !isExpressive,
     // TODO: V12 - Remove this class
+    [`${prefix}--btn--lg`]: size === 'lg' && !isExpressive,
+    // TODO: V12 - Remove this class
     [`${prefix}--btn--xl`]: size === 'xl',
     // TODO: V12 - Remove this class
     [`${prefix}--btn--2xl`]: size === '2xl',