import * as React from 'react' ; import styled , { css } from 'styled-components' ; const fullDivCss = css `
  width: 100%;
  height: 100%;
  outline: none;
  overflow: hidden;
` ; const Root = styled . div `
  ${ fullDivCss }
  border: 2px solid darkgray;
  margin: 5px;
  user-select: none;
` ; const Pane = styled . div `
  ${ fullDivCss }
  background: lightgray;
` ; const VSplit = styled . div `
  ${ fullDivCss }
  background: darkgray;
  width: 2px;
` ; const HSplit = styled . div `
  ${ fullDivCss }
  background: darkgray;
  height: 2px;
` ; const LeftRightLayout = styled . div . attrs ( ( { leftWidth , rightWidth } ) : any => ( { style : { gridTemplateColumns : `${ leftWidth } auto ${ rightWidth }` , } , } ) ) `
  ${ fullDivCss }
  display: grid;
  grid-template-rows: 1fr;
` ; const TopBottomLayout = styled . div . attrs ( ( { topHeight , bottomHeight } ) : any => ( { style : { gridTemplateRows : `${ topHeight } auto ${ bottomHeight }` , } , } ) ) `
  ${ fullDivCss }
  display: grid;
  grid-template-columns: 1fr;
` ; /**
 * The icon representing a left|right split.
 */ export const LeftRightLayoutIcon = ( ) => { return ( < Root > < LeftRightLayout leftWidth = "50%" rightWidth = "50%" > < Pane /> < VSplit / > < Pane /> < /LeftRightLayout> < /Root>); } ; /**
 * The icon representing a top/bottom split.
 */ export const TopBottomLayoutIcon = ( ) => { return ( < Root > < TopBottomLayout topHeight = "50%" bottomHeight = "50%" > < Pane /> < HSplit / > < Pane /> < /TopBottomLayout> < /Root>); } ;