@algolia/satellite 1.0.0-beta.123 → 1.0.0-beta.127

package/cjs/index.js

@@ -142,6 +142,20 @@ Object.keys(_Banner).forEach(function (key) {
   });
 });
 
+var _Banners = require("./Banners");
+
+Object.keys(_Banners).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Banners[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Banners[key];
+    }
+  });
+});
+
 var _Button = require("./Button");
 
 Object.keys(_Button).forEach(function (key) {
@@ -226,6 +240,20 @@ Object.keys(_Dropdown).forEach(function (key) {
   });
 });
 
+var _Dropzone = require("./Dropzone");
+
+Object.keys(_Dropzone).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Dropzone[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dropzone[key];
+    }
+  });
+});
+
 var _EmptyState = require("./EmptyState");
 
 Object.keys(_EmptyState).forEach(function (key) {
@@ -310,6 +338,20 @@ Object.keys(_Input).forEach(function (key) {
   });
 });
 
+var _Insert = require("./Insert");
+
+Object.keys(_Insert).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Insert[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Insert[key];
+    }
+  });
+});
+
 var _Link = require("./Link");
 
 Object.keys(_Link).forEach(function (key) {

package/cjs/utils/formatters.d.ts

@@ -0,0 +1,25 @@
+declare const defaultHumanSizes: string[];
+export declare function numberWithCommas(x: number | string, precision?: number): string;
+export declare function formatHumanNumber(bytes: number, options?: {
+    /** @default 2 */
+    decimals?: number;
+    /** @default ['', 'K', 'M', 'B', 'T'] */
+    sizes?: typeof defaultHumanSizes;
+    /** @default 1000 */
+    divider?: number;
+    /**
+     * Hides the decimal points if they're 0
+     * @default false
+     */
+    prettyDecimals?: boolean;
+}): string;
+export declare function formatHumanSize(nb: number, options?: {
+    /** @default 2 */
+    decimals?: number;
+    /**
+     * Hides the decimal points if they're 0
+     * @default false
+     */
+    prettyDecimals?: boolean;
+}): string;
+export {};

package/cjs/utils/formatters.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatHumanNumber = formatHumanNumber;
+exports.formatHumanSize = formatHumanSize;
+exports.numberWithCommas = numberWithCommas;
+var defaultHumanSizes = ["", "K", "M", "B", "T"];
+
+function numberWithCommas(x) {
+  var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+  if (typeof x !== "number") {
+    return x;
+  }
+
+  return (x || 0).toFixed(precision).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
+function formatHumanNumber(bytes, options) {
+  var _ref = options !== null && options !== void 0 ? options : {},
+      _ref$decimals = _ref.decimals,
+      decimals = _ref$decimals === void 0 ? 2 : _ref$decimals,
+      _ref$sizes = _ref.sizes,
+      sizes = _ref$sizes === void 0 ? defaultHumanSizes : _ref$sizes,
+      _ref$divider = _ref.divider,
+      divider = _ref$divider === void 0 ? 1000 : _ref$divider,
+      _ref$prettyDecimals = _ref.prettyDecimals,
+      prettyDecimals = _ref$prettyDecimals === void 0 ? false : _ref$prettyDecimals;
+
+  if (bytes === 0) return "0";
+  var i = Math.min(Math.max(0, Math.floor(Math.log(Math.abs(bytes)) / Math.log(divider))), sizes.length - 1);
+  var nb = bytes / Math.pow(divider, i);
+  return (Math.abs(nb) > 1000 ? numberWithCommas(nb, decimals) : prettyDecimals ? parseFloat(nb.toFixed(decimals)) : nb.toFixed(decimals)) + sizes[i];
+}
+
+function formatHumanSize(nb, options) {
+  var _ref2 = options !== null && options !== void 0 ? options : {},
+      _ref2$decimals = _ref2.decimals,
+      decimals = _ref2$decimals === void 0 ? 2 : _ref2$decimals,
+      _ref2$prettyDecimals = _ref2.prettyDecimals,
+      prettyDecimals = _ref2$prettyDecimals === void 0 ? false : _ref2$prettyDecimals;
+
+  return formatHumanNumber(nb, {
+    decimals: decimals,
+    sizes: ["", "K", "M", "G", "T"],
+    divider: 1000,
+    prettyDecimals: prettyDecimals
+  }) + "B";
+}

package/esm/Banner/Banner.d.ts

@@ -25,7 +25,10 @@ export interface BannerDefaultProps extends BannerPropsBase {
     title?: React.ReactNode;
 }
 export declare type BannerProps = BannerPageProps | BannerDefaultProps;
+/** @deprecated use the new `Alert` component instead */
 /**
+ * <p className="stl-space-x-2"><span className="stl-bg-orange-200 stl-font-bold stl-text-orange-800 stl-px-2 stl-py-1.5 stl-rounded">🌇 Sunsetting</span><span>use the new `Alert` component instead</span></p>
+ *
  * Banners inform users about important changes or persistent conditions. Use this component if you need
  * to communicate to users in a prominent way. Take in consideration 3 levels of hierarchy when deciding
  * on the appropriate banner to use:

package/esm/Banner/Banner.js

@@ -5,6 +5,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import React from "react";
 import cx from "classnames";
 import { AlertCircle, AlertTriangle, AlertOctagon, CheckCircle, X } from "react-feather";
+import { IconButton } from "../Button";
 import stl from "../styles/helpers/satellitePrefixer";
 
 function isBannerDefaultProps(props) {
@@ -58,7 +59,11 @@ var TITLE_CLASSNAME_VARIANTS = {
   orange: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["text-orange-900"]))),
   red: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["text-red-900"])))
 };
+/** @deprecated use the new `Alert` component instead */
+
 /**
+ * <p className="stl-space-x-2"><span className="stl-bg-orange-200 stl-font-bold stl-text-orange-800 stl-px-2 stl-py-1.5 stl-rounded">🌇 Sunsetting</span><span>use the new `Alert` component instead</span></p>
+ *
  * Banners inform users about important changes or persistent conditions. Use this component if you need
  * to communicate to users in a prominent way. Take in consideration 3 levels of hierarchy when deciding
  * on the appropriate banner to use:
@@ -134,15 +139,17 @@ export var Banner = function Banner(props) {
     className: cx(stl(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["display-heading mb-1"]))), TITLE_CLASSNAME_VARIANTS[variant])
   }, props.title), /*#__PURE__*/React.createElement("div", {
     className: stl(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["", " ", ""])), usageContext === "page" && "text-center", subduedContent && "text-grey-600")
-  }, children)), onDismiss && /*#__PURE__*/React.createElement("button", {
-    className: stl(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["absolute top-0 right-0 mt-2 mr-2"]))),
-    "aria-label": "Close banner",
+  }, children)), onDismiss && /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["absolute top-2 right-2"])))
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    title: "Close banner",
+    variant: "subtle",
+    size: "small",
+    icon: X,
     onClick: function onClick(evt) {
       evt.stopPropagation();
       onDismiss();
     }
