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

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

@@ -101,7 +101,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
   var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : React.Fragment;
   var clearable = typeof clearableProp === "boolean" ? clearableProp : type === "search";
   return /*#__PURE__*/React.createElement("div", {
-    className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          input group\n          ", "\n          ", "\n        "])), focused && "input-focused", disabled && "input-disabled"), VARIANT_CLASSNAMES[variant], STATUS_CLASSNAMES[status], className),
+    className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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/esm/Input/Input.tailwind.js

@@ -37,9 +37,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/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/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/esm/KeyboardKey/KeyboardKey.js

@@ -0,0 +1,28 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import React, { createElement } from "react";
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight, CornerDownLeft } from "react-feather";
+import cx from "classnames";
+import stl from "../styles/helpers/satellitePrefixer";
+var KEY_MAPPINGS = {
+  up: ArrowUp,
+  down: ArrowDown,
+  left: ArrowLeft,
+  right: ArrowRight,
+  enter: CornerDownLeft,
+  escape: "esc"
+};
+export 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__*/createElement(KEY_MAPPINGS[value], {
+    "aria-label": value,
+    width: "1em",
+    height: "1em"
+  });
+  return /*#__PURE__*/React.createElement("kbd", {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["keyboard-key "]))), className)
+  }, mappedValue);
+};

package/esm/KeyboardKey/KeyboardKey.tailwind.d.ts

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

package/esm/KeyboardKey/KeyboardKey.tailwind.js

@@ -0,0 +1,31 @@
+// @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      "
+    }
+  });
+};
+
+export default keyboardKeyPlugin;

package/esm/KeyboardKey/index.d.ts

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

package/esm/KeyboardKey/index.js

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

package/esm/Modal/Modal.js

