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

package/dist/cjs/Fields/Dropzone/Dropzone.js

@@ -21,31 +21,47 @@ var _formatters = require("../../utils/formatters");
 var _uniqueId = require("../../utils/uniqueId");
 var _Field = require("../Field");
 var _jsxRuntime = require("react/jsx-runtime");
-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) { (0, _defineProperty2["default"])(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; }
 var DropzoneFileItem = function DropzoneFileItem(_ref) {
-  var file = _ref.file;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["truncate text-grey-900"]))),
-    children: [file.name, " - ", (0, _formatters.formatHumanSize)(file.size)]
+  var file = _ref.file,
+    title = _ref.title,
+    onDelete = _ref.onDelete;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-between gap-1"]))),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate text-grey-900"]))),
+      children: [file.name, " - ", (0, _formatters.formatHumanSize)(file.size)]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.IconButton, {
+      title: title,
+      icon: _Icons.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__*/(0, _jsxRuntime.jsx)(_Icons.XIcon, {
-    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (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)(_Icons.CheckIcon, {
-    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
   });
 };
 
@@ -57,6 +73,7 @@ var ValidatedIcon = function ValidatedIcon() {
 var Dropzone = exports.Dropzone = /*#__PURE__*/(0, _react.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,
@@ -67,6 +84,8 @@ var Dropzone = exports.Dropzone = /*#__PURE__*/(0, _react.forwardRef)(function (
     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 = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
   var contextLocale = (0, _Satellite.useLocale)("dropzone");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DROPZONE_LOCALE), contextLocale), propsLocale);
@@ -91,16 +110,26 @@ var Dropzone = exports.Dropzone = /*#__PURE__*/(0, _react.forwardRef)(function (
     setFiles([]);
     onChange === null || onChange === void 0 || onChange([], []);
   };
-  var _useDropzone = (0, _reactDropzone.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 = (0, _reactDropzone.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;
+  (0, _react.useImperativeHandle)(ref, function () {
+    return rootRef.current;
+  }, [rootRef]);
   var dropzoneId = (0, _react.useMemo)(function () {
     var _ref3;
     return (_ref3 = id !== null && id !== void 0 ? id : inputId) !== null && _ref3 !== void 0 ? _ref3 : (0, _uniqueId.uniqueId)("dropzone");
@@ -109,12 +138,11 @@ var Dropzone = exports.Dropzone = /*#__PURE__*/(0, _react.forwardRef)(function (
   var isInvalid = status === "invalid";
   var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, getRootProps({
-    ref: ref,
     "aria-controls": dropzoneId,
     "aria-labelledby": labelId,
     "aria-describedby": descriptionId,
     "aria-invalid": isInvalid,
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\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: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\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")) {
@@ -124,32 +152,52 @@ var Dropzone = exports.Dropzone = /*#__PURE__*/(0, _react.forwardRef)(function (
   })), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({}, getInputProps({
       id: dropzoneId,
-      required: required
+      required: required,
+      "data-testid": "dropzone-input"
     }))), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      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", {
+      className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
+      children: !hideFiles && files.length > 0 ? files.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
         children: files.map(function (file) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropzoneFileItem, {
-              file: file
+              file: file,
+              title: locale.removeFile,
+              onDelete: function onDelete() {
+                return handleDelete(file);
+              }
             })
           }, file.name);
         })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DropzoneFileItem, {
-        file: files[0]
+        file: files[0],
+        title: locale.removeFile,
+        onDelete: function onDelete() {
+          return handleDelete(files[0]);
+        }
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center space-x-2 display-body"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.UploadCloudIcon, {
-          size: "1rem",
-          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"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
-          children: placeholder || locale.placeholder(multiple)
+        className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-2 items-center"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center space-x-2 display-body"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.UploadCloudIcon, {
+            size: "1rem",
+            className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-300" : "text-grey-900"),
+            children: placeholder || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [locale.placeholder(multiple), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: (0, _clsx["default"])(!disabled && (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["typo-link underline"])))),
+                children: locale.clickToSelect
+              })]
+            })
+          })]
+        }), requirements && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["typo-subdued typo-display-body"]))),
+          children: requirements
         })]
       })
     }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.IconButton, {
-        className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mr-2 invisible group-hover/dropzone:visible group-[:has(&:focus)]/dropzone:visible"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["mr-2 invisible group-hover/dropzone:visible group-[:has(&:focus)]/dropzone:visible"]))),
         title: locale.clearInput,
         icon: _Icons.XIcon,
         variant: "subtle",

package/dist/cjs/Fields/Field/Field.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Field = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
 var _Icons = require("../../Icons");
@@ -16,13 +16,20 @@ var _getTextFromReactNode = require("../../utils/getTextFromReactNode");
 var _useForm = require("../Form/useForm");
 var _FieldContext = require("./FieldContext");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var INLINE_LABEL_SIZE = {
+  small: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["grid-cols-[20%_auto]"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["grid-cols-[35%_auto]"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["grid-cols-[50%_auto]"])))
+};
+
 /**
  * The `Field` component is a helper that wraps inputs to streamline labeling, validation, integration into a form.
  *
  * See the [Field documentation page](https://satellite.algolia.com/components/forms/field) for more information.
  */
 var Field = exports.Field = function Field(_ref) {
+  var _form$inline, _form$inlineLabelSize;
   var className = _ref.className,
     label = _ref.label,
     labelForProp = _ref.labelFor,
@@ -30,8 +37,7 @@ var Field = exports.Field = function Field(_ref) {
     description = _ref.description,
     _ref$state = _ref.state,
     state = _ref$state === void 0 ? _FieldContext.DEFAULT_FIELD_STATE : _ref$state,
-    _ref$inline = _ref.inline,
-    inline = _ref$inline === void 0 ? false : _ref$inline,
+    inlineProp = _ref.inline,
     requiredProp = _ref.required,
     _ref$hideRequiredIndi = _ref.hideRequiredIndicator,
     hideRequiredIndicator = _ref$hideRequiredIndi === void 0 ? false : _ref$hideRequiredIndi,
@@ -61,14 +67,11 @@ var Field = exports.Field = function Field(_ref) {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     elementToFocusContext = _useState4[0],
     setElementToFocusContext = _useState4[1];
-  if (process.env.NODE_ENV !== "production") {
-    if (typeof requiredProp !== "undefined" && typeof requiredContext !== "undefined" && requiredProp !== requiredContext) {
-      console.warn("The `required` prop is set to different values on both the Field (`required=".concat(requiredProp, "`) and the underlying input component (`required=").concat(requiredContext, "`)."));
-    }
-  }
   var form = (0, _useForm.useForm)();
   var addField = form === null || form === void 0 ? void 0 : form.addField;
   var removeField = form === null || form === void 0 ? void 0 : form.removeField;
+  var inline = (_form$inline = form === null || form === void 0 ? void 0 : form.inline) !== null && _form$inline !== void 0 ? _form$inline : inlineProp;
+  var inlineLabelSize = (_form$inlineLabelSize = form === null || form === void 0 ? void 0 : form.inlineLabelSize) !== null && _form$inlineLabelSize !== void 0 ? _form$inlineLabelSize : "medium";
   (0, _react.useEffect)(function () {
     addField === null || addField === void 0 || addField({
       state: state,
@@ -83,6 +86,14 @@ var Field = exports.Field = function Field(_ref) {
       });
     };
   }, [addField, removeField, state, labelFor, label]);
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof requiredProp !== "undefined" && typeof requiredContext !== "undefined" && requiredProp !== requiredContext) {
+      console.warn("The `required` prop is set to different values on both the Field (`required=".concat(requiredProp, "`) and the underlying input component (`required=").concat(requiredContext, "`)."));
+    }
+    if ((form === null || form === void 0 ? void 0 : form.inline) === true && inlineProp === false) {
+      console.warn("The `Field` component is being used inside a `Form` with `inline` set to `true`, but the `Field` component has `inline` set to `false`. To fix this, remove the `inline` prop on the `Field` component.");
+    }
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldContext.FieldContext.Provider, {
     value: {
       state: state,
@@ -92,47 +103,52 @@ var Field = exports.Field = function Field(_ref) {
       setRequired: setRequiredContext,
       setElementToFocus: setElementToFocusContext
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: className,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-        className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["cursor-pointer flex ", ""])), inline ? "items-center" : "flex-col"),
-        htmlFor: labelFor,
-        onClick: function onClick() {
-          if (!(elementToFocusContext !== null && elementToFocusContext !== void 0 && elementToFocusContext.closest("[aria-disabled=true]")) && !(elementToFocusContext !== null && elementToFocusContext !== void 0 && elementToFocusContext.closest("[disabled=true]"))) {
-            elementToFocusContext === null || elementToFocusContext === void 0 || elementToFocusContext.focus();
-          }
-        },
-        children: [hasLabel && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          id: labelId,
-          className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
-          children: [label, !hideRequiredIndicator && (requiredProp || requiredContext) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["text-red-700 ml-0.5 align-top"]))),
-            "aria-hidden": true,
-            children: "*"
-          })]
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _clsx["default"])(inline && (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["grid items-center"]))), INLINE_LABEL_SIZE[inlineLabelSize])),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["cursor-pointer ", ""])), inline && "justify-self-end"),
+          htmlFor: labelFor,
+          onClick: function onClick() {
+            if (!(elementToFocusContext !== null && elementToFocusContext !== void 0 && elementToFocusContext.closest("[aria-disabled=true]")) && !(elementToFocusContext !== null && elementToFocusContext !== void 0 && elementToFocusContext.closest("[disabled=true]"))) {
+              elementToFocusContext === null || elementToFocusContext === void 0 || elementToFocusContext.focus();
+            }
+          },
+          children: hasLabel && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            id: labelId,
+            className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["", ""])), inline ? "mr-2 text-right" : "truncate mb-1"),
+            children: [label, !hideRequiredIndicator && (requiredProp || requiredContext) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["text-red-700 ml-0.5 align-top"]))),
+              "aria-hidden": true,
+              children: "*"
+            })]
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _clsx["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["ml-auto mt-1"])))),
           children: children
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _clsx["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["col-start-2"])))),
+          children: state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+            id: descriptionId,
+            className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mt-2 display-caption flex flex-col gap-0.5"]))),
+            children: state.errors.map(function (error) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+                className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex items-center text-red-700"]))),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.AlertCircleIcon, {
+                  className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["mr-1 shrink-0"]))),
+                  width: "1rem",
+                  height: "1rem",
+                  "aria-hidden": true
+                }), error]
+              }, error);
+            })
+          }) : description ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            id: descriptionId,
+            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["display-caption text-grey-600 ", ""])), inline ? "mt-1" : "mt-2")),
+            children: description
+          }) : null
         })]
