@alfalab/core-components 27.0.0 → 27.2.0

package/toast-plate/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ev3z */
+/* hash: 304ex */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -703,8 +703,10 @@
     --toast-plate-action-align: center;
     --toast-plate-action-padding: 0 var(--gap-2xl);
     --toast-plate-action-divider-display: block;
+    --toast-plate-content-with-closer-right-padding: var(--gap-m);
+    --toast-plate-close-button-align: center;
 }
-.toast-plate__component_s5z43 {
+.toast-plate__component_1s7lg {
     position: relative;
     display: inline-flex;
     flex-direction: column;
@@ -715,73 +717,75 @@
     padding: var(--gap-m);
     background-color: var(--toast-plate-bg-color)
 }
-.toast-plate__component_s5z43.toast-plate__hasCloser_s5z43 {
+.toast-plate__component_1s7lg.toast-plate__hasCloser_1s7lg {
         /* 2×16 + 24 */
         padding-right: 56px;
     }
-.toast-plate__contentWrap_s5z43 {
+.toast-plate__contentWrap_1s7lg {
     display: flex;
 }
-.toast-plate__block_s5z43 {
+.toast-plate__block_1s7lg {
     display: flex;
     width: 100%;
 }
-.toast-plate__content_s5z43 {
+.toast-plate__content_1s7lg {
     display: flex;
-    flex-grow: 1;
+    flex-grow: 1
 }
-.toast-plate__actionSection_s5z43 {
+.toast-plate__content_1s7lg.toast-plate__hasCloser_1s7lg:not(.toast-plate__hasActionButton_1s7lg) {
+        padding-right: var(--toast-plate-content-with-closer-right-padding);
+    }
+.toast-plate__actionSection_1s7lg {
     display: flex;
     align-items: var(--toast-plate-action-align);
     flex-shrink: 0;
     margin: var(--gap-3xs) 0;
     padding: var(--toast-plate-action-padding)
 }
-.toast-plate__actionSection_s5z43:last-child {
+.toast-plate__actionSection_1s7lg:last-child {
         padding-right: 0;
     }
-.toast-plate__leftAddons_s5z43 {
+.toast-plate__leftAddons_1s7lg {
     display: flex;
     align-items: flex-start;
     flex-shrink: 0;
     padding-right: var(--gap-s);
 }
-.toast-plate__title_s5z43 {
+.toast-plate__title_1s7lg {
     font-size: 16px;
     line-height: 24px;
     font-weight: 700;
 
     font-weight: var(--toast-plate-title-font-weight);
 }
-.toast-plate__children_s5z43 {
+.toast-plate__children_1s7lg {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 
     word-break: break-word;
 }
-.toast-plate__title_s5z43 + .toast-plate__children_s5z43 {
+.toast-plate__title_1s7lg + .toast-plate__children_1s7lg {
     margin-top: var(--gap-2xs);
 }
-.toast-plate__closeButton_s5z43 {
-    display: flex;
-    align-items: flex-start;
+.toast-plate__closeButtonWrapper_1s7lg {
     position: absolute;
-    top: var(--gap-s);
-    bottom: var(--gap-s);
-    right: var(--gap-s);
-    padding: var(--gap-2xs);
+    top: var(--gap-2xs);
+    bottom: var(--gap-2xs);
+    right: var(--gap-2xs)
 }
-.toast-plate__actionSection_s5z43 + .toast-plate__closeButton_s5z43 {
-    align-items: var(--toast-plate-action-align)
-}
-.toast-plate__actionSection_s5z43 + .toast-plate__closeButton_s5z43:before {
+.toast-plate__closeButtonWrapper_1s7lg:before {
         display: var(--toast-plate-action-divider-display);
         position: absolute;
-        right: 44px;
-        top: var(--gap-2xs);
-        bottom: var(--gap-2xs);
+        right: 51px;
+        top: var(--gap-s);
+        bottom: var(--gap-s);
         width: 1px;
-        background-color: var(--color-light-bg-tertiary-inverted);
+        background-color: var(--color-light-border-secondary-inverted);
         content: '';
     }
+.toast-plate__closeButton_1s7lg {
+    display: flex;
+    align-items: var(--toast-plate-close-button-align);
+    height: 100%;
+}

package/toast-plate/esm/index.js

@@ -1,6 +1,6 @@
 import 'react';
 import 'classnames';
-import '../../button/esm';
+import '../../icon-button/esm';
 import '../../badge/esm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CrossCircleMIcon';

package/toast-plate/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ev3z */
+/* hash: 304ex */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -703,8 +703,10 @@
     --toast-plate-action-align: center;
     --toast-plate-action-padding: 0 var(--gap-2xl);
     --toast-plate-action-divider-display: block;
+    --toast-plate-content-with-closer-right-padding: var(--gap-m);
+    --toast-plate-close-button-align: center;
 }
-.toast-plate__component_s5z43 {
+.toast-plate__component_1s7lg {
     position: relative;
     display: inline-flex;
     flex-direction: column;
@@ -715,73 +717,75 @@
     padding: var(--gap-m);
     background-color: var(--toast-plate-bg-color)
 }
-.toast-plate__component_s5z43.toast-plate__hasCloser_s5z43 {
+.toast-plate__component_1s7lg.toast-plate__hasCloser_1s7lg {
         /* 2×16 + 24 */
         padding-right: 56px;
     }
-.toast-plate__contentWrap_s5z43 {
+.toast-plate__contentWrap_1s7lg {
     display: flex;
 }
-.toast-plate__block_s5z43 {
+.toast-plate__block_1s7lg {
     display: flex;
     width: 100%;
 }
-.toast-plate__content_s5z43 {
+.toast-plate__content_1s7lg {
     display: flex;
-    flex-grow: 1;
+    flex-grow: 1
 }
-.toast-plate__actionSection_s5z43 {
+.toast-plate__content_1s7lg.toast-plate__hasCloser_1s7lg:not(.toast-plate__hasActionButton_1s7lg) {
+        padding-right: var(--toast-plate-content-with-closer-right-padding);
+    }
+.toast-plate__actionSection_1s7lg {
     display: flex;
     align-items: var(--toast-plate-action-align);
     flex-shrink: 0;
     margin: var(--gap-3xs) 0;
     padding: var(--toast-plate-action-padding)
 }
-.toast-plate__actionSection_s5z43:last-child {
+.toast-plate__actionSection_1s7lg:last-child {
         padding-right: 0;
     }
-.toast-plate__leftAddons_s5z43 {
+.toast-plate__leftAddons_1s7lg {
     display: flex;
     align-items: flex-start;
     flex-shrink: 0;
     padding-right: var(--gap-s);
 }
-.toast-plate__title_s5z43 {
+.toast-plate__title_1s7lg {
     font-size: 16px;
     line-height: 24px;
     font-weight: 700;
 
     font-weight: var(--toast-plate-title-font-weight);
 }
-.toast-plate__children_s5z43 {
+.toast-plate__children_1s7lg {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 
     word-break: break-word;
 }
-.toast-plate__title_s5z43 + .toast-plate__children_s5z43 {
+.toast-plate__title_1s7lg + .toast-plate__children_1s7lg {
     margin-top: var(--gap-2xs);
 }
-.toast-plate__closeButton_s5z43 {
-    display: flex;
-    align-items: flex-start;
+.toast-plate__closeButtonWrapper_1s7lg {
     position: absolute;
-    top: var(--gap-s);
-    bottom: var(--gap-s);
-    right: var(--gap-s);
-    padding: var(--gap-2xs);
+    top: var(--gap-2xs);
+    bottom: var(--gap-2xs);
+    right: var(--gap-2xs)
 }
-.toast-plate__actionSection_s5z43 + .toast-plate__closeButton_s5z43 {
-    align-items: var(--toast-plate-action-align)
-}
-.toast-plate__actionSection_s5z43 + .toast-plate__closeButton_s5z43:before {
+.toast-plate__closeButtonWrapper_1s7lg:before {
         display: var(--toast-plate-action-divider-display);
         position: absolute;
-        right: 44px;
-        top: var(--gap-2xs);
-        bottom: var(--gap-2xs);
+        right: 51px;
+        top: var(--gap-s);
+        bottom: var(--gap-s);
         width: 1px;
-        background-color: var(--color-light-bg-tertiary-inverted);
+        background-color: var(--color-light-border-secondary-inverted);
         content: '';
     }
+.toast-plate__closeButton_1s7lg {
+    display: flex;
+    align-items: var(--toast-plate-close-button-align);
+    height: 100%;
+}

package/toast-plate/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var component = require('./component.js');
 require('react');
 require('classnames');
-require('../button');
+require('../icon-button');
 require('../badge');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 require('@alfalab/icons-glyph/CrossCircleMIcon');

package/toast-plate/modern/component.d.ts

@@ -11,10 +11,18 @@ type ToastPlateProps = HTMLAttributes<HTMLDivElement> & {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительный класс для заголовка
+     */
+    titleClassName?: string;
     /**
      * Дополнительный класс для контентной области
      */
     contentClassName?: string;
+    /**
+     * Дополнительный класс для области с кнопкой действия
+     */
+    actionSectionClassName?: string;
     /**
      * Дочерние элементы
      */
@@ -61,10 +69,18 @@ declare const ToastPlate: React.ForwardRefExoticComponent<React.HTMLAttributes<H
      * Дополнительный класс
      */
     className?: string | undefined;
+    /**
+     * Дополнительный класс для заголовка
+     */
+    titleClassName?: string | undefined;
     /**
      * Дополнительный класс для контентной области
      */
     contentClassName?: string | undefined;
+    /**
+     * Дополнительный класс для области с кнопкой действия
+     */
+    actionSectionClassName?: string | undefined;
     /**
      * Дочерние элементы
      */
@@ -76,7 +92,7 @@ declare const ToastPlate: React.ForwardRefExoticComponent<React.HTMLAttributes<H
     /**
      * Вид бэйджа
      */
-    badge?: "positive" | "attention" | "negative" | undefined;
+    badge?: "negative" | "positive" | "attention" | undefined;
     /**
      * Слот слева, заменяет стандартную иконку
      */

package/toast-plate/modern/component.js

@@ -4,10 +4,10 @@ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon'
 import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon';
 import { AlertCircleMIcon } from '@alfalab/icons-glyph/AlertCircleMIcon';
 import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
-import { Button } from '../../button/modern';
+import { IconButton } from '../../icon-button/modern';
 import { Badge } from '../../badge/modern';
 
-var styles = {"component":"toast-plate__component_s5z43","hasCloser":"toast-plate__hasCloser_s5z43","contentWrap":"toast-plate__contentWrap_s5z43","block":"toast-plate__block_s5z43","content":"toast-plate__content_s5z43","actionSection":"toast-plate__actionSection_s5z43","leftAddons":"toast-plate__leftAddons_s5z43","title":"toast-plate__title_s5z43","children":"toast-plate__children_s5z43","closeButton":"toast-plate__closeButton_s5z43"};
+var styles = {"component":"toast-plate__component_1s7lg","hasCloser":"toast-plate__hasCloser_1s7lg","contentWrap":"toast-plate__contentWrap_1s7lg","block":"toast-plate__block_1s7lg","content":"toast-plate__content_1s7lg","hasActionButton":"toast-plate__hasActionButton_1s7lg","actionSection":"toast-plate__actionSection_1s7lg","leftAddons":"toast-plate__leftAddons_1s7lg","title":"toast-plate__title_1s7lg","children":"toast-plate__children_1s7lg","closeButtonWrapper":"toast-plate__closeButtonWrapper_1s7lg","closeButton":"toast-plate__closeButton_1s7lg"};
 require('./index.css');
 
 const iconDefaultComponents = {
@@ -15,7 +15,7 @@ const iconDefaultComponents = {
     positive: React.createElement(CheckmarkCircleMIcon, { className: styles.badgeIcon }),
     attention: React.createElement(AlertCircleMIcon, { className: styles.badgeIcon }),
 };
-const ToastPlate = forwardRef(({ dataTestId, className, contentClassName, hasCloser, leftAddons, badge, title, children, actionButton, block, onClose, getBadgeIcons, ...restProps }, ref) => {
+const ToastPlate = forwardRef(({ dataTestId, className, titleClassName, contentClassName, actionSectionClassName, hasCloser, leftAddons, badge, title, children, actionButton, block, onClose, getBadgeIcons, ...restProps }, ref) => {
     const needRenderLeftAddons = Boolean(leftAddons || badge);
     const iconComponents = getBadgeIcons
         ? getBadgeIcons(iconDefaultComponents)
@@ -27,15 +27,19 @@ const ToastPlate = forwardRef(({ dataTestId, className, contentClassName, hasClo
     }, [onClose]);
     return (React.createElement("div", Object.assign({ className: cn(styles.component, { [styles.block]: block, [styles.hasCloser]: hasCloser }, className), ref: ref, "data-test-id": dataTestId }, restProps),
         React.createElement("div", { className: styles.contentWrap },
-            React.createElement("div", { className: cn(contentClassName, styles.content) },
+            React.createElement("div", { className: cn(contentClassName, styles.content, {
+                    [styles.hasCloser]: hasCloser,
+                    [styles.hasActionButton]: !!actionButton,
+                }) },
                 needRenderLeftAddons && (React.createElement("div", { className: styles.leftAddons }, leftAddons || (React.createElement(Badge, { view: 'icon', content: badge && iconComponents[badge], iconColor: badge, className: styles.badge, dataTestId: 'badge' })))),
                 React.createElement("div", null,
-                    title && React.createElement("div", { className: styles.title }, title),
+                    title && (React.createElement("div", { className: cn(titleClassName, styles.title) }, title)),
                     children && React.createElement("div", { className: styles.children }, children))),
-            actionButton && (React.createElement("div", { className: cn(styles.actionSection, {
+            actionButton && (React.createElement("div", { className: cn(actionSectionClassName, styles.actionSection, {
                     [styles.hasCloser]: hasCloser,
                 }) }, actionButton)),
-            hasCloser && (React.createElement(Button, { colors: 'inverted', className: cn(styles.closeButton), view: 'ghost', onClick: handleClose, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', leftAddons: React.createElement(CrossMIcon, null) })))));
+            hasCloser && (React.createElement("div", { className: styles.closeButtonWrapper },
+                React.createElement(IconButton, { icon: CrossMIcon, colors: 'inverted', className: cn(styles.closeButton), onClick: handleClose, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C' }))))));
 });
 
 export { ToastPlate };

package/toast-plate/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ev3z */
+/* hash: 304ex */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -703,8 +703,10 @@
     --toast-plate-action-align: center;
     --toast-plate-action-padding: 0 var(--gap-2xl);
     --toast-plate-action-divider-display: block;
+    --toast-plate-content-with-closer-right-padding: var(--gap-m);
+    --toast-plate-close-button-align: center;
 }
-.toast-plate__component_s5z43 {
+.toast-plate__component_1s7lg {
     position: relative;
     display: inline-flex;
     flex-direction: column;
@@ -715,73 +717,75 @@
     padding: var(--gap-m);
     background-color: var(--toast-plate-bg-color)
 }
-.toast-plate__component_s5z43.toast-plate__hasCloser_s5z43 {
+.toast-plate__component_1s7lg.toast-plate__hasCloser_1s7lg {
         /* 2×16 + 24 */
         padding-right: 56px;
     }
-.toast-plate__contentWrap_s5z43 {
+.toast-plate__contentWrap_1s7lg {
     display: flex;
 }
-.toast-plate__block_s5z43 {
+.toast-plate__block_1s7lg {
     display: flex;
     width: 100%;
 }
-.toast-plate__content_s5z43 {
+.toast-plate__content_1s7lg {
     display: flex;
-    flex-grow: 1;
+    flex-grow: 1
 }
-.toast-plate__actionSection_s5z43 {
+.toast-plate__content_1s7lg.toast-plate__hasCloser_1s7lg:not(.toast-plate__hasActionButton_1s7lg) {
+        padding-right: var(--toast-plate-content-with-closer-right-padding);
+    }
+.toast-plate__actionSection_1s7lg {
     display: flex;
     align-items: var(--toast-plate-action-align);
     flex-shrink: 0;
     margin: var(--gap-3xs) 0;
     padding: var(--toast-plate-action-padding)
 }
-.toast-plate__actionSection_s5z43:last-child {
+.toast-plate__actionSection_1s7lg:last-child {
         padding-right: 0;
     }
-.toast-plate__leftAddons_s5z43 {
+.toast-plate__leftAddons_1s7lg {
     display: flex;
     align-items: flex-start;
     flex-shrink: 0;
     padding-right: var(--gap-s);
 }
-.toast-plate__title_s5z43 {
+.toast-plate__title_1s7lg {
     font-size: 16px;
     line-height: 24px;
     font-weight: 700;
 
     font-weight: var(--toast-plate-title-font-weight);
 }
-.toast-plate__children_s5z43 {
+.toast-plate__children_1s7lg {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 
     word-break: break-word;
 }
-.toast-plate__title_s5z43 + .toast-plate__children_s5z43 {
+.toast-plate__title_1s7lg + .toast-plate__children_1s7lg {
     margin-top: var(--gap-2xs);
 }
-.toast-plate__closeButton_s5z43 {
-    display: flex;
-    align-items: flex-start;
+.toast-plate__closeButtonWrapper_1s7lg {
     position: absolute;
-    top: var(--gap-s);
-    bottom: var(--gap-s);
-    right: var(--gap-s);
-    padding: var(--gap-2xs);
+    top: var(--gap-2xs);
+    bottom: var(--gap-2xs);
+    right: var(--gap-2xs)
 }
-.toast-plate__actionSection_s5z43 + .toast-plate__closeButton_s5z43 {
-    align-items: var(--toast-plate-action-align)
-}
-.toast-plate__actionSection_s5z43 + .toast-plate__closeButton_s5z43:before {
+.toast-plate__closeButtonWrapper_1s7lg:before {
         display: var(--toast-plate-action-divider-display);
         position: absolute;
-        right: 44px;
-        top: var(--gap-2xs);
-        bottom: var(--gap-2xs);
+        right: 51px;
+        top: var(--gap-s);
+        bottom: var(--gap-s);
         width: 1px;
-        background-color: var(--color-light-bg-tertiary-inverted);
+        background-color: var(--color-light-border-secondary-inverted);
         content: '';
     }
+.toast-plate__closeButton_1s7lg {
+    display: flex;
+    align-items: var(--toast-plate-close-button-align);
+    height: 100%;
+}

package/toast-plate/modern/index.js

@@ -4,6 +4,6 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
 import '@alfalab/icons-glyph/AlertCircleMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
-import '../../button/modern';
+import '../../icon-button/modern';
 import '../../badge/modern';
 export { ToastPlate } from './component.js';

package/tooltip/{Component-20b9e4b7.js → Component-10485199.js}

@@ -48,13 +48,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"tooltip__component_60a35","popper":"tooltip__popper_60a35","hint":"tooltip__hint_60a35","target":"tooltip__target_60a35","overlap":"tooltip__overlap_60a35"};
+var styles = {"component":"tooltip__component_1du8e","popper":"tooltip__popper_1du8e","hint":"tooltip__hint_1du8e","target":"tooltip__target_1du8e","overlap":"tooltip__overlap_1du8e"};
 require('./index.css');
 
-var defaultColors = {"hint":"tooltip__hint_1ndmz","arrow":"tooltip__arrow_1ndmz"};
+var defaultColors = {"hint":"tooltip__hint_u65xw","arrow":"tooltip__arrow_u65xw"};
 require('./default.css');
 
-var invertedColors = {"tooltip":"tooltip__tooltip_ej90g","arrow":"tooltip__arrow_ej90g","hint":"tooltip__hint_ej90g"};
+var invertedColors = {"tooltip":"tooltip__tooltip_aj5ap","arrow":"tooltip__arrow_aj5ap","hint":"tooltip__hint_aj5ap"};
 require('./inverted.css');
 
 var colorStyles = {

package/tooltip/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component = require('./Component-20b9e4b7.js');
+var Component = require('./Component-10485199.js');
 require('react');
 require('classnames');
 require('react-merge-refs');

package/tooltip/component.responsive.js

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component = require('./Component-20b9e4b7.js');
+var Component = require('./Component-10485199.js');
 var React = require('react');
-require('classnames');
+var cn = require('classnames');
 require('react-merge-refs');
 require('../popover');
 var hooks = require('@alfalab/hooks');
@@ -13,12 +13,13 @@ var utils = require('./utils.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"target":"tooltip__target_1bzm2","overlap":"tooltip__overlap_1bzm2"};
+var styles = {"target":"tooltip__target_5z6ml","overlap":"tooltip__overlap_5z6ml"};
 require('./responsive.css');
 
 var TooltipResponsive = function (_a) {
-    var _b = _a.defaultMatch, defaultMatch = _b === void 0 ? 'mobile' : _b, content = _a.content, children = _a.children, open = _a.open, onOpen = _a.onOpen, onClose = _a.onClose, _c = _a.actionButtonTitle, actionButtonTitle = _c === void 0 ? 'Понятно' : _c, hasCloser = _a.hasCloser, restProps = Component.__rest(_a, ["defaultMatch", "content", "children", "open", "onOpen", "onClose", "actionButtonTitle", "hasCloser"]);
+    var _b = _a.defaultMatch, defaultMatch = _b === void 0 ? 'mobile' : _b, content = _a.content, children = _a.children, open = _a.open, onOpen = _a.onOpen, onClose = _a.onClose, _c = _a.actionButtonTitle, actionButtonTitle = _c === void 0 ? 'Понятно' : _c, hasCloser = _a.hasCloser, targetRef = _a.targetRef, targetClassName = _a.targetClassName, restProps = Component.__rest(_a, ["defaultMatch", "content", "children", "open", "onOpen", "onClose", "actionButtonTitle", "hasCloser", "targetRef", "targetClassName"]);
     var view = hooks.useMedia([
         ['mobile', '(max-width: 767px)'],
         ['desktop', '(min-width: 768px)'],
@@ -43,9 +44,9 @@ var TooltipResponsive = function (_a) {
     var isMobile = view === 'mobile';
     return isMobile ? (React__default['default'].createElement(React.Fragment, null,
         React__default['default'].createElement(coreComponentsBottomSheet.BottomSheet, Component.__assign({}, restProps, { open: Boolean(openValue), onClose: handleClose, hasCloser: hasCloser, actionButton: React__default['default'].createElement(coreComponentsButton.Button, { view: 'secondary', block: true, size: 's', onClick: handleClose }, actionButtonTitle) }), content),
-        React__default['default'].createElement("div", { onClick: handleOpen, className: styles.target },
+        React__default['default'].createElement("div", { ref: targetRef, onClick: handleOpen, className: cn__default['default'](styles.target, targetClassName) },
             (children === null || children === void 0 ? void 0 : children.props.disabled) && React__default['default'].createElement("div", { className: styles.overlap }),
-            children))) : (React__default['default'].createElement(Component.Tooltip, Component.__assign({}, restProps, { content: content, onOpen: handleOpen }), children));
+            children))) : (React__default['default'].createElement(Component.Tooltip, Component.__assign({}, restProps, { content: content, onOpen: handleOpen, targetClassName: targetClassName, targetRef: targetRef }), children));
 };
 
 exports.TooltipResponsive = TooltipResponsive;

package/tooltip/cssm/component.responsive.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component-ef3b0e1c.js');
 var React = require('react');
-require('classnames');
+var cn = require('classnames');
 require('react-merge-refs');
 require('../../popover/cssm');
 require('./index.module.css');
@@ -17,10 +17,11 @@ var styles = require('./responsive.module.css');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var TooltipResponsive = function (_a) {
-    var _b = _a.defaultMatch, defaultMatch = _b === void 0 ? 'mobile' : _b, content = _a.content, children = _a.children, open = _a.open, onOpen = _a.onOpen, onClose = _a.onClose, _c = _a.actionButtonTitle, actionButtonTitle = _c === void 0 ? 'Понятно' : _c, hasCloser = _a.hasCloser, restProps = Component.__rest(_a, ["defaultMatch", "content", "children", "open", "onOpen", "onClose", "actionButtonTitle", "hasCloser"]);
+    var _b = _a.defaultMatch, defaultMatch = _b === void 0 ? 'mobile' : _b, content = _a.content, children = _a.children, open = _a.open, onOpen = _a.onOpen, onClose = _a.onClose, _c = _a.actionButtonTitle, actionButtonTitle = _c === void 0 ? 'Понятно' : _c, hasCloser = _a.hasCloser, targetRef = _a.targetRef, targetClassName = _a.targetClassName, restProps = Component.__rest(_a, ["defaultMatch", "content", "children", "open", "onOpen", "onClose", "actionButtonTitle", "hasCloser", "targetRef", "targetClassName"]);
     var view = hooks.useMedia([
         ['mobile', '(max-width: 767px)'],
         ['desktop', '(min-width: 768px)'],
@@ -45,9 +46,9 @@ var TooltipResponsive = function (_a) {
     var isMobile = view === 'mobile';
     return isMobile ? (React__default['default'].createElement(React.Fragment, null,
         React__default['default'].createElement(coreComponentsBottomSheet.BottomSheet, Component.__assign({}, restProps, { open: Boolean(openValue), onClose: handleClose, hasCloser: hasCloser, actionButton: React__default['default'].createElement(coreComponentsButton.Button, { view: 'secondary', block: true, size: 's', onClick: handleClose }, actionButtonTitle) }), content),
-        React__default['default'].createElement("div", { onClick: handleOpen, className: styles__default['default'].target },
+        React__default['default'].createElement("div", { ref: targetRef, onClick: handleOpen, className: cn__default['default'](styles__default['default'].target, targetClassName) },
             (children === null || children === void 0 ? void 0 : children.props.disabled) && React__default['default'].createElement("div", { className: styles__default['default'].overlap }),
-            children))) : (React__default['default'].createElement(Component.Tooltip, Component.__assign({}, restProps, { content: content, onOpen: handleOpen }), children));
+            children))) : (React__default['default'].createElement(Component.Tooltip, Component.__assign({}, restProps, { content: content, onOpen: handleOpen, targetClassName: targetClassName, targetRef: targetRef }), children));
 };
 
 exports.TooltipResponsive = TooltipResponsive;

package/tooltip/default.css

@@ -1,4 +1,4 @@
-/* hash: 4diz0 */
+/* hash: 12i23 */
 :root {
     --color-light-bg-primary-inverted: #0b1f35;
     --color-light-text-primary-inverted: #fff;
@@ -21,13 +21,13 @@
     --tooltip-hint-text-color: var(--color-light-text-primary-inverted);
     --tooltip-hint-box-shadow: var(--shadow-m-hard);
 }
-.tooltip__hint_1ndmz {
+.tooltip__hint_u65xw {
     border-radius: var(--border-radius-s);
     background-color: var(--tooltip-hint-bg-color);
     box-shadow: var(--tooltip-hint-box-shadow);
     color: var(--tooltip-hint-text-color);
 }
-.tooltip__hint_1ndmz .tooltip__arrow_1ndmz:after {
+.tooltip__hint_u65xw .tooltip__arrow_u65xw:after {
     background-color: var(--tooltip-hint-bg-color);
     border-color: var(--tooltip-hint-bg-color);
 }

package/tooltip/esm/{Component-b489a35e.js → Component-62a9f24c.js}

@@ -42,13 +42,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"tooltip__component_60a35","popper":"tooltip__popper_60a35","hint":"tooltip__hint_60a35","target":"tooltip__target_60a35","overlap":"tooltip__overlap_60a35"};
+var styles = {"component":"tooltip__component_1du8e","popper":"tooltip__popper_1du8e","hint":"tooltip__hint_1du8e","target":"tooltip__target_1du8e","overlap":"tooltip__overlap_1du8e"};
 require('./index.css');
 
-var defaultColors = {"hint":"tooltip__hint_1ndmz","arrow":"tooltip__arrow_1ndmz"};
+var defaultColors = {"hint":"tooltip__hint_u65xw","arrow":"tooltip__arrow_u65xw"};
 require('./default.css');
 
-var invertedColors = {"tooltip":"tooltip__tooltip_ej90g","arrow":"tooltip__arrow_ej90g","hint":"tooltip__hint_ej90g"};
+var invertedColors = {"tooltip":"tooltip__tooltip_aj5ap","arrow":"tooltip__arrow_aj5ap","hint":"tooltip__hint_aj5ap"};
 require('./inverted.css');
 
 var colorStyles = {

package/tooltip/esm/Component.js

@@ -2,4 +2,4 @@ import 'react';
 import 'classnames';
 import 'react-merge-refs';
 import '../../popover/esm';
-export { T as Tooltip } from './Component-b489a35e.js';
+export { T as Tooltip } from './Component-62a9f24c.js';