@atlaskit/icon/dist/cjs/components/icon-tile.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = IconTile;
var _react = require("@emotion/react");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var sizeMap = {
  '16': (0, _react.css)({
    width: '16px',
    height: '16px'
  }),
  '24': (0, _react.css)({
    width: '24px',
    height: '24px'
  }),
  '32': (0, _react.css)({
    width: '32px',
    height: '32px'
  }),
  '40': (0, _react.css)({
    width: '40px',
    height: '40px'
  }),
  '48': (0, _react.css)({
    width: '48px',
    height: '48px'
  })
};
var appearanceMap = {
  grayBold: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-gray-bolder, #626F86)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  limeBold: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-lime-bolder, #5B7F24)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  greenBold: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-green-bolder, #1F845A)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  blueBold: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-blue-bolder, #0C66E4)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  redBold: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-red-bolder, #C9372C)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  purpleBold: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-purple-bolder, #6E5DC6)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  magentaBold: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-magenta-bolder, #AE4787)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  tealBold: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-teal-bolder, #227D9B)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  orangeBold: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-orange-bolder, #C25100)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  yellowBold: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-yellow-bolder, #946F00)",
    color: "var(--ds-icon-inverse, #FFFFFF)"
  }),
  gray: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)",
    color: "var(--ds-icon-accent-gray, #758195)"
  }),
  lime: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-lime-subtler, #D3F1A7)",
    color: "var(--ds-icon-accent-lime, #6A9A23)"
  }),
  orange: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-orange-subtler, #FEDEC8)",
    color: "var(--ds-icon-accent-orange, #E56910)"
  }),
  magenta: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
    color: "var(--ds-icon-accent-magenta, #CD519D)"
  }),
  green: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-green-subtler, #BAF3DB)",
    color: "var(--ds-icon-accent-green, #22A06B)"
  }),
  blue: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-blue-subtler, #CCE0FF)",
    color: "var(--ds-icon-accent-blue, #1D7AFC)"
  }),
  red: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
    color: "var(--ds-icon-accent-red, #C9372C)"
  }),
  purple: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-purple-subtler, #DFD8FD)",
    color: "var(--ds-icon-accent-purple, #8270DB)"
  }),
  teal: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-teal-subtler, #C6EDFB)",
    color: "var(--ds-icon-accent-teal, #2898BD)"
  }),
  yellow: (0, _react.css)({
    backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
    color: "var(--ds-icon-accent-yellow, #B38600)"
  })
};
var shapeMap = {
  square: (0, _react.css)({
    borderRadius: "var(--ds-border-radius-100, 4px)"
  }),
  circle: (0, _react.css)({
    borderRadius: "var(--ds-border-radius-circle, 32032px)"
  })
};
var iconTileStyles = (0, _react.css)({
  display: 'inline-flex',
  boxSizing: 'border-box',
  alignItems: 'center',
  justifyContent: 'center',
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  fontSize: 0 /* Prevents parent font-size from affecting the container */
});

/**
 * __IconTile__ -- ⚠️ Experimental ⚠️
 *
 * An icon tile is used to present an icon with a background color.
 * Icon tiles, unlike standard icons, can scale up and down to provide greater emphasis.
 *
 * This component is currently in an experimental state and is subject to change in minor or patch releases.
 *
 */
function IconTile(props) {
  var Icon = props.icon,
    label = props.label,
    appearance = props.appearance,
    _props$size = props.size,
    size = _props$size === void 0 ? '24' : _props$size,
    _props$shape = props.shape,
    shape = _props$shape === void 0 ? 'square' : _props$shape,
    LEGACY_fallbackComponent = props.LEGACY_fallbackComponent,
    testId = props.testId;
  var ExpandedIcon = Icon;
  if (LEGACY_fallbackComponent && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
    return LEGACY_fallbackComponent;
  } else {
    return (0, _react.jsx)("span", {
      "data-testid": testId,
      css: [iconTileStyles, appearanceMap[appearance], sizeMap[size], shapeMap[shape]]
    }, (0, _react.jsx)(ExpandedIcon, {
      color: "currentColor",
      label: label,
      spacing: "spacious",
      shouldScale: true
    }));
  }
}