@salutejs/sdds-sbcom 0.370.0-next-sbcom.0 → 0.370.0

package/README.md

@@ -1,268 +1,103 @@
-# SDDS-SBCOM
+# Библиотека компонентов для вертикали SDDS SBCOM
 
-Набор компонентов и утилит для создания 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-sbcom.svg)](https://www.npmjs.com/package/@salutejs/sdds-sbcom)
+[![typescript](https://img.shields.io/github/package-json/dependency-version/salute-developers/plasma/dev/typescript)](https://www.typescriptlang.org/)
 
-## Использование
+Реализация компонентов для создания веб-приложений.
 
-Библиотека реализована с помощью:
+Компоненты реализованы с помощью [React](https://react.dev/) и поставляются в виде предсобранного CSS.
 
--   [typescript](https://www.typescriptlang.org/)
+## Ссылки
 
-Однако их использование **необязательно**!
+-   [Документация](https://plasma.sberdevices.ru/sdds-sbcom/) — гайды, список компонентов с примерами и API
+-   [Задать вопрос или сообщить о проблеме](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-sbcom @salutejs-ds/sdds_sbcom
 ```
 
-### Использование компонентов
+## Варианты поставки
+
+Единственный вариант поставки — предсобранный CSS.
 
-Все компоненты доступны напрямую из пакета
+| Точка входа            | Реализация         | Дополнительные зависимости |
+| ----------------------- | ------------------ | --------------------------- |
+| `@salutejs/sdds-sbcom`  | предсобранный CSS  | нет                          |
 
 ```jsx
 import { Button } from '@salutejs/sdds-sbcom';
-
-export const App = () => {
-    return (
-        <>
-            <Button>Hello, sbcom!</Button>
-            <StyledP>Token usage example</StyledP>
-        </>
-    );
-};
 ```
 
-## Подключение шрифтов
+Beta-компоненты доступны из точки входа `@salutejs/sdds-sbcom/beta`. Подробнее — в [документации](https://plasma.sberdevices.ru/sdds-sbcom/beta/popover/).
 
-Типографическая система основана на фирменных шрифтах.
-
-Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на **CDN**
-
-Для использования типографической системы необходимо загрузить два `css` файла в зависимости от используемых шрифтов в теме.
+## Подключение шрифтов
 
-### Create react app
+Типографическая система основана на фирменных шрифтах, они поставляются с CDN.
 
-Добавить внутрь тега `head`.
+Добавьте два css-файла внутрь тега `<head>`.
 
 ```html
-<html lang="ru">
-    <head>
-        <link
-            href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400..700;1,400..700&display=swap"
-            rel="stylesheet"
-        />
-        <title>...</title>
-    </head>
-    <body>
-        ...
-    </body>
-</html>
+<link
+    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400..700;1,400..700&display=swap"
+    rel="stylesheet"
+/>
+<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-sbcom';
+Тема подключается один раз в корне приложения.
 
-export default function Home() {
-    return (
-        <>
-            <Head>
-                <title>Next App with sdds-sbcom components</title>
-                <link
-                    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400..700;1,400..700&display=swap"
-                    rel="stylesheet"
-                />
-            </Head>
-            <div>
-                <main>
-                    <div>
-                        <H2> Salute </H2>
-                        <Button text="Hello" />
-                    </div>
-                </main>
-            </div>
-        </>
-    );
-}
-```
+> **Примечание:** Для [Next.js](https://nextjs.org/) — в `pages/_app.tsx`.
 
-## Подключение темы
+Тема включает в себя цветовые и типографические токены.
 
-Точкой входа является корень приложения:
+Доступны светлая и тёмная темы — `sdds_sbcom__light` и `sdds_sbcom__dark`.
 
--   Если вы используете [Create React App](https://create-react-app.dev), делайте вызов внутри `src/index.tsx`.
--   Если вы используете [Next.js](https://nextjs.org/), создайте файл `pages/_app.tsx` и подключите стили в нем.
+```jsx
+import '@salutejs-ds/sdds_sbcom/css/sdds_sbcom__light.css';
+```
 
-В файле, где происходит подключение всех стилей, например `index.css`
+Переключение темы в рантайме и подключение через css-модули описаны в [документации](https://plasma.sberdevices.ru/sdds-sbcom/).
 
-```css index.css
-@import '@salutejs-ds/sdds_sbcom/css/sdds_sbcom__light.css';
-```
+## Использование компонентов
 
 ```jsx
-import React from 'react';
+// App.tsx
 import { Button, BodyL } from '@salutejs/sdds-sbcom';
+import '@salutejs-ds/sdds_sbcom/css/sdds_sbcom__light.css';
 
-import 'index.css';
-
-const App = () => {
+export const App = () => {
     return (
         <>
-            <BodyL>Hello world</BodyL>
-            <Button text="This is themed button" />
+            <BodyL>Hello, SDDS SBCOM!</BodyL>
+            <Button>Кнопка</Button>
         </>
     );
 };
-
-export default App;
 ```
 
-## Переключение темы
+Дизайн-токены доступны в виде js-переменных из `@salutejs-ds/sdds_sbcom/theme/tokens`:
 
 ```jsx
-import React, { useLayoutEffect, useState } from 'react';
-import { Switch } from '@salutejs/sdds-sbcom';
-
-import './index.css';
-
-const App = () => {
-    const [theme, setTheme] = useState('light');
+import { textPrimary } from '@salutejs-ds/sdds_sbcom/theme/tokens';
 
-    useLayoutEffect(() => {
-        document.documentElement.className = theme;
-    }, [theme]);
-
-    return (
-        <div className="wrapper">
-            <Switch
-                label={`app theme: ${theme}`}
-                onChange={() => {
-                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
-                }}
-            />
-        </div>
-    );
-};
-
-export default App;
+<p style={{ color: textPrimary }}>Пример использования токена</p>;
 ```
 
-В файле, где происходит подключение всех стилей, например `index.css`
-
-```css
-@import '@salutejs-ds/sdds_sbcom/css/sdds_sbcom__light.css';
-```
-
-### Возможные дополнительные настройки в проекте для работы с css:
-
-Возможные дополнительные настройки bundle tools для проекта:
+## SSR и Next.js
 
-<ul>
-    <li>
-        <a href="https://webpack.js.org/loaders/css-loader/">webpack + css</a>
-    </li>
-    <li>
-        <a href="https://vite.dev/guide/features.html#css-pre-processors">vite</a>
-    </li>
-</ul>
-
-## Советы при работе с NextJS
-
-Next не разрешает импорт CSS из сторонних модулей, поэтому важно не забыть добавить наши библиотеки в `next.config.js` следующим образом:
+-   Библиотека поддерживает React Server Components (App Router) **только** при **явном** использовании директивы `'use client'` в модулях, импортирующих компоненты.
+-   Добавьте пакеты в `transpilePackages` в `next.config.js`:
 
 ```js
 const nextConfig = {
-    reactStrictMode: true,
-    transpilePackages: [
-        '@salutejs/sdds-sbcom',
-        '@salutejs/plasma-new-hope',
-        '@salutejs/plasma-icons',
-        '@salutejs-ds/sdds_sbcom',
-    ],
+    transpilePackages: ['@salutejs/sdds-sbcom', '@salutejs/plasma-new-hope', '@salutejs/plasma-icons', '@salutejs-ds/sdds_sbcom'],
 };
 ```
-
-**RSC - React Server Components (App router)**
-
-Библиотека поддерживает работу с **RSC** только при **явном использовании** директивы **'use client'**.
-
-```ts
-'use client'
-
-import { Button } from '@salutejs/sdds-sbcom';
-
-...
-```
-
-## Токены
-
-Все `css` токены завернуты в `js` переменные для более удобного доступа:
-
-```js
-/** Основной цвет текста */
-export const textPrimary = 'var(--text-primary, #F5F5F5)';
-/** Основной фон */
-export const backgroundPrimary = 'var(--background-primary, #000000)';
-```
-
-### Способы подключения
-
-```tsx
-import { textPrimary, h5 } from '@salutejs-ds/sdds_sbcom';
-```
-
-## Типографика
-
-Рекомендуем использовать типографические компоненты, которые поставляет библиотека.
-
-```ts
-import { BodyL, DsplL, H3 } from '@salutejs/sdds-sbcom';
-```
-
-### Токены типографики на примере компонента `DsplL`
-
-Так же в пакете есть типографические токены, для случаев, когда необходимо точечно применить типографику к контейнеру.
-
-```tsx
-import { CSSObject } from 'styled-components';
-
-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;
-```
-
-## Как разрабатывать
-
-Ветка `next-sbcom` - это master + ваши **срочные** изменения
-
-#### Создание pull request для next-sbcom
-
--   создаем ветку от next-sbcom
--   создаем pull request в next-sbcom
-
-На этом этапе мы создаем изменения, которые лягут в основу новой версии за тегом для npm `@next-sbcom`
-
-Такой подход нужен в первую очередь для быстрых независимых релизов.
-
-#### Создание pull request для dev
-
--   создаем ветку от dev
--   создаем pull request в dev
-
-На этом этапе мы дублируем изменения (из next-sbcom) которые лягут в master ветку вашей вертикали.
-
-Это нужно для синхронизации мастера и next-sbcom.
-
-#### Наименование commit, branch
-
-branch - `fix-update-tokens`
-commit - `fix: update tokens for Select`

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;

package/dist/beta/cjs/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+exports.extends = _extends;
+exports.objectWithoutProperties = _objectWithoutProperties;
+exports.objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;

package/dist/beta/cjs/index.js

@@ -9,4 +9,3 @@ var Tooltip = require('./Tooltip/Tooltip.js');
 
 exports.Popover = Popover.Popover;
 exports.Tooltip = Tooltip.Tooltip;
-//# sourceMappingURL=index.js.map

package/dist/beta/es/Popover/Popover.js

@@ -1,8 +1,25 @@
-import { component, mergeConfig, _beta_popoverConfig } from '@salutejs/plasma-new-hope/css';
-import { config } from './Popover.config.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React, { forwardRef } from 'react';
+import cls from 'classnames';
+import { Popover as Popover$1 } from '@salutejs/plasma-new-hope/beta';
+import modules_f3e577bf from './config/Size.module.css.js';
+import modules_db861ab5 from './config/View.module.css.js';
 
-var mergedConfig = /*#__PURE__*/mergeConfig(_beta_popoverConfig, config);
-var Popover = /*#__PURE__*/component(mergedConfig);
+var _excluded = ["view", "size"];
+var Popover = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
+  var configClassName = cls(modules_db861ab5[view], modules_f3e577bf[size]);
+  return /*#__PURE__*/React.createElement(Popover$1, _extends({
+    ref: ref,
+    appearance: "default"
+    // @ts-expect-error _configClassName is an internal runtime property.
+    ,
+    _configClassName: configClassName
+  }, rest));
+});
 
 export { Popover };
-//# sourceMappingURL=Popover.js.map

package/dist/beta/es/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/es/Popover/config/Size.module.css.js

@@ -0,0 +1,4 @@
+import './Size.css';
+var modules_f3e577bf = {"m":"Popover_Size_m__d2898559"};
+
+export { modules_f3e577bf as default };

package/dist/beta/es/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/es/Popover/config/View.module.css.js

@@ -0,0 +1,4 @@
+import './View.css';
+var modules_db861ab5 = {"default":"Popover_View_default__828fbc31"};
+
+export { modules_db861ab5 as default };

package/dist/beta/es/Tooltip/Tooltip.js

@@ -1,8 +1,24 @@
-import { component, mergeConfig, _beta_tooltipConfig } from '@salutejs/plasma-new-hope/css';
-import { config } from './Tooltip.config.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React, { forwardRef } from 'react';
+import cls from 'classnames';
+import { Tooltip as Tooltip$1 } from '@salutejs/plasma-new-hope/beta';
+import modules_f3e577bf from './config/Size.module.css.js';
+import modules_db861ab5 from './config/View.module.css.js';
 
-var mergedConfig = /*#__PURE__*/mergeConfig(_beta_tooltipConfig, config);
-var Tooltip = /*#__PURE__*/component(mergedConfig);
+var _excluded = ["view", "size"];
+var Tooltip = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
+  var configClassName = cls(modules_db861ab5[view], modules_f3e577bf[size]);
+
+  // @ts-expect-error _configClassName is an internal runtime property.
+  return /*#__PURE__*/React.createElement(Tooltip$1, _extends({
+    ref: ref,
+    _configClassName: configClassName
+  }, rest));
+});
 
 export { Tooltip };
-//# sourceMappingURL=Tooltip.js.map

package/dist/beta/es/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/es/Tooltip/config/Size.module.css.js

@@ -0,0 +1,4 @@
+import './Size.css';
+var modules_f3e577bf = {"m":"Tooltip_Size_m__962a3326"};
+
+export { modules_f3e577bf as default };

package/dist/beta/es/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/es/Tooltip/config/View.module.css.js

@@ -0,0 +1,4 @@
+import './View.css';
+var modules_db861ab5 = {"default":"Tooltip_View_default__62706859"};
+
+export { modules_db861ab5 as default };