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

package/cjs/KeyboardKey/KeyboardKey.tailwind.js

@@ -0,0 +1,33 @@
+"use strict";
+
+// @ts-check
+
+/**
+ * @type {import('../tailwind-types').TailwindPlugin}
+ */
+var keyboardKeyPlugin = function keyboardKeyPlugin(_ref) {
+  var addComponents = _ref.addComponents,
+      theme = _ref.theme;
+  addComponents({
+    ".keyboard-key": {
+      borderRadius: theme("borderRadius.DEFAULT"),
+      height: 20,
+      minWidth: 20,
+      padding: "0 4px",
+      display: "inline-flex",
+      textAlign: "center",
+      alignItems: "center",
+      justifyContent: "center",
+      fontFamily: theme("fontFamily.mono"),
+      // Matches typo-subdued
+      color: theme("colors.grey.600"),
+      // Should match display-caption
+      fontSize: theme("fontSize.sm"),
+      lineHeight: theme("lineHeight.sm"),
+      background: "linear-gradient(134deg, #e6e7ec 0%, #ffffff 70%)",
+      boxShadow: "\n        2px 1px 4px -2px rgba(35, 38, 59, 0.24),\n        inset -0.6px -0.6px 1px #dcdde7, inset 0.6px 0.6px 1px #ffffff\n      "
+    }
+  });
+};
+
+module.exports = keyboardKeyPlugin;

package/cjs/KeyboardKey/index.d.ts

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

package/cjs/KeyboardKey/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _KeyboardKey.KeyboardKey;
+  }
+});
+
+var _KeyboardKey = require("./KeyboardKey");
+
+Object.keys(_KeyboardKey).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _KeyboardKey[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _KeyboardKey[key];
+    }
+  });
+});

package/cjs/Modal/Modal.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Modal = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -35,6 +37,8 @@ var _Card = _interopRequireDefault(require("../Card"));
 
 var _Button = require("../Button");
 
+var _uniqueId = _interopRequireDefault(require("../utils/uniqueId"));
+
 var _ModalFooter = _interopRequireDefault(require("./components/ModalFooter"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
@@ -43,6 +47,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
+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) { (0, _defineProperty2["default"])(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; }
+
 var ModalAnimation = function ModalAnimation(props) {
   return (
     /*#__PURE__*/
@@ -95,6 +103,9 @@ var Modal = function Modal(_ref) {
   var dialogRef = (0, _react.useRef)(null);
   var mouseDownTargetRef = (0, _react.useRef)(null);
   var ModalContainer = animate ? ModalAnimation : ModalNoAnimation;
+  var modalTitleId = (0, _react.useMemo)(function () {
+    return (0, _uniqueId["default"])("modal-title");
+  }, []);
   (0, _useLockBodyScroll["default"])(open);
   (0, _useKeyPressEvent["default"])("Escape", function () {
     if (open) onDismiss();
@@ -126,15 +137,23 @@ var Modal = function Modal(_ref) {
       modalWrapperRef.removeEventListener("mousedown", onMouseDown);
     };
   }, [modalWrapperRef, onDismiss]);
+
+  var modalAccessibilityProps = _objectSpread({
+    role: "dialog"
+  }, title ? {
+    "aria-labelledby": modalTitleId
+  } : {
+    "aria-label": "Modal"
+  });
+
   return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement(ModalContainer, {
     "in": open
   }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-900 bg-opacity-30 z-modalOverlay inset-x-0 inset-y-0 fixed w-full h-full"]))))
-  }), /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["modal-container inset-x-0 inset-y-0 fixed w-full h-full p-4 overflow-x-hidden overflow-y-auto"]))), centerY && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"])))),
-    ref: setModalWrapperRef,
-    role: "dialog"
-  }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+    ref: setModalWrapperRef
+  }, modalAccessibilityProps), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
     ref: dialogRef,
     elevation: "500",
     className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
@@ -142,6 +161,7 @@ var Modal = function Modal(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("header", {
     className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n                px-8 min-h-14\n                flex items-center justify-between  space-x-2\n                ", "\n                ", "\n              "])), title ? "border-b border-grey-100" : "justify-end", !title && hideCloseIcon && "hidden")
   }, title && /*#__PURE__*/_react["default"].createElement("h2", {
+    id: modalTitleId,
     className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex-1 display-heading truncate"])))
   }, title), !hideCloseIcon && /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
     icon: _reactFeather.X,

package/cjs/ProgressSpinner/ProgressSpinner.js

@@ -41,7 +41,10 @@ var ProgressSpinner = function ProgressSpinner(_ref) {
     className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["progress-spinner"]))), align && ALIGN_CLASSNAMES[align], className),
     viewBox: "".concat(size / 2, " ").concat(size / 2, " ").concat(size, " ").concat(size),
     width: size,
