@alfalab/core-components 26.10.0 → 26.11.0

package/tooltip/cssm/Component.js

@@ -1,11 +1,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component = require('./Component-c1f568b7.js');
+var Component = require('./Component-ef3b0e1c.js');
 require('react');
 require('classnames');
 require('react-merge-refs');
 require('../../popover/cssm');
 require('./index.module.css');
+require('./default.module.css');
+require('./inverted.module.css');
 
 
 

package/tooltip/cssm/component.responsive.js

@@ -1,11 +1,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component = require('./Component-c1f568b7.js');
+var Component = require('./Component-ef3b0e1c.js');
 var React = require('react');
 require('classnames');
 require('react-merge-refs');
 require('../../popover/cssm');
 require('./index.module.css');
+require('./default.module.css');
+require('./inverted.module.css');
 var hooks = require('@alfalab/hooks');
 var coreComponentsBottomSheet = require('../../bottom-sheet/cssm');
 var coreComponentsButton = require('../../button/cssm');

package/tooltip/cssm/default.module.css

@@ -0,0 +1,32 @@
+:root {
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-text-primary-inverted: #fff;
+}
+:root {
+
+    /* Hard */
+    --shadow-m-hard: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16),
+        0 8px 16px rgba(11, 31, 53, 0.16);
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --border-radius-s: 4px;
+}
+:root {
+    --tooltip-hint-bg-color: var(--color-light-bg-primary-inverted);
+    --tooltip-hint-text-color: var(--color-light-text-primary-inverted);
+    --tooltip-hint-box-shadow: var(--shadow-m-hard);
+}
+.hint {
+    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);
+}
+.hint .arrow:after {
+    background-color: var(--tooltip-hint-bg-color);
+    border-color: var(--tooltip-hint-bg-color);
+}

package/tooltip/cssm/index.d.ts

@@ -1 +1 @@
-export * from "./Component-c1f568b7";
+export * from "./Component-ef3b0e1c";

package/tooltip/cssm/index.js

@@ -1,11 +1,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component = require('./Component-c1f568b7.js');
+var Component = require('./Component-ef3b0e1c.js');
 require('react');
 require('classnames');
 require('react-merge-refs');
 require('../../popover/cssm');
 require('./index.module.css');
+require('./default.module.css');
+require('./inverted.module.css');
 
 
 

package/tooltip/cssm/index.module.css

@@ -1,7 +1,3 @@
-:root {
-    --color-light-text-primary-inverted: #fff;
-    --color-static-bg-primary-dark: #000;
-}
 :root {
 
     /* Hard */
@@ -15,15 +11,11 @@
     --gap-m: 16px;
 }
 :root {
-    --border-radius-s: 4px;
     --border-radius-m: 8px;
 }
 :root {
     --disabled-cursor: not-allowed;
 }
