@rescui/chip-list 0.8.0 → 0.9.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.d.ts +5 -2
  2. package/lib/chip-list-multi.js +5 -1
  3. package/lib/chip-list.d.ts +4 -2
  4. package/lib/chip-list.js +5 -1
  5. package/lib/index.css +92 -67
  6. package/lib/parts/chip-list-base.d.ts +4 -2
  7. package/lib/parts/chip-list-base.js +3 -1
  8. package/lib/parts/chip-list.p.module.css.js +22 -21
  9. package/lib/public-api.p.css +56 -46
  10. package/lib/public-api.pcss +56 -46
  11. package/package.json +6 -6
package/lib/chip-list-multi.d.ts CHANGED
@@ -6,8 +6,10 @@ export declare const compareValuesDefault: <V>(activeValues: V[], value: V) => b
6
6
  export declare type ChipListMultiProps<ValueType> = {
7
7
  className?: string;
8
8
  size?: ChipListSizeType;
9
- /** Increase inner horizontal offset between the chips. */
9
+ /** Increase inner horizontal offset between the chips. Does nothing when `compact={true}` */
10
10
  sparse?: boolean;
11
+ /** Decrease horizontal paddings, gap and border-radius values */
12
+ compact?: boolean;
11
13
  theme?: Theme;
12
14
  mode?: ChipListModeType;
13
15
  alignItems?: ChipListAlignItemsType;
@@ -18,12 +20,13 @@ export declare type ChipListMultiProps<ValueType> = {
18
20
  /** Identifier for e2e tests */
19
21
  'data-e2e'?: string;
20
22
  };
21
- export declare function ChipListMulti<ValueType>({ onChange, compareValues, value, children, size, sparse, mode, alignItems, ...props }: ChipListMultiProps<ValueType>): JSX.Element;
23
+ export declare function ChipListMulti<ValueType>({ onChange, compareValues, value, children, size, sparse, compact, mode, alignItems, ...props }: ChipListMultiProps<ValueType>): JSX.Element;
22
24
  export declare namespace ChipListMulti {
23
25
  var displayName: string;
24
26
  var propTypes: {
25
27
  size: PropTypes.Requireable<string>;
26
28
  sparse: PropTypes.Requireable<boolean>;
29
+ compact: PropTypes.Requireable<boolean>;
27
30
  theme: PropTypes.Requireable<string>;
28
31
  className: PropTypes.Requireable<string>;
29
32
  mode: PropTypes.Requireable<string>;
package/lib/chip-list-multi.js CHANGED
@@ -7,7 +7,7 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
7
7
  import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
8
8
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
9
9
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
10
- var _excluded = ["onChange", "compareValues", "value", "children", "size", "sparse", "mode", "alignItems"];
10
+ var _excluded = ["onChange", "compareValues", "value", "children", "size", "sparse", "compact", "mode", "alignItems"];
11
11
 
12
12
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
13
13
 
@@ -34,6 +34,8 @@ function ChipListMulti(_ref) {
34
34
  size = _ref$size === void 0 ? 'm' : _ref$size,
35
35
  _ref$sparse = _ref.sparse,
36
36
  sparse = _ref$sparse === void 0 ? false : _ref$sparse,
37
+ _ref$compact = _ref.compact,
38
+ compact = _ref$compact === void 0 ? false : _ref$compact,
37
39
  _ref$mode = _ref.mode,
38
40
  mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
39
41
  _ref$alignItems = _ref.alignItems,
@@ -54,6 +56,7 @@ function ChipListMulti(_ref) {
54
56
  },
55
57
  size: size,
56
58
  sparse: sparse,
59
+ compact: compact,
57
60
  mode: mode,
58
61
  alignItems: alignItems
59
62
  }, props), children);
@@ -63,6 +66,7 @@ ChipListMulti.displayName = 'ChipListMulti';
63
66
  ChipListMulti.propTypes = {
64
67
  size: PropTypes.oneOf(['xs', 's', 'm', 'l']),
65
68
  sparse: PropTypes.bool,
69
+ compact: PropTypes.bool,
66
70
  theme: PropTypes.oneOf(['light', 'dark']),
67
71
  className: PropTypes.string,
68
72
  mode: PropTypes.oneOf(['classic', 'rock']),
package/lib/chip-list.d.ts CHANGED
@@ -5,8 +5,10 @@ export declare const compareValuesDefault: <V>(activeValue: V, value: V) => bool
5
5
  export declare type ChipListProps<ValueType> = {
6
6
  className?: string;
7
7
  size?: ChipListSizeType;
8
- /** Increase inner horizontal offset between the chips. */
8
+ /** Increase inner horizontal offset between the chips. Does nothing when `compact={true}` */
9
9
  sparse?: boolean;
10
+ /** Decrease horizontal paddings, gap and border-radius values */
11
+ compact?: boolean;
10
12
  theme?: Theme;
11
13
  mode?: ChipListModeType;
12
14
  alignItems?: ChipListAlignItemsType;
@@ -17,7 +19,7 @@ export declare type ChipListProps<ValueType> = {
17
19
  /** Identifier for e2e tests */
18
20
  'data-e2e'?: string;
19
21
  };
20
- export declare function ChipList<ValueType>({ children, compareValues, value, onChange, size, sparse, mode, alignItems, ...props }: ChipListProps<ValueType>): JSX.Element;
22
+ export declare function ChipList<ValueType>({ children, compareValues, value, onChange, size, sparse, compact, mode, alignItems, ...props }: ChipListProps<ValueType>): JSX.Element;
21
23
  export declare namespace ChipList {
22
24
  var displayName: string;
23
25
  var propTypes: {};
package/lib/chip-list.js CHANGED
@@ -7,7 +7,7 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
7
7
  import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
8
8
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
9
9
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
10
- var _excluded = ["children", "compareValues", "value", "onChange", "size", "sparse", "mode", "alignItems"];
10
+ var _excluded = ["children", "compareValues", "value", "onChange", "size", "sparse", "compact", "mode", "alignItems"];
11
11
 
12
12
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
13
13
 
@@ -31,6 +31,8 @@ function ChipList(_ref) {
31
31
  size = _ref$size === void 0 ? 'm' : _ref$size,
32
32
  _ref$sparse = _ref.sparse,
33
33
  sparse = _ref$sparse === void 0 ? false : _ref$sparse,
34
+ _ref$compact = _ref.compact,
35
+ compact = _ref$compact === void 0 ? false : _ref$compact,
34
36
  _ref$mode = _ref.mode,
35
37
  mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
36
38
  _ref$alignItems = _ref.alignItems,
@@ -45,6 +47,7 @@ function ChipList(_ref) {
45
47
  value: [value],
46
48
  size: size,
47
49
  sparse: sparse,
50
+ compact: compact,
48
51
  mode: mode,
49
52
  alignItems: alignItems
50
53
  }, props), children);
@@ -54,6 +57,7 @@ ChipList.displayName = 'ChipList';
54
57
  ChipList.propTypes = {
55
58
  size: PropTypes.oneOf(['xs', 's', 'm', 'l']),
56
59
  sparse: PropTypes.bool,
60
+ compact: PropTypes.bool,
57
61
  theme: PropTypes.oneOf(['light', 'dark']),
58
62
  className: PropTypes.string,
59
63
  mode: PropTypes.oneOf(['classic', 'rock']),
package/lib/index.css CHANGED
@@ -1,35 +1,33 @@
1
- ._light_132sdse_8{
1
+ ._light_5f18sl_8{
2
2
  --rs-theme-dark:0;
3
3
  }
4
- ._dark_132sdse_11{
4
+ ._dark_5f18sl_11{
5
5
  --rs-theme-dark:1;
6
6
  }
7
- ._alignLeft_132sdse_15{
7
+ ._alignLeft_5f18sl_15{
8
8
  --_rs-cl-align:left;
9
9
  }
10
- ._alignCenter_132sdse_18{
10
+ ._alignCenter_5f18sl_18{
11
11
  --_rs-cl-align:center;
12
12
  }
13
- ._alignRight_132sdse_21{
13
+ ._alignRight_5f18sl_21{
14
14
  --_rs-cl-align:right;
15
15
  }
16
- ._sizeXs_132sdse_25{
17
- --_rs-cl-chip-border-radius:4px;
18
- --_rs-cl-chip-multiline-border-radius:4px;
16
+ ._sizeXs_5f18sl_25{
17
+ --_rs-cl-chip-base-border-radius:4px;
18
+ --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
19
19
  --_rs-cl-chip-vertical-padding:2px;
20
- --_rs-cl-chip-horizontal-padding:16px;
20
+ --_rs-cl-chip-base-horizontal-padding:16px;
21
+ --_rs-cl-chip-compact-horizontal-padding:8px;
21
22
  --_rs-cl-chip-icon-size:16px;
22
23
  --_rs-cl-chip-icon-offset:8px;
23
24
  --_rs-cl-chip-icon-margin-top:2px;
24
- --_rs-cl-vertical-gap:12px;
25
+ --_rs-cl-vertical-gap:8px;
26
+ --_rs-cl-base-horizontal-gap:8px;
27
+ --_rs-cl-compact-horizontal-gap:4px;
25
28
  --_rs-cl-sparse-horizontal-gap:12px;
26
29
  }
27
- @media screen and (max-width: 640px){
28
- ._sizeXs_132sdse_25{
29
- --_rs-cl-vertical-gap:8px;
30
- }
31
- }
32
- ._sizeXs_132sdse_25 [data-rs-internal='chip-list__chip']{
30
+ ._sizeXs_5f18sl_25 [data-rs-internal='chip-list__chip']{
33
31
  --_rs-typography-letter-spacing:0.0045em;
34
32
  --_rs-typography-text-transform:initial;
35
33
  --_rs-typography-font-variant-numeric:initial;
@@ -63,17 +61,20 @@
63
61
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
64
62
  --_rs-typography-link-border-bottom-width-from-text:1px;
65
63
  }
66
- ._sizeS_132sdse_28{
67
- --_rs-cl-chip-border-radius:24px;
68
- --_rs-cl-chip-multiline-border-radius:4px;
64
+ ._sizeS_5f18sl_28{
65
+ --_rs-cl-chip-base-border-radius:16px;
66
+ --_rs-cl-chip-compact-border-radius:4px;
69
67
  --_rs-cl-chip-vertical-padding:6px;
70
- --_rs-cl-chip-horizontal-padding:16px;
68
+ --_rs-cl-chip-base-horizontal-padding:16px;
69
+ --_rs-cl-chip-compact-horizontal-padding:8px;
71
70
  --_rs-cl-chip-icon-size:20px;
72
71
  --_rs-cl-chip-icon-offset:8px;
73
72
  --_rs-cl-vertical-gap:12px;
73
+ --_rs-cl-base-horizontal-gap:8px;
74
+ --_rs-cl-compact-horizontal-gap:6px;
74
75
  --_rs-cl-sparse-horizontal-gap:12px;
75
76
  }
76
- ._sizeS_132sdse_28 [data-rs-internal='chip-list__chip']{
77
+ ._sizeS_5f18sl_28 [data-rs-internal='chip-list__chip']{
77
78
  --_rs-typography-letter-spacing:0.0045em;
78
79
  --_rs-typography-text-transform:initial;
79
80
  --_rs-typography-font-variant-numeric:initial;
@@ -107,17 +108,20 @@
107
108
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
108
109
  --_rs-typography-link-border-bottom-width-from-text:1px;
109
110
  }
110
- ._sizeM_132sdse_31{
111
- --_rs-cl-chip-border-radius:24px;
112
- --_rs-cl-chip-multiline-border-radius:8px;
111
+ ._sizeM_5f18sl_31{
112
+ --_rs-cl-chip-base-border-radius:20px;
113
+ --_rs-cl-chip-compact-border-radius:8px;
113
114
  --_rs-cl-chip-vertical-padding:8px;
114
- --_rs-cl-chip-horizontal-padding:24px;
115
+ --_rs-cl-chip-base-horizontal-padding:24px;
116
+ --_rs-cl-chip-compact-horizontal-padding:12px;
115
117
  --_rs-cl-chip-icon-size:24px;
116
118
  --_rs-cl-chip-icon-offset:8px;
117
119
  --_rs-cl-vertical-gap:12px;
120
+ --_rs-cl-base-horizontal-gap:8px;
121
+ --_rs-cl-compact-horizontal-gap:6px;
118
122
  --_rs-cl-sparse-horizontal-gap:16px;
119
123
  }
120
- ._sizeM_132sdse_31 [data-rs-internal='chip-list__chip']{
124
+ ._sizeM_5f18sl_31 [data-rs-internal='chip-list__chip']{
121
125
  --_rs-typography-letter-spacing:0.0015em;
122
126
  --_rs-typography-text-transform:initial;
123
127
  --_rs-typography-font-variant-numeric:initial;
@@ -152,26 +156,29 @@
152
156
  --_rs-typography-link-border-bottom-width-from-text:1px;
153
157
  }
154
158
  @media screen and (max-width: 640px){
155
- ._sizeM_132sdse_31 [data-rs-internal='chip-list__chip']{
159
+ ._sizeM_5f18sl_31 [data-rs-internal='chip-list__chip']{
156
160
  --_rs-typography-list-li-margin-top-from-text:12px;
157
161
  }
158
162
  }
159
- ._sizeL_132sdse_34{
160
- --_rs-cl-chip-border-radius:36px;
161
- --_rs-cl-chip-multiline-border-radius:12px;
163
+ ._sizeL_5f18sl_34{
164
+ --_rs-cl-chip-base-border-radius:26px;
165
+ --_rs-cl-chip-compact-border-radius:12px;
162
166
  --_rs-cl-chip-vertical-padding:12px;
163
- --_rs-cl-chip-horizontal-padding:32px;
167
+ --_rs-cl-chip-base-horizontal-padding:32px;
168
+ --_rs-cl-chip-compact-horizontal-padding:16px;
164
169
  --_rs-cl-chip-icon-size:28px;
165
170
  --_rs-cl-chip-icon-offset:16px;
166
171
  --_rs-cl-vertical-gap:16px;
172
+ --_rs-cl-base-horizontal-gap:8px;
173
+ --_rs-cl-compact-horizontal-gap:6px;
167
174
  --_rs-cl-sparse-horizontal-gap:16px;
168
175
  }
169
176
  @media screen and (max-width: 640px){
170
- ._sizeL_132sdse_34{
177
+ ._sizeL_5f18sl_34{
171
178
  --_rs-cl-vertical-gap:12px;
172
179
  }
173
180
  }
174
- ._sizeL_132sdse_34 [data-rs-internal='chip-list__chip']{
181
+ ._sizeL_5f18sl_34 [data-rs-internal='chip-list__chip']{
175
182
  --_rs-typography-letter-spacing:normal;
176
183
  --_rs-typography-text-transform:initial;
177
184
  --_rs-typography-font-variant-numeric:initial;
@@ -206,36 +213,43 @@
206
213
  --_rs-typography-link-border-bottom-width-from-text:1px;
207
214
  }
208
215
  @media screen and (max-width: 640px){
209
- ._sizeL_132sdse_34 [data-rs-internal='chip-list__chip']{
216
+ ._sizeL_5f18sl_34 [data-rs-internal='chip-list__chip']{
210
217
  --_rs-typography-list-li-margin-top-from-text:16px;
211
218
  }
212
219
  }
213
- ._innerOffsetL_132sdse_38{
214
- --_rs-cl-sparse-horizontal-gap-or-initial:var(
215
- --_rs-cl-sparse-horizontal-gap
216
- );
220
+ ._innerOffsetL_5f18sl_38{
221
+ --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-sparse-horizontal-gap);
217
222
  }
218
223
  @media screen and (max-width: 640px){
219
- ._innerOffsetL_132sdse_38{
220
- --_rs-cl-sparse-horizontal-gap-or-initial:8px;
224
+ ._innerOffsetL_5f18sl_38{
225
+ --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
221
226
  }
222
227
  }
223
- ._innerOffsetM_132sdse_41{
224
- --_rs-cl-sparse-horizontal-gap-or-initial:initial;
228
+ ._innerOffsetM_5f18sl_41{
229
+ --_rs-cl-horizontal-gap-from-sparse:initial;
225
230
  }
226
- ._classic_132sdse_45{
231
+ ._classic_5f18sl_45{
227
232
  --_rs-cl-chip-active-border-color:var(--_rs-color-primary);
228
233
  --_rs-cl-chip-selected-border-color:var(--_rs-color-primary);
229
234
  --_rs-cl-chip-hover-background:var(--_rs-color-primary-t-fog);
230
235
  --_rs-cl-chip-active-background:var(--_rs-color-primary-t-fog);
231
236
  }
232
- ._rock_132sdse_48{
237
+ ._rock_5f18sl_48{
233
238
  --_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));
234
239
  --_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));
235
240
  --_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);
236
241
  --_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);
237
242
  }
238
- ._main_132sdse_52{
243
+ ._compact_5f18sl_52{
244
+ --_rs-cl-chip-border-radius-from-compact:var(
245
+ --_rs-cl-chip-compact-border-radius
246
+ );
247
+ --_rs-cl-chip-horizontal-padding-from-compact:var(
248
+ --_rs-cl-chip-compact-horizontal-padding
249
+ );
250
+ --_rs-cl-horizontal-gap-from-compact:var(--_rs-cl-compact-horizontal-gap);
251
+ }
252
+ ._main_5f18sl_56{
239
253
  --_rs-theme-dark:var(
240
254
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
241
255
  var(--rs-theme-dark, 0)
@@ -245,7 +259,7 @@
245
259
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
246
260
  }
247
261
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
248
- ._main_132sdse_52{
262
+ ._main_5f18sl_56{
249
263
  --_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)));
250
264
  --_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)));
251
265
  --_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)));
@@ -254,7 +268,7 @@
254
268
  }
255
269
  }
256
270
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
257
- ._main_132sdse_52{
271
+ ._main_5f18sl_56{
258
272
  --_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);
259
273
  --_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));
260
274
  --_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));
@@ -262,10 +276,21 @@
262
276
  --_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));
263
277
  }
264
278
  }
265
- ._main_132sdse_52 {
266
- --_rs-cl-horizontal-gap:var(--_rs-cl-sparse-horizontal-gap-or-initial, 8px);
279
+ ._main_5f18sl_56 {
280
+ --_rs-cl-chip-border-radius:var(
281
+ --_rs-cl-chip-border-radius-from-compact,
282
+ var(--_rs-cl-chip-base-border-radius)
283
+ );
284
+ --_rs-cl-chip-horizontal-padding:var(
285
+ --_rs-cl-chip-horizontal-padding-from-compact,
286
+ var(--_rs-cl-chip-base-horizontal-padding)
287
+ );
288
+ --_rs-cl-horizontal-gap:var(
289
+ --_rs-cl-horizontal-gap-from-compact,
290
+ var(--_rs-cl-horizontal-gap-from-sparse, var(--_rs-cl-base-horizontal-gap))
291
+ );
267
292
  }
268
- ._chipsContainer_132sdse_58{
293
+ ._chipsContainer_5f18sl_62{
269
294
  position:relative;
270
295
 
271
296
  display:-webkit-box;
@@ -281,17 +306,17 @@
281
306
 
282
307
  gap:var(--_rs-cl-vertical-gap) var(--_rs-cl-horizontal-gap);
283
308
  }
284
- ._alignIconLeft_132sdse_68{
309
+ ._alignIconLeft_5f18sl_72{
285
310
  --_rs-cl-chip-icon-flex-direction:row;
286
311
  --_rs-cl-chip-icon-position-multiplier-left:1;
287
312
  --_rs-cl-chip-icon-position-multiplier-right:0;
288
313
  }
289
- ._alignIconRight_132sdse_71{
314
+ ._alignIconRight_5f18sl_75{
290
315
  --_rs-cl-chip-icon-flex-direction:row-reverse;
291
316
  --_rs-cl-chip-icon-position-multiplier-left:0;
292
317
  --_rs-cl-chip-icon-position-multiplier-right:1;
293
318
  }
294
- ._chip_132sdse_58{
319
+ ._chip_5f18sl_62{
295
320
  --_rs-cl-chip-icon-margin-right:calc(var(--_rs-cl-chip-icon-offset)*(1 - var(--_rs-cl-chip-icon-position-multiplier-right)) + -2px*var(--_rs-cl-chip-icon-position-multiplier-right));
296
321
  --_rs-cl-chip-icon-margin-left:calc(var(--_rs-cl-chip-icon-offset)*(1 - var(--_rs-cl-chip-icon-position-multiplier-left)) + -2px*var(--_rs-cl-chip-icon-position-multiplier-left));
297
322
  letter-spacing:var(
@@ -307,11 +332,11 @@
307
332
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
308
333
  font-feature-settings:'kern', 'liga', 'calt';
309
334
  }
310
- ._chip_132sdse_58 > p:not(:nth-child(1)),
311
- ._chip_132sdse_58 > pre:not(:nth-child(1)){
335
+ ._chip_5f18sl_62 > p:not(:nth-child(1)),
336
+ ._chip_5f18sl_62 > pre:not(:nth-child(1)){
312
337
  padding-top:var(--_rs-typography-auto-offset-or-initial);
313
338
  }
314
- ._chip_132sdse_58 {
339
+ ._chip_5f18sl_62 {
315
340
 
316
341
  position:relative;
317
342
  z-index:1;
@@ -363,23 +388,23 @@
363
388
  -moz-osx-font-smoothing:inherit;
364
389
  -webkit-appearance:none;
365
390
  }
366
- ._chip_132sdse_58::-moz-focus-inner{
391
+ ._chip_5f18sl_62::-moz-focus-inner{
367
392
  padding:0;
368
393
 
369
394
  border:none;
370
395
  }
371
- ._chip_132sdse_58:hover,
372
- ._chip_132sdse_58:focus,
373
- ._chip_132sdse_58:active{
396
+ ._chip_5f18sl_62:hover,
397
+ ._chip_5f18sl_62:focus,
398
+ ._chip_5f18sl_62:active{
374
399
  outline:none;
375
400
 
376
401
  text-decoration:none;
377
402
  }
378
- ._chip_132sdse_58:focus[data-focus-method='key']{
403
+ ._chip_5f18sl_62:focus[data-focus-method='key']{
379
404
  -webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
380
405
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
381
406
  }
382
- ._chip_132sdse_58:focus{
407
+ ._chip_5f18sl_62:focus{
383
408
  border-color:rgba(
384
409
  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),
385
410
  calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -388,7 +413,7 @@
388
413
  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));
389
414
  }
390
415
  @media (hover: hover){
391
- ._chip_132sdse_58:hover{
416
+ ._chip_5f18sl_62:hover{
392
417
  border-color:rgba(
393
418
  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),
394
419
  calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -399,14 +424,14 @@
399
424
  background:var(--_rs-cl-chip-hover-background);
400
425
  }
401
426
  }
402
- ._chip_132sdse_58:active{
427
+ ._chip_5f18sl_62:active{
403
428
  border-color:var(--_rs-cl-chip-active-border-color);
404
429
 
405
430
  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));
406
431
 
407
432
  background:var(--_rs-cl-chip-active-background);
408
433
  }
409
- ._chip_132sdse_58._selected_132sdse_162{
434
+ ._chip_5f18sl_62._selected_5f18sl_166{
410
435
  padding:calc(var(--_rs-cl-chip-vertical-padding) - 2px) calc(var(--_rs-cl-chip-horizontal-padding) - 2px);
411
436
 
412
437
  border-width:2px;
@@ -414,7 +439,7 @@
414
439
 
415
440
  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));
416
441
  }
417
- ._chip_132sdse_58 ._icon_132sdse_172{
442
+ ._chip_5f18sl_62 ._icon_5f18sl_176{
418
443
  -webkit-box-flex:0;
419
444
  -ms-flex:0 0 auto;
420
445
  flex:0 0 auto;
@@ -425,6 +450,6 @@
425
450
  margin:0 var(--_rs-cl-chip-icon-margin-right) 0 var(--_rs-cl-chip-icon-margin-left);
426
451
  fill:currentColor;
427
452
  }
428
- ._chip_132sdse_58._withoutText_132sdse_183 ._icon_132sdse_172{
453
+ ._chip_5f18sl_62._withoutText_5f18sl_187 ._icon_5f18sl_176{
429
454
  margin:0;
430
455
  }
package/lib/parts/chip-list-base.d.ts CHANGED
@@ -4,8 +4,10 @@ import { ChipListSizeType, ChipListModeType, ChipListAlignItemsType } from './ty
4
4
  export declare type ChipListBaseProps<V> = {
5
5
  className?: string;
6
6
  size?: ChipListSizeType;
7
- /** Increase inner horizontal offset between the chips. */
7
+ /** Increase inner horizontal offset between the chips. Does nothing when `compact={true}` */
8
8
  sparse?: boolean;
9
+ /** Decrease horizontal paddings, gap and border-radius values */
10
+ compact?: boolean;
9
11
  theme?: Theme;
10
12
  mode?: ChipListModeType;
11
13
  alignItems?: ChipListAlignItemsType;
@@ -16,4 +18,4 @@ export declare type ChipListBaseProps<V> = {
16
18
  /** Identifier for e2e tests */
17
19
  'data-e2e'?: string;
18
20
  };
19
- export declare function ChipListBase<V>({ size, sparse, className, mode, alignItems, theme: themeFromProps, value, onChange, compareValues, children, ['data-e2e']: e2eId }: ChipListBaseProps<V>): JSX.Element;
21
+ export declare function ChipListBase<V>({ size, sparse, compact, className, mode, alignItems, theme: themeFromProps, value, onChange, compareValues, children, ['data-e2e']: e2eId }: ChipListBaseProps<V>): JSX.Element;
package/lib/parts/chip-list-base.js CHANGED
@@ -21,6 +21,8 @@ function ChipListBase(_ref) {
21
21
  size = _ref$size === void 0 ? 'm' : _ref$size,
22
22
  _ref$sparse = _ref.sparse,
23
23
  sparse = _ref$sparse === void 0 ? false : _ref$sparse,
24
+ _ref$compact = _ref.compact,
25
+ compact = _ref$compact === void 0 ? false : _ref$compact,
24
26
  className = _ref.className,
25
27
  _ref$mode = _ref.mode,
26
28
  mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
@@ -48,7 +50,7 @@ function ChipListBase(_ref) {
48
50
  selectedIds: selectedIds
49
51
  }
50
52
  }, /*#__PURE__*/React.createElement("div", {
51
- className: cn(styles.main, styles[theme], styles[mode], STYLES_SIZES[size], sparse ? styles.innerOffsetL : styles.innerOffsetM, ALIGN_ITEMS_STYLES[alignItems], className),
53
+ className: cn(styles.main, styles[theme], styles[mode], STYLES_SIZES[size], sparse ? styles.innerOffsetL : styles.innerOffsetM, compact && styles.compact, ALIGN_ITEMS_STYLES[alignItems], className),
52
54
  "data-e2e": e2eId ? "".concat(e2eId, "__chips-container") : null,
53
55
  "data-rs-internal": 'chip-list',
54
56
  "data-test": 'chip-list'
package/lib/parts/chip-list.p.module.css.js CHANGED
@@ -1,24 +1,25 @@
1
1
  var styles = {
2
- "light": "_light_132sdse_8",
3
- "dark": "_dark_132sdse_11",
4
- "alignLeft": "_alignLeft_132sdse_15",
5
- "alignCenter": "_alignCenter_132sdse_18",
6
- "alignRight": "_alignRight_132sdse_21",
7
- "sizeXs": "_sizeXs_132sdse_25",
8
- "sizeS": "_sizeS_132sdse_28",
9
- "sizeM": "_sizeM_132sdse_31",
10
- "sizeL": "_sizeL_132sdse_34",
11
- "innerOffsetL": "_innerOffsetL_132sdse_38",
12
- "innerOffsetM": "_innerOffsetM_132sdse_41",
13
- "classic": "_classic_132sdse_45",
14
- "rock": "_rock_132sdse_48",
15
- "main": "_main_132sdse_52",
16
- "chipsContainer": "_chipsContainer_132sdse_58",
17
- "alignIconLeft": "_alignIconLeft_132sdse_68",
18
- "alignIconRight": "_alignIconRight_132sdse_71",
19
- "chip": "_chip_132sdse_58",
20
- "selected": "_selected_132sdse_162",
21
- "icon": "_icon_132sdse_172",
22
- "withoutText": "_withoutText_132sdse_183"
2
+ "light": "_light_5f18sl_8",
3
+ "dark": "_dark_5f18sl_11",
4
+ "alignLeft": "_alignLeft_5f18sl_15",
5
+ "alignCenter": "_alignCenter_5f18sl_18",
6
+ "alignRight": "_alignRight_5f18sl_21",
7
+ "sizeXs": "_sizeXs_5f18sl_25",
8
+ "sizeS": "_sizeS_5f18sl_28",
9
+ "sizeM": "_sizeM_5f18sl_31",
10
+ "sizeL": "_sizeL_5f18sl_34",
11
+ "innerOffsetL": "_innerOffsetL_5f18sl_38",
12
+ "innerOffsetM": "_innerOffsetM_5f18sl_41",
13
+ "classic": "_classic_5f18sl_45",
14
+ "rock": "_rock_5f18sl_48",
15
+ "compact": "_compact_5f18sl_52",
16
+ "main": "_main_5f18sl_56",
17
+ "chipsContainer": "_chipsContainer_5f18sl_62",
18
+ "alignIconLeft": "_alignIconLeft_5f18sl_72",
19
+ "alignIconRight": "_alignIconRight_5f18sl_75",
20
+ "chip": "_chip_5f18sl_62",
21
+ "selected": "_selected_5f18sl_166",
22
+ "icon": "_icon_5f18sl_176",
23
+ "withoutText": "_withoutText_5f18sl_187"
23
24
  };
24
25
  export { styles as default };
package/lib/public-api.p.css CHANGED
@@ -15,37 +15,33 @@
15
15
  }
16
16
  @define-mixin rs-chip-list-sparse-true{
17
17
  &:not(html){
18
- --_rs-cl-sparse-horizontal-gap-or-initial:var(
19
- --_rs-cl-sparse-horizontal-gap
20
- );
18
+ --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-sparse-horizontal-gap);
21
19
  }
22
20
  @media screen and (max-width: 640px){
23
21
  &:not(html){
24
- --_rs-cl-sparse-horizontal-gap-or-initial:8px;
22
+ --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
25
23
  }
26
24
  }
27
25
  }
28
26
  @define-mixin rs-chip-list-sparse-false{
29
27
  &:not(html){
30
- --_rs-cl-sparse-horizontal-gap-or-initial:initial;
28
+ --_rs-cl-horizontal-gap-from-sparse:initial;
31
29
  }
32
30
  }
33
31
  @define-mixin rs-chip-list-size-xs{
34
32
  &:not(html){
35
- --_rs-cl-chip-border-radius:4px;
36
- --_rs-cl-chip-multiline-border-radius:4px;
33
+ --_rs-cl-chip-base-border-radius:4px;
34
+ --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
37
35
  --_rs-cl-chip-vertical-padding:2px;
38
- --_rs-cl-chip-horizontal-padding:16px;
36
+ --_rs-cl-chip-base-horizontal-padding:16px;
37
+ --_rs-cl-chip-compact-horizontal-padding:8px;
39
38
  --_rs-cl-chip-icon-size:16px;
40
39
  --_rs-cl-chip-icon-offset:8px;
41
40
  --_rs-cl-chip-icon-margin-top:2px;
42
- --_rs-cl-vertical-gap:12px;
43
- --_rs-cl-sparse-horizontal-gap:12px;
44
- }
45
- @media screen and (max-width: 640px){
46
- &:not(html){
47
41
  --_rs-cl-vertical-gap:8px;
48
- }
42
+ --_rs-cl-base-horizontal-gap:8px;
43
+ --_rs-cl-compact-horizontal-gap:4px;
44
+ --_rs-cl-sparse-horizontal-gap:12px;
49
45
  }
50
46
  &:not(html) [data-rs-internal='chip-list__chip']{
51
47
  --_rs-typography-letter-spacing:0.0045em;
@@ -84,13 +80,16 @@
84
80
  }
85
81
  @define-mixin rs-chip-list-size-s{
86
82
  &:not(html){
87
- --_rs-cl-chip-border-radius:24px;
88
- --_rs-cl-chip-multiline-border-radius:4px;
83
+ --_rs-cl-chip-base-border-radius:16px;
84
+ --_rs-cl-chip-compact-border-radius:4px;
89
85
  --_rs-cl-chip-vertical-padding:6px;
90
- --_rs-cl-chip-horizontal-padding:16px;
86
+ --_rs-cl-chip-base-horizontal-padding:16px;
87
+ --_rs-cl-chip-compact-horizontal-padding:8px;
91
88
  --_rs-cl-chip-icon-size:20px;
92
89
  --_rs-cl-chip-icon-offset:8px;
93
90
  --_rs-cl-vertical-gap:12px;
91
+ --_rs-cl-base-horizontal-gap:8px;
92
+ --_rs-cl-compact-horizontal-gap:6px;
94
93
  --_rs-cl-sparse-horizontal-gap:12px;
95
94
  }
96
95
  &:not(html) [data-rs-internal='chip-list__chip']{
@@ -130,13 +129,16 @@
130
129
  }
131
130
  @define-mixin rs-chip-list-size-m{
132
131
  &:not(html){
133
- --_rs-cl-chip-border-radius:24px;
134
- --_rs-cl-chip-multiline-border-radius:8px;
132
+ --_rs-cl-chip-base-border-radius:20px;
133
+ --_rs-cl-chip-compact-border-radius:8px;
135
134
  --_rs-cl-chip-vertical-padding:8px;
136
- --_rs-cl-chip-horizontal-padding:24px;
135
+ --_rs-cl-chip-base-horizontal-padding:24px;
136
+ --_rs-cl-chip-compact-horizontal-padding:12px;
137
137
  --_rs-cl-chip-icon-size:24px;
138
138
  --_rs-cl-chip-icon-offset:8px;
139
139
  --_rs-cl-vertical-gap:12px;
140
+ --_rs-cl-base-horizontal-gap:8px;
141
+ --_rs-cl-compact-horizontal-gap:6px;
140
142
  --_rs-cl-sparse-horizontal-gap:16px;
141
143
  }
142
144
  &:not(html) [data-rs-internal='chip-list__chip']{
@@ -181,13 +183,16 @@
181
183
  }
182
184
  @define-mixin rs-chip-list-size-l{
183
185
  &:not(html){
184
- --_rs-cl-chip-border-radius:36px;
185
- --_rs-cl-chip-multiline-border-radius:12px;
186
+ --_rs-cl-chip-base-border-radius:26px;
187
+ --_rs-cl-chip-compact-border-radius:12px;
186
188
  --_rs-cl-chip-vertical-padding:12px;
187
- --_rs-cl-chip-horizontal-padding:32px;
189
+ --_rs-cl-chip-base-horizontal-padding:32px;
190
+ --_rs-cl-chip-compact-horizontal-padding:16px;
188
191
  --_rs-cl-chip-icon-size:28px;
189
192
  --_rs-cl-chip-icon-offset:16px;
190
193
  --_rs-cl-vertical-gap:16px;
194
+ --_rs-cl-base-horizontal-gap:8px;
195
+ --_rs-cl-compact-horizontal-gap:6px;
191
196
  --_rs-cl-sparse-horizontal-gap:16px;
192
197
  }
193
198
  @media screen and (max-width: 640px){
@@ -282,37 +287,33 @@
282
287
  }
283
288
  @define-mixin rs-chip-list-multi-sparse-true{
284
289
  &:not(html){
285
- --_rs-cl-sparse-horizontal-gap-or-initial:var(
286
- --_rs-cl-sparse-horizontal-gap
287
- );
290
+ --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-sparse-horizontal-gap);
288
291
  }
289
292
  @media screen and (max-width: 640px){
290
293
  &:not(html){
291
- --_rs-cl-sparse-horizontal-gap-or-initial:8px;
294
+ --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
292
295
  }
293
296
  }
294
297
  }
295
298
  @define-mixin rs-chip-list-multi-sparse-false{
296
299
  &:not(html){
297
- --_rs-cl-sparse-horizontal-gap-or-initial:initial;
300
+ --_rs-cl-horizontal-gap-from-sparse:initial;
298
301
  }
299
302
  }
300
303
  @define-mixin rs-chip-list-multi-size-xs{
301
304
  &:not(html){
302
- --_rs-cl-chip-border-radius:4px;
303
- --_rs-cl-chip-multiline-border-radius:4px;
305
+ --_rs-cl-chip-base-border-radius:4px;
306
+ --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
304
307
  --_rs-cl-chip-vertical-padding:2px;
305
- --_rs-cl-chip-horizontal-padding:16px;
308
+ --_rs-cl-chip-base-horizontal-padding:16px;
309
+ --_rs-cl-chip-compact-horizontal-padding:8px;
306
310
  --_rs-cl-chip-icon-size:16px;
307
311
  --_rs-cl-chip-icon-offset:8px;
308
312
  --_rs-cl-chip-icon-margin-top:2px;
309
- --_rs-cl-vertical-gap:12px;
310
- --_rs-cl-sparse-horizontal-gap:12px;
311
- }
312
- @media screen and (max-width: 640px){
313
- &:not(html){
314
313
  --_rs-cl-vertical-gap:8px;
315
- }
314
+ --_rs-cl-base-horizontal-gap:8px;
315
+ --_rs-cl-compact-horizontal-gap:4px;
316
+ --_rs-cl-sparse-horizontal-gap:12px;
316
317
  }
317
318
  &:not(html) [data-rs-internal='chip-list__chip']{
318
319
  --_rs-typography-letter-spacing:0.0045em;
@@ -351,13 +352,16 @@
351
352
  }
352
353
  @define-mixin rs-chip-list-multi-size-s{
353
354
  &:not(html){
354
- --_rs-cl-chip-border-radius:24px;
355
- --_rs-cl-chip-multiline-border-radius:4px;
355
+ --_rs-cl-chip-base-border-radius:16px;
356
+ --_rs-cl-chip-compact-border-radius:4px;
356
357
  --_rs-cl-chip-vertical-padding:6px;
357
- --_rs-cl-chip-horizontal-padding:16px;
358
+ --_rs-cl-chip-base-horizontal-padding:16px;
359
+ --_rs-cl-chip-compact-horizontal-padding:8px;
358
360
  --_rs-cl-chip-icon-size:20px;
359
361
  --_rs-cl-chip-icon-offset:8px;
360
362
  --_rs-cl-vertical-gap:12px;
363
+ --_rs-cl-base-horizontal-gap:8px;
364
+ --_rs-cl-compact-horizontal-gap:6px;
361
365
  --_rs-cl-sparse-horizontal-gap:12px;
362
366
  }
363
367
  &:not(html) [data-rs-internal='chip-list__chip']{
@@ -397,13 +401,16 @@
397
401
  }
398
402
  @define-mixin rs-chip-list-multi-size-m{
399
403
  &:not(html){
400
- --_rs-cl-chip-border-radius:24px;
401
- --_rs-cl-chip-multiline-border-radius:8px;
404
+ --_rs-cl-chip-base-border-radius:20px;
405
+ --_rs-cl-chip-compact-border-radius:8px;
402
406
  --_rs-cl-chip-vertical-padding:8px;
403
- --_rs-cl-chip-horizontal-padding:24px;
407
+ --_rs-cl-chip-base-horizontal-padding:24px;
408
+ --_rs-cl-chip-compact-horizontal-padding:12px;
404
409
  --_rs-cl-chip-icon-size:24px;
405
410
  --_rs-cl-chip-icon-offset:8px;
406
411
  --_rs-cl-vertical-gap:12px;
412
+ --_rs-cl-base-horizontal-gap:8px;
413
+ --_rs-cl-compact-horizontal-gap:6px;
407
414
  --_rs-cl-sparse-horizontal-gap:16px;
408
415
  }
409
416
  &:not(html) [data-rs-internal='chip-list__chip']{
@@ -448,13 +455,16 @@
448
455
  }
449
456
  @define-mixin rs-chip-list-multi-size-l{
450
457
  &:not(html){
451
- --_rs-cl-chip-border-radius:36px;
452
- --_rs-cl-chip-multiline-border-radius:12px;
458
+ --_rs-cl-chip-base-border-radius:26px;
459
+ --_rs-cl-chip-compact-border-radius:12px;
453
460
  --_rs-cl-chip-vertical-padding:12px;
454
- --_rs-cl-chip-horizontal-padding:32px;
461
+ --_rs-cl-chip-base-horizontal-padding:32px;
462
+ --_rs-cl-chip-compact-horizontal-padding:16px;
455
463
  --_rs-cl-chip-icon-size:28px;
456
464
  --_rs-cl-chip-icon-offset:16px;
457
465
  --_rs-cl-vertical-gap:16px;
466
+ --_rs-cl-base-horizontal-gap:8px;
467
+ --_rs-cl-compact-horizontal-gap:6px;
458
468
  --_rs-cl-sparse-horizontal-gap:16px;
459
469
  }
460
470
  @media screen and (max-width: 640px){
package/lib/public-api.pcss CHANGED
@@ -15,37 +15,33 @@
15
15
  }
16
16
  @define-mixin rs-chip-list-sparse-true{
17
17
  &:not(html){
18
- --_rs-cl-sparse-horizontal-gap-or-initial:var(
19
- --_rs-cl-sparse-horizontal-gap
20
- );
18
+ --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-sparse-horizontal-gap);
21
19
  }
22
20
  @media screen and (max-width: 640px){
23
21
  &:not(html){
24
- --_rs-cl-sparse-horizontal-gap-or-initial:8px;
22
+ --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
25
23
  }
26
24
  }
27
25
  }
28
26
  @define-mixin rs-chip-list-sparse-false{
29
27
  &:not(html){
30
- --_rs-cl-sparse-horizontal-gap-or-initial:initial;
28
+ --_rs-cl-horizontal-gap-from-sparse:initial;
31
29
  }
32
30
  }
33
31
  @define-mixin rs-chip-list-size-xs{
34
32
  &:not(html){
35
- --_rs-cl-chip-border-radius:4px;
36
- --_rs-cl-chip-multiline-border-radius:4px;
33
+ --_rs-cl-chip-base-border-radius:4px;
34
+ --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
37
35
  --_rs-cl-chip-vertical-padding:2px;
38
- --_rs-cl-chip-horizontal-padding:16px;
36
+ --_rs-cl-chip-base-horizontal-padding:16px;
37
+ --_rs-cl-chip-compact-horizontal-padding:8px;
39
38
  --_rs-cl-chip-icon-size:16px;
40
39
  --_rs-cl-chip-icon-offset:8px;
41
40
  --_rs-cl-chip-icon-margin-top:2px;
42
- --_rs-cl-vertical-gap:12px;
43
- --_rs-cl-sparse-horizontal-gap:12px;
44
- }
45
- @media screen and (max-width: 640px){
46
- &:not(html){
47
41
  --_rs-cl-vertical-gap:8px;
48
- }
42
+ --_rs-cl-base-horizontal-gap:8px;
43
+ --_rs-cl-compact-horizontal-gap:4px;
44
+ --_rs-cl-sparse-horizontal-gap:12px;
49
45
  }
50
46
  &:not(html) [data-rs-internal='chip-list__chip']{
51
47
  --_rs-typography-letter-spacing:0.0045em;
@@ -84,13 +80,16 @@
84
80
  }
85
81
  @define-mixin rs-chip-list-size-s{
86
82
  &:not(html){
87
- --_rs-cl-chip-border-radius:24px;
88
- --_rs-cl-chip-multiline-border-radius:4px;
83
+ --_rs-cl-chip-base-border-radius:16px;
84
+ --_rs-cl-chip-compact-border-radius:4px;
89
85
  --_rs-cl-chip-vertical-padding:6px;
90
- --_rs-cl-chip-horizontal-padding:16px;
86
+ --_rs-cl-chip-base-horizontal-padding:16px;
87
+ --_rs-cl-chip-compact-horizontal-padding:8px;
91
88
  --_rs-cl-chip-icon-size:20px;
92
89
  --_rs-cl-chip-icon-offset:8px;
93
90
  --_rs-cl-vertical-gap:12px;
91
+ --_rs-cl-base-horizontal-gap:8px;
92
+ --_rs-cl-compact-horizontal-gap:6px;
94
93
  --_rs-cl-sparse-horizontal-gap:12px;
95
94
  }
96
95
  &:not(html) [data-rs-internal='chip-list__chip']{
@@ -130,13 +129,16 @@
130
129
  }
131
130
  @define-mixin rs-chip-list-size-m{
132
131
  &:not(html){
133
- --_rs-cl-chip-border-radius:24px;
134
- --_rs-cl-chip-multiline-border-radius:8px;
132
+ --_rs-cl-chip-base-border-radius:20px;
133
+ --_rs-cl-chip-compact-border-radius:8px;
135
134
  --_rs-cl-chip-vertical-padding:8px;
136
- --_rs-cl-chip-horizontal-padding:24px;
135
+ --_rs-cl-chip-base-horizontal-padding:24px;
136
+ --_rs-cl-chip-compact-horizontal-padding:12px;
137
137
  --_rs-cl-chip-icon-size:24px;
138
138
  --_rs-cl-chip-icon-offset:8px;
139
139
  --_rs-cl-vertical-gap:12px;
140
+ --_rs-cl-base-horizontal-gap:8px;
141
+ --_rs-cl-compact-horizontal-gap:6px;
140
142
  --_rs-cl-sparse-horizontal-gap:16px;
141
143
  }
142
144
  &:not(html) [data-rs-internal='chip-list__chip']{
@@ -181,13 +183,16 @@
181
183
  }
182
184
  @define-mixin rs-chip-list-size-l{
183
185
  &:not(html){
184
- --_rs-cl-chip-border-radius:36px;
185
- --_rs-cl-chip-multiline-border-radius:12px;
186
+ --_rs-cl-chip-base-border-radius:26px;
187
+ --_rs-cl-chip-compact-border-radius:12px;
186
188
  --_rs-cl-chip-vertical-padding:12px;
187
- --_rs-cl-chip-horizontal-padding:32px;
189
+ --_rs-cl-chip-base-horizontal-padding:32px;
190
+ --_rs-cl-chip-compact-horizontal-padding:16px;
188
191
  --_rs-cl-chip-icon-size:28px;
189
192
  --_rs-cl-chip-icon-offset:16px;
190
193
  --_rs-cl-vertical-gap:16px;
194
+ --_rs-cl-base-horizontal-gap:8px;
195
+ --_rs-cl-compact-horizontal-gap:6px;
191
196
  --_rs-cl-sparse-horizontal-gap:16px;
192
197
  }
193
198
  @media screen and (max-width: 640px){
@@ -282,37 +287,33 @@
282
287
  }
283
288
  @define-mixin rs-chip-list-multi-sparse-true{
284
289
  &:not(html){
285
- --_rs-cl-sparse-horizontal-gap-or-initial:var(
286
- --_rs-cl-sparse-horizontal-gap
287
- );
290
+ --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-sparse-horizontal-gap);
288
291
  }
289
292
  @media screen and (max-width: 640px){
290
293
  &:not(html){
291
- --_rs-cl-sparse-horizontal-gap-or-initial:8px;
294
+ --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
292
295
  }
293
296
  }
294
297
  }
295
298
  @define-mixin rs-chip-list-multi-sparse-false{
296
299
  &:not(html){
297
- --_rs-cl-sparse-horizontal-gap-or-initial:initial;
300
+ --_rs-cl-horizontal-gap-from-sparse:initial;
298
301
  }
299
302
  }
300
303
  @define-mixin rs-chip-list-multi-size-xs{
301
304
  &:not(html){
302
- --_rs-cl-chip-border-radius:4px;
303
- --_rs-cl-chip-multiline-border-radius:4px;
305
+ --_rs-cl-chip-base-border-radius:4px;
306
+ --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
304
307
  --_rs-cl-chip-vertical-padding:2px;
305
- --_rs-cl-chip-horizontal-padding:16px;
308
+ --_rs-cl-chip-base-horizontal-padding:16px;
309
+ --_rs-cl-chip-compact-horizontal-padding:8px;
306
310
  --_rs-cl-chip-icon-size:16px;
307
311
  --_rs-cl-chip-icon-offset:8px;
308
312
  --_rs-cl-chip-icon-margin-top:2px;
309
- --_rs-cl-vertical-gap:12px;
310
- --_rs-cl-sparse-horizontal-gap:12px;
311
- }
312
- @media screen and (max-width: 640px){
313
- &:not(html){
314
313
  --_rs-cl-vertical-gap:8px;
315
- }
314
+ --_rs-cl-base-horizontal-gap:8px;
315
+ --_rs-cl-compact-horizontal-gap:4px;
316
+ --_rs-cl-sparse-horizontal-gap:12px;
316
317
  }
317
318
  &:not(html) [data-rs-internal='chip-list__chip']{
318
319
  --_rs-typography-letter-spacing:0.0045em;
@@ -351,13 +352,16 @@
351
352
  }
352
353
  @define-mixin rs-chip-list-multi-size-s{
353
354
  &:not(html){
354
- --_rs-cl-chip-border-radius:24px;
355
- --_rs-cl-chip-multiline-border-radius:4px;
355
+ --_rs-cl-chip-base-border-radius:16px;
356
+ --_rs-cl-chip-compact-border-radius:4px;
356
357
  --_rs-cl-chip-vertical-padding:6px;
357
- --_rs-cl-chip-horizontal-padding:16px;
358
+ --_rs-cl-chip-base-horizontal-padding:16px;
359
+ --_rs-cl-chip-compact-horizontal-padding:8px;
358
360
  --_rs-cl-chip-icon-size:20px;
359
361
  --_rs-cl-chip-icon-offset:8px;
360
362
  --_rs-cl-vertical-gap:12px;
363
+ --_rs-cl-base-horizontal-gap:8px;
364
+ --_rs-cl-compact-horizontal-gap:6px;
361
365
  --_rs-cl-sparse-horizontal-gap:12px;
362
366
  }
363
367
  &:not(html) [data-rs-internal='chip-list__chip']{
@@ -397,13 +401,16 @@
397
401
  }
398
402
  @define-mixin rs-chip-list-multi-size-m{
399
403
  &:not(html){
400
- --_rs-cl-chip-border-radius:24px;
401
- --_rs-cl-chip-multiline-border-radius:8px;
404
+ --_rs-cl-chip-base-border-radius:20px;
405
+ --_rs-cl-chip-compact-border-radius:8px;
402
406
  --_rs-cl-chip-vertical-padding:8px;
403
- --_rs-cl-chip-horizontal-padding:24px;
407
+ --_rs-cl-chip-base-horizontal-padding:24px;
408
+ --_rs-cl-chip-compact-horizontal-padding:12px;
404
409
  --_rs-cl-chip-icon-size:24px;
405
410
  --_rs-cl-chip-icon-offset:8px;
406
411
  --_rs-cl-vertical-gap:12px;
412
+ --_rs-cl-base-horizontal-gap:8px;
413
+ --_rs-cl-compact-horizontal-gap:6px;
407
414
  --_rs-cl-sparse-horizontal-gap:16px;
408
415
  }
409
416
  &:not(html) [data-rs-internal='chip-list__chip']{
@@ -448,13 +455,16 @@
448
455
  }
449
456
  @define-mixin rs-chip-list-multi-size-l{
450
457
  &:not(html){
451
- --_rs-cl-chip-border-radius:36px;
452
- --_rs-cl-chip-multiline-border-radius:12px;
458
+ --_rs-cl-chip-base-border-radius:26px;
459
+ --_rs-cl-chip-compact-border-radius:12px;
453
460
  --_rs-cl-chip-vertical-padding:12px;
454
- --_rs-cl-chip-horizontal-padding:32px;
461
+ --_rs-cl-chip-base-horizontal-padding:32px;
462
+ --_rs-cl-chip-compact-horizontal-padding:16px;
455
463
  --_rs-cl-chip-icon-size:28px;
456
464
  --_rs-cl-chip-icon-offset:16px;
457
465
  --_rs-cl-vertical-gap:16px;
466
+ --_rs-cl-base-horizontal-gap:8px;
467
+ --_rs-cl-compact-horizontal-gap:6px;
458
468
  --_rs-cl-sparse-horizontal-gap:16px;
459
469
  }
460
470
  @media screen and (max-width: 640px){
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/chip-list",
3
- "version": "0.8.0",
3
+ "version": "0.9.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -16,25 +16,25 @@
16
16
  "dependencies": {
17
17
  "@babel/runtime-corejs3": "^7.14.0",
18
18
  "@juggle/resize-observer": "3.3.0",
19
- "@rescui/button": "^0.15.0",
20
- "@rescui/icons": "^0.16.0",
19
+ "@rescui/button": "^0.15.2",
20
+ "@rescui/icons": "^0.16.1",
21
21
  "classnames": "^2.2.6",
22
22
  "core-js": "^3.9.1"
23
23
  },
24
24
  "peerDependencies": {
25
- "@rescui/ui-contexts": "^0.4.0",
25
+ "@rescui/ui-contexts": "^0.5.0",
26
26
  "prop-types": "^15.7.2",
27
27
  "react": ">=16.8.0 <19"
28
28
  },
29
29
  "devDependencies": {
30
30
  "@rescui/colors": "^0.2.0",
31
31
  "@rescui/scripts": "^0.3.0",
32
- "@rescui/typography": "^0.16.0",
32
+ "@rescui/typography": "^0.16.1",
33
33
  "@rescui/visual-regression": "^0.1.1"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "rescui-scripts build && yarn run build-pcss-api",
37
37
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
38
38
  },
39
- "gitHead": "51da8a7188f4c558c563065a4ff4ef5c8e74994c"
39
+ "gitHead": "73268bf009792a4c5565b66806ed063c0c503ba2"
40
40
  }