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

package/cjs/Tag/Tag.js

@@ -25,7 +25,7 @@ var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satel
 
 var _excluded = ["children", "variant", "className", "onDelete"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 
 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); }
 
@@ -37,15 +37,17 @@ var VARIANT_CLASSNAMES = {
   blue: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-100 border-blue-200 text-blue-700"]))),
   green: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-green-100 border-green-300 text-green-800"]))),
   orange: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-100 border-orange-300 text-orange-800"]))),
-  red: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-red-100 border-red-200 text-red-700"])))
+  red: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-red-100 border-red-200 text-red-700"]))),
+  pink: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-100 border-pink-200 text-pink-700"])))
 };
 var BUTTON_CLOSE_VARIANT_CLASSNAMES = {
-  accent: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["border-accent-200 hover:bg-accent-200 focus:bg-accent-200"]))),
-  grey: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["border-grey-200 hover:bg-grey-200 focus:bg-grey-200"]))),
-  blue: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["border-blue-200 hover:bg-blue-200 focus:bg-blue-200"]))),
-  green: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["border-green-300 hover:bg-green-300 focus:bg-green-300"]))),
-  orange: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["border-orange-300 hover:bg-orange-300 focus:bg-orange-300"]))),
-  red: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["border-red-200 hover:bg-red-200 focus:bg-red-200"])))
+  accent: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["border-accent-200 hover:bg-accent-200 focus:bg-accent-200"]))),
+  grey: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["border-grey-200 hover:bg-grey-200 focus:bg-grey-200"]))),
+  blue: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["border-blue-200 hover:bg-blue-200 focus:bg-blue-200"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["border-green-300 hover:bg-green-300 focus:bg-green-300"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["border-orange-300 hover:bg-orange-300 focus:bg-orange-300"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["border-red-200 hover:bg-red-200 focus:bg-red-200"]))),
+  pink: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["border-pink-200 hover:bg-pink-200 focus:bg-pink-200"])))
 };
 /**
  * Use tags to visually label UI objects for quick recognition and navigation. (!) **Tags can be added or removed from an object by users**.
@@ -77,7 +79,7 @@ var Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onDelete = _ref.onDelete,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var title = typeof children === "string" ? children : "tag";
-  var tagClassName = (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["tag"]))), VARIANT_CLASSNAMES[variant], className);
+  var tagClassName = (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["tag"]))), VARIANT_CLASSNAMES[variant], className);
   var editable = Boolean(onDelete);
 
   var handleDelete = function handleDelete(evt) {
@@ -93,9 +95,9 @@ var Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "aria-label": title,
     ref: ref
   }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["truncate flex-1"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["truncate flex-1"])))
   }, children), editable && /*#__PURE__*/_react["default"].createElement("button", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["tag-close-button"]))), BUTTON_CLOSE_VARIANT_CLASSNAMES[variant]),
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["tag-close-button"]))), BUTTON_CLOSE_VARIANT_CLASSNAMES[variant]),
     type: "button",
     onClick: handleDelete,
     "aria-label": "Remove ".concat(title)

package/esm/AutoComplete/components/AutoCompleteEmptyState.d.ts

@@ -4,7 +4,9 @@ import { MedallionVariant } from "../../Medallion";
 export interface AutoCompleteEmptyStateProps {
     icon?: IconComponentType;
     variant?: MedallionVariant;
+    /** Descriptive title for state */
     title: React.ReactNode;
+    /** Optional description to explain why the screen is empty or define next steps */
     description?: React.ReactNode;
 }
 export declare const AutoCompleteEmptyState: ({ icon, variant, title, description, }: AutoCompleteEmptyStateProps) => JSX.Element;

package/esm/Avatars/UserAvatar.js

@@ -1,9 +1,9 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import cx from "classnames";
 import stl from "../styles/helpers/satellitePrefixer";
 import { getUserInitials, getUserBackgroundClassName } from "./utils";
@@ -19,23 +19,28 @@ export var UserAvatar = function UserAvatar(_ref) {
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      failedToLoadAvatar = _useState2[0],
-      setFailedToLoadAvatar = _useState2[1];
+      imageLoaded = _useState2[0],
+      setImageLoaded = _useState2[1];
 
   var initials = getUserInitials(user);
-  var hasValidAvatar = user.avatar && !failedToLoadAvatar;
+  useEffect(function () {
+    return setImageLoaded(false);
+  }, [user.avatar]);
   return /*#__PURE__*/React.createElement("div", {
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["relative overflow-hidden flex justify-center items-center rounded-full text-white uppercase"]))), !hasValidAvatar && getUserBackgroundClassName((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["relative overflow-hidden flex justify-center items-center rounded-full text-white uppercase transition-colors"]))), imageLoaded ? stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-white"]))) : getUserBackgroundClassName((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
     style: {
       width: size,
       height: size
     }
