@salutejs/plasma-new-hope 0.82.1-canary.1209.9162541836.0 → 0.82.1-canary.1210.9186102644.0

package/styled-components/es/components/Popup/Popup.template-doc.mdx

@@ -1,45 +1,79 @@
 ---
-id: popupBase
-title: PopupBase
+id: popup
+title: Popup
 ---
 
 import { PropsTable, Description } from '@site/src/components';
 
-# PopupBase
-<Description name="PopupBase" />
-<PropsTable name="PopupBase" />
+# Popup
+<Description name="Popup" />
+<PropsTable name="Popup" />
 
 ### Провайдер контекста
 
-Поместите `PopupBaseProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять PopupBase:
+Поместите `PopupProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять Popup:
 
 ```tsx title="index.ts"
 import ReactDOM from 'react-dom';
-import { PopupBaseProvider } from '@salutejs/{{ package }}';
+import { PopupProvider } from '@salutejs/sdds-serv';
 
 import { App } from './App';
 
 ReactDOM.render(
-    <PopupBaseProvider>
+    <PopupProvider>
         <App />
-    </PopupBaseProvider>,
+    </PopupProvider>,
     document.getElementById('root')
 );
 ```
 
 ### Использование
 
-PopupBase можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
+Popup можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
+
 Также это свойство поддерживает передачу id элемента, в котором будет использоваться компонент.
+
 Само позиционирование можно указать с помощью свойства `placement`(center - по умолчанию; left, right, top, bottom и их комбинации),
- а также определить отступы от точки с помощью `offset`.
+а также определить отступы от точки с помощью `offset`.
 
 ```tsx live
 import React, { useRef } from 'react';
-import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens/brands/{{ theme }}';
-import { SSRProvider, Button, PopupBase, PopupBaseProvider } from  '@salutejs/{{ package }}';
+import styled from 'styled-components';
+import { surfaceSolidTertiary, surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
+
+import { SSRProvider, Button, Popup, PopupProvider } from  '@salutejs/{{ package }}';
 
 export function App() {
+    const StyledButton = styled(Button)`
+        margin-top: 1rem;
+        width: 15rem;
+    `;
+
+    const StyledWrapper = styled.div`
+        height: 500px;
+    `;
+
+    const OtherContent = styled.div`
+        margin-top: 1rem;
+        width: 400px;
+        height: 500px;
+        background: ${surfaceSolidTertiary};
+        position: absolute;
+
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        padding: 1rem;
+
+        bottom: 0;
+        right: 0;
+    `;
+
+    const Content = styled.div`
+        background: ${surfaceSolidSecondary};
+        padding: 1rem;
+    `;
+
     const [isOpenA, setIsOpenA] = React.useState(false);
     const [isOpenB, setIsOpenB] = React.useState(false);
 
@@ -47,59 +81,28 @@ export function App() {
 
     return (
         <SSRProvider>
-            <PopupBaseProvider>
-                <div style=\{{height: "500px"}}>
+            <PopupProvider>
+                <StyledWrapper>
                     <div style=\{{ display: 'flex', flexDirection: 'column' }}>
-                        <Button 
-                            style=\{{
-                                marginTop: "1rem",
-                                width: "15rem"
-                            }} 
-                            text="Открыть в document" 
-                            onClick={() => setIsOpenB(true)} 
-                        />
-                        <Button 
-                            style=\{{
-                                marginTop: "1rem",
-                                width: "15rem"
-                            }} 
-                            text="Открыть во Frame" 
-                            onClick={() => setIsOpenA(true)} 
-                        />
+                        <StyledButton text="Открыть в document" onClick={() => setIsOpenB(true)} />
+                        <StyledButton text="Открыть во Frame" onClick={() => setIsOpenA(true)} />
                     </div>
-                    <PopupBase
+                    <Popup
                         id="popupA"
                         frame={ref}
                         isOpen={isOpenA}
                         placement="center"
                         offset={[0, 0]}
                     >
-                        <div style=\{{ background: surfaceSolid02, padding: "1rem" }}>
+                        <Content>
                             <Button onClick={() => setIsOpenA(false)}>Close</Button>
                             <>Content</>
-                        </div>
-                    </PopupBase>
-                    <div 
-                        ref={ref} 
-                        style=\{{
-                            marginTop: "1rem",
-                            width: "400px",
-                            height: "500px",
-                            background: surfaceSolid03,
-                            position: "absolute",
-
-                            display: "flex",
-                            alignItems: "flex-start",
-                            justifyContent: "center",
-                            padding: "1rem",
-
-                            bottom: 0,
-                            right: 0
-                        }}
-                    >
+                        </Content>
+                    </Popup>
+                    <OtherContent ref={ref}>
                         <>Frame</>
-                    </div>
-                    <PopupBase
+                    </OtherContent>
+                    <Popup
                         id="popupB"
                         frame="document"
                         isOpen={isOpenB}
@@ -110,9 +113,9 @@ export function App() {
                             <Button onClick={() => setIsOpenB(false)}>Close</Button>
                             <>Content</>
                         </Content>
-                    </PopupBase>
-                </div>
-            </PopupBaseProvider>
+                    </Popup>
+                </StyledWrapper>
+            </PopupProvider>
         </SSRProvider>
     );
 }
@@ -121,19 +124,19 @@ export function App() {
 ## Подключение анимации
 
 Для подключения анимации нужно добавить параметр `withAnimation`.
-Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `popupBaseClasses` для `PopupBase`.
-Для добавления анимации необходимо использовать класс `.popup-base-root` через переменную `popupBaseClasses.root` из пакета.
+Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `PopupClasses` для `Popup`.
+Для добавления анимации необходимо использовать класс `.popup-root` через переменную `PopupClasses.root` из пакета.
 
 Пример:
 
 ```tsx