-:root {
-    --tooltip-hint-bg-color: var(--color-static-bg-primary-dark);
-}
 .component {
     font-size: 14px;
     line-height: 20px;
@@ -33,21 +25,11 @@
 .popper {
     border-radius: var(--border-radius-m);
 }
-.hint {
-    border-radius: var(--border-radius-s);
-    background-color: var(--tooltip-hint-bg-color);
-    box-shadow: none;
-}
 .hint .component {
     font-size: 13px;
     line-height: 16px;
     font-weight: 400;
     padding: var(--gap-xs);
-    color: var(--color-light-text-primary-inverted);
-}
-.hint .arrow:after {
-    background-color: var(--tooltip-hint-bg-color);
-    border-color: var(--tooltip-hint-bg-color);
 }
 .target {
     cursor: pointer;

package/tooltip/cssm/inverted.module.css

@@ -0,0 +1,45 @@
+:root {
+    --color-light-bg-primary: #fff;
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-primary-inverted: #fff;
+}
+:root {
+    --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
+
+    /* Hard */
+    --shadow-m-hard: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16),
+        0 8px 16px rgba(11, 31, 53, 0.16);
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --border-radius-s: 4px;
+}
+:root {
+    --tooltip-hint-inverted-bg-color: var(--color-light-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-box-shadow: var(--shadow-m-hard);
+}
+.tooltip {
+    background-color: var(--tooltip-inverted-bg-color);
+    color: var(--tooltip-inverted-text-color);
+    box-shadow: var(--tooltip-inverted-box-shadow);
+}
+.tooltip .arrow:after {
+    background-color: var(--tooltip-inverted-bg-color);
+}
+.hint {
+    border-radius: var(--border-radius-s);
+    background-color: var(--tooltip-hint-inverted-bg-color);
+    box-shadow: var(--tooltip-hint-inverted-box-shadow);
+    color: var(--tooltip-hint-inverted-text-color);
+}
+.hint .arrow:after {
+    background-color: var(--tooltip-hint-inverted-bg-color);
+}

package/tooltip/cssm/responsive.js

@@ -1,11 +1,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./Component-c1f568b7.js');
+require('./Component-ef3b0e1c.js');
 require('react');
 require('classnames');
 require('react-merge-refs');
 require('../../popover/cssm');
 require('./index.module.css');
+require('./default.module.css');
+require('./inverted.module.css');
 require('@alfalab/hooks');
 require('../../bottom-sheet/cssm');
 require('../../button/cssm');

package/tooltip/default.css

@@ -0,0 +1,33 @@
+/* hash: 19nsj */
+:root {
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-text-primary-inverted: #fff;
+}
+:root {
+
+    /* Hard */
+    --shadow-m-hard: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16),
+        0 8px 16px rgba(11, 31, 53, 0.16);
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --border-radius-s: 4px;
+}
+:root {
+    --tooltip-hint-bg-color: var(--color-light-bg-primary-inverted);
+    --tooltip-hint-text-color: var(--color-light-text-primary-inverted);
+    --tooltip-hint-box-shadow: var(--shadow-m-hard);
+}
+.tooltip__hint_xty0u {
+    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_xty0u .tooltip__arrow_xty0u:after {
+    background-color: var(--tooltip-hint-bg-color);
+    border-color: var(--tooltip-hint-bg-color);
+}

package/tooltip/esm/{Component-f9c20821.d.ts → Component-9bbc233c.d.ts}

@@ -132,6 +132,10 @@ type TooltipProps = {
      *  Элемент, относительно которого будет позиционировать тултип.
      */
     anchor?: PopoverProps['anchorElement'];
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
 };
 declare const Tooltip: FC<TooltipProps>;
 export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __assign, __createBinding, TooltipProps, Tooltip };

package/tooltip/esm/{Component-f9c20821.js → Component-9bbc233c.js}

@@ -42,13 +42,23 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"tooltip__component_jfryz","popper":"tooltip__popper_jfryz","hint":"tooltip__hint_jfryz","arrow":"tooltip__arrow_jfryz","target":"tooltip__target_jfryz","overlap":"tooltip__overlap_jfryz"};
+var styles = {"component":"tooltip__component_ugl2y","popper":"tooltip__popper_ugl2y","hint":"tooltip__hint_ugl2y","target":"tooltip__target_ugl2y","overlap":"tooltip__overlap_ugl2y"};
 require('./index.css');
 
+var defaultColors = {"hint":"tooltip__hint_xty0u","arrow":"tooltip__arrow_xty0u"};
+require('./default.css');
+
+var invertedColors = {"tooltip":"tooltip__tooltip_1o0o3","arrow":"tooltip__arrow_1o0o3","hint":"tooltip__hint_1o0o3"};
+require('./inverted.css');
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 var Tooltip = 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, zIndex = _a.zIndex, onClose = _a.onClose, onOpen = _a.onOpen, getPortalContainer = _a.getPortalContainer, _f = _a.view, view = _f === void 0 ? 'tooltip' : _f, _g = _a.targetRef, targetRef = _g === void 0 ? null : _g, fallbackPlacements = _a.fallbackPlacements, _h = _a.preventOverflow, preventOverflow = _h === void 0 ? true : _h, _j = _a.availableHeight, availableHeight = _j === void 0 ? false : _j, _k = _a.anchor, anchor = _k === void 0 ? null : _k;
-    var _l = useState(!!forcedOpen), visible = _l[0], setVisible = _l[1];
-    var _m = useState(null), target = _m[0], setTarget = _m[1];
+    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, zIndex = _a.zIndex, onClose = _a.onClose, onOpen = _a.onOpen, getPortalContainer = _a.getPortalContainer, _f = _a.view, view = _f === void 0 ? 'tooltip' : _f, _g = _a.targetRef, targetRef = _g === void 0 ? null : _g, fallbackPlacements = _a.fallbackPlacements, _h = _a.preventOverflow, preventOverflow = _h === void 0 ? true : _h, _j = _a.availableHeight, availableHeight = _j === void 0 ? false : _j, _k = _a.anchor, anchor = _k === void 0 ? null : _k, _l = _a.colors, colors = _l === void 0 ? 'default' : _l;
+    var _m = useState(!!forcedOpen), visible = _m[0], setVisible = _m[1];
+    var _o = useState(null), target = _o[0], setTarget = _o[1];
     var contentRef = useRef(null);
     var timer = useRef(0);
     var show = forcedOpen === undefined ? visible : forcedOpen;
