@itwin/itwinui-react 3.11.3 → 3.12.1

package/cjs/core/Tile/Tile.js

@@ -1,364 +1,355 @@
-"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,
+});
+Object.defineProperty(exports, 'Tile', {
+  enumerable: true,
+  get: function () {
+    return Tile;
+  },
 });
-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.Tile = 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 classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../../utils/index.js");
-const DropdownMenu_js_1 = require("../DropdownMenu/DropdownMenu.js");
-const IconButton_js_1 = require("../Buttons/IconButton.js");
-const ProgressRadial_js_1 = require("../ProgressIndicators/ProgressRadial.js");
-const LinkAction_js_1 = require("../LinkAction/LinkAction.js");
-const TileContext = React.createContext(undefined);
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../utils/index.js');
+const _DropdownMenu = require('../DropdownMenu/DropdownMenu.js');
+const _IconButton = require('../Buttons/IconButton.js');
+const _ProgressRadial = require('../ProgressIndicators/ProgressRadial.js');
+const _LinkAction = require('../LinkAction/LinkAction.js');
+const TileContext = _react.createContext(undefined);
 TileContext.displayName = 'TileContext';
-const TileWrapper = React.forwardRef((props, forwardedRef) => {
-    const { className, status, variant, isNew, isSelected, isLoading, isDisabled, ...rest } = props;
-    const [localActionable, setLocalActionable] = React.useState(false);
-    const isActionable = localActionable;
-    return (React.createElement(TileContext.Provider, { value: {
-            status,
-            variant,
-            isNew,
-            isSelected,
-            isLoading,
-            isActionable,
-            isDisabled,
-            setActionable: setLocalActionable,
-        } },
-        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile', {
-                'iui-folder': variant === 'folder',
-                'iui-new': isNew,
-                'iui-selected': isSelected,
-                'iui-actionable': isActionable,
-                [`iui-${status}`]: !!status,
-                'iui-loading': isLoading,
-            }, className), "aria-disabled": isDisabled, ref: forwardedRef, ...rest })));
+const TileWrapper = _react.forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    status,
+    variant,
+    isNew,
+    isSelected,
+    isLoading,
+    isDisabled,
+    ...rest
+  } = props;
+  const [localActionable, setLocalActionable] = _react.useState(false);
+  const isActionable = localActionable;
+  return _react.createElement(
+    TileContext.Provider,
+    {
+      value: {
+        status,
+        variant,
+        isNew,
+        isSelected,
+        isLoading,
+        isActionable,
+        isDisabled,
+        setActionable: setLocalActionable,
+      },
+    },
+    _react.createElement(_index.Box, {
+      className: (0, _classnames.default)(
+        'iui-tile',
+        {
+          'iui-folder': variant === 'folder',
+          'iui-new': isNew,
+          'iui-selected': isSelected,
+          'iui-actionable': isActionable,
+          [`iui-${status}`]: !!status,
+          'iui-loading': isLoading,
+        },
+        className,
+      ),
+      'aria-disabled': isDisabled,
+      ref: forwardedRef,
+      ...rest,
+    }),
+  );
 });
 TileWrapper.displayName = 'Tile.Wrapper';
