@via-profit/ui-kit 0.5.0 → 0.7.0

package/ButtonGroup/index.js

@@ -18,8 +18,9 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const ButtonGroupContext_1 = __importDefault(require("./ButtonGroupContext"));
+const tokens_1 = require("../ThemeProvider/tokens");
 /**
- * The buttons are glued: the inner corners are square and the borders overlap.
+ * The buttons are glued: the inner corners are square and the borders overlap by the width of the border.
  * `:not(...)` raises the specificity above the own styles of the button.
  * `-of-type`, not `-child`: with SSR emotion inserts <style> elements between the children
  */
@@ -44,7 +45,7 @@ const StyledGroup = styled_1.default.div `
   ${({ $orientation }) => $orientation === 'vertical'
     ? (0, react_2.css) `
           & > *:not(:first-of-type) {
-            margin-top: -0.14em;
+            margin-top: calc(-1 * ${tokens_1.CONTROL_BORDER});
             border-top-left-radius: 0;
             border-top-right-radius: 0;
           }
@@ -55,7 +56,7 @@ const StyledGroup = styled_1.default.div `
         `
     : (0, react_2.css) `
           & > *:not(:first-of-type) {
-            margin-left: -0.14em;
+            margin-left: calc(-1 * ${tokens_1.CONTROL_BORDER});
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
           }

package/CHANGELOG.md

@@ -2,7 +2,55 @@
 
 Все заметные изменения пакета `@via-profit/ui-kit`. Формат основан на [Keep a Changelog](https://keepachangelog.com/ru/1.1.0/), версии следуют [семантическому версионированию](https://semver.org/lang/ru/).
 
-## Не выпущено
+## 0.7.0 — 2026-10-09
+
+Swiper: дробный `slidesPerView` и `centered`, вертикальная прокрутка, затухание и бегущая лента.
+
+### Добавлено
+
+- **Swiper**: дробный `slidesPerView` (например, `1.2` — слайд и часть соседнего) и `centered` — текущий слайд посередине, соседи видны по краям;
+- **Swiper**: `direction="vertical"` — вертикальная прокрутка, стрелки ↑/↓;
+- **Swiper**: `effect="fade"` — смена слайдов затуханием;
+- **Swiper**: `speed` — длительность смены слайда;
+- **Swiper**: `autoScroll` — бегущая лента с постоянной скоростью в пикселях в секунду. Останавливается при наведении и при включённом в системе уменьшении движения.
+
+### Исправлено
+
+- **Swiper**: ширину слайда задаёт только `slidesPerView`. Раньше слайд с широким содержимым растягивался, и лента сдвигалась;
+- **Swiper**: если слайдов меньше, чем нужно для бесконечной прокрутки, она выключается целиком. Раньше в консоль выводилась ошибка, но индексы считались с копиями слайдов, которых не было.
+
+## 0.6.0 — 2026-10-07
+
+Поддержка React 19. Тема снова задаёт только токены. Оформление компонентов в теме убрано: оно делало внутренние части компонентов публичным контрактом и добавляло работы при каждой отрисовке.
+
+Версия содержит несовместимые изменения. Как обновиться с 0.5:
+
+- `ThemeProvider`: уберите `components` из `createTheme`. Части отдельного компонента по-прежнему заменяются его свойством `overrides`, а свойства по умолчанию передайте сами — например, через свою обёртку над компонентом.
+- размеры: кнопки и поля теперь одной высоты, у вкладок, пунктов меню и ячеек таблицы одинаковые отступы. Если ваша вёрстка рассчитана на прежнюю высоту, задайте `padding` в теме.
+
+### Добавлено
+
+- **Stack**, **Grid**: свойство `as` — элемент контейнера, например `<Stack as="ul">` или `<Grid as="dl">`. У списков убираются отступы и маркеры браузера;
+- **Pagination**: новый компонент — переключение страниц с пропусками `…`, контролируемый и неконтролируемый режимы, кнопки «назад/вперёд» и «в начало/в конец», настройка видимых страниц (`siblings`, `boundaries`), подписи для программ чтения с экрана (`getItemLabel`) и замена частей через `overrides` — например, ссылки вместо кнопок. Хук `usePagination` — вся логика без разметки для своей пагинации, функция `getPaginationItems` — номера страниц с пропусками;
+- **ThemeProvider**: токены `padding` — внутренние отступы по классам элементов: `control` (контролы), `item` (строки списков) и `container` (панели). Они меняют плотность интерфейса без изменения шрифта. Хелперы `themePadding`, `controlHeight` и `fieldPadding` в `ThemeProvider/tokens`.
+
+### Изменено
+
+- Обводки тоньше и одной толщины: `0.0625em` — `1px` при шрифте `16px`. Раньше у кнопок `outlined`, бейджей и кнопок в группе было `0.14em` (около `2px`), у чекбоксов, радиокнопок и линий таблицы — `0.1em`, у полей ввода — `1px`. Контролы стали ниже примерно на `2px`. Толщина доступна как `BORDER_WIDTH` в `ThemeProvider/tokens`; рамка фокуса не изменилась;
+- **ThemeProvider**: тени унифицированы. У всех компонентов одного уровня `elevation` одна тень по умолчанию: `popup` — меню, календарь, уведомления, подсказки, модальные окна; `surface` — `Surface`, `Accordion`, `Table`; новый уровень `control` — ручка `Switch`. Раньше у `Accordion`, `Calendar`, `Toast` и `Switch` были свои тени, а у модальных окон и подсказок теней не было. Хелпер `elevation(theme, level)` принимает собственную тень третьим аргументом необязательно, тени по умолчанию — `defaultElevation(theme)`;
+- **Button**, **TextField**, **TextArea**, **Selectbox**, **DatePicker**, **Autocomplete**: одна высота у всех контролов и у всех вариантов кнопки (раньше `standard` была на 4px ниже `outlined`, а поля — выше кнопок). Кнопка-иконка — квадрат высоты контрола;
+- **Menu**, **Table**, **Tabs**: одинаковые отступы строк из `padding.item` — пункты меню стали чуть выше, ячейки таблицы чуть ниже, вкладки уже;
+- **Surface**, **Accordion**, модальные окна, **Drawer**, **Toast**: отступы из `padding.container`. Заголовок аккордеона выровнен по содержимому. Заголовок и подзаголовок `Surface` и их отступы заданы в `em` вместо `rem` и масштабируются вместе с компонентом.
+
+### Удалено
+
+- **ThemeProvider**: `components` в теме (`defaultProps` и `overrides` по имени компонента), хук `useThemeProps` и типы `UIThemeComponents`, `ThemeComponentConfig`, `ThemeComponentName`. Токены `typography`, `focusRing` и `elevation` остаются.
+
+### Исправлено
+
+- Совместимость с React 19. Типы компонентов используют `React.JSX` вместо глобального пространства `JSX`, которого нет в `@types/react` 19, — проект на React 19 собирается без ошибок типов. **ClickOutside** и **Tooltip** больше не выводят в консоль предупреждение «Accessing element.ref was removed in React 19»: в React 19 ref дочернего элемента берётся из его свойств. React 18 по-прежнему поддерживается;
+- **Button**: при смене варианта (например, у выбранной кнопки в группе) кнопка на мгновение увеличивалась и сдвигала соседние элементы: анимировались рамка и отступы. Теперь анимируются только цвета, тень и обводка;
+- **Modal**: при открытии окна страница больше не сдвигается по горизонтали. Ширина полосы прокрутки, которая заменяется отступом, считалась по `<body>`, а не по окну, и почти всегда получалась `0`; к тому же она пересчитывалась при каждой отрисовке, уже без полосы. Теперь она измеряется один раз — до того как полоса скрывается — и доступна в CSS-переменной `--modal-scroll-width` на `<html>`.
 
 ## 0.5.0 — 2026-10-02
 

package/Calendar/CalendarComponent.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
@@ -56,7 +66,6 @@ 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) `
@@ -149,7 +158,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', } = (0, useThemeProps_1.default)('Calendar', 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', } = props;
     /**
      * Validations
      */

