@koine/react 2.0.0-beta.2 → 2.0.0-beta.5

package/Autocomplete/AutocompleteReach.js

@@ -1,115 +1,121 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Autocomplete = void 0;
 // TODO: remove, just use mui version...
-exports.Autocomplete = null;
-// import {
-//   forwardRef,
-//   useCallback,
-//   useState,
-//   ForwardedRef,
-//   ReactNode,
-//   ComponentPropsWithRef,
-//   CSSProperties,
-//   ChangeEventHandler,
-// } from "react";
-// import {
-//   Combobox,
-//   ComboboxInput,
-//   ComboboxPopover,
-//   ComboboxList,
-//   ComboboxOption,
-//   ComboboxOptionText,
-// } from "@reach/combobox";
-// import {
-//   AutocompleteRoot,
-//   AutocompleteInput,
-//   AutocompleteLabel,
-// } from "./components";
-// import type { Option } from "../types";
-// import type { SetRequired } from "@koine/utils";
-// export type AutocompleteOption =
-//   | null
-//   | (Option & {
-//       key: string;
-//     });
-// export type AutocompleteProps = SetRequired<
-//   ComponentPropsWithRef<"input">,
-//   "onChange" | "name"
-// > & {
-//   onSelect?: (option?: AutocompleteOption) => any;
-//   options: AutocompleteOption[];
-//   loadOptions: (query?: string) => Promise<AutocompleteOption[]>;
-//   label?: string | ReactNode;
-//   className?: string;
-//   style?: CSSProperties;
-//   $ref: ForwardedRef<HTMLInputElement>;
-// };
-// export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
-//   function Autocomplete(
-//     {
-//       options = [],
-//       label,
-//       name,
-//       value,
-//       onChange,
-//       loadOptions,
-//       $ref,
-//       className,
-//       style,
-//       ...props
-//     },
-//     ref
-//   ) {
-//     const [items, setItems] = useState(options);
-//     const [loading, setLoading] = useState(false);
-//     const handleInputValueChange: ChangeEventHandler<HTMLInputElement> =
-//       useCallback(
-//         async (event) => {
-//           const inputValue = event.target.value;
-//           if (loadOptions) {
-//             setLoading(true);
-//             try {
-//               const newOptions = await loadOptions(inputValue);
-//               setItems(newOptions);
-//             } catch (e) {}
-//             setLoading(false);
-//           }
-//         },
-//         [loadOptions]
-//       );
-//     return (
-//       <AutocompleteRoot>
-//         {label && <AutocompleteLabel>{label}</AutocompleteLabel>}
-//         <Combobox aria-label="choose a fruit" openOnFocus={true}>
-//           <AutocompleteInput
-//             forwardedAs={ComboboxInput}
-//             ref={$ref}
-//             onChange={handleInputValueChange}
-//             selectOnClick={true}
-//             autocomplete={false}
-//           />
-//           {(!!items.length || loading) && (
-//             <ComboboxPopover>
-//               <ComboboxList persistSelection>
-//                 {items
-//                   // .filter(item => !inputValue || item.includes(inputValue))
-//                   .map(
-//                     (item, index) =>
-//                       item && (
-//                         <ComboboxOption
-//                           key={`${item.value}${index}`}
-//                           value={item.label}
-//                         >
-//                           <ComboboxOptionText />
-//                         </ComboboxOption>
-//                       )
-//                   )}
-//               </ComboboxList>
-//             </ComboboxPopover>
-//           )}
-//         </Combobox>
-//       </AutocompleteRoot>
-//     );
-//   }
-// );
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Autocomplete", {
+    enumerable: true,
+    get: function() {
+        return Autocomplete;
+    }
+});
+const Autocomplete = null; // import {
+ //   forwardRef,
+ //   useCallback,
+ //   useState,
+ //   ForwardedRef,
+ //   ReactNode,
+ //   ComponentPropsWithRef,
+ //   CSSProperties,
+ //   ChangeEventHandler,
+ // } from "react";
+ // import {
+ //   Combobox,
+ //   ComboboxInput,
+ //   ComboboxPopover,
+ //   ComboboxList,
+ //   ComboboxOption,
+ //   ComboboxOptionText,
+ // } from "@reach/combobox";
+ // import {
+ //   AutocompleteRoot,
+ //   AutocompleteInput,
+ //   AutocompleteLabel,
+ // } from "./components";
+ // import type { Option } from "../types";
+ // import type { SetRequired } from "@koine/utils";
+ // export type AutocompleteOption =
+ //   | null
+ //   | (Option & {
+ //       key: string;
+ //     });
+ // export type AutocompleteProps = SetRequired<
+ //   ComponentPropsWithRef<"input">,
+ //   "onChange" | "name"
+ // > & {
+ //   onSelect?: (option?: AutocompleteOption) => any;
+ //   options: AutocompleteOption[];
+ //   loadOptions: (query?: string) => Promise<AutocompleteOption[]>;
+ //   label?: string | ReactNode;
+ //   className?: string;
+ //   style?: CSSProperties;
+ //   $ref: ForwardedRef<HTMLInputElement>;
+ // };
+ // export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
+ //   function Autocomplete(
+ //     {
+ //       options = [],
+ //       label,
+ //       name,
+ //       value,
+ //       onChange,
+ //       loadOptions,
+ //       $ref,
+ //       className,
+ //       style,
+ //       ...props
+ //     },
+ //     ref
+ //   ) {
+ //     const [items, setItems] = useState(options);
+ //     const [loading, setLoading] = useState(false);
+ //     const handleInputValueChange: ChangeEventHandler<HTMLInputElement> =
+ //       useCallback(
+ //         async (event) => {
+ //           const inputValue = event.target.value;
+ //           if (loadOptions) {
+ //             setLoading(true);
+ //             try {
+ //               const newOptions = await loadOptions(inputValue);
+ //               setItems(newOptions);
+ //             } catch (e) {}
+ //             setLoading(false);
+ //           }
+ //         },
+ //         [loadOptions]
+ //       );
+ //     return (
+ //       <AutocompleteRoot>
+ //         {label && <AutocompleteLabel>{label}</AutocompleteLabel>}
+ //         <Combobox aria-label="choose a fruit" openOnFocus={true}>
+ //           <AutocompleteInput
+ //             forwardedAs={ComboboxInput}
+ //             ref={$ref}
+ //             onChange={handleInputValueChange}
+ //             selectOnClick={true}
+ //             autocomplete={false}
+ //           />
+ //           {(!!items.length || loading) && (
+ //             <ComboboxPopover>
+ //               <ComboboxList persistSelection>
+ //                 {items
+ //                   // .filter(item => !inputValue || item.includes(inputValue))
+ //                   .map(
+ //                     (item, index) =>
+ //                       item && (
+ //                         <ComboboxOption
+ //                           key={`${item.value}${index}`}
+ //                           value={item.label}
+ //                         >
+ //                           <ComboboxOptionText />
+ //                         </ComboboxOption>
+ //                       )
+ //                   )}
+ //               </ComboboxList>
+ //             </ComboboxPopover>
+ //           )}
+ //         </Combobox>
+ //       </AutocompleteRoot>
+ //     );
+ //   }
+ // );

