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

package/esm/Banners/Promote/index.js

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

package/esm/Banners/index.d.ts

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

package/esm/Banners/index.js

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

package/esm/Button/Button.tailwind.js

@@ -29,7 +29,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/esm/Dropzone/Dropzone.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import { DropzoneProps as ReactDropZoneProps, FileRejection } from "react-dropzone";
+interface DropzoneBaseProps {
+    id?: string;
+    onChange?(acceptedFiles: File[], fileRejections: FileRejection[]): void;
+    placeholder?: string;
+    /** @default false */
+    clearable?: boolean;
+    /** @ignore */
+    className?: string;
+    /** @default false */
+    multiple?: boolean;
+}
+export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "onDropAccepted" | "onDropRejected" | "multiple">;
+export declare const Dropzone: FC<DropzoneProps>;
+export default Dropzone;

package/esm/Dropzone/Dropzone.js

@@ -0,0 +1,148 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onChange", "className"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import cx from "classnames";
+import React, { useCallback, useMemo, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { Check, UploadCloud, X } from "react-feather";
+import { IconButton } from "../Button";
+import { useFieldState } from "../Field";
+import stl from "../styles/helpers/satellitePrefixer";
+import { formatHumanSize } from "../utils/formatters";
+import { uniqueId } from "../utils/uniqueId";
+
+var DropzoneFileItem = function DropzoneFileItem(_ref) {
+  var file = _ref.file;
+  return /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["truncate text-grey-900"])))
+  }, file.name, " - ", formatHumanSize(file.size));
+};
+
+var STATUS_CLASSNAMES = {
+  "default": "",
+  invalid: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["input-invalid"]))),
+  validated: ""
+};
+
+var InvalidIcon = function InvalidIcon() {
+  return /*#__PURE__*/React.createElement(X, {
+    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
+  });
+};
+
+var ValidatedIcon = function ValidatedIcon() {
+  return /*#__PURE__*/React.createElement(Check, {
+    className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-accent-700 p-px rounded-full"])))
+  });
+};
+
+export var Dropzone = function Dropzone(_ref2) {
+  var id = _ref2.id,
+      placeholder = _ref2.placeholder,
+      disabled = _ref2.disabled,
+      _ref2$multiple = _ref2.multiple,
+      multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
+      _ref2$clearable = _ref2.clearable,
+      clearable = _ref2$clearable === void 0 ? false : _ref2$clearable,
+      onChange = _ref2.onChange,
+      className = _ref2.className,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      files = _useState2[0],
+      setFiles = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      focused = _useState4[0],
+      setFocused = _useState4[1];
+
+  var _useFieldState = useFieldState(),
+      status = _useFieldState.status;
+
+  var onDrop = useCallback(function (acceptedFiles, fileRejections) {
+    setFiles([].concat(_toConsumableArray(files), _toConsumableArray(acceptedFiles)));
+    onChange === null || onChange === void 0 ? void 0 : onChange([].concat(_toConsumableArray(files), _toConsumableArray(acceptedFiles)), fileRejections);
+  }, [files, onChange]);
+
+  var handleClear = function handleClear(evt) {
+    evt.stopPropagation();
+    setFiles([]);
+    onChange === null || onChange === void 0 ? void 0 : onChange([], []);
+  };
+
+  var _useDropzone = useDropzone(_objectSpread(_objectSpread({
+    disabled: disabled,
+    multiple: multiple
+  }, props), {}, {
+    onDrop: onDrop
+  })),
+      getRootProps = _useDropzone.getRootProps,
+      getInputProps = _useDropzone.getInputProps,
+      isDragActive = _useDropzone.isDragActive,
+      isDragReject = _useDropzone.isDragReject;
+
+  var dropzoneId = useMemo(function () {
+    return id !== null && id !== void 0 ? id : uniqueId("dropzone");
+  }, [id]);
+  var isValueEmpty = files.length === 0;
+  var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : React.Fragment;
+  return /*#__PURE__*/React.createElement("div", getRootProps({
+    "aria-controls": dropzoneId,
+    className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            input group\n            ", "\n            ", "\n            min-h-16 cursor-pointer\n            ", ""])), focused && "input-focused", disabled && "input-disabled cursor-not-allowed", isDragReject ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-nebula-500" : null), STATUS_CLASSNAMES[status], className),
+    onClick: function onClick(evt) {
+      // Helps with https://github.com/react-dropzone/react-dropzone/issues/182
+      if (evt.target.closest("label")) {
+        evt.stopPropagation();
+      }
+    }
+  }), /*#__PURE__*/React.createElement("input", getInputProps({
+    id: dropzoneId,
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFocused(false);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex-1 flex items-center justify-center space-x-2 display-body"])))
+  }, files.length > 0 ? files.length > 1 ? /*#__PURE__*/React.createElement("ul", null, files.map(function (file) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: file.name
+    }, /*#__PURE__*/React.createElement(DropzoneFileItem, {
+      file: file
+    }));
+  })) : /*#__PURE__*/React.createElement(DropzoneFileItem, {
+    file: files[0]
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex items-center justify-center space-x-2 display-body"])))
+  }, /*#__PURE__*/React.createElement(UploadCloud, {
+    size: "1rem",
+    className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
+  }), /*#__PURE__*/React.createElement("p", {
+    className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-300" : "typo-subdued")
+  }, placeholder !== null && placeholder !== void 0 ? placeholder : "Drop ".concat(multiple ? "files" : "file", " here or click to select.")))), clearable && !disabled && !isValueEmpty && /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([""])))
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
+    title: "Clear input",
+    icon: X,
+    variant: "subtle",
+    size: "small",
+    tabIndex: -1,
+    "aria-hidden": true,
+    onClick: handleClear
+  })), /*#__PURE__*/React.createElement(StatusIcon, null));
+};
+export default Dropzone;

