@algolia/satellite 1.0.0-beta.122 → 1.0.0-beta.126

package/cjs/Banners/Promote/index.js

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

@@ -0,0 +1,3 @@
+export * from "./Alert";
+export * from "./BigBertha";
+export * from "./Promote";

package/cjs/Banners/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Alert = require("./Alert");
+
+Object.keys(_Alert).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Alert[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Alert[key];
+    }
+  });
+});
+
+var _BigBertha = require("./BigBertha");
+
+Object.keys(_BigBertha).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BigBertha[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _BigBertha[key];
+    }
+  });
+});
+
+var _Promote = require("./Promote");
+
+Object.keys(_Promote).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Promote[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Promote[key];
+    }
+  });
+});

package/cjs/Button/Button.tailwind.js

@@ -31,7 +31,7 @@ var buttonPlugin = function buttonPlugin(_ref) {
     ".btn-subtle": {
       color: theme("colors.grey.600"),
       "&:hover": {
-        background: theme("colors.grey.100")
+        background: rgba(theme("colors.grey.300"), 0.15)
       },
       "&:focus": {
         boxShadow: "0 0 0 1px ".concat(theme("colors.accent.600"))

package/cjs/Insert/Insert.d.ts

@@ -0,0 +1,43 @@
+import React, { FC } from "react";
+import { BadgeVariants } from "../Badge";
+declare type InsertContext = {
+    label: string;
+    variant?: BadgeVariants;
+};
+export interface InsertProps {
+    title: React.ReactNode;
+    contexts?: Array<string | InsertContext>;
+}
+/**
+* Put more emphasis on side content.
+
+* ## Examples
+* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279499)
+
+* ## Current Status
+* - [x] Figma
+* - [x] React
+* - [ ] Documentation
+
+* ## Component structure
+* The component is a simple and flexible container. It should include a Title and a short text. To give more context you can use optional badges and an optional link to forward users in the right direction.
+
+* ## Guidelines
+
+* ### How to use it?
+* Use the `Insert` if you want to give extra information to the user about the flow they are in or to highlight and define some terms used. This component can be use on the side of existing content or as a block.
+
+* ### How to NOT use it?
+* - Don't use this component to display temporary and/or critical information, use an Alert instead.
+
+* ### Variants
+* - Grey background
+
+* ### Do's and Don't
+* TODO
+
+* ## Accessibility
+* TODO
+ */
+export declare const Insert: FC<InsertProps>;
+export default Insert;

package/cjs/Insert/Insert.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Insert = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Badge = _interopRequireDefault(require("../Badge"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+/**
+* Put more emphasis on side content.
+
+* ## Examples
+* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279499)
+
+* ## Current Status
+* - [x] Figma
+* - [x] React
+* - [ ] Documentation
+
+* ## Component structure
+* The component is a simple and flexible container. It should include a Title and a short text. To give more context you can use optional badges and an optional link to forward users in the right direction.
+
+* ## Guidelines
+
+* ### How to use it?
+* Use the `Insert` if you want to give extra information to the user about the flow they are in or to highlight and define some terms used. This component can be use on the side of existing content or as a block.
+
+* ### How to NOT use it?
+* - Don't use this component to display temporary and/or critical information, use an Alert instead.
+
+* ### Variants
+* - Grey background
+
+* ### Do's and Don't
+* TODO
+
+* ## Accessibility
+* TODO
+ */
+var Insert = function Insert(_ref) {
+  var title = _ref.title,
+      contexts = _ref.contexts,
+      children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement("aside", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["inline-flex flex-col self-start p-4 bg-grey-100 rounded"])))
+  }, contexts ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["block space-x-2 mb-4"])))
+  }, contexts.map(function (context, idx) {
+    var _ref2 = typeof context === "string" ? {
+      label: context
+    } : context,
+        label = _ref2.label,
+        _ref2$variant = _ref2.variant,
+        variant = _ref2$variant === void 0 ? "grey" : _ref2$variant;
+
+    return /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+      key: idx,
+      variant: variant
+    }, label);
+  })) : null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["display-heading mb-2"])))
+  }, title), /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["display-body typo-subdued"])))
+  }, children)));
+};
+
+exports.Insert = Insert;
+var _default = Insert;
+exports["default"] = _default;

package/cjs/Insert/index.d.ts

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

