function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/*
Copyright (c) 2018-2019 Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import { styled } from '../styles/index.js';
import { ADJOINED, ENHANCER_POSITION, SIZE } from './constants.js';
import { DeleteAlt } from '../icon/index.js';
export var StyledClearIconContainer = styled('div', function (_ref) {
  var _ref$$size = _ref.$size,
      $size = _ref$$size === void 0 ? SIZE.default : _ref$$size,
      _ref$$alignTop = _ref.$alignTop,
      $alignTop = _ref$$alignTop === void 0 ? false : _ref$$alignTop,
      $theme = _ref.$theme;
  var sidePadding = $size === SIZE.compact ? $theme.sizing.scale100 : $size === SIZE.large ? $theme.sizing.scale300 : $theme.sizing.scale200;
  return {
    display: 'flex',
    alignItems: $alignTop ? 'flex-start' : 'center',
    paddingLeft: sidePadding,
    paddingRight: sidePadding,
    paddingTop: $alignTop ? sidePadding : '0px',
    color: $theme.colors.foregroundAlt
  };
});
StyledClearIconContainer.displayName = "StyledClearIconContainer";
export var StyledClearIcon = styled(DeleteAlt, {
  cursor: 'pointer'
});
StyledClearIcon.displayName = "StyledClearIcon";

function getInputPadding(size, sizing) {
  var _SIZE$compact$SIZE$de;

  return (_SIZE$compact$SIZE$de = {}, _defineProperty(_SIZE$compact$SIZE$de, SIZE.compact, {
    paddingTop: sizing.scale200,
    paddingBottom: sizing.scale200,
    paddingLeft: sizing.scale400,
    paddingRight: sizing.scale400
  }), _defineProperty(_SIZE$compact$SIZE$de, SIZE.default, {
    paddingTop: sizing.scale400,
    paddingBottom: sizing.scale400,
    paddingLeft: sizing.scale550,
    paddingRight: sizing.scale550
  }), _defineProperty(_SIZE$compact$SIZE$de, SIZE.large, {
    paddingTop: sizing.scale550,
    paddingBottom: sizing.scale550,
    paddingLeft: sizing.scale650,
    paddingRight: sizing.scale650
  }), _SIZE$compact$SIZE$de)[size];
}

function getFont(size, typography) {
  var _SIZE$compact$SIZE$de2;

  return (_SIZE$compact$SIZE$de2 = {}, _defineProperty(_SIZE$compact$SIZE$de2, SIZE.compact, typography.font300), _defineProperty(_SIZE$compact$SIZE$de2, SIZE.default, typography.font400), _defineProperty(_SIZE$compact$SIZE$de2, SIZE.large, typography.font460), _SIZE$compact$SIZE$de2)[size];
}

export var Root = styled('div', function (props) {
  var $size = props.$size,
      _props$$theme = props.$theme,
      colors = _props$$theme.colors,
      typography = _props$$theme.typography;
  return _objectSpread({}, getFont($size, typography), {
    color: colors.foreground,
    display: 'flex',
    width: '100%'
  });
}); // InputEnhancer

Root.displayName = "Root";

function getInputEnhancerBorderRadius(position, radius) {
  var _ENHANCER_POSITION$st;

  return (_ENHANCER_POSITION$st = {}, _defineProperty(_ENHANCER_POSITION$st, ENHANCER_POSITION.start, {
    borderTopLeftRadius: radius,
    borderBottomLeftRadius: radius,
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0
  }), _defineProperty(_ENHANCER_POSITION$st, ENHANCER_POSITION.end, {
    borderTopLeftRadius: 0,
    borderBottomLeftRadius: 0,
    borderTopRightRadius: radius,
    borderBottomRightRadius: radius
  }), _ENHANCER_POSITION$st)[position];
}

function getInputEnhancerPadding($size, sizing) {
  var _SIZE$compact$SIZE$de3;

  return (_SIZE$compact$SIZE$de3 = {}, _defineProperty(_SIZE$compact$SIZE$de3, SIZE.compact, {
    paddingRight: sizing.scale400,
    paddingLeft: sizing.scale400
  }), _defineProperty(_SIZE$compact$SIZE$de3, SIZE.default, {
    paddingRight: sizing.scale600,
    paddingLeft: sizing.scale600
  }), _defineProperty(_SIZE$compact$SIZE$de3, SIZE.large, {
    paddingRight: sizing.scale650,
    paddingLeft: sizing.scale650
  }), _SIZE$compact$SIZE$de3)[$size];
}

function getInputEnhancerColors($disabled, $isFocused, $error, $positive, colors) {
  if ($disabled) {
    return {
      color: colors.inputEnhancerTextDisabled,
      backgroundColor: colors.inputEnhancerFillDisabled
    };
  }

  if ($isFocused) {
    return {
      color: colors.foregroundInv,
      backgroundColor: colors.primary400
    };
  }

  if ($error) {
    return {
      color: colors.foreground,
      backgroundColor: colors.inputBorderError
    };
  }

  if ($positive) {
    return {
      color: colors.foreground,
      backgroundColor: colors.inputBorderPositive
    };
  }

  return {
    color: colors.foreground,
    backgroundColor: colors.inputEnhancerFill
  };
}

export var InputEnhancer = styled('div', function (props) {
  var $position = props.$position,
      $size = props.$size,
      $disabled = props.$disabled,
      $isFocused = props.$isFocused,
      $error = props.$error,
      $positive = props.$positive,
      _props$$theme2 = props.$theme,
      borders = _props$$theme2.borders,
      colors = _props$$theme2.colors,
      sizing = _props$$theme2.sizing,
      typography = _props$$theme2.typography,
      animation = _props$$theme2.animation;
  return _objectSpread({
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    transitionProperty: 'color, background-color',
    transitionDuration: animation.timing100,
    transitionTimingFunction: animation.easeOutCurve
  }, getInputEnhancerBorderRadius($position, borders.inputBorderRadius), getFont($size, typography), getInputEnhancerPadding($size, sizing), getInputEnhancerColors($disabled, $isFocused, $error, $positive, colors));
}); // InputContainer

InputEnhancer.displayName = "InputEnhancer";

function getInputContainerBorderRadius(adjoined, radius) {
  var _ADJOINED$none$ADJOIN;

  return (_ADJOINED$none$ADJOIN = {}, _defineProperty(_ADJOINED$none$ADJOIN, ADJOINED.none, {
    borderTopLeftRadius: radius,
    borderBottomLeftRadius: radius,
    borderTopRightRadius: radius,
    borderBottomRightRadius: radius
  }), _defineProperty(_ADJOINED$none$ADJOIN, ADJOINED.left, {
    borderTopLeftRadius: 0,
    borderBottomLeftRadius: 0,
    borderTopRightRadius: radius,
    borderBottomRightRadius: radius
  }), _defineProperty(_ADJOINED$none$ADJOIN, ADJOINED.right, {
    borderTopLeftRadius: radius,
    borderBottomLeftRadius: radius,
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0
  }), _defineProperty(_ADJOINED$none$ADJOIN, ADJOINED.both, {
    borderTopLeftRadius: 0,
    borderBottomLeftRadius: 0,
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0
  }), _ADJOINED$none$ADJOIN)[adjoined];
}

function getInputContainerColors($disabled, $isFocused, $error, $positive, colors) {
  if ($disabled) {
    return {
      color: colors.inputTextDisabled,
      borderColor: colors.inputFillDisabled,
      backgroundColor: colors.inputFillDisabled
    };
  }

  if ($isFocused) {
    return {
      color: colors.foreground,
      borderColor: colors.primary400,
      backgroundColor: colors.inputFillActive
    };
  }

  if ($error) {
    return {
      color: colors.foreground,
      borderColor: colors.inputBorderError,
      backgroundColor: colors.inputFillError
    };
  }

  if ($positive) {
    return {
      color: colors.foreground,
      borderColor: colors.inputBorderPositive,
      backgroundColor: colors.inputFillPositive
    };
  }

  return {
    color: colors.foreground,
    borderColor: colors.inputFill,
    backgroundColor: colors.inputFill
  };
}

export var getInputContainerStyles = function getInputContainerStyles(props) {
  var $isFocused = props.$isFocused,
      $adjoined = props.$adjoined,
      $error = props.$error,
      $disabled = props.$disabled,
      $positive = props.$positive,
      $size = props.$size,
      _props$$theme3 = props.$theme,
      borders = _props$$theme3.borders,
      colors = _props$$theme3.colors,
      typography = _props$$theme3.typography,
      animation = _props$$theme3.animation;
  return _objectSpread({
    boxSizing: 'border-box',
    display: 'flex',
    width: '100%',
    borderWidth: '2px',
    borderStyle: 'solid',
    transitionProperty: 'border, background-color',
    transitionDuration: animation.timing100,
    transitionTimingFunction: animation.easeOutCurve
  }, getInputContainerBorderRadius($adjoined, borders.inputBorderRadius), getFont($size, typography), getInputContainerColors($disabled, $isFocused, $error, $positive, colors));
};
export var InputContainer = styled('div', getInputContainerStyles);
InputContainer.displayName = "InputContainer";

function getInputColors($disabled, $isFocused, $error, colors) {
  if ($disabled) {
    return {
      color: colors.foregroundAlt,
      caretColor: colors.foreground,
      '::placeholder': {
        color: colors.inputTextDisabled
      }
    };
  }

  return {
    color: colors.foreground,
    caretColor: colors.foreground,
    '::placeholder': {
      color: colors.foregroundAlt
    }
  };
}

export var getInputStyles = function getInputStyles(props) {
  var $disabled = props.$disabled,
      $isFocused = props.$isFocused,
      $error = props.$error,
      $size = props.$size,
      _props$$theme4 = props.$theme,
      colors = _props$$theme4.colors,
      sizing = _props$$theme4.sizing,
      typography = _props$$theme4.typography;
  return _objectSpread({
    boxSizing: 'border-box',
    backgroundColor: 'transparent',
    borderWidth: 0,
    borderStyle: 'none',
    outline: 'none',
    width: '100%',
    maxWidth: '100%',
    cursor: $disabled ? 'not-allowed' : 'text',
    paddingTop: '0',
    paddingBottom: '0',
    paddingLeft: '0',
    paddingRight: '0'
  }, getFont($size, typography), getInputPadding($size, sizing), getInputColors($disabled, $isFocused, $error, colors));
};
export var Input = styled('input', getInputStyles);
Input.displayName = "Input";