@algolia/satellite 1.0.0-beta.130 → 1.0.0-beta.133

package/cjs/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -1,9 +1,10 @@
-import React, { FunctionComponent } from "react";
+import type { FunctionComponent, HTMLAttributes } from "react";
 export declare type AnnouncementBadgeSizes = "default" | "small";
-export interface AnnouncementBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface AnnouncementBadgeProps extends HTMLAttributes<HTMLSpanElement> {
     size?: AnnouncementBadgeSizes;
     text?: "new" | "beta" | "internal" | "pilot";
     variant?: "accent" | "red";
+    locale?: string;
     children?: never;
 }
 export declare const AnnouncementBadge: FunctionComponent<AnnouncementBadgeProps>;

package/cjs/AnnouncementBadge/AnnouncementBadge.js

@@ -7,22 +7,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.AnnouncementBadge = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
-var _excluded = ["size", "text", "variant", "className"];
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["size", "text", "variant", "className", "locale"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var DEFAULT_CLASSNAME = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["capitalize inline-block rounded-full text-white select-none"])));
 var SIZE_CLASSNAMES = {
   "default": (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["display-body h-6 leading-md px-2"]))),
@@ -36,11 +40,13 @@ var AnnouncementBadge = function AnnouncementBadge(_ref) {
       text = _ref$text === void 0 ? "new" : _ref$text,
       variantProp = _ref.variant,
       className = _ref.className,
+      locale = _ref.locale,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var variant = typeof variantProp === "string" ? variantProp : text === "internal" ? "red" : "accent";
-  return /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, props, {
-    className: (0, _classnames["default"])(DEFAULT_CLASSNAME, variant === "red" ? (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-red-600"]))) : (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-600"]))), SIZE_CLASSNAMES[size], className)
-  }), text);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, props), {}, {
+    className: (0, _classnames["default"])(DEFAULT_CLASSNAME, variant === "red" ? (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-red-600"]))) : (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-600"]))), SIZE_CLASSNAMES[size], className),
+    children: locale || text
+  }));
 };
 
 exports.AnnouncementBadge = AnnouncementBadge;

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -1,13 +1,17 @@
-import React, { Component } from "react";
-import { ControllerStateAndHelpers } from "downshift";
+import type { A11yStatusMessageOptions, ControllerStateAndHelpers } from "downshift";
+import { Component } from "react";
+import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from "react";
 import { FieldState } from "../Field/FieldStateContext";
-import { Option, AutoCompleteProps } from "./types";
+import type { AutoCompleteLocale, AutoCompleteProps, Option, OptionItemProps } from "./types";
 interface State {
     inputFocused: boolean;
     inputValue: string;
     inputWidth?: number;
     showAllResults: boolean;
 }
+declare type DefaultOptionProps = OptionItemProps & {
+    locale?: AutoCompleteLocale;
+};
 /**
  * Autocomplete is a search-as-you-type function that matches what a person types, usually the beginning of a word, or a prefix, with a word list. Not to be confused with auto-suggestion that predicts the end of a query.
  *
@@ -24,37 +28,44 @@ interface State {
  * - Provide matching results quickly
  * - Style different data
  */
