@rescui/chip-list 0.14.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14 → 0.14.3-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43

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 (15) hide show
  1. package/lib/chip-list-multi.js +117 -31
  2. package/lib/chip-list.js +131 -31
  3. package/lib/index.css +51 -46
  4. package/lib/parts/chip-list-base.d.ts +1 -1
  5. package/lib/parts/chip-list-base.js +198 -60
  6. package/lib/parts/chip-list-context.js +4 -2
  7. package/lib/parts/chip-list.p.module.css.js +24 -24
  8. package/lib/parts/chip.js +369 -101
  9. package/lib/parts/use-items-ids.js +114 -65
  10. package/lib/parts/use-roving-tab-index.js +62 -31
  11. package/lib/parts/use-safe-id.d.ts +3 -1
  12. package/lib/parts/use-safe-id.js +6 -11
  13. package/lib/public-api.p.css +5 -0
  14. package/lib/public-api.pcss +5 -0
  15. package/package.json +6 -5
package/lib/chip-list-multi.js CHANGED
@@ -1,5 +1,7 @@
1
1
  "use client";
2
- import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
2
+ import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
3
+ import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
4
+ import { c } from 'react-compiler-runtime';
3
5
  import React from 'react';
4
6
  import PropTypes from 'prop-types';
5
7
  import { ChipListBase } from './parts/chip-list-base.js';
@@ -7,39 +9,123 @@ import { useSafeId } from './parts/use-safe-id.js';
7
9
 
8
10
  const compareValuesDefault = (activeValues, value) => Array.isArray(activeValues) && _includesInstanceProperty(activeValues).call(activeValues, value);
9
11
 
