@sima-land/ui-nucleons 42.1.0 → 43.0.1

package/_internal/custom-scrollbar/custom-scrollbar.module.scss

@@ -10,10 +10,10 @@ $track-bound: 16px;
 
 .custom-scrollbar :global(.os-scrollbar-handle) {
   border-radius: 2px !important;
-  background: colors.$gray12 !important;
+  background: colors.$basic-gray12 !important;
   &:hover,
   &:global(.active) {
-    background: colors.$gray24 !important;
+    background: colors.$basic-gray24 !important;
   }
 }
 

package/alert/alert.module.scss

@@ -13,7 +13,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: transparentize(colors.$gray87, 0.76);
+  background: transparentize(colors.$basic-gray87, 0.76);
 }
 
 .alert {

package/arrow-button/arrow-button.module.scss

@@ -13,12 +13,12 @@
   outline: 0;
   box-sizing: border-box;
   transition: box-shadow 200ms ease-out;
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
   &:not(:disabled):hover {
     cursor: pointer;
   }
   &:disabled {
-    color: colors.$gray24;
+    color: colors.$basic-gray24;
   }
   &.size-s {
     width: 32px;

package/autocomplete/index.js

@@ -66,15 +66,13 @@ const Autocomplete = (_a) => {
     const rootRef = (0, react_1.useRef)(null);
     const fieldRef = (0, react_1.useRef)();
     const menuRef = (0, react_1.useRef)();
-    const [needDropdown, toggleDropdown] = (0, react_1.useState)(false);
+    const [withMenu, toggleMenu] = (0, react_1.useState)(false);
     const [realValue, setRealValue] = (0, react_1.useState)(value || defaultValue);
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
-    const canShowDropdown = preset === 'filled-only-list'
-        ? needDropdown && realValue && realValue.length > 0
-        : needDropdown;
-    const endAdornment = preset === 'default' ? react_1.default.createElement(down_1.default, { fill: colors_1.COLORS.get('gray38') }) : undefined;
+    const canShowDropdown = preset === 'filled-only-list' ? withMenu && realValue && realValue.length > 0 : withMenu;
+    const endAdornment = preset === 'default' ? react_1.default.createElement(down_1.default, { fill: colors_1.COLORS.get('basic-gray38') }) : undefined;
     (0, hooks_1.useOutsideClick)(rootRef, () => {
-        toggleDropdown(false);
+        toggleMenu(false);
     });
     (0, react_1.useEffect)(() => {
         setRealValue(value);
@@ -88,7 +86,7 @@ const Autocomplete = (_a) => {
         const osInstance = (_a = osComponentRef.current) === null || _a === void 0 ? void 0 : _a.osInstance();
         if (menu && osInstance && activeIndex !== null) {
             const child = menu.querySelectorAll('[role="menuitem"]')[activeIndex];
-            child &&
+            child instanceof HTMLElement &&
                 osInstance.scroll({
                     el: child,
                     scroll: { y: 'ifneeded' },
@@ -96,11 +94,11 @@ const Autocomplete = (_a) => {
         }
     }, [activeIndex]);
     return (react_1.default.createElement("div", { ref: rootRef, style: style, className: cx('root', className), "data-testid": dataTestId },
-        react_1.default.createElement(text_field_1.TextField, Object.assign({}, restProps, { ref: fieldRef, focused: needDropdown, endAdornment: endAdornment, "data-testid": 'autocomplete:field', variant: 'desktop', value: value, multiline: false, onClick: e => {
-                toggleDropdown(true);
+        react_1.default.createElement(text_field_1.TextField, Object.assign({}, restProps, { ref: fieldRef, focused: withMenu, endAdornment: endAdornment, "data-testid": 'autocomplete:field', variant: 'desktop', value: value, multiline: false, onClick: e => {
+                toggleMenu(true);
                 onClick && onClick(e);
             }, onChange: (e) => {
-                toggleDropdown(true);
+                toggleMenu(true);
                 setRealValue(e.target.value);
                 setActiveIndex(0);
                 onChange && onChange(e);
@@ -117,7 +115,7 @@ const Autocomplete = (_a) => {
                     case 'Enter':
                         if (items && !(0, lodash_1.isNull)(activeIndex) && items.length > activeIndex) {
                             onSelect && onSelect(items[activeIndex]);
-                            toggleDropdown(false);
+                            toggleMenu(false);
                         }
                         break;
                 }
@@ -127,7 +125,7 @@ const Autocomplete = (_a) => {
         canShowDropdown && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'autocomplete:menu', className: cx('menu'), role: 'menu', customScrollbarProps: { osComponentRef } }), loading ? (react_1.default.createElement(dropdown_loading_1.DropdownLoading, { "data-testid": 'autocomplete:loading-area' })) : (react_1.default.createElement(react_1.default.Fragment, null, items && items.length > 0 ? (items.map((item, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: itemSize, key: index, role: 'menuitem', checked: index === activeIndex, onClick: () => {
                 onSelect && onSelect(item);
                 setActiveIndex(null);
-                toggleDropdown(false);
+                toggleMenu(false);
                 fieldRef.current && fieldRef.current.focus();
             } }, renderItem(item))))) : (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: 'm', noHover: true }, "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E"))))))));
 };

package/avatar/index.js

@@ -46,7 +46,7 @@ const ICON_SIZES = {
  * @param props Свойства компонента.
  * @return Элемент.
  */
-const Avatar = ({ size: sizeProp = 72, imageUrl, bgColor = 'gray4', bgOpacity = 1, textColor = 'gray87', title, monogram = (0, utils_1.getMonogram)(title), className, style, 'data-testid': testId = 'avatar', }) => {
+const Avatar = ({ size: sizeProp = 72, imageUrl, bgColor = 'basic-gray4', bgOpacity = 1, textColor = 'basic-gray87', title, monogram = (0, utils_1.getMonogram)(title), className, style, 'data-testid': testId = 'avatar', }) => {
     const [needImage, toggleImage] = (0, react_1.useState)(Boolean(imageUrl));
     (0, react_1.useEffect)(() => {
         toggleImage(Boolean(imageUrl));

package/avatar/user.js

@@ -28,13 +28,12 @@ const COLORS = [
     'additional-red',
     'additional-teal',
     'additional-green',
-    'additional-grass',
     'additional-light-green',
     'additional-amber',
     'additional-purple',
     'additional-violet',
     'additional-deep-purple',
-    'additional-blue',
+    'additional-electric-blue',
     'additional-light-blue',
     'additional-cyan',
     'additional-blue-gray',
@@ -53,6 +52,6 @@ const UserAvatar = (props) => {
         window[exports.colorKey] = window[exports.colorKey] || (0, lodash_1.sample)(COLORS);
         setColor(window[exports.colorKey]);
     }, []);
-    return react_1.default.createElement(_1.Avatar, Object.assign({}, props, { bgColor: color, bgOpacity: color ? 0.48 : 0, textColor: 'white' }));
+    return react_1.default.createElement(_1.Avatar, Object.assign({}, props, { bgColor: color, bgOpacity: color ? 0.48 : 0, textColor: 'basic-white' }));
 };
 exports.UserAvatar = UserAvatar;

package/box/index.d.ts

@@ -60,30 +60,6 @@ export interface BoxProps {
 /**
  * Компонент блока, реализующего оформление в соответствии с дизайн-системой.
  * @param props Свойства.
- * @param props.alignItems Значение свойства "alignItems".
- * @param props.children Содержимое блока.
- * @param props.color Название цвета из дизайн-системы.
- * @param props.dangerouslySetInlineStyle Объект для указания inline-стилей.
- * @param props.direction Значение css-свойства "direction".
- * @param props.display Значение css-свойства "display".
- * @param props.element Элемент, который будет использован как блок.
- * @param props.flex Формирует значение css-свойства "flex".
- * @param props.justifyContent Значение свойства "justifyContent".
- * @param props.margin Внешние отступы.
- * @param props.marginBottom Внешний отступ снизу.
- * @param props.marginLeft Внешний отступ слева.
- * @param props.marginRight Внешний отступ справа.
- * @param props.marginTop Внешний отступ сверху.
- * @param props.marginX Внешний отступ по вертикали.
- * @param props.marginY Внешний отступ по горизонтали.
- * @param props.padding Внутренние отступы.
- * @param props.paddingBottom Внутренний отступ снизу.
- * @param props.paddingLeft Внутренний отступ слева.
- * @param props.paddingRight Внутренний отступ справа.
- * @param props.paddingTop Внутренний отступ сверху.
- * @param props.paddingX Внутренний отступ по вертикали.
- * @param props.paddingY Внутренний отступ по горизонтали.
- * @param props.wrap Формирует значение css-свойства "flex-wrap".
  * @return Элемент.
  */
 export declare const Box: ({ element: Container, children, display, flex, wrap, direction, alignItems, justifyContent, dangerouslySetInlineStyle, margin, marginTop, marginRight, marginBottom, marginLeft, marginX, marginY, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingX, paddingY, color, }: BoxProps) => JSX.Element;

package/box/index.js

@@ -32,22 +32,18 @@ const colors_2 = require("../colors");
 const cx = bind_1.default.bind(box_module_scss_1.default);
 /**
  * Возможные значения свойства "display".
- * @enum {string}
  */
 const DISPLAY = new Set(['block', 'none', 'flex', 'inline', 'inline-block']);
 /**
  * Возможные значения свойства "flex".
- * @enum {string}
  */
 const FLEX = new Set(['shrink', 'grow', 'none']);
 /**
  * Возможные значения свойства "direction".
- * @enum {string}
  */
 const DIRECTION = new Set(['row', 'column']);
 /**
  * Возможные значения свойства "alignItems".
- * @enum {string}
  */
 const ALIGN_ITEMS = new Set(['start', 'end', 'center', 'baseline', 'stretch']);
 /**
@@ -57,30 +53,6 @@ const JUSTIFY_CONTENT = new Set(['start', 'end', 'center', 'between', 'around'])
 /**
  * Компонент блока, реализующего оформление в соответствии с дизайн-системой.
  * @param props Свойства.
- * @param props.alignItems Значение свойства "alignItems".
- * @param props.children Содержимое блока.
- * @param props.color Название цвета из дизайн-системы.
- * @param props.dangerouslySetInlineStyle Объект для указания inline-стилей.
- * @param props.direction Значение css-свойства "direction".
- * @param props.display Значение css-свойства "display".
- * @param props.element Элемент, который будет использован как блок.
- * @param props.flex Формирует значение css-свойства "flex".
- * @param props.justifyContent Значение свойства "justifyContent".
- * @param props.margin Внешние отступы.
- * @param props.marginBottom Внешний отступ снизу.
- * @param props.marginLeft Внешний отступ слева.
- * @param props.marginRight Внешний отступ справа.
- * @param props.marginTop Внешний отступ сверху.
- * @param props.marginX Внешний отступ по вертикали.
- * @param props.marginY Внешний отступ по горизонтали.
- * @param props.padding Внутренние отступы.
- * @param props.paddingBottom Внутренний отступ снизу.
- * @param props.paddingLeft Внутренний отступ слева.
- * @param props.paddingRight Внутренний отступ справа.
- * @param props.paddingTop Внутренний отступ сверху.
- * @param props.paddingX Внутренний отступ по вертикали.
- * @param props.paddingY Внутренний отступ по горизонтали.
- * @param props.wrap Формирует значение css-свойства "flex-wrap".
  * @return Элемент.
  */
 const Box = ({ element: Container = 'div', children, display, flex, wrap, direction, alignItems, justifyContent, dangerouslySetInlineStyle, 

package/button/button.module.scss

@@ -19,8 +19,8 @@
     border: 0;
   }
   &:disabled {
-    color: colors.$gray24;
-    background-color: colors.$gray8;
+    color: colors.$basic-gray24;
+    background-color: colors.$basic-gray8;
   }
 }
 
@@ -80,7 +80,7 @@
 
 // action types
 .button-primary {
-  background-color: colors.$brand-blue;
+  background-color: colors.$basic-blue;
   color: #fff;
   &:hover:not(:disabled) {
     cursor: pointer;
@@ -89,10 +89,10 @@
 }
 
 .button-secondary {
-  background-color: colors.$gray8;
-  color: colors.$gray87;
+  background-color: colors.$basic-gray8;
+  color: colors.$basic-gray87;
   &:hover:not(:disabled) {
     cursor: pointer;
-    background-color: colors.$gray12;
+    background-color: colors.$basic-gray12;
   }
 }

package/carousel/index.d.ts

@@ -49,6 +49,9 @@ interface ControlData {
     type: 'forward' | 'backward';
     vertical?: boolean;
 }
+interface ElementPredicate {
+    (sibling: Element): boolean;
+}
 /**
  * Карусель.
  */
@@ -96,8 +99,8 @@ export declare class Carousel extends Component<CarouselProps, State> {
      */
     static makeFurthestSiblingChecker({ vertical, viewport, }: {
         vertical: boolean;
-        viewport: DOMRect;
-    }): (sibling: Element) => boolean;
+        viewport?: DOMRect | null;
+    }): ElementPredicate;
     /**
      * Возвращает функцию для поиска наиболее близкого элемента карусели к viewport'у.
      * @param data Данные.
@@ -109,8 +112,8 @@ export declare class Carousel extends Component<CarouselProps, State> {
     static makeNearestSiblingChecker({ viewport, vertical, backward, }: {
         backward: boolean;
         vertical: boolean;
-        viewport: DOMRect;
-    }): (sibling: Element) => boolean;
+        viewport?: DOMRect | null;
+    }): ElementPredicate;
     /**
      * Геттер элемента списка.
      * @return Элемент списка или null.
@@ -272,10 +275,7 @@ export declare class Carousel extends Component<CarouselProps, State> {
      * @param dragEvent.offset Смещение.
      * @param dragEvent.client Позиция.
      */
-    saveDragStartData({ offset, client }: {
-        offset: IPoint;
-        client: IPoint;
-    }): void;
+    saveDragStartData({ offset, client }: DraggableEvent): void;
     /**
      * Сохраняет в состоянии смещение карусели.
      * @param newOffset Смещение.
@@ -289,10 +289,7 @@ export declare class Carousel extends Component<CarouselProps, State> {
      * @param draggableControls Функции управления Draggable.
      */
     takeDragControl({ isGrabbed, setOffset, toggleTransition }: Control): void;
-    /**
-     * Рендер.
-     * @inheritDoc
-     */
+    /** @inheritdoc */
     render(): JSX.Element;
     /**
      * Формирует список элементов карусели с учетом необходимости клонирования.

package/carousel/index.js

@@ -106,9 +106,14 @@ class Carousel extends react_1.Component {
      * @return Функция для поиска наиболее отдаленного элемента.
      */
     static makeFurthestSiblingChecker({ vertical, viewport, }) {
-        return vertical
-            ? (sibling) => (0, bounds_of_1.default)(sibling).top >= viewport.top
-            : (sibling) => (0, bounds_of_1.default)(sibling).left >= viewport.left;
+        // eslint-disable-next-line require-jsdoc
+        let checker = () => false;
+        if (viewport) {
+            checker = vertical
+                ? (sibling) => (0, bounds_of_1.default)(sibling).top >= viewport.top
+                : (sibling) => (0, bounds_of_1.default)(sibling).left >= viewport.left;
+        }
+        return checker;
     }
     /**
      * Возвращает функцию для поиска наиболее близкого элемента карусели к viewport'у.
@@ -121,9 +126,14 @@ class Carousel extends react_1.Component {
     static makeNearestSiblingChecker({ viewport, vertical, backward, }) {
         const verticalBoundKey = backward ? 'bottom' : 'top';
         const horizontalBoundKey = backward ? 'right' : 'left';
-        return vertical
-            ? (sibling) => viewport.top < (0, bounds_of_1.default)(sibling)[verticalBoundKey]
-            : (sibling) => viewport.left < (0, bounds_of_1.default)(sibling)[horizontalBoundKey];
+        // eslint-disable-next-line require-jsdoc
+        let checker = () => false;
+        if (viewport) {
+            checker = vertical
+                ? (sibling) => viewport.top < (0, bounds_of_1.default)(sibling)[verticalBoundKey]
+                : (sibling) => viewport.left < (0, bounds_of_1.default)(sibling)[horizontalBoundKey];
+        }
+        return checker;
     }
     /**
      * Геттер элемента списка.
@@ -240,12 +250,13 @@ class Carousel extends react_1.Component {
      * @param step На сколько элементов надо прокрутить карусель.
      */
     moveForwardFinite(step) {
+        var _a, _b;
         const { currentIndex } = this;
         const newIndex = currentIndex + step;
         this.toggleDragTransition(true);
-        this.setCurrentIndex(newIndex < (0, lodash_1.size)(this.listElement.children)
+        this.setCurrentIndex(newIndex < (0, lodash_1.size)((_a = this.listElement) === null || _a === void 0 ? void 0 : _a.children)
             ? newIndex
-            : (0, max_index_of_1.default)(this.listElement.children));
+            : (0, max_index_of_1.default)((_b = this.listElement) === null || _b === void 0 ? void 0 : _b.children));
     }
     /**
      * По возможности выполняет прокрутку карусели назад.
@@ -285,9 +296,11 @@ class Carousel extends react_1.Component {
         const { currentOffset } = this.state;
         const { items, vertical } = this.props;
         const realItemsCount = (0, lodash_1.size)(items);
-        if ((forward && currentIndex >= realItemsCount) ||
-            (!forward && currentIndex < realItemsCount)) {
-            const itemsSize = this.listElement[vertical ? 'scrollHeight' : 'scrollWidth'] / CLONE_FACTOR;
+        const listEl = this.listElement;
+        const needMoveForward = forward && currentIndex >= realItemsCount;
+        const needMoveBackward = !forward && currentIndex < realItemsCount;
+        if (listEl && (needMoveForward || needMoveBackward)) {
+            const itemsSize = listEl[vertical ? 'scrollHeight' : 'scrollWidth'] / CLONE_FACTOR;
             const newOffset = currentOffset + (forward ? itemsSize : -itemsSize);
             const newIndex = currentIndex + (forward ? -realItemsCount : realItemsCount);
             this.setCurrentOffset(newOffset, { withStateUpdate: false });
@@ -324,28 +337,32 @@ class Carousel extends react_1.Component {
      * @param dragEvent Событие.
      */
     correctInfiniteOffset(dragEvent) {
+        var _a, _b;
         const { vertical } = this.props;
         const { offset, client } = dragEvent;
         const { dragStartClient } = this;
         const { forward, backward } = this.defineDirection(dragStartClient, client);
         const viewport = this.getViewport();
-        const offsetValue = offset[vertical ? 'y' : 'x'];
-        const lastItem = this.listElement.lastElementChild;
-        const lastItemStartBound = (0, bounds_of_1.default)(lastItem)[vertical ? 'top' : 'left'];
-        const viewportStartBound = viewport[vertical ? 'top' : 'left'];
-        const viewportEndBound = viewport[vertical ? 'bottom' : 'right'];
-        const itemsSize = this.listElement[vertical ? 'scrollHeight' : 'scrollWidth'] / CLONE_FACTOR;
-        if (forward && lastItemStartBound < viewportEndBound) {
-            const newOffset = offsetValue + itemsSize;
-            dragEvent.preventDefault();
-            this.setCurrentOffset(newOffset, { withStateUpdate: false });
-            this.saveDragStartData(dragEvent);
-        }
-        else if (backward && viewportStartBound < this.findRealItemsStartBound()) {
-            const newOffset = offsetValue - itemsSize;
-            dragEvent.preventDefault();
-            this.setCurrentOffset(newOffset, { withStateUpdate: false });
-            this.saveDragStartData(dragEvent);
+        const listEl = this.listElement;
+        const lastItem = (_a = this.listElement) === null || _a === void 0 ? void 0 : _a.lastElementChild;
+        if (viewport && listEl && lastItem) {
+            const offsetValue = offset[vertical ? 'y' : 'x'];
+            const lastItemStartBound = (_b = (0, bounds_of_1.default)(lastItem)) === null || _b === void 0 ? void 0 : _b[vertical ? 'top' : 'left'];
+            const viewportStartBound = viewport[vertical ? 'top' : 'left'];
+            const viewportEndBound = viewport[vertical ? 'bottom' : 'right'];
+            const itemsSize = listEl[vertical ? 'scrollHeight' : 'scrollWidth'] / CLONE_FACTOR;
+            if (forward && lastItemStartBound < viewportEndBound) {
+                const newOffset = offsetValue + itemsSize;
+                dragEvent.preventDefault();
+                this.setCurrentOffset(newOffset, { withStateUpdate: false });
+                this.saveDragStartData(dragEvent);
+            }
+            else if (backward && viewportStartBound < this.findRealItemsStartBound()) {
+                const newOffset = offsetValue - itemsSize;
+                dragEvent.preventDefault();
+                this.setCurrentOffset(newOffset, { withStateUpdate: false });
+                this.saveDragStartData(dragEvent);
+            }
         }
     }
     /**
@@ -425,28 +442,30 @@ class Carousel extends react_1.Component {
      * @param options.needTransition Нужна ли плавная анимация прокрутки.
      */
     scrollToItem({ targetIndex = this.currentIndex, needTransition = true } = {}) {
-        const targetItemEl = this.listElement.children[targetIndex];
-        if (targetItemEl) {
+        var _a;
+        const listEl = this.listElement;
+        const viewport = this.getViewport();
+        const targetItemEl = (_a = this.listElement) === null || _a === void 0 ? void 0 : _a.children[targetIndex];
+        if (viewport && listEl && targetItemEl) {
             this.toggleDragTransition(needTransition);
             if (this.isAllItemsVisible()) {
                 this.setCurrentOffset(0);
             }
             else {
                 const { vertical } = this.props;
-                const viewport = this.getViewport();
                 const targetItemPos = (0, get_relative_pos_1.default)(targetItemEl);
                 const viewportEndBound = vertical ? viewport.bottom : viewport.right;
                 const nextItemsEndBound = vertical
-                    ? viewport.top + this.listElement.scrollHeight - targetItemPos.y
-                    : viewport.left + this.listElement.scrollWidth - targetItemPos.x;
+                    ? viewport.top + listEl.scrollHeight - targetItemPos.y
+                    : viewport.left + listEl.scrollWidth - targetItemPos.x;
                 if (nextItemsEndBound >= viewportEndBound) {
                     const itemBound = vertical ? targetItemPos.y : targetItemPos.x;
                     this.setCurrentOffset(-itemBound);
                 }
                 else {
                     const maxItemsEndBound = vertical
-                        ? viewport.top + this.listElement.scrollHeight
-                        : viewport.left + this.listElement.scrollWidth;
+                        ? viewport.top + listEl.scrollHeight
+                        : viewport.left + listEl.scrollWidth;
                     this.setCurrentOffset(viewportEndBound - maxItemsEndBound);
                 }
             }
@@ -467,13 +486,14 @@ class Carousel extends react_1.Component {
      */
     defineMinOffset() {
         const { vertical } = this.props;
+        const viewport = this.getViewport();
+        const listEl = this.listElement;
         let minOffset = NaN;
-        if (this.listElement) {
-            const viewport = this.getViewport();
+        if (viewport && listEl) {
             const viewportEndBound = vertical ? viewport.bottom : viewport.right;
             const maxItemsEndBound = vertical
-                ? viewport.top + this.listElement.scrollHeight
-                : viewport.left + this.listElement.scrollWidth;
+                ? viewport.top + listEl.scrollHeight
+                : viewport.left + listEl.scrollWidth;
             minOffset = viewportEndBound - maxItemsEndBound;
         }
         return minOffset;
@@ -483,11 +503,12 @@ class Carousel extends react_1.Component {
      * @return Длина/ширина списка элементов.
      */
     getRealItemsSize() {
+        const listEl = this.listElement;
         let result = 0;
-        if (this.listElement) {
+        if (listEl) {
             const { items, vertical } = this.props;
-            const firstChild = this.listElement.children[0];
-            const lastChild = this.listElement.children[(0, lodash_1.size)(items) - 1];
+            const firstChild = listEl.children[0];
+            const lastChild = listEl.children[(0, lodash_1.size)(items) - 1];
             if (firstChild && lastChild) {
                 const startBound = (0, bounds_of_1.default)(firstChild)[vertical ? 'top' : 'left'];
                 const endBound = (0, bounds_of_1.default)(lastChild)[vertical ? 'bottom' : 'right'];
@@ -502,7 +523,8 @@ class Carousel extends react_1.Component {
      */
     getViewportSize() {
         const { vertical } = this.props;
-        return this.getViewport()[vertical ? 'height' : 'width'];
+        const viewport = this.getViewport();
+        return viewport ? viewport[vertical ? 'height' : 'width'] : 0;
     }
     /**
      * Возвращает данные прямоугольной области видимости карусели.
@@ -540,10 +562,7 @@ class Carousel extends react_1.Component {
         this.setDragOffset = setOffset;
         this.isGrabbed = isGrabbed;
     }
-    /**
-     * Рендер.
-     * @inheritDoc
-     */
+    /** @inheritdoc */
     render() {
         const { currentOffset, isAllItemsVisible } = this.state;
         const { autoplay, autoplayHoverPause, vertical, containerProps = {}, viewportElementProps = {}, withControls = 'auto', renderControl = Carousel.defaultRenderControl, controlProps, } = this.props;

package/checkbox-field/checkbox-field.module.scss

@@ -10,14 +10,14 @@
   .label {
     display: block;
     cursor: pointer;
-    color: colors.$gray87;
+    color: colors.$basic-gray87;
     font-size: 16px;
     line-height: 24px;
   }
   .info {
     display: block;
     cursor: pointer;
-    color: colors.$gray38;
+    color: colors.$basic-gray38;
     font-size: 14px;
     line-height: 20px;
   }
@@ -50,7 +50,7 @@
   &.disabled {
     .label,
     .info {
-      color: colors.$gray24;
+      color: colors.$basic-gray24;
     }
   }
 }

package/chips/chips.module.scss

@@ -20,8 +20,8 @@ $gutter: 8px;
   outline: 0;
   border: 0;
   padding: 0 12px;
-  background: colors.$gray8;
-  color: colors.$gray87;
+  background: colors.$basic-gray8;
+  color: colors.$basic-gray87;
   border-radius: 4px;
   box-sizing: border-box;
   font: inherit;
@@ -30,16 +30,16 @@ $gutter: 8px;
   line-height: 16px;
   text-decoration: none;
   &.checked {
-    background: colors.$gray76;
-    color: colors.$white;
+    background: colors.$basic-gray76;
+    color: colors.$basic-white;
   }
 
   // переопределяем стили монолита
   &,
   &:link,
   &:visited {
-    background: colors.$gray8;
-    color: colors.$gray87;
+    background: colors.$basic-gray8;
+    color: colors.$basic-gray87;
   }
 
   // эффект при наведении определяем **после** переопределения стилей монолита
@@ -48,14 +48,14 @@ $gutter: 8px;
   }
   &:hover,
   &:active {
-    background: colors.$gray12;
-    color: colors.$gray87;
+    background: colors.$basic-gray12;
+    color: colors.$basic-gray87;
   }
   &.checked {
     &:hover,
     &:active {
-      background: colors.$gray66;
-      color: colors.$white;
+      background: colors.$basic-gray66;
+      color: colors.$basic-white;
     }
   }
 }

package/clean-buttons/clean-buttons.module.scss

@@ -25,7 +25,7 @@
     flex-shrink: 1;
     flex-basis: 0;
     + .clean-button {
-      border-left: 1px solid colors.$gray12;
+      border-left: 1px solid colors.$basic-gray12;
     }
   }
 }