@via-profit/ui-kit 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -4,6 +4,44 @@
 
 ## Не выпущено
 
+## 0.5.0 — 2026-10-02
+
+Новые компоненты: `Slider`, `Tabs`, `Tooltip` и `Toast` (замена react-toastify с тем же API). Оформление компонентов в теме — `defaultProps` и `overrides` для всего приложения, токены рамки фокуса, теней и шрифта. Пакет собирается и в ES-модули: сборщики выбрасывают неиспользуемый код. Календарь и дейтпикер больше не требуют `react-intl`.
+
+Версия содержит несовместимые изменения. Как обновиться с 0.4:
+
+- `CountryFlags`: модуль удалён. Если вы импортировали флаги из `@via-profit/ui-kit/CountryFlags`, перенесите нужные SVG в свой проект. `PhoneField` по-прежнему показывает флаги стран из набора шаблонов по умолчанию;
+- `Menu`: удалены неиспользуемые `Menu/VirtualizedList`, `Menu/VirtualizedListComponent`, `Menu/VirtualizedItem`, `Menu/MeasuredItem` и `Menu/AutoHeightWrapper` — уберите их импорты;
+- импорт: работают только пути модулей из карты `exports` — `@via-profit/ui-kit/Button`, `@via-profit/ui-kit/Button/ButtonContainer` и т. п. Пути с расширением `.js` или с `dist` уберите;
+- `ErrorBoundary`: в production сообщение об ошибке по умолчанию на английском; свои тексты передайте в `title` и `description`.
+
+Подробности — в разделах ниже.
+
+### Добавлено
+
+- **ThemeProvider**: оформление компонентов в теме — `components` с `defaultProps` и `overrides` по имени компонента. Свойства и `overrides`, переданные компоненту в коде, важнее темы. Токены темы: `typography.fontFamily`, `focusRing` (одинаковая рамка фокуса во всех компонентах) и `elevation` (тени всплывающих элементов и карточек); без них компоненты выглядят как раньше.
+- **Button**: `ButtonBase` и часть `Container` принимают `variant` и `groupOrientation`; стили вариантов перенесены внутрь `Container`, поэтому `styled(ButtonContainer)` в `overrides` теперь перекрывает стили варианта. Внешний вид кнопок не изменился.
+- **Toast**: новый компонент `@via-profit/ui-kit/Toast` — уведомления с API react-toastify (`toast`, `toast.info/success/warning/error/loading`, `toast.update`, `toast.dismiss`, `ToastContainer` с `position`, `autoClose`, `limit`), а также `description` и кнопки `actions`; клик по интерактивным элементам внутри не закрывает уведомление, таймер стоит под курсором, при фокусе внутри и в неактивном окне; F8 переводит фокус к уведомлениям, Escape закрывает, ошибки читаются сразу (`role="alert"`); несколько контейнеров через `containerId` и `overrides`.
+- **Tooltip**: новый компонент `@via-profit/ui-kit/Tooltip` — подсказка при наведении и фокусе с клавиатуры: расположение и автоматический переворот, стрелка, задержки появления и скрытия, подсказку можно навести указателем, соседняя подсказка появляется без задержки, Escape скрывает; строковый `title` становится `aria-label` элемента, а с `describeChild` подсказка связывается через `aria-describedby`; контролируемый режим (`isOpen`, `onOpenChange`) и `overrides`.
+- **Tabs**: новый компонент `@via-profit/ui-kit/Tabs` — вкладки `Tabs`, `TabList`, `Tab`, `TabPanel`: контролируемый и неконтролируемый режимы, вертикальное расположение, `fullWidth`, цвет, прокрутка ряда с выбранной вкладкой в видимой части, `keepMounted` у панели; роли `tablist`/`tab`/`tabpanel` связываются автоматически, стрелки, Home/End, автоматический и ручной (`activation="manual"`) выбор.
+- **Slider**: новый компонент `@via-profit/ui-kit/Slider` — выбор числа или диапазона ползунком: контролируемый и неконтролируемый режимы, шаг, метки с подписями, вертикальное расположение, цвет, `onChangeCommitted` по окончании перетаскивания, значение в форме через `name` и `overrides`; ползунки — элементы с ролью `slider`, управляются стрелками, PageUp/PageDown и Home/End.
+
+### Изменено
+
+- **Пакет**: кроме CommonJS, собираются ES-модули (`esm/`); в `package.json` добавлены `module`, `sideEffects: false` и карта `exports` со всеми модулями. Сборщики (webpack, Vite) берут ES-модули и выбрасывают неиспользуемый код: импорт одного `H1` из `@via-profit/ui-kit/Typography` занимает около 1 КБ вместо 15. Пути импорта не изменились (`@via-profit/ui-kit/Button`, `@via-profit/ui-kit/Button/ButtonContainer`), но пути, которых нет в `exports`, больше не работают: например, с расширением `.js` или с `dist` в пути — уберите их.
+
+### Удалено
+
+- **CountryFlags**: модуль `@via-profit/ui-kit/CountryFlags` удалён — флаги стран не относятся к UI-киту. `PhoneField` по-прежнему показывает флаги стран из набора шаблонов по умолчанию; в своих шаблонах передайте как флаг любой элемент — свою иконку или флаг из шаблонов по умолчанию: `defaultTemplates.find(([code]) => code === 'RU')?.[1]`. Если вы импортировали флаги из `CountryFlags`, перенесите нужные SVG в свой проект.
+- **Menu**: неиспользуемые файлы виртуализированного списка — `Menu/VirtualizedList`, `Menu/VirtualizedListComponent`, `Menu/VirtualizedItem`, `Menu/MeasuredItem`, `Menu/AutoHeightWrapper`. Меню их не использовало.
+- **ErrorBoundary**: неиспользуемый `ErrorBoundary/Fallback`.
+
+### Исправлено
+
+- **Calendar**, **DatePicker**: больше не требуют `react-intl`. Календарь оборачивает себя в `ErrorBoundary`, а тот импортировал `react-intl`, которого нет в зависимостях пакета: без него календарь не собирался.
+- **ErrorBoundary**: свойство `fallback` теперь работает; тексты сообщения об ошибке задаются свойствами `title` и `description` (по умолчанию `Something went wrong` и `Please let the developers know`) вместо русских строк через `react-intl`.
+- **Selectbox**: значение выводится шрифтом поля ввода — селектбокс той же высоты, что `TextField`, `Autocomplete` и `DatePicker` (раньше был ниже на 2px, а текст значения мельче).
+
 ## 0.4.0 — 2026-10-01
 
 Новые компоненты: `Checkbox`, `Radio` и `RadioGroup`, `ButtonGroup`, `Stack` и `Grid`, шкала отступов темы. Доступность с клавиатуры и для программ чтения с экрана во многих компонентах, исправления ошибок по всей библиотеке.

