'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var styled = require('styled-components');
var index = require('../../../../utils/index.js');
var Chip = require('../../../Chip/Chip.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const TagList = styled__default['default'].span `
  display: flex;
  align-items: flex-start;

  > * {
    margin: ${index.getSpacing('s00', 's01')};
  }
`;
function MultiValueList({ values, onRemove, placeholder }) {
    return (React__default['default'].createElement(TagList, null, values.length === 0
        ? placeholder
        : values.map((value) => (React__default['default'].createElement(Chip.Chip, { onClick: index.noop, onRemove: onRemove, label: value.label, value: String(value.value), key: String(value.value), "data-testid": `${String(value.value)}-chip`, selected: true, showClose: true })))));
}

exports.MultiValueList = MultiValueList;
