@salutejs/plasma-new-hope 0.141.0-canary.1422.10721189833.0 → 0.141.0-canary.1422.10773738088.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (95) hide show
  1. package/emotion/cjs/components/Combobox/Combobox.template-doc.mdx +345 -0
  2. package/emotion/cjs/examples/plasma_b2c/components/Combobox/Combobox.config.js +39 -0
  3. package/{styled-components/cjs/examples/plasma_b2c/components/Combobox/ComboboxNew → emotion/cjs/examples/plasma_b2c/components/Combobox}/Combobox.js +2 -2
  4. package/emotion/{es/examples/plasma_b2c/components/Combobox/ComboboxNew → cjs/examples/plasma_b2c/components/Combobox}/Combobox.stories.tsx +3 -3
  5. package/emotion/cjs/examples/plasma_b2c/components/Combobox/Legacy/Combobox.config.js +25 -0
  6. package/emotion/cjs/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.stories.tsx +21 -34
  7. package/emotion/cjs/examples/plasma_web/components/Combobox/Combobox.config.js +39 -0
  8. package/emotion/cjs/examples/{plasma_b2c/components/Combobox/ComboboxNew → plasma_web/components/Combobox}/Combobox.js +2 -2
  9. package/emotion/cjs/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.stories.tsx → Combobox.stories.tsx} +3 -3
  10. package/emotion/cjs/examples/plasma_web/components/Combobox/Legacy/Combobox.config.js +25 -0
  11. package/emotion/{es/examples/plasma_b2c/components/Combobox/ComboboxOld → cjs/examples/plasma_web/components/Combobox/Legacy}/Combobox.stories.tsx +21 -34
  12. package/emotion/es/components/Combobox/Combobox.template-doc.mdx +345 -0
  13. package/emotion/es/examples/plasma_b2c/components/Combobox/Combobox.config.js +33 -0
  14. package/emotion/es/examples/plasma_b2c/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js} +2 -2
  15. package/emotion/{cjs/examples/plasma_b2c/components/Combobox/ComboboxNew → es/examples/plasma_b2c/components/Combobox}/Combobox.stories.tsx +3 -3
  16. package/emotion/es/examples/plasma_b2c/components/Combobox/Legacy/Combobox.config.js +19 -0
  17. package/emotion/es/examples/{plasma_web/components/Combobox/ComboboxOld → plasma_b2c/components/Combobox/Legacy}/Combobox.stories.tsx +21 -34
  18. package/emotion/es/examples/plasma_web/components/Combobox/Combobox.config.js +33 -0
  19. package/emotion/es/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js} +2 -2
  20. package/emotion/es/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.stories.tsx → Combobox.stories.tsx} +3 -3
  21. package/emotion/es/examples/plasma_web/components/Combobox/Legacy/Combobox.config.js +19 -0
  22. package/emotion/{cjs/examples/plasma_web/components/Combobox/ComboboxOld → es/examples/plasma_web/components/Combobox/Legacy}/Combobox.stories.tsx +21 -34
  23. package/package.json +2 -2
  24. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +345 -0
  25. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/{ComboboxNew/Combobox.config.js → Combobox.config.js} +2 -2
  26. package/{emotion/cjs/examples/plasma_web/components/Combobox/ComboboxNew → styled-components/cjs/examples/plasma_b2c/components/Combobox}/Combobox.js +2 -2
  27. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +368 -0
  28. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.js +1 -1
  29. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Legacy/Combobox.stories.tsx +256 -0
  30. package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.config.js +39 -0
  31. package/styled-components/cjs/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js} +2 -2
  32. package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.stories.tsx +368 -0
  33. package/styled-components/cjs/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.js +1 -1
  34. package/styled-components/cjs/examples/plasma_web/components/Combobox/Legacy/Combobox.stories.tsx +256 -0
  35. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +345 -0
  36. package/styled-components/es/examples/{plasma_web/components/Combobox/ComboboxNew → plasma_b2c/components/Combobox}/Combobox.config.js +2 -2
  37. package/styled-components/es/examples/plasma_b2c/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js} +2 -2
  38. package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +368 -0
  39. package/styled-components/es/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.js +1 -1
  40. package/styled-components/es/examples/plasma_b2c/components/Combobox/Legacy/Combobox.stories.tsx +256 -0
  41. package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.config.js +33 -0
  42. package/styled-components/es/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js} +2 -2
  43. package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.stories.tsx +368 -0
  44. package/styled-components/es/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.js +1 -1
  45. package/styled-components/es/examples/plasma_web/components/Combobox/Legacy/Combobox.stories.tsx +256 -0
  46. package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts +0 -2
  47. package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts.map +1 -1
  48. package/types/examples/plasma_b2c/components/Combobox/Combobox.config.d.ts.map +1 -0
  49. package/types/examples/plasma_b2c/components/Combobox/{ComboboxNew/Combobox.d.ts → Combobox.d.ts} +3 -3
  50. package/types/examples/plasma_b2c/components/Combobox/Combobox.d.ts.map +1 -0
  51. package/types/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.d.ts.map +1 -1
  52. package/types/examples/plasma_b2c/components/Combobox/Legacy/Combobox.d.ts.map +1 -0
  53. package/types/examples/plasma_web/components/Combobox/Combobox.config.d.ts.map +1 -0
  54. package/types/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.d.ts → Combobox.d.ts} +3 -3
  55. package/types/examples/plasma_web/components/Combobox/Combobox.d.ts.map +1 -0
  56. package/types/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.d.ts.map +1 -1
  57. package/types/examples/plasma_web/components/Combobox/Legacy/Combobox.d.ts.map +1 -0
  58. package/emotion/cjs/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.config.js +0 -39
  59. package/emotion/cjs/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.config.js +0 -25
  60. package/emotion/cjs/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.config.js +0 -39
  61. package/emotion/cjs/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.config.js +0 -25
  62. package/emotion/es/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.config.js +0 -33
  63. package/emotion/es/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.config.js +0 -19
  64. package/emotion/es/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.config.js +0 -33
  65. package/emotion/es/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.config.js +0 -19
  66. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.stories.tsx +0 -368
  67. package/styled-components/cjs/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.stories.tsx +0 -269
  68. package/styled-components/cjs/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.config.js +0 -39
  69. package/styled-components/cjs/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.stories.tsx +0 -368
  70. package/styled-components/cjs/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.stories.tsx +0 -269
  71. package/styled-components/es/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.config.js +0 -33
  72. package/styled-components/es/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.stories.tsx +0 -368
  73. package/styled-components/es/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.stories.tsx +0 -269
  74. package/styled-components/es/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.stories.tsx +0 -368
  75. package/styled-components/es/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.stories.tsx +0 -269
  76. package/types/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.config.d.ts.map +0 -1
  77. package/types/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.d.ts.map +0 -1
  78. package/types/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.d.ts.map +0 -1
  79. package/types/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.config.d.ts.map +0 -1
  80. package/types/examples/plasma_web/components/Combobox/ComboboxNew/Combobox.d.ts.map +0 -1
  81. package/types/examples/plasma_web/components/Combobox/ComboboxOld/Combobox.d.ts.map +0 -1
  82. /package/emotion/cjs/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  83. /package/emotion/cjs/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  84. /package/emotion/es/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  85. /package/emotion/es/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  86. /package/styled-components/cjs/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  87. /package/styled-components/cjs/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  88. /package/styled-components/es/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  89. /package/styled-components/es/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.js +0 -0
  90. /package/types/examples/plasma_b2c/components/Combobox/{ComboboxNew/Combobox.config.d.ts → Combobox.config.d.ts} +0 -0
  91. /package/types/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.d.ts +0 -0
  92. /package/types/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.d.ts +0 -0
  93. /package/types/examples/plasma_web/components/Combobox/{ComboboxNew/Combobox.config.d.ts → Combobox.config.d.ts} +0 -0
  94. /package/types/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.d.ts +0 -0
  95. /package/types/examples/plasma_web/components/Combobox/{ComboboxOld → Legacy}/Combobox.d.ts +0 -0