-  }, /*#__PURE__*/React.createElement(X, {
-    size: "1rem"
   })));
 };
 export default Banner;

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

@@ -0,0 +1,69 @@
+import React, { FunctionComponent } from "react";
+import { ColorVariant, IconComponentType } from "../../types";
+export declare type AlertContextType = "page" | "section";
+declare type AlertColorVariant = Exclude<ColorVariant, "blue">;
+export interface AlertProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    style?: React.CSSProperties;
+    title?: React.ReactNode;
+    /** @default grey */
+    variant?: AlertColorVariant;
+    /** @default section */
+    usageContext?: AlertContextType;
+    icon?: IconComponentType;
+    onDismiss?(): void;
+}
+/**
+* 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/esm/Banners/Alert/Alert.js

@@ -0,0 +1,127 @@
+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;
+
+import React from "react";
+import cx from "classnames";
+import { AlertCircle, AlertTriangle, AlertOctagon, CheckCircle, X } from "react-feather";
+import { IconButton } from "../../Button";
+import stl from "../../styles/helpers/satellitePrefixer";
+var BASE_CLASSNAME = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["relative flex text-grey-900 display-body"])));
+var BACKGROUND_CLASSNAMES = {
+  grey: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-grey-100"]))),
+  accent: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-accent-100"]))),
+  green: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-100"]))),
+  orange: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-orange-100"]))),
+  red: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-100"])))
+};
+var BORDER_CLASSNAMES = {
+  grey: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["border-grey-200"]))),
+  accent: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["border-accent-200"]))),
+  green: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border-green-200"]))),
+  orange: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-orange-200"]))),
+  red: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["border-red-200"])))
+};
+var ICON_VARIANTS = {
+  grey: AlertCircle,
+  accent: AlertCircle,
+  green: CheckCircle,
+  orange: AlertTriangle,
+  red: AlertOctagon
+};
+var ICON_CLASSNAME_VARIANTS = {
+  grey: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["text-grey-600"]))),
+  accent: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-accent-600"]))),
+  green: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["text-green-600"]))),
+  orange: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["text-orange-600"]))),
+  red: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["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
+ */
+
+export 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 = cx(BASE_CLASSNAME, title ? stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["p-4"]))) : stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["py-2 px-3"]))), BACKGROUND_CLASSNAMES[variant], BORDER_CLASSNAMES[variant], usageContext !== "page" && stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["rounded border"]))), className);
+  var internalIcon = icon === undefined ? true : icon;
+  var Icon = typeof internalIcon === "boolean" && internalIcon ? ICON_VARIANTS[variant] : internalIcon;
+  return /*#__PURE__*/React.createElement("div", {
+    className: containerClassName,
+    style: style
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: cx(stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n            flex-shrink-0 mr-2\n            ", "\n            "])), title ? "mt-1" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
+    size: "1rem"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["flex flex-1 flex-col ", ""])), onDismiss && "mr-6")
+  }, title && /*#__PURE__*/React.createElement("h4", {
+    className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["display-heading text-grey-900 mb-1"])))
+  }, title), /*#__PURE__*/React.createElement("div", null, children)), onDismiss && /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["absolute top-2 right-2"])))
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: X,
+    title: "Close banner",
+    variant: "subtle",
+    size: "small",
+    onClick: function onClick(evt) {
+      evt.stopPropagation();
+      onDismiss();
+    }
+  })));
+};
+export default Alert;

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

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

