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

package/esm/DatePicker/DateRangePicker/DateRangePicker.d.ts

@@ -16,7 +16,7 @@ interface RenderTargetParams {
     toggle: () => void;
     isOpen: boolean;
 }
-export interface DateRangePickerProps {
+export declare type DateRangePickerProps = {
     id?: string;
     range: DateRangePickerTimeRange | null;
     displayOnlyRanges?: DateRangePickerTimeRange[];
@@ -30,6 +30,11 @@ export interface DateRangePickerProps {
     renderRightPanel?: (args: RightSidePanelComponentArgs) => React.ReactNode;
     buttonSize?: DateRangePickerDisplayProps["buttonSize"];
     modalPlacement?: ModalProps["placement"];
-}
+} & ({
+    editableYear?: false;
+} | {
+    editableYear: true;
+    years?: number[];
+});
 declare const DateRangePicker: FunctionComponent<DateRangePickerProps>;
 export default DateRangePicker;

package/esm/DatePicker/DateRangePicker/DateRangePicker.js

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-import React, { useState } from "react";
+var _excluded = ["id", "range", "displayOnlyRanges", "calendarProps", "initialState", "stateReducer", "onAction", "validate", "renderTarget", "renderLeftFooter", "renderRightPanel", "buttonSize", "modalPlacement"];
+import React, { useMemo, useState } from "react";
 import stl from "../../styles/helpers/satellitePrefixer";
 import Modal from "../components/Modal";
 import Footer from "../components/Footer";
@@ -39,7 +41,8 @@ var DateRangePicker = function DateRangePicker(_ref2) {
       renderLeftFooter = _ref2.renderLeftFooter,
       renderRightPanel = _ref2.renderRightPanel,
       buttonSize = _ref2.buttonSize,
-      modalPlacement = _ref2.modalPlacement;
+      modalPlacement = _ref2.modalPlacement,
+      props = _objectWithoutProperties(_ref2, _excluded);
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -147,6 +150,17 @@ var DateRangePicker = function DateRangePicker(_ref2) {
     }),
     hoveredTo: (_state$hovered = state.hovered) !== null && _state$hovered !== void 0 ? _state$hovered : undefined
   };
