@alfalab/core-components 26.8.0 → 26.11.0

package/toast-plate/modern/component.js

@@ -7,7 +7,7 @@ import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
 import { Button } from '../../button/modern';
 import { Badge } from '../../badge/modern';
 
-var styles = {"component":"toast-plate__component_i2o9n","hasCloser":"toast-plate__hasCloser_i2o9n","contentWrap":"toast-plate__contentWrap_i2o9n","block":"toast-plate__block_i2o9n","content":"toast-plate__content_i2o9n","actionSection":"toast-plate__actionSection_i2o9n","leftAddons":"toast-plate__leftAddons_i2o9n","title":"toast-plate__title_i2o9n","children":"toast-plate__children_i2o9n","closeButton":"toast-plate__closeButton_i2o9n"};
+var styles = {"component":"toast-plate__component_1u62c","hasCloser":"toast-plate__hasCloser_1u62c","contentWrap":"toast-plate__contentWrap_1u62c","block":"toast-plate__block_1u62c","content":"toast-plate__content_1u62c","actionSection":"toast-plate__actionSection_1u62c","leftAddons":"toast-plate__leftAddons_1u62c","title":"toast-plate__title_1u62c","children":"toast-plate__children_1u62c","closeButton":"toast-plate__closeButton_1u62c"};
 require('./index.css');
 
 const iconDefaultComponents = {

package/toast-plate/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1emas */
+/* hash: 1tobq */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -607,7 +607,7 @@
     --toast-plate-action-padding: 0 var(--gap-2xl);
     --toast-plate-action-divider-display: block;
 }
