@algolia/satellite 1.0.0-beta.14 → 1.0.0-beta.141

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { IconComponentType } from "../../types";
+import { DropdownBaseItemProps } from "../useDropdownItemProps";
+export declare type DropdownLinkItemProps = DropdownBaseItemProps<HTMLAnchorElement> & JSX.IntrinsicElements["a"] & {
+    /** Left aligned icon */
+    startIcon?: IconComponentType;
+};
+export declare const DropdownLinkItem: {
+    (props: DropdownLinkItemProps): JSX.Element;
+    defaultProps: {
+        toggle: boolean;
+    };
+};
+export default DropdownLinkItem;

package/esm/Dropdown/components/DropdownLinkItem.js

@@ -0,0 +1,46 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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) { _defineProperty(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; }
+
+import cx from "clsx";
+import stl from "../../styles/helpers/satellitePrefixer";
+import useLinkProps from "../../utils/useLinkProps";
+import useDropdownItemProps from "../useDropdownItemProps";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var DropdownLinkItem = function DropdownLinkItem(props) {
+  var dropdownItemProps = useDropdownItemProps(props);
+  var linkProps = useLinkProps(_objectSpread(_objectSpread({}, props), dropdownItemProps));
+
+  var _props$dropdownItemPr = _objectSpread(_objectSpread(_objectSpread({}, props), dropdownItemProps), linkProps),
+      toggle = _props$dropdownItemPr.toggle,
+      disabled = _props$dropdownItemPr.disabled,
+      StartIcon = _props$dropdownItemPr.startIcon,
+      className = _props$dropdownItemPr.className,
+      children = _props$dropdownItemPr.children,
+      mergedProps = _objectWithoutProperties(_props$dropdownItemPr, _excluded);
+
+  return /*#__PURE__*/_jsxs("a", _objectSpread(_objectSpread({
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center"]))), className)
+  }, mergedProps), {}, {
+    children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 shrink-0 text-grey-500"]))),
+      size: "1rem"
+    }), /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full truncate"]))),
+      children: children
+    })]
+  }));
+};
+DropdownLinkItem.defaultProps = {
+  toggle: true
+};
+export default DropdownLinkItem;

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import { RadioButtonProps } from "../../RadioGroup";
+import { DropdownBaseItemProps } from "../useDropdownItemProps";
+export interface DropdownRadioItemProps extends RadioButtonProps, DropdownBaseItemProps<HTMLInputElement> {
+    children?: ReactNode;
+}
+export declare const DropdownRadioItem: {
+    (props: DropdownRadioItemProps): JSX.Element;
+    defaultProps: {
+        toggle: boolean;
+    };
+};
+export default DropdownRadioItem;

package/esm/Dropdown/components/DropdownRadioItem.js

@@ -0,0 +1,43 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var _excluded = ["className", "toggle", "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) { _defineProperty(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; }
+
+import { RadioButton } from "../../RadioGroup";
+import stl from "../../styles/helpers/satellitePrefixer";
+import useDropdownItemProps from "../useDropdownItemProps";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var DropdownRadioItem = function DropdownRadioItem(props) {
+  var dropdownItemProps = useDropdownItemProps(props);
+
+  var _props$dropdownItemPr = _objectSpread(_objectSpread({}, props), dropdownItemProps),
+      className = _props$dropdownItemPr.className,
+      toggle = _props$dropdownItemPr.toggle,
+      children = _props$dropdownItemPr.children,
+      radioProps = _objectWithoutProperties(_props$dropdownItemPr, _excluded);
+
+  return /*#__PURE__*/_jsx("label", {
+    className: className,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex-1 flex items-start py-2 overflow-hidden"]))),
+      children: [/*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-1 truncate mr-4"]))),
+        children: children
+      }), /*#__PURE__*/_jsx(RadioButton, _objectSpread({
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mt-2px mr-2px"])))
+      }, radioProps))]
+    })
+  });
+};
+DropdownRadioItem.defaultProps = {
+  toggle: false
+};
+export default DropdownRadioItem;

package/esm/Dropdown/components/DropdownTitle.d.ts

@@ -0,0 +1,6 @@
+import type { FunctionComponent, ReactNode } from "react";
+export declare type DropdownTitleProps = JSX.IntrinsicElements["h4"] & {
+    children: ReactNode;
+};
+export declare const DropdownTitle: FunctionComponent<DropdownTitleProps>;
+export default DropdownTitle;

