@algolia/satellite 1.0.0-beta.162 → 1.0.0-beta.164

package/cjs/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, VFC } from "react";
+import type { HTMLAttributes } from "react";
 export declare type AnnouncementBadgeSizes = "default" | "small";
 export declare type AnnouncementBadgeTexts = "new" | "beta" | "internal" | "pilot";
 export declare type AnnouncementBadgeLocale = {
@@ -17,5 +17,5 @@ export interface AnnouncementBadgeProps extends HTMLAttributes<HTMLSpanElement>
     locale?: AnnouncementBadgeLocale;
     children?: never;
 }
-export declare const AnnouncementBadge: VFC<AnnouncementBadgeProps>;
+export declare const AnnouncementBadge: import("react").ForwardRefExoticComponent<AnnouncementBadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default AnnouncementBadge;

package/cjs/AnnouncementBadge/AnnouncementBadge.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
 var _Satellite = require("../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,7 +28,7 @@ var SIZE_CLASSNAMES = {
   "default": (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["display-body h-6 leading-md px-2"]))),
   small: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["display-caption px-1"])))
 };
-var AnnouncementBadge = function AnnouncementBadge(_ref) {
+var AnnouncementBadge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? "default" : _ref$size,
     _ref$text = _ref.text,
@@ -39,11 +40,14 @@ var AnnouncementBadge = function AnnouncementBadge(_ref) {
   var contextLocale = (0, _Satellite.useLocale)("announcementBadge");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_LOCALE), contextLocale), propsLocale);
   var variant = typeof variantProp === "string" ? variantProp : text === "internal" ? "red" : "accent";
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     className: (0, _clsx["default"])(DEFAULT_CLASSNAME, variant === "red" ? (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-red-600"]))) : (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-600"]))), SIZE_CLASSNAMES[size], className),
     children: locale[text]
   }));
-};
+});
 exports.AnnouncementBadge = AnnouncementBadge;
+AnnouncementBadge.displayName = "AnnouncementBadge";
 var _default = AnnouncementBadge;
 exports["default"] = _default;

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -1,7 +1,7 @@
 import type { A11yStatusMessageOptions, ControllerStateAndHelpers } from "downshift";
 import { Component } from "react";
 import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from "react";
