import { Chevron, Position } from '@transferwise/components';
import PropTypes from 'prop-types';
import React from 'react';
import { s as styleInject } from './style-inject.es-1f59c1d0.js';

var css_248z = ".cc_arrow-icon_3296223122 {\n  margin-left: var(--size-8);\n}\n.cc_top_3296223122,\n.cc_bottom_3296223122,\n.cc_tw-icon_3296223122,\n.cc_tw-icon-chevron-up_3296223122,\n.cc_tw-chevron_3296223122,\n.cc_chevron-color_3296223122 {\n  box-sizing: border-box;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21tb24vQXJyb3dJY29uLm1vZHVsZS5sZXNzIiwiQXJyb3dJY29uLm1vZHVsZS5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBO0VBQ0UsMEJBQUE7QUNBRjtBREdBOzs7Ozs7RUFLaUIsc0JBQUE7QUNBakIiLCJmaWxlIjoiQXJyb3dJY29uLm1vZHVsZS5sZXNzIn0= */";
var componentStyles = {"arrow-icon":"cc_arrow-icon_3296223122","arrowIcon":"cc_arrow-icon_3296223122","top":"cc_top_3296223122","bottom":"cc_bottom_3296223122","tw-icon":"cc_tw-icon_3296223122","twIcon":"cc_tw-icon_3296223122","tw-icon-chevron-up":"cc_tw-icon-chevron-up_3296223122","twIconChevronUp":"cc_tw-icon-chevron-up_3296223122","tw-chevron":"cc_tw-chevron_3296223122","twChevron":"cc_tw-chevron_3296223122","chevron-color":"cc_chevron-color_3296223122","chevronColor":"cc_chevron-color_3296223122"};
styleInject(css_248z);

const Arrow = ({
  iconPosition,
  styles
}) => {
  const derivedStyles = {
    ...componentStyles,
    ...styles
  };
  const createClassNames = classNames => classNames.map(className => `${derivedStyles[className]}`).join(' ');
  return /*#__PURE__*/React.createElement(Chevron, {
    className: createClassNames(['arrow-icon']),
    orientation: iconPosition === 'up' ? Position.TOP : Position.BOTTOM
  });
};
Arrow.propTypes = {
  iconPosition: PropTypes.oneOf(['up', 'down'])
};
Arrow.defaultProps = {
  iconPosition: 'down'
};

export { Arrow as A };
//# sourceMappingURL=ArrowIcon-b7e50f4d.js.map
