import { palette , theme } from 'styled-tools' ; import Field from 'reakit/Field' ; import styled , { space } from '../styled' ; import { Omit } from '../types' ; import _Label from '../Label' ; import Button from '../Button' ; import Pane from '../Pane' ; import Popover from '../Popover' ; import _Text from '../Text' ; import { FieldWrapperProps } from './FieldWrapper' ; export const Label = styled ( _Label ) `
  margin-bottom: 0 !important;

  & {
    ${ theme ( 'fannypack.FieldWrapper.label' ) };
  }
` ; export const DescriptionText = styled ( _Text ) `
  display: block;
  font-size: 0.8rem;

  & {
    ${ theme ( 'fannypack.FieldWrapper.description' ) };
  }
` ; export const HintText = styled ( _Text ) `
  display: block;
  font-size: 0.8rem;
  margin-top: ${ space ( 1 ) }rem;

  & {
    ${ theme ( 'fannypack.FieldWrapper.hint' ) };
  }
` ; export const OptionalText = styled ( _Text ) `
  font-size: 0.8rem;
  color: ${ palette ( 'text100' ) };
  margin-left: ${ space ( 2 ) }rem;
  line-height: 1;

  & {
    ${ theme ( 'fannypack.FieldWrapper.optional' ) };
  }
` ; export const RequiredText = styled ( _Text ) `
  color: ${ palette ( 'danger' ) };
  margin-left: ${ space ( 1 ) }rem;
  font-weight: ${ theme ( 'fannypack.fontWeights.semibold' ) };
  font-size: ${ theme ( 'fannypack.fontSizes.150' ) }rem;

  & {
    ${ theme ( 'fannypack.FieldWrapper.required' ) };
  }
` ; export const TooltipButton = styled ( Button ) `
  margin-left: ${ space ( 1 ) }rem;
  min-height: unset;
  height: 14px;
  padding: 0.1em 0.5em;

  & {
    ${ theme ( 'fannypack.FieldWrapper.TooltipButton.base' ) };
  }
` ; export const TooltipPopover = styled ( Pane ) `
  position: absolute;
  padding: ${ space ( 1 , 'major' ) }rem;
  margin-top: ${ space ( 1 , 'major' ) }rem;
  width: max-content;
  max-width: 400px;
  z-index: 999999;

  & {
    ${ theme ( 'fannypack.FieldWrapper.TooltipPopover.base' ) };
  }
` ; export const ValidationText = styled ( _Text ) `
  display: block;
  font-size: 0.8rem;
  margin-top: ${ space ( 1 ) }rem;

  & {
    ${ theme ( 'fannypack.FieldWrapper.validation' ) };
  }
` ; export const FieldWrapper = styled ( Field ) < Omit < FieldWrapperProps , 'children' > > `
  & {
    ${ theme ( 'fannypack.FieldWrapper.base' ) };
  }
` ; export default FieldWrapper ;