import React, { memo } from "react";
import styled from "styled-components";
import Text from "../../asorted/Text";
import FlexBox from "../../layout/Flex";
import { BracketRight, BracketLeft } from "./Brackets";
const Container = styled(FlexBox) `
  justify-content: center;
  flex-wrap: wrap;
  align-items: stretch;
  min-height: ${p => p.theme.space[12]}px;
`;
const TextContainer = styled(FlexBox).attrs(() => ({
    flex: "1",
    justifyContent: "center",
    alignItems: "center",
})) `
  ${Text} {
    flex: 1;
  }
`;
function Log({ children, extraTextProps, ...props }) {
    return (React.createElement(Container, { color: "neutral.c100", ...props },
        React.createElement(BracketLeft, null),
        React.createElement(TextContainer, { flex: "1", alignItems: "center", justifyContent: "center" },
            React.createElement(Text, { variant: "h3", textTransform: "uppercase", textAlign: "center", color: "inherit", ...extraTextProps }, children)),
        React.createElement(BracketRight, null)));
}
export default memo(Log);
//# sourceMappingURL=index.js.map