npm - @salutejs/plasma-giga - Versions diffs - 0.343.0-next-sbcom.0 → 0.343.0 - Mend

@salutejs/plasma-giga 0.343.0-next-sbcom.0 → 0.343.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (132) hide show

package/README.md CHANGED Viewed

@@ -1,121 +1,256 @@
-# Библиотека компонентов PLASMA GIGA
+# PLASMA-GIGA
-Реализация компонентов для создания веб-приложений.
+Набор компонентов и утилит для создания web-приложений на базе [ReactJS](https://reactjs.org/).
 ## Использование
-Компоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) , [styled-components](https://styled-components.com/) и [emotion](https://emotion.sh/);
+Библиотека реализована с помощью:
-Использование данного пакета предполагает установку зависимостей: `react` & `react-dom`;
+-   [typescript](https://www.typescriptlang.org/)
+-   [styled-components](https://styled-components.com/) (рекомендуем использовать версию `5.3.1`)
-Использование `styled-components` и `emotion` на проекте необязательно, так же как и использование `typescript`.
+Однако их использование **необязательно**!
-**Но** для того чтобы компоненты работали корректно необходимо установить `styled-components` или `emotion`.
-### Установка пакета
+### Установка зависимостей
 ```bash
-$ npm install --save react react-dom
-$ npm install --save @salutejs/plasma-giga @salutejs/plasma-typo @salutejs/plasma-themes
+$ npm install --save @salutejs/plasma-giga @salutejs/plasma-themes
 ```
-Так же надо установить пакет styled-components
+Для работы со `styled-components`, необходимо установить
 ```bash
 $ npm install --save styled-components@5.3.1
 ```
-Или, если вы используете пакет @emotion
+### Использование компонентов
-```bash
-$ npm install --save @emotion/styled @emotion/react @emotion/css
-```
+Все компоненты доступны напрямую из пакета
-## Настройка при работе с пакетом `styled-components`
+```jsx
+import styled from 'styled-components';
+import { Button } from '@salutejs/plasma-giga';
+import { textAccent } from '@salutejs/plasma-themes/tokens';
-Создайте компонент для подключения глобальных стилей:
+export const App = () => {
+    const StyledP = styled.p`
+        color: ${textAccent};
+    `;
-```jsx title="GlobalStyle.tsx"
-import { createGlobalStyle } from 'styled-components';
-import { standard } from '@salutejs/plasma-typo';
-import { plasma_giga__light } from '@salutejs/plasma-themes';
+    return (
+        <>
+            <Button>Hello, GIGA!</Button>
+            <StyledP>Token usage example</StyledP>
+        </>
+    );
+};
+```
-const ThemeStyle = createGlobalStyle(plasma_giga__light);
-const TypoStyle = createGlobalStyle(standard);
+Так же библиотека поставляет компоненты собранные с помощью `styled-components`
-export const GlobalStyle = () => (
-    <>
-        <ThemeStyle />
-        <TypoStyle />
-    </>
-);
+```js
+import { Button } from '@salutejs/plasma-giga/styled-components';
 ```
-## Настройка при работе с пакетом `@emotion`
+## Подключение шрифтов
-Создайте компонент для подключения глобальных стилей:
+Типографическая система основана на фирменных шрифтах.
-```jsx title="GlobalStyle.tsx"
-import { Global, css } from '@emotion/react';
-import { standard } from '@salutejs/plasma-typo';
-import { plasma_giga__light } from '@salutejs/plasma-themes';
+Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на **CDN**
+Для использования типографической системы необходимо загрузить два `css` файла в зависимости от используемых шрифтов в теме.
+### Create react app
-const themeStyle = css(plasma_giga__light);
-const typoStyle = css(standard);
+Добавить внутрь тега `head`.
-export const GlobalStyle = () => (
-    <>
-        <Global styles={themeStyle} />
-        <Global styles={typoStyle} />
-    </>
-);
+```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>
 ```
-### Корень приложения
+### NextJs
-В корне приложения вызовите компонент глобальных стилей `GlobalStyle`:
+```tsx
+import Head from 'next/head';
+import { H2, Button } from '@salutejs/plasma-giga';
+export default function Home() {
+    return (
+        <>
+            <Head>
+                <title>Create Next App with plasma-giga 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>
+        </>
+    );
+}
+```
+## Подключение темы
+Точкой входа является корень приложения:
 -   Если вы используете [Create React App](https://create-react-app.dev), делайте вызов внутри `src/index.tsx`.
 -   Если вы используете [Next.js](https://nextjs.org/), создайте файл `pages/_app.tsx` и подключите стили в нем.
-Для корректной работы server side rendering приложение нужно обернуть `SSRProvider` (доступен в plasma-giga);
+### CSS
-### Использование компонентов
+Возможные дополнительные настройки bundle tools для проекта:
+<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>
-Все компоненты styled-components доступны из директории `components` или напрямую из пакета:
+В файле, где происходит подключение всех стилей, например `index.css`
+```css
+@import '@salutejs/plasma-themes/css/plasma_giga__light.css';
+```
 ```jsx
-// App.tsx
-import { Button } from '@salutejs/plasma-giga';
-import { textAccent } from '@salutejs/plasma-themes/tokens/plasma-giga';
+import React from 'react';
+import { Button, BodyL } from '@salutejs/plasma-giga';
-export const App = () => {
-    return (
-        <Button>Hello, Plasma Giga!</Button>
+import 'index.css';
-        <p style={{color: textAccent}}>
-            Token usage example
-        </p>
+const App = () => {
+    return (
+        <>
+            <BodyL>Hello GIGA</BodyL>
+            <Button text="This is themed button" />
+        </>
     );
 };
-```
-#### `@emotion`
+export default App;
+```
-Все компоненты `@emotion` доступны из директории `emotion`:
+### Styled-components
 ```jsx
-// App.tsx
-import { Button } from '@salutejs/plasma-giga/emotion';
-import { textAccent } from '@salutejs/plasma-tokens/brands/plasma-giga';
+import React from 'react';
+import { createGlobalStyle } from 'styled-components';
+import { Button, BodyL } from '@salutejs/plasma-giga/styled-components';
+import { plasma_giga__light } from '@salutejs/plasma-themes';
-export const App = () => {
+const Theme = createGlobalStyle(plasma_giga__light);
+const App = () => {
     return (
         <>
-            <Button>Hello, Plasma Giga!</Button>
-            <p style={{ color: textAccent }}>Token usage example</p>
+            <Theme />
+            <BodyL>Hello GIGA</BodyL>
+            <Button text="This is themed button" />
         </>
     );
 };
+export default App;
+```
+## Токены
+Все `css` токены завернуты в `js` переменные для более удобного доступа:
+```js
+/** Основной цвет текста */
+export const textPrimary = 'var(--text-primary, #F5F5F5)';
+/** Основной фон */
+export const backgroundPrimary = 'var(--background-primary, #000000)';
+```
+### Способы подключения
+Есть два пути импорта токенов:
+-   Из вертикали `@salutejs/plasma-themes/tokens` (подходит в большинстве случаев, т.к там лежит весь базовый набор токенов)
+-   Непосредственно из темы `@salutejs/plasma-themes/tokens/plasma_giga` (следует использовать, когда необходимо импортировать уникальные токены, которые используются только в этой теме)
+### Использование
+```jsx
+import React from 'react';
+import styled from 'styled-components';
+import { textAccent, backgroundPrimary, textL } from '@salutejs/plasma-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 GIGA</span>
+            </Container>
+        </AppStyled>
+    );
+};
+export default App;
+```
+## Типографика
+Рекомендуем использовать типографические компоненты, которые поставляет библиотека.
+```ts
+import { BodyL, DsplL, H3 } from '@salutejs/plasma-giga';
+```
+### Токены типографики на примере компонента `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;
 ```

package/README.mdx CHANGED Viewed

@@ -1,128 +1,6 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta, Markdown } from "@storybook/addon-docs/blocks";
+import ReadmeMd from './README.md?raw';
 <Meta title="About" />
-# Библиотека компонентов PLASMA GIGA
-Реализация компонентов для создания веб-приложений.
-## Использование
-Компоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) , [styled-components](https://styled-components.com/) и [emotion](https://emotion.sh/);
-Использование данного пакета предполагает установку зависимостей: `react` & `react-dom`;
-Использование `styled-components` и `emotion` на проекте необязательно, так же как и использование `typescript`.
-**Но** для того чтобы компоненты работали корректно необходимо установить `styled-components` или `emotion`.
-### Установка пакета
-```bash
-$ npm install --save react react-dom
-$ npm install --save @salutejs/plasma-giga @salutejs/plasma-typo @salutejs/plasma-themes
-```
-Так же надо установить пакет styled-components
-```bash
-$ npm install --save styled-components@5.3.1
-```
-Или, если вы используете пакет @emotion
-```bash
-$ npm install --save @emotion/styled @emotion/react @emotion/css
-```
-## Настройка при работе с пакетом `styled-components`
-Создайте компонент для подключения глобальных стилей:
-```jsx title="GlobalStyle.tsx"
-import { createGlobalStyle } from 'styled-components';
-import { standard } from '@salutejs/plasma-typo';
-import { plasma_giga__light } from '@salutejs/plasma-themes';
-const ThemeStyle = createGlobalStyle(plasma_giga__light);
-const TypoStyle = createGlobalStyle(standard);
-export const GlobalStyle = () => (
-    <>
-        <ThemeStyle />
-        <TypoStyle />
-    </>
-);
-```
-## Настройка при работе с пакетом `@emotion`
-Создайте компонент для подключения глобальных стилей:
-```jsx title="GlobalStyle.tsx"
-import { Global, css } from '@emotion/react';
-import { standard } from '@salutejs/plasma-typo';
-import { plasma_giga__light } from '@salutejs/plasma-themes';
-const themeStyle = css(plasma_giga__light);
-const typoStyle = css(standard);
-export const GlobalStyle = () => (
-    <>
-        <Global styles={themeStyle} />
-        <Global styles={typoStyle} />
-    </>
-);
-```
-### Корень приложения
-В корне приложения вызовите компонент глобальных стилей `GlobalStyle`:
--   Если вы используете [Create React App](https://create-react-app.dev), делайте вызов внутри `src/index.tsx`.
--   Если вы используете [Next.js](https://nextjs.org/), создайте файл `pages/_app.tsx` и подключите стили в нем.
-Для корректной работы server side rendering приложение нужно обернуть `SSRProvider` (доступен в plasma-giga);
-### Использование компонентов
-Все компоненты доступны из папки `components` или напрямую из пакета:
-```jsx
-// App.tsx
-import { Button } from '@salutejs/plasma-giga';
-import { textAccent } from '@salutejs/plasma-themes/tokens/plasma-giga';
-export const App = () => {
-    return (
-        <Button>Hello, Plasma Giga!</Button>
-        <p style={{color: textAccent}}>
-            Token usage example
-        </p>
-    );
-};
-```
-#### `@emotion`
-Все компоненты `@emotion` доступны из директории `emotion`:
-```jsx
-// App.tsx
-import { Button } from '@salutejs/plasma-giga/emotion';
-import { textAccent } from '@salutejs/plasma-tokens/brands/plasma-giga';
-export const App = () => {
-    return (
-        <>
-            <Button>Hello, Plasma Giga!</Button>
-            <p style={{ color: textAccent }}>
-                Token usage example
-            </p>
-        </>
-    );
-};
-```
+<Markdown>{ReadmeMd}</Markdown>

package/dist/css/cjs/_virtual/_rollupPluginBabelHelpers.js CHANGED Viewed

@@ -16,6 +16,35 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
 exports.extends = _extends;
+exports.objectWithoutProperties = _objectWithoutProperties;
+exports.objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
 //# sourceMappingURL=_rollupPluginBabelHelpers.js.map

package/dist/css/cjs/_virtual/_rollupPluginBabelHelpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"_rollupPluginBabelHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"_rollupPluginBabelHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/css/cjs/components/Button/Button.js CHANGED Viewed

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var css = require('@salutejs/plasma-new-hope/css');
+var plasmaNewHope = require('@salutejs/plasma-new-hope');
 var Button_config = require('./Button.config.js');
 var mergedConfig = /*#__PURE__*/css.mergeConfig(css.buttonConfig, Button_config.config);
 var ButtonComponent = /*#__PURE__*/css.component(mergedConfig);
 /**
  * Кнопка.
  */
-var Button = ButtonComponent;
+var Button = /*#__PURE__*/plasmaNewHope.makePolymorphic(ButtonComponent, 'button');
 exports.Button = Button;
 //# sourceMappingURL=Button.js.map

package/dist/css/cjs/components/Button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../../../../../src-css/components/Button/Button.tsx"],"sourcesContent":["import { buttonConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/css';\n\nimport { config } from './Button.config';\n\nconst mergedConfig = mergeConfig(buttonConfig, config);\nconst ButtonComponent = component(mergedConfig);\n\~~nexport type ButtonProps = typeof ButtonComponent;\~~n\n/*\n Кнопка.\n */\nexport const Button = ButtonComponent;\n"],"names":["mergedConfig","mergeConfig","buttonConfig","config","ButtonComponent","component","Button"],"mappings":"~~;;;;;;;AAIA~~,IAAMA,YAAY,gBAAGC,eAAW,CAACC,gBAAY,EAAEC,oBAAM,CAAC;AACtD,IAAMC,eAAe,gBAAGC,aAAS,CAACL,YAAY,CAAC~~;AAI~~/C;AACA;AACA;AACO,IAAMM,MAAM,~~GAAGF~~;;;;"}
1	+ {"version":3,"file":"Button.js","sources":["../../../../../src-css/components/Button/Button.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { buttonConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/css';\nimport { makePolymorphic } from '@salutejs/plasma-new-hope';\n\nimport { config } from './Button.config';\n\nconst mergedConfig = mergeConfig(buttonConfig, config);\nconst ButtonComponent = component(mergedConfig);\n\n/*\n Кнопка.\n */\nexport const Button = makePolymorphic(ButtonComponent, 'button');\nexport type ButtonProps = ComponentProps<typeof ButtonComponent>;\n"],"names":["mergedConfig","mergeConfig","buttonConfig","config","ButtonComponent","component","Button","makePolymorphic"],"mappings":";;;;;;;;AAMA,IAAMA,YAAY,gBAAGC,eAAW,CAACC,gBAAY,EAAEC,oBAAM,CAAC;AACtD,IAAMC,eAAe,gBAAGC,aAAS,CAACL,YAAY,CAAC;;AAE/C;AACA;AACA;AACO,IAAMM,MAAM,gBAAGC,6BAAe,CAACH,eAAe,EAAE,QAAQ;;;;"}

package/dist/css/cjs/components/DatePicker/DatePicker.js CHANGED Viewed

@@ -10,24 +10,18 @@ var mergedConfigDefault = /*#__PURE__*/css.mergeConfig(css.datePickerConfig, Dat
 var DatePickerDefault = /*#__PURE__*/css.component(mergedConfigDefault);
 var mergedConfigClear = /*#__PURE__*/css.mergeConfig(css.datePickerConfig, DatePicker_clear_config.config);
 var DatePickerClear = /*#__PURE__*/css.component(mergedConfigClear);
-var DatePicker = /*#__PURE__*/css.createConditionalComponent(DatePickerDefault, [{
-  conditions: {
-    prop: 'appearance',
-    value: 'clear'
-  },
-  component: DatePickerClear
-}]);
+var DatePicker = /*#__PURE__*/css.createConditionalComponent({
+  "default": DatePickerDefault,
+  clear: DatePickerClear
+});
 var mergedRangeConfigDefault = /*#__PURE__*/css.mergeConfig(css.datePickerRangeConfig, DatePicker_config.config);
 var DatePickerRangeDefault = /*#__PURE__*/css.component(mergedRangeConfigDefault);
 var mergedRangeConfigClea = /*#__PURE__*/css.mergeConfig(css.datePickerRangeConfig, DatePicker_clear_config.config);
 var DatePickerRangeClear = /*#__PURE__*/css.component(mergedRangeConfigClea);
-var DatePickerRange = /*#__PURE__*/css.createConditionalComponent(DatePickerRangeDefault, [{
-  conditions: {
-    prop: 'appearance',
-    value: 'clear'
-  },
-  component: DatePickerRangeClear
-}]);
+var DatePickerRange = /*#__PURE__*/css.createConditionalComponent({
+  "default": DatePickerRangeDefault,
+  clear: DatePickerRangeClear
+});
 exports.DatePicker = DatePicker;
 exports.DatePickerClear = DatePickerClear;

package/dist/css/cjs/components/DatePicker/DatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.js","sources":["../../../../../src-css/components/DatePicker/DatePicker.ts"],"sourcesContent":["import {\n datePickerConfig,\n datePickerRangeConfig,\n component,\n mergeConfig,\n createConditionalComponent,\n} from '@salutejs/plasma-new-hope/css';\n\nimport { config } from './DatePicker.config';\nimport { config as configClear } from './DatePicker.clear.config';\n\nconst mergedConfigDefault = mergeConfig(datePickerConfig, config);\nexport const DatePickerDefault = component(mergedConfigDefault);\n\nconst mergedConfigClear = mergeConfig(datePickerConfig, configClear);\nexport const DatePickerClear = component(mergedConfigClear);\n\nexport const DatePicker = createConditionalComponent(~~DatePickerDefault, [~~\n ~~{\n conditions~~: ~~{ prop: 'appearance', value: 'clear' }~~,\n ~~component~~: DatePickerClear,\n }~~,\n]~~);\n\nconst mergedRangeConfigDefault = mergeConfig(datePickerRangeConfig, config);\nexport const DatePickerRangeDefault = component(mergedRangeConfigDefault);\n\nconst mergedRangeConfigClea = mergeConfig(datePickerRangeConfig, configClear);\nexport const DatePickerRangeClear = component(mergedRangeConfigClea);\n\nexport const DatePickerRange = createConditionalComponent(~~DatePickerRangeDefault, [~~\n ~~{\n conditions~~: ~~{ prop: 'appearance', value: 'clear' }~~,\n ~~component~~: DatePickerRangeClear,\n }~~,\n]~~);\n"],"names":["mergedConfigDefault","mergeConfig","datePickerConfig","config","DatePickerDefault","component","mergedConfigClear","configClear","DatePickerClear","DatePicker","createConditionalComponent","~~conditions~~","~~prop","value","~~mergedRangeConfigDefault","datePickerRangeConfig","DatePickerRangeDefault","mergedRangeConfigClea","DatePickerRangeClear","DatePickerRange"],"mappings":";;;;;;;;AAWA,IAAMA,mBAAmB,gBAAGC,eAAW,CAACC,oBAAgB,EAAEC,wBAAM,CAAC;IACpDC,iBAAiB,gBAAGC,aAAS,CAACL,mBAAmB;AAE9D,IAAMM,iBAAiB,gBAAGL,eAAW,CAACC,oBAAgB,EAAEK,8BAAW,CAAC;IACvDC,eAAe,gBAAGH,aAAS,CAACC,iBAAiB;~~IAE7CG~~,UAAU,gBAAGC,8BAA0B,~~CAACN,iBAAiB,EAAE,CACpE~~;~~AACIO~~,~~EAAAA~~,~~UAAU~~,~~EAAE;AAAEC~~,~~IAAAA,IAAI,EAAE,YAAY~~;~~AAAEC~~,~~IAAAA~~,KAAK,~~EAAE~~;~~GAAS;AAClDR~~,~~EAAAA,SAAS,EAAEG;AACf,~~CAAC~~,CACJ~~;AAED,~~IAAMM~~,wBAAwB,~~gBAAGb~~,eAAW,~~CAACc~~,yBAAqB,~~EAAEZ~~,wBAAM,CAAC;~~IAC9Da~~,sBAAsB,~~gBAAGX~~,aAAS,~~CAACS~~,wBAAwB;AAExE,IAAMG,qBAAqB,~~gBAAGhB~~,eAAW,~~CAACc~~,yBAAqB,~~EAAER~~,8BAAW,CAAC;~~IAChEW~~,oBAAoB,~~gBAAGb~~,aAAS,~~CAACY~~,qBAAqB;~~IAEtDE~~,eAAe,~~gBAAGT~~,8BAA0B,~~CAACM,sBAAsB,EAAE,CAC9E~~;~~AACIL~~,~~EAAAA~~,~~UAAU~~,~~EAAE;AAAEC~~,~~IAAAA,IAAI,EAAE,YAAY~~;~~AAAEC~~,~~IAAAA~~,KAAK,~~EAAE~~;~~GAAS;AAClDR~~,~~EAAAA,SAAS,EAAEa;AACf,~~CAAC~~,CACJ~~;;;;;;;;;"}
1	+ {"version":3,"file":"DatePicker.js","sources":["../../../../../src-css/components/DatePicker/DatePicker.ts"],"sourcesContent":["import {\n datePickerConfig,\n datePickerRangeConfig,\n component,\n mergeConfig,\n createConditionalComponent,\n} from '@salutejs/plasma-new-hope/css';\n\nimport { config } from './DatePicker.config';\nimport { config as configClear } from './DatePicker.clear.config';\n\nconst mergedConfigDefault = mergeConfig(datePickerConfig, config);\nexport const DatePickerDefault = component(mergedConfigDefault);\n\nconst mergedConfigClear = mergeConfig(datePickerConfig, configClear);\nexport const DatePickerClear = component(mergedConfigClear);\n\nexport const DatePicker = createConditionalComponent({\n default: DatePickerDefault,\n clear: DatePickerClear,\n});\n\nconst mergedRangeConfigDefault = mergeConfig(datePickerRangeConfig, config);\nexport const DatePickerRangeDefault = component(mergedRangeConfigDefault);\n\nconst mergedRangeConfigClea = mergeConfig(datePickerRangeConfig, configClear);\nexport const DatePickerRangeClear = component(mergedRangeConfigClea);\n\nexport const DatePickerRange = createConditionalComponent({\n default: DatePickerRangeDefault,\n clear: DatePickerRangeClear,\n});\n"],"names":["mergedConfigDefault","mergeConfig","datePickerConfig","config","DatePickerDefault","component","mergedConfigClear","configClear","DatePickerClear","DatePicker","createConditionalComponent","clear","mergedRangeConfigDefault","datePickerRangeConfig","DatePickerRangeDefault","mergedRangeConfigClea","DatePickerRangeClear","DatePickerRange"],"mappings":";;;;;;;;AAWA,IAAMA,mBAAmB,gBAAGC,eAAW,CAACC,oBAAgB,EAAEC,wBAAM,CAAC;IACpDC,iBAAiB,gBAAGC,aAAS,CAACL,mBAAmB;AAE9D,IAAMM,iBAAiB,gBAAGL,eAAW,CAACC,oBAAgB,EAAEK,8BAAW,CAAC;IACvDC,eAAe,gBAAGH,aAAS,CAACC,iBAAiB;AAEnD,IAAMG,UAAU,gBAAGC,8BAA0B,CAAC;AACjD,EAAA,SAAA,EAASN,iBAAiB;AAC1BO,EAAAA,KAAK,EAAEH;AACX,CAAC;AAED,IAAMI,wBAAwB,gBAAGX,eAAW,CAACY,yBAAqB,EAAEV,wBAAM,CAAC;IAC9DW,sBAAsB,gBAAGT,aAAS,CAACO,wBAAwB;AAExE,IAAMG,qBAAqB,gBAAGd,eAAW,CAACY,yBAAqB,EAAEN,8BAAW,CAAC;IAChES,oBAAoB,gBAAGX,aAAS,CAACU,qBAAqB;AAE5D,IAAME,eAAe,gBAAGP,8BAA0B,CAAC;AACtD,EAAA,SAAA,EAASI,sBAAsB;AAC/BH,EAAAA,KAAK,EAAEK;AACX,CAAC;;;;;;;;;"}

package/dist/css/cjs/components/Link/Link.config.js CHANGED Viewed

@@ -1,4 +1,4 @@
-require('./Link.config_13xp65i.css');
+require('./Link.config_d4q86q.css');
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/css/cjs/components/Link/Link.config.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.config.js","sources":["../../../../../src-css/components/Link/Link.config.tsx"],"sourcesContent":["import { css, linkTokens as tokens } from '@salutejs/plasma-new-hope/css';\n\nexport const config = {\n defaults: {\n view: 'default',\n focused: 'true',\n },\n variations: {\n view: {\n default: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-primary);\n ${tokens.linkColorHover}: var(--text-primary-hover);\n ${tokens.linkColorActive}: var(--text-primary-active);\n ${tokens.linkColorVisited}: var(--text-primary);\n ${tokens.linkColorVisitedHover}: var(--text-primary-hover);\n ${tokens.linkColorVisitedActive}: var(--text-primary-active);\n ${tokens.linkUnderlineBorder}: 0;\n `,\n secondary: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-secondary);\n ${tokens.linkColorHover}: var(--text-secondary-hover);\n ${tokens.linkColorActive}: var(--text-secondary-active);\n ${tokens.linkColorVisited}: var(--text-secondary);\n ${tokens.linkColorVisitedHover}: var(--text-secondary-hover);\n ${tokens.linkColorVisitedActive}: var(--text-secondary-active);\n ${tokens.linkUnderlineBorder}: 0;\n `,\n tertiary: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-tertiary);\n ${tokens.linkColorHover}: var(--text-tertiary-hover);\n ${tokens.linkColorActive}: var(--text-tertiary-active);\n ${tokens.linkColorVisited}: var(--text-tertiary);\n ${tokens.linkColorVisitedHover}: var(--text-tertiary-hover);\n ${tokens.linkColorVisitedActive}: var(--text-tertiary-active);\n ${tokens.linkUnderlineBorder}: 0;\n `,\n paragraph: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-paragraph);\n ${tokens.linkColorHover}: var(--text-paragraph-hover);\n ${tokens.linkColorActive}: var(--text-paragraph-active);\n ${tokens.linkColorVisited}: var(--text-paragraph);\n ${tokens.linkColorVisitedHover}: var(--text-paragraph-hover);\n ${tokens.linkColorVisitedActive}: var(--text-paragraph-active);\n ${tokens.linkUnderlineBorder}: 0;\n `,\n accent: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-accent);\n ${tokens.linkColorHover}: var(--text-accent-hover);\n ${tokens.linkColorActive}: var(--text-accent-active);\n ${tokens.linkColorVisited}: var(--text-accent);\n ${tokens.linkColorVisitedHover}: var(--text-accent-hover);\n ${tokens.linkColorVisitedActive}: var(--text-accent-active);\n ${tokens.linkUnderlineBorder}: 0;\n `,\n positive: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-positive);\n ${tokens.linkColorHover}: var(--text-positive-hover);\n ${tokens.linkColorActive}: var(--text-positive-active);\n ${tokens.linkColorVisited}: var(--text-positive);\n ${tokens.linkColorVisitedHover}: var(--text-positive-hover);\n ${tokens.linkColorVisitedActive}: var(--text-positive-active);\n ${tokens.linkUnderlineBorder}: 0;\n `,\n warning: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-warning);\n ${tokens.linkColorHover}: var(--text-warning-hover);\n ${tokens.linkColorActive}: var(--text-warning-active);\n ${tokens.linkColorVisited}: var(--text-warning);\n ${tokens.linkColorVisitedHover}: var(--text-warning-hover);\n ${tokens.linkColorVisitedActive}: var(--text-warning-active);\n ${tokens.linkUnderlineBorder}: 0;\n `,\n negative: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-negative);\n ${tokens.linkColorHover}: var(--text-negative-hover);\n ${tokens.linkColorActive}: var(--text-negative-active);\n ${tokens.linkColorVisited}: var(--text-negative);\n ${tokens.linkColorVisitedHover}: var(--text-negative-hover);\n ${tokens.linkColorVisitedActive}: var(--text-negative-active);\n ${tokens.linkUnderlineBorder}: 0;\n `,\n clear: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}:inherit;\n ${tokens.linkColorHover}: inherit;\n ${tokens.linkColorActive}: inherit;\n ${tokens.linkColorVisited}: inherit;\n ${tokens.linkColorVisitedHover}: inherit;\n ${tokens.linkColorVisitedActive}: inherit;\n ${tokens.linkUnderlineBorder}: 0.063rem;\n `,\n },\n disabled: {\n true: css`\n ${tokens.linkDisabledOpacity}: 0.4;\n `,\n },\n focused: {\n true: css`\n ${tokens.linkColorFocus}: var(--text-primary);\n `,\n },\n },\n};\n"],"names":["config","defaults","view","focused","variations","default","secondary","tertiary","paragraph","accent","positive","warning","negative","clear","disabled","true"],"mappings":";;;;AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,OAAO,EAAE;GACZ;AACDC,EAAAA,UAAU,EAAE;AACRF,IAAAA,IAAI,EAAE;AACFG,MAAAA,SAAAA,EAAO,~~SASN~~;AACDC,MAAAA,SAAS,EAAA,~~UASR~~;AACDC,MAAAA,QAAQ,EAAA,~~UASP~~;AACDC,MAAAA,SAAS,EAAA,~~UASR~~;AACDC,MAAAA,MAAM,EAAA,~~UASL~~;AACDC,MAAAA,QAAQ,EAAA,~~UASP~~;AACDC,MAAAA,OAAO,EAAA,~~UASN~~;AACDC,MAAAA,QAAQ,EAAA,~~UASP~~;AACDC,MAAAA,KAAK,EAAA;~~KAUR~~;AACDC,IAAAA,QAAQ,EAAE;MACNC,MAAAA,EAAI;KAGP;AACDZ,IAAAA,OAAO,EAAE;MACLY,MAAAA,EAAI;AAGR;AACJ;AACJ;;;;"}
1	+ {"version":3,"file":"Link.config.js","sources":["../../../../../src-css/components/Link/Link.config.tsx"],"sourcesContent":["import { css, linkTokens as tokens } from '@salutejs/plasma-new-hope/css';\n\nexport const config = {\n defaults: {\n view: 'default',\n focused: 'true',\n },\n variations: {\n view: {\n default: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-primary);\n ${tokens.linkColorHover}: var(--text-primary-hover);\n ${tokens.linkColorActive}: var(--text-primary-active);\n ${tokens.linkColorVisited}: var(--text-primary);\n ${tokens.linkColorVisitedHover}: var(--text-primary-hover);\n ${tokens.linkColorVisitedActive}: var(--text-primary-active);\n ${tokens.linkUnderlineBorder}: 0.063rem;\n ${tokens.linkUnderlineOffset}: 0.25rem;\n `,\n secondary: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-secondary);\n ${tokens.linkColorHover}: var(--text-secondary-hover);\n ${tokens.linkColorActive}: var(--text-secondary-active);\n ${tokens.linkColorVisited}: var(--text-secondary);\n ${tokens.linkColorVisitedHover}: var(--text-secondary-hover);\n ${tokens.linkColorVisitedActive}: var(--text-secondary-active);\n ${tokens.linkUnderlineBorder}: 0.063rem;\n ${tokens.linkUnderlineOffset}: 0.25rem;\n `,\n tertiary: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-tertiary);\n ${tokens.linkColorHover}: var(--text-tertiary-hover);\n ${tokens.linkColorActive}: var(--text-tertiary-active);\n ${tokens.linkColorVisited}: var(--text-tertiary);\n ${tokens.linkColorVisitedHover}: var(--text-tertiary-hover);\n ${tokens.linkColorVisitedActive}: var(--text-tertiary-active);\n ${tokens.linkUnderlineBorder}: 0.063rem;\n ${tokens.linkUnderlineOffset}: 0.25rem;\n `,\n paragraph: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-paragraph);\n ${tokens.linkColorHover}: var(--text-paragraph-hover);\n ${tokens.linkColorActive}: var(--text-paragraph-active);\n ${tokens.linkColorVisited}: var(--text-paragraph);\n ${tokens.linkColorVisitedHover}: var(--text-paragraph-hover);\n ${tokens.linkColorVisitedActive}: var(--text-paragraph-active);\n ${tokens.linkUnderlineBorder}: 0.063rem;\n ${tokens.linkUnderlineOffset}: 0.25rem;\n `,\n accent: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-accent);\n ${tokens.linkColorHover}: var(--text-accent-hover);\n ${tokens.linkColorActive}: var(--text-accent-active);\n ${tokens.linkColorVisited}: var(--text-accent);\n ${tokens.linkColorVisitedHover}: var(--text-accent-hover);\n ${tokens.linkColorVisitedActive}: var(--text-accent-active);\n ${tokens.linkUnderlineBorder}: 0.063rem;\n ${tokens.linkUnderlineOffset}: 0.25rem;\n `,\n positive: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-positive);\n ${tokens.linkColorHover}: var(--text-positive-hover);\n ${tokens.linkColorActive}: var(--text-positive-active);\n ${tokens.linkColorVisited}: var(--text-positive);\n ${tokens.linkColorVisitedHover}: var(--text-positive-hover);\n ${tokens.linkColorVisitedActive}: var(--text-positive-active);\n ${tokens.linkUnderlineBorder}: 0.063rem;\n ${tokens.linkUnderlineOffset}: 0.25rem;\n `,\n warning: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-warning);\n ${tokens.linkColorHover}: var(--text-warning-hover);\n ${tokens.linkColorActive}: var(--text-warning-active);\n ${tokens.linkColorVisited}: var(--text-warning);\n ${tokens.linkColorVisitedHover}: var(--text-warning-hover);\n ${tokens.linkColorVisitedActive}: var(--text-warning-active);\n ${tokens.linkUnderlineBorder}: 0.063rem;\n ${tokens.linkUnderlineOffset}: 0.25rem;\n `,\n negative: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}: var(--text-negative);\n ${tokens.linkColorHover}: var(--text-negative-hover);\n ${tokens.linkColorActive}: var(--text-negative-active);\n ${tokens.linkColorVisited}: var(--text-negative);\n ${tokens.linkColorVisitedHover}: var(--text-negative-hover);\n ${tokens.linkColorVisitedActive}: var(--text-negative-active);\n ${tokens.linkUnderlineBorder}: 0.063rem;\n ${tokens.linkUnderlineOffset}: 0.25rem;\n `,\n clear: css`\n ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);\n ${tokens.linkColor}:inherit;\n ${tokens.linkColorHover}: inherit;\n ${tokens.linkColorActive}: inherit;\n ${tokens.linkColorVisited}: inherit;\n ${tokens.linkColorVisitedHover}: inherit;\n ${tokens.linkColorVisitedActive}: inherit;\n ${tokens.linkUnderlineBorder}: 0.063rem;\n ${tokens.linkUnderlineOffset}: 0.25rem;\n `,\n },\n disabled: {\n true: css`\n ${tokens.linkDisabledOpacity}: 0.4;\n `,\n },\n focused: {\n true: css`\n ${tokens.linkColorFocus}: var(--text-primary);\n `,\n },\n },\n};\n"],"names":["config","defaults","view","focused","variations","default","secondary","tertiary","paragraph","accent","positive","warning","negative","clear","disabled","true"],"mappings":";;;;AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,OAAO,EAAE;GACZ;AACDC,EAAAA,UAAU,EAAE;AACRF,IAAAA,IAAI,EAAE;AACFG,MAAAA,SAAAA,EAAO,SAUN;AACDC,MAAAA,SAAS,EAAA,UAUR;AACDC,MAAAA,QAAQ,EAAA,UAUP;AACDC,MAAAA,SAAS,EAAA,UAUR;AACDC,MAAAA,MAAM,EAAA,UAUL;AACDC,MAAAA,QAAQ,EAAA,UAUP;AACDC,MAAAA,OAAO,EAAA,UAUN;AACDC,MAAAA,QAAQ,EAAA,UAUP;AACDC,MAAAA,KAAK,EAAA;KAWR;AACDC,IAAAA,QAAQ,EAAE;MACNC,MAAAA,EAAI;KAGP;AACDZ,IAAAA,OAAO,EAAE;MACLY,MAAAA,EAAI;AAGR;AACJ;AACJ;;;;"}

