@algolia/satellite 2.0.0-rc.1 → 2.0.0-rc.3

package/dist/esm/Avatars/ApplicationAvatar/ApplicationAvatar.js

@@ -1,12 +1,14 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import cx from "clsx";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { getApplicationInitials, pickApplicationColors } from "../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 var SIZE_CLASSNAMES = {
-  small: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-4 h-4"]))),
-  medium: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-8 h-8"])))
+  small: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-4 h-4 text-[8px]"]))),
+  medium: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-6 h-6 text-sm"]))),
+  large: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-8 h-8"]))),
+  xlarge: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-12 h-12 text-lg"])))
 };
 /**
  * The `ApplicationAvatar` component is used as a visual representation of an application.
@@ -17,14 +19,11 @@ export var ApplicationAvatar = function ApplicationAvatar(_ref) {
   var className = _ref.className,
     application = _ref.application,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "medium" : _ref$size;
+    size = _ref$size === void 0 ? "large" : _ref$size;
   return /*#__PURE__*/_jsx("div", {
     role: "img",
     "aria-label": application.name || "Application's avatar",
-    className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["rounded inline-flex shrink-0 items-center justify-center uppercase"]))), pickApplicationColors(application.applicationId), SIZE_CLASSNAMES[size], className),
-    style: size === "small" ? {
-      fontSize: "8px"
-    } : {},
+    className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["rounded inline-flex shrink-0 items-center justify-center uppercase"]))), pickApplicationColors(application.applicationId), SIZE_CLASSNAMES[size], className),
     children: getApplicationInitials(application)
   });
 };

package/dist/esm/Avatars/UserAvatar/UserAvatar.d.ts

@@ -1,8 +1,9 @@
 import type { FC } from "react";
-import type { MinimalUser } from "../types";
+import { type AvatarSize, type MinimalUser } from "../types";
 export declare type UserAvatarLocale = {
     fallbackText?: string;
 };
+declare type UserAvatarSize = AvatarSize | number;
 export interface UserAvatarProps {
     /**
      * A minimal user object containing `name`, `email` and `avatar`.
@@ -10,9 +11,10 @@ export interface UserAvatarProps {
     user: MinimalUser;
     /**
      * The size of the `UserAvatar`.
-     * @default 32
-     */
-    size?: number;
+     * medium, large, xlarge or in px
+     * @default large
+     * */
+    size?: UserAvatarSize;
     /**
      * The locale of the `UserAvatar`.
      * @default { fallbackText: `User's avatar` }"
@@ -29,3 +31,4 @@ export interface UserAvatarProps {
  * See the [User Avatar documentation page](https://satellite.algolia.com/components/images/user-avatar) for more information.
  */
 export declare const UserAvatar: FC<UserAvatarProps>;
+export {};

package/dist/esm/Avatars/UserAvatar/UserAvatar.js

@@ -1,17 +1,23 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { AvatarFallback, Image as AvatarImage, Root as AvatarRoot } from "@radix-ui/react-avatar";
 import cx from "clsx";
 import { useLocale } from "../../Satellite";
 import stl from "../../styles/helpers/satellitePrefixer";
+import { isSize } from "../types";
 import { getUserBackgroundClassName, getUserInitials } from "../utils";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_LOCALE = {
   fallbackText: "User's avatar"
 };
+var SIZE_CLASSNAMES = {
+  medium: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-6 h-6 text-sm"]))),
+  large: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-8 h-8"]))),
+  xlarge: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-12 h-12 text-lg"])))
+};
 /**
  * The `UserAvatar` component is used as a visual representation of a user.
  *
@@ -22,28 +28,28 @@ export var UserAvatar = function UserAvatar(_ref) {
   var className = _ref.className,
     user = _ref.user,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 32 : _ref$size,
+    size = _ref$size === void 0 ? "large" : _ref$size,
     propsLocale = _ref.locale;
   var contextLocale = useLocale("userAvatar");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_LOCALE), contextLocale), propsLocale);
   var fallbackName = user.name || user.email || locale.fallbackText;
   return /*#__PURE__*/_jsxs(AvatarRoot, {
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["overflow-hidden flex justify-center items-center rounded-full"]))), getUserBackgroundClassName((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
-    style: {
+    className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["overflow-hidden flex justify-center items-center rounded-full"]))), getUserBackgroundClassName((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), isSize(size) && SIZE_CLASSNAMES[size], className),
+    style: isNaN(+size) ? undefined : {
       width: size,
       height: size
     },
     children: [/*#__PURE__*/_jsx(AvatarImage, {
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-full w-full object-cover"]))),
+      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["h-full w-full object-cover"]))),
       src: user.avatar,
       alt: fallbackName
     }), /*#__PURE__*/_jsxs(AvatarFallback, {
-      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex h-full w-full items-center justify-center uppercase"]))),
+      className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex h-full w-full items-center justify-center uppercase"]))),
       children: [/*#__PURE__*/_jsx("span", {
         "aria-hidden": true,
         children: getUserInitials(user)
       }), /*#__PURE__*/_jsx("span", {
-        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["sr-only"]))),
+        className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["sr-only"]))),
         children: fallbackName
       })]
     })]

