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

package/esm/AutoComplete/AutoComplete.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
@@ -12,9 +11,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(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; }
+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 _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); }; }
 
@@ -26,23 +25,25 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import React, { Component } from "react";
-import { createPortal } from "react-dom";
-import { Popper } from "react-popper";
-import Downshift from "downshift";
 import cx from "classnames";
+import Downshift from "downshift";
+import { Component } from "react";
+import { createPortal } from "react-dom";
 import { X } from "react-feather";
-import stl from "../styles/helpers/satellitePrefixer";
-import pluralize from "../utils/pluralize";
-import uniqBy from "../utils/uniqBy";
-import Card from "../Card";
+import { Popper } from "react-popper";
 import Button from "../Button";
+import Card from "../Card";
+import { FieldStateContext } from "../Field/FieldStateContext";
 import ScrollIndicator from "../ScrollIndicator";
+import stl from "../styles/helpers/satellitePrefixer";
 import Tag from "../Tag";
-import { FieldStateContext } from "../Field/FieldStateContext";
-import { defaultCreateFromInputValue, isAutoCompleteMultiProps } from "./utils";
-import DefaultOptionItem from "./components/DefaultOptionItem";
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 
 function optionToString(option) {
   return option ? option.label : "";
@@ -105,7 +106,8 @@ var MENU_POPPER_MODFIERS = [{
   }
 }];
 var BACKSPACE_KEY_CODE = 8;
-var defaultEmptyState = /*#__PURE__*/React.createElement(AutoCompleteEmptyState, {
+
+var defaultEmptyState = /*#__PURE__*/_jsx(AutoCompleteEmptyState, {
   title: "No matches found"
 });
 /**
@@ -125,6 +127,7 @@ var defaultEmptyState = /*#__PURE__*/React.createElement(AutoCompleteEmptyState,
  * - Style different data
  */
 
+
 export var AutoComplete = /*#__PURE__*/function (_Component) {
   _inherits(AutoComplete, _Component);
 
@@ -373,45 +376,50 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
         autoComplete: "off",
         autoFocus: autoFocus
       });
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/_jsxs("div", {
         className: inputContainerClassName,
         onClick: _this.handleFakeInputClick,
-        ref: _this.handleInputContainerRefUpdate
-      }, Icon && /*#__PURE__*/React.createElement(Icon, {
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mr-4 flex-shrink-0 ", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500"),
-        size: "1rem"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["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.createElement(Tag, {
-          key: String(option.value),
-          onDelete: disabled ? undefined : function () {
-            return _this.removeValue(option);
-          },
-          className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["m-1 max-w-48 ", ""])), disabled && "opacity-50")
-        }, option.label);
-      }), shouldRenderCustomTemplate && renderValueTemplate({
-        option: value,
-        key: String(value),
-        editable: !disabled
-      }), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
-        "data-lpignore": true
-      }))), (showClearButton || endItem) && /*#__PURE__*/React.createElement("div", {
-        className: cx(showClearButton && endItem && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["my-2 flex self-end space-x-4"]))))
-      }, endItem && /*#__PURE__*/React.createElement("div", {
-        className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["text-grey-700 my-auto"])))
-      }, endItem), showClearButton && /*#__PURE__*/React.createElement("button", {
-        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"
-      }, /*#__PURE__*/React.createElement(X, {
-        size: ".75rem"
-      }))));
+        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"),
+          size: "1rem"
+        }), /*#__PURE__*/_jsxs("div", {
+          className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["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__*/_jsx(Tag, {
+              onDelete: disabled ? undefined : function () {
+                return _this.removeValue(option);
+              },
+              className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["m-1 max-w-48 ", ""])), disabled && "opacity-50"),
+              children: option.label
+            }, String(option.value));
+          }), shouldRenderCustomTemplate && renderValueTemplate({
+            option: value,
+            key: String(value),
+            editable: !disabled
+          }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+            "data-lpignore": true
+          }))]
+        }), (showClearButton || endItem) && /*#__PURE__*/_jsxs("div", {
+          className: cx(showClearButton && endItem && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["my-2 flex self-end space-x-4"])))),
+          children: [endItem && /*#__PURE__*/_jsx("div", {
+            className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["text-grey-700 my-auto"]))),
+            children: endItem
+          }), showClearButton && /*#__PURE__*/_jsx("button", {
+            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",
+            children: /*#__PURE__*/_jsx(X, {
+              size: ".75rem"
+            })
+          })]
+        })]
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderMenu", function (results, autocompleteHelpers) {
@@ -451,49 +459,59 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
       var showResults = results.length > 0;
 
       if (!isOpen || !showResults && !shouldShowEmptyState && !shouldShowDefaultEmptyState) {
-        return /*#__PURE__*/React.createElement("ul", _extends({}, getMenuProps(), {
+        return /*#__PURE__*/_jsx("ul", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
           className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["hidden h-0"])))
         }));
       }
 
