import React from 'react';
import styled from 'styled-components';
import { Box } from '../../../..';
import { ExpandItems } from '.';
var StyledBox = styled(Box).withConfig({
  displayName: "ExpandArea__StyledBox",
  componentId: "sc-1nbgdax-0"
})(["background:", ";"], function (p) {
  return p.theme.color.tableRowBackground;
});
export var ExpandArea = function ExpandArea(_ref) {
  var expandChildren = _ref.expandChildren,
    expandItems = _ref.expandItems;
  return React.createElement(StyledBox, {
    px: 5,
    pb: 2,
    md: {
      px: 5,
      pt: 5,
      pb: 0
    },
    role: "cell"
  }, expandItems && expandItems.length ? React.createElement(ExpandItems, {
    items: expandItems
  }) : null, expandChildren && React.createElement(Box, {
    pt: 2,
    md: {
      px: 5,
      pt: 0,
      pb: 5
    }
  }, expandChildren));
};