@salutejs/sdds-cs 0.328.0-canary.1906.17459907241.0 → 0.328.0-canary.2163.17581420375.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 (38) hide show
  1. package/CHANGELOG.md +107 -1466
  2. package/components/Autocomplete/Autocomplete.config.js +3 -4
  3. package/components/Autocomplete/Autocomplete.d.ts +124 -117
  4. package/components/Autocomplete/Autocomplete.js +76 -4
  5. package/components/Combobox/Combobox.config.js +2 -2
  6. package/components/Combobox/Combobox.d.ts +48 -24
  7. package/components/DatePicker/DatePicker.config.js +4 -5
  8. package/components/Dropdown/Dropdown.d.ts +6 -6
  9. package/components/Pagination/Pagination.config.js +5 -3
  10. package/components/Select/Select.config.js +1 -1
  11. package/components/Select/Select.d.ts +12 -6
  12. package/components/TextArea/TextArea.config.js +5 -10
  13. package/components/TextField/TextField.config.js +3 -4
  14. package/emotion/cjs/components/Autocomplete/Autocomplete.config.js +3 -4
  15. package/emotion/cjs/components/Autocomplete/Autocomplete.js +76 -4
  16. package/emotion/cjs/components/Combobox/Combobox.config.js +2 -2
  17. package/emotion/cjs/components/DatePicker/DatePicker.config.js +4 -5
  18. package/emotion/cjs/components/Pagination/Pagination.config.js +5 -3
  19. package/emotion/cjs/components/Select/Select.config.js +1 -1
  20. package/emotion/cjs/components/TextArea/TextArea.config.js +5 -10
  21. package/emotion/cjs/components/TextField/TextField.config.js +3 -4
  22. package/emotion/es/components/Autocomplete/Autocomplete.config.js +3 -4
  23. package/emotion/es/components/Autocomplete/Autocomplete.js +61 -2
  24. package/emotion/es/components/Combobox/Combobox.config.js +2 -2
  25. package/emotion/es/components/DatePicker/DatePicker.config.js +4 -5
  26. package/emotion/es/components/Pagination/Pagination.config.js +5 -3
  27. package/emotion/es/components/Select/Select.config.js +1 -1
  28. package/emotion/es/components/TextArea/TextArea.config.js +5 -10
  29. package/emotion/es/components/TextField/TextField.config.js +3 -4
  30. package/es/components/Autocomplete/Autocomplete.config.js +3 -4
  31. package/es/components/Autocomplete/Autocomplete.js +61 -2
  32. package/es/components/Combobox/Combobox.config.js +2 -2
  33. package/es/components/DatePicker/DatePicker.config.js +4 -5
  34. package/es/components/Pagination/Pagination.config.js +5 -3
  35. package/es/components/Select/Select.config.js +1 -1
  36. package/es/components/TextArea/TextArea.config.js +5 -10
  37. package/es/components/TextField/TextField.config.js +3 -4
  38. package/package.json +8 -8
@@ -58,7 +58,6 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
58
58
  placement?: import("@salutejs/plasma-new-hope/types/components/Select/Select.types").SelectPlacement | Array<import("@salutejs/plasma-new-hope/types/components/Select/Select.types").SelectPlacementBasic>;
59
59
  variant?: "normal" | "tight";
60
60
  zIndex?: React.CSSProperties["zIndex"];
61
- listOverflow?: React.CSSProperties["overflow"];
62
61
  listMaxHeight?: React.CSSProperties["height"];
63
62
  listWidth?: React.CSSProperties["width"];
64
63
  portal?: string | React.RefObject<HTMLElement>;
@@ -70,6 +69,7 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
70
69
  virtual?: boolean;
71
70
  onScroll?: (e: React.UIEvent<HTMLElement>) => void;
72
71
  onToggle?: (isOpen: boolean) => void;
72
+ mode?: "default" | "radio";
73
73
  size?: string;
74
74
  view?: string;
75
75
  chipView?: string;
@@ -78,6 +78,7 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
78
78
  isOpen?: boolean;
79
79
  listHeight?: React.CSSProperties["height"];
80
80
  onScrollBottom?: (e: React.UIEvent<HTMLElement>) => void;