@@ -0,0 +1,345 @@
1
+ ---
2
+ id: combobox
3
+ title: Combobox
4
+ ---
5
+
6
+ import { PropsTable, Description, StorybookLink } from '@site/src/components';
7
+ import Tabs from '@theme/Tabs';
8
+ import TabItem from '@theme/TabItem';
9
+
10
+ # Combobox
11
+
12
+ <Description name="Combobox" />
13
+ <PropsTable name="Combobox" />
14
+
15
+ ## Использование
16
+ Обязательным параметром является только `items`. Внутри items может быть такой же вложенный массив items. Формат следующий:
17
+
18
+ ```tsx
19
+ type Items = Array<{
20
+ /**
21
+ * Значение у item
22
+ */
23
+ value: string;
24
+ /**
25
+ * Метка-подпись к item
26
+ */
27
+ label: string;
28
+ /**
29
+ * Список дочерних items.
30
+ */
31
+ items?: Array<ItemOption>;
32
+ /**
33
+ * Item не активен
34
+ */
35
+ disabled?: boolean;
36
+ /**
37
+ * Слот для контента слева
38
+ */
39
+ contentLeft?: ReactNode;
40
+ /**
41
+ * Слот для контента справа
42
+ */
43
+ contentRight?: ReactNode;
44
+ }>;
45
+ ```
46
+
47
+ Тип выбора комбобокса - одиночный или множественный зависит от типа `value` и `onChange`. В одиночном value - `string`, в множественном - `Array<string>`.\
48
+
49
+
50
+ ## Примеры
51
+
52
+ <Tabs>
53
+ <TabItem value="single" label="Single" default>
54
+ ```tsx live
55
+ import React from 'react';
56
+ import { Combobox } from '@salutejs/{{ package }}';
57
+
58
+ export function App() {
59
+ const [value, setValue] = useState('');
60
+
61
+ const items = [
62
+ {
63
+ value: 'north_america',
64
+ label: 'Северная Америка',
65
+ },
66
+ {
67
+ value: 'south_america',
68
+ label: 'Южная Америка',
69
+ items: [
70
+ {
71
+ value: 'brazil',
72
+ label: 'Бразилия',
73
+ },
74
+ {
75
+ value: 'argentina',
76
+ label: 'Аргентина',
77
+ },
78
+ ],
79
+ },
80
+ ];
81
+
82
+ return (
83
+ <div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
84
+ <div style=\{{width: '300px'}}>
85
+ <Combobox
86
+ items={items}
87
+ value={value}
88
+ onChange={setValue}
89
+ placeholder="Placeholder"
90
+ label="Label"
91
+ helperText="Helper text"
92
+ />
93
+ </div>
94
+ </div>
95
+ );
96
+ }
97
+ ```
98
+ </TabItem>
99
+ <TabItem value="multiple" label="Multiple">
100
+ ```tsx live
101
+ import React from 'react';
102
+ import { Combobox } from '@salutejs/{{ package }}';
103
+
104
+ export function App() {
105
+ const [value, setValue] = useState([]);
106
+
107
+ const items = [
108
+ {
109
+ value: 'north_america',
110
+ label: 'Северная Америка',
111
+ },
112
+ {
113
+ value: 'south_america',
114
+ label: 'Южная Америка',
115
+ items: [
116
+ {
117
+ value: 'brazil',
118
+ label: 'Бразилия',
119
+ },
120
+ {
121
+ value: 'argentina',
122
+ label: 'Аргентина',
123
+ },
124
+ ],
125
+ },
126
+ ];
127
+
128
+ return (
129
+ <div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
130
+ <div style=\{{width: '300px'}}>
131
+ <Combobox
132
+ multiple
133
+ items={items}
134
+ value={value}
135
+ onChange={setValue}
136
+ placeholder="Placeholder"
137
+ label="Label"
138
+ helperText="Helper text"
139
+ />
140
+ </div>
141
+ </div>
142
+ );
143
+ }
144
+ ```
145
+ </TabItem>
146
+ <TabItem value="predefined" label="Predefined">
147
+ Есть возможность задать значения по дефолту (главное, чтобы они находились в `items`). Также можно управлять состоянием снаружи селекта.
148
+
149
+ ```tsx live
150
+ import React from 'react';
151
+ import { Combobox, Button } from '@salutejs/{{ package }}';
152
+
153
+ export function App() {
154
+ const [multipleValue, setMultipleValue] = useState(['brazil', 'north_america']);
155
+
156
+ const items = [
157
+ {
158
+ value: 'north_america',
159
+ label: 'Северная Америка',
160
+ },
161
+ {
162
+ value: 'south_america',
163
+ label: 'Южная Америка',
164
+ items: [
165
+ {
166
+ value: 'brazil',
167
+ label: 'Бразилия',
168
+ },
169
+ {
170
+ value: 'argentina',
171
+ label: 'Аргентина',
172
+ },
173
+ ],
174
+ },
175
+ ];
176
+
177
+ return (
178
+ <div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
179
+ <div style=\{{width: '300px'}}>
180
+ <Combobox
181
+ multiple
182
+ items={items}
183
+ value={multipleValue}
184
+ onChange={setMultipleValue}
185
+ placeholder="Placeholder"
186
+ label="Label"
187
+ helperText="Helper text"
188
+ />
189
+ </div>
190
+
191
+ <Button onClick={() => setMultipleValue([])}>Очистить</Button>
192
+ </div>
193
+ );
194
+ }
195
+ ```
196
+ </TabItem>
197
+ <TabItem value="portal" label="Portal">
198
+ Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.\
199
+ Для такой реализации имеется пропс `portal`, который принимает либо `ref` либо `id` html-тега.\
200
+ Также нужно прокинуть проп `listWidth`, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.
201
+
202
+ ```tsx live
203
+ import React, { useRef } from 'react';
204
+ import { Combobox } from '@salutejs/{{ package }}';
205
+
206
+ export function App() {
207
+ const [value, setValue] = useState('');
208
+
209
+ const items = [
210
+ {
211
+ value: 'north_america',
212
+ label: 'Северная Америка',
213
+ },
214
+ {
215
+ value: 'south_america',
216
+ label: 'Южная Америка',
217
+ items: [
218
+ {
219
+ value: 'brazil',
220
+ label: 'Бразилия',
221
+ },
222
+ {
223
+ value: 'argentina',
224
+ label: 'Аргентина',
225
+ },
226
+ ],
227
+ },
228
+ ];
229
+
230
+ const ref = useRef(null)
231
+
232
+ return (
233
+ <div style=\{{ height: '300px' }} ref={ref}>
234
+ <div style=\{{width: '300px'}}>
235
+ <Combobox
236
+ items={items}
237
+ value={value}
238
+ onChange={setValue}
239
+ placeholder="Placeholder"
240
+ label="Label"
241
+ helperText="Helper text"
242
+ portal={ref}
243
+ listWidth="300px"
244
+ />
245
+ </div>
246
+ </div>
247
+ );
248
+ }
249
+ ```
250
+ </TabItem>
251
+ <TabItem value="uncontrolled" label="Uncontrolled">
252
+ `value` и `onChange` - опциональные параметры. Если вы хотите `uncontrolled` вариант компонента - их пробрасывать необязательно.
253
+
254
+ ```tsx live
255
+ import React from 'react';
256
+ import { Combobox } from '@salutejs/{{ package }}';
257
+
258
+ export function App() {
259
+ const items = [
260
+ {
261
+ value: 'north_america',
262
+ label: 'Северная Америка',
263
+ },
264
+ {
265
+ value: 'south_america',
266
+ label: 'Южная Америка',
267
+ items: [
268
+ {
269
+ value: 'brazil',
270
+ label: 'Бразилия',
271
+ },
272
+ {
273
+ value: 'argentina',
274
+ label: 'Аргентина',
275
+ },
276
+ ],
277
+ },
278
+ ];
279
+
280
+ return (
281
+ <div style=\{{ height: '300px' }}>
282
+ <div style=\{{width: '300px'}}>
283
+ <Combobox
284
+ items={items}
285
+ placeholder="Placeholder"
286
+ label="Label"
287
+ helperText="Helper text"
288
+ />
289
+ </div>
290
+ </div>
291
+ );
292
+ }
293
+ ```
294
+ </TabItem>
295
+ <TabItem value="alwaysOpened" label="Always opened">
296
+ Свойство alwaysOpened позволяет отображать Combobox всегда открытым. При этом closeAfterSelect игнорируется.
297
+
298
+ ```tsx live
299
+ import React, { useState } from 'react';
300
+ import { Combobox, Button } from '@salutejs/{{ package }}';
301
+
302
+ export function App() {
303
+ const items = [
304
+ {
305
+ value: 'north_america',
306
+ label: 'Северная Америка',
307
+ },
308
+ {
309
+ value: 'south_america',
310
+ label: 'Южная Америка',
311
+ items: [
312
+ {
313
+ value: 'brazil',
314
+ label: 'Бразилия',
315
+ },
316
+ {
317
+ value: 'argentina',
318
+ label: 'Аргентина',
319
+ },
320
+ ],
321
+ },
322
+ ];
323
+
324
+ return (
325
+ <div style=\{{ height: '300px' }}>
326
+ <div style=\{{width: '300px'}}>
327
+ <Button text={ alwaysOpened ? 'По умолчанию' : 'Всегда открыт' } onClick={() => setAlwaysOpened(!alwaysOpened)} style={{ marginBottom: '1rem' }} />
328
+ <Combobox
329
+ items={items}
330
+ placeholder="Placeholder"
331
+ label="Label"
332
+ helperText="Helper text"
333
+ alwaysOpened={alwaysOpened}
334
+ />
335
+ </div>
336
+ </div>
337
+ );
338
+ }
339
+ ```
340
+ </TabItem>
341
+ </Tabs>
342
+
343
+ ## Клавиатурная навигация
344
+
345
+ Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) и частично [TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.config = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
- var _Combobox = /*#__PURE__*/require("../../../../../components/Combobox");
8
+ var _Combobox = /*#__PURE__*/require("../../../../components/Combobox");
9
9
  var config = exports.config = {
10
10
  defaults: {
11
11
  view: 'default',
@@ -17,7 +17,7 @@ var config = exports.config = {
17
17
  "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;"], _Combobox.comboboxNewTokens.textFieldColor, _Combobox.comboboxNewTokens.textFieldBackgroundColor, _Combobox.comboboxNewTokens.textFieldBackgroundColorFocus, _Combobox.comboboxNewTokens.textFieldCaretColor, _Combobox.comboboxNewTokens.textFieldPlaceholderColor, _Combobox.comboboxNewTokens.textFieldTextBeforeColor, _Combobox.comboboxNewTokens.textFieldTextAfterColor, _Combobox.comboboxNewTokens.textFieldLabelColor, _Combobox.comboboxNewTokens.textFieldLeftHelperColor, _Combobox.comboboxNewTokens.textFieldFocusColor, _Combobox.comboboxNewTokens.textFieldChipCloseIconColor, _Combobox.comboboxNewTokens.textFieldChipColor, _Combobox.comboboxNewTokens.textFieldChipBackground, _Combobox.comboboxNewTokens.textFieldChipColorHover, _Combobox.comboboxNewTokens.textFieldChipBackgroundHover, _Combobox.comboboxNewTokens.textFieldChipColorActive, _Combobox.comboboxNewTokens.textFieldChipBackgroundActive, _Combobox.comboboxNewTokens.textFieldChipBackgroundReadOnly, _Combobox.comboboxNewTokens.textFieldChipColorReadOnly, _Combobox.comboboxNewTokens.textFieldChipBackgroundReadOnlyHover, _Combobox.comboboxNewTokens.textFieldChipColorReadOnlyHover, _Combobox.comboboxNewTokens.textFieldChipOpacityReadonly),
18
18
  positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;"], _Combobox.comboboxNewTokens.textFieldColor, _Combobox.comboboxNewTokens.textFieldBackgroundColor, _Combobox.comboboxNewTokens.textFieldBackgroundColorFocus, _Combobox.comboboxNewTokens.textFieldCaretColor, _Combobox.comboboxNewTokens.textFieldPlaceholderColor, _Combobox.comboboxNewTokens.textFieldTextBeforeColor, _Combobox.comboboxNewTokens.textFieldTextAfterColor, _Combobox.comboboxNewTokens.textFieldLabelColor, _Combobox.comboboxNewTokens.textFieldLeftHelperColor, _Combobox.comboboxNewTokens.textFieldFocusColor, _Combobox.comboboxNewTokens.textFieldChipCloseIconColor, _Combobox.comboboxNewTokens.textFieldChipColor, _Combobox.comboboxNewTokens.textFieldChipBackground, _Combobox.comboboxNewTokens.textFieldChipColorHover, _Combobox.comboboxNewTokens.textFieldChipBackgroundHover, _Combobox.comboboxNewTokens.textFieldChipColorActive, _Combobox.comboboxNewTokens.textFieldChipBackgroundActive, _Combobox.comboboxNewTokens.textFieldChipBackgroundReadOnly, _Combobox.comboboxNewTokens.textFieldChipColorReadOnly, _Combobox.comboboxNewTokens.textFieldChipBackgroundReadOnlyHover, _Combobox.comboboxNewTokens.textFieldChipColorReadOnlyHover, _Combobox.comboboxNewTokens.textFieldChipOpacityReadonly),
19
19
  warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;"], _Combobox.comboboxNewTokens.textFieldColor, _Combobox.comboboxNewTokens.textFieldBackgroundColor, _Combobox.comboboxNewTokens.textFieldBackgroundColorFocus, _Combobox.comboboxNewTokens.textFieldCaretColor, _Combobox.comboboxNewTokens.textFieldPlaceholderColor, _Combobox.comboboxNewTokens.textFieldTextBeforeColor, _Combobox.comboboxNewTokens.textFieldTextAfterColor, _Combobox.comboboxNewTokens.textFieldLabelColor, _Combobox.comboboxNewTokens.textFieldLeftHelperColor, _Combobox.comboboxNewTokens.textFieldFocusColor, _Combobox.comboboxNewTokens.textFieldChipCloseIconColor, _Combobox.comboboxNewTokens.textFieldChipColor, _Combobox.comboboxNewTokens.textFieldChipBackground, _Combobox.comboboxNewTokens.textFieldChipColorHover, _Combobox.comboboxNewTokens.textFieldChipBackgroundHover, _Combobox.comboboxNewTokens.textFieldChipColorActive, _Combobox.comboboxNewTokens.textFieldChipBackgroundActive, _Combobox.comboboxNewTokens.textFieldChipBackgroundReadOnly, _Combobox.comboboxNewTokens.textFieldChipColorReadOnly, _Combobox.comboboxNewTokens.textFieldChipBackgroundReadOnlyHover, _Combobox.comboboxNewTokens.textFieldChipColorReadOnlyHover, _Combobox.comboboxNewTokens.textFieldChipOpacityReadonly),
20
- negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;"], _Combobox.comboboxNewTokens.textFieldColor, _Combobox.comboboxNewTokens.textFieldBackgroundColor, _Combobox.comboboxNewTokens.textFieldBackgroundColorFocus, _Combobox.comboboxNewTokens.textFieldCaretColor, _Combobox.comboboxNewTokens.textFieldPlaceholderColor, _Combobox.comboboxNewTokens.textFieldTextBeforeColor, _Combobox.comboboxNewTokens.textFieldTextAfterColor, _Combobox.comboboxNewTokens.textFieldLabelColor, _Combobox.comboboxNewTokens.textFieldLeftHelperColor, _Combobox.comboboxNewTokens.textFieldFocusColor, _Combobox.comboboxNewTokens.textFieldChipCloseIconColor, _Combobox.comboboxNewTokens.textFieldChipColor, _Combobox.comboboxNewTokens.textFieldChipBackground, _Combobox.comboboxNewTokens.textFieldChipColorHover, _Combobox.comboboxNewTokens.textFieldChipBackgroundHover, _Combobox.comboboxNewTokens.textFieldChipColorActive, _Combobox.comboboxNewTokens.textFieldChipBackgroundActive, _Combobox.comboboxNewTokens.textFieldChipBackgroundReadOnly, _Combobox.comboboxNewTokens.textFieldChipColorReadOnly, _Combobox.comboboxNewTokens.textFieldChipBackgroundReadOnlyHover, _Combobox.comboboxNewTokens.textFieldChipColorReadOnlyHover, _Combobox.comboboxNewTokens.textFieldChipOpacityReadonly)
20
+ negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-primary);$", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;"], _Combobox.comboboxNewTokens.textFieldColor, _Combobox.comboboxNewTokens.textFieldBackgroundColor, _Combobox.comboboxNewTokens.textFieldBackgroundColorFocus, _Combobox.comboboxNewTokens.textFieldCaretColor, _Combobox.comboboxNewTokens.textFieldPlaceholderColor, _Combobox.comboboxNewTokens.textFieldTextBeforeColor, _Combobox.comboboxNewTokens.textFieldTextAfterColor, _Combobox.comboboxNewTokens.textFieldLabelColor, _Combobox.comboboxNewTokens.textFieldLeftHelperColor, _Combobox.comboboxNewTokens.textFieldFocusColor, _Combobox.comboboxNewTokens.textFieldChipCloseIconColor, _Combobox.comboboxNewTokens.textFieldChipColor, _Combobox.comboboxNewTokens.textFieldChipBackground, _Combobox.comboboxNewTokens.textFieldChipColorHover, _Combobox.comboboxNewTokens.textFieldChipBackgroundHover, _Combobox.comboboxNewTokens.textFieldChipColorActive, _Combobox.comboboxNewTokens.textFieldChipBackgroundActive, _Combobox.comboboxNewTokens.textFieldChipBackgroundReadOnly, _Combobox.comboboxNewTokens.textFieldChipColorReadOnly, _Combobox.comboboxNewTokens.textFieldChipBackgroundReadOnlyHover, _Combobox.comboboxNewTokens.textFieldChipColorReadOnlyHover, _Combobox.comboboxNewTokens.textFieldChipOpacityReadonly)
21
21
  },
