@itwin/itwinui-react 3.11.3 → 3.12.0

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -1,230 +1,232 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeProvider = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const ReactDOM = __importStar(require("react-dom"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../../utils/index.js");
-const ThemeContext_js_1 = require("./ThemeContext.js");
-const Toaster_js_1 = require("../Toast/Toaster.js");
-const jotai_1 = require("jotai");
-// ----------------------------------------------------------------------------
-const ownerDocumentAtom = (0, jotai_1.atom)(undefined);
-// ----------------------------------------------------------------------------
-/**
- * This component provides global state and applies theme to the entire tree
- * that it is wrapping around.
- *
- * The `theme` prop defaults to "inherit", which looks upwards for closest ThemeProvider
- * and falls back to "light" theme if one is not found.
- *
- * If you want to theme the entire app, you should use this component at the root. You can also
- * use this component to apply a different theme to only a part of the tree.
- *
- * By default, the topmost `ThemeProvider` in the tree will apply the recommended
- * `background-color`. You can override this behavior using `themeOptions.applyBackground`.
- *
- * @example
- * <ThemeProvider theme='os'>
- *  <App />
- * </ThemeProvider>
- *
- * @example
- * <ThemeProvider as='body'>
- *   <App />
- * </ThemeProvider>
- *
- * @example
- * <ThemeProvider theme='dark' themeOptions={{ applyBackground: false }}>
- *  <App />
- * </ThemeProvider>
- */
-exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
-    const { theme: themeProp = 'inherit', children, themeOptions = {}, portalContainer: portalContainerProp, includeCss = themeProp === 'inherit', ...rest } = props;
-    const [rootElement, setRootElement] = React.useState(null);
-    const parent = useParentThemeAndContext(rootElement);
-    const theme = themeProp === 'inherit' ? parent.theme || 'light' : themeProp;
-    // default apply background only for topmost ThemeProvider
-    themeOptions.applyBackground ?? (themeOptions.applyBackground = !parent.theme);
-    // default inherit highContrast option from parent if also inheriting base theme
-    themeOptions.highContrast ?? (themeOptions.highContrast = themeProp === 'inherit' ? parent.highContrast : undefined);
-    const [portalContainerFromParent] = (0, index_js_1.useScopedAtom)(index_js_1.portalContainerAtom);
-    const contextValue = React.useMemo(() => ({ theme, themeOptions }), 
-    // we do include all dependencies below, but we want to stringify the objects as they could be different on each render
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [theme, JSON.stringify(themeOptions)]);
-    return (React.createElement(index_js_1.ScopeProvider, null,
-        React.createElement(index_js_1.HydrationProvider, null,
-            React.createElement(ThemeContext_js_1.ThemeContext.Provider, { value: contextValue },
-                React.createElement(Toaster_js_1.ToastProvider, null,
-                    includeCss && rootElement ? (React.createElement(FallbackStyles, { root: rootElement })) : null,
-                    React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: (0, index_js_1.useMergedRefs)(forwardedRef, setRootElement), ...rest },
-                        children,
-                        React.createElement(PortalContainer, { portalContainerProp: portalContainerProp, portalContainerFromParent: portalContainerFromParent, isInheritingTheme: themeProp === 'inherit' })))))));
+Object.defineProperty(exports, 'ThemeProvider', {
+  enumerable: true,
+  get: function () {
+    return ThemeProvider;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _reactdom = _interop_require_wildcard._(require('react-dom'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../utils/index.js');
+const _ThemeContext = require('./ThemeContext.js');
+const _Toaster = require('../Toast/Toaster.js');
+const _jotai = require('jotai');
+const ownerDocumentAtom = (0, _jotai.atom)(undefined);
+const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
+  var _themeOptions, _themeOptions1;
+  const {
+    theme: themeProp = 'inherit',
+    children,
+    themeOptions = {},
+    portalContainer: portalContainerProp,
+    includeCss = themeProp === 'inherit',
+    ...rest
+  } = props;
+  const [rootElement, setRootElement] = _react.useState(null);
+  const parent = useParentThemeAndContext(rootElement);
+  const theme = themeProp === 'inherit' ? parent.theme || 'light' : themeProp;
+  (_themeOptions = themeOptions).applyBackground ??
+    (_themeOptions.applyBackground = !parent.theme);
+  (_themeOptions1 = themeOptions).highContrast ??
+    (_themeOptions1.highContrast =
+      themeProp === 'inherit' ? parent.highContrast : undefined);
+  const [portalContainerFromParent] = (0, _index.useScopedAtom)(
+    _index.portalContainerAtom,
+  );
+  const contextValue = _react.useMemo(
+    () => ({
+      theme,
+      themeOptions,
+    }),
+    [theme, JSON.stringify(themeOptions)],
+  );
+  return (0, _jsxruntime.jsx)(_index.ScopeProvider, {
+    children: (0, _jsxruntime.jsx)(_index.HydrationProvider, {
+      children: (0, _jsxruntime.jsx)(_ThemeContext.ThemeContext.Provider, {
+        value: contextValue,
+        children: (0, _jsxruntime.jsxs)(_Toaster.ToastProvider, {
+          children: [
+            includeCss && rootElement
+              ? (0, _jsxruntime.jsx)(FallbackStyles, {
+                  root: rootElement,
+                })
+              : null,
+            (0, _jsxruntime.jsxs)(Root, {
+              theme: theme,
+              themeOptions: themeOptions,
+              ref: (0, _index.useMergedRefs)(forwardedRef, setRootElement),
+              ...rest,
+              children: [
+                children,
+                (0, _jsxruntime.jsx)(PortalContainer, {
+                  portalContainerProp: portalContainerProp,
+                  portalContainerFromParent: portalContainerFromParent,
+                  isInheritingTheme: themeProp === 'inherit',
+                }),
+              ],
+            }),
+          ],
+        }),
+      }),
+    }),
+  });
 });
-exports.ThemeProvider.displayName = 'ThemeProvider';
-// ----------------------------------------------------------------------------
-const Root = React.forwardRef((props, forwardedRef) => {
-    const { theme, children, themeOptions, className, ...rest } = props;
-    const prefersDark = (0, index_js_1.useMediaQuery)('(prefers-color-scheme: dark)');
-    const prefersHighContrast = (0, index_js_1.useMediaQuery)('(prefers-contrast: more)');
-    const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
-    const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
-    const shouldApplyBackground = themeOptions?.applyBackground;
-    const [ownerDocument, setOwnerDocument] = (0, index_js_1.useScopedAtom)(ownerDocumentAtom);
-    const findOwnerDocumentFromRef = React.useCallback((el) => {
-        if (el && el.ownerDocument !== ownerDocument) {
-            setOwnerDocument(el.ownerDocument);
-        }
-    }, [ownerDocument, setOwnerDocument]);
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: (0, index_js_1.useMergedRefs)(forwardedRef, findOwnerDocumentFromRef), ...rest }, children));
+ThemeProvider.displayName = 'ThemeProvider';
+const Root = _react.forwardRef((props, forwardedRef) => {
+  const { theme, children, themeOptions, className, ...rest } = props;
+  const prefersDark = (0, _index.useMediaQuery)('(prefers-color-scheme: dark)');
+  const prefersHighContrast = (0, _index.useMediaQuery)(
+    '(prefers-contrast: more)',
+  );
+  const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
+  const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
+  const shouldApplyBackground = themeOptions?.applyBackground;
+  const [ownerDocument, setOwnerDocument] = (0, _index.useScopedAtom)(
+    ownerDocumentAtom,
+  );
+  const findOwnerDocumentFromRef = _react.useCallback(
+    (el) => {
+      if (el && el.ownerDocument !== ownerDocument) {
+        setOwnerDocument(el.ownerDocument);
+      }
+    },
+    [ownerDocument, setOwnerDocument],
+  );
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    className: (0, _classnames.default)(
+      'iui-root',
+      {
+        'iui-root-background': shouldApplyBackground,
+      },
+      className,
+    ),
+    'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
+    'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
+    ref: (0, _index.useMergedRefs)(forwardedRef, findOwnerDocumentFromRef),
+    ...rest,
+    children: children,
+  });
 });