-      }), state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-        id: descriptionId,
-        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["mb-1 mt-2 display-caption flex flex-col gap-0.5"]))),
-        children: state.errors.map(function (error) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-            className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center text-red-700"]))),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.AlertCircleIcon, {
-              className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["mr-1 shrink-0"]))),
-              width: "1rem",
-              height: "1rem",
-              "aria-hidden": true
-            }), error]
-          }, error);
-        })
-      }) : description ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        id: descriptionId,
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["display-caption text-grey-600"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))) : (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mt-2"])))),
-        children: description
-      }) : null]
+      })
     })
   });
 };

package/dist/cjs/Fields/FilePicker/FilePicker.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { DropzoneProps } from "../Dropzone";
+export declare type FilePickerLocale = {
+    removeFile?: string;
+};
+export declare type FilePickerProps = DropzoneProps & {
+    locale?: FilePickerLocale;
+};
+/**
+ * The `FilePicker` component allows users to select multiple files for attachment, supporting both drag-and-drop and browse options.
+ *
+ * See the [FilePicker documentation page](https://satellite.algolia.com/components/forms/file-picker) for more information.
+ */
+export declare const FilePicker: import("react").ForwardRefExoticComponent<import("../Dropzone").DropzoneBaseProps & Omit<import("react-dropzone").DropzoneProps, "multiple" | "onDropAccepted" | "onDropRejected"> & {
+    locale?: FilePickerLocale | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/cjs/Fields/FilePicker/FilePicker.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilePicker = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _Actions = require("../../Actions");
+var _Icons = require("../../Icons");
+var _Satellite = require("../../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _formatters = require("../../utils/formatters");
+var _Dropzone = require("../Dropzone");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+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) { (0, _defineProperty2["default"])(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; }
+var FileCard = function FileCard(_ref) {
+  var file = _ref.file,
+    errors = _ref.errors,
+    removeFileTooltip = _ref.removeFileTooltip,
+    onDelete = _ref.onDelete;
+  var FileIcon = errors ? _Icons.AlertTriangleIcon : _Icons.FileTextIcon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-between gap-3 bg-white border border-grey-200 rounded px-4 py-2"]))),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-3"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FileIcon, {
+        size: "1.5rem",
+        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"]))), errors ? (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["text-red-700"]))) : (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["typo-subdued"]))))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["display-body"]))), errors && (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["text-red-700"])))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["line-clamp-1"]))),
+          children: file.name
+        }), errors && errors.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["line-clamp-1"]))),
+          children: errors[0].message
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["typo-subdued line-clamp-1"]))),
+          children: (0, _formatters.formatHumanSize)(file.size)
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.IconButton, {
+      icon: _Icons.TrashIcon,
+      title: removeFileTooltip,
+      size: "medium",
+      variant: "subtle",
+      onClick: onDelete
+    })]
+  });
+};
+var DEFAULT_FILE_PICKER_LOCALE = {
+  removeFile: "Remove file"
+};
+/**
+ * The `FilePicker` component allows users to select multiple files for attachment, supporting both drag-and-drop and browse options.
+ *
+ * See the [FilePicker documentation page](https://satellite.algolia.com/components/forms/file-picker) for more information.
+ */
+var FilePicker = exports.FilePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var contextLocale = (0, _Satellite.useLocale)("filePicker");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_FILE_PICKER_LOCALE), contextLocale), props.locale);
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    files = _useState2[0],
+    setFiles = _useState2[1];
+  var onDrop = function onDrop(acceptedFiles, rejectedFiles) {
+    var _props$onChange;
+    var newFiles = [].concat((0, _toConsumableArray2["default"])(acceptedFiles.map(function (file) {
+      return {
+        file: file
+      };
+    })), (0, _toConsumableArray2["default"])(rejectedFiles.map(function (_ref2) {
+      var file = _ref2.file,
+        errors = _ref2.errors;
+      return {
+        file: file,
+        errors: errors
+      };
+    })));
+    setFiles(props.multiple ? [].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(newFiles)) : newFiles);
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, acceptedFiles, rejectedFiles);
+  };
+  var handleDelete = function handleDelete(fileToDelete) {
+    var _props$onChange2;
+    var updatedFiles = files.filter(function (_ref3) {
+      var file = _ref3.file;
+      return file !== fileToDelete;
+    });
+    setFiles(updatedFiles);
+    var _updatedFiles$reduce = updatedFiles.reduce(function (acc, _ref4) {
+        var file = _ref4.file,
+          errors = _ref4.errors;
+        if (errors) {
+          acc.rejectedFiles.push({
+            file: file,
+            errors: errors
+          });
+        } else {
+          acc.acceptedFiles.push(file);
+        }
+        return acc;
+      }, {
+        acceptedFiles: [],
+        rejectedFiles: []
+      }),
+      acceptedFiles = _updatedFiles$reduce.acceptedFiles,
+      rejectedFiles = _updatedFiles$reduce.rejectedFiles;
+    (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, acceptedFiles, rejectedFiles);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-4"]))),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropzone.Dropzone, _objectSpread(_objectSpread({}, props), {}, {
+      ref: ref,
+      onDrop: onDrop,
+      hideFiles: true
+    })), files.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-1"]))),
+      children: files.map(function (_ref5, index) {
+        var file = _ref5.file,
+          errors = _ref5.errors;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(FileCard, {
+          file: file,
+          errors: errors,
+          removeFileTooltip: locale.removeFile,
+          onDelete: function onDelete() {
+            return handleDelete(file);
+          }
+        }, "".concat(file.name, "-").concat(index));
+      })
+    })]
+  });
+});
+FilePicker.displayName = "FilePicker";