package/esm/Dropdown/components/DropdownTitle.js

@@ -0,0 +1,24 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+var _templateObject;
+
+var _excluded = ["className"];
+
+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) { _defineProperty(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; }
+
+import cx from "clsx";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DropdownTitle = function DropdownTitle(_ref) {
+  var className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsx("h4", _objectSpread(_objectSpread({}, props), {}, {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center h-10 px-4\n          border-grey-100 border-b border-t first:border-t-0\n          display-subheading"]))), className)
+  }));
+};
+export default DropdownTitle;

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { ToggleProps } from "../../Toggle";
+import type { IconComponentType } from "../../types";
+import { DropdownBaseItemProps } from "../useDropdownItemProps";
+export interface DropdownToggleItemProps extends ToggleProps, DropdownBaseItemProps<HTMLInputElement> {
+    /** Left aligned icon */
+    startIcon?: IconComponentType;
+    children?: ReactNode;
+}
+export declare const DropdownToggleItem: {
+    (props: DropdownToggleItemProps): JSX.Element;
+    defaultProps: {
+        toggle: boolean;
+    };
+};
+export default DropdownToggleItem;

package/esm/Dropdown/components/DropdownToggleItem.js

@@ -0,0 +1,45 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var _excluded = ["className", "toggle", "startIcon", "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) { _defineProperty(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; }
+
+import cx from "clsx";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { Toggle } from "../../Toggle";
+import useDropdownItemProps from "../useDropdownItemProps";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var DropdownToggleItem = function DropdownToggleItem(props) {
+  var dropdownItemProps = useDropdownItemProps(props);
+
+  var _props$dropdownItemPr = _objectSpread(_objectSpread({}, props), dropdownItemProps),
+      className = _props$dropdownItemPr.className,
+      toggle = _props$dropdownItemPr.toggle,
+      StartIcon = _props$dropdownItemPr.startIcon,
+      children = _props$dropdownItemPr.children,
+      toggleProps = _objectWithoutProperties(_props$dropdownItemPr, _excluded);
+
+  return /*#__PURE__*/_jsxs("label", {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center"]))), className),
+    children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 shrink-0 text-grey-500"]))),
+      size: "1rem"
+    }), /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex-1 truncate mr-4"]))),
+      children: children
+    }), /*#__PURE__*/_jsx(Toggle, _objectSpread({
+      className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["shrink-0"])))
+    }, toggleProps))]
+  });
+};
+DropdownToggleItem.defaultProps = {
+  toggle: false
+};
+export default DropdownToggleItem;

package/esm/Dropdown/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./Dropdown";
+export * from "./DropdownButton";
+export * from "./components/DropdownRadioItem";
+export * from "./components/DropdownToggleItem";
+export * from "./components/DropdownLinkItem";
+export * from "./components/DropdownButtonItem";
+export * from "./components/DropdownFooterItem";
+export * from "./components/DropdownCollapsibleItem";
+export * from "./components/DropdownDivider";
+export * from "./components/DropdownTitle";
+export * from "./useDropdownItemProps";
+export * from "./DropdownContext";
+export { default } from "./Dropdown";

package/esm/Dropdown/index.js

@@ -0,0 +1,13 @@
+export * from "./Dropdown";
+export * from "./DropdownButton";
+export * from "./components/DropdownRadioItem";
+export * from "./components/DropdownToggleItem";
+export * from "./components/DropdownLinkItem";
+export * from "./components/DropdownButtonItem";
+export * from "./components/DropdownFooterItem";
+export * from "./components/DropdownCollapsibleItem";
+export * from "./components/DropdownDivider";
+export * from "./components/DropdownTitle";
+export * from "./useDropdownItemProps";
+export * from "./DropdownContext";
+export { default } from "./Dropdown";

package/esm/Dropdown/useDropdownItemProps.d.ts

@@ -0,0 +1,21 @@
+import type { EventHandler, MouseEvent } from "react";
+export interface DropdownBaseItemProps<T extends HTMLElement = HTMLElement> {
+    className?: string;
+    toggle?: boolean;
+    disabled?: boolean;
+    onClick?: EventHandler<MouseEvent<T>>;
+}
+export declare const useDropdownItemProps: <T extends HTMLElement = HTMLElement>(props: DropdownBaseItemProps<T>) => {
+    disabled: boolean;
+    "aria-disabled": boolean;
+    tabIndex: number;
+    onClick: undefined;
+    className: string;
+} | {
+    disabled?: undefined;
+    "aria-disabled"?: undefined;
+    tabIndex?: undefined;
+    onClick: (evt: MouseEvent<T, globalThis.MouseEvent>) => void;
+    className: string;
+};
+export default useDropdownItemProps;