-    height: size
+    height: size,
+    role: "status",
+    "aria-busy": true,
+    "aria-live": "polite"
   }), /*#__PURE__*/_react["default"].createElement("title", null, "Loading spinner"), /*#__PURE__*/_react["default"].createElement("circle", {
     cx: size,
     cy: size,

package/cjs/RadioGroup/RadioGroup.js

@@ -47,7 +47,7 @@ var RadioGroupItem = function RadioGroupItem(_ref) {
   var checked = value === contextValue;
   disabled = contextDisabled || disabled;
   return /*#__PURE__*/_react["default"].createElement("label", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n      flex items-center justify-between\n      min-h-10 px-4 py-2\n      hover:bg-grey-100 ", "\n      ", "\n      ", ""])), disabled && "text-grey-300", disabled ? "cursor-not-allowed" : "cursor-pointer", textPosition === "right" && "flex-row-reverse")
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n      flex items-center justify-between\n      min-h-10 px-4 py-2\n      ", "\n      ", "\n      ", ""])), disabled ? "text-grey-300" : "hover:bg-grey-100", disabled ? "cursor-not-allowed" : "cursor-pointer", textPosition === "right" && "flex-row-reverse")
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex-1 truncate ", ""])), textPosition === "right" ? "ml-2" : "mr-2")
   }, children), /*#__PURE__*/_react["default"].createElement(_RadioButton["default"], {

package/cjs/Tag/Tag.d.ts

@@ -1,8 +1,12 @@
 import React from "react";
-import { ColorVariant } from "../types";
+import type { ColorVariant } from "../types";
+export declare type TagVariants = ColorVariant | "pink";
 export interface TagProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
-    /** @default "grey" */
-    variant?: ColorVariant;
+    /**
+     * The "pink" variant should only be used for **Algolia admin** related things.
+     * @default "grey"
+     * */
+    variant?: TagVariants;
     onDelete?: React.MouseEventHandler<HTMLElement>;
 }
 /**

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

@@ -24,6 +24,7 @@ export * from "./FlexGrid";
 export * from "./HelpUnderline";
 export * from "./Input";
 export * from "./Insert";
+export * from "./KeyboardKey";
 export * from "./Link";
 export * from "./Medallion";
 export * from "./Modal";

package/cjs/index.js

@@ -352,6 +352,20 @@ Object.keys(_Insert).forEach(function (key) {
   });
 });
 
+var _KeyboardKey = require("./KeyboardKey");
+
+Object.keys(_KeyboardKey).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _KeyboardKey[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _KeyboardKey[key];
+    }
+  });
+});
+
 var _Link = require("./Link");
 
 Object.keys(_Link).forEach(function (key) {

package/cjs/styles/tailwind.config.js

@@ -151,5 +151,5 @@ module.exports = {
     borderWidth: ["responsive", "first"],
     visibility: ["responsive", "group-hover"]
   },
-  plugins: [require("./base.tailwind"), typography.plugin, require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Flag/Flag.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../RangeSlider/RangeSlider.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Sidebar/Sidebar.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Tables/DataTable/DataTable.tailwind"), require("../Tables/Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
+  plugins: [require("./base.tailwind"), require("../utilities/utilities.tailwind"), typography.plugin, require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Flag/Flag.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../KeyboardKey/KeyboardKey.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../RangeSlider/RangeSlider.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Sidebar/Sidebar.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Tables/DataTable/DataTable.tailwind"), require("../Tables/Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
 };

package/cjs/utilities/utilities.tailwind.d.ts

@@ -0,0 +1,2 @@
+declare const _exports: import('../tailwind-types').TailwindPlugin;
+export = _exports;

package/cjs/utilities/utilities.tailwind.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+// @ts-check
+
+/**
+ * @type {import('../tailwind-types').TailwindPlugin}
+ */
+module.exports = function (_ref) {
+  var addUtilities = _ref.addUtilities;
+  addUtilities({
+    ".no-scrollbar": {
+      // for Firefox
+      "scrollbar-width": "none",
+      // for Internet Explorer, Edge
+      "-ms-overflow-style": "none",
+      // for Chrome, Safari, and Opera
+      "&::-webkit-scrollbar": {
+        display: "none",
+        width: 0
+      }
+    },
+    ".no-search-input-decoration": {
+      "&[type='search']": (0, _defineProperty2["default"])({}, "&::-webkit-search-decoration,\n        &::-webkit-search-cancel-button,\n        &::-webkit-search-results-button,\n        &::-webkit-search-results-decoration", {
+        display: "none"
+      })
+    }
+  });
+};

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