@salutejs/plasma-new-hope 0.82.1-canary.1210.9126725322.0 → 0.83.0-canary.1213.9159050781.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (139) hide show
  1. package/cjs/components/Button/Button.css +9 -6
  2. package/cjs/components/Button/Button.js +16 -2
  3. package/cjs/components/Button/Button.js.map +1 -1
  4. package/cjs/components/Button/Button.styles.js +31 -10
  5. package/cjs/components/Button/Button.styles.js.map +1 -1
  6. package/cjs/components/Button/Button.styles_nedem1.css +8 -0
  7. package/cjs/components/Button/Button.tokens.js +5 -0
  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_1lx0ute.css → cjs/components/Button/variations/_stretching/base_hy8dc.css} +1 -1
  12. package/cjs/components/Drawer/Drawer.css +9 -6
  13. package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +9 -6
  14. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +9 -6
  15. package/cjs/components/IconButton/IconButton.css +10 -7
  16. package/cjs/components/IconButton/IconButton.styles.js +1 -1
  17. package/{es/components/IconButton/IconButton.styles_1hknr37.css → cjs/components/IconButton/IconButton.styles_7v8g0e.css} +1 -1
  18. package/cjs/components/Notification/Notification.css +9 -6
  19. package/cjs/components/Notification/NotificationsProvider.css +9 -6
  20. package/cjs/components/Pagination/Pagination.css +9 -6
  21. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +9 -6
  22. package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +9 -6
  23. package/cjs/components/Select/Select.css +9 -6
  24. package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +9 -6
  25. package/cjs/components/Toast/Toast.css +9 -6
  26. package/cjs/components/Toast/ToastController.css +9 -6
  27. package/cjs/index.css +12 -9
  28. package/es/components/Button/Button.css +9 -6
  29. package/es/components/Button/Button.js +17 -3
  30. package/es/components/Button/Button.js.map +1 -1
  31. package/es/components/Button/Button.styles.js +29 -11
  32. package/es/components/Button/Button.styles.js.map +1 -1
  33. package/es/components/Button/Button.styles_nedem1.css +8 -0
  34. package/es/components/Button/Button.tokens.js +5 -0
  35. package/es/components/Button/Button.tokens.js.map +1 -1
  36. package/es/components/Button/variations/_stretching/base.js +1 -1
  37. package/es/components/Button/variations/_stretching/base.js.map +1 -1
  38. package/{cjs/components/Button/variations/_stretching/base_1lx0ute.css → es/components/Button/variations/_stretching/base_hy8dc.css} +1 -1
  39. package/es/components/Drawer/Drawer.css +9 -6
  40. package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +9 -6
  41. package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +9 -6
  42. package/es/components/IconButton/IconButton.css +10 -7
  43. package/es/components/IconButton/IconButton.styles.js +1 -1
  44. package/{cjs/components/IconButton/IconButton.styles_1hknr37.css → es/components/IconButton/IconButton.styles_7v8g0e.css} +1 -1
  45. package/es/components/Notification/Notification.css +9 -6
  46. package/es/components/Notification/NotificationsProvider.css +9 -6
  47. package/es/components/Pagination/Pagination.css +9 -6
  48. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +9 -6
  49. package/es/components/Panel/ui/PanelHeader/PanelHeader.css +9 -6
  50. package/es/components/Select/Select.css +9 -6
  51. package/es/components/Select/ui/SelectTarget/SelectTarget.css +9 -6
  52. package/es/components/Toast/Toast.css +9 -6
  53. package/es/components/Toast/ToastController.css +9 -6
  54. package/es/index.css +12 -9
  55. package/package.json +2 -2
  56. package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +1 -3
  57. package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
  58. package/styled-components/cjs/components/Button/Button.js +16 -2
  59. package/styled-components/cjs/components/Button/Button.styles.js +20 -12
  60. package/styled-components/cjs/components/Button/Button.template-doc.mdx +51 -8
  61. package/styled-components/cjs/components/Button/Button.tokens.js +5 -0
  62. package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
  63. package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  64. package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
  65. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
  66. package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
  67. package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
  68. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +261 -262
  69. package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
  70. package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
  71. package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +33 -85
  72. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +2 -1
  73. package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
  74. package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +74 -70
  75. package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +1 -2
  76. package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
  77. package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  78. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
  79. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
  80. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  81. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +67 -21
  82. package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
  83. package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +90 -28
  84. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
  85. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +90 -28
  86. package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +1 -3
  87. package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
  88. package/styled-components/es/components/Button/Button.js +17 -3
  89. package/styled-components/es/components/Button/Button.styles.js +19 -11
  90. package/styled-components/es/components/Button/Button.template-doc.mdx +51 -8
  91. package/styled-components/es/components/Button/Button.tokens.js +5 -0
  92. package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
  93. package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  94. package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
  95. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
  96. package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
  97. package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
  98. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +261 -262
  99. package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
  100. package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
  101. package/styled-components/es/components/Modal/Modal.template-doc.mdx +33 -85
  102. package/styled-components/es/components/Notification/Notification.template-doc.mdx +2 -1
  103. package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
  104. package/styled-components/es/components/Popup/Popup.template-doc.mdx +74 -70
  105. package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +1 -2
  106. package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
  107. package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  108. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
  109. package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
  110. package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  111. package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +67 -21
  112. package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
  113. package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +90 -28
  114. package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
  115. package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +90 -28
  116. package/types/components/Button/Button.d.ts.map +1 -1
  117. package/types/components/Button/Button.styles.d.ts +5 -1
  118. package/types/components/Button/Button.styles.d.ts.map +1 -1
  119. package/types/components/Button/Button.tokens.d.ts +5 -0
  120. package/types/components/Button/Button.tokens.d.ts.map +1 -1
  121. package/types/components/Button/Button.types.d.ts +10 -0
  122. package/types/components/Button/Button.types.d.ts.map +1 -1
  123. package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
  124. package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
  125. package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
  126. package/cjs/components/Button/Button.styles_uqvh6u.css +0 -5
  127. package/es/components/Button/Button.styles_uqvh6u.css +0 -5
  128. package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +0 -68
  129. package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +0 -57
  130. package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +0 -156
  131. package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +0 -130
  132. package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +0 -33
  133. package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +0 -120
  134. package/styled-components/es/components/Cell/Cell.template-doc.mdx +0 -68
  135. package/styled-components/es/components/Divider/Divider.template-docs.mdx +0 -57
  136. package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +0 -156
  137. package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +0 -130
  138. package/styled-components/es/components/Progress/Progress.template-doc.mdx +0 -33
  139. package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +0 -120
