@alfalab/core-components 43.1.3 → 44.0.0

package/tooltip/esm/desktop/Component.desktop.js

@@ -0,0 +1,145 @@
+import { __assign } from 'tslib';
+import React, { useState, useRef, useCallback, useEffect, Fragment } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import { Popover } from '../../../popover/esm';
+
+var defaultColors = {"hint":"tooltip__hint_v1xva","arrow":"tooltip__arrow_v1xva","tooltip":"tooltip__tooltip_v1xva"};
+require('./../default.css');
+
+var styles = {"component":"tooltip__component_1s44j","popper":"tooltip__popper_1s44j","hint":"tooltip__hint_1s44j","target":"tooltip__target_1s44j","overlap":"tooltip__overlap_1s44j","inline":"tooltip__inline_1s44j"};
+require('./../index.css');
+
+var invertedColors = {"tooltip":"tooltip__tooltip_bex83","arrow":"tooltip__arrow_bex83","hint":"tooltip__hint_bex83"};
+require('./../inverted.css');
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+var TooltipDesktop = function (_a) {
+    var children = _a.children, content = _a.content, _b = _a.trigger, trigger = _b === void 0 ? 'hover' : _b, _c = _a.onCloseDelay, onCloseDelay = _c === void 0 ? 300 : _c, _d = _a.onOpenDelay, onOpenDelay = _d === void 0 ? 300 : _d, dataTestId = _a.dataTestId, forcedOpen = _a.open, _e = _a.offset, offset = _e === void 0 ? [0, 16] : _e, position = _a.position, contentClassName = _a.contentClassName, arrowClassName = _a.arrowClassName, popoverClassName = _a.popoverClassName, updatePopover = _a.updatePopover, targetClassName = _a.targetClassName, _f = _a.targetTag, TargetTag = _f === void 0 ? 'div' : _f, zIndex = _a.zIndex, onClose = _a.onClose, onOpen = _a.onOpen, getPortalContainer = _a.getPortalContainer, _g = _a.view, view = _g === void 0 ? 'tooltip' : _g, _h = _a.targetRef, targetRef = _h === void 0 ? null : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k, _l = _a.anchor, anchor = _l === void 0 ? null : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, useAnchorWidth = _a.useAnchorWidth;
+    var _o = useState(!!forcedOpen), visible = _o[0], setVisible = _o[1];
+    var _p = useState(null), target = _p[0], setTarget = _p[1];
+    var contentRef = useRef(null);
+    var timer = useRef(0);
+    var show = forcedOpen === undefined ? visible : forcedOpen;
+    var open = function () {
+        if (!show) {
+            setVisible(true);
+            if (onOpen) {
+                onOpen();
+            }
+        }
+    };
+    var close = useCallback(function () {
+        if (show) {
+            setVisible(false);
+            if (onClose) {
+                onClose();
+            }
+        }
+    }, [onClose, show]);
+    var toggle = function () {
+        if (show) {
+            close();
+        }
+        else {
+            open();
+        }
+    };
+    var clickedOutside = useCallback(function (node) {
+        if (target && target.contains(node)) {
+            return false;
+        }
+        if (contentRef.current && contentRef.current.contains(node)) {
+            return false;
+        }
+        return true;
+    }, [target]);
+    useEffect(function () {
+        var handleBodyClick = function (event) {
+            var eventTarget = event.target;
+            if (clickedOutside(eventTarget)) {
+                close();
+            }
+        };
+        document.body.addEventListener('click', handleBodyClick);
+        document.body.addEventListener('touchstart', handleBodyClick);
+        return function () {
+            document.body.removeEventListener('click', handleBodyClick);
+            document.body.removeEventListener('touchstart', handleBodyClick);
+            clearTimeout(timer.current);
+        };
+    }, [clickedOutside, close]);
+    var handleTargetClick = function () {
+        toggle();
+    };
+    var handleMouseOver = function () {
+        clearTimeout(timer.current);
+        timer.current = window.setTimeout(function () {
+            open();
+        }, onOpenDelay);
+    };
+    var handleMouseOut = function () {
+        clearTimeout(timer.current);
+        timer.current = window.setTimeout(function () {
+            close();
+        }, onCloseDelay);
+    };
+    var handleTouchStart = function (event) {
+        var eventTarget = event.target;
+        clearTimeout(timer.current);
+        if (clickedOutside(eventTarget)) {
+            timer.current = window.setTimeout(function () {
+                close();
+            }, onCloseDelay);
+        }
+        else {
+            open();
+        }
+    };
+    var onClickProps = { onClick: handleTargetClick };
+    var onHoverProps = {
+        onMouseOver: handleMouseOver,
+        onMouseOut: handleMouseOut,
+        onTouchStart: handleTouchStart,
+    };
+    var getTargetProps = function () {
+        var _a;
+        var props = {
+            className: cn(styles.target, targetClassName, (_a = {},
+                _a[styles.inline] = TargetTag === 'span',
+                _a)),
+        };
+        switch (trigger) {
+            case 'click':
+                return __assign(__assign({}, props), onClickProps);
+            case 'hover':
+                return __assign(__assign({}, props), onHoverProps);
+            default:
+                return {};
+        }
+    };
+    var getContentProps = function () {
+        var props = {
+            ref: contentRef,
+            'data-test-id': dataTestId,
+            className: cn(styles.component, contentClassName),
+        };
+        switch (trigger) {
+            case 'hover':
+                return __assign(__assign({}, props), onHoverProps);
+            default:
+                return props;
+        }
+    };
+    return (React.createElement(Fragment, null,
+        React.createElement(TargetTag, __assign({ ref: mergeRefs([targetRef, setTarget]) }, getTargetProps()),
+            children.props.disabled && React.createElement("div", { className: styles.overlap }),
+            children),
+        React.createElement(Popover, { anchorElement: anchor || target, open: show, getPortalContainer: getPortalContainer, arrowClassName: cn(arrowClassName, styles.arrow, colorStyles[colors].arrow), popperClassName: cn(styles.popper, styles[view], colorStyles[colors][view]), className: popoverClassName, offset: offset, withArrow: true, position: position, update: updatePopover, zIndex: zIndex, fallbackPlacements: fallbackPlacements, preventOverflow: preventOverflow, availableHeight: availableHeight, useAnchorWidth: useAnchorWidth },
+            React.createElement("div", __assign({}, getContentProps()), content))));
+};
+
+export { TooltipDesktop };