package/esm/Banners/Alert/index.js

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

package/esm/Banners/BigBertha/BigBertha.d.ts

@@ -0,0 +1,40 @@
+import { FC } from "react";
+import { IconComponentType } from "../../types";
+export interface BigBerthaProps {
+    icon?: IconComponentType;
+}
+/**
+* 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/esm/Banners/BigBertha/BigBertha.js

@@ -0,0 +1,54 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from "react";
+import { AlertCircle } from "react-feather";
+import stl from "../../styles/helpers/satellitePrefixer";
+
+/**
+* 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 var BigBertha = function BigBertha(_ref) {
+  var icon = _ref.icon,
+      children = _ref.children;
+  var InternalIcon = icon || AlertCircle;
+  return /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center justify-center space-x-4 bg-accent-600 text-white w-full p-4"])))
+  }, /*#__PURE__*/React.createElement(InternalIcon, {
+    size: "1rem"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["display-body"])))
+  }, children));
+};
+export default BigBertha;

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

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

package/esm/Banners/BigBertha/index.js

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

package/esm/Banners/Promote/Promote.d.ts

@@ -0,0 +1,56 @@
+import React, { FC } from "react";
+declare type PromoteVariants = "large" | "compact";
+interface CompactPromoteProps {
+    variant?: Extract<PromoteVariants, "compact">;
+    illustration?: never;
+}
+interface WidePromoteProps {
+    variant?: Extract<PromoteVariants, "large">;
+    /** Plop in an `img` element or `svg` here */
+    illustration?: React.ReactNode;
+}
+export declare type PromoteProps = {
+    /** Product context for the banner (either a string or a React component) */
+    context?: React.ReactNode;
+    /** Descriptive title for banner (either a string or a React component) */
+    title: React.ReactNode;
+    /** Buttons */
+    actions?: React.ReactNode;
+    onDismiss?(): void;
+} & (CompactPromoteProps | WidePromoteProps);
+/**
+* A contextual way of showing our user that a new feature / product is available to them on a higher plan or as an option.
+
+* ## Examples
+* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279945)
+
+* ## Current Status
+* - [x] Figma
+* - [x] React
+* - [ ] Documentation
+
+* ## Component structure
+* This component is a bigger banner. It include an optional image, an optional product context, a title, a short text (2 lines maximum without an image and 3 lines maximum with an image), optional CTAs (one primary and one secondary). It comes in two different variants: `large` and `compact`.
+
+* ## Guidelines
+* ### How to use it?
+* You should use this component to display to the users that a new features/product is now available for them in the current context they are in. This feature can be automatically available or locked behind higher plan tier, please make sure you adapt the content to not give false impression of availability to the user.
+
+* This component is permanently dismissible by default.
+
+* ### How to NOT use it?
+* - Do not use this banner as a regular [Alert](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-alert--variants).
+* - You can only use one `large` promotion banner per context and two/four compact per context.
+
+* ### Variants
+* - `large`
+* - `compact`
+
+* ### Do's and Don't
+* TODO
+
+* ## Accessibility
+* TODO
+ */
+export declare const Promote: FC<PromoteProps>;
+export default Promote;

