@algolia/satellite 1.0.0-beta.132 → 1.0.0-beta.135

package/esm/AutoComplete/AutoComplete.d.ts

@@ -1,14 +1,17 @@
-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 type { AutoCompleteProps, Option } from "./types";
+import type { AutoCompleteLocale, AutoCompleteProps, Option, OptionItemProps } from "./types";
 interface State {
     inputFocused: boolean;
     inputValue: string;
     inputWidth?: number;
     showAllResults: boolean;
 }
+declare type DefaultOptionProps = OptionItemProps & {
+    optionItemPrefix?: AutoCompleteLocale["optionItemPrefix"];
+};
 /**
  * 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.
  *
@@ -25,37 +28,39 @@ 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 contextType: import("react").Context<import("../Satellite").SatelliteContextType>;
     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: ({ optionItemPrefix, ...props }: DefaultOptionProps) => JSX.Element;
         noWrap: boolean;
     };
     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: FocusEvent<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: KeyboardEvent<any>) => void;
-    handleChange: (option: Option) => void;
+    handleKeyDown: (state: ControllerStateAndHelpers<T | Option>) => (evt: KeyboardEvent<any>) => void;
+    handleChange: (option: T) => void;
     handleShowAllResults: (evt: 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;
+    removeValue: (removedOption: T) => void;
+    getA11yStatusMessage: (options: A11yStatusMessageOptions<Option>) => any;
+    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;
+    private get locale();
     render(): JSX.Element;
 }
 export default AutoComplete;

package/esm/AutoComplete/AutoComplete.js

@@ -8,17 +8,20 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
-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) { _defineProperty(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 _excluded = ["optionItemPrefix"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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) { _defineProperty(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); }
@@ -34,14 +37,14 @@ import { Popper } from "react-popper";
 import Button from "../Button";
 import Card from "../Card";
 import { FieldStateContext } from "../Field/FieldStateContext";
+import { SatelliteContext } from "../Satellite";
 import ScrollIndicator from "../ScrollIndicator";
 import stl from "../styles/helpers/satellitePrefixer";
 import Tag from "../Tag";
-import pluralize from "../utils/pluralize";
 import uniqBy from "../utils/uniqBy";
 import AutoCompleteEmptyState from "./components/AutoCompleteEmptyState";
 import DefaultOptionItem from "./components/DefaultOptionItem";
-import { defaultCreateFromInputValue, isAutoCompleteMultiProps } from "./utils";
+import { DEFAULT_AUTOCOMPLETE_LOCALE, defaultCreateFromInputValue, isAutoCompleteMultiProps } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -107,9 +110,24 @@ var MENU_POPPER_MODFIERS = [{
 }];
 var BACKSPACE_KEY_CODE = 8;
 
-var defaultEmptyState = /*#__PURE__*/_jsx(AutoCompleteEmptyState, {
-  title: "No matches found"
-});
+/** @ignore */
+var DefaultEmptyState = function DefaultEmptyState(_ref) {
+  var emptyStateTitle = _ref.emptyStateTitle;
+  return /*#__PURE__*/_jsx(AutoCompleteEmptyState, {
+    title: emptyStateTitle
+  });
+};
+
+var DefaultOption = function DefaultOption(_ref2) {
+  var optionItemPrefix = _ref2.optionItemPrefix,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/_jsx(DefaultOptionItem, _objectSpread(_objectSpread({}, props), {}, {
+    locale: {
+      optionItemPrefix: optionItemPrefix !== null && optionItemPrefix !== void 0 ? optionItemPrefix : DEFAULT_AUTOCOMPLETE_LOCALE.optionItemPrefix
+    }
+  }));
+};
 /**
  * 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.
  *
@@ -315,6 +333,22 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
       _this.props.onChange(newOptions);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getA11yStatusMessage", function (options) {
+      if (!options.isOpen) {
+        return "";
+      }
+
+      if (!options.resultCount) {
+        return _this.locale.emptyStateTitle;
+      }
+
+      if (options.resultCount > 0) {
+        return _this.locale.itemsAvailable(options.resultCount);
+      }
+
+      return "";
+    });
+
     _defineProperty(_assertThisInitialized(_this), "renderInput", function (results, autocompleteHelpers, fieldState) {
       var _this$props3 = _this.props,
           id = _this$props3.id,
@@ -381,7 +415,7 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
         onClick: _this.handleFakeInputClick,
         ref: _this.handleInputContainerRefUpdate,
         children: [Icon && /*#__PURE__*/_jsx(Icon, {
-          className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mr-4 flex-shrink-0 ", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500"),
+          className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mr-4 shrink-0 ", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500"),
           size: "1rem"
         }), /*#__PURE__*/_jsxs("div", {
           className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex items-center flex-1 ", " ", ""])), !noWrap && "flex-wrap", multiple && "-ml-1"), valuesClassName),
@@ -413,7 +447,7 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
             type: "button",
             className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-6 flex items-center justify-center text-grey-500"]))),
             onClick: _this.handleClearClick,
-            "aria-label": "Clear input value",
+            "aria-label": _this.locale.clearInputButton,
             children: /*#__PURE__*/_jsx(X, {
               size: ".75rem"
             })
@@ -430,12 +464,17 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
           highlightedIndex = autocompleteHelpers.highlightedIndex,
           inputValue = autocompleteHelpers.inputValue,
           isOpen = autocompleteHelpers.isOpen;
+
+      var defaultEmptyState = /*#__PURE__*/_jsx(DefaultEmptyState, {
+        emptyStateTitle: _this.locale.emptyStateTitle
+      });
+
       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,
@@ -492,16 +531,17 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
                     })), {}, {
                       children: /*#__PURE__*/_jsx(OptionItem, _objectSpread(_objectSpread({}, optionItemProps), {}, {
                         highlighted: index === highlightedIndex,
-                        option: result
+                        option: result,
+                        optionItemPrefix: _this.locale.optionItemPrefix
                       }))
                     }), result.value);
                   }), extraResults > 0 && !showAllResults && /*#__PURE__*/_jsx("li", {
                     className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["p-2 text-right"]))),
