@kiwicom/orbit-components/es/Modal/ModalSection/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

import * as React from "react";
import styled from "styled-components";

import defaultTokens from "../../defaultTokens";
import media from "../../utils/media";
import { StyledModalFooter } from "../ModalFooter";

export const StyledModalSection = styled.section.withConfig({
  displayName: "ModalSection__StyledModalSection"
})(["width:100%;padding:", ";background-color:", ";border-bottom:1px solid ", ";box-sizing:border-box;&:first-of-type{border-top:", ";border-top-left-radius:", ";border-top-right-radius:", ";margin:", ";}&:last-of-type{border-bottom:", ";& ~ ", "{margin:", ";}}", ";"], ({ theme }) => `${theme.orbit.spaceLarge} ${theme.orbit.spaceMedium}`, ({ theme, suppressed }) => suppressed ? theme.orbit.paletteCloudLight : theme.orbit.paletteWhite, ({ theme }) => theme.orbit.paletteCloudNormal, ({ suppressed, theme }) => suppressed && `1px solid ${theme.orbit.paletteCloudNormal}`, ({ theme }) => theme.orbit.borderRadiusNormal, ({ theme }) => theme.orbit.borderRadiusNormal, ({ suppressed, theme }) => suppressed && `${theme.orbit.spaceLarge} 0 0 0`, ({ suppressed, theme }) => suppressed ? `1px solid ${theme.orbit.paletteCloudNormal}` : "0", StyledModalFooter, ({ theme, suppressed }) => suppressed && `${theme.orbit.spaceMedium} 0 0 0`, media.desktop`
    padding: ${({ theme }) => theme.orbit.spaceXXLarge};
    
    &:first-of-type {
      margin: ${({ suppressed, theme }) => suppressed && `${theme.orbit.spaceXXLarge} 0 0 0`};
    }
    &:last-of-type {
      border-bottom-left-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
      border-bottom-right-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
      & ~ ${StyledModalFooter} {
        margin: ${({ suppressed, theme }) => suppressed && `${theme.orbit.spaceXXLarge} 0 0 0`};
      }
    }
  `);

StyledModalSection.defaultProps = {
  theme: defaultTokens
};

const ModalSection = props => {
  const { suppressed, children, dataTest } = props;
  return React.createElement(
    StyledModalSection,
    { suppressed: suppressed, "data-test": dataTest },
    children
  );
};

export default ModalSection;