@ntragas/pouncejstest/dist/esm/components/utils/Input/InputElement.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';
import useTheme from '../../../utils/useTheme';
var InputElement = /*#__PURE__*/React.forwardRef(function InputElement(_ref, ref) {
  var readOnly = _ref.readOnly,
      standalone = _ref.standalone,
      rest = _objectWithoutPropertiesLoose(_ref, ["readOnly", "standalone"]);

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

  var theme = useTheme();
  var pt = standalone ? 14 : 5;
  var pb = standalone ? 14 : 2;
  return /*#__PURE__*/React.createElement(Box, _extends({
    ref: ref,
    as: "input",
    width: "100%",
    height: "100%",
    px: 4,
    pt: pt,
    pb: pb,
    position: "relative",
    color: "gray-50",
    fontSize: "medium",
    fontWeight: "medium",
    backgroundColor: "transparent",
    border: 0,
    _placeholder: {
      opacity: standalone ? 1 : 0,
      color: standalone ? 'gray-300' : 'gray-50',
      transition: 'opacity 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
      fontWeight: standalone ? 'normal' : 'medium'
    },
    _focus: {
      '::placeholder': {
        opacity: 0.4,
        color: standalone ? 'gray-50' : undefined,
        fontWeight: standalone ? 'medium' : undefined
      }
    } // @ts-ignore `WebkitBoxShadow` and `WebkitTextFillColor` are not part of the TS CSS typings
    ,
    _autofill: {
      WebkitBoxShadow: "0 0 0 30px " + theme.colors['navyblue-600'] + " inset",
      WebkitTextFillColor: theme.colors['gray-50'],
      borderRadius: 'medium'
    },
    disabled: disabled,
    "aria-disabled": disabled,
    readOnly: readOnly,
    "aria-readonly": readOnly,
    required: required,
    "aria-required": required,
    "aria-invalid": invalid
  }, rest));
});
export default InputElement;