-export declare class AutoComplete<T extends Option> extends Component<AutoCompleteProps, State> {
+export declare class AutoComplete<T extends Option = Option> extends Component<AutoCompleteProps<T>, State> {
     static defaultProps: {
         clearable: boolean;
         creatable: boolean;
         multiple: boolean;
         maxResults: number;
-        emptyState: JSX.Element;
-        createFromInputValue: import("./types").CreateFromInputValue;
+        createFromInputValue: <T_1 extends Option = Option>(options: T_1[] | undefined, inputValue: string) => Option[];
         options: never[];
         separatorKeyCodes: never[];
         separatorKeys: never[];
-        optionItemComponent: import("./types").OptionItemComponentType;
+        optionItemComponent: ({ locale, ...props }: DefaultOptionProps) => JSX.Element;
         noWrap: boolean;
+        locale: {
+            clearInputButton: string;
+            emptyStateTitle: string;
+            itemsAvailable: (resultCount: number) => string;
+            showMoreButton: (extraResults: number) => string;
+            optionItemPrefix: (multiple: boolean) => "Add" | "Use";
+        };
     };
     state: State;
     inputContainerRef: HTMLDivElement | null;
     inputRef: HTMLInputElement | null;
-    componentDidUpdate(prevProps: AutoCompleteProps): void;
+    componentDidUpdate(prevProps: AutoCompleteProps<T>): void;
     handleClearClick: () => void;
     handleFakeInputClick: () => void | null;
-    handleInputBlur: (state: ControllerStateAndHelpers<Option>) => (evt: React.FocusEvent<HTMLInputElement>) => void;
-    handleInputChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
+    handleInputBlur: (state: ControllerStateAndHelpers<T | Option>) => (evt: FocusEvent<HTMLInputElement>) => void;
+    handleInputChange: (evt: ChangeEvent<HTMLInputElement>) => void;
     handleInputContainerRefUpdate: (el: HTMLDivElement | null) => void;
     updateInputWidth: () => void;
-    handleKeyDown: (state: ControllerStateAndHelpers<Option>) => (evt: React.KeyboardEvent<any>) => void;
-    handleChange: (option: Option) => void;
-    handleShowAllResults: (evt: React.MouseEvent<HTMLButtonElement>) => void;
-    removeValue: (removedOption: Option) => void;
-    renderInput: (results: Option[], autocompleteHelpers: ControllerStateAndHelpers<Option>, fieldState: FieldState) => JSX.Element;
-    renderMenu: (results: Option[], autocompleteHelpers: ControllerStateAndHelpers<Option>) => JSX.Element;
-    renderSelect: (autocompleteHelpers: ControllerStateAndHelpers<Option>, fieldState: FieldState) => JSX.Element;
+    handleKeyDown: (state: ControllerStateAndHelpers<T | Option>) => (evt: KeyboardEvent<any>) => void;
+    handleChange: (option: T) => void;
+    handleShowAllResults: (evt: MouseEvent<HTMLButtonElement>) => void;
+    removeValue: (removedOption: T) => void;
+    getA11yStatusMessage: (options: A11yStatusMessageOptions<any>) => string;
+    renderInput: (results: T[], autocompleteHelpers: ControllerStateAndHelpers<T | Option>, fieldState: FieldState) => JSX.Element;
+    renderMenu: (results: T[], autocompleteHelpers: ControllerStateAndHelpers<T | Option>) => JSX.Element;
+    renderSelect: (autocompleteHelpers: ControllerStateAndHelpers<T | Option>, fieldState: FieldState) => JSX.Element;
     render(): JSX.Element;
 }
 export default AutoComplete;

package/cjs/AutoComplete/AutoComplete.js

@@ -2,15 +2,11 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.AutoComplete = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -31,54 +27,56 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactDom = require("react-dom");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _reactPopper = require("react-popper");
+var _classnames = _interopRequireDefault(require("classnames"));
 
 var _downshift = _interopRequireDefault(require("downshift"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 
-var _reactFeather = require("react-feather");
+var _reactDom = require("react-dom");
 
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _reactFeather = require("react-feather");
 
-var _pluralize = _interopRequireDefault(require("../utils/pluralize"));
+var _reactPopper = require("react-popper");
 
-var _uniqBy = _interopRequireDefault(require("../utils/uniqBy"));
+var _Button = _interopRequireDefault(require("../Button"));
 
 var _Card = _interopRequireDefault(require("../Card"));
 
-var _Button = _interopRequireDefault(require("../Button"));
+var _FieldStateContext = require("../Field/FieldStateContext");
 
 var _ScrollIndicator = _interopRequireDefault(require("../ScrollIndicator"));
 
-var _Tag = _interopRequireDefault(require("../Tag"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
-var _FieldStateContext = require("../Field/FieldStateContext");
+var _Tag = _interopRequireDefault(require("../Tag"));
 
-var _utils = require("./utils");
+var _pluralize = _interopRequireDefault(require("../utils/pluralize"));
 
-var _DefaultOptionItem = _interopRequireDefault(require("./components/DefaultOptionItem"));
+var _uniqBy = _interopRequireDefault(require("../utils/uniqBy"));
 
 var _AutoCompleteEmptyState = _interopRequireDefault(require("./components/AutoCompleteEmptyState"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+var _DefaultOptionItem = _interopRequireDefault(require("./components/DefaultOptionItem"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _utils = require("./utils");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _jsxRuntime = require("react/jsx-runtime");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var _excluded = ["locale"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -147,9 +145,30 @@ var MENU_POPPER_MODFIERS = [{
 }];
 var BACKSPACE_KEY_CODE = 8;
 
-var defaultEmptyState = /*#__PURE__*/_react["default"].createElement(_AutoCompleteEmptyState["default"], {
-  title: "No matches found"
-});
+/** @ignore */
+var DefaultEmptyState = function DefaultEmptyState(_ref) {
+  var _locale$emptyStateTit;
+
+  var locale = _ref.locale;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoCompleteEmptyState["default"], {
+    title: (_locale$emptyStateTit = locale === null || locale === void 0 ? void 0 : locale.emptyStateTitle) !== null && _locale$emptyStateTit !== void 0 ? _locale$emptyStateTit : AutoComplete.defaultProps.locale.emptyStateTitle
+  });
+};
+
+/** @ignore */
+var DefaultOption = function DefaultOption(_ref2) {
+  var locale = _ref2.locale,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultOptionItem["default"], _objectSpread(_objectSpread({}, props), {}, {
+    locale: {
+      optionItemPrefix: function optionItemPrefix(multiple) {
+        var _locale$optionItemPre, _locale$optionItemPre2;
+
+        return (_locale$optionItemPre = locale === null || locale === void 0 ? void 0 : (_locale$optionItemPre2 = locale.optionItemPrefix) === null || _locale$optionItemPre2 === void 0 ? void 0 : _locale$optionItemPre2.call(locale, multiple)) !== null && _locale$optionItemPre !== void 0 ? _locale$optionItemPre : AutoComplete.defaultProps.locale.optionItemPrefix(multiple);
+      }
+    }
+  }));
+};
 /**
  * Autocomplete is a search-as-you-type function that matches what a person types, usually the beginning of a word, or a prefix, with a word list. Not to be confused with auto-suggestion that predicts the end of a query.
  *
@@ -341,7 +360,28 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
 
       _this.props.onChange(newOptions);
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getA11yStatusMessage", function (options) {
+      if (!options.isOpen) {
+        return "";
+      }
+
+      if (!options.resultCount) {
+        var _this$props$locale$em, _this$props$locale;
+
+        return (_this$props$locale$em = (_this$props$locale = _this.props.locale) === null || _this$props$locale === void 0 ? void 0 : _this$props$locale.emptyStateTitle) !== null && _this$props$locale$em !== void 0 ? _this$props$locale$em : "";
+      }
+
+      if (options.resultCount > 0) {
+        var _this$props$locale$it, _this$props$locale2, _this$props$locale2$i;
+
+        return (_this$props$locale$it = (_this$props$locale2 = _this.props.locale) === null || _this$props$locale2 === void 0 ? void 0 : (_this$props$locale2$i = _this$props$locale2.itemsAvailable) === null || _this$props$locale2$i === void 0 ? void 0 : _this$props$locale2$i.call(_this$props$locale2, options.resultCount)) !== null && _this$props$locale$it !== void 0 ? _this$props$locale$it : "";
+      }
+
+      return "";
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderInput", function (results, autocompleteHelpers, fieldState) {
+      var _this$props$locale3;
+
       var _this$props3 = _this.props,
           id = _this$props3.id,
           placeholder = _this$props3.placeholder,
@@ -402,45 +442,50 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
         autoComplete: "off",
         autoFocus: autoFocus
       });
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: inputContainerClassName,
         onClick: _this.handleFakeInputClick,
-        ref: _this.handleInputContainerRefUpdate
-      }, Icon && /*#__PURE__*/_react["default"].createElement(Icon, {
-        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["mr-4 flex-shrink-0 ", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500"),
-        size: "1rem"
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex items-center flex-1 ", " ", ""])), !noWrap && "flex-wrap", multiple && "-ml-1"), valuesClassName)
-      }, multiple && Array.isArray(value) && value.map(function (option) {
-        return renderValueTemplate ? renderValueTemplate({
-          option: option,
-          key: String(option.value),
-          editable: !disabled
-        }) : /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
-          key: String(option.value),
-          onDelete: disabled ? undefined : function () {
-            return _this.removeValue(option);
-          },
-          className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["m-1 max-w-48 ", ""])), disabled && "opacity-50")
-        }, option.label);
-      }), shouldRenderCustomTemplate && renderValueTemplate({
-        option: value,
-        key: String(value),
-        editable: !disabled
-      }), /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, inputProps, {
-        "data-lpignore": true
-      }))), (showClearButton || endItem) && /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(showClearButton && endItem && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["my-2 flex self-end space-x-4"]))))
-      }, endItem && /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["text-grey-700 my-auto"])))
-      }, endItem), showClearButton && /*#__PURE__*/_react["default"].createElement("button", {
-        type: "button",
-        className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-6 flex items-center justify-center text-grey-500"]))),
-        onClick: _this.handleClearClick,
-        "aria-label": "Clear input value"
-      }, /*#__PURE__*/_react["default"].createElement(_reactFeather.X, {
-        size: ".75rem"
-      }))));
+        ref: _this.handleInputContainerRefUpdate,
+        children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["mr-4 flex-shrink-0 ", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500"),
+          size: "1rem"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex items-center flex-1 ", " ", ""])), !noWrap && "flex-wrap", multiple && "-ml-1"), valuesClassName),
+          children: [multiple && Array.isArray(value) && value.map(function (option) {
+            return renderValueTemplate ? renderValueTemplate({
+              option: option,
+              key: String(option.value),
+              editable: !disabled
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag["default"], {
+              onDelete: disabled ? undefined : function () {
+                return _this.removeValue(option);
+              },
+              className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["m-1 max-w-48 ", ""])), disabled && "opacity-50"),
+              children: option.label
+            }, String(option.value));
+          }), shouldRenderCustomTemplate && renderValueTemplate({
+            option: value,
+            key: String(value),
+            editable: !disabled
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+            "data-lpignore": true
+          }))]
+        }), (showClearButton || endItem) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classnames["default"])(showClearButton && endItem && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["my-2 flex self-end space-x-4"])))),
+          children: [endItem && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["text-grey-700 my-auto"]))),
+            children: endItem
+          }), showClearButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-6 flex items-center justify-center text-grey-500"]))),
+            onClick: _this.handleClearClick,
+            "aria-label": (_this$props$locale3 = _this.props.locale) === null || _this$props$locale3 === void 0 ? void 0 : _this$props$locale3.clearInputButton,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
+              size: ".75rem"
+            })
+          })]
+        })]
+      });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderMenu", function (results, autocompleteHelpers) {
       var _this$inputContainerR3;