-      return /*#__PURE__*/React.createElement(Popper, {
+      return /*#__PURE__*/_jsx(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.createElement("div", {
-          className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["z-dropdown"]))), menuClassName),
-          style: _objectSpread(_objectSpread({}, popper.style), dropdownStyle),
-          "data-popper-placement": popper.placement,
-          ref: popper.ref
-        }, /*#__PURE__*/React.createElement(Card, {
-          fullBleed: true,
-          elevation: "300"
-        }, results.length === 0 ? /*#__PURE__*/React.createElement("div", _extends({}, getMenuProps(), {
-          className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["min-h-10"])))
-        }), emptyState) : /*#__PURE__*/React.createElement(ScrollIndicator, {
-          className: menuSize === "large" ? stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["max-h-64"])))
-        }, /*#__PURE__*/React.createElement("ul", getMenuProps(), results.slice(0, showAllResults ? Number.MAX_SAFE_INTEGER : maxResults).map(function (result, index) {
-          return /*#__PURE__*/React.createElement("li", _extends({
-            key: result.value
-          }, getItemProps({
-            item: result,
-            disabled: result.disabled,
-            className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\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.createElement(OptionItem, _extends({}, optionItemProps, {
-            highlighted: index === highlightedIndex,
-            option: result
-          })));
-        }), extraResults > 0 && !showAllResults && /*#__PURE__*/React.createElement("li", {
-          className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["p-2 text-right"])))
-        }, /*#__PURE__*/React.createElement(Button, {
-          variant: "subtle",
-          size: "small",
-          onMouseDown: _this.handleShowAllResults
-        }, "Show ", pluralize(extraResults, "result"), " more")))), menuFooter && /*#__PURE__*/React.createElement("footer", {
-          className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["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) {
+          return /*#__PURE__*/_jsx("div", {
+            className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["z-dropdown"]))), menuClassName),
+            style: _objectSpread(_objectSpread({}, popper.style), dropdownStyle),
+            "data-popper-placement": popper.placement,
+            ref: popper.ref,
+            children: /*#__PURE__*/_jsxs(Card, {
+              fullBleed: true,
+              elevation: "300",
+              children: [results.length === 0 ? /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+                className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["min-h-10"]))),
+                children: emptyState
+              })) : /*#__PURE__*/_jsx(ScrollIndicator, {
+                className: menuSize === "large" ? stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["max-h-64"]))),
+                children: /*#__PURE__*/_jsxs("ul", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+                  children: [results.slice(0, showAllResults ? Number.MAX_SAFE_INTEGER : maxResults).map(function (result, index) {
+                    return /*#__PURE__*/_jsx("li", _objectSpread(_objectSpread({}, getItemProps({
+                      item: result,
+                      disabled: result.disabled,
+                      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\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__*/_jsx(OptionItem, _objectSpread(_objectSpread({}, optionItemProps), {}, {
+                        highlighted: index === highlightedIndex,
+                        option: result
+                      }))
+                    }), result.value);
+                  }), extraResults > 0 && !showAllResults && /*#__PURE__*/_jsx("li", {
+                    className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["p-2 text-right"]))),
+                    children: /*#__PURE__*/_jsxs(Button, {
+                      variant: "subtle",
+                      size: "small",
+                      onMouseDown: _this.handleShowAllResults,
+                      children: ["Show ", pluralize(extraResults, "result"), " more"]
+                    })
+                  })]
+                }))
+              }), menuFooter && /*#__PURE__*/_jsx("footer", {
+                className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"]))),
+                children: menuFooter
+              })]
+            })
+          });
+        }
       });
     });
 