-const StyledPopupTransition = styled(PopupBase)`
-    && > .${popupBaseClasses.root} {
+const StyledPopupTransition = styled(Popup)`
+    && > .${PopupClasses.root} {
         opacity: 1;
         transition: opacity 0.5s 0.1s;
     }
 
-    &&.${popupBaseClasses.endTransition} > .${popupBaseClasses.root} {
+    &&.${PopupClasses.endTransition} > .${PopupClasses.root} {
         opacity: 0;
         transition: opacity 0.5s 0.1s;
     }
@@ -143,12 +146,12 @@ const StyledPopupTransition = styled(PopupBase)`
 или
 
 ```tsx
-const StyledPopupAnimation = styled(PopupBase)`
-    && > .${popupBaseClasses.root} {
+const StyledPopupAnimation = styled(Popup)`
+    && > .${PopupClasses.root} {
         animation: fadeIn 1s forwards;
     }
 
-    &&.${popupBaseClasses.endAnimation} > .${popupBaseClasses.root} {
+    &&.${PopupClasses.endAnimation} > .${PopupClasses.root} {
         animation: fadeOut 1s forwards;
     }
 
@@ -182,14 +185,7 @@ const StyledPopupAnimation = styled(PopupBase)`
     return (
         <>
             <div>
-                <Button 
-                    style=\{{
-                        marginTop: "1rem",
-                        width: "15rem"
-                    }} 
-                    text="Открыть" 
-                    onClick={() => setIsOpen(true)} 
-                />
+                <StyledButton text="Открыть" onClick={() => setIsOpen(true)} />
             </div>
             <StyledPopupAnimation
                 id="popup-id"

package/styled-components/es/components/Progress/Progress.template-doc.mdx

@@ -0,0 +1,33 @@
+---
+id: progress
+title: Progress
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Progress
+<Description name="Progress" />
+<PropsTable name="Progress" exclude={['css']} />
+
+##Примеры
+
+### Вид прогресса
+Вид прогресса задается с помощью свойства `view`. Возможные значения свойства `view`:
++ `"default"` – по умолчанию;
++ `"primary"` – основная;
++ `"secondary"` – вторичная;
++ `"accent"` – акцентная;
++ `"success"` – успешное завершение;
++ `"warning"` – предупреждение;
++ `"error"` – ошибка;
+
+```tsx live
+import React from 'react';
+import { Progress } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <Progress value={25} view="success" displayValue />
+    );
+}
+```

package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx

@@ -27,8 +27,9 @@ export function App() {
 }
 ```
 
