@carbon/react 1.72.0 → 1.73.0-rc.0

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();

package/lib/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/lib/components/Toggletip/index.js

@@ -183,6 +183,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__default["default"].number,
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.
@@ -210,6 +214,7 @@ Toggletip.propTypes = {
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
+
 const ToggletipButton = /*#__PURE__*/React__default["default"].forwardRef(function ToggletipButton(_ref3, ref) {
   let {
     children,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.72.0",
+  "version": "1.73.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -52,17 +52,15 @@
     "@carbon/feature-flags": "^0.24.0",
     "@carbon/icons-react": "^11.53.0",
     "@carbon/layout": "^11.28.0",
-    "@carbon/styles": "^1.71.0",
+    "@carbon/styles": "^1.72.0-rc.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
     "downshift": "9.0.8",
+    "es-toolkit": "^1.27.0",
     "flatpickr": "4.6.13",
     "invariant": "^2.2.3",
-    "lodash.debounce": "^4.0.8",
-    "lodash.omit": "^4.5.0",
-    "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-fast-compare": "^3.2.2",
     "react-is": "^18.2.0",
@@ -80,8 +78,8 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@carbon/test-utils": "^10.34.0",
-    "@carbon/themes": "^11.43.0",
-    "@figma/code-connect": "^1.2.2",
+    "@carbon/themes": "^11.44.0-rc.0",
+    "@figma/code-connect": "^1.2.4",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -145,5 +143,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "4e89908b4bbb6b1c34543cb56f551f242a27d609"
+  "gitHead": "7b6d921583ff275baace5baa66da9d9b31740fa8"
 }