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

package/esm/AutoComplete/AutoComplete.tailwind.js

@@ -0,0 +1,97 @@
+import _rgba from "../styles/rgba";
+import _disabledColor from "../styles/disabledColor";
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var disabledColor = _disabledColor;
+var rgba = _rgba;
+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.500")),
+      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
+      transition: "all 100ms ease-in-out",
+      "&:not(.autocomplete-disabled):hover": {
+        borderColor: theme("colors.grey.600")
+      },
+      // 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")
+      }
+    }
+  });
+});
+export default autoCompletePlugin;

package/esm/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/esm/AutoComplete/components/AutoCompleteEmptyState.js

@@ -0,0 +1,29 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { X } from "react-feather";
+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,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "grey" : _ref$variant,
+    title = _ref.title,
+    description = _ref.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

@@ -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/esm/AutoComplete/components/DefaultOptionItem.js

@@ -0,0 +1,30 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import stl from "../../styles/helpers/satellitePrefixer";
+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 _locale$optionItemPre;
+  var option = _ref.option,
+    multiple = _ref.multiple,
+    locale = _ref.locale;
+  return /*#__PURE__*/_jsxs("div", {
+    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate py-2"]))),
+    children: [/*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["font-semibold text-md text-grey-900"]))),
+      children: option["new"] ? "".concat(locale === null || locale === void 0 ? void 0 : (_locale$optionItemPre = locale.optionItemPrefix) === null || _locale$optionItemPre === void 0 ? void 0 : _locale$optionItemPre.call(locale, multiple), " ").concat(option.label) : option.label
+    }), option.metadata && option.metadata.length > 0 && /*#__PURE__*/_jsx("ul", {
+      className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex text-grey-600"]))),
+      children: option.metadata.map(function (metadata, idx) {
+        return /*#__PURE__*/_jsxs("li", {
+          children: [metadata, idx !== option.metadata.length - 1 && metadataSpacer]
+        }, metadata);
+      })
+    })]
+  });
+};
+export default DefaultOptionItem;

package/esm/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/esm/AutoComplete/index.js

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

package/esm/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/esm/AutoComplete/types.js

@@ -0,0 +1 @@
+export {};

package/esm/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/esm/AutoComplete/utils.js

@@ -0,0 +1,41 @@
+import pluralize from "../utils/pluralize";
+export 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;
+  var matchingPredicate = arguments.length > 2 ? arguments[2] : undefined;
+  return options.some(function (option) {
+    return matchingPredicate(option, inputValue);
+  }) ? [] : [{
+    value: inputValue,
+    label: inputValue,
+    "new": true
+  }];
+}
+export var defaultCreateFromInputValue = function defaultCreateFromInputValue(options, inputValue) {
+  return createFromInputValue(options, inputValue, function (option) {
+    return option.value === inputValue;
+  });
+};
+export var caseInsensitiveCreateFromInputValue = function caseInsensitiveCreateFromInputValue(options, inputValue) {
+  return createFromInputValue(options, inputValue, function (option) {
+    return option.value.toString().toLowerCase() === inputValue.toLowerCase();
+  });
+};
+export var DEFAULT_AUTOCOMPLETE_LOCALE = {
+  clearInputButton: "Clear input value",
+  emptyStateTitle: "No matches found",
+  itemsAvailable: function itemsAvailable(count) {
+    return "".concat(pluralize(count, "item is", {
+      plural: "items are"
+    }), " available");
+  },
+  optionItemPrefix: function optionItemPrefix(multiple) {
+    return multiple ? "Add" : "Use";
+  },
+  showMoreButton: function showMoreButton(extraResults) {
+    return "Show ".concat(pluralize(extraResults, "result"), " more");
+  }
+};

package/esm/Avatars/ApplicationAvatar.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/esm/Avatars/ApplicationAvatar.js

@@ -0,0 +1,27 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import cx from "clsx";
+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"])))
+};
+/** The `ApplicationAvatar` is used as a visual representation of an application. */
+export 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__*/_jsx("div", {
+    role: "img",
+    "aria-label": application.name || "Application's avatar",
+    className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["rounded inline-flex shrink-0 items-center justify-center uppercase"]))), pickApplicationColors(application.applicationId), SIZE_CLASSNAMES[size], className),
+    style: size === "small" ? {
+      fontSize: "8px"
+    } : {},
+    children: getApplicationInitials(application)
+  });
+};
+export default ApplicationAvatar;

package/esm/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/esm/Avatars/UserAvatar.js

