@carbon/react 1.72.0 → 1.73.0-rc.0

package/es/components/AILabel/index.js

@@ -118,7 +118,8 @@ const AILabel = /*#__PURE__*/React__default.forwardRef(function AILabel(_ref3, r
       onRevertClick(evt);
     }
   };
-  const ariaLabelText = !aiTextLabel && !textLabel ? `${aiText} - ${slugLabel || ariaLabel}` : `${aiText} - ${aiTextLabel || textLabel}`;
+  const ariaLabelText = !aiTextLabel && !textLabel ? `${aiText} ${slugLabel || ariaLabel}` : `${aiText} ${aiTextLabel || textLabel}`;
+  const isSmallIcon = ['xs', '2xs', 'mini'].includes(size);
   return /*#__PURE__*/React__default.createElement("div", {
     className: aiLabelClasses,
     ref: ref,
@@ -130,7 +131,8 @@ const AILabel = /*#__PURE__*/React__default.forwardRef(function AILabel(_ref3, r
     label: revertLabel
   }, rest), _Undo || (_Undo = /*#__PURE__*/React__default.createElement(Undo, null))) : /*#__PURE__*/React__default.createElement(Toggletip, _extends({
     align: align,
-    autoAlign: autoAlign
+    autoAlign: autoAlign,
+    alignmentAxisOffset: isSmallIcon ? -24 : 0
   }, rest), /*#__PURE__*/React__default.createElement(ToggletipButton, {
     className: aiLabelButtonClasses,
     label: ariaLabelText

package/es/components/ComposedModal/ComposedModal.js

@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
 import { Layer } from '../Layer/index.js';
 import { ModalHeader } from './ModalHeader.js';
 import { ModalFooter } from './ModalFooter.js';
-import debounce from 'lodash.debounce';
+import { debounce } from 'es-toolkit/compat';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import cx from 'classnames';

package/es/components/Copy/Copy.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useState, useCallback, useEffect } from 'react';
-import debounce from 'lodash.debounce';
+import { debounce } from 'es-toolkit/compat';
 import cx from 'classnames';
 import { composeEventHandlers } from '../../tools/events.js';
 import { usePrefix } from '../../internal/usePrefix.js';

package/es/components/DataTable/Table.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default, { useContext, useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import debounce from 'lodash.debounce';
+import { debounce } from 'es-toolkit/compat';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { TableContext } from './TableContext.js';
 import { useWindowEvent } from '../../internal/useEvent.js';

package/es/components/DataTable/TableRow.js

@@ -7,7 +7,6 @@
 
 import React__default from 'react';
 import PropTypes from 'prop-types';
-import omit from 'lodash.omit';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
@@ -29,10 +28,18 @@ const TableRow = props => {
     [`${prefix}--data-table--selected`]: props.isSelected,
     [`${prefix}--data-table--slug-row`]: rowHasSlug
   });
-  const cleanProps = {
-    ...omit(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.createElement("tr", cleanProps);
 };
 TableRow.propTypes = {

package/es/components/Modal/Modal.js

@@ -18,7 +18,7 @@ import InlineLoading from '../InlineLoading/InlineLoading.js';
 import { Layer } from '../Layer/index.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
 import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
-import debounce from 'lodash.debounce';
+import { debounce } from 'es-toolkit/compat';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';

package/es/components/Popover/index.js

@@ -61,6 +61,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
     highContrast = false,
     onRequestClose,
     open,
+    alignmentAxisOffset,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -86,7 +87,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
   // 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.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 = useRef({
@@ -128,7 +129,10 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
     // https://floating-ui.com/docs/misc#clipping
     strategy: 'fixed',
     // Middleware order matters, arrow should be last
-    middleware: [offset(!isTabTip ? popoverDimensions?.current?.offset : 0), autoAlign && flip({
+    middleware: [offset(!isTabTip ? {
+      alignmentAxis: alignmentAxisOffset,
+      mainAxis: popoverDimensions?.current?.offset
+    } : 0), autoAlign && 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/es/components/Search/Search.js

@@ -121,7 +121,7 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
     className: searchClasses
   }, /*#__PURE__*/React__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/es/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/es/components/Slider/Slider.Skeleton.js

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

package/es/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/es/components/Slider/Slider.js

@@ -9,7 +9,7 @@ import { defineProperty as _defineProperty, extends as _extends } from '../../_v
 import React__default, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import throttle from 'lodash.throttle';
+import { throttle } from 'es-toolkit/compat';
 import { ArrowDown, ArrowLeft, ArrowUp, ArrowRight, Enter } from '../../internal/keyboard/keys.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -22,7 +22,6 @@ import { LowerHandle, LowerHandleFocus, UpperHandle, UpperHandleFocus } from './
 import { matches } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
 
-var _LowerHandle, _LowerHandleFocus, _UpperHandle, _UpperHandleFocus, _UpperHandle2, _UpperHandleFocus2, _LowerHandle2, _LowerHandleFocus2;
 const ThumbWrapper = _ref => {
   let {
     hasTooltip = false,
@@ -947,6 +946,7 @@ class Slider extends PureComponent {
     return Object.entries(derivedState).length > 0 ? derivedState : null;
   }
   render() {
+    var _LowerHandle, _LowerHandleFocus, _UpperHandle, _UpperHandleFocus, _UpperHandle2, _UpperHandleFocus2, _LowerHandle2, _LowerHandleFocus2;
     const {
       ariaLabelInput,
       unstable_ariaLabelInputUpper: ariaLabelInputUpper,
@@ -1114,7 +1114,15 @@ class Slider extends PureComponent {
         onFocus: () => this.setState({
           activeHandle: HandlePosition.LOWER
         })
-      }, twoHandles && !isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _LowerHandle || (_LowerHandle = /*#__PURE__*/React__default.createElement(LowerHandle, null)), _LowerHandleFocus || (_LowerHandleFocus = /*#__PURE__*/React__default.createElement(LowerHandleFocus, null))) : twoHandles && isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _UpperHandle || (_UpperHandle = /*#__PURE__*/React__default.createElement(UpperHandle, null)), _UpperHandleFocus || (_UpperHandleFocus = /*#__PURE__*/React__default.createElement(UpperHandleFocus, null))) : undefined)), twoHandles ? /*#__PURE__*/React__default.createElement(ThumbWrapper, _extends({
+      }, twoHandles && !isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _LowerHandle || (_LowerHandle = /*#__PURE__*/React__default.createElement(LowerHandle, {
+        "aria-label": ariaLabelInput
+      })), _LowerHandleFocus || (_LowerHandleFocus = /*#__PURE__*/React__default.createElement(LowerHandleFocus, {
+        "aria-label": ariaLabelInput
+      }))) : twoHandles && isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _UpperHandle || (_UpperHandle = /*#__PURE__*/React__default.createElement(UpperHandle, {
+        "aria-label": ariaLabelInputUpper
+      })), _UpperHandleFocus || (_UpperHandleFocus = /*#__PURE__*/React__default.createElement(UpperHandleFocus, {
+        "aria-label": ariaLabelInputUpper
+      }))) : undefined)), twoHandles ? /*#__PURE__*/React__default.createElement(ThumbWrapper, _extends({
         hasTooltip: hideTextInput,
         className: upperThumbWrapperClasses,
         label: `${formatLabel(valueUpper || 0, '')}`,
@@ -1131,7 +1139,15 @@ class Slider extends PureComponent {
         onFocus: () => this.setState({
           activeHandle: HandlePosition.UPPER
         })
-      }, twoHandles && !isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default.createElement(UpperHandle, null)), _UpperHandleFocus2 || (_UpperHandleFocus2 = /*#__PURE__*/React__default.createElement(UpperHandleFocus, null))) : twoHandles && isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default.createElement(LowerHandle, null)), _LowerHandleFocus2 || (_LowerHandleFocus2 = /*#__PURE__*/React__default.createElement(LowerHandleFocus, null))) : undefined)) : null, /*#__PURE__*/React__default.createElement("div", {
+      }, twoHandles && !isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _UpperHandle2 || (_UpperHandle2 = /*#__PURE__*/React__default.createElement(UpperHandle, {
+        "aria-label": ariaLabelInputUpper
+      })), _UpperHandleFocus2 || (_UpperHandleFocus2 = /*#__PURE__*/React__default.createElement(UpperHandleFocus, {
+        "aria-label": ariaLabelInputUpper
+      }))) : twoHandles && isRtl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _LowerHandle2 || (_LowerHandle2 = /*#__PURE__*/React__default.createElement(LowerHandle, {
+        "aria-label": ariaLabelInput
+      })), _LowerHandleFocus2 || (_LowerHandleFocus2 = /*#__PURE__*/React__default.createElement(LowerHandleFocus, {
+        "aria-label": ariaLabelInput
+      }))) : undefined)) : null, /*#__PURE__*/React__default.createElement("div", {
         className: `${prefix}--slider__track`,
         ref: node => {
           this.track = node;

package/es/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/es/components/Slider/SliderHandles.js

@@ -5,25 +5,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import React__default from 'react';
 
 var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14;
-const LowerHandle = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+const LowerHandle = props => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", _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.createElement("path", {
+}, props), _path || (_path = /*#__PURE__*/React__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.createElement("path", {
   fill: "none",
   d: "M-4 0h24v24H-4z"
 }))));