@@ -450,12 +495,15 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
           highlightedIndex = autocompleteHelpers.highlightedIndex,
           inputValue = autocompleteHelpers.inputValue,
           isOpen = autocompleteHelpers.isOpen;
+      var defaultEmptyState = /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultEmptyState, {
+        locale: _this.props.locale
+      });
       var _this$props4 = _this.props,
           menuClassName = _this$props4.menuClassName,
           menuSize = _this$props4.menuSize,
-          _this$props4$emptySta = _this$props4.emptyState,
-          emptyState = _this$props4$emptySta === void 0 ? AutoComplete.defaultProps.emptyState : _this$props4$emptySta,
           menuFooter = _this$props4.menuFooter,
+          _this$props4$emptySta = _this$props4.emptyState,
+          emptyState = _this$props4$emptySta === void 0 ? defaultEmptyState : _this$props4$emptySta,
           _this$props4$maxResul = _this$props4.maxResults,
           maxResults = _this$props4$maxResul === void 0 ? AutoComplete.defaultProps.maxResults : _this$props4$maxResul,
           _this$props4$multiple = _this$props4.multiple,
@@ -479,49 +527,62 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
       var showResults = results.length > 0;
 
       if (!isOpen || !showResults && !shouldShowEmptyState && !shouldShowDefaultEmptyState) {
-        return /*#__PURE__*/_react["default"].createElement("ul", (0, _extends2["default"])({}, getMenuProps(), {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
           className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["hidden h-0"])))
         }));
       }
 
