@salutejs/sdds-cs 0.372.0-canary.3015.34463388473.0 → 0.372.0-dev.0

package/README.md

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

package/README.mdx

@@ -1,69 +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 CS
-
-Реализация компонентов для создания веб-приложений.
-
-## Использование
-
-Компоненты реализованы на [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-cs @salutejs/sdds-themes
-```
-
-## Настройка
-
-Создайте компонент для подключения глобальных стилей:
-
-```jsx title="GlobalStyle.tsx"
-import { createGlobalStyle } from 'styled-components';
-import { sdds_cs__light } from '@salutejs/sdds-themes';
-
-const ThemeStyle = createGlobalStyle(sdds_cs__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` и подключите стили в нем.
-
-Для корректной работы server side rendering приложение нужно обернуть `SSRProvider` (доступен в sdds-cs);
-
-### Использование компонентов
-
-Все компоненты доступны из папки `components` или напрямую из пакета:
-
-```jsx
-// App.tsx
-import { Button } from '@salutejs/sdds-cs';
-import { textAccent } from '@salutejs/sdds-themes/tokens/sdds-cs';
-
-export const App = () => {
-    return (
-        <Button>Hello, SDDS CS!</Button>
-
-        <p style={{color: textAccent}}>
-            Token usage example
-        </p>
-    );
-};
-```
+<Markdown>{ReadmeMd}</Markdown>

package/dist/emotion/cjs/components/Autocomplete/Autocomplete.config.js

@@ -133,7 +133,7 @@ const config = {
                 ${_emotion.autocompleteTokens.textFieldLabelLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
                 ${_emotion.autocompleteTokens.textFieldLabelLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
-                ${_emotion.autocompleteTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_emotion.autocompleteTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_emotion.autocompleteTokens.textFieldLeftHelperFontFamily}: ${_sdds_cs.bodyS.fontFamily};
                 ${_emotion.autocompleteTokens.textFieldLeftHelperFontSize}: ${_sdds_cs.bodyS.fontSize};
                 ${_emotion.autocompleteTokens.textFieldLeftHelperFontStyle}: ${_sdds_cs.bodyS.fontStyle};

package/dist/emotion/cjs/components/Button/Button.js

@@ -10,7 +10,6 @@ Object.defineProperty(exports, "Button", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
-const _plasmanewhope = require("@salutejs/plasma-new-hope");
 const _styled = /*#__PURE__*/ _interop_require_default(require("@emotion/styled"));
 const _Buttonconfig = require("./Button.config");
 function _interop_require_default(obj) {
@@ -63,10 +62,10 @@ const mergedConfig = (0, _emotion.mergeConfig)(_emotion.buttonConfig, _Buttoncon
 const ButtonComponent = (0, _emotion.component)(mergedConfig);
 // INFO: Данное поведение запрошено продуктом
 const StyledButton = /*#__PURE__*/ (0, _styled.default)(ButtonComponent, {
-    target: "e1owdhnp0",
+    target: "eht90h10",
     label: "StyledButton"
-})("&&.", String(_emotion.buttonClasses.buttonLoading), "{color:var(", _emotion.buttonTokens.buttonColorActive, ",var(", _emotion.buttonTokens.buttonColor, "));background:var(", _emotion.buttonTokens.buttonBackgroundColorActive, ",var(", _emotion.buttonTokens.buttonBackgroundColor, "));pointer-events:none;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvQnV0dG9uL0J1dHRvbi50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b24udHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBDb21wb25lbnRQcm9wcywgdXNlQ2FsbGJhY2ssIE1vdXNlRXZlbnQsIGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBidXR0b25Db25maWcsIGNvbXBvbmVudCwgbWVyZ2VDb25maWcsIGJ1dHRvbkNsYXNzZXMsIGJ1dHRvblRva2VucyB9IGZyb20gJ0BzYWx1dGVqcy9wbGFzbWEtbmV3LWhvcGUvZW1vdGlvbic7XG5pbXBvcnQgeyBtYWtlUG9seW1vcnBoaWMgfSBmcm9tICdAc2FsdXRlanMvcGxhc21hLW5ldy1ob3BlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgY29uZmlnIH0gZnJvbSAnLi9CdXR0b24uY29uZmlnJztcblxuY29uc3QgbWVyZ2VkQ29uZmlnID0gbWVyZ2VDb25maWcoYnV0dG9uQ29uZmlnLCBjb25maWcpO1xuY29uc3QgQnV0dG9uQ29tcG9uZW50ID0gY29tcG9uZW50KG1lcmdlZENvbmZpZyk7XG5cbmV4cG9ydCB0eXBlIEJ1dHRvblByb3BzID0gQ29tcG9uZW50UHJvcHM8dHlwZW9mIEJ1dHRvbkNvbXBvbmVudD47XG5cbi8vIElORk86INCU0LDQvdC90L7QtSDQv9C+0LLQtdC00LXQvdC40LUg0LfQsNC/0YDQvtGI0LXQvdC+INC/0YDQvtC00YPQutGC0L7QvFxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKEJ1dHRvbkNvbXBvbmVudClgXG4gICAgJiYuJHtTdHJpbmcoYnV0dG9uQ2xhc3Nlcy5idXR0b25Mb2FkaW5nKX0ge1xuICAgICAgICBjb2xvcjogdmFyKCR7YnV0dG9uVG9rZW5zLmJ1dHRvbkNvbG9yQWN0aXZlfSwgdmFyKCR7YnV0dG9uVG9rZW5zLmJ1dHRvbkNvbG9yfSkpO1xuICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoJHtidXR0b25Ub2tlbnMuYnV0dG9uQmFja2dyb3VuZENvbG9yQWN0aXZlfSwgdmFyKCR7YnV0dG9uVG9rZW5zLmJ1dHRvbkJhY2tncm91bmRDb2xvcn0pKTtcblxuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICB9XG5gO1xuXG4vKipcbiAqINCa0L3QvtC/0LrQsC5cbiAqL1xuZXhwb3J0IGNvbnN0IEJ1dHRvbiA9IG1ha2VQb2x5bW9ycGhpYyhcbiAgICBmb3J3YXJkUmVmPE9taXQ8SFRNTEJ1dHRvbkVsZW1lbnQsICd2YWx1ZSc+LCBCdXR0b25Qcm9wcz4oKHsgb25DbGljaywgaXNMb2FkaW5nLCB2YWx1ZSwgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gICAgICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soXG4gICAgICAgICAgICAoZXZlbnQ6IE1vdXNlRXZlbnQ8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKCFpc0xvYWRpbmcpIHtcbiAgICAgICAgICAgICAgICAgICAgb25DbGljaz8uKGV2ZW50KTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAgW2lzTG9hZGluZywgb25DbGlja10sXG4gICAgICAgICk7XG5cbiAgICAgICAgLy8gQHRzLWlnbm9yZVxuICAgICAgICByZXR1cm4gPFN0eWxlZEJ1dHRvbiB2YWx1ZT17dmFsdWV9IHJlZj17cmVmfSBvbkNsaWNrPXtoYW5kbGVDbGlja30gaXNMb2FkaW5nPXtpc0xvYWRpbmd9IHsuLi5wcm9wc30gLz47XG4gICAgfSksXG4gICAgJ2J1dHRvbicsXG4pO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFxQiJ9 */");
-const Button = (0, _plasmanewhope.makePolymorphic)(/*#__PURE__*/ (0, _react.forwardRef)(({ onClick, isLoading, value, ...props }, ref)=>{
+})("&&.", String(_emotion.buttonClasses.buttonLoading), "{color:var(", _emotion.buttonTokens.buttonColorActive, ",var(", _emotion.buttonTokens.buttonColor, "));background:var(", _emotion.buttonTokens.buttonBackgroundColorActive, ",var(", _emotion.buttonTokens.buttonBackgroundColor, "));pointer-events:none;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvQnV0dG9uL0J1dHRvbi50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b24udHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBDb21wb25lbnRQcm9wcywgdXNlQ2FsbGJhY2ssIE1vdXNlRXZlbnQsIGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQge1xuICAgIGJ1dHRvbkNvbmZpZyxcbiAgICBjb21wb25lbnQsXG4gICAgbWVyZ2VDb25maWcsXG4gICAgYnV0dG9uQ2xhc3NlcyxcbiAgICBidXR0b25Ub2tlbnMsXG4gICAgbWFrZVBvbHltb3JwaGljLFxufSBmcm9tICdAc2FsdXRlanMvcGxhc21hLW5ldy1ob3BlL2Vtb3Rpb24nO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgeyBjb25maWcgfSBmcm9tICcuL0J1dHRvbi5jb25maWcnO1xuXG5jb25zdCBtZXJnZWRDb25maWcgPSBtZXJnZUNvbmZpZyhidXR0b25Db25maWcsIGNvbmZpZyk7XG5jb25zdCBCdXR0b25Db21wb25lbnQgPSBjb21wb25lbnQobWVyZ2VkQ29uZmlnKTtcblxuZXhwb3J0IHR5cGUgQnV0dG9uUHJvcHMgPSBDb21wb25lbnRQcm9wczx0eXBlb2YgQnV0dG9uQ29tcG9uZW50PjtcblxuLy8gSU5GTzog0JTQsNC90L3QvtC1INC/0L7QstC10LTQtdC90LjQtSDQt9Cw0L/RgNC+0YjQtdC90L4g0L/RgNC+0LTRg9C60YLQvtC8XG5jb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQoQnV0dG9uQ29tcG9uZW50KWBcbiAgICAmJi4ke1N0cmluZyhidXR0b25DbGFzc2VzLmJ1dHRvbkxvYWRpbmcpfSB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHtidXR0b25Ub2tlbnMuYnV0dG9uQ29sb3JBY3RpdmV9LCB2YXIoJHtidXR0b25Ub2tlbnMuYnV0dG9uQ29sb3J9KSk7XG4gICAgICAgIGJhY2tncm91bmQ6IHZhcigke2J1dHRvblRva2Vucy5idXR0b25CYWNrZ3JvdW5kQ29sb3JBY3RpdmV9LCB2YXIoJHtidXR0b25Ub2tlbnMuYnV0dG9uQmFja2dyb3VuZENvbG9yfSkpO1xuXG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIH1cbmA7XG5cbi8qKlxuICog0JrQvdC+0L/QutCwLlxuICovXG5leHBvcnQgY29uc3QgQnV0dG9uID0gbWFrZVBvbHltb3JwaGljKFxuICAgIGZvcndhcmRSZWY8T21pdDxIVE1MQnV0dG9uRWxlbWVudCwgJ3ZhbHVlJz4sIEJ1dHRvblByb3BzPigoeyBvbkNsaWNrLCBpc0xvYWRpbmcsIHZhbHVlLCAuLi5wcm9wcyB9LCByZWYpID0+IHtcbiAgICAgICAgY29uc3QgaGFuZGxlQ2xpY2sgPSB1c2VDYWxsYmFjayhcbiAgICAgICAgICAgIChldmVudDogTW91c2VFdmVudDxIVE1MQnV0dG9uRWxlbWVudD4pID0+IHtcbiAgICAgICAgICAgICAgICBpZiAoIWlzTG9hZGluZykge1xuICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPy4oZXZlbnQpO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH0sXG4gICAgICAgICAgICBbaXNMb2FkaW5nLCBvbkNsaWNrXSxcbiAgICAgICAgKTtcblxuICAgICAgICAvLyBAdHMtaWdub3JlXG4gICAgICAgIHJldHVybiA8U3R5bGVkQnV0dG9uIHZhbHVlPXt2YWx1ZX0gcmVmPXtyZWZ9IG9uQ2xpY2s9e2hhbmRsZUNsaWNrfSBpc0xvYWRpbmc9e2lzTG9hZGluZ30gey4uLnByb3BzfSAvPjtcbiAgICB9KSxcbiAgICAnYnV0dG9uJyxcbik7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUJxQiJ9 */");
+const Button = (0, _emotion.makePolymorphic)(/*#__PURE__*/ (0, _react.forwardRef)(({ onClick, isLoading, value, ...props }, ref)=>{
     const handleClick = (0, _react.useCallback)((event)=>{
         if (!isLoading) {
             onClick?.(event);

package/dist/emotion/cjs/components/Calendar/Calendar.config.js

@@ -101,7 +101,6 @@ const config = {
 
                 ${_emotion.calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem;
                 ${_emotion.calendarBaseTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${_emotion.calendarBaseTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_emotion.calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${_emotion.calendarBaseTokens.calendarHeaderDateGap}: 0.25rem;

package/dist/emotion/cjs/components/Calendar/CalendarDouble.config.js

@@ -100,7 +100,6 @@ const config = {
 
                 ${_emotion.calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem;
                 ${_emotion.calendarDoubleTokens.calendarArrowHeaderCustomSize}: 1.5rem;
-                ${_emotion.calendarDoubleTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_emotion.calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0;
                 ${_emotion.calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem;

package/dist/emotion/cjs/components/Combobox/Combobox.config.js

@@ -171,7 +171,7 @@ const config = {
                 ${_emotion.comboboxTokens.textFieldLabelLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
                 ${_emotion.comboboxTokens.textFieldLabelLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
-                ${_emotion.comboboxTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_emotion.comboboxTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_emotion.comboboxTokens.textFieldLeftHelperFontFamily}: ${_sdds_cs.bodyS.fontFamily};
                 ${_emotion.comboboxTokens.textFieldLeftHelperFontSize}: ${_sdds_cs.bodyS.fontSize};
                 ${_emotion.comboboxTokens.textFieldLeftHelperFontStyle}: ${_sdds_cs.bodyS.fontStyle};
@@ -302,7 +302,7 @@ const config = {
                 ${_emotion.comboboxTokens.disclosureIconColorHover}: transparent;
                 ${_emotion.comboboxTokens.textFieldPadding}: 0;
                 ${_emotion.comboboxTokens.textFieldLabelOffset}: 0.25rem;
-                ${_emotion.comboboxTokens.textFieldLeftHelperPadding}: 0rem 0 0 0;
+                ${_emotion.comboboxTokens.textFieldLeftHelperOffset}: 0rem 0 0 0;
                 ${_emotion.comboboxTokens.textFieldBorderColor}: transparent;
                 ${_emotion.comboboxTokens.textFieldBorderWidth}: 0;
             `

package/dist/emotion/cjs/components/DatePicker/DatePicker.config.js

@@ -249,7 +249,6 @@ const config = {
                 ${_emotion.datePickerTokens.calendarHeaderWrapperPadding}: 0;
                 ${_emotion.datePickerTokens.calendarHeaderArrowGap}: 0.5rem;
                 ${_emotion.datePickerTokens.calendarHeaderArrowCustomSize}: 1.5rem;
-                ${_emotion.datePickerTokens.calendarHeaderArrowSize}: 1.5rem;
 
                 ${_emotion.datePickerTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${_emotion.datePickerTokens.calendarHeaderDateGap}: 0.25rem;

package/dist/emotion/cjs/components/Select/Select.config.js

@@ -135,7 +135,7 @@ const config = {
                 ${_emotion.selectTokens.textFieldLabelLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
                 ${_emotion.selectTokens.textFieldLabelLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
-                ${_emotion.selectTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_emotion.selectTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_emotion.selectTokens.textFieldLeftHelperFontFamily}: ${_sdds_cs.bodyS.fontFamily};
                 ${_emotion.selectTokens.textFieldLeftHelperFontSize}: ${_sdds_cs.bodyS.fontSize};
                 ${_emotion.selectTokens.textFieldLeftHelperFontStyle}: ${_sdds_cs.bodyS.fontStyle};

package/dist/emotion/cjs/components/TextField/TextField.clear.config.js

@@ -123,7 +123,7 @@ const config = {
                 ${_emotion.textFieldTokens.titleCaptionLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
                 ${_emotion.textFieldTokens.titleCaptionLineHeight}: ${_sdds_cs.bodyXS.lineHeight};
 
-                ${_emotion.textFieldTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_emotion.textFieldTokens.leftHelperFontFamily}: ${_sdds_cs.bodyS.fontFamily};
                 ${_emotion.textFieldTokens.leftHelperFontSize}: ${_sdds_cs.bodyS.fontSize};
                 ${_emotion.textFieldTokens.leftHelperFontStyle}: ${_sdds_cs.bodyS.fontStyle};

package/dist/emotion/cjs/components/TextField/TextField.config.js

@@ -150,7 +150,7 @@ const config = {
                 ${_emotion.textFieldTokens.titleCaptionLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
                 ${_emotion.textFieldTokens.titleCaptionLineHeight}: ${_sdds_cs.bodyXS.lineHeight};
 
-                ${_emotion.textFieldTokens.leftHelperPadding}: 0.25rem;
+                ${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem;
                 ${_emotion.textFieldTokens.leftHelperFontFamily}: ${_sdds_cs.bodyS.fontFamily};
                 ${_emotion.textFieldTokens.leftHelperFontSize}: ${_sdds_cs.bodyS.fontSize};
                 ${_emotion.textFieldTokens.leftHelperFontStyle}: ${_sdds_cs.bodyS.fontStyle};
@@ -223,7 +223,7 @@ const config = {
                 ${_emotion.textFieldTokens.titleCaptionLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
                 ${_emotion.textFieldTokens.titleCaptionLineHeight}: ${_sdds_cs.bodyXS.lineHeight};
 
-                ${_emotion.textFieldTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_emotion.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_emotion.textFieldTokens.leftHelperFontFamily}: ${_sdds_cs.bodyS.fontFamily};
                 ${_emotion.textFieldTokens.leftHelperFontSize}: ${_sdds_cs.bodyS.fontSize};
                 ${_emotion.textFieldTokens.leftHelperFontStyle}: ${_sdds_cs.bodyS.fontStyle};

package/dist/emotion/cjs/components/TimePicker/TimePicker.config.js

@@ -76,6 +76,8 @@ const config = {
                 ${_emotion.timePickerTokens.scrollbarColor}: ${_sdds_cs.surfaceSolidTertiary};
                 ${_emotion.timePickerTokens.scrollbarTrackColor}: var(--surface-transparent-primary);
 
+                ${_emotion.timePickerTokens.disabledOpacity}: 0.4;
+
                 ${_emotion.timePickerTokens.leftHelperColor}: ${_sdds_cs.textSecondary};
                 ${_emotion.timePickerTokens.leftHelperColorError}: ${_sdds_cs.textNegative};
                 ${_emotion.timePickerTokens.leftHelperColorSuccess}: ${_sdds_cs.textPositive};