package/Calendar/CalendarComponent.js

@@ -56,6 +56,7 @@ const CalendarWeekDaysBar_1 = __importDefault(require("./CalendarWeekDaysBar"));
 const use_calendar_1 = require("./use-calendar");
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 __exportStar(require("./use-calendar"), exports);
 __exportStar(require("./CalendarWeekDaysBar"), exports);
 const viewAppear = (0, react_2.keyframes) `
@@ -148,7 +149,7 @@ const computeCalendarDate = (params) => {
 };
 const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     var _a;
-    const { minDate: inputMinDate, maxDate: inputMaxDate, weekStartDay = 'monday', locale = 'ru-RU', displayLeadingZero = false, onChange, badges = [], markToday = true, weekDayLabelFormat = 'short', accentColor = 'primary', defaultValue, value: inputValue, initialView: inputInitialView, view: inputView, views: inputViews, resetButtonLabel, todayButtonLabel, heading, subheading, footer, overrides, range = false, prevButtonLabel = 'Previous', nextButtonLabel = 'Next', } = props;
+    const { minDate: inputMinDate, maxDate: inputMaxDate, weekStartDay = 'monday', locale = 'ru-RU', displayLeadingZero = false, onChange, badges = [], markToday = true, weekDayLabelFormat = 'short', accentColor = 'primary', defaultValue, value: inputValue, initialView: inputInitialView, view: inputView, views: inputViews, resetButtonLabel, todayButtonLabel, heading, subheading, footer, overrides, range = false, prevButtonLabel = 'Previous', nextButtonLabel = 'Next', } = (0, useThemeProps_1.default)('Calendar', props);
     /**
      * Validations
      */

package/Calendar/CalendarPaper.js

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyledCalendarPaper = styled_1.default.div `
   width: 18em;
   position: relative;
@@ -24,7 +25,7 @@ const StyledCalendarPaper = styled_1.default.div `
   justify-content: stretch;
   background-color: ${({ theme }) => theme.color.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
-  box-shadow: 0 4px 24px ${({ theme }) => theme.color.surface.darken(50).alpha(0.6).toString()};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup', `0 4px 24px ${theme.color.surface.darken(50).alpha(0.6).toString()}`)};
 `;
 const CalendarPaper = (props, ref) => {
     const { children } = props, restProps = __rest(props, ["children"]);

package/Checkbox/CheckboxBox.js

@@ -18,6 +18,7 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const useCheckboxColor_1 = __importDefault(require("./useCheckboxColor"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const Root = styled_1.default.span `
   position: relative;
   display: inline-flex;
@@ -41,6 +42,7 @@ const StyledInput = styled_1.default.input `
     outline: 0.14em solid ${({ theme }) => theme.color.accentPrimary.toString()};
     outline-offset: 0.14em;
   }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme, '&:focus-visible + [data-checkbox-square]')}
 `;
 const Square = styled_1.default.span `
   box-sizing: border-box;

