From 32906e2945cba061b873d3abf085a52c52e62147 Mon Sep 17 00:00:00 2001
From: zanzebra <zanzebra101@gmail.com>
Date: Mon, 21 Mar 2022 07:15:44 +0100
Subject: [PATCH] build(version-update):update version to 1.5.0

---
 package.json                        |    2 +-
 src/components/Input/Input.js       |  456 ++-----
 src/components/Input/Input.style.js | 1857 +++++++--------------------
 3 files changed, 580 insertions(+), 1735 deletions(-)

diff --git a/package.json b/package.json
index 5853bdf..313b8e0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cdbreact",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Elegant UI Kit and reusable components for building mobile-first, responsive webistes and web apps",
   "repository": {
     "type": "git",
diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js
index 3998c6d..20dbce4 100644
--- a/src/components/Input/Input.js
+++ b/src/components/Input/Input.js
@@ -1,373 +1,187 @@
-import React, { Fragment } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import CDBIcon from '../Icon'
-import { Component as StyledComponent } from './Input.style'
+import {
+  Component as StyledComponent,
+  StyledInput,
+  StyledTextArea
+} from './Input.style'
 import { ThemeProvider } from 'styled-components'
 import { theme } from './../../theme'
 
-class Input extends React.Component {
-  state = {
-    innerValue: this.props.value || this.props.valueDefault,
-    isFocused: false,
-    isPristine: true
-  }
-
-  inputElementRef = React.createRef()
-
-  componentDidMount() {
-    const { inputRef, focused, indeterminate, selectInnerRef } = this.props
-
-    inputRef && inputRef(this.inputElementRef.current)
-    selectInnerRef && selectInnerRef(this.inputElementRef)
-
-    if (focused === true) {
-      this.setState({ isFocused: focused }, () => {
-        this.setFocus()
-      })
-    }
-
-    if (indeterminate) {
-      this.inputElementRef.current.indeterminate = true
-    }
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.value !== prevState.value) {
-      return { innerValue: nextProps.value }
-    }
-
-    return null
-  }
-
-  onBlur = (event) => {
+const Input = ({
+  background,
+  className,
+  color,
+  disabled,
+  focused,
+  fontSize,
+  getValue,
+  placeholder,
+  id,
+  indeterminate,
+  inputClassName,
+  labelClassName,
+  onBlur,
+  onChange,
+  onFocus,
+  onInput,
+  size,
+  icon,
+  type,
+  value,
+  valueDefault,
+  ...attributes
+}) => {
+  const [innerValue, setInnerValue] = useState(value || valueDefault)
+  const [isFocused, setIsFocused] = useState(focused)
+  const inputRef = useRef(null)
+
+  useEffect(() => {
+    isFocused && inputRef.current.focus()
+    if (indeterminate) inputRef.current.indeterminate = true
+  }, [isFocused])
+
+  const handleBlur = (event) => {
     event.stopPropagation()
-    const { onBlur } = this.props
-    this.setState({ isFocused: false })
+    setIsFocused(false)
     onBlur && onBlur(event)
   }
 
-  onFocus = (event) => {
+  const handleFocus = (event) => {
     event.stopPropagation()
-    const { onFocus } = this.props
-    this.setState({ isFocused: true })
+    setIsFocused(false)
     onFocus && onFocus(event)
   }
 
-  onChange = (event) => {
+  const handleChange = (event) => {
     event.stopPropagation()
-    const { type, onChange, getValue } = this.props
     const { value, checked } = event.target
-
     if (type !== 'checkbox' && type !== 'radio') {
-      this.setState({
-        innerValue: value,
-        isPristine: false
-      })
+      setInnerValue(value)
       getValue && getValue(value)
     } else {
       getValue && getValue(checked)
     }
-
     onChange && onChange(event)
   }
 
-  onInput = (event) => {
+  const handleInput = (event) => {
     event.stopPropagation()
-    const { type, onInput } = this.props
     if (type !== 'checkbox' && type !== 'radio') {
-      this.setState({
-        innerValue: event.target.value,
-        isPristine: false
-      })
+      setInnerValue(event.target.value)
     }
-
     onInput && onInput(event)
   }
-
-  setFocus = () => {
-    this.inputElementRef.current.focus()
-  }
-
-  render() {
-    const {
-      background,
-      children,
-      className,
-      color,
-      containerClass,
-      dataTest,
-      disabled,
-      error,
-      filled,
-      focused,
-      fontSize,
-      gap,
-      getValue,
-      group,
-      hint,
-      height,
-      icon,
-      iconBrand,
-      iconClass,
-      iconLight,
-      iconRegular,
-      iconSize,
-      id,
-      indeterminate,
-      inputRef,
-      isControlled,
-      selectInnerRef,
-      noTag,
-      material,
-      label,
-      labelClass,
-      labelId,
-      labelStyles,
-      onIconClick,
-      onIconMouseEnter,
-      onIconMouseLeave,
-      size,
-      success,
-      tag: Tag,
-      type,
-      validate,
-      value,
-      valueDefault,
-      width,
-      ...attributes
-    } = this.props
-
-    const { innerValue, isFocused } = this.state
-    const isNotEmpty =
-      (!!innerValue || !!hint || isFocused || innerValue === 0) &&
-      type !== 'checkbox' &&
-      type !== 'radio'
-    let TagInput = ''
-    let formControlClass = ''
-    let formSizeClass = ''
-
-    if (type === 'textarea') {
-      formControlClass = material ? 'md-textarea form-control' : 'form-control'
-      TagInput = 'textarea'
-      formSizeClass = size ? `form-control-${size}` : false
-    } else {
-      formControlClass = 'form-control'
-      TagInput = 'input'
-      attributes.type = type
-      formSizeClass = size ? `form-control-${size}` : false
-    }
-
-    if (type === 'checkbox' || type === 'radio') {
-      formControlClass = null
-      formSizeClass = null
-    }
-
-    const inputStyle = {
-      height: height,
-      width: width
-    }
-
-    attributes.disabled = disabled
-
-    const classes = classNames(
-      formControlClass,
-      formSizeClass,
-      background && 'bg',
-      material && background && 'md-bg',
-      validate ? 'validate' : false,
-      filled ? 'filled-in' : false,
-      gap ? 'with-gap' : false,
-      type === 'checkbox' ? (gap ? false : 'form-check-input') : false,
-      type === 'radio' ? 'form-check-input' : false,
-      className
-    )
-
-    const containerClassFix = classNames(
-      type === 'checkbox' || type === 'radio'
-        ? typeof label === 'boolean' && label
-          ? 'd-flex'
-          : 'form-check'
-        : 'cdb-form',
-
-      group ? 'form-group' : false,
-      size ? `form-${size}` : false,
-      material ? false : 'md-outline',
-      containerClass
-    )
-
-    const iconClassFix = classNames(
-      isNotEmpty && isFocused ? 'active' : false,
-      iconClass,
-      'prefix'
-    )
-
-    const labelClassFix = classNames(
-      (isNotEmpty && !isControlled) || hint ? 'active' : false,
-      disabled ? 'disabled' : false,
-      type === 'checkbox' ? 'form-check-label' : false,
-      type === 'radio' ? 'form-check-label' : false,
-      labelClass
-    )
-    console.log(innerValue, 'innerValue')
-
-    const renderFunction = () => (
-      <ThemeProvider theme={theme}>
-        <Fragment>
-          {icon && (
-            <CDBIcon
-              icon={icon}
-              size={iconSize}
-              brand={iconBrand}
-              light={iconLight}
-              regular={iconRegular}
-              className={iconClassFix}
-              onClick={onIconClick || this.setFocus}
-              onMouseEnter={onIconMouseEnter}
-              onMouseLeave={onIconMouseLeave}
-            />
-          )}
-          <TagInput
-            data-test={dataTest}
+  const isNotEmpty =
+    (!!innerValue || !!placeholder || isFocused || innerValue === 0) &&
+    type !== 'checkbox' &&
+    type !== 'radio'
+  const classes = classNames(
+    'contrast-input',
+    className,
+    background && `bg`,
+    color && `input-color-${color}`,
+    size === 'lg' && 'size-lg',
+    size === 'sm' && 'size-sm',
+    type === 'checkbox' && 'checkbox',
+    type === 'radio' && 'radio'
+  )
+  const labelClassNames = classNames(
+    isNotEmpty || placeholder ? 'active' : false,
+    disabled ? 'disabled' : false,
+    labelClassName
+  )
+
+  return (
+    <ThemeProvider theme={theme}>
+      <StyledComponent className={classes} fontSize={fontSize}>
+        {icon && <span className='icon'>{icon}</span>}
+        {type === 'textarea' ? (
+          <StyledTextArea
+            fontSize={fontSize}
+            ref={inputRef}
+            onBlur={handleBlur}
+            onChange={handleChange}
+            onInput={handleInput}
+            onFocus={handleFocus}
+            type={type}
+            placeholder={placeholder}
+            {...attributes}
+            className={inputClassName}
+            id={id}
+            value={innerValue}
+            aria-disabled={disabled}
+            rows='10'
+          />
+        ) : (
+          <StyledInput
+            fontSize={fontSize}
+            ref={inputRef}
+            onBlur={handleBlur}
+            onChange={handleChange}
+            onInput={handleInput}
+            onFocus={handleFocus}
             {...attributes}
-            className={classes}
+            className={inputClassName}
             id={id}
-            style={inputStyle}
-            placeholder={hint}
-            ref={this.inputElementRef}
+            type={type}
+            placeholder={placeholder}
             value={innerValue}
-            onBlur={this.onBlur}
-            onChange={this.onChange}
-            onInput={this.onInput}
-            onFocus={this.onFocus}
             aria-disabled={disabled}
           />
-          {innerValue.length <= 0 && label && (
-            <label
-              className={labelClassFix}
-              htmlFor={id}
-              data-error={error}
-              data-success={success}
-              id={labelId}
-              onClick={this.setFocus}
-              style={labelStyles}
-              aria-labelledby={labelId}
-            >
-              {label}
-            </label>
-          )}
-          {children}
-        </Fragment>
-      </ThemeProvider>
-    )
+        )}
 
-    return noTag ? (
-      renderFunction()
-    ) : (
-      <StyledComponent
-        className={containerClassFix}
-        size={fontSize}
-        color={color}
-      >
-        {renderFunction()}
+        {(type === 'checkbox' || type === 'radio') && (
+          <label
+            className={labelClassNames}
+            htmlFor={id}
+            id={id}
+            aria-labelledby={id}
+          />
+        )}
       </StyledComponent>
-    )
-  }
+    </ThemeProvider>
+  )
 }
 
 Input.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  containerClass: PropTypes.string,
-  color: PropTypes.string,
-  dataTest: PropTypes.string,
-  disabled: PropTypes.bool,
-  error: PropTypes.string,
-  filled: PropTypes.bool,
-  focused: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  fontSize: PropTypes.number,
-  gap: PropTypes.bool,
-  getValue: PropTypes.func,
-  group: PropTypes.bool,
-  hint: PropTypes.string,
-  height: PropTypes.string,
-  icon: PropTypes.string,
-  iconBrand: PropTypes.bool,
-  iconClass: PropTypes.string,
-  iconLight: PropTypes.bool,
-  iconRegular: PropTypes.bool,
-  iconSize: PropTypes.string,
+  background: PropTypes.string, // has background
+  className: PropTypes.node, // string: classess of input-container
+  color: PropTypes.string, // color value of input
+  disabled: PropTypes.bool, // bool: disabled state of input
+  focused: PropTypes.bool, // bool: initial focused state of input
+  fontSize: PropTypes.number, // string: font-size of input placeholder and value
+  getValue: PropTypes.func, // func():get input value
+  placeholder: PropTypes.string,
   id: PropTypes.string,
   indeterminate: PropTypes.bool,
-  inputRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-  isControlled: PropTypes.bool,
-  label: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.object,
-    PropTypes.bool
-  ]),
-  labelClass: PropTypes.string,
-  labelId: PropTypes.string,
-  labelStyles: PropTypes.object,
-  noTag: PropTypes.bool,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onIconClick: PropTypes.func,
-  onIconMouseEnter: PropTypes.func,
-  onIconMouseLeave: PropTypes.func,
+  inputClassName: PropTypes.string, // string: classname of input
+  labelClassName: PropTypes.string, // string: classname of label
+  onBlur: PropTypes.func, // func(): called when input is blurred
+  onChange: PropTypes.func, // func(): called when input value changes
+  onFocus: PropTypes.func, // func(): called when input is focused
   onInput: PropTypes.func,
-  material: PropTypes.bool,
   size: PropTypes.string,
-  success: PropTypes.string,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  type: PropTypes.string,
-  validate: PropTypes.bool,
-  value: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string,
-    PropTypes.bool
-  ]),
-  valueDefault: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  width: PropTypes.string
+  type: PropTypes.string, // string: input type
+  value: PropTypes.string, // string: initial value of input
+  valueDefault: PropTypes.string
 }
 
 Input.defaultProps = {
+  background: PropTypes.string,
   className: '',
-  containerClass: '',
-  dataTest: 'input',
+  color: 'dark',
   disabled: false,
-  error: '',
-  filled: false,
-  gap: false,
-  group: false,
-  hint: undefined,
-  icon: '',
-  iconBrand: false,
   focused: false,
-  fontSize: 15,
-  indeterminate: false,
-  iconClass: '',
-  iconLight: false,
-  onIconMouseEnter: () => {},
-  onIconMouseLeave: () => {},
-  iconRegular: false,
-  iconSize: undefined,
-  id: undefined,
-  isControlled: false,
-  noTag: false,
-  material: false,
-  label: ' ',
-  labelClass: '',
-  labelId: '',
-  size: 'lg',
-  success: '',
-  tag: 'div',
+  fontSize: 14,
+  placeholder: PropTypes.string,
+  id: PropTypes.string,
+  indeterminate: PropTypes.bool,
+  inputClassName: '',
+  labelClassName: '',
   type: 'text',
-  validate: false,
-  valueDefault: '',
-  color: 'dark'
+  value: ''
 }
 
 export default Input