package/Autocomplete/AutocompleteReach.mjs

@@ -1,112 +1,111 @@
 // TODO: remove, just use mui version...
-export var Autocomplete = null;
-// import {
-//   forwardRef,
-//   useCallback,
-//   useState,
-//   ForwardedRef,
-//   ReactNode,
-//   ComponentPropsWithRef,
-//   CSSProperties,
-//   ChangeEventHandler,
-// } from "react";
-// import {
-//   Combobox,
-//   ComboboxInput,
-//   ComboboxPopover,
-//   ComboboxList,
-//   ComboboxOption,
-//   ComboboxOptionText,
-// } from "@reach/combobox";
-// import {
-//   AutocompleteRoot,
-//   AutocompleteInput,
-//   AutocompleteLabel,
-// } from "./components";
-// import type { Option } from "../types";
-// import type { SetRequired } from "@koine/utils";
-// export type AutocompleteOption =
-//   | null
-//   | (Option & {
-//       key: string;
-//     });
-// export type AutocompleteProps = SetRequired<
-//   ComponentPropsWithRef<"input">,
-//   "onChange" | "name"
-// > & {
-//   onSelect?: (option?: AutocompleteOption) => any;
-//   options: AutocompleteOption[];
-//   loadOptions: (query?: string) => Promise<AutocompleteOption[]>;
-//   label?: string | ReactNode;
-//   className?: string;
-//   style?: CSSProperties;
-//   $ref: ForwardedRef<HTMLInputElement>;
-// };
-// export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
-//   function Autocomplete(
-//     {
-//       options = [],
-//       label,
-//       name,
-//       value,
-//       onChange,
-//       loadOptions,
-//       $ref,
-//       className,
-//       style,
-//       ...props
-//     },
-//     ref
-//   ) {
-//     const [items, setItems] = useState(options);
-//     const [loading, setLoading] = useState(false);
-//     const handleInputValueChange: ChangeEventHandler<HTMLInputElement> =
-//       useCallback(
-//         async (event) => {
-//           const inputValue = event.target.value;
-//           if (loadOptions) {
-//             setLoading(true);
-//             try {
-//               const newOptions = await loadOptions(inputValue);
-//               setItems(newOptions);
-//             } catch (e) {}
-//             setLoading(false);
-//           }
-//         },
-//         [loadOptions]
-//       );
-//     return (
-//       <AutocompleteRoot>
-//         {label && <AutocompleteLabel>{label}</AutocompleteLabel>}
-//         <Combobox aria-label="choose a fruit" openOnFocus={true}>
-//           <AutocompleteInput
-//             forwardedAs={ComboboxInput}
-//             ref={$ref}
-//             onChange={handleInputValueChange}
-//             selectOnClick={true}
-//             autocomplete={false}
-//           />
-//           {(!!items.length || loading) && (
-//             <ComboboxPopover>
-//               <ComboboxList persistSelection>
-//                 {items
-//                   // .filter(item => !inputValue || item.includes(inputValue))
-//                   .map(
-//                     (item, index) =>
-//                       item && (
-//                         <ComboboxOption
-//                           key={`${item.value}${index}`}
-//                           value={item.label}
-//                         >
-//                           <ComboboxOptionText />
-//                         </ComboboxOption>
-//                       )
-//                   )}
-//               </ComboboxList>
-//             </ComboboxPopover>
-//           )}
-//         </Combobox>
-//       </AutocompleteRoot>
-//     );
-//   }
-// );
+export const Autocomplete = null; // import {
+ //   forwardRef,
+ //   useCallback,
+ //   useState,
+ //   ForwardedRef,
+ //   ReactNode,
+ //   ComponentPropsWithRef,
+ //   CSSProperties,
+ //   ChangeEventHandler,
+ // } from "react";
+ // import {
+ //   Combobox,
+ //   ComboboxInput,
+ //   ComboboxPopover,
+ //   ComboboxList,
+ //   ComboboxOption,
+ //   ComboboxOptionText,
+ // } from "@reach/combobox";
+ // import {
+ //   AutocompleteRoot,
+ //   AutocompleteInput,
+ //   AutocompleteLabel,
+ // } from "./components";
+ // import type { Option } from "../types";
+ // import type { SetRequired } from "@koine/utils";
+ // export type AutocompleteOption =
+ //   | null
+ //   | (Option & {
+ //       key: string;
+ //     });
+ // export type AutocompleteProps = SetRequired<
+ //   ComponentPropsWithRef<"input">,
+ //   "onChange" | "name"
+ // > & {
+ //   onSelect?: (option?: AutocompleteOption) => any;
+ //   options: AutocompleteOption[];
+ //   loadOptions: (query?: string) => Promise<AutocompleteOption[]>;
+ //   label?: string | ReactNode;
+ //   className?: string;
+ //   style?: CSSProperties;
+ //   $ref: ForwardedRef<HTMLInputElement>;
+ // };
+ // export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
+ //   function Autocomplete(
+ //     {
+ //       options = [],
+ //       label,
+ //       name,
+ //       value,
+ //       onChange,
+ //       loadOptions,
+ //       $ref,
+ //       className,
+ //       style,
+ //       ...props
+ //     },
+ //     ref
+ //   ) {
+ //     const [items, setItems] = useState(options);
+ //     const [loading, setLoading] = useState(false);
+ //     const handleInputValueChange: ChangeEventHandler<HTMLInputElement> =
+ //       useCallback(
+ //         async (event) => {
+ //           const inputValue = event.target.value;
+ //           if (loadOptions) {
+ //             setLoading(true);
+ //             try {
+ //               const newOptions = await loadOptions(inputValue);
+ //               setItems(newOptions);
+ //             } catch (e) {}
+ //             setLoading(false);
+ //           }
+ //         },
+ //         [loadOptions]
+ //       );
+ //     return (
+ //       <AutocompleteRoot>
+ //         {label && <AutocompleteLabel>{label}</AutocompleteLabel>}
+ //         <Combobox aria-label="choose a fruit" openOnFocus={true}>
+ //           <AutocompleteInput
+ //             forwardedAs={ComboboxInput}
+ //             ref={$ref}
+ //             onChange={handleInputValueChange}
+ //             selectOnClick={true}
+ //             autocomplete={false}
+ //           />
+ //           {(!!items.length || loading) && (
+ //             <ComboboxPopover>
+ //               <ComboboxList persistSelection>
+ //                 {items
+ //                   // .filter(item => !inputValue || item.includes(inputValue))
+ //                   .map(
+ //                     (item, index) =>
+ //                       item && (
+ //                         <ComboboxOption
+ //                           key={`${item.value}${index}`}
+ //                           value={item.label}
+ //                         >
+ //                           <ComboboxOptionText />
+ //                         </ComboboxOption>
+ //                       )
+ //                   )}
+ //               </ComboboxList>
+ //             </ComboboxPopover>
+ //           )}
+ //         </Combobox>
+ //       </AutocompleteRoot>
+ //     );
+ //   }
+ // );