81
+ listOverflow?: React.CSSProperties["overflow"];
81
82
  } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React.RefAttributes<HTMLButtonElement>) | (import("@salutejs/plasma-new-hope/types/components/TextField/TextField.types").LabelProps & import("@salutejs/plasma-new-hope/types/components/TextField/TextField.types").RequiredProps & {
82
83
  hintText: string;
83
84
  hintTrigger?: "hover" | "click";
@@ -116,7 +117,6 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
116
117
  placement?: import("@salutejs/plasma-new-hope/types/components/Select/Select.types").SelectPlacement | Array<import("@salutejs/plasma-new-hope/types/components/Select/Select.types").SelectPlacementBasic>;
117
118
  variant?: "normal" | "tight";
118
119
  zIndex?: React.CSSProperties["zIndex"];
119
- listOverflow?: React.CSSProperties["overflow"];
120
120
  listMaxHeight?: React.CSSProperties["height"];
121
121
  listWidth?: React.CSSProperties["width"];
122
122
  portal?: string | React.RefObject<HTMLElement>;
@@ -128,6 +128,7 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
128
128
  virtual?: boolean;
129
129
  onScroll?: (e: React.UIEvent<HTMLElement>) => void;
130
130
  onToggle?: (isOpen: boolean) => void;
131
+ mode?: "default" | "radio";
131
132
  size?: string;
132
133
  view?: string;
133
134
  chipView?: string;
@@ -136,6 +137,7 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
136
137
  isOpen?: boolean;
137
138
  listHeight?: React.CSSProperties["height"];
138
139
  onScrollBottom?: (e: React.UIEvent<HTMLElement>) => void;
140
+ listOverflow?: React.CSSProperties["overflow"];
139
141
  } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React.RefAttributes<HTMLButtonElement>) | (import("@salutejs/plasma-new-hope/types/components/TextField/TextField.types").LabelProps & import("@salutejs/plasma-new-hope/types/components/TextField/TextField.types").RequiredProps & {
140
142
  hintTrigger?: never;
141
143
  hintText?: never;
@@ -173,7 +175,6 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
173
175
  placement?: import("@salutejs/plasma-new-hope/types/components/Select/Select.types").SelectPlacement | Array<import("@salutejs/plasma-new-hope/types/components/Select/Select.types").SelectPlacementBasic>;
174
176
  variant?: "normal" | "tight";
175
177
  zIndex?: React.CSSProperties["zIndex"];
176
- listOverflow?: React.CSSProperties["overflow"];
177
178
  listMaxHeight?: React.CSSProperties["height"];
178
179
  listWidth?: React.CSSProperties["width"];
179
180
  portal?: string | React.RefObject<HTMLElement>;
@@ -185,6 +186,7 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
185
186
  virtual?: boolean;
186
187
  onScroll?: (e: React.UIEvent<HTMLElement>) => void;
187
188
  onToggle?: (isOpen: boolean) => void;
189
+ mode?: "default" | "radio";
188
190
  size?: string;
189
191
  view?: string;
190
192
  chipView?: string;
@@ -193,6 +195,7 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
193
195
  isOpen?: boolean;
194
196
  listHeight?: React.CSSProperties["height"];
195
197
  onScrollBottom?: (e: React.UIEvent<HTMLElement>) => void;
198
+ listOverflow?: React.CSSProperties["overflow"];
196
199
  } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React.RefAttributes<HTMLButtonElement>) | (import("@salutejs/plasma-new-hope/types/components/TextField/TextField.types").LabelProps & import("@salutejs/plasma-new-hope/types/components/TextField/TextField.types").RequiredProps & {
197
200
  hintTrigger?: never;
198
201
  hintText?: never;
@@ -231,7 +234,6 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
231
234
  placement?: import("@salutejs/plasma-new-hope/types/components/Select/Select.types").SelectPlacement | Array<import("@salutejs/plasma-new-hope/types/components/Select/Select.types").SelectPlacementBasic>;
232
235
  variant?: "normal" | "tight";
233
236
  zIndex?: React.CSSProperties["zIndex"];
234
- listOverflow?: React.CSSProperties["overflow"];
235
237
  listMaxHeight?: React.CSSProperties["height"];
236
238
  listWidth?: React.CSSProperties["width"];
237
239
  portal?: string | React.RefObject<HTMLElement>;
@@ -243,6 +245,7 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
243
245
  virtual?: boolean;
244
246
  onScroll?: (e: React.UIEvent<HTMLElement>) => void;
245
247
  onToggle?: (isOpen: boolean) => void;
248
+ mode?: "default" | "radio";
246
249
  size?: string;
247
250
  view?: string;
248
251
  chipView?: string;
@@ -251,6 +254,7 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
251
254
  isOpen?: boolean;
252
255
  listHeight?: React.CSSProperties["height"];
253
256
  onScrollBottom?: (e: React.UIEvent<HTMLElement>) => void;
257
+ listOverflow?: React.CSSProperties["overflow"];
254
258
  } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React.RefAttributes<HTMLButtonElement>) | (import("@salutejs/plasma-new-hope/types/components/TextField/TextField.types").LabelProps & {
255
259
  target: "button-like";
256
260
  view?: "default" | "accent" | "secondary" | "clear" | "positive" | "warning" | "negative" | "dark" | "black" | "white";
@@ -276,7 +280,6 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
276
280
  placement?: import("@salutejs/plasma-new-hope/types/components/Select/Select.types").SelectPlacement | Array<import("@salutejs/plasma-new-hope/types/components/Select/Select.types").SelectPlacementBasic>;
277
281
  variant?: "normal" | "tight";
278
282
  zIndex?: React.CSSProperties["zIndex"];
279
- listOverflow?: React.CSSProperties["overflow"];
280
283
  listMaxHeight?: React.CSSProperties["height"];
281
284
  listWidth?: React.CSSProperties["width"];
282
285
  portal?: string | React.RefObject<HTMLElement>;
@@ -288,6 +291,7 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
288
291
  virtual?: boolean;
289
292
  onScroll?: (e: React.UIEvent<HTMLElement>) => void;
290
293
  onToggle?: (isOpen: boolean) => void;
294
+ mode?: "default" | "radio";
291
295
  size?: string;
292
296
  view?: string;
293
297
  chipView?: string;
@@ -296,6 +300,7 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
296
300
  isOpen?: boolean;
297
301
  listHeight?: React.CSSProperties["height"];
298
302
  onScrollBottom?: (e: React.UIEvent<HTMLElement>) => void;
303
+ listOverflow?: React.CSSProperties["overflow"];
299
304
  } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React.RefAttributes<HTMLButtonElement>) | (import("@salutejs/plasma-new-hope/types/components/TextField/TextField.types").LabelProps & {
300
305
  target: "button-like";
301
306
  view?: "default" | "accent" | "secondary" | "clear" | "positive" | "warning" | "negative" | "dark" | "black" | "white";
@@ -322,7 +327,6 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
322
327
  placement?: import("@salutejs/plasma-new-hope/types/components/Select/Select.types").SelectPlacement | Array<import("@salutejs/plasma-new-hope/types/components/Select/Select.types").SelectPlacementBasic>;
323
328
  variant?: "normal" | "tight";
324
329
  zIndex?: React.CSSProperties["zIndex"];
325
- listOverflow?: React.CSSProperties["overflow"];
326
330
  listMaxHeight?: React.CSSProperties["height"];
327
331
  listWidth?: React.CSSProperties["width"];
328
332
  portal?: string | React.RefObject<HTMLElement>;
@@ -334,6 +338,7 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
334
338
  virtual?: boolean;
335
339
  onScroll?: (e: React.UIEvent<HTMLElement>) => void;
336
340
  onToggle?: (isOpen: boolean) => void;
341
+ mode?: "default" | "radio";
337
342
  size?: string;
338
343
  view?: string;
339
344
  chipView?: string;
@@ -342,6 +347,7 @@ declare const SelectNewHope: React.FunctionComponent<import("@salutejs/plasma-ne
342
347
  isOpen?: boolean;
343
348
  listHeight?: React.CSSProperties["height"];
344
349
  onScrollBottom?: (e: React.UIEvent<HTMLElement>) => void;
350
+ listOverflow?: React.CSSProperties["overflow"];
345
351
  } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React.RefAttributes<HTMLButtonElement>))>;
346
352
  export type SelectProps<K extends ItemOptionSelect> = DistributiveOmit<SelectPropsNewHope<K>, 'size' | 'view' | 'chipView' | 'disabled'> & DistributivePick<ComponentProps<typeof SelectNewHope>, 'size' | 'view' | 'chipView' | 'disabled'>;
