You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index-52626178.esm.js 58 KiB

3 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281
  1. import { Component } from 'react';
  2. import { jsx, keyframes, ClassNames } from '@emotion/core';
  3. import { createPortal } from 'react-dom';
  4. import PropTypes from 'prop-types';
  5. import { g as getBoundingClientObj, a as getScrollParent, b as getScrollTop, c as animatedScrollTo, s as scrollTo } from './utils-711604ed.esm.js';
  6. import _css from '@emotion/css';
  7. import AutosizeInput from 'react-input-autosize';
  8. function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  9. function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
  10. function getMenuPlacement(_ref) {
  11. var maxHeight = _ref.maxHeight,
  12. menuEl = _ref.menuEl,
  13. minHeight = _ref.minHeight,
  14. placement = _ref.placement,
  15. shouldScroll = _ref.shouldScroll,
  16. isFixedPosition = _ref.isFixedPosition,
  17. theme = _ref.theme;
  18. var spacing = theme.spacing;
  19. var scrollParent = getScrollParent(menuEl);
  20. var defaultState = {
  21. placement: 'bottom',
  22. maxHeight: maxHeight
  23. }; // something went wrong, return default state
  24. if (!menuEl || !menuEl.offsetParent) return defaultState; // we can't trust `scrollParent.scrollHeight` --> it may increase when
  25. // the menu is rendered
  26. var _scrollParent$getBoun = scrollParent.getBoundingClientRect(),
  27. scrollHeight = _scrollParent$getBoun.height;
  28. var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(),
  29. menuBottom = _menuEl$getBoundingCl.bottom,
  30. menuHeight = _menuEl$getBoundingCl.height,
  31. menuTop = _menuEl$getBoundingCl.top;
  32. var _menuEl$offsetParent$ = menuEl.offsetParent.getBoundingClientRect(),
  33. containerTop = _menuEl$offsetParent$.top;
  34. var viewHeight = window.innerHeight;
  35. var scrollTop = getScrollTop(scrollParent);
  36. var marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
  37. var marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
  38. var viewSpaceAbove = containerTop - marginTop;
  39. var viewSpaceBelow = viewHeight - menuTop;
  40. var scrollSpaceAbove = viewSpaceAbove + scrollTop;
  41. var scrollSpaceBelow = scrollHeight - scrollTop - menuTop;
  42. var scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
  43. var scrollUp = scrollTop + menuTop - marginTop;
  44. var scrollDuration = 160;
  45. switch (placement) {
  46. case 'auto':
  47. case 'bottom':
  48. // 1: the menu will fit, do nothing
  49. if (viewSpaceBelow >= menuHeight) {
  50. return {
  51. placement: 'bottom',
  52. maxHeight: maxHeight
  53. };
  54. } // 2: the menu will fit, if scrolled
  55. if (scrollSpaceBelow >= menuHeight && !isFixedPosition) {
  56. if (shouldScroll) {
  57. animatedScrollTo(scrollParent, scrollDown, scrollDuration);
  58. }
  59. return {
  60. placement: 'bottom',
  61. maxHeight: maxHeight
  62. };
  63. } // 3: the menu will fit, if constrained
  64. if (!isFixedPosition && scrollSpaceBelow >= minHeight || isFixedPosition && viewSpaceBelow >= minHeight) {
  65. if (shouldScroll) {
  66. animatedScrollTo(scrollParent, scrollDown, scrollDuration);
  67. } // we want to provide as much of the menu as possible to the user,
  68. // so give them whatever is available below rather than the minHeight.
  69. var constrainedHeight = isFixedPosition ? viewSpaceBelow - marginBottom : scrollSpaceBelow - marginBottom;
  70. return {
  71. placement: 'bottom',
  72. maxHeight: constrainedHeight
  73. };
  74. } // 4. Forked beviour when there isn't enough space below
  75. // AUTO: flip the menu, render above
  76. if (placement === 'auto' || isFixedPosition) {
  77. // may need to be constrained after flipping
  78. var _constrainedHeight = maxHeight;
  79. var spaceAbove = isFixedPosition ? viewSpaceAbove : scrollSpaceAbove;
  80. if (spaceAbove >= minHeight) {
  81. _constrainedHeight = Math.min(spaceAbove - marginBottom - spacing.controlHeight, maxHeight);
  82. }
  83. return {
  84. placement: 'top',
  85. maxHeight: _constrainedHeight
  86. };
  87. } // BOTTOM: allow browser to increase scrollable area and immediately set scroll
  88. if (placement === 'bottom') {
  89. scrollTo(scrollParent, scrollDown);
  90. return {
  91. placement: 'bottom',
  92. maxHeight: maxHeight
  93. };
  94. }
  95. break;
  96. case 'top':
  97. // 1: the menu will fit, do nothing
  98. if (viewSpaceAbove >= menuHeight) {
  99. return {
  100. placement: 'top',
  101. maxHeight: maxHeight
  102. };
  103. } // 2: the menu will fit, if scrolled
  104. if (scrollSpaceAbove >= menuHeight && !isFixedPosition) {
  105. if (shouldScroll) {
  106. animatedScrollTo(scrollParent, scrollUp, scrollDuration);
  107. }
  108. return {
  109. placement: 'top',
  110. maxHeight: maxHeight
  111. };
  112. } // 3: the menu will fit, if constrained
  113. if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {
  114. var _constrainedHeight2 = maxHeight; // we want to provide as much of the menu as possible to the user,
  115. // so give them whatever is available below rather than the minHeight.
  116. if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {
  117. _constrainedHeight2 = isFixedPosition ? viewSpaceAbove - marginTop : scrollSpaceAbove - marginTop;
  118. }
  119. if (shouldScroll) {
  120. animatedScrollTo(scrollParent, scrollUp, scrollDuration);
  121. }
  122. return {
  123. placement: 'top',
  124. maxHeight: _constrainedHeight2
  125. };
  126. } // 4. not enough space, the browser WILL NOT increase scrollable area when
  127. // absolutely positioned element rendered above the viewport (only below).
  128. // Flip the menu, render below
  129. return {
  130. placement: 'bottom',
  131. maxHeight: maxHeight
  132. };
  133. default:
  134. throw new Error("Invalid placement provided \"" + placement + "\".");
  135. } // fulfil contract with flow: implicit return value of undefined
  136. return defaultState;
  137. } // Menu Component
  138. // ------------------------------
  139. function alignToControl(placement) {
  140. var placementToCSSProp = {
  141. bottom: 'top',
  142. top: 'bottom'
  143. };
  144. return placement ? placementToCSSProp[placement] : 'bottom';
  145. }
  146. var coercePlacement = function coercePlacement(p) {
  147. return p === 'auto' ? 'bottom' : p;
  148. };
  149. var menuCSS = function menuCSS(_ref2) {
  150. var _ref3;
  151. var placement = _ref2.placement,
  152. _ref2$theme = _ref2.theme,
  153. borderRadius = _ref2$theme.borderRadius,
  154. spacing = _ref2$theme.spacing,
  155. colors = _ref2$theme.colors;
  156. return _ref3 = {
  157. label: 'menu'
  158. }, _ref3[alignToControl(placement)] = '100%', _ref3.backgroundColor = colors.neutral0, _ref3.borderRadius = borderRadius, _ref3.boxShadow = '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)', _ref3.marginBottom = spacing.menuGutter, _ref3.marginTop = spacing.menuGutter, _ref3.position = 'absolute', _ref3.width = '100%', _ref3.zIndex = 1, _ref3;
  159. }; // NOTE: internal only
  160. var MenuPlacer =
  161. /*#__PURE__*/
  162. function (_Component) {
  163. _inheritsLoose(MenuPlacer, _Component);
  164. function MenuPlacer() {
  165. var _this;
  166. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  167. args[_key] = arguments[_key];
  168. }
  169. _this = _Component.call.apply(_Component, [this].concat(args)) || this;
  170. _this.state = {
  171. maxHeight: _this.props.maxMenuHeight,
  172. placement: null
  173. };
  174. _this.getPlacement = function (ref) {
  175. var _this$props = _this.props,
  176. minMenuHeight = _this$props.minMenuHeight,
  177. maxMenuHeight = _this$props.maxMenuHeight,
  178. menuPlacement = _this$props.menuPlacement,
  179. menuPosition = _this$props.menuPosition,
  180. menuShouldScrollIntoView = _this$props.menuShouldScrollIntoView,
  181. theme = _this$props.theme;
  182. var getPortalPlacement = _this.context.getPortalPlacement;
  183. if (!ref) return; // DO NOT scroll if position is fixed
  184. var isFixedPosition = menuPosition === 'fixed';
  185. var shouldScroll = menuShouldScrollIntoView && !isFixedPosition;
  186. var state = getMenuPlacement({
  187. maxHeight: maxMenuHeight,
  188. menuEl: ref,
  189. minHeight: minMenuHeight,
  190. placement: menuPlacement,
  191. shouldScroll: shouldScroll,
  192. isFixedPosition: isFixedPosition,
  193. theme: theme
  194. });
  195. if (getPortalPlacement) getPortalPlacement(state);
  196. _this.setState(state);
  197. };
  198. _this.getUpdatedProps = function () {
  199. var menuPlacement = _this.props.menuPlacement;
  200. var placement = _this.state.placement || coercePlacement(menuPlacement);
  201. return _extends({}, _this.props, {
  202. placement: placement,
  203. maxHeight: _this.state.maxHeight
  204. });
  205. };
  206. return _this;
  207. }
  208. var _proto = MenuPlacer.prototype;
  209. _proto.render = function render() {
  210. var children = this.props.children;
  211. return children({
  212. ref: this.getPlacement,
  213. placerProps: this.getUpdatedProps()
  214. });
  215. };
  216. return MenuPlacer;
  217. }(Component);
  218. MenuPlacer.contextTypes = {
  219. getPortalPlacement: PropTypes.func
  220. };
  221. var Menu = function Menu(props) {
  222. var children = props.children,
  223. className = props.className,
  224. cx = props.cx,
  225. getStyles = props.getStyles,
  226. innerRef = props.innerRef,
  227. innerProps = props.innerProps;
  228. return jsx("div", _extends({
  229. css: getStyles('menu', props),
  230. className: cx({
  231. menu: true
  232. }, className)
  233. }, innerProps, {
  234. ref: innerRef
  235. }), children);
  236. };
  237. // Menu List
  238. // ==============================
  239. var menuListCSS = function menuListCSS(_ref4) {
  240. var maxHeight = _ref4.maxHeight,
  241. baseUnit = _ref4.theme.spacing.baseUnit;
  242. return {
  243. maxHeight: maxHeight,
  244. overflowY: 'auto',
  245. paddingBottom: baseUnit,
  246. paddingTop: baseUnit,
  247. position: 'relative',
  248. // required for offset[Height, Top] > keyboard scroll
  249. WebkitOverflowScrolling: 'touch'
  250. };
  251. };
  252. var MenuList = function MenuList(props) {
  253. var children = props.children,
  254. className = props.className,
  255. cx = props.cx,
  256. getStyles = props.getStyles,
  257. isMulti = props.isMulti,
  258. innerRef = props.innerRef;
  259. return jsx("div", {
  260. css: getStyles('menuList', props),
  261. className: cx({
  262. 'menu-list': true,
  263. 'menu-list--is-multi': isMulti
  264. }, className),
  265. ref: innerRef
  266. }, children);
  267. }; // ==============================
  268. // Menu Notices
  269. // ==============================
  270. var noticeCSS = function noticeCSS(_ref5) {
  271. var _ref5$theme = _ref5.theme,
  272. baseUnit = _ref5$theme.spacing.baseUnit,
  273. colors = _ref5$theme.colors;
  274. return {
  275. color: colors.neutral40,
  276. padding: baseUnit * 2 + "px " + baseUnit * 3 + "px",
  277. textAlign: 'center'
  278. };
  279. };
  280. var noOptionsMessageCSS = noticeCSS;
  281. var loadingMessageCSS = noticeCSS;
  282. var NoOptionsMessage = function NoOptionsMessage(props) {
  283. var children = props.children,
  284. className = props.className,
  285. cx = props.cx,
  286. getStyles = props.getStyles,
  287. innerProps = props.innerProps;
  288. return jsx("div", _extends({
  289. css: getStyles('noOptionsMessage', props),
  290. className: cx({
  291. 'menu-notice': true,
  292. 'menu-notice--no-options': true
  293. }, className)
  294. }, innerProps), children);
  295. };
  296. NoOptionsMessage.defaultProps = {
  297. children: 'No options'
  298. };
  299. var LoadingMessage = function LoadingMessage(props) {
  300. var children = props.children,
  301. className = props.className,
  302. cx = props.cx,
  303. getStyles = props.getStyles,
  304. innerProps = props.innerProps;
  305. return jsx("div", _extends({
  306. css: getStyles('loadingMessage', props),
  307. className: cx({
  308. 'menu-notice': true,
  309. 'menu-notice--loading': true
  310. }, className)
  311. }, innerProps), children);
  312. };
  313. LoadingMessage.defaultProps = {
  314. children: 'Loading...'
  315. }; // ==============================
  316. // Menu Portal
  317. // ==============================
  318. var menuPortalCSS = function menuPortalCSS(_ref6) {
  319. var rect = _ref6.rect,
  320. offset = _ref6.offset,
  321. position = _ref6.position;
  322. return {
  323. left: rect.left,
  324. position: position,
  325. top: offset,
  326. width: rect.width,
  327. zIndex: 1
  328. };
  329. };
  330. var MenuPortal =
  331. /*#__PURE__*/
  332. function (_Component2) {
  333. _inheritsLoose(MenuPortal, _Component2);
  334. function MenuPortal() {
  335. var _this2;
  336. for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
  337. args[_key2] = arguments[_key2];
  338. }
  339. _this2 = _Component2.call.apply(_Component2, [this].concat(args)) || this;
  340. _this2.state = {
  341. placement: null
  342. };
  343. _this2.getPortalPlacement = function (_ref7) {
  344. var placement = _ref7.placement;
  345. var initialPlacement = coercePlacement(_this2.props.menuPlacement); // avoid re-renders if the placement has not changed
  346. if (placement !== initialPlacement) {
  347. _this2.setState({
  348. placement: placement
  349. });
  350. }
  351. };
  352. return _this2;
  353. }
  354. var _proto2 = MenuPortal.prototype;
  355. _proto2.getChildContext = function getChildContext() {
  356. return {
  357. getPortalPlacement: this.getPortalPlacement
  358. };
  359. } // callback for occassions where the menu must "flip"
  360. ;
  361. _proto2.render = function render() {
  362. var _this$props2 = this.props,
  363. appendTo = _this$props2.appendTo,
  364. children = _this$props2.children,
  365. controlElement = _this$props2.controlElement,
  366. menuPlacement = _this$props2.menuPlacement,
  367. position = _this$props2.menuPosition,
  368. getStyles = _this$props2.getStyles;
  369. var isFixed = position === 'fixed'; // bail early if required elements aren't present
  370. if (!appendTo && !isFixed || !controlElement) {
  371. return null;
  372. }
  373. var placement = this.state.placement || coercePlacement(menuPlacement);
  374. var rect = getBoundingClientObj(controlElement);
  375. var scrollDistance = isFixed ? 0 : window.pageYOffset;
  376. var offset = rect[placement] + scrollDistance;
  377. var state = {
  378. offset: offset,
  379. position: position,
  380. rect: rect
  381. }; // same wrapper element whether fixed or portalled
  382. var menuWrapper = jsx("div", {
  383. css: getStyles('menuPortal', state)
  384. }, children);
  385. return appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper;
  386. };
  387. return MenuPortal;
  388. }(Component);
  389. MenuPortal.childContextTypes = {
  390. getPortalPlacement: PropTypes.func
  391. };
  392. var isArray = Array.isArray;
  393. var keyList = Object.keys;
  394. var hasProp = Object.prototype.hasOwnProperty;
  395. function equal(a, b) {
  396. // fast-deep-equal index.js 2.0.1
  397. if (a === b) return true;
  398. if (a && b && typeof a == 'object' && typeof b == 'object') {
  399. var arrA = isArray(a),
  400. arrB = isArray(b),
  401. i,
  402. length,
  403. key;
  404. if (arrA && arrB) {
  405. length = a.length;
  406. if (length != b.length) return false;
  407. for (i = length; i-- !== 0;) {
  408. if (!equal(a[i], b[i])) return false;
  409. }
  410. return true;
  411. }
  412. if (arrA != arrB) return false;
  413. var dateA = a instanceof Date,
  414. dateB = b instanceof Date;
  415. if (dateA != dateB) return false;
  416. if (dateA && dateB) return a.getTime() == b.getTime();
  417. var regexpA = a instanceof RegExp,
  418. regexpB = b instanceof RegExp;
  419. if (regexpA != regexpB) return false;
  420. if (regexpA && regexpB) return a.toString() == b.toString();
  421. var keys = keyList(a);
  422. length = keys.length;
  423. if (length !== keyList(b).length) {
  424. return false;
  425. }
  426. for (i = length; i-- !== 0;) {
  427. if (!hasProp.call(b, keys[i])) return false;
  428. } // end fast-deep-equal
  429. // Custom handling for React
  430. for (i = length; i-- !== 0;) {
  431. key = keys[i];
  432. if (key === '_owner' && a.$$typeof) {
  433. // React-specific: avoid traversing React elements' _owner.
  434. // _owner contains circular references
  435. // and is not needed when comparing the actual elements (and not their owners)
  436. // .$$typeof and ._store on just reasonable markers of a react element
  437. continue;
  438. } else {
  439. // all other properties should be traversed as usual
  440. if (!equal(a[key], b[key])) return false;
  441. }
  442. } // fast-deep-equal index.js 2.0.1
  443. return true;
  444. }
  445. return a !== a && b !== b;
  446. } // end fast-deep-equal
  447. function exportedEqual(a, b) {
  448. try {
  449. return equal(a, b);
  450. } catch (error) {
  451. if (error.message && error.message.match(/stack|recursion/i)) {
  452. // warn on circular references, don't crash
  453. // browsers give this different errors name and messages:
  454. // chrome/safari: "RangeError", "Maximum call stack size exceeded"
  455. // firefox: "InternalError", too much recursion"
  456. // edge: "Error", "Out of stack space"
  457. console.warn('Warning: react-fast-compare does not handle circular references.', error.name, error.message);
  458. return false;
  459. } // some other error. we should definitely know about these
  460. throw error;
  461. }
  462. }
  463. function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
  464. var containerCSS = function containerCSS(_ref) {
  465. var isDisabled = _ref.isDisabled,
  466. isRtl = _ref.isRtl;
  467. return {
  468. label: 'container',
  469. direction: isRtl ? 'rtl' : null,
  470. pointerEvents: isDisabled ? 'none' : null,
  471. // cancel mouse events when disabled
  472. position: 'relative'
  473. };
  474. };
  475. var SelectContainer = function SelectContainer(props) {
  476. var children = props.children,
  477. className = props.className,
  478. cx = props.cx,
  479. getStyles = props.getStyles,
  480. innerProps = props.innerProps,
  481. isDisabled = props.isDisabled,
  482. isRtl = props.isRtl;
  483. return jsx("div", _extends$1({
  484. css: getStyles('container', props),
  485. className: cx({
  486. '--is-disabled': isDisabled,
  487. '--is-rtl': isRtl
  488. }, className)
  489. }, innerProps), children);
  490. }; // ==============================
  491. // Value Container
  492. // ==============================
  493. var valueContainerCSS = function valueContainerCSS(_ref2) {
  494. var spacing = _ref2.theme.spacing;
  495. return {
  496. alignItems: 'center',
  497. display: 'flex',
  498. flex: 1,
  499. flexWrap: 'wrap',
  500. padding: spacing.baseUnit / 2 + "px " + spacing.baseUnit * 2 + "px",
  501. WebkitOverflowScrolling: 'touch',
  502. position: 'relative',
  503. overflow: 'hidden'
  504. };
  505. };
  506. var ValueContainer = function ValueContainer(props) {
  507. var children = props.children,
  508. className = props.className,
  509. cx = props.cx,
  510. isMulti = props.isMulti,
  511. getStyles = props.getStyles,
  512. hasValue = props.hasValue;
  513. return jsx("div", {
  514. css: getStyles('valueContainer', props),
  515. className: cx({
  516. 'value-container': true,
  517. 'value-container--is-multi': isMulti,
  518. 'value-container--has-value': hasValue
  519. }, className)
  520. }, children);
  521. }; // ==============================
  522. // Indicator Container
  523. // ==============================
  524. var indicatorsContainerCSS = function indicatorsContainerCSS() {
  525. return {
  526. alignItems: 'center',
  527. alignSelf: 'stretch',
  528. display: 'flex',
  529. flexShrink: 0
  530. };
  531. };
  532. var IndicatorsContainer = function IndicatorsContainer(props) {
  533. var children = props.children,
  534. className = props.className,
  535. cx = props.cx,
  536. getStyles = props.getStyles;
  537. return jsx("div", {
  538. css: getStyles('indicatorsContainer', props),
  539. className: cx({
  540. indicators: true
  541. }, className)
  542. }, children);
  543. };
  544. function _templateObject() {
  545. var data = _taggedTemplateLiteralLoose(["\n 0%, 80%, 100% { opacity: 0; }\n 40% { opacity: 1; }\n"]);
  546. _templateObject = function _templateObject() {
  547. return data;
  548. };
  549. return data;
  550. }
  551. function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
  552. function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
  553. function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
  554. var _ref2 = process.env.NODE_ENV === "production" ? {
  555. name: "19bqh2r",
  556. styles: "display:inline-block;fill:currentColor;line-height:1;stroke:currentColor;stroke-width:0;"
  557. } : {
  558. name: "19bqh2r",
  559. styles: "display:inline-block;fill:currentColor;line-height:1;stroke:currentColor;stroke-width:0;",
  560. map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGljYXRvcnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JJIiwiZmlsZSI6ImluZGljYXRvcnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBAZmxvd1xuLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyB0eXBlIE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBqc3gsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnO1xuXG5pbXBvcnQgdHlwZSB7IENvbW1vblByb3BzLCBUaGVtZSB9IGZyb20gJy4uL3R5cGVzJztcblxuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG4vLyBEcm9wZG93biAmIENsZWFyIEljb25zXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cblxuY29uc3QgU3ZnID0gKHsgc2l6ZSwgLi4ucHJvcHMgfTogeyBzaXplOiBudW1iZXIgfSkgPT4gKFxuICA8c3ZnXG4gICAgaGVpZ2h0PXtzaXplfVxuICAgIHdpZHRoPXtzaXplfVxuICAgIHZpZXdCb3g9XCIwIDAgMjAgMjBcIlxuICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiXG4gICAgZm9jdXNhYmxlPVwiZmFsc2VcIlxuICAgIGNzcz17e1xuICAgICAgZGlzcGxheTogJ2lubGluZS1ibG9jaycsXG4gICAgICBmaWxsOiAnY3VycmVudENvbG9yJyxcbiAgICAgIGxpbmVIZWlnaHQ6IDEsXG4gICAgICBzdHJva2U6ICdjdXJyZW50Q29sb3InLFxuICAgICAgc3Ryb2tlV2lkdGg6IDAsXG4gICAgfX1cbiAgICB7Li4ucHJvcHN9XG4gIC8+XG4pO1xuXG5leHBvcnQgY29uc3QgQ3Jvc3NJY29uID0gKHByb3BzOiBhbnkpID0+IChcbiAgPFN2ZyBzaXplPXsyMH0gey4uLnByb3BzfT5cbiAgICA8cGF0aCBkPVwiTTE0LjM0OCAxNC44NDljLTAuNDY5IDAuNDY5LTEuMjI5IDAuNDY5LTEuNjk3IDBsLTIuNjUxLTMuMDMwLTIuNjUxIDMuMDI5Yy0wLjQ2OSAwLjQ2OS0xLjIyOSAwLjQ2OS0xLjY5NyAwLTAuNDY5LTAuNDY5LTAuNDY5LTEuMjI5IDAtMS42OTdsMi43NTgtMy4xNS0yLjc1OS0zLjE1MmMtMC40NjktMC40NjktMC40NjktMS4yMjggMC0xLjY5N3MxLjIyOC0wLjQ2OSAxLjY5NyAwbDIuNjUyIDMuMDMxIDIuNjUxLTMuMDMxYzAuNDY5LTAuNDY5IDEuMjI4LTAuNDY5IDEuNjk3IDBzMC40NjkgMS4yMjkgMCAxLjY5N2wtMi43NTggMy4xNTIgMi43NTggMy4xNWMwLjQ2OSAwLjQ2OSAwLjQ2OSAxLjIyOSAwIDEuNjk4elwiIC8+XG4gIDwvU3ZnPlxuKTtcbmV4cG9ydCBjb25zdCBEb3duQ2hldnJvbiA9IChwcm9wczogYW55KSA9PiAoXG4gIDxTdmcgc2l6ZT17MjB9IHsuLi5wcm9wc30+XG4gICAgPHBhdGggZD1cIk00LjUxNiA3LjU0OGMwLjQzNi0wLjQ0NiAxLjA0My0wLjQ4MSAxLjU3NiAwbDMuOTA4IDMuNzQ3IDMuOTA4LTMuNzQ3YzAuNTMzLTAuNDgxIDEuMTQxLTAuNDQ2IDEuNTc0IDAgMC40MzYgMC40NDUgMC40MDggMS4xOTcgMCAxLjYxNS0wLjQwNiAwLjQxOC00LjY5NSA0LjUwMi00LjY5NSA0LjUwMi0wLjIxNyAwLjIyMy0wLjUwMiAwLjMzNS0wLjc4NyAwLjMzNXMtMC41Ny0wLjExMi0wLjc4OS0wLjMzNWMwIDAtNC4yODctNC4wODQtNC42OTUtNC41MDJzLTAuNDM2LTEuMTcgMC0xLjYxNXpcIiAvPlxuICA8L1N2Zz5cbik7XG5cbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuLy8gRHJvcGRvd24gJiBDbGVhciBCdXR0b25zXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cblxuZXhwb3J0IHR5cGUgSW5kaWNhdG9yUHJvcHMgPSBDb21tb25Qcm9wcyAmIHtcbiAgLyoqIFRoZSBjaGlsZHJlbiB0byBiZSByZW5kZXJlZCBpbnNpZGUgdGhlIGluZGljYXRvci4gKi9cbiAgY2hpbGRyZW46IE5vZGUsXG4gIC8qKiBQcm9wcyB0aGF0IHdpbGwgYmUgcGFzc2VkIG9uIHRvIHRoZSBjaGlsZHJlbi4gKi9cbiAgaW5uZXJQcm9wczogYW55LFxuICAvKiogVGhlIGZvY3VzZWQgc3RhdGUgb2YgdGhlIHNlbGVjdC4gKi9cbiAgaXNGb2N1c2VkOiBib29sZWFuLFxuICAvKiogV2hldGhlciB0aGUgdGV4dCBpcyByaWdodCB0byBsZWZ0ICovXG4gIGlzUnRsOiBib29sZWFuLFxufTtcblxuY29uc3QgYmFzZUNTUyA9ICh7XG4gIGlzRm9jdXNlZCxcbiAgdGhlbWU6IHtcbiAgICBzcGFjaW5nOiB7IGJhc2VVbml0IH0sXG4gICAgY29sb3JzLFxuICB9LFxufTogSW5kaWNhdG9yUHJvcHMpID0+ICh7XG4gIGxhYmVsOiAnaW5kaWNhdG9yQ29udGFpbmVyJyxcbiAgY29sb3I6IGlzRm9jdXNlZCA/IGNvbG9ycy5uZXV0cmFsNjAgOiBjb2xvcnMubmV1dHJhbDIwLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIHBhZGRpbmc6IGJhc2VVbml0ICogMixcbiAgdHJhbnNpdGlvbjogJ2NvbG9yIDE1MG1zJyxcblxuICAnOmhvdmVyJzoge1xuICAgIGNvbG9yOiBpc0ZvY3VzZWQgPyBjb2xvcnMubmV1dHJhbDgwIDogY29sb3JzLm5ldXRyYWw0MCxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgZHJvcGRvd25JbmRpY2F0b3JDU1MgPSBiYXNlQ1NTO1xuZXhwb3J0IGNvbnN0IERyb3Bkb3duSW5kaWNhdG9yID0gKHByb3BzOiBJbmRpY2F0b3JQcm9wcykgPT4ge1xuICBjb25zdCB7IGNoaWxkcmVuLCBjbGFzc05hbWUsIGN4LCBnZXRTdHlsZXMsIGlubmVyUHJvcHMgfSA9IHByb3BzO1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIHsuLi5pbm5lclByb3BzfVxuICAgICAgY3NzPXtnZXRTdHlsZXMoJ2Ryb3Bkb3duSW5kaWNhdG9yJywgcHJvcHMpfVxuICAgICAgY2xhc3NOYW1lPXtjeChcbiAgICAgICAge1xuICAgICAgICAgIGluZGljYXRvcjogdHJ1ZSxcbiAgICAgICAgICAnZHJvcGRvd24taW5kaWNhdG9yJzogdHJ1ZSxcbiAgICAgICAgfSxcbiAgICAgICAgY2xhc3NOYW1lXG4gICAgICApfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbiB8fCA8RG93bkNoZXZyb24gLz59XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5leHBvcnQgY29uc3QgY2xlYXJJbmRpY2F0b3JDU1MgPSBiYXNlQ1NTO1xuZXhwb3J0IGNvbnN0IENsZWFySW5kaWNhdG9yID0gKHByb3BzOiBJbmRpY2F0b3JQcm9wcykgPT4ge1xuICBjb25zdCB7IGNoaWxkcmVuLCBjbGFzc05hbWUsIGN4LCBnZXRTdHlsZXMsIGlubmVyUHJvcHMgfSA9IHByb3BzO1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIHsuLi5pbm5lclByb3BzfVxuICAgICAgY3NzPXtnZXRTdHlsZXMoJ2NsZWFySW5kaWNhdG9yJywgcHJvcHMpfVxuICAgICAgY2xhc3NOYW1lPXtjeChcbiAgICAgICAge1xuICAgICAgICAgIGluZGljYXRvcjogdHJ1ZSxcbiAgICAgICAgICAnY2xlYXItaW5kaWNhdG9yJzogdHJ1ZSxcbiAgICAgICAgfSxcbiAgICAgICAgY2xhc3NOYW1lXG4gICAgICApfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbiB8fCA8Q3Jvc3NJY29uIC8+fVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG4vLyBTZXBhcmF0b3Jcbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuXG50eXBlIFNlcGFyYXRvclN0YXRlID0geyBpc0Rpc2FibGVkOiBib29sZWFuIH07XG5cbmV4cG9ydCBjb25zdCBpbmRpY2F0b3JTZXBhcmF0b3JDU1MgPSAoe1xuICBpc0Rpc2FibGVkLFxuICB0aGVtZToge1xuICAgIHNwYWNpbmc6IHsgYmFzZVVuaXQgfSxcbiAgICBjb2xvcnMsXG4gIH0sXG59OiBDb21tb25Qcm9wcyAmIFNlcGFyYXRvclN0YXRlKSA9PiAoe1xuICBsYWJlbDogJ2luZGljYXRvclNlcGFyYXRvcicsXG4gIGFsaWduU2VsZjogJ3N0cmV0Y2gnLFxuICBiYWNrZ3JvdW5kQ29sb3I6IGlzRGlzYWJsZWQgPyBjb2xvcnMubmV1dHJhbDEwIDogY29sb3JzLm5ldXRyYWwyMCxcbiAgbWFyZ2luQm90dG9tOiBiYXNlVW5pdCAqIDIsXG4gIG1hcmdpblRvcDogYmFzZVVuaXQgKiAyLFxuICB3aWR0aDogMSxcbn0pO1xuXG5leHBvcnQgY29uc3QgSW5kaWNhdG9yU2VwYXJhdG9yID0gKHByb3BzOiBJbmRpY2F0b3JQcm9wcykgPT4ge1xuICBjb25zdCB7IGNsYXNzTmFtZSwgY3gsIGdldFN0eWxlcywgaW5uZXJQcm9wcyB9ID0gcHJvcHM7XG4gIHJldHVybiAoXG4gICAgPHNwYW5cbiAgICAgIHsuLi5pbm5lclByb3BzfVxuICAgICAgY3NzPXtnZXRTdHlsZXMoJ2luZGljYXRvclNlcGFyYXRvcicsIHByb3BzKX1cbiAgICAgIGNsYXNzTmFtZT17Y3goeyAnaW5kaWNhdG9yLXNlcGFyYXRvcic6IHRydWUgfSwgY2xhc3NOYW1lKX1cbiAgICAvPlxuICApO1xufTtcblxuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG4vLyBMb2FkaW5nXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cblxuY29uc3QgbG9hZGluZ0RvdEFuaW1hdGlvbnMgPSBrZXlmcmFtZXNgXG4gIDAlLCA4MCUsIDEwMCUgeyBvcGFjaXR5OiAwOyB9XG4gIDQwJSB7IG9wYWNpdHk6IDE7IH1cbmA7XG5cbmV4cG9ydCBjb25zdCBsb2FkaW5nSW5kaWNhdG9yQ1NTID0gKHtcbiAgaXNGb2N1c2VkLFxuICBzaXplLFxuICB0aGVtZToge1xuICAgIGNvbG9ycyxcbiAgICBzcGFjaW5nOiB7IGJhc2VVbml0IH0sXG4gIH0sXG59OiB7XG4gIGlzRm9jdXNlZDogYm9vbGVhbixcbiAgc2l6ZTogbnVtYmVyLFxuICB0aGVtZTogVGhlbWUsXG59KSA9PiAoe1xuICBsYWJlbDogJ2xvYWRpbmdJbmRpY2F0b3InLFxuICBjb2xvcjogaXNGb2N1c2VkID8gY29sb3JzLm5ldXRyYWw2MCA6IGNvbG9ycy5uZXV0cmFsMjAsXG4gIGRpc3BsYXk6ICdmbGV4JyxcbiAgcGFkZGluZzogYmFzZVVuaXQgKiAyLFxuICB0cmFuc2l0aW9uOiAnY29sb3IgMTUwbXMnLFxuICBhbGlnblNlbGY6ICdjZW50ZXInLFxuICBmb250U2l6ZTogc2l6ZSxcbiAgbGluZUhlaWdodDogMSxcbiAgbWFyZ2luUmlnaHQ6IHNpemUsXG4gIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gIHZlcnRpY2FsQWxpZ246ICdtaWRkbGUnLFxufSk7XG5cbnR5cGUgRG90UHJvcHMgPSB7IGRlbGF5OiBudW1iZXIsIG9mZnNldDogYm9vbGVhbiB9O1xuY29uc3QgTG9hZGluZ0RvdCA9ICh7IGRlbGF5LCBvZmZzZXQgfTogRG90UHJvcHMpID0+IChcbiAgPHNwYW5cbiAgICBjc3M9e3tcbiAgICAgIGFuaW1hdGlvbjogYCR7bG9hZGluZ0RvdEFuaW1hdGlvbnN9IDFzIGVhc2UtaW4tb3V0ICR7ZGVsYXl9bXMgaW5maW5pdGU7YCxcbiAgICAgIGJhY2tncm91bmRDb2xvcjogJ2N1cnJlbnRDb2xvcicsXG4gICAgICBib3JkZXJSYWRpdXM6ICcxZW0nLFxuICAgICAgZGlzcGxheTogJ2lubGluZS1ibG9jaycsXG4gICAgICBtYXJnaW5MZWZ0OiBvZmZzZXQgPyAnMWVtJyA6IG51bGwsXG4gICAgICBoZWlnaHQ6ICcxZW0nLFxuICAgICAgdmVydGljYWxBbGlnbjogJ3RvcCcsXG4gICAgICB3aWR0aDogJzFlbScsXG4gICAgfX1cbiAgLz5cbik7XG5cbmV4cG9ydCB0eXBlIExvYWRpbmdJY29uUHJvcHMgPSB7XG4gIC8qKiBQcm9wcyB0aGF0IHdpbGwgYmUgcGFzc2VkIG9uIHRvIHRoZSBjaGlsZHJlbi4gKi9cbiAgaW5uZXJQcm9wczogYW55LFxuICAvKiogVGhlIGZvY3VzZWQgc3RhdGUgb2YgdGhlIHNlbGVjdC4gKi9cbiAgaXNGb2N1c2VkOiBib29sZWFuLFxuICAvKiogV2hldGhlciB0aGUgdGV4dCBpcyByaWdodCB0byBsZWZ0ICovXG4gIGlzUnRsOiBib29sZWFuLFxufSAmIENvbW1vblByb3BzICYge1xuICAgIC8qKiBTZXQgc2l6ZSBvZiB0aGUgY29udGFpbmVyLiAqL1xuICAgIHNpemU6IG51bWJlcixcbiAgfTtcbmV4cG9ydCBjb25zdCBMb2FkaW5nSW5kaWNhdG9yID0gKHByb3BzOiBMb2FkaW5nSWNvblByb3BzKSA9PiB7XG4gIGNvbnN0IHsgY2xhc3NOYW1lLCBjeCwgZ2V0U3R5bGVzLCBpbm5lclByb3BzLCBpc1J0bCB9ID0gcHJvcHM7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgIGNzcz17Z2V0U3R5bGVzKCdsb2FkaW5nSW5kaWNhdG9yJywgcHJvcHMpfVxuICAgICAgY2xhc3NOYW1lPXtjeChcbiAgICAgICAge1xuICAgICAgICAgIGluZGljYXRvcjogdHJ1ZSxcbiAgICAgICAgICAnbG9hZGluZy1pbmRpY2F0b3InOiB0cnVlLFxuICAgICAgICB9LFxuICAgICAgICBjbGFzc05hbWVcbiAgICAgICl9XG4gICAgPlxuICAgICAgPExvYWRpbmdEb3QgZGVsYXk9ezB9IG9mZnNldD17aXNSdGx9IC8+XG4gICAgICA8TG9hZGluZ0RvdCBkZWxheT17MTYwfSBvZmZzZXQgLz5cbiAgICAgIDxMb2FkaW5nRG90IGRlbGF5PXszMjB9IG9mZnNldD17IWlzUnRsfSAvPlxuICAgIDwvZGl2PlxuICApO1xufTtcbkxvYWRpbmdJbmRpY2F0b3IuZGVmYXVsdFByb3BzID0geyBzaXplOiA0IH07XG4iXX0= */"
  561. };
  562. // ==============================
  563. // Dropdown & Clear Icons
  564. // ==============================
  565. var Svg = function Svg(_ref) {
  566. var size = _ref.size,
  567. props = _objectWithoutPropertiesLoose(_ref, ["size"]);
  568. return jsx("svg", _extends$2({
  569. height: size,
  570. width: size,
  571. viewBox: "0 0 20 20",
  572. "aria-hidden": "true",
  573. focusable: "false",
  574. css: _ref2
  575. }, props));
  576. };
  577. var CrossIcon = function CrossIcon(props) {
  578. return jsx(Svg, _extends$2({
  579. size: 20
  580. }, props), jsx("path", {
  581. d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
  582. }));
  583. };
  584. var DownChevron = function DownChevron(props) {
  585. return jsx(Svg, _extends$2({
  586. size: 20
  587. }, props), jsx("path", {
  588. d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
  589. }));
  590. }; // ==============================
  591. // Dropdown & Clear Buttons
  592. // ==============================
  593. var baseCSS = function baseCSS(_ref3) {
  594. var isFocused = _ref3.isFocused,
  595. _ref3$theme = _ref3.theme,
  596. baseUnit = _ref3$theme.spacing.baseUnit,
  597. colors = _ref3$theme.colors;
  598. return {
  599. label: 'indicatorContainer',
  600. color: isFocused ? colors.neutral60 : colors.neutral20,
  601. display: 'flex',
  602. padding: baseUnit * 2,
  603. transition: 'color 150ms',
  604. ':hover': {
  605. color: isFocused ? colors.neutral80 : colors.neutral40
  606. }
  607. };
  608. };
  609. var dropdownIndicatorCSS = baseCSS;
  610. var DropdownIndicator = function DropdownIndicator(props) {
  611. var children = props.children,
  612. className = props.className,
  613. cx = props.cx,
  614. getStyles = props.getStyles,
  615. innerProps = props.innerProps;
  616. return jsx("div", _extends$2({}, innerProps, {
  617. css: getStyles('dropdownIndicator', props),
  618. className: cx({
  619. indicator: true,
  620. 'dropdown-indicator': true
  621. }, className)
  622. }), children || jsx(DownChevron, null));
  623. };
  624. var clearIndicatorCSS = baseCSS;
  625. var ClearIndicator = function ClearIndicator(props) {
  626. var children = props.children,
  627. className = props.className,
  628. cx = props.cx,
  629. getStyles = props.getStyles,
  630. innerProps = props.innerProps;
  631. return jsx("div", _extends$2({}, innerProps, {
  632. css: getStyles('clearIndicator', props),
  633. className: cx({
  634. indicator: true,
  635. 'clear-indicator': true
  636. }, className)
  637. }), children || jsx(CrossIcon, null));
  638. }; // ==============================
  639. // Separator
  640. // ==============================
  641. var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref4) {
  642. var isDisabled = _ref4.isDisabled,
  643. _ref4$theme = _ref4.theme,
  644. baseUnit = _ref4$theme.spacing.baseUnit,
  645. colors = _ref4$theme.colors;
  646. return {
  647. label: 'indicatorSeparator',
  648. alignSelf: 'stretch',
  649. backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
  650. marginBottom: baseUnit * 2,
  651. marginTop: baseUnit * 2,
  652. width: 1
  653. };
  654. };
  655. var IndicatorSeparator = function IndicatorSeparator(props) {
  656. var className = props.className,
  657. cx = props.cx,
  658. getStyles = props.getStyles,
  659. innerProps = props.innerProps;
  660. return jsx("span", _extends$2({}, innerProps, {
  661. css: getStyles('indicatorSeparator', props),
  662. className: cx({
  663. 'indicator-separator': true
  664. }, className)
  665. }));
  666. }; // ==============================
  667. // Loading
  668. // ==============================
  669. var loadingDotAnimations = keyframes(_templateObject());
  670. var loadingIndicatorCSS = function loadingIndicatorCSS(_ref5) {
  671. var isFocused = _ref5.isFocused,
  672. size = _ref5.size,
  673. _ref5$theme = _ref5.theme,
  674. colors = _ref5$theme.colors,
  675. baseUnit = _ref5$theme.spacing.baseUnit;
  676. return {
  677. label: 'loadingIndicator',
  678. color: isFocused ? colors.neutral60 : colors.neutral20,
  679. display: 'flex',
  680. padding: baseUnit * 2,
  681. transition: 'color 150ms',
  682. alignSelf: 'center',
  683. fontSize: size,
  684. lineHeight: 1,
  685. marginRight: size,
  686. textAlign: 'center',
  687. verticalAlign: 'middle'
  688. };
  689. };
  690. var LoadingDot = function LoadingDot(_ref6) {
  691. var delay = _ref6.delay,
  692. offset = _ref6.offset;
  693. return jsx("span", {
  694. css:
  695. /*#__PURE__*/
  696. _css({
  697. animation: loadingDotAnimations + " 1s ease-in-out " + delay + "ms infinite;",
  698. backgroundColor: 'currentColor',
  699. borderRadius: '1em',
  700. display: 'inline-block',
  701. marginLeft: offset ? '1em' : null,
  702. height: '1em',
  703. verticalAlign: 'top',
  704. width: '1em'
  705. }, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGljYXRvcnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0xJIiwiZmlsZSI6ImluZGljYXRvcnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBAZmxvd1xuLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyB0eXBlIE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBqc3gsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnO1xuXG5pbXBvcnQgdHlwZSB7IENvbW1vblByb3BzLCBUaGVtZSB9IGZyb20gJy4uL3R5cGVzJztcblxuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG4vLyBEcm9wZG93biAmIENsZWFyIEljb25zXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cblxuY29uc3QgU3ZnID0gKHsgc2l6ZSwgLi4ucHJvcHMgfTogeyBzaXplOiBudW1iZXIgfSkgPT4gKFxuICA8c3ZnXG4gICAgaGVpZ2h0PXtzaXplfVxuICAgIHdpZHRoPXtzaXplfVxuICAgIHZpZXdCb3g9XCIwIDAgMjAgMjBcIlxuICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiXG4gICAgZm9jdXNhYmxlPVwiZmFsc2VcIlxuICAgIGNzcz17e1xuICAgICAgZGlzcGxheTogJ2lubGluZS1ibG9jaycsXG4gICAgICBmaWxsOiAnY3VycmVudENvbG9yJyxcbiAgICAgIGxpbmVIZWlnaHQ6IDEsXG4gICAgICBzdHJva2U6ICdjdXJyZW50Q29sb3InLFxuICAgICAgc3Ryb2tlV2lkdGg6IDAsXG4gICAgfX1cbiAgICB7Li4ucHJvcHN9XG4gIC8+XG4pO1xuXG5leHBvcnQgY29uc3QgQ3Jvc3NJY29uID0gKHByb3BzOiBhbnkpID0+IChcbiAgPFN2ZyBzaXplPXsyMH0gey4uLnByb3BzfT5cbiAgICA8cGF0aCBkPVwiTTE0LjM0OCAxNC44NDljLTAuNDY5IDAuNDY5LTEuMjI5IDAuNDY5LTEuNjk3IDBsLTIuNjUxLTMuMDMwLTIuNjUxIDMuMDI5Yy0wLjQ2OSAwLjQ2OS0xLjIyOSAwLjQ2OS0xLjY5NyAwLTAuNDY5LTAuNDY5LTAuNDY5LTEuMjI5IDAtMS42OTdsMi43NTgtMy4xNS0yLjc1OS0zLjE1MmMtMC40NjktMC40NjktMC40NjktMS4yMjggMC0xLjY5N3MxLjIyOC0wLjQ2OSAxLjY5NyAwbDIuNjUyIDMuMDMxIDIuNjUxLTMuMDMxYzAuNDY5LTAuNDY5IDEuMjI4LTAuNDY5IDEuNjk3IDBzMC40NjkgMS4yMjkgMCAxLjY5N2wtMi43NTggMy4xNTIgMi43NTggMy4xNWMwLjQ2OSAwLjQ2OSAwLjQ2OSAxLjIyOSAwIDEuNjk4elwiIC8+XG4gIDwvU3ZnPlxuKTtcbmV4cG9ydCBjb25zdCBEb3duQ2hldnJvbiA9IChwcm9wczogYW55KSA9PiAoXG4gIDxTdmcgc2l6ZT17MjB9IHsuLi5wcm9wc30+XG4gICAgPHBhdGggZD1cIk00LjUxNiA3LjU0OGMwLjQzNi0wLjQ0NiAxLjA0My0wLjQ4MSAxLjU3NiAwbDMuOTA4IDMuNzQ3IDMuOTA4LTMuNzQ3YzAuNTMzLTAuNDgxIDEuMTQxLTAuNDQ2IDEuNTc0IDAgMC40MzYgMC40NDUgMC40MDggMS4xOTcgMCAxLjYxNS0wLjQwNiAwLjQxOC00LjY5NSA0LjUwMi00LjY5NSA0LjUwMi0wLjIxNyAwLjIyMy0wLjUwMiAwLjMzNS0wLjc4NyAwLjMzNXMtMC41Ny0wLjExMi0wLjc4OS0wLjMzNWMwIDAtNC4yODctNC4wODQtNC42OTUtNC41MDJzLTAuNDM2LTEuMTcgMC0xLjYxNXpcIiAvPlxuICA8L1N2Zz5cbik7XG5cbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuLy8gRHJvcGRvd24gJiBDbGVhciBCdXR0b25zXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cblxuZXhwb3J0IHR5cGUgSW5kaWNhdG9yUHJvcHMgPSBDb21tb25Qcm9wcyAmIHtcbiAgLyoqIFRoZSBjaGlsZHJlbiB0byBiZSByZW5kZXJlZCBpbnNpZGUgdGhlIGluZGljYXRvci4gKi9cbiAgY2hpbGRyZW46IE5vZGUsXG4gIC8qKiBQcm9wcyB0aGF0IHdpbGwgYmUgcGFzc2VkIG9uIHRvIHRoZSBjaGlsZHJlbi4gKi9cbiAgaW5uZXJQcm9wczogYW55LFxuICAvKiogVGhlIGZvY3VzZWQgc3RhdGUgb2YgdGhlIHNlbGVjdC4gKi9cbiAgaXNGb2N1c2VkOiBib29sZWFuLFxuICAvKiogV2hldGhlciB0aGUgdGV4dCBpcyByaWdodCB0byBsZWZ0ICovXG4gIGlzUnRsOiBib29sZWFuLFxufTtcblxuY29uc3QgYmFzZUNTUyA9ICh7XG4gIGlzRm9jdXNlZCxcbiAgdGhlbWU6IHtcbiAgICBzcGFjaW5nOiB7IGJhc2VVbml0IH0sXG4gICAgY29sb3JzLFxuICB9LFxufTogSW5kaWNhdG9yUHJvcHMpID0+ICh7XG4gIGxhYmVsOiAnaW5kaWNhdG9yQ29udGFpbmVyJyxcbiAgY29sb3I6IGlzRm9jdXNlZCA/IGNvbG9ycy5uZXV0cmFsNjAgOiBjb2xvcnMubmV1dHJhbDIwLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIHBhZGRpbmc6IGJhc2VVbml0ICogMixcbiAgdHJhbnNpdGlvbjogJ2NvbG9yIDE1MG1zJyxcblxuICAnOmhvdmVyJzoge1xuICAgIGNvbG9yOiBpc0ZvY3VzZWQgPyBjb2xvcnMubmV1dHJhbDgwIDogY29sb3JzLm5ldXRyYWw0MCxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgZHJvcGRvd25JbmRpY2F0b3JDU1MgPSBiYXNlQ1NTO1xuZXhwb3J0IGNvbnN0IERyb3Bkb3duSW5kaWNhdG9yID0gKHByb3BzOiBJbmRpY2F0b3JQcm9wcykgPT4ge1xuICBjb25zdCB7IGNoaWxkcmVuLCBjbGFzc05hbWUsIGN4LCBnZXRTdHlsZXMsIGlubmVyUHJvcHMgfSA9IHByb3BzO1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIHsuLi5pbm5lclByb3BzfVxuICAgICAgY3NzPXtnZXRTdHlsZXMoJ2Ryb3Bkb3duSW5kaWNhdG9yJywgcHJvcHMpfVxuICAgICAgY2xhc3NOYW1lPXtjeChcbiAgICAgICAge1xuICAgICAgICAgIGluZGljYXRvcjogdHJ1ZSxcbiAgICAgICAgICAnZHJvcGRvd24taW5kaWNhdG9yJzogdHJ1ZSxcbiAgICAgICAgfSxcbiAgICAgICAgY2xhc3NOYW1lXG4gICAgICApfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbiB8fCA8RG93bkNoZXZyb24gLz59XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5leHBvcnQgY29uc3QgY2xlYXJJbmRpY2F0b3JDU1MgPSBiYXNlQ1NTO1xuZXhwb3J0IGNvbnN0IENsZWFySW5kaWNhdG9yID0gKHByb3BzOiBJbmRpY2F0b3JQcm9wcykgPT4ge1xuICBjb25zdCB7IGNoaWxkcmVuLCBjbGFzc05hbWUsIGN4LCBnZXRTdHlsZXMsIGlubmVyUHJvcHMgfSA9IHByb3BzO1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIHsuLi5pbm5lclByb3BzfVxuICAgICAgY3NzPXtnZXRTdHlsZXMoJ2NsZWFySW5kaWNhdG9yJywgcHJvcHMpfVxuICAgICAgY2xhc3NOYW1lPXtjeChcbiAgICAgICAge1xuICAgICAgICAgIGluZGljYXRvcjogdHJ1ZSxcbiAgICAgICAgICAnY2xlYXItaW5kaWNhdG9yJzogdHJ1ZSxcbiAgICAgICAgfSxcbiAgICAgICAgY2xhc3NOYW1lXG4gICAgICApfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbiB8fCA8Q3Jvc3NJY29uIC8+fVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG4vLyBTZXBhcmF0b3Jcbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuXG50eXBlIFNlcGFyYXRvclN0YXRlID0geyBpc0Rpc2FibGVkOiBib29sZWFuIH07XG5cbmV4cG9ydCBjb25zdCBpbmRpY2F0b3JTZXBhcmF0b3JDU1MgPSAoe1xuICBpc0Rpc2FibGVkLFxuICB0aGVtZToge1xuICAgIHNwYWNpbmc6IHsgYmFzZVVuaXQgfSxcbiAgICBjb2xvcnMsXG4gIH0sXG59OiBDb21tb25Qcm9wcyAmIFNlcGFyYXRvclN0YXRlKSA9PiAoe1xuICBsYWJlbDogJ2luZGljYXRvclNlcGFyYXRvcicsXG4gIGFsaWduU2VsZjogJ3N0cmV0Y2gnLFxuICBiYWNrZ3JvdW5kQ29sb3I6IGlzRGlzYWJsZWQgPyBjb2xvcnMubmV1dHJhbDEwIDogY29sb3JzLm5ldXRyYWwyMCxcbiAgbWFyZ2luQm90dG9tOiBiYXNlVW5pdCAqIDIsXG4gIG1hcmdpblRvcDogYmFzZVVuaXQgKiAyLFxuICB3aWR0aDogMSxcbn0pO1xuXG5leHBvcnQgY29uc3QgSW5kaWNhdG9yU2VwYXJhdG9yID0gKHByb3BzOiBJbmRpY2F0b3JQcm9wcykgPT4ge1xuICBjb25zdCB7IGNsYXNzTmFtZSwgY3gsIGdldFN0eWxlcywgaW5uZXJQcm9wcyB9ID0gcHJvcHM7XG4gIHJldHVybiAoXG4gICAgPHNwYW5cbiAgICAgIHsuLi5pbm5lclByb3BzfVxuICAgICAgY3NzPXtnZXRTdHlsZXMoJ2luZGljYXRvclNlcGFyYXRvcicsIHByb3BzKX1cbiAgICAgIGNsYXNzTmFtZT17Y3goeyAnaW5kaWNhdG9yLXNlcGFyYXRvcic6IHRydWUgfSwgY2xhc3NOYW1lKX1cbiAgICAvPlxuICApO1xufTtcblxuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG4vLyBMb2FkaW5nXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cblxuY29uc3QgbG9hZGluZ0RvdEFuaW1hdGlvbnMgPSBrZXlmcmFtZXNgXG4gIDAlLCA4MCUsIDEwMCUgeyBvcGFjaXR5OiAwOyB9XG4gIDQwJSB7IG9wYWNpdHk6IDE7IH1cbmA7XG5cbmV4cG9ydCBjb25zdCBsb2FkaW5nSW5kaWNhdG9yQ1NTID0gKHtcbiAgaXNGb2N1c2VkLFxuICBzaXplLFxuICB0aGVtZToge1xuICAgIGNvbG9ycyxcbiAgICBzcGFjaW5nOiB7IGJhc2VVbml0IH0sXG4gIH0sXG59OiB7XG4gIGlzRm9jdXNlZDogYm9vbGVhbixcbiAgc2l6ZTogbnVtYmVyLFxuICB0aGVtZTogVGhlbWUsXG59KSA9PiAoe1xuICBsYWJlbDogJ2xvYWRpbmdJbmRpY2F0b3InLFxuICBjb2xvcjogaXNGb2N1c2VkID8gY29sb3JzLm5ldXRyYWw2MCA6IGNvbG9ycy5uZXV0cmFsMjAsXG4gIGRpc3BsYXk6ICdmbGV4JyxcbiAgcGFkZGluZzogYmFzZVVuaXQgKiAyLFxuICB0cmFuc2l0aW9uOiAnY29sb3IgMTUwbXMnLFxuICBhbGlnblNlbGY6ICdjZW50ZXInLFxuICBmb250U2l6ZTogc2l6ZSxcbiAgbGluZUhlaWdodDogMSxcbiAgbWFyZ2luUmlnaHQ6IHNpemUsXG4gIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gIHZlcnRpY2FsQWxpZ246ICdtaWRkbGUnLFxufSk7XG5cbnR5cGUgRG90UHJvcHMgPSB7IGRlbGF5OiBudW1iZXIsIG9mZnNldDogYm9vbGVhbiB9O1xuY29uc3QgTG9hZGluZ0RvdCA9ICh7IGRlbGF5LCBvZmZzZXQgfTogRG90UHJvcHMpID0+IChcbiAgPHNwYW5cbiAgICBjc3M9e3tcbiAgICAgIGFuaW1hdGlvbjogYCR7bG9hZGluZ0RvdEFuaW1hdGlvbnN9IDFzIGVhc2UtaW4tb3V0ICR7ZGVsYXl9bXMgaW5maW5pdGU7YCxcbiAgICAgIGJhY2tncm91bmRDb2xvcjogJ2N1cnJlbnRDb2xvcicsXG4gICAgICBib3JkZXJSYWRpdXM6ICcxZW0nLFxuICAgICAgZGlzcGxheTogJ2lubGluZS1ibG9jaycsXG4gICAgICBtYXJnaW5MZWZ0OiBvZmZzZXQgPyAnMWVtJyA6IG51bGwsXG4gICAgICBoZWlnaHQ6ICcxZW0nLFxuICAgICAgdmVydGljYWxBbGlnbjogJ3RvcCcsXG4gICAgICB3aWR0aDogJzFlbScsXG4gICAgfX1cbiAgLz5cbik7XG5cbmV4cG9ydCB0eXBlIExvYWRpbmdJY29uUHJvcHMgPSB7XG4gIC8qKiBQcm9wcyB0aGF0IHdpbGwgYmUgcGFzc2VkIG9uIHRvIHRoZSBjaGlsZHJlbi4gKi9cbiAgaW5uZXJQcm9wczogYW55LFxuICAvKiogVGhlIGZvY3VzZWQgc3RhdGUgb2YgdGhlIHNlbGVjdC4gKi9cbiAgaXNGb2N1c2VkOiBib29sZWFuLFxuICAvKiogV2hldGhlciB0aGUgdGV4dCBpcyByaWdodCB0byBsZWZ0ICovXG4gIGlzUnRsOiBib29sZWFuLFxufSAmIENvbW1vblByb3BzICYge1xuICAgIC8qKiBTZXQgc2l6ZSBvZiB0aGUgY29udGFpbmVyLiAqL1xuICAgIHNpemU6IG51bWJlcixcbiAgfTtcbmV4cG9ydCBjb25zdCBMb2FkaW5nSW5kaWNhdG9yID0gKHByb3BzOiBMb2FkaW5nSWNvblByb3BzKSA9PiB7XG4gIGNvbnN0IHsgY2xhc3NOYW1lLCBjeCwgZ2V0U3R5bGVzLCBpbm5lclByb3BzLCBpc1J0bCB9ID0gcHJvcHM7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgIGNzcz17Z2V0U3R5bGVzKCdsb2FkaW5nSW5kaWNhdG9yJywgcHJvcHMpfVxuICAgICAgY2xhc3NOYW1lPXtjeChcbiAgICAgICAge1xuICAgICAgICAgIGluZGljYXRvcjogdHJ1ZSxcbiAgICAgICAgICAnbG9hZGluZy1pbmRpY2F0b3InOiB0cnVlLFxuICAgICAgICB9LFxuICAgICAgICBjbGFzc05hbWVcbiAgICAgICl9XG4gICAgPlxuICAgICAgPExvYWRpbmdEb3QgZGVsYXk9ezB9IG9mZnNldD17aXNSdGx9IC8+XG4gICAgICA8TG9hZGluZ0RvdCBkZWxheT17MTYwfSBvZmZzZXQgLz5cbiAgICAgIDxMb2FkaW5nRG90IGRlbGF5PXszMjB9IG9mZnNldD17IWlzUnRsfSAvPlxuICAgIDwvZGl2PlxuICApO1xufTtcbkxvYWRpbmdJbmRpY2F0b3IuZGVmYXVsdFByb3BzID0geyBzaXplOiA0IH07XG4iXX0= */")
  706. });
  707. };
  708. var LoadingIndicator = function LoadingIndicator(props) {
  709. var className = props.className,
  710. cx = props.cx,
  711. getStyles = props.getStyles,
  712. innerProps = props.innerProps,
  713. isRtl = props.isRtl;
  714. return jsx("div", _extends$2({}, innerProps, {
  715. css: getStyles('loadingIndicator', props),
  716. className: cx({
  717. indicator: true,
  718. 'loading-indicator': true
  719. }, className)
  720. }), jsx(LoadingDot, {
  721. delay: 0,
  722. offset: isRtl
  723. }), jsx(LoadingDot, {
  724. delay: 160,
  725. offset: true
  726. }), jsx(LoadingDot, {
  727. delay: 320,
  728. offset: !isRtl
  729. }));
  730. };
  731. LoadingIndicator.defaultProps = {
  732. size: 4
  733. };
  734. function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
  735. var css = function css(_ref) {
  736. var isDisabled = _ref.isDisabled,
  737. isFocused = _ref.isFocused,
  738. _ref$theme = _ref.theme,
  739. colors = _ref$theme.colors,
  740. borderRadius = _ref$theme.borderRadius,
  741. spacing = _ref$theme.spacing;
  742. return {
  743. label: 'control',
  744. alignItems: 'center',
  745. backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
  746. borderColor: isDisabled ? colors.neutral10 : isFocused ? colors.primary : colors.neutral20,
  747. borderRadius: borderRadius,
  748. borderStyle: 'solid',
  749. borderWidth: 1,
  750. boxShadow: isFocused ? "0 0 0 1px " + colors.primary : null,
  751. cursor: 'default',
  752. display: 'flex',
  753. flexWrap: 'wrap',
  754. justifyContent: 'space-between',
  755. minHeight: spacing.controlHeight,
  756. outline: '0 !important',
  757. position: 'relative',
  758. transition: 'all 100ms',
  759. '&:hover': {
  760. borderColor: isFocused ? colors.primary : colors.neutral30
  761. }
  762. };
  763. };
  764. var Control = function Control(props) {
  765. var children = props.children,
  766. cx = props.cx,
  767. getStyles = props.getStyles,
  768. className = props.className,
  769. isDisabled = props.isDisabled,
  770. isFocused = props.isFocused,
  771. innerRef = props.innerRef,
  772. innerProps = props.innerProps,
  773. menuIsOpen = props.menuIsOpen;
  774. return jsx("div", _extends$3({
  775. ref: innerRef,
  776. css: getStyles('control', props),
  777. className: cx({
  778. control: true,
  779. 'control--is-disabled': isDisabled,
  780. 'control--is-focused': isFocused,
  781. 'control--menu-is-open': menuIsOpen
  782. }, className)
  783. }, innerProps), children);
  784. };
  785. function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
  786. function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
  787. var groupCSS = function groupCSS(_ref) {
  788. var spacing = _ref.theme.spacing;
  789. return {
  790. paddingBottom: spacing.baseUnit * 2,
  791. paddingTop: spacing.baseUnit * 2
  792. };
  793. };
  794. var Group = function Group(props) {
  795. var children = props.children,
  796. className = props.className,
  797. cx = props.cx,
  798. getStyles = props.getStyles,
  799. Heading = props.Heading,
  800. headingProps = props.headingProps,
  801. label = props.label,
  802. theme = props.theme,
  803. selectProps = props.selectProps;
  804. return jsx("div", {
  805. css: getStyles('group', props),
  806. className: cx({
  807. group: true
  808. }, className)
  809. }, jsx(Heading, _extends$4({}, headingProps, {
  810. selectProps: selectProps,
  811. theme: theme,
  812. getStyles: getStyles,
  813. cx: cx
  814. }), label), jsx("div", null, children));
  815. };
  816. var groupHeadingCSS = function groupHeadingCSS(_ref2) {
  817. var spacing = _ref2.theme.spacing;
  818. return {
  819. label: 'group',
  820. color: '#999',
  821. cursor: 'default',
  822. display: 'block',
  823. fontSize: '75%',
  824. fontWeight: '500',
  825. marginBottom: '0.25em',
  826. paddingLeft: spacing.baseUnit * 3,
  827. paddingRight: spacing.baseUnit * 3,
  828. textTransform: 'uppercase'
  829. };
  830. };
  831. var GroupHeading = function GroupHeading(props) {
  832. var className = props.className,
  833. cx = props.cx,
  834. getStyles = props.getStyles,
  835. theme = props.theme,
  836. selectProps = props.selectProps,
  837. cleanProps = _objectWithoutPropertiesLoose$1(props, ["className", "cx", "getStyles", "theme", "selectProps"]);
  838. return jsx("div", _extends$4({
  839. css: getStyles('groupHeading', _extends$4({
  840. theme: theme
  841. }, cleanProps)),
  842. className: cx({
  843. 'group-heading': true
  844. }, className)
  845. }, cleanProps));
  846. };
  847. function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
  848. function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
  849. var inputCSS = function inputCSS(_ref) {
  850. var isDisabled = _ref.isDisabled,
  851. _ref$theme = _ref.theme,
  852. spacing = _ref$theme.spacing,
  853. colors = _ref$theme.colors;
  854. return {
  855. margin: spacing.baseUnit / 2,
  856. paddingBottom: spacing.baseUnit / 2,
  857. paddingTop: spacing.baseUnit / 2,
  858. visibility: isDisabled ? 'hidden' : 'visible',
  859. color: colors.neutral80
  860. };
  861. };
  862. var inputStyle = function inputStyle(isHidden) {
  863. return {
  864. label: 'input',
  865. background: 0,
  866. border: 0,
  867. fontSize: 'inherit',
  868. opacity: isHidden ? 0 : 1,
  869. outline: 0,
  870. padding: 0,
  871. color: 'inherit'
  872. };
  873. };
  874. var Input = function Input(_ref2) {
  875. var className = _ref2.className,
  876. cx = _ref2.cx,
  877. getStyles = _ref2.getStyles,
  878. innerRef = _ref2.innerRef,
  879. isHidden = _ref2.isHidden,
  880. isDisabled = _ref2.isDisabled,
  881. theme = _ref2.theme,
  882. selectProps = _ref2.selectProps,
  883. props = _objectWithoutPropertiesLoose$2(_ref2, ["className", "cx", "getStyles", "innerRef", "isHidden", "isDisabled", "theme", "selectProps"]);
  884. return jsx("div", {
  885. css: getStyles('input', _extends$5({
  886. theme: theme
  887. }, props))
  888. }, jsx(AutosizeInput, _extends$5({
  889. className: cx({
  890. input: true
  891. }, className),
  892. inputRef: innerRef,
  893. inputStyle: inputStyle(isHidden),
  894. disabled: isDisabled
  895. }, props)));
  896. };
  897. function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
  898. var multiValueCSS = function multiValueCSS(_ref) {
  899. var _ref$theme = _ref.theme,
  900. spacing = _ref$theme.spacing,
  901. borderRadius = _ref$theme.borderRadius,
  902. colors = _ref$theme.colors;
  903. return {
  904. label: 'multiValue',
  905. backgroundColor: colors.neutral10,
  906. borderRadius: borderRadius / 2,
  907. display: 'flex',
  908. margin: spacing.baseUnit / 2,
  909. minWidth: 0 // resolves flex/text-overflow bug
  910. };
  911. };
  912. var multiValueLabelCSS = function multiValueLabelCSS(_ref2) {
  913. var _ref2$theme = _ref2.theme,
  914. borderRadius = _ref2$theme.borderRadius,
  915. colors = _ref2$theme.colors,
  916. cropWithEllipsis = _ref2.cropWithEllipsis;
  917. return {
  918. borderRadius: borderRadius / 2,
  919. color: colors.neutral80,
  920. fontSize: '85%',
  921. overflow: 'hidden',
  922. padding: 3,
  923. paddingLeft: 6,
  924. textOverflow: cropWithEllipsis ? 'ellipsis' : null,
  925. whiteSpace: 'nowrap'
  926. };
  927. };
  928. var multiValueRemoveCSS = function multiValueRemoveCSS(_ref3) {
  929. var _ref3$theme = _ref3.theme,
  930. spacing = _ref3$theme.spacing,
  931. borderRadius = _ref3$theme.borderRadius,
  932. colors = _ref3$theme.colors,
  933. isFocused = _ref3.isFocused;
  934. return {
  935. alignItems: 'center',
  936. borderRadius: borderRadius / 2,
  937. backgroundColor: isFocused && colors.dangerLight,
  938. display: 'flex',
  939. paddingLeft: spacing.baseUnit,
  940. paddingRight: spacing.baseUnit,
  941. ':hover': {
  942. backgroundColor: colors.dangerLight,
  943. color: colors.danger
  944. }
  945. };
  946. };
  947. var MultiValueGeneric = function MultiValueGeneric(_ref4) {
  948. var children = _ref4.children,
  949. innerProps = _ref4.innerProps;
  950. return jsx("div", innerProps, children);
  951. };
  952. var MultiValueContainer = MultiValueGeneric;
  953. var MultiValueLabel = MultiValueGeneric;
  954. function MultiValueRemove(_ref5) {
  955. var children = _ref5.children,
  956. innerProps = _ref5.innerProps;
  957. return jsx("div", innerProps, children || jsx(CrossIcon, {
  958. size: 14
  959. }));
  960. }
  961. var MultiValue = function MultiValue(props) {
  962. var children = props.children,
  963. className = props.className,
  964. components = props.components,
  965. cx = props.cx,
  966. data = props.data,
  967. getStyles = props.getStyles,
  968. innerProps = props.innerProps,
  969. isDisabled = props.isDisabled,
  970. removeProps = props.removeProps,
  971. selectProps = props.selectProps;
  972. var Container = components.Container,
  973. Label = components.Label,
  974. Remove = components.Remove;
  975. return jsx(ClassNames, null, function (_ref6) {
  976. var css = _ref6.css,
  977. emotionCx = _ref6.cx;
  978. return jsx(Container, {
  979. data: data,
  980. innerProps: _extends$6({}, innerProps, {
  981. className: emotionCx(css(getStyles('multiValue', props)), cx({
  982. 'multi-value': true,
  983. 'multi-value--is-disabled': isDisabled
  984. }, className))
  985. }),
  986. selectProps: selectProps
  987. }, jsx(Label, {
  988. data: data,
  989. innerProps: {
  990. className: emotionCx(css(getStyles('multiValueLabel', props)), cx({
  991. 'multi-value__label': true
  992. }, className))
  993. },
  994. selectProps: selectProps
  995. }, children), jsx(Remove, {
  996. data: data,
  997. innerProps: _extends$6({
  998. className: emotionCx(css(getStyles('multiValueRemove', props)), cx({
  999. 'multi-value__remove': true
  1000. }, className))
  1001. }, removeProps),
  1002. selectProps: selectProps
  1003. }));
  1004. });
  1005. };
  1006. MultiValue.defaultProps = {
  1007. cropWithEllipsis: true
  1008. };
  1009. function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
  1010. var optionCSS = function optionCSS(_ref) {
  1011. var isDisabled = _ref.isDisabled,
  1012. isFocused = _ref.isFocused,
  1013. isSelected = _ref.isSelected,
  1014. _ref$theme = _ref.theme,
  1015. spacing = _ref$theme.spacing,
  1016. colors = _ref$theme.colors;
  1017. return {
  1018. label: 'option',
  1019. backgroundColor: isSelected ? colors.primary : isFocused ? colors.primary25 : 'transparent',
  1020. color: isDisabled ? colors.neutral20 : isSelected ? colors.neutral0 : 'inherit',
  1021. cursor: 'default',
  1022. display: 'block',
  1023. fontSize: 'inherit',
  1024. padding: spacing.baseUnit * 2 + "px " + spacing.baseUnit * 3 + "px",
  1025. width: '100%',
  1026. userSelect: 'none',
  1027. WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
  1028. // provide some affordance on touch devices
  1029. ':active': {
  1030. backgroundColor: !isDisabled && (isSelected ? colors.primary : colors.primary50)
  1031. }
  1032. };
  1033. };
  1034. var Option = function Option(props) {
  1035. var children = props.children,
  1036. className = props.className,
  1037. cx = props.cx,
  1038. getStyles = props.getStyles,
  1039. isDisabled = props.isDisabled,
  1040. isFocused = props.isFocused,
  1041. isSelected = props.isSelected,
  1042. innerRef = props.innerRef,
  1043. innerProps = props.innerProps;
  1044. return jsx("div", _extends$7({
  1045. css: getStyles('option', props),
  1046. className: cx({
  1047. option: true,
  1048. 'option--is-disabled': isDisabled,
  1049. 'option--is-focused': isFocused,
  1050. 'option--is-selected': isSelected
  1051. }, className),
  1052. ref: innerRef
  1053. }, innerProps), children);
  1054. };
  1055. function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
  1056. var placeholderCSS = function placeholderCSS(_ref) {
  1057. var _ref$theme = _ref.theme,
  1058. spacing = _ref$theme.spacing,
  1059. colors = _ref$theme.colors;
  1060. return {
  1061. label: 'placeholder',
  1062. color: colors.neutral50,
  1063. marginLeft: spacing.baseUnit / 2,
  1064. marginRight: spacing.baseUnit / 2,
  1065. position: 'absolute',
  1066. top: '50%',
  1067. transform: 'translateY(-50%)'
  1068. };
  1069. };
  1070. var Placeholder = function Placeholder(props) {
  1071. var children = props.children,
  1072. className = props.className,
  1073. cx = props.cx,
  1074. getStyles = props.getStyles,
  1075. innerProps = props.innerProps;
  1076. return jsx("div", _extends$8({
  1077. css: getStyles('placeholder', props),
  1078. className: cx({
  1079. placeholder: true
  1080. }, className)
  1081. }, innerProps), children);
  1082. };
  1083. function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
  1084. var css$1 = function css(_ref) {
  1085. var isDisabled = _ref.isDisabled,
  1086. _ref$theme = _ref.theme,
  1087. spacing = _ref$theme.spacing,
  1088. colors = _ref$theme.colors;
  1089. return {
  1090. label: 'singleValue',
  1091. color: isDisabled ? colors.neutral40 : colors.neutral80,
  1092. marginLeft: spacing.baseUnit / 2,
  1093. marginRight: spacing.baseUnit / 2,
  1094. maxWidth: "calc(100% - " + spacing.baseUnit * 2 + "px)",
  1095. overflow: 'hidden',
  1096. position: 'absolute',
  1097. textOverflow: 'ellipsis',
  1098. whiteSpace: 'nowrap',
  1099. top: '50%',
  1100. transform: 'translateY(-50%)'
  1101. };
  1102. };
  1103. var SingleValue = function SingleValue(props) {
  1104. var children = props.children,
  1105. className = props.className,
  1106. cx = props.cx,
  1107. getStyles = props.getStyles,
  1108. isDisabled = props.isDisabled,
  1109. innerProps = props.innerProps;
  1110. return jsx("div", _extends$9({
  1111. css: getStyles('singleValue', props),
  1112. className: cx({
  1113. 'single-value': true,
  1114. 'single-value--is-disabled': isDisabled
  1115. }, className)
  1116. }, innerProps), children);
  1117. };
  1118. function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
  1119. var components = {
  1120. ClearIndicator: ClearIndicator,
  1121. Control: Control,
  1122. DropdownIndicator: DropdownIndicator,
  1123. DownChevron: DownChevron,
  1124. CrossIcon: CrossIcon,
  1125. Group: Group,
  1126. GroupHeading: GroupHeading,
  1127. IndicatorsContainer: IndicatorsContainer,
  1128. IndicatorSeparator: IndicatorSeparator,
  1129. Input: Input,
  1130. LoadingIndicator: LoadingIndicator,
  1131. Menu: Menu,
  1132. MenuList: MenuList,
  1133. MenuPortal: MenuPortal,
  1134. LoadingMessage: LoadingMessage,
  1135. NoOptionsMessage: NoOptionsMessage,
  1136. MultiValue: MultiValue,
  1137. MultiValueContainer: MultiValueContainer,
  1138. MultiValueLabel: MultiValueLabel,
  1139. MultiValueRemove: MultiValueRemove,
  1140. Option: Option,
  1141. Placeholder: Placeholder,
  1142. SelectContainer: SelectContainer,
  1143. SingleValue: SingleValue,
  1144. ValueContainer: ValueContainer
  1145. };
  1146. var defaultComponents = function defaultComponents(props) {
  1147. return _extends$a({}, components, props.components);
  1148. };
  1149. export { MenuPlacer as M, containerCSS as a, css as b, clearIndicatorCSS as c, dropdownIndicatorCSS as d, groupHeadingCSS as e, indicatorSeparatorCSS as f, groupCSS as g, inputCSS as h, indicatorsContainerCSS as i, loadingMessageCSS as j, menuListCSS as k, loadingIndicatorCSS as l, menuCSS as m, menuPortalCSS as n, multiValueCSS as o, multiValueLabelCSS as p, multiValueRemoveCSS as q, noOptionsMessageCSS as r, optionCSS as s, placeholderCSS as t, css$1 as u, valueContainerCSS as v, defaultComponents as w, exportedEqual as x, components as y };