@itwin/itwinui-react 3.11.2 → 3.12.0

package/cjs/core/Tile/Tile.js

@@ -1,364 +1,340 @@
-"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 _jsxruntime = require('react/jsx-runtime');
+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 (0, _jsxruntime.jsx)(TileContext.Provider, {
+    value: {
+      status,
+      variant,
+      isNew,
+      isSelected,
+      isLoading,
+      isActionable,
+      isDisabled,
+      setActionable: setLocalActionable,
+    },
+    children: (0, _jsxruntime.jsx)(_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 (0, _jsxruntime.jsx)(_LinkAction.LinkAction, {
+    as: !!props.href ? 'a' : 'button',
+    href: href,
+    onClick: !isDisabled ? onClick : undefined,
+    'aria-disabled': isDisabled,
+    ref: forwardedRef,
+    ...rest,
+    children: 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 (0, _jsxruntime.jsx)(_index.Box, {
+      className: (0, _classnames.default)(
+        'iui-tile-thumbnail-picture',
+        className,
+      ),
+      style: {
+        backgroundImage: typeof url === 'string' ? `url(${url})` : undefined,
+      },
+      ref: forwardedRef,
+      ...rest,
+    });
+  }
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    className: (0, _classnames.default)('iui-thumbnail-icon', className),
+    ref: forwardedRef,
+    ...rest,
+    children: 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 (0, _jsxruntime.jsx)(_IconButton.IconButton, {
+    className: (0, _classnames.default)('iui-tile-thumbnail-button', className),
+    styleType: 'borderless',
+    size: 'small',
+    ref: forwardedRef,
+    ...rest,
+    children: 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 (0, _jsxruntime.jsx)(_index.Box, {
+    className: (0, _classnames.default)('iui-tile-name', className),
+    ref: forwardedRef,
+    ...rest,
+    children: 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 = (0, _jsxruntime.jsx)(StatusIcon, {
+      'aria-hidden': true,
+    });
+  }
+  if (isLoading) {
+    icon = (0, _jsxruntime.jsx)(_ProgressRadial.ProgressRadial, {
+      size: 'x-small',
+      'aria-hidden': true,
+      indeterminate: true,
+    });
+  }
+  if (isSelected) {
+    icon = (0, _jsxruntime.jsx)(_index.SvgCheckmark, {
+      'aria-hidden': true,
+    });
+  }
+  if (isNew) {
+    icon = (0, _jsxruntime.jsx)(_index.SvgNew, {
+      'aria-hidden': true,
+    });
+  }
+  return children || icon
+    ? (0, _jsxruntime.jsx)(_index.Box, {
+        className: (0, _classnames.default)('iui-tile-status-icon', className),
+        ref: forwardedRef,
+        ...rest,
+        children: 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 (0, _jsxruntime.jsx)(_index.Box, {
+    className: (0, _classnames.default)(
+      'iui-tile-more-options',
+      {
+        'iui-visible': isMenuVisible,
+      },
+      className,
+    ),
+    ref: forwardedRef,
+    ...rest,
+    children: (0, _jsxruntime.jsx)(_DropdownMenu.DropdownMenu, {
+      onVisibleChange: setIsMenuVisible,
+      menuItems: (close) =>
+        children?.map((option) =>
+          _react.cloneElement(option, {
+            onClick: (value) => {
+              close();
+              option.props.onClick?.(value);
+            },
+          }),
+        ),
+      children: (0, _jsxruntime.jsx)(_IconButton.IconButton, {
+        styleType: 'borderless',
+        size: 'small',
+        'aria-label': 'More options',
+        ...buttonProps,
+        children: (0, _jsxruntime.jsx)(_index.SvgMore, {}),
+      }),
+    }),
+  });
 });
 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 (0, _jsxruntime.jsxs)(TileWrapper, {
+    ref: forwardedRef,
+    isNew: isNew,
+    isSelected: isSelected,
+    isLoading: isLoading,
+    status: status,
+    isDisabled: isDisabled,
+    ...rest,
+    children: [
+      (0, _jsxruntime.jsxs)(TileName, {
+        children: [
+          (status || isNew || isLoading || isSelected) &&
+            (0, _jsxruntime.jsx)(TileNameIcon, {}),
+          (0, _jsxruntime.jsx)(TileNameLabel, {
+            children: isActionable
+              ? (0, _jsxruntime.jsx)(TileAction, {
+                  onClick: !isDisabled ? onClick : undefined,
+                  'aria-disabled': isDisabled,
+                  children: name,
+                })
+              : name,
+          }),
+        ],
+      }),
+      thumbnail &&
+        (0, _jsxruntime.jsxs)(TileThumbnailArea, {
+          children: [
+            typeof thumbnail !== 'string'
+              ? (0, _jsxruntime.jsx)(TileThumbnailPicture, {
+                  children: thumbnail,
+                })
+              : (0, _jsxruntime.jsx)(TileThumbnailPicture, {
+                  url: thumbnail,
+                }),
+            badge &&
+              (0, _jsxruntime.jsx)(TileBadgeContainer, {
+                children: badge,
+              }),
+            leftIcon &&
+              (0, _jsxruntime.jsx)(TileTypeIndicator, {
+                children: leftIcon,
+              }),
+            rightIcon &&
+              (0, _jsxruntime.jsx)(TileQuickAction, {
+                children: rightIcon,
+              }),
+          ],
+        }),
+      (0, _jsxruntime.jsxs)(TileContentArea, {
+        children: [
+          description &&
+            (0, _jsxruntime.jsx)(TileDescription, {
+              children: description,
+            }),
+          moreOptions &&
+            (0, _jsxruntime.jsx)(TileMoreOptions, {
+              children: moreOptions,
+            }),
+          metadata &&
+            (0, _jsxruntime.jsx)(TileMetadata, {
+              children: metadata,
+            }),
+          children,
+        ],
+      }),
+      buttons &&
+        (0, _jsxruntime.jsx)(TileButtons, {
+          children: 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,
 });