-// ----------------------------------------------------------------------------
-/**
- * Returns theme information from either parent ThemeContext or by reading the closest
- * data-iui-theme attribute if context is not found.
- *
- * Also returns the ThemeContext itself (if found).
- */
 const useParentThemeAndContext = (rootElement) => {
-    const parentContext = React.useContext(ThemeContext_js_1.ThemeContext);
-    const [parentThemeState, setParentTheme] = React.useState(parentContext?.theme);
-    const [parentHighContrastState, setParentHighContrastState] = React.useState(parentContext?.themeOptions?.highContrast);
-    const parentThemeRef = (0, index_js_1.useLatestRef)(parentContext?.theme);
-    (0, index_js_1.useLayoutEffect)(() => {
-        // bail if we already have theme from context
-        if (parentThemeRef.current) {
-            return;
-        }
-        // find parent theme from closest data-iui-theme attribute
-        const closestRoot = rootElement?.parentElement?.closest('[data-iui-theme]');
-        if (!closestRoot) {
-            return;
-        }
-        // helper function that updates state to match data attributes from closest root
-        const synchronizeTheme = () => {
-            setParentTheme(closestRoot?.getAttribute('data-iui-theme'));
-            setParentHighContrastState(closestRoot?.getAttribute('data-iui-contrast') === 'high');
-        };
-        // set theme for initial mount
-        synchronizeTheme();
-        // use mutation observers to listen to future updates to data attributes
-        const observer = new MutationObserver(() => synchronizeTheme());
-        observer.observe(closestRoot, {
-            attributes: true,
-            attributeFilter: ['data-iui-theme', 'data-iui-contrast'],
-        });
-        return () => {
-            observer.disconnect();
-        };
-    }, [rootElement, parentThemeRef]);
-    return {
-        theme: parentContext?.theme ?? parentThemeState,
-        highContrast: parentContext?.themeOptions?.highContrast ?? parentHighContrastState,
-        context: parentContext,
+  const parentContext = _react.useContext(_ThemeContext.ThemeContext);
+  const [parentThemeState, setParentTheme] = _react.useState(
+    parentContext?.theme,
+  );
+  const [parentHighContrastState, setParentHighContrastState] = _react.useState(
+    parentContext?.themeOptions?.highContrast,
+  );
+  const parentThemeRef = (0, _index.useLatestRef)(parentContext?.theme);
+  (0, _index.useLayoutEffect)(() => {
+    if (parentThemeRef.current) {
+      return;
+    }
+    const closestRoot = rootElement?.parentElement?.closest('[data-iui-theme]');
+    if (!closestRoot) {
+      return;
+    }
+    const synchronizeTheme = () => {
+      setParentTheme(closestRoot?.getAttribute('data-iui-theme'));
+      setParentHighContrastState(
+        closestRoot?.getAttribute('data-iui-contrast') === 'high',
+      );
+    };
+    synchronizeTheme();
+    const observer = new MutationObserver(() => synchronizeTheme());
+    observer.observe(closestRoot, {
+      attributes: true,
+      attributeFilter: ['data-iui-theme', 'data-iui-contrast'],
+    });
+    return () => {
+      observer.disconnect();
     };
+  }, [rootElement, parentThemeRef]);
+  return {
+    theme: parentContext?.theme ?? parentThemeState,
+    highContrast:
+      parentContext?.themeOptions?.highContrast ?? parentHighContrastState,
+    context: parentContext,
+  };
 };
-// ----------------------------------------------------------------------------
-/**
- * Creates a new portal container if necessary, or reuses the parent portal container.
- *
- * Updates `portalContainerAtom` with the correct portal container.
- */
-const PortalContainer = React.memo(({ portalContainerProp, portalContainerFromParent, isInheritingTheme, }) => {
-    const [ownerDocument] = (0, index_js_1.useScopedAtom)(ownerDocumentAtom);
-    const setPortalContainer = (0, index_js_1.useScopedSetAtom)(index_js_1.portalContainerAtom);
-    // bail if not hydrated, because portals don't work on server
-    const isHydrated = (0, index_js_1.useHydration)() === 'hydrated';
+const PortalContainer = _react.memo(
+  ({ portalContainerProp, portalContainerFromParent, isInheritingTheme }) => {
+    const [ownerDocument] = (0, _index.useScopedAtom)(ownerDocumentAtom);
+    const setPortalContainer = (0, _index.useScopedSetAtom)(
+      _index.portalContainerAtom,
+    );
+    const id = (0, _index.useId)();
+    const isHydrated = (0, _index.useHydration)() === 'hydrated';
     if (!isHydrated) {
-        return null;
+      return null;
     }
     if (portalContainerProp) {
-        return React.createElement(PortaledToaster, { target: portalContainerProp });
+      return (0, _jsxruntime.jsx)(PortaledToaster, {
+        target: portalContainerProp,
+      });
     }
-    // Create a new portal container only if necessary:
-    // - not inheriting theme
-    // - no parent portal container to portal into
-    // - parent portal container is in a different window (#2006)
-    if (!isInheritingTheme ||
-        !portalContainerFromParent ||
-        (!!ownerDocument &&
-            portalContainerFromParent.ownerDocument !== ownerDocument)) {
-        return (React.createElement("div", { style: { display: 'contents' }, ref: setPortalContainer },
-            React.createElement(Toaster_js_1.Toaster, null)));
+    if (
+      !isInheritingTheme ||
+      !portalContainerFromParent ||
+      (!!ownerDocument &&
+        portalContainerFromParent.ownerDocument !== ownerDocument)
+    ) {
+      return (0, _jsxruntime.jsx)('div', {
+        style: {
+          display: 'contents',
+        },
+        ref: setPortalContainer,
+        id: id,
+        children: (0, _jsxruntime.jsx)(_Toaster.Toaster, {}),
+      });
     }
-    return React.createElement(PortaledToaster, { target: portalContainerFromParent });
-});
-// ----------------------------------------------------------------------------
-const PortaledToaster = ({ target }) => {
-    const [portalContainer, setPortalContainer] = (0, index_js_1.useScopedAtom)(index_js_1.portalContainerAtom);
-    // Synchronize atom with the correct portal target if necessary.
-    React.useEffect(() => {
-        if (target && target !== portalContainer) {
-            setPortalContainer(target);
-        }
+    return (0, _jsxruntime.jsx)(PortaledToaster, {
+      target: portalContainerFromParent,
     });
-    return target ? ReactDOM.createPortal(React.createElement(Toaster_js_1.Toaster, null), target) : null;
+  },
+);
+const PortaledToaster = ({ target }) => {
+  const [portalContainer, setPortalContainer] = (0, _index.useScopedAtom)(
+    _index.portalContainerAtom,
+  );
+  _react.useEffect(() => {
+    if (target && target !== portalContainer) {
+      setPortalContainer(target);
+    }
+  });
+  return target
+    ? _reactdom.createPortal((0, _jsxruntime.jsx)(_Toaster.Toaster, {}), target)
+    : null;
 };
-// ----------------------------------------------------------------------------
-/**
- * When `@itwin/itwinui-react/styles.css` is not imported, we will attempt to
- * dynamically import it (if possible) and fallback to loading it from a CDN.
- */
 const FallbackStyles = ({ root }) => {
-    (0, index_js_1.useLayoutEffect)(() => {
-        // bail if styles are already loaded
-        if (getComputedStyle(root).getPropertyValue('--_iui-v3-loaded') === 'yes') {
-            return;
-        }
-        // bail if isUnitTest because unit tests don't care about CSS 🤷
-        if (index_js_1.isUnitTest) {
-            return;
-        }
-        (async () => {
-            try {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                await import('../../../styles.css');
-            }
-            catch (error) {
-                console.log('Error loading styles.css locally', error);
-                const css = await (0, index_js_1.importCss)('https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@3/styles.css');
-                document.adoptedStyleSheets = [
-                    ...document.adoptedStyleSheets,
-                    css.default,
-                ];
-            }
-        })();
-    }, [root]);
-    return React.createElement(React.Fragment, null);
+  (0, _index.useLayoutEffect)(() => {
+    if (getComputedStyle(root).getPropertyValue('--_iui-v3-loaded') === 'yes') {
+      return;
+    }
+    if (_index.isUnitTest) {
+      return;
+    }
+    (async () => {
+      try {
+        await Promise.resolve().then(() =>
+          _interop_require_wildcard._(require('../../../styles.css')),
+        );
+      } catch (error) {
+        console.log('Error loading styles.css locally', error);
+        const css = await (0, _index.importCss)(
+          'https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@3/styles.css',
+        );
+        document.adoptedStyleSheets = [
+          ...document.adoptedStyleSheets,
+          css.default,
+        ];
+      }
+    })();
+  }, [root]);
+  return (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
 };

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

@@ -207,7 +207,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      *    <Tile.BadgeContainer/>
      * </Tile.ThumbnailArea>
      */
-    ThumbnailArea: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    ThumbnailArea: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
     /**
      * Thumbnail image url, a custom component or an svg for thumbnail avatar.
      * @example
@@ -234,95 +234,26 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      * `QuickAction` subcomponent shown on top left of the tile.
      * Recommended to use an invisible `IconButton`.
      */
-    QuickAction: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    QuickAction: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
     /**
      * `TypeIndicator` subcomponent shown on top left of the tile.
      * Recommended to use an invisible `IconButton`.
      */
-    TypeIndicator: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    TypeIndicator: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
     /**
      * `BadgeContainer` subcomponent shown on the bottom right of thumbnail.
      */
-    BadgeContainer: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    BadgeContainer: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
     /**
      * `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"> & {
-        isActive?: boolean | undefined;
+        isActive?: boolean;
         label?: React.ReactNode;
-        labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-        }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                /**
-                 * Flag whether the tile is disabled.
-                 *
-                 * Note: This only affects the tile. You need to manually disable
-                 * the buttons and other interactive elements inside the tile.
-                 *
-                 * @default false
-                 */
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        }> & {
-            content: React.ReactNode;
-            children?: React.ReactNode;
-        } & import("../../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                /**
-                 * Flag whether the tile is disabled.
-                 *
-                 * Note: This only affects the tile. You need to manually disable
-                 * the buttons and other interactive elements inside the tile.
-                 *
-                 * @default false
-                 */
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        } & {
-            as?: "div" | undefined;
-        }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
-        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+        labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
+        iconProps?: React.ComponentProps<"span">;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }, "ref">>;
@@ -363,12 +294,12 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      *  </Tile.ContentArea>
      * </Tile.Wrapper>
      */
-    ContentArea: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    ContentArea: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
     /**
      * Description text of the tile.
      * Gets truncated if it can't fit in the tile.
      */
-    Description: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    Description: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
     /**
      * Metadata section located below description.
      * @example
@@ -384,7 +315,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      *  </>}
      * </Tile.Metadata>
      */
-    Metadata: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    Metadata: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
     /**
      * Dropdown menu containing `MenuItem`s.
      */
@@ -392,6 +323,6 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
     /**
      * Upto two buttons shown at the bottom of the tile.
      */
-    Buttons: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    Buttons: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
 };
 export {};