package/dist/esm/Avatars/types.d.ts

@@ -1,5 +1,6 @@
-export declare const applicationAvatarSizes: readonly ["small", "medium"];
-export declare type ApplicationAvatarSize = (typeof applicationAvatarSizes)[number];
+export declare const AvatarSizes: readonly ["medium", "large", "xlarge"];
+export declare type AvatarSize = (typeof AvatarSizes)[number];
+export declare function isSize(value: string): value is AvatarSize;
 export declare type MinimalApplication = {
     /**
      * The application ID.

package/dist/esm/Avatars/types.js

@@ -1 +1,4 @@
-export var applicationAvatarSizes = ["small", "medium"];
+export var AvatarSizes = ["medium", "large", "xlarge"];
+export function isSize(value) {
+  return AvatarSizes.includes(value);
+}

package/dist/esm/Fields/AutoComplete/AutoComplete.js

@@ -7,6 +7,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import cx from "clsx";
 import { useCombobox, useMultipleSelection } from "downshift";
+import { useCallback } from "react";
 import { forwardRef } from "react";
 import { Fragment } from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -325,15 +326,16 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     oldHideMenu.current = hideMenu;
     void ((_menuPopper$update2 = menuPopper.update) === null || _menuPopper$update2 === void 0 ? void 0 : _menuPopper$update2.call(menuPopper));
   }
+  var setContainerEl = useCallback(function (el) {
+    setContainerElement(el);
+    // @ts-expect-error - setContainerMeasureRef does accept HTMLDivElement | null
+    setContainerMeasureRef(el);
+  }, [setContainerMeasureRef]);
   return /*#__PURE__*/_jsx(AutoCompleteProvider, {
     locale: locale,
     children: /*#__PURE__*/_jsxs("div", {
       className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex"]))), className),
-      ref: function ref(el) {
-        setContainerElement(el);
-        // @ts-expect-error - setContainerMeasureRef does accept HTMLDivElement | null
-        setContainerMeasureRef(el);
-      },
+      ref: setContainerEl,
       children: [/*#__PURE__*/_jsxs("div", {
         className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["autocomplete-container"]))), inputFocused && stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["focusable-show"]))), variant === "large" && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["autocomplete-large py-1"]))), disabled && stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["autocomplete-disabled"]))), isInvalid && stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["autocomplete-invalid"]))), noWrap && stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["autocomplete-nowrap"])))),
         onClick: function onClick() {

package/dist/esm/Fields/DateInput/DateInput.js

@@ -150,7 +150,8 @@ export var DateInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
           onClick: toggle
         });
       },
-      modalPlacement: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.modalPlacement) || "bottom-end",
+      popoverSide: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popoverSide) || "bottom",
+      popoverAlign: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popoverAlign) || "end",
       popoverAnchor: /*#__PURE__*/_jsx("div", {
         className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["absolute inset-0 pointer-events-none"])))
       }),

package/dist/esm/Fields/DatePicker/DatePicker/DatePicker.js

@@ -99,7 +99,8 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
         payload: open
       });
     },
-    placement: props.modalPlacement,
+    side: props.popoverSide,
+    align: props.popoverAlign,
     title: locale.title,
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["date-picker"]))),
     onOpenAutoFocus: function onOpenAutoFocus(evt) {

package/dist/esm/Fields/DatePicker/DateRangePicker/DateRangePicker.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _templateObject, _templateObject2;
-var _excluded = ["id", "range", "displayOnlyRanges", "calendarProps", "initialState", "stateReducer", "onAction", "validate", "renderTarget", "renderLeftFooter", "renderRightPanel", "buttonSize", "modalPlacement", "locale"];
+var _excluded = ["id", "range", "displayOnlyRanges", "calendarProps", "initialState", "stateReducer", "onAction", "validate", "renderTarget", "renderLeftFooter", "renderRightPanel", "buttonSize", "popoverSide", "popoverAlign", "locale"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useMemo, useReducer, useRef } from "react";
@@ -51,7 +51,8 @@ export var DateRangePicker = function DateRangePicker(_ref2) {
     renderLeftFooter = _ref2.renderLeftFooter,
     renderRightPanel = _ref2.renderRightPanel,
     buttonSize = _ref2.buttonSize,
-    modalPlacement = _ref2.modalPlacement,
+    popoverSide = _ref2.popoverSide,
+    popoverAlign = _ref2.popoverAlign,
     propsLocale = _ref2.locale,
     props = _objectWithoutProperties(_ref2, _excluded);
   var contextLocale = useLocale("datePicker");
@@ -180,7 +181,8 @@ export var DateRangePicker = function DateRangePicker(_ref2) {
         payload: open
       });
     },