10
- function ChipListMulti(_ref) {
11
- let {
12
- onChange,
13
- compareValues = compareValuesDefault,
14
- value,
15
- children,
16
- size = 'm',
17
- sparse = false,
18
- compact = false,
19
- disabled = false,
20
- mode = 'classic',
21
- alignItems = 'left',
22
- name,
23
- ...props
24
- } = _ref;
12
+ function ChipListMulti(t0) {
13
+ const $ = c(29);
14
+ let children;
15
+ let name;
16
+ let onChange;
17
+ let props;
18
+ let t1;
19
+ let t2;
20
+ let t3;
21
+ let t4;
22
+ let t5;
23
+ let t6;
24
+ let t7;
25
+ let value;
26
+
27
+ if ($[0] !== t0) {
28
+ ({
29
+ onChange,
30
+ compareValues: t1,
31
+ value,
32
+ children,
33
+ size: t2,
34
+ sparse: t3,
35
+ compact: t4,
36
+ disabled: t5,
37
+ mode: t6,
38
+ alignItems: t7,
39
+ name,
40
+ ...props
41
+ } = t0);
42
+ $[0] = t0;
43
+ $[1] = children;
44
+ $[2] = name;
45
+ $[3] = onChange;
46
+ $[4] = props;
47
+ $[5] = t1;
48
+ $[6] = t2;
49
+ $[7] = t3;
50
+ $[8] = t4;
51
+ $[9] = t5;
52
+ $[10] = t6;
53
+ $[11] = t7;
54
+ $[12] = value;
55
+ } else {
56
+ children = $[1];
57
+ name = $[2];
58
+ onChange = $[3];
59
+ props = $[4];
60
+ t1 = $[5];
61
+ t2 = $[6];
62
+ t3 = $[7];
63
+ t4 = $[8];
64
+ t5 = $[9];
65
+ t6 = $[10];
66
+ t7 = $[11];
67
+ value = $[12];
68
+ }
69
+
70
+ const compareValues = t1 === undefined ? compareValuesDefault : t1;
71
+ const size = t2 === undefined ? "m" : t2;
72
+ const sparse = t3 === undefined ? false : t3;
73
+ const compact = t4 === undefined ? false : t4;
74
+ const disabled = t5 === undefined ? false : t5;
75
+ const mode = t6 === undefined ? "classic" : t6;
76
+ const alignItems = t7 === undefined ? "left" : t7;
25
77
  const uniqueId = useSafeId();
26
- return /*#__PURE__*/React.createElement(ChipListBase, {
27
- compareValues: compareValues,
28
- value: value,
29
- onChange: changedValue => {
78
+ let t8;
79
+
80
+ if ($[13] !== onChange || $[14] !== value) {
81
+ t8 = changedValue => {
30
82
  const newValues = _includesInstanceProperty(value).call(value, changedValue) ? value.filter(v => v !== changedValue) : [...value, changedValue];
31
83
  onChange(newValues);
32
- },
33
- size: size,
34
- sparse: sparse,
35
- compact: compact,
36
- disabled: disabled,
37
- mode: mode,
38
- alignItems: alignItems,
39
- ...props,
40
- pattern: "group",
41
- name: name ?? `rs-chip-list-multi-${uniqueId}`
42
- }, children);
84
+ };
85
+
86
+ $[13] = onChange;
87
+ $[14] = value;
88
+ $[15] = t8;
89
+ } else {
90
+ t8 = $[15];
91
+ }
92
+
93
+ const t9 = name ?? `rs-chip-list-multi-${uniqueId}`;
94
+ let t10;
95
+
96
+ if ($[16] !== alignItems || $[17] !== children || $[18] !== compact || $[19] !== compareValues || $[20] !== disabled || $[21] !== mode || $[22] !== props || $[23] !== size || $[24] !== sparse || $[25] !== t8 || $[26] !== t9 || $[27] !== value) {
97
+ t10 = /*#__PURE__*/React.createElement(ChipListBase, _extends({
98
+ compareValues: compareValues,
99
+ value: value,
100
+ onChange: t8,
101
+ size: size,
102
+ sparse: sparse,
103
+ compact: compact,
104
+ disabled: disabled,
105
+ mode: mode,
106
+ alignItems: alignItems
107
+ }, props, {
108
+ pattern: "group",
109
+ name: t9
110
+ }), children);
111
+ $[16] = alignItems;
112
+ $[17] = children;
113
+ $[18] = compact;
114
+ $[19] = compareValues;
115
+ $[20] = disabled;
116
+ $[21] = mode;
117
+ $[22] = props;
118
+ $[23] = size;
119
+ $[24] = sparse;
120
+ $[25] = t8;
121
+ $[26] = t9;
122
+ $[27] = value;
123
+ $[28] = t10;
124
+ } else {
125
+ t10 = $[28];
126
+ }
127
+
128
+ return t10;
43
129
  }
44
130
 
45
131
  ChipListMulti.displayName = 'ChipListMulti';
package/lib/chip-list.js CHANGED
@@ -1,5 +1,7 @@
1
1
  "use client";
2
- import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
2
+ import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
3
+ import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
4
+ import { c } from 'react-compiler-runtime';
3
5
  import React from 'react';
4
6
  import PropTypes from 'prop-types';
5
7
  import { ChipListBase } from './parts/chip-list-base.js';
@@ -7,39 +9,137 @@ import { useSafeId } from './parts/use-safe-id.js';
7
9
 
8
10
  const compareValuesDefault = (activeValue, value) => activeValue === value;
9
11
 
10
- function ChipList(_ref) {
12
+ function ChipList(t0) {
11
13
  var _context;
12
14
 
13
- let {
14
- children,
15
- compareValues = compareValuesDefault,
16
- value,
17
- onChange,
18
- size = 'm',
19
- sparse = false,
20
- compact = false,
21
- disabled = false,
22
- mode = 'classic',
23
- alignItems = 'left',
24
- pattern = 'auto',
25
- name,
26
- ...props
27
- } = _ref;
15
+ const $ = c(32);
16
+ let children;
17
+ let name;
18
+ let onChange;
19
+ let props;
20
+ let t1;
21
+ let t2;
22
+ let t3;
23
+ let t4;
24
+ let t5;
25
+ let t6;
26
+ let t7;
27
+ let t8;
28
+ let value;
29
+
30
+ if ($[0] !== t0) {
31
+ ({
32
+ children,
33
+ compareValues: t1,
34
+ value,
35
+ onChange,
36
+ size: t2,
37
+ sparse: t3,
38
+ compact: t4,
39
+ disabled: t5,
40
+ mode: t6,
41
+ alignItems: t7,
42
+ pattern: t8,
43
+ name,
44
+ ...props
45
+ } = t0);
46
+ $[0] = t0;
47
+ $[1] = children;
48
+ $[2] = name;
49
+ $[3] = onChange;
50
+ $[4] = props;
51
+ $[5] = t1;
52
+ $[6] = t2;
53
+ $[7] = t3;
54
+ $[8] = t4;
55
+ $[9] = t5;
56
+ $[10] = t6;
57
+ $[11] = t7;
58
+ $[12] = t8;
59
+ $[13] = value;
60
+ } else {
61
+ children = $[1];
62
+ name = $[2];
63
+ onChange = $[3];
64
+ props = $[4];
65
+ t1 = $[5];
66
+ t2 = $[6];
67
+ t3 = $[7];
68
+ t4 = $[8];
69
+ t5 = $[9];
70
+ t6 = $[10];
71
+ t7 = $[11];
72
+ t8 = $[12];
73
+ value = $[13];
74
+ }
75
+
76
+ const compareValues = t1 === undefined ? compareValuesDefault : t1;
77
+ const size = t2 === undefined ? "m" : t2;
78
+ const sparse = t3 === undefined ? false : t3;
79
+ const compact = t4 === undefined ? false : t4;
80
+ const disabled = t5 === undefined ? false : t5;
81
+ const mode = t6 === undefined ? "classic" : t6;
82
+ const alignItems = t7 === undefined ? "left" : t7;
83
+ const pattern = t8 === undefined ? "auto" : t8;
28
84
  const uniqueId = useSafeId();
29
- return /*#__PURE__*/React.createElement(ChipListBase, {
30
- compareValues: (activeValues, compareVal) => compareValues(activeValues[0], compareVal),
31
- onChange: onChange,
32
- value: [value],
33
- size: size,
34
- sparse: sparse,
35
- compact: compact,
36
- disabled: disabled,
37
- mode: mode,
38
- alignItems: alignItems,
39
- pattern: _includesInstanceProperty(_context = ['auto', 'radiogroup', 'navigation', 'tablist']).call(_context, pattern) ? pattern : 'auto',
40
- name: name ?? `rs-chip-list-${uniqueId}`,
41
- ...props
42
- }, children);
85
+ let t9;
86
+
87
+ if ($[14] !== compareValues) {
88
+ t9 = (activeValues, compareVal) => compareValues(activeValues[0], compareVal);
89
+
90
+ $[14] = compareValues;
91
+ $[15] = t9;
92
+ } else {
93
+ t9 = $[15];
94
+ }
95
+
96
+ let t10;
97
+
98
+ if ($[16] !== value) {
99
+ t10 = [value];
100
+ $[16] = value;
101
+ $[17] = t10;
102
+ } else {
103
+ t10 = $[17];
104
+ }
105
+
106
+ const t11 = _includesInstanceProperty(_context = ["auto", "radiogroup", "navigation", "tablist"]).call(_context, pattern) ? pattern : "auto";
107
+ const t12 = name ?? `rs-chip-list-${uniqueId}`;
108
+ let t13;
109
+
110
+ if ($[18] !== alignItems || $[19] !== children || $[20] !== compact || $[21] !== disabled || $[22] !== mode || $[23] !== onChange || $[24] !== props || $[25] !== size || $[26] !== sparse || $[27] !== t10 || $[28] !== t11 || $[29] !== t12 || $[30] !== t9) {
111
+ t13 = /*#__PURE__*/React.createElement(ChipListBase, _extends({
112
+ compareValues: t9,
113
+ onChange: onChange,
114
+ value: t10,
115
+ size: size,
116
+ sparse: sparse,
117
+ compact: compact,
118
+ disabled: disabled,
119
+ mode: mode,
120
+ alignItems: alignItems,
121
+ pattern: t11,
122
+ name: t12
123
+ }, props), children);
124
+ $[18] = alignItems;
125
+ $[19] = children;
126
+ $[20] = compact;
127
+ $[21] = disabled;
128
+ $[22] = mode;
129
+ $[23] = onChange;
130
+ $[24] = props;
131
+ $[25] = size;
132
+ $[26] = sparse;
133
+ $[27] = t10;
134
+ $[28] = t11;
135
+ $[29] = t12;
136
+ $[30] = t9;
137
+ $[31] = t13;
138
+ } else {
139
+ t13 = $[31];
140
+ }
141
+
142
+ return t13;
43
143
  }
44
144
 
45
145
  ChipList.displayName = 'ChipList';
package/lib/index.css CHANGED
@@ -1,19 +1,24 @@
1
- ._light_1m62at7_8{
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
6
+ ._light_1bxxkar_8{
2
7
  --rs-theme-dark:0;
3
8
  }
4
- ._dark_1m62at7_11{
9
+ ._dark_1bxxkar_11{
5
10
  --rs-theme-dark:1;
6
11
  }
7
- ._alignLeft_1m62at7_15{
12
+ ._alignLeft_1bxxkar_15{
8
13
  --_rs-cl-align:left;
9
14
  }
10
- ._alignCenter_1m62at7_18{
15
+ ._alignCenter_1bxxkar_18{
11
16
  --_rs-cl-align:center;
12
17
  }
13
- ._alignRight_1m62at7_21{
18
+ ._alignRight_1bxxkar_21{
14
19
  --_rs-cl-align:right;
15
20
  }
16
- ._sizeXs_1m62at7_25{
21
+ ._sizeXs_1bxxkar_25{
17
22
  --_rs-cl-chip-base-border-radius:4px;
18
23
  --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
19
24
  --_rs-cl-chip-vertical-padding:2px;
@@ -27,7 +32,7 @@
27
32
  --_rs-cl-compact-horizontal-gap:4px;
28
33
  --_rs-cl-sparse-horizontal-gap:12px;
29
34
  }
30
- ._sizeXs_1m62at7_25 [data-rs-internal='chip-list__chip']{
35
+ ._sizeXs_1bxxkar_25 [data-rs-internal='chip-list__chip']{
31
36
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
32
37
  --_rs-typography-text-transform:initial;
33
38
  --_rs-typography-font-variant-numeric:initial;
@@ -62,7 +67,7 @@
62
67
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
63
68
  --_rs-typography-link-border-bottom-width-from-text:1px;
64
69
  }
65
- ._sizeS_1m62at7_28{
70
+ ._sizeS_1bxxkar_28{
66
71
  --_rs-cl-chip-base-border-radius:16px;
67
72
  --_rs-cl-chip-compact-border-radius:4px;
68
73
  --_rs-cl-chip-vertical-padding:6px;
@@ -76,7 +81,7 @@
76
81
  --_rs-cl-compact-horizontal-gap:6px;
77
82
  --_rs-cl-sparse-horizontal-gap:12px;
78
83
  }
79
- ._sizeS_1m62at7_28 [data-rs-internal='chip-list__chip']{
84
+ ._sizeS_1bxxkar_28 [data-rs-internal='chip-list__chip']{
80
85
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
81
86
  --_rs-typography-text-transform:initial;
82
87
  --_rs-typography-font-variant-numeric:initial;
@@ -111,7 +116,7 @@
111
116
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
112
117
  --_rs-typography-link-border-bottom-width-from-text:1px;
113
118
  }
114
- ._sizeM_1m62at7_31{
119
+ ._sizeM_1bxxkar_31{
115
120
  --_rs-cl-chip-base-border-radius:20px;
116
121
  --_rs-cl-chip-compact-border-radius:8px;
117
122
  --_rs-cl-chip-vertical-padding:8px;
@@ -125,7 +130,7 @@
125
130
  --_rs-cl-compact-horizontal-gap:6px;
126
131
  --_rs-cl-sparse-horizontal-gap:16px;
127
132
  }
128
- ._sizeM_1m62at7_31 [data-rs-internal='chip-list__chip']{
133
+ ._sizeM_1bxxkar_31 [data-rs-internal='chip-list__chip']{
129
134
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
130
135
  --_rs-typography-text-transform:initial;
131
136
  --_rs-typography-font-variant-numeric:initial;
@@ -164,11 +169,11 @@
164
169
  --_rs-typography-link-border-bottom-width-from-text:1px;
165
170
  }
166
171
  @media screen and (max-width: 640px){
167
- ._sizeM_1m62at7_31 [data-rs-internal='chip-list__chip']{
172
+ ._sizeM_1bxxkar_31 [data-rs-internal='chip-list__chip']{
168
173
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
169
174
  }
170
175
  }
171
- ._sizeL_1m62at7_34{
176
+ ._sizeL_1bxxkar_34{
172
177
  --_rs-cl-chip-base-border-radius:26px;
173
178
  --_rs-cl-chip-compact-border-radius:12px;
174
179
  --_rs-cl-chip-vertical-padding:12px;
@@ -183,11 +188,11 @@
183
188
  --_rs-cl-sparse-horizontal-gap:16px;
184
189
  }
185
190
  @media screen and (max-width: 640px){
186
- ._sizeL_1m62at7_34{
191
+ ._sizeL_1bxxkar_34{
187
192
  --_rs-cl-vertical-gap:12px;
188
193
  }
189
194
  }
190
- ._sizeL_1m62at7_34 [data-rs-internal='chip-list__chip']{
195
+ ._sizeL_1bxxkar_34 [data-rs-internal='chip-list__chip']{
191
196
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
192
197
  --_rs-typography-text-transform:initial;
193
198
  --_rs-typography-font-variant-numeric:initial;
@@ -226,34 +231,34 @@
226
231
  --_rs-typography-link-border-bottom-width-from-text:1px;
227
232
  }
228
233
  @media screen and (max-width: 640px){
229
- ._sizeL_1m62at7_34 [data-rs-internal='chip-list__chip']{
234
+ ._sizeL_1bxxkar_34 [data-rs-internal='chip-list__chip']{
230
235
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
231
236
  }
232
237
  }
233
- ._innerOffsetL_1m62at7_38{
238
+ ._innerOffsetL_1bxxkar_38{
234
239
  --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-sparse-horizontal-gap);
235
240
  }
236
241
  @media screen and (max-width: 640px){
237
- ._innerOffsetL_1m62at7_38{
242
+ ._innerOffsetL_1bxxkar_38{
238
243
  --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
239
244
  }
240
245
  }
241
- ._innerOffsetM_1m62at7_41{
246
+ ._innerOffsetM_1bxxkar_41{
242
247
  --_rs-cl-horizontal-gap-from-sparse:initial;
243
248
  }
244
- ._classic_1m62at7_45{
249
+ ._classic_1bxxkar_45{
245
250
  --_rs-cl-chip-active-border-color:var(--_rs-color-primary);
246
251
  --_rs-cl-chip-selected-border-color:var(--_rs-color-primary);
247
252
  --_rs-cl-chip-hover-background:var(--_rs-color-primary-t-fog);
248
253
  --_rs-cl-chip-active-background:var(--_rs-color-primary-t-fog);
249
254
  }
250
- ._rock_1m62at7_48{
255
+ ._rock_1bxxkar_48{
251
256
  --_rs-cl-chip-active-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
252
257
  --_rs-cl-chip-selected-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
253
258
  --_rs-cl-chip-hover-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
254
259
  --_rs-cl-chip-active-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
255
260
  }
256
- ._compact_1m62at7_52{
261
+ ._compact_1bxxkar_52{
257
262
  --_rs-cl-chip-border-radius-from-compact:var(
258
263
  --_rs-cl-chip-compact-border-radius
259
264
  );
@@ -262,7 +267,7 @@
262
267
  );
263
268
  --_rs-cl-horizontal-gap-from-compact:var(--_rs-cl-compact-horizontal-gap);
264
269
  }
265
- ._main_1m62at7_56{
270
+ ._main_1bxxkar_56{
266
271
  --_rs-theme-dark:var(
267
272
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
268
273
  var(--rs-theme-dark, 0)
@@ -272,7 +277,7 @@
272
277
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
273
278
  }
274
279
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
275
- ._main_1m62at7_56{
280
+ ._main_1bxxkar_56{
276
281
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
277
282
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
278
283
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -281,7 +286,7 @@
281
286
  }
282
287
  }
283
288
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
284
- ._main_1m62at7_56{
289
+ ._main_1bxxkar_56{
285
290
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
286
291
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
287
292
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -289,7 +294,7 @@
289
294
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
290
295
  }
291
296
  }
292
- ._main_1m62at7_56 {
297
+ ._main_1bxxkar_56 {
293
298
  --_rs-cl-chip-border-radius:var(
294
299
  --_rs-cl-chip-border-radius-from-compact,
295
300
  var(--_rs-cl-chip-base-border-radius)
@@ -303,7 +308,7 @@
303
308
  var(--_rs-cl-horizontal-gap-from-sparse, var(--_rs-cl-base-horizontal-gap))
304
309
  );
305
310
  }
306
- ._chipsContainer_1m62at7_62{
311
+ ._chipsContainer_1bxxkar_62{
307
312
  position:relative;
308
313
 
309
314
  display:flex;
@@ -312,17 +317,17 @@
312
317
 
313
318
  gap:var(--_rs-cl-vertical-gap) var(--_rs-cl-horizontal-gap);
314
319
  }
315
- ._alignIconLeft_1m62at7_72{
320
+ ._alignIconLeft_1bxxkar_72{
316
321
  --_rs-cl-chip-icon-flex-direction:row;
317
322
  --_rs-cl-chip-icon-position-multiplier-left:1;
318
323
  --_rs-cl-chip-icon-position-multiplier-right:0;
319
324
  }
320
- ._alignIconRight_1m62at7_75{
325
+ ._alignIconRight_1bxxkar_75{
321
326
  --_rs-cl-chip-icon-flex-direction:row-reverse;
322
327
  --_rs-cl-chip-icon-position-multiplier-left:0;
323
328
  --_rs-cl-chip-icon-position-multiplier-right:1;
324
329
  }
325
- ._chip_1m62at7_62{
330
+ ._chip_1bxxkar_62{
326
331
  letter-spacing:var(
327
332
  --rs-text-base-letter-spacing,
328
333
  var(--_rs-typography-letter-spacing)
@@ -374,25 +379,25 @@
374
379
  -moz-osx-font-smoothing:inherit;
375
380
  -webkit-appearance:none;
376
381
  }
377
- ._chip_1m62at7_62::-moz-focus-inner{
382
+ ._chip_1bxxkar_62::-moz-focus-inner{
378
383
  padding:0;
379
384
 
380
385
  border:none;
381
386
  }
382
- ._chip_1m62at7_62:hover,
383
- ._chip_1m62at7_62:focus,
384
- ._chip_1m62at7_62:active{
387
+ ._chip_1bxxkar_62:hover,
388
+ ._chip_1bxxkar_62:focus,
389
+ ._chip_1bxxkar_62:active{
385
390
  outline:none;
386
391
 
387
392
  text-decoration:none;
388
393
  }
389
- ._chip_1m62at7_62:focus[data-focus-method='key']{
394
+ ._chip_1bxxkar_62:focus[data-focus-method='key']{
390
395
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
391
396
  }
392
- ._chip_1m62at7_62:has(:focus[data-focus-method='key']){
397
+ ._chip_1bxxkar_62:has(:focus[data-focus-method='key']){
393
398
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
394
399
  }
395
- ._chip_1m62at7_62:focus{
400
+ ._chip_1bxxkar_62:focus{
396
401
  --_rs-cl-chip-border-color:rgba(
397
402
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
398
403
  calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -401,7 +406,7 @@
401
406
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
402
407
  }
403
408
  @media (hover: hover){
404
- ._chip_1m62at7_62:hover{
409
+ ._chip_1bxxkar_62:hover{
405
410
  --_rs-cl-chip-border-color:rgba(
406
411
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
407
412
  calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -412,20 +417,20 @@
412
417
  background:var(--_rs-cl-chip-hover-background);
413
418
  }
414
419
  }
415
- ._chip_1m62at7_62:active{
420
+ ._chip_1bxxkar_62:active{
416
421
  --_rs-cl-chip-border-color:var(--_rs-cl-chip-active-border-color);
417
422
 
418
423
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
419
424
 
420
425
  background:var(--_rs-cl-chip-active-background);
421
426
  }
422
- ._chip_1m62at7_62._selected_1m62at7_176{
427
+ ._chip_1bxxkar_62._selected_1bxxkar_176{
423
428
  --_rs-cl-chip-border-color:var(--_rs-cl-chip-selected-border-color);
424
429
  --_rs-cl-chip-border-width:2px;
425
430
 
426
431
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
427
432
  }
428
- ._disabled_1m62at7_183 ._chip_1m62at7_62{
433
+ ._disabled_1bxxkar_183 ._chip_1bxxkar_62{
429
434
  --_rs-cl-chip-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
430
435
 
431
436
  pointer-events:none;
@@ -434,10 +439,10 @@
434
439
 
435
440
  background:transparent;
436
441
  }
437
- ._disabled_1m62at7_183 ._chip_1m62at7_62._selected_1m62at7_176{
442
+ ._disabled_1bxxkar_183 ._chip_1bxxkar_62._selected_1bxxkar_176{
438
443
  --_rs-cl-chip-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.4);
439
444
  }
440
- ._chip_1m62at7_62::before{
445
+ ._chip_1bxxkar_62::before{
441
446
  position:absolute;
442
447
  top:0;
443
448
  right:0;
@@ -454,7 +459,7 @@
454
459
 
455
460
  transition:border-color 100ms var(--rs-transition-function, ease);
456
461
  }
457
- ._chip_1m62at7_62 ._icon_1m62at7_216{
462
+ ._chip_1bxxkar_62 ._icon_1bxxkar_216{
458
463
  flex:0 0 auto;
459
464
 
460
465
  width:auto;
@@ -463,7 +468,7 @@
463
468
  margin:0;
464
469
  fill:currentColor;
465
470
  }
466
- ._hiddenInput_1m62at7_227{
471
+ ._hiddenInput_1bxxkar_227{
467
472
  position:absolute;
468
473
 
469
474
  overflow:hidden;
@@ -479,7 +484,7 @@
479
484
  white-space:nowrap;
480
485
  clip-path:inset(50%);
481
486
  }
482
- ._withoutText_1m62at7_244{
487
+ ._withoutText_1bxxkar_244{
483
488
  --_rs-cl-chip-horizontal-real-padding:var(--_rs-cl-chip-icon-only-padding);
484
489
  --_rs-cl-chip-vertical-real-padding:var(--_rs-cl-chip-icon-only-padding);
485
490
  }
package/lib/parts/chip-list-base.d.ts CHANGED
@@ -28,4 +28,4 @@ export type ChipListBaseProps<V> = {
28
28
  /** CSS style object */
29
29
  style?: React.CSSProperties;
30
30
  };
31
- export declare function ChipListBase<V>({ size, sparse, compact, disabled, className, mode, alignItems, pattern, theme: themeFromProps, value, onChange, compareValues, children, name, ['aria-label']: ariaLabel, ['aria-labelledby']: ariaLabelledBy, ['data-e2e']: e2eId, style }: ChipListBaseProps<V>): React.JSX.Element;
31
+ export declare function ChipListBase<V>({ size, sparse, compact, disabled, className, mode, alignItems, pattern, theme: themeFromProps, value, onChange, compareValues, children, name, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'data-e2e': e2eId, style }: ChipListBaseProps<V>): React.JSX.Element;