package/Autocomplete/components.js

@@ -1,37 +1,132 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutocompleteMenuItem = exports.AutocompleteMenu = exports.AutocompleteInputArrow = exports.AutocompleteInput = exports.AutocompleteInputWrap = exports.AutocompleteItemRemove = exports.AutocompleteItemLabel = exports.AutocompleteItem = exports.AutocompleteInner = exports.AutocompleteWrap = exports.AutocompleteLabel = exports.AutocompleteRoot = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var Label_1 = require("../Forms/Label/Label");
-var Input_1 = require("../Forms/Input/Input");
-var components_1 = require("../Select/components");
-var Menu_1 = require("../Menu/Menu");
-var MenuItem_1 = require("../MenuItem/MenuItem");
-var Buttons_1 = require("../Buttons");
-var styles_1 = require("../Forms/styles");
-var styled_1 = require("../styles/styled");
-var AUTOCOMPLETE_ITEM_GUTTER = 3;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    AutocompleteRoot: function() {
+        return AutocompleteRoot;
+    },
+    AutocompleteLabel: function() {
+        return AutocompleteLabel;
+    },
+    AutocompleteWrap: function() {
+        return AutocompleteWrap;
+    },
+    AutocompleteInner: function() {
+        return AutocompleteInner;
+    },
+    AutocompleteItem: function() {
+        return AutocompleteItem;
+    },
+    AutocompleteItemLabel: function() {
+        return AutocompleteItemLabel;
+    },
+    AutocompleteItemRemove: function() {
+        return AutocompleteItemRemove;
+    },
+    AutocompleteInputWrap: function() {
+        return AutocompleteInputWrap;
+    },
+    AutocompleteInput: function() {
+        return AutocompleteInput;
+    },
+    AutocompleteInputArrow: function() {
+        return AutocompleteInputArrow;
+    },
+    AutocompleteMenu: function() {
+        return AutocompleteMenu;
+    },
+    AutocompleteMenuItem: function() {
+        return AutocompleteMenuItem;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _Buttons = require("../Buttons");
+const _Input = require("../Forms/Input/Input");
+const _Label = require("../Forms/Label/Label");
+const _styles = require("../Forms/styles");
+const _Menu = require("../Menu/Menu");
+const _MenuItem = require("../MenuItem/MenuItem");
+const _components = require("../Select/components");
+const _styled = require("../styles/styled");
+const AUTOCOMPLETE_ITEM_GUTTER = 3;
 /**
  * Space between one selected item and the other
- */
-var AUTOCOMPLETE_ITEM_SPACER = 6;
-var AUTOCOMPLETE_ITEM_REMOVE_WIDTH = 20;
-exports.AutocompleteRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-exports.AutocompleteLabel = (0, styled_components_1.default)(Label_1.Label)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject([""], [""])));
-exports.AutocompleteWrap = (0, styled_components_1.default)(Input_1.InputWrap)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.inputReset);
-exports.AutocompleteInner = (0, styled_components_1.default)(Input_1.InputMain)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  display: inline-flex;\n  flex-wrap: wrap;\n  margin: -", "px;\n  margin-right: 0;\n"], ["\n  display: inline-flex;\n  flex-wrap: wrap;\n  margin: -", "px;\n  margin-right: 0;\n"])), AUTOCOMPLETE_ITEM_SPACER);
-exports.AutocompleteItem = styled_components_1.default.span(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  margin: ", "px;\n  max-width: calc(100% - 6px);\n  user-select: none;\n  align-items: center;\n  padding: 0 ", "px 0 ", "px;\n  font-size: 80%;\n  background: var(--accent400);\n\n  &:hover {\n    background: var(--accent300);\n    color: white;\n  }\n\n  &:focus {\n    outline: 0px;\n    background: var(--grey700);\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  margin: ", "px;\n  max-width: calc(100% - 6px);\n  user-select: none;\n  align-items: center;\n  padding: 0 ", "px 0 ", "px;\n  font-size: 80%;\n  background: var(--accent400);\n\n  &:hover {\n    background: var(--accent300);\n    color: white;\n  }\n\n  &:focus {\n    outline: 0px;\n    background: var(--grey700);\n  }\n"])), AUTOCOMPLETE_ITEM_GUTTER, AUTOCOMPLETE_ITEM_REMOVE_WIDTH, AUTOCOMPLETE_ITEM_GUTTER);
-exports.AutocompleteItemLabel = styled_components_1.default.span(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n  padding: 0 ", "px;\n  ", "\n"], ["\n  padding: 0 ", "px;\n  ", "\n"])), AUTOCOMPLETE_ITEM_GUTTER, styled_1.ellipsis);
-exports.AutocompleteItemRemove = styled_components_1.default.span(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n  ", "\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: ", "px;\n  border: 0;\n  height: 100%;\n  color: inherit;\n  line-height: 1;\n"], ["\n  ", "\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: ", "px;\n  border: 0;\n  height: 100%;\n  color: inherit;\n  line-height: 1;\n"])), Buttons_1.btnStyleReset, AUTOCOMPLETE_ITEM_REMOVE_WIDTH);
-exports.AutocompleteInputWrap = styled_components_1.default.div(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n"], ["\n  display: flex;\n  flex: 1;\n"])));
-exports.AutocompleteInput = styled_components_1.default.input(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n  flex-grow: 1;\n  width: 0;\n  min-width: 30px;\n  border: 0;\n  padding: 0 ", "px;\n  text-overflow: ellipsis;\n  background: transparent;\n\n  &:focus {\n    outline: none;\n  }\n"], ["\n  flex-grow: 1;\n  width: 0;\n  min-width: 30px;\n  border: 0;\n  padding: 0 ", "px;\n  text-overflow: ellipsis;\n  background: transparent;\n\n  &:focus {\n    outline: none;\n  }\n"])), AUTOCOMPLETE_ITEM_SPACER);
-/**
- * This cannot be a button otherwise on `Enter` the form would submit instead
- * of opening the dropdown or adding the selection. There are too many events
- * to prevent if we were using a standard HTML `<button>`
- */
-exports.AutocompleteInputArrow = (0, styled_components_1.default)(components_1.SelectArrow)(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject([""], [""])));
-exports.AutocompleteMenu = (0, styled_components_1.default)(Menu_1.Menu)(templateObject_11 || (templateObject_11 = tslib_1.__makeTemplateObject([""], [""])));
-exports.AutocompleteMenuItem = (0, styled_components_1.default)(MenuItem_1.MenuItem)(templateObject_12 || (templateObject_12 = tslib_1.__makeTemplateObject([""], [""])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+ */ const AUTOCOMPLETE_ITEM_SPACER = 6;
+const AUTOCOMPLETE_ITEM_REMOVE_WIDTH = 20;
+const AutocompleteRoot = _styledcomponents.default.div`
+  position: relative;
+`;
+const AutocompleteLabel = (0, _styledcomponents.default)(_Label.Label)``;
+const AutocompleteWrap = (0, _styledcomponents.default)(_Input.InputWrap)`
+  ${_styles.inputReset}
+`;
+const AutocompleteInner = (0, _styledcomponents.default)(_Input.InputMain)`
+  display: inline-flex;
+  flex-wrap: wrap;
+  margin: -${AUTOCOMPLETE_ITEM_SPACER}px;
+  margin-right: 0;
+`;
+const AutocompleteItem = _styledcomponents.default.span`
+  position: relative;
+  display: inline-flex;
+  margin: ${AUTOCOMPLETE_ITEM_GUTTER}px;
+  max-width: calc(100% - 6px);
+  user-select: none;
+  align-items: center;
+  padding: 0 ${AUTOCOMPLETE_ITEM_REMOVE_WIDTH}px 0 ${AUTOCOMPLETE_ITEM_GUTTER}px;
+  font-size: 80%;
+  background: var(--accent400);
+
+  &:hover {
+    background: var(--accent300);
+    color: white;
+  }
+
+  &:focus {
+    outline: 0px;
+    background: var(--grey700);
+  }
+`;
+const AutocompleteItemLabel = _styledcomponents.default.span`
+  padding: 0 ${AUTOCOMPLETE_ITEM_GUTTER}px;
+  ${_styled.ellipsis}
+`;
+const AutocompleteItemRemove = _styledcomponents.default.span`
+  ${_Buttons.btnStyleReset}
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: ${AUTOCOMPLETE_ITEM_REMOVE_WIDTH}px;
+  border: 0;
+  height: 100%;
+  color: inherit;
+  line-height: 1;
+`;
+const AutocompleteInputWrap = _styledcomponents.default.div`
+  display: flex;
+  flex: 1;
+`;
+const AutocompleteInput = _styledcomponents.default.input`
+  flex-grow: 1;
+  width: 0;
+  min-width: 30px;
+  border: 0;
+  padding: 0 ${AUTOCOMPLETE_ITEM_SPACER}px;
+  text-overflow: ellipsis;
+  background: transparent;
+
+  &:focus {
+    outline: none;
+  }
+`;
+const AutocompleteInputArrow = (0, _styledcomponents.default)(_components.SelectArrow)``;
+const AutocompleteMenu = (0, _styledcomponents.default)(_Menu.Menu)``;
+const AutocompleteMenuItem = (0, _styledcomponents.default)(_MenuItem.MenuItem)``;