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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (83) hide show
  1. package/cjs/components/TextArea/TextArea.js +5 -7
  2. package/cjs/components/TextArea/TextArea.js.map +1 -1
  3. package/cjs/components/TextArea/TextArea.tokens.js +0 -4
  4. package/cjs/components/TextArea/TextArea.tokens.js.map +1 -1
  5. package/cjs/components/TextArea/TextArea_qicm5y.css +1 -0
  6. package/cjs/index.css +1 -1
  7. package/es/components/TextArea/TextArea.js +5 -7
  8. package/es/components/TextArea/TextArea.js.map +1 -1
  9. package/es/components/TextArea/TextArea.tokens.js +0 -4
  10. package/es/components/TextArea/TextArea.tokens.js.map +1 -1
  11. package/es/components/TextArea/TextArea_qicm5y.css +1 -0
  12. package/es/index.css +1 -1
  13. package/package.json +2 -2
  14. package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +3 -1
  15. package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
  16. package/styled-components/cjs/components/Button/Button.template-doc.mdx +8 -9
  17. package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +68 -0
  18. package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  19. package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
  20. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
  21. package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
  22. package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +57 -0
  23. package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
  24. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +262 -261
  25. package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +156 -0
  26. package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
  27. package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
  28. package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +85 -33
  29. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +1 -2
  30. package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +130 -0
  31. package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
  32. package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +70 -74
  33. package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +33 -0
  34. package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +2 -1
  35. package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
  36. package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  37. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
  38. package/styled-components/cjs/components/TextArea/TextArea.js +4 -6
  39. package/styled-components/cjs/components/TextArea/TextArea.tokens.js +0 -4
  40. package/styled-components/cjs/components/TextArea/mixins/applyDynamicLabel.js +1 -1
  41. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
  42. package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +120 -0
  43. package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js +4 -4
  44. package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +4 -4
  45. package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +3 -1
  46. package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
  47. package/styled-components/es/components/Button/Button.template-doc.mdx +8 -9
  48. package/styled-components/es/components/Cell/Cell.template-doc.mdx +68 -0
  49. package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  50. package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
  51. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
  52. package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
  53. package/styled-components/es/components/Divider/Divider.template-docs.mdx +57 -0
  54. package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
  55. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +262 -261
  56. package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +156 -0
  57. package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
  58. package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
  59. package/styled-components/es/components/Modal/Modal.template-doc.mdx +85 -33
  60. package/styled-components/es/components/Notification/Notification.template-doc.mdx +1 -2
  61. package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +130 -0
  62. package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
  63. package/styled-components/es/components/Popup/Popup.template-doc.mdx +70 -74
  64. package/styled-components/es/components/Progress/Progress.template-doc.mdx +33 -0
  65. package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +2 -1
  66. package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
  67. package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  68. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
  69. package/styled-components/es/components/TextArea/TextArea.js +4 -6
  70. package/styled-components/es/components/TextArea/TextArea.tokens.js +0 -4
  71. package/styled-components/es/components/TextArea/mixins/applyDynamicLabel.js +1 -1
  72. package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
  73. package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +120 -0
  74. package/styled-components/es/examples/plasma_b2c/components/TextArea/TextArea.config.js +4 -4
  75. package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.config.js +4 -4
  76. package/types/components/TextArea/TextArea.d.ts.map +1 -1
  77. package/types/components/TextArea/TextArea.tokens.d.ts +0 -4
  78. package/types/components/TextArea/TextArea.tokens.d.ts.map +1 -1
  79. package/types/components/TextArea/mixins/applyDynamicLabel.d.ts.map +1 -1
  80. package/types/examples/plasma_b2c/components/TextArea/TextArea.config.d.ts.map +1 -1
  81. package/types/examples/plasma_web/components/TextArea/TextArea.config.d.ts.map +1 -1
  82. package/cjs/components/TextArea/TextArea_ob9y3r.css +0 -1
  83. package/es/components/TextArea/TextArea_ob9y3r.css +0 -1
@@ -1,45 +1,79 @@
1
1
  ---
