@carbon/react 1.76.0 → 1.77.0

package/lib/components/ContentSwitcher/index.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 import { ContentSwitcherProps } from './ContentSwitcher';
 declare const ContentSwitcher: import("react").FunctionComponent<ContentSwitcherProps>;
 export default ContentSwitcher;

package/lib/components/ContextMenu/useContextMenu.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 type TriggerType = Element | Document | Window | React.RefObject<Element>;
 export interface ContextMenuProps {
     open: boolean;

package/lib/components/Copy/Copy.js

@@ -12,13 +12,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
-var compat = require('es-toolkit/compat');
 var cx = require('classnames');
 var events = require('../../tools/events.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var index = require('../IconButton/index.js');
 var noopFn = require('../../internal/noopFn.js');
 var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
+var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -58,7 +58,7 @@ function Copy(_ref) {
     [`${prefix}--copy-btn--${animation}`]: animation
   });
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const handleFadeOut = React.useCallback(compat.debounce(() => {
+  const handleFadeOut = React.useCallback(debounce.debounce(() => {
     setAnimation('fade-out');
   }, feedbackTimeout), [feedbackTimeout]);
   const handleClick = React.useCallback(() => {

package/lib/components/DataTable/DataTable.d.ts

@@ -6,7 +6,6 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-import type { MouseEvent } from 'react';
 import type { DataTableSortState } from './state/sortStates';
 import Table from './Table';
 import TableActionList from './TableActionList';
@@ -100,7 +99,6 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         onExpand?: (e: React.MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
     }) => {
-        ariaLabel: string;
         ['aria-label']: string;
         isExpanded: boolean;
         onExpand: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -111,7 +109,6 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         row: DataTableRow<ColTypes>;
         [key: string]: unknown;
     }) => {
-        ariaLabel: string;
         ['aria-label']: string;
         disabled: boolean | undefined;
         isExpanded?: boolean;
@@ -132,7 +129,6 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         row: DataTableRow<ColTypes>;
         [key: string]: unknown;
     }) => {
-        ariaLabel: string;
         'aria-label': string;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -349,13 +345,13 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      * @returns {object}
      */
     getHeaderProps: ({ header, onClick, isSortable, ...rest }: {
-        [key: string]: unknown;
         header: DataTableHeader;
-        onClick?: ((e: React.MouseEvent<HTMLButtonElement>, sortState: {
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>, sortState: {
             sortHeaderKey: string;
             sortDirection: DataTableSortState;
-        }) => void) | undefined;
-        isSortable?: boolean | undefined;
+        }) => void;
+        isSortable?: boolean;
+        [key: string]: unknown;
     }) => {
         key: string;
         sortDirection: DataTableSortState;
@@ -375,12 +371,11 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      */
     getExpandHeaderProps: ({ onClick, onExpand, ...rest }?: {
         [key: string]: unknown;
-        onClick?: ((e: React.MouseEvent<HTMLButtonElement>, expandState: {
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>, expandState: {
             isExpanded: boolean;
-        }) => void) | undefined;
-        onExpand?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+        }) => void;
+        onExpand?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     }) => {
-        ariaLabel: any;
         'aria-label': any;
         'aria-controls': string;
         isExpanded: boolean;
@@ -411,14 +406,13 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      * @returns {object}
      */
     getRowProps: ({ row, onClick, ...rest }: {
-        [key: string]: unknown;
-        onClick?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
         row: DataTableRow<ColTypes>;
+        [key: string]: unknown;
     }) => {
         key: string;
         onExpand: any;
         isExpanded: boolean | undefined;
-        ariaLabel: any;
         'aria-label': any;
         'aria-controls': string;
         isSelected: boolean | undefined;
@@ -432,8 +426,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      * @returns {object}
      */
     getExpandedRowProps: ({ row, ...rest }: {
-        [key: string]: unknown;
         row: DataTableRow<ColTypes>;
+        [key: string]: unknown;
     }) => {
         id: string;
     };
@@ -449,19 +443,17 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      */
     getSelectionProps: ({ onClick, row, ...rest }?: {
         [key: string]: unknown;
-        onClick?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
         row: DataTableRow<ColTypes>;
     }) => {
         checked: boolean | undefined;
         onSelect: any;
         id: string;
         name: string;
-        ariaLabel: any;
         'aria-label': any;
         disabled: boolean | undefined;
         radio: boolean | undefined;
     } | {
-        ariaLabel: any;
         'aria-label': any;
         checked: boolean;
         id: string;
@@ -470,8 +462,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         onSelect: any;
     };
     getToolbarProps: (props?: {}) => {
+        size: "sm" | undefined;
         [key: string]: unknown;
-        size: 'sm' | undefined;
     };
     getBatchActionProps: (props?: {}) => {
         shouldShowBatchActions: boolean;

package/lib/components/DataTable/DataTable.js

@@ -160,8 +160,6 @@ class DataTable extends React__default["default"].Component {
       const translationKey = isExpanded ? translationKeys.collapseAll : translationKeys.expandAll;
       return {
         ...rest,
-        ariaLabel: t(translationKey),
-        // TODO: remove in v12
         'aria-label': t(translationKey),
         // Provide a string of all the expanded row id's, separated by a space.
         'aria-controls': rowIds.map(id => `expanded-row-${id}`).join(' '),
@@ -218,8 +216,6 @@ class DataTable extends React__default["default"].Component {
         // handler
         onExpand: events.composeEventHandlers([this.handleOnExpandRow(row.id), onClick]),
         isExpanded: row.isExpanded,
-        ariaLabel: t(translationKey),
-        // TODO remove in v12
         'aria-label': t(translationKey),
         'aria-controls': `expanded-row-${row.id}`,
         isSelected: row.isSelected,
@@ -272,8 +268,6 @@ class DataTable extends React__default["default"].Component {
           onSelect: events.composeEventHandlers([_this.handleOnSelectRow(row.id), onClick]),
           id: `${_this.getTablePrefix()}__select-row-${row.id}`,
           name: `select-row-${_this.instanceId}`,
-          ariaLabel: t(translationKey),
-          // TODO remove in v12
           'aria-label': t(translationKey),
           disabled: row.disabled,
           radio: _this.props.radio
@@ -289,13 +283,11 @@ class DataTable extends React__default["default"].Component {
       const translationKey = checked || indeterminate ? translationKeys.unselectAll : translationKeys.selectAll;
       return {
         ...rest,
-        ariaLabel: t(translationKey),
-        // TODO remove in v12
         'aria-label': t(translationKey),
         checked,
         id: `${_this.getTablePrefix()}__select-all`,
         indeterminate,
-        name: 'select-all',
+        name: `select-all-${_this.instanceId}`,
         onSelect: events.composeEventHandlers([_this.handleSelectAll, onClick])
       };
     });

package/lib/components/DataTable/Table.js

@@ -13,11 +13,11 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
-var compat = require('es-toolkit/compat');
 var usePrefix = require('../../internal/usePrefix.js');
 var TableContext = require('./TableContext.js');
 var useEvent = require('../../internal/useEvent.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
+var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -108,7 +108,7 @@ const Table = _ref => {
       toggleTableHeaderAlignmentClass(false);
     }
   }, [experimentalAutoAlign, toggleTableBodyAlignmentClass, toggleTableHeaderAlignmentClass, prefix]);
-  const debouncedSetTableAlignment = compat.debounce(setTableAlignment, 100);
+  const debouncedSetTableAlignment = debounce.debounce(setTableAlignment, 100);
   useEvent.useWindowEvent('resize', debouncedSetTableAlignment);
 
   // Used to set a tabIndex when the Table is horizontally scrollable
@@ -121,7 +121,7 @@ const Table = _ref => {
       setIsScrollable(false);
     }
   }, []);
-  const debouncedSetTabIndex = compat.debounce(setTabIndex, 100);
+  const debouncedSetTabIndex = debounce.debounce(setTabIndex, 100);
   useEvent.useWindowEvent('resize', debouncedSetTabIndex);
   useIsomorphicEffect["default"](() => {
     setTabIndex();

package/lib/components/DataTable/TableActionList.d.ts

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const TableActionList: (props: import("../../types/common").ReactAttr<"div">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const TableActionList: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement;
 export default TableActionList;

package/lib/components/DataTable/TableBody.js

@@ -25,7 +25,7 @@ const TableBody = _ref => {
     ...rest
   } = _ref;
   return /*#__PURE__*/React__default["default"].createElement("tbody", _rollupPluginBabelHelpers["extends"]({
-    "aria-live": 'polite' ,
+    "aria-live": rest['aria-live'] ?? 'polite',
     className: className
   }, rest), children);
 };

package/lib/components/DataTable/TableContext.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 interface TableContextType {
     titleId?: string;
     descriptionId?: string;

package/lib/components/DataTable/TableHead.d.ts

@@ -6,5 +6,5 @@
  */
 import { ThHTMLAttributes } from 'react';
 export type TableHeadProps = ThHTMLAttributes<HTMLTableSectionElement>;
-declare const TableHead: (props: import("../../types/common").ReactAttr<"thead">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const TableHead: (props: import("../../types/common").ReactAttr<"thead">) => React.ReactElement;
 export default TableHead;

package/lib/components/DataTable/TableToolbarContent.d.ts

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const TableToolbarContent: (props: import("../../types/common").ReactAttr<"div">) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const TableToolbarContent: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement;
 export default TableToolbarContent;

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

@@ -85,7 +85,7 @@ var carbonFlatpickrFixEventsPlugin = config => fp => {
       const currentValueToDate = withoutTime(parseDateWithFormat(inputTo.value));
 
       // The date should only be set if both dates are valid dates, and they don't match.
-      // When they don't match, this indiciates that the date selected in the calendar is stale,
+      // When they don't match, this indicates that the date selected in the calendar is stale,
       // and the current value in the input should be set for the calendar to update.
       if (selectedToDate && currentValueToDate && selectedToDate !== currentValueToDate) {
         // Update the calendar with the value of the `to` date input
@@ -93,7 +93,7 @@ var carbonFlatpickrFixEventsPlugin = config => fp => {
       }
     }
     const isValidDate = date => date?.toString() !== 'Invalid Date';
-    // save end date in calendar inmediately after it's been written down
+    // save end date in calendar immediately after it's been written down
     if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
       if (isValidDate(parseDateWithFormat(inputTo.value))) {
         fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -94,7 +94,7 @@ const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(functi
     [`${prefix}--date-picker--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--date-picker--fluid--warn`]: isFluid && warn
   });
-  const datePickerInputHelperId = !helperText ? undefined : `detepicker-input-helper-text-${datePickerInputInstanceId}`;
+  const datePickerInputHelperId = !helperText ? undefined : `datepicker-input-helper-text-${datePickerInputInstanceId}`;
   const inputProps = {
     ...rest,
     ...datePickerInputProps,

package/lib/components/Dropdown/Dropdown.js

@@ -23,7 +23,6 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var useId = require('../../internal/useId.js');
 var react = require('@floating-ui/react');
-var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
 var index = require('../FeatureFlags/index.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
@@ -142,7 +141,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
           width: `${rects.reference.width}px`
         });
       }
-    }), autoAlign && react.flip(), autoAlign && floatingUi_dom.hide()],
+    }), autoAlign && react.flip(), autoAlign && react.hide()],
     whileElementsMounted: react.autoUpdate
   } : {}
   // When autoAlign is turned off & the `enable-v12-dynamic-floating-styles` feature flag is not

package/lib/components/FluidForm/FormContext.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 export interface FormContextProps {
     isFluid?: boolean;
 }

package/lib/components/Grid/CSSGrid.js

@@ -73,7 +73,7 @@ function CSSGrid(_ref) {
 }
 CSSGrid.propTypes = {
   /**
-   * Specify grid aligment. Default is center
+   * Specify grid alignment. Default is center
    */
   align: PropTypes__default["default"].oneOf(['start', 'center', 'end']),
   /**

package/lib/components/Grid/Grid.js

@@ -29,7 +29,7 @@ function Grid(props) {
 }
 Grid.propTypes = {
   /**
-   * Specify grid aligment. Default is center
+   * Specify grid alignment. Default is center
    */
   align: PropTypes__default["default"].oneOf(['start', 'center', 'end']),
   /**

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

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 import { PolymorphicProps } from '../../types/common';
 export interface GridBaseProps {
     /**

package/lib/components/Heading/index.d.ts

@@ -11,6 +11,6 @@ type SectionBaseProps = {
     level?: HeadingLevel;
 };
 export type SectionProps<E extends ElementType> = PolymorphicProps<E, SectionBaseProps>;
-export declare const Section: React.ForwardRefExoticComponent<Omit<SectionProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
+export declare const Section: React.ForwardRefExoticComponent<Omit<SectionProps<React.ElementType>, "ref"> & React.RefAttributes<unknown>>;
 export declare const Heading: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export {};

package/lib/components/IconButton/index.d.ts

@@ -23,7 +23,7 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     /**
      * Optionally specify an href for your IconButton to become an `<a>` element
      */
-    href?: string;
+    href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];
     /**
      * Provide an icon or asset to be rendered inside of the IconButton
      */
@@ -44,10 +44,18 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * Specify whether the Button should be disabled, or not
      */
     disabled?: boolean;
+    /**
+     * Specify whether a drop shadow should be rendered on the tooltip
+     */
+    dropShadow?: boolean;
     /**
      * Specify the duration in milliseconds to delay before displaying the tooltip
      */
     enterDelayMs?: number;
+    /**
+     * Render the tooltip using the high-contrast theme
+     */
+    highContrast?: boolean;
     /**
      * Specify whether the IconButton is currently selected
      */
@@ -67,10 +75,18 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * Specify the duration in milliseconds to delay before hiding the tooltip
      */
     leaveDelayMs?: number;
+    /**
+     * Optionally specify a `rel` when using an `<a>` element.
+     */
+    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     /**
      * Specify the size of the Button. Defaults to `md`.
      */
     size?: ButtonSize;
+    /**
+     * Optionally specify a `target` when using an `<a>` element.
+     */
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
     /**
      * Specify an optional className to be added to your Tooltip wrapper
      */

package/lib/components/IconButton/index.js

@@ -48,7 +48,9 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     closeOnActivation = true,
     defaultOpen = false,
     disabled,
+    dropShadow = false,
     enterDelayMs = 100,
+    highContrast = true,
     kind,
     label,
     leaveDelayMs = 100,
@@ -67,7 +69,9 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     closeOnActivation: closeOnActivation,
     className: tooltipClasses,
     defaultOpen: defaultOpen,
+    dropShadow: dropShadow,
     enterDelayMs: enterDelayMs,
+    highContrast: highContrast,
     label: label,
     leaveDelayMs: leaveDelayMs
   }, /*#__PURE__*/React__default["default"].createElement(ButtonBase["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
@@ -134,6 +138,10 @@ IconButton.propTypes = {
    * Specify whether the tooltip should be open when it first renders
    */
   defaultOpen: PropTypes__default["default"].bool,
+  /**
+   * Specify whether a drop shadow should be rendered on the tooltip
+   */
+  dropShadow: PropTypes__default["default"].bool,
   /**
    * Specify whether the Button should be disabled, or not
    */
@@ -145,8 +153,11 @@ IconButton.propTypes = {
   /**
    * Specify whether the IconButton is currently selected
    */
-
   isSelected: PropTypes__default["default"].bool,
+  /**
+   * Render the tooltip using the high-contrast theme
+   */
+  highContrast: PropTypes__default["default"].bool,
   /**
    * Specify the type of button to be used as the base for the IconButton
    */
@@ -162,10 +173,18 @@ IconButton.propTypes = {
    * Specify the duration in milliseconds to delay before hiding the tooltip
    */
   leaveDelayMs: PropTypes__default["default"].number,
+  /**
+   * Optionally specify a `rel` when using an `<a>` element.
+   */
+  rel: PropTypes__default["default"].string,
   /**
    * Specify the size of the Button. Defaults to `md`.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+  /**
+   * Optionally specify a `target` when using an `<a>` element.
+   */
+  target: PropTypes__default["default"].string,
   /**
    * Specify an optional className to be added to your Tooltip wrapper
    */

package/lib/components/InlineCheckbox/InlineCheckbox.js

@@ -104,7 +104,7 @@ InlineCheckbox.propTypes = {
    */
   id: PropTypes__default["default"].string.isRequired,
   /**
-   * Specify whether the control is in an indterminate state
+   * Specify whether the control is in an indeterminate state
    */
   indeterminate: PropTypes__default["default"].bool,
   /**

package/lib/components/InlineLoading/InlineLoading.d.ts

@@ -1,5 +1,5 @@
 /**
- * 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.

package/lib/components/InlineLoading/InlineLoading.js

@@ -35,6 +35,22 @@ const InlineLoading = _ref => {
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const loadingClasses = cx__default["default"](`${prefix}--inline-loading`, className);
+  const timerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (status === 'finished') {
+      timerRef.current = setTimeout(() => {
+        if (onSuccess) {
+          onSuccess();
+        }
+      }, successDelay);
+    }
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [status, onSuccess, successDelay]);
   const getLoading = () => {
     let iconLabel = iconDescription ? iconDescription : status;
     if (status === 'error') {
@@ -43,11 +59,6 @@ const InlineLoading = _ref => {
       }, /*#__PURE__*/React__default["default"].createElement("title", null, iconLabel));
     }
     if (status === 'finished') {
-      setTimeout(() => {
-        if (onSuccess) {
-          onSuccess();
-        }
-      }, successDelay);
       return /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckmarkFilled, {
         className: `${prefix}--inline-loading__checkmark-container`
       }, /*#__PURE__*/React__default["default"].createElement("title", null, iconLabel));
@@ -65,6 +76,9 @@ const InlineLoading = _ref => {
     }
     return undefined;
   };
+
+  // TODO: Should this element only be constructed, similar to
+  // `loadingAnimation`, if `description` is specified?
   const loadingText = /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--inline-loading__text`
   }, description);
@@ -75,7 +89,7 @@ const InlineLoading = _ref => {
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: loadingClasses
   }, rest, {
-    "aria-live": 'assertive' 
+    "aria-live": rest['aria-live'] ?? 'assertive'
   }), loadingAnimation, description && loadingText);
 };
 InlineLoading.propTypes = {

package/lib/components/Menu/Menu.js

@@ -201,7 +201,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
       }
     };
 
-    // Avoid that the Menu render incorrectly when the postion is set in the right side of the screen
+    // Avoid that the Menu render incorrectly when the position is set in the right side of the screen
     if (actionButtonWidth && actionButtonWidth < axes.x.size && (menuAlignment === 'bottom' || menuAlignment === 'top')) {
       axes.x.size = actionButtonWidth;
     }
@@ -229,7 +229,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     max - spacing - size];
     const topAlignment = menuAlignment === 'top' || menuAlignment === 'top-end' || menuAlignment === 'top-start';
 
-    // If the tooltip is not visible in the top, switch to the bototm
+    // If the tooltip is not visible in the top, switch to the bottom
     if (typeof options[0] === 'number' && topAlignment && options[0] >= 0 && !options[1] && axis === 'y') {
       menu.current.style.transform = 'translate(0)';
     } else if (topAlignment && !options[0] && axis === 'y') {

package/lib/components/Menu/MenuContext.d.ts

@@ -21,7 +21,7 @@ declare function menuReducer(state: StateType, action: ActionType): {
     hasIcons: boolean;
     isRoot: boolean;
     mode: "full" | "basic";
-    size: "sm" | "md" | "lg" | "xs" | null;
+    size: "xs" | "sm" | "md" | "lg" | null;
     items: any[];
     requestCloseRoot: (e: Pick<KeyboardEvent<HTMLUListElement>, "type">) => void;
 };

package/lib/components/MenuButton/index.d.ts

@@ -30,7 +30,7 @@ export interface MenuButtonProps extends ComponentProps<'div'> {
     /**
      * Experimental property. Specify how the menu should align with the button element
      */
-    menuAlignment: MenuAlignment;
+    menuAlignment?: MenuAlignment;
     /**
      * Specify the size of the button and menu.
      */

package/lib/components/MenuButton/index.js

@@ -162,13 +162,12 @@ MenuButton.propTypes = {
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   kind: PropTypes__default["default"].oneOf(validButtonKinds),
   /**
-   * Provide the label to be renderd on the trigger button.
+   * Provide the label to be rendered on the trigger button.
    */
   label: PropTypes__default["default"].string.isRequired,
   /**
    * Experimental property. Specify how the menu should align with the button element
    */
-  // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   menuAlignment: PropTypes__default["default"].oneOf(['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end']),
   /**
    * Specify the size of the button and menu.

package/lib/components/Modal/Modal.js

@@ -22,7 +22,6 @@ var InlineLoading = require('../InlineLoading/InlineLoading.js');
 var index$1 = require('../Layer/index.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
-var compat = require('es-toolkit/compat');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -32,6 +31,7 @@ require('../Text/index.js');
 var index = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
+var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -232,7 +232,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
         setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
       }
     }
-    const debouncedHandler = compat.debounce(handler, 200);
+    const debouncedHandler = debounce.debounce(handler, 200);
     window.addEventListener('resize', debouncedHandler);
     return () => {
       debouncedHandler.cancel();