@rescui/chip-list 0.14.4 → 0.15.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 (11) hide show
  1. package/lib/chip-list-multi.js +117 -31
  2. package/lib/chip-list.js +131 -31
  3. package/lib/index.css +46 -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 -74
  10. package/lib/parts/use-roving-tab-index.js +55 -30
  11. package/package.json +8 -7
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
@@ -3,22 +3,22 @@
3
3
  inherits:true;
4
4
  initial-value:0;
5
5
  }
6
- ._light_obqqq4_8{
6
+ ._light_lybc4g_8{
7
7
  --rs-theme-dark:0;
8
8
  }
9
- ._dark_obqqq4_11{
9
+ ._dark_lybc4g_11{
10
10
  --rs-theme-dark:1;
11
11
  }
12
- ._alignLeft_obqqq4_15{
12
+ ._alignLeft_lybc4g_15{
13
13
  --_rs-cl-align:left;
14
14
  }
15
- ._alignCenter_obqqq4_18{
15
+ ._alignCenter_lybc4g_18{
16
16
  --_rs-cl-align:center;
17
17
  }
18
- ._alignRight_obqqq4_21{
18
+ ._alignRight_lybc4g_21{
19
19
  --_rs-cl-align:right;
20
20
  }
21
- ._sizeXs_obqqq4_25{
21
+ ._sizeXs_lybc4g_25{
22
22
  --_rs-cl-chip-base-border-radius:4px;
23
23
  --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
24
24
  --_rs-cl-chip-vertical-padding:2px;
@@ -32,7 +32,7 @@
32
32
  --_rs-cl-compact-horizontal-gap:4px;
33
33
  --_rs-cl-sparse-horizontal-gap:12px;
34
34
  }
35
- ._sizeXs_obqqq4_25 [data-rs-internal='chip-list__chip']{
35
+ ._sizeXs_lybc4g_25 [data-rs-internal='chip-list__chip']{
36
36
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
37
37
  --_rs-typography-text-transform:initial;
38
38
  --_rs-typography-font-variant-numeric:initial;
@@ -67,7 +67,7 @@
67
67
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
68
68
  --_rs-typography-link-border-bottom-width-from-text:1px;
69
69
  }
70
- ._sizeS_obqqq4_28{
70
+ ._sizeS_lybc4g_28{
71
71
  --_rs-cl-chip-base-border-radius:16px;
72
72
  --_rs-cl-chip-compact-border-radius:4px;
73
73
  --_rs-cl-chip-vertical-padding:6px;
@@ -81,7 +81,7 @@
81
81
  --_rs-cl-compact-horizontal-gap:6px;
82
82
  --_rs-cl-sparse-horizontal-gap:12px;
83
83
  }
84
- ._sizeS_obqqq4_28 [data-rs-internal='chip-list__chip']{
84
+ ._sizeS_lybc4g_28 [data-rs-internal='chip-list__chip']{
85
85
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
86
86
  --_rs-typography-text-transform:initial;
87
87
  --_rs-typography-font-variant-numeric:initial;
@@ -116,7 +116,7 @@
116
116
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
117
117
  --_rs-typography-link-border-bottom-width-from-text:1px;
118
118
  }
119
- ._sizeM_obqqq4_31{
119
+ ._sizeM_lybc4g_31{
120
120
  --_rs-cl-chip-base-border-radius:20px;
121
121
  --_rs-cl-chip-compact-border-radius:8px;
122
122
  --_rs-cl-chip-vertical-padding:8px;
@@ -130,7 +130,7 @@
130
130
  --_rs-cl-compact-horizontal-gap:6px;
131
131
  --_rs-cl-sparse-horizontal-gap:16px;
132
132
  }
133
- ._sizeM_obqqq4_31 [data-rs-internal='chip-list__chip']{
133
+ ._sizeM_lybc4g_31 [data-rs-internal='chip-list__chip']{
134
134
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
135
135
  --_rs-typography-text-transform:initial;
136
136
  --_rs-typography-font-variant-numeric:initial;
@@ -169,11 +169,11 @@
169
169
  --_rs-typography-link-border-bottom-width-from-text:1px;
170
170
  }
171
171
  @media screen and (max-width: 640px){
172
- ._sizeM_obqqq4_31 [data-rs-internal='chip-list__chip']{
172
+ ._sizeM_lybc4g_31 [data-rs-internal='chip-list__chip']{
173
173
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
174
174
  }
175
175
  }
176
- ._sizeL_obqqq4_34{
176
+ ._sizeL_lybc4g_34{
177
177
  --_rs-cl-chip-base-border-radius:26px;
178
178
  --_rs-cl-chip-compact-border-radius:12px;
179
179
  --_rs-cl-chip-vertical-padding:12px;
@@ -188,11 +188,11 @@
188
188
  --_rs-cl-sparse-horizontal-gap:16px;
189
189
  }
190
190
  @media screen and (max-width: 640px){
191
- ._sizeL_obqqq4_34{
191
+ ._sizeL_lybc4g_34{
192
192
  --_rs-cl-vertical-gap:12px;
193
193
  }
194
194
  }
195
- ._sizeL_obqqq4_34 [data-rs-internal='chip-list__chip']{
195
+ ._sizeL_lybc4g_34 [data-rs-internal='chip-list__chip']{
196
196
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
197
197
  --_rs-typography-text-transform:initial;
198
198
  --_rs-typography-font-variant-numeric:initial;
@@ -231,34 +231,34 @@
231
231
  --_rs-typography-link-border-bottom-width-from-text:1px;
232
232
  }
233
233
  @media screen and (max-width: 640px){
234
- ._sizeL_obqqq4_34 [data-rs-internal='chip-list__chip']{
234
+ ._sizeL_lybc4g_34 [data-rs-internal='chip-list__chip']{
235
235
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
236
236
  }
237
237
  }
238
- ._innerOffsetL_obqqq4_38{
238
+ ._innerOffsetL_lybc4g_38{
239
239
  --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-sparse-horizontal-gap);
240
240
  }
241
241
  @media screen and (max-width: 640px){
242
- ._innerOffsetL_obqqq4_38{
242
+ ._innerOffsetL_lybc4g_38{
243
243
  --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
244
244
  }
245
245
  }
246
- ._innerOffsetM_obqqq4_41{
246
+ ._innerOffsetM_lybc4g_41{
247
247
  --_rs-cl-horizontal-gap-from-sparse:initial;
248
248
  }
249
- ._classic_obqqq4_45{
249
+ ._classic_lybc4g_45{
250
250
  --_rs-cl-chip-active-border-color:var(--_rs-color-primary);
251
251
  --_rs-cl-chip-selected-border-color:var(--_rs-color-primary);
252
252
  --_rs-cl-chip-hover-background:var(--_rs-color-primary-t-fog);
253
253
  --_rs-cl-chip-active-background:var(--_rs-color-primary-t-fog);
254
254
  }
255
- ._rock_obqqq4_48{
255
+ ._rock_lybc4g_48{
256
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));
257
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));
258
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);
259
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);
260
260
  }
261
- ._compact_obqqq4_52{
261
+ ._compact_lybc4g_52{
262
262
  --_rs-cl-chip-border-radius-from-compact:var(
263
263
  --_rs-cl-chip-compact-border-radius
264
264
  );
@@ -267,7 +267,7 @@
267
267
  );
268
268
  --_rs-cl-horizontal-gap-from-compact:var(--_rs-cl-compact-horizontal-gap);
269
269
  }
270
- ._main_obqqq4_56{
270
+ ._main_lybc4g_56{
271
271
  --_rs-theme-dark:var(
272
272
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
273
273
  var(--rs-theme-dark, 0)
@@ -277,7 +277,7 @@
277
277
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
278
278
  }
279
279
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
280
- ._main_obqqq4_56{
280
+ ._main_lybc4g_56{
281
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)));
282
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)));
283
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)));
@@ -286,7 +286,7 @@
286
286
  }
287
287
  }
288
288
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
289
- ._main_obqqq4_56{
289
+ ._main_lybc4g_56{
290
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);
291
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));
292
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));
@@ -294,7 +294,7 @@
294
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));
295
295
  }
296
296
  }