package/cjs/Insert/index.js

@@ -0,0 +1,32 @@
+"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 _Insert["default"];
+  }
+});
+
+var _Insert = _interopRequireWildcard(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];
+    }
+  });
+});
+
+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/Tables/DataTable/DataTable.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ColumnDefinition, Row, Status, SelectMode, PaginationConfiguration, Sorting, DataConfiguration, GetItemId } from "./types";
 declare type CanSelectItem<Item> = (item: Item, idx: number) => boolean;
-export interface DataTableProps<Item> {
+interface BaseDataTableProps<Item> {
     data: Item[];
     itemId?: GetItemId<Item>;
     pagination?: PaginationConfiguration;
@@ -11,13 +11,22 @@ export interface DataTableProps<Item> {
     noDataContent?: React.ReactNode;
     errorContent?: React.ReactNode;
     columns: ColumnDefinition<Item>[];
-    selectMode?: SelectMode;
-    selection?: string[];
-    onSelectionChange?(rowId: string[]): void;
-    canSelectItem?: CanSelectItem<Item>;
     canHoverRow?(row: Row<Item>): boolean;
     onRowHoveredChanged?(row: Row<Item> | null): void;
 }
+declare type DataTableWithSelectMode<Item> = {
+    selectMode: Exclude<SelectMode, "none">;
+    selection?: string[];
+    onSelectionChange?(rowId: string[]): void;
+    canSelectItem?: CanSelectItem<Item>;
+};
+declare type DataTableWithoutSelectMode = {
+    selectMode?: Extract<SelectMode, "none">;
+    selection?: never;
+    onSelectionChange?: never;
+    canSelectItem?: never;
+};
+export declare type DataTableProps<Item> = BaseDataTableProps<Item> & (DataTableWithSelectMode<Item> | DataTableWithoutSelectMode);
 /**
  * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
  *

package/cjs/Tables/DataTable/DataTable.js

@@ -41,7 +41,7 @@ var _Body = _interopRequireDefault(require("./components/Body"));
 
 var _Loader = _interopRequireDefault(require("./components/Loader"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 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); }
 
@@ -122,11 +122,9 @@ var DataTable = function DataTable(_ref) {
     setHoveredRowId(undefined);
   }, [data]);
   var computedColumns = (0, _compact["default"])([selectMode === "single" && {
-    id: "singleSelect",
-    accessor: "singleSelect",
-    Header: function Header() {
-      return null;
-    },
+    id: "_internal_singleSelect",
+    accessor: "_internal_singleSelect",
+    Header: false,
     Cell: function Cell(_ref2) {
       var row = _ref2.row;
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -139,11 +137,11 @@ var DataTable = function DataTable(_ref) {
     },
     className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
   }, selectMode === "multi" && {
-    id: "multiSelect",
-    accessor: "multiSelect",
+    id: "_internal_multiSelect",
+    accessor: "_internal_multiSelect",
     Header: function Header() {
       var unselectableRows = rows.filter(function (row) {
-        return !row.selectable;
+        return !row.selectable && row.selected;
       }).map(function (r) {
         return r.id;
       });
@@ -155,39 +153,38 @@ var DataTable = function DataTable(_ref) {
       var selectionLength = (selection !== null && selection !== void 0 ? selection : []).length;
       var dataLength = pagination ? pagination.itemsPerPage : data.length;
       var isChecked = selectionLength === dataLength;
+      var isIndeterminate = selectionLength > 0 && selectionLength !== dataLength;
       return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
-        "aria-label": "Select all",
+        "aria-label": "Select all" // Small hack to position the checkbox in the center of the header
+        ,
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["absolute mb-2.5"]))),
         checked: isChecked,
-        indeterminate: selectionLength > 0 && selectionLength !== dataLength,
+        indeterminate: isIndeterminate,
         onClick: function onClick() {
-          return isChecked ? onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(unselectableRows) : onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([].concat((0, _toConsumableArray2["default"])(unselectableRows), (0, _toConsumableArray2["default"])(selectableRows)));
+          return isChecked ? onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(unselectableRows) : isIndeterminate ? onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectionLength === selectableRows.length + unselectableRows.length ? unselectableRows : [].concat((0, _toConsumableArray2["default"])(unselectableRows), (0, _toConsumableArray2["default"])(selectableRows))) : onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([].concat((0, _toConsumableArray2["default"])(unselectableRows), (0, _toConsumableArray2["default"])(selectableRows)));
         }
       });
     },
     Cell: function Cell(_ref3) {
       var row = _ref3.row;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex"])))
+        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex"])))
       }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
         checked: row.selected,
         disabled: !row.selectable,
-        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
+        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
       }));
     },
-    className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
   }].concat((0, _toConsumableArray2["default"])(columns.map(function (c) {
     var _c$Header;
 
     return typeof c === "string" ? {
       id: c,
       accessor: c,
-      Header: function Header() {
-        return /*#__PURE__*/_react["default"].createElement("span", null, (0, _utils.toSentenceCase)(c));
-      }
+      Header: (0, _utils.toSentenceCase)(c)
     } : _objectSpread(_objectSpread({}, c), {}, {
-      Header: (_c$Header = c.Header) !== null && _c$Header !== void 0 ? _c$Header : function () {
-        return /*#__PURE__*/_react["default"].createElement("span", null, (0, _utils.toSentenceCase)(c.id));
-      }
+      Header: (_c$Header = c.Header) !== null && _c$Header !== void 0 ? _c$Header : (0, _utils.toSentenceCase)(c.id)
     });
   }))));
   var getItemIdInternal = itemId || DEFAULT_GET_ITEM_ID;
