"use strict";

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

var _react = _interopRequireDefault(require("react"));

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

var _react2 = _interopRequireDefault(require("cleave.js/react"));

var _fieldLabel = require("../../../typography/field-label");

var _primitives = require("../../../../primitives");

var _branding = require("../../../../mixins/branding");

var _typography = require("../../../../mixins/typography");

var _icon = require("../../../icon");

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

var f3FontSize = function f3FontSize(_ref) {
  var theme = _ref.theme;
  return (0, _typography.getFontSize)({
    theme: theme,
    fontSize: 'f3'
  });
};

var Input = (0, _styledComponents["default"])(_react2["default"]).withConfig({
  displayName: "Input",
  componentId: "sc-5bh7t2-0"
})(["&&{background:transparent;background-color:transparent;border:0;font-family:", ";height:100%;outline:none;padding:21px 15px 0 20px;transition:height 0.3s,padding 0.3s;width:100%;font-size:", ";font-weight:600;&:focus:not(:disabled),&:active:not(:disabled),&:not([value='']):not(:disabled){color:", ";& + label{color:", ";transform:translate3d(0,-14px,0);span{transform:scale3d(0.8,0.8,1);}}}&:not([value='']):not(:focus){padding:10px 15px 10px 20px;& + label{opacity:0;transform:translate3d(0,-18px,0);}}}"], _typography.getFontFamily, f3FontSize, (0, _branding.getPaletteColor)('greyscale-black'), (0, _branding.getPaletteColor)('greyscale-black'));
var FloatingLabel = (0, _styledComponents["default"])(_fieldLabel.FieldLabel).withConfig({
  displayName: "FloatingLabel",
  componentId: "sc-5bh7t2-1"
})(["color:", ";left:20px;margin-bottom:0;pointer-events:none;position:absolute;transform:none;transition:opacity 0.3s,transform 0.3s,color 0.3s;font-size:", ";width:100%;text-align:left;"], (0, _branding.getPaletteColor)('greyscale-dark'), f3FontSize);
var FloatingLabelInputField = (0, _styledComponents["default"])(_primitives.Box).withConfig({
  displayName: "FloatingLabelInputField",
  componentId: "sc-5bh7t2-2"
})(["align-items:center;font-size:", ";background:", ";border:1px solid ", ";border-radius:6px;cursor:text;display:flex;height:60px;padding-right:20px;position:relative;&&{button{display:flex;align-items:center;justify-content:center;}}"], f3FontSize, (0, _branding.getPaletteColor)('white'), (0, _branding.getPaletteColor)('greyscale-light'));
var StyledErrorIcon = (0, _styledComponents["default"])(_icon.ErrorIcon).withConfig({
  displayName: "StyledErrorIcon",
  componentId: "sc-5bh7t2-3"
})(["position:absolute;top:5px;right:5px;"]);

var LabelText = _styledComponents["default"].span.withConfig({
  displayName: "LabelText",
  componentId: "sc-5bh7t2-4"
})(["display:inline-block;transform:none;transform-origin:left;transition:transform 0.3s;min-width:120px;"]);

var FloatingLabelInput = function FloatingLabelInput(_ref2) {
  var id = _ref2.id,
      dataCy = _ref2['data-cy'],
      dataQa = _ref2['data-qa'],
      type = _ref2.type,
      onChange = _ref2.onChange,
      label = _ref2.label,
      children = _ref2.children,
      inputMode = _ref2.inputMode,
      disabled = _ref2.disabled,
      value = _ref2.value,
      error = _ref2.error,
      onBlur = _ref2.onBlur,
      onFocus = _ref2.onFocus,
      options = _ref2.options,
      onRef = _ref2.onRef,
      name = _ref2.name;
  return /*#__PURE__*/_react["default"].createElement(FloatingLabelInputField, null, /*#__PURE__*/_react["default"].createElement(Input, {
    id: id,
    type: type,
    disabled: disabled,
    "data-qa": dataQa,
    "data-cy": dataCy,
    value: value || '',
    onChange: onChange,
    onFocus: onFocus,
    onBlur: onBlur,
    inputMode: inputMode,
    options: options,
    htmlRef: onRef,
    name: name,
    spellCheck: type === 'email' || type === 'password' ? false : undefined
  }), /*#__PURE__*/_react["default"].createElement(FloatingLabel, {
    htmlFor: id
  }, /*#__PURE__*/_react["default"].createElement(LabelText, null, label)), error != null && error !== false && /*#__PURE__*/_react["default"].createElement(StyledErrorIcon, null), children);
};

exports.FloatingLabelInput = FloatingLabelInput;