2
- id: popupBase
3
- title: PopupBase
2
+ id: popup
3
+ title: Popup
4
4
  ---
5
5
 
6
6
  import { PropsTable, Description } from '@site/src/components';
7
7
 
8
- # PopupBase
9
- <Description name="PopupBase" />
10
- <PropsTable name="PopupBase" />
8
+ # Popup
9
+ <Description name="Popup" />
10
+ <PropsTable name="Popup" />
11
11
 
12
12
  ### Провайдер контекста
13
13
 
14
- Поместите `PopupBaseProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять PopupBase:
14
+ Поместите `PopupProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять Popup:
15
15
 
16
16
  ```tsx title="index.ts"
17
17
  import ReactDOM from 'react-dom';
18
- import { PopupBaseProvider } from '@salutejs/{{ package }}';
18
+ import { PopupProvider } from '@salutejs/sdds-serv';
19
19
 
20
20
  import { App } from './App';
21
21
 
22
22
  ReactDOM.render(
23
- <PopupBaseProvider>
23
+ <PopupProvider>
24
24
  <App />
25
- </PopupBaseProvider>,
25
+ </PopupProvider>,
26
26
  document.getElementById('root')
27
27
  );
28
28
  ```
29
29
 
30
30
  ### Использование
31
31
 
32
- PopupBase можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
32
+ Popup можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
33
+
33
34
  Также это свойство поддерживает передачу id элемента, в котором будет использоваться компонент.
35
+
34
36
  Само позиционирование можно указать с помощью свойства `placement`(center - по умолчанию; left, right, top, bottom и их комбинации),
35
- а также определить отступы от точки с помощью `offset`.
37
+ а также определить отступы от точки с помощью `offset`.
36
38
 