-// ----------------------------------------------------------------------------
-// Tile.Action component
-const TileAction = React.forwardRef((props, forwardedRef) => {
-    const { onClick, children, href, ...rest } = props;
-    const { setActionable, isDisabled } = (0, index_js_1.useSafeContext)(TileContext);
-    React.useEffect(() => {
-        if (!(0, index_js_1.supportsHas)()) {
-            setActionable(true);
-        }
-    }, [setActionable]);
-    return (React.createElement(LinkAction_js_1.LinkAction, { as: (!!props.href ? 'a' : 'button'), href: href, onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled, ref: forwardedRef, ...rest }, children));
+const TileAction = _react.forwardRef((props, forwardedRef) => {
+  const { onClick, children, href, ...rest } = props;
+  const { setActionable, isDisabled } = (0, _index.useSafeContext)(TileContext);
+  _react.useEffect(() => {
+    if (!(0, _index.supportsHas)()) {
+      setActionable(true);
+    }
+  }, [setActionable]);
+  return _react.createElement(
+    _LinkAction.LinkAction,
+    {
+      as: !!props.href ? 'a' : 'button',
+      href: href,
+      onClick: !isDisabled ? onClick : undefined,
+      'aria-disabled': isDisabled,
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 TileAction.displayName = 'Tile.Action';
-// ----------------------------------------------------------------------------
-// Tile.ThumbnailArea component
-const TileThumbnailArea = (0, index_js_1.polymorphic)('iui-tile-thumbnail');
+const TileThumbnailArea = (0, _index.polymorphic)('iui-tile-thumbnail');
 TileThumbnailArea.displayName = 'Tile.ThumbnailArea';
-const TileThumbnailPicture = React.forwardRef((props, forwardedRef) => {
-    const { className, url, children, ...rest } = props;
-    if (url) {
-        return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-thumbnail-picture', className), style: {
-                backgroundImage: typeof url === 'string' ? `url(${url})` : undefined,
-            }, ref: forwardedRef, ...rest }));
-    }
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-thumbnail-icon', className), ref: forwardedRef, ...rest }, children));
+const TileThumbnailPicture = _react.forwardRef((props, forwardedRef) => {
+  const { className, url, children, ...rest } = props;
+  if (url) {
+    return _react.createElement(_index.Box, {
+      className: (0, _classnames.default)(
+        'iui-tile-thumbnail-picture',
+        className,
+      ),
+      style: {
+        backgroundImage: typeof url === 'string' ? `url(${url})` : undefined,
+      },
+      ref: forwardedRef,
+      ...rest,
+    });
+  }
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)('iui-thumbnail-icon', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture';
-// ----------------------------------------------------------------------------
-// Tile.QuickAction component
-const TileQuickAction = (0, index_js_1.polymorphic)('iui-tile-thumbnail-quick-action');
+const TileQuickAction = (0, _index.polymorphic)(
+  'iui-tile-thumbnail-quick-action',
+);
 TileQuickAction.displayName = 'Tile.QuickAction';
-// ----------------------------------------------------------------------------
-// Tile.TypeIndicator component
-const TileTypeIndicator = (0, index_js_1.polymorphic)('iui-tile-thumbnail-type-indicator');
+const TileTypeIndicator = (0, _index.polymorphic)(
+  'iui-tile-thumbnail-type-indicator',
+);
 TileTypeIndicator.displayName = 'Tile.TypeIndicator';
-// ----------------------------------------------------------------------------
-// Tile.IconButton component
-const TileIconButton = React.forwardRef((props, forwardedRef) => {
-    const { className, children, ...rest } = props;
-    return (React.createElement(IconButton_js_1.IconButton, { className: className, styleType: 'borderless', size: 'small', ref: forwardedRef, ...rest }, children));
+const TileIconButton = _react.forwardRef((props, forwardedRef) => {
+  const { className, children, ...rest } = props;
+  return _react.createElement(
+    _IconButton.IconButton,
+    {
+      className: (0, _classnames.default)(
+        'iui-tile-thumbnail-button',
+        className,
+      ),
+      styleType: 'borderless',
+      size: 'small',
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });
 TileIconButton.displayName = 'Tile.IconButton';
-// ----------------------------------------------------------------------------
-// Tile.BadgeContainer component
-const TileBadgeContainer = (0, index_js_1.polymorphic)('iui-tile-thumbnail-badge-container');
+const TileBadgeContainer = (0, _index.polymorphic)(
+  'iui-tile-thumbnail-badge-container',
+);
 TileBadgeContainer.displayName = 'Tile.BadgeContainer';
-const TileName = React.forwardRef((props, forwardedRef) => {
-    const { className, children, name, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-name', className), ref: forwardedRef, ...rest }, children ?? name));
+const TileName = _react.forwardRef((props, forwardedRef) => {
+  const { className, children, name, ...rest } = props;
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)('iui-tile-name', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children ?? name,
+  );
 });
 TileBadgeContainer.displayName = 'Tile.Name';
-// ----------------------------------------------------------------------------
-// Tile.NameIcon component
-const TileNameIcon = React.forwardRef((props, forwardedRef) => {
-    const { children, className, ...rest } = props;
-    const { status, isLoading, isSelected, isNew } = (0, index_js_1.useSafeContext)(TileContext);
-    const StatusIcon = !!status && index_js_1.StatusIconMap[status];
-    let icon;
-    if (StatusIcon) {
-        icon = React.createElement(StatusIcon, { "aria-hidden": true });
-    }
-    if (isLoading) {
-        icon = React.createElement(ProgressRadial_js_1.ProgressRadial, { size: 'x-small', "aria-hidden": true, indeterminate: true });
-    }
-    if (isSelected) {
-        icon = React.createElement(index_js_1.SvgCheckmark, { "aria-hidden": true });
-    }
-    if (isNew) {
-        icon = React.createElement(index_js_1.SvgNew, { "aria-hidden": true });
-    }
-    return children || icon ? (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-status-icon', className), ref: forwardedRef, ...rest }, children ?? icon)) : null;
+const TileNameIcon = _react.forwardRef((props, forwardedRef) => {
+  const { children, className, ...rest } = props;
+  const { status, isLoading, isSelected, isNew } = (0, _index.useSafeContext)(
+    TileContext,
+  );
+  const StatusIcon = !!status && _index.StatusIconMap[status];
+  let icon;
+  if (StatusIcon) {
+    icon = _react.createElement(StatusIcon, {
+      'aria-hidden': true,
+    });
+  }
+  if (isLoading) {
+    icon = _react.createElement(_ProgressRadial.ProgressRadial, {
+      size: 'x-small',
+      'aria-hidden': true,
+      indeterminate: true,
+    });
+  }
+  if (isSelected) {
+    icon = _react.createElement(_index.SvgCheckmark, {
+      'aria-hidden': true,
+    });
+  }
+  if (isNew) {
+    icon = _react.createElement(_index.SvgNew, {
+      'aria-hidden': true,
+    });
+  }
+  return children || icon
+    ? _react.createElement(
+        _index.Box,
+        {
+          className: (0, _classnames.default)(
+            'iui-tile-status-icon',
+            className,
+          ),
+          ref: forwardedRef,
+          ...rest,
+        },
+        children ?? icon,
+      )
+    : null;
 });
 TileNameIcon.displayName = 'Tile.NameIcon';
-// ----------------------------------------------------------------------------
-// Tile.NameLabel component
-const TileNameLabel = index_js_1.polymorphic.span('iui-tile-name-label');
+const TileNameLabel = _index.polymorphic.span('iui-tile-name-label');
 TileNameLabel.displayName = 'Tile.NameLabel';
-// ----------------------------------------------------------------------------
-// Tile.ContentArea component
-const TileContentArea = (0, index_js_1.polymorphic)('iui-tile-content');
+const TileContentArea = (0, _index.polymorphic)('iui-tile-content');
 TileContentArea.displayName = 'Tile.ContentArea';
-// ----------------------------------------------------------------------------
-// Tile.Description component
-const TileDescription = (0, index_js_1.polymorphic)('iui-tile-description');
+const TileDescription = (0, _index.polymorphic)('iui-tile-description');
 TileDescription.displayName = 'Tile.Description';
-// ----------------------------------------------------------------------------
-// Tile.Metadata component
-const TileMetadata = (0, index_js_1.polymorphic)('iui-tile-metadata');
+const TileMetadata = (0, _index.polymorphic)('iui-tile-metadata');
 TileMetadata.displayName = 'Tile.Metadata';
-const TileMoreOptions = React.forwardRef((props, forwardedRef) => {
-    const { className, children = [], buttonProps, ...rest } = props;
-    const [isMenuVisible, setIsMenuVisible] = React.useState(false);
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tile-more-options', {
-            'iui-visible': isMenuVisible,
-        }, className), ref: forwardedRef, ...rest },
-        React.createElement(DropdownMenu_js_1.DropdownMenu, { onVisibleChange: setIsMenuVisible, menuItems: (close) => children?.map((option) => React.cloneElement(option, {
-                onClick: (value) => {
-                    close();
-                    option.props.onClick?.(value);
-                },
-            })) },
-            React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options', ...buttonProps },
-                React.createElement(index_js_1.SvgMore, null)))));
+const TileMoreOptions = _react.forwardRef((props, forwardedRef) => {
+  const { className, children = [], buttonProps, ...rest } = props;
+  const [isMenuVisible, setIsMenuVisible] = _react.useState(false);
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)(
+        'iui-tile-more-options',
+        {
+          'iui-visible': isMenuVisible,
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    _react.createElement(
+      _DropdownMenu.DropdownMenu,
+      {
+        onVisibleChange: setIsMenuVisible,
+        menuItems: (close) =>
+          children?.map((option) =>
+            _react.cloneElement(option, {
+              onClick: (value) => {
+                close();
+                option.props.onClick?.(value);
+              },
+            }),
+          ),
+      },
+      _react.createElement(
+        _IconButton.IconButton,
+        {
+          styleType: 'borderless',
+          size: 'small',
+          'aria-label': 'More options',
+          ...buttonProps,
+        },
+        _react.createElement(_index.SvgMore, null),
+      ),
+    ),
+  );
 });
 TileMoreOptions.displayName = 'Tile.MoreOptions';
-// ----------------------------------------------------------------------------
-// Tile.Buttons component
-const TileButtons = (0, index_js_1.polymorphic)('iui-tile-buttons');
+const TileButtons = (0, _index.polymorphic)('iui-tile-buttons');
 TileButtons.displayName = 'Tile.Buttons';
-const TileComponent = React.forwardRef((props, forwardedRef) => {
-    const { name, description, status, isNew, isLoading, isSelected, thumbnail, badge, leftIcon, rightIcon, buttons, metadata, moreOptions, children, isActionable, isDisabled, onClick, ...rest } = props;
-    return (React.createElement(TileWrapper, { ref: forwardedRef, isNew: isNew, isSelected: isSelected, isLoading: isLoading, status: status, isDisabled: isDisabled, ...rest },
-        React.createElement(TileName, null,
-            (status || isNew || isLoading || isSelected) && React.createElement(TileNameIcon, null),
-            React.createElement(TileNameLabel, null, isActionable ? (React.createElement(TileAction, { onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled }, name)) : (name))),
-        thumbnail && (React.createElement(TileThumbnailArea, null,
-            typeof thumbnail !== 'string' ? (React.createElement(TileThumbnailPicture, null, thumbnail)) : (React.createElement(TileThumbnailPicture, { url: thumbnail })),
-            badge && React.createElement(TileBadgeContainer, null, badge),
-            leftIcon && React.createElement(TileTypeIndicator, null, leftIcon),
-            rightIcon && React.createElement(TileQuickAction, null, rightIcon))),
-        React.createElement(TileContentArea, null,
-            description && React.createElement(TileDescription, null, description),
-            moreOptions && React.createElement(TileMoreOptions, null, moreOptions),
-            metadata && React.createElement(TileMetadata, null, metadata),
-            children),
-        buttons && React.createElement(TileButtons, null, buttons)));
+const TileComponent = _react.forwardRef((props, forwardedRef) => {
+  const {
+    name,
+    description,
+    status,
+    isNew,
+    isLoading,
+    isSelected,
+    thumbnail,
+    badge,
+    leftIcon,
+    rightIcon,
+    buttons,
+    metadata,
+    moreOptions,
+    children,
+    isActionable,
+    isDisabled,
+    onClick,
+    ...rest
+  } = props;
+  return _react.createElement(
+    TileWrapper,
+    {
+      ref: forwardedRef,
+      isNew: isNew,
+      isSelected: isSelected,
+      isLoading: isLoading,
+      status: status,
+      isDisabled: isDisabled,
+      ...rest,
+    },
+    _react.createElement(
+      TileName,
+      null,
+      (status || isNew || isLoading || isSelected) &&
+        _react.createElement(TileNameIcon, null),
+      _react.createElement(
+        TileNameLabel,
+        null,
+        isActionable
+          ? _react.createElement(
+              TileAction,
+              {
+                onClick: !isDisabled ? onClick : undefined,
+                'aria-disabled': isDisabled,
+              },
+              name,
+            )
+          : name,
+      ),
+    ),
+    thumbnail &&
+      _react.createElement(
+        TileThumbnailArea,
+        null,
+        typeof thumbnail !== 'string'
+          ? _react.createElement(TileThumbnailPicture, null, thumbnail)
+          : _react.createElement(TileThumbnailPicture, {
+              url: thumbnail,
+            }),
+        badge && _react.createElement(TileBadgeContainer, null, badge),
+        leftIcon && _react.createElement(TileTypeIndicator, null, leftIcon),
+        rightIcon && _react.createElement(TileQuickAction, null, rightIcon),
+      ),
+    _react.createElement(
+      TileContentArea,
+      null,
+      description && _react.createElement(TileDescription, null, description),
+      moreOptions && _react.createElement(TileMoreOptions, null, moreOptions),
+      metadata && _react.createElement(TileMetadata, null, metadata),
+      children,
+    ),
+    buttons && _react.createElement(TileButtons, null, buttons),
+  );
 });
 TileComponent.displayName = 'Tile';
-/**
- * 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
- *  name='Tile name'
- *  description='Tile description that takes upto 3 lines'
- *  metadata={<TagContainer><Tag variant='basic'>Tag 1</Tag></TagContainer>}
- *  thumbnail='/url/to/image.jpg'
- *  badge={<Badge backgroundColor='blue'>Badge label</Badge>}
- *  buttons={[<Button>Button 1</Button>, <Button>Button 2</Button>]}
- *  moreOptions={[<MenuItem>Item 1</MenuItem>, <MenuItem>Item 2</MenuItem>]}
- *  leftIcon={<IconButton><SvgInfo /></IconButton>}
- *  rightIcon={<IconButton><SvgStar /></IconButton>}
- *  isSelected={true}
- *  isNew={false}
- * />
- */
-exports.Tile = Object.assign(TileComponent, {
-    /**
-     * Wrapper subcomponent for fully customisable Tile.
-     */
-    Wrapper: TileWrapper,
-    /**
-     * ThumbnailArea subcomponent that contains `ThumbnailPicture`, `QuickAction`, `TypeIndicator` or `BadgeContainer`
-     * @example
-     * <Tile.ThumbnailArea>
-     *    <Tile.ThumbnailPicture/>
-     *    <Tile.QuickAction/>
-     *    <Tile.TypeIndicator/>
-     *    <Tile.BadgeContainer/>
-     * </Tile.ThumbnailArea>
-     */
-    ThumbnailArea: TileThumbnailArea,
-    /**
-     * 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: TileThumbnailPicture,
-    /**
-     * `QuickAction` subcomponent shown on top left of the tile.
-     * Recommended to use an invisible `IconButton`.
-     */
-    QuickAction: TileQuickAction,
-    /**
-     * `TypeIndicator` subcomponent shown on top left of the tile.
-     * Recommended to use an invisible `IconButton`.
-     */
-    TypeIndicator: TileTypeIndicator,
-    /**
-     * `BadgeContainer` subcomponent shown on the bottom right of thumbnail.
-     */
-    BadgeContainer: TileBadgeContainer,
-    /**
-     * `IconButton` subcomponent: custom icon for `QuickAction` and `TypeIndicator` buttons.
-     */
-    IconButton: TileIconButton,
-    /**
-     * `Name` subcomponent under thumbnail or top of the Tile if no thumbnail present.
-     */
-    Name: TileName,
-    /**
-     * `NameIcon` next to name of the tile. Goes under <Tile.Name>
-     * @example
-     * <Tile.Wrapper>
-     *  <Tile.Name>
-     *    <Tile.NameIcon/>
-     *  </Tile.Name>
-     * </Tile.Wrapper>
-     */
-    NameIcon: TileNameIcon,
-    /*
-     * `NameLabel` of the tile
-     * @example
-     * <Tile.Wrapper>
-     *  <Tile.Name>
-     *    <Tile.NameLabel> Tile Name <Tile.NameLabel/>
-     *  </Tile.Name/>
-     * </Tile.Wrapper>
-     */
-    NameLabel: TileNameLabel,
-    /**
-     * Polymorphic Tile action component. Recommended to be used in `Tile.NameLabel` subcomponent.
-     * Renders `a` element by default.
-     * @example
-     * <Tile.Name>
-     *  <Tile.NameLabel>
-     *   {<Tile.Action href='/new-page'>Tile Name<Tile.Action/>}
-     *  <Tile.NameLabel/>
-     * </Tile.Name>
-     */
-    Action: TileAction,
-    /**
-     * 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: TileContentArea,
-    /**
-     * Description text of the tile.
-     * Gets truncated if it can't fit in the tile.
-     */
-    Description: TileDescription,
-    /**
-     * 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: TileMetadata,
-    /**
-     * Dropdown menu containing `MenuItem`s.
-     */
-    MoreOptions: TileMoreOptions,
-    /**
-     * Upto two buttons shown at the bottom of the tile.
-     */
-    Buttons: TileButtons,
+const Tile = Object.assign(TileComponent, {
+  Wrapper: TileWrapper,
+  ThumbnailArea: TileThumbnailArea,
+  ThumbnailPicture: TileThumbnailPicture,
+  QuickAction: TileQuickAction,
+  TypeIndicator: TileTypeIndicator,
+  BadgeContainer: TileBadgeContainer,
+  IconButton: TileIconButton,
+  Name: TileName,
+  NameIcon: TileNameIcon,
+  NameLabel: TileNameLabel,
+  Action: TileAction,
+  ContentArea: TileContentArea,
+  Description: TileDescription,
+  Metadata: TileMetadata,
+  MoreOptions: TileMoreOptions,
+  Buttons: TileButtons,
 });