@algolia/satellite 1.0.0-beta.16 → 1.0.0-beta.160

package/cjs/AutoComplete/AutoComplete.tailwind.js

@@ -0,0 +1,93 @@
+"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,37 @@
+"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,37 @@
+"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,63 @@
+"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,85 @@
+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>;
+    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,10 +1,15 @@
 "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] : [];
   var inputValue = arguments.length > 1 ? arguments[1] : undefined;
@@ -17,19 +22,31 @@ function createFromInputValue() {
     "new": true
   }];
 }
-
 var defaultCreateFromInputValue = function defaultCreateFromInputValue(options, inputValue) {
   return createFromInputValue(options, inputValue, function (option) {
     return option.value === inputValue;
   });
 };
-
 exports.defaultCreateFromInputValue = defaultCreateFromInputValue;
-
 var caseInsensitiveCreateFromInputValue = function caseInsensitiveCreateFromInputValue(options, inputValue) {
   return createFromInputValue(options, inputValue, function (option) {
     return option.value.toString().toLowerCase() === inputValue.toLowerCase();
   });
 };
-
-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,36 @@
+"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,20 @@
+/// <reference types="react" />
+import type { MinimalUser } from "./types";
+export declare type UserAvatarLocale = {
+    fallbackText?: string;
+};
+export interface UserAvatarProps {
+    /** A minimal user object containing `name`, `email` and `avatar`. */
+    user: MinimalUser;
+    /**
+     * in px
+     * @default 32
+     * */
+    size?: number;
+    /** @ignore */
+    className?: string;
+    locale?: UserAvatarLocale;
+}
+/** The `UserAvatar` is used as a visual representation of a user. */
+export declare const UserAvatar: ({ className, user, size, locale: propsLocale }: UserAvatarProps) => JSX.Element;
+export default UserAvatar;

package/cjs/Avatars/UserAvatar.js

@@ -0,0 +1,57 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _reactAvatar = require("@radix-ui/react-avatar");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Satellite = require("../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var DEFAULT_LOCALE = {
+  fallbackText: "User's avatar"
+};
+/** 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,
+    propsLocale = _ref.locale;
+  var contextLocale = (0, _Satellite.useLocale)("userAvatar");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_LOCALE), contextLocale), propsLocale);
+  var fallbackName = user.name || user.email || locale.fallbackText;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactAvatar.Root, {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["overflow-hidden flex justify-center items-center rounded-full"]))), (0, _utils.getUserBackgroundClassName)((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
+    style: {
+      width: size,
+      height: size
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAvatar.Image, {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-full w-full object-cover"]))),
+      src: user.avatar,
+      alt: fallbackName
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactAvatar.AvatarFallback, {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex h-full w-full items-center justify-center uppercase"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        "aria-hidden": true,
+        children: (0, _utils.getUserInitials)(user)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["sr-only"]))),
+        children: fallbackName
+      })]
+    })]
+  });
+};
+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,39 @@
+"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 {};

package/cjs/Avatars/types.js

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

package/cjs/Avatars/utils.d.ts

@@ -0,0 +1,6 @@
+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;
+export declare const getUserBackgroundClassName: (email: string) => string;
+export declare const getUserInitials: (user: MinimalUser) => string;