@salutejs/sdds-insol-next 0.364.0-next-sbcom.0 → 0.364.0

package/README.md

@@ -1,213 +1,172 @@
-# SDDS-INSOL-NEXT
+# Библиотека компонентов для вертикали SDDS INSOL NEXT
 
-Набор компонентов и утилит для создания web-приложений на базе [ReactJS](https://reactjs.org/).
+[![license](https://img.shields.io/github/license/salute-developers/plasma)](https://github.com/salute-developers/plasma/blob/master/LICENSE.txt)
+[![npm version](https://img.shields.io/npm/v/@salutejs/sdds-insol-next.svg)](https://www.npmjs.com/package/@salutejs/sdds-insol-next)
+[![typescript](https://img.shields.io/github/package-json/dependency-version/salute-developers/plasma/dev/typescript)](https://www.typescriptlang.org/)
+[![sdds-themes](https://img.shields.io/github/package-json/dependency-version/salute-developers/plasma/@salutejs/sdds-themes?filename=packages%2Fsdds-insol-next%2Fpackage.json)](https://www.npmjs.com/package/@salutejs/sdds-themes)
 
-## Использование
+Реализация компонентов для создания веб-приложений.
 
-Библиотека реализована с помощью:
+Компоненты реализованы с помощью [React](https://react.dev/) и поставляются в двух вариантах:
 
--   [typescript](https://www.typescriptlang.org/)
--   [styled-components](https://styled-components.com/) (рекомендуем использовать версию `5.3.1`)
+-   на предсобранном CSS,
+-   на [styled-components](https://styled-components.com/).
 
-Однако их использование **необязательно**!
+## Ссылки
 
-### Установка зависимостей
+-   [Документация](https://plasma.sberdevices.ru/sdds-insol-next/) — гайды, список компонентов с примерами и API
+-   [Подключение в Next.js](https://plasma.sberdevices.ru/sdds-insol-next/next/)
+-   [Changelog](https://plasma.sberdevices.ru/changelog/?vertical=SDDSInsolNext&platform=React&version=0.363.0)
+-   [Задать вопрос или сообщить о проблеме](https://github.com/salute-developers/plasma/issues)
+
+## Установка
+
+Требуются `react` и `react-dom` версии `16.13.1` или выше:
 
 ```bash
+$ npm install --save react react-dom
 $ npm install --save @salutejs/sdds-insol-next @salutejs/sdds-themes
 ```
 
-Для работы со `styled-components`, необходимо установить
+Дальнейшие шаги зависят от выбранного [варианта поставки](#варианты-поставки).
+
+Для варианта на styled-components:
 
 ```bash
 $ npm install --save styled-components@5.3.1
 ```
 
-### Использование компонентов
+CSS-вариант дополнительных зависимостей не требует.
 
-Все компоненты доступны напрямую из пакета
+## Варианты поставки
 
-```jsx
-import styled from 'styled-components';
-import { Button } from '@salutejs/sdds-insol-next';
-import { textAccent } from '@salutejs/sdds-themes/tokens';
+> **Примечание:** CSS-вариант является поставкой по умолчанию.
 
-export const App = () => {
-    const StyledP = styled.p`
-        color: ${textAccent};
-    `;
+Один и тот же набор компонентов доступен из двух точек входа:
 
-    return (
-        <>
-            <Button>Hello, SDDS!</Button>
-            <StyledP>Token usage example</StyledP>
-        </>
-    );
-};
-```
-
-## Подключение шрифтов
+| Точка входа                                    | Реализация        | Дополнительные зависимости |
+| ----------------------------------------------- | ----------------- | --------------------------- |
+| `@salutejs/sdds-insol-next`                    | предсобранный CSS | нет                          |
+| `@salutejs/sdds-insol-next/styled-components`  | styled-components | `styled-components@5.3.1`    |
 
-Типографическая система основана на фирменных шрифтах.
+```jsx
+import { Button } from '@salutejs/sdds-insol-next';
+// или
+import { Button } from '@salutejs/sdds-insol-next/styled-components';
+```
 
-Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на **CDN**
+Beta-компоненты доступны из точки входа `@salutejs/sdds-insol-next/beta`. Подробнее — в [документации](https://plasma.sberdevices.ru/sdds-insol-next/beta/embedded-button/).
 
-Для использования типографической системы необходимо загрузить два `css` файла в зависимости от используемых шрифтов в теме.
+## Подключение шрифтов
 
-### Create react app
+Типографическая система основана на фирменных шрифтах, они поставляются с CDN.
 
-Добавить внутрь тега `head`.
+Добавьте три css-файла внутрь тега `<head>`.
 
 ```html
-<html>
-    <head>
-        <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
-        <link
-            rel="stylesheet"
-            href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css"
-        />
-        <title>Wep App</title>
-    </head>
-    <body>
-        ...
-    </body>
-</html>
+<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
+<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css" />
+<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansTextMono.0.2.0.css" />
 ```
 
-### NextJs
+## Подключение темы
 
-```tsx
-import Head from 'next/head';
+Тема подключается один раз в корне приложения.
 
-import { H2, Button } from '@salutejs/sdds-insol-next';
+> **Примечание:** Для [Next.js](https://nextjs.org/) — в `pages/_app.tsx`.
 
-export default function Home() {
-    return (
-        <>
-            <Head>
-                <title>Create Next App with sdds-insol components</title>
-                <link
-                    rel="stylesheet"
-                    href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css"
-                />
-                <link
-                    rel="stylesheet"
-                    href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css"
-                />
-            </Head>
-            <div>
-                <main>
-                    <div>
-                        <H2> Salute </H2>
-                        <Button text="Hello" />
-                    </div>
-                </main>
-            </div>
-        </>
-    );
-}
-```
+Тема включает в себя цветовые и типографические токены.
 
-## Подключение темы
+Доступны светлая и тёмная темы — `sdds_insol_next__light` и `sdds_insol_next__dark`.
 
-Точкой входа является корень приложения:
+### Через импорт css-файла
 
--   Если вы используете [Create React App](https://create-react-app.dev), делайте вызов внутри `src/index.tsx`.
--   Если вы используете [Next.js](https://nextjs.org/), создайте файл `pages/_app.tsx` и подключите стили в нем.
+```jsx
+import '@salutejs/sdds-themes/css/sdds_insol_next__light.css';
+```
 
-### Styled-components
+### Через styled-components
 
 ```jsx
-import React from 'react';
 import { createGlobalStyle } from 'styled-components';
-import { Button, BodyL } from '@salutejs/sdds-insol-next';
 import { sdds_insol_next__light } from '@salutejs/sdds-themes';
 
 const Theme = createGlobalStyle(sdds_insol_next__light);
 
-const App = () => {
+// вызовите <Theme /> в корне приложения
+```
+
+Переключение темы в рантайме и подключение через css-модули описаны в [документации](https://plasma.sberdevices.ru/sdds-insol-next/).
+
+## Использование компонентов
+
+```jsx
+// App.tsx
+import { Button, BodyL } from '@salutejs/sdds-insol-next';
+import '@salutejs/sdds-themes/css/sdds_insol_next__light.css';
+
+export const App = () => {
     return (
         <>
-            <Theme />
-            <BodyL>Hello SDDS</BodyL>
-            <Button text="This is themed button" />
+            <BodyL>Hello, SDDS INSOL NEXT!</BodyL>
+            <Button>Кнопка</Button>
         </>
     );
 };
-
-export default App;
 ```
 
-## Токены
+Дизайн-токены доступны в виде js-переменных:
 
-Все `css` токены завернуты в `js` переменные для более удобного доступа:
+-   базовый набор — из `@salutejs/sdds-themes/tokens`
+-   уникальные токены темы — из `@salutejs/sdds-themes/tokens/sdds_insol_next`.
 
-```js
-/** Основной цвет текста */
-export const textPrimary = 'var(--text-primary, #F5F5F5)';
-/** Основной фон */
-export const backgroundPrimary = 'var(--background-primary, #000000)';
-```
-
-### Способы подключения
+```jsx
+import { textAccent } from '@salutejs/sdds-themes/tokens';
 
-Есть два пути импорта токенов:
+<p style={{ color: textAccent }}>Пример использования токена</p>;
+```
 
--   Из вертикали `@salutejs/sdds-themes/tokens` (подходит в большинстве случаев, т.к там лежит весь базовый набор токенов)
--   Непосредственно из темы `@salutejs/sdds-themes/tokens/sdds-insol-next` (следует использовать, когда необходимо импортировать уникальные токены, которые используются только в этой теме)
+## SSR и Next.js
 
-### Использование
+-   Библиотека поддерживает React Server Components (App Router) **только** при **явном** использовании директивы `'use client'` в модулях, импортирующих компоненты.
+-   Для CSS-варианта поставки добавьте пакеты в `transpilePackages` в `next.config.js`:
 
-```jsx
-import React from 'react';
-import styled from 'styled-components';
-import { textAccent, backgroundPrimary, textL } from '@salutejs/sdds-themes/tokens';
-
-const AppStyled = styled.div`
-    padding: 2rem;
-    color: ${textAccent};
-    background-color: ${backgroundPrimary};
-`;
-
-const Container = styled.div`
-    ${textL};
-    margin: 1rem;
-`;
-
-const App = () => {
-    return (
-        <AppStyled>
-            <Container>
-                <span>Hello SDDS</span>
-            </Container>
-        </AppStyled>
-    );
+```js
+const nextConfig = {
+    transpilePackages: ['@salutejs/sdds-insol-next', '@salutejs/plasma-new-hope', '@salutejs/plasma-icons'],
 };
-
-export default App;
 ```
 
-## Типографика
+Подробности — в [гайде по Next.js](https://plasma.sberdevices.ru/sdds-insol-next/next/).
 
-Рекомендуем использовать типографические компоненты, которые поставляет библиотека.
+## MCP-сервер для AI-агентов
 
-```ts
-import { BodyL, DsplL, H3 } from '@salutejs/sdds-insol-next';
-```
+> **Примечание**: Поддерживаются версии библиотеки начиная с `0.349.0` — нужная указывается параметром `--version`.
 
-### Токены типографики на примере компонента `DsplL`
+Библиотека предоставляет [MCP-сервер](https://plasma.sberdevices.ru/sdds-insol-next/how-to-mcp/) `@salutejs/sdds-mcp` — через него LLM-агент (Claude Code, Cursor и др.) получает актуальную документацию:
 
-Так же в пакете есть типографические токены, для случаев, когда необходимо точечно применить типографику к контейнеру.
+-   список компонентов
+-   описание props
+-   примеры использования
+-   токены и гайды.
 
-```tsx
-import { CSSObject } from 'styled-components';
+Сервер работает по `stdio`:
 
-export const dsplL = ({
-    fontFamily: 'var(--plasma-typo-dspl-l-font-family)',
-    fontSize: 'var(--plasma-typo-dspl-l-font-size)',
-    fontStyle: 'var(--plasma-typo-dspl-l-font-style)',
-    fontWeight: 'var(--plasma-typo-dspl-l-font-weight)',
-    letterSpacing: 'var(--plasma-typo-dspl-l-letter-spacing)',
-    lineHeight: 'var(--plasma-typo-dspl-l-line-height)',
-} as unknown) as CSSObject;
+```bash
+npx -y @salutejs/sdds-mcp@latest --lib sdds-insol-next
 ```
+
+Если агент настраивается через конфигурацию, используйте шаблон:
+
+```json
+{
+    "mcpServers": {
+        "sdds-insol-next": {
+            "command": "npx",
+            "args": ["-y", "@salutejs/sdds-mcp@latest", "--lib", "sdds-insol-next"]
+        }
+    }
+}
+```
+
+Подробности и список инструментов — в [гайде по MCP](https://plasma.sberdevices.ru/sdds-insol-next/how-to-mcp/).

package/dist/beta/cjs/EmbeddedButton/EmbeddedButton.js

@@ -2,11 +2,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var css = require('@salutejs/plasma-new-hope/css');
-var EmbeddedButton_config = require('./EmbeddedButton.config.js');
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cls = require('classnames');
+var beta = require('@salutejs/plasma-new-hope/beta');
+var Disabled_module = require('./config/Disabled.module.css.js');
+var Size_module = require('./config/Size.module.css.js');
+var View_module = require('./config/View.module.css.js');
 
-var mergedConfig = /*#__PURE__*/css.mergeConfig(css._beta_embeddedButtonConfig, EmbeddedButton_config.config);
-var EmbeddedButton = /*#__PURE__*/css.component(mergedConfig);
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var cls__default = /*#__PURE__*/_interopDefault(cls);
+
+var _excluded = ["view", "size"];
+var EmbeddedButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$view = _ref.view,
+    view = _ref$view === void 0 ? 'default' : _ref$view,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var configClassName = cls__default.default(View_module.default[view], Size_module.default[size], rest.disabled && Disabled_module.default.disabled);
+
+  // @ts-expect-error _configClassName is an internal runtime property.
+  return /*#__PURE__*/React__default.default.createElement(beta.EmbeddedButton, _rollupPluginBabelHelpers.extends({
+    ref: ref,
+    _configClassName: configClassName
+  }, rest));
+});
 
 exports.EmbeddedButton = EmbeddedButton;
-//# sourceMappingURL=EmbeddedButton.js.map

package/dist/beta/cjs/EmbeddedButton/config/Disabled.css

@@ -0,0 +1,3 @@
+.EmbeddedButton_Disabled_disabled__06669d3f {
+    --plasma-embedded-button-disabled-opacity: 0.4;
+}

package/dist/beta/cjs/EmbeddedButton/config/Disabled.module.css.js

@@ -0,0 +1,8 @@
+require('./Disabled.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_d01cb0cb = {"disabled":"EmbeddedButton_Disabled_disabled__06669d3f"};
+
+exports.default = modules_d01cb0cb;

package/dist/beta/cjs/EmbeddedButton/config/Size.css

@@ -0,0 +1,19 @@
+.EmbeddedButton_Size_l__6f3fe9a9 {
+    --plasma-embedded-button-border-radius: 0.75rem;
+    --plasma-embedded-button-spinner-size: 2.25rem;
+}
+
+.EmbeddedButton_Size_m__f13b3050 {
+    --plasma-embedded-button-border-radius: 0.625rem;
+    --plasma-embedded-button-spinner-size: 1.5rem;
+}
+
+.EmbeddedButton_Size_s__44ae81a6 {
+    --plasma-embedded-button-border-radius: 0.5rem;
+    --plasma-embedded-button-spinner-size: 1rem;
+}
+
+.EmbeddedButton_Size_xs__8983baa7 {
+    --plasma-embedded-button-border-radius: 0.375rem;
+    --plasma-embedded-button-spinner-size: 0.75rem;
+}

package/dist/beta/cjs/EmbeddedButton/config/Size.module.css.js

@@ -0,0 +1,8 @@
+require('./Size.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_f3e577bf = {"l":"EmbeddedButton_Size_l__6f3fe9a9","m":"EmbeddedButton_Size_m__f13b3050","s":"EmbeddedButton_Size_s__44ae81a6","xs":"EmbeddedButton_Size_xs__8983baa7"};
+
+exports.default = modules_f3e577bf;

package/dist/beta/cjs/EmbeddedButton/config/View.css

@@ -0,0 +1,69 @@
+.EmbeddedButton_View_default__f7b8fec6 {
+    --plasma-embedded-button-color: var(--text-primary);
+    --plasma-embedded-button-color-hover: var(--text-primary-hover);
+    --plasma-embedded-button-color-active: var(--text-primary-active);
+    --plasma-embedded-button-background-color: transparent;
+    --plasma-embedded-button-spinner-color: var(--text-primary);
+    --plasma-embedded-button-focus-color: var(--surface-accent);
+    --plasma-embedded-button-loading-icon-opacity: 0.06;
+}
+
+.EmbeddedButton_View_secondary__a78b09dc {
+    --plasma-embedded-button-color: var(--text-secondary);
+    --plasma-embedded-button-color-hover: var(--text-secondary-hover);
+    --plasma-embedded-button-color-active: var(--text-secondary-active);
+    --plasma-embedded-button-background-color: transparent;
+    --plasma-embedded-button-spinner-color: var(--text-secondary);
+    --plasma-embedded-button-focus-color: var(--surface-accent);
+    --plasma-embedded-button-loading-icon-opacity: 0.06;
+}
+
+.EmbeddedButton_View_accent__ac542ce5 {
+    --plasma-embedded-button-color: var(--text-accent);
+    --plasma-embedded-button-color-hover: var(--text-accent-hover);
+    --plasma-embedded-button-color-active: var(--text-accent-active);
+    --plasma-embedded-button-background-color: transparent;
+    --plasma-embedded-button-spinner-color: var(--text-accent);
+    --plasma-embedded-button-focus-color: var(--surface-accent);
+    --plasma-embedded-button-loading-icon-opacity: 0.06;
+}
+
+.EmbeddedButton_View_positive__5929130f {
+    --plasma-embedded-button-color: var(--text-positive);
+    --plasma-embedded-button-color-hover: var(--text-positive-hover);
+    --plasma-embedded-button-color-active: var(--text-positive-active);
+    --plasma-embedded-button-background-color: transparent;
+    --plasma-embedded-button-spinner-color: var(--text-positive);
+    --plasma-embedded-button-focus-color: var(--surface-accent);
+    --plasma-embedded-button-loading-icon-opacity: 0.06;
+}
+
+.EmbeddedButton_View_warning__b6d6959d {
+    --plasma-embedded-button-color: var(--text-warning);
+    --plasma-embedded-button-color-hover: var(--text-warning-hover);
+    --plasma-embedded-button-color-active: var(--text-warning-active);
+    --plasma-embedded-button-background-color: transparent;
+    --plasma-embedded-button-spinner-color: var(--text-warning);
+    --plasma-embedded-button-focus-color: var(--surface-accent);
+    --plasma-embedded-button-loading-icon-opacity: 0.06;
+}
+
+.EmbeddedButton_View_negative__309f05a6 {
+    --plasma-embedded-button-color: var(--text-negative);
+    --plasma-embedded-button-color-hover: var(--text-negative-hover);
+    --plasma-embedded-button-color-active: var(--text-negative-active);
+    --plasma-embedded-button-background-color: transparent;
+    --plasma-embedded-button-spinner-color: var(--text-negative);
+    --plasma-embedded-button-focus-color: var(--surface-accent);
+    --plasma-embedded-button-loading-icon-opacity: 0.06;
+}
+
+.EmbeddedButton_View_info__b58223ae {
+    --plasma-embedded-button-color: var(--text-info);
+    --plasma-embedded-button-color-hover: var(--text-info-hover);
+    --plasma-embedded-button-color-active: var(--text-info-active);
+    --plasma-embedded-button-background-color: transparent;
+    --plasma-embedded-button-spinner-color: var(--text-info);
+    --plasma-embedded-button-focus-color: var(--surface-accent);
+    --plasma-embedded-button-loading-icon-opacity: 0.06;
+}

package/dist/beta/cjs/EmbeddedButton/config/View.module.css.js

@@ -0,0 +1,8 @@
+require('./View.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_db861ab5 = {"default":"EmbeddedButton_View_default__f7b8fec6","secondary":"EmbeddedButton_View_secondary__a78b09dc","accent":"EmbeddedButton_View_accent__ac542ce5","positive":"EmbeddedButton_View_positive__5929130f","warning":"EmbeddedButton_View_warning__b6d6959d","negative":"EmbeddedButton_View_negative__309f05a6","info":"EmbeddedButton_View_info__b58223ae"};
+
+exports.default = modules_db861ab5;

package/dist/beta/cjs/Popover/Popover.js

@@ -2,11 +2,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var css = require('@salutejs/plasma-new-hope/css');
-var Popover_config = require('./Popover.config.js');
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cls = require('classnames');
+var beta = require('@salutejs/plasma-new-hope/beta');
+var Size_module = require('./config/Size.module.css.js');
+var View_module = require('./config/View.module.css.js');
 
-var mergedConfig = /*#__PURE__*/css.mergeConfig(css._beta_popoverConfig, Popover_config.config);
-var Popover = /*#__PURE__*/css.component(mergedConfig);
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var cls__default = /*#__PURE__*/_interopDefault(cls);
+
+var _excluded = ["view", "size"];
+var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$view = _ref.view,
+    view = _ref$view === void 0 ? 'default' : _ref$view,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var configClassName = cls__default.default(View_module.default[view], Size_module.default[size]);
+  return /*#__PURE__*/React__default.default.createElement(beta.Popover, _rollupPluginBabelHelpers.extends({
+    ref: ref,
+    appearance: "default"
+    // @ts-expect-error _configClassName is an internal runtime property.
+    ,
+    _configClassName: configClassName
+  }, rest));
+});
 
 exports.Popover = Popover;
-//# sourceMappingURL=Popover.js.map

package/dist/beta/cjs/Popover/config/Size.css

@@ -0,0 +1,7 @@
+.Popover_Size_m__d2898559 {
+    --plasma-popover-border-radius: 1rem;
+    --plasma-popover-padding: 0.75rem 0.5rem 0.5rem;
+    --plasma-popover-tail-width: 20px;
+    --plasma-popover-tail-height: 8px;
+    --plasma-popover-tail-side-curvature: 0%;
+}

package/dist/beta/cjs/Popover/config/Size.module.css.js

@@ -0,0 +1,8 @@
+require('./Size.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_f3e577bf = {"m":"Popover_Size_m__d2898559"};
+
+exports.default = modules_f3e577bf;

package/dist/beta/cjs/Popover/config/View.css

@@ -0,0 +1,6 @@
+.Popover_View_default__828fbc31 {
+    --plasma-popover-background-color: var(--surface-solid-tertiary);
+    --plasma-popover-box-shadow: none;
+    --plasma-popover-drop-shadow: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.16))
+        drop-shadow(0 1px 4px rgba(0, 0, 0, 0.08));
+}

package/dist/beta/cjs/Popover/config/View.module.css.js

@@ -0,0 +1,8 @@
+require('./View.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_db861ab5 = {"default":"Popover_View_default__828fbc31"};
+
+exports.default = modules_db861ab5;

package/dist/beta/cjs/Tooltip/Tooltip.js

@@ -2,11 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var css = require('@salutejs/plasma-new-hope/css');
-var Tooltip_config = require('./Tooltip.config.js');
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cls = require('classnames');
+var beta = require('@salutejs/plasma-new-hope/beta');
+var Size_module = require('./config/Size.module.css.js');
+var View_module = require('./config/View.module.css.js');
 
-var mergedConfig = /*#__PURE__*/css.mergeConfig(css._beta_tooltipConfig, Tooltip_config.config);
-var Tooltip = /*#__PURE__*/css.component(mergedConfig);
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var cls__default = /*#__PURE__*/_interopDefault(cls);
+
+var _excluded = ["view", "size"];
+var Tooltip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$view = _ref.view,
+    view = _ref$view === void 0 ? 'default' : _ref$view,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var configClassName = cls__default.default(View_module.default[view], Size_module.default[size]);
+
+  // @ts-expect-error _configClassName is an internal runtime property.
+  return /*#__PURE__*/React__default.default.createElement(beta.Tooltip, _rollupPluginBabelHelpers.extends({
+    ref: ref,
+    _configClassName: configClassName
+  }, rest));
+});
 
 exports.Tooltip = Tooltip;
-//# sourceMappingURL=Tooltip.js.map

package/dist/beta/cjs/Tooltip/config/Size.css

@@ -0,0 +1,14 @@
+.Tooltip_Size_m__962a3326 {
+    --plasma-tooltip-border-radius: 0.625rem;
+    --plasma-tooltip-padding: 0.6875rem 0.875rem;
+    --plasma-tooltip-gap: 0.375rem;
+    --plasma-tooltip-font-family: var(--plasma-typo-body-s-font-family);
+    --plasma-tooltip-font-size: var(--plasma-typo-body-s-font-size);
+    --plasma-tooltip-font-style: var(--plasma-typo-body-s-font-style);
+    --plasma-tooltip-font-weight: var(--plasma-typo-body-s-font-weight);
+    --plasma-tooltip-letter-spacing: var(--plasma-typo-body-s-letter-spacing);
+    --plasma-tooltip-lineheight: var(--plasma-typo-body-s-line-height);
+    --plasma-tooltip-tail-width: 20px;
+    --plasma-tooltip-tail-height: 8px;
+    --plasma-tooltip-tail-side-curvature: 0%;
+}

package/dist/beta/cjs/Tooltip/config/Size.module.css.js

@@ -0,0 +1,8 @@
+require('./Size.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_f3e577bf = {"m":"Tooltip_Size_m__962a3326"};
+
+exports.default = modules_f3e577bf;

package/dist/beta/cjs/Tooltip/config/View.css

@@ -0,0 +1,7 @@
+.Tooltip_View_default__62706859 {
+    --plasma-tooltip-background-color: var(--surface-solid-card-brightness);
+    --plasma-tooltip-box-shadow: none;
+    --plasma-tooltip-drop-shadow: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.16))
+        drop-shadow(0 1px 4px rgba(0, 0, 0, 0.08));
+    --plasma-tooltip-color: var(--text-primary);
+}

package/dist/beta/cjs/Tooltip/config/View.module.css.js

@@ -0,0 +1,8 @@
+require('./View.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_db861ab5 = {"default":"Tooltip_View_default__62706859"};
+
+exports.default = modules_db861ab5;