@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/esm/core/Tabs/index.d.ts

@@ -1,2 +1,2 @@
-export { Tabs, VerticalTabs, HorizontalTabs } from './Tabs.js';
+export { Tabs } from './Tabs.js';
 export { Tab } from './Tab.js';

package/esm/core/Tabs/index.js

@@ -2,5 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { Tabs, VerticalTabs, HorizontalTabs } from './Tabs.js';
+export { Tabs } from './Tabs.js';
 export { Tab } from './Tab.js';

package/esm/core/Tag/Tag.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
-declare type TagProps = {
+type TagProps = {
     /**
      * Callback function that handles click on close icon.
      * Close icon is shown only when this function is passed.

package/esm/core/Tag/Tag.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { SvgCloseSmall, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
 import { IconButton } from '../Buttons/index.js';
 /**
  * Tag for showing categories, filters etc.
@@ -14,13 +13,40 @@ import { IconButton } from '../Buttons/index.js';
  * <Tag variant='basic'>Basic tag</Tag>
  */
 export const Tag = React.forwardRef((props, forwardedRef) => {
-    const { className, variant = 'default', children, onRemove, ...rest } = props;
-    return (React.createElement(Box, { as: 'span', className: cx({
-            'iui-tag-basic': variant === 'basic',
-            'iui-tag': variant === 'default',
-        }, className), ref: forwardedRef, ...rest },
-        variant === 'default' ? (React.createElement(Box, { as: 'span', className: 'iui-tag-label' }, children)) : (children),
-        onRemove && (React.createElement(IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
-            React.createElement(SvgCloseSmall, { "aria-hidden": true })))));
+  const { className, variant = 'default', children, onRemove, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      as: 'span',
+      className: cx(
+        {
+          'iui-tag-basic': variant === 'basic',
+          'iui-tag': variant === 'default',
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    variant === 'default'
+      ? React.createElement(
+          Box,
+          { as: 'span', className: 'iui-tag-label' },
+          children,
+        )
+      : children,
+    onRemove &&
+      React.createElement(
+        IconButton,
+        {
+          styleType: 'borderless',
+          size: 'small',
+          onClick: onRemove,
+          'aria-label': 'Delete tag',
+          className: 'iui-tag-button',
+        },
+        React.createElement(SvgCloseSmall, { 'aria-hidden': true }),
+      ),
+  );
 });
 export default Tag;

package/esm/core/Tag/TagContainer.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
-declare type TagContainerProps = {
+type TagContainerProps = {
     /**
      * Tags inside the container.
      */

package/esm/core/Tag/TagContainer.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
 /**
  * TagContainer for grouping tags.
  * @example
@@ -13,10 +12,22 @@ import '@itwin/itwinui-css/css/tag.css';
  * <TagContainer><Tag variant='basic'>Basic tag</Tag><Tag variant='basic'>Basic tag 2</Tag></TagContainer>
  */
 export const TagContainer = React.forwardRef((props, forwardedRef) => {
-    const { className, children, overflow, background = 'none', ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-tag-container', {
-            [`iui-${overflow}`]: !!overflow,
-            'iui-visible': background !== 'none',
-        }, className), ref: forwardedRef, ...rest }, children));
+  const { className, children, overflow, background = 'none', ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-tag-container',
+        {
+          [`iui-${overflow}`]: !!overflow,
+          'iui-visible': background !== 'none',
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 export default TagContainer;

package/esm/core/Textarea/Textarea.d.ts

@@ -1,16 +1,14 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
-export declare type TextareaProps = {
+export type TextareaProps = {
     /**
-     * Set focus on textarea element.
-     * @default false
+     * Status of textarea.
      */
-    setFocus?: boolean;
+    status?: 'positive' | 'warning' | 'negative';
 };
 /**
  * Basic textarea component
  * @example
- * <Textarea setFocus={true} placeholder='This is a textarea' />
+ * <Textarea placeholder='This is a textarea' />
  * <Textarea disabled={true} placeholder='This is a disabled textarea' />
  */
 export declare const Textarea: PolymorphicForwardRefComponent<"textarea", TextareaProps>;

package/esm/core/Textarea/Textarea.js

@@ -2,25 +2,20 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import cx from 'classnames';
 import * as React from 'react';
-import { useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
+import { Input } from '../Input/index.js';
 /**
  * Basic textarea component
  * @example
- * <Textarea setFocus={true} placeholder='This is a textarea' />
+ * <Textarea placeholder='This is a textarea' />
  * <Textarea disabled={true} placeholder='This is a disabled textarea' />
  */
-export const Textarea = React.forwardRef((props, ref) => {
-    const { className, rows = 3, setFocus = false, ...rest } = props;
-    const textAreaRef = React.useRef(null);
-    const refs = useMergedRefs(ref, textAreaRef);
-    React.useEffect(() => {
-        if (textAreaRef.current && setFocus) {
-            textAreaRef.current.focus();
-        }
-    }, [setFocus]);
-    return (React.createElement(Box, { as: 'textarea', className: cx('iui-input', className), rows: rows, ref: refs, ...rest }));
+export const Textarea = React.forwardRef((props, forwardedRef) => {
+  return React.createElement(Input, {
+    as: 'textarea',
+    rows: 3,
+    ref: forwardedRef,
+    ...props,
+  });
 });
 export default Textarea;

package/esm/core/ThemeProvider/ThemeContext.d.ts

@@ -3,5 +3,5 @@ import type { ThemeOptions, ThemeType } from './ThemeProvider.js';
 export declare const ThemeContext: React.Context<{
     theme?: ThemeType | undefined;
     themeOptions?: ThemeOptions | undefined;
-    rootRef: React.RefObject<HTMLElement>;
+    portalContainer?: HTMLElement | null | undefined;
 } | undefined>;

package/esm/core/ThemeProvider/ThemeProvider.d.ts

@@ -1,16 +1,14 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/global.css';
-import '@itwin/itwinui-variables/index.css';
-export declare type ThemeOptions = {
+export type ThemeOptions = {
     /**
      * Whether to apply high-contrast versions of light and dark themes.
      * Will default to user preference if browser supports it.
      */
     highContrast?: boolean;
 };
-export declare type ThemeType = 'light' | 'dark' | 'os';
-declare type RootProps = {
+export type ThemeType = 'light' | 'dark' | 'os';
+type RootProps = {
     /**
      * Theme to be applied. Can be 'light' or 'dark' or 'os'.
      *
@@ -39,19 +37,38 @@ declare type RootProps = {
         applyBackground?: boolean;
     };
     /**
-     * Whether theme was set to `'inherit'`.
-     * This will be used to determine if applyBackground will default to false.
+     * This will be used to determine if background will be applied.
      */
-    isInheritingTheme?: boolean;
+    shouldApplyBackground?: boolean;
 };
-declare type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
+type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
     themeOptions?: RootProps['themeOptions'];
     children: Required<React.ReactNode>;
+    /**
+     * The element used as the portal for floating elements (Tooltip, Toast, DropdownMenu, Dialog, etc).
+     *
+     * Defaults to a `<div>` rendered at the end of the ThemeProvider.
+     *
+     * When passing an element, it is recommended to use state.
+     *
+     * @example
+     * const [myPortal, setMyPortal] = React.useState(null);
+     *
+     * <div ref={setMyPortal} />
+     * <ThemeProvider
+     *   portalContainer={myPortal}
+     * >
+     *   ...
+     * </ThemeProvider>
+     */
+    portalContainer?: HTMLElement;
 };
 /**
- * This component provides global styles and applies theme to the entire tree
- * that it is wrapping around. The `theme` prop is optional and defaults to the
- * light theme.
+ * 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.

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -3,15 +3,23 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import cx from 'classnames';
-import { useMediaQuery, useMergedRefs, useIsThemeAlreadySet, Box, } from '../utils/index.js';
+import {
+  useMediaQuery,
+  useMergedRefs,
+  Box,
+  useIsomorphicLayoutEffect,
+  useControlledState,
+} from '../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
-import '@itwin/itwinui-css/css/global.css';
-import '@itwin/itwinui-variables/index.css';
+import { ToastProvider, Toaster } from '../Toast/Toaster.js';
 /**
- * This component provides global styles and applies theme to the entire tree
- * that it is wrapping around. The `theme` prop is optional and defaults to the
- * light theme.
+ * 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.
@@ -34,29 +42,105 @@ import '@itwin/itwinui-variables/index.css';
  *  <App />
  * </ThemeProvider>
  */
-export const ThemeProvider = React.forwardRef((props, ref) => {
-    var _a;
-    const { theme: themeProp, children, themeOptions, ...rest } = props;
-    const rootRef = React.useRef(null);
-    const mergedRefs = useMergedRefs(rootRef, ref);
-    const parentContext = React.useContext(ThemeContext);
-    const theme = themeProp === 'inherit' ? (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _a !== void 0 ? _a : 'light' : themeProp;
-    const contextValue = React.useMemo(() => ({ theme, themeOptions, rootRef }), [theme, themeOptions]);
-    // now that we know there are children, we can render the root and provide the context value
-    return (React.createElement(Root, { theme: theme, isInheritingTheme: themeProp === 'inherit', themeOptions: themeOptions, ref: mergedRefs, ...rest },
-        React.createElement(ThemeContext.Provider, { value: contextValue }, children)));
+export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
+  const {
+    theme: themeProp = 'inherit',
+    children,
+    themeOptions,
+    portalContainer: portalContainerProp,
+    ...rest
+  } = props;
+  const [portalContainer, setPortalContainer] = useControlledState(
+    null,
+    portalContainerProp,
+  );
+  const [parentTheme, rootRef] = useParentTheme();
+  const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
+  const shouldApplyBackground = themeOptions?.applyBackground ?? !parentTheme;
+  const contextValue = React.useMemo(
+    () => ({ theme, themeOptions, portalContainer }),
+    [theme, themeOptions, portalContainer],
+  );
+  return React.createElement(
+    ThemeContext.Provider,
+    { value: contextValue },
+    React.createElement(
+      Root,
+      {
+        theme: theme,
+        shouldApplyBackground: shouldApplyBackground,
+        themeOptions: themeOptions,
+        ref: useMergedRefs(forwardedRef, rootRef),
+        ...rest,
+      },
+      React.createElement(
+        ToastProvider,
+        null,
+        children,
+        portalContainerProp
+          ? ReactDOM.createPortal(
+              React.createElement(Toaster, null),
+              portalContainerProp,
+            )
+          : React.createElement(
+              'div',
+              { ref: setPortalContainer },
+              React.createElement(Toaster, null),
+            ),
+      ),
+    ),
+  );
 });
 export default ThemeProvider;
+// ----------------------------------------------------------------------------
 const Root = React.forwardRef((props, forwardedRef) => {
-    var _a, _b, _c;
-    const { theme, children, themeOptions, className, isInheritingTheme, ...rest } = props;
-    const ref = React.useRef(null);
-    const mergedRefs = useMergedRefs(ref, forwardedRef);
-    const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
-    const prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
-    const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
-    const shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
-    const isThemeAlreadySet = useIsThemeAlreadySet((_b = ref.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
-    const shouldApplyBackground = (_c = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.applyBackground) !== null && _c !== void 0 ? _c : (isInheritingTheme ? false : !isThemeAlreadySet.current);
-    return (React.createElement(Box, { className: cx('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children));
+  const {
+    theme,
+    children,
+    themeOptions,
+    shouldApplyBackground,
+    className,
+    ...rest
+  } = props;
+  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+  const prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
+  const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
+  const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        'iui-root',
+        { 'iui-root-background': shouldApplyBackground },
+        className,
+      ),
+      'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
+      'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
+// ----------------------------------------------------------------------------
+/**
+ * Returns theme from either parent context or by reading the closest
+ * data-iui-theme attribute if context is not found.
+ */
+const useParentTheme = () => {
+  const parentContext = React.useContext(ThemeContext);
+  const rootRef = React.useRef(null);
+  const [parentThemeState, setParentTheme] = React.useState(
+    parentContext?.theme,
+  );
+  useIsomorphicLayoutEffect(() => {
+    setParentTheme(
+      (old) =>
+        old ||
+        rootRef.current?.parentElement
+          ?.closest('[data-iui-theme]')
+          ?.getAttribute('data-iui-theme'),
+    );
+  }, []);
+  return [parentContext?.theme ?? parentThemeState, rootRef];
+};

package/esm/core/Tile/Tile.d.ts

@@ -1,16 +1,54 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tile.css';
-/**
- * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
- * Renders `a` element by default.
- * @example
- * <Tile
- *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
- * />
- */
-export declare const TileAction: PolymorphicForwardRefComponent<"a", {}>;
-declare type TileProps = {
+import { IconButton } from '../Buttons/index.js';
+type TileWrapperOwnProps = {
+    /**
+     * Status of the tile.
+     */
+    status?: 'positive' | 'warning' | 'negative';
+    /**
+     * Whether the tile is selected or in "active" state.
+     * Gets highlighted and shows a checkmark icon near tile name.
+     */
+    isSelected?: boolean;
+    /**
+     * Whether the tile is "new". Tile name becomes bold and gets a new status icon.
+     */
+    isNew?: boolean;
+    /**
+     * Default tile variant or the folder layout.
+     * @default 'default'
+     */
+    variant?: 'default' | 'folder';
+    /**
+     * Display a loading state.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * 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
+     */
+    isDisabled?: boolean;
+};
+type TileThumbnailPictureOwnProps = {
+    url?: string;
+} | {
+    url?: never;
+    children?: React.ReactNode;
+};
+type TileNameOwnProps = {
+    name?: React.ReactNode;
+};
+type TileMoreOptionsOwnProps = {
+    buttonProps?: React.ComponentPropsWithoutRef<typeof IconButton>;
+    children?: React.ReactNode[];
+};
+type TileLegacyProps = {
     /**
      * Name or title of the tile.
      */
@@ -112,12 +150,35 @@ declare type TileProps = {
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * Adds onClick to the TileAction component.
+     */
     onClick?: React.MouseEventHandler<HTMLElement>;
 };
 /**
- * Tile component that displays content and actions in a card-like format.
+ * Tile with customizable Thumbnail, Name, Content and Buttons subcomponents
+ * @example
+ * <Tile.Wrapper>
+ *    <Tile.ThumbnailArea>
+ *      <Tile.ThumbnailPicture/>
+ *      <Tile.Badge/>
+ *      <Tile.TypeIndicator/>
+ *      <Tile.QuickAction/>
+ *    </Tile.ThumbnailArea>
+ *    <Tile.Name>
+ *      <Tile.NameIcon/>
+ *      <Tile.NameLabel/>
+ *    </Tile.Name>
+ *    <Tile.ContentArea>
+ *      <Tile.Description />
+ *      <Tile.Metadata/>
+ *      <Tile.MoreOptions/>
+ *    </Tile.ContentArea>
+ *    <Tile.Buttons/>
+ * </Tile.Wrapper>
+ *
  * @example
- * <Tile
+ *  <Tile
  *  name='Tile name'
  *  description='Tile description that takes upto 3 lines'
  *  metadata={<TagContainer><Tag variant='basic'>Tag 1</Tag></TagContainer>}
@@ -131,15 +192,136 @@ declare type TileProps = {
  *  isNew={false}
  * />
  */
-export declare const Tile: PolymorphicForwardRefComponent<"div", TileProps> & {
+export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps> & {
+    /**
+     * Wrapper subcomponent for fully customisable Tile.
+     */
+    Wrapper: PolymorphicForwardRefComponent<"div", TileWrapperOwnProps>;
+    /**
+     * ThumbnailArea subcomponent that contains `ThumbnailPicture`, `QuickAction`, `TypeIndicator` or `BadgeContainer`
+     * @example
+     * <Tile.ThumbnailArea>
+     *    <Tile.ThumbnailPicture/>
+     *    <Tile.QuickAction/>
+     *    <Tile.TypeIndicator/>
+     *    <Tile.BadgeContainer/>
+     * </Tile.ThumbnailArea>
+     */
+    ThumbnailArea: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    /**
+     * Thumbnail image url, a custom component or an svg for thumbnail avatar.
+     * @example
+     * <Tile.Wrapper>
+     *  // ...
+     *  <Tile.ThumbnailArea>
+     *    <Tile.ThumbnailPicture url = '/url/to/image.jpg'/>
+     *  </Tile.ThumbnailArea>
+     * </Tile.Wrapper>
+     * or
+     * <Tile.Wrapper>
+     *  // ...
+     *  <Tile.ThumbnailArea>
+     *    <Tile.ThumbnailPicture>
+     *      {<Avatar image={<img src='icon.png' />} />}
+     *      // or
+     *      {<SvgImodelHollow />}
+     *    </Tile.ThumbnailPicture>
+     *   </Tile.ThumbnailArea>
+     * /Tile>
+     */
+    ThumbnailPicture: PolymorphicForwardRefComponent<"div", TileThumbnailPictureOwnProps>;
+    /**
+     * `QuickAction` subcomponent shown on top left of the tile.
+     * Recommended to use an invisible `IconButton`.
+     */
+    QuickAction: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    /**
+     * `TypeIndicator` subcomponent shown on top left of the tile.
+     * Recommended to use an invisible `IconButton`.
+     */
+    TypeIndicator: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    /**
+     * `BadgeContainer` subcomponent shown on the bottom right of thumbnail.
+     */
+    BadgeContainer: PolymorphicForwardRefComponent<NonNullable<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" | "isActive" | "iconProps"> & {
+        isActive?: boolean | undefined;
+        label?: React.ReactNode;
+        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        as?: "button" | undefined;
+    }, "ref">>;
+    /**
+     * `Name` subcomponent under thumbnail or top of the Tile if no thumbnail present.
+     */
+    Name: PolymorphicForwardRefComponent<"div", TileNameOwnProps>;
+    /**
+     * `NameIcon` next to name of the tile. Goes under <Tile.Name>
+     * @example
+     * <Tile.Wrapper>
+     *  <Tile.Name>
+     *    <Tile.NameIcon/>
+     *  </Tile.Name>
+     * </Tile.Wrapper>
+     */
+    NameIcon: PolymorphicForwardRefComponent<"div", {}>;
+    NameLabel: PolymorphicForwardRefComponent<"span", {}>;
     /**
-     * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
+     * Polymorphic Tile action component. Recommended to be used in `Tile.NameLabel` subcomponent.
      * Renders `a` element by default.
      * @example
-     * <Tile
-     *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
-     * />
+     * <Tile.Name>
+     *  <Tile.NameLabel>
+     *   {<Tile.Action href='/new-page'>Tile Name<Tile.Action/>}
+     *  <Tile.NameLabel/>
+     * </Tile.Name>
      */
     Action: PolymorphicForwardRefComponent<"a", {}>;
+    /**
+     * Tile content area that contains `Description`, `Metadata` and `MoreOptions` Tile subcomponents
+     * @example
+     * <Tile.Wrapper>
+     *  <Tile.ContentArea>
+     *    <Tile.Description/>
+     *    <Tile.Metadata/>
+     *    <Tile.MoreOptions/>
+     *  </Tile.ContentArea>
+     * </Tile.Wrapper>
+     */
+    ContentArea: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    /**
+     * Description text of the tile.
+     * Gets truncated if it can't fit in the tile.
+     */
+    Description: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    /**
+     * Metadata section located below description.
+     * @example
+     * <Tile.Metadata>
+     *  // ...
+     *  'basic metadata'
+     *  // or
+     *  {<span><SvgClock /> 2021-01-01, 04:30 AM</span>}
+     *  // or
+     *  {<>
+     *    <SvgTag2 />
+     *    <TagContainer><Tag variant='basic'>Tag 1</Tag><Tag variant='basic'>Tag 2</Tag></TagContainer>
+     *  </>}
+     * </Tile.Metadata>
+     */
+    Metadata: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    /**
+     * Dropdown menu containing `MenuItem`s.
+     */
+    MoreOptions: PolymorphicForwardRefComponent<"div", TileMoreOptionsOwnProps>;
+    /**
+     * Upto two buttons shown at the bottom of the tile.
+     */
+    Buttons: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
 };
 export default Tile;