@algolia/satellite 1.0.0-beta.124 → 1.0.0-beta.128

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";

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,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/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/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/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

@@ -95,9 +95,7 @@ export var DataTable = function DataTable(_ref) {
   var computedColumns = compact([selectMode === "single" && {
     id: "_internal_singleSelect",
     accessor: "_internal_singleSelect",
-    Header: function Header() {
-      return null;
-    },
+    Header: false,
     Cell: function Cell(_ref2) {
       var row = _ref2.row;
       return /*#__PURE__*/React.createElement("div", {
@@ -155,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 {};