@carbon/react 1.72.0 → 1.73.0

package/lib/components/DataTable/TableExpandRow.js

@@ -39,18 +39,18 @@ const TableExpandRow = /*#__PURE__*/React__default["default"].forwardRef((_ref,
   } = _ref;
   const prefix = usePrefix.usePrefix();
 
-  // We need to put the slug before the expansion arrow and all other table cells after the arrow.
-  let rowHasSlug;
-  const slug = React__default["default"].Children.toArray(children).map(child => {
-    if (child.type?.displayName === 'TableSlugRow') {
-      if (child.props.slug) {
-        rowHasSlug = true;
+  // We need to put the AILabel and Decorator before the expansion arrow and all other table cells after the arrow.
+  let rowHasAILabel;
+  const decorator = React__default["default"].Children.toArray(children).map(child => {
+    if (child.type?.displayName === 'TableSlugRow' || child.type?.displayName === 'TableDecoratorRow') {
+      if (child.props.slug || child.props.decorator?.type.displayName === 'AILabel') {
+        rowHasAILabel = true;
       }
       return child;
     }
   });
   const normalizedChildren = React__default["default"].Children.toArray(children).map(child => {
-    if (child.type?.displayName !== 'TableSlugRow') {
+    if (child.type?.displayName !== 'TableSlugRow' && child.type?.displayName !== 'TableDecoratorRow') {
       return child;
     }
   });
@@ -58,14 +58,14 @@ const TableExpandRow = /*#__PURE__*/React__default["default"].forwardRef((_ref,
     [`${prefix}--parent-row`]: true,
     [`${prefix}--expandable-row`]: isExpanded,
     [`${prefix}--data-table--selected`]: isSelected,
-    [`${prefix}--data-table--slug-row`]: rowHasSlug
+    [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
   }, rowClassName);
   const previousValue = isExpanded ? 'collapsed' : undefined;
   return /*#__PURE__*/React__default["default"].createElement("tr", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref,
     className: className,
     "data-parent-row": true
-  }), slug, /*#__PURE__*/React__default["default"].createElement(TableCell["default"], {
+  }), decorator, /*#__PURE__*/React__default["default"].createElement(TableCell["default"], {
     className: `${prefix}--table-expand`,
     "data-previous-value": previousValue,
     headers: expandHeader

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

@@ -58,9 +58,14 @@ interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonEl
      */
     scope?: string;
     /**
-     * **Experimental**: Provide a `Slug` component to be rendered inside the `TableSlugRow` component
+     * @deprecated please use decorator instead.
+     * Provide a `Slug` component to be rendered inside the `TableSlugRow` component
      */
     slug?: ReactNode;
+    /**
+     * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
+     */
+    decorator?: ReactNode;
     /**
      * Specify which direction we are currently sorting by, should be one of DESC,
      * NONE, or ASC.

package/lib/components/DataTable/TableHeader.js

@@ -56,6 +56,7 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
     className: headerClassName,
     children,
     colSpan,
+    decorator,
     isSortable = false,
     isSortHeader,
     onClick,
@@ -69,18 +70,21 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
   const prefix = usePrefix.usePrefix();
   const uniqueId = useId.useId('table-sort');
 
-  // Slug is always size `mini`
-  const slugRef = React.useRef(null);
-  let normalizedSlug;
-  if (slug) {
-    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+  // AILabel is always size `mini`
+  const AILableRef = React.useRef(null);
+  let colHasAILabel;
+  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
+    colHasAILabel = true;
+    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
       size: 'mini',
-      ref: slugRef
+      ref: AILableRef
     });
   }
   const headerLabelClassNames = cx__default["default"]({
     [`${prefix}--table-header-label`]: true,
-    [`${prefix}--table-header-label--slug`]: slug
+    [`${prefix}--table-header-label--slug ${prefix}--table-header-label--ai-label`]: colHasAILabel,
+    [`${prefix}--table-header-label--decorator`]: decorator
   });
   if (!isSortable) {
     return /*#__PURE__*/React__default["default"].createElement("th", _rollupPluginBabelHelpers["extends"]({}, rest, {
@@ -91,7 +95,9 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
       ref: ref
     }), children ? /*#__PURE__*/React__default["default"].createElement("div", {
       className: headerLabelClassNames
-    }, children, normalizedSlug) : null);
+    }, children, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: `${prefix}--table-header-label--decorator-inner`
+    }, normalizedDecorator)) : null);
   }
   const className = cx__default["default"](headerClassName, {
     [`${prefix}--table-sort`]: true,
@@ -106,10 +112,11 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
     sortStates: sortStates.sortStates
   });
   const headerClasses = cx__default["default"](headerClassName, `${prefix}--table-sort__header`, {
-    [`${prefix}--table-sort__header--slug`]: slug
+    [`${prefix}--table-sort__header--ai-label`]: colHasAILabel,
+    [`${prefix}--table-sort__header--decorator`]: decorator
   });
   const handleClick = evt => {
-    if (slug && slugRef.current && slugRef.current.contains(evt.target)) {
+    if (colHasAILabel && AILableRef.current && AILableRef.current.contains(evt.target)) {
       return;
     } else if (onClick) {
       return onClick(evt);
@@ -140,7 +147,9 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
   }), /*#__PURE__*/React__default["default"].createElement(iconsReact.ArrowsVertical, {
     size: 20,
     className: `${prefix}--table-sort__icon-unsorted`
-  }), normalizedSlug)));
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--table-header-label--decorator-inner`
+  }, normalizedDecorator))));
 });
 TableHeader.propTypes = {
   /**

package/lib/components/DataTable/TableRow.js

@@ -11,7 +11,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var PropTypes = require('prop-types');
-var omit = require('lodash.omit');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
 
@@ -19,17 +18,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const TableRow = props => {
   const prefix = usePrefix.usePrefix();
-  let rowHasSlug;
+  let rowHasAILabel;
   if (props?.children) {
     React__default["default"].Children.toArray(props.children).map(child => {
-      if (child.type?.displayName === 'TableSlugRow') {
-        if (child.props.slug) {
-          rowHasSlug = true;
+      if (child.type?.displayName === 'TableSlugRow' || child.type?.displayName === 'TableDecoratorRow') {
+        if (child.props.slug || child.props.decorator?.type.displayName === 'AILabel') {
+          rowHasAILabel = true;
         }
       }
     });
@@ -38,12 +36,20 @@ const TableRow = props => {
   // only useful in `TableExpandRow`
   const className = cx__default["default"](props.className, {
     [`${prefix}--data-table--selected`]: props.isSelected,
-    [`${prefix}--data-table--slug-row`]: rowHasSlug
+    [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
   });
-  const cleanProps = {
-    ...omit__default["default"](props, ['ariaLabel', 'aria-label', 'aria-controls', 'onExpand', 'isExpanded', 'isSelected']),
-    className: className || undefined
-  };
+  const {
+    ariaLabel,
+    'aria-label': ariaLabelAlt,
+    'aria-controls': ariaControls,
+    onExpand,
+    isExpanded,
+    isSelected,
+    ...cleanProps
+  } = props;
+  if (className) {
+    cleanProps.className = className;
+  }
   return /*#__PURE__*/React__default["default"].createElement("tr", cleanProps);
 };
 TableRow.propTypes = {

package/lib/components/DataTable/TableSlugRow.js

@@ -13,6 +13,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var deprecateComponent = require('../../prop-types/deprecateComponent.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,6 +26,9 @@ const TableSlugRow = _ref => {
     className,
     slug
   } = _ref;
+  React.useEffect(() => {
+    deprecateComponent["default"]('TableSlugRow', 'The `TableSlugRow` component has been deprecated and will be removed in the next major version. Use the TableDecoratorRow component instead.');
+  }, []);
   const prefix = usePrefix.usePrefix();
   const TableSlugRowClasses = cx__default["default"]({
     ...(className && {

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

@@ -13,6 +13,7 @@ import TableBody from './TableBody';
 import TableCell from './TableCell';
 import TableContainer from './TableContainer';
 import TableExpandHeader from './TableExpandHeader';
+import TableDecoratorRow from './TableDecoratorRow';
 import TableExpandRow from './TableExpandRow';
 import TableExpandedRow from './TableExpandedRow';
 import TableHead from './TableHead';
@@ -27,5 +28,5 @@ import TableToolbarContent from './TableToolbarContent';
 import TableToolbarSearch from './TableToolbarSearch';
 import TableToolbarMenu from './TableToolbarMenu';
 import type { DataTableSortState } from './state/sortStates';
-export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableSortState, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, type TableHeaderTranslationKey, type TableHeaderTranslationArgs, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
+export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableSortState, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, type TableHeaderTranslationKey, type TableHeaderTranslationArgs, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
 export default DataTable;

package/lib/components/DataTable/index.js

@@ -18,6 +18,7 @@ var TableBody = require('./TableBody.js');
 var TableCell = require('./TableCell.js');
 var TableContainer = require('./TableContainer.js');
 var TableExpandHeader = require('./TableExpandHeader.js');
+var TableDecoratorRow = require('./TableDecoratorRow.js');
 var TableExpandRow = require('./TableExpandRow.js');
 var TableExpandedRow = require('./TableExpandedRow.js');
 var TableHead = require('./TableHead.js');
@@ -39,6 +40,7 @@ DataTable["default"].TableBatchActions = TableBatchActions["default"];
 DataTable["default"].TableBody = TableBody["default"];
 DataTable["default"].TableCell = TableCell["default"];
 DataTable["default"].TableContainer = TableContainer["default"];
+DataTable["default"].TableDecoratorRow = TableDecoratorRow["default"];
 DataTable["default"].TableExpandHeader = TableExpandHeader["default"];
 DataTable["default"].TableExpandRow = TableExpandRow["default"];
 DataTable["default"].TableExpandedRow = TableExpandedRow["default"];
@@ -64,6 +66,7 @@ exports.TableBody = TableBody["default"];
 exports.TableCell = TableCell["default"];
 exports.TableContainer = TableContainer["default"];
 exports.TableExpandHeader = TableExpandHeader["default"];
+exports.TableDecoratorRow = TableDecoratorRow["default"];
 exports.TableExpandRow = TableExpandRow["default"];
 exports.TableExpandedRow = TableExpandedRow["default"];
 exports.TableHead = TableHead["default"];

package/lib/components/DataTable/tools/normalize.js

@@ -53,7 +53,8 @@ const normalize = function (rows, headers) {
     headers.forEach((_ref, i) => {
       let {
         key,
-        slug
+        slug,
+        decorator
       } = _ref;
       const id = cells.getCellId(row.id, key);
       // Initialize the cell info and state values, namely for editing
@@ -64,7 +65,7 @@ const normalize = function (rows, headers) {
         isEditing: false,
         isValid: true,
         errors: null,
-        hasSlugHeader: !!slug,
+        hasAILabelHeader: !!(slug || decorator?.type?.displayName === 'AILabel'),
         info: {
           header: key
         }

package/lib/components/Modal/Modal.js

@@ -22,7 +22,7 @@ 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 debounce = require('lodash.debounce');
+var compat = require('es-toolkit/compat');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -41,7 +41,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
 const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_ref, ref) {
@@ -233,7 +232,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
         setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
       }
     }
-    const debouncedHandler = debounce__default["default"](handler, 200);
+    const debouncedHandler = compat.debounce(handler, 200);
     window.addEventListener('resize', debouncedHandler);
     return () => {
       debouncedHandler.cancel();

package/lib/components/Popover/index.js

@@ -71,6 +71,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     highContrast = false,
     onRequestClose,
     open,
+    alignmentAxisOffset,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -96,7 +97,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
   // needs to be placed 1px further outside the popover content. To do so,
   // we look to see if any of the children has a className containing "slug"
   const initialCaretHeight = React__default["default"].Children.toArray(children).some(x => {
-    return x?.props?.className?.includes('slug');
+    return x?.props?.className?.includes('slug') || x?.props?.className?.includes('ai-label');
   }) ? 7 : 6;
   // These defaults match the defaults defined in packages/styles/scss/components/popover/_popover.scss
   const popoverDimensions = React.useRef({
@@ -138,7 +139,10 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     // https://floating-ui.com/docs/misc#clipping
     strategy: 'fixed',
     // Middleware order matters, arrow should be last
-    middleware: [react.offset(!isTabTip ? popoverDimensions?.current?.offset : 0), autoAlign && react.flip({
+    middleware: [react.offset(!isTabTip ? {
+      alignmentAxis: alignmentAxisOffset,
+      mainAxis: popoverDimensions?.current?.offset
+    } : 0), autoAlign && react.flip({
       fallbackPlacements: align.includes('bottom') ? ['bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'top', 'top-start', 'top-end'] : ['top', 'top-start', 'top-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end'],
       fallbackStrategy: 'initialPlacement',
       fallbackAxisSideDirection: 'start',

package/lib/components/Search/Search.js

@@ -131,7 +131,7 @@ const Search = /*#__PURE__*/React__default["default"].forwardRef(function Search
     className: searchClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     "aria-label": onExpand ? 'button' : undefined,
-    "aria-labelledby": onExpand ? uniqueId : undefined,
+    "aria-labelledby": onExpand ? searchId : undefined,
     role: onExpand ? 'button' : undefined,
     className: `${prefix}--search-magnifier`,
     onClick: onExpand,

package/lib/components/Slider/Slider.Skeleton.d.ts

@@ -7,6 +7,14 @@
 import PropTypes from 'prop-types';
 import { HTMLAttributes } from 'react';
 export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The `ariaLabel` for the handle icon.
+     */
+    ariaLabel?: string;
+    /**
+     * The `ariaLabel` for the upper bound slider handle when there are two handles.
+     */
+    unstable_ariaLabelHandleUpper?: string;
     /**
      * Specify an optional className to add to the form item wrapper.
      */
@@ -21,8 +29,16 @@ export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
     twoHandles?: boolean;
 }
 declare const SliderSkeleton: {
-    ({ hideLabel, className, twoHandles, ...rest }: SliderSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    ({ ariaLabel, unstable_ariaLabelHandleUpper: ariaLabelHandleUpper, hideLabel, className, twoHandles, ...rest }: SliderSkeletonProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
+        /**
+         * The `ariaLabel` for the handle icon.
+         */
+        ariaLabel: PropTypes.Requireable<string>;
+        /**
+         * The `ariaLabel` for the upper bound slider handle when there are two handles.
+         */
+        unstable_ariaLabelHandleUpper: PropTypes.Requireable<string>;
         /**
          * Specify an optional className to add to the form item wrapper.
          */

package/lib/components/Slider/Slider.Skeleton.js

@@ -23,9 +23,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _LowerHandle, _UpperHandle, _UpperHandle2, _LowerHandle2;
 const SliderSkeleton = _ref => {
   let {
+    ariaLabel = 'slider handle',
+    unstable_ariaLabelHandleUpper: ariaLabelHandleUpper = 'upper slider handle',
     hideLabel,
     className,
     twoHandles,
@@ -70,15 +71,31 @@ const SliderSkeleton = _ref => {
     className: lowerThumbWrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: lowerThumbClasses
-  }, twoHandles && !isRtl ? _LowerHandle || (_LowerHandle = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, null)) : twoHandles && isRtl ? _UpperHandle || (_UpperHandle = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, null)) : undefined)), twoHandles ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, twoHandles && !isRtl ? /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, {
+    "aria-label": ariaLabel
+  }) : twoHandles && isRtl ? /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, {
+    "aria-label": ariaLabelHandleUpper
+  }) : undefined)), twoHandles ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: upperThumbWrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: upperThumbClasses
-  }, twoHandles && !isRtl ? _UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, null)) : twoHandles && isRtl ? _LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, null)) : undefined)) : undefined), /*#__PURE__*/React__default["default"].createElement("span", {
+  }, twoHandles && !isRtl ? /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, {
+    "aria-label": ariaLabelHandleUpper
+  }) : twoHandles && isRtl ? /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, {
+    "aria-label": ariaLabel
+  }) : undefined)) : undefined), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--slider__range-label`
   })));
 };
 SliderSkeleton.propTypes = {
+  /**
+   * The `ariaLabel` for the handle icon.
+   */
+  ariaLabel: PropTypes__default["default"].string,
+  /**
+   * The `ariaLabel` for the upper bound slider handle when there are two handles.
+   */
+  unstable_ariaLabelHandleUpper: PropTypes__default["default"].string,
   /**
    * Specify an optional className to add to the form item wrapper.
    */

package/lib/components/Slider/Slider.d.ts

@@ -387,7 +387,7 @@ declare class Slider extends PureComponent<SliderProps> {
      * Throttles calls to `this._onDrag` by limiting events to being processed at
      * most once every `EVENT_THROTTLE` milliseconds.
      */
-    onDrag: any;
+    onDrag: import("es-toolkit/dist/compat/function/debounce").DebouncedFunction<(evt: any, activeHandle?: HandlePosition | null) => void>;
     /**
      * Handles a `keydown` event by recalculating the value/thumb and setting
      * state accordingly.

package/lib/components/Slider/Slider.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
-var throttle = require('lodash.throttle');
+var compat = require('es-toolkit/compat');
 var keys = require('../../internal/keyboard/keys.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -31,9 +31,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
 
-var _LowerHandle, _LowerHandleFocus, _UpperHandle, _UpperHandleFocus, _UpperHandle2, _UpperHandleFocus2, _LowerHandle2, _LowerHandleFocus2;
 const ThumbWrapper = _ref => {
   let {
     hasTooltip = false,
@@ -289,7 +287,7 @@ class Slider extends React.PureComponent {
      * Throttles calls to `this._onDrag` by limiting events to being processed at
      * most once every `EVENT_THROTTLE` milliseconds.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "onDrag", throttle__default["default"](this._onDrag, EVENT_THROTTLE, {
+    _rollupPluginBabelHelpers.defineProperty(this, "onDrag", compat.throttle(this._onDrag, EVENT_THROTTLE, {
       leading: true,
       trailing: false
     }));
@@ -958,6 +956,7 @@ class Slider extends React.PureComponent {
     return Object.entries(derivedState).length > 0 ? derivedState : null;
   }
   render() {
+    var _LowerHandle, _LowerHandleFocus, _UpperHandle, _UpperHandleFocus, _UpperHandle2, _UpperHandleFocus2, _LowerHandle2, _LowerHandleFocus2;
     const {
       ariaLabelInput,
       unstable_ariaLabelInputUpper: ariaLabelInputUpper,
@@ -1125,7 +1124,15 @@ class Slider extends React.PureComponent {
         onFocus: () => this.setState({
           activeHandle: HandlePosition.LOWER
         })
-      }, twoHandles && !isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _LowerHandle || (_LowerHandle = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, null)), _LowerHandleFocus || (_LowerHandleFocus = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandleFocus, null))) : twoHandles && isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _UpperHandle || (_UpperHandle = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, null)), _UpperHandleFocus || (_UpperHandleFocus = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandleFocus, null))) : undefined)), twoHandles ? /*#__PURE__*/React__default["default"].createElement(ThumbWrapper, _rollupPluginBabelHelpers["extends"]({
+      }, twoHandles && !isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _LowerHandle || (_LowerHandle = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, {
+        "aria-label": ariaLabelInput
+      })), _LowerHandleFocus || (_LowerHandleFocus = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandleFocus, {
+        "aria-label": ariaLabelInput
+      }))) : twoHandles && isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _UpperHandle || (_UpperHandle = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, {
+        "aria-label": ariaLabelInputUpper
+      })), _UpperHandleFocus || (_UpperHandleFocus = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandleFocus, {
+        "aria-label": ariaLabelInputUpper
+      }))) : undefined)), twoHandles ? /*#__PURE__*/React__default["default"].createElement(ThumbWrapper, _rollupPluginBabelHelpers["extends"]({
         hasTooltip: hideTextInput,
         className: upperThumbWrapperClasses,
         label: `${formatLabel(valueUpper || 0, '')}`,
@@ -1142,7 +1149,15 @@ class Slider extends React.PureComponent {
         onFocus: () => this.setState({
           activeHandle: HandlePosition.UPPER
         })
-      }, twoHandles && !isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, null)), _UpperHandleFocus2 || (_UpperHandleFocus2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandleFocus, null))) : twoHandles && isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, null)), _LowerHandleFocus2 || (_LowerHandleFocus2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandleFocus, null))) : undefined)) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+      }, twoHandles && !isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandle, {
+        "aria-label": ariaLabelInputUpper
+      })), _UpperHandleFocus2 || (_UpperHandleFocus2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.UpperHandleFocus, {
+        "aria-label": ariaLabelInputUpper
+      }))) : twoHandles && isRtl ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandle, {
+        "aria-label": ariaLabelInput
+      })), _LowerHandleFocus2 || (_LowerHandleFocus2 = /*#__PURE__*/React__default["default"].createElement(SliderHandles.LowerHandleFocus, {
+        "aria-label": ariaLabelInput
+      }))) : undefined)) : null, /*#__PURE__*/React__default["default"].createElement("div", {
         className: `${prefix}--slider__track`,
         ref: node => {
           this.track = node;

package/lib/components/Slider/SliderHandles.d.ts

@@ -1,4 +1,4 @@
-export declare const LowerHandle: () => import("react/jsx-runtime").JSX.Element;
-export declare const LowerHandleFocus: () => import("react/jsx-runtime").JSX.Element;
-export declare const UpperHandle: () => import("react/jsx-runtime").JSX.Element;
-export declare const UpperHandleFocus: () => import("react/jsx-runtime").JSX.Element;
+export declare const LowerHandle: (props: any) => import("react/jsx-runtime").JSX.Element;
+export declare const LowerHandleFocus: (props: any) => import("react/jsx-runtime").JSX.Element;
+export declare const UpperHandle: (props: any) => import("react/jsx-runtime").JSX.Element;
+export declare const UpperHandleFocus: (props: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Slider/SliderHandles.js

@@ -9,6 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var React = require('react');
 
@@ -17,21 +18,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14;
-const LowerHandle = () => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", {
+const LowerHandle = props => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", _rollupPluginBabelHelpers["extends"]({
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 24",
   className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower`
-}, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
+}, props), _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
   d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
 })), _path2 || (_path2 = /*#__PURE__*/React__default["default"].createElement("path", {
   fill: "none",
   d: "M-4 0h24v24H-4z"
 }))));
-const LowerHandleFocus = () => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", {
+const LowerHandleFocus = props => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", _rollupPluginBabelHelpers["extends"]({
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 24",
   className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower ${prefix}--slider__thumb-icon--focus`
-}, _path3 || (_path3 = /*#__PURE__*/React__default["default"].createElement("path", {
+}, props), _path3 || (_path3 = /*#__PURE__*/React__default["default"].createElement("path", {
   d: "M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"
 })), _path4 || (_path4 = /*#__PURE__*/React__default["default"].createElement("path", {
   fill: "none",
@@ -43,21 +44,21 @@ const LowerHandleFocus = () => /*#__PURE__*/React__default["default"].createElem
 })), _path7 || (_path7 = /*#__PURE__*/React__default["default"].createElement("path", {
   d: "M0 .92V0h16v.92zM0 24v-.92h16V24z"
 }))));
-const UpperHandle = () => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", {
+const UpperHandle = props => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", _rollupPluginBabelHelpers["extends"]({
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 24",
   className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper`
-}, _path8 || (_path8 = /*#__PURE__*/React__default["default"].createElement("path", {
+}, props), _path8 || (_path8 = /*#__PURE__*/React__default["default"].createElement("path", {
   d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
 })), _path9 || (_path9 = /*#__PURE__*/React__default["default"].createElement("path", {
   fill: "none",
   d: "M-4 0h24v24H-4z"
 }))));
-const UpperHandleFocus = () => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", {
+const UpperHandleFocus = props => /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default["default"].createElement("svg", _rollupPluginBabelHelpers["extends"]({
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 24",
   className: `${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper ${prefix}--slider__thumb-icon--focus`
-}, _path10 || (_path10 = /*#__PURE__*/React__default["default"].createElement("path", {
+}, props), _path10 || (_path10 = /*#__PURE__*/React__default["default"].createElement("path", {
   d: "M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"
 })), _path11 || (_path11 = /*#__PURE__*/React__default["default"].createElement("path", {
   fill: "none",

package/lib/components/Stack/Stack.js

@@ -62,7 +62,9 @@ const Stack = /*#__PURE__*/React__default["default"].forwardRef(function Stack(p
     [`${prefix}--stack-${orientation}`]: true,
     [`${prefix}--stack-scale-${gap}`]: typeof gap === 'number'
   });
-  const style = {};
+  const style = {
+    ...rest.style
+  };
   if (typeof gap === 'string') {
     style[`--${prefix}-stack-gap`] = gap;
   }

package/lib/components/Tabs/Tabs.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var iconsReact = require('@carbon/icons-react');
 var layout = require('@carbon/layout');
 var cx = require('classnames');
-var debounce = require('lodash.debounce');
+var compat = require('es-toolkit/compat');
 var PropTypes = require('prop-types');
 var React = require('react');
 require('../Grid/FlexGrid.js');
@@ -44,7 +44,6 @@ var keys = require('../../internal/keyboard/keys.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
@@ -326,7 +325,7 @@ function TabList(_ref4) {
   });
   const tabs = React.useRef([]);
   const debouncedOnScroll = React.useCallback(() => {
-    return debounce__default["default"](event => {
+    return compat.debounce(event => {
       setScrollLeft(event.target.scrollLeft);
     }, scrollDebounceWait);
   }, [scrollDebounceWait]);
@@ -432,7 +431,7 @@ function TabList(_ref4) {
         setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
       }
     }
-    const debouncedHandler = debounce__default["default"](handler, 200);
+    const debouncedHandler = compat.debounce(handler, 200);
     window.addEventListener('resize', debouncedHandler);
     return () => {
       debouncedHandler.cancel();