+  var yearProps = useMemo(function () {
+    var _ref3, _displayedRange$start3;
+
+    return props.editableYear ? {
+      editableYear: true,
+      initialDate: (_ref3 = (_displayedRange$start3 = displayedRange.start) !== null && _displayedRange$start3 !== void 0 ? _displayedRange$start3 : displayedRange.end) !== null && _ref3 !== void 0 ? _ref3 : undefined,
+      years: props.years
+    } : {
+      editableYear: false
+    };
+  }, [props, displayedRange]);
   return /*#__PURE__*/React.createElement("div", {
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["date-range-picker"])))
   }, /*#__PURE__*/React.createElement("span", {
@@ -186,7 +200,7 @@ var DateRangePicker = function DateRangePicker(_ref2) {
     onDayClick: handleDayClick,
     onDayMouseEnter: handleMouseEnter,
     onDayMouseLeave: handleMouseLeave
-  })), /*#__PURE__*/React.createElement(Footer, null, renderLeftFooter && /*#__PURE__*/React.createElement("div", null, renderLeftFooter({
+  }, yearProps)), /*#__PURE__*/React.createElement(Footer, null, renderLeftFooter && /*#__PURE__*/React.createElement("div", null, renderLeftFooter({
     state: state,
     dispatch: dispatch
   })), !renderRightPanel && /*#__PURE__*/React.createElement(FooterActions, {

package/esm/DatePicker/components/Calendar.d.ts

@@ -1,7 +1,13 @@
 import { FunctionComponent } from "react";
 import { DayPickerProps } from "react-day-picker";
 declare type ExcludedDayPickerProps = "captionElement" | "showOutsideDays" | "enableOutsideDaysClick" | "fixedWeeks" | "labels" | "navbarElement" | "onTodayButtonClick" | "pagedNavigation" | "renderDay" | "renderWeek" | "reverseMonths" | "showWeekNumbers" | "showWeekDays" | "todayButton" | "weekdayElement" | "weekdaysLong" | "weekdaysShort";
-export interface CalendarProps extends Omit<DayPickerProps, ExcludedDayPickerProps> {
-}
+export declare type EditableYearProps = {
+    editableYear?: false;
+} | {
+    editableYear: true;
+    years?: number[];
+    initialDate?: Date;
+};
+export declare type CalendarProps = Omit<DayPickerProps, ExcludedDayPickerProps> & EditableYearProps;
 declare const Calendar: FunctionComponent<CalendarProps>;
 export default Calendar;

package/esm/DatePicker/components/Calendar.js

@@ -1,24 +1,64 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import DayPicker from "react-day-picker";
+import { add, eachYearOfInterval, getYear, setYear } from "date-fns";
 import NavBar from "./NavBar";
 var excludedDayPickerPropsList = ["captionElement", "showOutsideDays", "enableOutsideDaysClick", "fixedWeeks", "labels", "navbarElement", "onTodayButtonClick", "pagedNavigation", "renderDay", "renderWeek", "reverseMonths", "showWeekNumbers", "showWeekDays", "todayButton", "weekdayElement", "weekdaysLong", "weekdaysShort"];
 
 var Calendar = function Calendar(props) {
+  var initialDate = useMemo(function () {
+    return props.editableYear && props.initialDate ? props.initialDate : new Date();
+  }, [props]);
+
+  var _useState = useState(initialDate),
+      _useState2 = _slicedToArray(_useState, 2),
+      month = _useState2[0],
+      setMonth = _useState2[1];
+
+  var years = useMemo(function () {
+    if (!props.editableYear) return [];
+    if (props.years) return props.years;
+    return eachYearOfInterval({
+      start: add(initialDate, {
+        years: -5
+      }),
+      end: add(initialDate, {
+        years: 10
+      })
+    }).map(getYear);
+  }, [props, initialDate]);
+  var onYearChange = useCallback(function (year) {
+    return setMonth(setYear(month, year));
+  }, [month]);
   var curatedProps = Object.fromEntries(Object.entries(props).filter(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 1),
         key = _ref2[0];
 
-    return (// @ts-ignore
+    return (// @ts-expect-error
       !excludedDayPickerPropsList.includes(key)
     );
   }));
+  var yearsProps = useMemo(function () {
+    return props.editableYear ? {
+      editableYear: true,
+      years: years,
+      onYearChange: onYearChange
+    } : {
+      editableYear: false
+    };
+  }, [onYearChange, props, years]);
   return /*#__PURE__*/React.createElement(DayPicker, _extends({}, curatedProps, {
+    month: props.editableYear ? month : undefined,
     showOutsideDays: false,
     enableOutsideDaysClick: false,
     fixedWeeks: false,
-    navbarElement: NavBar
+    navbarElement: function navbarElement(navBarProps) {
+      return /*#__PURE__*/React.createElement(NavBar, _extends({}, navBarProps, yearsProps));
+    },
+    captionElement: function captionElement() {
+      return null;
+    }
   }));
 };
 

package/esm/DatePicker/components/NavBar.d.ts

@@ -1,5 +1,12 @@
 import { FunctionComponent } from "react";
 import { NavbarElementProps } from "react-day-picker";
-export declare type NavBarProps = NavbarElementProps;
+export declare type NavBarYearProps = {
+    editableYear?: false;
+} | {
+    editableYear: true;
+    years: number[];
+    onYearChange: (year: number) => void;
+};
+export declare type NavBarProps = NavbarElementProps & NavBarYearProps;
 declare const NavBar: FunctionComponent<NavBarProps>;
 export default NavBar;

package/esm/DatePicker/components/NavBar.js

@@ -1,7 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
+var _excluded = ["onPreviousClick", "onNextClick", "showPreviousButton", "showNextButton", "month", "localeUtils"];
+import cx from "classnames";
 import React from "react";
 import { ChevronLeft, ChevronRight } from "react-feather";
 import stl from "../../styles/helpers/satellitePrefixer";
@@ -11,9 +14,13 @@ var NavBar = function NavBar(_ref) {
   var onPreviousClick = _ref.onPreviousClick,
       onNextClick = _ref.onNextClick,
       showPreviousButton = _ref.showPreviousButton,
-      showNextButton = _ref.showNextButton;
+      showNextButton = _ref.showNextButton,
+      month = _ref.month,
+      localeUtils = _ref.localeUtils,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   return /*#__PURE__*/React.createElement("div", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full absolute top-3 left-0 px-5 pb-0 flex justify-between"])))
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full top-3 left-0 pt-5 px-5 pb-2 flex justify-between"])))
   }, /*#__PURE__*/React.createElement(IconButton, {
     icon: ChevronLeft,
     title: "Previous month",
@@ -21,7 +28,22 @@ var NavBar = function NavBar(_ref) {
       return onPreviousClick();
     },
     disabled: !showPreviousButton
-  }), /*#__PURE__*/React.createElement(IconButton, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex items-center text-center"]))))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["font-medium text-md"])))
+  }, localeUtils.getMonths()[month.getMonth()], " ", props.editableYear ? /*#__PURE__*/React.createElement("select", {
+    className: cx("DayPicker-Year", stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["pl-0.5 font-medium outline-none border-transparent border-2 rounded focus:border-nebula-600 focus:shadow-z100 appearance-none"])))),
+    value: month.getFullYear(),
+    onChange: function onChange(e) {
+      return props.onYearChange(parseInt(e.currentTarget.value));
+    }
+  }, props.years.map(function (year) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: year,
+      value: year
+    }, year);
+  })) : month.getFullYear())), /*#__PURE__*/React.createElement(IconButton, {
     icon: ChevronRight,
     title: "Next month",
     onClick: function onClick() {

package/esm/Dropdown/DropdownButton.d.ts

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from "react";
 import { ButtonProps } from "../Button";
 import { RenderTargetParams } from "./Dropdown";
 export interface DropdownButtonProps extends Omit<ButtonProps<"button">, "title" | "endIcon"> {
-    /** Title displayed in the `Dropdown` */
+    /** Descriptive title for `Dropdown` */
     title: React.ReactNode;
     renderFooter?: (args: RenderTargetParams) => React.ReactNode;
 }

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,149 @@
+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) {
+    var updatedFiles = multiple ? [].concat(_toConsumableArray(files), _toConsumableArray(acceptedFiles)) : acceptedFiles;
+    setFiles(updatedFiles);
+    onChange === null || onChange === void 0 ? void 0 : onChange(updatedFiles, fileRejections);
+  }, [multiple, 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/EmptyState/types.d.ts

@@ -3,7 +3,7 @@ import { FlexGridDirection } from "../FlexGrid";
 export declare type EmptyStateUsageContexts = "result" | "feature" | "page";
 export declare type EmptyStateWidths = "medium" | "large" | "xlarge";
 export interface EmptyStatePropsAll {
-    /** Descriptive title for the state (either a string or a React component) */
+    /** Descriptive title for the state */
     title: React.ReactNode;
     /** Optional description to explain why the screen is empty or define next steps */
     description?: React.ReactNode;

package/esm/Insert/Insert.d.ts

@@ -5,6 +5,7 @@ declare type InsertContext = {
     variant?: BadgeVariants;
 };
 export interface InsertProps {
+    /** Descriptive title for the `Insert` */
     title: React.ReactNode;
     contexts?: Array<string | InsertContext>;
 }

package/esm/Medallion/Medallion.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
 import React from "react";
 import cx from "classnames";
@@ -12,7 +12,8 @@ var VARIANT_CLASSNAMES = {
   blue: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["medallion-blue text-blue-600"]))),
   green: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["medallion-green text-green-700"]))),
   orange: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["medallion-orange text-orange-600"]))),