@@ -242,13 +239,13 @@ var DataTable = function DataTable(_ref) {
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["relative"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["relative"])))
   }, status === "loading" && /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["absolute bg-white z-10 bg-opacity-50 w-full h-full flex items-center justify-center"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["absolute bg-white z-10 bg-opacity-50 w-full h-full flex items-center justify-center"])))
   }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
-    className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["-mt-12"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["-mt-12"])))
   })), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
-    className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["datatable ", " ", ""])), status === "loading" && "pointer-events-none select-none", status === "loading" && data.length === 0 && "h-48"),
+    className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["datatable ", " ", ""])), status === "loading" && "pointer-events-none select-none", status === "loading" && data.length === 0 && "h-48"),
     highlight: false,
     footer: pagination !== false && /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
       pagination: pagination,

package/cjs/Tables/DataTable/components/Header.js

@@ -33,9 +33,9 @@ var Header = function Header(_ref) {
       disabled: disabled,
       sortingDirection: sortingDirection[1],
       onToggleSort: onToggleSort
-    }, Header ? /*#__PURE__*/_react["default"].createElement(Header, {
+    }, !Header ? null : typeof Header === "string" ? Header : /*#__PURE__*/_react["default"].createElement(Header, {
       column: column
-    }) : Header);
+    }));
   })));
 };
 

package/cjs/Tables/DataTable/components/HeaderCell.js

@@ -46,7 +46,7 @@ var HeaderCell = function HeaderCell(_ref) {
     },
     className: (0, _classnames["default"])(className, (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["group ", ""])), sort && (disabled ? "cursor-not-allowed" : "cursor-pointer")))
   }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center"])))
   }, children, sort ? sortingDirection === "desc" ? /*#__PURE__*/_react["default"].createElement(_reactFeather.ChevronDown, {
     className: iconClassName
   }) : sortingDirection === "asc" ? /*#__PURE__*/_react["default"].createElement(_reactFeather.ChevronUp, {

package/cjs/Tables/DataTable/types.d.ts

@@ -25,7 +25,7 @@ export interface AdvancedColumnDefinition<Item> {
     /** A string or a function which determines how to get the column data */
     accessor: string | ((item: Item) => any);
     sort?: boolean;
-    Header?: React.ComponentType<HeaderProps<Item>>;
+    Header?: React.ComponentType<HeaderProps<Item>> | string | false;
     Cell?: React.ComponentType<CellProps<Item>>;
     className?: string;
 }

package/cjs/index.d.ts

@@ -9,6 +9,7 @@ export * from "./AutoComplete";
 export * from "./Avatars";
 export * from "./Badge";
 export * from "./Banner";
+export * from "./Banners";
 export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";
@@ -21,6 +22,7 @@ export * from "./Flag";
 export * from "./FlexGrid";
 export * from "./HelpUnderline";
 export * from "./Input";
+export * from "./Insert";
 export * from "./Link";
 export * from "./Medallion";
 export * from "./Modal";

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) {
@@ -310,6 +324,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/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;