@@ -161,7 +171,7 @@ var Tooltip = function (_a) {
         React.createElement("div", __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), popperClassName: cn(styles.popper, styles[view]), className: popoverClassName, offset: offset, withArrow: true, position: position, update: updatePopover, zIndex: zIndex, fallbackPlacements: fallbackPlacements, preventOverflow: preventOverflow, availableHeight: availableHeight },
+        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 },
             React.createElement("div", __assign({}, getContentProps()), content))));
 };
 

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-f9c20821.js';
+export { T as Tooltip } from './Component-9bbc233c.js';

package/tooltip/esm/component.responsive.js

@@ -2,13 +2,13 @@ import React, { Fragment } from 'react';
 import 'classnames';
 import 'react-merge-refs';
 import '../../popover/esm';
-import { _ as __rest, a as __assign, T as Tooltip } from './Component-f9c20821.js';
+import { _ as __rest, a as __assign, T as Tooltip } from './Component-9bbc233c.js';
 import { useMedia } from '@alfalab/hooks';
 import { BottomSheet } from '../../bottom-sheet/esm';
 import { Button } from '../../button/esm';
 import { useControlled } from './utils.js';
 
-var styles = {"target":"tooltip__target_19ix5","overlap":"tooltip__overlap_19ix5"};
+var styles = {"target":"tooltip__target_14pms","overlap":"tooltip__overlap_14pms"};
 require('./responsive.css');
 
 var TooltipResponsive = function (_a) {

package/tooltip/esm/default.css

@@ -0,0 +1,33 @@
+/* hash: 19nsj */
+:root {
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-text-primary-inverted: #fff;
+}
+:root {
+
+    /* Hard */
+    --shadow-m-hard: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16),
+        0 8px 16px rgba(11, 31, 53, 0.16);
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --border-radius-s: 4px;
+}
+:root {
+    --tooltip-hint-bg-color: var(--color-light-bg-primary-inverted);
+    --tooltip-hint-text-color: var(--color-light-text-primary-inverted);
+    --tooltip-hint-box-shadow: var(--shadow-m-hard);
+}
+.tooltip__hint_xty0u {
+    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_xty0u .tooltip__arrow_xty0u:after {
+    background-color: var(--tooltip-hint-bg-color);
+    border-color: var(--tooltip-hint-bg-color);
+}

package/tooltip/esm/index.css

@@ -1,8 +1,4 @@
-/* hash: a4ypt */
-:root {
-    --color-light-text-primary-inverted: #fff;
-    --color-static-bg-primary-dark: #000;
-}
+/* hash: 1uc6j */
 :root {
 
     /* Hard */
@@ -16,46 +12,32 @@
     --gap-m: 16px;
 }
 :root {
-    --border-radius-s: 4px;
     --border-radius-m: 8px;
 }
 :root {
     --disabled-cursor: not-allowed;
 }
-:root {
-    --tooltip-hint-bg-color: var(--color-static-bg-primary-dark);
-}
-.tooltip__component_jfryz {
+.tooltip__component_ugl2y {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
     padding: var(--gap-m);
 }
-.tooltip__popper_jfryz {
+.tooltip__popper_ugl2y {
     border-radius: var(--border-radius-m);
 }
-.tooltip__hint_jfryz {
-    border-radius: var(--border-radius-s);
-    background-color: var(--tooltip-hint-bg-color);
-    box-shadow: none;
-}
-.tooltip__hint_jfryz .tooltip__component_jfryz {
+.tooltip__hint_ugl2y .tooltip__component_ugl2y {
     font-size: 13px;
     line-height: 16px;
     font-weight: 400;
     padding: var(--gap-xs);
-    color: var(--color-light-text-primary-inverted);
-}
-.tooltip__hint_jfryz .tooltip__arrow_jfryz:after {
-    background-color: var(--tooltip-hint-bg-color);
-    border-color: var(--tooltip-hint-bg-color);
 }
-.tooltip__target_jfryz {
+.tooltip__target_ugl2y {
     cursor: pointer;
     width: max-content;
     position: relative
 }
-.tooltip__target_jfryz .tooltip__overlap_jfryz {
+.tooltip__target_ugl2y .tooltip__overlap_ugl2y {
         cursor: var(--disabled-cursor);
         position: absolute;
         height: 100%;

package/tooltip/esm/index.d.ts

@@ -1 +1 @@
-export * from "./Component-f9c20821";
+export * from "./Component-9bbc233c";

package/tooltip/esm/index.js

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

package/tooltip/esm/inverted.css

@@ -0,0 +1,46 @@
+/* hash: 11ao0 */
+:root {
+    --color-light-bg-primary: #fff;
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-primary-inverted: #fff;
+}
+:root {
+    --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
+
+    /* Hard */
+    --shadow-m-hard: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16),
+        0 8px 16px rgba(11, 31, 53, 0.16);
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --border-radius-s: 4px;
+}
+:root {
+    --tooltip-hint-inverted-bg-color: var(--color-light-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-box-shadow: var(--shadow-m-hard);
+}
+.tooltip__tooltip_1o0o3 {
+    background-color: var(--tooltip-inverted-bg-color);
+    color: var(--tooltip-inverted-text-color);
+    box-shadow: var(--tooltip-inverted-box-shadow);
+}
+.tooltip__tooltip_1o0o3 .tooltip__arrow_1o0o3:after {
+    background-color: var(--tooltip-inverted-bg-color);
+}
+.tooltip__hint_1o0o3 {
+    border-radius: var(--border-radius-s);
+    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_1o0o3 .tooltip__arrow_1o0o3:after {
+    background-color: var(--tooltip-hint-inverted-bg-color);
+}

package/tooltip/esm/responsive.css

@@ -1,9 +1,9 @@
-/* hash: gboh9 */
-.tooltip__target_19ix5 {
+/* hash: 1keux */
+.tooltip__target_14pms {
     position: relative;
     width: max-content
 }
-.tooltip__target_19ix5 .tooltip__overlap_19ix5 {
+.tooltip__target_14pms .tooltip__overlap_14pms {
         position: absolute;
         height: 100%;
         width: 100%;

package/tooltip/esm/responsive.js

@@ -2,7 +2,7 @@ import 'react';
 import 'classnames';
 import 'react-merge-refs';
 import '../../popover/esm';
-import './Component-f9c20821.js';
+import './Component-9bbc233c.js';
 import '@alfalab/hooks';
 import '../../bottom-sheet/esm';
 import '../../button/esm';

package/tooltip/index.css

@@ -1,8 +1,4 @@
-/* hash: a4ypt */
-:root {
-    --color-light-text-primary-inverted: #fff;
-    --color-static-bg-primary-dark: #000;
-}
+/* hash: 1uc6j */
 :root {
 
     /* Hard */
@@ -16,46 +12,32 @@
     --gap-m: 16px;
 }
 :root {
-    --border-radius-s: 4px;
     --border-radius-m: 8px;
 }
 :root {
     --disabled-cursor: not-allowed;
 }
-:root {
-    --tooltip-hint-bg-color: var(--color-static-bg-primary-dark);
-}
-.tooltip__component_jfryz {
+.tooltip__component_ugl2y {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
     padding: var(--gap-m);
 }
-.tooltip__popper_jfryz {
+.tooltip__popper_ugl2y {
     border-radius: var(--border-radius-m);
 }
-.tooltip__hint_jfryz {
-    border-radius: var(--border-radius-s);
-    background-color: var(--tooltip-hint-bg-color);
-    box-shadow: none;
-}
-.tooltip__hint_jfryz .tooltip__component_jfryz {
+.tooltip__hint_ugl2y .tooltip__component_ugl2y {
     font-size: 13px;
     line-height: 16px;
     font-weight: 400;
     padding: var(--gap-xs);
-    color: var(--color-light-text-primary-inverted);
-}
-.tooltip__hint_jfryz .tooltip__arrow_jfryz:after {
-    background-color: var(--tooltip-hint-bg-color);
-    border-color: var(--tooltip-hint-bg-color);
 }
-.tooltip__target_jfryz {
+.tooltip__target_ugl2y {
     cursor: pointer;
     width: max-content;
     position: relative
 }
-.tooltip__target_jfryz .tooltip__overlap_jfryz {
+.tooltip__target_ugl2y .tooltip__overlap_ugl2y {
         cursor: var(--disabled-cursor);
         position: absolute;
         height: 100%;

package/tooltip/index.d.ts

@@ -1 +1 @@
-export * from "./Component-a05df689";
+export * from "./Component-78921b3e";

package/tooltip/index.js

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

package/tooltip/inverted.css

@@ -0,0 +1,46 @@
+/* hash: 11ao0 */
+:root {
+    --color-light-bg-primary: #fff;
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-primary-inverted: #fff;
+}
+:root {
+    --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
+
+    /* Hard */
+    --shadow-m-hard: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16),
+        0 8px 16px rgba(11, 31, 53, 0.16);
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --border-radius-s: 4px;
+}
+:root {
+    --tooltip-hint-inverted-bg-color: var(--color-light-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-box-shadow: var(--shadow-m-hard);
+}
+.tooltip__tooltip_1o0o3 {
+    background-color: var(--tooltip-inverted-bg-color);
+    color: var(--tooltip-inverted-text-color);
+    box-shadow: var(--tooltip-inverted-box-shadow);
+}
+.tooltip__tooltip_1o0o3 .tooltip__arrow_1o0o3:after {
+    background-color: var(--tooltip-inverted-bg-color);
+}
+.tooltip__hint_1o0o3 {
+    border-radius: var(--border-radius-s);
+    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_1o0o3 .tooltip__arrow_1o0o3:after {
+    background-color: var(--tooltip-hint-inverted-bg-color);
+}

package/tooltip/modern/Component.d.ts

@@ -101,6 +101,10 @@ type TooltipProps = {
      *  Элемент, относительно которого будет позиционировать тултип.
      */
     anchor?: PopoverProps['anchorElement'];
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
 };
 declare const Tooltip: FC<TooltipProps>;
 export { TooltipProps, Tooltip };

package/tooltip/modern/Component.js

@@ -3,10 +3,20 @@ import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
 import { Popover } from '../../popover/modern';
 
-var styles = {"component":"tooltip__component_jfryz","popper":"tooltip__popper_jfryz","hint":"tooltip__hint_jfryz","arrow":"tooltip__arrow_jfryz","target":"tooltip__target_jfryz","overlap":"tooltip__overlap_jfryz"};
+var styles = {"component":"tooltip__component_ugl2y","popper":"tooltip__popper_ugl2y","hint":"tooltip__hint_ugl2y","target":"tooltip__target_ugl2y","overlap":"tooltip__overlap_ugl2y"};
 require('./index.css');
 
-const Tooltip = ({ children, content, trigger = 'hover', onCloseDelay = 300, onOpenDelay = 300, dataTestId, open: forcedOpen, offset = [0, 16], position, contentClassName, arrowClassName, popoverClassName, updatePopover, targetClassName, zIndex, onClose, onOpen, getPortalContainer, view = 'tooltip', targetRef = null, fallbackPlacements, preventOverflow = true, availableHeight = false, anchor = null, }) => {
+var defaultColors = {"hint":"tooltip__hint_xty0u","arrow":"tooltip__arrow_xty0u"};
+require('./default.css');
+
+var invertedColors = {"tooltip":"tooltip__tooltip_1o0o3","arrow":"tooltip__arrow_1o0o3","hint":"tooltip__hint_1o0o3"};
+require('./inverted.css');
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+const Tooltip = ({ children, content, trigger = 'hover', onCloseDelay = 300, onOpenDelay = 300, dataTestId, open: forcedOpen, offset = [0, 16], position, contentClassName, arrowClassName, popoverClassName, updatePopover, targetClassName, zIndex, onClose, onOpen, getPortalContainer, view = 'tooltip', targetRef = null, fallbackPlacements, preventOverflow = true, availableHeight = false, anchor = null, colors = 'default', }) => {
     const [visible, setVisible] = useState(!!forcedOpen);
     const [target, setTarget] = useState(null);
     const contentRef = useRef(null);
@@ -130,7 +140,7 @@ const Tooltip = ({ children, content, trigger = 'hover', onCloseDelay = 300, onO
         React.createElement("div", Object.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), popperClassName: cn(styles.popper, styles[view]), className: popoverClassName, offset: offset, withArrow: true, position: position, update: updatePopover, zIndex: zIndex, fallbackPlacements: fallbackPlacements, preventOverflow: preventOverflow, availableHeight: availableHeight },
+        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 },
             React.createElement("div", Object.assign({}, getContentProps()), content))));
 };
 

package/tooltip/modern/component.responsive.js

@@ -8,7 +8,7 @@ import { BottomSheet } from '../../bottom-sheet/modern';
 import { Button } from '../../button/modern';
 import { useControlled } from './utils.js';
 
-var styles = {"target":"tooltip__target_19ix5","overlap":"tooltip__overlap_19ix5"};
+var styles = {"target":"tooltip__target_14pms","overlap":"tooltip__overlap_14pms"};
 require('./responsive.css');
 
 const TooltipResponsive = ({ defaultMatch = 'mobile', content, children, open, onOpen, onClose, actionButtonTitle = 'Понятно', hasCloser, ...restProps }) => {