function _extends() {
  _extends =
    Object.assign ||
    function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
      return target;
    };
  return _extends.apply(this, arguments);
}

import React from 'react';
import styled from 'styled-components';
export const TextInput = ({
  label,
  type,
  value,
  placeholder,
  onchange,
  error,
  name,
  ...props
}) => {
  return /*#__PURE__*/ React.createElement(
    Inputwrapper,
    {
      className: `input-wrapper ${error ? 'input-error' : ''}`,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement(
        'input',
        _extends({}, props, {
          name: name,
          type: type,
          value: value,
          placeholder: placeholder,
          onChange: onchange,
        })
      ),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        /*#__PURE__*/ React.createElement('span', null, label)
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          error
        )
      : null
  );
};
export const RegularInput = ({
  label,
  type,
  value,
  placeholder,
  onchange,
  error,
  name,
  ...props
}) => {
  return /*#__PURE__*/ React.createElement(
    Inputwrapper,
    {
      className: `input-wrapper ${error ? 'input-error' : ''}`,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement(
        'input',
        _extends({}, props, {
          name: name,
          type: type,
          value: value,
          placeholder: placeholder,
          onChange: e => onchange(e.target.value),
        })
      ),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        /*#__PURE__*/ React.createElement('span', null, label)
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          error
        )
      : null
  );
};
export const PasswordInput = ({
  label,
  placeholder,
  onchange,
  value,
  error,
  name,
  ...props
}) => {
  const [showpassword, setShowpassword] = React.useState(false);

  const HandleToggle = e => {
    setShowpassword(!showpassword);
    e.preventDefault();
  };

  return /*#__PURE__*/ React.createElement(
    Inputwrapper,
    {
      className: `input-wrapper ${error ? 'input-error' : ''}`,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement(
        'input',
        _extends(
          {
            type: `${showpassword ? 'text' : 'password'}`,
            placeholder: placeholder,
            name: name,
            value: value,
            onChange: onchange,
          },
          props
        )
      ),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        /*#__PURE__*/ React.createElement('span', null, label)
      ),
      /*#__PURE__*/ React.createElement(
        TogglePassword,
        {
          type: 'button',
          onClick: HandleToggle,
          className: 'toggle-password',
        },
        /*#__PURE__*/ React.createElement(
          'svg',
          null,
          /*#__PURE__*/ React.createElement('use', {
            href: `/images/icons.svg#${showpassword ? 'show' : 'hide'}`,
          })
        )
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          error
        )
      : null
  );
};
export const TextArea = ({ label, placeholder, onchange, error }) => {
  return /*#__PURE__*/ React.createElement(
    Inputwrapper,
    {
      className: `input-wrapper ${error ? 'input-error' : ''}`,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement('textarea', {
        placeholder: placeholder,
        onChange: onchange,
        rows: '7',
      }),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        /*#__PURE__*/ React.createElement('span', null, label)
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          'Uh oh! There was an error!'
        )
      : null
  );
};
export const RegularTextArea = ({
  label,
  placeholder,
  onchange,
  error,
  value,
  ...props
}) => {
  return /*#__PURE__*/ React.createElement(
    Inputwrapper,
    {
      className: `input-wrapper ${error ? 'input-error' : ''}`,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement(
        'textarea',
        _extends({}, props, {
          placeholder: placeholder,
          value: value,
          onChange: e => onchange(e.target.value),
          rows: '7',
        })
      ),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        /*#__PURE__*/ React.createElement('span', null, label)
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          'Uh oh! There was an error!'
        )
      : null
  );
};
export const TagInputWODrop = ({ type, placeholder, onchange, error }) => {
  return /*#__PURE__*/ React.createElement(
    Inputwrapper,
    {
      className: `input-wrapper tag-wrapper ${error ? 'input-error' : ''}`,
    },
    /*#__PURE__*/ React.createElement(
      TagInputWrapper,
      {
        className: 'tag-input active',
      },
      /*#__PURE__*/ React.createElement(
        Tag,
        null,
        /*#__PURE__*/ React.createElement('span', null, 'Yomi@softcom.ng'),
        /*#__PURE__*/ React.createElement(
          'svg',
          null,
          /*#__PURE__*/ React.createElement('use', {
            href: '/images/icons.svg#cancel',
          })
        )
      ),
      /*#__PURE__*/ React.createElement('input', {
        type: type,
        placeholder: placeholder,
        onChange: onchange,
      })
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          'Uh oh! There was an error!'
        )
      : null
  );
};
export const FbQuestionInput = ({
  label,
  type,
  placeholder,
  onchange,
  svg,
  value,
}) => {
  return /*#__PURE__*/ React.createElement(
    Inputwrapper,
    {
      className: 'input-wrapper fb-q-input',
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement(
        'svg',
        {
          className: 'bg-svg',
        },
        /*#__PURE__*/ React.createElement('use', {
          href: `/images/icons.svg#${svg}`,
        })
      ),
      /*#__PURE__*/ React.createElement('input', {
        value: value,
        type: type,
        placeholder: placeholder,
        onChange: e => onchange(e.target.value),
      }),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        /*#__PURE__*/ React.createElement('span', null, label)
      )
    )
  );
};
export const InputWLabel = ({
  type,
  label,
  placeholder,
  onchange,
  error,
  svg,
}) => {
  return /*#__PURE__*/ React.createElement(
    Inputwrapper,
    {
      className: `input-wrapper input-w-label ${error ? 'input-error' : ''}`,
    },
    /*#__PURE__*/ React.createElement(
      'label',
      {
        className: 'main-label',
      },
      /*#__PURE__*/ React.createElement('span', null, label),
      /*#__PURE__*/ React.createElement(
        'svg',
        null,
        /*#__PURE__*/ React.createElement('use', {
          href: '/images/icons.svg#info',
        })
      )
    ),
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement('input', {
        type: type,
        placeholder: placeholder,
        onChange: onchange,
      }),
      /*#__PURE__*/ React.createElement('span', {
        className: 'label',
      }),
      /*#__PURE__*/ React.createElement(
        'svg',
        {
          className: 'bg-svg',
        },
        /*#__PURE__*/ React.createElement('use', {
          href: `/images/icons.svg#${svg}`,
        })
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          'Uh oh! There was an error!'
        )
      : null
  );
};
export const InputWOLabel = ({
  type,
  placeholder,
  onchange,
  svg,
  value,
  maxLength,
  ...props
}) => {
  return /*#__PURE__*/ React.createElement(
    Inputwrapper,
    {
      className: 'input-wrapper input-wo-label',
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement(
        'input',
        _extends({}, props, {
          value: value,
          maxLength: maxLength || '',
          type: type,
          placeholder: placeholder,
          onChange: e => onchange(e.target.value),
        })
      ),
      /*#__PURE__*/ React.createElement('span', {
        className: 'label',
      }),
      svg
        ? /*#__PURE__*/ React.createElement(
            'svg',
            {
              className: 'bg-svg',
            },
            /*#__PURE__*/ React.createElement('use', {
              href: `/images/icons.svg#${svg}`,
            })
          )
        : ''
    )
  );
};
export const InputWOLabelAlt = ({
  label,
  type,
  value,
  placeholder,
  onchange,
  error,
  name,
  ...props
}) => {
  return /*#__PURE__*/ React.createElement(
    Inputwrapper,
    {
      className: `input-wrapper input-wo-label ${error ? 'input-error' : ''}`,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement(
        'input',
        _extends({}, props, {
          name: name,
          type: type,
          value: value,
          placeholder: placeholder,
          onChange: e => onchange(e.target.value),
        })
      ),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        /*#__PURE__*/ React.createElement('span', null, label)
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          error
        )
      : null
  );
};
export const DateInput = ({
  label,
  type,
  placeholder,
  onchange,
  error,
  className,
  svg,
}) => {
  return /*#__PURE__*/ React.createElement(
    Inputwrapper,
    {
      className: `input-wrapper ${error ? 'input-error' : ''} ${className}`,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement('input', {
        type: type,
        placeholder: placeholder,
        onChange: onchange,
      }),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        /*#__PURE__*/ React.createElement('span', null, label)
      ),
      /*#__PURE__*/ React.createElement(
        'svg',
        {
          className: 'bg-svg',
        },
        /*#__PURE__*/ React.createElement('use', {
          href: `/images/icons.svg#${svg}`,
        })
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          'Uh oh! There was an error!'
        )
      : null
  );
};
export const CustomDateInput = ({
  label,
  type,
  placeholder,
  onchange,
  error,
  className,
  svg,
}) => {
  return /*#__PURE__*/ React.createElement(
    Inputwrapper,
    {
      className: `input-wrapper ${error ? 'input-error' : ''} ${className}`,
    },
    /*#__PURE__*/ React.createElement(
      Input,
      {
        className: 'input',
      },
      /*#__PURE__*/ React.createElement('input', {
        type: type,
        placeholder: placeholder,
        onChange: onchange,
      }),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          className: 'label',
        },
        /*#__PURE__*/ React.createElement('span', null, label)
      ),
      /*#__PURE__*/ React.createElement(
        'svg',
        {
          className: 'bg-svg',
        },
        /*#__PURE__*/ React.createElement('use', {
          href: `/images/icons.svg#${svg}`,
        })
      )
    ),
    error
      ? /*#__PURE__*/ React.createElement(
          'p',
          {
            className: 'error-message',
          },
          'Uh oh! There was an error!'
        )
      : null
  );
};
export const StyledSearchInput = ({
  onchange,
  className,
  clearSearch,
  value,
}) => {
  return /*#__PURE__*/ React.createElement(
    SearchInputWrapper,
    {
      className: className,
    },
    /*#__PURE__*/ React.createElement(
      'svg',
      null,
      /*#__PURE__*/ React.createElement('use', {
        href: '/images/icons.svg#search',
      })
    ),
    /*#__PURE__*/ React.createElement('input', {
      type: 'search',
      placeholder: 'Search forms... ',
      value: value,
      onChange: onchange,
    }),
    /*#__PURE__*/ React.createElement(
      'button',
      {
        className: 'clear-btn',
        onClick: clearSearch,
      },
      /*#__PURE__*/ React.createElement(
        'svg',
        null,
        /*#__PURE__*/ React.createElement('use', {
          href: '/images/icons.svg#close',
        })
      )
    )
  );
};
const SearchInputWrapper = styled.label`
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid #c5c9da;
  border-radius: 100px;
  max-width: 360px;
  min-width: 360px;
  padding: 1rem 2rem;
  transition: background 0.3s ease-in;
  &:focus-within {
    background: #fff;
  }
  svg {
    width: 16px;
    height: 16px;
    color: #c5c9da;
  }

  .clear-btn {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    position: absolute;
    right: 0rem;
    padding: 0.8rem 1rem;
    opacity: 0;
    transition: opacity 0.3s ease-in;
    &:hover {
      opacity: 1;
    }
  }
  input {
    width: calc(100% - 25px);
    font-size: 1.6rem;
    padding: 0.3rem 0;
    &::placeholder {
      font-size: 1.6rem;
      font-family: var(--co-body);
      color: #61677c;
    }
  }
  input:focus ~ .clear-btn {
    opacity: 1;
  }
`;
const Inputwrapper = styled.div`
    position: relative;
    margin-bottom: 3rem;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    &.input-w-label{
        .input{
            padding-top: 1.5rem;
            padding-bottom: 1.5rem;
        }
        input{
            padding-top: 0
            
        }
        .main-label{
            display: flex;
            align-items: center;
            font-size: 1.2rem;
            color: #838CA2;
            font-family: var(--ff-sbold);
            font-weight: 600;
            margin-bottom: 1.2rem;
            svg{
                width: 15px;
                height: 15px;
                margin-left: 0.5rem;
            }
        }
    }
    &.fb-q-input{
      
        .input{
            background: #F7F7F8;
            padding-left: 4rem;
            @media (min-width: 768px){
                padding-left: 8.1rem; 
            }
            
        }
    }
    &.input-wo-label, &.fb-q-input{
        .input{
            padding-top: 1.35rem;
            padding-bottom: 1.35rem;
            
        }
        input{
            padding-top: 0
           
    }
    
    
    .error-message{
        font-size: 1.2rem;
        font-family: var(--ff-medium);
        color: var(--co-error);
        line-height: 1.1;
        margin-top: 1rem;
    }
    &.input-error{
        .label{ 
            color: var(--co-error);
            span{
                opacity: 1;
                transform: translateY(0); 
            }
            &:before{
                background: var(--co-error);
                width: 100%;
            }
        }
        .input{
            border-color: var(--co-error);
        }
        .label:before {
            background: var(--co-error);
            width: 100%;
        }
        
        input:not(:placeholder-shown) ~ .label:before, textarea:not(:placeholder-shown) ~ .label:before {
            background: var(--co-error);
            width: 100%;
        }
        .input:focus-within{
        .label{
            opacity: 1;
            border-bottom: none
        }
        .label:before {
            background: var(--co-error);
            width: 100%;
        }
    }
        
    }
    &:not(:last-child):not(:only-child){
        margin-bottom: 4rem ;
    }
    &.tag-wrapper{
       margin-bottom: 1rem;
       &:not(:last-child):not(:only-child){
        margin-bottom: 2rem ;
       
        }
    }
`;
const Input = styled.div`
  position: relative;
  background: #f1f1f4;
  padding: 1rem 1.8rem;
  padding-top: 0.3rem;
  z-index: 1;
  .label {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    font-size: 1rem;
    padding-left: 1.8rem;
    padding-top: 0.5rem;
    color: #61677c;
    font-family: var(--ff-medium);
    font-weight: 500;
    z-index: -1;
    text-transform: capitalize;
    span {
      display: block;
      position: relative;
      opacity: 0;
      transform: translateY(5px);
      transition: all 0.3s ease-in;
      font-family: var(--ff-medium);
      font-weight: 500;
    }
    &:before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      width: 0;
      height: 2px;
      transition: width 1s ease;
      z-index: 2;
    }
    &:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      width: 100%;
      height: 2px;
      background: #c5c9da;
    }
  }
  .bg-svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2rem;
    width: 16px;
    height: 16px;
  }

  input,
  textarea {
    display: block;
    width: 100%;
    padding-top: 2rem;
  }
  input:not(:placeholder-shown) ~ .label span,
  textarea:not(:placeholder-shown) ~ .label span {
    opacity: 1;
    transform: translateY(0);
    color: #61677c;
  }
  input:not(:placeholder-shown) ~ .label:before,
  textarea:not(:placeholder-shown) ~ .label:before {
    ${''}
    /* background: var(--co-primary); */
    width: 100%;
  }
  input:focus ~ .label:before,
  textarea:focus ~ .label:before {
    background: var(--co-primary);
    width: 100%;
  }
  input:focus ~ .label span,
  textarea:focus ~ .label span {
    opacity: 1;
    transform: translateY(0);
    color: var(--co-primary);
  }

  &:focus-within {
    .label span {
      opacity: 1;
      transform: translateY(0);
      color: var(--co-primary);
    }
    .label:before {
      background: var(--co-primary);
      width: 100%;
    }
  }
`;
const TogglePassword = styled.button`
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  padding: 1rem 2rem;

  svg {
    width: 29px;
    height: 19.2px;
  }
`;
const TagInputWrapper = styled.div`
  position: relative;
  background: #f1f1f4;
  padding: 0.7rem 0.8rem;
  padding-right: 119px;
  min-height: 53px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  flex-grow: 1;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 0;
    height: 2px;
    transition: width 1s ease;
    z-index: 2;
  }
  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: #c5c9da;
  }
  &:focus-within {
    &:before {
      background: var(--co-primary);
      width: 100%;
    }
  }
  &.active {
    &:before {
      background: var(--co-primary);
      width: 100%;
    }
  }
  input {
    margin-left: 1rem;
  }
  .dropwrapper {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
  }
`;
const Tag = styled.div`
  display: flex;
  align-items: center;
  background: #c5c9da;
  border-radius: 3px;
  min-width: 119px;
  padding: 1rem 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  span {
    color: var(--co-head);
    font-family: var(--ff-sbold);
    font-weight: 600;
    margin-right: 1rem;
    font-size: 1.2rem;
  }
  svg {
    width: 12px;
    height: 12px;
    color: #61677c;
  }
`;
