{"version":3,"sources":["../../../src/Card/Card.tsx"],"names":[".cq2du5h",".c1umyf6x",".ceknimz",".c1pd61w9",".c1f066tf"],"mappings":"AAgBMA;AAOAC;AAWAC;AAIAC;AAOAC","file":"../../../src/Card/Card.tsx","sourcesContent":["import React, { useCallback } from \"react\";\nimport { css, cx } from \"linaria\";\nimport { colors } from \"../utils\";\nimport Title, { TitleContainer } from \"../Title/Title\";\n\nexport interface BaseCardProps {\n  header?: React.ReactNode;\n  title?: string;\n  extra?: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n  onClick?: () => void;\n}\nexport type CardProps = BaseCardProps &\n  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n\nconst CardHeaderFooter = css`\n  background: rgb(246, 248, 250);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst CardHeader = css`\n  border-bottom: 1px solid ${colors[\"color-basic-500\"]};\n  & .${TitleContainer} {\n    margin: 0;\n    flex: 1;\n  }\n  & div {\n    flex: 0;\n  }\n`;\n\nconst CardFooter = css`\n  border-top: 1px solid ${colors[\"color-basic-500\"]};\n`;\n\nconst CardContainer = css`\n  overflow: hidden;\n  border-radius: 6px;\n  border: 1px solid ${colors[\"color-basic-500\"]};\n  transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;\n`;\n\nconst CardPadded = css`\n  padding: 12px 16px;\n`;\n\nconst Card: React.FC<CardProps> = ({\n  children,\n  header,\n  title,\n  extra,\n  footer,\n  className,\n  ...props\n}) => {\n  const renderHeader = useCallback(() => {\n    if (!header && !title && !extra) {\n      return null;\n    }\n\n    if (!header) {\n      return (\n        <div className={cx(CardPadded, CardHeaderFooter, CardHeader)}>\n          <Title level={6}>{title}</Title>\n          {extra && <div>{extra}</div>}\n        </div>\n      );\n    }\n\n    return (\n      <div className={cx(CardPadded, CardHeaderFooter, CardHeader)}>\n        {header}\n      </div>\n    );\n  }, [header, title, extra]);\n  return (\n    <div className={cx(CardContainer, className)} {...props}>\n      {renderHeader()}\n      <div className={cx(CardPadded)}>{children}</div>\n      {footer && (\n        <div className={cx(CardPadded, CardHeaderFooter, CardFooter)}>\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Card;\n"]}