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

package/README.md

@@ -82,39 +82,24 @@ yarn add -D tailwindcss
 Example `main.css`
 
 ```css
-@import "tailwindcss/base";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-@import "tailwindcss/components";
-
-@import "tailwindcss/utilities";
+@layer components {
+  /* your custom components */
+}
 ```
 
 Example `postcss.config.js`
 
 ```js
-const purgecss = require("@fullhuman/postcss-purgecss");
-const cssnano = require("cssnano");
-
-// Feel free to customize it
-const tailwindConfig = require("@algolia/satellite/cjs/styles/tailwind.config.js");
-
-// If you're gonna use purge css, you need to configure a custom extractor to avoid removing classes used in the Satellite components.
-const { makePurgeCssExtractor } = require("@algolia/satellite");
-const PurgeCssExtractor = makePurgeCssExtractor(tailwindConfig.prefix);
+// ...
 
 const plugins = [
   require("postcss-import"),
   require("tailwindcss")(tailwindConfig),
   require("autoprefixer"),
-  purgecss({
-    content: ["./dist/**/*.{js,html}"],
-    defaultExtractor: PurgeCssExtractor,
-    // This entry will allow you to safelist some prefix in order to avoid some classnames to be wiped out.
-    // Here, it will keep all the classnames starting with:
-    // - 'ais-*' to preserve the instant-search widgets style
-    // - 'DayPicker*' to preserve all the DatePicker styles (used in the DatePicker and DateRangePicker)
-    whitelistPatterns: [/^ais-/, /^DayPicker/],
-  }),
   cssnano({ preset: "default" }),
 ];
 
@@ -124,11 +109,31 @@ module.exports = { plugins };
 Example `tailwind.config.js`
 
 ```js
