@algolia/satellite 1.0.0-beta.14 → 1.0.0-beta.141

package/cjs/AutoComplete/AutoComplete.tailwind.d.ts

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

package/cjs/AutoComplete/AutoComplete.tailwind.js

@@ -0,0 +1,96 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+
+var disabledColor = require("../styles/disabledColor");
+
+var rgba = require("../styles/rgba");
+
+var autoCompletePlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+      theme = _ref.theme;
+  addComponents({
+    ".autocomplete-container": {
+      display: "flex",
+      alignItems: "center",
+      width: "100%",
+      minHeight: "2.5rem",
+      padding: "0 ".concat(theme("spacing.4")),
+      overflow: "hidden",
+      fontSize: theme("fontSize.base"),
+      lineHeight: theme("lineHeight.base"),
+      cursor: "text",
+      backgroundColor: theme("colors.white"),
+      borderRadius: theme("borderRadius.DEFAULT"),
+      border: "1px solid ".concat(theme("colors.grey.200")),
+      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
+      transition: "all 100ms ease-in-out",
+      // Workaround for ie
+      "&::after": {
+        content: '" "',
+        display: "block",
+        minHeight: "30px",
+        // don't ask me why 30
+        fontSize: "0px"
+      },
+      "&.autocomplete-large": {
+        minHeight: "3rem",
+        "&::after": {
+          minHeight: "38px" // don't ask me why 38
+
+        }
+      }
+    },
+    ".autocomplete-focused, .autocomplete-container:focus-within": {
+      borderColor: theme("colors.accent.600"),
+      boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5"))
+    },
+    ".autocomplete-disabled": {
+      cursor: "not-allowed",
+      backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
+      borderColor: disabledColor(theme("colors.grey.200")),
+      boxShadow: "none",
+      ".autocomplete-input, .autocomplete-input::placeholder": {
+        color: theme("colors.grey.300"),
+        pointerEvents: "none"
+      }
+    },
+    ".autocomplete-invalid:not(.autocomplete-disabled)": {
+      backgroundColor: theme("colors.red.100"),
+      borderColor: theme("colors.red.700")
+    },
+    ".autocomplete-nowrap": {
+      overflowX: "scroll",
+      WebkitOverflowScrolling: "touch",
+      // Remove scrollbars
+      scrollbarWidth: "none",
+      msOverflowStyle: "-ms-autohiding-scrollbar",
+      "&::-webkit-scrollbar": {
+        width: "0px",
+        height: "0px"
+      }
+    },
+    ".autocomplete-input": {
+      flex: "1",
+      backgroundColor: "transparent",
+      caretColor: theme("colors.grey.600"),
+      color: theme("colors.grey.900"),
+      minWidth: "10ch",
+      "&:focus": {
+        outline: "none"
+      },
+      "&::placeholder": {
+        color: theme("colors.grey.600")
+      }
+    },
+    ".autocomplete-result": {
+      // Search highlight
+      "&:not([disabled]) em": {
+        fontStyle: "normal",
+        background: theme("colors.accent.300")
+      }
+    }
+  });
+});
+module.exports = autoCompletePlugin;

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

@@ -0,0 +1,13 @@
+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: ReactNode;
+    /** Optional description to explain why the screen is empty or define next steps */
+    description?: ReactNode;
+}
+export declare const AutoCompleteEmptyState: ({ icon, variant, title, description, }: AutoCompleteEmptyStateProps) => JSX.Element;
+export default AutoCompleteEmptyState;

package/cjs/AutoComplete/components/AutoCompleteEmptyState.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.AutoCompleteEmptyState = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _reactFeather = require("react-feather");
+
+var _Medallion = require("../../Medallion");
+
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var AutoCompleteEmptyState = function AutoCompleteEmptyState(_ref) {
+  var _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? _reactFeather.X : _ref$icon,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "grey" : _ref$variant,
+      title = _ref.title,
+      description = _ref.description;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-center p-6"]))),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Medallion.Medallion, {
+      icon: icon,
+      variant: variant
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["font-semibold pt-4"]))),
+      children: title
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["display-caption typo-subdued pt-4"]))),
+      children: description
+    })]
+  });
+};
+
+exports.AutoCompleteEmptyState = AutoCompleteEmptyState;
+var _default = AutoCompleteEmptyState;
+exports["default"] = _default;

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

