@via-profit/ui-kit 0.8.0 → 0.9.1

package/esm/Autocomplete/AutocompleteContainer.js

@@ -29,7 +29,7 @@ const AutocompleteMenuList = React.forwardRef((props, ref) => (React.createEleme
 AutocompleteMenuList.displayName = 'AutocompleteMenuList';
 const MENU_OVERRIDES = { List: AutocompleteMenuList };
 const Autocomplete = React.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, clearOnBlur = true, anchorPos = 'bottom-fill', alternativePlacements = ['bottom-fill', 'top-fill'], openOnFocus = true, autoFlip = true, viewportMargin, positionStrategy, requiredAsterisk, startIcon, fullWidth, placeholder, label, error, errorText, inputRef, filterItems, children, onChange, selectedItemToString, clearable = true, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearOnBlur", "anchorPos", "alternativePlacements", "openOnFocus", "autoFlip", "viewportMargin", "positionStrategy", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "clearable", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
+    const { items, value, multiple, isOpen = false, isLoading = false, clearOnBlur = true, anchorPos = 'bottom-fill', alternativePlacements = ['bottom-fill', 'top-fill'], openOnFocus = true, autoFlip = true, viewportMargin, positionStrategy, requiredAsterisk, startIcon, fullWidth, placeholder, label, error, errorText, inputRef, filterItems, children, onChange, selectedItemToString, clearable = true, onInputChange, inputValue: controlledInputValue, onInputValueChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearOnBlur", "anchorPos", "alternativePlacements", "openOnFocus", "autoFlip", "viewportMargin", "positionStrategy", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "clearable", "onInputChange", "inputValue", "onInputValueChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
     const menuRef = React.useRef(null);
     const fieldInputRef = React.useRef(null);
     const isFocusedRef = React.useRef(false);
@@ -39,10 +39,12 @@ const Autocomplete = React.forwardRef((props, ref) => {
     const overridesMap = React.useMemo(() => ({
         TextField: (overrides === null || overrides === void 0 ? void 0 : overrides.TextField) || TextField,
     }), [overrides]);
+    const isInputControlled = typeof controlledInputValue === 'string';
     const clear = React.useCallback(() => {
         if (onChange) {
             onChange((multiple ? [] : null));
         }
+        onInputValueChange === null || onInputValueChange === void 0 ? void 0 : onInputValueChange('');
         dispatch(actionSetPartial({
             filteredItems: items,
             inputValue: '',
@@ -51,7 +53,7 @@ const Autocomplete = React.forwardRef((props, ref) => {
             var _a;
             (_a = fieldInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }, 15);
-    }, [dispatch, onChange, items, multiple]);
+    }, [dispatch, onChange, onInputValueChange, items, multiple]);
     /**
      * API
      */
@@ -70,13 +72,27 @@ const Autocomplete = React.forwardRef((props, ref) => {
      */
     const restoreInputValue = React.useCallback(() => {
         // With multiple the field holds only the search text, the selected items are tags
-        const newInputValue = multiple || currentValue === null ? '' : selectedItemToString(currentValue);
+        // The controlled text is the value itself: it stays as it is
+        const newInputValue = isInputControlled
+            ? controlledInputValue
+            : multiple || currentValue === null
+                ? ''
+                : selectedItemToString(currentValue);
         const newFilteredItems = applyFilterForItems(newInputValue, items);
         dispatch(actionSetPartial({
             filteredItems: newFilteredItems,
             inputValue: newInputValue,
         }));
-    }, [currentValue, selectedItemToString, multiple, applyFilterForItems, items, dispatch]);
+    }, [
+        currentValue,
+        selectedItemToString,
+        multiple,
+        applyFilterForItems,
+        items,
+        dispatch,
+        isInputControlled,
+        controlledInputValue,
+    ]);
     const inputKeydownEvent = React.useCallback((event) => {
         var _a, _b, _c, _d, _e;
         if (!isFocusedRef.current) {
@@ -169,14 +185,35 @@ const Autocomplete = React.forwardRef((props, ref) => {
         if (value === currentValue) {
             return;
         }
-        // With multiple the selected items are shown as tags and the search text is kept
-        dispatch(actionSetPartial(multiple
+        // With multiple the selected items are shown as tags and the search text is kept,
+        // the controlled text is not replaced by the text of the item
+        dispatch(actionSetPartial(multiple || isInputControlled
             ? { currentValue: value }
             : {
                 currentValue: value,
                 inputValue: value === null ? '' : selectedItemToString(value),
             }));
-    }, [value, multiple, currentValue, inputValue, dispatch, selectedItemToString]);
+    }, [
+        value,
+        multiple,
+        currentValue,
+        inputValue,
+        dispatch,
+        selectedItemToString,
+        isInputControlled,
+    ]);
+    /**
+     * The controlled text: the field follows `inputValue`
+     */
+    React.useEffect(() => {
+        if (!isInputControlled || controlledInputValue === inputValue) {
+            return;
+        }
+        dispatch(actionSetPartial({
+            inputValue: controlledInputValue,
+            filteredItems: applyFilterForItems(controlledInputValue, items),
+        }));
+    }, [isInputControlled, controlledInputValue, inputValue, dispatch, applyFilterForItems, items]);
     React.useEffect(() => {
         if (currentOpen && menuRef.current) {
             menuRef.current.scrollToFirstSelected();
@@ -267,6 +304,7 @@ const Autocomplete = React.forwardRef((props, ref) => {
         if (typeof onInputChange === 'function') {
             onInputChange(event);
         }
+        onInputValueChange === null || onInputValueChange === void 0 ? void 0 : onInputValueChange(event.currentTarget.value);
         // If openOnFocus is false, but value is not empty
         // we should open menu list if is not opened
         if (!openOnFocus && isFocusedRef.current && !currentOpen && filteredItems.length > 0) {
@@ -290,6 +328,7 @@ const Autocomplete = React.forwardRef((props, ref) => {
         filteredItems.length,
         items,
         onInputChange,
+        onInputValueChange,
         onRequestClose,
         onRequestOpen,
         openOnFocus,

package/esm/Badge/BadgeBase.js

@@ -14,14 +14,16 @@ import IconWrapper from './BadgeIconWrapper';
 import TextWrapper from './BadgeTextWrapper';
 import Container from './BadgeContainer';
 import ButtonDelete from './BadgeDeleteButton';
+import Dot from './BadgeDot';
 const BadgeBase = (props, ref) => {
-    const { children, startIcon, color, variant, overrides, onDelete, deleteButtonLabel = 'Delete', onClick, onKeyDown } = props, nativeProps = __rest(props, ["children", "startIcon", "color", "variant", "overrides", "onDelete", "deleteButtonLabel", "onClick", "onKeyDown"]);
+    const { children, startIcon, dot = false, color, variant, overrides, onDelete, deleteButtonLabel = 'Delete', onClick, onKeyDown } = props, nativeProps = __rest(props, ["children", "startIcon", "dot", "color", "variant", "overrides", "onDelete", "deleteButtonLabel", "onClick", "onKeyDown"]);
     const clickable = typeof onClick === 'function';
     const overridesMap = React.useMemo(() => ({
         TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || TextWrapper,
         IconWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.IconWrapper) || IconWrapper,
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
         ButtonDelete: (overrides === null || overrides === void 0 ? void 0 : overrides.ButtonDelete) || ButtonDelete,
+        Dot: (overrides === null || overrides === void 0 ? void 0 : overrides.Dot) || Dot,
     }), [overrides]);
     // A clickable badge acts as a button, so it is activated by Enter and Space too
     const handleKeyDown = React.useCallback((event) => {
@@ -41,8 +43,13 @@ const BadgeBase = (props, ref) => {
         onDelete === null || onDelete === void 0 ? void 0 : onDelete(event);
     }, [onDelete]);
     return (React.createElement(overridesMap.Container, Object.assign({ role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, nativeProps, { onClick: onClick, onKeyDown: handleKeyDown, color: color, ref: ref }),
+        dot && React.createElement(overridesMap.Dot, null),
         typeof startIcon !== 'undefined' && startIcon !== null && (React.createElement(overridesMap.IconWrapper, null, startIcon)),
         React.createElement(overridesMap.TextWrapper, null, children),
-        typeof onDelete === 'function' && (React.createElement(overridesMap.ButtonDelete, { variant: variant, onClick: handleDelete, color: color, "aria-label": deleteButtonLabel }))));
+        typeof onDelete === 'function' && (React.createElement(overridesMap.ButtonDelete
+        // the pale soft badge has the colored icon, as the outlined one
+        , { 
+            // the pale soft badge has the colored icon, as the outlined one
+            variant: variant === 'soft' ? 'outlined' : variant, onClick: handleDelete, color: color, "aria-label": deleteButtonLabel }))));
 };
 export default React.forwardRef(BadgeBase);

package/esm/Badge/BadgeDot.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from '@emotion/styled';
+/**
+ * The color of the badge (`--badge-dot-color`), not the color of its text
+ */
+const StyledDot = styled.span `
+  flex: none;
+  width: 0.5em;
+  height: 0.5em;
+  margin-left: 0.55em;
+  border-radius: 50%;
+  background-color: var(--badge-dot-color, currentColor);
+`;
+const BadgeDot = (props, ref) => (React.createElement(StyledDot, Object.assign({ "aria-hidden": true }, props, { ref: ref })));
+export default React.forwardRef(BadgeDot);

package/esm/Badge/BadgeStyled.js

@@ -65,6 +65,23 @@ const getOutlinedColors = (color, theme) => {
         }
     }
 };
+/**
+ * The pale background of the color and the text of the same hue: dark on the light theme,
+ * light on the dark one. `$background` is the color itself
+ */
+const getSoftColors = (color, theme) => {
+    const base = color === 'primary'
+        ? theme.color.accentPrimary
+        : color === 'secondary'
+            ? theme.color.accentSecondary
+            : typeof color === 'undefined' || color === 'default'
+                ? theme.color.textPrimary
+                : parseColor(String(color), theme.color.textPrimary);
+    return {
+        $background: base,
+        $color: theme.isDark ? base.lighten(60) : base.darken(60),
+    };
+};
 /**
  * Both variants are one styled component: switching the variant (e.g. a toggling filter badge)
  * must not remount the element, otherwise the focused badge loses the focus
@@ -73,42 +90,62 @@ const StyledBadge = styled(BadgeBase) `
   border-style: solid;
   border-width: ${BORDER_WIDTH};
   border-color: ${({ $background }) => $background.toString()};
+  --badge-dot-color: ${({ $variant, $background, $color }) => ($variant === 'standard' ? $color : $background).toString()};
 
-  ${({ $variant, $color, $background, theme }) => $variant === 'outlined'
-    ? css `
-          color: ${$color.darken(30).toString()};
-          background-color: transparent;
+  ${({ $variant, $color, $background }) => $variant === 'soft' &&
+    css `
+      color: ${$color.toString()};
+      background-color: ${$background.alpha(0.18).toString()};
+      border-color: transparent;
 
-          &:focus-visible {
-            outline-style: solid;
-            outline-width: 0.14em;
-            outline-color: ${$background.rgbString()};
-          }
-        `
-    : css `
-          color: ${$color.toString()};
-          background-color: ${$background.toString()};
+      &:focus-visible {
+        outline-style: solid;
+        outline-width: 0.14em;
+        outline-color: ${$background.alpha(0.6).toString()};
+      }
+    `}
 
-          &:focus-visible {
-            outline-color: ${$background.rgbString() === theme.color.accentPrimary.rgbString()
-        ? theme.color.textPrimary.toString()
-        : theme.color.accentPrimary.toString()};
-          }
-        `}
+  ${({ $variant, $color, $background, theme }) => $variant === 'soft'
+    ? ''
+    : $variant === 'outlined'
+        ? css `
+            color: ${$color.darken(30).toString()};
+            background-color: transparent;
+
+            &:focus-visible {
+              outline-style: solid;
+              outline-width: 0.14em;
+              outline-color: ${$background.rgbString()};
+            }
+          `
+        : css `
+            color: ${$color.toString()};
+            background-color: ${$background.toString()};
+
+            &:focus-visible {
+              outline-color: ${$background.rgbString() === theme.color.accentPrimary.rgbString()
+            ? theme.color.textPrimary.toString()
+            : theme.color.accentPrimary.toString()};
+            }
+          `}
 
   ${({ $clickable, $variant, $background }) => $clickable &&
     css `
       cursor: pointer;
 
       &:hover {
-        ${$variant === 'outlined'
+        ${$variant === 'soft'
         ? css `
-              background-color: ${$background.darken(20).alpha(0.1).toString()};
+              background-color: ${$background.alpha(0.3).toString()};
             `
-        : css `
-              background-color: ${$background.darken(30).toString()};
-              border-color: ${$background.darken(30).toString()};
-            `}
+        : $variant === 'outlined'
+            ? css `
+                background-color: ${$background.darken(20).alpha(0.1).toString()};
+              `
+            : css `
+                background-color: ${$background.darken(30).toString()};
+                border-color: ${$background.darken(30).toString()};
+              `}
       }
     `}
   ${({ theme }) => themeFocusRing(theme)}
@@ -116,7 +153,11 @@ const StyledBadge = styled(BadgeBase) `
 const BadgeStyled = (props, ref) => {
     const { children, color, variant = 'standard', onClick } = props, restProps = __rest(props, ["children", "color", "variant", "onClick"]);
     const theme = useTheme();
-    const { $background, $color } = React.useMemo(() => variant === 'outlined' ? getOutlinedColors(color, theme) : getStandardColors(color, theme), [color, variant, theme]);
+    const { $background, $color } = React.useMemo(() => variant === 'soft'
+        ? getSoftColors(color, theme)
+        : variant === 'outlined'
+            ? getOutlinedColors(color, theme)
+            : getStandardColors(color, theme), [color, variant, theme]);
     return (React.createElement(StyledBadge, Object.assign({ "$variant": variant, "$clickable": typeof onClick === 'function', "$color": $color, "$background": $background, color: color, variant: variant, onClick: onClick }, restProps, { ref: ref }), children));
 };
 export default React.forwardRef(BadgeStyled);

package/esm/EmptyState/EmptyStateAction.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledAction = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5em;
+  margin-top: 0.5em;
+`;
+const EmptyStateAction = (props, ref) => React.createElement(StyledAction, Object.assign({}, props, { ref: ref }));
+export default React.forwardRef(EmptyStateAction);

package/esm/EmptyState/EmptyStateContainer.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledContainer = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75em;
+  padding: 2em 1em;
+  text-align: center;
+  height: ${({ $fullHeight }) => ($fullHeight ? '100%' : 'auto')};
+`;
+const EmptyStateContainer = (props, ref) => {
+    const { fullHeight } = props, nativeProps = __rest(props, ["fullHeight"]);
+    return React.createElement(StyledContainer, Object.assign({}, nativeProps, { "$fullHeight": fullHeight, ref: ref }));
+};
+export default React.forwardRef(EmptyStateContainer);

package/esm/EmptyState/EmptyStateContent.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledContent = styled.div `
+  max-width: 22em;
+  font-size: 0.9em;
+  line-height: 1.45;
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+`;
+const EmptyStateContent = (props, ref) => React.createElement(StyledContent, Object.assign({}, props, { ref: ref }));
+export default React.forwardRef(EmptyStateContent);

package/esm/EmptyState/EmptyStateIcon.js

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledIcon = styled.span `
+  display: inline-flex;
+  margin-bottom: 0.75em;
+  font-size: 6em;
+  color: ${({ theme }) => theme.color.textPrimary.alpha(0.6).toString()};
+`;
+const Path = styled.path `
+  fill: currentColor;
+`;
+/**
+ * The open empty box. `children` replaces it
+ */
+const EmptyStateIcon = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledIcon, Object.assign({ "aria-hidden": true }, nativeProps, { ref: ref }), children !== null && children !== void 0 ? children : (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 511.99 511.99" },
+        React.createElement(Path, { d: "M446.822 213.631l-190.827-63.256-190.827 63.256L.01 317.129l59.984 19.884V447.02l196 64.97 196-64.97V337.013l59.984-19.884zm-57.5 12.545l-133.327 44.195-133.327-44.195 133.327-44.195zm-343.52 74.527l35.627-56.592 151.67 50.276-35.626 56.591zm44.193 46.255L210.34 386.85l30.655-48.693v137.256l-151-50.054zm181 128.454V338.156l30.655 48.693 120.345-39.892v78.401zm43.522-124.433l-35.626-56.591 151.67-50.276 35.627 56.592zM240.995 0h30v100.174h-30z" }),
+        React.createElement(Path, { d: "M122.952 31.63h30v100.174h-30z", transform: "rotate(-30 137.947 81.722)" }),
+        React.createElement(Path, { d: "M323.951 66.717h100.174v30H323.951z", transform: "rotate(-60 374.044 81.724)" })))));
+};
+export default React.forwardRef(EmptyStateIcon);

package/esm/EmptyState/EmptyStateTitle.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledTitle = styled.div `
+  font-weight: 600;
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+`;
+const EmptyStateTitle = (props, ref) => React.createElement(StyledTitle, Object.assign({}, props, { ref: ref }));
+export default React.forwardRef(EmptyStateTitle);

package/esm/EmptyState/index.js

@@ -0,0 +1,42 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import Container from './EmptyStateContainer';
+import Icon from './EmptyStateIcon';
+import Title from './EmptyStateTitle';
+import Content from './EmptyStateContent';
+import Action from './EmptyStateAction';
+/**
+ * The empty list, the nothing found, the not chosen yet: the illustration, what is empty
+ * and what to do next
+ */
+const EmptyState = (props, ref) => {
+    const { title, children, action, icon, fullHeight = false, overrides } = props, nativeProps = __rest(props, ["title", "children", "action", "icon", "fullHeight", "overrides"]);
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Icon: (overrides === null || overrides === void 0 ? void 0 : overrides.Icon) || Icon,
+        Title: (overrides === null || overrides === void 0 ? void 0 : overrides.Title) || Title,
+        Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || Content,
+        Action: (overrides === null || overrides === void 0 ? void 0 : overrides.Action) || Action,
+    }), [overrides]);
+    return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { fullHeight: fullHeight, ref: ref }),
+        icon !== false && React.createElement(overridesMap.Icon, null, icon),
+        title && React.createElement(overridesMap.Title, null, title),
+        children && React.createElement(overridesMap.Content, null, children),
+        action && React.createElement(overridesMap.Action, null, action)));
+};
+export * from './EmptyStateContainer';
+export * from './EmptyStateIcon';
+export * from './EmptyStateTitle';
+export * from './EmptyStateContent';
+export * from './EmptyStateAction';
+export default React.forwardRef(EmptyState);

package/esm/FileDropzone/FileDropzoneArea.js

@@ -0,0 +1,76 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+const StyledArea = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  min-height: 6.5em;
+  padding: 1em;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1.6}em;
+  border: 1px ${({ $filled }) => ($filled ? 'solid' : 'dashed')}
+    ${({ theme, $active }) => ($active ? theme.color.accentPrimary : theme.color.textSecondary.alpha(0.45)).toString()};
+  background-color: ${({ theme, $active }) => ($active
+    ? theme.color.accentPrimary.alpha(0.1)
+    : theme.color.textPrimary.alpha(0.03)).toString()};
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  transition:
+    border-color 120ms ease-out,
+    background-color 120ms ease-out;
+
+  ${({ $filled, $disabled, theme }) => !$filled &&
+    !$disabled &&
+    css `
+      cursor: pointer;
+
+      &:hover,
+      &:focus-visible {
+        border-color: ${theme.color.accentPrimary.toString()};
+      }
+    `}
+
+  ${({ $filled }) => $filled
+    ? css `
+          flex-direction: row;
+          align-items: center;
+          gap: 0.75em;
+        `
+    : css `
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 0.3em;
+          text-align: center;
+        `}
+
+  ${({ $disabled }) => $disabled &&
+    css `
+      opacity: 0.5;
+      cursor: default;
+    `}
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.alpha(0.4).toString()};
+    outline-offset: 2px;
+  }
+`;
+/**
+ * The area: without the file — the icon and two lines in the middle (it chooses the file),
+ * with the file — the row of the file
+ */
+const FileDropzoneArea = (props, ref) => {
+    const { active, filled, disabled } = props, nativeProps = __rest(props, ["active", "filled", "disabled"]);
+    return (React.createElement(StyledArea, Object.assign({}, nativeProps, { "$active": active, "$filled": filled, "$disabled": disabled, ref: ref })));
+};
+export default React.forwardRef(FileDropzoneArea);

package/esm/FileDropzone/index.js

@@ -0,0 +1,148 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import Button from '../Button';
+import Area from './FileDropzoneArea';
+import { formatFileSize, isFileAccepted } from './utils';
+export { formatFileSize, isFileAccepted };
+const Icon = styled.span `
+  flex: none;
+  display: inline-flex;
+  font-size: 1.5em;
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+`;
+const Label = styled.span `
+  font-size: 0.875em;
+  font-weight: 600;
+`;
+const Hint = styled.span `
+  font-size: 0.75em;
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+`;
+const FileText = styled.span `
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15em;
+  text-align: left;
+`;
+/**
+ * The long name in one line: the whole name is in the tooltip
+ */
+const FileName = styled(Label) `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const Path = styled.path `
+  fill: currentColor;
+`;
+const UploadIcon = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", "aria-hidden": true },
+    React.createElement(Path, { d: "M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95A5.469 5.469 0 0 1 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11A2.98 2.98 0 0 1 22 15c0 1.65-1.35 3-3 3zM8 13h2.55v3h2.9v-3H16l-4-4z" })));
+const FileIcon = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", "aria-hidden": true },
+    React.createElement(Path, { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm2-6h8v2H8zm0 3h5v2H8z" })));
+const TrashIcon = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", "aria-hidden": true },
+    React.createElement(Path, { d: "M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z" })));
+/**
+ * The file by the click or by the drop: one area with the dashed border. The chosen file
+ * is the row with its name and size, «Replace» and the delete button; a new file can be
+ * dropped onto it too
+ */
+const FileDropzone = (props, ref) => {
+    const { value, onChange, accept, maxSize, onReject, label = 'Choose a file', hint, replaceLabel = 'Replace', removeLabel = 'Remove the file', formatSize = formatFileSize, disabled = false, overrides } = props, nativeProps = __rest(props, ["value", "onChange", "accept", "maxSize", "onReject", "label", "hint", "replaceLabel", "removeLabel", "formatSize", "disabled", "overrides"]);
+    const AreaComponent = (overrides === null || overrides === void 0 ? void 0 : overrides.Area) || Area;
+    const inputRef = React.useRef(null);
+    // dragenter/dragleave fire on every child: the counter keeps the highlight steady
+    const dragDepthRef = React.useRef(0);
+    const [isDragActive, setDragActive] = React.useState(false);
+    const take = (file) => {
+        if (!file) {
+            return;
+        }
+        if (!isFileAccepted(file, accept)) {
+            onReject === null || onReject === void 0 ? void 0 : onReject(file, 'type');
+            return;
+        }
+        if (typeof maxSize === 'number' && file.size > maxSize) {
+            onReject === null || onReject === void 0 ? void 0 : onReject(file, 'size');
+            return;
+        }
+        onChange(file);
+    };
+    const choose = () => {
+        var _a;
+        if (!disabled) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    };
+    const dropHandlers = disabled
+        ? {}
+        : {
+            onDragEnter: (event) => {
+                event.preventDefault();
+                dragDepthRef.current += 1;
+                setDragActive(true);
+            },
+            onDragOver: (event) => {
+                event.preventDefault();
+            },
+            onDragLeave: () => {
+                dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+                if (dragDepthRef.current === 0) {
+                    setDragActive(false);
+                }
+            },
+            onDrop: (event) => {
+                var _a;
+                event.preventDefault();
+                dragDepthRef.current = 0;
+                setDragActive(false);
+                take((_a = event.dataTransfer.files) === null || _a === void 0 ? void 0 : _a[0]);
+            },
+        };
+    const input = (React.createElement("input", { hidden: true, ref: inputRef, type: "file", accept: accept, disabled: disabled, 
+        // the input is inside the area: its click must not reach the area and open the dialog again
+        onClick: event => event.stopPropagation(), onChange: event => {
+            var _a;
+            const file = (_a = event.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
+            // the same file can be chosen again after the removal
+            event.currentTarget.value = '';
+            take(file);
+        } }));
+    if (value) {
+        return (React.createElement(AreaComponent, Object.assign({}, nativeProps, dropHandlers, { active: isDragActive, filled: true, disabled: disabled, ref: ref }),
+            input,
+            React.createElement(Icon, null,
+                React.createElement(FileIcon, null)),
+            React.createElement(FileText, null,
+                React.createElement(FileName, { title: value.name }, value.name),
+                React.createElement(Hint, null, formatSize(value.size))),
+            React.createElement(Button, { type: "button", variant: "plain", disabled: disabled, onClick: choose }, replaceLabel),
+            React.createElement(Button, { type: "button", variant: "plain", color: "error", iconOnly: true, disabled: disabled, title: removeLabel, "aria-label": removeLabel, onClick: () => onChange(null) },
+                React.createElement(TrashIcon, null))));
+    }
+    return (React.createElement(AreaComponent, Object.assign({ role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined }, nativeProps, dropHandlers, { active: isDragActive, filled: false, disabled: disabled, onClick: choose, onKeyDown: event => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                choose();
+            }
+        }, ref: ref }),
+        input,
+        React.createElement(Icon, null,
+            React.createElement(UploadIcon, null)),
+        React.createElement(Label, null, label),
+        hint && React.createElement(Hint, null, hint)));
+};
+export * from './FileDropzoneArea';
+export default React.forwardRef(FileDropzone);