-const LowerHandleFocus = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+const LowerHandleFocus = props => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", _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.createElement("path", {
+}, props), _path3 || (_path3 = /*#__PURE__*/React__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.createElement("path", {
   fill: "none",
@@ -35,21 +36,21 @@ const LowerHandleFocus = () => /*#__PURE__*/React__default.createElement(PrefixC
 })), _path7 || (_path7 = /*#__PURE__*/React__default.createElement("path", {
   d: "M0 .92V0h16v.92zM0 24v-.92h16V24z"
 }))));
-const UpperHandle = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+const UpperHandle = props => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", _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.createElement("path", {
+}, props), _path8 || (_path8 = /*#__PURE__*/React__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.createElement("path", {
   fill: "none",
   d: "M-4 0h24v24H-4z"
 }))));
-const UpperHandleFocus = () => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", {
+const UpperHandleFocus = props => /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => /*#__PURE__*/React__default.createElement("svg", _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.createElement("path", {
+}, props), _path10 || (_path10 = /*#__PURE__*/React__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.createElement("path", {
   fill: "none",

package/es/components/Stack/Stack.js

@@ -52,7 +52,9 @@ const Stack = /*#__PURE__*/React__default.forwardRef(function Stack(props, ref)
     [`${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/es/components/Tabs/Tabs.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { ChevronLeft, ChevronRight, Close } from '@carbon/icons-react';
 import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
-import debounce from 'lodash.debounce';
+import { debounce } from 'es-toolkit/compat';
 import PropTypes from 'prop-types';
 import React__default, { useState, useRef, useCallback, useEffect, forwardRef } from 'react';
 import '../Grid/FlexGrid.js';

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

@@ -9,9 +9,9 @@ import React, { type ElementType, type ReactNode } from 'react';
 import { type PopoverAlignment } from '../Popover';
 import { PolymorphicProps } from '../../types/common';
 type ToggletipLabelProps<E extends ElementType> = {
-    as?: E | undefined;
+    as?: E;
     children?: ReactNode;
-    className?: string | undefined;
+    className?: string;
 };
 /**
  * Used to render the label for a Toggletip
@@ -36,12 +36,13 @@ export declare namespace ToggletipLabel {
     };
 }
 interface ToggletipProps<E extends ElementType> {
-    align?: PopoverAlignment | undefined;
-    as?: E | undefined;
-    autoAlign?: boolean | undefined;
-    className?: string | undefined;
+    align?: PopoverAlignment;
+    alignmentAxisOffset?: number;
+    as?: E;
+    autoAlign?: boolean;
+    className?: string;
     children?: ReactNode;
-    defaultOpen?: boolean | undefined;
+    defaultOpen?: boolean;
 }
 /**
  * Used as a container for the button and content of a toggletip. This component
@@ -55,6 +56,10 @@ export declare namespace Toggletip {
          * Specify how the toggletip should align with the button
          */
         align: PropTypes.Requireable<string>;
+        /**
+         * Provide an offset value for alignment axis.
+         */
+        alignmentAxisOffset: PropTypes.Requireable<number>;
         /**
          * Provide a custom element or component to render the top-level node for the
          * component.
@@ -81,8 +86,8 @@ export declare namespace Toggletip {
 }
 interface ToggletipButtonBaseProps {
     children?: ReactNode;
-    className?: string | undefined;
-    label?: string | undefined;
+    className?: string;
+    label?: string;
 }
 export type ToggleTipButtonProps<T extends React.ElementType> = PolymorphicProps<T, ToggletipButtonBaseProps>;
 /**
@@ -92,7 +97,7 @@ export type ToggleTipButtonProps<T extends React.ElementType> = PolymorphicProps
 export declare const ToggletipButton: React.ForwardRefExoticComponent<Omit<ToggleTipButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 interface ToggletipContentProps {
     children?: ReactNode;
-    className?: string | undefined;
+    className?: string;
 }
 /**
  * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
@@ -103,7 +108,7 @@ declare const ToggletipContent: React.ForwardRefExoticComponent<ToggletipContent
 export { ToggletipContent };
 interface ToggleTipActionsProps {
     children?: ReactNode;
-    className?: string | undefined;
+    className?: string;
 }
 /**
  * `ToggletipActions` is a container for one or two actions present at the base

package/es/components/Toggletip/index.js

@@ -173,6 +173,10 @@ Toggletip.propTypes = {
 
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  /**
+   * Provide an offset value for alignment axis.
+   */
+  alignmentAxisOffset: PropTypes.number,
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.
@@ -200,6 +204,7 @@ Toggletip.propTypes = {
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
+
 const ToggletipButton = /*#__PURE__*/React__default.forwardRef(function ToggletipButton(_ref3, ref) {
   let {
     children,

package/lib/components/AILabel/index.js

@@ -128,7 +128,8 @@ const AILabel = /*#__PURE__*/React__default["default"].forwardRef(function AILab
       onRevertClick(evt);
     }
   };
-  const ariaLabelText = !aiTextLabel && !textLabel ? `${aiText} - ${slugLabel || ariaLabel}` : `${aiText} - ${aiTextLabel || textLabel}`;
+  const ariaLabelText = !aiTextLabel && !textLabel ? `${aiText} ${slugLabel || ariaLabel}` : `${aiText} ${aiTextLabel || textLabel}`;
+  const isSmallIcon = ['xs', '2xs', 'mini'].includes(size);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: aiLabelClasses,
     ref: ref,
@@ -140,7 +141,8 @@ const AILabel = /*#__PURE__*/React__default["default"].forwardRef(function AILab
     label: revertLabel
   }, rest), _Undo || (_Undo = /*#__PURE__*/React__default["default"].createElement(iconsReact.Undo, null))) : /*#__PURE__*/React__default["default"].createElement(index.Toggletip, _rollupPluginBabelHelpers["extends"]({
     align: align,
-    autoAlign: autoAlign
+    autoAlign: autoAlign,
+    alignmentAxisOffset: isSmallIcon ? -24 : 0
   }, rest), /*#__PURE__*/React__default["default"].createElement(index.ToggletipButton, {
     className: aiLabelButtonClasses,
     label: ariaLabelText

package/lib/components/ComposedModal/ComposedModal.js

@@ -16,7 +16,7 @@ var PropTypes = require('prop-types');
 var index = require('../Layer/index.js');
 var ModalHeader = require('./ModalHeader.js');
 var ModalFooter = require('./ModalFooter.js');
-var debounce = require('lodash.debounce');
+var compat = require('es-toolkit/compat');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var cx = require('classnames');
@@ -34,7 +34,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function ModalBody(_ref, ref) {
@@ -62,7 +61,7 @@ const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function Mod
         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/Copy/Copy.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
-var debounce = require('lodash.debounce');
+var compat = require('es-toolkit/compat');
 var cx = require('classnames');
 var events = require('../../tools/events.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -24,7 +24,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const propMappingFunction = deprecatedValue => {
@@ -59,7 +58,7 @@ function Copy(_ref) {
     [`${prefix}--copy-btn--${animation}`]: animation
   });
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const handleFadeOut = React.useCallback(debounce__default["default"](() => {
+  const handleFadeOut = React.useCallback(compat.debounce(() => {
     setAnimation('fade-out');
   }, feedbackTimeout), [feedbackTimeout]);
   const handleClick = React.useCallback(() => {

package/lib/components/DataTable/Table.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
-var debounce = require('lodash.debounce');
+var compat = require('es-toolkit/compat');
 var usePrefix = require('../../internal/usePrefix.js');
 var TableContext = require('./TableContext.js');
 var useEvent = require('../../internal/useEvent.js');
@@ -24,7 +24,6 @@ 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 debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
 const isElementWrappingContent = (element, context) => {
   if (element.children.length > 0) {
@@ -109,7 +108,7 @@ const Table = _ref => {
       toggleTableHeaderAlignmentClass(false);
     }
   }, [experimentalAutoAlign, toggleTableBodyAlignmentClass, toggleTableHeaderAlignmentClass, prefix]);
-  const debouncedSetTableAlignment = debounce__default["default"](setTableAlignment, 100);
+  const debouncedSetTableAlignment = compat.debounce(setTableAlignment, 100);
   useEvent.useWindowEvent('resize', debouncedSetTableAlignment);
 
   // Used to set a tabIndex when the Table is horizontally scrollable
@@ -122,7 +121,7 @@ const Table = _ref => {
       setIsScrollable(false);
     }
   }, []);
-  const debouncedSetTabIndex = debounce__default["default"](setTabIndex, 100);
+  const debouncedSetTabIndex = compat.debounce(setTabIndex, 100);
   useEvent.useWindowEvent('resize', debouncedSetTabIndex);
   useIsomorphicEffect["default"](() => {
     setTabIndex();

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,7 +18,6 @@ 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 => {
@@ -40,10 +38,18 @@ const TableRow = props => {
     [`${prefix}--data-table--selected`]: props.isSelected,
     [`${prefix}--data-table--slug-row`]: rowHasSlug
   });
-  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 = {