package/esm/Dropdown/useDropdownItemProps.js

@@ -0,0 +1,37 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+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) { _defineProperty(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; }
+
+import cx from "clsx";
+import stl from "../styles/helpers/satellitePrefixer";
+import { useDropdownContext } from "./DropdownContext";
+export var useDropdownItemProps = function useDropdownItemProps(props) {
+  var _useDropdownContext = useDropdownContext(),
+      showMenu = _useDropdownContext.showMenu;
+
+  var className = cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      flex items-center\n      min-h-10 px-4 text-left\n      focus:no-underline hover:no-underline\n      ", "\n    "])), props.disabled ? "text-grey-300 cursor-not-allowed" : "text-inherit hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer"), props.className);
+  var disabledProps = props.disabled ? {
+    disabled: true,
+    "aria-disabled": true,
+    tabIndex: -1,
+    onClick: undefined
+  } : {};
+  return _objectSpread({
+    className: className,
+    onClick: function onClick(evt) {
+      if (props.onClick) {
+        props.onClick(evt);
+      }
+
+      if (!evt.defaultPrevented && props.toggle) {
+        showMenu(false);
+      }
+    }
+  }, disabledProps);
+};
+export default useDropdownItemProps;

package/esm/Dropzone/Dropzone.d.ts

@@ -0,0 +1,20 @@
+import type { FC } from "react";
+import { FileRejection, DropzoneProps as ReactDropZoneProps } from "react-dropzone";
+export declare type DropzoneLocale = {
+    clearInput?: string;
+};
+export interface DropzoneBaseProps {
+    id?: string;
+    onChange?(acceptedFiles: File[], fileRejections: FileRejection[]): void;
+    placeholder?: string;
+    /** @default false */
+    clearable?: boolean;
+    /** @ignore */
+    className?: string;
+    /** @default false */
+    multiple?: boolean;
+    locale?: DropzoneLocale;
+}
+export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "onDropAccepted" | "onDropRejected" | "multiple">;
+export declare const Dropzone: FC<DropzoneProps>;
+export default Dropzone;

package/esm/Dropzone/Dropzone.js

@@ -0,0 +1,169 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+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) { _defineProperty(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; }
+
+import cx from "clsx";
+import { Fragment, useCallback, useMemo, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { Check, UploadCloud, X } from "react-feather";
+import { IconButton } from "../Button";
+import { useFieldState } from "../Field";
+import { useLocale } from "../Satellite";
+import stl from "../styles/helpers/satellitePrefixer";
+import { formatHumanSize } from "../utils/formatters";
+import { uniqueId } from "../utils/uniqueId";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } 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 STATUS_CLASSNAMES = {
+  "default": "",
+  invalid: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["input-invalid"]))),
+  validated: ""
+};
+var DEFAULT_DROPZONE_LOCALE = {
+  clearInput: "Clear input"
+};
+
+var InvalidIcon = function InvalidIcon() {
+  return /*#__PURE__*/_jsx(X, {
+    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(Check, {
+    className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-accent-700 p-px rounded-full"])))
+  });
+};
+
+export var Dropzone = function Dropzone(_ref2) {
+  var id = _ref2.id,
+      placeholder = _ref2.placeholder,
+      disabled = _ref2.disabled,
+      _ref2$multiple = _ref2.multiple,
+      multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
+      _ref2$clearable = _ref2.clearable,
+      clearable = _ref2$clearable === void 0 ? false : _ref2$clearable,
+      onChange = _ref2.onChange,
+      className = _ref2.className,
+      propsLocale = _ref2.locale,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var contextLocale = useLocale("dropzone");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DROPZONE_LOCALE), contextLocale), propsLocale);
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      files = _useState2[0],
+      setFiles = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      focused = _useState4[0],
+      setFocused = _useState4[1];
+
+  var _useFieldState = useFieldState(),
+      status = _useFieldState.status;
+
+  var onDrop = useCallback(function (acceptedFiles, fileRejections) {
+    var updatedFiles = multiple ? [].concat(_toConsumableArray(files), _toConsumableArray(acceptedFiles)) : acceptedFiles;
+    setFiles(updatedFiles);
+    onChange === null || onChange === void 0 ? void 0 : onChange(updatedFiles, fileRejections);
+  }, [multiple, files, onChange]);
+
+  var handleClear = function handleClear(evt) {
+    evt.stopPropagation();
+    setFiles([]);
+    onChange === null || onChange === void 0 ? void 0 : onChange([], []);
+  };
+
+  var _useDropzone = useDropzone(_objectSpread(_objectSpread({
+    disabled: disabled,
+    multiple: multiple
+  }, props), {}, {
+    onDrop: onDrop
+  })),
+      getRootProps = _useDropzone.getRootProps,
+      getInputProps = _useDropzone.getInputProps,
+      isDragActive = _useDropzone.isDragActive,
+      isDragReject = _useDropzone.isDragReject;
+
+  var dropzoneId = useMemo(function () {
+    return id !== null && id !== void 0 ? id : uniqueId("dropzone");
+  }, [id]);
+  var isValueEmpty = files.length === 0;
+  var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : Fragment;
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, getRootProps({
+    "aria-controls": dropzoneId,
+    className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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),
+    onClick: function onClick(evt) {
+      // Helps with https://github.com/react-dropzone/react-dropzone/issues/182
+      if (evt.target.closest("label")) {
+        evt.stopPropagation();
+      }
+    }
+  })), {}, {
+    children: [/*#__PURE__*/_jsx("input", _objectSpread({}, getInputProps({
+      id: dropzoneId,
+      onFocus: function onFocus() {
+        return setFocused(true);
+      },
+      onBlur: function onBlur() {
+        return setFocused(false);
+      }
+    }))), /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
+      children: 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.name);
+        })
+      }) : /*#__PURE__*/_jsx(DropzoneFileItem, {
+        file: files[0]
+      }) : /*#__PURE__*/_jsxs("div", {
+        className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex items-center justify-center space-x-2 display-body"]))),
+        children: [/*#__PURE__*/_jsx(UploadCloud, {
+          size: "1rem",
+          className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
+        }), /*#__PURE__*/_jsx("p", {
+          className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
+          children: placeholder || "Drop ".concat(multiple ? "files" : "file", " here or click to select.")
+        })]
+      })
+    }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([""]))),
+      children: /*#__PURE__*/_jsx(IconButton, {
+        className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
+        title: locale.clearInput,
+        icon: X,
+        variant: "subtle",
+        size: "small",
+        tabIndex: -1,
+        "aria-hidden": true,
+        onClick: handleClear
+      })
+    }), /*#__PURE__*/_jsx(StatusIcon, {})]
+  }));
+};
+export default Dropzone;