-                    children: /*#__PURE__*/_jsxs(Button, {
+                    children: /*#__PURE__*/_jsx(Button, {
                       variant: "subtle",
                       size: "small",
                       onMouseDown: _this.handleShowAllResults,
-                      children: ["Show ", pluralize(extraResults, "result"), " more"]
+                      children: _this.locale.showMoreButton(extraResults)
                     })
                   })]
                 }))
@@ -516,6 +556,8 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSelect", function (autocompleteHelpers, fieldState) {
+      var _this$context$portalT;
+
       var _this$props5 = _this.props,
           className = _this$props5.className,
           options = _this$props5.options,
@@ -533,7 +575,7 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/_jsxs("div", {
         className: className,
-        children: [_this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/createPortal(_this.renderMenu(results, autocompleteHelpers), document.body)]
+        children: [_this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/createPortal(_this.renderMenu(results, autocompleteHelpers), (_this$context$portalT = _this.context["portalTarget"]) !== null && _this$context$portalT !== void 0 ? _this$context$portalT : document.body)]
       });
     });
 
@@ -556,6 +598,11 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
         });
       }
     }
+  }, {
+    key: "locale",
+    get: function get() {
+      return _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_AUTOCOMPLETE_LOCALE), this.context["locales"]), this.props.locale);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -574,6 +621,7 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
              */
             ,
             selectedItem: null,
+            getA11yStatusMessage: _this2.getA11yStatusMessage,
             onChange: _this2.handleChange,
             itemToString: optionToString,
             defaultHighlightedIndex: 0,
@@ -589,17 +637,18 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
   return AutoComplete;
 }(Component);
 
