import { styled } from '../styled' ; import { space , theme } from '../utils/theme' ; import { breakpoint } from '../utils/breakpoint' ; export const StyledSet = styled . View `
  align-items: flex-start;

  ${ getOrientationProps }
  ${ getSpacingProps }
  ${ getFillProps }
  ${ getResponsiveProps }

  ${ theme ( 'native.Set' , 'styles.base' ) };
` ; function getOrientationProps ( { orientation , ... props } ) { if ( orientation === 'horizontal' ) { return `
      flex-direction: row;
      flex-wrap: wrap;
      ${ theme ( 'native.Set' , 'styles.horizontal' ) ( props ) };
    ` ; } if ( orientation === 'vertical' ) { return `
      flex-direction: column;
      ${ theme ( 'native.Set' , 'styles.vertical' ) ( props ) };
    ` ; } return '' ; } function getSpacingProps ( { spacing , ... props } ) { return `
    margin-left: -${ space ( spacing ) ( props ) }px;
    margin-top: -${ space ( spacing ) ( props ) }px;
  ` ; } function getFillProps ( { isFilled } ) { if ( isFilled ) { return `
      align-items: stretch;
    ` ; } return `
    align-items: flex-start;
  ` ; } function getResponsiveProps ( { verticalBelow , ... props } ) { if ( verticalBelow ) { return breakpoint ( 'width' , { [ `max-${ verticalBelow }` ] : `
        flex-direction: column;
      ` , } ) ( props ) ; } return '' ; }