@salutejs/sdds-dfa 0.368.0-next-sbcom.0 → 0.368.0

package/README.md

@@ -1,65 +1,148 @@
 # Библиотека компонентов SDDS DFA
 
+[![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-dfa.svg)](https://www.npmjs.com/package/@salutejs/sdds-dfa)
+[![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-dfa%2Fpackage.json)](https://www.npmjs.com/package/@salutejs/sdds-themes)
+
 Реализация компонентов для создания веб-приложений.
 
-## Использование
+Компоненты реализованы с помощью [React](https://react.dev/) и поставляются в варианте на [styled-components](https://styled-components.com/).
 
-Компоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);
+## Ссылки
 
-Использование данного пакета предполагает установку зависимостей: `react` & `react-dom`;
+-   [Документация](https://plasma.sberdevices.ru/sdds-dfa/) — гайды, список компонентов с примерами и API
+-   [Подключение в Next.js](https://plasma.sberdevices.ru/sdds-dfa/next/)
+-   [Changelog](https://plasma.sberdevices.ru/changelog/?vertical=SDDSDFA&platform=React&version=0.367.0)
+-   [Задать вопрос или сообщить о проблеме](https://github.com/salute-developers/plasma/issues)
 
-Использование `styled-components` на проект необязательно, так же как и использование `typescript`.
+## Установка
 
-### Установка пакета
+Требуются `react` и `react-dom` версии `16.13.1` или выше, а также `styled-components` версии `5.3.1`:
 
 ```bash
 $ npm install --save react react-dom
-$ npm install --save styled-components@5.3.1
 $ npm install --save @salutejs/sdds-dfa @salutejs/sdds-themes
+$ npm install --save styled-components@5.3.1
 ```
 
-## Настройка
+## Варианты поставки
 
-Создайте компонент для подключения глобальных стилей:
+| Точка входа | Реализация | Дополнительные зависимости |
+| ----------- | ---------- | --------------------------- |
+| `@salutejs/sdds-dfa` | styled-components | `styled-components@5.3.1` |
 
-```jsx title="GlobalStyle.tsx"
-import { createGlobalStyle } from 'styled-components';
-import { sdds_dfa__light } from '@salutejs/sdds-themes';
+```jsx
+import { Button } from '@salutejs/sdds-dfa';
+```
+
+## Подключение шрифтов
 
-const ThemeStyle = createGlobalStyle(sdds_dfa__light);
+Типографическая система основана на фирменных шрифтах, они поставляются с CDN.
 
-export const GlobalStyle = () => (
-    <>
-        <ThemeStyle />
-    </>
-);
+Добавьте три css-файла внутрь тега `<head>`.
+
+```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" />
 ```
 
-### Корень приложения
+## Подключение темы
 
-В корне приложения вызовите компонент глобальных стилей `GlobalStyle`:
+Тема подключается один раз в корне приложения.
 
--   Если вы используете [Create React App](https://create-react-app.dev), делайте вызов внутри `src/index.tsx`.
--   Если вы используете [Next.js](https://nextjs.org/), создайте файл `pages/_app.tsx` и подключите стили в нем.
+> **Примечание:** Для [Next.js](https://nextjs.org/) — в `pages/_app.tsx`.
 
-Для корректной работы `SSR - server side rendering` - приложение нужно обернуть в `SSRProvider` (доступен в `sdds-dfa`);
+Тема включает в себя цветовые и типографические токены.
 
-### Использование компонентов
+Доступны светлая и тёмная темы — `sdds_dfa__light` и `sdds_dfa__dark`.
 
-Все компоненты доступны из папки `components` или напрямую из пакета:
+```jsx
+import React from 'react';
+import { createGlobalStyle } from 'styled-components';
+import { sdds_dfa__light } from '@salutejs/sdds-themes';
+
+const Theme = createGlobalStyle(sdds_dfa__light);
+
+// вызовите <Theme /> в корне приложения
+```
+
+Переключение темы в рантайме описано в [документации](https://plasma.sberdevices.ru/sdds-dfa/).
+
+## Использование компонентов
 
 ```jsx
-// App.tsx
-import { Button } from '@salutejs/sdds-dfa';
-import { textAccent } from '@salutejs/sdds-themes/tokens/sdds-dfa';
+import React from 'react';
+import { createGlobalStyle } from 'styled-components';
+import { Button, BodyL } from '@salutejs/sdds-dfa';
+import { sdds_dfa__light } from '@salutejs/sdds-themes';
+
+const Theme = createGlobalStyle(sdds_dfa__light);
 
 export const App = () => {
     return (
-        <Button>Hello, SDDS DFA!</Button>
-
-        <p style={{color: textAccent}}>
-            Token usage example
-        </p>
+        <>
+            <Theme />
+            <BodyL>Hello, SDDS DFA!</BodyL>
+            <Button>Кнопка</Button>
+        </>
     );
 };
 ```
+
+Дизайн-токены доступны в виде js-переменных:
+
+-   базовый набор — из `@salutejs/sdds-themes/tokens`
+-   уникальные токены темы — из `@salutejs/sdds-themes/tokens/sdds_dfa`.
+
+```jsx
+import { textAccent } from '@salutejs/sdds-themes/tokens';
+
+<p style={{ color: textAccent }}>Пример использования токена</p>;
+```
+
+## SSR и Next.js
+
+-   Библиотека поддерживает React Server Components (App Router) **только** при **явном** использовании директивы `'use client'` в модулях, импортирующих компоненты.
+-   Добавьте пакеты в `transpilePackages` в `next.config.js`:
+
+```js
+const nextConfig = {
+    transpilePackages: ['@salutejs/sdds-dfa', '@salutejs/plasma-new-hope', '@salutejs/plasma-icons'],
+};
+```
+
+Подробности — в [гайде по Next.js](https://plasma.sberdevices.ru/sdds-dfa/next/).
+
+## MCP-сервер для AI-агентов
+
+> **Примечание**: Поддерживаются версии библиотеки начиная с `0.352.0` — нужная указывается параметром `--version`.
+
+Библиотека предоставляет [MCP-сервер](https://plasma.sberdevices.ru/sdds-dfa/how-to-mcp/) `@salutejs/sdds-mcp` — через него LLM-агент (Claude Code, Cursor и др.) получает актуальную документацию:
+
+-   список компонентов
+-   описание props
+-   примеры использования
+-   токены и гайды.
+
+Сервер работает по `stdio`:
+
+```bash
+npx -y @salutejs/sdds-mcp@latest --lib sdds-dfa
+```
+
+Если агент настраивается через конфигурацию, используйте шаблон:
+
+```json
+{
+    "mcpServers": {
+        "sdds-dfa": {
+            "command": "npx",
+            "args": ["-y", "@salutejs/sdds-mcp@latest", "--lib", "sdds-dfa"]
+        }
+    }
+}
+```
+
+Подробности и список инструментов — в [гайде по MCP](https://plasma.sberdevices.ru/sdds-dfa/how-to-mcp/).

package/README.mdx

@@ -1,70 +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" />
 
-# Библиотека компонентов SDDS DFA
-
-Реализация компонентов для создания веб-приложений.
-
-
-## Использование
-
-Компоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);
-
-Использование данного пакета предполагает установку зависимостей: `react` & `react-dom`;
-
-Использование `styled-components` на проект необязательно, так же как и использование `typescript`.
-
-### Установка пакета
-
-```bash
-$ npm install --save react react-dom
-$ npm install --save styled-components@5.1.1
-$ npm install --save @salutejs/sdds-dfa @salutejs/sdds-themes
-```
-
-## Настройка
-
-Создайте компонент для подключения глобальных стилей:
-
-```jsx title="GlobalStyle.tsx"
-import { createGlobalStyle } from 'styled-components';
-import { sdds_dfa__light } from '@salutejs/sdds-themes';
-
-const ThemeStyle = createGlobalStyle(sdds_dfa__light);
-
-export const GlobalStyle = () => (
-    <>
-        <ThemeStyle />
-    </>
-);
-```
-
-### Корень приложения
-
-В корне приложения вызовите компонент глобальных стилей `GlobalStyle`:
-
--   Если вы используете [Create React App](https://create-react-app.dev), делайте вызов внутри `src/index.tsx`.
--   Если вы используете [Next.js](https://nextjs.org/), создайте файл `pages/_app.tsx` и подключите стили в нем.
-
-Для корректной работы dfaer side rendering приложение нужно обернуть `SSRProvider` (доступен в sdds-dfa);
-
-### Использование компонентов
-
-Все компоненты доступны из папки `components` или напрямую из пакета:
-
-```jsx
-// App.tsx
-import { Button } from '@salutejs/sdds-dfa';
-import { textAccent } from '@salutejs/sdds-themes/tokens/sdds-dfa';
-
-export const App = () => {
-    return (
-        <Button>Hello, SDDS DFA!</Button>
-
-        <p style={{color: textAccent}}>
-            Token usage example
-        </p>
-    );
-};
-```
+<Markdown>{ReadmeMd}</Markdown>

package/dist/styled-components/cjs/components/Autocomplete/Autocomplete.config.js

@@ -224,7 +224,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto;
                 ${_styledcomponents.autocompleteTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto;
 
-                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontFamily}: ${_sdds_dfa.bodyXS.fontFamily};
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontSize}: ${_sdds_dfa.bodyXS.fontSize};
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontStyle}: ${_sdds_dfa.bodyXS.fontStyle};
@@ -299,7 +299,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;
                 ${_styledcomponents.autocompleteTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
-                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontFamily}: ${_sdds_dfa.bodyXS.fontFamily};
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontSize}: ${_sdds_dfa.bodyXS.fontSize};
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontStyle}: ${_sdds_dfa.bodyXS.fontStyle};
@@ -374,7 +374,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${_styledcomponents.autocompleteTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontFamily}: ${_sdds_dfa.bodyXS.fontFamily};
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontSize}: ${_sdds_dfa.bodyXS.fontSize};
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontStyle}: ${_sdds_dfa.bodyXS.fontStyle};
@@ -449,7 +449,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
                 ${_styledcomponents.autocompleteTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
-                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontFamily}: ${_sdds_dfa.bodyXS.fontFamily};
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontSize}: ${_sdds_dfa.bodyXS.fontSize};
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontStyle}: ${_sdds_dfa.bodyXS.fontStyle};
@@ -524,7 +524,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto;
                 ${_styledcomponents.autocompleteTokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
-                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontFamily}: ${_sdds_dfa.bodyXS.fontFamily};
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontSize}: ${_sdds_dfa.bodyXS.fontSize};
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontStyle}: ${_sdds_dfa.bodyXS.fontStyle};

package/dist/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.config.js

@@ -32,7 +32,7 @@ const config = {
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontFamily}: ${_sdds_dfa.bodyL.fontFamily};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontSize}: ${_sdds_dfa.bodyL.fontSize};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontStyle}: ${_sdds_dfa.bodyL.fontStyle};
-                ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontWeight}: ${_sdds_dfa.bodyLBold.fontWeight};
+                ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontWeight}: ${_sdds_dfa.bodyL.fontWeight};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsLetterSpacing}: ${_sdds_dfa.bodyL.letterSpacing};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsLineHeight}: ${_sdds_dfa.bodyL.lineHeight};
             `,
@@ -42,7 +42,7 @@ const config = {
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontFamily}: ${_sdds_dfa.bodyM.fontFamily};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontSize}: ${_sdds_dfa.bodyM.fontSize};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontStyle}: ${_sdds_dfa.bodyM.fontStyle};
-                ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontWeight}: ${_sdds_dfa.bodyMBold.fontWeight};
+                ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontWeight}: ${_sdds_dfa.bodyM.fontWeight};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsLetterSpacing}: ${_sdds_dfa.bodyM.letterSpacing};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsLineHeight}: ${_sdds_dfa.bodyM.lineHeight};
             `,
@@ -52,7 +52,7 @@ const config = {
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontFamily}: ${_sdds_dfa.bodyS.fontFamily};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontSize}: ${_sdds_dfa.bodyS.fontSize};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontStyle}: ${_sdds_dfa.bodyS.fontStyle};
-                ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontWeight}: ${_sdds_dfa.bodySBold.fontWeight};
+                ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontWeight}: ${_sdds_dfa.bodyS.fontWeight};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsLetterSpacing}: ${_sdds_dfa.bodyS.letterSpacing};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsLineHeight}: ${_sdds_dfa.bodyS.lineHeight};
             `,