+_defineProperty(AutoComplete, "contextType", SatelliteContext);
+
 _defineProperty(AutoComplete, "defaultProps", {
   clearable: false,
   creatable: false,
   multiple: false,
   maxResults: 7,
-  emptyState: defaultEmptyState,
   createFromInputValue: defaultCreateFromInputValue,
   options: [],
   separatorKeyCodes: [],
   separatorKeys: [],
-  optionItemComponent: DefaultOptionItem,
+  optionItemComponent: DefaultOption,
   noWrap: false
 });
 

package/esm/AutoComplete/AutoComplete.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = autoCompletePlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const autoCompletePlugin: import('../tailwind-types').TailwindPlugin;
+declare const autoCompletePlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/esm/AutoComplete/AutoComplete.tailwind.js

@@ -1,13 +1,11 @@
 import _rgba from "../styles/rgba";
 import _disabledColor from "../styles/disabledColor";
+import _plugin from "tailwindcss/plugin";
 // @ts-check
+var plugin = _plugin;
 var disabledColor = _disabledColor;
 var rgba = _rgba;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-
-var autoCompletePlugin = function autoCompletePlugin(_ref) {
+var autoCompletePlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -30,14 +28,14 @@ var autoCompletePlugin = function autoCompletePlugin(_ref) {
       "&::after": {
         content: '" "',
         display: "block",
-        minHeight: 30,
+        minHeight: "30px",
         // don't ask me why 30
-        fontSize: 0
+        fontSize: "0px"
       },
       "&.autocomplete-large": {
         minHeight: "3rem",
         "&::after": {
-          minHeight: 38 // don't ask me why 38
+          minHeight: "38px" // don't ask me why 38
 
         }
       }
@@ -67,12 +65,12 @@ var autoCompletePlugin = function autoCompletePlugin(_ref) {
       scrollbarWidth: "none",
       msOverflowStyle: "-ms-autohiding-scrollbar",
       "&::-webkit-scrollbar": {
-        width: 0,
-        height: 0
+        width: "0px",
+        height: "0px"
       }
     },
     ".autocomplete-input": {
-      flex: 1,
+      flex: "1",
       backgroundColor: "transparent",
       caretColor: theme("colors.grey.600"),
       color: theme("colors.grey.900"),
@@ -92,6 +90,5 @@ var autoCompletePlugin = function autoCompletePlugin(_ref) {
       }
     }
   });
-};
-
+});
 export default autoCompletePlugin;

package/esm/AutoComplete/components/DefaultOptionItem.d.ts

@@ -1,3 +1,7 @@
-import type { OptionItemComponentType } from "../types";
-declare const DefaultOptionItem: OptionItemComponentType;
+/// <reference types="react" />
+import type { AutoCompleteLocale, OptionItemProps } from "../types";
+declare type DefaultOptionItemProps = OptionItemProps & {
+    locale?: AutoCompleteLocale;
+};
+declare const DefaultOptionItem: ({ option, multiple, locale }: DefaultOptionItemProps) => JSX.Element;
 export default DefaultOptionItem;

package/esm/AutoComplete/components/DefaultOptionItem.js

