@salutejs/plasma-new-hope 0.240.0-canary.1697.12783039602.0 → 0.240.1-canary.1668.12804382842.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/emotion/cjs/components/Button/Button.template-doc.mdx +21 -13
  2. package/emotion/cjs/components/IconButton/IconButton.template-doc.mdx +16 -6
  3. package/emotion/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +5 -4
  4. package/emotion/cjs/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
  5. package/emotion/es/components/Button/Button.template-doc.mdx +21 -13
  6. package/emotion/es/components/IconButton/IconButton.template-doc.mdx +16 -6
  7. package/emotion/es/examples/plasma_b2c/components/Button/Button.stories.tsx +5 -4
  8. package/emotion/es/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
  9. package/package.json +6 -23
  10. package/styled-components/cjs/components/Button/Button.template-doc.mdx +21 -13
  11. package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +16 -6
  12. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +5 -4
  13. package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
  14. package/styled-components/es/components/Button/Button.template-doc.mdx +21 -13
  15. package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +16 -6
  16. package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +5 -4
  17. package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
  18. package/types/components/Button/Button.types.d.ts +5 -9
  19. package/types/components/Button/Button.types.d.ts.map +1 -1
package/emotion/cjs/components/Button/Button.template-doc.mdx CHANGED
@@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components';
8
8
  # Button
9
9
  Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.
10
10
 
11
- ## Button
12
11
  <Description name="Button" />
13
12
  <PropsTable name="Button" />
14
13
 