-      return /*#__PURE__*/_react["default"].createElement(_reactPopper.Popper, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPopper.Popper, {
         placement: "bottom-start",
         strategy: "fixed",
         referenceElement: (_this$inputContainerR3 = _this.inputContainerRef) !== null && _this$inputContainerR3 !== void 0 ? _this$inputContainerR3 : undefined,
-        modifiers: MENU_POPPER_MODFIERS
-      }, function (popper) {
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["z-dropdown"]))), menuClassName),
-          style: _objectSpread(_objectSpread({}, popper.style), dropdownStyle),
-          "data-popper-placement": popper.placement,
-          ref: popper.ref
-        }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-          fullBleed: true,
-          elevation: "300"
-        }, results.length === 0 ? /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, getMenuProps(), {
-          className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["min-h-10"])))
-        }), emptyState) : /*#__PURE__*/_react["default"].createElement(_ScrollIndicator["default"], {
-          className: menuSize === "large" ? (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["max-h-96"]))) : (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["max-h-64"])))
-        }, /*#__PURE__*/_react["default"].createElement("ul", getMenuProps(), results.slice(0, showAllResults ? Number.MAX_SAFE_INTEGER : maxResults).map(function (result, index) {
-          return /*#__PURE__*/_react["default"].createElement("li", (0, _extends2["default"])({
-            key: result.value
-          }, getItemProps({
-            item: result,
-            disabled: result.disabled,
-            className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n                            autocomplete-result\n                            flex items-center min-h-10 px-4 cursor-pointer\n                            ", "\n                            ", "\n                          "])), index === highlightedIndex && "bg-grey-100", result.disabled && "cursor-not-allowed")
-          })), /*#__PURE__*/_react["default"].createElement(OptionItem, (0, _extends2["default"])({}, optionItemProps, {
-            highlighted: index === highlightedIndex,
-            option: result
-          })));
-        }), extraResults > 0 && !showAllResults && /*#__PURE__*/_react["default"].createElement("li", {
-          className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["p-2 text-right"])))
-        }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-          variant: "subtle",
-          size: "small",
-          onMouseDown: _this.handleShowAllResults
-        }, "Show ", (0, _pluralize["default"])(extraResults, "result"), " more")))), menuFooter && /*#__PURE__*/_react["default"].createElement("footer", {
-          className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"])))
-        }, menuFooter)));
+        modifiers: MENU_POPPER_MODFIERS,
+        children: function children(popper) {
+          var _this$props$locale4, _this$props$locale4$s;
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["z-dropdown"]))), menuClassName),
+            style: _objectSpread(_objectSpread({}, popper.style), dropdownStyle),
+            "data-popper-placement": popper.placement,
+            ref: popper.ref,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card["default"], {
+              fullBleed: true,
+              elevation: "300",
+              children: [results.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+                className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["min-h-10"]))),
+                children: emptyState
+              })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollIndicator["default"], {
+                className: menuSize === "large" ? (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["max-h-96"]))) : (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["max-h-64"]))),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+                  children: [results.slice(0, showAllResults ? Number.MAX_SAFE_INTEGER : maxResults).map(function (result, index) {
+                    return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", _objectSpread(_objectSpread({}, getItemProps({
+                      item: result,
+                      disabled: result.disabled,
+                      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n                            autocomplete-result\n                            flex items-center min-h-10 px-4 cursor-pointer\n                            ", "\n                            ", "\n                          "])), index === highlightedIndex && "bg-grey-100", result.disabled && "cursor-not-allowed")
+                    })), {}, {
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionItem, _objectSpread(_objectSpread({}, optionItemProps), {}, {
+                        highlighted: index === highlightedIndex,
+                        option: result,
+                        locale: _this.props.locale
+                      }))
+                    }), result.value);
+                  }), extraResults > 0 && !showAllResults && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                    className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["p-2 text-right"]))),
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+                      variant: "subtle",
+                      size: "small",
+                      onMouseDown: _this.handleShowAllResults,
+                      children: (_this$props$locale4 = _this.props.locale) === null || _this$props$locale4 === void 0 ? void 0 : (_this$props$locale4$s = _this$props$locale4.showMoreButton) === null || _this$props$locale4$s === void 0 ? void 0 : _this$props$locale4$s.call(_this$props$locale4, extraResults)
+                    })
+                  })]
+                }))
+              }), menuFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
+                className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"]))),
+                children: menuFooter
+              })]
+            })
+          });
+        }
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderSelect", function (autocompleteHelpers, fieldState) {
@@ -540,9 +601,10 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
         results.unshift.apply(results, (0, _toConsumableArray2["default"])(createFromInputValue(options, inputValue)));
       }
 
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className
-      }, _this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/(0, _reactDom.createPortal)(_this.renderMenu(results, autocompleteHelpers), document.body));
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: className,
+        children: [_this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/(0, _reactDom.createPortal)(_this.renderMenu(results, autocompleteHelpers), document.body)]
+      });
     });
     return _this;
   }