package/esm/Dropzone/index.d.ts

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

package/esm/Dropzone/index.js

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

package/esm/EmptyState/EmptyState.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import type { EmptyStateProps } from "./types";
+/**
+ * Empty states are used when a list, table, chart or page has no items or data to show. This is an opportunity to provide explanation or guidance to help users progress. This can also be shown when a features hasn't been enable.
+ *
+ * #### Features empty state
+ * - Use when the CTA will unlock a key feature in the dashboard. The copy and the illustration need to sell the feature and be clear on the value for the user
+ *
+ * #### Cards empty state
+ * - Use when the CTA will unlock a new set of features inside an already activated feature. Use the context of the interface to help users understand the value of these features and the copy to give further informations
+ *
+ * #### Results/Data empty states
+ * - Use when the query lead to no result or when there is no data to show based on the user filters. Always make sure to give the user suggestions to fix it in the copy
+ *
+ * ## Best practices
+ *
+ * Empty states should:
+ *
+ * - Orient users by clearly explaining the benefit and utility of a product or feature
+ * - Simplify a complicated experience by focusing on a few key features and benefits
+ * - Use simple and clear language that empowers users to move their business forward
+ * - Be encouraging and never make users feel unsuccessful or guilty because they haven't used a product or feature
+ * - Explain the steps users need to take to activate a product or feature
+ * - Use illustrations thoughtfully
+ * - Use only one primary call-to-action button
+ */
+export declare const EmptyState: (props: EmptyStateProps) => JSX.Element;
+export default EmptyState;