-    placement: modalPlacement,
+    side: popoverSide,
+    align: popoverAlign,
     title: locale.title,
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["date-range-picker"]))),
     onOpenAutoFocus: function onOpenAutoFocus(evt) {

package/dist/esm/Fields/DatePicker/components/Popover.d.ts

@@ -6,7 +6,8 @@ export interface DatePickerPopoverProps {
     trigger: ReactNode;
     children: ReactNode;
     anchor?: ReactNode;
-    placement?: Popover.PopoverContentProps["side"] | `${Popover.PopoverContentProps["side"] & string}-${Popover.PopoverContentProps["align"] & string}`;
+    side?: Popover.PopoverContentProps["side"];
+    align?: Popover.PopoverContentProps["align"];
     onOpenAutoFocus?: (event: Event) => void;
     title?: string;
     className?: string;

package/dist/esm/Fields/DatePicker/components/Popover.js

@@ -1,5 +1,4 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _templateObject;
 import * as Popover from "@radix-ui/react-popover";
 import cx from "clsx";
@@ -12,16 +11,14 @@ export var DatePickerPopover = function DatePickerPopover(_ref) {
     trigger = _ref.trigger,
     children = _ref.children,
     anchor = _ref.anchor,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? "bottom" : _ref$side,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "start" : _ref$align,
     onOpenAutoFocus = _ref.onOpenAutoFocus,
     title = _ref.title,
     className = _ref.className;
   var createPortal = useCreatePortal();
-  var _ref2 = placement.split("-"),
-    _ref3 = _slicedToArray(_ref2, 2),
-    side = _ref3[0],
-    align = _ref3[1];
   return /*#__PURE__*/_jsxs(Popover.Root, {
     open: isOpen,
     onOpenChange: onOpenChange,

package/dist/esm/Fields/DatePicker/types.d.ts

@@ -20,9 +20,12 @@ export declare type DatePickerLocale = {
 export declare type SharedDatePickerProps = {
     /**
      * The placement of the `DatePicker`/`DateRangePicker` modal.
-     * @todo Rename this prop to `side`/`align` in the next major version
      */
-    modalPlacement?: DatePickerPopoverProps["placement"];
+    popoverSide?: DatePickerPopoverProps["side"];
+    /**
+     * The alignment of the `DatePicker`/`DateRangePicker` modal.
+     */
+    popoverAlign?: DatePickerPopoverProps["align"];
     /**
      * The anchor element for the `DatePicker`/`DateRangePicker` popover.
      */

package/dist/esm/Fields/Dropzone/Dropzone.d.ts

@@ -2,7 +2,9 @@
 import type { FileRejection, DropzoneProps as ReactDropZoneProps } from "react-dropzone";
 export declare type DropzoneLocale = {
     clearInput?: string;
+    removeFile?: string;
     placeholder?: (multiple: boolean) => string;
+    clickToSelect?: string;
 };
 export interface DropzoneBaseProps {
     /**
@@ -22,6 +24,10 @@ export interface DropzoneBaseProps {
      * @default false
      */
     clearable?: boolean;
+    /**
+     * The requirements of the `Dropzone`.
+     */
+    requirements?: string;
     /**
      * The class name of the `Dropzone`.
      */
@@ -40,6 +46,11 @@ export interface DropzoneBaseProps {
      * The locale of the `Dropzone`.
      */
     locale?: DropzoneLocale;
+    /**
+     * Whether the `Dropzone` hides the files.
+     * @default false
+     */
+    hideFiles?: boolean;
     /**
      * The accepted file types of the `Dropzone`.
      */
@@ -97,10 +108,10 @@ export interface DropzoneBaseProps {
      */
     validator?: ReactDropZoneProps["validator"];
 }
-export declare type DropzoneProps = DropzoneBaseProps;
+export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDropAccepted" | "onDropRejected" | "multiple">;
 /**
  * The `Dropzone` component is used to upload files.
  *
  * See the [Dropzone documentation page](https://satellite.algolia.com/components/forms/dropzone) for more information.
  */
-export declare const Dropzone: import("react").ForwardRefExoticComponent<DropzoneBaseProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Dropzone: import("react").ForwardRefExoticComponent<DropzoneBaseProps & Omit<ReactDropZoneProps, "multiple" | "onDropAccepted" | "onDropRejected"> & import("react").RefAttributes<HTMLElement>>;

package/dist/esm/Fields/Dropzone/Dropzone.js

@@ -3,12 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onChange", "className", "locale", "required"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _excluded = ["id", "placeholder", "requirements", "disabled", "multiple", "clearable", "onChange", "className", "locale", "required", "hideFiles"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import cx from "clsx";
-import { forwardRef, Fragment, useCallback, useMemo, useState } from "react";
+import { forwardRef, Fragment, useCallback, useImperativeHandle, useMemo, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { IconButton } from "../../Actions";
 import { CheckIcon, UploadCloudIcon, XIcon } from "../../Icons";
@@ -17,28 +17,44 @@ import stl from "../../styles/helpers/satellitePrefixer";
 import { formatHumanSize } from "../../utils/formatters";
 import { uniqueId } from "../../utils/uniqueId";
 import { useField } from "../Field";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 var DropzoneFileItem = function DropzoneFileItem(_ref) {
-  var file = _ref.file;
-  return /*#__PURE__*/_jsxs("span", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["truncate text-grey-900"]))),
-    children: [file.name, " - ", formatHumanSize(file.size)]
+  var file = _ref.file,
+    title = _ref.title,
+    onDelete = _ref.onDelete;
+  return /*#__PURE__*/_jsxs("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center justify-between gap-1"]))),
+    children: [/*#__PURE__*/_jsxs("span", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate text-grey-900"]))),
+      children: [file.name, " - ", formatHumanSize(file.size)]
+    }), /*#__PURE__*/_jsx(IconButton, {
+      title: title,
+      icon: XIcon,
+      variant: "subtle",
+      size: "small",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onDelete();
+      }
+    })]
   });
 };
 var DEFAULT_DROPZONE_LOCALE = {
   clearInput: "Clear input",
+  removeFile: "Remove file",
   placeholder: function placeholder(multiple) {
-    return "Drop ".concat(multiple ? "files" : "file", " here or click to select.");
-  }
+    return "Drop ".concat(multiple ? "files" : "file", " here or ");
+  },
+  clickToSelect: "click to select"
 };
 var InvalidIcon = function InvalidIcon() {
   return /*#__PURE__*/_jsx(XIcon, {
-    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
+    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
   });
 };
 var ValidatedIcon = function ValidatedIcon() {
   return /*#__PURE__*/_jsx(CheckIcon, {
-    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
+    className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
   });
 };
 
