@atlaskit/banner/dist/es2019/components/banner.js

A banner displays a prominent message at the top of the screen.

/* banner.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./banner.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { forwardRef } from 'react';
import { Box, Inline } from '@atlaskit/primitives/compiled';
const CSS_VAR_TEXT_COLOR = '--banner-text-color';
const inlineStyles = {
  root: "_1ul9idpf"
};
const textStyles = {
  root: "_11c8fhey _1reo15vq _18m915vq _syaz12s4 _k48p1wq8 _1bto1l2s _o5721q9c _59381r31 _7hxb1r31 _9m7f1r31 _rfqo1r31 _qfs11r31 _yha28stv _15zv8stv _w7sw8stv _1bgk8stv _s41o8stv _1nmznqa1 _1xvinqa1 _15a9nqa1 _1t0pnqa1 _1k6pnqa1 _43ds1r31 _p03c1r31 _oavv1r31 _oxk41r31 _1cay1r31"
};
const backgroundColors = {
  warning: 'color.background.warning.bold',
  error: 'color.background.danger.bold',
  announcement: 'color.background.neutral.bold'
};
const tokenBackgroundColors = {
  warning: "var(--ds-background-warning-bold, #FBC828)",
  error: "var(--ds-background-danger-bold, #C9372C)",
  announcement: "var(--ds-background-neutral-bold, #292A2E)"
};
const tokenTextColors = {
  warning: "var(--ds-text-warning-inverse, #292A2E)",
  error: "var(--ds-text-inverse, #FFFFFF)",
  announcement: "var(--ds-text-inverse, #FFFFFF)"
};
const containerStyles = {
  root: "_4t3i1wto _4cvr1h6o _1e0c1txw"
};
const iconWrapperStyles = {
  root: "_1e0c1txw _4cvr1h6o _1bah1h6o _1bsb1k8s _4t3i1k8s _1o9zidpf"
};
/**
 * __Banner__
 *
 * A banner displays a prominent message at the top of the screen.
 *
 * - [Examples](https://atlassian.design/components/banner/examples)
 * - [Code](https://atlassian.design/components/banner/code)
 * - [Usage](https://atlassian.design/components/banner/usage)
 */
const Banner = /*#__PURE__*/forwardRef(({
  appearance = 'warning',
  children,
  icon,
  testId
}, ref) => {
  const appearanceType = appearance in backgroundColors ? appearance : 'warning';
  return /*#__PURE__*/React.createElement(Box, {
    xcss: containerStyles.root,
    backgroundColor: backgroundColors[appearanceType],
    padding: "space.150",
    testId: testId,
    ref: ref,
    role: "alert"
  }, /*#__PURE__*/React.createElement(Inline, {
    space: "space.050",
    alignBlock: "center",
    alignInline: "start",
    xcss: inlineStyles.root
  }, icon ? /*#__PURE__*/React.createElement(Box, {
    as: "span",
    xcss: iconWrapperStyles.root,
    style: {
      fill: tokenBackgroundColors[appearanceType],
      color: tokenTextColors[appearanceType]
    }
  }, icon) : null, /*#__PURE__*/React.createElement("span", {
    style: {
      [CSS_VAR_TEXT_COLOR]: tokenTextColors[appearanceType]
    },
    className: ax([textStyles.root])
  }, children)));
});
export default Banner;