package/Calendar/CalendarControlButton.d.ts

@@ -4,8 +4,8 @@ export type CalendarControlButtonProps = ButtonProps & {
     readonly isActive?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<import("../Button/ButtonBase").ButtonBaseProps & {
-    readonly variant?: "standard" | "outlined" | "plain" | undefined;
+    readonly variant?: "standard" | "outlined" | "plain";
 } & {
-    readonly isActive?: boolean | undefined;
+    readonly isActive?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Calendar/CalendarPaper.js

@@ -25,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: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup', `0 4px 24px ${theme.color.surface.darken(50).alpha(0.6).toString()}`)};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup')};
 `;
 const CalendarPaper = (props, ref) => {
     const { children } = props, restProps = __rest(props, ["children"]);

package/Calendar/CalendarWeekDayLabel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare const _default: React.NamedExoticComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
 export default _default;

package/Calendar/CalendarWeekRowButton.d.ts

@@ -6,7 +6,7 @@ export type CalendarWeekRowButtonProps = React.HTMLAttributes<HTMLButtonElement>
     readonly week: Week;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLButtonElement> & {
-    readonly isSelected?: boolean | undefined;
+    readonly isSelected?: boolean;
     readonly accentColor: string;
     readonly week: Week;
 } & React.RefAttributes<HTMLButtonElement>>;

package/Calendar/IconChevronDown.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_1 = require("react");

package/Calendar/index.d.ts

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { CalendarProps, CalendarRef } from './CalendarComponent';
 export * from './CalendarComponent';
 declare const _default: <IsRangeValue extends boolean | undefined = undefined>(props: CalendarProps<IsRangeValue> & {
-    ref?: React.Ref<CalendarRef<IsRangeValue>> | undefined;
+    ref?: React.Ref<CalendarRef<IsRangeValue>>;
 }) => React.ReactElement;
 export default _default;

package/Calendar/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };

package/Checkbox/CheckboxAsterisk.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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)

package/Checkbox/CheckboxBox.d.ts

@@ -13,10 +13,10 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttr
     /**
      * Shows the dash instead of the check mark (e.g. «select all» when only some items are selected)
      */
-    readonly indeterminate?: boolean | undefined;
+    readonly indeterminate?: boolean;
     /**
      * Paints the border with the error color
      */
-    readonly error?: boolean | undefined;
+    readonly error?: boolean;
 } & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/Checkbox/CheckboxBox.js

@@ -49,7 +49,7 @@ const Square = styled_1.default.span `
   display: flex;
   width: 100%;
   height: 100%;