@@ -34,18 +33,18 @@ export function App() {
34
33
  <div>
35
34
  <Button text="Текст" />
36
35
 
37
- <Button text="Текст" contentLeft={<IconDownload />} />
36
+ <Button text="Текст" contentLeft={<IconDownload color="inherit" />} />
38
37
 
39
- <Button text="Текст" contentRight={<IconDownload />} />
38
+ <Button text="Текст" contentRight={<IconDownload color="inherit" />} />
40
39
 
41
- <Button contentLeft={<IconDownload />} />
40
+ <Button contentLeft={<IconDownload color="inherit" />} />
42
41
 
43
42
  <Button text="Текст" isLoading />
44
43
 
45
44
  <Button text="Текст" isLoading loader={<div>Loader...</div>} />
46
45
 
47
46
  <Button>
48
- <IconDownload />
47
+ <IconDownload color="inherit" />
49
48
  <span>Текст</span>
50
49
  </Button>
51
50
  </div>
@@ -56,7 +55,7 @@ export function App() {
56
55
  ## Примеры
57
56
 
58
57
  ### Размер кнопки
59
- Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`:
58
+ Размер кнопки задается с помощью свойства `size`:
60
59
 
61
60
  ```tsx live
62
61
  import React from 'react';
@@ -64,11 +63,13 @@ import { Button } from '@salutejs/{{ package }}';
64
63
 
65
64
  export function App() {
66
65
  return (
67
- <div>
66
+ <div>
68
67
  <Button text="Button" size="xl" />
69
68
  <Button text="Button" size="l" />
70
69
  <Button text="Button" size="m" />
71
70
  <Button text="Button" size="s" />
71
+ <Button text="Button" size="xs" />
72
+ <Button text="Button" size="xxs" />
72
73
  </div>
73
74
  );
74
75
  }
@@ -118,13 +119,17 @@ export function App() {
118
119
 
119
120
  ### Вид кнопки
120
121
  Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
122
+ + `"default"` – по умолчанию;
123
+ + `"accent"` – акцентная;
121
124
  + `"primary"` – основная;
122
125
  + `"secondary"` – вторичная;
126
+ + `"clear"` – без цветового сопровождения.
123
127
  + `"success"` – успешное завершение;
124
128
  + `"warning"` – предупреждение;
125
129
  + `"critical"` – ошибка;
126
- + `"checked"` – выбранное состояние;
127
- + `"clear"` – без цветового сопровождения.
130
+ + `"dark"` – темная;
131
+ + `"black"` – черная;
132
+ + `"white"` – белая.
128
133
 
129
134
  ```tsx live
130
135
  import React from 'react';
@@ -132,15 +137,18 @@ import { Button } from '@salutejs/{{ package }}';
132
137
 
133
138
  export function App() {
134
139
  return (
135
- <div>
140
+ <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
141
+ <Button text="Кнопка" size="s" view="default" />
136
142
  <Button text="Кнопка" size="s" view="primary" />
143
+ <Button text="Кнопка" size="s" view="accent" />
137
144
  <Button text="Кнопка" size="s" view="secondary" />
145
+ <Button text="Кнопка" size="s" view="clear" />
138
146
  <Button text="Кнопка" size="s" view="success" />
139
147
  <Button text="Кнопка" size="s" view="warning" />
140
148
  <Button text="Кнопка" size="s" view="critical" />
141
- <Button text="Кнопка" size="s" view="checked" />
142
- <Button text="Кнопка" size="s" view="overlay" />
143
- <Button text="Кнопка" size="s" view="clear" />
149
+ <Button text="Кнопка" size="s" view="dark" />
150
+ <Button text="Кнопка" size="s" view="black" />
151
+ <Button text="Кнопка" size="s" view="white" />
144
152
  </div>
145
153
  );
146
154
  }
package/emotion/cjs/components/IconButton/IconButton.template-doc.mdx CHANGED
@@ -44,6 +44,9 @@ import { IconClose } from '@salutejs/plasma-icons';
44
44
  export function App() {
45
45
  return (
46
46
  <div>
47
+ <IconButton size="xl">
48
+ <IconClose color="inherit" />
49
+ </IconButton>
47
50
  <IconButton size="l">
48
51
  <IconClose color="inherit" />
49
52
  </IconButton>
@@ -56,6 +59,9 @@ export function App() {
56
59
  <IconButton size="xs">
57
60
  <IconClose color="inherit" size="xs" />
58
61
  </IconButton>
62
+ <IconButton size="xxs">
63
+ <IconClose color="inherit" size="xs" />
64
+ </IconButton>
59
65
  </div>
60
66
  );
61
67
  }
@@ -66,11 +72,12 @@ export function App() {
66
72
 
67
73
  Возможные значения свойства `view`:
68
74
  + `"default"` – по умолчанию;
75
+ + `"accent"` – акцентная;
69
76
  + `"secondary"` – вторичная;
77
+ + `"clear"` – без цветового сопровождения.
70
78
  + `"success"` – успешное завершение;
71
79
  + `"warning"` – предупреждение;
72
80
  + `"critical"` – ошибка;
73
- + `"clear"` – без цветового сопровождения;
74
81
  + `"dark"` – темная;
75
82
  + `"black"` – черная;
76
83
  + `"white"` – белая.
@@ -82,13 +89,19 @@ import { IconClose } from '@salutejs/plasma-icons';
82
89
 
83
90
  export function App() {
84
91
  return (
85
- <div>
92
+ <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
86
93
  <IconButton size="s" view="default">
87
94
  <IconClose color="inherit" />
88
95
  </IconButton>
96
+ <IconButton size="s" view="accent">
97
+ <IconClose color="inherit" />
98
+ </IconButton>
89
99
  <IconButton size="s" view="secondary">
90
100
  <IconClose color="inherit" />
91
101
  </IconButton>
102
+ <IconButton size="s" view="clear">
103
+ <IconClose color="inherit" />
104
+ </IconButton>
92
105
  <IconButton size="s" view="success">
93
106
  <IconClose color="inherit" />
94
107
  </IconButton>
@@ -98,9 +111,6 @@ export function App() {
98
111
  <IconButton size="s" view="critical">
99
112
  <IconClose color="inherit" />
100
113
  </IconButton>
101
- <IconButton size="s" view="clear">
102
- <IconClose color="inherit" />
103
- </IconButton>
104
114
  <IconButton size="s" view="dark">
105
115
  <IconClose color="inherit" />
106
116
  </IconButton>
@@ -128,7 +138,7 @@ import { IconClose } from '@salutejs/plasma-icons';
128
138
 
129
139
  export function App() {
130
140
  return (
131
- <div>
141
+ <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
132
142
  <IconButton pin="square-square">
133
143
  <IconClose color="inherit" />
134
144
  </IconButton>
package/emotion/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx CHANGED
@@ -1,15 +1,16 @@
1
1
  import * as React from 'react';
2
2
  import type { ComponentProps } from 'react';
3
3
  import type { StoryObj, Meta } from '@storybook/react';
4
- import { disableProps } from '@salutejs/plasma-sb-utils';
4
+ import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { IconMic } from '../../../../components/_Icon';
7
7
  import { WithTheme } from '../../../_helpers';
8
8
 
9
9
  import { Button } from './Button';
10
+ import { config } from './Button.config';
11
+
12
+ const { views, sizes } = getConfigVariations(config);
10
13
 
11
- const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
12
- const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs'];
13
14
  const stretchingValues = ['auto', 'filled', 'fixed'];
14
15
  const pinValues = [
15
16
  '',
@@ -79,7 +80,7 @@ const meta: Meta<typeof Button> = {
79
80
  },
80
81
  table: { defaultValue: { summary: 'bottom' } },
81
82
  },
82
- ...disableProps(['value']),
83
+ ...disableProps(['value', 'focused', 'pin']),
83
84
  },
84
85
  };
85
86
 
package/emotion/cjs/examples/plasma_web/components/Button/Button.stories.tsx CHANGED
@@ -79,7 +79,7 @@ const meta: Meta<typeof Button> = {
79
79
  },
80
80
  table: { defaultValue: { summary: 'bottom' } },
81
81
  },
82
- ...disableProps(['value']),
82
+ ...disableProps(['value', 'pin', 'focused']),
83
83
  },
84
84
  };
85
85
 
package/emotion/es/components/Button/Button.template-doc.mdx CHANGED
@@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components';
8
8
  # Button
9
9
  Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.
10
10
 
11
- ## Button
12
11
  <Description name="Button" />
13
12
  <PropsTable name="Button" />
14
13
 
@@ -34,18 +33,18 @@ export function App() {
34
33
  <div>
35
34
  <Button text="Текст" />
36
35
 
37
- <Button text="Текст" contentLeft={<IconDownload />} />
36
+ <Button text="Текст" contentLeft={<IconDownload color="inherit" />} />
38
37
 
39
- <Button text="Текст" contentRight={<IconDownload />} />
38
+ <Button text="Текст" contentRight={<IconDownload color="inherit" />} />
40
39
 
41
- <Button contentLeft={<IconDownload />} />
40
+ <Button contentLeft={<IconDownload color="inherit" />} />
42
41
 
43
42
  <Button text="Текст" isLoading />
44
43
 
45
44
  <Button text="Текст" isLoading loader={<div>Loader...</div>} />
46
45
 
47
46
  <Button>
48
- <IconDownload />
47
+ <IconDownload color="inherit" />
49
48
  <span>Текст</span>
50
49
  </Button>
51
50
  </div>
@@ -56,7 +55,7 @@ export function App() {
56
55
  ## Примеры
57
56
 
58
57
  ### Размер кнопки
59
- Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`:
58
+ Размер кнопки задается с помощью свойства `size`:
60
59
 
61
60
  ```tsx live
62
61
  import React from 'react';
@@ -64,11 +63,13 @@ import { Button } from '@salutejs/{{ package }}';
64
63
 
65
64
  export function App() {
66
65
  return (
67
- <div>
66
+ <div>
68
67
  <Button text="Button" size="xl" />
69
68
  <Button text="Button" size="l" />
70
69
  <Button text="Button" size="m" />
71
70
  <Button text="Button" size="s" />
71
+ <Button text="Button" size="xs" />
72
+ <Button text="Button" size="xxs" />
72
73
  </div>
73
74
  );
74
75
  }
@@ -118,13 +119,17 @@ export function App() {
118
119
 
119
120
  ### Вид кнопки
120
121
  Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
122
+ + `"default"` – по умолчанию;
123
+ + `"accent"` – акцентная;
121
124
  + `"primary"` – основная;
122
125
  + `"secondary"` – вторичная;
126
+ + `"clear"` – без цветового сопровождения.
123
127
  + `"success"` – успешное завершение;
124
128
  + `"warning"` – предупреждение;
125
129
  + `"critical"` – ошибка;
126
- + `"checked"` – выбранное состояние;
127
- + `"clear"` – без цветового сопровождения.
130
+ + `"dark"` – темная;
131
+ + `"black"` – черная;
132
+ + `"white"` – белая.
128
133
 
129
134
  ```tsx live
130
135
  import React from 'react';
@@ -132,15 +137,18 @@ import { Button } from '@salutejs/{{ package }}';
132
137
 
133
138
  export function App() {
134
139
  return (
135
- <div>
140
+ <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
141
+ <Button text="Кнопка" size="s" view="default" />
136
142
  <Button text="Кнопка" size="s" view="primary" />
143
+ <Button text="Кнопка" size="s" view="accent" />
137
144
  <Button text="Кнопка" size="s" view="secondary" />
145
+ <Button text="Кнопка" size="s" view="clear" />
138
146
  <Button text="Кнопка" size="s" view="success" />
139
147
  <Button text="Кнопка" size="s" view="warning" />
140
148
  <Button text="Кнопка" size="s" view="critical" />
141
- <Button text="Кнопка" size="s" view="checked" />
142
- <Button text="Кнопка" size="s" view="overlay" />
143
- <Button text="Кнопка" size="s" view="clear" />
149
+ <Button text="Кнопка" size="s" view="dark" />
150
+ <Button text="Кнопка" size="s" view="black" />
151
+ <Button text="Кнопка" size="s" view="white" />
144
152
  </div>
145
153
  );
146
154
  }
package/emotion/es/components/IconButton/IconButton.template-doc.mdx CHANGED
@@ -44,6 +44,9 @@ import { IconClose } from '@salutejs/plasma-icons';
44
44
  export function App() {
45
45
  return (
46
46
  <div>
47
+ <IconButton size="xl">
48
+ <IconClose color="inherit" />
49
+ </IconButton>
47
50
  <IconButton size="l">
48
51
  <IconClose color="inherit" />
49
52
  </IconButton>
@@ -56,6 +59,9 @@ export function App() {
56
59
  <IconButton size="xs">
57
60
  <IconClose color="inherit" size="xs" />
58
61
  </IconButton>
62
+ <IconButton size="xxs">
63
+ <IconClose color="inherit" size="xs" />
64
+ </IconButton>
59
65
  </div>
60
66
  );
61
67
  }
@@ -66,11 +72,12 @@ export function App() {
66
72
 
67
73
  Возможные значения свойства `view`:
68
74
  + `"default"` – по умолчанию;
75
+ + `"accent"` – акцентная;
69
76
  + `"secondary"` – вторичная;
77
+ + `"clear"` – без цветового сопровождения.
70
78
  + `"success"` – успешное завершение;
71
79
  + `"warning"` – предупреждение;
72
80
  + `"critical"` – ошибка;
73
- + `"clear"` – без цветового сопровождения;
74
81
  + `"dark"` – темная;
75
82
  + `"black"` – черная;
76
83
  + `"white"` – белая.
@@ -82,13 +89,19 @@ import { IconClose } from '@salutejs/plasma-icons';
82
89
 
83
90
  export function App() {
84
91
  return (
85
- <div>
92
+ <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
86
93
  <IconButton size="s" view="default">
87
94
  <IconClose color="inherit" />
88
95
  </IconButton>
96
+ <IconButton size="s" view="accent">
97
+ <IconClose color="inherit" />
98
+ </IconButton>
89
99
  <IconButton size="s" view="secondary">
90
100
  <IconClose color="inherit" />
91
101
  </IconButton>
102
+ <IconButton size="s" view="clear">
103
+ <IconClose color="inherit" />
104
+ </IconButton>
92
105
  <IconButton size="s" view="success">
93
106
  <IconClose color="inherit" />
94
107
  </IconButton>
@@ -98,9 +111,6 @@ export function App() {
98
111
  <IconButton size="s" view="critical">
99
112
  <IconClose color="inherit" />
100
113
  </IconButton>
101
- <IconButton size="s" view="clear">
102
- <IconClose color="inherit" />
103
- </IconButton>
104
114
  <IconButton size="s" view="dark">
105
115
  <IconClose color="inherit" />
106
116
  </IconButton>
@@ -128,7 +138,7 @@ import { IconClose } from '@salutejs/plasma-icons';
128
138
 
129
139
  export function App() {
130
140
  return (
131
- <div>
141
+ <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
132
142
  <IconButton pin="square-square">
133
143
  <IconClose color="inherit" />
134
144
  </IconButton>
package/emotion/es/examples/plasma_b2c/components/Button/Button.stories.tsx CHANGED
@@ -1,15 +1,16 @@
1
1
  import * as React from 'react';
2
2
  import type { ComponentProps } from 'react';
3
3
  import type { StoryObj, Meta } from '@storybook/react';
4
- import { disableProps } from '@salutejs/plasma-sb-utils';
4
+ import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { IconMic } from '../../../../components/_Icon';
7
7
  import { WithTheme } from '../../../_helpers';
8
8
 
9
9
  import { Button } from './Button';
10
+ import { config } from './Button.config';
11
+
12
+ const { views, sizes } = getConfigVariations(config);
10
13
 
11
- const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
12
- const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs'];
13
14
  const stretchingValues = ['auto', 'filled', 'fixed'];
14
15
  const pinValues = [
15
16
  '',
@@ -79,7 +80,7 @@ const meta: Meta<typeof Button> = {
79
80
  },
80
81
  table: { defaultValue: { summary: 'bottom' } },
81
82
  },
82
- ...disableProps(['value']),
83
+ ...disableProps(['value', 'focused', 'pin']),
83
84
  },
84
85
  };
85
86
 
package/emotion/es/examples/plasma_web/components/Button/Button.stories.tsx CHANGED
@@ -79,7 +79,7 @@ const meta: Meta<typeof Button> = {
79
79
  },
80
80
  table: { defaultValue: { summary: 'bottom' } },
81
81
  },
82
- ...disableProps(['value']),
82
+ ...disableProps(['value', 'pin', 'focused']),
83
83
  },
84
84
  };
85
85
 
package/package.json CHANGED
@@ -1,27 +1,10 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-new-hope",
3
- "version": "0.240.0-canary.1697.12783039602.0",
3
+ "version": "0.240.1-canary.1668.12804382842.0",
4
4
  "description": "Salute Design System blueprint",
5
- "main": "./cjs/index.js",
6
- "module": "./es/index.js",
7
- "types": "./types/index.d.ts",
8
- "exports": {
9
- ".": {
10
- "require": "./cjs/index.js",
11
- "import": "./es/index.js",
12
- "types": "./types/index.d.ts"
13
- },
14
- "./styled-components": {
15
- "require": "./styled-components/cjs/index.js",
16
- "import": "./styled-components/es/index.js",
17
- "types": "./types/index.d.ts"
18
- },
19
- "./emotion": {
20
- "require": "./emotion/cjs/index.js",
21
- "import": "./emotion/es/index.js",
22
- "types": "./types/index.d.ts"
23
- }
24
- },
5
+ "main": "cjs/index.js",
6
+ "module": "es/index.js",
7
+ "types": "types/index.d.ts",
25
8
  "files": [
26
9
  "cjs",
27
10
  "es",
@@ -97,7 +80,7 @@
97
80
  "@rollup/plugin-babel": "^6.0.4",
98
81
  "@rollup/plugin-commonjs": "^25.0.4",
99
82
  "@rollup/plugin-node-resolve": "^15.1.0",
100
- "@salutejs/plasma-sb-utils": "0.190.0-dev.0",
83
+ "@salutejs/plasma-sb-utils": "0.190.1-canary.1668.12804382842.0",
101
84
  "@salutejs/plasma-themes": "0.28.0",
102
85
  "@storybook/addon-docs": "^7.6.17",
103
86
  "@storybook/addon-essentials": "^7.6.17",
@@ -148,5 +131,5 @@
148
131
  "sideEffects": [
149
132
  "*.css"
150
133
  ],
151
- "gitHead": "ae27b8acf6e0f8df5ac20c3b2e7ec21a9eaf9e08"
134
+ "gitHead": "e2313fc95665faca51c7197a779310bdd468ba79"
152
135
  }
package/styled-components/cjs/components/Button/Button.template-doc.mdx CHANGED
@@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components';
8
8
  # Button
9
9
  Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.
10
10
 
11
- ## Button
12
11
  <Description name="Button" />
13
12
  <PropsTable name="Button" />
14
13
 
@@ -34,18 +33,18 @@ export function App() {
34
33
  <div>
35
34
  <Button text="Текст" />
36
35
 
37
- <Button text="Текст" contentLeft={<IconDownload />} />
36
+ <Button text="Текст" contentLeft={<IconDownload color="inherit" />} />
38
37
 
39
- <Button text="Текст" contentRight={<IconDownload />} />
38
+ <Button text="Текст" contentRight={<IconDownload color="inherit" />} />
40
39
 
41
- <Button contentLeft={<IconDownload />} />
40
+ <Button contentLeft={<IconDownload color="inherit" />} />
42
41
 
43
42
  <Button text="Текст" isLoading />
44
43
 
45
44
  <Button text="Текст" isLoading loader={<div>Loader...</div>} />
46
45
 
47
46
  <Button>
48
- <IconDownload />
47
+ <IconDownload color="inherit" />
49
48
  <span>Текст</span>
50
49
  </Button>
51
50
  </div>
@@ -56,7 +55,7 @@ export function App() {
56
55
  ## Примеры
57
56
 
58
57
  ### Размер кнопки
59
- Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`:
58
+ Размер кнопки задается с помощью свойства `size`:
60
59
 
61
60
  ```tsx live
62
61
  import React from 'react';
@@ -64,11 +63,13 @@ import { Button } from '@salutejs/{{ package }}';
64
63
 
65
64
  export function App() {
66
65
  return (
67
- <div>
66
+ <div>
68
67
  <Button text="Button" size="xl" />
69
68
  <Button text="Button" size="l" />
70
69
  <Button text="Button" size="m" />
71
70
  <Button text="Button" size="s" />
71
+ <Button text="Button" size="xs" />
72
+ <Button text="Button" size="xxs" />
72
73
  </div>
73
74
  );
74
75
  }
@@ -118,13 +119,17 @@ export function App() {
118
119
 
119
120
  ### Вид кнопки
120
121
  Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
122
+ + `"default"` – по умолчанию;
123
+ + `"accent"` – акцентная;
121
124
  + `"primary"` – основная;
122
125
  + `"secondary"` – вторичная;
126
+ + `"clear"` – без цветового сопровождения.
123
127
  + `"success"` – успешное завершение;
124
128
  + `"warning"` – предупреждение;
125
129
  + `"critical"` – ошибка;
126
- + `"checked"` – выбранное состояние;
127
- + `"clear"` – без цветового сопровождения.
130
+ + `"dark"` – темная;
131
+ + `"black"` – черная;
132
+ + `"white"` – белая.
128
133
 
129
134
  ```tsx live
130
135
  import React from 'react';
@@ -132,15 +137,18 @@ import { Button } from '@salutejs/{{ package }}';
132
137
 
133
138
  export function App() {
134
139
  return (
135
- <div>
140
+ <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
141
+ <Button text="Кнопка" size="s" view="default" />
136
142
  <Button text="Кнопка" size="s" view="primary" />
143
+ <Button text="Кнопка" size="s" view="accent" />
137
144
  <Button text="Кнопка" size="s" view="secondary" />
145
+ <Button text="Кнопка" size="s" view="clear" />
138
146
  <Button text="Кнопка" size="s" view="success" />
139
147
  <Button text="Кнопка" size="s" view="warning" />
140
148
  <Button text="Кнопка" size="s" view="critical" />
141
- <Button text="Кнопка" size="s" view="checked" />
142
- <Button text="Кнопка" size="s" view="overlay" />
143
- <Button text="Кнопка" size="s" view="clear" />
149
+ <Button text="Кнопка" size="s" view="dark" />
150
+ <Button text="Кнопка" size="s" view="black" />
151
+ <Button text="Кнопка" size="s" view="white" />
144
152
  </div>
145
153
  );
146
154
  }
package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx CHANGED
@@ -44,6 +44,9 @@ import { IconClose } from '@salutejs/plasma-icons';
44
44
  export function App() {
45
45
  return (
46
46
  <div>
47
+ <IconButton size="xl">
48
+ <IconClose color="inherit" />
49
+ </IconButton>
47
50
  <IconButton size="l">
48
51
  <IconClose color="inherit" />
49
52
  </IconButton>
@@ -56,6 +59,9 @@ export function App() {
56
59
  <IconButton size="xs">
57
60
  <IconClose color="inherit" size="xs" />
58
61
  </IconButton>
62
+ <IconButton size="xxs">
63
+ <IconClose color="inherit" size="xs" />
64
+ </IconButton>
59
65
  </div>
60
66
  );
61
67
  }
@@ -66,11 +72,12 @@ export function App() {
66
72
 
67
73
  Возможные значения свойства `view`:
68
74
  + `"default"` – по умолчанию;
75
+ + `"accent"` – акцентная;
69
76
  + `"secondary"` – вторичная;
77
+ + `"clear"` – без цветового сопровождения.
70
78
  + `"success"` – успешное завершение;
71
79
  + `"warning"` – предупреждение;
72
80
  + `"critical"` – ошибка;
73
- + `"clear"` – без цветового сопровождения;
74
81
  + `"dark"` – темная;
75
82
  + `"black"` – черная;
76
83
  + `"white"` – белая.
@@ -82,13 +89,19 @@ import { IconClose } from '@salutejs/plasma-icons';
82
89
 
83
90
  export function App() {
84
91
  return (
85
- <div>
92
+ <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
86
93
  <IconButton size="s" view="default">
87
94
  <IconClose color="inherit" />
88
95
  </IconButton>
96
+ <IconButton size="s" view="accent">
97
+ <IconClose color="inherit" />
98
+ </IconButton>
89
99
  <IconButton size="s" view="secondary">
90
100
  <IconClose color="inherit" />
91
101
  </IconButton>
102
+ <IconButton size="s" view="clear">
103
+ <IconClose color="inherit" />
104
+ </IconButton>
92
105
  <IconButton size="s" view="success">
93
106
  <IconClose color="inherit" />
94
107
  </IconButton>
@@ -98,9 +111,6 @@ export function App() {
98
111
  <IconButton size="s" view="critical">
99
112
  <IconClose color="inherit" />
100
113
  </IconButton>
101
- <IconButton size="s" view="clear">
102
- <IconClose color="inherit" />
103
- </IconButton>
104
114
  <IconButton size="s" view="dark">
105
115
  <IconClose color="inherit" />
106
116
  </IconButton>
@@ -128,7 +138,7 @@ import { IconClose } from '@salutejs/plasma-icons';
128
138
 
129
139
  export function App() {
130
140
  return (
131
- <div>
141
+ <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
132
142
  <IconButton pin="square-square">
133
143
  <IconClose color="inherit" />
134
144
  </IconButton>
package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx CHANGED
@@ -1,15 +1,16 @@
1
1
  import * as React from 'react';
2
2
  import type { ComponentProps } from 'react';
3
3
  import type { StoryObj, Meta } from '@storybook/react';
4
- import { disableProps } from '@salutejs/plasma-sb-utils';
4
+ import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { IconMic } from '../../../../components/_Icon';
7
7
  import { WithTheme } from '../../../_helpers';
8
8
 
9
9
  import { Button } from './Button';
10
+ import { config } from './Button.config';
11
+
12
+ const { views, sizes } = getConfigVariations(config);
10
13
 
11
- const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
12
- const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs'];
13
14
  const stretchingValues = ['auto', 'filled', 'fixed'];
14
15
  const pinValues = [
15
16
  '',
@@ -79,7 +80,7 @@ const meta: Meta<typeof Button> = {
79
80
  },
80
81
  table: { defaultValue: { summary: 'bottom' } },
81
82
  },
82
- ...disableProps(['value']),
83
+ ...disableProps(['value', 'focused', 'pin']),
83
84
  },
84
85
  };
85
86
 
package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx CHANGED
@@ -79,7 +79,7 @@ const meta: Meta<typeof Button> = {
79
79
  },
80
80
  table: { defaultValue: { summary: 'bottom' } },
81
81
  },
82
- ...disableProps(['value']),
82
+ ...disableProps(['value', 'pin', 'focused']),
83
83
  },
84
84
  };
85
85
 
package/styled-components/es/components/Button/Button.template-doc.mdx CHANGED
@@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components';
8
8
  # Button
9
9
  Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.
10
10
 
11
- ## Button
12
11
  <Description name="Button" />
13
12
  <PropsTable name="Button" />
14
13
 
@@ -34,18 +33,18 @@ export function App() {
34
33
  <div>
35
34
  <Button text="Текст" />
36
35
 
37
- <Button text="Текст" contentLeft={<IconDownload />} />
36
+ <Button text="Текст" contentLeft={<IconDownload color="inherit" />} />
38
37
 
39
- <Button text="Текст" contentRight={<IconDownload />} />
38
+ <Button text="Текст" contentRight={<IconDownload color="inherit" />} />
40
39
 
41
- <Button contentLeft={<IconDownload />} />
40
+ <Button contentLeft={<IconDownload color="inherit" />} />
42
41
 
43
42
  <Button text="Текст" isLoading />
44
43
 
45
44
  <Button text="Текст" isLoading loader={<div>Loader...</div>} />
46
45
 
47
46
  <Button>
48
- <IconDownload />
47
+ <IconDownload color="inherit" />
49
48
  <span>Текст</span>
50
49
  </Button>
51
50
  </div>
@@ -56,7 +55,7 @@ export function App() {
56
55
  ## Примеры
57
56
 
58
57
  ### Размер кнопки
59
- Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`:
58
+ Размер кнопки задается с помощью свойства `size`:
60
59
 
61
60
  ```tsx live
62
61
  import React from 'react';
@@ -64,11 +63,13 @@ import { Button } from '@salutejs/{{ package }}';
64
63
 
65
64
  export function App() {
66
65
  return (
67
- <div>
66
+ <div>
68
67
  <Button text="Button" size="xl" />
69
68
  <Button text="Button" size="l" />
70
69
  <Button text="Button" size="m" />
71
70
  <Button text="Button" size="s" />
71
+ <Button text="Button" size="xs" />
72
+ <Button text="Button" size="xxs" />
72
73
  </div>
73
74
  );
74
75
  }
@@ -118,13 +119,17 @@ export function App() {
118
119
 
119
120
  ### Вид кнопки
120
121
  Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
122
+ + `"default"` – по умолчанию;
123
+ + `"accent"` – акцентная;
121
124
  + `"primary"` – основная;
122
125
  + `"secondary"` – вторичная;
126
+ + `"clear"` – без цветового сопровождения.
123
127
  + `"success"` – успешное завершение;
124
128
  + `"warning"` – предупреждение;
125
129
  + `"critical"` – ошибка;
126
- + `"checked"` – выбранное состояние;
127
- + `"clear"` – без цветового сопровождения.
130
+ + `"dark"` – темная;
131
+ + `"black"` – черная;
132
+ + `"white"` – белая.
128
133
 
129
134
  ```tsx live
130
135
  import React from 'react';
@@ -132,15 +137,18 @@ import { Button } from '@salutejs/{{ package }}';
132
137
 
133
138
  export function App() {
134
139
  return (
135
- <div>
140
+ <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
141
+ <Button text="Кнопка" size="s" view="default" />
136
142
  <Button text="Кнопка" size="s" view="primary" />
143
+ <Button text="Кнопка" size="s" view="accent" />
137
144
  <Button text="Кнопка" size="s" view="secondary" />
145
+ <Button text="Кнопка" size="s" view="clear" />
138
146
  <Button text="Кнопка" size="s" view="success" />
139
147
  <Button text="Кнопка" size="s" view="warning" />
140
148
  <Button text="Кнопка" size="s" view="critical" />
141
- <Button text="Кнопка" size="s" view="checked" />
142
- <Button text="Кнопка" size="s" view="overlay" />
143
- <Button text="Кнопка" size="s" view="clear" />
149
+ <Button text="Кнопка" size="s" view="dark" />
150
+ <Button text="Кнопка" size="s" view="black" />
151
+ <Button text="Кнопка" size="s" view="white" />
144
152
  </div>
145
153
  );
146
154
  }
package/styled-components/es/components/IconButton/IconButton.template-doc.mdx CHANGED
@@ -44,6 +44,9 @@ import { IconClose } from '@salutejs/plasma-icons';
44
44
  export function App() {
45
45
  return (
46
46
  <div>
47
+ <IconButton size="xl">
48
+ <IconClose color="inherit" />
49
+ </IconButton>
47
50
  <IconButton size="l">
48
51
  <IconClose color="inherit" />
49
52
  </IconButton>
@@ -56,6 +59,9 @@ export function App() {
56
59
  <IconButton size="xs">
57
60
  <IconClose color="inherit" size="xs" />
58
61
  </IconButton>
62
+ <IconButton size="xxs">
63
+ <IconClose color="inherit" size="xs" />
64
+ </IconButton>
59
65
  </div>
60
66
  );
61
67
  }
@@ -66,11 +72,12 @@ export function App() {
66
72
 
67
73
  Возможные значения свойства `view`:
68
74
  + `"default"` – по умолчанию;
75
+ + `"accent"` – акцентная;
69
76
  + `"secondary"` – вторичная;
77
+ + `"clear"` – без цветового сопровождения.
70
78
  + `"success"` – успешное завершение;
71
79
  + `"warning"` – предупреждение;
72
80
  + `"critical"` – ошибка;
73
- + `"clear"` – без цветового сопровождения;
74
81
  + `"dark"` – темная;
75
82
  + `"black"` – черная;
76
83
  + `"white"` – белая.
@@ -82,13 +89,19 @@ import { IconClose } from '@salutejs/plasma-icons';
82
89
 
83
90
  export function App() {
84
91
  return (
85
- <div>
92
+ <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
86
93
  <IconButton size="s" view="default">
87
94
  <IconClose color="inherit" />
88
95
  </IconButton>
96
+ <IconButton size="s" view="accent">
97
+ <IconClose color="inherit" />
98
+ </IconButton>
89
99
  <IconButton size="s" view="secondary">
90
100
  <IconClose color="inherit" />
91
101
  </IconButton>
102
+ <IconButton size="s" view="clear">
103
+ <IconClose color="inherit" />
104
+ </IconButton>
92
105
  <IconButton size="s" view="success">
93
106
  <IconClose color="inherit" />
94
107
  </IconButton>
@@ -98,9 +111,6 @@ export function App() {
98
111
  <IconButton size="s" view="critical">
99
112
  <IconClose color="inherit" />
100
113
  </IconButton>
101
- <IconButton size="s" view="clear">
102
- <IconClose color="inherit" />
103
- </IconButton>
104
114
  <IconButton size="s" view="dark">
105
115
  <IconClose color="inherit" />
106
116
  </IconButton>
@@ -128,7 +138,7 @@ import { IconClose } from '@salutejs/plasma-icons';
128
138
 
129
139
  export function App() {
130
140
  return (
131
- <div>
141
+ <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
132
142
  <IconButton pin="square-square">
133
143
  <IconClose color="inherit" />
134
144
  </IconButton>
package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx CHANGED
@@ -1,15 +1,16 @@
1
1
  import * as React from 'react';
2
2
  import type { ComponentProps } from 'react';
3
3
  import type { StoryObj, Meta } from '@storybook/react';
4
- import { disableProps } from '@salutejs/plasma-sb-utils';
4
+ import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { IconMic } from '../../../../components/_Icon';
7
7
  import { WithTheme } from '../../../_helpers';
8
8
 
9
9
  import { Button } from './Button';
10
+ import { config } from './Button.config';
11
+
12
+ const { views, sizes } = getConfigVariations(config);
10
13
 
11
- const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
12
- const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs'];
13
14
  const stretchingValues = ['auto', 'filled', 'fixed'];
14
15
  const pinValues = [
15
16
  '',
@@ -79,7 +80,7 @@ const meta: Meta<typeof Button> = {
79
80
  },
80
81
  table: { defaultValue: { summary: 'bottom' } },
81
82
  },
82
- ...disableProps(['value']),
83
+ ...disableProps(['value', 'focused', 'pin']),
83
84
  },
84
85
  };
85
86
 
package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx CHANGED
@@ -79,7 +79,7 @@ const meta: Meta<typeof Button> = {
79
79
  },
80
80
  table: { defaultValue: { summary: 'bottom' } },
81
81
  },
82
- ...disableProps(['value']),
82
+ ...disableProps(['value', 'pin', 'focused']),
83
83
  },
84
84
  };
85
85
 
package/types/components/Button/Button.types.d.ts CHANGED
@@ -51,8 +51,7 @@ declare type CustomButtonProps = {
51
51
  loader?: ReactNode;
52
52
  /**
53
53
  * Кнопка растягивается на всю доступную ширину
54
- * @deprecated
55
- * Использовать stretching
54
+ * @deprecated Использовать stretching
56
55
  */
57
56
  stretch?: boolean;
58
57
  /**
@@ -66,8 +65,7 @@ declare type CustomButtonProps = {
66
65
  stretching?: Stretching;
67
66
  /**
68
67
  * Кнопка принимает соотношение сторон 1:1
69
- * @deprecated
70
- * Использовать для этого случая IconButton
68
+ * @deprecated Использовать для этого случая IconButton
71
69
  */
72
70
  square?: boolean;
73
71
  /**
@@ -75,7 +73,7 @@ declare type CustomButtonProps = {
75
73
  */
76
74
  focused?: boolean;
77
75
  /**
78
- * кнопка неактивна
76
+ * Кнопка неактивна
79
77
  */
80
78
  disabled?: boolean;
81
79
  /**
@@ -92,8 +90,7 @@ declare type CustomButtonProps = {
92
90
  size?: string;
93
91
  /**
94
92
  * Добавить рамку при фокусе
95
- * @deprecated
96
- * использовать focused
93
+ * @deprecated использовать focused
97
94
  */
98
95
  outlined?: boolean;
99
96
  /**
@@ -108,8 +105,7 @@ declare type CustomButtonProps = {
108
105
  shiftRight?: boolean;
109
106
  /**
110
107
  * Степень размытия фона
111
- * @deprecated
112
- * для кнопок без прозрачности не работает
108
+ * @deprecated для кнопок без прозрачности не работает
113
109
  */
114
110
  blur?: Blur;
115
111
  };
package/types/components/Button/Button.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,aAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9C,aAAK,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAC5C,aAAK,mBAAmB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEtD,oBAAY,sBAAsB,GAAG;KAChC,CAAC,IAAI,cAAc,GAAG,mBAAmB;CAC7C,CAAC;AAEF,aAAK,YAAY,GACX;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;CACxB,GACD;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAER,aAAK,iBAAiB,GAAG;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC;IACV;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACf,CAAC;AAEF,oBAAY,WAAW,CAAC,CAAC,GAAG,WAAW,IAAI,EAAE,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAClF,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GACrC,OAAO,GACP,iBAAiB,GACjB,YAAY,CAAC"}
1
+ {"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,aAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9C,aAAK,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAC5C,aAAK,mBAAmB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEtD,oBAAY,sBAAsB,GAAG;KAChC,CAAC,IAAI,cAAc,GAAG,mBAAmB;CAC7C,CAAC;AAEF,aAAK,YAAY,GACX;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;CACxB,GACD;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAER,aAAK,iBAAiB,GAAG;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC;IACV;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACf,CAAC;AAEF,oBAAY,WAAW,CAAC,CAAC,GAAG,WAAW,IAAI,EAAE,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAClF,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GACrC,OAAO,GACP,iBAAiB,GACjB,YAAY,CAAC"}