{"version":3,"sources":["../../../src/Title/Title.tsx"],"names":[".t3rtjfn"],"mappings":"AAaaA","file":"../../../src/Title/Title.tsx","sourcesContent":["import React from \"react\";\nimport { css, cx } from \"linaria\";\nimport { fontSizes } from \"../utils\";\nimport \"../utils/global\";\n\nexport interface BaseTitleProps {\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  align?: \"left\" | \"center\" | \"right\";\n  invert?: boolean;\n}\nexport const BaseTitle: React.FC<BaseTitleProps> = () => null;\n// eslint-disable-next-line quotes\nexport type TitleProps = BaseTitleProps & JSX.IntrinsicElements[\"h1\"];\nexport const TitleContainer = css`\n  font-weight: 600;\n  line-height: 1.4;\n  margin-bottom: 0.5em;\n  color: rgba(0, 0, 0, 0.87);\n  h1& {\n    font-size: ${fontSizes.h1};\n  }\n  h2& {\n    font-size: ${fontSizes.h2};\n  }\n  h3& {\n    font-size: ${fontSizes.h3};\n  }\n  h4& {\n    font-size: ${fontSizes.h4};\n  }\n  h5& {\n    font-size: ${fontSizes.h5};\n  }\n  h6& {\n    font-size: ${fontSizes.h6};\n  }\n  &.align-left {\n    text-align: left;\n  }\n  &.align-center {\n    text-align: center;\n  }\n  &.align-right {\n    text-align: right;\n  }\n  &.invert {\n    color: #fff;\n  }\n`;\n\nconst Title: React.FC<TitleProps> = ({\n  level,\n  children,\n  className,\n  align,\n  invert,\n  ...props\n}) => {\n  const Component: any = `h${[level || 3]}`;\n  return (\n    <Component\n      className={cx(\n        TitleContainer,\n        align && `align-${align}`,\n        invert && \"invert\",\n        className\n      )}\n      {...props}>\n      {children}\n    </Component>\n  );\n};\n\nTitle.defaultProps = {\n  level: 3,\n};\n\nexport default Title;\n"]}