@age/quantum/Input/sub-components/TextInput.js

Catho react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _theme = require("../../shared/theme");

var _shared = require("../../shared");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var TextInput = _styledComponents.default.input.withConfig({
  displayName: "TextInput",
  componentId: "sc-1mzuny5-0"
})(["-webkit-appearance:none;border-radius:4px;box-sizing:border-box;box-sizing:border-box;font-size:initial;letter-spacing:0.2px;outline:none;transition:all 0.2s ease-in-out;width:100%;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}&::-webkit-calendar-picker-indicator,&::-webkit-search-cancel-button{display:none;}&::-ms-clear{display:none;}", ""], function (_ref) {
  var hasDefaultValue = _ref.hasDefaultValue,
      hasLabel = _ref.hasLabel,
      error = _ref.error,
      hasRightIcon = _ref.hasRightIcon,
      hasLeftIcon = _ref.hasLeftIcon,
      placeholder = _ref.placeholder,
      theme = _ref.theme,
      value = _ref.value;
  var _theme$colors = theme.colors,
      _theme$colors$primary = _theme$colors.primary,
      primary100 = _theme$colors$primary[100],
      primary700 = _theme$colors$primary[700],
      _theme$colors$error = _theme$colors.error,
      error100 = _theme$colors$error[100],
      error700 = _theme$colors$error[700],
      _theme$colors$neutral = _theme$colors.neutral,
      neutral0 = _theme$colors$neutral[0],
      neutral100 = _theme$colors$neutral[100],
      neutral500 = _theme$colors$neutral[500],
      neutral700 = _theme$colors$neutral[700],
      _theme$spacing = theme.spacing,
      xsmall = _theme$spacing.xsmall,
      medium = _theme$spacing.medium,
      large = _theme$spacing.large;
  var mainColor = error ? error700 : primary700;
  var iconSize = large;
  var horizontalPadding = medium + iconSize + xsmall;
  return "\n      background-color: ".concat(neutral0, ";\n      border: 2px solid ").concat(neutral500, ";\n      color: ").concat(neutral700, ";\n      margin-top: ").concat(hasLabel ? xsmall : '0', "px;\n      padding: ").concat(xsmall, "px ").concat(medium, "px;\n\n      ").concat(hasRightIcon ? "padding-right: ".concat(horizontalPadding, "px;") : '', "\n      ").concat(hasLeftIcon ? "padding-left: ".concat(horizontalPadding, "px;") : '', "\n      ").concat(error ? "border-color: ".concat(mainColor, ";") : '', "\n      ").concat(placeholder && !hasDefaultValue && !value ? "color: ".concat(neutral500, ";") : '', "\n      ").concat(hasDefaultValue ? "background-color: ".concat(primary100, ";") : '', "\n\n      :hover, :focus {\n        border-color: ").concat(mainColor, ";\n        ").concat((0, _shared.shadow)(2, mainColor)({
    theme: theme
  }), "\n      }\n\n      &[disabled] {\n        background-color: ").concat(neutral100, ";\n        border-color: ").concat(neutral500, ";\n        box-shadow: none;\n        color: ").concat(neutral500, ";\n        cursor: not-allowed;\n      }\n\n      :-webkit-autofill {\n        box-shadow: 0 0 0 1000px ").concat(error100, " inset;\n      }\n    ");
});

TextInput.displayName = 'TextInput';
TextInput.propTypes = {
  theme: _propTypes.default.shape({
    spacing: _propTypes.default.object,
    colors: _propTypes.default.object
  })
};
TextInput.defaultProps = {
  theme: {
    spacing: _theme.spacing,
    colors: _theme.colors
  }
};
var _default = TextInput;
exports.default = _default;