package/tooltip/esm/desktop/index.d.ts

@@ -1,2 +1,2 @@
-export { TooltipDesktop } from "../Component.desktop";
+export { TooltipDesktop } from "./Component.desktop";
 export { TooltipDesktopProps } from "../types";

package/tooltip/esm/desktop/index.js

@@ -1,4 +1,4 @@
-export { TooltipDesktop } from '../Component.desktop.js';
+export { TooltipDesktop } from './Component.desktop.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/tooltip/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: u40c6 */
+/* hash: lt9lk */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -21,32 +21,32 @@
     --disabled-cursor: not-allowed;
 } :root {
     --tooltip-max-width: 368px;
-} .tooltip__component_daw2a {
+} .tooltip__component_1s44j {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
     padding: var(--gap-m);
     max-width: var(--tooltip-max-width);
-} .tooltip__popper_daw2a {
+} .tooltip__popper_1s44j {
     border-radius: var(--border-radius-m);
     box-sizing: border-box;
-} .tooltip__hint_daw2a .tooltip__component_daw2a {
+} .tooltip__hint_1s44j .tooltip__component_1s44j {
     font-size: 13px;
     line-height: 16px;
     font-weight: 400;
     padding: var(--gap-xs);
-} .tooltip__hint_daw2a {
+} .tooltip__hint_1s44j {
     border-radius: var(--border-radius-s);
-} .tooltip__target_daw2a {
+} .tooltip__target_1s44j {
     display: inline-block;
     cursor: pointer;
     position: relative
-} .tooltip__target_daw2a .tooltip__overlap_daw2a {
+} .tooltip__target_1s44j .tooltip__overlap_1s44j {
         cursor: var(--disabled-cursor);
         position: absolute;
         height: 100%;
         width: 100%;
         z-index: 2;
-    } .tooltip__inline_daw2a {
+    } .tooltip__inline_1s44j {
     display: inline;
 }

package/tooltip/esm/index.js

