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

package/cjs/Avatars/utils.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pickApplicationColors = exports.getUserInitials = exports.getUserBackgroundClassName = exports.getApplicationInitials = exports.getApplicationIdInitial = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _diacritics = require("diacritics");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _hashCode = _interopRequireDefault(require("../utils/hashCode"));
+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;
+/** APPLICATION */
+
+var APPLICATION_COLORS_CLASSNAMES = [/* eslint-disable @algolia/satellite/prefer-accent */(0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["bg-grey-200 text-grey-800"]))), (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-200 text-nebula-800"]))), (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-200 text-blue-900"]))), (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-green-200 text-green-900"]))), (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-200 text-pink-800"]))), (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-red-200 text-red-800"]))), (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-200 text-orange-900"]))), // Darker variants
+(0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-300 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-300 text-nebula-900"]))), (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-300 text-blue-900"]))), (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["bg-green-300 text-green-900"]))), (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-300 text-pink-900"]))), (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["bg-red-300 text-red-900"]))), (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-300 text-orange-900"]))) /* eslint-enable @algolia/satellite/prefer-accent */];
+var pickApplicationColors = function pickApplicationColors(applicationId) {
+  var _APPLICATION_COLORS_C;
+  return (_APPLICATION_COLORS_C = APPLICATION_COLORS_CLASSNAMES[Math.abs((0, _hashCode["default"])(applicationId)) % APPLICATION_COLORS_CLASSNAMES.length]) !== null && _APPLICATION_COLORS_C !== void 0 ? _APPLICATION_COLORS_C : APPLICATION_COLORS_CLASSNAMES[0];
+};
+exports.pickApplicationColors = pickApplicationColors;
+var getApplicationIdInitial = function getApplicationIdInitial(applicationId) {
+  return applicationId.startsWith("beta") ? applicationId.slice(4, 6) : applicationId.slice(0, 2);
+};
+exports.getApplicationIdInitial = getApplicationIdInitial;
+var getApplicationInitials = function getApplicationInitials(_ref) {
+  var name = _ref.name,
+    applicationId = _ref.applicationId;
+  if (!name) {
+    return getApplicationIdInitial(applicationId);
+  }
+  var words = (0, _diacritics.remove)(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 */
+exports.getApplicationInitials = getApplicationInitials;
+var USER_COLORS_CLASSNAMES = [/* eslint-disable @algolia/satellite/prefer-accent */(0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-400 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-400 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-400 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["bg-green-400 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-400 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["bg-red-400 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-400 text-grey-900"]))), // Darker variants
+(0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-700 text-white"]))), (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-700 text-white"]))), (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-700 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["bg-green-700 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-700 text-white"]))), (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["bg-red-700 text-white"]))), (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-600 text-grey-900"]))) /* eslint-enable @algolia/satellite/prefer-accent */];
+var getUserBackgroundClassName = function getUserBackgroundClassName(email) {
+  var _USER_COLORS_CLASSNAM;
+  return (_USER_COLORS_CLASSNAM = USER_COLORS_CLASSNAMES[Math.abs((0, _hashCode["default"])(email)) % USER_COLORS_CLASSNAMES.length]) !== null && _USER_COLORS_CLASSNAM !== void 0 ? _USER_COLORS_CLASSNAM : USER_COLORS_CLASSNAMES[0];
+};
+exports.getUserBackgroundClassName = getUserBackgroundClassName;
+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("") : "??";
+};
+exports.getUserInitials = getUserInitials;

