{"version":3,"sources":["../../../src/Input/Input.tsx"],"names":[".s16om797",".s1z0etcv",".s1bu1u5n",".s7jzah5",".sri2jma",".s1eijfsv",".s8qjvp5",".snkpzmt",".s1ahjlf3"],"mappings":"AAMMA;AAOAC;AACAC;AAEAC;AAKAC;AA8BAC;AAqBAC;AASAC;AASAC","file":"../../../src/Input/Input.tsx","sourcesContent":["import React, { useState, useCallback } from \"react\";\nimport { css, cx } from \"linaria\";\nimport { baseBorderRadius, colors } from \"../utils\";\nimport Loader from \"../Loader/Loader\";\nimport \"../utils/global\";\n\nconst StundInputContainer = css`\n  position: relative;\n  display: inline-block;\n  display: block;\n  width: 100%;\n`;\n\nconst StundInputIsActive = css``;\nconst StundInputLoading = css``;\n\nconst StundInputInline = css`\n  display: inline-block;\n  width: auto;\n`;\n\nconst StundInput = css`\n  height: 48px;\n  padding: 0 16px;\n  border-radius: ${baseBorderRadius};\n  background-color: #ffffff !important;\n  border: 2px solid ${colors[\"color-basic-500\"]};\n  font-size: 12px;\n  font: inherit;\n  transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;\n  appearance: none;\n  outline: none;\n  display: block;\n  width: 100%;\n  &:not(.${StundInputInline}) {\n    margin: 11px 0;\n  }\n  &::placeholder {\n    font-weight: 500;\n  }\n  &:focus {\n    border-color: ${colors[\"color-primary-400\"]};\n  }\n  &:focus ~ span {\n    color: ${colors[\"color-primary-600\"]};\n  }\n  .${StundInputLoading} & {\n    padding-left: 32px;\n  }\n`;\n\nconst StundInputLabel = css`\n  color: ${colors[\"color-primary-500\"]};\n  font-size: 14px;\n  font-weight: 800;\n  position: absolute;\n  top: 2px;\n  left: 12px;\n  transform: translateY(25%);\n  opacity: 0;\n  transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;\n  background-color: white;\n  padding: 0 4px;\n  .${StundInputIsActive} & {\n    opacity: 1;\n    transform: translateY(-11px);\n  }\n  .${StundInputLoading} & {\n    left: 33px;\n  }\n`;\n\nconst StundInputSuccess = css`\n  & .${StundInput} {\n    border-color: ${colors[\"color-success-600\"]} !important;\n  }\n  & .${StundInput}::placeholder, & .${StundInputLabel} {\n    color: ${colors[\"color-success-600\"]} !important;\n  }\n`;\n\nconst StundInputError = css`\n  & .${StundInput} {\n    border-color: ${colors[\"color-danger-600\"]} !important;\n  }\n  & .${StundInput}::placeholder, & .${StundInputLabel} {\n    color: ${colors[\"color-danger-600\"]} !important;\n  }\n`;\n\nconst StundInputLoader = css`\n  position: absolute;\n  left: 10px;\n  top: 14px;\n`;\n\nexport interface BaseInputProps {\n  value?: string;\n  inline?: boolean;\n  label?: string;\n  loading?: boolean;\n  onChange?: (value: string) => void;\n  status?: \"success\" | \"error\";\n}\nexport type InputProps = BaseInputProps &\n  // eslint-disable-next-line quotes, @typescript-eslint/ban-types\n  Omit<JSX.IntrinsicElements[\"input\"], \"onChange\">;\n\nconst Input: React.FC<InputProps> = ({\n  inline,\n  className,\n  label,\n  value,\n  defaultValue,\n  onChange,\n  loading,\n  status,\n  ...props\n}) => {\n  const [active, setActive] = useState<boolean>(!!(value || defaultValue));\n  const [_value, setValue] = useState(defaultValue || \"\");\n  const _onChange = useCallback(\n    (e) => {\n      if (loading) {\n        return;\n      }\n\n      const { value } = e.target;\n      setTimeout(() => setActive(value.length !== 0), 100);\n\n      setValue(value);\n      if (onChange) {\n        onChange(value);\n      }\n    },\n    [onChange, loading]\n  );\n  return (\n    <label\n      className={cx(\n        StundInputContainer,\n        inline && StundInputInline,\n        active && StundInputIsActive,\n        loading && StundInputLoading,\n        status === \"success\" && StundInputSuccess,\n        status === \"error\" && StundInputError\n      )}>\n      <input\n        {...props}\n        value={value || _value}\n        onChange={_onChange}\n        placeholder={label}\n        className={cx(StundInput, inline && StundInputInline, className)}\n      />\n      <span className={cx(StundInputLabel)}>{label}</span>\n      {loading && <Loader className={StundInputLoader} size={20} />}\n    </label>\n  );\n};\n\nexport default Input;\n"]}