@@ -11,98 +11,46 @@ import { PropsTable, Description } from '@site/src/components';
11
11
 
12
12
  ## Использование
13
13
 
14
- Перед использованием убедитесь, что `PopupProvider` подключен.
15
- Компонент Modal во многом схож с Popup, добавляет при этом подложку(`overlay`), а также блокирует scroll и focus.
14
+ ### Провайдер контекста
15
+ Поместите `ModalsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна:
16
16
 
17
- ```tsx live
18
- import React, { useState } from 'react';
19
- import { surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
20
- import { SSRProvider, Button, Modal, PopupProvider } from '@salutejs/{{ package }}';
17
+ ```tsx title="index.ts"
18
+ import ReactDOM from 'react-dom';
19
+ import { ModalsProvider } from '@salutejs/{{ package }}';
21
20
 
22
- export function App() {
23
- const [isOpenA, setIsOpenA] = useState(false);
24
- const [isOpenB, setIsOpenB] = useState(false);
21
+ import { App } from './App';
25
22
 
26
- return (
27
- <SSRProvider>
28
- <PopupProvider>
29
- <div style=\{{ height: "300px" }}>
30
- <div style=\{{ display: 'flex', flexDirection: 'column' }}>
31
- <Button text="Открыть A" onClick={() => setIsOpenA(true)} />
32
- </div>
33
- <Modal
34
- id="modalA"
35
- onClose={() => setIsOpenA(false)}
36
- isOpen={isOpenA}
37
- placement="center"
38
- offset={[0, 0]}
39
- >
40
- <div style=\{{ background: `${surfaceSolidSecondary}`, padding: "1rem" }}>
41
- <Button onClick={() => setIsOpenA(false)}>Close</Button>
42
- <Button text="Открыть B" onClick={() => setIsOpenB(true)} />
43
- Content
44
- </div>
45
- <Modal
46
- id="modalB"
47
- onClose={() => setIsOpenB(false)}
48
- isOpen={isOpenB}
49
- placement="right"
50
- offset={[0, 0]}
51
- >
52
- <div style=\{{ background: `${surfaceSolidSecondary}`, padding: "1rem" }}>
53
- <Button onClick={() => setIsOpenB(false)}>Close</Button>
54
- Content
55
- </div>
56
- </Modal>
57
- </Modal>
58
- </div>
59
- </PopupProvider>
60
- </SSRProvider>
61
- );
62
- }
23
+ ReactDOM.render(
24
+ <ModalsProvider>
25
+ <App />
26
+ </ModalsProvider>,
27
+ document.getElementById('root')
28
+ );
63
29
  ```
64
30
 
65
- ## Подключение анимации
66
- Подключение анимации аналогично тому, как это происходит в `Popup` - через свойство `withAnimation`(управление через `popupClasses`, `modalClasses`).
67
- Для добавления анимации в оверлей необходимо использовать класс `.modal-overlay` через переменную `modalClasses.overlay` из пакета.
68
-
69
- Пример:
70
-
71
- ```tsx
72
- import styled from 'styled-components';
73
- import { Modal } from '@salutejs/{{ package }}';
74
-
75
- const StyledModal = styled(Modal)`
76
- && > .${popupClasses.root}, .${modalClasses.overlay} {
77
- animation: fadeIn 1s forwards;
78
- }
31
+ ### Вызов модального окна
32
+ После подключения `ModalsProvider` поместите компонент `Modal` туда, где необходимо применить модальное окно:
79
33
 
80
- &&.${popupClasses.endAnimation} .${popupClasses.root} {
81
- animation: fadeOut 1s forwards;
82
- }
83
-
84
- &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
85
- animation: fadeOut 1s forwards;
86
- }
87
-
88
- @keyframes fadeIn {
89
- from {
90
- opacity: 0;
91
- }
34
+ ```tsx live
35
+ import React from 'react';
36
+ import { Modal, Headline3, P1, Button } from '@salutejs/{{ package }}';
92
37
 
93
- to {
94
- opacity: 1;
95
- }
96
- }
38
+ export function App() {
39
+ const [isOpen, setIsOpen] = React.useState(false);
97
40
 
98
- @keyframes fadeOut {
99
- from {
100
- opacity: 1;
101
- }
41
+ const close = React.useCallback(() => {
42
+ setIsOpen(false);
43
+ }, []);
102
44
 
103
- to {
104
- opacity: 0;
105
- }
106
- }
107
- `;
45
+ return (
46
+ <div>
47
+ <Button text="Открыть модальное окно" onClick={() => setIsOpen(!isOpen)} />
48
+ <Modal isOpen={isOpen} onClose={close}>
49
+ <Headline3 mb={10}>Модальное окно</Headline3>
50
+ <P1>Содержимое модального окна.</P1>
51
+ <Button text="Закрыть" onClick={close} />
52
+ </Modal>
53
+ </div>
54
+ );
55
+ }
108
56
  ```
@@ -34,7 +34,8 @@ ReactDOM.render(
34
34
  ```
35
35
 
36
36
  ### Вызов уведомления
37
- После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,который приведет к отображению оповещения.
37
+ После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,
38
+ который приведет к отображению оповещения.
38
39
  Функция принимает значения свойств компонента `Notification`:
39
40
 
40
41
  ```tsx live
@@ -12,7 +12,7 @@ import { PropsTable, Description } from '@site/src/components';
12
12
  ```tsx live
13
13
  import React from 'react';
14
14
  import styled from "styled-components";
15
- import { surfaceSolidTertiary } from "@salutejs/{{ vertical }}/tokens";
15
+ import { surfaceSolid03 } from "@salutejs/plasma-tokens/brands/{{ theme }}";
16
16
  import { Popover, Button } from '@salutejs/{{ package }}';
17
17
 
18
18
  export function App() {
@@ -26,7 +26,7 @@ export function App() {
26
26
  position: absolute;
27
27
  width: 0.5rem;
28
28
  height: 0.5rem;
29
- background: ${surfaceSolidTertiary};
29
+ background: ${surfaceSolid03};
30
30
  }
31
31
 
32
32
  &::before {
@@ -37,7 +37,7 @@ export function App() {
37
37
  `;
38
38
 
39
39
  const StyledContent = styled.div`
40
- background: ${surfaceSolidTertiary};
40
+ background: ${surfaceSolid03};
41
41
  padding: 1rem;
42
42
 
43
43
  display: flex;
@@ -1,79 +1,45 @@
1
1
  ---
2
- id: popup
3
- title: Popup
2
+ id: popupBase
3
+ title: PopupBase
4
4
  ---
5
5
 
6
6
  import { PropsTable, Description } from '@site/src/components';
7
7
 
8
- # Popup
9
- <Description name="Popup" />
10
- <PropsTable name="Popup" />
8
+ # PopupBase
9
+ <Description name="PopupBase" />
10
+ <PropsTable name="PopupBase" />
11
11
 
12
12
  ### Провайдер контекста
13
13
 
14
- Поместите `PopupProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять Popup:
14
+ Поместите `PopupBaseProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять PopupBase:
15
15
 
16
16
  ```tsx title="index.ts"
17
17
  import ReactDOM from 'react-dom';
18
- import { PopupProvider } from '@salutejs/sdds-serv';
18
+ import { PopupBaseProvider } from '@salutejs/{{ package }}';
19
19
 
20
20
  import { App } from './App';
21
21
 
22
22
  ReactDOM.render(
23
- <PopupProvider>
23
+ <PopupBaseProvider>
24
24
  <App />
25
- </PopupProvider>,
25
+ </PopupBaseProvider>,
26
26
  document.getElementById('root')
27
27
  );
28
28
  ```
29
29
 
30
30
  ### Использование
31
31
 
32
- Popup можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
33
-
32
+ PopupBase можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
34
33
  Также это свойство поддерживает передачу id элемента, в котором будет использоваться компонент.
35
-
36
34
  Само позиционирование можно указать с помощью свойства `placement`(center - по умолчанию; left, right, top, bottom и их комбинации),
37
- а также определить отступы от точки с помощью `offset`.
35
+ а также определить отступы от точки с помощью `offset`.
38
36
 
39
37
  ```tsx live
40
38
  import React, { useRef } from 'react';
41
- import styled from 'styled-components';
42
- import { surfaceSolidTertiary, surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
43
-
44
- import { SSRProvider, Button, Popup, PopupProvider } from '@salutejs/{{ package }}';
39
+ import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens/brands/{{ theme }}';
40
+ import { SSRProvider, Button, PopupBase, PopupBaseProvider } from '@salutejs/{{ package }}';
45
41
 
46
42
  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
-
77
43
  const [isOpenA, setIsOpenA] = React.useState(false);
78
44
  const [isOpenB, setIsOpenB] = React.useState(false);
79
45
 
@@ -81,28 +47,59 @@ export function App() {
81
47
 
82
48
  return (
83
49
  <SSRProvider>
84
- <PopupProvider>
85
- <StyledWrapper>
50
+ <PopupBaseProvider>
51
+ <div style=\{{height: "500px"}}>
86
52
  <div style=\{{ display: 'flex', flexDirection: 'column' }}>
87
- <StyledButton text="Открыть в document" onClick={() => setIsOpenB(true)} />
88
- <StyledButton text="Открыть во Frame" onClick={() => setIsOpenA(true)} />
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
+ />
89
69
  </div>
90
- <Popup
70
+ <PopupBase
91
71
  id="popupA"
92
72
  frame={ref}
93
73
  isOpen={isOpenA}
94
74
  placement="center"
95
75
  offset={[0, 0]}
96
76
  >
97
- <Content>
77
+ <div style=\{{ background: surfaceSolid02, padding: "1rem" }}>
98
78
  <Button onClick={() => setIsOpenA(false)}>Close</Button>
99
79
  <>Content</>
100
- </Content>
101
- </Popup>
102
- <OtherContent ref={ref}>
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
+ >
103
100
  <>Frame</>
104
- </OtherContent>
105
- <Popup
101
+ </div>
102
+ <PopupBase
106
103
  id="popupB"
107
104
  frame="document"
108
105
  isOpen={isOpenB}
@@ -113,9 +110,9 @@ export function App() {
113
110
  <Button onClick={() => setIsOpenB(false)}>Close</Button>
114
111
  <>Content</>
115
112
  </Content>
116
- </Popup>
117
- </StyledWrapper>
118
- </PopupProvider>
113
+ </PopupBase>
114
+ </div>
115
+ </PopupBaseProvider>
119
116
  </SSRProvider>
120
117
  );
121
118
  }
@@ -124,19 +121,19 @@ export function App() {
124
121
  ## Подключение анимации
125
122
 
126
123
  Для подключения анимации нужно добавить параметр `withAnimation`.
127
- Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `PopupClasses` для `Popup`.
128
- Для добавления анимации необходимо использовать класс `.popup-root` через переменную `PopupClasses.root` из пакета.
124
+ Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `popupBaseClasses` для `PopupBase`.
125
+ Для добавления анимации необходимо использовать класс `.popup-base-root` через переменную `popupBaseClasses.root` из пакета.
129
126
 
130
127
  Пример:
131
128
 
132
129
  ```tsx
133
- const StyledPopupTransition = styled(Popup)`
134
- && > .${PopupClasses.root} {
130
+ const StyledPopupTransition = styled(PopupBase)`
131
+ && > .${popupBaseClasses.root} {
135
132
  opacity: 1;
136
133
  transition: opacity 0.5s 0.1s;
137
134
  }
138
135
 
139
- &&.${PopupClasses.endTransition} > .${PopupClasses.root} {
136
+ &&.${popupBaseClasses.endTransition} > .${popupBaseClasses.root} {
140
137
  opacity: 0;
141
138
  transition: opacity 0.5s 0.1s;
142
139
  }
@@ -146,12 +143,12 @@ const StyledPopupTransition = styled(Popup)`
146
143
  или
147
144
 
148
145
  ```tsx
149
- const StyledPopupAnimation = styled(Popup)`
150
- && > .${PopupClasses.root} {
146
+ const StyledPopupAnimation = styled(PopupBase)`
147
+ && > .${popupBaseClasses.root} {
151
148
  animation: fadeIn 1s forwards;
152
149
  }
153
150
 
154
- &&.${PopupClasses.endAnimation} > .${PopupClasses.root} {
151
+ &&.${popupBaseClasses.endAnimation} > .${popupBaseClasses.root} {
155
152
  animation: fadeOut 1s forwards;
156
153
  }
157
154
 
@@ -185,7 +182,14 @@ const StyledPopupAnimation = styled(Popup)`
185
182
  return (
186
183
  <>
187
184
  <div>
188
- <StyledButton text="Открыть" onClick={() => setIsOpen(true)} />
185
+ <Button
186
+ style=\{{
187
+ marginTop: "1rem",
188
+ width: "15rem"
189
+ }}
190
+ text="Открыть"
191
+ onClick={() => setIsOpen(true)}
192
+ />
189
193
  </div>
190
194
  <StyledPopupAnimation
191
195
  id="popup-id"
@@ -27,9 +27,8 @@ export function App() {
27
27
  }
28
28
  ```
29
29
 
30
- ## RadioGroup
30
+ ## Группа радиокнопок
31
31
  Компоненты `Radiobox` следует объединять в `RadioGroup`
32
-
33
32
  ```tsx live
34
33
  <RadioGroup aria-labelledby="radiogroup-title-id">
35
34
  <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 from 'react';
29
- import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
28
+ import React, { useState } from 'react';
29
+ import { SegmentGroup, SegmentItem, SegmentProvider } 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
- Набор компонентов для создания скелетов загрузки (placeholders).
9
+ Набор компонентов для создания скелетов загрузки (плейсхолдеров).
10
10
 
11
11
  ## LineSkeleton
12
12
  <Description name="LineSkeleton" />
@@ -77,13 +77,13 @@ export function App() {
77
77
  ```
78
78
 
79
79
  ## Доступность
80
- При использовании hook `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
80
+ При использование хока `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>(Button);
86
+ const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(BasicButton);
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` screen-reader будет оповещать о соответствующем статусе компонента.
103
+ Таким образом, при `skeleton=true` и `aria-busy=true` скринридер будет оповещать о соответствующем статусе компонента.
@@ -27,7 +27,7 @@ import { PropsTable, Description } from '@site/src/components';
27
27
 
28
28
  ## Использование
29
29
 
30
- ### Стандартное подключение, без клавиатурной навигации
30
+ ### Cтандартное подключение, без клавиатурной навигации
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
+ ```
@@ -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(--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)
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)
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;"], _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)
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)
38
38
  },
39
39
  disabled: {
40
40
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Button.buttonTokens.buttonDisabledOpacity)