@@ -513,9 +531,10 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
         results.unshift.apply(results, _toConsumableArray(createFromInputValue(options, inputValue)));
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
-      }, _this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/createPortal(_this.renderMenu(results, autocompleteHelpers), document.body));
+      return /*#__PURE__*/_jsxs("div", {
+        className: className,
+        children: [_this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/createPortal(_this.renderMenu(results, autocompleteHelpers), document.body)]
+      });
     });
 
     return _this;
@@ -543,23 +562,26 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
       var _this2 = this;
 
       var inputValue = (this.props.inputValue !== undefined ? this.props.inputValue : this.state.inputValue) || "";
-      return /*#__PURE__*/React.createElement(FieldStateContext.Consumer, null, function (fieldState) {
-        return /*#__PURE__*/React.createElement(Downshift, {
-          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__*/_jsx(FieldStateContext.Consumer, {
+        children: function children(fieldState) {
+          return /*#__PURE__*/_jsx(Downshift, {
+            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,
+            children: function children(autocompleteHelpers) {
+              return _this2.renderSelect(autocompleteHelpers, fieldState);
+            }
+          });
+        }
       });
     }
   }]);

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

@@ -1,13 +1,13 @@
-import React from "react";
-import { IconComponentType } from "../../types";
+import type { ReactNode } from "react";
 import { MedallionVariant } from "../../Medallion";
+import type { IconComponentType } from "../../types";
 export interface AutoCompleteEmptyStateProps {
     icon?: IconComponentType;
     variant?: MedallionVariant;
     /** Descriptive title for state */
-    title: React.ReactNode;
+    title: ReactNode;
     /** Optional description to explain why the screen is empty or define next steps */
-    description?: React.ReactNode;
+    description?: ReactNode;
 }
 export declare const AutoCompleteEmptyState: ({ icon, variant, title, description, }: AutoCompleteEmptyStateProps) => JSX.Element;
 export default AutoCompleteEmptyState;

package/esm/AutoComplete/components/AutoCompleteEmptyState.js

@@ -2,10 +2,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import React from "react";
 import { X } from "react-feather";
-import stl from "../../styles/helpers/satellitePrefixer";
 import { Medallion } from "../../Medallion";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export var AutoCompleteEmptyState = function AutoCompleteEmptyState(_ref) {
   var _ref$icon = _ref.icon,
       icon = _ref$icon === void 0 ? X : _ref$icon,
@@ -13,15 +14,18 @@ export var AutoCompleteEmptyState = function AutoCompleteEmptyState(_ref) {
       variant = _ref$variant === void 0 ? "grey" : _ref$variant,
       title = _ref.title,
       description = _ref.description;
-  return /*#__PURE__*/React.createElement("div", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col items-center p-6"])))
-  }, /*#__PURE__*/React.createElement(Medallion, {
-    icon: icon,
-    variant: variant
-  }), /*#__PURE__*/React.createElement("span", {
-    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["font-semibold pt-4"])))
-  }, title), description && /*#__PURE__*/React.createElement("p", {
-    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-caption typo-subdued pt-4"])))
-  }, description));
+  return /*#__PURE__*/_jsxs("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col items-center p-6"]))),
+    children: [/*#__PURE__*/_jsx(Medallion, {
+      icon: icon,
+      variant: variant
+    }), /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["font-semibold pt-4"]))),
+      children: title
+    }), description && /*#__PURE__*/_jsx("p", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-caption typo-subdued pt-4"]))),
+      children: description
+    })]
+  });
 };
 export default AutoCompleteEmptyState;

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