-  border-width: 0.1em;
+  border-width: ${tokens_1.BORDER_WIDTH};
   border-style: solid;
   /* Scaled down: the square is small, the full radius would turn it into a circle */
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 0.6}em;

package/Checkbox/CheckboxContainer.d.ts

@@ -17,11 +17,11 @@ declare const _default: React.ForwardRefExoticComponent<React.LabelHTMLAttribute
      * Position of the label relative to the checkbox
      * Default: `end`
      */
-    readonly labelPosition?: CheckboxLabelPosition | undefined;
+    readonly labelPosition?: CheckboxLabelPosition;
     /**
      * If `true` the checkbox state can not be changed
      * Default: false;
      */
-    readonly disabled?: boolean | undefined;
+    readonly disabled?: boolean;
 } & React.RefAttributes<HTMLLabelElement>>;
 export default _default;

package/Checkbox/CheckboxErrorText.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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)

package/Checkbox/index.d.ts

@@ -94,41 +94,41 @@ declare const _default: React.ForwardRefExoticComponent<Omit<CheckboxBoxProps, "
      * The state of the controlled checkbox. Pass it together with `onChange`
      * Default: undefined
      */
-    readonly checked?: boolean | undefined;
+    readonly checked?: boolean;
     /**
      * The initial state of the uncontrolled checkbox
      * Default: false
      */
-    readonly defaultChecked?: boolean | undefined;
+    readonly defaultChecked?: boolean;
     /**
      * Called when the user toggles the checkbox. The new value is `event.currentTarget.checked`
      */
-    readonly onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    readonly onChange?: React.ChangeEventHandler<HTMLInputElement>;
     /**
      * Shows the dash instead of the check mark, e.g. «select all» when only some items are selected.\
      * Only the look changes: `checked` keeps its value
      * Default: false
      */