37
39
  ```tsx live
38
40
  import React, { useRef } from 'react';
39
- import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens/brands/{{ theme }}';
40
- import { SSRProvider, Button, PopupBase, PopupBaseProvider } from '@salutejs/{{ package }}';
41
+ import styled from 'styled-components';
42
+ import { surfaceSolidTertiary, surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
43
+
44
+ import { SSRProvider, Button, Popup, PopupProvider } from '@salutejs/{{ package }}';
41
45
 
42
46
  export function App() {
47
+ const StyledButton = styled(Button)`
48
+ margin-top: 1rem;
49
+ width: 15rem;
50
+ `;
51
+
52
+ const StyledWrapper = styled.div`
53
+ height: 500px;
54
+ `;
55
+
56
+ const OtherContent = styled.div`
57
+ margin-top: 1rem;
58
+ width: 400px;
59
+ height: 500px;
60
+ background: ${surfaceSolidTertiary};
61
+ position: absolute;
62
+
63
+ display: flex;
64
+ align-items: flex-start;
65
+ justify-content: center;
66
+ padding: 1rem;
67
+
68
+ bottom: 0;
69
+ right: 0;
70
+ `;
71
+
72
+ const Content = styled.div`
73
+ background: ${surfaceSolidSecondary};
74
+ padding: 1rem;
75
+ `;
76
+
43
77
  const [isOpenA, setIsOpenA] = React.useState(false);
44
78
  const [isOpenB, setIsOpenB] = React.useState(false);
45
79
 
@@ -47,59 +81,28 @@ export function App() {
47
81
 
48
82
  return (
49
83
  <SSRProvider>
50
- <PopupBaseProvider>
51
- <div style=\{{height: "500px"}}>
84
+ <PopupProvider>
85
+ <StyledWrapper>
52
86
  <div style=\{{ display: 'flex', flexDirection: 'column' }}>
53
- <Button
54
- style=\{{
55
- marginTop: "1rem",
56
- width: "15rem"
57
- }}
58
- text="Открыть в document"
59
- onClick={() => setIsOpenB(true)}
60
- />
61
- <Button
62
- style=\{{
63
- marginTop: "1rem",
64
- width: "15rem"
65
- }}
66
- text="Открыть во Frame"
67
- onClick={() => setIsOpenA(true)}
68
- />
87
+ <StyledButton text="Открыть в document" onClick={() => setIsOpenB(true)} />
88
+ <StyledButton text="Открыть во Frame" onClick={() => setIsOpenA(true)} />
69
89
  </div>
70
- <PopupBase
90
+ <Popup
71
91
  id="popupA"
72
92
  frame={ref}
73
93
  isOpen={isOpenA}
74
94
  placement="center"
75
95
  offset={[0, 0]}
76
96
  >
77
- <div style=\{{ background: surfaceSolid02, padding: "1rem" }}>
97
+ <Content>
78
98
  <Button onClick={() => setIsOpenA(false)}>Close</Button>
79
99
  <>Content</>
80
- </div>
81
- </PopupBase>
82
- <div
83
- ref={ref}
84
- style=\{{
85
- marginTop: "1rem",
86
- width: "400px",
87
- height: "500px",
88
- background: surfaceSolid03,
89
- position: "absolute",
90
-
91
- display: "flex",
92
- alignItems: "flex-start",
93
- justifyContent: "center",
94
- padding: "1rem",
95
-
96
- bottom: 0,
97
- right: 0
98
- }}
99
- >
100
+ </Content>
101
+ </Popup>
102
+ <OtherContent ref={ref}>
100
103
  <>Frame</>
101
- </div>
102
- <PopupBase
104
+ </OtherContent>
105
+ <Popup
103
106
  id="popupB"
104
107
  frame="document"
105
108
  isOpen={isOpenB}
@@ -110,9 +113,9 @@ export function App() {
110
113
  <Button onClick={() => setIsOpenB(false)}>Close</Button>
111
114
  <>Content</>
112
115
  </Content>
113
- </PopupBase>
114
- </div>
115
- </PopupBaseProvider>
116
+ </Popup>
117
+ </StyledWrapper>
118
+ </PopupProvider>
116
119
  </SSRProvider>
117
120
  );
118
121
  }
@@ -121,19 +124,19 @@ export function App() {
121
124
  ## Подключение анимации
122
125
 
123
126
  Для подключения анимации нужно добавить параметр `withAnimation`.
124
- Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `popupBaseClasses` для `PopupBase`.
125
- Для добавления анимации необходимо использовать класс `.popup-base-root` через переменную `popupBaseClasses.root` из пакета.
127
+ Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `PopupClasses` для `Popup`.
128
+ Для добавления анимации необходимо использовать класс `.popup-root` через переменную `PopupClasses.root` из пакета.
126
129
 
127
130
  Пример:
128
131
 
129
132
  ```tsx
130
- const StyledPopupTransition = styled(PopupBase)`
131
- && > .${popupBaseClasses.root} {
133
+ const StyledPopupTransition = styled(Popup)`
134
+ && > .${PopupClasses.root} {
132
135
  opacity: 1;
133
136
  transition: opacity 0.5s 0.1s;
134
137
  }
135
138
 