package/cjs/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/cjs/Badge/Badge.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Badge = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _isRenderedChild = _interopRequireDefault(require("../utils/isRenderedChild"));
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (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 BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  inline-flex items-center justify-center\n  rounded-full border\n  overflow-hidden\n"])));
+var VARIANT_CLASSNAMES = {
+  grey: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 border-grey-200 text-grey-700"]))),
+  accent: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-100 border-accent-200 text-accent-700"]))),
+  blue: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-100 border-blue-200 text-blue-800"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-green-100 border-green-300 text-green-900"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-100 border-orange-300 text-orange-800"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["bg-red-100 border-red-200 text-red-700"]))),
+  pink: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-100 border-pink-200 text-pink-700"])))
+};
+var SIZE_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["h-4 display-caption px-1 space-x-1"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["h-5 display-body px-2 space-x-2"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["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")
+ */
+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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var badgeClassName = (0, _clsx["default"])(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: badgeClassName,
+    children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+        size: ".8em"
+      })
+    }), (0, _isRenderedChild["default"])(children) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
+      children: children
+    }), (0, _isRenderedChild["default"])(value) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: value
+    })]
+  }));
+};
+exports.Badge = Badge;
+var _default = Badge;
+exports["default"] = _default;

package/cjs/Badge/index.d.ts

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

package/cjs/Badge/index.js

@@ -0,0 +1,27 @@
+"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 _Badge["default"];
+  }
+});
+var _Badge = _interopRequireWildcard(require("./Badge"));
+Object.keys(_Badge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Badge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Badge[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/Banners/Alert/Alert.d.ts

@@ -0,0 +1,78 @@
+import type { CSSProperties, FunctionComponent, ReactNode } 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: FunctionComponent<AlertProps>;
+export default Alert;

package/cjs/Banners/Alert/Alert.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Alert = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _reactFeather = require("react-feather");
+var _Button = require("../../Button");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+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;
+var BASE_CLASSNAME = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["relative flex text-grey-900 display-body border"])));
+var BACKGROUND_CLASSNAMES = {
+  grey: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))),
+  accent: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-100"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-green-100"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-100"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-red-100"])))
+};
+var BORDER_CLASSNAMES = {
+  grey: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["border-grey-200"]))),
+  accent: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["border-accent-200"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["border-green-200"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["border-orange-200"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["border-red-200"])))
+};
+var ICON_VARIANTS = {
+  grey: _reactFeather.AlertCircle,
+  accent: _reactFeather.AlertCircle,
+  green: _reactFeather.CheckCircle,
+  orange: _reactFeather.AlertTriangle,
+  red: _reactFeather.AlertOctagon
+};
+var ICON_CLASSNAME_VARIANTS = {
+  grey: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600"]))),
+  accent: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-accent-600"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["text-green-600"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["text-orange-600"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["text-red-600"])))
+};
+
+/**
+* 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
+ */
+var Alert = function Alert(_ref) {
+  var title = _ref.title,
+    _ref$usageContext = _ref.usageContext,
+    usageContext = _ref$usageContext === void 0 ? "section" : _ref$usageContext,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "grey" : _ref$variant,
+    onDismiss = _ref.onDismiss,
+    icon = _ref.icon,
+    className = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var containerClassName = (0, _clsx["default"])(BASE_CLASSNAME, title ? (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["p-4"]))) : (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["py-2 px-3"]))), BACKGROUND_CLASSNAMES[variant], usageContext !== "page" ? BORDER_CLASSNAMES[variant] : (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["border-transparent"]))), usageContext !== "page" && (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["rounded"]))), className);
+  var internalIcon = icon === undefined ? true : icon;
+  var Icon = typeof internalIcon === "boolean" && internalIcon ? ICON_VARIANTS[variant] : internalIcon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: containerClassName,
+    style: style,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["\n            shrink-0 mr-2\n            ", "\n            "])), title ? "mt-0.5" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
+      size: "1rem"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["flex flex-1 flex-col ", ""])), onDismiss && "mr-6"),
+      children: [!!title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
+        className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["font-bold text-grey-900 mb-1"]))),
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: children
+      })]
+    }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["absolute right-1.5 top-1.5"]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        icon: _reactFeather.X,
+        title: "Close",
+        variant: "subtle",
+        size: "small",
+        onClick: function onClick(evt) {
+          evt.stopPropagation();
+          onDismiss();
+        }
+      })
+    })]
+  });
+};
+exports.Alert = Alert;
+var _default = Alert;
+exports["default"] = _default;