@@ -0,0 +1,49 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _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; }
+import { AvatarFallback, Image as AvatarImage, Root as AvatarRoot } from "@radix-ui/react-avatar";
+import cx from "clsx";
+import { useLocale } from "../Satellite";
+import stl from "../styles/helpers/satellitePrefixer";
+import { getUserBackgroundClassName, getUserInitials } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_LOCALE = {
+  fallbackText: "User's avatar"
+};
+/** The `UserAvatar` is used as a visual representation of a user. */
+export 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 = useLocale("userAvatar");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_LOCALE), contextLocale), propsLocale);
+  var fallbackName = user.name || user.email || locale.fallbackText;
+  return /*#__PURE__*/_jsxs(AvatarRoot, {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["overflow-hidden flex justify-center items-center rounded-full"]))), getUserBackgroundClassName((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
+    style: {
+      width: size,
+      height: size
+    },
+    children: [/*#__PURE__*/_jsx(AvatarImage, {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-full w-full object-cover"]))),
+      src: user.avatar,
+      alt: fallbackName
+    }), /*#__PURE__*/_jsxs(AvatarFallback, {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex h-full w-full items-center justify-center uppercase"]))),
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": true,
+        children: getUserInitials(user)
+      }), /*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["sr-only"]))),
+        children: fallbackName
+      })]
+    })]
+  });
+};
+export default UserAvatar;

package/esm/Avatars/index.d.ts

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

package/esm/Avatars/index.js

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

package/esm/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/esm/Avatars/types.js

@@ -0,0 +1 @@
+export {};

package/esm/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;

package/esm/Avatars/utils.js

@@ -0,0 +1,48 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+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;
+import { remove as removeDiacritics } from "diacritics";
+import stl from "../styles/helpers/satellitePrefixer";
+import hashCode from "../utils/hashCode";
+/** APPLICATION */
+
+var APPLICATION_COLORS_CLASSNAMES = [/* eslint-disable @algolia/satellite/prefer-accent */stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-grey-200 text-grey-800"]))), stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-nebula-200 text-nebula-800"]))), stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-blue-200 text-blue-900"]))), stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-200 text-green-900"]))), stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-pink-200 text-pink-800"]))), stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-200 text-red-800"]))), stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-orange-200 text-orange-900"]))), // Darker variants
+stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-grey-300 text-grey-900"]))), stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["bg-nebula-300 text-nebula-900"]))), stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["bg-blue-300 text-blue-900"]))), stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["bg-green-300 text-green-900"]))), stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["bg-pink-300 text-pink-900"]))), stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["bg-red-300 text-red-900"]))), stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["bg-orange-300 text-orange-900"]))) /* eslint-enable @algolia/satellite/prefer-accent */];
+export var pickApplicationColors = function pickApplicationColors(applicationId) {
+  var _APPLICATION_COLORS_C;
+  return (_APPLICATION_COLORS_C = APPLICATION_COLORS_CLASSNAMES[Math.abs(hashCode(applicationId)) % APPLICATION_COLORS_CLASSNAMES.length]) !== null && _APPLICATION_COLORS_C !== void 0 ? _APPLICATION_COLORS_C : APPLICATION_COLORS_CLASSNAMES[0];
+};
+export var getApplicationIdInitial = function getApplicationIdInitial(applicationId) {
+  return applicationId.startsWith("beta") ? applicationId.slice(4, 6) : applicationId.slice(0, 2);
+};
+export var getApplicationInitials = function getApplicationInitials(_ref) {
+  var name = _ref.name,
+    applicationId = _ref.applicationId;
+  if (!name) {
+    return getApplicationIdInitial(applicationId);
+  }
+  var words = removeDiacritics(name.trim()).toLocaleUpperCase().split(/\W+/).filter(function (word) {
+    return word.length >= 1;
+  });
+  if (words.length === 0 || words.length === 1 && words[0].length < 2) {
+    return getApplicationIdInitial(applicationId);
+  } else if (words.length === 1) {
+    return words[0].slice(0, 2);
+  }
+  return "".concat(words[0][0]).concat(words[1][0]);
+};
+
+/** USER */
+
+var USER_COLORS_CLASSNAMES = [/* eslint-disable @algolia/satellite/prefer-accent */stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["bg-grey-400 text-grey-900"]))), stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["bg-nebula-400 text-grey-900"]))), stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["bg-blue-400 text-grey-900"]))), stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["bg-green-400 text-grey-900"]))), stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["bg-pink-400 text-grey-900"]))), stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["bg-red-400 text-grey-900"]))), stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["bg-orange-400 text-grey-900"]))), // Darker variants
+stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["bg-grey-700 text-white"]))), stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["bg-nebula-700 text-white"]))), stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["bg-blue-700 text-grey-900"]))), stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["bg-green-700 text-grey-900"]))), stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["bg-pink-700 text-white"]))), stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["bg-red-700 text-white"]))), stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["bg-orange-600 text-grey-900"]))) /* eslint-enable @algolia/satellite/prefer-accent */];
+export var getUserBackgroundClassName = function getUserBackgroundClassName(email) {
+  var _USER_COLORS_CLASSNAM;
+  return (_USER_COLORS_CLASSNAM = USER_COLORS_CLASSNAMES[Math.abs(hashCode(email)) % USER_COLORS_CLASSNAMES.length]) !== null && _USER_COLORS_CLASSNAM !== void 0 ? _USER_COLORS_CLASSNAM : USER_COLORS_CLASSNAMES[0];
+};
+export var getUserInitials = function getUserInitials(user) {
+  var _user$email, _user$email$match;
+  var words = user.name ? user.name.trim().split(/\s+/) : (_user$email = user.email) === null || _user$email === void 0 ? void 0 : (_user$email$match = _user$email.match(/^(.+)(?:\+.+?)?@.+$/)) === null || _user$email$match === void 0 ? void 0 : _user$email$match[1].split(".");
+  return words ? words.slice(0, 2).map(function (w) {
+    return w.toLocaleLowerCase()[0];
+  }).join("") : "??";
+};