@@ -2,10 +2,10 @@ export { TooltipResponsive as Tooltip } from './Component.responsive.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
-import './Component.mobile.js';
+import './desktop/Component.desktop.js';
+import 'react-merge-refs';
 import 'classnames';
+import '../../popover/esm';
+import './mobile/Component.mobile.js';
 import '../../bottom-sheet/esm';
 import '../../button/esm/mobile';
-import './Component.desktop.js';
-import 'react-merge-refs';
-import '../../popover/esm';

package/tooltip/esm/inverted.css

@@ -1,8 +1,8 @@
-/* hash: 1jsyn */
+/* hash: t6ffk */
 :root {
 } /* deprecated */ :root {
-    --color-light-bg-primary: #fff;
-    --color-light-bg-primary-inverted: #0e0e0e;
+    --color-light-modal-bg-primary: #fff;
+    --color-light-modal-bg-primary-inverted: #1c1c1e;
     --color-light-text-primary: #0e0e0e;
     --color-light-text-primary-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -23,22 +23,22 @@
 } :root {
 } :root {
 } :root {
-    --tooltip-hint-inverted-bg-color: var(--color-light-bg-primary);
+    --tooltip-hint-inverted-bg-color: var(--color-light-modal-bg-primary);
     --tooltip-hint-inverted-text-color: var(--color-light-text-primary);
     --tooltip-hint-inverted-box-shadow: var(--shadow-m);
     --tooltip-inverted-text-color: var(--color-light-text-primary-inverted);
-    --tooltip-inverted-bg-color: var(--color-light-bg-primary-inverted);
+    --tooltip-inverted-bg-color: var(--color-light-modal-bg-primary-inverted);
     --tooltip-inverted-box-shadow: var(--shadow-m-hard);
-} .tooltip__tooltip_1oo08 {
+} .tooltip__tooltip_bex83 {
     background-color: var(--tooltip-inverted-bg-color);
     color: var(--tooltip-inverted-text-color);
     box-shadow: var(--tooltip-inverted-box-shadow);
-} .tooltip__tooltip_1oo08 .tooltip__arrow_1oo08:after {
+} .tooltip__tooltip_bex83 .tooltip__arrow_bex83:after {
     background-color: var(--tooltip-inverted-bg-color);
-} .tooltip__hint_1oo08 {
+} .tooltip__hint_bex83 {
     background-color: var(--tooltip-hint-inverted-bg-color);
     box-shadow: var(--tooltip-hint-inverted-box-shadow);
     color: var(--tooltip-hint-inverted-text-color);
-} .tooltip__hint_1oo08 .tooltip__arrow_1oo08:after {
+} .tooltip__hint_bex83 .tooltip__arrow_bex83:after {
     background-color: var(--tooltip-hint-inverted-bg-color);
 }

package/tooltip/esm/mobile/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TooltipMobileProps } from "../types";
+declare const TooltipMobile: React.FC<TooltipMobileProps>;
+export { TooltipMobile };

package/tooltip/esm/mobile/Component.mobile.js