@@ -50,6 +66,7 @@ var ValidatedIcon = function ValidatedIcon() {
 export var Dropzone = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var id = _ref2.id,
     placeholder = _ref2.placeholder,
+    requirements = _ref2.requirements,
     disabled = _ref2.disabled,
     _ref2$multiple = _ref2.multiple,
     multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
@@ -60,6 +77,8 @@ export var Dropzone = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     propsLocale = _ref2.locale,
     _ref2$required = _ref2.required,
     required = _ref2$required === void 0 ? false : _ref2$required,
+    _ref2$hideFiles = _ref2.hideFiles,
+    hideFiles = _ref2$hideFiles === void 0 ? false : _ref2$hideFiles,
     props = _objectWithoutProperties(_ref2, _excluded);
   var contextLocale = useLocale("dropzone");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DROPZONE_LOCALE), contextLocale), propsLocale);
@@ -84,16 +103,26 @@ export var Dropzone = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     setFiles([]);
     onChange === null || onChange === void 0 || onChange([], []);
   };
-  var _useDropzone = useDropzone(_objectSpread(_objectSpread({
+  var handleDelete = function handleDelete(file) {
+    var updatedFiles = files.filter(function (f) {
+      return f !== file;
+    });
+    setFiles(updatedFiles);
+    onChange === null || onChange === void 0 || onChange(updatedFiles, []);
+  };
+  var _useDropzone = useDropzone(_objectSpread({
       disabled: disabled,
-      multiple: multiple
-    }, props), {}, {
+      multiple: multiple,
       onDrop: onDrop
-    })),
+    }, props)),
     getRootProps = _useDropzone.getRootProps,
     getInputProps = _useDropzone.getInputProps,
     isDragActive = _useDropzone.isDragActive,