@@ -12,13 +12,16 @@ var metadataSpacer = /*#__PURE__*/_jsx("span", {
 });
 
 var DefaultOptionItem = function DefaultOptionItem(_ref) {
+  var _locale$optionItemPre;
+
   var option = _ref.option,
-      multiple = _ref.multiple;
+      multiple = _ref.multiple,
+      locale = _ref.locale;
   return /*#__PURE__*/_jsxs("div", {
     className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate py-2"]))),
     children: [/*#__PURE__*/_jsx("span", {
       className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["font-semibold text-md text-grey-900"]))),
-      children: option["new"] ? "".concat(multiple ? "Add " : "Use ", " ").concat(option.label) : option.label
+      children: option["new"] ? "".concat(locale === null || locale === void 0 ? void 0 : (_locale$optionItemPre = locale.optionItemPrefix) === null || _locale$optionItemPre === void 0 ? void 0 : _locale$optionItemPre.call(locale, multiple), " ").concat(option.label) : option.label
     }), option.metadata && option.metadata.length > 0 && /*#__PURE__*/_jsx("ul", {
       className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex text-grey-600"]))),
       children: option.metadata.map(function (metadata, idx) {

package/esm/AutoComplete/types.d.ts

@@ -1,7 +1,14 @@
 import type { ComponentType, FocusEventHandler, ReactNode } from "react";
 import type { IconComponentType } from "../types";
 export declare type AutoCompleteVariant = "medium" | "large";
-export interface AutoCompleteBaseProps {
+export declare type AutoCompleteLocale = {
+    emptyStateTitle?: string;
+    clearInputButton?: string;
+    itemsAvailable?: (resultCount: number) => string;
+    showMoreButton?: (extraResults: number) => string;
+    optionItemPrefix?: (multiple: boolean) => string;
+};
+export interface AutoCompleteBaseProps<T extends Option = Option> {
     id?: string;
     icon?: IconComponentType;
     name?: string;
@@ -12,7 +19,7 @@ export interface AutoCompleteBaseProps {
     placeholder?: string;
     disabled?: boolean;
     autoFocus?: boolean;
-    options?: Option[];
+    options?: T[];
     inputValue?: string;
     onTextChange?: (text: string) => any;
     onFocus?: FocusEventHandler<HTMLInputElement>;
@@ -21,13 +28,13 @@ export interface AutoCompleteBaseProps {
     clearable?: boolean;
     selectOnBlur?: boolean;
     maxResults?: number;
-    createFromInputValue?: CreateFromInputValue;
+    createFromInputValue?: CreateFromInputValue<T>;
     separatorKeyCodes?: number[];
     separatorKeys?: string[];
-    renderValueTemplate?: (args: RenderValueTemplateArgs) => JSX.Element;
+    renderValueTemplate?: (args: RenderValueTemplateArgs<T>) => JSX.Element;
     emptyState?: ReactNode;
     menuFooter?: ReactNode;
-    optionItemComponent?: OptionItemComponentType;
+    optionItemComponent?: OptionItemComponentType<T>;
     /** Keep the input on a single line */
     noWrap?: boolean;
     endItem?: ReactNode;
@@ -36,18 +43,19 @@ export interface AutoCompleteBaseProps {
      * @default "medium"
      */
     menuSize?: "medium" | "large";
+    locale?: AutoCompleteLocale;
 }
-export interface AutoCompleteSingleProps extends AutoCompleteBaseProps {
+export interface AutoCompleteSingleProps<T extends Option = Option> extends AutoCompleteBaseProps<T> {
     multiple?: false;
-    value?: Option;
-    onChange: (option: Option | null) => void;
+    value?: T;
+    onChange: (option: T | null) => void;
 }
-export interface AutoCompleteMultiProps extends AutoCompleteBaseProps {
+export interface AutoCompleteMultiProps<T extends Option = Option> extends AutoCompleteBaseProps<T> {
     multiple: true;
-    value?: Option[];
-    onChange: (option: Option[] | null) => void;
+    value?: T[];
+    onChange: (option: T[] | null) => void;
 }
-export declare type AutoCompleteProps = AutoCompleteMultiProps | AutoCompleteSingleProps;
+export declare type AutoCompleteProps<T extends Option = Option> = AutoCompleteMultiProps<T> | AutoCompleteSingleProps<T>;
 declare type OptionsValue = string | number | boolean;
 export interface Option {
     value: OptionsValue;
@@ -57,22 +65,22 @@ export interface Option {
     disabled?: boolean;
     bypassNeedleMatch?: boolean;
 }
-export interface OptionItemProps {
-    option: Option;
+export interface OptionItemProps<T extends Option = Option> {
+    option: T;
     multiple: boolean;
     inputValue: string;
     highlighted: boolean;
 }
-export declare type OptionItemComponentType = ComponentType<OptionItemProps>;
+export declare type OptionItemComponentType<T extends Option = Option> = ComponentType<OptionItemProps<T>>;
 export interface OptionRendererParams {
     multiple: boolean;
     inputValue: string;
     highlighted: boolean;
 }
-export interface RenderValueTemplateArgs {
-    option: Option;
+export interface RenderValueTemplateArgs<T extends Option = Option> {
+    option: T;
     key: string;
     editable: boolean;
 }
-export declare type CreateFromInputValue = (options: Option[] | undefined, inputValue: string) => Option[];
+export declare type CreateFromInputValue<T extends Option = Option> = (options: T[] | undefined, inputValue: string) => Option[];
 export {};

package/esm/AutoComplete/utils.d.ts

@@ -1,4 +1,5 @@
-import type { AutoCompleteMultiProps, AutoCompleteProps, CreateFromInputValue } from "./types";
-export declare function isAutoCompleteMultiProps(props: AutoCompleteProps): props is AutoCompleteMultiProps;
-export declare const defaultCreateFromInputValue: CreateFromInputValue;
-export declare const caseInsensitiveCreateFromInputValue: CreateFromInputValue;
+import type { AutoCompleteLocale, AutoCompleteMultiProps, AutoCompleteProps, Option } from "./types";
+export declare function isAutoCompleteMultiProps<T extends Option = Option>(props: AutoCompleteProps<T>): props is AutoCompleteMultiProps<T>;
+export declare const defaultCreateFromInputValue: <T extends Option = Option>(options: T[] | undefined, inputValue: string) => Option[];
+export declare const caseInsensitiveCreateFromInputValue: <T extends Option = Option>(options: T[] | undefined, inputValue: string) => Option[];
+export declare const DEFAULT_AUTOCOMPLETE_LOCALE: Required<AutoCompleteLocale>;

package/esm/AutoComplete/utils.js

@@ -1,3 +1,4 @@
+import pluralize from "../utils/pluralize";
 export function isAutoCompleteMultiProps(props) {
   return Boolean(props.multiple);
 }
@@ -24,4 +25,19 @@ export var caseInsensitiveCreateFromInputValue = function caseInsensitiveCreateF
   return createFromInputValue(options, inputValue, function (option) {
     return option.value.toString().toLowerCase() === inputValue.toLowerCase();
   });
+};
+export var DEFAULT_AUTOCOMPLETE_LOCALE = {
+  clearInputButton: "Clear input value",
+  emptyStateTitle: "No matches found",
+  itemsAvailable: function itemsAvailable(count) {
+    return "".concat(pluralize(count, "item is", {
+      plural: "items are"
+    }), " available");
+  },
+  optionItemPrefix: function optionItemPrefix(multiple) {
+    return multiple ? "Add" : "Use";
+  },
+  showMoreButton: function showMoreButton(extraResults) {
+    return "Show ".concat(pluralize(extraResults, "result"), " more");
+  }
 };

package/esm/Avatars/ApplicationAvatar.js

@@ -18,7 +18,7 @@ export var ApplicationAvatar = function ApplicationAvatar(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size;
   return /*#__PURE__*/_jsx("div", {
-    className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["rounded inline-flex flex-shrink-0 items-center justify-center uppercase"]))), pickApplicationColors(application.applicationId), SIZE_CLASSNAMES[size], className),
+    className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["rounded inline-flex shrink-0 items-center justify-center uppercase"]))), pickApplicationColors(application.applicationId), SIZE_CLASSNAMES[size], className),
     style: size === "small" ? {
       fontSize: "8px"
     } : {},

package/esm/Banners/Alert/Alert.d.ts

@@ -18,6 +18,7 @@ export interface AlertProps {
     usageContext?: AlertContextType;
     icon?: IconComponentType;
     onDismiss?(): void;
+    children: ReactNode;
 }
 /**
 * Alerts inform users about important changes or temporally conditions. Use this component if you need to communicate something to users in a prominent way.

package/esm/Banners/Alert/Alert.js

@@ -106,7 +106,7 @@ export var Alert = function Alert(_ref) {
     className: containerClassName,
     style: style,
     children: [/*#__PURE__*/_jsx(Icon, {
-      className: cx(stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n            flex-shrink-0 mr-2\n            ", "\n            "])), title ? "mt-1" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
+      className: cx(stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n            shrink-0 mr-2\n            ", "\n            "])), title ? "mt-1" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
       size: "1rem"
     }), /*#__PURE__*/_jsxs("div", {
       className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["flex flex-1 flex-col ", ""])), onDismiss && "mr-6"),

package/esm/Banners/BigBertha/BigBertha.d.ts

@@ -1,7 +1,8 @@
-import type { FC } from "react";
+import type { FC, ReactNode } from "react";
 import type { IconComponentType } from "../../types";
 export interface BigBerthaProps {
     icon?: IconComponentType;
+    children: ReactNode;
 }
 /**
 * Major product wide announcement from Algolia to the users.

package/esm/Banners/Promote/Promote.d.ts

@@ -17,6 +17,7 @@ export declare type PromoteProps = {
     /** Buttons */
     actions?: ReactNode;
     onDismiss?(): void;
+    children: ReactNode;
 } & (CompactPromoteProps | WidePromoteProps);
 /**
 * A contextual way of showing our user that a new feature / product is available to them on a higher plan or as an option.

package/esm/Button/Button.js

@@ -68,12 +68,12 @@ export var Button = function Button(props) {
       size: BUTTON_LOADER_ICON_SIZES[size],
       thickness: 1
     }), StartIcon && /*#__PURE__*/_jsx(StartIcon, {
-      className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex-shrink-0 pr-2"]))), iconClassNames)
+      className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["shrink-0 pr-2"]))), iconClassNames)
     }), /*#__PURE__*/_jsx("span", {
       className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["truncate text-center"]))), textClassNames),
       children: children
     }), EndIcon && /*#__PURE__*/_jsx(EndIcon, {
-      className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["flex-shrink-0 pl-2"]))), iconClassNames)
+      className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["shrink-0 pl-2"]))), iconClassNames)
     })]
   }));
 };

