@atlaskit/logo/dist/esm/utils/icon-wrapper.js

A logo is a visual representation of a brand or app. It can be a word, an image, or a combination of both.

/* icon-wrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./icon-wrapper.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
var styles = {
  root: "_1e0c1o8l",
  TEMP_assets: "_9aea1fkg"
};

/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
var cloudLightAppearanceMap = {
  brand: "_1b3i18uv _9aea18uv",
  neutral: "_1b3i1e01 _9aea1fkg",
  inverse: "_1b3i5a6q _9aeau67f",
  legacy: "_1b3iu67f _9aeadoyu"
};

/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
var cloudDarkAppearanceMap = {
  brand: "_1b3i18uv _9aea18uv",
  neutral: "_1b3i1gvk _9aea8hz0",
  inverse: "_1b3iu67f _9aea5a6q",
  legacy: "_1b3iu67f _9aeadoyu"
};

/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
var dataCenterLightAppearanceMap = {
  brand: "_1b3idoyu _9aeau67f _3wu01fkg",
  neutral: "_1b3i1e01 _9aea1fkg _3wu01e01",
  inverse: "_1b3iu67f _9aeaqlpt _3wu0u67f",
  legacy: "_1b3idoyu _9aeau67f _3wu01fkg"
};

/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
var dataCenterDarkAppearanceMap = {
  brand: "_1b3idoyu _9aeaqlpt _3wu08hz0",
  neutral: "_1b3i1gvk _9aea8hz0 _3wu01gvk",
  inverse: "_1b3i1501 _9aeau67f _3wu01501",
  legacy: "_1b3idoyu _9aeaqlpt _3wu08hz0"
};
var rovoDarkAppearanceMap = {
  brand: "_170318uv _1evo18uv _epb518uv _1osd18uv",
  neutral: "_17031gvk _1evo1gvk _epb51gvk _1osd1gvk",
  inverse: "_1703qlpt _1evoqlpt _epb5qlpt _1osdqlpt",
  legacy: "_1703doyu _1evodoyu _epb5doyu _1osddoyu"
};
var rovoLightAppearanceMap = {
  brand: "_170318uv _1evo18uv _epb518uv _1osd18uv",
  neutral: "_17031e01 _1evo1e01 _epb51e01 _1osd1e01",
  inverse: "_1703u67f _1evou67f _epb5u67f _1osdu67f",
  legacy: "_1703doyu _1evodoyu _epb5doyu _1osddoyu"
};

/* eslint-enable @atlaskit/ui-styling-standard/no-imported-style-values */
/* eslint-enable @atlaskit/ui-styling-standard/no-unsafe-values */
var sizeMap = {
  xxsmall: "_4t3i7vkz",
  xsmall: "_4t3igktf",
  small: "_4t3i1tcg",
  medium: "_4t3izwfg",
  large: "_4t3i1ylp",
  xlarge: "_4t3ickbl",
  '12': "_4t3i1crf",
  '16': "_4t3i7vkz",
  '20': "_4t3igktf",
  '24': "_4t3i1tcg",
  '32': "_4t3izwfg"
};
export function IconWrapper(_ref) {
  var _ref$size = _ref.size,
    size = _ref$size === void 0 ? '20' : _ref$size,
    label = _ref.label,
    svg = _ref.svg,
    customThemeSvg = _ref.customThemeSvg,
    userDefinedTestId = _ref.testId,
    _ref$appearance = _ref.appearance,
    appearance = _ref$appearance === void 0 ? 'brand' : _ref$appearance,
    customIconColor = _ref.iconColor,
    _ref$isAssets = _ref.isAssets,
    isAssets = _ref$isAssets === void 0 ? false : _ref$isAssets,
    _ref$type = _ref.type,
    type = _ref$type === void 0 ? 'tile' : _ref$type;
  var testId = userDefinedTestId && "".concat(userDefinedTestId, "--wrapper");
  var isCustomThemed = customThemeSvg && customIconColor;
  var _useThemeObserver = useThemeObserver(),
    colorMode = _useThemeObserver.colorMode;
  return /*#__PURE__*/React.createElement("span", {
    "data-testid": testId,
    style: {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
      '--themed-icon-color': customIconColor || 'initial'
    }
    // If the label is provided an empty string, we want to remove the element from the accessibility tree.
    ,
    "aria-label": label ? label : undefined,
    role: label ? 'img' : undefined,
    "aria-hidden": label === '' ? true : undefined
    // We are using dangerouslySetInnerHTML here to tell React not to track changes to the SVG elements.
    // This is because the SVG elements are static and will not change, so we get a little performance benefit by
    // bypassing React.
    ,
    dangerouslySetInnerHTML: {
      __html: isCustomThemed ? customThemeSvg : svg
    },
    className: ax([styles.root, sizeMap[size], colorMode === 'dark' ? dataCenterDarkAppearanceMap[appearance] : dataCenterLightAppearanceMap[appearance], type === 'rovo' ? colorMode === 'dark' ? rovoDarkAppearanceMap[appearance] : rovoLightAppearanceMap[appearance] : colorMode === 'dark' ? cloudDarkAppearanceMap[appearance] : cloudLightAppearanceMap[appearance], isAssets && appearance === 'brand' && (fg('assets-platform-branding') || fg('assets-platform-branding-v2')) && styles.TEMP_assets])
  });
}