-    readonly indeterminate?: boolean | undefined;
+    readonly indeterminate?: boolean;
     /**
      * If `true` the checkbox state can not be changed
      * Default: false
      */
-    readonly disabled?: boolean | undefined;
+    readonly disabled?: boolean;
     /**
      * You can pass the primary, default, secondary name of the colors or your specified color value
      * Default: `default`
      */
-    readonly color?: string | undefined;
+    readonly color?: "default" | "primary" | "secondary" | string;
     /**
      * Position of the label relative to the checkbox
      * Default: `end`
      */
-    readonly labelPosition?: CheckboxLabelPosition | undefined;
+    readonly labelPosition?: CheckboxLabelPosition;
     /**
      * If true then `errorText` value will be displayed under the checkbox
      */
-    readonly error?: boolean | undefined;
+    readonly error?: boolean;
     /**
      * Text or ReactNode to show in the error element.\
      * Will be displayed only if `error` property is true
@@ -138,7 +138,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<CheckboxBoxProps, "
      * If is true then the asterisk will be displayed in label\
      * If is ReactNode then ReactNode will be displayed in label
      */
-    readonly requiredAsterisk?: React.ReactNode;
-    readonly overrides?: CheckboxOverrides | undefined;
+    readonly requiredAsterisk?: boolean | React.ReactNode;
+    readonly overrides?: CheckboxOverrides;
 } & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/Checkbox/index.js

@@ -22,9 +22,8 @@ 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 _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 { 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 inputRef = react_1.default.useRef(null);
     const [internalChecked, setInternalChecked] = react_1.default.useState(Boolean(defaultChecked));
     const isControlled = typeof checked !== 'undefined';

package/Checkbox/useCheckboxColor.d.ts

@@ -2,5 +2,5 @@ import Color from '../Color';
 /**
  * Resolves the `color` property of the Checkbox to the Color instance
  */
-declare const useCheckboxColor: (color: 'default' | 'primary' | 'secondary' | string | undefined) => Color;
+declare const useCheckboxColor: (color: "default" | "primary" | "secondary" | string | undefined) => Color;
 export default useCheckboxColor;

package/ClickOutside/index.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mouseEventMap = void 0;
 const react_1 = __importDefault(require("react"));
+const getElementRef_1 = __importDefault(require("../utils/getElementRef"));
 exports.mouseEventMap = {
     onClick: 'click',
     onMouseDown: 'mousedown',
@@ -43,7 +44,7 @@ const ClickOutside = props => {
         };
     }, [onOutsideClick, mouseEvent]);
     // Keep the child's own ref working alongside ours
-    const childRef = children.ref;
+    const childRef = (0, getElementRef_1.default)(children);
     const setRef = react_1.default.useCallback((el) => {
         ref.current = el;
         if (typeof childRef === 'function') {
@@ -53,6 +54,8 @@ const ClickOutside = props => {
             childRef.current = el;
         }
     }, [childRef]);
-    return react_1.default.createElement(react_1.default.Fragment, null, react_1.default.cloneElement(children, { ref: setRef }));
+    return (react_1.default.createElement(react_1.default.Fragment, null, react_1.default.cloneElement(children, {
+        ref: setRef,
+    })));
 };
 exports.default = ClickOutside;

package/DatePicker/index.d.ts

@@ -97,7 +97,7 @@ export type DatePickerProps = Omit<TextFieldProps, 'value' | 'onChange' | 'overr
     /**
      * Custom footer elements
      */
-    readonly footer?: JSX.Element;
+    readonly footer?: React.JSX.Element;
     /**
      * Overridable components map
      */

package/ErrorBoundary/RenderError.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/ErrorBoundary/index.d.ts

@@ -23,6 +23,6 @@ export type ErrorBoundaryProps = {
 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;
+    render(): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 }
 export default ErrorBoundary;

package/Grid/index.d.ts