package/esm/Button/Button.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = buttonPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const buttonPlugin: import('../tailwind-types').TailwindPlugin;
+declare const buttonPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/esm/Button/Button.tailwind.js

@@ -1,13 +1,11 @@
-import _disabledColor from "../styles/disabledColor";
 import _rgba from "../styles/rgba";
+import _disabledColor from "../styles/disabledColor";
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-var rgba = _rgba;
+var plugin = _plugin;
 var disabledColor = _disabledColor;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-
-var buttonPlugin = function buttonPlugin(_ref) {
+var rgba = _rgba;
+var buttonPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   // Button
@@ -135,24 +133,23 @@ var buttonPlugin = function buttonPlugin(_ref) {
       display: "flex",
       flexWrap: "nowrap",
       "& > .btn:not(:first-child):not(:last-child), & > :not(:first-child):not(:last-child) .btn": {
-        borderRadius: 0
+        borderRadius: "0px"
       },
       "& > .btn:first-child, & > :first-child .btn": {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0
+        borderTopRightRadius: "0px",
+        borderBottomRightRadius: "0px"
       },
       "& > .btn:not(:first-child), & > :not(:first-child) .btn": {
-        marginLeft: -1
+        marginLeft: "-1px"
       },
       "& > .btn:last-child, & > :last-child .btn": {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0
+        borderTopLeftRadius: "0px",
+        borderBottomLeftRadius: "0px"
       },
       "& .btn:active, & .btn-active, & .btn:focus": {
-        zIndex: 1
+        zIndex: "1"
       }
     }
   });
-};
-
+});
 export default buttonPlugin;