import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { spacing } from '../../spacing';
import { fontSize, fontWeight } from '../../style/theme';
import { getThemeVariantSelector } from '../../utils';
const BannerContainer = styled.div `
  ${(props) => css `
    color: ${props.theme.textPrimary};
    background-color: ${props.theme.backgroundLevel1};
    display: flex;
    padding: ${spacing.r8};
    align-items: center;
    font-size: ${fontSize.small};
    border: 1px solid;
    border-left: 5px solid;
    border-radius: 3px;
    border-color: ${getThemeVariantSelector()};
    i {
      display: flex;
      align-items: center;
      margin-left: ${spacing.r8};
      color: ${getThemeVariantSelector()};
    }
  `}
`;
const TextContainer = styled.div `
  display: flex;
  flex-direction: column;
`;
const Text = styled.span `
  margin-left: ${spacing.r16};
`;
const Title = styled.div `
  margin-left: ${spacing.r16};
  font-weight: ${fontWeight.bold};
`;
function Banner({ icon, title, children, variant, ...rest }) {
    return (_jsxs(BannerContainer, { className: "sc-banner", variant: variant, children: [icon, _jsxs(TextContainer, { children: [title && _jsx(Title, { children: title }), _jsx(Text, { children: children })] })] }));
}
export { Banner };