@@ -0,0 +1,7 @@
+/// <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/cjs/AutoComplete/components/DefaultOptionItem.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var metadataSpacer = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["px-1"]))),
+  children: "\xB7"
+});
+
+var DefaultOptionItem = function DefaultOptionItem(_ref) {
+  var _locale$optionItemPre;
+
+  var option = _ref.option,
+      multiple = _ref.multiple,
+      locale = _ref.locale;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate py-2"]))),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["font-semibold text-md text-grey-900"]))),
+      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__*/(0, _jsxRuntime.jsx)("ul", {
+      className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex text-grey-600"]))),
+      children: option.metadata.map(function (metadata, idx) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          children: [metadata, idx !== option.metadata.length - 1 && metadataSpacer]
+        }, metadata);
+      })
+    })]
+  });
+};
+
+var _default = DefaultOptionItem;
+exports["default"] = _default;

package/cjs/AutoComplete/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./AutoComplete";
+export * from "./components/DefaultOptionItem";
+export * from "./components/AutoCompleteEmptyState";
+export * from "./types";
+export { default } from "./AutoComplete";

package/cjs/AutoComplete/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _AutoComplete["default"];
+  }
+});
+
+var _AutoComplete = _interopRequireWildcard(require("./AutoComplete"));
+
+Object.keys(_AutoComplete).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AutoComplete[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AutoComplete[key];
+    }
+  });
+});
+
+var _DefaultOptionItem = require("./components/DefaultOptionItem");
+
+Object.keys(_DefaultOptionItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DefaultOptionItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DefaultOptionItem[key];
+    }
+  });
+});
+
+var _AutoCompleteEmptyState = require("./components/AutoCompleteEmptyState");
+
+Object.keys(_AutoCompleteEmptyState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AutoCompleteEmptyState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AutoCompleteEmptyState[key];
+    }
+  });
+});
+
+var _types = require("./types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/cjs/AutoComplete/types.d.ts

@@ -0,0 +1,86 @@
+import type { ComponentType, FocusEventHandler, ReactNode } from "react";
+import type { IconComponentType } from "../types";
+export declare type AutoCompleteVariant = "medium" | "large";
+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;
+    className?: string;
+    valuesClassName?: string;
+    menuClassName?: string;
+    variant?: AutoCompleteVariant;
+    placeholder?: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    options?: T[];
+    inputValue?: string;
+    onTextChange?: (text: string) => any;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    creatable?: boolean;
+    clearable?: boolean;
+    selectOnBlur?: boolean;
+    maxResults?: number;
+    createFromInputValue?: CreateFromInputValue<T>;
+    separatorKeyCodes?: number[];
+    separatorKeys?: string[];
+    renderValueTemplate?: (args: RenderValueTemplateArgs<T>) => JSX.Element;
+    emptyState?: ReactNode;
+    menuFooter?: ReactNode;
+    optionItemComponent?: OptionItemComponentType<T>;
+    /** Keep the input on a single line */
+    noWrap?: boolean;
+    endItem?: ReactNode;
+    /**
+     * `medium` will display about 5 results in the dropdown; use `large` variant to display more
+     * @default "medium"
+     */
+    menuSize?: "medium" | "large";
+    locale?: AutoCompleteLocale;
+}
+export interface AutoCompleteSingleProps<T extends Option = Option> extends AutoCompleteBaseProps<T> {
+    multiple?: false;
+    value?: T;
+    onChange: (option: T | null) => void;
+}
+export interface AutoCompleteMultiProps<T extends Option = Option> extends AutoCompleteBaseProps<T> {
+    multiple: true;
+    value?: T[];
+    onChange: (option: T[] | null) => void;
+}
+export declare type AutoCompleteProps<T extends Option = Option> = AutoCompleteMultiProps<T> | AutoCompleteSingleProps<T>;
+declare type OptionsValue = string | number | boolean;
+export interface Option {
+    value: OptionsValue;
+    label: string;
+    metadata?: string[];
+    new?: boolean;
+    disabled?: boolean;
+    bypassNeedleMatch?: boolean;
+}
+export interface OptionItemProps<T extends Option = Option> {
+    option: T;
+    multiple: boolean;
+    inputValue: string;
+    highlighted: boolean;
+}
+export declare type OptionItemComponentType<T extends Option = Option> = ComponentType<OptionItemProps<T>>;
+export interface OptionRendererParams {
+    multiple: boolean;
+    inputValue: string;
+    highlighted: boolean;
+}
+export interface RenderValueTemplateArgs<T extends Option = Option> {
+    option: T;
+    key: string;
+    editable: boolean;
+}
+export declare type CreateFromInputValue<T extends Option = Option> = (options: T[] | undefined, inputValue: string) => Option[];
+export {};

package/cjs/AutoComplete/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/AutoComplete/utils.d.ts

@@ -0,0 +1,5 @@
+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/{components → cjs}/AutoComplete/utils.js