-import { FieldState } from "../Field/FieldStateContext";
+import type { FieldState } from "../Field/FieldStateContext";
 import type { AutoCompleteLocale, AutoCompleteProps, Option, OptionItemProps } from "./types";
 interface State {
     inputFocused: boolean;

package/cjs/AutoComplete/AutoComplete.tailwind.js

@@ -23,7 +23,7 @@ var autoCompletePlugin = plugin(function (_ref) {
       border: "1px solid ".concat(theme("colors.grey.500")),
       boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       transition: "all 100ms ease-in-out",
-      "&:not(.autocomplete-disabled):hover": {
+      "&:not(.autocomplete-disabled, .autocomplete-focused):hover": {
         borderColor: theme("colors.grey.600")
       },
       // Workaround for ie

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

@@ -1,5 +1,5 @@
 import type { ReactNode, VFC } from "react";
-import { MedallionVariant } from "../../Medallion";
+import type { MedallionVariant } from "../../Medallion";
 import type { IconComponentType } from "../../types";
 export interface AutoCompleteEmptyStateProps {
     icon?: IconComponentType;

package/cjs/Button/PolymorphicButton.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
-import { ButtonBaseProps, PolymorphicComponentPropWithRef } from "./types";
+import type { ButtonBaseProps, PolymorphicComponentPropWithRef } from "./types";
 export declare type PolymorphicButtonProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, ButtonBaseProps>;
 declare type PolymorphicButtonComponent = (<C extends React.ElementType = "button">(props: PolymorphicButtonProps<C>) => React.ReactElement | null) & {
     displayName?: string;
 };
 /**
  * `PolymorphicButton` is intended for internal use
+ * @ignore
  */
 export declare const PolymorphicButton: PolymorphicButtonComponent;
 export {};

package/cjs/Button/PolymorphicButton.js

@@ -26,6 +26,7 @@ var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_te
 var ICON_SIZE = 16;
 /**
  * `PolymorphicButton` is intended for internal use
+ * @ignore
  */
 var PolymorphicButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$as = props.as,

package/cjs/Button/PolymorphicIconButton.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { TooltipWrapperBaseProps } from "../Tooltip/types";
 import type { IconComponentType } from "../types";
-import { ButtonSize, ButtonVariant, PolymorphicComponentPropWithRef } from "./types";
+import type { ButtonSize, ButtonVariant, PolymorphicComponentPropWithRef } from "./types";
 export interface IconButtonBaseProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -19,6 +19,7 @@ declare type PolymorphicIconButtonComponent = (<C extends React.ElementType = "b
 };
 /**
  * `PolymorphicIconButton` is intended for internal use
+ * @ignore
  */
 export declare const PolymorphicIconButton: PolymorphicIconButtonComponent;
 export {};

package/cjs/Button/PolymorphicIconButton.js

@@ -31,6 +31,7 @@ var VARIANT_CLASSNAMES = _objectSpread(_objectSpread({}, _styles.BUTTON_VARIANT_
 });
 /**
  * `PolymorphicIconButton` is intended for internal use
+ * @ignore
  */
 var PolymorphicIconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$as = props.as,

package/cjs/Button/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./Button";
 export * from "./IconButton";
 export * from "./ButtonGroup";
-export { ButtonSize, ButtonVariant } from "./types";
+export type { ButtonSize, ButtonVariant } from "./types";
 export { default } from "./Button";

package/cjs/Button/index.js

@@ -4,22 +4,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  ButtonSize: true,
-  ButtonVariant: true
-};
-Object.defineProperty(exports, "ButtonSize", {
-  enumerable: true,
-  get: function get() {
-    return _types.ButtonSize;
-  }
-});
-Object.defineProperty(exports, "ButtonVariant", {
-  enumerable: true,
-  get: function get() {
-    return _types.ButtonVariant;
-  }
-});
+var _exportNames = {};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -62,6 +47,5 @@ Object.keys(_ButtonGroup).forEach(function (key) {
     }
   });
 });
-var _types = require("./types");
 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; }

package/cjs/DatePicker/DatePicker/DatePicker.d.ts

@@ -3,7 +3,7 @@ import type { CalendarProps } from "../components/Calendar";
 import type { DisplayProps } from "../components/Display";
 import type { FooterActionsProps } from "../components/FooterActions";
 import type { SharedDatePickerProps } from "../types";