-  red: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["medallion-red text-red-600"])))
+  red: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["medallion-red text-red-600"]))),
+  white: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["medallion-white text-nebula-500"])))
 };
 export var Medallion = function Medallion(_ref) {
   var Icon = _ref.icon,
@@ -23,9 +24,9 @@ export var Medallion = function Medallion(_ref) {
       className = _ref.className;
   var medallionClassName = VARIANT_CLASSNAMES[variant];
   return /*#__PURE__*/React.createElement("div", {
-    className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["medallion inline-flex items-center justify-center rounded-full ", ""])), size === "large" && "medallion-large"), medallionClassName, className)
+    className: cx(stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["medallion inline-flex items-center justify-center rounded-full ", ""])), size === "large" && "medallion-large"), medallionClassName, className)
   }, /*#__PURE__*/React.createElement(Icon, {
-    className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["p-1 ", ""])), size === "large" && "w-10 h-10")
+    className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["p-1 ", ""])), size === "large" && "w-10 h-10")
   }));
 };
 export default Medallion;

package/esm/Medallion/Medallion.tailwind.js

@@ -9,7 +9,7 @@ var rgba = _rgba;
 var medallionPlugin = function medallionPlugin(_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
-  var colors = ["grey", "pink", "accent", "blue", "green", "orange", "red"];
+  var colors = ["grey", "pink", "accent", "blue", "green", "orange", "red", "white"];
   addComponents({
     ".medallion": {
       height: 40,
@@ -23,8 +23,8 @@ var medallionPlugin = function medallionPlugin(_ref) {
 
   colors.map(function (color) {
     return addComponents(_defineProperty({}, ".medallion-".concat(color), {
-      backgroundImage: "linear-gradient(to bottom, ".concat(theme("colors.".concat(color, ".100")), " 0%, ").concat(theme("colors.".concat(color, ".200")), " 100%)"),
-      boxShadow: "inset 0px -1px 0px 0px ".concat(theme("colors.".concat(color, ".300")), ", inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5), 0px 7px 11px -3px ").concat(rgba(theme("colors.grey.900"), 0.2), ", 0px 2px 4px 0px ").concat(rgba(theme("colors.grey.900"), 0.3))
+      backgroundImage: color === "white" ? "linear-gradient(to bottom, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)") : "linear-gradient(to bottom, ".concat(theme("colors.".concat(color, ".100")), " 0%, ").concat(theme("colors.".concat(color, ".200")), " 100%)"),
+      boxShadow: color === "white" ? "0px 4px 8px -2px rgba(33, 36, 61, 0.25), inset 0px -2px 2px rgba(35, 38, 59, 0.03)" : "0px 4px 8px -2px rgba(33, 36, 61, 0.25), inset 0px -2px 2px ".concat(rgba(theme("colors.".concat(color, ".300")), 0.03))
     }));
   });
 };

package/esm/Medallion/types.d.ts

@@ -1,2 +1,2 @@
-export declare type MedallionVariant = "accent" | "grey" | "pink" | "blue" | "green" | "orange" | "red";
+export declare type MedallionVariant = "accent" | "grey" | "pink" | "blue" | "green" | "orange" | "red" | "white";
 export declare type MedallionSize = "default" | "large";

package/esm/index.d.ts

@@ -16,6 +16,7 @@ export * from "./Checkbox";
 export * from "./ClickAwayContainer";
 export * from "./DatePicker";
 export * from "./Dropdown";
+export * from "./Dropzone";
 export * from "./EmptyState";
 export * from "./Field";
 export * from "./Flag";

package/esm/index.js

@@ -16,6 +16,7 @@ export * from "./Checkbox";
 export * from "./ClickAwayContainer";
 export * from "./DatePicker";
 export * from "./Dropdown";
+export * from "./Dropzone";
 export * from "./EmptyState";
 export * from "./Field";
 export * from "./Flag";

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,18 +1,18 @@
 {
   "name": "@algolia/satellite",
-  "version": "1.0.0-beta.126",
+  "version": "1.0.0-beta.129",
   "description": "Algolia design system React components",
   "scripts": {
-    "clean": "del dist",
+    "clean": "rimraf dist",
     "prebuild": "yarn clean",
     "build": "cross-env NODE_ENV=production run-p build:types build:js build:manifests build:css build:css-min build:scss",
     "build:_js": "babel src --extensions \".ts,.tsx,.js\" --ignore \"src/**/*.d.ts,src/**/*.stories.tsx,src/**/*.test.ts,src/**/*.test.tsx\"",
     "build:esm": "cross-env BABEL_MODULE_TYPE=ESM yarn build:_js --out-dir dist/esm",
     "build:cjs": "cross-env BABEL_MODULE_TYPE=CJS yarn build:_js --out-dir dist/cjs",
     "build:js": "run-p build:esm build:cjs",
-    "build:css": "NODE_ENV= postcss -o dist/satellite.css src/styles/satellite.css",
-    "build:css-min": "NODE_ENV=production postcss -o dist/satellite.min.css src/styles/satellite.css",
-    "build:css-storybook": "NODE_ENV=storybook postcss -o dist/satellite.css src/styles/satellite.css",
+    "build:css": "cross-env NODE_ENV= postcss -o dist/satellite.css src/styles/satellite.css",
+    "build:css-min": "cross-env NODE_ENV=production postcss -o dist/satellite.min.css src/styles/satellite.css",
+    "build:css-storybook": "cross-env NODE_ENV=storybook postcss -o dist/satellite.css src/styles/satellite.css",
     "build:scss": "node ./scripts/build-scss-variables.js",
     "build:types": "node ./scripts/build-types.js",
     "build:manifests": "node ./scripts/prepare-manifests.js",
@@ -29,7 +29,7 @@
     "version": "yarn changelog && git add CHANGELOG.md",
     "postversion": "git push && git push --tags",
     "release": "./scripts/release.sh",
-    "chromatic": "NODE_ENV=storybook chromatic --build-script-name build:storybook --exit-zero-on-changes --auto-accept-changes master"
+    "chromatic": "cross-env NODE_ENV=storybook chromatic --build-script-name build:storybook --exit-zero-on-changes --auto-accept-changes master"
   },
   "publishConfig": {
     "access": "public"
@@ -43,7 +43,12 @@
     "react",
     "design"
   ],
-  "author": "Algolia (contact@algolia.com)",
+  "author": "Algolia <contact@algolia.com>",
+  "contributors": [
+    "Vincent Lemeunier <vincent.lemeunier@algolia.com>",
+    "Kevin Østerkilde <kevin.osterkilde@algolia.com>",
+    "Clément Aupiais <clement.aupiais@algolia.com>"
+  ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/algolia/satellite/issues"
@@ -72,6 +77,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",