-## Группа радиокнопок
+## RadioGroup
 Компоненты `Radiobox` следует объединять в `RadioGroup`
+
 ```tsx live
 <RadioGroup aria-labelledby="radiogroup-title-id">
     <H3 id="radiogroup-title-id">Заголовок</H3>

package/styled-components/es/components/Segment/Segment.template-doc.mdx

@@ -25,8 +25,8 @@ import { PropsTable, Description } from '@site/src/components';
 Внутри данного провайдера есть доступ к хуку `useSegment`.
 
 ```tsx live
-import React, { useState } from 'react';
-import { SegmentGroup, SegmentItem, SegmentProvider } from '@salutejs/{{ package }}';
+import React from 'react';
+import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
 
 export function App() {
     const items = Array(8).fill(0);

package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx

@@ -6,7 +6,7 @@ title: Skeleton
 import { PropsTable, Description } from '@site/src/components';
 
 # Skeleton
-Набор компонентов для создания скелетов загрузки (плейсхолдеров).
+Набор компонентов для создания скелетов загрузки (placeholders).
 
 ## LineSkeleton
 <Description name="LineSkeleton" />
@@ -77,13 +77,13 @@ export function App() {
 ```
 
 ## Доступность
-При использование хока `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
+При использовании hook `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
 
 ```tsx
 import React, { useState } from 'react';
 import { Button } from '@salutejs/{{ package }}';
 
-const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(BasicButton);
+const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(Button);
 
 export default function App () {
     const [skeleton, setSkeleton] = useState(false);
@@ -100,4 +100,4 @@ export default function App () {
 }
 ```
 
-Таким образом, при `skeleton=true` и `aria-busy=true` скринридер будет оповещать о соответствующем статусе компонента.
+Таким образом, при `skeleton=true` и `aria-busy=true` screen-reader будет оповещать о соответствующем статусе компонента.

package/styled-components/es/components/Tabs/Tabs.template-doc.mdx

@@ -27,7 +27,7 @@ import { PropsTable, Description } from '@site/src/components';
 
 ## Использование
 
-### Cтандартное подключение, без клавиатурной навигации
+### Стандартное подключение, без клавиатурной навигации
 
 ```tsx live
 import React, { useState } from 'react';

package/styled-components/es/components/TextArea/TextArea.js

@@ -48,17 +48,16 @@ export var getDynamicLabelClasses = function getDynamicLabelClasses(props, focus
     labelPlacement = props.labelPlacement,
     autoResize = props.autoResize,
     rows = props.rows,
-    value = props.value,
-    size = props.size;
+    value = props.value;
 
   // Добавить класс отвечающий за изменение цвета плейсхолдера при фокусе
   var withFocusedOuterUpPlaceholder = !readOnly && focused && (!label || labelPlacement === 'outer') ? focusedOuterPlaceholderColor : undefined;
 
   // Добавить класс отвечающий за поднятие и уменьшение плейсхолдера
-  var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !autoResize && !rows && size !== 'xs' && (!readOnly && (value || focused) || readOnly && value) ? innerPlaceholderUp : undefined;
+  var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !autoResize && !rows && (!readOnly && (value || focused) || readOnly && value) ? innerPlaceholderUp : undefined;
 
   // Добавить класс отвечающий за скрытие плейсхолдера
-  var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && (rows || autoResize) || labelPlacement === 'outer' && value || labelPlacement === 'inner' && size === 'xs' && value ? hidePlaceHolder : undefined;
+  var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && (rows || autoResize) || labelPlacement === 'outer' && value ? hidePlaceHolder : undefined;
   return [withFocusedOuterUpPlaceholder, withInnerPlaceholderUp, withHidePlaceholder];
 };
 export var textAreaRoot = function textAreaRoot(Root) {
@@ -110,7 +109,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
     var overriddenView = status !== undefined ? fallbackStatusMap[status] : view;
     var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
     var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
-    var placeLabel = labelPlacement === 'inner' && label && size !== 'xs' ? label : placeholder;
+    var placeLabel = labelPlacement === 'inner' && label ? label : placeholder;
     useResizeObserver(outerRef, function (currentElement) {
       var _currentElement$style = currentElement.style,
         inlineWidth = _currentElement$style.width,
@@ -136,7 +135,6 @@ export var textAreaRoot = function textAreaRoot(Root) {
       onChange === null || onChange === void 0 || onChange(event);
     }, [value, onChange]);
     var dynamicLabelClasses = getDynamicLabelClasses({
-      size: size,
       readOnly: readOnly,
       label: label,
       labelPlacement: labelPlacement,

package/styled-components/es/components/TextArea/TextArea.tokens.js

@@ -115,10 +115,6 @@ export var tokens = {
   labelInnerLetterSpacing: '--plasma-textarea-label-inner-letter-spacing',
   /** Высота строки для элемента label, когда он внутри и уменьшен */
   labelInnerLineHeight: '--plasma-textarea-label-inner-line-height',
-  /** Отступ сверху для элемента textarea при фокусе */
-  labelInnerTop: '--plasma-textarea-label-inner-top',
-  /** Отступ между Label и TextArea */
-  labelInnerMarginBottom: '--plasma-textarea-label-inner-margin-bottom',
   /** Шрифт для элемента textarea */
   inputFontFamily: '--plasma-textarea-input-font-family',
   /** Размер шрифта для элемента textarea */

package/styled-components/es/components/TextArea/mixins/applyDynamicLabel.js

@@ -5,4 +5,4 @@ var innerPlaceholderUp = classes.innerPlaceholderUp,
   styledTextArea = classes.styledTextArea,
   styledTextAreaWrapper = classes.styledTextAreaWrapper,
   styledPlaceholder = classes.styledPlaceholder;
-export var applyDynamicLabel = /*#__PURE__*/"\n    .".concat(String(innerPlaceholderUp), " {\n        .").concat(String(styledTextArea), " {\n            height: calc(var(--plasma_private-textarea-input-actual-height) - var(").concat(tokens.labelInnerTop, "));\n        }\n\n        .").concat(String(styledTextAreaWrapper), " {\n            padding-top: calc(calc(var(").concat(tokens.labelInnerTop, ") + var(").concat(tokens.labelInnerFontSize, ")) + var(").concat(tokens.labelInnerMarginBottom, "));\n        }\n\n        .").concat(String(styledPlaceholder), " {\n            font-family: var(").concat(tokens.labelInnerFontFamily, ");\n            font-size: var(").concat(tokens.labelInnerFontSize, ");\n            font-style: var(").concat(tokens.labelInnerFontStyle, ");\n            font-weight: var(").concat(tokens.labelInnerFontWeight, ");\n            letter-spacing: var(").concat(tokens.labelInnerLetterSpacing, ");\n            line-height: var(").concat(tokens.labelInnerLineHeight, ");\n            top: var(").concat(tokens.labelInnerTop, ");\n        }\n    }\n\n    .").concat(String(hidePlaceHolder), " {\n        .").concat(String(styledPlaceholder), " {\n            display: none;\n        }\n    }\n\n    .").concat(String(focusedOuterPlaceholderColor), " {\n        .").concat(String(styledPlaceholder), " {\n            color: var(").concat(tokens.placeholderColorFocus, ");\n        }\n    }\n");
+export var applyDynamicLabel = /*#__PURE__*/"\n    .".concat(String(innerPlaceholderUp), " {\n        .").concat(String(styledTextArea), " {\n            height: calc(var(--plasma_private-textarea-input-actual-height) - 1rem);\n        }\n\n        .").concat(String(styledTextAreaWrapper), " {\n            padding-top: calc(var(").concat(tokens.inputPaddingTop, ") + 1rem);\n        }\n\n        .").concat(String(styledPlaceholder), " {\n            font-family: var(").concat(tokens.labelInnerFontFamily, ");\n            font-size: var(").concat(tokens.labelInnerFontSize, ");\n            font-style: var(").concat(tokens.labelInnerFontStyle, ");\n            font-weight: var(").concat(tokens.labelInnerFontWeight, ");\n            letter-spacing: var(").concat(tokens.labelInnerLetterSpacing, ");\n            line-height: var(").concat(tokens.labelInnerLineHeight, ");\n        }\n    }\n\n    .").concat(String(hidePlaceHolder), " {\n        .").concat(String(styledPlaceholder), " {\n            display: none;\n        }\n    }\n\n    .").concat(String(focusedOuterPlaceholderColor), " {\n        .").concat(String(styledPlaceholder), " {\n            color: var(").concat(tokens.placeholderColorFocus, ");\n        }\n    }\n");

package/styled-components/es/components/TextField/TextField.template-doc.mdx

@@ -117,7 +117,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { TextField } from '@salutejs/{{ package }};
+import { TextField } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
@@ -133,4 +133,4 @@ export function App() {
         </div>
     );
 }
-```
+```

package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx

@@ -0,0 +1,120 @@
+---
+id: toolbar
+title: Toolbar
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Toolbar
+Toolbar может отображаться в горизонтальном и вертикальном положении с разными размерами.
+
+## Toolbar
+<Description name="Toolbar" />
+<PropsTable name="Toolbar" exclude={['css', 'focused']} />
+
+## Использование
+Компонент `Toolbar` должен содержать контент передаваемый в `children`.
+Для разделения элементов можно использовать ToolbarDivider.
+
+```tsx live
+import React from 'react';
+import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
+import { IconEdit } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <Toolbar>
+            <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+            <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+            <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+            <ToolbarDivider />
+            <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+            <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+        </Toolbar>
+    );
+}
+```
+
+## Примеры
+
+### Размер Toolbar
+Размер Toolbar задается с помощью свойства `size`.
+
+Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
+
+```tsx live
+import React from 'react';
+import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
+import { IconEdit } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Toolbar size="l">
+                <Button square size="l" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="l" view="clear" contentLeft={<IconEdit />} />
+                <ToolbarDivider />
+                <Button square size="l" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="l" view="clear" contentLeft={<IconEdit />} />
+            </Toolbar>
+
+            <Toolbar size="m">
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <ToolbarDivider />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+            </Toolbar>
+
+            <Toolbar size="m">
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <ToolbarDivider />
+                <Button square size="s" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="s" view="clear" contentLeft={<IconEdit />} />
+            </Toolbar>
+
+            <Toolbar size="xs">
+                <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
+                <ToolbarDivider />
+                <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
+            </Toolbar>
+        </div>
+    );
+}
+```
+
+### Положение Toolbar
+Положение Toolbar задается с помощью свойства `orientation`. Возможные значения свойства `orientation`:
++ `"vertical"` – вертикальное положение;
++ `"horizontal"` – горизонтальное положение;
+
+```tsx live
+import React from 'react';
+import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
+import { IconEdit } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Toolbar orientation="vertical">
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <ToolbarDivider />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+            </Toolbar>
+
+            <Toolbar orientation="horizontal">
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <ToolbarDivider />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+                <Button square size="m" view="clear" contentLeft={<IconEdit />} />
+            </Toolbar>
+        </div>
+    );
+}
+```

package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.config.js

@@ -7,10 +7,10 @@ export var config = {
   },
   variations: {
     size: {
-      xs: /*#__PURE__*/css(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem 0.5rem 0 0;", ":0.563rem;", ":0.625rem;", ":2.125rem;", ":0.563rem;", ":0.625rem;", ":0.5rem;", ":0.625rem;", ":0.563rem;", ":0.625rem;", ":0rem;", ":0.563rem;", ":0.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":0rem;", ":0rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight),
-      s: /*#__PURE__*/css(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem 0.625rem 0 0;", ":0.688rem;", ":0.875rem;", ":3.125rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0rem;", ":0.688rem;", ":0.75rem;", ":1.25rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight),
-      m: /*#__PURE__*/css(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem 0.75rem 0 0;", ":0.875rem;", ":1rem;", ":3.375rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0rem;", ":0.875rem;", ":0.875rem;", ":1.25rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":0.125rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight),
-      l: /*#__PURE__*/css(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem 0.875rem 0 0;", ":1.063rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0rem;", ":1.063rem;", ":1rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem;", ":0.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.labelInnerTop, textAreaTokens.labelInnerMarginBottom, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight)
+      xs: /*#__PURE__*/css(["", ":100%;", ":7.312rem;", ":0.625rem;", ":0.5rem;", ":0.5rem 0.5rem 0 0;", ":0.563rem;", ":0.625rem;", ":2.125rem;", ":0.563rem;", ":0.625rem;", ":0.5rem;", ":0.625rem;", ":0.563rem;", ":0.625rem;", ":0rem;", ":0.563rem;", ":0.5rem;", ":1.25rem;", ":0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight),
+      s: /*#__PURE__*/css(["", ":100%;", ":7.187rem;", ":0.625rem;", ":0.625rem;", ":0.625rem 0.625rem 0 0;", ":0.688rem;", ":0.875rem;", ":3.125rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0rem;", ":0.688rem;", ":0.75rem;", ":1.25rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight),
+      m: /*#__PURE__*/css(["", ":100%;", ":7rem;", ":1.125rem;", ":0.75rem;", ":0.75rem 0.75rem 0 0;", ":0.875rem;", ":1rem;", ":3.375rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0.75rem;", ":1rem;", ":0rem;", ":0.875rem;", ":0.875rem;", ":1.25rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight),
+      l: /*#__PURE__*/css(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem 0.875rem 0 0;", ":1.063rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0.75rem;", ":1.125rem;", ":0rem;", ":1.063rem;", ":1rem;", ":1.25rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], textAreaTokens.inputWidth, textAreaTokens.inputHeight, textAreaTokens.inputMinHeight, textAreaTokens.borderRadius, textAreaTokens.borderRadiusWithHelpers, textAreaTokens.inputPaddingTop, textAreaTokens.inputPaddingRight, textAreaTokens.inputPaddingRightWithRightContent, textAreaTokens.inputPaddingBottom, textAreaTokens.inputPaddingLeft, textAreaTokens.helpersPaddingTop, textAreaTokens.helpersPaddingRight, textAreaTokens.helpersPaddingBottom, textAreaTokens.helpersPaddingLeft, textAreaTokens.helpersOffset, textAreaTokens.rightContentTop, textAreaTokens.rightContentRight, textAreaTokens.rightContentHeight, textAreaTokens.labelMarginBottom, textAreaTokens.labelInnerFontFamily, textAreaTokens.labelInnerFontSize, textAreaTokens.labelInnerFontStyle, textAreaTokens.labelInnerFontWeight, textAreaTokens.labelInnerLetterSpacing, textAreaTokens.labelInnerLineHeight, textAreaTokens.inputFontFamily, textAreaTokens.inputFontSize, textAreaTokens.inputFontStyle, textAreaTokens.inputFontWeight, textAreaTokens.inputLetterSpacing, textAreaTokens.inputLineHeight, textAreaTokens.helpersFontFamily, textAreaTokens.helpersFontSize, textAreaTokens.helpersFontStyle, textAreaTokens.helpersFontWeight, textAreaTokens.helpersLetterSpacing, textAreaTokens.helpersLineHeight)
     },
     view: {
       "default": /*#__PURE__*/css(["", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);"], textAreaTokens.inputBackgroundColor, textAreaTokens.inputBackgroundColorHover, textAreaTokens.inputBackgroundColorActive, textAreaTokens.inputBackgroundColorFocus, textAreaTokens.helpersBackgroundColor, textAreaTokens.helpersBackgroundColorHover, textAreaTokens.helpersBackgroundColorActive, textAreaTokens.helpersBackgroundColorFocus, textAreaTokens.inputColor, textAreaTokens.inputColorFocus, textAreaTokens.inputCaretColor, textAreaTokens.placeholderColor, textAreaTokens.placeholderColorFocus, textAreaTokens.leftHelperColor, textAreaTokens.rightHelperColor),