import { styled } from '../styled' ; import { space , theme } from '../utils/theme' ; import { Box } from '../Box' ; import { Pressable } from '../Pressable' ; import { Set } from '../Set' ; import { Text } from '../Text' ; import { Switch as BBSwitch } from './Switch' ; export const Switch = styled ( Pressable ) `
  display: flex;
  flex-direction: row;
  align-items: center;

  ${ ( props ) => props . align === 'right' ? `
    justify-content: space-between;
  ` : '' }

  ${ theme ( 'native.Switch' , 'styles.base' ) };
` ; export const SwitchToggle = styled . Switch `
  ${ ( props ) => props . align === 'left' ? `
    margin-right: ${ space ( 1 , 'major' ) ( props ) }px;
  ` : `
    margin-left: ${ space ( 1 , 'major' ) ( props ) }px;
      ` }

  ${ theme ( 'native.Switch' , 'Toggle.styles.base' ) };
` ; export const SwitchLabel = styled ( Text ) `
  ${ theme ( 'native.Switch' , 'Label.styles.base' ) };
` ; export const SwitchField = styled ( Box ) `
  ${ theme ( 'native.SwitchField' , 'styles.base' ) };
` ; export const SwitchGroup = styled ( Box ) `
  ${ theme ( 'native.SwitchGroup' , 'styles.base' ) };
` ; export const SwitchGroupSet = styled ( Set ) `
  ${ theme ( 'native.SwitchGroup' , 'Set.styles.base' ) };
` ; export const SwitchGroupItem = styled ( ( BBSwitch || { } ) as any ) `
  ${ theme ( 'native.SwitchGroup' , 'Item.styles.base' ) };
` ; export const SwitchGroupField = styled ( Box ) `
  ${ theme ( 'native.SwitchGroupField' , 'styles.base' ) };
` ;