import { Search } from '@transferwise/icons';
import { clsx } from 'clsx';
import { forwardRef } from 'react';
import { Input } from '../../inputs/Input.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';

const SearchBox = /*#__PURE__*/forwardRef(({
  id,
  classNames = {},
  focusedOptionId,
  onChange,
  onClick,
  placeholder = undefined,
  value = ''
}, reference) => {
  const style = className => classNames[className] || className;
  return /*#__PURE__*/jsx("li", {
    className: style('border-bottom'),
    children: /*#__PURE__*/jsx("a", {
      className: `${style('np-select-filter-link')} ${style('p-a-0')}`,
      children: /*#__PURE__*/jsxs("div", {
        className: style('input-group'),
        children: [/*#__PURE__*/jsx("span", {
          className: clsx('input-group-addon', 'input-group-addon--search'),
          children: /*#__PURE__*/jsx(Search, {
            className: clsx(style('tw-icon'), style('tw-icon-search')),
            size: 24
          })
        }), /*#__PURE__*/jsx(Input, {
          ref: reference,
          id: id,
          role: "searchbox",
          inputMode: "search",
          className: clsx(style('np-select-filter')),
          placeholder: placeholder,
          value: value,
          spellCheck: "false",
          "aria-activedescendant": focusedOptionId,
          onChange: onChange,
          onClick: onClick
        })]
      })
    })
  });
});

export { SearchBox as default };
//# sourceMappingURL=SearchBox.mjs.map
