import * as React from 'react' ; import { palette , theme } from 'styled-tools' ; import _Input from 'reakit/Input' ; import styled , { css , selector } from '../styled' ; import { Box } from '../primitives' ; import _Icon , { IconProps } from '../Icon/Icon' ; import Spinner from '../Spinner' ; import { InputProps } from './Input' ; export const LoadingSpinner = styled ( Spinner ) `
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
` ; export const sizeProperties = { small : css `
    & + ${ LoadingSpinner } {
      top: 8px;
    }

    & {
      ${ theme ( 'fannypack.Input.sizes.small' ) };
    }
  ` , default : css `
    & {
      ${ theme ( 'fannypack.Input.sizes.default' ) };
    }
  ` , medium : css `
    & + ${ LoadingSpinner } {
      top: 10px;
      right: 10px;
    }

    & {
      ${ theme ( 'fannypack.Input.sizes.medium' ) };
    }
  ` , large : css `
    & + ${ LoadingSpinner } {
      top: 10px;
      right: 10px;
    }

    & {
      ${ theme ( 'fannypack.Input.sizes.large' ) };
    }
  ` } ; export const wrapperSizeProperties = { small : css `
    font-size: 0.8rem;

    & {
      ${ theme ( 'fannypack.Input.Wrapper.sizes.small' ) };
    }
  ` , default : css `
    & {
      ${ theme ( 'fannypack.Input.Wrapper.sizes.default' ) };
    }
  ` , medium : css `
    font-size: 1.25rem;

    & {
      ${ theme ( 'fannypack.Input.Wrapper.sizes.medium' ) };
    }
  ` , large : css `
    font-size: 1.5rem;

    & {
      ${ theme ( 'fannypack.Input.Wrapper.sizes.large' ) };
    }
  ` } ; export const stateProperties = css `
  border-color: ${ ( props ) => palette ( `${ props . state }` ) ( props ) };
  box-shadow: ${ ( props ) => palette ( `${ props . state }` ) ( props ) } 0px 0px 0px 1px !important;
` ; export const Icon = styled ( _Icon ) < IconProps > `
  fill: ${ palette ( 'text100' ) };
  height: 2.5em;
  margin: 0 0.75em;
  top: 0;

  ${ theme ( 'fannypack.Input.Icon.base' ) };
` ; export const InputWrapper = styled ( Box ) < { styledSize ? : string ; } > `
  align-items: center;
  position: relative;
  width: 100%;

  & {
    ${ theme ( 'fannypack.Input.Wrapper.base' ) };
  }

  & {
    ${ ( props ) => props . styledSize && wrapperSizeProperties [ props . styledSize ] };
  }
` ; export const Input = styled ( _Input ) < InputProps & { styledSize ? : string ; } > `
  -webkit-appearance: none;
  border: 1px solid #bdbdbd;
  box-shadow: inset 0px 1px 2px #e5e5e5;
  border-radius: 0.2em;
  height: 2.5em;
  width: 100%;
  padding: 0.4em 0.6em;

  &[disabled] {
    background-color: ${ palette ( 'white700' ) };
    box-shadow: unset;

    & {
      ${ theme ( 'fannypack.Input.disabled' ) };
    }
  }

  &:focus {
    outline: unset;
    z-index: 2;
    border-color: ${ ( props ) => palette ( 'primary' ) ( props ) };
    box-shadow: ${ ( props ) => palette ( 'primary' ) ( props ) } 0px 0px 0px 1px !important;

    & {
      ${ theme ( 'fannypack.Input.focus' ) };
    }
  }

  &::placeholder {
    opacity: 0.6;

    & {
      ${ theme ( 'fannypack.Input.placeholder' ) };
    }
  }

  & {
    ${ ( props ) => props . after && css `
        padding-right: 2.3em;
      ` };
  }
  & {
    ${ ( props ) => props . before && css `
        padding-left: 2.3em;
      ` };
  }

  & {
    ${ theme ( 'fannypack.Input.base' ) };
  }

  & {
    ${ ( props ) => props . styledSize && sizeProperties [ props . styledSize ] };
  }
  & {
    ${ ( props ) => props . state && stateProperties };
  }
` ; export default Input ;