-import { DatePickerReducerAction, DatePickerReducerState } from "./datePickerReducer";
+import type { DatePickerReducerAction, DatePickerReducerState } from "./datePickerReducer";
 interface LeftFooterComponentArgs {
     state: DatePickerReducerState;
     dispatch: Dispatch<DatePickerReducerAction>;

package/cjs/DatePicker/DateRangePicker/DateRangePicker.d.ts

@@ -2,7 +2,8 @@ import type { Dispatch, ReactNode, VFC } from "react";
 import type { CalendarProps } from "../components/Calendar";
 import type { SharedDatePickerProps } from "../types";
 import type { DateRangePickerDisplayProps } from "./DateRangePickerDisplay";
-import { dateRangePickerReducer, DateRangePickerReducerAction, DateRangePickerReducerState } from "./dateRangePickerReducer";
+import type { DateRangePickerReducerAction, DateRangePickerReducerState } from "./dateRangePickerReducer";
+import { dateRangePickerReducer } from "./dateRangePickerReducer";
 import type { DateRangePickerTimeRange } from "./dateRangePickerTimeRange";
 interface LeftFooterComponentArgs {
     state: DateRangePickerReducerState;

package/cjs/DatePicker/DateRangePicker/DateRangePickerDisplay.d.ts

@@ -1,8 +1,8 @@
 import type { VFC } from "react";
 import type { WithRequiredProperty } from "../../types";
-import { DisplayProps } from "../components/Display";
+import type { DisplayProps } from "../components/Display";
 import type { DatePickerLocale } from "../types";
-import { DateRangePickerTimeRange } from "./dateRangePickerTimeRange";
+import type { DateRangePickerTimeRange } from "./dateRangePickerTimeRange";
 export interface DateRangePickerDisplayProps {
     id?: string;
     onClick: DisplayProps["onClick"];

package/cjs/DatePicker/DateRangePicker/dateRangePickerReducer.d.ts

@@ -1,5 +1,5 @@
 import type { MouseEvent, Reducer } from "react";
-import { DateRangePickerCompleteTimeRange, DateRangePickerTimeRange } from "./dateRangePickerTimeRange";
+import type { DateRangePickerCompleteTimeRange, DateRangePickerTimeRange } from "./dateRangePickerTimeRange";
 export declare enum DateRangePickerActionTypes {
     show = "show",
     dateSelect = "date select",

package/cjs/DatePicker/components/Calendar.d.ts

@@ -1,5 +1,5 @@
 import type { VFC } from "react";
-import { DayPickerDefaultProps, DayPickerRangeProps, DayPickerSingleProps } from "react-day-picker";
+import type { DayPickerDefaultProps, DayPickerRangeProps, DayPickerSingleProps } from "react-day-picker";
 import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
 declare type ExcludedDayPickerProps = "captionElement" | "showOutsideDays" | "enableOutsideDaysClick" | "fixedWeeks" | "labels" | "navbarElement" | "onTodayButtonClick" | "pagedNavigation" | "renderDay" | "renderWeek" | "reverseMonths" | "showWeekNumber" | "showWeekDays" | "weekdayElement" | "weekdaysLong" | "weekdaysShort";

package/cjs/DatePicker/components/FooterActions.d.ts

@@ -1,5 +1,5 @@
 import type { VFC } from "react";
-import { ButtonProps } from "../../Button";
+import type { ButtonProps } from "../../Button";
 import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
 export interface FooterActionsProps {

package/cjs/DatePicker/components/NavBar.d.ts

@@ -1,5 +1,5 @@
 import type { VFC } from "react";
-import { CaptionProps } from "react-day-picker";
+import type { CaptionProps } from "react-day-picker";
 import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
 import type { EditableYearProps } from "./Calendar";

package/cjs/Dropdown/Dropdown.d.ts

@@ -1,7 +1,6 @@
 import type { StrictModifiers } from "@popperjs/core";
-import { VFC } from "react";
-import type { ReactNode } from "react";
-import { StrictModifier } from "react-popper";
+import type { ReactNode, VFC } from "react";
+import type { StrictModifier } from "react-popper";
 import DropdownButtonItem from "./components/DropdownButtonItem";
 import { DropdownCollapsibleItem } from "./components/DropdownCollapsibleItem";
 import DropdownDivider from "./components/DropdownDivider";

package/cjs/Dropdown/DropdownButton.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from "react";
-import { ButtonProps } from "../Button";
-import { RenderTargetParams } from "./Dropdown";
+import type { ReactNode } from "react";
+import type { ButtonProps } from "../Button";
+import type { RenderTargetParams } from "./Dropdown";
 export interface DropdownButtonProps extends Omit<ButtonProps, "title" | "endIcon"> {
     /** Descriptive title for `Dropdown` */
     title: ReactNode;

package/cjs/Dropdown/components/DropdownButtonItem.d.ts

@@ -1,6 +1,6 @@
 import type { VFC } from "react";
 import type { IconComponentType } from "../../types";
-import { DropdownBaseItemProps } from "../useDropdownItemProps";
+import type { DropdownBaseItemProps } from "../useDropdownItemProps";
 export declare type DropdownButtonItemProps = DropdownBaseItemProps<HTMLButtonElement> & JSX.IntrinsicElements["button"] & {
     /** Left aligned icon */
     startIcon?: IconComponentType;

package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.d.ts

@@ -1,5 +1,4 @@
-import { VFC } from "react";
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type DropdownCollapsibleItemsMultiGroupProps = {
     initialExpandedItems?: string[];
     children: ReactNode;

package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.d.ts

@@ -1,5 +1,4 @@
-import { VFC } from "react";
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type DropdownCollapsibleItemsExclusiveGroupProps = {
     initialExpandedItem?: string;
     children: ReactNode;

package/cjs/Dropdown/components/DropdownLinkItem.d.ts

@@ -1,6 +1,6 @@
 import type { VFC } from "react";
 import type { IconComponentType } from "../../types";
-import { DropdownBaseItemProps } from "../useDropdownItemProps";
+import type { DropdownBaseItemProps } from "../useDropdownItemProps";
 export declare type DropdownLinkItemProps = DropdownBaseItemProps<HTMLAnchorElement> & JSX.IntrinsicElements["a"] & {
     href: string;
     /** Left aligned icon */

package/cjs/Dropdown/components/DropdownLinkItem.js

@@ -9,17 +9,19 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _reactFeather = require("react-feather");
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 var _useLinkProps = _interopRequireDefault(require("../../utils/useLinkProps"));
 var _useDropdownItemProps = _interopRequireDefault(require("../useDropdownItemProps"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var _excluded = ["toggle", "disabled", "startIcon", "className", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DropdownLinkItem = function DropdownLinkItem(props) {
   var dropdownItemProps = (0, _useDropdownItemProps["default"])(props);
   var linkProps = (0, _useLinkProps["default"])(_objectSpread(_objectSpread({}, props), dropdownItemProps));
+  var isExternalLink = linkProps.target === "_blank";
   // `toggle` and `disabled` is destructured here because we don't want them passed to the `a`
   var _props$dropdownItemPr = _objectSpread(_objectSpread(_objectSpread({}, props), dropdownItemProps), linkProps),
     toggle = _props$dropdownItemPr.toggle,
@@ -37,6 +39,9 @@ var DropdownLinkItem = function DropdownLinkItem(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full truncate"]))),
       children: children
+    }), isExternalLink && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ExternalLink, {
+      className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["ml-1 shrink-0"]))),
+      size: "1em"
     })]
   }));
 };

package/cjs/Dropdown/components/DropdownRadioItem.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode, VFC } from "react";
-import { RadioButtonProps } from "../../RadioGroup";
-import { DropdownBaseItemProps } from "../useDropdownItemProps";
+import type { RadioButtonProps } from "../../RadioGroup";
+import type { DropdownBaseItemProps } from "../useDropdownItemProps";
 export interface DropdownRadioItemProps extends RadioButtonProps, DropdownBaseItemProps<HTMLInputElement> {
     children?: ReactNode;
 }

package/cjs/Dropdown/components/DropdownToggleItem.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode, VFC } from "react";
-import { ToggleProps } from "../../Toggle";
+import type { ToggleProps } from "../../Toggle";
 import type { IconComponentType } from "../../types";
-import { DropdownBaseItemProps } from "../useDropdownItemProps";
+import type { DropdownBaseItemProps } from "../useDropdownItemProps";
 export interface DropdownToggleItemProps extends ToggleProps, DropdownBaseItemProps<HTMLInputElement> {
     /** Left aligned icon */
     startIcon?: IconComponentType;

package/cjs/Dropzone/Dropzone.d.ts

@@ -1,7 +1,8 @@
 import type { VFC } from "react";
-import { FileRejection, DropzoneProps as ReactDropZoneProps } from "react-dropzone";
+import type { FileRejection, DropzoneProps as ReactDropZoneProps } from "react-dropzone";
 export declare type DropzoneLocale = {
     clearInput?: string;
+    placeholder?: (multiple: boolean) => string;
 };
 export interface DropzoneBaseProps {
     id?: string;

package/cjs/Dropzone/Dropzone.js

@@ -22,7 +22,7 @@ var _formatters = require("../utils/formatters");
 var _uniqueId = require("../utils/uniqueId");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onChange", "className", "locale"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DropzoneFileItem = function DropzoneFileItem(_ref) {
@@ -32,22 +32,20 @@ var DropzoneFileItem = function DropzoneFileItem(_ref) {
     children: [file.name, " - ", (0, _formatters.formatHumanSize)(file.size)]
   });
 };
-var STATUS_CLASSNAMES = {
-  "default": "",
-  invalid: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["input-invalid"]))),
-  validated: ""
-};
 var DEFAULT_DROPZONE_LOCALE = {
-  clearInput: "Clear input"
+  clearInput: "Clear input",
+  placeholder: function placeholder(multiple) {
+    return "Drop ".concat(multiple ? "files" : "file", " here or click to select.");
+  }
 };
 var InvalidIcon = function InvalidIcon() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
