@via-profit/ui-kit 0.7.0 → 0.9.0

package/Autocomplete/AutocompleteContainer.d.ts

@@ -122,6 +122,19 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
      * The function that will be called at the moment when you change the input value of input element
      */
     readonly onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The text of the field controlled by you: the free text which is the value itself
+     * (INN, the name, the address), the items are the suggestions only.\
+     * With it the field shows this text, not the text of the selected item, and does not
+     * clear or restore it on blur. The choice of an item calls `onChange(item)`: put the text
+     * of the item into `inputValue` yourself, if needed.\
+     * Pass it together with `onInputValueChange`
+     */
+    readonly inputValue?: string;
+    /**
+     * Called with the new text of the field: on typing and on the clear button
+     */
+    readonly onInputValueChange?: (inputValue: string) => void;
     /**
      * The function that will be called at the moment when you want to open the selectbox
      */

package/Autocomplete/AutocompleteContainer.js

@@ -67,7 +67,7 @@ const AutocompleteMenuList = react_1.default.forwardRef((props, ref) => (react_1
 AutocompleteMenuList.displayName = 'AutocompleteMenuList';
 const MENU_OVERRIDES = { List: AutocompleteMenuList };
 const Autocomplete = react_1.default.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_1.default.useRef(null);
     const fieldInputRef = react_1.default.useRef(null);
     const isFocusedRef = react_1.default.useRef(false);
@@ -77,10 +77,12 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
     const overridesMap = react_1.default.useMemo(() => ({
         TextField: (overrides === null || overrides === void 0 ? void 0 : overrides.TextField) || TextField_1.default,
     }), [overrides]);
+    const isInputControlled = typeof controlledInputValue === 'string';
     const clear = react_1.default.useCallback(() => {
         if (onChange) {
             onChange((multiple ? [] : null));
         }
+        onInputValueChange === null || onInputValueChange === void 0 ? void 0 : onInputValueChange('');
         dispatch((0, context_1.actionSetPartial)({
             filteredItems: items,
             inputValue: '',
@@ -89,7 +91,7 @@ const Autocomplete = react_1.default.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
      */
@@ -108,13 +110,27 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
      */
     const restoreInputValue = react_1.default.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((0, context_1.actionSetPartial)({
             filteredItems: newFilteredItems,
             inputValue: newInputValue,
         }));
-    }, [currentValue, selectedItemToString, multiple, applyFilterForItems, items, dispatch]);
+    }, [
+        currentValue,
+        selectedItemToString,
+        multiple,
+        applyFilterForItems,
+        items,
+        dispatch,
+        isInputControlled,
+        controlledInputValue,
+    ]);
     const inputKeydownEvent = react_1.default.useCallback((event) => {
         var _a, _b, _c, _d, _e;
         if (!isFocusedRef.current) {
@@ -207,14 +223,35 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         if (value === currentValue) {
             return;
         }
-        // With multiple the selected items are shown as tags and the search text is kept
-        dispatch((0, context_1.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((0, context_1.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_1.default.useEffect(() => {
+        if (!isInputControlled || controlledInputValue === inputValue) {
+            return;
+        }
+        dispatch((0, context_1.actionSetPartial)({
+            inputValue: controlledInputValue,
+            filteredItems: applyFilterForItems(controlledInputValue, items),
+        }));
+    }, [isInputControlled, controlledInputValue, inputValue, dispatch, applyFilterForItems, items]);
     react_1.default.useEffect(() => {
         if (currentOpen && menuRef.current) {
             menuRef.current.scrollToFirstSelected();
@@ -305,6 +342,7 @@ const Autocomplete = react_1.default.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) {
@@ -328,6 +366,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         filteredItems.length,
         items,
         onInputChange,
+        onInputValueChange,
         onRequestClose,
         onRequestOpen,
         openOnFocus,

package/Badge/BadgeBase.d.ts

@@ -3,6 +3,7 @@ import { BadgeIconWrapperProps } from './BadgeIconWrapper';
 import { BadgeTextWrapperProps } from './BadgeTextWrapper';
 import { BadgeContainerProps } from './BadgeContainer';
 import { BadgeDeleteButtonProps } from './BadgeDeleteButton';
+import { BadgeDotProps } from './BadgeDot';
 type BadgeNativeProps = React.HTMLAttributes<HTMLSpanElement>;
 export interface BadgeBaseProps extends Omit<BadgeNativeProps, 'color'> {
     /**
@@ -15,13 +16,17 @@ export interface BadgeBaseProps extends Omit<BadgeNativeProps, 'color'> {
      * ```
      */
     readonly startIcon?: React.JSX.Element;
+    /**
+     * The colored dot before the text: the status (active, overdue, paid)
+     */
+    readonly dot?: boolean;
     /**
      * Badge style variant\
      * Allowed variants: `standard` or `outlined`\
      * \
      * **Default**: `standard`
      */
-    readonly variant?: 'standard' | 'outlined';
+    readonly variant?: 'standard' | 'outlined' | 'soft';
     /**
      * You can pass the primary, default, secondary name of the colors or your specified color value
      */
@@ -58,6 +63,10 @@ export interface BadgeBaseOverrides {
      * Icon delete
      */
     readonly ButtonDelete?: React.ComponentType<BadgeDeleteButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * The dot. Rendered only with `dot`
+     */
+    readonly Dot?: React.ComponentType<BadgeDotProps & React.RefAttributes<HTMLSpanElement>>;
 }
 declare const _default: React.ForwardRefExoticComponent<BadgeBaseProps & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Badge/BadgeBase.js

@@ -19,14 +19,16 @@ const BadgeIconWrapper_1 = __importDefault(require("./BadgeIconWrapper"));
 const BadgeTextWrapper_1 = __importDefault(require("./BadgeTextWrapper"));
 const BadgeContainer_1 = __importDefault(require("./BadgeContainer"));
 const BadgeDeleteButton_1 = __importDefault(require("./BadgeDeleteButton"));
+const BadgeDot_1 = __importDefault(require("./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_1.default.useMemo(() => ({
         TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || BadgeTextWrapper_1.default,
         IconWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.IconWrapper) || BadgeIconWrapper_1.default,
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || BadgeContainer_1.default,
         ButtonDelete: (overrides === null || overrides === void 0 ? void 0 : overrides.ButtonDelete) || BadgeDeleteButton_1.default,
+        Dot: (overrides === null || overrides === void 0 ? void 0 : overrides.Dot) || BadgeDot_1.default,
     }), [overrides]);
     // A clickable badge acts as a button, so it is activated by Enter and Space too
     const handleKeyDown = react_1.default.useCallback((event) => {
@@ -46,8 +48,13 @@ const BadgeBase = (props, ref) => {
         onDelete === null || onDelete === void 0 ? void 0 : onDelete(event);
     }, [onDelete]);
     return (react_1.default.createElement(overridesMap.Container, Object.assign({ role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, nativeProps, { onClick: onClick, onKeyDown: handleKeyDown, color: color, ref: ref }),
+        dot && react_1.default.createElement(overridesMap.Dot, null),
         typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(overridesMap.IconWrapper, null, startIcon)),
         react_1.default.createElement(overridesMap.TextWrapper, null, children),
-        typeof onDelete === 'function' && (react_1.default.createElement(overridesMap.ButtonDelete, { variant: variant, onClick: handleDelete, color: color, "aria-label": deleteButtonLabel }))));
+        typeof onDelete === 'function' && (react_1.default.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 }))));
 };
 exports.default = react_1.default.forwardRef(BadgeBase);

package/Badge/BadgeDot.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type BadgeDotProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const _default: React.ForwardRefExoticComponent<BadgeDotProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Badge/BadgeDot.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+/**
+ * The color of the badge (`--badge-dot-color`), not the color of its text
+ */
+const StyledDot = styled_1.default.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_1.default.createElement(StyledDot, Object.assign({ "aria-hidden": true }, props, { ref: ref })));
+exports.default = react_1.default.forwardRef(BadgeDot);

package/Badge/BadgeStyled.js

@@ -70,6 +70,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
@@ -78,42 +95,62 @@ const StyledBadge = (0, styled_1.default)(BadgeBase_1.default) `
   border-style: solid;
   border-width: ${tokens_1.BORDER_WIDTH};
   border-color: ${({ $background }) => $background.toString()};
+  --badge-dot-color: ${({ $variant, $background, $color }) => ($variant === 'standard' ? $color : $background).toString()};
 
-  ${({ $variant, $color, $background, theme }) => $variant === 'outlined'
-    ? (0, react_2.css) `
-          color: ${$color.darken(30).toString()};
-          background-color: transparent;
+  ${({ $variant, $color, $background }) => $variant === 'soft' &&
+    (0, react_2.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()};
-          }
-        `
-    : (0, react_2.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'
+        ? (0, react_2.css) `
+            color: ${$color.darken(30).toString()};
+            background-color: transparent;
+
+            &:focus-visible {
+              outline-style: solid;
+              outline-width: 0.14em;
+              outline-color: ${$background.rgbString()};
+            }
+          `
+        : (0, react_2.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 &&
     (0, react_2.css) `
       cursor: pointer;
 
       &:hover {
-        ${$variant === 'outlined'
+        ${$variant === 'soft'
         ? (0, react_2.css) `
-              background-color: ${$background.darken(20).alpha(0.1).toString()};
+              background-color: ${$background.alpha(0.3).toString()};
             `
-        : (0, react_2.css) `
-              background-color: ${$background.darken(30).toString()};
-              border-color: ${$background.darken(30).toString()};
-            `}
+        : $variant === 'outlined'
+            ? (0, react_2.css) `
+                background-color: ${$background.darken(20).alpha(0.1).toString()};
+              `
+            : (0, react_2.css) `
+                background-color: ${$background.darken(30).toString()};
+                border-color: ${$background.darken(30).toString()};
+              `}
       }
     `}
   ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
@@ -121,7 +158,11 @@ const StyledBadge = (0, styled_1.default)(BadgeBase_1.default) `
 const BadgeStyled = (props, ref) => {
     const { children, color, variant = 'standard', onClick } = props, restProps = __rest(props, ["children", "color", "variant", "onClick"]);
     const theme = (0, react_2.useTheme)();
-    const { $background, $color } = react_1.default.useMemo(() => variant === 'outlined' ? getOutlinedColors(color, theme) : getStandardColors(color, theme), [color, variant, theme]);
+    const { $background, $color } = react_1.default.useMemo(() => variant === 'soft'
+        ? getSoftColors(color, theme)
+        : variant === 'outlined'
+            ? getOutlinedColors(color, theme)
+            : getStandardColors(color, theme), [color, variant, theme]);
     return (react_1.default.createElement(StyledBadge, Object.assign({ "$variant": variant, "$clickable": typeof onClick === 'function', "$color": $color, "$background": $background, color: color, variant: variant, onClick: onClick }, restProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(BadgeStyled);

package/Badge/index.d.ts

@@ -4,19 +4,19 @@ import type { BadgeOutlinedProps } from './BadgeOutlined';
 export type BadgeProps = (BadgeStandardProps | BadgeOutlinedProps) & {
     /**
      * Badge style variant\
-     * Allowed variants: `standard` or `outlined`\
+     * Allowed variants: `standard`, `outlined` or `soft` (the pale background of the color)\
      * \
      * **Default**: `standard`
      */
-    readonly variant?: 'standard' | 'outlined';
+    readonly variant?: 'standard' | 'outlined' | 'soft';
 };
 declare const _default: React.ForwardRefExoticComponent<import("./BadgeBase").BadgeBaseProps & {
     /**
      * Badge style variant\
-     * Allowed variants: `standard` or `outlined`\
+     * Allowed variants: `standard`, `outlined` or `soft` (the pale background of the color)\
      * \
      * **Default**: `standard`
      */
-    readonly variant?: "standard" | "outlined";
+    readonly variant?: "standard" | "outlined" | "soft";
 } & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 Все заметные изменения пакета `@via-profit/ui-kit`. Формат основан на [Keep a Changelog](https://keepachangelog.com/ru/1.1.0/), версии следуют [семантическому версионированию](https://semver.org/lang/ru/).
 
+## 0.9.0 — 2026-10-19
+
+### Добавлено
+
+- **InfoNote** — информер: короткий текст в форме или карточке, который важно увидеть сразу. Варианты `info`, `success`, `warning`, `error` с цветами темы, заголовок `title`, своя иконка или без неё (`icon`), части `Container`, `Icon`, `Content`, `Title`;
+- **FileDropzone** — загрузка файла: область, куда файл выбирают нажатием или перетаскивают. Выбранный файл — строка с именем и размером, кнопками «Заменить» и удаления. Проверка `accept` и `maxSize` с `onReject`, подписи на языке интерфейса, `formatSize` и функция `formatFileSize`, часть `Area`;
+- **Badge**: вариант `soft` — бледная подложка цвета и текст того же оттенка (тёмный в светлой теме, светлый в тёмной) — и свойство `dot`: точка цвета бейджа перед текстом, для меток статуса. Часть `Dot`;
+- **Autocomplete**: свободный текст с подсказками — `inputValue` и `onInputValueChange`. Текст поля — само значение (ИНН, название, адрес), список только подсказывает: поле не подменяет текст текстом выбранного элемента и не стирает его при уходе фокуса;
+- **Skeleton** — заглушка загрузки: серая мерцающая фигура на месте содержимого. Варианты `text`, `rect`, `circle`, `pill`, размеры `width` и `height`; мерцание выключается при уменьшении движения в системе;
+- **EmptyState** — пустое состояние: иллюстрация, что пусто (`title`), почему (`children`) и следующий шаг (`action`). Своя иллюстрация или без неё (`icon`), `fullHeight`, части `Container`, `Icon`, `Title`, `Content`, `Action`;
+- **HintPopover** — кнопка «?», которая по нажатию открывает всплывающий блок с пояснением. Кнопка берёт цвет окружающего текста, подсказка закрывается кликом вне неё и Escape (фокус возвращается на кнопку), показывается поверх модальных окон. Свойства `label`, `placement`, `isOpen`/`onOpenChange`, части `Button` и `Container`.
+
+## 0.8.0 — 2026-10-13
+
+Drawer: закрытие свайпом.
+
+### Добавлено
+
+- **Modal**: свойство `swipeToClose` у `drawer` — панель закрывается свайпом к своему краю. Она следует за пальцем, короткий свайп возвращает её на место, прокручиваемое содержимое сначала прокручивается. На стороне, обращённой к странице, появляется полоска-ручка, за которую панель перетаскивается мышью.
+
 ## 0.7.0 — 2026-10-09
 
 Swiper: дробный `slidesPerView` и `centered`, вертикальная прокрутка, затухание и бегущая лента.

package/EmptyState/EmptyStateAction.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type EmptyStateActionProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<EmptyStateActionProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/EmptyState/EmptyStateAction.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledAction = styled_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5em;
+  margin-top: 0.5em;
+`;
+const EmptyStateAction = (props, ref) => react_1.default.createElement(StyledAction, Object.assign({}, props, { ref: ref }));
+exports.default = react_1.default.forwardRef(EmptyStateAction);

package/EmptyState/EmptyStateContainer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type EmptyStateContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly fullHeight: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly fullHeight: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/EmptyState/EmptyStateContainer.js

@@ -0,0 +1,34 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledContainer = styled_1.default.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_1.default.createElement(StyledContainer, Object.assign({}, nativeProps, { "$fullHeight": fullHeight, ref: ref }));
+};
+exports.default = react_1.default.forwardRef(EmptyStateContainer);

package/EmptyState/EmptyStateContent.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type EmptyStateContentProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<EmptyStateContentProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/EmptyState/EmptyStateContent.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledContent = styled_1.default.div `
+  max-width: 22em;
+  font-size: 0.9em;
+  line-height: 1.45;
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+`;
+const EmptyStateContent = (props, ref) => react_1.default.createElement(StyledContent, Object.assign({}, props, { ref: ref }));
+exports.default = react_1.default.forwardRef(EmptyStateContent);

package/EmptyState/EmptyStateIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type EmptyStateIconProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const _default: React.ForwardRefExoticComponent<EmptyStateIconProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/EmptyState/EmptyStateIcon.js

@@ -0,0 +1,38 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledIcon = styled_1.default.span `
+  display: inline-flex;
+  margin-bottom: 0.75em;
+  font-size: 6em;
+  color: ${({ theme }) => theme.color.textPrimary.alpha(0.6).toString()};
+`;
+const Path = styled_1.default.path `
+  fill: currentColor;
+`;
+/**
+ * The open empty box. `children` replaces it
+ */
+const EmptyStateIcon = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledIcon, Object.assign({ "aria-hidden": true }, nativeProps, { ref: ref }), children !== null && children !== void 0 ? children : (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 511.99 511.99" },
+        react_1.default.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_1.default.createElement(Path, { d: "M122.952 31.63h30v100.174h-30z", transform: "rotate(-30 137.947 81.722)" }),
+        react_1.default.createElement(Path, { d: "M323.951 66.717h100.174v30H323.951z", transform: "rotate(-60 374.044 81.724)" })))));
+};
+exports.default = react_1.default.forwardRef(EmptyStateIcon);

package/EmptyState/EmptyStateTitle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type EmptyStateTitleProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<EmptyStateTitleProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/EmptyState/EmptyStateTitle.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledTitle = styled_1.default.div `
+  font-weight: 600;
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+`;
+const EmptyStateTitle = (props, ref) => react_1.default.createElement(StyledTitle, Object.assign({}, props, { ref: ref }));
+exports.default = react_1.default.forwardRef(EmptyStateTitle);