-.toast-plate__component_i2o9n {
+.toast-plate__component_1u62c {
     position: relative;
     display: inline-flex;
     flex-direction: column;
@@ -618,55 +618,55 @@
     padding: var(--gap-m);
     background-color: var(--toast-plate-bg-color)
 }
-.toast-plate__component_i2o9n.toast-plate__hasCloser_i2o9n {
+.toast-plate__component_1u62c.toast-plate__hasCloser_1u62c {
         /* 2×16 + 24 */
         padding-right: 56px;
     }
-.toast-plate__contentWrap_i2o9n {
+.toast-plate__contentWrap_1u62c {
     display: flex;
 }
-.toast-plate__block_i2o9n {
+.toast-plate__block_1u62c {
     display: flex;
     width: 100%;
 }
-.toast-plate__content_i2o9n {
+.toast-plate__content_1u62c {
     display: flex;
     flex-grow: 1;
 }
-.toast-plate__actionSection_i2o9n {
+.toast-plate__actionSection_1u62c {
     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_i2o9n:last-child {
+.toast-plate__actionSection_1u62c:last-child {
         padding-right: 0;
     }
-.toast-plate__leftAddons_i2o9n {
+.toast-plate__leftAddons_1u62c {
     display: flex;
     align-items: flex-start;
     flex-shrink: 0;
     padding-right: var(--gap-s);
 }
-.toast-plate__title_i2o9n {
+.toast-plate__title_1u62c {
     font-size: 16px;
     line-height: 24px;
     font-weight: 700;
 
     font-weight: var(--toast-plate-title-font-weight);
 }
-.toast-plate__children_i2o9n {
+.toast-plate__children_1u62c {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 
     word-break: break-word;
 }
-.toast-plate__title_i2o9n + .toast-plate__children_i2o9n {
+.toast-plate__title_1u62c + .toast-plate__children_1u62c {
     margin-top: var(--gap-2xs);
 }
-.toast-plate__closeButton_i2o9n {
+.toast-plate__closeButton_1u62c {
     display: flex;
     align-items: flex-start;
     position: absolute;
@@ -675,10 +675,10 @@
     right: var(--gap-s);
     padding: var(--gap-2xs);
 }
-.toast-plate__actionSection_i2o9n + .toast-plate__closeButton_i2o9n {
+.toast-plate__actionSection_1u62c + .toast-plate__closeButton_1u62c {
     align-items: var(--toast-plate-action-align)
 }
-.toast-plate__actionSection_i2o9n + .toast-plate__closeButton_i2o9n:before {
+.toast-plate__actionSection_1u62c + .toast-plate__closeButton_1u62c:before {
         display: var(--toast-plate-action-divider-display);
         position: absolute;
         right: 44px;

package/tooltip/{Component-bf10e97b.d.ts → Component-78921b3e.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/{Component-bf10e97b.js → Component-78921b3e.js}

@@ -48,13 +48,23 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"tooltip__component_ievuq","popper":"tooltip__popper_ievuq","hint":"tooltip__hint_ievuq","arrow":"tooltip__arrow_ievuq","target":"tooltip__target_ievuq","overlap":"tooltip__overlap_ievuq"};
+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 = React.useState(!!forcedOpen), visible = _l[0], setVisible = _l[1];
-    var _m = React.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 = React.useState(!!forcedOpen), visible = _m[0], setVisible = _m[1];
+    var _o = React.useState(null), target = _o[0], setTarget = _o[1];
     var contentRef = React.useRef(null);
     var timer = React.useRef(0);
     var show = forcedOpen === undefined ? visible : forcedOpen;
@@ -167,7 +177,7 @@ var Tooltip = function (_a) {
         React__default['default'].createElement("div", exports.__assign({ ref: mergeRefs__default['default']([targetRef, setTarget]) }, getTargetProps()),
             children.props.disabled && React__default['default'].createElement("div", { className: styles.overlap }),
             children),
-        React__default['default'].createElement(coreComponentsPopover.Popover, { anchorElement: anchor || target, open: show, getPortalContainer: getPortalContainer, arrowClassName: cn__default['default'](arrowClassName, styles.arrow), popperClassName: cn__default['default'](styles.popper, styles[view]), className: popoverClassName, offset: offset, withArrow: true, position: position, update: updatePopover, zIndex: zIndex, fallbackPlacements: fallbackPlacements, preventOverflow: preventOverflow, availableHeight: availableHeight },
+        React__default['default'].createElement(coreComponentsPopover.Popover, { anchorElement: anchor || target, open: show, getPortalContainer: getPortalContainer, arrowClassName: cn__default['default'](arrowClassName, styles.arrow, colorStyles[colors].arrow), popperClassName: cn__default['default'](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__default['default'].createElement("div", exports.__assign({}, getContentProps()), content))));
 };
 

package/tooltip/Component.js

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

package/tooltip/component.responsive.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component = require('./Component-bf10e97b.js');
+var Component = require('./Component-78921b3e.js');
 var React = require('react');
 require('classnames');
 require('react-merge-refs');
@@ -14,7 +14,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles = {"target":"tooltip__target_1xqw9","overlap":"tooltip__overlap_1xqw9"};
+var styles = {"target":"tooltip__target_14pms","overlap":"tooltip__overlap_14pms"};
 require('./responsive.css');
 
 var TooltipResponsive = function (_a) {

package/tooltip/cssm/{Component-c1f568b7.d.ts → Component-ef3b0e1c.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/cssm/{Component-c1f568b7.js → Component-ef3b0e1c.js}

@@ -3,6 +3,8 @@ var cn = require('classnames');
 var mergeRefs = require('react-merge-refs');
 var coreComponentsPopover = require('../../popover/cssm');
 var styles = require('./index.module.css');
+var defaultColors = require('./default.module.css');
+var invertedColors = require('./inverted.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -10,6 +12,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+var defaultColors__default = /*#__PURE__*/_interopDefaultLegacy(defaultColors);
+var invertedColors__default = /*#__PURE__*/_interopDefaultLegacy(invertedColors);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -50,10 +54,14 @@ function __rest(s, e) {
     return t;
 }
 
+var colorStyles = {
+    default: defaultColors__default['default'],
+    inverted: invertedColors__default['default'],
+};
 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 = React.useState(!!forcedOpen), visible = _l[0], setVisible = _l[1];
-    var _m = React.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 = React.useState(!!forcedOpen), visible = _m[0], setVisible = _m[1];
+    var _o = React.useState(null), target = _o[0], setTarget = _o[1];
     var contentRef = React.useRef(null);
     var timer = React.useRef(0);
     var show = forcedOpen === undefined ? visible : forcedOpen;
@@ -166,7 +174,7 @@ var Tooltip = function (_a) {
         React__default['default'].createElement("div", exports.__assign({ ref: mergeRefs__default['default']([targetRef, setTarget]) }, getTargetProps()),
             children.props.disabled && React__default['default'].createElement("div", { className: styles__default['default'].overlap }),
             children),
-        React__default['default'].createElement(coreComponentsPopover.Popover, { anchorElement: anchor || target, open: show, getPortalContainer: getPortalContainer, arrowClassName: cn__default['default'](arrowClassName, styles__default['default'].arrow), popperClassName: cn__default['default'](styles__default['default'].popper, styles__default['default'][view]), className: popoverClassName, offset: offset, withArrow: true, position: position, update: updatePopover, zIndex: zIndex, fallbackPlacements: fallbackPlacements, preventOverflow: preventOverflow, availableHeight: availableHeight },
+        React__default['default'].createElement(coreComponentsPopover.Popover, { anchorElement: anchor || target, open: show, getPortalContainer: getPortalContainer, arrowClassName: cn__default['default'](arrowClassName, styles__default['default'].arrow, colorStyles[colors].arrow), popperClassName: cn__default['default'](styles__default['default'].popper, styles__default['default'][view], colorStyles[colors][view]), className: popoverClassName, offset: offset, withArrow: true, position: position, update: updatePopover, zIndex: zIndex, fallbackPlacements: fallbackPlacements, preventOverflow: preventOverflow, availableHeight: availableHeight },
             React__default['default'].createElement("div", exports.__assign({}, getContentProps()), content))));
 };
 

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-9b1fbe2f.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-9b1fbe2f.js → Component-9bbc233c.js}

@@ -42,13 +42,23 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"tooltip__component_ievuq","popper":"tooltip__popper_ievuq","hint":"tooltip__hint_ievuq","arrow":"tooltip__arrow_ievuq","target":"tooltip__target_ievuq","overlap":"tooltip__overlap_ievuq"};
+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-9b1fbe2f.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-9b1fbe2f.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_1xqw9","overlap":"tooltip__overlap_1xqw9"};
+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_ievuq {
+.tooltip__component_ugl2y {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
     padding: var(--gap-m);
 }
-.tooltip__popper_ievuq {
+.tooltip__popper_ugl2y {
     border-radius: var(--border-radius-m);
 }
-.tooltip__hint_ievuq {
-    border-radius: var(--border-radius-s);
-    background-color: var(--tooltip-hint-bg-color);
-    box-shadow: none;
-}
-.tooltip__hint_ievuq .tooltip__component_ievuq {
+.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_ievuq .tooltip__arrow_ievuq:after {
-    background-color: var(--tooltip-hint-bg-color);
-    border-color: var(--tooltip-hint-bg-color);
 }
-.tooltip__target_ievuq {
+.tooltip__target_ugl2y {
     cursor: pointer;
     width: max-content;
     position: relative
 }
-.tooltip__target_ievuq .tooltip__overlap_ievuq {
+.tooltip__target_ugl2y .tooltip__overlap_ugl2y {
         cursor: var(--disabled-cursor);
         position: absolute;
         height: 100%;