diff --git a/src/components/Input/Input.style.js b/src/components/Input/Input.style.js
index fde683e..88d9d32 100644
--- a/src/components/Input/Input.style.js
+++ b/src/components/Input/Input.style.js
@@ -1,1452 +1,485 @@
 import styled, { css } from 'styled-components'
 import colors from '../../theme/colors'
-import tinycolor from 'tinycolor2'
 
 export const Component = styled.div`
-  .bg {
-    ${({ color }) =>
-      color &&
-      css`
-        background: ${colors[`${color.toString() + `100`}`]} !important;
-      `}
+  // icon container
+  .icon {
+    position: absolute;
+    height: 100%;
+    width: 30px;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
-  &.cdb-form.input-group label {
+  .icon + input:not([type='checkbox']):not([type='radio']),
+  textarea {
+    padding-left: 30px;
+  }
+  &.input-group label {
     top: 0;
     margin-bottom: 0;
   }
-  &.cdb-form.input-group .input-group-text {
+  &.input-group .input-group-text {
     background-color: #e0e0e0;
   }
-  &.cdb-form.input-group .input-group-text.md-addon {
+  &.input-group .input-group-text.md-addon {
     font-weight: 500;
     background-color: transparent;
     border: none;
   }
-  &.cdb-form.input-group .form-control {
+  &.input-group .form-control {
     padding: 0.375rem 0.75rem;
     margin: 0;
   }
-  &.cdb-form {
+  & {
     position: relative;
-    margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
-  }
-  &.cdb-form input:not([type]),
-  &.cdb-form input[type='text']:not(.browser-default),
-  &.cdb-form input[type='password']:not(.browser-default),
-  &.cdb-form input[type='email']:not(.browser-default),
-  &.cdb-form input[type='url']:not(.browser-default),
-  &.cdb-form input[type='time']:not(.browser-default),
-  &.cdb-form input[type='date']:not(.browser-default),
-  &.cdb-form input[type='datetime']:not(.browser-default),
-  &.cdb-form input[type='datetime-local']:not(.browser-default),
-  &.cdb-form input[type='tel']:not(.browser-default),
-  &.cdb-form input[type='number']:not(.browser-default),
-  &.cdb-form input[type='search']:not(.browser-default),
-  &.cdb-form input[type='phone']:not(.browser-default),
-  &.cdb-form input[type='search-md'],
-  &.cdb-form textarea.md-textarea {
-    box-sizing: content-box;
-    background-color: transparent;
-    border: none;
-    border-bottom: 1px solid #ced4da;
-    font-size: ${({ size }) => size && `${size}px`};
-    ${({ color }) =>
-      color &&
-      css`
-        border-bottom: 1px solid ${tinycolor(colors[`${color}`]).lighten(10)};
-      `}
-    border-radius: 4px;
-    outline: none;
-    box-shadow: none;
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  }
-  &.cdb-form input:not([type]):focus:not([readonly]),
-  &.cdb-form input[type='text']:not(.browser-default):focus:not([readonly]),
-  &.cdb-form input[type='password']:not(.browser-default):focus:not([readonly]),
-  &.cdb-form input[type='email']:not(.browser-default):focus:not([readonly]),
-  &.cdb-form input[type='url']:not(.browser-default):focus:not([readonly]),
-  &.cdb-form input[type='time']:not(.browser-default):focus:not([readonly]),
-  &.cdb-form input[type='date']:not(.browser-default):focus:not([readonly]),
-  &.cdb-form input[type='datetime']:not(.browser-default):focus:not([readonly]),
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default):focus:not([readonly]),
-  &.cdb-form input[type='tel']:not(.browser-default):focus:not([readonly]),
-  &.cdb-form input[type='number']:not(.browser-default):focus:not([readonly]),
-  &.cdb-form input[type='search']:not(.browser-default):focus:not([readonly]),
-  &.cdb-form input[type='phone']:not(.browser-default):focus:not([readonly]),
-  &.cdb-form input[type='search-md']:focus:not([readonly]),
-  &.cdb-form textarea.md-textarea:focus:not([readonly]) {
-    ${({ color }) =>
-      color &&
-      css`
-        border-bottom: 1px solid ${colors[`${color}`]};
-        box-shadow: 0 1px 0 0 ${colors[`${color}`]};
-      `}
-  }
-  &.cdb-form input:not([type]):focus:not([readonly]) + label,
-  &.cdb-form
-    input[type='text']:not(.browser-default):focus:not([readonly])
-    + label,
-  &.cdb-form
-    input[type='password']:not(.browser-default):focus:not([readonly])
-    + label,
-  &.cdb-form
-    input[type='email']:not(.browser-default):focus:not([readonly])
-    + label,
-  &.cdb-form
-    input[type='url']:not(.browser-default):focus:not([readonly])
-    + label,
-  &.cdb-form
-    input[type='time']:not(.browser-default):focus:not([readonly])
-    + label,
-  &.cdb-form
-    input[type='date']:not(.browser-default):focus:not([readonly])
-    + label,
-  &.cdb-form
-    input[type='datetime']:not(.browser-default):focus:not([readonly])
-    + label,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default):focus:not([readonly])
-    + label,
-  &.cdb-form
-    input[type='tel']:not(.browser-default):focus:not([readonly])
-    + label,
-  &.cdb-form
-    input[type='number']:not(.browser-default):focus:not([readonly])
-    + label,
-  &.cdb-form
-    input[type='search']:not(.browser-default):focus:not([readonly])
-    + label,
-  &.cdb-form
-    input[type='phone']:not(.browser-default):focus:not([readonly])
-    + label,
-  &.cdb-form input[type='search-md']:focus:not([readonly]) + label,
-  &.cdb-form textarea.md-textarea:focus:not([readonly]) + label {
-    color: #4285f4;
-  }
-  &.cdb-form input:not([type]) + label::after,
-  &.cdb-form input[type='text']:not(.browser-default) + label::after,
-  &.cdb-form input[type='password']:not(.browser-default) + label::after,
-  &.cdb-form input[type='email']:not(.browser-default) + label::after,
-  &.cdb-form input[type='url']:not(.browser-default) + label::after,
-  &.cdb-form input[type='time']:not(.browser-default) + label::after,
-  &.cdb-form input[type='date']:not(.browser-default) + label::after,
-  &.cdb-form input[type='datetime']:not(.browser-default) + label::after,
-  &.cdb-form input[type='datetime-local']:not(.browser-default) + label::after,
-  &.cdb-form input[type='tel']:not(.browser-default) + label::after,
-  &.cdb-form input[type='number']:not(.browser-default) + label::after,
-  &.cdb-form input[type='search']:not(.browser-default) + label::after,
-  &.cdb-form input[type='phone']:not(.browser-default) + label::after,
-  &.cdb-form input[type='search-md'] + label::after,
-  &.cdb-form textarea.md-textarea + label::after {
-    position: absolute;
-    top: 65px;
-    display: block;
-    content: '';
-    opacity: 0;
-    transition: 0.2s opacity ease-out, 0.2s color ease-out;
-  }
-  &.cdb-form input:not([type]).valid,
-  &.cdb-form input:not([type]):focus.valid,
-  &.cdb-form input[type='text']:not(.browser-default).valid,
-  &.cdb-form input[type='text']:not(.browser-default):focus.valid,
-  &.cdb-form input[type='password']:not(.browser-default).valid,
-  &.cdb-form input[type='password']:not(.browser-default):focus.valid,
-  &.cdb-form input[type='email']:not(.browser-default).valid,
-  &.cdb-form input[type='email']:not(.browser-default):focus.valid,
-  &.cdb-form input[type='url']:not(.browser-default).valid,
-  &.cdb-form input[type='url']:not(.browser-default):focus.valid,
-  &.cdb-form input[type='time']:not(.browser-default).valid,
-  &.cdb-form input[type='time']:not(.browser-default):focus.valid,
-  &.cdb-form input[type='date']:not(.browser-default).valid,
-  &.cdb-form input[type='date']:not(.browser-default):focus.valid,
-  &.cdb-form input[type='datetime']:not(.browser-default).valid,
-  &.cdb-form input[type='datetime']:not(.browser-default):focus.valid,
-  &.cdb-form input[type='datetime-local']:not(.browser-default).valid,
-  &.cdb-form input[type='datetime-local']:not(.browser-default):focus.valid,
-  &.cdb-form input[type='tel']:not(.browser-default).valid,
-  &.cdb-form input[type='tel']:not(.browser-default):focus.valid,
-  &.cdb-form input[type='number']:not(.browser-default).valid,
-  &.cdb-form input[type='number']:not(.browser-default):focus.valid,
-  &.cdb-form input[type='search']:not(.browser-default).valid,
-  &.cdb-form input[type='search']:not(.browser-default):focus.valid,
-  &.cdb-form input[type='phone']:not(.browser-default).valid,
-  &.cdb-form input[type='phone']:not(.browser-default):focus.valid,
-  &.cdb-form input[type='search-md'].valid,
-  &.cdb-form input[type='search-md']:focus.valid,
-  &.cdb-form textarea.md-textarea.valid,
-  &.cdb-form textarea.md-textarea:focus.valid {
-    border-bottom: 1px solid #00c851;
-    box-shadow: 0 1px 0 0 #00c851;
-  }
-  &.cdb-form input:not([type]).valid + label:after,
-  &.cdb-form input:not([type]):focus.valid + label:after,
-  &.cdb-form input[type='text']:not(.browser-default).valid + label:after,
-  &.cdb-form input[type='text']:not(.browser-default):focus.valid + label:after,
-  &.cdb-form input[type='password']:not(.browser-default).valid + label:after,
-  &.cdb-form
-    input[type='password']:not(.browser-default):focus.valid
-    + label:after,
-  &.cdb-form input[type='email']:not(.browser-default).valid + label:after,
-  &.cdb-form
-    input[type='email']:not(.browser-default):focus.valid
-    + label:after,
-  &.cdb-form input[type='url']:not(.browser-default).valid + label:after,
-  &.cdb-form input[type='url']:not(.browser-default):focus.valid + label:after,
-  &.cdb-form input[type='time']:not(.browser-default).valid + label:after,
-  &.cdb-form input[type='time']:not(.browser-default):focus.valid + label:after,
-  &.cdb-form input[type='date']:not(.browser-default).valid + label:after,
-  &.cdb-form input[type='date']:not(.browser-default):focus.valid + label:after,
-  &.cdb-form input[type='datetime']:not(.browser-default).valid + label:after,
-  &.cdb-form
-    input[type='datetime']:not(.browser-default):focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default).valid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default):focus.valid
-    + label:after,
-  &.cdb-form input[type='tel']:not(.browser-default).valid + label:after,
-  &.cdb-form input[type='tel']:not(.browser-default):focus.valid + label:after,
-  &.cdb-form input[type='number']:not(.browser-default).valid + label:after,
-  &.cdb-form
-    input[type='number']:not(.browser-default):focus.valid
-    + label:after,
-  &.cdb-form input[type='search']:not(.browser-default).valid + label:after,
-  &.cdb-form
-    input[type='search']:not(.browser-default):focus.valid
-    + label:after,
-  &.cdb-form input[type='phone']:not(.browser-default).valid + label:after,
-  &.cdb-form
-    input[type='phone']:not(.browser-default):focus.valid
-    + label:after,
-  &.cdb-form input[type='search-md'].valid + label:after,
-  &.cdb-form input[type='search-md']:focus.valid + label:after,
-  &.cdb-form textarea.md-textarea.valid + label:after,
-  &.cdb-form textarea.md-textarea:focus.valid + label:after {
-    color: #00c851;
-    content: attr(data-success);
-    opacity: 1;
-  }
-  &.cdb-form input:not([type]).invalid,
-  &.cdb-form input:not([type]):focus.invalid,
-  &.cdb-form input[type='text']:not(.browser-default).invalid,
-  &.cdb-form input[type='text']:not(.browser-default):focus.invalid,
-  &.cdb-form input[type='password']:not(.browser-default).invalid,
-  &.cdb-form input[type='password']:not(.browser-default):focus.invalid,
-  &.cdb-form input[type='email']:not(.browser-default).invalid,
-  &.cdb-form input[type='email']:not(.browser-default):focus.invalid,
-  &.cdb-form input[type='url']:not(.browser-default).invalid,
-  &.cdb-form input[type='url']:not(.browser-default):focus.invalid,
-  &.cdb-form input[type='time']:not(.browser-default).invalid,
-  &.cdb-form input[type='time']:not(.browser-default):focus.invalid,
-  &.cdb-form input[type='date']:not(.browser-default).invalid,
-  &.cdb-form input[type='date']:not(.browser-default):focus.invalid,
-  &.cdb-form input[type='datetime']:not(.browser-default).invalid,
-  &.cdb-form input[type='datetime']:not(.browser-default):focus.invalid,
-  &.cdb-form input[type='datetime-local']:not(.browser-default).invalid,
-  &.cdb-form input[type='datetime-local']:not(.browser-default):focus.invalid,
-  &.cdb-form input[type='tel']:not(.browser-default).invalid,
-  &.cdb-form input[type='tel']:not(.browser-default):focus.invalid,
-  &.cdb-form input[type='number']:not(.browser-default).invalid,
-  &.cdb-form input[type='number']:not(.browser-default):focus.invalid,
-  &.cdb-form input[type='search']:not(.browser-default).invalid,
-  &.cdb-form input[type='search']:not(.browser-default):focus.invalid,
-  &.cdb-form input[type='phone']:not(.browser-default).invalid,
-  &.cdb-form input[type='phone']:not(.browser-default):focus.invalid,
-  &.cdb-form input[type='search-md'].invalid,
-  &.cdb-form input[type='search-md']:focus.invalid,
-  &.cdb-form textarea.md-textarea.invalid,
-  &.cdb-form textarea.md-textarea:focus.invalid {
-    border-bottom: 1px solid #f44336;
-    box-shadow: 0 1px 0 0 #f44336;
-  }
-  &.cdb-form input:not([type]).invalid + label:after,
-  &.cdb-form input:not([type]):focus.invalid + label:after,
-  &.cdb-form input[type='text']:not(.browser-default).invalid + label:after,
-  &.cdb-form
-    input[type='text']:not(.browser-default):focus.invalid
-    + label:after,
-  &.cdb-form input[type='password']:not(.browser-default).invalid + label:after,
-  &.cdb-form
-    input[type='password']:not(.browser-default):focus.invalid
-    + label:after,
-  &.cdb-form input[type='email']:not(.browser-default).invalid + label:after,
-  &.cdb-form
-    input[type='email']:not(.browser-default):focus.invalid
-    + label:after,
-  &.cdb-form input[type='url']:not(.browser-default).invalid + label:after,
-  &.cdb-form
-    input[type='url']:not(.browser-default):focus.invalid
-    + label:after,
-  &.cdb-form input[type='time']:not(.browser-default).invalid + label:after,
-  &.cdb-form
-    input[type='time']:not(.browser-default):focus.invalid
-    + label:after,
-  &.cdb-form input[type='date']:not(.browser-default).invalid + label:after,
-  &.cdb-form
-    input[type='date']:not(.browser-default):focus.invalid
-    + label:after,
-  &.cdb-form input[type='datetime']:not(.browser-default).invalid + label:after,
-  &.cdb-form
-    input[type='datetime']:not(.browser-default):focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default).invalid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default):focus.invalid
-    + label:after,
-  &.cdb-form input[type='tel']:not(.browser-default).invalid + label:after,
-  &.cdb-form
-    input[type='tel']:not(.browser-default):focus.invalid
-    + label:after,
-  &.cdb-form input[type='number']:not(.browser-default).invalid + label:after,
-  &.cdb-form
-    input[type='number']:not(.browser-default):focus.invalid
-    + label:after,
-  &.cdb-form input[type='search']:not(.browser-default).invalid + label:after,
-  &.cdb-form
-    input[type='search']:not(.browser-default):focus.invalid
-    + label:after,
-  &.cdb-form input[type='phone']:not(.browser-default).invalid + label:after,
-  &.cdb-form
-    input[type='phone']:not(.browser-default):focus.invalid
-    + label:after,
-  &.cdb-form input[type='search-md'].invalid + label:after,
-  &.cdb-form input[type='search-md']:focus.invalid + label:after,
-  &.cdb-form textarea.md-textarea.invalid + label:after,
-  &.cdb-form textarea.md-textarea:focus.invalid + label:after {
-    color: #f44336;
-    content: attr(data-error);
-    opacity: 1;
-  }
-  &.cdb-form input:not([type]).form-control.valid + label:after,
-  &.cdb-form input:not([type]).form-control:focus.valid + label:after,
-  &.cdb-form
-    input[type='text']:not(.browser-default).form-control.valid
-    + label:after,
-  &.cdb-form
-    input[type='text']:not(.browser-default).form-control:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='password']:not(.browser-default).form-control.valid
-    + label:after,
-  &.cdb-form
-    input[type='password']:not(.browser-default).form-control:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='email']:not(.browser-default).form-control.valid
-    + label:after,
-  &.cdb-form
-    input[type='email']:not(.browser-default).form-control:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='url']:not(.browser-default).form-control.valid
-    + label:after,
-  &.cdb-form
-    input[type='url']:not(.browser-default).form-control:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='time']:not(.browser-default).form-control.valid
-    + label:after,
-  &.cdb-form
-    input[type='time']:not(.browser-default).form-control:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='date']:not(.browser-default).form-control.valid
-    + label:after,
-  &.cdb-form
-    input[type='date']:not(.browser-default).form-control:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='datetime']:not(.browser-default).form-control.valid
-    + label:after,
-  &.cdb-form
-    input[type='datetime']:not(.browser-default).form-control:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default).form-control.valid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default).form-control:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='tel']:not(.browser-default).form-control.valid
-    + label:after,
-  &.cdb-form
-    input[type='tel']:not(.browser-default).form-control:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='number']:not(.browser-default).form-control.valid
-    + label:after,
-  &.cdb-form
-    input[type='number']:not(.browser-default).form-control:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='search']:not(.browser-default).form-control.valid
-    + label:after,
-  &.cdb-form
-    input[type='search']:not(.browser-default).form-control:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='phone']:not(.browser-default).form-control.valid
-    + label:after,
-  &.cdb-form
-    input[type='phone']:not(.browser-default).form-control:focus.valid
-    + label:after,
-  &.cdb-form input[type='search-md'].form-control.valid + label:after,
-  &.cdb-form input[type='search-md'].form-control:focus.valid + label:after,
-  &.cdb-form textarea.md-textarea.form-control.valid + label:after,
-  &.cdb-form textarea.md-textarea.form-control:focus.valid + label:after {
-    top: 4.1rem;
-  }
-  &.cdb-form input:not([type]).form-control.invalid + label:after,
-  &.cdb-form input:not([type]).form-control:focus.invalid + label:after,
-  &.cdb-form
-    input[type='text']:not(.browser-default).form-control.invalid
-    + label:after,
-  &.cdb-form
-    input[type='text']:not(.browser-default).form-control:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='password']:not(.browser-default).form-control.invalid
-    + label:after,
-  &.cdb-form
-    input[type='password']:not(.browser-default).form-control:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='email']:not(.browser-default).form-control.invalid
-    + label:after,
-  &.cdb-form
-    input[type='email']:not(.browser-default).form-control:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='url']:not(.browser-default).form-control.invalid
-    + label:after,
-  &.cdb-form
-    input[type='url']:not(.browser-default).form-control:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='time']:not(.browser-default).form-control.invalid
-    + label:after,
-  &.cdb-form
-    input[type='time']:not(.browser-default).form-control:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='date']:not(.browser-default).form-control.invalid
-    + label:after,
-  &.cdb-form
-    input[type='date']:not(.browser-default).form-control:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='datetime']:not(.browser-default).form-control.invalid
-    + label:after,
-  &.cdb-form
-    input[type='datetime']:not(.browser-default).form-control:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default).form-control.invalid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default).form-control:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='tel']:not(.browser-default).form-control.invalid
-    + label:after,
-  &.cdb-form
-    input[type='tel']:not(.browser-default).form-control:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='number']:not(.browser-default).form-control.invalid
-    + label:after,
-  &.cdb-form
-    input[type='number']:not(.browser-default).form-control:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='search']:not(.browser-default).form-control.invalid
-    + label:after,
-  &.cdb-form
-    input[type='search']:not(.browser-default).form-control:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='phone']:not(.browser-default).form-control.invalid
-    + label:after,
-  &.cdb-form
-    input[type='phone']:not(.browser-default).form-control:focus.invalid
-    + label:after,
-  &.cdb-form input[type='search-md'].form-control.invalid + label:after,
-  &.cdb-form input[type='search-md'].form-control:focus.invalid + label:after,
-  &.cdb-form textarea.md-textarea.form-control.invalid + label:after,
-  &.cdb-form textarea.md-textarea.form-control:focus.invalid + label:after {
-    top: 4rem;
-  }
-  &.cdb-form input:not([type]).form-control-lg.valid + label:after,
-  &.cdb-form input:not([type]).form-control-lg:focus.valid + label:after,
-  &.cdb-form
-    input[type='text']:not(.browser-default).form-control-lg.valid
-    + label:after,
-  &.cdb-form
-    input[type='text']:not(.browser-default).form-control-lg:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='password']:not(.browser-default).form-control-lg.valid
-    + label:after,
-  &.cdb-form
-    input[type='password']:not(.browser-default).form-control-lg:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='email']:not(.browser-default).form-control-lg.valid
-    + label:after,
-  &.cdb-form
-    input[type='email']:not(.browser-default).form-control-lg:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='url']:not(.browser-default).form-control-lg.valid
-    + label:after,
-  &.cdb-form
-    input[type='url']:not(.browser-default).form-control-lg:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='time']:not(.browser-default).form-control-lg.valid
-    + label:after,
-  &.cdb-form
-    input[type='time']:not(.browser-default).form-control-lg:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='date']:not(.browser-default).form-control-lg.valid
-    + label:after,
-  &.cdb-form
-    input[type='date']:not(.browser-default).form-control-lg:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='datetime']:not(.browser-default).form-control-lg.valid
-    + label:after,
-  &.cdb-form
-    input[type='datetime']:not(.browser-default).form-control-lg:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default).form-control-lg.valid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default).form-control-lg:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='tel']:not(.browser-default).form-control-lg.valid
-    + label:after,
-  &.cdb-form
-    input[type='tel']:not(.browser-default).form-control-lg:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='number']:not(.browser-default).form-control-lg.valid
-    + label:after,
-  &.cdb-form
-    input[type='number']:not(.browser-default).form-control-lg:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='search']:not(.browser-default).form-control-lg.valid
-    + label:after,
-  &.cdb-form
-    input[type='search']:not(.browser-default).form-control-lg:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='phone']:not(.browser-default).form-control-lg.valid
-    + label:after,
-  &.cdb-form
-    input[type='phone']:not(.browser-default).form-control-lg:focus.valid
-    + label:after,
-  &.cdb-form input[type='search-md'].form-control-lg.valid + label:after,
-  &.cdb-form input[type='search-md'].form-control-lg:focus.valid + label:after,
-  &.cdb-form textarea.md-textarea.form-control-lg.valid + label:after,
-  &.cdb-form textarea.md-textarea.form-control-lg:focus.valid + label:after {
-    top: 4.6rem;
-  }
-  &.cdb-form input:not([type]).form-control-lg.invalid + label:after,
-  &.cdb-form input:not([type]).form-control-lg:focus.invalid + label:after,
-  &.cdb-form
-    input[type='text']:not(.browser-default).form-control-lg.invalid
-    + label:after,
-  &.cdb-form
-    input[type='text']:not(.browser-default).form-control-lg:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='password']:not(.browser-default).form-control-lg.invalid
-    + label:after,
-  &.cdb-form
-    input[type='password']:not(.browser-default).form-control-lg:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='email']:not(.browser-default).form-control-lg.invalid
-    + label:after,
-  &.cdb-form
-    input[type='email']:not(.browser-default).form-control-lg:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='url']:not(.browser-default).form-control-lg.invalid
-    + label:after,
-  &.cdb-form
-    input[type='url']:not(.browser-default).form-control-lg:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='time']:not(.browser-default).form-control-lg.invalid
-    + label:after,
-  &.cdb-form
-    input[type='time']:not(.browser-default).form-control-lg:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='date']:not(.browser-default).form-control-lg.invalid
-    + label:after,
-  &.cdb-form
-    input[type='date']:not(.browser-default).form-control-lg:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='datetime']:not(.browser-default).form-control-lg.invalid
-    + label:after,
-  &.cdb-form
-    input[type='datetime']:not(.browser-default).form-control-lg:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default).form-control-lg.invalid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default).form-control-lg:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='tel']:not(.browser-default).form-control-lg.invalid
-    + label:after,
-  &.cdb-form
-    input[type='tel']:not(.browser-default).form-control-lg:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='number']:not(.browser-default).form-control-lg.invalid
-    + label:after,
-  &.cdb-form
-    input[type='number']:not(.browser-default).form-control-lg:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='search']:not(.browser-default).form-control-lg.invalid
-    + label:after,
-  &.cdb-form
-    input[type='search']:not(.browser-default).form-control-lg:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='phone']:not(.browser-default).form-control-lg.invalid
-    + label:after,
-  &.cdb-form
-    input[type='phone']:not(.browser-default).form-control-lg:focus.invalid
-    + label:after,
-  &.cdb-form input[type='search-md'].form-control-lg.invalid + label:after,
-  &.cdb-form
-    input[type='search-md'].form-control-lg:focus.invalid
-    + label:after,
-  &.cdb-form textarea.md-textarea.form-control-lg.invalid + label:after,
-  &.cdb-form textarea.md-textarea.form-control-lg:focus.invalid + label:after {
-    top: 4.6rem;
-  }
-  &.cdb-form input:not([type]).form-control-sm.valid + label:after,
-  &.cdb-form input:not([type]).form-control-sm:focus.valid + label:after,
-  &.cdb-form
-    input[type='text']:not(.browser-default).form-control-sm.valid
-    + label:after,
-  &.cdb-form
-    input[type='text']:not(.browser-default).form-control-sm:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='password']:not(.browser-default).form-control-sm.valid
-    + label:after,
-  &.cdb-form
-    input[type='password']:not(.browser-default).form-control-sm:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='email']:not(.browser-default).form-control-sm.valid
-    + label:after,
-  &.cdb-form
-    input[type='email']:not(.browser-default).form-control-sm:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='url']:not(.browser-default).form-control-sm.valid
-    + label:after,
-  &.cdb-form
-    input[type='url']:not(.browser-default).form-control-sm:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='time']:not(.browser-default).form-control-sm.valid
-    + label:after,
-  &.cdb-form
-    input[type='time']:not(.browser-default).form-control-sm:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='date']:not(.browser-default).form-control-sm.valid
-    + label:after,
-  &.cdb-form
-    input[type='date']:not(.browser-default).form-control-sm:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='datetime']:not(.browser-default).form-control-sm.valid
-    + label:after,
-  &.cdb-form
-    input[type='datetime']:not(.browser-default).form-control-sm:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default).form-control-sm.valid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default).form-control-sm:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='tel']:not(.browser-default).form-control-sm.valid
-    + label:after,
-  &.cdb-form
-    input[type='tel']:not(.browser-default).form-control-sm:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='number']:not(.browser-default).form-control-sm.valid
-    + label:after,
-  &.cdb-form
-    input[type='number']:not(.browser-default).form-control-sm:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='search']:not(.browser-default).form-control-sm.valid
-    + label:after,
-  &.cdb-form
-    input[type='search']:not(.browser-default).form-control-sm:focus.valid
-    + label:after,
-  &.cdb-form
-    input[type='phone']:not(.browser-default).form-control-sm.valid
-    + label:after,
-  &.cdb-form
-    input[type='phone']:not(.browser-default).form-control-sm:focus.valid
-    + label:after,
-  &.cdb-form input[type='search-md'].form-control-sm.valid + label:after,
-  &.cdb-form input[type='search-md'].form-control-sm:focus.valid + label:after,
-  &.cdb-form textarea.md-textarea.form-control-sm.valid + label:after,
-  &.cdb-form textarea.md-textarea.form-control-sm:focus.valid + label:after {
-    top: 3.7rem;
-  }
-  &.cdb-form input:not([type]).form-control-sm.invalid + label:after,
-  &.cdb-form input:not([type]).form-control-sm:focus.invalid + label:after,
-  &.cdb-form
-    input[type='text']:not(.browser-default).form-control-sm.invalid
-    + label:after,
-  &.cdb-form
-    input[type='text']:not(.browser-default).form-control-sm:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='password']:not(.browser-default).form-control-sm.invalid
-    + label:after,
-  &.cdb-form
-    input[type='password']:not(.browser-default).form-control-sm:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='email']:not(.browser-default).form-control-sm.invalid
-    + label:after,
-  &.cdb-form
-    input[type='email']:not(.browser-default).form-control-sm:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='url']:not(.browser-default).form-control-sm.invalid
-    + label:after,
-  &.cdb-form
-    input[type='url']:not(.browser-default).form-control-sm:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='time']:not(.browser-default).form-control-sm.invalid
-    + label:after,
-  &.cdb-form
-    input[type='time']:not(.browser-default).form-control-sm:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='date']:not(.browser-default).form-control-sm.invalid
-    + label:after,
-  &.cdb-form
-    input[type='date']:not(.browser-default).form-control-sm:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='datetime']:not(.browser-default).form-control-sm.invalid
-    + label:after,
-  &.cdb-form
-    input[type='datetime']:not(.browser-default).form-control-sm:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default).form-control-sm.invalid
-    + label:after,
-  &.cdb-form
-    input[type='datetime-local']:not(.browser-default).form-control-sm:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='tel']:not(.browser-default).form-control-sm.invalid
-    + label:after,
-  &.cdb-form
-    input[type='tel']:not(.browser-default).form-control-sm:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='number']:not(.browser-default).form-control-sm.invalid
-    + label:after,
-  &.cdb-form
-    input[type='number']:not(.browser-default).form-control-sm:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='search']:not(.browser-default).form-control-sm.invalid
-    + label:after,
-  &.cdb-form
-    input[type='search']:not(.browser-default).form-control-sm:focus.invalid
-    + label:after,
-  &.cdb-form
-    input[type='phone']:not(.browser-default).form-control-sm.invalid
-    + label:after,
-  &.cdb-form
-    input[type='phone']:not(.browser-default).form-control-sm:focus.invalid
-    + label:after,
-  &.cdb-form input[type='search-md'].form-control-sm.invalid + label:after,
-  &.cdb-form
-    input[type='search-md'].form-control-sm:focus.invalid
-    + label:after,
-  &.cdb-form textarea.md-textarea.form-control-sm.invalid + label:after,
-  &.cdb-form textarea.md-textarea.form-control-sm:focus.invalid + label:after {
-    top: 3.6rem;
-  }
-  &.cdb-form > input[type='date']:not(.browser-default) + label {
-    transform: translateY(-27px) scale(0.8);
-    transform-origin: 0 0;
-  }
-  &.cdb-form
-    > input[type]:-webkit-autofill:not(.browser-default):not([type='search'])
-    + label,
-  &.cdb-form > input[type='time']:not(.browser-default) + label {
-    font-size: 0.8rem;
-    transform: translateY(-25px);
-    transform-origin: 0 0;
-  }
-  &.cdb-form .was-validated input[type='text']:valid + label {
-    color: #00c851 !important;
-  }
-  &.cdb-form .was-validated input[type='text']:invalid + label {
-    color: #f44336 !important;
-  }
-  &.cdb-form .was-validated .form-control:valid:focus {
-    box-shadow: 0 1px 0 0 #00c851 !important;
-  }
-  &.cdb-form .was-validated .form-control:valid {
-    border-color: #00c851 !important;
-  }
-  &.cdb-form .was-validated .form-control:invalid:focus {
-    box-shadow: 0 1px 0 0 #f44336 !important;
+    margin-top: 0.625rem;
+    margin-bottom: 0.625rem;
+  }
+  & {
+    input:not([type='checkbox']):not([type='radio']),
+    textarea {
+      border-radius: 4px;
+      border: 1px solid #dadce0;
+      box-sizing: border-box;
+      border-radius: 4px;
+      box-shadow: none;
+      padding: 4px 10px;
+      min-height: 40px;
+      width: 100%;
+      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+      font-size: ${({ fontSize }) => `${fontSize}px`};
+      &::placeholder {
+        font-size: ${({ fontSize }) => `${fontSize}px`};
+      }
+      &:focus {
+        outline: none;
+        &::placeholder {
+          font-weight: 700 !important;
+        }
+      }
+      &::placeholder {
+        color: #757575;
+        font-weight: 400;
+        font-size: inherit;
+        color: #757575;
+        cursor: text;
+        transition: color 0.2s ease-out;
+      }
+    }
+    textarea {
+      padding: 10px !important;
+    }
   }
-  &.cdb-form .was-validated .form-control:invalid {
-    border-color: #f44336 !important;
+  &.size-lg {
+    input:not([type='checkbox']):not([type='radio']),
+    textarea {
+      min-height: 50px;
+      font-size: ${({ fontSize }) => fontSize && `${fontSize * 1.2}px`};
+      &::placeholder {
+        font-size: ${({ fontSize }) => fontSize && `${fontSize * 1.2}px`};
+      }
+    }
   }
-  &.cdb-form .form-control {
-    height: auto;
-    padding: 0.6rem 0 0.4rem 0;
-    margin: 0 0 0.5rem 0;
-    background-color: transparent;
+  &.size-sm {
+    input:not([type='checkbox']):not([type='radio']),
+    textarea {
+      min-height: 30px;
+      font-size: ${({ fontSize }) => fontSize && `${fontSize * 0.8}px`};
+      &::placeholder {
+        font-size: ${({ fontSize }) => fontSize && `${fontSize * 0.8}px`};
+      }
+    }
   }
-  &.cdb-form .form-control:focus {
-    box-shadow: none;
+  &.checkbox,
+  &.radio {
+    margin: 0;
+    height: 20px;
+    width: 20px;
+    &.size-lg {
+      transform: scale(1.4);
+    }
+    &.size-sm {
+      transform: scale(0.6);
+    }
+    position: relative;
+    label {
+      background-color: #fff;
+      border: 1px solid #ccc;
+      // border-radius: 4px;
+      cursor: pointer;
+      height: 20px;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 20px;
+    }
+
+    input[type='checkbox'],
+    input[type='radio'] {
+      width: 20px;
+      height: 20px;
+      visibility: hidden;
+    }
+    input[type='radio'] + label {
+      border-radius: 50%;
+    }
+    input[type='checkbox'] + label:after {
+      border: 2px solid ${colors.primary};
+      border-top: none;
+      border-right: none;
+      content: '';
+      height: 6px;
+      left: 2px;
+      opacity: 0;
+      position: absolute;
+      top: 2px;
+      transform: rotate(-45deg);
+      width: 12px;
+    }
+    input[type='radio']:not(.browser) + label:after {
+      border: 2px solid ${colors.primary};
+      border-radius: 50%;
+      content: '';
+      height: 10px;
+      left: 50%;
+      opacity: 0;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 10px;
+    }
+
+    input[type='checkbox']:not(.browser-default):checked + label,
+    input[type='radio']:not(.browser-default):checked + label {
+      background-color: ${colors.primary100};
+      border: 2px solid ${colors.primary};
+    }
+    input[type='checkbox']:not(.browser-default):checked + label:after,
+    input[type='radio']:not(.browser-default):checked + label:after {
+      opacity: 1;
+    }
+    &.input-color {
+      &-primary {
+        input[type='checkbox']:not(.browser-default):checked + label,
+        input[type='radio']:not(.browser-default):checked + label {
+          background-color: ${colors.primary100};
+          border: 2px solid ${colors.primary};
+        }
+
+        input[type='checkbox']:not(.browser-default):checked + label:after,
+        input[type='radio']:not(.browser-default):checked + label:after {
+          border: 2px solid ${colors.primary};
+        }
+        input[type='checkbox']:not(.browser-default):checked + label:after {
+          border-top: none;
+          border-right: none;
+        }
+      }
+      &-secondary {
+        input[type='checkbox']:not(.browser-default):checked + label,
+        input[type='radio']:not(.browser-default):checked + label {
+          background-color: ${colors.secondary100};
+          border: 2px solid ${colors.secondary};
+        }
+        input[type='checkbox']:not(.browser-default):checked + label:after,
+        input[type='radio']:not(.browser-default):checked + label:after {
+          border: 2px solid ${colors.secondary};
+        }
+        input[type='checkbox']:not(.browser-default):checked + label:after {
+          border-top: none;
+          border-right: none;
+        }
+      }
+      &-success {
+        input[type='checkbox']:not(.browser-default):checked + label,
+        input[type='radio']:not(.browser-default):checked + label {
+          background-color: ${colors.success100};
+          border: 2px solid ${colors.success};
+        }
+        input[type='checkbox']:not(.browser-default):checked + label:after,
+        input[type='radio']:not(.browser-default):checked + label:after {
+          border: 2px solid ${colors.success};
+        }
+        input[type='checkbox']:not(.browser-default):checked + label:after {
+          border-top: none;
+          border-right: none;
+        }
+      }
+      &-danger {
+        input[type='checkbox']:not(.browser-default):checked + label,
+        input[type='radio']:not(.browser-default):checked + label {
+          background-color: ${colors.danger100};
+          border: 2px solid ${colors.danger};
+        }
+        input[type='checkbox']:not(.browser-default):checked + label:after,
+        input[type='radio']:not(.browser-default):checked + label:after {
+          border: 2px solid ${colors.danger};
+        }
+        input[type='checkbox']:not(.browser-default):checked + label:after {
+          border-top: none;
+          border-right: none;
+        }
+      }
+      &-warning {
+        input[type='checkbox']:not(.browser-default):checked + label,
+        input[type='radio']:not(.browser-default):checked + label {
+          background-color: ${colors.warning100};
+          border: 2px solid ${colors.warning};
+        }
+        input[type='checkbox']:not(.browser-default):checked + label:after,
+        input[type='radio']:not(.browser-default):checked + label:after {
+          border: 2px solid ${colors.warning};
+        }
+        input[type='checkbox']:not(.browser-default):checked + label:after {
+          border-top: none;
+          border-right: none;
+        }
+      }
+      &-info {
+        input[type='checkbox']:not(.browser-default):checked + label,
+        input[type='radio']:not(.browser-default):checked + label {
+          background-color: ${colors.info100};
+          border: 2px solid ${colors.info};
+        }
+        input[type='checkbox']:not(.browser-default):checked + label:after,
+        input[type='radio']:not(.browser-default):checked + label:after {
+          border: 2px solid ${colors.info};
+        }
+        input[type='checkbox']:not(.browser-default):checked + label:after {
+          border-top: none;
+          border-right: none;
+        }
+      }
+      &-dark {
+        input[type='checkbox']:not(.browser-default):checked + label,
+        input[type='radio']:not(.browser-default):checked + label {
+          background-color: ${colors.dark100};
+          border: 2px solid ${colors.dark};
+        }
+        input[type='checkbox']:not(.browser-default):checked + label:after,
+        input[type='radio']:not(.browser-default):checked + label:after {
+          border: 2px solid ${colors.dark};
+        }
+        input[type='checkbox']:not(.browser-default):checked + label:after {
+          border-top: none;
+          border-right: none;
+        }
+      }
+    }
   }
-  &.cdb-form .form-control:disabled,
-  &.cdb-form .form-control[readonly] {
-    background-color: transparent;
-    border-bottom: 1px solid #bdbdbd;
+  &.input-color-primary {
+    &.bg {
+      input:not([type='checkbox']),
+      input:not([type='radio']),
+      textarea {
+        &:focus,
+        &:focus-visible {
+          background: ${colors.primary100};
+        }
+      }
+    }
+    input:not([type='checkbox']):not([type='radio']),
+    textarea {
+      &:focus,
+      &:focus-visible {
+        border: 1px solid ${colors.primary};
+        box-shadow: inset 0 0 0 1px ${colors.primary};
+        &::placeholder {
+          color: ${colors.primary};
+          font-weight: 700;
+        }
+      }
+    }
   }
-  &.cdb-form .form-control.is-valid {
-    border-color: #00c851;
+
+  &.input-color-secondary {
+    &.bg {
+      input:not([type='checkbox']),
+      input:not([type='radio']),
+      textarea {
+        &:focus,
+        &:focus-visible {
+          background: ${colors.secondary100};
+        }
+      }
+    }
+    input:not([type='checkbox']):not([type='radio']),
+    textarea {
+      &:focus,
+      &:focus-visible {
+        border: 1px solid ${colors.secondary};
+        box-shadow: inset 0 0 0 1px ${colors.secondary};
+        &::placeholder {
+          color: ${colors.secondary};
+          font-weight: 700;
+        }
+      }
+    }
   }
-  &.cdb-form .form-control.is-valid:focus {
-    border-color: #00c851 !important;
-    box-shadow: 0 1px 0 0 #00c851 !important;
+  &.input-color-success {
+    &.bg {
+      input:not([type='checkbox']),
+      input:not([type='radio']),
+      textarea {
+        &:focus,
+        &:focus-visible {
+          background: ${colors.success100};
+        }
+      }
+    }
+    input:not([type='checkbox']):not([type='radio']),
+    textarea {
+      &:focus,
+      &:focus-visible {
+        border: 1px solid ${colors.success};
+        box-shadow: inset 0 0 0 1px ${colors.success};
+        &::placeholder {
+          color: ${colors.success};
+          font-weight: 700;
+        }
+      }
+    }
   }
-  &.cdb-form .form-control.is-invalid {
-    border-color: #f44336;
+
+  &.input-color-danger {
+    &.bg {
+      input:not([type='checkbox']),
+      input:not([type='radio']),
+      textarea {
+        &:focus,
+        &:focus-visible {
+          background: ${colors.danger100};
+        }
+      }
+    }
+    input:not([type='checkbox']):not([type='radio']),
+    textarea {
+      &:focus,
+      &:focus-visible {
+        border: 1px solid ${colors.danger};
+        box-shadow: inset 0 0 0 1px ${colors.danger};
+        &::placeholder {
+          color: ${colors.danger};
+          font-weight: 700;
+        }
+      }
+    }
+    input[type='checkbox']:not(.browser-default),
+    input[type='radio']:not(.browser-default) {
+      background: red;
+    }
   }
-  &.cdb-form .form-control.is-invalid:focus {
-    border-color: #f44336 !important;
-    box-shadow: 0 1px 0 0 #f44336 !important;
+  &.input-color-warning {
+    &.bg {
+      input:not([type='checkbox']),
+      input:not([type='radio']),
+      textarea {
+        &:focus,
+        &:focus-visible {
+          background: ${colors.warning100};
+        }
+      }
+    }
+    input:not([type='checkbox']):not([type='radio']),
+    textarea {
+      &:focus,
+      &:focus-visible {
+        border: 1px solid ${colors.warning};
+        box-shadow: inset 0 0 0 1px ${colors.warning};
+        &::placeholder {
+          color: ${colors.warning};
+          font-weight: 700;
+        }
+      }
+    }
   }
-  &.cdb-form .form-control.is-valid,
-  &.cdb-form .form-control.is-invalid {
-    background-position: center right !important;
+  &.input-color-info {
+    &.bg {
+      input:not([type='checkbox']),
+      input:not([type='radio']),
+      textarea {
+        &:focus,
+        &:focus-visible {
+          background: ${colors.info100};
+        }
+      }
+    }
+    input:not([type='checkbox']):not([type='radio']),
+    textarea {
+      &:focus,
+      &:focus-visible {
+        border: 1px solid ${colors.info};
+        box-shadow: inset 0 0 0 1px ${colors.info};
+        &::placeholder {
+          color: ${colors.info};
+          font-weight: 700;
+        }
+      }
+    }
   }
-  &.cdb-form .validate {
-    margin-bottom: 2.5rem;
+  &.input-color-dark {
+    &.bg {
+      input:not([type='checkbox']),
+      input:not([type='radio']),
+      textarea {
+        &:focus,
+        &:focus-visible {
+          background: ${colors.dark100};
+        }
+      }
+    }
+    input:not([type='checkbox']):not([type='radio']),
+    textarea {
+      &:focus,
+      &:focus-visible {
+        border: 1px solid ${colors.dark};
+        box-shadow: inset 0 0 0 1px ${colors.dark};
+        &::placeholder {
+          color: ${colors.dark};
+          font-weight: 700;
+        }
+      }
+    }
   }
-  &.cdb-form label.active {
+
+  & label.active {
     font-weight: 700;
   }
-  &.cdb-form .prefix {
+  & .prefix {
     top: 0.25rem;
     font-size: 1.75rem;
   }
-  &.cdb-form .prefix ~ input,
-  &.cdb-form .prefix ~ textarea {
+  & .prefix ~ input,
+  & .prefix ~ textarea {
     width: calc(100% - 2.5rem);
     margin-left: 2.5rem;
   }
-  &.cdb-form .prefix ~ label {
+  & .prefix ~ label {
     margin-left: 2.5rem;
   }
-  &.cdb-form .prefix ~ .form-text {
+  & .prefix ~ .form-text {
     margin-left: 2.6rem;
   }
-  &.cdb-form label {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    font-size: 1rem;
-    color: #757575;
-    cursor: text;
-    transition: transform 0.2s ease-out, color 0.2s ease-out;
-    transform: translateY(-50%);
-    transform-origin: 0% 100%;
-    font-size: ${(props) => props.size && `${props.size}px`} !important;
-  }
-  &.cdb-form label.active {
-    // transform: translateY(-14px);
-  }
-  &.cdb-form .prefix {
+  & .prefix {
     position: absolute;
     transition: color 0.2s;
   }
-  &.cdb-form .prefix.active {
+  & .prefix.active {
     color: #4285f4;
   }
-  &.cdb-form textarea.md-textarea {
+  textarea {
     padding: 0;
     overflow-y: hidden;
   }
-  &.cdb-form textarea.md-textarea + label {
-    top: -0.6rem;
-  }
-  &.cdb-form textarea.md-textarea-auto {
-    padding: 0;
-    padding-top: 1.5rem;
-  }
-  &.cdb-form textarea.md-textarea-auto + label {
-    top: 0;
-  }
-  &.cdb-form.md-outline {
-    position: relative;
-    margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
-  }
-  &.cdb-form.md-outline input[type='text'],
-  &.cdb-form.md-outline input[type='password'],
-  &.cdb-form.md-outline input[type='email'],
-  &.cdb-form.md-outline input[type='url'],
-  &.cdb-form.md-outline input[type='time'],
-  &.cdb-form.md-outline input[type='date'],
-  &.cdb-form.md-outline input[type='datetime-local'],
-  &.cdb-form.md-outline input[type='tel'],
-  &.cdb-form.md-outline input[type='number'],
-  &.cdb-form.md-outline input[type='search-md'],
-  &.cdb-form.md-outline input[type='search'],
-  &.cdb-form.md-outline textarea.md-textarea {
-    box-sizing: border-box;
-    background-color: transparent;
-    border: 1px solid #dadce0;
-    border-radius: 4px;
-    outline: none;
-    box-shadow: none;
-    transition: all 0.3s;
-  }
-  &.cdb-form.md-outline input[type='text']:focus:not([readonly]),
-  &.cdb-form.md-outline input[type='password']:focus:not([readonly]),
-  &.cdb-form.md-outline input[type='email']:focus:not([readonly]),
-  &.cdb-form.md-outline input[type='url']:focus:not([readonly]),
-  &.cdb-form.md-outline input[type='time']:focus:not([readonly]),
-  &.cdb-form.md-outline input[type='date']:focus:not([readonly]),
-  &.cdb-form.md-outline input[type='datetime-local']:focus:not([readonly]),
-  &.cdb-form.md-outline input[type='tel']:focus:not([readonly]),
-  &.cdb-form.md-outline input[type='number']:focus:not([readonly]),
-  &.cdb-form.md-outline input[type='search-md']:focus:not([readonly]),
-  &.cdb-form.md-outline input[type='search']:focus:not([readonly]),
-  &.cdb-form.md-outline textarea.md-textarea:focus:not([readonly]) {
-    ${({ color }) =>
-      color &&
-      css`
-        border-color: ${colors[`${color}`]};
-        box-shadow: inset 0 0 0 1px ${colors[`${color}`]};
-      `}
-  }
-  &.cdb-form.md-outline input[type='text']:focus:not([readonly]) + label,
-  &.cdb-form.md-outline input[type='password']:focus:not([readonly]) + label,
-  &.cdb-form.md-outline input[type='email']:focus:not([readonly]) + label,
-  &.cdb-form.md-outline input[type='url']:focus:not([readonly]) + label,
-  &.cdb-form.md-outline input[type='time']:focus:not([readonly]) + label,
-  &.cdb-form.md-outline input[type='date']:focus:not([readonly]) + label,
-  &.cdb-form.md-outline
-    input[type='datetime-local']:focus:not([readonly])
-    + label,
-  &.cdb-form.md-outline input[type='tel']:focus:not([readonly]) + label,
-  &.cdb-form.md-outline input[type='number']:focus:not([readonly]) + label,
-  &.cdb-form.md-outline input[type='search-md']:focus:not([readonly]) + label,
-  &.cdb-form.md-outline input[type='search']:focus:not([readonly]) + label,
-  &.cdb-form.md-outline textarea.md-textarea:focus:not([readonly]) + label {
-    // color: #4285f4;
-    ${({ color }) =>
-      color &&
-      css`
-        color: ${colors[`${color}`]};
-      `}
-  }
-  &.cdb-form.md-outline input[type='text'].valid,
-  &.cdb-form.md-outline input[type='text']:focus.valid,
-  &.cdb-form.md-outline input[type='password'].valid,
-  &.cdb-form.md-outline input[type='password']:focus.valid,
-  &.cdb-form.md-outline input[type='email'].valid,
-  &.cdb-form.md-outline input[type='email']:focus.valid,
-  &.cdb-form.md-outline input[type='url'].valid,
-  &.cdb-form.md-outline input[type='url']:focus.valid,
-  &.cdb-form.md-outline input[type='time'].valid,
-  &.cdb-form.md-outline input[type='time']:focus.valid,
-  &.cdb-form.md-outline input[type='date'].valid,
-  &.cdb-form.md-outline input[type='date']:focus.valid,
-  &.cdb-form.md-outline input[type='datetime-local'].valid,
-  &.cdb-form.md-outline input[type='datetime-local']:focus.valid,
-  &.cdb-form.md-outline input[type='tel'].valid,
-  &.cdb-form.md-outline input[type='tel']:focus.valid,
-  &.cdb-form.md-outline input[type='number'].valid,
-  &.cdb-form.md-outline input[type='number']:focus.valid,
-  &.cdb-form.md-outline input[type='search-md'].valid,
-  &.cdb-form.md-outline input[type='search-md']:focus.valid,
-  &.cdb-form.md-outline input[type='search'].valid,
-  &.cdb-form.md-outline input[type='search']:focus.valid,
-  &.cdb-form.md-outline textarea.md-textarea.valid,
-  &.cdb-form.md-outline textarea.md-textarea:focus.valid {
-    border-color: #00c851;
-    box-shadow: inset 0 0 0 1px #00c851;
-  }
-  &.cdb-form.md-outline input[type='text']:focus:not([readonly]).valid + label,
-  &.cdb-form.md-outline input[type='text'].valid + label:after,
-  &.cdb-form.md-outline input[type='text']:focus.valid + label:after,
-  &.cdb-form.md-outline
-    input[type='password']:focus:not([readonly]).valid
-    + label,
-  &.cdb-form.md-outline input[type='password'].valid + label:after,
-  &.cdb-form.md-outline input[type='password']:focus.valid + label:after,
-  &.cdb-form.md-outline input[type='email']:focus:not([readonly]).valid + label,
-  &.cdb-form.md-outline input[type='email'].valid + label:after,
-  &.cdb-form.md-outline input[type='email']:focus.valid + label:after,
-  &.cdb-form.md-outline input[type='url']:focus:not([readonly]).valid + label,
-  &.cdb-form.md-outline input[type='url'].valid + label:after,
-  &.cdb-form.md-outline input[type='url']:focus.valid + label:after,
-  &.cdb-form.md-outline input[type='time']:focus:not([readonly]).valid + label,
-  &.cdb-form.md-outline input[type='time'].valid + label:after,
-  &.cdb-form.md-outline input[type='time']:focus.valid + label:after,
-  &.cdb-form.md-outline input[type='date']:focus:not([readonly]).valid + label,
-  &.cdb-form.md-outline input[type='date'].valid + label:after,
-  &.cdb-form.md-outline input[type='date']:focus.valid + label:after,
-  &.cdb-form.md-outline
-    input[type='datetime-local']:focus:not([readonly]).valid
-    + label,
-  &.cdb-form.md-outline input[type='datetime-local'].valid + label:after,
-  &.cdb-form.md-outline input[type='datetime-local']:focus.valid + label:after,
-  &.cdb-form.md-outline input[type='tel']:focus:not([readonly]).valid + label,
-  &.cdb-form.md-outline input[type='tel'].valid + label:after,
-  &.cdb-form.md-outline input[type='tel']:focus.valid + label:after,
-  &.cdb-form.md-outline
-    input[type='number']:focus:not([readonly]).valid
-    + label,
-  &.cdb-form.md-outline input[type='number'].valid + label:after,
-  &.cdb-form.md-outline input[type='number']:focus.valid + label:after,
-  &.cdb-form.md-outline
-    input[type='search-md']:focus:not([readonly]).valid
-    + label,
-  &.cdb-form.md-outline input[type='search-md'].valid + label:after,
-  &.cdb-form.md-outline input[type='search-md']:focus.valid + label:after,
-  &.cdb-form.md-outline
-    input[type='search']:focus:not([readonly]).valid
-    + label,
-  &.cdb-form.md-outline input[type='search'].valid + label:after,
-  &.cdb-form.md-outline input[type='search']:focus.valid + label:after,
-  &.cdb-form.md-outline
-    textarea.md-textarea:focus:not([readonly]).valid
-    + label,
-  &.cdb-form.md-outline textarea.md-textarea.valid + label:after,
-  &.cdb-form.md-outline textarea.md-textarea:focus.valid + label:after {
-    color: #00c851;
-    content: attr(data-success);
-    opacity: 1;
-  }
-  &.cdb-form.md-outline input[type='text'].invalid,
-  &.cdb-form.md-outline input[type='text']:focus.invalid,
-  &.cdb-form.md-outline input[type='password'].invalid,
-  &.cdb-form.md-outline input[type='password']:focus.invalid,
-  &.cdb-form.md-outline input[type='email'].invalid,
-  &.cdb-form.md-outline input[type='email']:focus.invalid,
-  &.cdb-form.md-outline input[type='url'].invalid,
-  &.cdb-form.md-outline input[type='url']:focus.invalid,
-  &.cdb-form.md-outline input[type='time'].invalid,
-  &.cdb-form.md-outline input[type='time']:focus.invalid,
-  &.cdb-form.md-outline input[type='date'].invalid,
-  &.cdb-form.md-outline input[type='date']:focus.invalid,
-  &.cdb-form.md-outline input[type='datetime-local'].invalid,
-  &.cdb-form.md-outline input[type='datetime-local']:focus.invalid,
-  &.cdb-form.md-outline input[type='tel'].invalid,
-  &.cdb-form.md-outline input[type='tel']:focus.invalid,
-  &.cdb-form.md-outline input[type='number'].invalid,
-  &.cdb-form.md-outline input[type='number']:focus.invalid,
-  &.cdb-form.md-outline input[type='search-md'].invalid,
-  &.cdb-form.md-outline input[type='search-md']:focus.invalid,
-  &.cdb-form.md-outline input[type='search'].invalid,
-  &.cdb-form.md-outline input[type='search']:focus.invalid,
-  &.cdb-form.md-outline textarea.md-textarea.invalid,
-  &.cdb-form.md-outline textarea.md-textarea:focus.invalid {
-    border-color: #f44336;
-    box-shadow: inset 0 0 0 1px #f44336;
-  }
-  &.cdb-form.md-outline
-    input[type='text']:focus:not([readonly]).invalid
-    + label,
-  &.cdb-form.md-outline input[type='text'].invalid + label:after,
-  &.cdb-form.md-outline input[type='text']:focus.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='password']:focus:not([readonly]).invalid
-    + label,
-  &.cdb-form.md-outline input[type='password'].invalid + label:after,
-  &.cdb-form.md-outline input[type='password']:focus.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='email']:focus:not([readonly]).invalid
-    + label,
-  &.cdb-form.md-outline input[type='email'].invalid + label:after,
-  &.cdb-form.md-outline input[type='email']:focus.invalid + label:after,
-  &.cdb-form.md-outline input[type='url']:focus:not([readonly]).invalid + label,
-  &.cdb-form.md-outline input[type='url'].invalid + label:after,
-  &.cdb-form.md-outline input[type='url']:focus.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='time']:focus:not([readonly]).invalid
-    + label,
-  &.cdb-form.md-outline input[type='time'].invalid + label:after,
-  &.cdb-form.md-outline input[type='time']:focus.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='date']:focus:not([readonly]).invalid
-    + label,
-  &.cdb-form.md-outline input[type='date'].invalid + label:after,
-  &.cdb-form.md-outline input[type='date']:focus.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='datetime-local']:focus:not([readonly]).invalid
-    + label,
-  &.cdb-form.md-outline input[type='datetime-local'].invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='datetime-local']:focus.invalid
-    + label:after,
-  &.cdb-form.md-outline input[type='tel']:focus:not([readonly]).invalid + label,
-  &.cdb-form.md-outline input[type='tel'].invalid + label:after,
-  &.cdb-form.md-outline input[type='tel']:focus.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='number']:focus:not([readonly]).invalid
-    + label,
-  &.cdb-form.md-outline input[type='number'].invalid + label:after,
-  &.cdb-form.md-outline input[type='number']:focus.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='search-md']:focus:not([readonly]).invalid
-    + label,
-  &.cdb-form.md-outline input[type='search-md'].invalid + label:after,
-  &.cdb-form.md-outline input[type='search-md']:focus.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='search']:focus:not([readonly]).invalid
-    + label,
-  &.cdb-form.md-outline input[type='search'].invalid + label:after,
-  &.cdb-form.md-outline input[type='search']:focus.invalid + label:after,
-  &.cdb-form.md-outline
-    textarea.md-textarea:focus:not([readonly]).invalid
-    + label,
-  &.cdb-form.md-outline textarea.md-textarea.invalid + label:after,
-  &.cdb-form.md-outline textarea.md-textarea:focus.invalid + label:after {
-    color: #f44336;
-    content: attr(data-error);
-    opacity: 1;
-  }
-  &.cdb-form.md-outline input[type='text'].form-control.valid + label:after,
-  &.cdb-form.md-outline
-    input[type='text'].form-control:focus.valid
-    + label:after,
-  &.cdb-form.md-outline input[type='password'].form-control.valid + label:after,
-  &.cdb-form.md-outline
-    input[type='password'].form-control:focus.valid
-    + label:after,
-  &.cdb-form.md-outline input[type='email'].form-control.valid + label:after,
-  &.cdb-form.md-outline
-    input[type='email'].form-control:focus.valid
-    + label:after,
-  &.cdb-form.md-outline input[type='url'].form-control.valid + label:after,
-  &.cdb-form.md-outline
-    input[type='url'].form-control:focus.valid
-    + label:after,
-  &.cdb-form.md-outline input[type='time'].form-control.valid + label:after,
-  &.cdb-form.md-outline
-    input[type='time'].form-control:focus.valid
-    + label:after,
-  &.cdb-form.md-outline input[type='date'].form-control.valid + label:after,
-  &.cdb-form.md-outline
-    input[type='date'].form-control:focus.valid
-    + label:after,
-  &.cdb-form.md-outline
-    input[type='datetime-local'].form-control.valid
-    + label:after,
-  &.cdb-form.md-outline
-    input[type='datetime-local'].form-control:focus.valid
-    + label:after,
-  &.cdb-form.md-outline input[type='tel'].form-control.valid + label:after,
-  &.cdb-form.md-outline
-    input[type='tel'].form-control:focus.valid
-    + label:after,
-  &.cdb-form.md-outline input[type='number'].form-control.valid + label:after,
-  &.cdb-form.md-outline
-    input[type='number'].form-control:focus.valid
-    + label:after,
-  &.cdb-form.md-outline
-    input[type='search-md'].form-control.valid
-    + label:after,
-  &.cdb-form.md-outline
-    input[type='search-md'].form-control:focus.valid
-    + label:after,
-  &.cdb-form.md-outline input[type='search'].form-control.valid + label:after,
-  &.cdb-form.md-outline
-    input[type='search'].form-control:focus.valid
-    + label:after,
-  &.cdb-form.md-outline textarea.md-textarea.form-control.valid + label:after,
-  &.cdb-form.md-outline
-    textarea.md-textarea.form-control:focus.valid
-    + label:after {
-    position: absolute;
-    top: 4rem;
-    left: 0;
-  }
-  &.cdb-form.md-outline input[type='text'].form-control.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='text'].form-control:focus.invalid
-    + label:after,
-  &.cdb-form.md-outline
-    input[type='password'].form-control.invalid
-    + label:after,
-  &.cdb-form.md-outline
-    input[type='password'].form-control:focus.invalid
-    + label:after,
-  &.cdb-form.md-outline input[type='email'].form-control.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='email'].form-control:focus.invalid
-    + label:after,
-  &.cdb-form.md-outline input[type='url'].form-control.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='url'].form-control:focus.invalid
-    + label:after,
-  &.cdb-form.md-outline input[type='time'].form-control.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='time'].form-control:focus.invalid
-    + label:after,
-  &.cdb-form.md-outline input[type='date'].form-control.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='date'].form-control:focus.invalid
-    + label:after,
-  &.cdb-form.md-outline
-    input[type='datetime-local'].form-control.invalid
-    + label:after,
-  &.cdb-form.md-outline
-    input[type='datetime-local'].form-control:focus.invalid
-    + label:after,
-  &.cdb-form.md-outline input[type='tel'].form-control.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='tel'].form-control:focus.invalid
-    + label:after,
-  &.cdb-form.md-outline input[type='number'].form-control.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='number'].form-control:focus.invalid
-    + label:after,
-  &.cdb-form.md-outline
-    input[type='search-md'].form-control.invalid
-    + label:after,
-  &.cdb-form.md-outline
-    input[type='search-md'].form-control:focus.invalid
-    + label:after,
-  &.cdb-form.md-outline input[type='search'].form-control.invalid + label:after,
-  &.cdb-form.md-outline
-    input[type='search'].form-control:focus.invalid
-    + label:after,
-  &.cdb-form.md-outline textarea.md-textarea.form-control.invalid + label:after,
-  &.cdb-form.md-outline
-    textarea.md-textarea.form-control:focus.invalid
-    + label:after {
-    position: absolute;
-    top: 4rem;
-    left: 0;
-  }
-  &.cdb-form.md-outline
-    > input[type]:-webkit-autofill:not(.browser-default):not([type='search'])
-    + label,
-  &.cdb-form.md-outline > input[type='time']:not(.browser-default) + label {
-    // background: #fff;
-    ${({ color }) =>
-      color &&
-      css`
-        background: ${colors[`${color.toString() + `100`}`]} !important;
-      `}
-    transform: translateY(-9px) scale(0.8);
-    transform-origin: 0 0;
-  }
-  &.cdb-form.md-outline
-    > input[type]:-webkit-autofill:not(.browser-default):not([type='search'])
-    + label.active,
-  &.cdb-form.md-outline
-    > input[type='time']:not(.browser-default)
-    + label.active {
-    transform: translateY(-9px) scale(0.8);
-    transform-origin: 0 0;
-  }
-  @-webkit-keyframes autofill {
-    to {
-      color: #495057;
-      background: transparent;
-    }
-  }
-  @keyframes autofill {
-    to {
-      color: #495057;
-      background: transparent;
-    }
-  }
-  &.cdb-form.md-outline input:-webkit-autofill {
-    -webkit-animation-name: autofill;
-    animation-name: autofill;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-  }
-  &.cdb-form.md-outline .form-control {
-    padding: 4px 10px;
-  }
-  &.cdb-form.md-outline label {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    padding-left: 10px;
-    font-size: 1rem;
-    color: #757575;
-    cursor: text;
-    transition: transform 0.2s ease-out, color 0.2s ease-out;
-    transform: translateY(-50%);
-    transform-origin: 0% 100%;
-  }
-  &.cdb-form.md-outline label.active {
-    font-weight: 700;
-    // background: #fff;
-  }
-  &.cdb-form.md-outline .prefix {
-    position: absolute;
-    top: 0.6rem;
-    font-size: 20px;
-    transition: color 0.2s;
-  }
-  &.cdb-form.md-outline .prefix:focus {
-    color: #4285f4;
-  }
-  &.cdb-form.md-outline .prefix ~ input,
-  &.cdb-form.md-outline .prefix ~ textarea {
-    width: calc(100% - 2rem);
-    margin-left: 2rem;
-  }
-  &.cdb-form.md-outline .prefix ~ label {
-    margin-left: 2rem;
-  }
-  &.cdb-form.md-outline .prefix ~ .form-text {
-    margin-left: 2.1rem;
-  }
-  &.cdb-form.md-outline .character-counter {
-    margin-top: -0.5rem;
-  }
-  &.cdb-form.md-bg input[type='text'],
-  &.cdb-form.md-bg input[type='password'],
-  &.cdb-form.md-bg input[type='email'],
-  &.cdb-form.md-bg input[type='url'],
-  &.cdb-form.md-bg input[type='time'],
-  &.cdb-form.md-bg input[type='date'],
-  &.cdb-form.md-bg input[type='datetime-local'],
-  &.cdb-form.md-bg input[type='tel'],
-  &.cdb-form.md-bg input[type='number'],
-  &.cdb-form.md-bg input[type='search-md'],
-  &.cdb-form.md-bg input[type='search'],
-  &.cdb-form.md-bg textarea.md-textarea {
-    box-sizing: border-box;
-    padding: 10px 5px;
-    background: #f5f5f5 no-repeat;
-    background-image: linear-gradient(to bottom, #4285f4, #4285f4),
-      linear-gradient(to bottom, #ced4da, #ced4da);
-    background-position: 50% 100%, 50% 100%;
-    background-size: 0 2px, 100% 1px;
-    border: 0;
-    border-top-left-radius: 0.3rem;
-    border-top-right-radius: 0.3rem;
-    transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
-  }
-  &.cdb-form.md-bg input[type='text']:focus:not([readonly]),
-  &.cdb-form.md-bg input[type='password']:focus:not([readonly]),
-  &.cdb-form.md-bg input[type='email']:focus:not([readonly]),
-  &.cdb-form.md-bg input[type='url']:focus:not([readonly]),
-  &.cdb-form.md-bg input[type='time']:focus:not([readonly]),
-  &.cdb-form.md-bg input[type='date']:focus:not([readonly]),
-  &.cdb-form.md-bg input[type='datetime-local']:focus:not([readonly]),
-  &.cdb-form.md-bg input[type='tel']:focus:not([readonly]),
-  &.cdb-form.md-bg input[type='number']:focus:not([readonly]),
-  &.cdb-form.md-bg input[type='search-md']:focus:not([readonly]),
-  &.cdb-form.md-bg input[type='search']:focus:not([readonly]),
-  &.cdb-form.md-bg textarea.md-textarea:focus:not([readonly]) {
-    border-bottom: none;
-    box-shadow: none;
-  }
-  &.cdb-form.md-bg input[type='text']:focus,
-  &.cdb-form.md-bg input[type='password']:focus,
-  &.cdb-form.md-bg input[type='email']:focus,
-  &.cdb-form.md-bg input[type='url']:focus,
-  &.cdb-form.md-bg input[type='time']:focus,
-  &.cdb-form.md-bg input[type='date']:focus,
-  &.cdb-form.md-bg input[type='datetime-local']:focus,
-  &.cdb-form.md-bg input[type='tel']:focus,
-  &.cdb-form.md-bg input[type='number']:focus,
-  &.cdb-form.md-bg input[type='search-md']:focus,
-  &.cdb-form.md-bg input[type='search']:focus,
-  &.cdb-form.md-bg textarea.md-textarea:focus {
-    background-color: #dcdcdc;
-    background-size: 100% 2px, 100% 1px;
-    outline: none;
-  }
-  &.cdb-form.md-bg > input[type='date']:not(.browser-default) + label {
-    transform: translateY(-12px) scale(0.8);
-    transform-origin: 0 0;
-  }
-  &.cdb-form.md-bg
-    > input[type]:-webkit-autofill:not(.browser-default):not([type='search'])
-    + label,
-  &.cdb-form.md-bg > input[type='time']:not(.browser-default) + label {
-    font-size: 0.8rem;
-    transform: translateY(-12px);
-    transform-origin: 0 0;
-  }
-  &.cdb-form.md-bg .form-control {
-    padding: 1.1rem 0.7rem 0.4rem !important;
-  }
-  &.cdb-form.md-bg label {
-    top: 0;
-    padding-left: 0.7rem;
-    font-size: 1rem;
-    transition: transform 0.2s ease-out, color 0.2s ease-out;
-    transform: translateY(13px);
-    transform-origin: 0% 100%;
-  }
-  &.cdb-form.md-bg label.active {
-    padding-left: 0.75rem;
-    font-weight: 500;
-    transform: translateY(-3px) scale(0.8);
-  }
-  &.cdb-form .form-control.is-invalid,
-  .was-validated &.cdb-form .form-control:invalid {
-    padding-right: 0;
-  }
-  &.cdb-form .form-control.is-valid,
-  .was-validated &.cdb-form .form-control:valid {
+
+  & .form-control.is-valid,
+  .was-validated & .form-control:valid {
     padding-right: 0;
   }
-  .needs-validation &.cdb-form label {
+  .needs-validation & label {
     left: 0.3rem;
   }
   .custom-file-input:lang(es) ~ .custom-file-label::after {
@@ -1470,16 +503,13 @@ export const Component = styled.div`
   .custom-file-input:lang(ru) ~ .custom-file-label::after {
     content: 'Выбрать';
   }