package/Checkbox/index.js

@@ -22,8 +22,9 @@ const CheckboxIcon_1 = __importDefault(require("./CheckboxIcon"));
 const CheckboxTextWrapper_1 = __importDefault(require("./CheckboxTextWrapper"));
 const CheckboxAsterisk_1 = __importDefault(require("./CheckboxAsterisk"));
 const CheckboxErrorText_1 = __importDefault(require("./CheckboxErrorText"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const Checkbox = (props, ref) => {
-    const { checked, defaultChecked, onChange, indeterminate = false, disabled, color, labelPosition, error, errorText, requiredAsterisk, overrides, children, className, style } = props, nativeProps = __rest(props, ["checked", "defaultChecked", "onChange", "indeterminate", "disabled", "color", "labelPosition", "error", "errorText", "requiredAsterisk", "overrides", "children", "className", "style"]);
+    const _a = (0, useThemeProps_1.default)('Checkbox', props), { checked, defaultChecked, onChange, indeterminate = false, disabled, color, labelPosition, error, errorText, requiredAsterisk, overrides, children, className, style } = _a, nativeProps = __rest(_a, ["checked", "defaultChecked", "onChange", "indeterminate", "disabled", "color", "labelPosition", "error", "errorText", "requiredAsterisk", "overrides", "children", "className", "style"]);
     const inputRef = react_1.default.useRef(null);
     const [internalChecked, setInternalChecked] = react_1.default.useState(Boolean(defaultChecked));
     const isControlled = typeof checked !== 'undefined';

package/ErrorBoundary/RenderError.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 type RenderErrorProps = {
     readonly error?: Error | unknown;
+    readonly title?: React.ReactNode;
+    readonly description?: React.ReactNode;
 };
 declare const RenderError: React.FC<RenderErrorProps>;
 export default RenderError;

package/ErrorBoundary/RenderError.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
-const react_intl_1 = require("react-intl");
 const styled_1 = __importDefault(require("@emotion/styled"));
 const createTheme_1 = __importDefault(require("../ThemeProvider/createTheme"));
 const H1_1 = __importDefault(require("../Typography/H1"));
@@ -46,7 +45,7 @@ const StyledHeading = (0, styled_1.default)(H1_1.default) `
   margin-top: 0;
 `;
 const RenderError = props => {
-    const { error } = props;
+    const { error, title = 'Something went wrong', description = 'Please let the developers know', } = props;
     const isDev = process.env.NODE_ENV === 'development';
     const { name, message, stack } = React.useMemo(() => {
         let name = '';
@@ -72,9 +71,7 @@ const RenderError = props => {
                 React.createElement(StyledHeading, null, name),
                 React.createElement(Strong_1.default, null, message),
                 stack !== '' && React.createElement(Paragraph_1.default, null, stack))) : (React.createElement(React.Fragment, null,
-                React.createElement(StyledHeading, null,
-                    React.createElement(react_intl_1.FormattedMessage, { defaultMessage: "\u041F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430" })),
-                React.createElement(Paragraph_1.default, null,
-                    React.createElement(react_intl_1.FormattedMessage, { defaultMessage: "\u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0441\u043E\u043E\u0431\u0449\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A\u0430\u043C" }))))))));
+                React.createElement(StyledHeading, null, title),
+                React.createElement(Paragraph_1.default, null, description)))))));
 };
 exports.default = RenderError;

package/ErrorBoundary/index.d.ts

@@ -1,15 +1,28 @@
 import React from 'react';
 type State = {
     readonly error: Error | null;
-    readonly errorInfo: React.ErrorInfo | null;
 };
-type Props = {
+export type ErrorBoundaryProps = {
     readonly children: React.ReactNode;
-    readonly fallback?: React.ReactNode | undefined | null;
+    /**
+     * What is shown instead of the children after an error. Without it the error message is shown:
+     * the name, the message and the stack in the development mode, `title` and `description` in production
+     */
+    readonly fallback?: React.ReactNode;
+    /**
+     * The heading of the error message in production
+     * Default: `Something went wrong`
+     */
+    readonly title?: React.ReactNode;
+    /**
+     * The text of the error message in production
+     * Default: `Please let the developers know`
+     */
+    readonly description?: React.ReactNode;
 };
-declare class ErrorBoundary extends React.Component<Props, State> {
-    constructor(props: Props);
-    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): State;
     render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
 }
 export default ErrorBoundary;

package/ErrorBoundary/index.js