package/dist/cjs/Fields/FilePicker/index.d.ts

@@ -0,0 +1 @@
+export * from "./FilePicker";

package/dist/cjs/Fields/FilePicker/index.js

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

package/dist/cjs/Fields/Form/Form.d.ts

@@ -2,7 +2,10 @@ import type { FC, HTMLAttributes, PropsWithChildren, ReactNode } from "react";
 import type { ButtonProps } from "../../Actions";
 import type { AlertProps } from "../../Indicators";
 import type { FormContextField } from "./FormContext";
+export declare type FormInlineLabelSize = "small" | "medium" | "large";
 export interface FormProps extends HTMLAttributes<HTMLFormElement> {
+    inline?: boolean;
+    inlineLabelSize?: FormInlineLabelSize;
 }
 export declare type FormLocale = {
     errorTitle?: (invalidFields: FormContextField[], extraErrors?: string[]) => ReactNode;

package/dist/cjs/Fields/Form/Form.js

@@ -22,7 +22,7 @@ var _FormContext = require("./FormContext");
 var _useForm = require("./useForm");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["className", "extraErrors", "locale"],
-  _excluded2 = ["children"],
+  _excluded2 = ["children", "inline", "inlineLabelSize"],
   _excluded3 = ["children"],
   _excluded4 = ["children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -103,6 +103,9 @@ var FormErrorMessage = exports.FormErrorMessage = function FormErrorMessage(_ref
 };
 var Form = exports.Form = function Form(_ref6) {
   var children = _ref6.children,
+    inline = _ref6.inline,
+    _ref6$inlineLabelSize = _ref6.inlineLabelSize,
+    inlineLabelSize = _ref6$inlineLabelSize === void 0 ? "medium" : _ref6$inlineLabelSize,
     props = (0, _objectWithoutProperties2["default"])(_ref6, _excluded2);
   var _useState = (0, _react.useState)({}),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -125,7 +128,9 @@ var Form = exports.Form = function Form(_ref6) {
     value: {
       fields: fields,
       addField: addField,
-      removeField: removeField
+      removeField: removeField,
+      inline: inline,
+      inlineLabelSize: inlineLabelSize
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("form", _objectSpread(_objectSpread({
       noValidate: true

package/dist/cjs/Fields/Form/FormContext.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { FieldState } from "../Field";
+import type { FormInlineLabelSize } from "./Form";
 export declare type FormContextField = {
     state: FieldState;
     label: string;
@@ -9,5 +10,7 @@ export declare type FormContextValue = {
     fields: Record<string, FormContextField>;
     addField: (field: FormContextField) => void;
     removeField: (field: FormContextField) => void;
+    inline?: boolean;
+    inlineLabelSize?: FormInlineLabelSize;
 };
 export declare const FormContext: import("react").Context<FormContextValue | null>;

package/dist/cjs/Fields/Form/index.d.ts

@@ -1,4 +1,4 @@
-export type { FormProps as ExperimentalFormProps, FormLocale as ExperimentalFormLocale, FormErrorMessageProps as ExperimentalFormErrorMessageProps, } from "./Form";
+export type { FormProps as ExperimentalFormProps, FormLocale as ExperimentalFormLocale, FormErrorMessageProps as ExperimentalFormErrorMessageProps, FormInlineLabelSize, } from "./Form";
 export { Form as ExperimentalForm, FormErrorMessage as ExperimentalFormErrorMessage, FormSubmit as ExperimentalFormSubmit, FormReset as ExperimentalFormReset, } from "./Form";
 export type { FormContextField as ExperimentalFormContextField, FormContextValue as ExperimentalFormContextValue, } from "./FormContext";
 export { useForm as useExperimentalForm } from "./useForm";