-    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
   });
 };
 var ValidatedIcon = function ValidatedIcon() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.Check, {
-    className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
   });
 };
 var Dropzone = function Dropzone(_ref2) {
@@ -98,10 +96,11 @@ var Dropzone = function Dropzone(_ref2) {
     return id !== null && id !== void 0 ? id : (0, _uniqueId.uniqueId)("dropzone");
   }, [id]);
   var isValueEmpty = files.length === 0;
-  var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
+  var isInvalid = status === "invalid";
+  var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, getRootProps({
     "aria-controls": dropzoneId,
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n            input group\n            ", "\n            ", "\n            min-h-16 cursor-pointer\n            ", ""])), focused && "input-focused", disabled && "input-disabled cursor-not-allowed", isDragReject ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500" : null), STATUS_CLASSNAMES[status], className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n            relative flex items-center group/dropzone\n            border border-grey-500 rounded\n            shadow-field\n            overflow-hidden transition-all ease-in-out delay-100\n            focus-within:border-accent-600 focus-within:shadow-field-focused\n            min-h-16\n            ", "\n            ", "\n            ", "\n            ", ""])), focused && "border-accent-600 shadow-field-focused", disabled ? "cursor-not-allowed border-grey-200/30 shadow-none bg-gradient-to-b from-white to-grey-100" : "cursor-pointer", isDragReject && !disabled ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500 cursor-pointer" : null, isInvalid ? "bg-red-100 border-red-700 hover:bg-red-50" : "bg-white hover:bg-grey-50"), className),
     onClick: function onClick(evt) {
       // Helps with https://github.com/react-dropzone/react-dropzone/issues/182
       if (evt.target.closest("label")) {
@@ -118,7 +117,7 @@ var Dropzone = function Dropzone(_ref2) {
         return setFocused(false);
       }
     }))), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
       children: files.length > 0 ? files.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
         children: files.map(function (file) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
@@ -130,19 +129,19 @@ var Dropzone = function Dropzone(_ref2) {
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DropzoneFileItem, {
         file: files[0]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center space-x-2 display-body"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center space-x-2 display-body"]))),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.UploadCloud, {
           size: "1rem",
-          className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
+          className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
-          children: placeholder || "Drop ".concat(multiple ? "files" : "file", " here or click to select.")
+          className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
+          children: placeholder || locale.placeholder(multiple)
         })]
       })
     }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])([""]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])([""]))),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-        className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