@@ -1,3 +1,3 @@
-import { OptionItemComponentType } from "../types";
+import type { OptionItemComponentType } from "../types";
 declare const DefaultOptionItem: OptionItemComponentType;
 export default DefaultOptionItem;

package/esm/AutoComplete/components/DefaultOptionItem.js

@@ -2,26 +2,32 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import React from "react";
 import stl from "../../styles/helpers/satellitePrefixer";
-var metadataSpacer = /*#__PURE__*/React.createElement("span", {
-  className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["px-1"])))
-}, "\xB7");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+var metadataSpacer = /*#__PURE__*/_jsx("span", {
+  className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["px-1"]))),
+  children: "\xB7"
+});
 
 var DefaultOptionItem = function DefaultOptionItem(_ref) {
   var option = _ref.option,
       multiple = _ref.multiple;
-  return /*#__PURE__*/React.createElement("div", {
-    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate py-2"])))
-  }, /*#__PURE__*/React.createElement("span", {
-    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["font-semibold text-md text-grey-900"])))
-  }, option["new"] ? "".concat(multiple ? "Add " : "Use ", " ").concat(option.label) : option.label), option.metadata && option.metadata.length > 0 && /*#__PURE__*/React.createElement("ul", {
-    className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex text-grey-600"])))
-  }, option.metadata.map(function (metadata, idx) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: metadata
-    }, metadata, idx !== option.metadata.length - 1 && metadataSpacer);
-  })));
+  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
+    }), 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) {
+        return /*#__PURE__*/_jsxs("li", {
+          children: [metadata, idx !== option.metadata.length - 1 && metadataSpacer]
+        }, metadata);
+      })
+    })]
+  });
 };
 
 export default DefaultOptionItem;

package/esm/AutoComplete/types.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { IconComponentType } from "../types";
+import type { ComponentType, FocusEventHandler, ReactNode } from "react";
+import type { IconComponentType } from "../types";
 export declare type AutoCompleteVariant = "medium" | "large";
 export interface AutoCompleteBaseProps {
     id?: string;
@@ -15,8 +15,8 @@ export interface AutoCompleteBaseProps {
     options?: Option[];
     inputValue?: string;
     onTextChange?: (text: string) => any;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
     creatable?: boolean;
     clearable?: boolean;
     selectOnBlur?: boolean;
@@ -25,12 +25,12 @@ export interface AutoCompleteBaseProps {
     separatorKeyCodes?: number[];
     separatorKeys?: string[];
     renderValueTemplate?: (args: RenderValueTemplateArgs) => JSX.Element;
-    emptyState?: React.ReactNode;
-    menuFooter?: React.ReactNode;
+    emptyState?: ReactNode;
+    menuFooter?: ReactNode;
     optionItemComponent?: OptionItemComponentType;
     /** Keep the input on a single line */
     noWrap?: boolean;
-    endItem?: React.ReactNode;
+    endItem?: ReactNode;
     /**
      * `medium` will display about 5 results in the dropdown; use `large` variant to display more
      * @default "medium"
@@ -63,7 +63,7 @@ export interface OptionItemProps {
     inputValue: string;
     highlighted: boolean;
 }
-export declare type OptionItemComponentType = React.ComponentType<OptionItemProps>;
+export declare type OptionItemComponentType = ComponentType<OptionItemProps>;
 export interface OptionRendererParams {
     multiple: boolean;
     inputValue: string;

package/esm/AutoComplete/utils.d.ts

@@ -1,4 +1,4 @@
-import { CreateFromInputValue, AutoCompleteProps, AutoCompleteMultiProps } from "./types";
+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;

package/esm/Avatars/ApplicationAvatar.js

@@ -2,10 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import React from "react";
 import cx from "classnames";
 import stl from "../styles/helpers/satellitePrefixer";
 import { getApplicationInitials, pickApplicationColors } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
 var SIZE_CLASSNAMES = {
   small: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-4 h-4"]))),
   medium: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-8 h-8"])))
@@ -17,11 +17,12 @@ export var ApplicationAvatar = function ApplicationAvatar(_ref) {
       application = _ref.application,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size;
-  return /*#__PURE__*/React.createElement("div", {
+  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),
     style: size === "small" ? {
       fontSize: "8px"
-    } : {}
-  }, getApplicationInitials(application));
+    } : {},
+    children: getApplicationInitials(application)
+  });
 };
 export default ApplicationAvatar;