@@ -569,23 +631,27 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
       var _this2 = this;
 
       var inputValue = (this.props.inputValue !== undefined ? this.props.inputValue : this.state.inputValue) || "";
-      return /*#__PURE__*/_react["default"].createElement(_FieldStateContext.FieldStateContext.Consumer, null, function (fieldState) {
-        return /*#__PURE__*/_react["default"].createElement(_downshift["default"], {
-          inputValue: inputValue
-          /*
-           * See https://github.com/algolia/AlgoliaWeb/issues/9045
-           * See multi-select example
-           * https://github.com/downshift-js/downshift#examples
-           * https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=/src/ordered-examples/04-multi-select.js&moduleview=1&file=/src/ordered-examples/04-multi-select.js:2482-2509
-           */
-          ,
-          selectedItem: null,
-          onChange: _this2.handleChange,
-          itemToString: optionToString,
-          defaultHighlightedIndex: 0
-        }, function (autocompleteHelpers) {
-          return _this2.renderSelect(autocompleteHelpers, fieldState);
-        });
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldStateContext.FieldStateContext.Consumer, {
+        children: function children(fieldState) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_downshift["default"], {
+            inputValue: inputValue
+            /*
+             * See https://github.com/algolia/AlgoliaWeb/issues/9045
+             * See multi-select example
+             * https://github.com/downshift-js/downshift#examples
+             * https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=/src/ordered-examples/04-multi-select.js&moduleview=1&file=/src/ordered-examples/04-multi-select.js:2482-2509
+             */
+            ,
+            selectedItem: null,
+            getA11yStatusMessage: _this2.getA11yStatusMessage,
+            onChange: _this2.handleChange,
+            itemToString: optionToString,
+            defaultHighlightedIndex: 0,
+            children: function children(autocompleteHelpers) {
+              return _this2.renderSelect(autocompleteHelpers, fieldState);
+            }
+          });
+        }
       });
     }
   }]);
@@ -598,13 +664,27 @@ exports.AutoComplete = AutoComplete;
   creatable: false,
   multiple: false,
   maxResults: 7,
-  emptyState: defaultEmptyState,
   createFromInputValue: _utils.defaultCreateFromInputValue,
   options: [],
   separatorKeyCodes: [],
   separatorKeys: [],
-  optionItemComponent: _DefaultOptionItem["default"],
-  noWrap: false
+  optionItemComponent: DefaultOption,
+  noWrap: false,
+  locale: {
+    clearInputButton: "Clear input value",
+    emptyStateTitle: "No matches found",
+    itemsAvailable: function itemsAvailable(resultCount) {
+      return "".concat((0, _pluralize["default"])(resultCount, "item is", {
+        plural: "items are"
+      }), " available");
+    },
+    showMoreButton: function showMoreButton(extraResults) {
+      return "Show ".concat((0, _pluralize["default"])(extraResults, "result"), " more");
+    },
+    optionItemPrefix: function optionItemPrefix(multiple) {
+      return multiple ? "Add" : "Use";
+    }
+  }
 });
 var _default = AutoComplete;
 exports["default"] = _default;