347
353
  declare const Select: <K extends ItemOptionSelect>(props: SelectProps<K> & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
@@ -319,15 +319,10 @@ function _templateObject8() {
319
319
  function _templateObject9() {
320
320
  var data = _tagged_template_literal([
321
321
  "\n ",
322
- ": 0.4;\n ",
323
- ": var(--text-secondary);\n ",
324
- ": var(--text-primary);\n ",
325
- ": var(--surface-transparent-primary);\n ",
326
- ": 0.4;\n ",
327
- ": var(--surface-clear);\n ",
328
- ": var(--surface-clear);\n ",
329
- ": var(--surface-clear);\n ",
330
- ": var(--surface-clear);\n ",
322
+ ": transparent;\n ",
323
+ ": transparent;\n ",
324
+ ": transparent;\n ",
325
+ ": transparent;\n ",
331
326
  ": var(--text-primary);\n ",
332
327
  ": var(--text-primary);\n ",
333
328
  ": var(--text-secondary);\n ",
@@ -371,7 +366,7 @@ var config = {
371
366
  true: (0, _styledcomponents.css)(_templateObject8(), _styledcomponents.textAreaTokens.disabledOpacity, _styledcomponents.textAreaTokens.backgroundColor, _styledcomponents.textAreaTokens.borderColor, _styledcomponents.textAreaTokens.borderColorHover, _styledcomponents.textAreaTokens.borderColorFocus, _styledcomponents.textAreaTokens.inputColor, _styledcomponents.textAreaTokens.inputColorFocus, _styledcomponents.textAreaTokens.placeholderColorFocus, _styledcomponents.textAreaTokens.labelOuterColor, _styledcomponents.textAreaTokens.inputColorDisabled)
372
367
  },
373
368
  readOnly: {
374
- true: (0, _styledcomponents.css)(_templateObject9(), _styledcomponents.textAreaTokens.readOnlyOpacity, _styledcomponents.textAreaTokens.labelOuterColor, _styledcomponents.textAreaTokens.inputColorReadOnly, _styledcomponents.textAreaTokens.dividerColorReadOnly, _styledcomponents.textAreaTokens.contentSlotRightOpacityReadOnly, _styledcomponents.textAreaTokens.backgroundColor, _styledcomponents.textAreaTokens.borderColor, _styledcomponents.textAreaTokens.borderColorHover, _styledcomponents.textAreaTokens.borderColorFocus, _styledcomponents.textAreaTokens.inputColor, _styledcomponents.textAreaTokens.inputColorFocus, _styledcomponents.textAreaTokens.placeholderColorFocus, _styledcomponents.textAreaTokens.labelOuterColor)
369
+ true: (0, _styledcomponents.css)(_templateObject9(), _styledcomponents.textAreaTokens.backgroundColor, _styledcomponents.textAreaTokens.borderColor, _styledcomponents.textAreaTokens.borderColorHover, _styledcomponents.textAreaTokens.borderColorFocus, _styledcomponents.textAreaTokens.inputColor, _styledcomponents.textAreaTokens.inputColorFocus, _styledcomponents.textAreaTokens.placeholderColorFocus, _styledcomponents.textAreaTokens.labelOuterColor)
375
370
  }
376
371
  }
377
372
  };
@@ -293,13 +293,12 @@ function _templateObject9() {
293
293
  "\n ",
294
294
  ": 1;\n ",
295
295
  ": var(--text-primary);\n ",
296
- ": var(--surface-clear);\n ",
296
+ ": transparent;\n ",
297
297
  ": var(--text-secondary);\n ",
298
298
  ": var(--text-secondary);\n ",
299
299
  ": var(--text-secondary);\n ",
300
300
  ": var(--text-secondary);\n ",
301
- ": var(--outline-solid-secondary);\n ",
302
- ": 0.4;\n "
301
+ ": var(--outline-solid-secondary);\n "
303
302
  ]);
304
303
  _templateObject9 = function _templateObject() {
305
304
  return data;
@@ -338,7 +337,7 @@ var config = {
338
337
  true: (0, _styledcomponents.css)(_templateObject8(), _styledcomponents.textFieldTokens.disabledOpacity, _styledcomponents.textFieldTokens.backgroundColor, _styledcomponents.textFieldTokens.backgroundColorFocus, _styledcomponents.textFieldTokens.borderColor, _styledcomponents.textFieldTokens.borderColorHover, _styledcomponents.textFieldTokens.borderColorFocus, _styledcomponents.textFieldTokens.color)
339
338
  },
340
339
  readOnly: {
341
- true: (0, _styledcomponents.css)(_templateObject9(), _styledcomponents.textFieldTokens.readOnlyOpacity, _styledcomponents.textFieldTokens.colorReadOnly, _styledcomponents.textFieldTokens.backgroundColorReadOnly, _styledcomponents.textFieldTokens.placeholderColorReadOnly, _styledcomponents.textFieldTokens.leftHelperColorReadOnly, _styledcomponents.textFieldTokens.titleCaptionColorReadOnly, _styledcomponents.textFieldTokens.labelColorReadOnly, _styledcomponents.textFieldTokens.dividerColorReadOnly, _styledcomponents.textFieldTokens.contentSlotRightOpacityReadOnly)
340
+ true: (0, _styledcomponents.css)(_templateObject9(), _styledcomponents.textFieldTokens.readOnlyOpacity, _styledcomponents.textFieldTokens.colorReadOnly, _styledcomponents.textFieldTokens.backgroundColorReadOnly, _styledcomponents.textFieldTokens.placeholderColorReadOnly, _styledcomponents.textFieldTokens.leftHelperColorReadOnly, _styledcomponents.textFieldTokens.titleCaptionColorReadOnly, _styledcomponents.textFieldTokens.labelColorReadOnly, _styledcomponents.textFieldTokens.dividerColorReadOnly)
342
341
  }
343
342
  }
344
343
  };
@@ -213,9 +213,8 @@ function _templateObject5() {
213
213
  function _templateObject6() {
214
214
  var data = _tagged_template_literal([
215
215
  "\n ",
216
- ": var(--text-primary);\n ",
217
- ": var(--surface-clear);\n ",
218
- ": var(--surface-clear);\n ",
216
+ ": var(--text-secondary);\n ",
217
+ ": var(--surface-transparent-primary);\n ",
219
218
  ": var(--text-secondary);\n ",
220
219
  ": var(--text-secondary);\n ",
221
220
  ": var(--text-secondary);\n "
@@ -247,7 +246,7 @@ var config = {
247
246
  true: (0, _emotion.css)(_templateObject5(), _emotion.autocompleteTokens.itemColor, _emotion.autocompleteTokens.background, _emotion.autocompleteTokens.textFieldColor, _emotion.autocompleteTokens.textFieldLabelColor, _emotion.autocompleteTokens.textFieldBackgroundColor, _emotion.autocompleteTokens.textFieldBackgroundColorHover, _emotion.autocompleteTokens.textFieldBackgroundColorFocus, _emotion.autocompleteTokens.textFieldBorderColor, _emotion.autocompleteTokens.textFieldBorderColorHover, _emotion.autocompleteTokens.textFieldBorderColorFocus)
248
247
  },
249
248
  readOnly: {
250
- true: (0, _emotion.css)(_templateObject6(), _emotion.autocompleteTokens.textFieldColorReadOnly, _emotion.autocompleteTokens.textFieldBackgroundColorReadOnly, _emotion.autocompleteTokens.textFieldBorderColorReadOnly, _emotion.autocompleteTokens.textFieldPlaceholderColorReadOnly, _emotion.autocompleteTokens.textFieldLeftHelperColorReadOnly, _emotion.autocompleteTokens.textFieldLabelColorReadOnly)
249
+ true: (0, _emotion.css)(_templateObject6(), _emotion.autocompleteTokens.textFieldColorReadOnly, _emotion.autocompleteTokens.textFieldBackgroundColorReadOnly, _emotion.autocompleteTokens.textFieldPlaceholderColorReadOnly, _emotion.autocompleteTokens.textFieldLeftHelperColorReadOnly, _emotion.autocompleteTokens.textFieldLabelColorReadOnly)
251
250
  }
252
251
  }
253
252
  };
@@ -2,13 +2,85 @@
2
2
  Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
- Object.defineProperty(exports, "Autocomplete", {
6
- enumerable: true,
7
- get: function() {
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: Object.getOwnPropertyDescriptor(all, name).get
9
+ });
10
+ }
11
+ _export(exports, {
12
+ get Autocomplete () {
8
13
  return Autocomplete;
14
+ },
15
+ get AutocompleteComponent () {
16
+ return AutocompleteComponent;
9
17
  }
10
18
  });
11
19
  var _emotion = require("@salutejs/plasma-new-hope/emotion");
20
+ var _react = /*#__PURE__*/ _interop_require_default(require("react"));
12
21
  var _Autocompleteconfig = require("./Autocomplete.config");
22
+ function _define_property(obj, key, value) {
23
+ if (key in obj) {
24
+ Object.defineProperty(obj, key, {
25
+ value: value,
26
+ enumerable: true,
27
+ configurable: true,
28
+ writable: true
29
+ });
30
+ } else {
31
+ obj[key] = value;
32
+ }
33
+ return obj;
34
+ }
35
+ function _interop_require_default(obj) {
36
+ return obj && obj.__esModule ? obj : {
37
+ default: obj
38
+ };
39
+ }
40
+ function _object_spread(target) {
41
+ for(var i = 1; i < arguments.length; i++){
42
+ var source = arguments[i] != null ? arguments[i] : {};
43
+ var ownKeys = Object.keys(source);
44
+ if (typeof Object.getOwnPropertySymbols === "function") {
45
+ ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
46
+ return Object.getOwnPropertyDescriptor(source, sym).enumerable;
47
+ }));
48
+ }
49
+ ownKeys.forEach(function(key) {
50
+ _define_property(target, key, source[key]);
51
+ });
52
+ }
53
+ return target;
54
+ }
55
+ function ownKeys(object, enumerableOnly) {
56
+ var keys = Object.keys(object);
57
+ if (Object.getOwnPropertySymbols) {
58
+ var symbols = Object.getOwnPropertySymbols(object);
59
+ if (enumerableOnly) {
60
+ symbols = symbols.filter(function(sym) {
61
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
62
+ });
63
+ }
64
+ keys.push.apply(keys, symbols);
65
+ }
66
+ return keys;
67
+ }
68
+ function _object_spread_props(target, source) {
69
+ source = source != null ? source : {};
70
+ if (Object.getOwnPropertyDescriptors) {
71
+ Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
72
+ } else {
73
+ ownKeys(Object(source)).forEach(function(key) {
74
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
75
+ });
76
+ }
77
+ return target;
78
+ }
13
79
  var mergedConfig = (0, _emotion.mergeConfig)(_emotion.autocompleteConfig, _Autocompleteconfig.config);