package/esm/Badge/Badge.d.ts

@@ -0,0 +1,35 @@
+import type { FunctionComponent, HTMLAttributes, ReactNode } from "react";
+import type { AtLeastOne, ColorVariant, IconComponentType } from "../types";
+export declare type BadgeSizes = "small" | "medium" | "large";
+export declare type BadgeVariants = ColorVariant | "pink";
+interface BaseBadgeProps extends HTMLAttributes<HTMLDivElement> {
+    /** @default "grey" */
+    variant?: BadgeVariants;
+    /** @default "default" */
+    size?: BadgeSizes;
+}
+declare type BadgeContentProps = {
+    children: ReactNode;
+    /** An additional value to accompany the `Badge` */
+    value: ReactNode;
+    /** Left aligned icon */
+    icon: IconComponentType;
+};
+export declare type BadgeProps = BaseBadgeProps & AtLeastOne<BadgeContentProps>;
+/**
+ * Badges are used to inform a user about a status of an item or a process. They can also contain a numeric value. Badges come with a set of colours that are easily identified. Green colour implies success or completion, while orange suggests a warning, on hold, or a problem. Red coloured badges mean error or failure.
+ *
+ * - Stay consistent with badge content (text), don't vary your vocabulary
+ * - Bages usually come after a textual information or explanation
+ * - Don't use badges where traditional error messages (such as form validation) can be used instead
+ * - Don't use badges with combination of buttons
+ * - Badges are not interactive
+ *
+ * Do use
+ *
+ * - To indicate progress of an A/B test
+ * - To indicate problem with an index
+ * - To display numeric values for multiple items (similar to a "tag cloud")
+ */
+export declare const Badge: FunctionComponent<BadgeProps>;
+export default Badge;

package/esm/Badge/Badge.js

@@ -0,0 +1,69 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["children", "value", "icon", "variant", "size", "className"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import cx from "clsx";
+import stl from "../styles/helpers/satellitePrefixer";
+import isRenderedChild from "../utils/isRenderedChild";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var BASE_CLASSNAMES = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  inline-flex items-center justify-center\n  rounded-full border\n  overflow-hidden\n"])));
+var VARIANT_CLASSNAMES = {
+  grey: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-grey-100 border-grey-200 text-grey-700"]))),
+  accent: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-accent-100 border-accent-200 text-accent-700"]))),
+  blue: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-blue-100 border-blue-200 text-blue-800"]))),
+  green: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-green-100 border-green-300 text-green-900"]))),
+  orange: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-orange-100 border-orange-300 text-orange-800"]))),
+  red: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-red-100 border-red-200 text-red-700"]))),
+  pink: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-pink-100 border-pink-200 text-pink-700"])))
+};
+var SIZE_CLASSNAMES = {
+  small: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["h-4 display-caption px-1 space-x-1"]))),
+  medium: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["h-5 display-body px-2 space-x-2"]))),
+  large: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["h-6 display-body px-2 space-x-2"])))
+};
+
+/**
+ * Badges are used to inform a user about a status of an item or a process. They can also contain a numeric value. Badges come with a set of colours that are easily identified. Green colour implies success or completion, while orange suggests a warning, on hold, or a problem. Red coloured badges mean error or failure.
+ *
+ * - Stay consistent with badge content (text), don't vary your vocabulary
+ * - Bages usually come after a textual information or explanation
+ * - Don't use badges where traditional error messages (such as form validation) can be used instead
+ * - Don't use badges with combination of buttons
+ * - Badges are not interactive
+ *
+ * Do use
+ *
+ * - To indicate progress of an A/B test
+ * - To indicate problem with an index
+ * - To display numeric values for multiple items (similar to a "tag cloud")
+ */
+export var Badge = function Badge(_ref) {
+  var children = _ref.children,
+    value = _ref.value,
+    Icon = _ref.icon,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "grey" : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "large" : _ref$size,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var badgeClassName = cx(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: badgeClassName,
+    children: [Icon && /*#__PURE__*/_jsx("span", {
+      children: /*#__PURE__*/_jsx(Icon, {
+        size: ".8em"
+      })
+    }), isRenderedChild(children) && /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["truncate"]))),
+      children: children
+    }), isRenderedChild(value) && /*#__PURE__*/_jsx("span", {
+      children: value
+    })]
+  }));
+};
+export default Badge;