@@ -1,10 +1,15 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
-import React, { useRef, useState, useEffect } from "react";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { useRef, useState, useEffect, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { CSSTransition } from "react-transition-group";
 import useKeyPressEvent from "react-use/lib/useKeyPressEvent";
@@ -14,6 +19,7 @@ import { X } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";
 import Card from "../Card";
 import { IconButton } from "../Button";
+import uniqueId from "../utils/uniqueId";
 import ModalFooter from "./components/ModalFooter";
 
 var ModalAnimation = function ModalAnimation(props) {
@@ -67,6 +73,9 @@ export var Modal = function Modal(_ref) {
   var dialogRef = useRef(null);
   var mouseDownTargetRef = useRef(null);
   var ModalContainer = animate ? ModalAnimation : ModalNoAnimation;
+  var modalTitleId = useMemo(function () {
+    return uniqueId("modal-title");
+  }, []);
   useLockBodyScroll(open);
   useKeyPressEvent("Escape", function () {
     if (open) onDismiss();
@@ -98,15 +107,23 @@ export 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__*/createPortal( /*#__PURE__*/React.createElement(ModalContainer, {
     "in": open
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-grey-900 bg-opacity-30 z-modalOverlay inset-x-0 inset-y-0 fixed w-full h-full"]))))
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", _extends({
     className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["modal-container inset-x-0 inset-y-0 fixed w-full h-full p-4 overflow-x-hidden overflow-y-auto"]))), centerY && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center"])))),
-    ref: setModalWrapperRef,
-    role: "dialog"
-  }, /*#__PURE__*/React.createElement(Card, {
+    ref: setModalWrapperRef
+  }, modalAccessibilityProps), /*#__PURE__*/React.createElement(Card, {
     ref: dialogRef,
     elevation: "500",
     className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
@@ -114,6 +131,7 @@ export var Modal = function Modal(_ref) {
   }, /*#__PURE__*/React.createElement("header", {
     className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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.createElement("h2", {
+    id: modalTitleId,
     className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex-1 display-heading truncate"])))
   }, title), !hideCloseIcon && /*#__PURE__*/React.createElement(IconButton, {
     icon: X,

package/esm/ProgressSpinner/ProgressSpinner.js

@@ -27,7 +27,10 @@ export var ProgressSpinner = function ProgressSpinner(_ref) {
     className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["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.createElement("title", null, "Loading spinner"), /*#__PURE__*/React.createElement("circle", {
     cx: size,
     cy: size,

package/esm/RadioGroup/RadioGroup.js

@@ -25,7 +25,7 @@ export var RadioGroupItem = function RadioGroupItem(_ref) {
   var checked = value === contextValue;
   disabled = contextDisabled || disabled;
   return /*#__PURE__*/React.createElement("label", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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.createElement("span", {
     className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-1 truncate ", ""])), textPosition === "right" ? "ml-2" : "mr-2")
   }, children), /*#__PURE__*/React.createElement(RadioButton, {

package/esm/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/esm/Tag/Tag.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 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;
 
 import React, { forwardRef } from "react";
 import cx from "classnames";
@@ -15,15 +15,17 @@ var VARIANT_CLASSNAMES = {
   blue: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-blue-100 border-blue-200 text-blue-700"]))),
   green: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-100 border-green-300 text-green-800"]))),
   orange: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-orange-100 border-orange-300 text-orange-800"]))),
-  red: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-100 border-red-200 text-red-700"])))
+  red: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-100 border-red-200 text-red-700"]))),
+  pink: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-pink-100 border-pink-200 text-pink-700"])))
 };
 var BUTTON_CLOSE_VARIANT_CLASSNAMES = {
-  accent: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["border-accent-200 hover:bg-accent-200 focus:bg-accent-200"]))),
-  grey: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["border-grey-200 hover:bg-grey-200 focus:bg-grey-200"]))),
-  blue: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border-blue-200 hover:bg-blue-200 focus:bg-blue-200"]))),
-  green: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-green-300 hover:bg-green-300 focus:bg-green-300"]))),
-  orange: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["border-orange-300 hover:bg-orange-300 focus:bg-orange-300"]))),
-  red: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["border-red-200 hover:bg-red-200 focus:bg-red-200"])))
+  accent: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["border-accent-200 hover:bg-accent-200 focus:bg-accent-200"]))),
+  grey: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border-grey-200 hover:bg-grey-200 focus:bg-grey-200"]))),
+  blue: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-blue-200 hover:bg-blue-200 focus:bg-blue-200"]))),
+  green: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["border-green-300 hover:bg-green-300 focus:bg-green-300"]))),
+  orange: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["border-orange-300 hover:bg-orange-300 focus:bg-orange-300"]))),
+  red: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["border-red-200 hover:bg-red-200 focus:bg-red-200"]))),
+  pink: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["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**.
@@ -56,7 +58,7 @@ export var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   var title = typeof children === "string" ? children : "tag";
-  var tagClassName = cx(stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["tag"]))), VARIANT_CLASSNAMES[variant], className);
+  var tagClassName = cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["tag"]))), VARIANT_CLASSNAMES[variant], className);
   var editable = Boolean(onDelete);
 
   var handleDelete = function handleDelete(evt) {
@@ -72,9 +74,9 @@ export var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-label": title,
     ref: ref
   }), /*#__PURE__*/React.createElement("span", {
-    className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["truncate flex-1"])))
+    className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["truncate flex-1"])))
   }, children), editable && /*#__PURE__*/React.createElement("button", {
-    className: cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["tag-close-button"]))), BUTTON_CLOSE_VARIANT_CLASSNAMES[variant]),
+    className: cx(stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["tag-close-button"]))), BUTTON_CLOSE_VARIANT_CLASSNAMES[variant]),
     type: "button",
     onClick: handleDelete,
     "aria-label": "Remove ".concat(title)

package/esm/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/esm/index.js

@@ -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/esm/styles/tailwind.config.js

@@ -146,5 +146,5 @@ export default {
     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/esm/utilities/utilities.tailwind.d.ts

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

package/esm/utilities/utilities.tailwind.js

@@ -0,0 +1,27 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+// @ts-check
+
+/**
+ * @type {import('../tailwind-types').TailwindPlugin}
+ */
+export default (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']": _defineProperty({}, "&::-webkit-search-decoration,\n        &::-webkit-search-cancel-button,\n        &::-webkit-search-results-button,\n        &::-webkit-search-results-decoration", {
+        display: "none"
+      })
+    }
+  });
+});

package/package.json

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