@ntragas/pouncejstest/dist/esm/components/utils/Input/InputLabel.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import { useInputContext } from './InputContext';
import Box from '../../Box';

var InputLabel = function InputLabel(_ref) {
  var _ref$raised = _ref.raised,
      raised = _ref$raised === void 0 ? true : _ref$raised,
      rest = _objectWithoutPropertiesLoose(_ref, ["raised"]);

  var _useInputContext = useInputContext(),
      invalid = _useInputContext.invalid;

  return /*#__PURE__*/React.createElement(Box, _extends({
    as: "label",
    pointerEvents: "none",
    fontSize: "medium",
    px: 4,
    color: invalid ? 'red-300' : 'gray-300',
    top: 0,
    left: 0,
    position: "absolute",
    transformOrigin: "center left",
    transform: raised ? 'translate(6px, 4px) scale(0.65)' : 'translate(0, 14px) scale(1)',
    transition: "transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
    fontWeight: raised ? 'medium' : 'normal'
  }, rest));
};

export default InputLabel;