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

package/cjs/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/cjs/Avatars/UserAvatar.js

@@ -21,7 +21,7 @@ var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satel
 
 var _utils = require("./utils");
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 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); }
 
@@ -38,23 +38,28 @@ var UserAvatar = function UserAvatar(_ref) {
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      failedToLoadAvatar = _useState2[0],
-      setFailedToLoadAvatar = _useState2[1];
+      imageLoaded = _useState2[0],
+      setImageLoaded = _useState2[1];
 
   var initials = (0, _utils.getUserInitials)(user);
-  var hasValidAvatar = user.avatar && !failedToLoadAvatar;
+  (0, _react.useEffect)(function () {
+    return setImageLoaded(false);
+  }, [user.avatar]);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["relative overflow-hidden flex justify-center items-center rounded-full text-white uppercase"]))), !hasValidAvatar && (0, _utils.getUserBackgroundClassName)((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["relative overflow-hidden flex justify-center items-center rounded-full text-white uppercase transition-colors"]))), imageLoaded ? (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-white"]))) : (0, _utils.getUserBackgroundClassName)((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
     style: {
       width: size,
       height: size
     }
-  }, /*#__PURE__*/_react["default"].createElement("span", null, initials), hasValidAvatar && /*#__PURE__*/_react["default"].createElement("img", {
-    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-full absolute top-0 left-0"]))),
+  }, /*#__PURE__*/_react["default"].createElement("span", null, initials), /*#__PURE__*/_react["default"].createElement("img", {
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\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/cjs/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/cjs/Banner/Banner.js

@@ -155,7 +155,7 @@ var Banner = function Banner(props) {
   }, children)), onDismiss && /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _satellitePrefixer["default"])(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteral2["default"])(["absolute top-2 right-2"])))
   }, /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
-    title: "Close banner",
+    title: "Close",
     variant: "subtle",
     size: "small",
     icon: _reactFeather.X,

package/cjs/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/cjs/Banners/Alert/Alert.js

@@ -129,7 +129,7 @@ var Alert = function Alert(_ref) {
     className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["absolute top-2 right-2"])))
   }, /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
     icon: _reactFeather.X,
-    title: "Close banner",
+    title: "Close",
     variant: "subtle",
     size: "small",
     onClick: function onClick(evt) {

package/cjs/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/cjs/Banners/Promote/Promote.js

@@ -98,7 +98,7 @@ var Promote = function Promote(_ref) {
     className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["absolute top-2 right-2"])))
   }, /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
     icon: _reactFeather.X,
-    title: "Close banner",
+    title: "Close",
     variant: "subtle",
     size: "small",
     onClick: function onClick(evt) {

package/cjs/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/cjs/DatePicker/DatePicker/DatePicker.js

@@ -103,6 +103,17 @@ var DatePicker = function DatePicker(props) {
     }
   };
 
+  var yearProps = (0, _react.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["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
     ref: setTargetElement,
     className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["inline-block"])))