package/dist/css/cjs/components/Link/{Link.config_13xp65i.css → Link.config_d4q86q.css} RENAMED Viewed

@@ -1,11 +1,11 @@
-.dee0pdb{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-primary);--plasma-link-color-hover:var(--text-primary-hover);--plasma-link-color-active:var(--text-primary-active);--plasma-link-color-visited:var(--text-primary);--plasma-link-color-visited-hover:var(--text-primary-hover);--plasma-link-color-visited-active:var(--text-primary-active);--plasma-link-underline-border:0;}
-.s1vofuw3{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-secondary);--plasma-link-color-hover:var(--text-secondary-hover);--plasma-link-color-active:var(--text-secondary-active);--plasma-link-color-visited:var(--text-secondary);--plasma-link-color-visited-hover:var(--text-secondary-hover);--plasma-link-color-visited-active:var(--text-secondary-active);--plasma-link-underline-border:0;}
-.t1ahuwbf{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-tertiary);--plasma-link-color-hover:var(--text-tertiary-hover);--plasma-link-color-active:var(--text-tertiary-active);--plasma-link-color-visited:var(--text-tertiary);--plasma-link-color-visited-hover:var(--text-tertiary-hover);--plasma-link-color-visited-active:var(--text-tertiary-active);--plasma-link-underline-border:0;}
-.p1ui8jxv{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-paragraph);--plasma-link-color-hover:var(--text-paragraph-hover);--plasma-link-color-active:var(--text-paragraph-active);--plasma-link-color-visited:var(--text-paragraph);--plasma-link-color-visited-hover:var(--text-paragraph-hover);--plasma-link-color-visited-active:var(--text-paragraph-active);--plasma-link-underline-border:0;}
-.a19bifbw{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-accent);--plasma-link-color-hover:var(--text-accent-hover);--plasma-link-color-active:var(--text-accent-active);--plasma-link-color-visited:var(--text-accent);--plasma-link-color-visited-hover:var(--text-accent-hover);--plasma-link-color-visited-active:var(--text-accent-active);--plasma-link-underline-border:0;}
-.p11g3bq7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-positive);--plasma-link-color-hover:var(--text-positive-hover);--plasma-link-color-active:var(--text-positive-active);--plasma-link-color-visited:var(--text-positive);--plasma-link-color-visited-hover:var(--text-positive-hover);--plasma-link-color-visited-active:var(--text-positive-active);--plasma-link-underline-border:0;}
-.w1j34p05{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-warning);--plasma-link-color-hover:var(--text-warning-hover);--plasma-link-color-active:var(--text-warning-active);--plasma-link-color-visited:var(--text-warning);--plasma-link-color-visited-hover:var(--text-warning-hover);--plasma-link-color-visited-active:var(--text-warning-active);--plasma-link-underline-border:0;}
-.n1ozoxtr{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-negative);--plasma-link-color-hover:var(--text-negative-hover);--plasma-link-color-active:var(--text-negative-active);--plasma-link-color-visited:var(--text-negative);--plasma-link-color-visited-hover:var(--text-negative-hover);--plasma-link-color-visited-active:var(--text-negative-active);--plasma-link-underline-border:0;}
-.cwo06rj{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:inherit;--plasma-link-color-hover:inherit;--plasma-link-color-active:inherit;--plasma-link-color-visited:inherit;--plasma-link-color-visited-hover:inherit;--plasma-link-color-visited-active:inherit;--plasma-link-underline-border:0.063rem;}
+.dee0pdb{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-primary);--plasma-link-color-hover:var(--text-primary-hover);--plasma-link-color-active:var(--text-primary-active);--plasma-link-color-visited:var(--text-primary);--plasma-link-color-visited-hover:var(--text-primary-hover);--plasma-link-color-visited-active:var(--text-primary-active);--plasma-link-underline-border:0.063rem;--plasma-link-underline-offset:0.25rem;}
+.s1vofuw3{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-secondary);--plasma-link-color-hover:var(--text-secondary-hover);--plasma-link-color-active:var(--text-secondary-active);--plasma-link-color-visited:var(--text-secondary);--plasma-link-color-visited-hover:var(--text-secondary-hover);--plasma-link-color-visited-active:var(--text-secondary-active);--plasma-link-underline-border:0.063rem;--plasma-link-underline-offset:0.25rem;}
+.t1ahuwbf{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-tertiary);--plasma-link-color-hover:var(--text-tertiary-hover);--plasma-link-color-active:var(--text-tertiary-active);--plasma-link-color-visited:var(--text-tertiary);--plasma-link-color-visited-hover:var(--text-tertiary-hover);--plasma-link-color-visited-active:var(--text-tertiary-active);--plasma-link-underline-border:0.063rem;--plasma-link-underline-offset:0.25rem;}
+.p1ui8jxv{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-paragraph);--plasma-link-color-hover:var(--text-paragraph-hover);--plasma-link-color-active:var(--text-paragraph-active);--plasma-link-color-visited:var(--text-paragraph);--plasma-link-color-visited-hover:var(--text-paragraph-hover);--plasma-link-color-visited-active:var(--text-paragraph-active);--plasma-link-underline-border:0.063rem;--plasma-link-underline-offset:0.25rem;}
+.a19bifbw{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-accent);--plasma-link-color-hover:var(--text-accent-hover);--plasma-link-color-active:var(--text-accent-active);--plasma-link-color-visited:var(--text-accent);--plasma-link-color-visited-hover:var(--text-accent-hover);--plasma-link-color-visited-active:var(--text-accent-active);--plasma-link-underline-border:0.063rem;--plasma-link-underline-offset:0.25rem;}
+.p11g3bq7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-positive);--plasma-link-color-hover:var(--text-positive-hover);--plasma-link-color-active:var(--text-positive-active);--plasma-link-color-visited:var(--text-positive);--plasma-link-color-visited-hover:var(--text-positive-hover);--plasma-link-color-visited-active:var(--text-positive-active);--plasma-link-underline-border:0.063rem;--plasma-link-underline-offset:0.25rem;}
+.w1j34p05{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-warning);--plasma-link-color-hover:var(--text-warning-hover);--plasma-link-color-active:var(--text-warning-active);--plasma-link-color-visited:var(--text-warning);--plasma-link-color-visited-hover:var(--text-warning-hover);--plasma-link-color-visited-active:var(--text-warning-active);--plasma-link-underline-border:0.063rem;--plasma-link-underline-offset:0.25rem;}
+.n1ozoxtr{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-negative);--plasma-link-color-hover:var(--text-negative-hover);--plasma-link-color-active:var(--text-negative-active);--plasma-link-color-visited:var(--text-negative);--plasma-link-color-visited-hover:var(--text-negative-hover);--plasma-link-color-visited-active:var(--text-negative-active);--plasma-link-underline-border:0.063rem;--plasma-link-underline-offset:0.25rem;}
+.cwo06rj{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:inherit;--plasma-link-color-hover:inherit;--plasma-link-color-active:inherit;--plasma-link-color-visited:inherit;--plasma-link-color-visited-hover:inherit;--plasma-link-color-visited-active:inherit;--plasma-link-underline-border:0.063rem;--plasma-link-underline-offset:0.25rem;}
 .t1v6tmnt{--plasma-link-disabled-opacity:0.4;}
 .t1obm9h5{--plasma-link-color-focus:var(--text-primary);}