-  }, /*#__PURE__*/React.createElement("span", null, initials), hasValidAvatar && /*#__PURE__*/React.createElement("img", {
-    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-full absolute top-0 left-0"]))),
+  }, /*#__PURE__*/React.createElement("span", null, initials), /*#__PURE__*/React.createElement("img", {
+    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          w-full absolute top-0 left-0\n          transition-opacity ", "\n        "])), imageLoaded ? "opacity-100" : "opacity-0"),
     src: user.avatar,
-    alt: "".concat(user.name || user.email, "'s avatar"),
+    alt: imageLoaded ? "".concat(user.name || user.email, "'s avatar") : "",
+    onLoad: function onLoad() {
+      return setImageLoaded(true);
+    },
     onError: function onError() {
-      return setFailedToLoadAvatar(true);
+      return setImageLoaded(false);
     }
   }));
 };

package/esm/Banner/Banner.d.ts

@@ -14,14 +14,17 @@ export interface BannerPropsBase {
 export interface BannerPageProps extends BannerPropsBase {
     /**
      * Usage context description
-     * @default content
+     * @default page
      */
     usageContext?: "page";
 }
 export interface BannerDefaultProps extends BannerPropsBase {
-    /** Usage context description */
+    /**
+     * Usage context description
+     * @default content
+     */
     usageContext?: "inline" | "content" | "section";
-    /** Notification title */
+    /** Descriptive title for the `Banner` */
     title?: React.ReactNode;
 }
 export declare type BannerProps = BannerPageProps | BannerDefaultProps;

package/esm/Banner/Banner.js

@@ -142,7 +142,7 @@ export var Banner = function Banner(props) {
   }, children)), onDismiss && /*#__PURE__*/React.createElement("span", {
     className: stl(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["absolute top-2 right-2"])))
   }, /*#__PURE__*/React.createElement(IconButton, {
-    title: "Close banner",
+    title: "Close",
     variant: "subtle",
     size: "small",
     icon: X,

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

@@ -1,16 +1,20 @@
 import React, { FunctionComponent } from "react";
 import { ColorVariant, IconComponentType } from "../../types";
 export declare type AlertContextType = "page" | "section";
-declare type AlertColorVariant = Exclude<ColorVariant, "blue">;
+export declare type AlertColorVariant = Exclude<ColorVariant, "blue">;
 export interface AlertProps {
     /** @ignore */
     className?: string;
     /** @ignore */
     style?: React.CSSProperties;
+    /** Descriptive title for `Alert` */
     title?: React.ReactNode;
     /** @default grey */
     variant?: AlertColorVariant;
-    /** @default section */
+    /**
+     * Usage context description
+     * @default section
+     */
     usageContext?: AlertContextType;
     icon?: IconComponentType;
     onDismiss?(): void;

package/esm/Banners/Alert/Alert.js

@@ -115,7 +115,7 @@ export var Alert = function Alert(_ref) {
     className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["absolute top-2 right-2"])))
   }, /*#__PURE__*/React.createElement(IconButton, {
     icon: X,
-    title: "Close banner",
+    title: "Close",
     variant: "subtle",
     size: "small",
     onClick: function onClick(evt) {

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

@@ -10,9 +10,9 @@ interface WidePromoteProps {
     illustration?: React.ReactNode;
 }
 export declare type PromoteProps = {
-    /** Product context for the banner (either a string or a React component) */
+    /** Product context for the banner */
     context?: React.ReactNode;
-    /** Descriptive title for banner (either a string or a React component) */
+    /** Descriptive title for banner */
     title: React.ReactNode;
     /** Buttons */
     actions?: React.ReactNode;

package/esm/Banners/Promote/Promote.js

@@ -83,7 +83,7 @@ export var Promote = function Promote(_ref) {
     className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["absolute top-2 right-2"])))
   }, /*#__PURE__*/React.createElement(IconButton, {
     icon: X,
-    title: "Close banner",
+    title: "Close",
     variant: "subtle",
     size: "small",
     onClick: function onClick(evt) {

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

@@ -16,7 +16,7 @@ interface RenderTargetParams {
     toggle: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     isOpen: boolean;
 }
-export interface DatePickerProps {
+export declare type DatePickerProps = {
     calendarProps?: Pick<CalendarProps, "fromMonth" | "toMonth" | "disabledDays">;
     onOpen?: DisplayProps["onClick"];
     onChange?: (value: Date | null) => void;
@@ -30,6 +30,11 @@ export interface DatePickerProps {
     initialValue?: Date | null;
     buttonSize?: DisplayProps["size"];
     modalPlacement?: ModalProps["placement"];
-}
+} & ({
+    editableYear?: false;
+} | {
+    editableYear: true;
+    years?: number[];
+});
 declare const DatePicker: FunctionComponent<DatePickerProps>;
 export default DatePicker;

package/esm/DatePicker/DatePicker/DatePicker.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import stl from "../../styles/helpers/satellitePrefixer";
 import Modal from "../components/Modal";
 import Footer from "../components/Footer";
@@ -77,6 +77,17 @@ var DatePicker = function DatePicker(props) {
     }
   };
 
+  var yearProps = useMemo(function () {
+    var _state$selected;
+
+    return props.editableYear ? {
+      editableYear: true,
+      initialDate: (_state$selected = state.selected) !== null && _state$selected !== void 0 ? _state$selected : undefined,
+      years: props.years
+    } : {
+      editableYear: false
+    };
+  }, [props]);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
     ref: setTargetElement,
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-block"])))
@@ -108,7 +119,7 @@ var DatePicker = function DatePicker(props) {
   }, (_props$calendarProps = props === null || props === void 0 ? void 0 : props.calendarProps) !== null && _props$calendarProps !== void 0 ? _props$calendarProps : {}, {
     selectedDays: value !== null && value !== void 0 ? value : undefined,
     onDayClick: handleDayClick
-  })), /*#__PURE__*/React.createElement(Footer, null, props.renderLeftFooter && /*#__PURE__*/React.createElement("div", null, props.renderLeftFooter({
+  }, yearProps)), /*#__PURE__*/React.createElement(Footer, null, props.renderLeftFooter && /*#__PURE__*/React.createElement("div", null, props.renderLeftFooter({
     state: state,
     dispatch: dispatch
   })), !props.renderRightPanel && /*#__PURE__*/React.createElement(FooterActions, {

package/esm/DatePicker/DatePicker.tailwind.js

@@ -24,8 +24,16 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
   };
 
   addComponents((_addComponents = {
-    ".DayPicker-Caption": {
-      textAlign: "center"
+    ".DayPicker-Year": {
+      // ChevronDown svg from react-feather,
+      backgroundImage: 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>\')',
+      backgroundRepeat: "no-repeat",
+      backgroundPositionX: "100%",
+      backgroundPositionY: "5px",
+      paddingRight: "1rem"
+    },
+    ".DayPicker-Month": {
+      marginTop: "0rem"
     }
   }, _defineProperty(_addComponents, prefix(".date-picker, .date-range-picker"), {
     "& .DayPicker-Months": {

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,8 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import React from "react";
+var _excluded = ["onPreviousClick", "onNextClick", "showPreviousButton", "showNextButton", "month", "localeUtils"];
+import cx from "classnames";
+import React, { useMemo } from "react";
 import { ChevronLeft, ChevronRight } from "react-feather";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { IconButton } from "../../Button";
@@ -11,9 +15,26 @@ 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);
+
+  var years = useMemo(function () {
+    if (!props.editableYear) return [];
+    var monthYear = month.getFullYear(); // year of the currently shown month
+
+    if (props.years.includes(monthYear)) return props.years;
+    var minYear = Math.min.apply(Math, _toConsumableArray(props.years).concat([monthYear]));
+    var maxYear = Math.max.apply(Math, _toConsumableArray(props.years).concat([monthYear]));
+    return Array.from({
+      length: maxYear - minYear + 1
+    }, function (_, i) {
+      return i + minYear;
+    });
+  }, [props, month]);
   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 +42,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));
+    }
+  }, 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.js

@@ -72,9 +72,10 @@ export var Dropzone = function Dropzone(_ref2) {
       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 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();

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))
     }));
   });
 };