22
22
  size: {
23
23
  l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1rem;", ":0.125rem;", ":0.875rem;", ":1.5rem;", ":1rem 1rem 1rem 0.875rem;", ":0.75rem 1rem 0.75rem 0.875rem;", ":0.75rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.5rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.25rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;"], _Combobox.comboboxNewTokens.textFieldHeight, _Combobox.comboboxNewTokens.textFieldPadding, _Combobox.comboboxNewTokens.textFieldPaddingWithChips, _Combobox.comboboxNewTokens.textFieldBorderRadius, _Combobox.comboboxNewTokens.textFieldLeftContentMargin, _Combobox.comboboxNewTokens.textFieldRightContentMargin, _Combobox.comboboxNewTokens.textFieldTextBeforeMargin, _Combobox.comboboxNewTokens.textFieldTextAfterMargin, _Combobox.comboboxNewTokens.textFieldFontFamily, _Combobox.comboboxNewTokens.textFieldFontSize, _Combobox.comboboxNewTokens.textFieldFontStyle, _Combobox.comboboxNewTokens.textFieldFontWeight, _Combobox.comboboxNewTokens.textFieldLetterSpacing, _Combobox.comboboxNewTokens.textFieldLineHeight, _Combobox.comboboxNewTokens.textFieldLabelOffset, _Combobox.comboboxNewTokens.textFieldLabelFontFamily, _Combobox.comboboxNewTokens.textFieldLabelFontSize, _Combobox.comboboxNewTokens.textFieldLabelFontStyle, _Combobox.comboboxNewTokens.textFieldLabelFontWeight, _Combobox.comboboxNewTokens.textFieldLabelLetterSpacing, _Combobox.comboboxNewTokens.textFieldLabelLineHeight, _Combobox.comboboxNewTokens.textFieldLeftHelperOffset, _Combobox.comboboxNewTokens.textFieldLeftHelperFontFamily, _Combobox.comboboxNewTokens.textFieldLeftHelperFontSize, _Combobox.comboboxNewTokens.textFieldLeftHelperFontStyle, _Combobox.comboboxNewTokens.textFieldLeftHelperFontWeight, _Combobox.comboboxNewTokens.textFieldLeftHelperLetterSpacing, _Combobox.comboboxNewTokens.textFieldLeftHelperLineHeight, _Combobox.comboboxNewTokens.textFieldLabelInnerPadding, _Combobox.comboboxNewTokens.textFieldContentLabelInnerPadding, _Combobox.comboboxNewTokens.textFieldChipGap, _Combobox.comboboxNewTokens.textFieldChipBorderRadius, _Combobox.comboboxNewTokens.textFieldChipWidth, _Combobox.comboboxNewTokens.textFieldChipHeight, _Combobox.comboboxNewTokens.textFieldChipPaddingRight, _Combobox.comboboxNewTokens.textFieldChipPaddingLeft, _Combobox.comboboxNewTokens.textFieldChipClearContentMarginLeft, _Combobox.comboboxNewTokens.textFieldChipClearContentMarginRight, _Combobox.comboboxNewTokens.textFieldChipCloseIconSize, _Combobox.comboboxNewTokens.textFieldChipFontFamily, _Combobox.comboboxNewTokens.textFieldChipFontSize, _Combobox.comboboxNewTokens.textFieldChipFontStyle, _Combobox.comboboxNewTokens.textFieldChipFontWeight, _Combobox.comboboxNewTokens.textFieldChipLetterSpacing, _Combobox.comboboxNewTokens.textFieldChipLineHeight, _Combobox.comboboxNewTokens.emptyStatePadding, _Combobox.comboboxNewTokens.padding, _Combobox.comboboxNewTokens.borderRadius, _Combobox.comboboxNewTokens.itemHeight, _Combobox.comboboxNewTokens.itemPadding, _Combobox.comboboxNewTokens.itemPaddingTight, _Combobox.comboboxNewTokens.itemBorderRadius, _Combobox.comboboxNewTokens.itemIconMargin, _Combobox.comboboxNewTokens.itemIconSize, _Combobox.comboboxNewTokens.itemIconSizeTight, _Combobox.comboboxNewTokens.cellPadding, _Combobox.comboboxNewTokens.cellPaddingLeftContent, _Combobox.comboboxNewTokens.cellPaddingContent, _Combobox.comboboxNewTokens.cellPaddingRightContent, _Combobox.comboboxNewTokens.cellTextboxGap, _Combobox.comboboxNewTokens.cellGap, _Combobox.comboboxNewTokens.cellTitleFontFamily, _Combobox.comboboxNewTokens.cellTitleFontSize, _Combobox.comboboxNewTokens.cellTitleFontStyle, _Combobox.comboboxNewTokens.cellTitleFontWeight, _Combobox.comboboxNewTokens.cellTitleLetterSpacing, _Combobox.comboboxNewTokens.cellTitleLineHeight, _Combobox.comboboxNewTokens.fontFamily, _Combobox.comboboxNewTokens.fontSize, _Combobox.comboboxNewTokens.fontStyle, _Combobox.comboboxNewTokens.fontWeight, _Combobox.comboboxNewTokens.fontLetterSpacing, _Combobox.comboboxNewTokens.fontLineHeight, _Combobox.comboboxNewTokens.checkboxTriggerSize, _Combobox.comboboxNewTokens.checkboxTriggerSizeTight, _Combobox.comboboxNewTokens.checkboxTriggerBorderRadius, _Combobox.comboboxNewTokens.checkboxTriggerBorderRadiusTight, _Combobox.comboboxNewTokens.checkboxFillColor, _Combobox.comboboxNewTokens.checkboxIconColor, _Combobox.comboboxNewTokens.checkboxTriggerBorderColor, _Combobox.comboboxNewTokens.indicatorSize),
@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.Combobox = void 0;
7
- var _engines = /*#__PURE__*/require("../../../../../engines");
8
- var _ = /*#__PURE__*/require("../../../../..");
7
+ var _engines = /*#__PURE__*/require("../../../../engines");
8
+ var _ = /*#__PURE__*/require("../../../..");
9
9
  var _Combobox = /*#__PURE__*/require("./Combobox.config");
10
10
  var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_.comboboxNewConfig, _Combobox.config);
11
11
  var Combobox = exports.Combobox = /*#__PURE__*/(0, _engines.component)(mergedConfig);