@@ -0,0 +1,38 @@
+import { __rest, __assign } from 'tslib';
+import React, { useState, Fragment } from 'react';
+import cn from 'classnames';
+import { BottomSheet } from '../../../bottom-sheet/esm';
+import { ButtonMobile } from '../../../button/esm/mobile';
+
+var styles = {"target":"tooltip__target_3ty17","overlap":"tooltip__overlap_3ty17","inline":"tooltip__inline_3ty17"};
+require('./mobile.css');
+
+var TooltipMobile = function (_a) {
+    var _b;
+    var onClose = _a.onClose, _c = _a.actionButtonTitle, actionButtonTitle = _c === void 0 ? 'Понятно' : _c, content = _a.content, targetRef = _a.targetRef, onOpen = _a.onOpen, targetClassName = _a.targetClassName, children = _a.children, getPortalContainer = _a.getPortalContainer, _d = _a.targetTag, TargetTag = _d === void 0 ? 'div' : _d, openProp = _a.open, restProps = __rest(_a, ["onClose", "actionButtonTitle", "content", "targetRef", "onOpen", "targetClassName", "children", "getPortalContainer", "targetTag", "open"]);
+    var _e = useState(!!openProp), visible = _e[0], setVisible = _e[1];
+    var show = openProp === undefined ? visible : openProp;
+    var handleOpen = function () {
+        if (!show) {
+            if (openProp === undefined)
+                setVisible(true);
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        }
+    };
+    var handleClose = function () {
+        if (show) {
+            if (openProp === undefined)
+                setVisible(false);
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    };
+    return (React.createElement(Fragment, null,
+        React.createElement(BottomSheet, __assign({ open: show, actionButton: React.createElement(ButtonMobile, { view: 'secondary', block: true, size: 's', onClick: handleClose }, actionButtonTitle) }, restProps, { container: getPortalContainer, onClose: handleClose }), content),
+        React.createElement(TargetTag, { ref: targetRef, onClick: handleOpen, className: cn(styles.target, targetClassName, (_b = {},
+                _b[styles.inline] = TargetTag === 'span',
+                _b)) },
+            (children === null || children === void 0 ? void 0 : children.props.disabled) && React.createElement("div", { className: styles.overlap }),
+            children)));
+};
+
+export { TooltipMobile };

package/tooltip/esm/mobile/index.d.ts

@@ -1,2 +1,2 @@
-export { TooltipMobile } from "../Component.mobile";
+export { TooltipMobile } from "./Component.mobile";
 export { TooltipMobileProps } from "../types";

package/tooltip/esm/mobile/index.js

@@ -1,4 +1,4 @@
-export { TooltipMobile } from '../Component.mobile.js';
+export { TooltipMobile } from './Component.mobile.js';
 import 'tslib';
 import 'react';
 import 'classnames';

package/tooltip/esm/mobile/mobile.css

@@ -0,0 +1,16 @@
+/* hash: nvp95 */
+.tooltip__target_3ty17 {
+    position: relative;
+    display: inline-block
+}
+
+.tooltip__target_3ty17 .tooltip__overlap_3ty17 {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        z-index: 2;
+    }
+
+.tooltip__inline_3ty17 {
+    display: inline;
+}

package/tooltip/index.css

@@ -1,4 +1,4 @@
-/* hash: u40c6 */
+/* hash: lt9lk */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -21,32 +21,32 @@
     --disabled-cursor: not-allowed;
 } :root {
     --tooltip-max-width: 368px;
-} .tooltip__component_daw2a {
+} .tooltip__component_1s44j {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
     padding: var(--gap-m);
     max-width: var(--tooltip-max-width);
-} .tooltip__popper_daw2a {
+} .tooltip__popper_1s44j {
     border-radius: var(--border-radius-m);
     box-sizing: border-box;
-} .tooltip__hint_daw2a .tooltip__component_daw2a {
+} .tooltip__hint_1s44j .tooltip__component_1s44j {
     font-size: 13px;
     line-height: 16px;
     font-weight: 400;
     padding: var(--gap-xs);
-} .tooltip__hint_daw2a {
+} .tooltip__hint_1s44j {
     border-radius: var(--border-radius-s);
-} .tooltip__target_daw2a {
+} .tooltip__target_1s44j {
     display: inline-block;
     cursor: pointer;
     position: relative
-} .tooltip__target_daw2a .tooltip__overlap_daw2a {
+} .tooltip__target_1s44j .tooltip__overlap_1s44j {
         cursor: var(--disabled-cursor);
         position: absolute;
         height: 100%;
         width: 100%;
         z-index: 2;
-    } .tooltip__inline_daw2a {
+    } .tooltip__inline_1s44j {
     display: inline;
 }

package/tooltip/index.js

@@ -4,13 +4,13 @@ var Component_responsive = require('./Component.responsive.js');
 require('tslib');
 require('react');
 require('../mq');
-require('./Component.mobile.js');
+require('./desktop/Component.desktop.js');
+require('react-merge-refs');
 require('classnames');
+require('../popover');
+require('./mobile/Component.mobile.js');
 require('../bottom-sheet');
 require('../button/mobile');
-require('./Component.desktop.js');
-require('react-merge-refs');
-require('../popover');
 
 
 

package/tooltip/inverted.css

