jobiqo-cl/lib/es/src/components/02-atoms/07-box/styles.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

import styled from 'styled-components';
import { color } from '../../../../node_modules/@styled-system/color/dist/index.esm.js';
import { space } from '../../../../node_modules/@styled-system/space/dist/index.esm.js';
import { shadow } from '../../../../node_modules/@styled-system/shadow/dist/index.esm.js';
import '../../../../node_modules/styled-system/dist/index.esm.js';

const Box = styled.div.attrs(props => (Object.assign(Object.assign({}, props), { p: props.p || props.theme.box.p, mt: props.mt || props.theme.box.mt }))) `
  background: ${props => props.theme.box.background};
  border-width: ${props => props.theme.box.borderWidth};
  border-style: ${props => props.theme.box.borderStyle};
  border-color: ${props => props.theme.box.borderColor};
  border-radius: ${props => props.theme.box.borderRadius};
  box-shadow: ${props => props.theme.box.boxShadow};
  ${color}
  ${space}
  ${shadow}
  
  padding: ${props => (props.paddingClean ? 0 : ``)};
  margin: ${props => (props.marginClean ? 0 : ``)};
`;
const BoxTitle = styled.span `
  display: block;
  width: 100%;
  margin-top: ${props => props.theme.box.label.marginTop};
  margin-bottom: ${props => props.theme.box.label.marginBottom};
  padding-bottom: ${props => props.theme.box.label.paddingBottom};
  border-bottom: ${props => props.theme.box.label.borderBottom};
  font-size: ${props => props.theme.box.label.fontSize};
  font-weight: ${props => props.theme.box.label.fontWeight};
  text-transform: ${props => props.theme.box.label.textTransform};
`;

export { Box, BoxTitle };