297
- ._main_obqqq4_56 {
297
+ ._main_lybc4g_56 {
298
298
  --_rs-cl-chip-border-radius:var(
299
299
  --_rs-cl-chip-border-radius-from-compact,
300
300
  var(--_rs-cl-chip-base-border-radius)
@@ -308,7 +308,7 @@
308
308
  var(--_rs-cl-horizontal-gap-from-sparse, var(--_rs-cl-base-horizontal-gap))
309
309
  );
310
310
  }
311
- ._chipsContainer_obqqq4_62{
311
+ ._chipsContainer_lybc4g_62{
312
312
  position:relative;
313
313
 
314
314
  display:flex;
@@ -317,17 +317,17 @@
317
317
 
318
318
  gap:var(--_rs-cl-vertical-gap) var(--_rs-cl-horizontal-gap);
319
319
  }
320
- ._alignIconLeft_obqqq4_72{
320
+ ._alignIconLeft_lybc4g_72{
321
321
  --_rs-cl-chip-icon-flex-direction:row;
322
322
  --_rs-cl-chip-icon-position-multiplier-left:1;
323
323
  --_rs-cl-chip-icon-position-multiplier-right:0;
324
324
  }
325
- ._alignIconRight_obqqq4_75{
325
+ ._alignIconRight_lybc4g_75{
326
326
  --_rs-cl-chip-icon-flex-direction:row-reverse;
327
327
  --_rs-cl-chip-icon-position-multiplier-left:0;
328
328
  --_rs-cl-chip-icon-position-multiplier-right:1;
329
329
  }
330
- ._chip_obqqq4_62{
330
+ ._chip_lybc4g_62{
331
331
  letter-spacing:var(
332
332
  --rs-text-base-letter-spacing,
333
333
  var(--_rs-typography-letter-spacing)
@@ -379,25 +379,25 @@
379
379
  -moz-osx-font-smoothing:inherit;
380
380
  -webkit-appearance:none;
381
381
  }
382
- ._chip_obqqq4_62::-moz-focus-inner{
382
+ ._chip_lybc4g_62::-moz-focus-inner{
383
383
  padding:0;
384
384
 
385
385
  border:none;
386
386
  }
387
- ._chip_obqqq4_62:hover,
388
- ._chip_obqqq4_62:focus,
389
- ._chip_obqqq4_62:active{
387
+ ._chip_lybc4g_62:hover,
388
+ ._chip_lybc4g_62:focus,
389
+ ._chip_lybc4g_62:active{
390
390
  outline:none;
391
391
 
392
392
  text-decoration:none;
393
393
  }
394
- ._chip_obqqq4_62:focus[data-focus-method='key']{
394
+ ._chip_lybc4g_62:focus[data-focus-method='key']{
395
395
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
396
396
  }
397
- ._chip_obqqq4_62:has(:focus[data-focus-method='key']){
397
+ ._chip_lybc4g_62:has(:focus[data-focus-method='key']){
398
398
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
399
399
  }
400
- ._chip_obqqq4_62:focus{
400
+ ._chip_lybc4g_62:focus{
401
401
  --_rs-cl-chip-border-color:rgba(
402
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),
403
403
  calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -406,7 +406,7 @@
406
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));
407
407
  }
408
408
  @media (hover: hover){
409
- ._chip_obqqq4_62:hover{
409
+ ._chip_lybc4g_62:hover{
410
410
  --_rs-cl-chip-border-color:rgba(
411
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),
412
412
  calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -417,20 +417,20 @@
417
417
  background:var(--_rs-cl-chip-hover-background);
418
418
  }
419
419
  }
420
- ._chip_obqqq4_62:active{
420
+ ._chip_lybc4g_62:active{
421
421
  --_rs-cl-chip-border-color:var(--_rs-cl-chip-active-border-color);
422
422
 
423
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));
424
424
 
425
425
  background:var(--_rs-cl-chip-active-background);
426
426
  }
427
- ._chip_obqqq4_62._selected_obqqq4_176{
427
+ ._chip_lybc4g_62._selected_lybc4g_176{
428
428
  --_rs-cl-chip-border-color:var(--_rs-cl-chip-selected-border-color);
429
429
  --_rs-cl-chip-border-width:2px;
430
430
 
431
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));
432
432
  }
433
- ._disabled_obqqq4_183 ._chip_obqqq4_62{
433
+ ._disabled_lybc4g_183 ._chip_lybc4g_62{
434
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);
435
435
 
436
436
  pointer-events:none;
@@ -439,10 +439,10 @@
439
439
 
440
440
  background:transparent;
441
441
  }
442
- ._disabled_obqqq4_183 ._chip_obqqq4_62._selected_obqqq4_176{
442
+ ._disabled_lybc4g_183 ._chip_lybc4g_62._selected_lybc4g_176{
443
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);
444
444
  }
445
- ._chip_obqqq4_62::before{
445
+ ._chip_lybc4g_62::before{
446
446
  position:absolute;
447
447
  top:0;
448
448
  right:0;
@@ -459,7 +459,7 @@
459
459
 
460
460
  transition:border-color 100ms var(--rs-transition-function, ease);
461
461
  }
462
- ._chip_obqqq4_62 ._icon_obqqq4_216{
462
+ ._chip_lybc4g_62 ._icon_lybc4g_216{
463
463
  flex:0 0 auto;
464
464
 
465
465
  width:auto;
@@ -468,7 +468,7 @@
468
468
  margin:0;
469
469
  fill:currentColor;
470
470
  }
471
- ._hiddenInput_obqqq4_227{
471
+ ._hiddenInput_lybc4g_227{
472
472
  position:absolute;
473
473
 
474
474
  overflow:hidden;
@@ -484,7 +484,7 @@
484
484
  white-space:nowrap;
485
485
  clip-path:inset(50%);
486
486
  }
487
- ._withoutText_obqqq4_244{
487
+ ._withoutText_lybc4g_244{
488
488
  --_rs-cl-chip-horizontal-real-padding:var(--_rs-cl-chip-icon-only-padding);
489
489
  --_rs-cl-chip-vertical-real-padding:var(--_rs-cl-chip-icon-only-padding);
490
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;