@@ -1,8 +1,8 @@
-/* hash: 1jsyn */
+/* hash: t6ffk */
 :root {
 } /* deprecated */ :root {
-    --color-light-bg-primary: #fff;
-    --color-light-bg-primary-inverted: #0e0e0e;
+    --color-light-modal-bg-primary: #fff;
+    --color-light-modal-bg-primary-inverted: #1c1c1e;
     --color-light-text-primary: #0e0e0e;
     --color-light-text-primary-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -23,22 +23,22 @@
 } :root {
 } :root {
 } :root {
-    --tooltip-hint-inverted-bg-color: var(--color-light-bg-primary);
+    --tooltip-hint-inverted-bg-color: var(--color-light-modal-bg-primary);
     --tooltip-hint-inverted-text-color: var(--color-light-text-primary);
     --tooltip-hint-inverted-box-shadow: var(--shadow-m);
     --tooltip-inverted-text-color: var(--color-light-text-primary-inverted);
-    --tooltip-inverted-bg-color: var(--color-light-bg-primary-inverted);
+    --tooltip-inverted-bg-color: var(--color-light-modal-bg-primary-inverted);
     --tooltip-inverted-box-shadow: var(--shadow-m-hard);
-} .tooltip__tooltip_1oo08 {
+} .tooltip__tooltip_bex83 {
     background-color: var(--tooltip-inverted-bg-color);
     color: var(--tooltip-inverted-text-color);
     box-shadow: var(--tooltip-inverted-box-shadow);
-} .tooltip__tooltip_1oo08 .tooltip__arrow_1oo08:after {
+} .tooltip__tooltip_bex83 .tooltip__arrow_bex83:after {
     background-color: var(--tooltip-inverted-bg-color);
-} .tooltip__hint_1oo08 {
+} .tooltip__hint_bex83 {
     background-color: var(--tooltip-hint-inverted-bg-color);
     box-shadow: var(--tooltip-hint-inverted-box-shadow);
     color: var(--tooltip-hint-inverted-text-color);
-} .tooltip__hint_1oo08 .tooltip__arrow_1oo08:after {
+} .tooltip__hint_bex83 .tooltip__arrow_bex83:after {
     background-color: var(--tooltip-hint-inverted-bg-color);
 }

package/tooltip/mobile/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TooltipMobileProps } from "../types";
+declare const TooltipMobile: React.FC<TooltipMobileProps>;
+export { TooltipMobile };

package/tooltip/mobile/Component.mobile.js