@@ -28,6 +28,12 @@ export type GridProps = React.HTMLAttributes<HTMLDivElement> & {
      * **Default:** `stretch`
      */
     readonly align?: React.CSSProperties['alignItems'];
+    /**
+     * The element of the grid: `ul`, `ol`, `dl`, `nav`, `section` and others.
+     * The lists lose the default margins and markers\
+     * **Default:** `div`
+     */
+    readonly as?: React.ElementType;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /**
@@ -35,26 +41,32 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * On a narrow screen the columns become one column by themselves, without breakpoints.\
      * Wins over `columns`
      */
-    readonly minColumnWidth?: string | undefined;
+    readonly minColumnWidth?: string;
     /**
      * A number — that many equal columns, a string — the `grid-template-columns` value
      * (e.g. `'2fr 1fr'` or `'auto 1fr'`)\
      * **Default:** `1`
      */
-    readonly columns?: string | number | undefined;
+    readonly columns?: number | string;
     /**
      * The gap between the cells: a step of the theme spacing scale or any CSS length\
      * **Default:** `md`
      */
-    readonly gap?: Spacing | undefined;
+    readonly gap?: Spacing;
     /**
      * The gap between the rows, if it differs from `gap`
      */
-    readonly rowGap?: Spacing | undefined;
+    readonly rowGap?: Spacing;
     /**
      * The vertical alignment of the cells in a row (`align-items`)\
      * **Default:** `stretch`
      */
-    readonly align?: import("csstype").Property.AlignItems | undefined;
+    readonly align?: React.CSSProperties["alignItems"];
+    /**
+     * The element of the grid: `ul`, `ol`, `dl`, `nav`, `section` and others.
+     * The lists lose the default margins and markers\
+     * **Default:** `div`
+     */
+    readonly as?: React.ElementType;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Grid/index.js

@@ -17,6 +17,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const spacing_1 = require("../utils/spacing");
+/**
+ * The lists are the rows of the elements here: no default margins and markers
+ */
+const LIST_TAGS = ['ul', 'ol', 'dl'];
 const StyledGrid = styled_1.default.div `
   display: grid;
   grid-template-columns: ${({ $template }) => $template};
@@ -24,6 +28,7 @@ const StyledGrid = styled_1.default.div `
   ${({ theme, $rowGap }) => typeof $rowGap !== 'undefined' ? `row-gap: ${(0, spacing_1.resolveSpacing)(theme, $rowGap)};` : ''}
   align-items: ${({ $align }) => $align !== null && $align !== void 0 ? $align : 'stretch'};
   min-width: 0;
+  ${({ $isList }) => ($isList ? 'margin: 0; padding: 0; list-style: none;' : '')}
 `;
 const getTemplate = (minColumnWidth, columns) => {
     if (minColumnWidth) {
@@ -37,7 +42,7 @@ const getTemplate = (minColumnWidth, columns) => {
  * The grid of cells with the same gap. The children are the cells: no wrappers for the items
  */
 const Grid = (props, ref) => {
-    const { children, minColumnWidth, columns = 1, gap = 'md', rowGap, align } = props, nativeProps = __rest(props, ["children", "minColumnWidth", "columns", "gap", "rowGap", "align"]);
-    return (react_1.default.createElement(StyledGrid, Object.assign({}, nativeProps, { "$template": getTemplate(minColumnWidth, columns), "$gap": gap, "$rowGap": rowGap, "$align": align, ref: ref }), children));
+    const { children, minColumnWidth, columns = 1, gap = 'md', rowGap, align, as } = props, nativeProps = __rest(props, ["children", "minColumnWidth", "columns", "gap", "rowGap", "align", "as"]);
+    return (react_1.default.createElement(StyledGrid, Object.assign({}, nativeProps, { "$template": getTemplate(minColumnWidth, columns), "$gap": gap, "$rowGap": rowGap, "$align": align, "$isList": Boolean(as && LIST_TAGS.includes(as)), as: as, ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(Grid);

package/Highlighted/index.js

@@ -20,14 +20,13 @@ 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 _a = (0, useThemeProps_1.default)('Highlighted', props), { text, highlight, overrides, disabledHighlighting = false, caseSensitive = false } = _a, nativeProps = __rest(_a, ["text", "highlight", "overrides", "disabledHighlighting", "caseSensitive"]);
+    const { text, highlight, overrides, disabledHighlighting = false, caseSensitive = false } = props, nativeProps = __rest(props, ["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,