@carbon/react/es/components/Tile/Tile.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React, { useState, useEffect, useCallback, useRef, cloneElement } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { AiLabel, CheckboxCheckedFilled, Checkbox, ChevronDown, ArrowRight, Error } from '@carbon/icons-react';
import Link from '../Link/Link.js';
import { Enter, Space } from '../../internal/keyboard/keys.js';
import { matches } from '../../internal/keyboard/match.js';
import { deprecate } from '../../prop-types/deprecate.js';
import { composeEventHandlers } from '../../tools/events.js';
import { usePrefix } from '../../internal/usePrefix.js';
import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
import { getInteractiveContent, getRoleContent } from '../../internal/useNoInteractiveChildren.js';
import { useMergedRefs } from '../../internal/useMergedRefs.js';
import { useFeatureFlag } from '../FeatureFlags/index.js';
import { useId } from '../../internal/useId.js';
import '../Text/index.js';
import { AILabel } from '../AILabel/index.js';
import { isComponentElement } from '../../internal/utils.js';
import { Text } from '../Text/Text.js';

var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
const Tile = /*#__PURE__*/React.forwardRef(function Tile({
  children,
  className,
  decorator,
  light = false,
  slug,
  hasRoundedCorners = false,
  ...rest
}, ref) {
  const prefix = usePrefix();
  const tileClasses = cx(`${prefix}--tile`, {
    [`${prefix}--tile--light`]: light,
    [`${prefix}--tile--slug`]: slug,
    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
    [`${prefix}--tile--decorator`]: decorator,
    [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
  }, className);
  return /*#__PURE__*/React.createElement("div", _extends({
    className: tileClasses,
    ref: ref
  }, rest), children, slug, decorator && /*#__PURE__*/React.createElement("div", {
    className: `${prefix}--tile--inner-decorator`
  }, decorator));
});
Tile.displayName = 'Tile';
Tile.propTypes = {
  /**
   * The child nodes.
   */
  children: PropTypes.node,
  /**
   * The CSS class names.
   */
  className: PropTypes.string,
  /**
   * **Experimental**: Provide a `decorator` component to be rendered inside the `Tile` component
   */
  decorator: PropTypes.node,
  /**
   * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid
   * when an AILabel is present
   */
  hasRoundedCorners: PropTypes.bool,
  /**
   * `true` to use the light version. For use on $ui-01 backgrounds only.
   * Don't use this to make tile background color same as container background color.
   *
   * @deprecated
   */
  light: deprecate(PropTypes.bool, 'The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
  /**
   * **Experimental**: Provide a `Slug` component to be rendered inside the `Tile` component
   */
  slug: deprecate(PropTypes.node, 'The `slug` prop for `Tile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
};
const ClickableTile = /*#__PURE__*/React.forwardRef(function ClickableTile({
  children,
  className,
  clicked = false,
  decorator,
  disabled,
  href,
  light,
  onClick = () => {},
  onKeyDown = () => {},
  renderIcon: Icon,
  hasRoundedCorners,
  slug,
  ...rest
}, ref) {
  const prefix = usePrefix();
  const classes = cx(`${prefix}--tile`, `${prefix}--tile--clickable`, {
    [`${prefix}--tile--is-clicked`]: clicked,
    [`${prefix}--tile--light`]: light,
    [`${prefix}--tile--slug`]: slug,
    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
    [`${prefix}--tile--decorator`]: decorator,
    [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
  }, className);
  const [isSelected, setIsSelected] = useState(clicked);
  function handleOnClick(evt) {
    evt?.persist?.();
    setIsSelected(!isSelected);
    onClick(evt);
  }
  function handleOnKeyDown(evt) {
    evt?.persist?.();
    if (matches(evt, [Enter, Space])) {
      setIsSelected(!isSelected);
    }
    onKeyDown(evt);
  }
  const v12DefaultIcons = useFeatureFlag('enable-v12-tile-default-icons');
  if (v12DefaultIcons) {
    if (!Icon) {
      Icon = ArrowRight;
    }
    if (disabled) {
      Icon = Error;
    }
  }
  const iconClasses = cx({
    [`${prefix}--tile--icon`]: !v12DefaultIcons || v12DefaultIcons && !disabled,
    [`${prefix}--tile--disabled-icon`]: v12DefaultIcons && disabled
  });
  return /*#__PURE__*/React.createElement(Link, _extends({
    className: classes,
    href: href,
    tabIndex: !href && !disabled ? 0 : undefined,
    onClick: !disabled ? handleOnClick : undefined,
    onKeyDown: handleOnKeyDown,
    ref: ref,
    disabled: disabled
  }, rest), slug || decorator ? /*#__PURE__*/React.createElement("div", {
    className: `${prefix}--tile-content`
  }, children) : children, (slug === true || decorator === true) && /*#__PURE__*/React.createElement(AiLabel, {
    size: "24",
    className: `${prefix}--tile--ai-label-icon`
  }), /*#__PURE__*/React.isValidElement(decorator) && /*#__PURE__*/React.createElement("div", {
    className: `${prefix}--tile--inner-decorator`
  }, decorator), Icon && /*#__PURE__*/React.createElement(Icon, {
    className: iconClasses,
    "aria-hidden": "true"
  }));
});
ClickableTile.displayName = 'ClickableTile';
ClickableTile.propTypes = {
  /**
   * The child nodes.
   */
  children: PropTypes.node,
  /**
   * The CSS class names.
   */
  className: PropTypes.string,
  /**
   * Boolean for whether a tile has been clicked.
   */
  clicked: PropTypes.bool,
  /**
   * **Experimental**: Provide a `decorator` component or set the boolean to True for an AILabel icon to be rendered inside the `ClickableTile` component
   */
  decorator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
  /**
   * Specify whether the ClickableTile should be disabled
   */
  disabled: PropTypes.bool,
  /**
   * **Experimental**: Specify if the `ClickableTile` component should be rendered with rounded corners.
   * Only valid when `slug` prop is present
   */
  hasRoundedCorners: PropTypes.bool,
  /**
   * The href for the link.
   */
  href: PropTypes.string,
  /**
   * `true` to use the light version. For use on $ui-01 backgrounds only.
   * Don't use this to make tile background color same as container background color.
   */
  light: deprecate(PropTypes.bool, 'The `light` prop for `ClickableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
  /**
   * Specify the function to run when the ClickableTile is clicked
   */
  onClick: PropTypes.func,
  /**
   * Specify the function to run when the ClickableTile is interacted with via a keyboard
   */
  onKeyDown: PropTypes.func,
  /**
   * The rel property for the link.
   */
  rel: PropTypes.string,
  /**
   * A component used to render an icon.
   */
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
};
const SelectableTile = /*#__PURE__*/React.forwardRef(function SelectableTile({
  children,
  className,
  decorator,
  disabled,
  id,
  light,
  onClick = () => {},
  onChange = () => {},
  onKeyDown = () => {},
  selected = false,
  tabIndex = 0,
  title = 'title',
  slug,
  hasRoundedCorners,
  ...rest
}, ref) {
  const prefix = usePrefix();
  const clickHandler = onClick;
  const keyDownHandler = onKeyDown;
  const [isSelected, setIsSelected] = useState(selected);

  // Use useEffect to sync with prop changes instead of render-time logic
  useEffect(() => {
    setIsSelected(selected);
  }, [selected]);
  const classes = cx(`${prefix}--tile`, `${prefix}--tile--selectable`, {
    [`${prefix}--tile--is-selected`]: isSelected,
    [`${prefix}--tile--light`]: light,
    [`${prefix}--tile--disabled`]: disabled,
    [`${prefix}--tile--slug`]: slug,
    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
    [`${prefix}--tile--decorator`]: decorator,
    [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
  }, className);

  // Single function to handle selection changes
  const handleSelectionChange = useCallback((evt, newSelected) => {
    setIsSelected(newSelected);
    onChange(evt, newSelected, id);
  }, [onChange, id]);
  function handleClick(evt) {
    evt.preventDefault();
    evt?.persist?.();
    if (normalizedDecorator && decoratorRef.current && evt.target instanceof Node && decoratorRef.current.contains(evt.target)) {
      return;
    }
    const newSelected = !isSelected;
    handleSelectionChange(evt, newSelected);
    clickHandler(evt);
  }
  function handleKeyDown(evt) {
    evt?.persist?.();
    if (matches(evt, [Enter, Space])) {
      evt.preventDefault();
      const newSelected = !isSelected;
      handleSelectionChange(evt, newSelected);
    }
    keyDownHandler(evt);
  }

  // AILabel is always size `xs`
  const decoratorRef = useRef(null);
  const candidate = slug ?? decorator;
  const candidateIsAILabel = isComponentElement(candidate, AILabel);
  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
    size: 'xs',
    ref: decoratorRef
  }) : null;
  return (
    /*#__PURE__*/
    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
    React.createElement("div", _extends({
      className: classes,
      onClick: !disabled ? handleClick : undefined,
      role: "checkbox",
      "aria-checked": isSelected,
      onKeyDown: !disabled ? handleKeyDown : undefined
      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
      ,
      tabIndex: !disabled ? tabIndex : undefined,
      ref: ref,
      id: id,
      title: title
    }, rest), /*#__PURE__*/React.createElement("span", {
      className: `${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`
    }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React.createElement(CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React.createElement(Checkbox, null))), /*#__PURE__*/React.createElement(Text, {
      as: "label",
      htmlFor: id,
      className: `${prefix}--tile-content`
    }, children), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
      className: `${prefix}--tile--inner-decorator`
    }, normalizedDecorator) : '')
  );
});
SelectableTile.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  /**
   * **Experimental**: Provide a `decorator` component to be rendered inside the `SelectableTile` component
   */
  decorator: PropTypes.node,
  /**
   * Specify whether the SelectableTile should be disabled
   */
  disabled: PropTypes.bool,
  /**
   * **Experimental**: Specify if the `SelectableTile` component should be rendered with rounded corners.
   * Only valid when `slug` prop is present
   */
  hasRoundedCorners: PropTypes.bool,
  /**
   * The ID of the `<input>`.
   */
  id: PropTypes.string,
  /**
   * `true` to use the light version. For use on $ui-01 backgrounds only.
   * Don't use this to make tile background color same as container background color.
   */
  light: deprecate(PropTypes.bool, 'The `light` prop for `SelectableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
  /**
   * The `name` of the `<input>`.
   * @deprecated
   */
  name: deprecate(PropTypes.string, 'The `name` property is no longer used.  It will be removed in the next major release.'),
  /**
   * The empty handler of the `<input>`.
   */
  onChange: PropTypes.func,
  /**
   * Specify the function to run when the SelectableTile is clicked
   */
  onClick: PropTypes.func,
  /**
   * Specify the function to run when the SelectableTile is interacted with via a keyboard
   */
  onKeyDown: PropTypes.func,
  /**
   * `true` to select this tile.
   */
  selected: PropTypes.bool,
  /**
   * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
   */
  slug: deprecate(PropTypes.node, 'The `slug` prop for `SelectableTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
  /**
   * Specify the tab index of the wrapper element
   */
  tabIndex: PropTypes.number,
  /**
   * The `title` of the `<input>`.
   */
  title: PropTypes.string,
  /**
   * The value of the `<input>`.
   * @deprecated
   */
  value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 'The `value` property is no longer used.  It will be removed in the next major release.`')
};
const ExpandableTile = /*#__PURE__*/React.forwardRef(function ExpandableTile({
  tabIndex = 0,
  className,
  children,
  decorator,
  expanded = false,
  tileMaxHeight = 0,
  // eslint-disable-line
  tilePadding = 0,
  // eslint-disable-line
  onClick,
  onKeyUp,
  tileCollapsedIconText = 'Interact to expand Tile',
  tileExpandedIconText = 'Interact to collapse Tile',
  tileCollapsedLabel,
  tileExpandedLabel,
  light,
  slug,
  hasRoundedCorners,
  ...rest
}, forwardRef) {
  const [isTileMaxHeight, setIsTileMaxHeight] = useState(tileMaxHeight);
  const [isTilePadding, setIsTilePadding] = useState(tilePadding);
  const [prevExpanded, setPrevExpanded] = useState(expanded);
  const [prevTileMaxHeight, setPrevTileMaxHeight] = useState(tileMaxHeight);
  const [prevTilePadding, setPrevTilePadding] = useState(tilePadding);
  const [isExpanded, setIsExpanded] = useState(expanded);
  const [interactive, setInteractive] = useState(true);
  const aboveTheFold = useRef(null);
  const belowTheFold = useRef(null);
  const chevronInteractiveRef = useRef(null);
  const tileContent = useRef(null);
  const tile = useRef(null);
  const ref = useMergedRefs([forwardRef, tile]);
  const prefix = usePrefix();
  if (expanded !== prevExpanded) {
    setIsExpanded(expanded);
    setPrevExpanded(expanded);
    setMaxHeight();
  }
  if (tileMaxHeight !== prevTileMaxHeight) {
    setIsTileMaxHeight(tileMaxHeight);
    setPrevTileMaxHeight(tileMaxHeight);
  }
  if (tilePadding !== prevTilePadding) {
    setIsTilePadding(tilePadding);
    setPrevTilePadding(tilePadding);
  }
  function setMaxHeight() {
    if (isExpanded && tileContent.current) {
      setIsTileMaxHeight(tileContent.current.getBoundingClientRect()?.height);
    }
    if (aboveTheFold.current) {
      setIsTileMaxHeight(aboveTheFold.current.getBoundingClientRect().height);
    }
  }
  function handleClick(evt) {
    evt?.persist?.();
    setIsExpanded(!isExpanded);
    setMaxHeight();
  }
  function handleKeyUp(evt) {
    if (evt.target !== tile.current && evt.target !== chevronInteractiveRef.current) {
      if (matches(evt, [Enter, Space])) {
        evt.preventDefault();
      }
    }
  }
  function getChildren() {
    return React.Children.toArray(children);
  }
  const classNames = cx(`${prefix}--tile`, `${prefix}--tile--expandable`, {
    [`${prefix}--tile--is-expanded`]: isExpanded,
    [`${prefix}--tile--light`]: light
  }, className);
  const interactiveClassNames = cx(`${prefix}--tile`, `${prefix}--tile--expandable`, `${prefix}--tile--expandable--interactive`, {
    [`${prefix}--tile--is-expanded`]: isExpanded,
    [`${prefix}--tile--light`]: light,
    [`${prefix}--tile--slug`]: slug,
    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
    [`${prefix}--tile--decorator`]: decorator,
    [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
  }, className);
  const chevronInteractiveClassNames = cx(`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
  const childrenAsArray = getChildren();
  useIsomorphicEffect(() => {
    if (!tile.current || !aboveTheFold.current) {
      return;
    }
    const getStyle = window.getComputedStyle(tile.current, null);
    const {
      current: node
    } = aboveTheFold;
    const {
      height
    } = node.getBoundingClientRect();
    const paddingTop = parseInt(getStyle.getPropertyValue('padding-top'), 10);
    const paddingBottom = parseInt(getStyle.getPropertyValue('padding-bottom'), 10);
    setIsTileMaxHeight(height);
    setIsTilePadding(paddingTop + paddingBottom);
  }, [isTileMaxHeight]);
  useIsomorphicEffect(() => {
    if (!aboveTheFold.current || !belowTheFold.current) {
      return;
    }

    // Interactive elements or elements that are given a role should be treated
    // the same because elements with a role can not be rendered inside a `button`
    if (!getInteractiveContent(belowTheFold.current) && !getRoleContent(belowTheFold.current) && !getInteractiveContent(aboveTheFold.current) && !getRoleContent(aboveTheFold.current) && !(slug || decorator)) {
      setInteractive(false);
    }
  }, [slug, decorator]);
  useIsomorphicEffect(() => {
    if (!tile.current) {
      return;
    }
    if (isExpanded) {
      tile.current.style.maxHeight = '';
    } else {
      tile.current.style.maxHeight = isTileMaxHeight + isTilePadding + 'px';
    }
  }, [isExpanded, isTileMaxHeight, isTilePadding]);
  useEffect(() => {
    if (!aboveTheFold.current) {
      return;
    }
    const resizeObserver = new ResizeObserver(entries => {
      const [aboveTheFold] = entries;
      setIsTileMaxHeight(aboveTheFold.contentRect.height);
    });
    resizeObserver.observe(aboveTheFold.current);
    return () => resizeObserver.disconnect();
  }, []);
  const belowTheFoldId = useId('expandable-tile-interactive');

  // AILabel is always size `xs`
  const candidate = slug ?? decorator;
  const candidateIsAILabel = isComponentElement(candidate, AILabel);
  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
    size: 'xs'
  }) : null;
  return interactive ? /*#__PURE__*/React.createElement("div", _extends({
    ref: ref,
    className: interactiveClassNames
  }, rest), /*#__PURE__*/React.createElement("div", {
    ref: tileContent
  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
    className: `${prefix}--tile--inner-decorator`
  }, normalizedDecorator) : '', /*#__PURE__*/React.createElement("div", {
    ref: aboveTheFold,
    className: `${prefix}--tile-content`
  }, childrenAsArray[0]), /*#__PURE__*/React.createElement("button", {
    type: "button",
    "aria-expanded": isExpanded,
    "aria-controls": belowTheFoldId,
    onKeyUp: composeEventHandlers([onKeyUp, handleKeyUp]),
    onClick: composeEventHandlers([onClick, handleClick]),
    "aria-label": isExpanded ? tileExpandedIconText : tileCollapsedIconText,
    ref: chevronInteractiveRef,
    className: chevronInteractiveClassNames
  }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(ChevronDown, null))), /*#__PURE__*/React.createElement("div", {
    ref: belowTheFold,
    className: `${prefix}--tile-content`,
    id: belowTheFoldId
  }, childrenAsArray[1]))) : /*#__PURE__*/React.createElement("button", _extends({
    type: "button",
    ref: ref,
    className: classNames,
    "aria-expanded": isExpanded,
    title: isExpanded ? tileExpandedIconText : tileCollapsedIconText
  }, rest, {
    onKeyUp: composeEventHandlers([onKeyUp, handleKeyUp]),
    onClick: composeEventHandlers([onClick, handleClick]),
    tabIndex: tabIndex
  }), /*#__PURE__*/React.createElement("div", {
    ref: tileContent
  }, /*#__PURE__*/React.createElement("div", {
    ref: aboveTheFold,
    className: `${prefix}--tile-content`
  }, childrenAsArray[0]), /*#__PURE__*/React.createElement("div", {
    className: `${prefix}--tile__chevron`
  }, /*#__PURE__*/React.createElement("span", null, isExpanded ? tileExpandedLabel : tileCollapsedLabel), _ChevronDown2 || (_ChevronDown2 = /*#__PURE__*/React.createElement(ChevronDown, null))), /*#__PURE__*/React.createElement("div", {
    ref: belowTheFold,
    className: `${prefix}--tile-content`
  }, childrenAsArray[1])));
});
ExpandableTile.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  /**
   * **Experimental**: Provide a `decorator` component to be rendered inside the `ExpandableTile` component
   */
  decorator: PropTypes.node,
  /**
   * `true` if the tile is expanded.
   */
  expanded: PropTypes.bool,
  /**
   * Specify if the `ExpandableTile` component should be rendered with rounded corners.
   * Only valid when `slug` prop is present
   */
  hasRoundedCorners: PropTypes.bool,
  /**
   * An ID that can be provided to aria-labelledby
   */
  id: PropTypes.string,
  /**
   * `true` to use the light version. For use on $ui-01 backgrounds only.
   * Don't use this to make tile background color same as container background color.
   */
  light: deprecate(PropTypes.bool, 'The `light` prop for `ExpandableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
  /**
   * Specify the function to run when the ExpandableTile is clicked
   */
  onClick: PropTypes.func,
  /**
   * optional handler to trigger a function when a key is pressed
   */
  onKeyUp: PropTypes.func,
  /**
   * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
   */
  slug: deprecate(PropTypes.node, 'The `slug` prop for `ExpandableTile` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'),
  /**
   * The `tabindex` attribute.
   */
  tabIndex: PropTypes.number,
  /**
   * The description of the "collapsed" icon that can be read by screen readers.
   */
  tileCollapsedIconText: PropTypes.string,
  /**
   * When "collapsed", a label to appear next to the chevron (e.g., "View more").
   */
  tileCollapsedLabel: PropTypes.string,
  /**
   * The description of the "expanded" icon that can be read by screen readers.
   */
  tileExpandedIconText: PropTypes.string,
  /**
   * When "expanded", a label to appear next to the chevron (e.g., "View less").
   */
  tileExpandedLabel: PropTypes.string
};
ExpandableTile.displayName = 'ExpandableTile';
const TileAboveTheFoldContent = /*#__PURE__*/React.forwardRef(function TilAboveTheFoldContent({
  children
}, ref) {
  const prefix = usePrefix();
  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    className: `${prefix}--tile-content__above-the-fold`
  }, children);
});
TileAboveTheFoldContent.propTypes = {
  /**
   * The child nodes.
   */
  children: PropTypes.node
};
TileAboveTheFoldContent.displayName = 'TileAboveTheFoldContent';
const TileBelowTheFoldContent = /*#__PURE__*/React.forwardRef(function TileBelowTheFoldContent({
  children
}, ref) {
  const prefix = usePrefix();
  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    className: `${prefix}--tile-content__below-the-fold`
  }, children);
});
TileBelowTheFoldContent.propTypes = {
  /**
   * The child nodes.
   */
  children: PropTypes.node
};
TileBelowTheFoldContent.displayName = 'TileBelowTheFoldContent';

export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent };