@salutejs/plasma-new-hope 0.83.0-canary.1213.9175571113.0 → 0.83.0-dev.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (213) hide show
  1. package/cjs/components/Button/Button.css +6 -9
  2. package/cjs/components/Button/Button.js +2 -16
  3. package/cjs/components/Button/Button.js.map +1 -1
  4. package/cjs/components/Button/Button.styles.js +10 -31
  5. package/cjs/components/Button/Button.styles.js.map +1 -1
  6. package/cjs/components/Button/Button.styles_uqvh6u.css +5 -0
  7. package/cjs/components/Button/Button.tokens.js +0 -5
  8. package/cjs/components/Button/Button.tokens.js.map +1 -1
  9. package/cjs/components/Button/variations/_stretching/base.js +1 -1
  10. package/cjs/components/Button/variations/_stretching/base.js.map +1 -1
  11. package/{es/components/Button/variations/_stretching/base_hy8dc.css → cjs/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
  12. package/cjs/components/ButtonGroup/ButtonGroup.css +2 -2
  13. package/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  14. package/cjs/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
  15. package/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -1
  16. package/cjs/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
  17. package/{es/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → cjs/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
  18. package/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
  19. package/cjs/components/ButtonGroup/variations/_view/base.js.map +1 -1
  20. package/cjs/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
  21. package/cjs/components/Drawer/Drawer.css +6 -9
  22. package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
  23. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
  24. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  25. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  26. package/cjs/components/IconButton/IconButton.css +7 -10
  27. package/cjs/components/IconButton/IconButton.styles.js +1 -1
  28. package/cjs/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
  29. package/cjs/components/Notification/Notification.css +6 -9
  30. package/cjs/components/Notification/NotificationsProvider.css +6 -9
  31. package/cjs/components/Pagination/Pagination.css +8 -11
  32. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
  33. package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
  34. package/cjs/components/Select/Select.css +6 -9
  35. package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
  36. package/cjs/components/Toast/Toast.css +6 -9
  37. package/cjs/components/Toast/ToastController.css +6 -9
  38. package/cjs/index.css +9 -12
  39. package/es/components/Button/Button.css +6 -9
  40. package/es/components/Button/Button.js +3 -17
  41. package/es/components/Button/Button.js.map +1 -1
  42. package/es/components/Button/Button.styles.js +11 -29
  43. package/es/components/Button/Button.styles.js.map +1 -1
  44. package/es/components/Button/Button.styles_uqvh6u.css +5 -0
  45. package/es/components/Button/Button.tokens.js +0 -5
  46. package/es/components/Button/Button.tokens.js.map +1 -1
  47. package/es/components/Button/variations/_stretching/base.js +1 -1
  48. package/es/components/Button/variations/_stretching/base.js.map +1 -1
  49. package/{cjs/components/Button/variations/_stretching/base_hy8dc.css → es/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
  50. package/es/components/ButtonGroup/ButtonGroup.css +2 -2
  51. package/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  52. package/es/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
  53. package/es/components/ButtonGroup/variations/_orientation/base.js +1 -1
  54. package/es/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
  55. package/{cjs/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → es/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
  56. package/es/components/ButtonGroup/variations/_view/base.js +1 -1
  57. package/es/components/ButtonGroup/variations/_view/base.js.map +1 -1
  58. package/es/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
  59. package/es/components/Drawer/Drawer.css +6 -9
  60. package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
  61. package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
  62. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  63. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  64. package/es/components/IconButton/IconButton.css +7 -10
  65. package/es/components/IconButton/IconButton.styles.js +1 -1
  66. package/es/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
  67. package/es/components/Notification/Notification.css +6 -9
  68. package/es/components/Notification/NotificationsProvider.css +6 -9
  69. package/es/components/Pagination/Pagination.css +8 -11
  70. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
  71. package/es/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
  72. package/es/components/Select/Select.css +6 -9
  73. package/es/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
  74. package/es/components/Toast/Toast.css +6 -9
  75. package/es/components/Toast/ToastController.css +6 -9
  76. package/es/index.css +9 -12
  77. package/package.json +2 -2
  78. package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +3 -1
  79. package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
  80. package/styled-components/cjs/components/Button/Button.js +2 -16
  81. package/styled-components/cjs/components/Button/Button.styles.js +12 -20
  82. package/styled-components/cjs/components/Button/Button.template-doc.mdx +8 -51
  83. package/styled-components/cjs/components/Button/Button.tokens.js +0 -5
  84. package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
  85. package/styled-components/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  86. package/styled-components/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -2
  87. package/styled-components/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
  88. package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +68 -0
  89. package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  90. package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
  91. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
  92. package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
  93. package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +57 -0
  94. package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
  95. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +262 -261
  96. package/styled-components/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  97. package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +156 -0
  98. package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
  99. package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
  100. package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +85 -33
  101. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +1 -2
  102. package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +130 -0
  103. package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
  104. package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +70 -74
  105. package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +33 -0
  106. package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +2 -1
  107. package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
  108. package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  109. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
  110. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
  111. package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +120 -0
  112. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  113. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
  114. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  115. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  116. package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
  117. package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
  118. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  119. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  120. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
  121. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
  122. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  123. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  124. package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +3 -1
  125. package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
  126. package/styled-components/es/components/Button/Button.js +3 -17
  127. package/styled-components/es/components/Button/Button.styles.js +11 -19
  128. package/styled-components/es/components/Button/Button.template-doc.mdx +8 -51
  129. package/styled-components/es/components/Button/Button.tokens.js +0 -5
  130. package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
  131. package/styled-components/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  132. package/styled-components/es/components/ButtonGroup/variations/_orientation/base.js +2 -3
  133. package/styled-components/es/components/ButtonGroup/variations/_view/base.js +1 -1
  134. package/styled-components/es/components/Cell/Cell.template-doc.mdx +68 -0
  135. package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  136. package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
  137. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
  138. package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
  139. package/styled-components/es/components/Divider/Divider.template-docs.mdx +57 -0
  140. package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
  141. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +262 -261
  142. package/styled-components/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  143. package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +156 -0
  144. package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
  145. package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
  146. package/styled-components/es/components/Modal/Modal.template-doc.mdx +85 -33
  147. package/styled-components/es/components/Notification/Notification.template-doc.mdx +1 -2
  148. package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +130 -0
  149. package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
  150. package/styled-components/es/components/Popup/Popup.template-doc.mdx +70 -74
  151. package/styled-components/es/components/Progress/Progress.template-doc.mdx +33 -0
  152. package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +2 -1
  153. package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
  154. package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  155. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
  156. package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
  157. package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +120 -0
  158. package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  159. package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
  160. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  161. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  162. package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
  163. package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
  164. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  165. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  166. package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
  167. package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
  168. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  169. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  170. package/types/components/Button/Button.d.ts.map +1 -1
  171. package/types/components/Button/Button.styles.d.ts +1 -5
  172. package/types/components/Button/Button.styles.d.ts.map +1 -1
  173. package/types/components/Button/Button.tokens.d.ts +0 -5
  174. package/types/components/Button/Button.tokens.d.ts.map +1 -1
  175. package/types/components/Button/Button.types.d.ts +4 -16
  176. package/types/components/Button/Button.types.d.ts.map +1 -1
  177. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts +0 -1
  178. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts.map +1 -1
  179. package/types/components/ButtonGroup/variations/_orientation/base.d.ts.map +1 -1
  180. package/types/components/ButtonGroup/variations/_view/base.d.ts.map +1 -1
  181. package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts.map +1 -1
  182. package/types/components/Notification/Notification.styles.d.ts +1 -43
  183. package/types/components/Notification/Notification.styles.d.ts.map +1 -1
  184. package/types/components/Pagination/Pagination.styles.d.ts +2 -86
  185. package/types/components/Pagination/Pagination.styles.d.ts.map +1 -1
  186. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts +1 -43
  187. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts.map +1 -1
  188. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts +1 -43
  189. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts.map +1 -1
  190. package/types/components/Toast/Toast.styles.d.ts +1 -43
  191. package/types/components/Toast/Toast.styles.d.ts.map +1 -1
  192. package/types/components/Toast/utils.d.ts +1 -43
  193. package/types/components/Toast/utils.d.ts.map +1 -1
  194. package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
  195. package/types/examples/plasma_b2c/components/Button/Button.d.ts +1 -43
  196. package/types/examples/plasma_b2c/components/Button/Button.d.ts.map +1 -1
  197. package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  198. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +1 -43
  199. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -1
  200. package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
  201. package/types/examples/plasma_web/components/Button/Button.d.ts +1 -43
  202. package/types/examples/plasma_web/components/Button/Button.d.ts.map +1 -1
  203. package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  204. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +1 -43
  205. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -1
  206. package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
  207. package/types/examples/sds_engineer/components/Button/Button.d.ts +1 -43
  208. package/types/examples/sds_engineer/components/Button/Button.d.ts.map +1 -1
  209. package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  210. package/cjs/components/Button/Button.styles_nedem1.css +0 -8
  211. package/cjs/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
  212. package/es/components/Button/Button.styles_nedem1.css +0 -8
  213. package/es/components/ButtonGroup/variations/_view/base_1n9gznw.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';
@@ -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
+ ```
@@ -14,27 +14,27 @@ var config = exports.config = {
14
14
  },
15
15
  variations: {
16
16
  view: {
17
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
18
- accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
19
- secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
20
- clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
21
- positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
22
- warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
23
- negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
24
- dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
25
- black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
26
- white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive)
17
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
18
+ accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
19
+ secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
20
+ clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
21
+ positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
22
+ warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
23
+ negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
24
+ dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
25
+ black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
26
+ white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive)
27
27
  },
28
28
  size: {
29
- l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 -0.125rem;", ":0 -0.125rem 0 0.5rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
30
- lr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 0;", ":0 0 0 0.5rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
31
- m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":0.75rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;", ":0 0.375rem 0 -0.125rem;", ":0 -0.125rem 0 0.375rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
32
- mr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;", ":0 0.375rem 0 0;", ":0 0 0 0.375rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
33
- s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
34
- sr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
35
- xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":0.75rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
36
- xsr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin),
37
- xxs: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor, _Button.buttonTokens.buttonLeftContentMargin, _Button.buttonTokens.buttonRightContentMargin, _Button.buttonTokens.buttonValueMargin)
29
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
30
+ lr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":12.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
31
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":0.75rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
32
+ mr: /*#__PURE__*/(0, _styledComponents.css)(["", ":3rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
33
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
34
+ sr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
35
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":0.75rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
36
+ xsr: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":10rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor),
37
+ xxs: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;"], _Button.buttonTokens.buttonHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Button.buttonTokens.buttonFontFamily, _Button.buttonTokens.buttonFontSize, _Button.buttonTokens.buttonFontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Button.buttonTokens.buttonSpinnerSize, _Button.buttonTokens.buttonSpinnerColor)
38
38
  },
39
39
  disabled: {
40
40
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Button.buttonTokens.buttonDisabledOpacity)