@itwin/itwinui-react 3.13.4 → 3.14.1

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -61,14 +61,16 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
         },
         _react.createElement(
           _Toaster.ToastProvider,
-          null,
+          {
+            inherit: 'inherit' === themeProp && !portalContainerProp,
+          },
           includeCss && rootElement
             ? _react.createElement(FallbackStyles, {
                 root: rootElement,
               })
             : null,
           _react.createElement(
-            Root,
+            MainRoot,
             {
               theme: theme,
               themeOptions: themeOptions,
@@ -81,6 +83,8 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
             },
             children,
             _react.createElement(PortalContainer, {
+              theme: theme,
+              themeOptions: themeOptions,
               portalContainerProp: portalContainerProp,
               portalContainerFromParent: portalContainerFromParent,
               isInheritingTheme: 'inherit' === themeProp,
@@ -91,15 +95,7 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-const Root = _react.forwardRef((props, forwardedRef) => {
-  let { theme, children, themeOptions, className, ...rest } = props;
-  let prefersDark = (0, _index.useMediaQuery)('(prefers-color-scheme: dark)');
-  let prefersHighContrast = (0, _index.useMediaQuery)(
-    '(prefers-contrast: more)',
-  );
-  let shouldApplyDark = 'dark' === theme || ('os' === theme && prefersDark);
-  let shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
-  let shouldApplyBackground = themeOptions?.applyBackground;
+const MainRoot = _react.forwardRef((props, forwardedRef) => {
   let [ownerDocument, setOwnerDocument] = (0, _index.useScopedAtom)(
     ownerDocumentAtom,
   );
@@ -110,6 +106,20 @@ const Root = _react.forwardRef((props, forwardedRef) => {
     },
     [ownerDocument, setOwnerDocument],
   );
+  return _react.createElement(Root, {
+    ...props,
+    ref: (0, _index.useMergedRefs)(findOwnerDocumentFromRef, forwardedRef),
+  });
+});
+const Root = _react.forwardRef((props, forwardedRef) => {
+  let { theme, children, themeOptions, className, ...rest } = props;
+  let prefersDark = (0, _index.useMediaQuery)('(prefers-color-scheme: dark)');
+  let prefersHighContrast = (0, _index.useMediaQuery)(
+    '(prefers-contrast: more)',
+  );
+  let shouldApplyDark = 'dark' === theme || ('os' === theme && prefersDark);
+  let shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
+  let shouldApplyBackground = themeOptions?.applyBackground;
   return _react.createElement(
     _index.Box,
     {
@@ -122,7 +132,7 @@ const Root = _react.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      ref: (0, _index.useMergedRefs)(forwardedRef, findOwnerDocumentFromRef),
+      ref: forwardedRef,
       ...rest,
     },
     children,
@@ -165,54 +175,61 @@ const useParentThemeAndContext = (rootElement) => {
   };
 };
 const PortalContainer = _react.memo(
-  ({ portalContainerProp, portalContainerFromParent, isInheritingTheme }) => {
+  ({
+    portalContainerProp,
+    portalContainerFromParent,
+    isInheritingTheme,
+    theme,
+    themeOptions,
+  }) => {
     let [ownerDocument] = (0, _index.useScopedAtom)(ownerDocumentAtom);
-    let setPortalContainer = (0, _index.useScopedSetAtom)(
+    let [portalContainer, setPortalContainer] = (0, _index.useScopedAtom)(
       _index.portalContainerAtom,
     );
+    let shouldSetupPortalContainer =
+      !portalContainerProp &&
+      (!isInheritingTheme ||
+        !portalContainerFromParent ||
+        (!!ownerDocument &&
+          portalContainerFromParent.ownerDocument !== ownerDocument));
     let id = (0, _index.useId)();
+    _react.useEffect(() => {
+      if (shouldSetupPortalContainer) return;
+      let portalTarget = portalContainerProp || portalContainerFromParent;
+      if (portalTarget && portalTarget !== portalContainer)
+        setPortalContainer(portalTarget);
+    });
     let isHydrated = 'hydrated' === (0, _index.useHydration)();
     if (!isHydrated) return null;
-    if (portalContainerProp)
-      return _react.createElement(PortaledToaster, {
-        target: portalContainerProp,
-      });
-    if (
-      !isInheritingTheme ||
-      !portalContainerFromParent ||
-      (!!ownerDocument &&
-        portalContainerFromParent.ownerDocument !== ownerDocument)
-    )
-      return _react.createElement(
-        'div',
-        {
-          style: {
-            display: 'contents',
+    if (shouldSetupPortalContainer && ownerDocument)
+      return _reactdom.createPortal(
+        _react.createElement(
+          Root,
+          {
+            theme: theme,
+            themeOptions: {
+              ...themeOptions,
+              applyBackground: false,
+            },
+            'data-iui-portal': true,
+            style: {
+              display: 'contents',
+            },
+            ref: setPortalContainer,
+            id: id,
           },
-          ref: setPortalContainer,
-          id: id,
-        },
+          _react.createElement(_Toaster.Toaster, null),
+        ),
+        ownerDocument.body,
+      );
+    if (portalContainerProp)
+      return _reactdom.createPortal(
         _react.createElement(_Toaster.Toaster, null),
+        portalContainerProp,
       );
-    return _react.createElement(PortaledToaster, {
-      target: portalContainerFromParent,
-    });
+    return null;
   },
 );
-const PortaledToaster = ({ target }) => {
-  let [portalContainer, setPortalContainer] = (0, _index.useScopedAtom)(
-    _index.portalContainerAtom,
-  );
-  _react.useEffect(() => {
-    if (target && target !== portalContainer) setPortalContainer(target);
-  });
-  return target
-    ? _reactdom.createPortal(
-        _react.createElement(_Toaster.Toaster, null),
-        target,
-      )
-    : null;
-};
 const FallbackStyles = ({ root }) => {
   (0, _index.useLayoutEffect)(() => {
     if (

package/cjs/core/Tile/Tile.d.ts

@@ -207,7 +207,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      *    <Tile.BadgeContainer/>
      * </Tile.ThumbnailArea>
      */
-    ThumbnailArea: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    ThumbnailArea: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Thumbnail image url, a custom component or an svg for thumbnail avatar.
      * @example
@@ -234,26 +234,27 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      * `QuickAction` subcomponent shown on top left of the tile.
      * Recommended to use an invisible `IconButton`.
      */
-    QuickAction: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    QuickAction: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * `TypeIndicator` subcomponent shown on top left of the tile.
      * Recommended to use an invisible `IconButton`.
      */
-    TypeIndicator: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    TypeIndicator: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * `BadgeContainer` subcomponent shown on the bottom right of thumbnail.
      */
-    BadgeContainer: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    BadgeContainer: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * `IconButton` subcomponent: custom icon for `QuickAction` and `TypeIndicator` buttons.
      */
     IconButton: PolymorphicForwardRefComponent<"button", Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean;
         label?: React.ReactNode;
         labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
         iconProps?: React.ComponentProps<"span">;
+        title?: string;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }, "ref">>;
@@ -294,12 +295,12 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      *  </Tile.ContentArea>
      * </Tile.Wrapper>
      */
-    ContentArea: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    ContentArea: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Description text of the tile.
      * Gets truncated if it can't fit in the tile.
      */
-    Description: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Description: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Metadata section located below description.
      * @example
@@ -315,7 +316,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      *  </>}
      * </Tile.Metadata>
      */
-    Metadata: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Metadata: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Dropdown menu containing `MenuItem`s.
      */
@@ -323,6 +324,6 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
     /**
      * Upto two buttons shown at the bottom of the tile.
      */
-    Buttons: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Buttons: PolymorphicForwardRefComponent<"div", {}>;
 };
 export {};

package/cjs/core/Tile/Tile.js

@@ -83,7 +83,7 @@ const TileAction = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-const TileThumbnailArea = (0, _index.polymorphic)('iui-tile-thumbnail');
+const TileThumbnailArea = _index.polymorphic.div('iui-tile-thumbnail');
 const TileThumbnailPicture = _react.forwardRef((props, forwardedRef) => {
   let { className, url, children, ...rest } = props;
   if (url)
@@ -108,10 +108,10 @@ const TileThumbnailPicture = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-const TileQuickAction = (0, _index.polymorphic)(
+const TileQuickAction = _index.polymorphic.div(
   'iui-tile-thumbnail-quick-action',
 );
-const TileTypeIndicator = (0, _index.polymorphic)(
+const TileTypeIndicator = _index.polymorphic.div(
   'iui-tile-thumbnail-type-indicator',
 );
 const TileIconButton = _react.forwardRef((props, forwardedRef) => {
@@ -131,7 +131,7 @@ const TileIconButton = _react.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-const TileBadgeContainer = (0, _index.polymorphic)(
+const TileBadgeContainer = _index.polymorphic.div(
   'iui-tile-thumbnail-badge-container',
 );
 const TileName = _react.forwardRef((props, forwardedRef) => {
@@ -187,9 +187,9 @@ const TileNameIcon = _react.forwardRef((props, forwardedRef) => {
     : null;
 });
 const TileNameLabel = _index.polymorphic.span('iui-tile-name-label');
-const TileContentArea = (0, _index.polymorphic)('iui-tile-content');
-const TileDescription = (0, _index.polymorphic)('iui-tile-description');
-const TileMetadata = (0, _index.polymorphic)('iui-tile-metadata');
+const TileContentArea = _index.polymorphic.div('iui-tile-content');
+const TileDescription = _index.polymorphic.div('iui-tile-description');
+const TileMetadata = _index.polymorphic.div('iui-tile-metadata');
 const TileMoreOptions = _react.forwardRef((props, forwardedRef) => {
   let { className, children = [], buttonProps, ...rest } = props;
   let [isMenuVisible, setIsMenuVisible] = _react.useState(false);
@@ -233,7 +233,7 @@ const TileMoreOptions = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-const TileButtons = (0, _index.polymorphic)('iui-tile-buttons');
+const TileButtons = _index.polymorphic.div('iui-tile-buttons');
 const TileComponent = _react.forwardRef((props, forwardedRef) => {
   let {
     name,

package/cjs/core/Toast/Toaster.d.ts

@@ -35,9 +35,10 @@ export declare const useToaster: () => {
     setSettings: (settings: Partial<ToasterSettings>) => void;
 };
 export declare const Toaster: () => React.JSX.Element;
-export declare const ToastProvider: ({ children }: {
+export declare const ToastProvider: ({ children, inherit, }: {
     children: React.ReactNode;
-}) => React.JSX.Element;
+    inherit?: boolean;
+}) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
 export declare const ToasterStateContext: React.Context<ToasterState | undefined>;
 type ToasterState = {
     toasts: ToastProps[];

package/cjs/core/Toast/Toaster.js

@@ -88,7 +88,7 @@ const Toaster = () => {
     ),
   );
 };
-const ToastProvider = ({ children }) => {
+const ToastProvider = ({ children, inherit = false }) => {
   let [toasterState, dispatch] = _react.useReducer(toastReducer, {
     toasts: [],
     settings: {
@@ -96,6 +96,7 @@ const ToastProvider = ({ children }) => {
       placement: 'top',
     },
   });
+  if (_react.useContext(ToasterStateContext) && inherit) return children;
   return _react.createElement(
     ToasterDispatchContext.Provider,
     {

package/cjs/core/Tooltip/Tooltip.js

@@ -49,6 +49,7 @@ const useTooltip = (options = {}) => {
     placement,
     open,
     onOpenChange,
+    strategy: 'fixed',
     whileElementsMounted: _react.useMemo(
       () =>
         open
@@ -62,12 +63,27 @@ const useTooltip = (options = {}) => {
           void 0 !== middleware.offset
             ? (0, _react1.offset)(middleware.offset)
             : (0, _react1.offset)(4),
-          middleware.flip && (0, _react1.flip)(),
-          middleware.shift && (0, _react1.shift)(),
-          middleware.size && (0, _react1.size)(),
-          middleware.autoPlacement && (0, _react1.autoPlacement)(),
+          middleware.flip &&
+            (0, _react1.flip)({
+              padding: 4,
+            }),
+          middleware.shift &&
+            (0, _react1.shift)({
+              padding: 4,
+            }),
+          middleware.size &&
+            (0, _react1.size)({
+              padding: 4,
+            }),
+          middleware.autoPlacement &&
+            (0, _react1.autoPlacement)({
+              padding: 4,
+            }),
           middleware.inline && (0, _react1.inline)(),
-          middleware.hide && (0, _react1.hide)(),
+          middleware.hide &&
+            (0, _react1.hide)({
+              padding: 4,
+            }),
         ].filter(Boolean),
       [middleware],
     ),
@@ -90,8 +106,7 @@ const useTooltip = (options = {}) => {
           : {},
     [ariaStrategy, id],
   );
-  let { delay } = (0, _react1.useDelayGroupContext)();
-  (0, _react1.useDelayGroup)(floating.context, {
+  let { delay } = (0, _react1.useDelayGroup)(floating.context, {
     id: (0, _index.useId)(),
   });
   let interactions = (0, _react1.useInteractions)([

package/cjs/core/TransferList/TransferList.d.ts

@@ -30,7 +30,7 @@ type TransferListListboxLabelOwnProps = {
  *   </TransferList.ListboxWrapper>
  * </TransferList>
  */
-export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}> & {
+export declare const TransferList: PolymorphicForwardRefComponent<"div", {}> & {
     /**
      * 	TransferList listbox wrapper subcomponent
      */
@@ -38,10 +38,10 @@ export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.Intr
     /**
      * 	TransferList listbox subcomponent
      */
-    Listbox: PolymorphicForwardRefComponent<"ul", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
-        ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
+    Listbox: PolymorphicForwardRefComponent<"ul", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
     }, "as"> & {
-        as?: "ul" | undefined;
+        as?: "div" | undefined;
     }>;
     /**
      * 	TransferList item subcomponent
@@ -54,7 +54,7 @@ export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.Intr
     /**
      * 	TransferList toolbar subcomponent
      */
-    Toolbar: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Toolbar: PolymorphicForwardRefComponent<"div", {}>;
 };
 export declare const TransferListContext: React.Context<{
     /**

package/cjs/core/TransferList/TransferList.js

@@ -25,7 +25,7 @@ const _index = require('../../utils/index.js');
 const _List = require('../List/List.js');
 const _ListItem = require('../List/ListItem.js');
 const _Label = require('../Label/Label.js');
-const TransferListComponent = (0, _index.polymorphic)(
+const TransferListComponent = _index.polymorphic.div(
   'iui-transfer-list-wrapper',
 );
 const TransferListListboxWrapper = _react.forwardRef((props, ref) => {
@@ -169,7 +169,7 @@ const TransferListListboxLabel = _react.forwardRef((props, ref) => {
     children,
   );
 });
-const TransferListToolbar = (0, _index.polymorphic)(
+const TransferListToolbar = _index.polymorphic.div(
   'iui-transfer-list-toolbar',
   {
     role: 'toolbar',

package/cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.13.4';
+const e = '3.14.1';
 const u = new Proxy(
   {},
   {

package/cjs/utils/functions/dev.d.ts

@@ -1,17 +1,2 @@
 declare const isUnitTest: boolean;
-/**
- * Returns a function that can be used to log one-time warnings in dev environments.
- *
- * **Note**: The actual log call should be wrapped in a check against `process.env.NODE_ENV === 'development'`
- * to ensure that it is removed from the production build output (by SWC).
- * Read more about the [`NODE_ENV` convention](https://nodejs.org/en/learn/getting-started/nodejs-the-difference-between-development-and-production).
- *
- * @example
- * const logWarning = createWarningLogger();
- *
- * if (process.env.NODE_ENV === 'development') {
- *   logWarning("please don't use this")
- * }
- */
-declare const createWarningLogger: () => (message: string) => void;
-export { isUnitTest, createWarningLogger };
+export { isUnitTest };

package/cjs/utils/functions/dev.js

@@ -2,18 +2,9 @@
 Object.defineProperty(exports, '__esModule', {
   value: true,
 });
-function _export(target, all) {
-  for (var name in all)
-    Object.defineProperty(target, name, {
-      enumerable: true,
-      get: all[name],
-    });
-}
-_export(exports, {
-  createWarningLogger: function () {
-    return createWarningLogger;
-  },
-  isUnitTest: function () {
+Object.defineProperty(exports, 'isUnitTest', {
+  enumerable: true,
+  get: function () {
     return isUnitTest;
   },
 });
@@ -24,4 +15,3 @@ const isMocha =
     `${globalThis.beforeEach}`.replace(/\s/g, '');
 const isVitest = void 0 !== globalThis.__vitest_index__;
 const isUnitTest = isJest || isVitest || isMocha;
-const createWarningLogger = () => () => {};

package/cjs/utils/functions/polymorphic.d.ts

@@ -3,8 +3,8 @@ declare const _base: <As extends keyof JSX.IntrinsicElements = "div">(defaultEle
 /**
  * Utility to create a type-safe polymorphic component with a simple class.
  *
- * Can be called directly or as a property of the `polymorphic` object.
- * In both cases, returns a component that:
+ * Should be called as a property of the `polymorphic` object.
+ * Returns a component that:
  * - uses CSS-modules scoped classes
  * - supports `as` prop with default element
  * - forwards ref and spreads rest props
@@ -12,14 +12,10 @@ declare const _base: <As extends keyof JSX.IntrinsicElements = "div">(defaultEle
  * - adds tabIndex to interactive elements (Safari workaround)
  *
  * @example
- * const MyPolyDiv = polymorphic('my-poly-div');
- * <MyPolyDiv>...</MyPolyDiv>;
- *
- * @example
  * const MyPolyButton = polymorphic.button('my-poly-button', { type: 'button' });
  * <MyPolyButton as='a' href='#'>...</MyPolyButton>;
  *
  * @private
  */
-export declare const polymorphic: ReturnType<typeof _base> & { [key in keyof JSX.IntrinsicElements]: ReturnType<typeof _base<key>>; };
+export declare const polymorphic: { [key in keyof JSX.IntrinsicElements]: ReturnType<typeof _base<key>>; };
 export {};

package/cjs/utils/functions/polymorphic.js

@@ -40,12 +40,15 @@ const _base = (defaultElement) => (className, attrs) => {
   });
   return Comp;
 };
-const polymorphic = new Proxy(_base('div'), {
-  get: (target, prop) => {
-    if ('string' == typeof prop) return _base(prop);
-    return Reflect.get(target, prop);
+const polymorphic = new Proxy(
+  {},
+  {
+    get: (target, prop) => {
+      if ('string' == typeof prop) return _base(prop);
+      return Reflect.get(target, prop);
+    },
   },
-});
+);
 const getDisplayNameFromClass = (str) => {
   let camel = str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
   return camel.substring(3);

package/cjs/utils/hooks/index.d.ts

@@ -14,3 +14,4 @@ export * from './useId.js';
 export * from './useControlledState.js';
 export * from './useSyncExternalStore.js';
 export * from './useVirtualScroll.js';
+export * from './useWarningLogger.js';

package/cjs/utils/hooks/index.js

@@ -19,3 +19,4 @@ _export_star._(require('./useId.js'), exports);
 _export_star._(require('./useControlledState.js'), exports);
 _export_star._(require('./useSyncExternalStore.js'), exports);
 _export_star._(require('./useVirtualScroll.js'), exports);
+_export_star._(require('./useWarningLogger.js'), exports);

package/cjs/utils/hooks/useWarningLogger.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Returns a function that can be used to log one-time warnings in dev environments.
+ *
+ * **Note**: The actual log call should be wrapped in a check against `process.env.NODE_ENV === 'development'`
+ * to ensure that it is removed from the production build output (by SWC).
+ * Read more about the [`NODE_ENV` convention](https://nodejs.org/en/learn/getting-started/nodejs-the-difference-between-development-and-production).
+ *
+ * @example
+ * const logWarning = useWarningLogger();
+ *
+ * if (process.env.NODE_ENV === 'development') {
+ *   logWarning("please don't use this")
+ * }
+ */
+export declare const useWarningLogger: () => (message: string) => void;

package/cjs/utils/hooks/useWarningLogger.js

@@ -0,0 +1,17 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'useWarningLogger', {
+  enumerable: true,
+  get: function () {
+    return useWarningLogger;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _dev = require('../functions/dev.js');
+const _React = _react;
+const ReactInternals =
+  _React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+const useWarningLogger = () => () => {};

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -5,11 +5,10 @@ import {
   useOverflow,
   SvgChevronRight,
   Box,
-  createWarningLogger,
+  useWarningLogger,
 } from '../../utils/index.js';
 import { Button } from '../Buttons/Button.js';
 import { Anchor } from '../Typography/Anchor.js';
-let logWarning = createWarningLogger();
 let BreadcrumbsComponent = React.forwardRef((props, ref) => {
   let {
     children: items,
@@ -102,6 +101,7 @@ let BreadcrumbsComponent = React.forwardRef((props, ref) => {
 });
 let ListItem = ({ item, isActive }) => {
   let children = item;
+  let logWarning = useWarningLogger();
   if (
     children?.type === 'span' ||
     children?.type === 'a' ||

package/esm/core/Buttons/IconButton.d.ts

@@ -21,6 +21,10 @@ export type IconButtonProps = {
      * Passes props to IconButton icon.
      */
     iconProps?: React.ComponentProps<'span'>;
+    /**
+     * @deprecated Use `label` instead.
+     */
+    title?: string;
 } & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps' | 'loading'>;
 /**
  * Icon button

package/esm/core/Buttons/IconButton.js

@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import * as React from 'react';
-import { Box, ButtonBase } from '../../utils/index.js';
+import { Box, ButtonBase, useWarningLogger } from '../../utils/index.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 import { ButtonGroupContext } from '../ButtonGroup/ButtonGroup.js';
@@ -12,13 +12,15 @@ export const IconButton = React.forwardRef((props, ref) => {
     styleType = 'default',
     size,
     className,
-    label,
+    title,
+    label = title,
     iconProps,
     labelProps,
     ...rest
   } = props;
   let buttonGroupOrientation = React.useContext(ButtonGroupContext);
   let hasPopoverOpen = React.useContext(PopoverOpenContext);
+  let logWarning = useWarningLogger();
   let button = React.createElement(
     ButtonBase,
     {