import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import { forwardRef } from 'react';
import _pt from 'prop-types';
import { baseInputCss } from '../../styles/index.esm.js';

var StyledSelect = forwardRef(function SelectFieldControl(_ref, ref) {
  var options = _ref.options,
      rest = _objectWithoutProperties(_ref, ["options"]);

  var baseCss = function baseCss(theme) {
    return [baseInputCss(theme), {
      padding: "0 ".concat(theme.space[3]),
      backgroundImage: "url(\"data:image/svg+xml,%3Csvg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 24 24' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'%3E%3C/path%3E%3C/svg%3E\")",
      backgroundRepeat: "no-repeat",
      backgroundPosition: "right ".concat(theme.space[3], " top 50%, 0 0")
    }];
  };

  return jsx("select", _extends({
    ref: ref,
    css: baseCss
  }, rest), options.map(renderOption));
});
StyledSelect.propTypes = {
  options: _pt.arrayOf(_pt.shape({
    value: _pt.string.isRequired,
    label: _pt.string.isRequired
  })).isRequired
};

function renderOption(_ref2) {
  var label = _ref2.label,
      value = _ref2.value;
  return jsx("option", {
    key: value,
    value: value
  }, label);
}

StyledSelect.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StyledSelect"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/form/components/styled-primitives/StyledSelect.tsx"] = {
    name: "StyledSelect",
    docgenInfo: StyledSelect.__docgenInfo,
    path: "src/components/form/components/styled-primitives/StyledSelect.tsx"
  };
}

export { StyledSelect };
//# sourceMappingURL=StyledSelect.esm.js.map