package/esm/Avatars/UserAvatar.js

@@ -3,10 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import React, { useEffect, useState } from "react";
 import cx from "classnames";
+import { useEffect, useState } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
-import { getUserInitials, getUserBackgroundClassName } from "./utils";
+import { getUserBackgroundClassName, getUserInitials } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 
 /** The `UserAvatar` is used as a visual representation of a user. */
 export var UserAvatar = function UserAvatar(_ref) {
@@ -26,22 +28,25 @@ export var UserAvatar = function UserAvatar(_ref) {
   useEffect(function () {
     return setImageLoaded(false);
   }, [user.avatar]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["relative overflow-hidden flex justify-center items-center rounded-full text-white uppercase transition-colors"]))), imageLoaded ? stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-white"]))) : getUserBackgroundClassName((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
     style: {
       width: size,
       height: size
-    }
-  }, /*#__PURE__*/React.createElement("span", null, initials), /*#__PURE__*/React.createElement("img", {
-    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          w-full absolute top-0 left-0\n          transition-opacity ", "\n        "])), imageLoaded ? "opacity-100" : "opacity-0"),
-    src: user.avatar,
-    alt: imageLoaded ? "".concat(user.name || user.email, "'s avatar") : "",
-    onLoad: function onLoad() {
-      return setImageLoaded(true);
     },
-    onError: function onError() {
-      return setImageLoaded(false);
-    }
-  }));
+    children: [/*#__PURE__*/_jsx("span", {
+      children: initials
+    }), /*#__PURE__*/_jsx("img", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          w-full absolute top-0 left-0\n          transition-opacity ", "\n        "])), imageLoaded ? "opacity-100" : "opacity-0"),
+      src: user.avatar,
+      alt: imageLoaded ? "".concat(user.name || user.email, "'s avatar") : "",
+      onLoad: function onLoad() {
+        return setImageLoaded(true);
+      },
+      onError: function onError() {
+        return setImageLoaded(false);
+      }
+    })]
+  });
 };
 export default UserAvatar;

package/esm/Avatars/utils.d.ts

@@ -1,4 +1,4 @@
-import { MinimalApplication, MinimalUser } from "./types";
+import type { MinimalApplication, MinimalUser } from "./types";
 export declare const pickApplicationColors: (applicationId: string) => string;
 export declare const getApplicationIdInitial: (applicationId: string) => string;
 export declare const getApplicationInitials: ({ name, applicationId }: MinimalApplication) => string;

package/esm/Badge/Badge.d.ts

@@ -1,17 +1,17 @@
-import React, { FunctionComponent } from "react";
-import { AtLeastOne, ColorVariant, IconComponentType } from "../types";
+import type { FunctionComponent, HTMLAttributes, ReactNode } from "react";
+import type { AtLeastOne, ColorVariant, IconComponentType } from "../types";
 export declare type BadgeSizes = "default" | "small";
 export declare type BadgeVariants = ColorVariant | "pink";
-interface BaseBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+interface BaseBadgeProps extends HTMLAttributes<HTMLDivElement> {
     /** @default grey */
     variant?: BadgeVariants;
     /** @default default */
     size?: BadgeSizes;
 }
 declare type BadgeContentProps = {
-    children: React.ReactNode;
+    children: ReactNode;
     /** An additional value to accompany the `Badge` */
-    value: React.ReactNode;
+    value: ReactNode;
     /** Left aligned icon */
     icon: IconComponentType;
 };