+        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover/dropzone:visible"),
         title: locale.clearInput,
         icon: _reactFeather.X,
         variant: "subtle",

package/cjs/Field/Field.d.ts

@@ -1,5 +1,5 @@
 import type { ReactChild, ReactNode, VFC } from "react";
-import { FieldState } from "./FieldStateContext";
+import type { FieldState } from "./FieldStateContext";
 export interface FieldProps {
     /** @ignore */
     className?: string;

package/cjs/HelpUnderline/HelpUnderline.d.ts

@@ -1,5 +1,5 @@
 import type { VFC } from "react";
-import { TooltipWrapperProps } from "../Tooltip";
+import type { TooltipWrapperProps } from "../Tooltip";
 import type { TooltipWrapperBaseProps } from "../Tooltip/types";
 export declare type HelpUnderlineProps = {
     /** @ignore */

package/cjs/HelpUnderline/HelpUnderline.js

@@ -27,7 +27,7 @@ var HelpUnderline = function HelpUnderline(_ref) {
     content: tooltipContent
   }, props), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["help-underline leading-inherit"]))), className),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["help-underline"]))), className),
       children: children
     })
   }));

package/cjs/Input/Input.tailwind.js

@@ -21,7 +21,7 @@ var inputPlugin = plugin(function (_ref) {
       boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       overflow: "hidden",
       transition: "all 100ms ease-in-out",
-      "&:not(.input-disabled):hover": {
+      "&:not(.input-disabled, .input-focused):hover": {
         borderColor: theme("colors.grey.600"),
         ".input-spinner-button": {
           borderColor: theme("colors.grey.600")

package/cjs/Insert/Insert.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode, VFC } from "react";
-import { BadgeVariants } from "../Badge";
+import type { BadgeVariants } from "../Badge";
 declare type InsertContext = {
     label: string;
     variant?: BadgeVariants;

package/cjs/ProgressBar/ProgressBar.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, VFC } from "react";
+import { type HTMLAttributes } from "react";
 export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
     barClassName?: string;
     value: number;
@@ -9,5 +9,5 @@ export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
  * - Progress bars show an indication of how much of the task has been completed and how much is still left.
  * - You should indicate either a percentage or other numeric values (such as - 234/4092 queries processed)
  */
-export declare const ProgressBar: VFC<ProgressBarProps>;
+export declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLDivElement>>;
 export default ProgressBar;

package/cjs/ProgressBar/ProgressBar.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
@@ -21,12 +22,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * - Progress bars show an indication of how much of the task has been completed and how much is still left.
  * - You should indicate either a percentage or other numeric values (such as - 234/4092 queries processed)
  */
-var ProgressBar = function ProgressBar(_ref) {
+var ProgressBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var value = _ref.value,
     className = _ref.className,
     barClassName = _ref.barClassName,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["progress-bar"]))), className),
     role: "progressbar",
     "aria-valuenow": value,
@@ -40,7 +43,8 @@ var ProgressBar = function ProgressBar(_ref) {
       }
     })
   }));