package/cjs/Banners/Alert/index.js

@@ -0,0 +1,27 @@
+"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 _Alert["default"];
+  }
+});
+var _Alert = _interopRequireWildcard(require("./Alert"));
+Object.keys(_Alert).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Alert[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Alert[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/Banners/BigBertha/BigBertha.d.ts

@@ -0,0 +1,41 @@
+import type { FC, ReactNode } from "react";
+import type { IconComponentType } from "../../types";
+export interface BigBerthaProps {
+    icon?: IconComponentType;
+    children: ReactNode;
+}
+/**
+* Major product wide announcement from Algolia to the users.
+
+* ## Examples
+* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279476)
+
+* ## Current Status
+* - [x] Figma
+* - [x] React
+* - [ ] Documentation
+
+* ## Component structure
+* This is a simple high contrast banner. It use an icon that should match the content of the message, a short text that describe the situation and can contain "Learn more" links.
+
+* ## Guidelines
+
+* ### How to use it?
+* This component should only be used to inform the user about an on-going situation at Algolia that will impact the users' or end-users' experience with our products. The content of the message should be concise and explicit. Make sure that the tone used in the text does not generate stress.
+
+* ### How to NOT use it?
+* - Do not use this banner for any non critical announcement or any non product wide announcement.
+* - If you want to inform the user about something in your features, please use the [Alert](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-alert--variants) component.
+* - If you want to promote a specific feature, please use the [Promote Banner](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-promote--basic) component.
+
+* ### Variants
+* - Blue banner : Default state of this component
+
+* ### Do's and Don't
+* TODO
+
+* ## Accessibility
+* TODO
+ */
+export declare const BigBertha: FC<BigBerthaProps>;
+export default BigBertha;

package/cjs/Banners/BigBertha/BigBertha.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.BigBertha = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _reactFeather = require("react-feather");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+/**
+* Major product wide announcement from Algolia to the users.
+
+* ## Examples
+* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279476)
+
+* ## Current Status
+* - [x] Figma
+* - [x] React
+* - [ ] Documentation
+
+* ## Component structure
+* This is a simple high contrast banner. It use an icon that should match the content of the message, a short text that describe the situation and can contain "Learn more" links.
+
+* ## Guidelines
+
+* ### How to use it?
+* This component should only be used to inform the user about an on-going situation at Algolia that will impact the users' or end-users' experience with our products. The content of the message should be concise and explicit. Make sure that the tone used in the text does not generate stress.
+
+* ### How to NOT use it?
+* - Do not use this banner for any non critical announcement or any non product wide announcement.
+* - If you want to inform the user about something in your features, please use the [Alert](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-alert--variants) component.
+* - If you want to promote a specific feature, please use the [Promote Banner](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-promote--basic) component.
+
+* ### Variants
+* - Blue banner : Default state of this component
+
+* ### Do's and Don't
+* TODO
+
+* ## Accessibility
+* TODO
+ */
+var BigBertha = function BigBertha(_ref) {
+  var icon = _ref.icon,
+    children = _ref.children;
+  var InternalIcon = icon || _reactFeather.AlertCircle;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center space-x-4 bg-accent-600 text-white w-full p-4"]))),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InternalIcon, {
+      size: "1rem",
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"])))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["display-body"]))),
+      children: children
+    })]
+  });
+};
+exports.BigBertha = BigBertha;
+var _default = BigBertha;
+exports["default"] = _default;

package/cjs/Banners/BigBertha/index.d.ts

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

package/cjs/Banners/BigBertha/index.js

@@ -0,0 +1,27 @@
+"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 _BigBertha["default"];
+  }
+});
+var _BigBertha = _interopRequireWildcard(require("./BigBertha"));
+Object.keys(_BigBertha).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _BigBertha[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _BigBertha[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; }