package/esm/Banners/Promote/Promote.js

@@ -0,0 +1,95 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+import React from "react";
+import cx from "classnames";
+import { X } from "react-feather";
+import Card from "../../Card";
+import { IconButton } from "../../Button";
+import stl from "../../styles/helpers/satellitePrefixer";
+var TITLE_VARIANT_CLASSNAMES = {
+  compact: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["display-heading mb-2"]))),
+  large: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["display-medium mb-4"])))
+};
+var BODY_VARIANT_CLASSNAMES = {
+  compact: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-caption typo-subdued"]))),
+  large: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display-body typo-subdued"])))
+};
+var ACTIONS_VARIANT_CLASSNAMES = {
+  compact: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["mt-1"]))),
+  large: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mt-3"])))
+};
+/**
+* A contextual way of showing our user that a new feature / product is available to them on a higher plan or as an option.
+
+* ## Examples
+* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279945)
+
+* ## Current Status
+* - [x] Figma
+* - [x] React
+* - [ ] Documentation
+
+* ## Component structure
+* This component is a bigger banner. It include an optional image, an optional product context, a title, a short text (2 lines maximum without an image and 3 lines maximum with an image), optional CTAs (one primary and one secondary). It comes in two different variants: `large` and `compact`.
+
+* ## Guidelines
+* ### How to use it?
+* You should use this component to display to the users that a new features/product is now available for them in the current context they are in. This feature can be automatically available or locked behind higher plan tier, please make sure you adapt the content to not give false impression of availability to the user.
+
+* This component is permanently dismissible by default.
+
+* ### How to NOT use it?
+* - Do not use this banner as a regular [Alert](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-alert--variants).
+* - You can only use one `large` promotion banner per context and two/four compact per context.
+
+* ### Variants
+* - `large`
+* - `compact`
+
+* ### Do's and Don't
+* TODO
+
+* ## Accessibility
+* TODO
+ */
+
+export var Promote = function Promote(_ref) {
+  var context = _ref.context,
+      title = _ref.title,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "large" : _ref$variant,
+      illustration = _ref.illustration,
+      actions = _ref.actions,
+      children = _ref.children,
+      onDismiss = _ref.onDismiss;
+  return /*#__PURE__*/React.createElement(Card, {
+    className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["relative flex"]))),
+    fullBleed: true
+  }, illustration && /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-full min-w-24 max-w-64 flex items-center justify-center bg-grey-100"])))
+  }, illustration), /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", ""])), variant === "large" ? "p-6" : "p-4")
+  }, context && /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["block mb-1"])))
+  }, context), /*#__PURE__*/React.createElement("header", {
+    className: TITLE_VARIANT_CLASSNAMES[variant]
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: BODY_VARIANT_CLASSNAMES[variant]
+  }, children), actions && /*#__PURE__*/React.createElement("div", {
+    className: cx(stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex space-x-2"]))), ACTIONS_VARIANT_CLASSNAMES[variant])
+  }, actions)), onDismiss && /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["absolute top-2 right-2"])))
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: X,
+    title: "Close banner",
+    variant: "subtle",
+    size: "small",
+    onClick: function onClick(evt) {
+      evt.stopPropagation();
+      onDismiss();
+    }
+  })));
+};
+export default Promote;

package/esm/Banners/Promote/index.d.ts

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