-};
+});
 exports.ProgressBar = ProgressBar;
+ProgressBar.displayName = "ProgressBar";
 var _default = ProgressBar;
 exports["default"] = _default;

package/cjs/RangeSlider/RangeSlider.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { ForwardedRef } from "react";
 declare type RangeSliderValue = number | [number, number];
 declare type WidenNumber<T> = T extends number ? number : T;
 export interface RangeSliderProps<Value extends RangeSliderValue = number> {
@@ -20,6 +20,7 @@ export interface RangeSliderProps<Value extends RangeSliderValue = number> {
     track1Color?: string;
     track2Color?: string;
 }
+declare const RangeSliderInternal: <Value extends RangeSliderValue = number>({ className, value, defaultValue, onChange, onCommit, disabled, min, max, track1Color, track2Color, ...otherProps }: RangeSliderProps<Value>, ref: ForwardedRef<HTMLSpanElement>) => JSX.Element;
 /**
  * A range slider is an input field where users select one or two numeric values within a given range (minimum and maximum values).
  *
@@ -27,8 +28,9 @@ export interface RangeSliderProps<Value extends RangeSliderValue = number> {
  * - Provide min and max value whenever possible
  * - Provide text input for better accessibility
  */
-export declare const RangeSlider: {
-    <Value extends RangeSliderValue = number>({ className, value, defaultValue, onChange, onCommit, disabled, min, max, track1Color, track2Color, ...otherProps }: RangeSliderProps<Value>): JSX.Element;
-    displayName: string;
+export declare const RangeSlider: (<Value extends RangeSliderValue>(props: RangeSliderProps<Value> & {
+    ref?: ForwardedRef<HTMLSpanElement> | undefined;
+}) => ReturnType<typeof RangeSliderInternal>) & {
+    displayName?: string | undefined;
 };
 export default RangeSlider;