npm - @salutejs/sdds-netology - Versions diffs - 0.369.0-next-sbcom.0 → 0.369.0 - Mend

@salutejs/sdds-netology 0.369.0-next-sbcom.0 → 0.369.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 (166) hide show

package/README.md CHANGED Viewed

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Autocomplete.config.js","sources":["../../../../../src-css/components/Autocomplete/Autocomplete.config.ts"],"sourcesContent":["import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/css';\nimport {\n bodyL,\n bodyM,\n bodyS,\n bodyXS,\n surfaceAccent,\n surfaceNegative,\n surfacePositive,\n surfaceSolidCard,\n surfaceSolidCardBrightness,\n surfaceTransparentNegative,\n surfaceTransparentNegativeActive,\n surfaceTransparentPositive,\n surfaceTransparentPositiveActive,\n surfaceTransparentPrimary,\n surfaceTransparentSecondary,\n surfaceTransparentTertiary,\n surfaceTransparentWarning,\n surfaceTransparentWarningActive,\n surfaceWarning,\n textAccent,\n textNegative,\n textPositive,\n textPrimary,\n textSecondary,\n textSecondaryActive,\n textSecondaryHover,\n textTertiary,\n textWarning,\n} from '@salutejs/plasma-themes/tokens/plasma_b2c';\n\nexport const config = {\n defaults: {\n view: 'default',\n size: 'l',\n labelPlacement: 'outer',\n },\n variations: {\n view: {\n default: css`\n ${tokens.textFieldColor}: ${textPrimary};\n ${tokens.textFieldClearColor}: ${textPrimary};\n\n ${tokens.textFieldPlaceholderColor}: ${textSecondary};\n ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};\n ${tokens.textFieldClearPlaceholderColor}: ${textSecondary};\n ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary};\n\n ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary};\n ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary};\n ${tokens.textFieldCaretColor}: ${textAccent};\n ${tokens.textFieldTextBeforeColor}: ${textTertiary};\n ${tokens.textFieldTextAfterColor}: ${textTertiary};\n ${tokens.textFieldLabelColor}: ${textPrimary};\n ${tokens.textFieldLeftHelperColor}: ${textSecondary};\n ${tokens.textFieldFocusColor}: ${textAccent};\n\n ${tokens.textFieldContentSlotColor}: ${textSecondary};\n ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};\n ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};\n\n ${tokens.focusColor}: ${surfaceAccent};\n ${tokens.textFieldIndicatorColor}: ${surfaceNegative};\n ${tokens.textFieldOptionalColor}: ${textTertiary};\n\n ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary};\n ${tokens.textFieldDividerColorHover}: ${textSecondary};\n ${tokens.textFieldDividerColorFocus}: ${surfaceAccent};\n\n ${tokens.background}: ${surfaceSolidCard};\n ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n ${tokens.itemBackground}: transparent;\n ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary};\n ${tokens.itemColor}: ${textPrimary};\n\n ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};\n ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor};\n ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary};\n\n ${tokens.textFieldHintIconColor}: ${textSecondary};\n `,\n positive: css`\n ${tokens.textFieldColor}: ${textPrimary};\n ${tokens.textFieldClearColor}: ${textPositive};\n\n ${tokens.textFieldPlaceholderColor}: ${textSecondary};\n ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};\n ${tokens.textFieldClearPlaceholderColor}: ${textPositive};\n ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive};\n\n ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive};\n ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive};\n ${tokens.textFieldCaretColor}: ${textAccent};\n ${tokens.textFieldTextBeforeColor}: ${textTertiary};\n ${tokens.textFieldTextAfterColor}: ${textTertiary};\n ${tokens.textFieldLabelColor}: ${textPrimary};\n ${tokens.textFieldLeftHelperColor}: ${textPositive};\n ${tokens.textFieldFocusColor}: ${textAccent};\n\n ${tokens.textFieldContentSlotColor}: ${textSecondary};\n ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};\n ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};\n\n ${tokens.focusColor}: ${surfaceAccent};\n ${tokens.textFieldIndicatorColor}: ${surfaceNegative};\n ${tokens.textFieldOptionalColor}: ${textTertiary};\n\n ${tokens.textFieldDividerColor}: ${surfacePositive};\n ${tokens.textFieldDividerColorHover}: ${surfacePositive};\n ${tokens.textFieldDividerColorFocus}: ${surfaceAccent};\n\n ${tokens.background}: ${surfaceSolidCard};\n ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n ${tokens.itemBackground}: transparent;\n ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary};\n ${tokens.itemColor}: ${textPrimary};\n\n ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};\n ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor};\n ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary};\n\n ${tokens.textFieldHintIconColor}: ${textSecondary};\n `,\n warning: css`\n ${tokens.textFieldColor}: ${textPrimary};\n ${tokens.textFieldClearColor}: ${textWarning};\n\n ${tokens.textFieldPlaceholderColor}: ${textSecondary};\n ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};\n ${tokens.textFieldClearPlaceholderColor}: ${textWarning};\n ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning};\n\n ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning};\n ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive};\n ${tokens.textFieldCaretColor}: ${textAccent};\n ${tokens.textFieldTextBeforeColor}: ${textTertiary};\n ${tokens.textFieldTextAfterColor}: ${textTertiary};\n ${tokens.textFieldLabelColor}: ${textPrimary};\n ${tokens.textFieldLeftHelperColor}: ${textWarning};\n ${tokens.textFieldFocusColor}: ${textAccent};\n\n ${tokens.textFieldContentSlotColor}: ${textSecondary};\n ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};\n ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};\n\n ${tokens.focusColor}: ${surfaceAccent};\n ${tokens.textFieldIndicatorColor}: ${surfaceNegative};\n ${tokens.textFieldOptionalColor}: ${textTertiary};\n\n ${tokens.textFieldDividerColor}: ${surfaceWarning};\n ${tokens.textFieldDividerColorHover}: ${surfaceWarning};\n ${tokens.textFieldDividerColorFocus}: ${surfaceAccent};\n\n ${tokens.background}: ${surfaceSolidCard};\n ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n ${tokens.itemBackground}: transparent;\n ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary};\n ${tokens.itemColor}: ${textPrimary};\n\n ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};\n ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor};\n ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary};\n\n ${tokens.textFieldHintIconColor}: ${textSecondary};\n `,\n negative: css`\n ${tokens.textFieldColor}: ${textPrimary};\n ${tokens.textFieldClearColor}: ${textNegative};\n\n ${tokens.textFieldPlaceholderColor}: ${textSecondary};\n ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};\n ${tokens.textFieldClearPlaceholderColor}: ${textNegative};\n ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative};\n\n ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative};\n ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive};\n ${tokens.textFieldCaretColor}: ${textAccent};\n ${tokens.textFieldTextBeforeColor}: ${textTertiary};\n ${tokens.textFieldTextAfterColor}: ${textTertiary};\n ${tokens.textFieldLabelColor}: ${textPrimary};\n ${tokens.textFieldLeftHelperColor}: ${textNegative};\n ${tokens.textFieldFocusColor}: ${textAccent};\n\n ${tokens.textFieldContentSlotColor}: ${textSecondary};\n ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};\n ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};\n\n ${tokens.focusColor}: ${surfaceAccent};\n ${tokens.textFieldIndicatorColor}: ${surfaceNegative};\n ${tokens.textFieldOptionalColor}: ${textTertiary};\n\n ${tokens.textFieldDividerColor}: ${surfaceNegative};\n ${tokens.textFieldDividerColorHover}: ${surfaceNegative};\n ${tokens.textFieldDividerColorFocus}: ${surfaceAccent};\n\n ${tokens.background}: ${surfaceSolidCard};\n ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n ${tokens.itemBackground}: transparent;\n ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary};\n ${tokens.itemColor}: ${textPrimary};\n\n ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};\n ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor};\n ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary};\n\n ${tokens.textFieldHintIconColor}: ${textSecondary};\n `,\n },\n size: {\n l: css`\n ${tokens.textFieldHeight}: 3.5rem;\n ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem;\n ${tokens.textFieldBorderRadius}: 0.875rem;\n\n ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem;\n ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem;\n ${tokens.textFieldRightContentWithHintMargin}: -0.0625rem -0.438rem -0.0625rem 0.75rem;\n\n ${tokens.textFieldContentRightWrapperGap}: 0.25rem;\n ${tokens.textFieldContentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0;\n\n ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;\n ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;\n\n ${tokens.textFieldFontFamily}: ${bodyL.fontFamily};\n ${tokens.textFieldFontSize}: ${bodyL.fontSize};\n ${tokens.textFieldFontStyle}: ${bodyL.fontStyle};\n ${tokens.textFieldFontWeight}: ${bodyL.fontWeight};\n ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing};\n ${tokens.textFieldLineHeight}: ${bodyL.lineHeight};\n\n ${tokens.textFieldLabelOffset}: 0.75rem;\n ${tokens.textFieldClearLabelOffset}: 0.25rem;\n ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily};\n ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize};\n ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle};\n ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight};\n ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing};\n ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight};\n\n ${tokens.textFieldHintMargin}: -0.688rem -0.5rem;\n ${tokens.textFieldHintTargetSize}: 2.375rem;\n ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;\n ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;\n\n ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;\n ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0;\n ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0;\n\n ${tokens.textFieldIndicatorSizeInner}: 0.5rem;\n ${tokens.textFieldIndicatorSizeOuter}: 0.375rem;\n ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0;\n ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.5rem auto auto -0.75rem;\n ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto;\n ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.625rem auto auto;\n ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.5rem auto auto -0.875rem;\n ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 1.5rem -0.875rem auto auto;\n ${tokens.textFieldClearIndicatorHintInnerRight}: 1.5rem -2.488rem auto auto;\n\n ${tokens.borderRadius}: 0.875rem;\n ${tokens.padding}: 0.125rem;\n ${tokens.itemPadding}: 1.0625rem 1rem;\n ${tokens.itemBorderRadius}: 0.75rem;\n\n ${tokens.itemFontFamily}: ${bodyL.fontFamily};\n ${tokens.itemFontSize}: ${bodyL.fontSize};\n ${tokens.itemFontStyle}: ${bodyL.fontStyle};\n ${tokens.itemFontWeight}: ${bodyL.fontWeight};\n ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing};\n ${tokens.itemFontLineHeight}: ${bodyL.lineHeight};\n\n ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem;\n ${tokens.emptyStateGap}: 0.5rem;\n\n ${tokens.infiniteLoaderSpinnerSize}: 1.5rem;\n ${tokens.infiniteLoaderGap}: 0.5rem;\n `,\n m: css`\n ${tokens.textFieldHeight}: 3rem;\n ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem;\n ${tokens.textFieldBorderRadius}: 0.75rem;\n\n ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem;\n ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem;\n ${tokens.textFieldRightContentWithHintMargin}: -0.125rem -0.438rem -0.125rem 0.75rem;\n\n ${tokens.textFieldContentRightWrapperGap}: 0.25rem;\n ${tokens.textFieldContentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0;\n\n ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;\n ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;\n\n ${tokens.textFieldFontFamily}: ${bodyM.fontFamily};\n ${tokens.textFieldFontSize}: ${bodyM.fontSize};\n ${tokens.textFieldFontStyle}: ${bodyM.fontStyle};\n ${tokens.textFieldFontWeight}: ${bodyM.fontWeight};\n ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing};\n ${tokens.textFieldLineHeight}: ${bodyM.lineHeight};\n\n ${tokens.textFieldLabelOffset}: 0.625rem;\n ${tokens.textFieldClearLabelOffset}: 0.25rem;\n ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily};\n ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize};\n ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle};\n ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight};\n ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing};\n ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight};\n\n ${tokens.textFieldHintMargin}: -0.688rem -0.5rem;\n ${tokens.textFieldHintTargetSize}: 2.375rem;\n ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;\n ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;\n\n ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;\n ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0;\n ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0;\n\n ${tokens.textFieldIndicatorSizeInner}: 0.5rem;\n ${tokens.textFieldIndicatorSizeOuter}: 0.375rem;\n ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0;\n ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.375rem auto auto -0.75rem;\n ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto;\n ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.6875rem auto auto;\n ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.25rem auto auto -0.875rem;\n ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 1.25rem -0.875rem auto auto;\n ${tokens.textFieldClearIndicatorHintInnerRight}: 1.25rem -2.488rem auto auto;\n\n ${tokens.borderRadius}: 0.75rem;\n ${tokens.padding}: 0.125rem;\n ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem;\n ${tokens.itemBorderRadius}: 0.625rem;\n\n ${tokens.itemFontFamily}: ${bodyM.fontFamily};\n ${tokens.itemFontSize}: ${bodyM.fontSize};\n ${tokens.itemFontStyle}: ${bodyM.fontStyle};\n ${tokens.itemFontWeight}: ${bodyM.fontWeight};\n ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing};\n ${tokens.itemFontLineHeight}: ${bodyM.lineHeight};\n\n ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem;\n ${tokens.emptyStateGap}: 0.375rem;\n\n ${tokens.infiniteLoaderSpinnerSize}: 1.5rem;\n ${tokens.infiniteLoaderGap}: 0.375rem;\n `,\n s: css`\n ${tokens.textFieldHeight}: 2.5rem;\n ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem;\n ${tokens.textFieldBorderRadius}: 0.625rem;\n\n ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem;\n ${tokens.textFieldRightContentWithHintMargin}: -0.1875rem -0.438rem -0.1875rem 0.75rem;\n\n ${tokens.textFieldContentRightWrapperGap}: 0.25rem;\n ${tokens.textFieldContentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0;\n\n ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;\n ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;\n\n ${tokens.textFieldFontFamily}: ${bodyS.fontFamily};\n ${tokens.textFieldFontSize}: ${bodyS.fontSize};\n ${tokens.textFieldFontStyle}: ${bodyS.fontStyle};\n ${tokens.textFieldFontWeight}: ${bodyS.fontWeight};\n ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing};\n ${tokens.textFieldLineHeight}: ${bodyS.lineHeight};\n\n ${tokens.textFieldLabelOffset}: 0.5rem;\n ${tokens.textFieldClearLabelOffset}: 0.25rem;\n ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily};\n ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize};\n ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle};\n ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight};\n ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing};\n ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight};\n\n ${tokens.textFieldHintMargin}: -0.688rem -0.5rem;\n ${tokens.textFieldHintTargetSize}: 2.375rem;\n ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;\n ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;\n\n ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;\n ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;\n ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;\n\n ${tokens.textFieldIndicatorSizeInner}: 0.375rem;\n ${tokens.textFieldIndicatorSizeOuter}: 0.375rem;\n ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0;\n ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.3125rem auto auto -0.6875rem;\n ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto;\n ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.625rem auto auto;\n ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.063rem auto auto -0.75rem;\n ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 1.063rem -0.75rem auto auto;\n ${tokens.textFieldClearIndicatorHintInnerRight}: 1.063rem -2.238rem auto auto;\n\n ${tokens.borderRadius}: 0.625rem;\n ${tokens.padding}: 0.125rem;\n ${tokens.itemPadding}: 0.6875rem 0.75rem;\n ${tokens.itemBorderRadius}: 0.5rem;\n\n ${tokens.itemFontFamily}: ${bodyS.fontFamily};\n ${tokens.itemFontSize}: ${bodyS.fontSize};\n ${tokens.itemFontStyle}: ${bodyS.fontStyle};\n ${tokens.itemFontWeight}: ${bodyS.fontWeight};\n ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing};\n ${tokens.itemFontLineHeight}: ${bodyS.lineHeight};\n\n ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem;\n ${tokens.emptyStateGap}: 0.25rem;\n\n ${tokens.infiniteLoaderSpinnerSize}: 1.5rem;\n ${tokens.infiniteLoaderGap}: 0.25rem;\n `,\n xs: css`\n ${tokens.textFieldHeight}: 2rem;\n ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem;\n ${tokens.textFieldBorderRadius}: 0.5rem;\n\n ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem;\n ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem;\n ${tokens.textFieldRightContentWithHintMargin}: -0.0625rem -0.688rem -0.0625rem 0.75rem;\n\n ${tokens.textFieldContentRightWrapperGap}: 0.25rem;\n ${tokens.textFieldContentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0;\n\n ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;\n ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;\n\n ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.textFieldLabelOffset}: 0.375rem;\n ${tokens.textFieldClearLabelOffset}: 0.25rem;\n ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem;\n ${tokens.textFieldHintTargetSize}: 2.375rem;\n ${tokens.textFieldHintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto;\n ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;\n\n ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;\n ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;\n ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;\n\n ${tokens.textFieldIndicatorSizeInner}: 0.375rem;\n ${tokens.textFieldIndicatorSizeOuter}: 0.375rem;\n ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0;\n ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.25rem auto auto -0.625rem;\n ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto;\n ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.125rem -0.6875rem auto auto;\n ${tokens.textFieldClearIndicatorLabelPlacementInner}: 0.813rem auto auto -0.625rem;\n ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 0.813rem -0.625rem auto auto;\n ${tokens.textFieldClearIndicatorHintInnerRight}: 0.813rem -1.988rem auto auto;\n\n ${tokens.borderRadius}: 0.5rem;\n ${tokens.padding}: 0.125rem;\n ${tokens.itemPadding}: 0.5625rem 0.5rem;\n ${tokens.itemBorderRadius}: 0.5rem;\n\n ${tokens.itemFontFamily}: ${bodyXS.fontFamily};\n ${tokens.itemFontSize}: ${bodyXS.fontSize};\n ${tokens.itemFontStyle}: ${bodyXS.fontStyle};\n ${tokens.itemFontWeight}: ${bodyXS.fontWeight};\n ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem;\n ${tokens.emptyStateGap}: 0.25rem;\n\n ${tokens.infiniteLoaderSpinnerSize}: 1rem;\n ${tokens.infiniteLoaderGap}: 0.25rem;\n `,\n },\n labelPlacement: {\n inner: css`\n ${tokens.textFieldPlaceholderColor}: ${textSecondary};\n ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight};\n `,\n outer: css``,\n },\n hintView: {\n default: css`\n ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness};\n ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08));\n ${tokens.textFieldTooltipColor}: ${textPrimary};\n ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard};\n `,\n },\n hintSize: {\n m: css`\n ${tokens.textFieldTooltipPaddingTop}: 0.6875rem;\n ${tokens.textFieldTooltipPaddingRight}: 0.875rem;\n ${tokens.textFieldTooltipPaddingBottom}: 0.6875rem;\n ${tokens.textFieldTooltipPaddingLeft}: 0.875rem;\n\n ${tokens.textFieldTooltipMinHeight}: 2.5rem;\n ${tokens.textFieldTooltipBorderRadius}: 0.625rem;\n\n ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily};\n ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize};\n ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle};\n ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight};\n ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing};\n ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight};\n\n ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem;\n\n ${tokens.textFieldTooltipArrowMaskWidth}: 1.25rem;\n ${tokens.textFieldTooltipArrowMaskHeight}: 1.25rem;\n ${tokens.textFieldTooltipArrowMaskImage}: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==\");\n ${tokens.textFieldTooltipArrowHeight}: 0.5rem;\n ${tokens.textFieldTooltipArrowEdgeMargin}: 0.625rem;\n `,\n s: css`\n ${tokens.textFieldTooltipPaddingTop}: 0.5rem;\n ${tokens.textFieldTooltipPaddingRight}: 0.75rem;\n ${tokens.textFieldTooltipPaddingBottom}: 0.5rem;\n ${tokens.textFieldTooltipPaddingLeft}: 0.75rem;\n\n ${tokens.textFieldTooltipMinHeight}: 2rem;\n ${tokens.textFieldTooltipBorderRadius}: 0.5rem;\n\n ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem;\n\n ${tokens.textFieldTooltipArrowMaskWidth}: 1rem;\n ${tokens.textFieldTooltipArrowMaskHeight}: 1rem;\n ${tokens.textFieldTooltipArrowMaskImage}: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");\n ${tokens.textFieldTooltipArrowHeight}: 0.375rem;\n ${tokens.textFieldTooltipArrowEdgeMargin}: 0.5625rem;\n `,\n },\n disabled: {\n true: css`\n ${tokens.textFieldDisabledOpacity}: 0.4;\n `,\n },\n readOnly: {\n true: css`\n ${tokens.textFieldColorReadOnly}: ${textPrimary};\n ${tokens.textFieldReadOnlyOpacity}: 0.1;\n ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4;\n ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary};\n ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary};\n ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary};\n ${tokens.textFieldLabelColorReadOnly}: ${textPrimary};\n ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary};\n `,\n },\n },\n};\n"],"names":["config","defaults","view","size","labelPlacement","variations","default","positive","warning","negative","l","m","s","xs","inner","outer","hintView","hintSize","disabled","true","readOnly"],"mappings":";;;;AAgCO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,GAAG;AACTC,IAAAA,cAAc,EAAE;GACnB;AACDC,EAAAA,UAAU,EAAE;AACRH,IAAAA,IAAI,EAAE;AACFI,MAAAA,SAAAA,EAAO,UAyCN;AACDC,MAAAA,QAAQ,EAAA,SAyCP;AACDC,MAAAA,OAAO,EAAA,UAyCN;AACDC,MAAAA,QAAQ,EAAA;KA0CX;AACDN,IAAAA,IAAI,EAAE;AACFO,MAAAA,CAAC,EAAA,UA0EA;AACDC,MAAAA,CAAC,EAAA,SA0EA;AACDC,MAAAA,CAAC,EAAA,UA0EA;AACDC,MAAAA,EAAE,EAAA;KA2EL;AACDT,IAAAA,cAAc,EAAE;AACZU,MAAAA,KAAK,EAAA,SAQJ;AACDC,MAAAA,KAAK,EAAA;KACR;AACDC,IAAAA,QAAQ,EAAE;MACNV,SAAAA,EAAO;KAMV;AACDW,IAAAA,QAAQ,EAAE;AACNN,MAAAA,CAAC,EAAA,SAuBA;AACDC,MAAAA,CAAC,EAAA;KAwBJ;AACDM,IAAAA,QAAQ,EAAE;MACNC,MAAAA,EAAI;KAGP;AACDC,IAAAA,QAAQ,EAAE;MACND,MAAAA,EAAI;AAUR;AACJ;AACJ;;;;"}
1	+ {"version":3,"file":"Autocomplete.config.js","sources":["../../../../../src-css/components/Autocomplete/Autocomplete.config.ts"],"sourcesContent":["import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/css';\nimport {\n bodyL,\n bodyM,\n bodyS,\n bodyXS,\n surfaceAccent,\n surfaceNegative,\n surfacePositive,\n surfaceSolidCard,\n surfaceSolidCardBrightness,\n surfaceTransparentNegative,\n surfaceTransparentNegativeActive,\n surfaceTransparentPositive,\n surfaceTransparentPositiveActive,\n surfaceTransparentPrimary,\n surfaceTransparentSecondary,\n surfaceTransparentTertiary,\n surfaceTransparentWarning,\n surfaceTransparentWarningActive,\n surfaceWarning,\n textAccent,\n textNegative,\n textPositive,\n textPrimary,\n textSecondary,\n textSecondaryActive,\n textSecondaryHover,\n textTertiary,\n textWarning,\n} from '@salutejs/plasma-themes/tokens/plasma_b2c';\n\nexport const config = {\n defaults: {\n view: 'default',\n size: 'l',\n labelPlacement: 'outer',\n },\n variations: {\n view: {\n default: css`\n ${tokens.textFieldColor}: ${textPrimary};\n ${tokens.textFieldClearColor}: ${textPrimary};\n\n ${tokens.textFieldPlaceholderColor}: ${textSecondary};\n ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};\n ${tokens.textFieldClearPlaceholderColor}: ${textSecondary};\n ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary};\n\n ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary};\n ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary};\n ${tokens.textFieldCaretColor}: ${textAccent};\n ${tokens.textFieldTextBeforeColor}: ${textTertiary};\n ${tokens.textFieldTextAfterColor}: ${textTertiary};\n ${tokens.textFieldLabelColor}: ${textPrimary};\n ${tokens.textFieldLeftHelperColor}: ${textSecondary};\n ${tokens.textFieldFocusColor}: ${textAccent};\n\n ${tokens.textFieldContentSlotColor}: ${textSecondary};\n ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};\n ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};\n\n ${tokens.focusColor}: ${surfaceAccent};\n ${tokens.textFieldIndicatorColor}: ${surfaceNegative};\n ${tokens.textFieldOptionalColor}: ${textTertiary};\n\n ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary};\n ${tokens.textFieldDividerColorHover}: ${textSecondary};\n ${tokens.textFieldDividerColorFocus}: ${surfaceAccent};\n\n ${tokens.background}: ${surfaceSolidCard};\n ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n ${tokens.itemBackground}: transparent;\n ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary};\n ${tokens.itemColor}: ${textPrimary};\n\n ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};\n ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor};\n ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary};\n\n ${tokens.textFieldHintIconColor}: ${textSecondary};\n `,\n positive: css`\n ${tokens.textFieldColor}: ${textPrimary};\n ${tokens.textFieldClearColor}: ${textPositive};\n\n ${tokens.textFieldPlaceholderColor}: ${textSecondary};\n ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};\n ${tokens.textFieldClearPlaceholderColor}: ${textPositive};\n ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive};\n\n ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive};\n ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive};\n ${tokens.textFieldCaretColor}: ${textAccent};\n ${tokens.textFieldTextBeforeColor}: ${textTertiary};\n ${tokens.textFieldTextAfterColor}: ${textTertiary};\n ${tokens.textFieldLabelColor}: ${textPrimary};\n ${tokens.textFieldLeftHelperColor}: ${textPositive};\n ${tokens.textFieldFocusColor}: ${textAccent};\n\n ${tokens.textFieldContentSlotColor}: ${textSecondary};\n ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};\n ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};\n\n ${tokens.focusColor}: ${surfaceAccent};\n ${tokens.textFieldIndicatorColor}: ${surfaceNegative};\n ${tokens.textFieldOptionalColor}: ${textTertiary};\n\n ${tokens.textFieldDividerColor}: ${surfacePositive};\n ${tokens.textFieldDividerColorHover}: ${surfacePositive};\n ${tokens.textFieldDividerColorFocus}: ${surfaceAccent};\n\n ${tokens.background}: ${surfaceSolidCard};\n ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n ${tokens.itemBackground}: transparent;\n ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary};\n ${tokens.itemColor}: ${textPrimary};\n\n ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};\n ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor};\n ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary};\n\n ${tokens.textFieldHintIconColor}: ${textSecondary};\n `,\n warning: css`\n ${tokens.textFieldColor}: ${textPrimary};\n ${tokens.textFieldClearColor}: ${textWarning};\n\n ${tokens.textFieldPlaceholderColor}: ${textSecondary};\n ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};\n ${tokens.textFieldClearPlaceholderColor}: ${textWarning};\n ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning};\n\n ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning};\n ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive};\n ${tokens.textFieldCaretColor}: ${textAccent};\n ${tokens.textFieldTextBeforeColor}: ${textTertiary};\n ${tokens.textFieldTextAfterColor}: ${textTertiary};\n ${tokens.textFieldLabelColor}: ${textPrimary};\n ${tokens.textFieldLeftHelperColor}: ${textWarning};\n ${tokens.textFieldFocusColor}: ${textAccent};\n\n ${tokens.textFieldContentSlotColor}: ${textSecondary};\n ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};\n ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};\n\n ${tokens.focusColor}: ${surfaceAccent};\n ${tokens.textFieldIndicatorColor}: ${surfaceNegative};\n ${tokens.textFieldOptionalColor}: ${textTertiary};\n\n ${tokens.textFieldDividerColor}: ${surfaceWarning};\n ${tokens.textFieldDividerColorHover}: ${surfaceWarning};\n ${tokens.textFieldDividerColorFocus}: ${surfaceAccent};\n\n ${tokens.background}: ${surfaceSolidCard};\n ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n ${tokens.itemBackground}: transparent;\n ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary};\n ${tokens.itemColor}: ${textPrimary};\n\n ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};\n ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor};\n ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary};\n\n ${tokens.textFieldHintIconColor}: ${textSecondary};\n `,\n negative: css`\n ${tokens.textFieldColor}: ${textPrimary};\n ${tokens.textFieldClearColor}: ${textNegative};\n\n ${tokens.textFieldPlaceholderColor}: ${textSecondary};\n ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};\n ${tokens.textFieldClearPlaceholderColor}: ${textNegative};\n ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative};\n\n ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative};\n ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive};\n ${tokens.textFieldCaretColor}: ${textAccent};\n ${tokens.textFieldTextBeforeColor}: ${textTertiary};\n ${tokens.textFieldTextAfterColor}: ${textTertiary};\n ${tokens.textFieldLabelColor}: ${textPrimary};\n ${tokens.textFieldLeftHelperColor}: ${textNegative};\n ${tokens.textFieldFocusColor}: ${textAccent};\n\n ${tokens.textFieldContentSlotColor}: ${textSecondary};\n ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};\n ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};\n\n ${tokens.focusColor}: ${surfaceAccent};\n ${tokens.textFieldIndicatorColor}: ${surfaceNegative};\n ${tokens.textFieldOptionalColor}: ${textTertiary};\n\n ${tokens.textFieldDividerColor}: ${surfaceNegative};\n ${tokens.textFieldDividerColorHover}: ${surfaceNegative};\n ${tokens.textFieldDividerColorFocus}: ${surfaceAccent};\n\n ${tokens.background}: ${surfaceSolidCard};\n ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);\n ${tokens.itemBackground}: transparent;\n ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary};\n ${tokens.itemColor}: ${textPrimary};\n\n ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor};\n ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor};\n ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary};\n\n ${tokens.textFieldHintIconColor}: ${textSecondary};\n `,\n },\n size: {\n l: css`\n ${tokens.textFieldHeight}: 3.5rem;\n ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem;\n ${tokens.textFieldBorderRadius}: 0.875rem;\n\n ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem;\n ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem;\n ${tokens.textFieldRightContentWithHintMargin}: -0.0625rem -0.438rem -0.0625rem 0.75rem;\n\n ${tokens.textFieldContentRightWrapperGap}: 0.25rem;\n ${tokens.textFieldContentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0;\n\n ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;\n ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;\n\n ${tokens.textFieldFontFamily}: ${bodyL.fontFamily};\n ${tokens.textFieldFontSize}: ${bodyL.fontSize};\n ${tokens.textFieldFontStyle}: ${bodyL.fontStyle};\n ${tokens.textFieldFontWeight}: ${bodyL.fontWeight};\n ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing};\n ${tokens.textFieldLineHeight}: ${bodyL.lineHeight};\n\n ${tokens.textFieldLabelOffset}: 0.75rem;\n ${tokens.textFieldClearLabelOffset}: 0.25rem;\n ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily};\n ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize};\n ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle};\n ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight};\n ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing};\n ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight};\n\n ${tokens.textFieldHintMargin}: -0.688rem -0.5rem;\n ${tokens.textFieldHintTargetSize}: 2.375rem;\n ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;\n ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;\n\n ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;\n ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0;\n ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0;\n\n ${tokens.textFieldIndicatorSizeInner}: 0.5rem;\n ${tokens.textFieldIndicatorSizeOuter}: 0.375rem;\n ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0;\n ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.5rem auto auto -0.75rem;\n ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto;\n ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.625rem auto auto;\n ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.5rem auto auto -0.875rem;\n ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 1.5rem -0.875rem auto auto;\n ${tokens.textFieldClearIndicatorHintInnerRight}: 1.5rem -2.488rem auto auto;\n\n ${tokens.borderRadius}: 0.875rem;\n ${tokens.padding}: 0.125rem;\n ${tokens.itemPadding}: 1.0625rem 1rem;\n ${tokens.itemBorderRadius}: 0.75rem;\n\n ${tokens.itemFontFamily}: ${bodyL.fontFamily};\n ${tokens.itemFontSize}: ${bodyL.fontSize};\n ${tokens.itemFontStyle}: ${bodyL.fontStyle};\n ${tokens.itemFontWeight}: ${bodyL.fontWeight};\n ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing};\n ${tokens.itemFontLineHeight}: ${bodyL.lineHeight};\n\n ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem;\n ${tokens.emptyStateGap}: 0.5rem;\n\n ${tokens.infiniteLoaderSpinnerSize}: 1.5rem;\n ${tokens.infiniteLoaderGap}: 0.5rem;\n `,\n m: css`\n ${tokens.textFieldHeight}: 3rem;\n ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem;\n ${tokens.textFieldBorderRadius}: 0.75rem;\n\n ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem;\n ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem;\n ${tokens.textFieldRightContentWithHintMargin}: -0.125rem -0.438rem -0.125rem 0.75rem;\n\n ${tokens.textFieldContentRightWrapperGap}: 0.25rem;\n ${tokens.textFieldContentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0;\n\n ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;\n ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;\n\n ${tokens.textFieldFontFamily}: ${bodyM.fontFamily};\n ${tokens.textFieldFontSize}: ${bodyM.fontSize};\n ${tokens.textFieldFontStyle}: ${bodyM.fontStyle};\n ${tokens.textFieldFontWeight}: ${bodyM.fontWeight};\n ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing};\n ${tokens.textFieldLineHeight}: ${bodyM.lineHeight};\n\n ${tokens.textFieldLabelOffset}: 0.625rem;\n ${tokens.textFieldClearLabelOffset}: 0.25rem;\n ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily};\n ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize};\n ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle};\n ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight};\n ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing};\n ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight};\n\n ${tokens.textFieldHintMargin}: -0.688rem -0.5rem;\n ${tokens.textFieldHintTargetSize}: 2.375rem;\n ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;\n ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;\n\n ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;\n ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0;\n ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0;\n\n ${tokens.textFieldIndicatorSizeInner}: 0.5rem;\n ${tokens.textFieldIndicatorSizeOuter}: 0.375rem;\n ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0;\n ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.375rem auto auto -0.75rem;\n ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto;\n ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.6875rem auto auto;\n ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.25rem auto auto -0.875rem;\n ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 1.25rem -0.875rem auto auto;\n ${tokens.textFieldClearIndicatorHintInnerRight}: 1.25rem -2.488rem auto auto;\n\n ${tokens.borderRadius}: 0.75rem;\n ${tokens.padding}: 0.125rem;\n ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem;\n ${tokens.itemBorderRadius}: 0.625rem;\n\n ${tokens.itemFontFamily}: ${bodyM.fontFamily};\n ${tokens.itemFontSize}: ${bodyM.fontSize};\n ${tokens.itemFontStyle}: ${bodyM.fontStyle};\n ${tokens.itemFontWeight}: ${bodyM.fontWeight};\n ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing};\n ${tokens.itemFontLineHeight}: ${bodyM.lineHeight};\n\n ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem;\n ${tokens.emptyStateGap}: 0.375rem;\n\n ${tokens.infiniteLoaderSpinnerSize}: 1.5rem;\n ${tokens.infiniteLoaderGap}: 0.375rem;\n `,\n s: css`\n ${tokens.textFieldHeight}: 2.5rem;\n ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem;\n ${tokens.textFieldBorderRadius}: 0.625rem;\n\n ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem;\n ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem;\n ${tokens.textFieldRightContentWithHintMargin}: -0.1875rem -0.438rem -0.1875rem 0.75rem;\n\n ${tokens.textFieldContentRightWrapperGap}: 0.25rem;\n ${tokens.textFieldContentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0;\n\n ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;\n ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;\n\n ${tokens.textFieldFontFamily}: ${bodyS.fontFamily};\n ${tokens.textFieldFontSize}: ${bodyS.fontSize};\n ${tokens.textFieldFontStyle}: ${bodyS.fontStyle};\n ${tokens.textFieldFontWeight}: ${bodyS.fontWeight};\n ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing};\n ${tokens.textFieldLineHeight}: ${bodyS.lineHeight};\n\n ${tokens.textFieldLabelOffset}: 0.5rem;\n ${tokens.textFieldClearLabelOffset}: 0.25rem;\n ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily};\n ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize};\n ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle};\n ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight};\n ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing};\n ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight};\n\n ${tokens.textFieldHintMargin}: -0.688rem -0.5rem;\n ${tokens.textFieldHintTargetSize}: 2.375rem;\n ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;\n ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;\n\n ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;\n ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;\n ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;\n\n ${tokens.textFieldIndicatorSizeInner}: 0.375rem;\n ${tokens.textFieldIndicatorSizeOuter}: 0.375rem;\n ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0;\n ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.3125rem auto auto -0.6875rem;\n ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto;\n ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.625rem auto auto;\n ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.063rem auto auto -0.75rem;\n ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 1.063rem -0.75rem auto auto;\n ${tokens.textFieldClearIndicatorHintInnerRight}: 1.063rem -2.238rem auto auto;\n\n ${tokens.borderRadius}: 0.625rem;\n ${tokens.padding}: 0.125rem;\n ${tokens.itemPadding}: 0.6875rem 0.75rem;\n ${tokens.itemBorderRadius}: 0.5rem;\n\n ${tokens.itemFontFamily}: ${bodyS.fontFamily};\n ${tokens.itemFontSize}: ${bodyS.fontSize};\n ${tokens.itemFontStyle}: ${bodyS.fontStyle};\n ${tokens.itemFontWeight}: ${bodyS.fontWeight};\n ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing};\n ${tokens.itemFontLineHeight}: ${bodyS.lineHeight};\n\n ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem;\n ${tokens.emptyStateGap}: 0.25rem;\n\n ${tokens.infiniteLoaderSpinnerSize}: 1.5rem;\n ${tokens.infiniteLoaderGap}: 0.25rem;\n `,\n xs: css`\n ${tokens.textFieldHeight}: 2rem;\n ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem;\n ${tokens.textFieldBorderRadius}: 0.5rem;\n\n ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem;\n ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem;\n ${tokens.textFieldRightContentWithHintMargin}: -0.0625rem -0.688rem -0.0625rem 0.75rem;\n\n ${tokens.textFieldContentRightWrapperGap}: 0.25rem;\n ${tokens.textFieldContentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0;\n\n ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;\n ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;\n\n ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.textFieldLabelOffset}: 0.375rem;\n ${tokens.textFieldClearLabelOffset}: 0.25rem;\n ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem;\n ${tokens.textFieldHintTargetSize}: 2.375rem;\n ${tokens.textFieldHintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto;\n ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;\n\n ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;\n ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;\n ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;\n\n ${tokens.textFieldIndicatorSizeInner}: 0.375rem;\n ${tokens.textFieldIndicatorSizeOuter}: 0.375rem;\n ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0;\n ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.25rem auto auto -0.625rem;\n ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto;\n ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.125rem -0.6875rem auto auto;\n ${tokens.textFieldClearIndicatorLabelPlacementInner}: 0.813rem auto auto -0.625rem;\n ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 0.813rem -0.625rem auto auto;\n ${tokens.textFieldClearIndicatorHintInnerRight}: 0.813rem -1.988rem auto auto;\n\n ${tokens.borderRadius}: 0.5rem;\n ${tokens.padding}: 0.125rem;\n ${tokens.itemPadding}: 0.5625rem 0.5rem;\n ${tokens.itemBorderRadius}: 0.5rem;\n\n ${tokens.itemFontFamily}: ${bodyXS.fontFamily};\n ${tokens.itemFontSize}: ${bodyXS.fontSize};\n ${tokens.itemFontStyle}: ${bodyXS.fontStyle};\n ${tokens.itemFontWeight}: ${bodyXS.fontWeight};\n ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem;\n ${tokens.emptyStateGap}: 0.25rem;\n\n ${tokens.infiniteLoaderSpinnerSize}: 1rem;\n ${tokens.infiniteLoaderGap}: 0.25rem;\n `,\n },\n labelPlacement: {\n inner: css`\n ${tokens.textFieldPlaceholderColor}: ${textSecondary};\n ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight};\n `,\n outer: css``,\n },\n hintView: {\n default: css`\n ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness};\n ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08));\n ${tokens.textFieldTooltipColor}: ${textPrimary};\n ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard};\n `,\n },\n hintSize: {\n m: css`\n ${tokens.textFieldTooltipPaddingTop}: 0.6875rem;\n ${tokens.textFieldTooltipPaddingRight}: 0.875rem;\n ${tokens.textFieldTooltipPaddingBottom}: 0.6875rem;\n ${tokens.textFieldTooltipPaddingLeft}: 0.875rem;\n\n ${tokens.textFieldTooltipMinHeight}: 2.5rem;\n ${tokens.textFieldTooltipBorderRadius}: 0.625rem;\n\n ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily};\n ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize};\n ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle};\n ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight};\n ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing};\n ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight};\n\n ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem;\n\n ${tokens.textFieldTooltipArrowMaskWidth}: 1.25rem;\n ${tokens.textFieldTooltipArrowMaskHeight}: 1.25rem;\n ${tokens.textFieldTooltipArrowMaskImage}: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==\");\n ${tokens.textFieldTooltipArrowHeight}: 0.5rem;\n ${tokens.textFieldTooltipArrowEdgeMargin}: 0.625rem;\n `,\n s: css`\n ${tokens.textFieldTooltipPaddingTop}: 0.5rem;\n ${tokens.textFieldTooltipPaddingRight}: 0.75rem;\n ${tokens.textFieldTooltipPaddingBottom}: 0.5rem;\n ${tokens.textFieldTooltipPaddingLeft}: 0.75rem;\n\n ${tokens.textFieldTooltipMinHeight}: 2rem;\n ${tokens.textFieldTooltipBorderRadius}: 0.5rem;\n\n ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily};\n ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize};\n ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle};\n ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight};\n ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing};\n ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight};\n\n ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem;\n\n ${tokens.textFieldTooltipArrowMaskWidth}: 1rem;\n ${tokens.textFieldTooltipArrowMaskHeight}: 1rem;\n ${tokens.textFieldTooltipArrowMaskImage}: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");\n ${tokens.textFieldTooltipArrowHeight}: 0.375rem;\n ${tokens.textFieldTooltipArrowEdgeMargin}: 0.5625rem;\n `,\n },\n disabled: {\n true: css`\n ${tokens.textFieldDisabledOpacity}: 0.4;\n `,\n },\n readOnly: {\n true: css`\n ${tokens.textFieldColorReadOnly}: ${textPrimary};\n ${tokens.textFieldReadOnlyOpacity}: 0.1;\n ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4;\n ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary};\n ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary};\n ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary};\n ${tokens.textFieldLabelColorReadOnly}: ${textPrimary};\n ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary};\n `,\n },\n },\n};\n"],"names":["config","defaults","view","size","labelPlacement","variations","default","positive","warning","negative","l","m","s","xs","inner","outer","hintView","hintSize","disabled","true","readOnly"],"mappings":";;;;AAgCO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,GAAG;AACTC,IAAAA,cAAc,EAAE;GACnB;AACDC,EAAAA,UAAU,EAAE;AACRH,IAAAA,IAAI,EAAE;AACFI,MAAAA,SAAAA,EAAO,UAyCN;AACDC,MAAAA,QAAQ,EAAA,SAyCP;AACDC,MAAAA,OAAO,EAAA,UAyCN;AACDC,MAAAA,QAAQ,EAAA;KA0CX;AACDN,IAAAA,IAAI,EAAE;AACFO,MAAAA,CAAC,EAAA,UA0EA;AACDC,MAAAA,CAAC,EAAA,SA0EA;AACDC,MAAAA,CAAC,EAAA,UA0EA;AACDC,MAAAA,EAAE,EAAA;KA2EL;AACDT,IAAAA,cAAc,EAAE;AACZU,MAAAA,KAAK,EAAA,SAQJ;AACDC,MAAAA,KAAK,EAAA;KACR;AACDC,IAAAA,QAAQ,EAAE;MACNV,SAAAA,EAAO;KAMV;AACDW,IAAAA,QAAQ,EAAE;AACNN,MAAAA,CAAC,EAAA,SAuBA;AACDC,MAAAA,CAAC,EAAA;KAwBJ;AACDM,IAAAA,QAAQ,EAAE;MACNC,MAAAA,EAAI;KAGP;AACDC,IAAAA,QAAQ,EAAE;MACND,MAAAA,EAAI;AAUR;AACJ;AACJ;;;;"}