-const config = require("@algolia/satellite/cjs/styles/tailwind.config.js");
-
-config.variants.backgroundColor = ["responsive", "hover", "focus", "active"];
-
-module.exports = config;
+const { makePurgeCssExtractor } = require('@algolia/satellite');
+const satelliteConfig = require("@algolia/satellite/cjs/styles/tailwind.config.js");
+
+module.exports = {
+  presets: [satellite],
+  content: [
+    files: [
+      `node_modules/@algolia/satellite/**/*.js`,
+      `node_modules/react-day-picker/lib/style.css`,
+      `node_modules/react-day-picker/src/**/*.js`,
+
+      `src/**/*.{ts,tsx,js,jsx}`,
+      // Any other sources files
+    ],
+    extract: makePurgeCssExtractor(prefix),
+  ],
+  theme: {
+    extend: {
+      // any colors, fonts... you want to add
+    }
+  },
+  plugins: [
+    // extra plugins you want to add
+  ]
+};
 ```
 
 Example `index.jsx`
@@ -139,7 +144,7 @@ import ReactDOM from "react-dom";
 
 import "./main.css";
 
-import { Button, stl } from "@algolia/satellite/Button";
+import { Button, stl } from "@algolia/satellite";
 
 const loading = true;
 

package/cjs/AnnouncementBadge/AnnouncementBadge.d.ts

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

package/cjs/AnnouncementBadge/AnnouncementBadge.js

@@ -13,7 +13,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _Satellite = require("../Satellite");
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
@@ -27,6 +29,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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_LOCALE = {
+  beta: "beta",
+  internal: "internal",
+  "new": "new",
+  pilot: "pilot"
+};
 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"]))),
@@ -40,12 +48,16 @@ var AnnouncementBadge = function AnnouncementBadge(_ref) {
       text = _ref$text === void 0 ? "new" : _ref$text,
       variantProp = _ref.variant,
       className = _ref.className,
-      locale = _ref.locale,
+      propsLocale = _ref.locale,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var contextLocale = (0, _Satellite.useLocale)("announcementBadge");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_LOCALE), contextLocale), propsLocale);
+
   var variant = typeof variantProp === "string" ? variantProp : text === "internal" ? "red" : "accent";
   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
+    className: (0, _clsx["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]
   }));
 };
 

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -10,7 +10,7 @@ interface State {
     showAllResults: boolean;
 }
 declare type DefaultOptionProps = OptionItemProps & {
-    locale?: AutoCompleteLocale;
+    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.
@@ -29,6 +29,7 @@ declare type DefaultOptionProps = OptionItemProps & {
  * - Style different data
  */
 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;
@@ -38,15 +39,8 @@ export declare class AutoComplete<T extends Option = Option> extends Component<A
         options: never[];
         separatorKeyCodes: never[];
         separatorKeys: never[];
-        optionItemComponent: ({ locale, ...props }: DefaultOptionProps) => JSX.Element;
+        optionItemComponent: ({ optionItemPrefix, ...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;
@@ -62,10 +56,11 @@ export declare class AutoComplete<T extends Option = Option> extends Component<A
     handleChange: (option: T) => void;
     handleShowAllResults: (evt: MouseEvent<HTMLButtonElement>) => void;
     removeValue: (removedOption: T) => void;
-    getA11yStatusMessage: (options: A11yStatusMessageOptions<any>) => string;
+    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/cjs/AutoComplete/AutoComplete.js

@@ -29,7 +29,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _downshift = _interopRequireDefault(require("downshift"));
 
@@ -47,14 +47,14 @@ var _Card = _interopRequireDefault(require("../Card"));
 
 var _FieldStateContext = require("../Field/FieldStateContext");
 
+var _Satellite = require("../Satellite");
+
 var _ScrollIndicator = _interopRequireDefault(require("../ScrollIndicator"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _Tag = _interopRequireDefault(require("../Tag"));
 
-var _pluralize = _interopRequireDefault(require("../utils/pluralize"));
-
 var _uniqBy = _interopRequireDefault(require("../utils/uniqBy"));
 
 var _AutoCompleteEmptyState = _interopRequireDefault(require("./components/AutoCompleteEmptyState"));
@@ -67,7 +67,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
-var _excluded = ["locale"];
+var _excluded = ["optionItemPrefix"];
 
 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); }; }
 
@@ -147,25 +147,18 @@ var BACKSPACE_KEY_CODE = 8;
 
 /** @ignore */
 var DefaultEmptyState = function DefaultEmptyState(_ref) {
-  var _locale$emptyStateTit;
-
-  var locale = _ref.locale;
+  var emptyStateTitle = _ref.emptyStateTitle;
   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
+    title: emptyStateTitle
   });
 };
 
-/** @ignore */
 var DefaultOption = function DefaultOption(_ref2) {
-  var locale = _ref2.locale,
+  var optionItemPrefix = _ref2.optionItemPrefix,
       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);
-      }
+      optionItemPrefix: optionItemPrefix !== null && optionItemPrefix !== void 0 ? optionItemPrefix : _utils.DEFAULT_AUTOCOMPLETE_LOCALE.optionItemPrefix
     }
   }));
 };
@@ -366,22 +359,16 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
       }
 
       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 : "";
+        return _this.locale.emptyStateTitle;
       }
 
       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 _this.locale.itemsAvailable(options.resultCount);
       }
 
       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,
@@ -447,10 +434,10 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
         onClick: _this.handleFakeInputClick,
         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"),
+          className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["mr-4 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),
+          className: (0, _clsx["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,
@@ -471,7 +458,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
             "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"])))),
+          className: (0, _clsx["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
@@ -479,7 +466,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
             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,
+            "aria-label": _this.locale.clearInputButton,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
               size: ".75rem"
             })
@@ -496,7 +483,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
           inputValue = autocompleteHelpers.inputValue,
           isOpen = autocompleteHelpers.isOpen;
       var defaultEmptyState = /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultEmptyState, {
-        locale: _this.props.locale
+        emptyStateTitle: _this.locale.emptyStateTitle
       });
       var _this$props4 = _this.props,
           menuClassName = _this$props4.menuClassName,
@@ -538,10 +525,8 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
         referenceElement: (_this$inputContainerR3 = _this.inputContainerRef) !== null && _this$inputContainerR3 !== void 0 ? _this$inputContainerR3 : undefined,
         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),
+            className: (0, _clsx["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,
@@ -563,7 +548,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
                       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionItem, _objectSpread(_objectSpread({}, optionItemProps), {}, {
                         highlighted: index === highlightedIndex,
                         option: result,
-                        locale: _this.props.locale
+                        optionItemPrefix: _this.locale.optionItemPrefix
                       }))
                     }), result.value);
                   }), extraResults > 0 && !showAllResults && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
@@ -572,7 +557,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
                       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)
+                      children: _this.locale.showMoreButton(extraResults)
                     })
                   })]
                 }))
@@ -586,6 +571,8 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderSelect", function (autocompleteHelpers, fieldState) {
+      var _this$context$portalT;
+
       var _this$props5 = _this.props,
           className = _this$props5.className,
           options = _this$props5.options,
@@ -603,7 +590,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
 
       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)]
+        children: [_this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/(0, _reactDom.createPortal)(_this.renderMenu(results, autocompleteHelpers), (_this$context$portalT = _this.context["portalTarget"]) !== null && _this$context$portalT !== void 0 ? _this$context$portalT : document.body)]
       });
     });
     return _this;
@@ -625,6 +612,11 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
         });
       }
     }
+  }, {
+    key: "locale",
+    get: function get() {
+      return _objectSpread(_objectSpread(_objectSpread({}, _utils.DEFAULT_AUTOCOMPLETE_LOCALE), this.context["locales"]), this.props.locale);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -659,6 +651,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
 }(_react.Component);
 
 exports.AutoComplete = AutoComplete;
+(0, _defineProperty2["default"])(AutoComplete, "contextType", _Satellite.SatelliteContext);
 (0, _defineProperty2["default"])(AutoComplete, "defaultProps", {
   clearable: false,
   creatable: false,
@@ -669,22 +662,7 @@ exports.AutoComplete = AutoComplete;
   separatorKeyCodes: [],
   separatorKeys: [],
   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";
-    }
-  }
+  noWrap: false
 });
 var _default = AutoComplete;
 exports["default"] = _default;

package/cjs/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/cjs/AutoComplete/AutoComplete.tailwind.js

@@ -1,15 +1,13 @@
 "use strict";
 
 // @ts-check
+var plugin = require("tailwindcss/plugin");
+
 var disabledColor = require("../styles/disabledColor");
 
 var rgba = require("../styles/rgba");
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-
 
-var autoCompletePlugin = function autoCompletePlugin(_ref) {
+var autoCompletePlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -32,14 +30,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
 
         }
       }
@@ -69,12 +67,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"),
@@ -94,6 +92,5 @@ var autoCompletePlugin = function autoCompletePlugin(_ref) {
       }
     }
   });
-};
-
+});
 module.exports = autoCompletePlugin;

package/cjs/AutoComplete/utils.d.ts

@@ -1,4 +1,5 @@
-import type { AutoCompleteMultiProps, AutoCompleteProps, Option } from "./types";
+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/cjs/AutoComplete/utils.js

@@ -1,11 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultCreateFromInputValue = exports.caseInsensitiveCreateFromInputValue = void 0;
+exports.defaultCreateFromInputValue = exports.caseInsensitiveCreateFromInputValue = exports.DEFAULT_AUTOCOMPLETE_LOCALE = void 0;
 exports.isAutoCompleteMultiProps = isAutoCompleteMultiProps;
 
+var _pluralize = _interopRequireDefault(require("../utils/pluralize"));
+
 function isAutoCompleteMultiProps(props) {
   return Boolean(props.multiple);
 }
@@ -37,4 +41,20 @@ var caseInsensitiveCreateFromInputValue = function caseInsensitiveCreateFromInpu
   });
 };
 
-exports.caseInsensitiveCreateFromInputValue = caseInsensitiveCreateFromInputValue;
+exports.caseInsensitiveCreateFromInputValue = caseInsensitiveCreateFromInputValue;
+var DEFAULT_AUTOCOMPLETE_LOCALE = {
+  clearInputButton: "Clear input value",
+  emptyStateTitle: "No matches found",
+  itemsAvailable: function itemsAvailable(count) {
+    return "".concat((0, _pluralize["default"])(count, "item is", {
+      plural: "items are"
+    }), " available");
+  },
+  optionItemPrefix: function optionItemPrefix(multiple) {
+    return multiple ? "Add" : "Use";
+  },
+  showMoreButton: function showMoreButton(extraResults) {
+    return "Show ".concat((0, _pluralize["default"])(extraResults, "result"), " more");
+  }
+};
+exports.DEFAULT_AUTOCOMPLETE_LOCALE = DEFAULT_AUTOCOMPLETE_LOCALE;

package/cjs/Avatars/ApplicationAvatar.js

@@ -9,7 +9,7 @@ exports["default"] = exports.ApplicationAvatar = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
@@ -31,7 +31,7 @@ var ApplicationAvatar = function ApplicationAvatar(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["rounded inline-flex flex-shrink-0 items-center justify-center uppercase"]))), (0, _utils.pickApplicationColors)(application.applicationId), SIZE_CLASSNAMES[size], className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["rounded inline-flex shrink-0 items-center justify-center uppercase"]))), (0, _utils.pickApplicationColors)(application.applicationId), SIZE_CLASSNAMES[size], className),
     style: size === "small" ? {
       fontSize: "8px"
     } : {},

package/cjs/Avatars/UserAvatar.js

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -42,7 +42,7 @@ var UserAvatar = function UserAvatar(_ref) {
     return setImageLoaded(false);
   }, [user.avatar]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["relative overflow-hidden flex justify-center items-center rounded-full text-white uppercase transition-colors"]))), imageLoaded ? (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-white"]))) : (0, _utils.getUserBackgroundClassName)((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["relative overflow-hidden flex justify-center items-center rounded-full text-white uppercase transition-colors"]))), imageLoaded ? (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-white"]))) : (0, _utils.getUserBackgroundClassName)((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
     style: {
       width: size,
       height: size

package/cjs/Avatars/utils.js

@@ -18,8 +18,12 @@ var _hashCode = _interopRequireDefault(require("../utils/hashCode"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
 
 /** APPLICATION */
-var APPLICATION_COLORS_CLASSNAMES = [(0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["bg-grey-200 text-grey-800"]))), (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-200 text-nebula-800"]))), (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-200 text-blue-800"]))), (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-green-200 text-green-800"]))), (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-200 text-pink-800"]))), (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-red-200 text-red-800"]))), (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-200 text-orange-800"]))), // Darker variants
-(0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-300 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-300 text-nebula-900"]))), (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-300 text-blue-900"]))), (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["bg-green-300 text-green-900"]))), (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-300 text-pink-900"]))), (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["bg-red-300 text-red-900"]))), (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-300 text-orange-900"])))];
+var APPLICATION_COLORS_CLASSNAMES = [
+/* eslint-disable @algolia/satellite/prefer-accent */
+(0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["bg-grey-200 text-grey-800"]))), (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-200 text-nebula-800"]))), (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-200 text-blue-800"]))), (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-green-200 text-green-800"]))), (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-200 text-pink-800"]))), (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-red-200 text-red-800"]))), (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-200 text-orange-800"]))), // Darker variants
+(0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-300 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-300 text-nebula-900"]))), (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-300 text-blue-900"]))), (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["bg-green-300 text-green-900"]))), (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-300 text-pink-900"]))), (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["bg-red-300 text-red-900"]))), (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-300 text-orange-900"])))
+/* eslint-enable @algolia/satellite/prefer-accent */
+];
 
 var pickApplicationColors = function pickApplicationColors(applicationId) {
   var _APPLICATION_COLORS_C;
@@ -59,8 +63,12 @@ var getApplicationInitials = function getApplicationInitials(_ref) {
 
 
 exports.getApplicationInitials = getApplicationInitials;
-var USER_COLORS_CLASSNAMES = [(0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-400"]))), (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-400"]))), (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-400"]))), (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["bg-green-400"]))), (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-400"]))), (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["bg-red-400"]))), (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-400"]))), // Darker variants
-(0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-700"]))), (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-700"]))), (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-700"]))), (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["bg-green-700"]))), (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-700"]))), (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["bg-red-700"]))), (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-700"])))];
+var USER_COLORS_CLASSNAMES = [
+/* eslint-disable @algolia/satellite/prefer-accent */
+(0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-400"]))), (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-400"]))), (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-400"]))), (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["bg-green-400"]))), (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-400"]))), (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["bg-red-400"]))), (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-400"]))), // Darker variants
+(0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-700"]))), (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-700"]))), (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-700"]))), (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["bg-green-700"]))), (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-700"]))), (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["bg-red-700"]))), (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-700"])))
+/* eslint-enable @algolia/satellite/prefer-accent */
+];
 
 var getUserBackgroundClassName = function getUserBackgroundClassName(email) {
   var _USER_COLORS_CLASSNAM;