@@ -134,7 +145,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["default"].createElement(_Footer["default"], null, props.renderLeftFooter && /*#__PURE__*/_react["default"].createElement("div", null, props.renderLeftFooter({
+  }, yearProps)), /*#__PURE__*/_react["default"].createElement(_Footer["default"], null, props.renderLeftFooter && /*#__PURE__*/_react["default"].createElement("div", null, props.renderLeftFooter({
     state: state,
     dispatch: dispatch
   })), !props.renderRightPanel && /*#__PURE__*/_react["default"].createElement(_FooterActions["default"], {

package/cjs/DatePicker/DatePicker.tailwind.js

@@ -28,8 +28,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"
     }
   }, (0, _defineProperty2["default"])(_addComponents, prefix(".date-picker, .date-range-picker"), {
     "& .DayPicker-Months": {

package/cjs/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/cjs/DatePicker/DateRangePicker/DateRangePicker.js

@@ -15,6 +15,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
@@ -37,6 +39,8 @@ var _dateRangePickerTimeRange = require("./dateRangePickerTimeRange");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
+var _excluded = ["id", "range", "displayOnlyRanges", "calendarProps", "initialState", "stateReducer", "onAction", "validate", "renderTarget", "renderLeftFooter", "renderRightPanel", "buttonSize", "modalPlacement"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -65,7 +69,8 @@ var DateRangePicker = function DateRangePicker(_ref2) {
       renderLeftFooter = _ref2.renderLeftFooter,
       renderRightPanel = _ref2.renderRightPanel,
       buttonSize = _ref2.buttonSize,
-      modalPlacement = _ref2.modalPlacement;
+      modalPlacement = _ref2.modalPlacement,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -173,6 +178,17 @@ var DateRangePicker = function DateRangePicker(_ref2) {
     }),
     hoveredTo: (_state$hovered = state.hovered) !== null && _state$hovered !== void 0 ? _state$hovered : undefined
   };
+  var yearProps = (0, _react.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["default"].createElement("div", {
     className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["date-range-picker"])))
   }, /*#__PURE__*/_react["default"].createElement("span", {
@@ -212,7 +228,7 @@ var DateRangePicker = function DateRangePicker(_ref2) {
     onDayClick: handleDayClick,
     onDayMouseEnter: handleMouseEnter,
     onDayMouseLeave: handleMouseLeave
-  })), /*#__PURE__*/_react["default"].createElement(_Footer["default"], null, renderLeftFooter && /*#__PURE__*/_react["default"].createElement("div", null, renderLeftFooter({
+  }, yearProps)), /*#__PURE__*/_react["default"].createElement(_Footer["default"], null, renderLeftFooter && /*#__PURE__*/_react["default"].createElement("div", null, renderLeftFooter({
     state: state,
     dispatch: dispatch
   })), !renderRightPanel && /*#__PURE__*/_react["default"].createElement(_FooterActions["default"], {

package/cjs/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/cjs/DatePicker/components/Calendar.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,28 +13,73 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactDayPicker = _interopRequireDefault(require("react-day-picker"));
 
+var _dateFns = require("date-fns");
+
 var _NavBar = _interopRequireDefault(require("./NavBar"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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 = (0, _react.useMemo)(function () {
+    return props.editableYear && props.initialDate ? props.initialDate : new Date();
+  }, [props]);
+
+  var _useState = (0, _react.useState)(initialDate),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      month = _useState2[0],
+      setMonth = _useState2[1];
+
+  var years = (0, _react.useMemo)(function () {
+    if (!props.editableYear) return [];
+    if (props.years) return props.years;
+    return (0, _dateFns.eachYearOfInterval)({
+      start: (0, _dateFns.add)(initialDate, {
+        years: -5
+      }),
+      end: (0, _dateFns.add)(initialDate, {
+        years: 10
+      })
+    }).map(_dateFns.getYear);
+  }, [props, initialDate]);
+  var onYearChange = (0, _react.useCallback)(function (year) {
+    return setMonth((0, _dateFns.setYear)(month, year));
+  }, [month]);
   var curatedProps = Object.fromEntries(Object.entries(props).filter(function (_ref) {
     var _ref2 = (0, _slicedToArray2["default"])(_ref, 1),
         key = _ref2[0];
 
-    return (// @ts-ignore
+    return (// @ts-expect-error
       !excludedDayPickerPropsList.includes(key)
     );
   }));
+  var yearsProps = (0, _react.useMemo)(function () {
+    return props.editableYear ? {
+      editableYear: true,
+      years: years,
+      onYearChange: onYearChange
+    } : {
+      editableYear: false
+    };
+  }, [onYearChange, props, years]);
   return /*#__PURE__*/_react["default"].createElement(_reactDayPicker["default"], (0, _extends2["default"])({}, curatedProps, {
+    month: props.editableYear ? month : undefined,
     showOutsideDays: false,
     enableOutsideDaysClick: false,
     fixedWeeks: false,
-    navbarElement: _NavBar["default"]
+    navbarElement: function navbarElement(navBarProps) {
+      return /*#__PURE__*/_react["default"].createElement(_NavBar["default"], (0, _extends2["default"])({}, navBarProps, yearsProps));
+    },
+    captionElement: function captionElement() {
+      return null;
+    }
   }));
 };
 

package/cjs/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/cjs/DatePicker/components/NavBar.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,13 @@ exports["default"] = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactFeather = require("react-feather");
 
@@ -17,15 +25,37 @@ var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/sa
 
 var _Button = require("../../Button");
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var _excluded = ["onPreviousClick", "onNextClick", "showPreviousButton", "showNextButton", "month", "localeUtils"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var years = (0, _react.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, (0, _toConsumableArray2["default"])(props.years).concat([monthYear]));
+    var maxYear = Math.max.apply(Math, (0, _toConsumableArray2["default"])(props.years).concat([monthYear]));
+    return Array.from({
+      length: maxYear - minYear + 1
+    }, function (_, i) {
+      return i + minYear;
+    });
+  }, [props, month]);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full absolute top-3 left-0 px-5 pb-0 flex justify-between"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full top-3 left-0 pt-5 px-5 pb-2 flex justify-between"])))
   }, /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
     icon: _reactFeather.ChevronLeft,
     title: "Previous month",
@@ -33,7 +63,22 @@ var NavBar = function NavBar(_ref) {
       return onPreviousClick();
     },
     disabled: !showPreviousButton
-  }), /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex items-center text-center"]))))
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["font-medium text-md"])))
+  }, localeUtils.getMonths()[month.getMonth()], " ", props.editableYear ? /*#__PURE__*/_react["default"].createElement("select", {
+    className: (0, _classnames["default"])("DayPicker-Year", (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["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["default"].createElement("option", {
+      key: year,
+      value: year
+    }, year);
+  })) : month.getFullYear())), /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
     icon: _reactFeather.ChevronRight,
     title: "Next month",
     onClick: function onClick() {

package/cjs/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/cjs/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/cjs/Input/Input.js

@@ -129,7 +129,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, externalRef) {
   var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : _react["default"].Fragment;
   var clearable = typeof clearableProp === "boolean" ? clearableProp : type === "search";
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n          input group\n          ", "\n          ", "\n        "])), focused && "input-focused", disabled && "input-disabled"), VARIANT_CLASSNAMES[variant], STATUS_CLASSNAMES[status], className),
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n            input no-search-input-decoration group\n            ", "\n            ", "\n          "])), focused && "input-focused", disabled && "input-disabled"), VARIANT_CLASSNAMES[variant], STATUS_CLASSNAMES[status], className),
     style: style,
     onClick: function onClick() {
       var _inputRef$current;

package/cjs/Input/Input.tailwind.js

@@ -39,9 +39,6 @@ var inputPlugin = function inputPlugin(_ref) {
           "-webkit-appearance": "none",
           margin: 0
         },
-        '&[type="search"]::-webkit-search-decoration, &[type="search"]::-webkit-search-cancel-button, &[type="search"]::-webkit-search-results-button, &[type="search"]::-webkit-search-results-decoration': {
-          "-webkit-appearance": "none"
-        },
         "&:focus": {
           outline: "none"
         },

package/cjs/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/cjs/KeyboardKey/KeyboardKey.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+export interface KeyboardKeyProps {
+    className?: string;
+    value: string;
+}
+export declare const KeyboardKey: FC<KeyboardKeyProps>;

package/cjs/KeyboardKey/KeyboardKey.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KeyboardKey = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactFeather = require("react-feather");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _templateObject;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var KEY_MAPPINGS = {
+  up: _reactFeather.ArrowUp,
+  down: _reactFeather.ArrowDown,
+  left: _reactFeather.ArrowLeft,
+  right: _reactFeather.ArrowRight,
+  enter: _reactFeather.CornerDownLeft,
+  escape: "esc"
+};
+
+var KeyboardKey = function KeyboardKey(_ref) {
+  var className = _ref.className,
+      value = _ref.value;
+  var mappedValue = !KEY_MAPPINGS[value] ? value : typeof KEY_MAPPINGS[value] === "string" ? KEY_MAPPINGS[value] : /*#__PURE__*/(0, _react.createElement)(KEY_MAPPINGS[value], {
+    "aria-label": value,
+    width: "1em",
+    height: "1em"
+  });
+  return /*#__PURE__*/_react["default"].createElement("kbd", {
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["keyboard-key "]))), className)
+  }, mappedValue);
+};
+
+exports.KeyboardKey = KeyboardKey;

package/cjs/KeyboardKey/KeyboardKey.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = keyboardKeyPlugin;
+/**
+ * @type {import('../tailwind-types').TailwindPlugin}
+ */
+declare const keyboardKeyPlugin: import('../tailwind-types').TailwindPlugin;