@@ -62,7 +62,7 @@ const config = {
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontFamily}: ${_sdds_dfa.bodyXS.fontFamily};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontSize}: ${_sdds_dfa.bodyXS.fontSize};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontStyle}: ${_sdds_dfa.bodyXS.fontStyle};
-                ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontWeight}: ${_sdds_dfa.bodyXSBold.fontWeight};
+                ${_styledcomponents.breadcrumbsTokens.breadcrumbsFontWeight}: ${_sdds_dfa.bodyXS.fontWeight};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsLetterSpacing}: ${_sdds_dfa.bodyXS.letterSpacing};
                 ${_styledcomponents.breadcrumbsTokens.breadcrumbsLineHeight}: ${_sdds_dfa.bodyXS.lineHeight};
             `

package/dist/styled-components/cjs/components/Button/Button.js

@@ -9,8 +9,7 @@ Object.defineProperty(exports, "Button", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
-const _plasmanewhope = require("@salutejs/plasma-new-hope");
 const _Buttonconfig = require("./Button.config");
 const mergedConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.buttonConfig, _Buttonconfig.config);
 const ButtonComponent = (0, _styledcomponents.component)(mergedConfig);
-const Button = (0, _plasmanewhope.makePolymorphic)(ButtonComponent, 'button');
+const Button = (0, _styledcomponents.makePolymorphic)(ButtonComponent, 'button');

package/dist/styled-components/cjs/components/Calendar/Calendar.config.js

@@ -32,8 +32,8 @@ const config = {
                 ${_styledcomponents.calendarBaseTokens.calendarHoveredItemColor}: ${_sdds_dfa.textPrimary};
                 ${_styledcomponents.calendarBaseTokens.calendarRangeBackground}: ${_sdds_dfa.surfaceTransparentSecondary};
                 ${_styledcomponents.calendarBaseTokens.calendarOutlineFocusColor}: ${_sdds_dfa.surfaceAccent};
-                ${_styledcomponents.calendarBaseTokens.calendarContentPrimaryColor}: ${_sdds_dfa.surfaceSolidDefault};
-                ${_styledcomponents.calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${_sdds_dfa.surfaceSolidDefault};
+                ${_styledcomponents.calendarBaseTokens.calendarContentPrimaryColor}: ${_sdds_dfa.textPrimary};
+                ${_styledcomponents.calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${_sdds_dfa.textPrimary};
                 ${_styledcomponents.calendarBaseTokens.calendarContentSecondaryColor}: ${_sdds_dfa.textSecondary};
                 ${_styledcomponents.calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${_sdds_dfa.textSecondary};
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderArrowColor}: ${_styledcomponents.calendarBaseTokens.calendarContentPrimaryColor};
@@ -106,7 +106,6 @@ const config = {
 
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.calendarBaseTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${_styledcomponents.calendarBaseTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem;
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderDateGap}: 0.25rem;
@@ -176,7 +175,6 @@ const config = {
 
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.calendarBaseTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${_styledcomponents.calendarBaseTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem;
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderDateGap}: 0.25rem;
@@ -246,7 +244,6 @@ const config = {
 
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.calendarBaseTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${_styledcomponents.calendarBaseTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem;
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderDateGap}: 0.25rem;
@@ -316,7 +313,6 @@ const config = {
 
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.calendarBaseTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${_styledcomponents.calendarBaseTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderDateGap}: 0.25rem;
@@ -386,7 +382,6 @@ const config = {
 
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.calendarBaseTokens.calendarArrowHeaderCustomSize}: 1rem;
-                ${_styledcomponents.calendarBaseTokens.calendarHeaderArrowSize}: 1rem;
 
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${_styledcomponents.calendarBaseTokens.calendarHeaderDateGap}: 0.25rem;

package/dist/styled-components/cjs/components/Calendar/CalendarDouble.config.js

@@ -34,8 +34,8 @@ const config = {
                 ${_styledcomponents.calendarDoubleTokens.calendarHoveredItemColor}: ${_sdds_dfa.textPrimary};
                 ${_styledcomponents.calendarDoubleTokens.calendarRangeBackground}: ${_sdds_dfa.surfaceTransparentSecondary};
                 ${_styledcomponents.calendarDoubleTokens.calendarOutlineFocusColor}: ${_sdds_dfa.surfaceAccent};
-                ${_styledcomponents.calendarDoubleTokens.calendarContentPrimaryColor}: ${_sdds_dfa.surfaceSolidDefault};
-                ${_styledcomponents.calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${_sdds_dfa.surfaceSolidDefault};
+                ${_styledcomponents.calendarDoubleTokens.calendarContentPrimaryColor}: ${_sdds_dfa.textPrimary};
+                ${_styledcomponents.calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${_sdds_dfa.textPrimary};
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderArrowColor}: ${_styledcomponents.calendarDoubleTokens.calendarContentPrimaryColor};
                 ${_styledcomponents.calendarDoubleTokens.calendarContentSecondaryColor}: ${_sdds_dfa.textSecondary};
                 ${_styledcomponents.calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${_sdds_dfa.textSecondary};
@@ -107,7 +107,6 @@ const config = {
 
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.calendarDoubleTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${_styledcomponents.calendarDoubleTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem;
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem;
@@ -177,7 +176,6 @@ const config = {
 
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.calendarDoubleTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${_styledcomponents.calendarDoubleTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem;
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem;
@@ -247,7 +245,6 @@ const config = {
 
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.calendarDoubleTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${_styledcomponents.calendarDoubleTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem;
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem;
@@ -317,7 +314,6 @@ const config = {
 
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.calendarDoubleTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${_styledcomponents.calendarDoubleTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem;
@@ -387,7 +383,6 @@ const config = {
 
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.calendarDoubleTokens.calendarArrowHeaderCustomSize}: 1rem;
-                ${_styledcomponents.calendarDoubleTokens.calendarHeaderArrowSize}: 1rem;
 
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${_styledcomponents.calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem;

package/dist/styled-components/cjs/components/Combobox/Combobox.config.js

@@ -276,7 +276,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldHintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto;
                 ${_styledcomponents.comboboxTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto;
 
-                ${_styledcomponents.comboboxTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.comboboxTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontFamily}: ${_sdds_dfa.bodyXS.fontFamily};
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontSize}: ${_sdds_dfa.bodyXS.fontSize};
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontStyle}: ${_sdds_dfa.bodyXS.fontStyle};
@@ -397,7 +397,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldHintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;
                 ${_styledcomponents.comboboxTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
-                ${_styledcomponents.comboboxTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.comboboxTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontFamily}: ${_sdds_dfa.bodyXS.fontFamily};
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontSize}: ${_sdds_dfa.bodyXS.fontSize};
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontStyle}: ${_sdds_dfa.bodyXS.fontStyle};
@@ -518,7 +518,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${_styledcomponents.comboboxTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${_styledcomponents.comboboxTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.comboboxTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontFamily}: ${_sdds_dfa.bodyXS.fontFamily};
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontSize}: ${_sdds_dfa.bodyXS.fontSize};
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontStyle}: ${_sdds_dfa.bodyXS.fontStyle};
@@ -639,7 +639,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
                 ${_styledcomponents.comboboxTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
-                ${_styledcomponents.comboboxTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.comboboxTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontFamily}: ${_sdds_dfa.bodyXS.fontFamily};
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontSize}: ${_sdds_dfa.bodyXS.fontSize};
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontStyle}: ${_sdds_dfa.bodyXS.fontStyle};
@@ -760,7 +760,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldHintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto;
                 ${_styledcomponents.comboboxTokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
-                ${_styledcomponents.comboboxTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.comboboxTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontFamily}: ${_sdds_dfa.bodyXS.fontFamily};
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontSize}: ${_sdds_dfa.bodyXS.fontSize};
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontStyle}: ${_sdds_dfa.bodyXS.fontStyle};

package/dist/styled-components/cjs/components/DatePicker/DatePicker.clear.config.js

@@ -133,8 +133,8 @@ const config = {
                 ${_styledcomponents.datePickerTokens.calendarHoveredItemColor}: ${_sdds_dfa.textPrimary};
                 ${_styledcomponents.datePickerTokens.calendarRangeBackground}: ${_sdds_dfa.surfaceTransparentSecondary};
                 ${_styledcomponents.datePickerTokens.calendarOutlineFocusColor}: ${_sdds_dfa.surfaceAccent};
-                ${_styledcomponents.datePickerTokens.calendarContentPrimaryColor}: ${_sdds_dfa.surfaceSolidDefault};
-                ${_styledcomponents.datePickerTokens.calendarContentPrimaryDisabledColor}: ${_sdds_dfa.surfaceSolidDefault};
+                ${_styledcomponents.datePickerTokens.calendarContentPrimaryColor}: ${_sdds_dfa.textPrimary};
+                ${_styledcomponents.datePickerTokens.calendarContentPrimaryDisabledColor}: ${_sdds_dfa.textPrimary};
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowColor}: ${_styledcomponents.datePickerTokens.calendarContentPrimaryColor};
                 ${_styledcomponents.datePickerTokens.calendarContentSecondaryColor}: ${_sdds_dfa.textSecondary};
                 ${_styledcomponents.datePickerTokens.calendarContentSecondaryDisabledColor}: ${_sdds_dfa.textSecondary};

package/dist/styled-components/cjs/components/DatePicker/DatePicker.config.js

@@ -102,8 +102,8 @@ const config = {
                 ${_styledcomponents.datePickerTokens.calendarHoveredItemColor}: ${_sdds_dfa.textPrimary};
                 ${_styledcomponents.datePickerTokens.calendarRangeBackground}: ${_sdds_dfa.surfaceTransparentSecondary};
                 ${_styledcomponents.datePickerTokens.calendarOutlineFocusColor}: ${_sdds_dfa.surfaceAccent};
-                ${_styledcomponents.datePickerTokens.calendarContentPrimaryColor}: ${_sdds_dfa.surfaceSolidDefault};
-                ${_styledcomponents.datePickerTokens.calendarContentPrimaryDisabledColor}: ${_sdds_dfa.surfaceSolidDefault};
+                ${_styledcomponents.datePickerTokens.calendarContentPrimaryColor}: ${_sdds_dfa.textPrimary};
+                ${_styledcomponents.datePickerTokens.calendarContentPrimaryDisabledColor}: ${_sdds_dfa.textPrimary};
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowColor}: ${_styledcomponents.datePickerTokens.calendarContentPrimaryColor};
                 ${_styledcomponents.datePickerTokens.calendarContentSecondaryColor}: ${_sdds_dfa.textSecondary};
                 ${_styledcomponents.datePickerTokens.calendarContentSecondaryDisabledColor}: ${_sdds_dfa.textSecondary};
@@ -262,7 +262,6 @@ const config = {
                 ${_styledcomponents.datePickerTokens.calendarHeaderWrapperPadding}: 0;
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowGap}: 0.5rem;
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowCustomSize}: 1.5rem;
-                ${_styledcomponents.datePickerTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.datePickerTokens.calendarHeaderPadding}: 0 0 0 1rem;
                 ${_styledcomponents.datePickerTokens.calendarHeaderDateGap}: 0.5rem;
@@ -433,7 +432,6 @@ const config = {
                 ${_styledcomponents.datePickerTokens.calendarHeaderWrapperPadding}: 0;
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowGap}: 0.5rem;
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowCustomSize}: 1.5rem;
-                ${_styledcomponents.datePickerTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.datePickerTokens.calendarHeaderPadding}: 0 0 0 1rem;
                 ${_styledcomponents.datePickerTokens.calendarHeaderDateGap}: 0.5rem;
@@ -604,7 +602,6 @@ const config = {
                 ${_styledcomponents.datePickerTokens.calendarHeaderWrapperPadding}: 0;
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowCustomSize}: 1.5rem;
-                ${_styledcomponents.datePickerTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.datePickerTokens.calendarHeaderPadding}: 0 0 0 0.75rem;
                 ${_styledcomponents.datePickerTokens.calendarHeaderDateGap}: 0.25rem;
@@ -775,7 +772,6 @@ const config = {
                 ${_styledcomponents.datePickerTokens.calendarHeaderWrapperPadding}: 0;
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowCustomSize}: 1.5rem;
-                ${_styledcomponents.datePickerTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.datePickerTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${_styledcomponents.datePickerTokens.calendarHeaderDateGap}: 0.25rem;
@@ -946,7 +942,6 @@ const config = {
                 ${_styledcomponents.datePickerTokens.calendarHeaderWrapperPadding}: 0;
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.datePickerTokens.calendarHeaderArrowCustomSize}: 1rem;
-                ${_styledcomponents.datePickerTokens.calendarHeaderArrowSize}: 1rem;
 
                 ${_styledcomponents.datePickerTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${_styledcomponents.datePickerTokens.calendarHeaderDateGap}: 0.25rem;

package/dist/styled-components/cjs/components/DateTimePicker/DateTimePicker.config.js

@@ -79,8 +79,8 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.calendarHoveredItemColor}: ${_sdds_dfa.textPrimary};
                 ${_styledcomponents.dateTimePickerTokens.calendarRangeBackground}: ${_sdds_dfa.surfaceTransparentSecondary};
                 ${_styledcomponents.dateTimePickerTokens.calendarOutlineFocusColor}: ${_sdds_dfa.surfaceAccent};
-                ${_styledcomponents.dateTimePickerTokens.calendarContentPrimaryColor}: ${_sdds_dfa.surfaceSolidDefault};
-                ${_styledcomponents.dateTimePickerTokens.calendarContentPrimaryDisabledColor}: ${_sdds_dfa.surfaceSolidDefault};
+                ${_styledcomponents.dateTimePickerTokens.calendarContentPrimaryColor}: ${_sdds_dfa.textPrimary};
+                ${_styledcomponents.dateTimePickerTokens.calendarContentPrimaryDisabledColor}: ${_sdds_dfa.textPrimary};
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowColor}: ${_styledcomponents.dateTimePickerTokens.calendarContentPrimaryColor};
                 ${_styledcomponents.dateTimePickerTokens.calendarContentSecondaryColor}: ${_sdds_dfa.textSecondary};
                 ${_styledcomponents.dateTimePickerTokens.calendarContentSecondaryDisabledColor}: ${_sdds_dfa.textSecondary};
@@ -235,7 +235,6 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderWrapperPadding}: 0;
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowCustomSize}: 1.5rem;
-                ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderPadding}: 0 0 0 1rem;
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderDateGap}: 0.25rem;
@@ -403,7 +402,6 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderWrapperPadding}: 0;
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowGap}: 0.5rem;
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowCustomSize}: 1.5rem;
-                ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderPadding}: 0 0 0 1rem;
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderDateGap}: 0.5rem;
@@ -571,7 +569,6 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderWrapperPadding}: 0;
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowCustomSize}: 1.5rem;
-                ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderPadding}: 0 0 0 0.75rem;
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderDateGap}: 0.25rem;
@@ -739,7 +736,6 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderWrapperPadding}: 0;
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowCustomSize}: 1.5rem;
-                ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderDateGap}: 0.25rem;
@@ -907,7 +903,6 @@ const config = {
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderWrapperPadding}: 0;
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowGap}: 0;
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowCustomSize}: 1rem;
-                ${_styledcomponents.dateTimePickerTokens.calendarHeaderArrowSize}: 1rem;
 
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${_styledcomponents.dateTimePickerTokens.calendarHeaderDateGap}: 0.25rem;

package/dist/styled-components/cjs/components/Notification/Notification.js

@@ -30,11 +30,12 @@ function _interop_require_default(obj) {
 const mergedConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.notificationConfig, _Notificationconfig.config);
 const NotificationNewHope = (0, _styledcomponents.component)(mergedConfig);
 const Notification = NotificationNewHope;
-const NotificationsProvider = ({ children, frame = 'document', placement, UNSAFE_SSR_ENABLED })=>{
+const NotificationsProvider = ({ children, frame = 'document', placement, UNSAFE_SSR_ENABLED, defaultNotificationArgs })=>{
     return /*#__PURE__*/ _react.default.createElement(_styledcomponents.NotificationsProvider, {
         config: mergedConfig,
         frame: frame,
         placement: placement,
-        UNSAFE_SSR_ENABLED: UNSAFE_SSR_ENABLED
+        UNSAFE_SSR_ENABLED: UNSAFE_SSR_ENABLED,
+        defaultNotificationArgs: defaultNotificationArgs
     }, children);
 };