136
- &&.${popupBaseClasses.endTransition} > .${popupBaseClasses.root} {
139
+ &&.${PopupClasses.endTransition} > .${PopupClasses.root} {
137
140
  opacity: 0;
138
141
  transition: opacity 0.5s 0.1s;
139
142
  }
@@ -143,12 +146,12 @@ const StyledPopupTransition = styled(PopupBase)`
143
146
  или
144
147
 
145
148
  ```tsx
146
- const StyledPopupAnimation = styled(PopupBase)`
147
- && > .${popupBaseClasses.root} {
149
+ const StyledPopupAnimation = styled(Popup)`
150
+ && > .${PopupClasses.root} {
148
151
  animation: fadeIn 1s forwards;
149
152
  }
150
153
 
151
- &&.${popupBaseClasses.endAnimation} > .${popupBaseClasses.root} {
154
+ &&.${PopupClasses.endAnimation} > .${PopupClasses.root} {
152
155
  animation: fadeOut 1s forwards;
153
156
  }
154
157
 
@@ -182,14 +185,7 @@ const StyledPopupAnimation = styled(PopupBase)`
182
185
  return (
183
186
  <>
184
187
  <div>
185
- <Button
186
- style=\{{
187
- marginTop: "1rem",
188
- width: "15rem"
189
- }}
190
- text="Открыть"
191
- onClick={() => setIsOpen(true)}
192
- />
188
+ <StyledButton text="Открыть" onClick={() => setIsOpen(true)} />
193
189
  </div>
194
190
  <StyledPopupAnimation
195
191
  id="popup-id"
@@ -0,0 +1,33 @@
1
+ ---
2
+ id: progress
3
+ title: Progress
4
+ ---
5
+
6
+ import { PropsTable, Description } from '@site/src/components';
7
+
8
+ # Progress
9
+ <Description name="Progress" />
10
+ <PropsTable name="Progress" exclude={['css']} />
11
+
12
+ ##Примеры
13
+
14
+ ### Вид прогресса
15
+ Вид прогресса задается с помощью свойства `view`. Возможные значения свойства `view`:
16
+ + `"default"` – по умолчанию;
17
+ + `"primary"` – основная;
18
+ + `"secondary"` – вторичная;
19
+ + `"accent"` – акцентная;
20
+ + `"success"` – успешное завершение;
21
+ + `"warning"` – предупреждение;
22
+ + `"error"` – ошибка;
23
+
24
+ ```tsx live
25
+ import React from 'react';
26
+ import { Progress } from '@salutejs/{{ package }}';
27
+
28
+ export function App() {
29
+ return (
30
+ <Progress value={25} view="success" displayValue />
31
+ );
32
+ }
33
+ ```
@@ -27,8 +27,9 @@ export function App() {
27
27
  }
28
28
  ```
29
29
 
30
- ## Группа радиокнопок
30
+ ## RadioGroup
31
31
  Компоненты `Radiobox` следует объединять в `RadioGroup`
32
+
32
33
  ```tsx live
33
34
  <RadioGroup aria-labelledby="radiogroup-title-id">
34
35
  <H3 id="radiogroup-title-id">Заголовок</H3>
@@ -25,8 +25,8 @@ import { PropsTable, Description } from '@site/src/components';
25
25
  Внутри данного провайдера есть доступ к хуку `useSegment`.
26
26
 
27
27
  ```tsx live
28
- import React, { useState } from 'react';
29
- import { SegmentGroup, SegmentItem, SegmentProvider } from '@salutejs/{{ package }}';
28
+ import React from 'react';
29
+ import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
30
30
 
31
31
  export function App() {
32
32
  const items = Array(8).fill(0);
@@ -6,7 +6,7 @@ title: Skeleton
6
6
  import { PropsTable, Description } from '@site/src/components';
7
7
 
8
8
  # Skeleton
9
- Набор компонентов для создания скелетов загрузки (плейсхолдеров).
9
+ Набор компонентов для создания скелетов загрузки (placeholders).
10
10
 
11
11
  ## LineSkeleton
12
12
  <Description name="LineSkeleton" />
@@ -77,13 +77,13 @@ export function App() {
77
77
  ```
78
78
 
79
79
  ## Доступность
80
- При использование хока `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
80
+ При использовании hook `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
81
81
 
82
82
  ```tsx
83
83
  import React, { useState } from 'react';
84
84
  import { Button } from '@salutejs/{{ package }}';
85
85
 
86
- const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(BasicButton);
86
+ const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(Button);
87
87
 
88
88
  export default function App () {
89
89
  const [skeleton, setSkeleton] = useState(false);
@@ -100,4 +100,4 @@ export default function App () {
100
100
  }
101
101
  ```
102
102
 
103
- Таким образом, при `skeleton=true` и `aria-busy=true` скринридер будет оповещать о соответствующем статусе компонента.
103
+ Таким образом, при `skeleton=true` и `aria-busy=true` screen-reader будет оповещать о соответствующем статусе компонента.
@@ -27,7 +27,7 @@ import { PropsTable, Description } from '@site/src/components';
27
27
 
28
28
  ## Использование
29
29
 
30
- ### Cтандартное подключение, без клавиатурной навигации
30
+ ### Стандартное подключение, без клавиатурной навигации
31
31
 
32
32
  ```tsx live
33
33
  import React, { useState } from 'react';
@@ -57,17 +57,16 @@ var getDynamicLabelClasses = exports.getDynamicLabelClasses = function getDynami
57
57
  labelPlacement = props.labelPlacement,
58
58
  autoResize = props.autoResize,
59
59
  rows = props.rows,
60
- value = props.value,
61
- size = props.size;
60
+ value = props.value;
62
61
 
63
62
  // Добавить класс отвечающий за изменение цвета плейсхолдера при фокусе
64
63
  var withFocusedOuterUpPlaceholder = !readOnly && focused && (!label || labelPlacement === 'outer') ? focusedOuterPlaceholderColor : undefined;
65
64
 
66
65
  // Добавить класс отвечающий за поднятие и уменьшение плейсхолдера
67
- var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !autoResize && !rows && size !== 'xs' && (!readOnly && (value || focused) || readOnly && value) ? innerPlaceholderUp : undefined;
66
+ var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !autoResize && !rows && (!readOnly && (value || focused) || readOnly && value) ? innerPlaceholderUp : undefined;
68
67
 
69
68
  // Добавить класс отвечающий за скрытие плейсхолдера
70
- var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && (rows || autoResize) || labelPlacement === 'outer' && value || labelPlacement === 'inner' && size === 'xs' && value ? hidePlaceHolder : undefined;
69
+ var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && (rows || autoResize) || labelPlacement === 'outer' && value ? hidePlaceHolder : undefined;
71
70
  return [withFocusedOuterUpPlaceholder, withInnerPlaceholderUp, withHidePlaceholder];
72
71
  };
73
72
  var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
@@ -119,7 +118,7 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
119
118
  var overriddenView = status !== undefined ? fallbackStatusMap[status] : view;
120
119
  var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
121
120
  var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
122
- var placeLabel = labelPlacement === 'inner' && label && size !== 'xs' ? label : placeholder;
121
+ var placeLabel = labelPlacement === 'inner' && label ? label : placeholder;
123
122
  (0, _plasmaCore.useResizeObserver)(outerRef, function (currentElement) {
124
123
  var _currentElement$style = currentElement.style,
125
124
  inlineWidth = _currentElement$style.width,
@@ -145,7 +144,6 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
145
144
  onChange === null || onChange === void 0 || onChange(event);
146
145
  }, [value, onChange]);
147
146
  var dynamicLabelClasses = getDynamicLabelClasses({
148
- size: size,
149
147
  readOnly: readOnly,
150
148
  label: label,
151
149
  labelPlacement: labelPlacement,
@@ -121,10 +121,6 @@ var tokens = exports.tokens = {
121
121
  labelInnerLetterSpacing: '--plasma-textarea-label-inner-letter-spacing',
122
122
  /** Высота строки для элемента label, когда он внутри и уменьшен */
123
123
  labelInnerLineHeight: '--plasma-textarea-label-inner-line-height',
124
- /** Отступ сверху для элемента textarea при фокусе */
125
- labelInnerTop: '--plasma-textarea-label-inner-top',
126
- /** Отступ между Label и TextArea */
127
- labelInnerMarginBottom: '--plasma-textarea-label-inner-margin-bottom',
128
124
  /** Шрифт для элемента textarea */
129
125
  inputFontFamily: '--plasma-textarea-input-font-family',
130
126
  /** Размер шрифта для элемента textarea */
@@ -11,4 +11,4 @@ var innerPlaceholderUp = _TextArea.classes.innerPlaceholderUp,
11
11
  styledTextArea = _TextArea.classes.styledTextArea,
12
12
  styledTextAreaWrapper = _TextArea.classes.styledTextAreaWrapper,
13
13
  styledPlaceholder = _TextArea.classes.styledPlaceholder;
14
- var applyDynamicLabel = exports.applyDynamicLabel = /*#__PURE__*/"\n .".concat(String(innerPlaceholderUp), " {\n .").concat(String(styledTextArea), " {\n height: calc(var(--plasma_private-textarea-input-actual-height) - var(").concat(_TextArea.tokens.labelInnerTop, "));\n }\n\n .").concat(String(styledTextAreaWrapper), " {\n padding-top: calc(calc(var(").concat(_TextArea.tokens.labelInnerTop, ") + var(").concat(_TextArea.tokens.labelInnerFontSize, ")) + var(").concat(_TextArea.tokens.labelInnerMarginBottom, "));\n }\n\n .").concat(String(styledPlaceholder), " {\n font-family: var(").concat(_TextArea.tokens.labelInnerFontFamily, ");\n font-size: var(").concat(_TextArea.tokens.labelInnerFontSize, ");\n font-style: var(").concat(_TextArea.tokens.labelInnerFontStyle, ");\n font-weight: var(").concat(_TextArea.tokens.labelInnerFontWeight, ");\n letter-spacing: var(").concat(_TextArea.tokens.labelInnerLetterSpacing, ");\n line-height: var(").concat(_TextArea.tokens.labelInnerLineHeight, ");\n top: var(").concat(_TextArea.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(_TextArea.tokens.placeholderColorFocus, ");\n }\n }\n");
14
+ var applyDynamicLabel = exports.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(_TextArea.tokens.inputPaddingTop, ") + 1rem);\n }\n\n .").concat(String(styledPlaceholder), " {\n font-family: var(").concat(_TextArea.tokens.labelInnerFontFamily, ");\n font-size: var(").concat(_TextArea.tokens.labelInnerFontSize, ");\n font-style: var(").concat(_TextArea.tokens.labelInnerFontStyle, ");\n font-weight: var(").concat(_TextArea.tokens.labelInnerFontWeight, ");\n letter-spacing: var(").concat(_TextArea.tokens.labelInnerLetterSpacing, ");\n line-height: var(").concat(_TextArea.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(_TextArea.tokens.placeholderColorFocus, ");\n }\n }\n");
@@ -117,7 +117,7 @@ export function App() {
117
117
 
118
118
  ```tsx live
119
119
  import React from 'react';
120
- import { TextField } from '@salutejs/{{ package }};
120
+ import { TextField } from '@salutejs/{{ package }}';
121
121
 
122
122
  export function App() {
123
123
  return (
@@ -133,4 +133,4 @@ export function App() {
133
133
  </div>
134
134
  );
135
135
  }
136
- ```
136
+ ```
@@ -0,0 +1,120 @@
1
+ ---
2
+ id: toolbar
3
+ title: Toolbar
4
+ ---
5
+
6
+ import { PropsTable, Description } from '@site/src/components';
7
+
8
+ # Toolbar
9
+ Toolbar может отображаться в горизонтальном и вертикальном положении с разными размерами.
10
+
11
+ ## Toolbar
12
+ <Description name="Toolbar" />
13
+ <PropsTable name="Toolbar" exclude={['css', 'focused']} />
14
+
15
+ ## Использование
16
+ Компонент `Toolbar` должен содержать контент передаваемый в `children`.
17
+ Для разделения элементов можно использовать ToolbarDivider.
18
+
19
+ ```tsx live
20
+ import React from 'react';
21
+ import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
22
+ import { IconEdit } from '@salutejs/plasma-icons';
23
+
24
+ export function App() {
25
+ return (
26
+ <Toolbar>
27
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
28
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
29
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
30
+ <ToolbarDivider />
31
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
32
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
33
+ </Toolbar>
34
+ );
35
+ }
36
+ ```
37
+
38
+ ## Примеры
39
+
40
+ ### Размер Toolbar
41
+ Размер Toolbar задается с помощью свойства `size`.
42
+
43
+ Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
44
+
45
+ ```tsx live
46
+ import React from 'react';
47
+ import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
48
+ import { IconEdit } from '@salutejs/plasma-icons';
49
+
50
+ export function App() {
51
+ return (
52
+ <div>
53
+ <Toolbar size="l">
54
+ <Button square size="l" view="clear" contentLeft={<IconEdit />} />
55
+ <Button square size="l" view="clear" contentLeft={<IconEdit />} />
56
+ <ToolbarDivider />
57
+ <Button square size="l" view="clear" contentLeft={<IconEdit />} />
58
+ <Button square size="l" view="clear" contentLeft={<IconEdit />} />
59
+ </Toolbar>
60
+
61
+ <Toolbar size="m">
62
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
63
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
64
+ <ToolbarDivider />
65
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
66
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
67
+ </Toolbar>
68
+
69
+ <Toolbar size="m">
70
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
71
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
72
+ <ToolbarDivider />
73
+ <Button square size="s" view="clear" contentLeft={<IconEdit />} />
74
+ <Button square size="s" view="clear" contentLeft={<IconEdit />} />
75
+ </Toolbar>
76
+
77
+ <Toolbar size="xs">
78
+ <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
79
+ <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
80
+ <ToolbarDivider />
81
+ <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
82
+ <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
83
+ </Toolbar>
84
+ </div>
85
+ );
86
+ }
87
+ ```
88
+
89
+ ### Положение Toolbar
90
+ Положение Toolbar задается с помощью свойства `orientation`. Возможные значения свойства `orientation`:
91
+ + `"vertical"` – вертикальное положение;
92
+ + `"horizontal"` – горизонтальное положение;
93
+
94
+ ```tsx live
95
+ import React from 'react';
96
+ import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
97
+ import { IconEdit } from '@salutejs/plasma-icons';
98
+
99
+ export function App() {
100
+ return (
101
+ <div>
102
+ <Toolbar orientation="vertical">
103
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
104
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
105
+ <ToolbarDivider />
106
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
107
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
108
+ </Toolbar>
109
+
110
+ <Toolbar orientation="horizontal">
111
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
112
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
113
+ <ToolbarDivider />
114
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
115
+ <Button square size="m" view="clear" contentLeft={<IconEdit />} />
116
+ </Toolbar>
117
+ </div>
118
+ );
119
+ }
120
+ ```
@@ -13,10 +13,10 @@ var config = exports.config = {
13
13
  },
14
14
  variations: {
15
15
  size: {
16
- xs: /*#__PURE__*/(0, _styledComponents.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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.labelInnerTop, _TextArea.textAreaTokens.labelInnerMarginBottom, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight),
17
- s: /*#__PURE__*/(0, _styledComponents.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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.labelInnerTop, _TextArea.textAreaTokens.labelInnerMarginBottom, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight),
18
- m: /*#__PURE__*/(0, _styledComponents.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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.labelInnerTop, _TextArea.textAreaTokens.labelInnerMarginBottom, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight),
19
- l: /*#__PURE__*/(0, _styledComponents.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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.labelInnerTop, _TextArea.textAreaTokens.labelInnerMarginBottom, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight)
16
+ xs: /*#__PURE__*/(0, _styledComponents.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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight),
17
+ s: /*#__PURE__*/(0, _styledComponents.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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight),
18
+ m: /*#__PURE__*/(0, _styledComponents.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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight),
19
+ l: /*#__PURE__*/(0, _styledComponents.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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight)
20
20
  },
21
21
  view: {
22
22
  "default": /*#__PURE__*/(0, _styledComponents.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);"], _TextArea.textAreaTokens.inputBackgroundColor, _TextArea.textAreaTokens.inputBackgroundColorHover, _TextArea.textAreaTokens.inputBackgroundColorActive, _TextArea.textAreaTokens.inputBackgroundColorFocus, _TextArea.textAreaTokens.helpersBackgroundColor, _TextArea.textAreaTokens.helpersBackgroundColorHover, _TextArea.textAreaTokens.helpersBackgroundColorActive, _TextArea.textAreaTokens.helpersBackgroundColorFocus, _TextArea.textAreaTokens.inputColor, _TextArea.textAreaTokens.inputColorFocus, _TextArea.textAreaTokens.inputCaretColor, _TextArea.textAreaTokens.placeholderColor, _TextArea.textAreaTokens.placeholderColorFocus, _TextArea.textAreaTokens.leftHelperColor, _TextArea.textAreaTokens.rightHelperColor),