14
- var Autocomplete = (0, _emotion.component)(mergedConfig);
80
+ var AutocompleteComponent = (0, _emotion.component)(mergedConfig);
81
+ var AutocompleteWithoutRef = function(props, ref) {
82
+ return /*#__PURE__*/ _react.default.createElement(AutocompleteComponent, _object_spread_props(_object_spread({}, props), {
83
+ ref: ref
84
+ }));
85
+ };
86
+ var Autocomplete = (0, _emotion.fixedForwardRef)(AutocompleteWithoutRef);
@@ -280,8 +280,8 @@ function _templateObject6() {
280
280
  var data = _tagged_template_literal([
281
281
  "\n ",
282
282
  ": var(--text-primary);\n ",
283
- ": var(--surface-clear);\n ",
284
- ": var(--text-secondary);\n ",
283
+ ": var(--surface-transparent-primary);\n ",
284
+ ": var(--text-primary);\n ",
285
285
  ": var(--text-secondary);\n ",
286
286
  ": var(--text-secondary);\n ",
287
287
  ": var(--text-primary);\n ",
@@ -234,14 +234,13 @@ function _templateObject2() {
234
234
  function _templateObject3() {
235
235
  var data = _tagged_template_literal([
236
236
  "\n ",
237
- ": var(--surface-clear);\n ",
237
+ ": var(--surface-transparent-primary);\n ",
238
+ ": var(--text-secondary);\n ",
238
239
  ": var(--text-secondary);\n ",
239
240
  ": var(--text-secondary);\n ",
240
241
  ": var(--text-secondary);\n\n ",
241
242
  ": var(--text-secondary);\n ",
242
- ": 0.4;\n\n ",
243
- ": var(--text-primary);\n ",
244
- ": var(--surface-clear);\n ",
243
+ ": var(--surface-transparent-primary);\n ",
245
244
  ": var(--text-secondary);\n "
246
245
  ]);
247
246
  _templateObject3 = function _templateObject() {
@@ -265,7 +264,7 @@ var config = {
265
264
  true: (0, _emotion.css)(_templateObject2(), _emotion.datePickerTokens.background, _emotion.datePickerTokens.borderColor, _emotion.datePickerTokens.borderColorHover, _emotion.datePickerTokens.borderColorFocus, _emotion.datePickerTokens.borderColorSuccess, _emotion.datePickerTokens.textFieldBorderColorFocus, _emotion.datePickerTokens.textFieldColor, _emotion.datePickerTokens.textFieldPlaceholderColor, _emotion.datePickerTokens.textFieldColor, _emotion.datePickerTokens.textFieldPlaceholderColor, _emotion.datePickerTokens.textFieldCaretColor, _emotion.datePickerTokens.textFieldBackgroundColor, _emotion.datePickerTokens.labelColor)
266
265
  },
267
266
  readOnly: {
268
- true: (0, _emotion.css)(_templateObject3(), _emotion.datePickerTokens.backgroundReadOnly, _emotion.datePickerTokens.labelColorReadOnly, _emotion.datePickerTokens.leftHelperColorReadOnly, _emotion.datePickerTokens.labelColor, _emotion.datePickerTokens.dividerColorReadOnly, _emotion.datePickerTokens.dividerOpacityReadOnly, _emotion.datePickerTokens.textFieldColorReadOnly, _emotion.datePickerTokens.textFieldBackgroundColorReadOnly, _emotion.datePickerTokens.textFieldPlaceholderColorReadOnly)
267
+ true: (0, _emotion.css)(_templateObject3(), _emotion.datePickerTokens.backgroundReadOnly, _emotion.datePickerTokens.labelColorReadOnly, _emotion.datePickerTokens.leftHelperColorReadOnly, _emotion.datePickerTokens.dividerColorReadOnly, _emotion.datePickerTokens.labelColor, _emotion.datePickerTokens.textFieldColorReadOnly, _emotion.datePickerTokens.textFieldBackgroundColorReadOnly, _emotion.datePickerTokens.textFieldPlaceholderColorReadOnly)
269
268
  }
270
269
  }
271
270
  };
@@ -37,6 +37,7 @@ function _templateObject() {
37
37
  ": var(--surface-solid-card);\n ",
38
38
  ": var(--outline-solid-primary);\n\n ",
39
39
  ": var(--text-primary);\n ",
40
+ ": var(--text-secondary);\n ",
40
41
  ": var(--surface-accent);\n ",
41
42
  ": var(--text-secondary);\n ",
42
43
  ": var(--surface-clear);\n "
@@ -95,7 +96,8 @@ function _templateObject2() {
95
96
  ": 3rem;\n ",
96
97
  ": 2.5rem;\n ",
97
98
  ": 0 0.625rem;\n ",
98
- ": 0.125rem;\n "
99
+ ": 0.125rem;\n\n ",
100
+ ": 2.5rem;\n "
99
101
  ]);
100
102
  _templateObject2 = function _templateObject() {
101
103
  return data;
@@ -128,13 +130,13 @@ var config = {
128
130
  },
129
131
  variations: {
130
132
  view: {
131
- default: (0, _emotion.css)(_templateObject(), _emotion.paginationTokens.buttonColor, _emotion.paginationTokens.buttonColorHover, _emotion.paginationTokens.buttonColorActive, _emotion.paginationTokens.buttonBackgroundColor, _emotion.paginationTokens.buttonBackgroundColorHover, _emotion.paginationTokens.buttonBackgroundColorActive, _emotion.paginationTokens.buttonHoverColor, _emotion.paginationTokens.buttonActiveColor, _emotion.paginationTokens.buttonArrowColor, _emotion.paginationTokens.buttonArrowColorHover, _emotion.paginationTokens.buttonArrowColorActive, _emotion.paginationTokens.inputBackgroundColor, _emotion.paginationTokens.selectBackgroundColor, _emotion.paginationTokens.inputBorderColor, _emotion.paginationTokens.paginationColor, _emotion.paginationTokens.buttonFocusColor, _emotion.paginationTokens.paginationDisabledButtonColor, _emotion.paginationTokens.paginationDisabledButtonBackgroundColor)
133
+ default: (0, _emotion.css)(_templateObject(), _emotion.paginationTokens.buttonColor, _emotion.paginationTokens.buttonColorHover, _emotion.paginationTokens.buttonColorActive, _emotion.paginationTokens.buttonBackgroundColor, _emotion.paginationTokens.buttonBackgroundColorHover, _emotion.paginationTokens.buttonBackgroundColorActive, _emotion.paginationTokens.buttonHoverColor, _emotion.paginationTokens.buttonActiveColor, _emotion.paginationTokens.buttonArrowColor, _emotion.paginationTokens.buttonArrowColorHover, _emotion.paginationTokens.buttonArrowColorActive, _emotion.paginationTokens.inputBackgroundColor, _emotion.paginationTokens.selectBackgroundColor, _emotion.paginationTokens.inputBorderColor, _emotion.paginationTokens.paginationColor, _emotion.paginationTokens.paginationHelperTextColor, _emotion.paginationTokens.buttonFocusColor, _emotion.paginationTokens.paginationDisabledButtonColor, _emotion.paginationTokens.paginationDisabledButtonBackgroundColor)
132
134
  },
133
135
  viewCurrentPage: {
134
136
  default: (0, _emotion.css)(_templateObject1(), _emotion.paginationTokens.paginationCurrentButtonColor, _emotion.paginationTokens.paginationCurrentButtonBackgroundColor, _emotion.paginationTokens.paginationCurrentButtonHoverColor, _emotion.paginationTokens.paginationCurrentButtonHoverBackgroundColor, _emotion.paginationTokens.paginationCurrentButtonActiveColor, _emotion.paginationTokens.paginationCurrentButtonActiveBackgroundColor)
135
137
  },
136
138
  size: {
137
- s: (0, _emotion.css)(_templateObject2(), _emotion.paginationTokens.paginationFontFamily, _emotion.paginationTokens.paginationFontSize, _emotion.paginationTokens.paginationFontStyle, _emotion.paginationTokens.paginationFontWeight, _emotion.paginationTokens.paginationLetterSpacing, _emotion.paginationTokens.paginationLineHeight, _emotion.paginationTokens.buttonHeight, _emotion.paginationTokens.buttonWidth, _emotion.paginationTokens.buttonWidthShorter, _emotion.paginationTokens.paginationInputWidth, _emotion.paginationTokens.buttonRadius, _emotion.paginationTokens.paginationIconSize, _emotion.paginationTokens.paginationIconDoubleSize, _emotion.paginationTokens.buttonArrowMargin, _emotion.paginationTokens.selectHeight, _emotion.paginationTokens.selectPaddingTop, _emotion.paginationTokens.selectPaddingRight, _emotion.paginationTokens.selectPaddingBottom, _emotion.paginationTokens.selectPaddingLeft, _emotion.paginationTokens.selectItemHeight, _emotion.paginationTokens.selectItemPadding, _emotion.paginationTokens.selectItemContentLeftWidth, _emotion.paginationTokens.selectItemBackground, _emotion.paginationTokens.selectTargetArrowRight, _emotion.paginationTokens.selectTargetPadding, _emotion.paginationTokens.selectTargetInnerTop, _emotion.paginationTokens.selectTargetLabelInnerTop, _emotion.paginationTokens.inputBorderRadius, _emotion.paginationTokens.inputWidth, _emotion.paginationTokens.inputHeight, _emotion.paginationTokens.inputPadding, _emotion.paginationTokens.inputBorderWidth)
139
+ s: (0, _emotion.css)(_templateObject2(), _emotion.paginationTokens.paginationFontFamily, _emotion.paginationTokens.paginationFontSize, _emotion.paginationTokens.paginationFontStyle, _emotion.paginationTokens.paginationFontWeight, _emotion.paginationTokens.paginationLetterSpacing, _emotion.paginationTokens.paginationLineHeight, _emotion.paginationTokens.buttonHeight, _emotion.paginationTokens.buttonWidth, _emotion.paginationTokens.buttonWidthShorter, _emotion.paginationTokens.paginationInputWidth, _emotion.paginationTokens.buttonRadius, _emotion.paginationTokens.paginationIconSize, _emotion.paginationTokens.paginationIconDoubleSize, _emotion.paginationTokens.buttonArrowMargin, _emotion.paginationTokens.selectHeight, _emotion.paginationTokens.selectPaddingTop, _emotion.paginationTokens.selectPaddingRight, _emotion.paginationTokens.selectPaddingBottom, _emotion.paginationTokens.selectPaddingLeft, _emotion.paginationTokens.selectItemHeight, _emotion.paginationTokens.selectItemPadding, _emotion.paginationTokens.selectItemContentLeftWidth, _emotion.paginationTokens.selectItemBackground, _emotion.paginationTokens.selectTargetArrowRight, _emotion.paginationTokens.selectTargetPadding, _emotion.paginationTokens.selectTargetInnerTop, _emotion.paginationTokens.selectTargetLabelInnerTop, _emotion.paginationTokens.inputBorderRadius, _emotion.paginationTokens.inputWidth, _emotion.paginationTokens.inputHeight, _emotion.paginationTokens.inputPadding, _emotion.paginationTokens.inputBorderWidth, _emotion.paginationTokens.paginationHelperTextGap)
138
140
  },
139
141
  type: {
140
142
  compact: (0, _emotion.css)(_templateObject3()),
@@ -271,7 +271,7 @@ function _templateObject7() {
271
271
  "\n ",
272
272
  ": 0.4;\n ",
273
273
  ": var(--text-primary);\n ",
274
- ": var(--surface-clear);\n ",
274
+ ": var(--surface-transparent-primary);\n ",
275
275
  ": var(--text-secondary);\n ",
276
276
  ": var(--text-secondary);\n ",
277
277
  ": var(--text-secondary);\n ",
@@ -319,15 +319,10 @@ function _templateObject8() {
319
319
  function _templateObject9() {
320
320
  var data = _tagged_template_literal([
321
321
  "\n ",
322
- ": 0.4;\n ",
323
- ": var(--text-secondary);\n ",
324
- ": var(--text-primary);\n ",
325
- ": var(--surface-transparent-primary);\n ",
326
- ": 0.4;\n ",
327
- ": var(--surface-clear);\n ",
328
- ": var(--surface-clear);\n ",
329
- ": var(--surface-clear);\n ",
330
- ": var(--surface-clear);\n ",
322
+ ": transparent;\n ",
323
+ ": transparent;\n ",
324
+ ": transparent;\n ",
325
+ ": transparent;\n ",
331
326
  ": var(--text-primary);\n ",
332
327
  ": var(--text-primary);\n ",
333
328
  ": var(--text-secondary);\n ",
@@ -371,7 +366,7 @@ var config = {
371
366
  true: (0, _emotion.css)(_templateObject8(), _emotion.textAreaTokens.disabledOpacity, _emotion.textAreaTokens.backgroundColor, _emotion.textAreaTokens.borderColor, _emotion.textAreaTokens.borderColorHover, _emotion.textAreaTokens.borderColorFocus, _emotion.textAreaTokens.inputColor, _emotion.textAreaTokens.inputColorFocus, _emotion.textAreaTokens.placeholderColorFocus, _emotion.textAreaTokens.labelOuterColor, _emotion.textAreaTokens.inputColorDisabled)
372
367
  },
373
368
  readOnly: {
374
- true: (0, _emotion.css)(_templateObject9(), _emotion.textAreaTokens.readOnlyOpacity, _emotion.textAreaTokens.labelOuterColor, _emotion.textAreaTokens.inputColorReadOnly, _emotion.textAreaTokens.dividerColorReadOnly, _emotion.textAreaTokens.contentSlotRightOpacityReadOnly, _emotion.textAreaTokens.backgroundColor, _emotion.textAreaTokens.borderColor, _emotion.textAreaTokens.borderColorHover, _emotion.textAreaTokens.borderColorFocus, _emotion.textAreaTokens.inputColor, _emotion.textAreaTokens.inputColorFocus, _emotion.textAreaTokens.placeholderColorFocus, _emotion.textAreaTokens.labelOuterColor)
369
+ true: (0, _emotion.css)(_templateObject9(), _emotion.textAreaTokens.backgroundColor, _emotion.textAreaTokens.borderColor, _emotion.textAreaTokens.borderColorHover, _emotion.textAreaTokens.borderColorFocus, _emotion.textAreaTokens.inputColor, _emotion.textAreaTokens.inputColorFocus, _emotion.textAreaTokens.placeholderColorFocus, _emotion.textAreaTokens.labelOuterColor)
375
370
  }
376
371
  }
377
372
  };
@@ -293,13 +293,12 @@ function _templateObject9() {
293
293
  "\n ",
294
294
  ": 1;\n ",
295
295
  ": var(--text-primary);\n ",
296
- ": var(--surface-clear);\n ",
296
+ ": transparent;\n ",
297
297
  ": var(--text-secondary);\n ",
298
298
  ": var(--text-secondary);\n ",
299
299
  ": var(--text-secondary);\n ",
300
300
  ": var(--text-secondary);\n ",
301
- ": var(--outline-solid-secondary);\n ",
302
- ": 0.4;\n "
301
+ ": var(--outline-solid-secondary);\n "
303
302
  ]);
304
303
  _templateObject9 = function _templateObject() {
305
304
  return data;
@@ -338,7 +337,7 @@ var config = {
338
337
  true: (0, _emotion.css)(_templateObject8(), _emotion.textFieldTokens.disabledOpacity, _emotion.textFieldTokens.backgroundColor, _emotion.textFieldTokens.backgroundColorFocus, _emotion.textFieldTokens.borderColor, _emotion.textFieldTokens.borderColorHover, _emotion.textFieldTokens.borderColorFocus, _emotion.textFieldTokens.color)
339
338
  },
340
339
  readOnly: {
341
- true: (0, _emotion.css)(_templateObject9(), _emotion.textFieldTokens.readOnlyOpacity, _emotion.textFieldTokens.colorReadOnly, _emotion.textFieldTokens.backgroundColorReadOnly, _emotion.textFieldTokens.placeholderColorReadOnly, _emotion.textFieldTokens.leftHelperColorReadOnly, _emotion.textFieldTokens.titleCaptionColorReadOnly, _emotion.textFieldTokens.labelColorReadOnly, _emotion.textFieldTokens.dividerColorReadOnly, _emotion.textFieldTokens.contentSlotRightOpacityReadOnly)
340
+ true: (0, _emotion.css)(_templateObject9(), _emotion.textFieldTokens.readOnlyOpacity, _emotion.textFieldTokens.colorReadOnly, _emotion.textFieldTokens.backgroundColorReadOnly, _emotion.textFieldTokens.placeholderColorReadOnly, _emotion.textFieldTokens.leftHelperColorReadOnly, _emotion.textFieldTokens.titleCaptionColorReadOnly, _emotion.textFieldTokens.labelColorReadOnly, _emotion.textFieldTokens.dividerColorReadOnly)
342
341
  }
343
342
  }
344
343
  };
@@ -202,9 +202,8 @@ function _templateObject5() {
202
202
  function _templateObject6() {
203
203
  var data = _tagged_template_literal([
204
204
  "\n ",
205
- ": var(--text-primary);\n ",
206
- ": var(--surface-clear);\n ",
207
- ": var(--surface-clear);\n ",
205
+ ": var(--text-secondary);\n ",
206
+ ": var(--surface-transparent-primary);\n ",
208
207
  ": var(--text-secondary);\n ",
209
208
  ": var(--text-secondary);\n ",
210
209
  ": var(--text-secondary);\n "
@@ -237,7 +236,7 @@ export var config = {
237
236
  true: css(_templateObject5(), tokens.itemColor, tokens.background, tokens.textFieldColor, tokens.textFieldLabelColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorHover, tokens.textFieldBackgroundColorFocus, tokens.textFieldBorderColor, tokens.textFieldBorderColorHover, tokens.textFieldBorderColorFocus)
238
237
  },
239
238
  readOnly: {
240
- true: css(_templateObject6(), tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldBorderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, tokens.textFieldLeftHelperColorReadOnly, tokens.textFieldLabelColorReadOnly)
239
+ true: css(_templateObject6(), tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, tokens.textFieldLeftHelperColorReadOnly, tokens.textFieldLabelColorReadOnly)
241
240
  }
242
241
  }
243
242
  };
@@ -1,4 +1,63 @@
1
- import { autocompleteConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
1
+ function _define_property(obj, key, value) {
2
+ if (key in obj) {
3
+ Object.defineProperty(obj, key, {
4
+ value: value,
5
+ enumerable: true,
6
+ configurable: true,
7
+ writable: true
8
+ });
9
+ } else {
10
+ obj[key] = value;
11
+ }
12
+ return obj;
13
+ }
14
+ function _object_spread(target) {
15
+ for(var i = 1; i < arguments.length; i++){
16
+ var source = arguments[i] != null ? arguments[i] : {};
17
+ var ownKeys = Object.keys(source);
18
+ if (typeof Object.getOwnPropertySymbols === "function") {
19
+ ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
20
+ return Object.getOwnPropertyDescriptor(source, sym).enumerable;
21
+ }));
22
+ }
23
+ ownKeys.forEach(function(key) {
24
+ _define_property(target, key, source[key]);
25
+ });
26
+ }
27
+ return target;
28
+ }
29
+ function ownKeys(object, enumerableOnly) {
30
+ var keys = Object.keys(object);
31
+ if (Object.getOwnPropertySymbols) {
32
+ var symbols = Object.getOwnPropertySymbols(object);
33
+ if (enumerableOnly) {
34
+ symbols = symbols.filter(function(sym) {
35
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
36
+ });
37
+ }
38
+ keys.push.apply(keys, symbols);
39
+ }
40
+ return keys;
41
+ }
42
+ function _object_spread_props(target, source) {
43
+ source = source != null ? source : {};
44
+ if (Object.getOwnPropertyDescriptors) {
45
+ Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
46
+ } else {
47
+ ownKeys(Object(source)).forEach(function(key) {
48
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
49
+ });
50
+ }
51
+ return target;
52
+ }
53
+ import { autocompleteConfig, component, mergeConfig, fixedForwardRef } from '@salutejs/plasma-new-hope/emotion';
54
+ import React from 'react';
2
55
  import { config } from './Autocomplete.config';
3
56
  var mergedConfig = mergeConfig(autocompleteConfig, config);
4
- export var Autocomplete = component(mergedConfig);
57
+ export var AutocompleteComponent = component(mergedConfig);
58
+ var AutocompleteWithoutRef = function(props, ref) {
59
+ return /*#__PURE__*/ React.createElement(AutocompleteComponent, _object_spread_props(_object_spread({}, props), {
60
+ ref: ref
61
+ }));
62
+ };
63
+ export var Autocomplete = fixedForwardRef(AutocompleteWithoutRef);
@@ -269,8 +269,8 @@ function _templateObject6() {
269
269
  var data = _tagged_template_literal([
270
270
  "\n ",
271
271
  ": var(--text-primary);\n ",
272
- ": var(--surface-clear);\n ",
273
- ": var(--text-secondary);\n ",
272
+ ": var(--surface-transparent-primary);\n ",
273
+ ": var(--text-primary);\n ",
274
274
  ": var(--text-secondary);\n ",
275
275
  ": var(--text-secondary);\n ",
276
276
  ": var(--text-primary);\n ",
@@ -223,14 +223,13 @@ function _templateObject2() {
223
223
  function _templateObject3() {
224
224
  var data = _tagged_template_literal([
225
225
  "\n ",
226
- ": var(--surface-clear);\n ",
226
+ ": var(--surface-transparent-primary);\n ",
227
+ ": var(--text-secondary);\n ",
227
228
  ": var(--text-secondary);\n ",
228
229
  ": var(--text-secondary);\n ",
229
230
  ": var(--text-secondary);\n\n ",
230
231
  ": var(--text-secondary);\n ",
231
- ": 0.4;\n\n ",
232
- ": var(--text-primary);\n ",
233
- ": var(--surface-clear);\n ",
232
+ ": var(--surface-transparent-primary);\n ",
234
233
  ": var(--text-secondary);\n "
235
234
  ]);
236
235
  _templateObject3 = function _templateObject() {
@@ -255,7 +254,7 @@ export var config = {
255
254
  true: css(_templateObject2(), tokens.background, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.borderColorSuccess, tokens.textFieldBorderColorFocus, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldColor, tokens.textFieldPlaceholderColor, tokens.textFieldCaretColor, tokens.textFieldBackgroundColor, tokens.labelColor)
256
255
  },
257
256
  readOnly: {
258
- true: css(_templateObject3(), tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.labelColor, tokens.dividerColorReadOnly, tokens.dividerOpacityReadOnly, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
257
+ true: css(_templateObject3(), tokens.backgroundReadOnly, tokens.labelColorReadOnly, tokens.leftHelperColorReadOnly, tokens.dividerColorReadOnly, tokens.labelColor, tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly)
259
258
  }
260
259
  }
261
260
  };
@@ -26,6 +26,7 @@ function _templateObject() {
26
26
  ": var(--surface-solid-card);\n ",
27
27
  ": var(--outline-solid-primary);\n\n ",
28
28
  ": var(--text-primary);\n ",
29
+ ": var(--text-secondary);\n ",
29
30
  ": var(--surface-accent);\n ",
30
31
  ": var(--text-secondary);\n ",
31
32
  ": var(--surface-clear);\n "
@@ -84,7 +85,8 @@ function _templateObject2() {
84
85
  ": 3rem;\n ",
85
86
  ": 2.5rem;\n ",
86
87
  ": 0 0.625rem;\n ",
87
- ": 0.125rem;\n "
88
+ ": 0.125rem;\n\n ",
89
+ ": 2.5rem;\n "
88
90
  ]);
89
91
  _templateObject2 = function _templateObject() {
90
92
  return data;
@@ -118,13 +120,13 @@ export var config = {
118
120
  },
119
121
  variations: {
120
122
  view: {
121
- default: css(_templateObject(), paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.buttonFocusColor, paginationTokens.paginationDisabledButtonColor, paginationTokens.paginationDisabledButtonBackgroundColor)
123
+ default: css(_templateObject(), paginationTokens.buttonColor, paginationTokens.buttonColorHover, paginationTokens.buttonColorActive, paginationTokens.buttonBackgroundColor, paginationTokens.buttonBackgroundColorHover, paginationTokens.buttonBackgroundColorActive, paginationTokens.buttonHoverColor, paginationTokens.buttonActiveColor, paginationTokens.buttonArrowColor, paginationTokens.buttonArrowColorHover, paginationTokens.buttonArrowColorActive, paginationTokens.inputBackgroundColor, paginationTokens.selectBackgroundColor, paginationTokens.inputBorderColor, paginationTokens.paginationColor, paginationTokens.paginationHelperTextColor, paginationTokens.buttonFocusColor, paginationTokens.paginationDisabledButtonColor, paginationTokens.paginationDisabledButtonBackgroundColor)
122
124
  },
123
125
  viewCurrentPage: {
124
126
  default: css(_templateObject1(), paginationTokens.paginationCurrentButtonColor, paginationTokens.paginationCurrentButtonBackgroundColor, paginationTokens.paginationCurrentButtonHoverColor, paginationTokens.paginationCurrentButtonHoverBackgroundColor, paginationTokens.paginationCurrentButtonActiveColor, paginationTokens.paginationCurrentButtonActiveBackgroundColor)
125
127
  },
126
128
  size: {
127
- s: css(_templateObject2(), paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth)
129
+ s: css(_templateObject2(), paginationTokens.paginationFontFamily, paginationTokens.paginationFontSize, paginationTokens.paginationFontStyle, paginationTokens.paginationFontWeight, paginationTokens.paginationLetterSpacing, paginationTokens.paginationLineHeight, paginationTokens.buttonHeight, paginationTokens.buttonWidth, paginationTokens.buttonWidthShorter, paginationTokens.paginationInputWidth, paginationTokens.buttonRadius, paginationTokens.paginationIconSize, paginationTokens.paginationIconDoubleSize, paginationTokens.buttonArrowMargin, paginationTokens.selectHeight, paginationTokens.selectPaddingTop, paginationTokens.selectPaddingRight, paginationTokens.selectPaddingBottom, paginationTokens.selectPaddingLeft, paginationTokens.selectItemHeight, paginationTokens.selectItemPadding, paginationTokens.selectItemContentLeftWidth, paginationTokens.selectItemBackground, paginationTokens.selectTargetArrowRight, paginationTokens.selectTargetPadding, paginationTokens.selectTargetInnerTop, paginationTokens.selectTargetLabelInnerTop, paginationTokens.inputBorderRadius, paginationTokens.inputWidth, paginationTokens.inputHeight, paginationTokens.inputPadding, paginationTokens.inputBorderWidth, paginationTokens.paginationHelperTextGap)
128
130
  },
129
131
  type: {
130
132
  compact: css(_templateObject3()),