-    isDragReject = _useDropzone.isDragReject;
+    isDragReject = _useDropzone.isDragReject,
+    rootRef = _useDropzone.rootRef;
+  useImperativeHandle(ref, function () {
+    return rootRef.current;
+  }, [rootRef]);
   var dropzoneId = useMemo(function () {
     var _ref3;
     return (_ref3 = id !== null && id !== void 0 ? id : inputId) !== null && _ref3 !== void 0 ? _ref3 : uniqueId("dropzone");
@@ -102,12 +131,11 @@ export var Dropzone = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var isInvalid = status === "invalid";
   var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : Fragment;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, getRootProps({
-    ref: ref,
     "aria-controls": dropzoneId,
     "aria-labelledby": labelId,
     "aria-describedby": descriptionId,
     "aria-invalid": isInvalid,
-    className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            relative flex items-center group/dropzone\n            border rounded\n            overflow-hidden transition-all ease-in-out delay-100\n            focusable\n            min-h-16\n            ", "\n            ", "\n            ", ""])), disabled ? "cursor-not-allowed border-grey-200/60 shadow-none bg-gradient-to-b from-white to-grey-100" : "shadow-field cursor-pointer border-grey-500", 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),
+    className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            relative flex items-center group/dropzone bg-white\n            border border-dashed rounded\n            overflow-hidden transition-colors\n            focusable focus-visible:border-transparent\n            min-h-16 p-4\n            ", "\n            ", "\n            ", ""])), disabled ? "cursor-not-allowed border-grey-200" : "cursor-pointer border-grey-500", isDragReject && !disabled ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500 cursor-pointer" : null, !disabled && (isInvalid ? "bg-red-100 border-red-700 hover:bg-red-50" : "bg-white hover:bg-grey-100")), className),
     onClick: function onClick(evt) {
       // Helps with https://github.com/react-dropzone/react-dropzone/issues/182
       if (evt.target.closest("label")) {
@@ -117,32 +145,52 @@ export var Dropzone = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   })), {}, {
     children: [/*#__PURE__*/_jsx("input", _objectSpread({}, getInputProps({
       id: dropzoneId,
-      required: required
+      required: required,
+      "data-testid": "dropzone-input"
     }))), /*#__PURE__*/_jsx("div", {
-      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
-      children: files.length > 0 ? files.length > 1 ? /*#__PURE__*/_jsx("ul", {
+      className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
+      children: !hideFiles && files.length > 0 ? files.length > 1 ? /*#__PURE__*/_jsx("ul", {
         children: files.map(function (file) {
           return /*#__PURE__*/_jsx("li", {
             children: /*#__PURE__*/_jsx(DropzoneFileItem, {
-              file: file
+              file: file,
+              title: locale.removeFile,
+              onDelete: function onDelete() {
+                return handleDelete(file);
+              }
             })
           }, file.name);
         })
       }) : /*#__PURE__*/_jsx(DropzoneFileItem, {
-        file: files[0]
+        file: files[0],
+        title: locale.removeFile,
+        onDelete: function onDelete() {
+          return handleDelete(files[0]);
+        }
       }) : /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center justify-center space-x-2 display-body"]))),
-        children: [/*#__PURE__*/_jsx(UploadCloudIcon, {
-          size: "1rem",
-          className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
-        }), /*#__PURE__*/_jsx("p", {
-          className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
-          children: placeholder || locale.placeholder(multiple)
+        className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex flex-col gap-2 items-center"]))),
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["flex items-center justify-center space-x-2 display-body"]))),
+          children: [/*#__PURE__*/_jsx(UploadCloudIcon, {
+            size: "1rem",
+            className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
+          }), /*#__PURE__*/_jsx("p", {
+            className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-300" : "text-grey-900"),
+            children: placeholder || /*#__PURE__*/_jsxs(_Fragment, {
+              children: [locale.placeholder(multiple), /*#__PURE__*/_jsx("span", {
+                className: cx(!disabled && stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["typo-link underline"])))),
+                children: locale.clickToSelect
+              })]
+            })
+          })]
+        }), requirements && /*#__PURE__*/_jsx("p", {
+          className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["typo-subdued typo-display-body"]))),
+          children: requirements
         })]
       })
     }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/_jsx("span", {
       children: /*#__PURE__*/_jsx(IconButton, {
-        className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mr-2 invisible group-hover/dropzone:visible group-[:has(&:focus)]/dropzone:visible"]))),
+        className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["mr-2 invisible group-hover/dropzone:visible group-[:has(&:focus)]/dropzone:visible"]))),
         title: locale.clearInput,
         icon: XIcon,
         variant: "subtle",