@@ -1,9 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.caseInsensitiveCreateFromInputValue = exports.defaultCreateFromInputValue = 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);
+}
 
 function createFromInputValue() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -32,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.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { ApplicationAvatarSize, MinimalApplication } from "./types";
+export interface ApplicationAvatarProps {
+    /** A minimal application object containing `applicationID` and `name`. */
+    application: MinimalApplication;
+    /** @default "medium" */
+    size?: ApplicationAvatarSize;
+    /** @ignore */
+    className?: string;
+}
+/** The `ApplicationAvatar` is used as a visual representation of an application. */
+export declare const ApplicationAvatar: ({ className, application, size }: ApplicationAvatarProps) => JSX.Element;
+export default ApplicationAvatar;

package/cjs/Avatars/ApplicationAvatar.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ApplicationAvatar = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _utils = require("./utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var SIZE_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-4 h-4"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-8 h-8"])))
+};
+
+/** The `ApplicationAvatar` is used as a visual representation of an application. */
+var ApplicationAvatar = function ApplicationAvatar(_ref) {
+  var className = _ref.className,
+      application = _ref.application,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "medium" : _ref$size;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    role: "img",
+    "aria-label": application.name || "Application's avatar",
+    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"
+    } : {},
+    children: (0, _utils.getApplicationInitials)(application)
+  });
+};
+
+exports.ApplicationAvatar = ApplicationAvatar;
+var _default = ApplicationAvatar;
+exports["default"] = _default;

package/cjs/Avatars/UserAvatar.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { MinimalUser } from "./types";
+export declare type UserAvatarProps = {
+    /** A minimal user object containing `name`, `email` and `avatar`. */
+    user: MinimalUser;
+    /** @default 32 */
+    size?: number;
+    /** @ignore */
+    className?: string;
+};
+/** The `UserAvatar` is used as a visual representation of a user. */
+export declare const UserAvatar: ({ className, user, size }: UserAvatarProps) => JSX.Element;
+export default UserAvatar;

package/cjs/Avatars/UserAvatar.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.UserAvatar = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _react = require("react");
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _utils = require("./utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+/** The `UserAvatar` is used as a visual representation of a user. */
+var UserAvatar = function UserAvatar(_ref) {
+  var _user$email;
+
+  var className = _ref.className,
+      user = _ref.user,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 32 : _ref$size;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      imageLoaded = _useState2[0],
+      setImageLoaded = _useState2[1];
+
+  var initials = (0, _utils.getUserInitials)(user);
+  (0, _react.useEffect)(function () {
+    return setImageLoaded(false);
+  }, [user.avatar]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    role: "img",
+    "aria-label": imageLoaded ? (user === null || user === void 0 ? void 0 : user.name) || "User's avatar" : "User's avatar",
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["relative overflow-hidden flex justify-center items-center rounded-full 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
+    },
+    children: [!imageLoaded && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: initials
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n          w-full absolute top-0 left-0\n          transition-opacity ", "\n        "])), imageLoaded ? "opacity-100" : "opacity-0"),
+      src: user.avatar,
+      role: "presentation",
+      alt: "",
+      onLoad: function onLoad() {
+        return setImageLoaded(true);
+      },
+      onError: function onError() {
+        return setImageLoaded(false);
+      }
+    })]
+  });
+};
+
+exports.UserAvatar = UserAvatar;
+var _default = UserAvatar;
+exports["default"] = _default;

package/cjs/Avatars/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ApplicationAvatar";
+export * from "./UserAvatar";
+export { default } from "./UserAvatar";

package/cjs/Avatars/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _UserAvatar["default"];
+  }
+});
+
+var _ApplicationAvatar = require("./ApplicationAvatar");
+
+Object.keys(_ApplicationAvatar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ApplicationAvatar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ApplicationAvatar[key];
+    }
+  });
+});
+
+var _UserAvatar = _interopRequireWildcard(require("./UserAvatar"));
+
+Object.keys(_UserAvatar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _UserAvatar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _UserAvatar[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/cjs/Avatars/types.d.ts

@@ -0,0 +1,17 @@
+export declare type ApplicationAvatarSize = "small" | "medium";
+export declare type MinimalApplication = {
+    applicationId: string;
+    name?: string;
+};
+declare type UserAvatarWithName = {
+    name: string;
+    email?: string;
+};
+declare type UserAvatarWithEmail = {
+    email: string;
+    name?: string;
+};
+export declare type MinimalUser = (UserAvatarWithName | UserAvatarWithEmail) & {
+    avatar?: string;
+};
+export {};