package/esm/Dropzone/index.d.ts

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

package/esm/Dropzone/index.js

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

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

@@ -0,0 +1,66 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import React from "react";
+import Badge from "../Badge";
+import stl from "../styles/helpers/satellitePrefixer";
+
+/**
+* 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 var Insert = function Insert(_ref) {
+  var title = _ref.title,
+      contexts = _ref.contexts,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("aside", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-flex flex-col self-start p-4 bg-grey-100 rounded"])))
+  }, contexts ? /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["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.createElement(Badge, {
+      key: idx,
+      variant: variant
+    }, label);
+  })) : null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-heading mb-2"])))
+  }, title), /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display-body typo-subdued"])))
+  }, children)));
+};
+export default Insert;

package/esm/Insert/index.d.ts

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

package/esm/Insert/index.js

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

package/esm/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/esm/Tables/DataTable/DataTable.js

@@ -93,11 +93,9 @@ export var DataTable = function DataTable(_ref) {
     setHoveredRowId(undefined);
   }, [data]);
   var computedColumns = compact([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.createElement("div", {
@@ -110,11 +108,11 @@ export var DataTable = function DataTable(_ref) {
     },
     className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["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;
       });
@@ -126,14 +124,15 @@ export 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.createElement(Checkbox, {
         "aria-label": "Select all" // Small hack to position the checkbox in the center of the header
         ,
         className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["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(_toConsumableArray(unselectableRows), _toConsumableArray(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(_toConsumableArray(unselectableRows), _toConsumableArray(selectableRows))) : onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([].concat(_toConsumableArray(unselectableRows), _toConsumableArray(selectableRows)));
         }
       });
     },
@@ -154,13 +153,9 @@ export var DataTable = function DataTable(_ref) {
     return typeof c === "string" ? {
       id: c,
       accessor: c,
-      Header: function Header() {
-        return /*#__PURE__*/React.createElement("span", null, toSentenceCase(c));
-      }
+      Header: toSentenceCase(c)
     } : _objectSpread(_objectSpread({}, c), {}, {
-      Header: (_c$Header = c.Header) !== null && _c$Header !== void 0 ? _c$Header : function () {
-        return /*#__PURE__*/React.createElement("span", null, toSentenceCase(c.id));
-      }
+      Header: (_c$Header = c.Header) !== null && _c$Header !== void 0 ? _c$Header : toSentenceCase(c.id)
     });
   }))));
   var getItemIdInternal = itemId || DEFAULT_GET_ITEM_ID;

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

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

package/esm/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/esm/index.d.ts

@@ -9,18 +9,21 @@ export * from "./AutoComplete";
 export * from "./Avatars";
 export * from "./Badge";
 export * from "./Banner";
+export * from "./Banners";
 export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";
 export * from "./ClickAwayContainer";
 export * from "./DatePicker";
 export * from "./Dropdown";
+export * from "./Dropzone";
 export * from "./EmptyState";
 export * from "./Field";
 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/esm/index.js

@@ -9,18 +9,21 @@ export * from "./AutoComplete";
 export * from "./Avatars";
 export * from "./Badge";
 export * from "./Banner";
+export * from "./Banners";
 export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";
 export * from "./ClickAwayContainer";
 export * from "./DatePicker";
 export * from "./Dropdown";
+export * from "./Dropzone";
 export * from "./EmptyState";
 export * from "./Field";
 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/esm/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/esm/utils/formatters.js

@@ -0,0 +1,40 @@
+var defaultHumanSizes = ["", "K", "M", "B", "T"];
+export 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, ",");
+}
+export 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];
+}
+export 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/satellite",
-  "version": "1.0.0-beta.123",
+  "version": "1.0.0-beta.127",
   "description": "Algolia design system React components",
   "scripts": {
     "clean": "del dist",
@@ -72,6 +72,7 @@
     "downshift": "^2.0.10",
     "lodash.throttle": "^4.1.1",
     "react-day-picker": "7.4.10",
+    "react-dropzone": "^11.5.1",
     "react-popper": "^2.2.5",
     "react-transition-group": "4.4.2",
     "react-use": "^15.3.8",

package/satellite.css

@@ -1165,7 +1165,7 @@ html, body {
 }
 
 .stl-btn-subtle:hover {
-  background: #f5f5fa;
+  background: rgba(182, 183, 213, 0.15);
 }
 
 .stl-btn-subtle:focus {