-  &.cdb-form > label {
+  & > label {
     max-width: 100%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  &.cdb-form .form-control {
-    box-sizing: border-box !important;
-  }
-  &.cdb-form .input-prefix {
+  & .input-prefix {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -1487,38 +517,39 @@ export const Component = styled.div`
     color: rgba(0, 0, 0, 0.87);
     pointer-events: none;
   }
-  &.cdb-form .input-prefix.active {
+  & .input-prefix.active {
     color: #4285f4;
   }
-  &.cdb-form.input-with-pre-icon label {
+  &.input-with-pre-icon label {
     left: 36px;
     right: initial;
   }
-  &.cdb-form.input-with-pre-icon .input-prefix {
+  &.input-with-pre-icon .input-prefix {
     left: 16px;
     right: initial;
   }
-  &.cdb-form.input-with-pre-icon .form-control {
+  &.input-with-pre-icon .form-control {
     padding-left: 2.7rem !important;
   }
-  &.cdb-form.input-with-post-icon .input-prefix {
+  &.input-with-post-icon .input-prefix {
     right: 16px;
     left: initial;
   }
-  &.cdb-form.input-with-post-icon .form-control {
+  &.input-with-post-icon .form-control {
     padding-right: 2.7rem !important;
   }
-  &.cdb-form.input-with-post-icon.input-with-pre-icon .input-prefix {
+  &.input-with-post-icon.input-with-pre-icon .input-prefix {
     right: 16px;
     left: initial;
   }
-  &.cdb-form.input-with-post-icon.input-with-pre-icon
-    .input-prefix:first-of-type {
+  &.input-with-post-icon.input-with-pre-icon .input-prefix:first-of-type {
     left: 16px;
     right: initial;
   }
-  &.cdb-form.input-with-post-icon.input-with-pre-icon .form-control {
+  &.input-with-post-icon.input-with-pre-icon .form-control {
     padding-left: 2.5rem !important;
     padding-right: 2.5rem !important;
   }
 `
+export const StyledTextArea = styled.textarea``
+export const StyledInput = styled.input``