@@ -10,20 +10,19 @@ class ErrorBoundary extends react_1.default.Component {
         super(props);
         this.state = {
             error: null,
-            errorInfo: null,
         };
     }
-    componentDidCatch(error, errorInfo) {
-        this.setState({
-            error,
-            errorInfo,
-        });
+    static getDerivedStateFromError(error) {
+        return { error };
     }
     render() {
         const { error } = this.state;
-        const { children } = this.props;
+        const { children, fallback, title, description } = this.props;
         if (error) {
-            return react_1.default.createElement(RenderError_1.default, { error: error });
+            if (typeof fallback !== 'undefined') {
+                return fallback;
+            }
+            return react_1.default.createElement(RenderError_1.default, { error: error, title: title, description: description });
         }
         return children;
     }

package/Highlighted/index.js

@@ -20,13 +20,14 @@ const react_1 = __importDefault(require("react"));
 const HighlightedContainer_1 = __importDefault(require("./HighlightedContainer"));
 const HighlightedMark_1 = __importDefault(require("./HighlightedMark"));
 const HighlightedText_1 = __importDefault(require("./HighlightedText"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const escapeRegex = (pattern) => pattern.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
 exports.escapeRegex = escapeRegex;
 /**
  * The component allows you to highlight text matches in a string
  */
 const Highlighted = (props, ref) => {
-    const { text, highlight, overrides, disabledHighlighting = false, caseSensitive = false } = props, nativeProps = __rest(props, ["text", "highlight", "overrides", "disabledHighlighting", "caseSensitive"]);
+    const _a = (0, useThemeProps_1.default)('Highlighted', props), { text, highlight, overrides, disabledHighlighting = false, caseSensitive = false } = _a, nativeProps = __rest(_a, ["text", "highlight", "overrides", "disabledHighlighting", "caseSensitive"]);
     const patterns = react_1.default.useMemo(() => (typeof highlight === 'string' ? [highlight] : highlight)
         .filter(h => h.trim() !== '')
         // Longest first: the alternation takes the first matching pattern,

package/Menu/MenuContainer.js

@@ -31,6 +31,7 @@ const context_1 = __importStar(require("./context"));
 const MenuList_1 = __importDefault(require("./MenuList"));
 const Popper_1 = __importDefault(require("../Popper"));
 const ClickOutside_1 = __importDefault(require("../ClickOutside"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const onRequestCloseDefault = () => undefined;
 const isEqual = (a, b) => {
     if (a === b) {
@@ -46,7 +47,7 @@ const isEqual = (a, b) => {
     return keysA.every(key => Object.prototype.hasOwnProperty.call(b, key) && a[key] === b[key]);
 };
 const MenuContainer = react_1.default.forwardRef((props, ref) => {
-    const { items, value, anchorElement = null, overrides, children, closeOutsideClick = true, closeOnAnchorClick = false, isOpen = false, anchorPos = 'bottom', alternativePlacements = ['bottom', 'top'], positionStrategy, autoFlip, viewportMargin, offset, multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, onAnchorPosChanged, zIndex, onSelectItem, getOptionSelected, maxWidth, } = props;
+    const { items, value, anchorElement = null, overrides, children, closeOutsideClick = true, closeOnAnchorClick = false, isOpen = false, anchorPos = 'bottom', alternativePlacements = ['bottom', 'top'], positionStrategy, autoFlip, viewportMargin, offset, multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, onAnchorPosChanged, zIndex, onSelectItem, getOptionSelected, maxWidth, } = (0, useThemeProps_1.default)('Menu', props);
     const overridesMap = react_1.default.useMemo(() => ({
         List: (overrides === null || overrides === void 0 ? void 0 : overrides.List) || MenuList_1.default,
         Popper: (overrides === null || overrides === void 0 ? void 0 : overrides.Popper) || Popper_1.default,

package/Menu/MenuList.js

@@ -18,6 +18,7 @@ exports.MenuList = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyledMenuList = styled_1.default.div `
   display: flex;
   flex-direction: column;
@@ -25,7 +26,7 @@ const StyledMenuList = styled_1.default.div `
   opacity: ${props => (props.$isOpen ? 1 : 0)};
   background-color: ${({ theme }) => theme.color.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
-  box-shadow: 0 0.5em 1.5em ${({ theme }) => theme.color.surface.darken(50).alpha(0.6).toString()};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup', `0 0.5em 1.5em ${theme.color.surface.darken(50).alpha(0.6).toString()}`)};
 
   ${({ $maxWidth }) => {
     if (typeof $maxWidth === 'number') {

package/Modal/BaseModal/index.js

@@ -12,8 +12,9 @@ const ModalInnerContainer_1 = __importDefault(require("./ModalInnerContainer"));
 const ModalWrapper_1 = __importDefault(require("./ModalWrapper"));
 const RenderModal_1 = __importDefault(require("./RenderModal"));
 const NoSSR_1 = __importDefault(require("../../NoSSR"));
+const useThemeProps_1 = __importDefault(require("../../ThemeProvider/useThemeProps"));
 const BaseModal = props => {
-    const { isOpen, children, overrides, autofocus = true, closeOnOverlayClick = context_1.defaultState.closeOnOverlayClick, closeOnEscape = context_1.defaultState.closeOnEscape, destroyTimeout = context_1.defaultState.destroyTimeout, onRequestClose, } = props;
+    const { isOpen, children, overrides, autofocus = true, closeOnOverlayClick = context_1.defaultState.closeOnOverlayClick, closeOnEscape = context_1.defaultState.closeOnEscape, destroyTimeout = context_1.defaultState.destroyTimeout, onRequestClose, } = (0, useThemeProps_1.default)('Modal', props);
     const [domLoaded, setDomLoaded] = react_1.default.useState(false);
     const overridesMap = react_1.default.useMemo(() => ({
         Overlay: (overrides === null || overrides === void 0 ? void 0 : overrides.Overlay) || ModalOverlay_1.default,

package/Modal/ConfirmBox/index.js

@@ -22,8 +22,9 @@ const ConfirmBoxFooter_1 = __importDefault(require("./ConfirmBoxFooter"));
 const ConfirmBoxHeader_1 = __importDefault(require("./ConfirmBoxHeader"));
 const ModalOverlay_1 = __importDefault(require("../BaseModal/ModalOverlay"));
 const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
+const useThemeProps_1 = __importDefault(require("../../ThemeProvider/useThemeProps"));
 const ConfirmBox = props => {
-    const { header, children, onRequestYes, onRequestClose, overrides, isOpen, dismissButtonLabel, confirmButtonLabel } = props, otherProps = __rest(props, ["header", "children", "onRequestYes", "onRequestClose", "overrides", "isOpen", "dismissButtonLabel", "confirmButtonLabel"]);
+    const _a = (0, useThemeProps_1.default)('ConfirmBox', props), { header, children, onRequestYes, onRequestClose, overrides, isOpen, dismissButtonLabel, confirmButtonLabel } = _a, otherProps = __rest(_a, ["header", "children", "onRequestYes", "onRequestClose", "overrides", "isOpen", "dismissButtonLabel", "confirmButtonLabel"]);
     const dialogID = (0, useDialogID_1.default)('dialog-confirm');
     const overridesMap = react_1.default.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || ConfirmBoxContainer_1.default,

package/Modal/Dialog/index.js

@@ -41,8 +41,9 @@ const React = __importStar(require("react"));
 const BaseModal_1 = __importDefault(require("../BaseModal"));
 const DialogInner_1 = __importDefault(require("./DialogInner"));
 const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
+const useThemeProps_1 = __importDefault(require("../../ThemeProvider/useThemeProps"));
 const Dialog = props => {
-    const { children, overrides } = props, restProps = __rest(props, ["children", "overrides"]);
+    const _a = (0, useThemeProps_1.default)('Dialog', props), { children, overrides } = _a, restProps = __rest(_a, ["children", "overrides"]);
     const dialogID = (0, useDialogID_1.default)('dialog');
     // Created once: a component created during the render is a new type on every render,
     // so React would remount the whole dialog content (inputs lose the focus and the state)

package/Modal/Drawer/index.js

@@ -46,8 +46,9 @@ const DrawerContent_1 = __importDefault(require("./DrawerContent"));
 const DrawerFooter_1 = __importDefault(require("./DrawerFooter"));
 const ModalOverlay_1 = __importDefault(require("../BaseModal/ModalOverlay"));
 const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
+const useThemeProps_1 = __importDefault(require("../../ThemeProvider/useThemeProps"));
 const Drawer = props => {
-    const { children, onRequestClose, showCloseButton, header, closeButtonLabel, anchor, toolbar, footer, overrides } = props, otherProps = __rest(props, ["children", "onRequestClose", "showCloseButton", "header", "closeButtonLabel", "anchor", "toolbar", "footer", "overrides"]);
+    const _a = (0, useThemeProps_1.default)('Drawer', props), { children, onRequestClose, showCloseButton, header, closeButtonLabel, anchor, toolbar, footer, overrides } = _a, otherProps = __rest(_a, ["children", "onRequestClose", "showCloseButton", "header", "closeButtonLabel", "anchor", "toolbar", "footer", "overrides"]);
     const hasFooter = React.useMemo(() => typeof footer !== 'undefined' && footer !== null, [footer]);
     const hasHeader = React.useMemo(() => typeof header !== 'undefined' ||
         typeof toolbar !== 'undefined' ||

package/Modal/MessageBox/index.js

@@ -45,8 +45,9 @@ const MessageBoxFooter_1 = __importDefault(require("./MessageBoxFooter"));
 const MessageBoxHeader_1 = __importDefault(require("./MessageBoxHeader"));
 const ModalOverlay_1 = __importDefault(require("../BaseModal/ModalOverlay"));
 const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
+const useThemeProps_1 = __importDefault(require("../../ThemeProvider/useThemeProps"));
 const MessageBox = props => {
-    const { header, children, onRequestClose, overrides, okButtonLabel, isOpen } = props, otherProps = __rest(props, ["header", "children", "onRequestClose", "overrides", "okButtonLabel", "isOpen"]);
+    const _a = (0, useThemeProps_1.default)('MessageBox', props), { header, children, onRequestClose, overrides, okButtonLabel, isOpen } = _a, otherProps = __rest(_a, ["header", "children", "onRequestClose", "overrides", "okButtonLabel", "isOpen"]);
     const dialogID = (0, useDialogID_1.default)('dialog-message');
     const buttonRef = React.useRef(null);
     React.useEffect(() => {

package/PhoneField/CountryFlagComponent.js

@@ -16,7 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const Unknown_1 = __importDefault(require("../CountryFlags/Unknown"));
+const Unknown_1 = __importDefault(require("./flags/Unknown"));
 const CountryFlagContainer = styled_1.default.span `
   display: flex;
   align-items: center;

package/PhoneField/UnknownFlag.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 /**
- * @deprecated Use `Unknown` from `@via-profit/ui-kit/CountryFlags/Unknown`
+ * The placeholder that PhoneField shows instead of the flag when the country is not detected
  */
 declare const UnknownFlag: import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export default UnknownFlag;

package/PhoneField/UnknownFlag.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const Unknown_1 = __importDefault(require("../CountryFlags/Unknown"));
+const Unknown_1 = __importDefault(require("./flags/Unknown"));
 /**
- * @deprecated Use `Unknown` from `@via-profit/ui-kit/CountryFlags/Unknown`
+ * The placeholder that PhoneField shows instead of the flag when the country is not detected
  */
 const UnknownFlag = Unknown_1.default;
 exports.default = UnknownFlag;

package/PhoneField/templates.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.templates = void 0;
 const react_1 = __importDefault(require("react"));
 // import UnknownFlag from './UnknownFlag';
-const RU_1 = __importDefault(require("../CountryFlags/RU"));
-const BY_1 = __importDefault(require("../CountryFlags/BY"));
-const KZ_1 = __importDefault(require("../CountryFlags/KZ"));
-const UA_1 = __importDefault(require("../CountryFlags/UA"));
-const JP_1 = __importDefault(require("../CountryFlags/JP"));
-const US_1 = __importDefault(require("../CountryFlags/US"));
-const IL_1 = __importDefault(require("../CountryFlags/IL"));
-const CN_1 = __importDefault(require("../CountryFlags/CN"));
+const RU_1 = __importDefault(require("./flags/RU"));
+const BY_1 = __importDefault(require("./flags/BY"));
+const KZ_1 = __importDefault(require("./flags/KZ"));
+const UA_1 = __importDefault(require("./flags/UA"));
+const JP_1 = __importDefault(require("./flags/JP"));
+const US_1 = __importDefault(require("./flags/US"));
+const IL_1 = __importDefault(require("./flags/IL"));
+const CN_1 = __importDefault(require("./flags/CN"));
 exports.templates = [
     // Russian template
     ['RU', react_1.default.createElement(RU_1.default, { key: "ru-1" }), '7', '+x (xxx) xxx-xx-xx', '+7 (987) 654-32-10', /^\+$/], // must be at first (Default RU)

package/PhoneField/usePhoneUtils.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePhoneUtils = exports.dropExtraPluses = exports.templateToMask = void 0;
 const react_1 = __importDefault(require("react"));
-const Unknown_1 = __importDefault(require("../CountryFlags/Unknown"));
+const Unknown_1 = __importDefault(require("./flags/Unknown"));
 const useMasked_1 = require("../MaskedField/useMasked");
 /**
  * Converts a phone template to a mask: «x» is a digit, other chars are literals

package/Popper/Popper.js

@@ -33,10 +33,11 @@ const react_1 = __importDefault(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const PopperContainer_1 = __importDefault(require("./PopperContainer"));
 const usePopper_1 = require("./usePopper");
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 __exportStar(require("./usePopper"), exports);
 exports.PORTAL_ID = 'ui-kit-portal';
 const Popper = (props, ref) => {
-    const { isOpen, children, anchorElement, zIndex, overrides, anchorPos = 'auto', positionStrategy = 'fixed', viewportMargin = 30, autoFlip = false, alternativePlacements, offset = 0, onAnchorPosChanged } = props, nativeProps = __rest(props, ["isOpen", "children", "anchorElement", "zIndex", "overrides", "anchorPos", "positionStrategy", "viewportMargin", "autoFlip", "alternativePlacements", "offset", "onAnchorPosChanged"]);
+    const _a = (0, useThemeProps_1.default)('Popper', props), { isOpen, children, anchorElement, zIndex, overrides, anchorPos = 'auto', positionStrategy = 'fixed', viewportMargin = 30, autoFlip = false, alternativePlacements, offset = 0, onAnchorPosChanged } = _a, nativeProps = __rest(_a, ["isOpen", "children", "anchorElement", "zIndex", "overrides", "anchorPos", "positionStrategy", "viewportMargin", "autoFlip", "alternativePlacements", "offset", "onAnchorPosChanged"]);
     const [domLoaded, setDomLoaded] = react_1.default.useState(false);
     const { actualPlacement, style, popperRef, isVisible } = (0, usePopper_1.usePopper)({
         anchorElement,

package/Radio/RadioBox.js

@@ -18,6 +18,7 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const useRadioColor_1 = __importDefault(require("./useRadioColor"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const Root = styled_1.default.span `
   position: relative;
   display: inline-flex;
@@ -53,6 +54,7 @@ const StyledInput = styled_1.default.input `
     outline: 0.14em solid ${({ theme }) => theme.color.accentPrimary.toString()};
     outline-offset: 0.14em;
   }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme, '&:focus-visible + [data-radio-circle]')}
 `;
 const Circle = styled_1.default.span `
   box-sizing: border-box;

package/Radio/index.js

@@ -19,10 +19,11 @@ const RadioContainer_1 = __importDefault(require("./RadioContainer"));
 const RadioBox_1 = __importDefault(require("./RadioBox"));
 const RadioTextWrapper_1 = __importDefault(require("./RadioTextWrapper"));
 const RadioGroupContext_1 = __importDefault(require("../RadioGroup/RadioGroupContext"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const Radio = (props, ref) => {
     var _a;
     const group = react_1.default.useContext(RadioGroupContext_1.default);
-    const { children, value, checked, defaultChecked, onChange, disabled, color, labelPosition, error, name, required, overrides, className, style } = props, nativeProps = __rest(props, ["children", "value", "checked", "defaultChecked", "onChange", "disabled", "color", "labelPosition", "error", "name", "required", "overrides", "className", "style"]);
+    const _b = (0, useThemeProps_1.default)('Radio', props), { children, value, checked, defaultChecked, onChange, disabled, color, labelPosition, error, name, required, overrides, className, style } = _b, nativeProps = __rest(_b, ["children", "value", "checked", "defaultChecked", "onChange", "disabled", "color", "labelPosition", "error", "name", "required", "overrides", "className", "style"]);
     const overridesMap = react_1.default.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || RadioContainer_1.default,
         Box: (overrides === null || overrides === void 0 ? void 0 : overrides.Box) || RadioBox_1.default,

package/RadioGroup/index.js

@@ -21,8 +21,9 @@ const RadioGroupItems_1 = __importDefault(require("./RadioGroupItems"));
 const RadioGroupAsterisk_1 = __importDefault(require("./RadioGroupAsterisk"));
 const RadioGroupErrorText_1 = __importDefault(require("./RadioGroupErrorText"));
 const RadioGroupContext_1 = __importDefault(require("./RadioGroupContext"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const RadioGroup = (props, ref) => {
-    const { children, name: inputName, value, defaultValue, onChange, label, orientation = 'vertical', color, disabled, required, requiredAsterisk, error, errorText, overrides } = props, nativeProps = __rest(props, ["children", "name", "value", "defaultValue", "onChange", "label", "orientation", "color", "disabled", "required", "requiredAsterisk", "error", "errorText", "overrides"]);
+    const _a = (0, useThemeProps_1.default)('RadioGroup', props), { children, name: inputName, value, defaultValue, onChange, label, orientation = 'vertical', color, disabled, required, requiredAsterisk, error, errorText, overrides } = _a, nativeProps = __rest(_a, ["children", "name", "value", "defaultValue", "onChange", "label", "orientation", "color", "disabled", "required", "requiredAsterisk", "error", "errorText", "overrides"]);
     const id = react_1.default.useId().replace(/:/g, '');
     const name = inputName !== null && inputName !== void 0 ? inputName : `radio-group-${id}`;
     const legendID = `radio-group-${id}-legend`;

package/Selectbox/SelectboxButton.js

@@ -68,8 +68,10 @@ const StyledSelectboxButton = (0, styled_1.default)(Button_1.default) `
   transition: none;
   
 `;
+// The value has the size of the text in the fields, so the selectbox has the height of the TextField
 const StyledButtonTextWrapper = (0, styled_1.default)(ButtonTextWrapper_1.default) `
   flex: 1;
+  font-size: 1em;
 `;
 const SelectboxButton = (props, ref) => {
     const { children, fullWidth, error, anchorPos, isOpen } = props, nativeProps = __rest(props, ["children", "fullWidth", "error", "anchorPos", "isOpen"]);

package/Selectbox/index.js

@@ -51,6 +51,7 @@ const TextFieldErrorText_1 = __importDefault(require("../TextField/TextFieldErro
 const SelectboxButtonWrapper_1 = __importDefault(require("./SelectboxButtonWrapper"));
 const SelectboxContainer_1 = __importDefault(require("./SelectboxContainer"));
 const SelectboxMenu_1 = __importDefault(require("./SelectboxMenu"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const DEFAULT_OVERRIDES = {
     Button: SelectboxButton_1.default,
     Icon: SelectboxChevronIcon_1.default,
@@ -61,7 +62,7 @@ const DEFAULT_OVERRIDES = {
     Container: SelectboxContainer_1.default,
 };
 const Selectbox = React.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, renderValue, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, requiredAsterisk, error, errorText, notSetLabel = 'Not set', autoFlip = true, positionStrategy } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "renderValue", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "requiredAsterisk", "error", "errorText", "notSetLabel", "autoFlip", "positionStrategy"]);
+    const _a = (0, useThemeProps_1.default)('Selectbox', props), { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, renderValue, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, requiredAsterisk, error, errorText, notSetLabel = 'Not set', autoFlip = true, positionStrategy } = _a, nativeButtonProps = __rest(_a, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "renderValue", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "requiredAsterisk", "error", "errorText", "notSetLabel", "autoFlip", "positionStrategy"]);
     const menuRef = React.useRef(null);
     const [anchorElement, setAnchorElement] = React.useState(null);
     const overridesMap = React.useMemo(() => (Object.assign(Object.assign({}, DEFAULT_OVERRIDES), overrides)), [overrides]);

package/Slider/SliderContainer.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export type SliderOrientation = 'horizontal' | 'vertical';
+export type SliderContainerProps = React.HTMLAttributes<HTMLSpanElement> & {
+    readonly orientation: SliderOrientation;
+    readonly disabled: boolean;
+    /**
+     * True if at least one mark has a label: the container reserves the place for the labels
+     */
+    readonly hasMarkLabels: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    readonly orientation: SliderOrientation;
+    readonly disabled: boolean;
+    /**
+     * True if at least one mark has a label: the container reserves the place for the labels
+     */
+    readonly hasMarkLabels: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Slider/SliderContainer.js

@@ -0,0 +1,50 @@
+"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 react_2 = require("@emotion/react");
+const StyledContainer = styled_1.default.span `
+  position: relative;
+  box-sizing: content-box;
+  font-size: 1em;
+  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
+  /* The browser must not scroll the page while the thumb is dragged by the finger */
+  touch-action: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  ${({ $orientation, $hasMarkLabels }) => $orientation === 'vertical'
+    ? (0, react_2.css) `
+          display: inline-block;
+          vertical-align: top;
+          width: 0.25em;
+          height: 12em;
+          padding: 0 0.7em;
+          margin-right: ${$hasMarkLabels ? '2.5em' : 0};
+        `
+    : (0, react_2.css) `
+          display: block;
+          width: 100%;
+          height: 0.25em;
+          padding: 0.7em 0;
+          margin-bottom: ${$hasMarkLabels ? '1.4em' : 0};
+        `}
+`;
+const SliderContainer = (props, ref) => {
+    const { children, orientation, disabled, hasMarkLabels } = props, nativeProps = __rest(props, ["children", "orientation", "disabled", "hasMarkLabels"]);
+    return (react_1.default.createElement(StyledContainer, Object.assign({}, nativeProps, { "$orientation": orientation, "$disabled": disabled, "$hasMarkLabels": hasMarkLabels, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(SliderContainer);

package/Slider/SliderMark.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { SliderOrientation } from './SliderContainer';
+export type SliderMarkProps = React.HTMLAttributes<HTMLSpanElement> & {
+    readonly orientation: SliderOrientation;
+    /**
+     * The position of the mark, from 0 to 100 percent of the rail
+     */
+    readonly position: number;
+    /**
+     * True if the mark lies on the filled part of the rail
+     */
+    readonly inTrack: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    readonly orientation: SliderOrientation;
+    /**
+     * The position of the mark, from 0 to 100 percent of the rail
+     */
+    readonly position: number;
+    /**
+     * True if the mark lies on the filled part of the rail
+     */
+    readonly inTrack: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;