@@ -0,0 +1,45 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsBottomSheet = require('../../bottom-sheet');
+var mobile = require('../../button/mobile');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"target":"tooltip__target_3ty17","overlap":"tooltip__overlap_3ty17","inline":"tooltip__inline_3ty17"};
+require('./mobile.css');
+
+var TooltipMobile = function (_a) {
+    var _b;
+    var onClose = _a.onClose, _c = _a.actionButtonTitle, actionButtonTitle = _c === void 0 ? 'Понятно' : _c, content = _a.content, targetRef = _a.targetRef, onOpen = _a.onOpen, targetClassName = _a.targetClassName, children = _a.children, getPortalContainer = _a.getPortalContainer, _d = _a.targetTag, TargetTag = _d === void 0 ? 'div' : _d, openProp = _a.open, restProps = tslib.__rest(_a, ["onClose", "actionButtonTitle", "content", "targetRef", "onOpen", "targetClassName", "children", "getPortalContainer", "targetTag", "open"]);
+    var _e = React.useState(!!openProp), visible = _e[0], setVisible = _e[1];
+    var show = openProp === undefined ? visible : openProp;
+    var handleOpen = function () {
+        if (!show) {
+            if (openProp === undefined)
+                setVisible(true);
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        }
+    };
+    var handleClose = function () {
+        if (show) {
+            if (openProp === undefined)
+                setVisible(false);
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    };
+    return (React__default.default.createElement(React.Fragment, null,
+        React__default.default.createElement(coreComponentsBottomSheet.BottomSheet, tslib.__assign({ open: show, actionButton: React__default.default.createElement(mobile.ButtonMobile, { view: 'secondary', block: true, size: 's', onClick: handleClose }, actionButtonTitle) }, restProps, { container: getPortalContainer, onClose: handleClose }), content),
+        React__default.default.createElement(TargetTag, { ref: targetRef, onClick: handleOpen, className: cn__default.default(styles.target, targetClassName, (_b = {},
+                _b[styles.inline] = TargetTag === 'span',
+                _b)) },
+            (children === null || children === void 0 ? void 0 : children.props.disabled) && React__default.default.createElement("div", { className: styles.overlap }),
+            children)));
+};
+
+exports.TooltipMobile = TooltipMobile;

package/tooltip/mobile/index.d.ts

@@ -1,2 +1,2 @@
-export { TooltipMobile } from "../Component.mobile";
+export { TooltipMobile } from "./Component.mobile";
 export { TooltipMobileProps } from "../types";

package/tooltip/mobile/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component_mobile = require('../Component.mobile.js');
+var mobile_Component_mobile = require('./Component.mobile.js');
 require('tslib');
 require('react');
 require('classnames');
@@ -9,4 +9,4 @@ require('../../button/mobile');
 
 
 
-exports.TooltipMobile = Component_mobile.TooltipMobile;
+exports.TooltipMobile = mobile_Component_mobile.TooltipMobile;

package/tooltip/mobile/mobile.css

@@ -0,0 +1,16 @@
+/* hash: nvp95 */
+.tooltip__target_3ty17 {
+    position: relative;
+    display: inline-block
+}
+
+.tooltip__target_3ty17 .tooltip__overlap_3ty17 {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        z-index: 2;
+    }
+
+.tooltip__inline_3ty17 {
+    display: inline;
+}

package/tooltip/modern/Component.responsive.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { useMatchMedia } from '../../mq/modern';
-import { TooltipMobile } from './Component.mobile.js';
-import { TooltipDesktop } from './Component.desktop.js';
+import { TooltipDesktop } from './desktop/Component.desktop.js';
+import { TooltipMobile } from './mobile/Component.mobile.js';
+import 'react-merge-refs';
 import 'classnames';
+import '../../popover/modern';
 import '../../bottom-sheet/modern';
 import '../../button/modern/mobile';
-import 'react-merge-refs';
-import '../../popover/modern';
 
 const TooltipResponsive = ({ defaultMatchMediaValue, children, actionButtonTitle, bottomSheetProps, breakpoint = 1024, ...restProps }) => {
     const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);

package/tooltip/modern/default.css

@@ -1,8 +1,8 @@
-/* hash: 1s636 */
+/* hash: 11jjy */
 :root {
 } /* deprecated */ :root {
-    --color-light-bg-primary-inverted: #0e0e0e;
-    --color-light-border-secondary: #e7e8ec;
+    --color-light-modal-bg-primary-inverted: #1c1c1e;
+    --color-light-neutral-300: #e7e8eb;
     --color-light-text-primary-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -20,18 +20,19 @@
 } :root {
 } :root {
 } :root {
-    --tooltip-hint-bg-color: var(--color-light-bg-primary-inverted);
+    --tooltip-border-color: var(--color-light-neutral-300);
+    --tooltip-hint-bg-color: var(--color-light-modal-bg-primary-inverted);
     --tooltip-hint-text-color: var(--color-light-text-primary-inverted);
     --tooltip-hint-box-shadow: var(--shadow-m-hard);
-} .tooltip__hint_99wtk {
+} .tooltip__hint_v1xva {
     background-color: var(--tooltip-hint-bg-color);
     box-shadow: var(--tooltip-hint-box-shadow);
     color: var(--tooltip-hint-text-color);
-} .tooltip__hint_99wtk .tooltip__arrow_99wtk:after {
+} .tooltip__hint_v1xva .tooltip__arrow_v1xva:after {
     background-color: var(--tooltip-hint-bg-color);
     border-color: var(--tooltip-hint-bg-color);
-} .tooltip__tooltip_99wtk {
-    border: 1px solid var(--color-light-border-secondary)
-} .tooltip__tooltip_99wtk .tooltip__arrow_99wtk:after {
-        border-color: var(--color-light-border-secondary);
+} .tooltip__tooltip_v1xva {
+    border: 1px solid var(--tooltip-border-color)
+} .tooltip__tooltip_v1xva .tooltip__arrow_v1xva:after {
+        border-color: var(--tooltip-border-color);
     }

package/tooltip/modern/desktop/Component.desktop.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TooltipDesktopProps } from "../types";
+declare const TooltipDesktop: FC<TooltipDesktopProps>;
+export { TooltipDesktop };