@algolia/satellite 1.0.0-beta.17 → 1.0.0-beta.170

package/esm/AutoComplete/index.js

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

package/esm/AutoComplete/types.d.ts

@@ -0,0 +1,95 @@
+import type { ComponentType, FocusEventHandler, ForwardedRef, ReactNode, RefObject } from "react";
+import type { IconComponentType } from "../types";
+export declare type AutoCompleteVariant = "medium" | "large";
+export declare type AutoCompleteLocale = {
+    emptyStateTitle?: string;
+    clearInputButton?: string;
+    selectionMessage?: (optionName: string, option: Option | null) => string;
+    itemsAvailable?: (resultCount: number) => string;
+    showMoreButton?: (extraResults: number) => string;
+    optionItemPrefix?: (multiple: boolean) => string;
+};
+export interface AutoCompleteBaseProps<T extends Option = Option> {
+    id?: string;
+    "aria-label"?: string;
+    labelId?: 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;
+    /** @deprecated Use of this props is discouraged and is only there for backwards compatibility */
+    internalsRef?: ForwardedRef<AutoCompleteInternals>;
+}
+export interface AutoCompleteInternals {
+    /** Current internal inputValue */
+    inputValue: string;
+    /** RefObject containing the underlying combobox input element */
+    inputRef: RefObject<HTMLInputElement>;
+}
+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;
+    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,8 @@
+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>;
+export declare const optionToString: (option: Option | null) => string;
+export declare function filter<T extends Option = Option>(options: T[], selectedItems: T[], itemValue: string): T[];
+export declare function inputValueFromProps<T extends Option = Option>(props: AutoCompleteProps<T>): string;

package/esm/AutoComplete/utils.js

@@ -0,0 +1,71 @@
+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",
+  selectionMessage: function selectionMessage(optionName, option) {
+    return option ? "".concat(optionName, " has been selected.") : "";
+  },
+  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");
+  }
+};
+export var optionToString = function optionToString(option) {
+  var _option$label;
+  return (_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : "";
+};
+function needlesMatch(needles, option) {
+  var labels = (option.metadata || []).concat(option.label);
+  return needles.every(function (needle) {
+    return labels.some(function (label) {
+      return String(label || "").trim().toLowerCase().includes(needle);
+    });
+  });
+}
+export function filter(options, selectedItems, itemValue) {
+  var needles = itemValue.toLowerCase().trim().split(/\s+/);
+  return options.filter(function (option) {
+    return !selectedItems.some(function (_ref) {
+      var value = _ref.value;
+      return value === option.value;
+    }) && (option.bypassNeedleMatch || needlesMatch(needles, option));
+  });
+}
+export function inputValueFromProps(props) {
+  if (props.inputValue !== undefined) {
+    return props.inputValue;
+  }
+  return !isAutoCompleteMultiProps(props) && props.value ? optionToString(props.value) : "";
+}

package/esm/Avatars/ApplicationAvatar.d.ts

@@ -0,0 +1,13 @@
+import type { VFC } from "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: VFC<ApplicationAvatarProps>;
+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 @@
+import type { VFC } from "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: VFC<UserAvatarProps>;
+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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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;
+  var words = user.name ? user.name.trim().split(/\s+/) : (_user$email = user.email) === null || _user$email === void 0 || (_user$email = _user$email.match(/^(.+)(?:\+.+?)?@.+$/)) === null || _user$email === void 0 ? void 0 : _user$email[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,33 @@
+import { type HTMLAttributes, type 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<HTMLSpanElement> {
+    variant?: BadgeVariants;
+    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: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default Badge;

package/esm/Badge/Badge.js

@@ -0,0 +1,73 @@
+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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import { forwardRef } from "react";
+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 = /*#__PURE__*/forwardRef(function (_ref, 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("span", _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    className: badgeClassName,
+    children: [Icon && /*#__PURE__*/_jsx("span", {
+      children: /*#__PURE__*/_jsx(Icon, {
+        width: ".8em",
+        height: ".8em"
+      })
+    }), isRenderedChild(children) && /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["truncate"]))),
+      children: children
+    }), isRenderedChild(value) && /*#__PURE__*/_jsx("span", {
+      children: value
+    })]
+  }));
+});
+Badge.displayName = "Badge";
+export default Badge;

package/esm/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Badge";
+export { default } from "./Badge";

package/esm/Badge/index.js

@@ -0,0 +1,2 @@
+export * from "./Badge";
+export { default } from "./Badge";

package/esm/Banners/Alert/Alert.d.ts

@@ -0,0 +1,78 @@
+import type { CSSProperties, ReactNode, VFC } from "react";
+import type { ColorVariant, IconComponentType } from "../../types";
+export declare type AlertContextType = "page" | "section";
+export declare type AlertColorVariant = Exclude<ColorVariant, "blue">;
+export interface AlertProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    style?: CSSProperties;
+    /** Descriptive title for `Alert` */
+    title?: ReactNode;
+    /** @default grey */
+    variant?: AlertColorVariant;
+    /**
+     * Usage context description
+     * @default section
+     */
+    usageContext?: AlertContextType;
+    icon?: IconComponentType;
+    /**
+     * Function triggered when the dismiss button is clicked.
+     * Dismiss button won't be rendered if absent.
+     * */
+    onDismiss?(): void;
+    children: ReactNode;
+}
+/**
+* Alerts inform users about important changes or temporally conditions. Use this component if you need to communicate something to users in a prominent way.
+
+* ## Examples
+* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A262266)
+
+* ## Current Status
+* - [x] Figma
+* - [x] React
+* - [ ] Documentation
+
+* ## Component structure
+* This component uses a common banner structure. It uses an icon that should match the intent of the message, an optional title _(Highly recommended)_, a short paragraph of text and optional buttons for follow up actions. The `Alert` is dismissible by default, to do so a cross icon is displayed on the top-right corner.
+
+* ## Guidelines
+* ### How to use it?
+* Use the `Alert` if you want to inform the user about a specific action they need to do after something happened.
+
+* ### How to NOT use it?
+* Do not use the component to give higher visibility to trivial information, use the [Insert](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-insert--basic) component instead.
+* Make sure that alerts are not stacking, We highly recommend to have only one per page if possible, though we understand that sometimes this is not possible.
+* Do not use a product wide `Alert` to display features information.
+
+* ### Variants
+* This component comes with two sets of Variants:
+
+* #### Color
+* - `Grey` `Default`
+*   Use this as your default Alert if no other color matches your use-case.
+* - `Accent` `Primary`
+*   Use this to represent something that is currently happening with no level of severity.
+* - `Green` `Success`
+*   Use this to inform the user that an action has been completed in the background while the user wasn't on that page and/or needs further exploration from the user. For smaller and quick processes use the [Flag](https://algolia-satellite.netlify.app/?path=/docs/indicators-flag--basic) instead.
+* - `Orange` `Warning`
+*   Use this to show the user that something important requires their attention. The warning should be used for low to medium errors.
+* - `Red` `Failure`
+*   Use this to show the user that something requires their full attention and actions. Only use red for critical warnings that will result in a loss of data of production down time.
+
+* #### Usage Context
+* - `Page`
+*   This is for global and product wide alerts, use that with extreme caution as it's will impact every page and every feature.
+* - `Section`
+*   This alert should be inside the frame of a section and linked to the content it impacts
+
+* ### Do's and Don't
+* TODO
+
+* ## Accessibility
+* TODO
+ */
+export declare const Alert: VFC<AlertProps>;
+export default Alert;