'use strict';

var icons = require('@transferwise/icons');
var clsx = require('clsx');
var React = require('react');
var react = require('@headlessui/react');
var SelectInput_contexts = require('../SelectInput.contexts.js');
var jsxRuntime = require('react/jsx-runtime');

function SelectInputOption({
  value,
  disabled,
  children
}) {
  const itemsCount = React.useContext(SelectInput_contexts.SelectInputItemsCountContext);
  const itemPosition = React.useContext(SelectInput_contexts.SelectInputItemPositionContext);
  return /*#__PURE__*/jsxRuntime.jsx(react.ListboxOption, {
    as: "div",
    value: value,
    "aria-setsize": itemsCount,
    "aria-posinset": itemPosition,
    disabled: disabled,
    className: ({
      active,
      disabled: uiDisabled
    }) => clsx.clsx('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
    children: ({
      selected
    }) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
        className: "np-select-input-option",
        children: children
      }), /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
        size: 16,
        className: clsx.clsx('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
      })]
    })
  });
}

exports.SelectInputOption = SelectInputOption;
//# sourceMappingURL=SelectInputOption.js.map
