@atlaskit/icon/dist/esm/components/icon-tile/icon-tile-new.js

An icon is a symbol representing a command, device, directory, or common action.

/* icon-tile-new.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./icon-tile-new.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import Tile from '@atlaskit/tile';
var sizeCrossCompatibleMap = {
  // Size mapping from old pixel sizes to new t-shirt sizes
  '16': 'xsmall',
  // Not used
  '24': 'small',
  '32': 'medium',
  '40': 'large',
  '48': 'xlarge',
  xsmall: 'xsmall',
  small: 'small',
  medium: 'medium',
  large: 'large',
  xlarge: 'xlarge'
};

// Icon color mapping for Tile-based icons
var iconColorMap = {
  blue: "_syaz6txe",
  blueBold: "_syaz1q3r",
  gray: "_syazdgkc",
  grayBold: "_syaz5w2r",
  green: "_syaz17hp",
  greenBold: "_syaz1q3r",
  lime: "_syaz8645",
  limeBold: "_syaz1q3r",
  magenta: "_syazv8hk",
  magentaBold: "_syaz1q3r",
  orange: "_syaz1j6y",
  orangeBold: "_syaz1q3r",
  purple: "_syazuq3u",
  purpleBold: "_syaz1q3r",
  red: "_syaznbxb",
  redBold: "_syaz1q3r",
  teal: "_syaz8uof",
  tealBold: "_syaz1q3r",
  yellow: "_syaz1oqg",
  yellowBold: "_syaz1q3r"
};

// Background color mapping for Tile component
var backgroundColorMap = {
  blue: undefined,
  blueBold: 'color.background.accent.blue.subtle',
  gray: undefined,
  grayBold: 'color.background.neutral.bold',
  green: undefined,
  greenBold: 'color.background.accent.green.subtle',
  lime: undefined,
  limeBold: 'color.background.accent.lime.subtle',
  magenta: undefined,
  magentaBold: 'color.background.accent.magenta.subtle',
  orange: undefined,
  orangeBold: 'color.background.accent.orange.subtle',
  purple: undefined,
  purpleBold: 'color.background.accent.purple.subtle',
  red: undefined,
  redBold: 'color.background.accent.red.subtle',
  teal: undefined,
  tealBold: 'color.background.accent.teal.subtle',
  yellow: undefined,
  yellowBold: 'color.background.accent.yellow.subtle'
};

/**
 * __IconTile__
 *
 * An icon with background shape, color, and size properties determined by Tile.
 */
export default function IconTileNew(props) {
  var Icon = props.icon,
    label = props.label,
    appearance = props.appearance,
    _props$size = props.size,
    size = _props$size === void 0 ? 'small' : _props$size,
    testId = props.testId;
  var ExpandedIcon = Icon;
  return /*#__PURE__*/React.createElement(Tile, {
    size: sizeCrossCompatibleMap[size],
    backgroundColor: backgroundColorMap[appearance],
    label: label,
    testId: testId
  }, /*#__PURE__*/React.createElement("span", {
    className: ax([iconColorMap[appearance]])
  }, /*#__PURE__*/React.createElement(ExpandedIcon, {
    color: "currentColor",
    label: "",
    shouldScale: true
  })));
}