@alfalab/core-components-file-upload-item 5.7.0 → 5.8.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 (16) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +17 -12
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +40 -35
  5. package/index.css +40 -35
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +40 -35
  8. package/moderncssm/Component.d.ts +95 -0
  9. package/moderncssm/Component.js +70 -0
  10. package/moderncssm/index.d.ts +1 -0
  11. package/moderncssm/index.js +1 -0
  12. package/moderncssm/index.module.css +129 -0
  13. package/moderncssm/utils.d.ts +5 -0
  14. package/moderncssm/utils.js +41 -0
  15. package/package.json +6 -6
  16. package/src/index.module.css +13 -13
package/Component.js CHANGED
@@ -19,7 +19,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
19
19
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
20
20
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
21
21
 
22
- var styles = {"component":"file-upload-item__component_18dki","infoSection":"file-upload-item__infoSection_18dki","info":"file-upload-item__info_18dki","icon":"file-upload-item__icon_18dki","errorIcon":"file-upload-item__errorIcon_18dki","successIcon":"file-upload-item__successIcon_18dki","name":"file-upload-item__name_18dki","rowLimit":"file-upload-item__rowLimit_18dki","meta":"file-upload-item__meta_18dki","size":"file-upload-item__size_18dki","delete":"file-upload-item__delete_18dki","download":"file-upload-item__download_18dki","errorWrapper":"file-upload-item__errorWrapper_18dki","restore":"file-upload-item__restore_18dki","spinnerWrapper":"file-upload-item__spinnerWrapper_18dki","spinner":"file-upload-item__spinner_18dki","uploadPercent":"file-upload-item__uploadPercent_18dki"};
22
+ var styles = {"component":"file-upload-item__component_1utz9","infoSection":"file-upload-item__infoSection_1utz9","info":"file-upload-item__info_1utz9","icon":"file-upload-item__icon_1utz9","errorIcon":"file-upload-item__errorIcon_1utz9","successIcon":"file-upload-item__successIcon_1utz9","name":"file-upload-item__name_1utz9","rowLimit":"file-upload-item__rowLimit_1utz9","meta":"file-upload-item__meta_1utz9","size":"file-upload-item__size_1utz9","delete":"file-upload-item__delete_1utz9","download":"file-upload-item__download_1utz9","errorWrapper":"file-upload-item__errorWrapper_1utz9","restore":"file-upload-item__restore_1utz9","spinnerWrapper":"file-upload-item__spinnerWrapper_1utz9","spinner":"file-upload-item__spinner_1utz9","uploadPercent":"file-upload-item__uploadPercent_1utz9"};
23
23
  require('./index.css')
24
24
 
25
25
  var FileUploadItem = function (_a) {
package/cssm/index.module.css CHANGED
@@ -27,6 +27,11 @@
27
27
  --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
28
28
 
29
29
  /* новые значения, используйте их */
30
+ --gap-2: var(--gap-3xs);
31
+ --gap-4: var(--gap-2xs);
32
+ --gap-8: var(--gap-xs);
33
+ --gap-12: var(--gap-s);
34
+ --gap-24: var(--gap-xl);
30
35
  } :root {
31
36
  } :root {
32
37
  } .component {
@@ -37,7 +42,7 @@
37
42
  display: flex;
38
43
  align-items: flex-start;
39
44
  width: 100%;
40
- padding: var(--gap-xs);
45
+ padding: var(--gap-8);
41
46
  color: var(--color-light-text-secondary);
42
47
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
43
48
  box-sizing: border-box
@@ -49,8 +54,8 @@
49
54
  display: flex;
50
55
  flex-direction: column;
51
56
  flex: 1;
52
- margin-top: var(--gap-2xs);
53
- margin-left: var(--gap-s);
57
+ margin-top: var(--gap-4);
58
+ margin-left: var(--gap-12);
54
59
  min-width: 40%;
55
60
  } .info {
56
61
  display: flex;
@@ -79,11 +84,11 @@
79
84
  } .meta {
80
85
  display: flex;
81
86
  white-space: nowrap;
82
- margin-right: var(--gap-2xs);
87
+ margin-right: var(--gap-4);
83
88
  margin-left: 36px;
84
- padding: var(--gap-2xs) 0
89
+ padding: var(--gap-4) 0
85
90
  } .meta > * {
86
- margin-right: var(--gap-s)
91
+ margin-right: var(--gap-12)
87
92
  } .meta > *:last-child {
88
93
  margin-right: 0;
89
94
  } .size {
@@ -92,17 +97,17 @@
92
97
  .download {
93
98
  height: 24px;
94
99
  width: 24px;
95
- margin-left: var(--gap-xs);
100
+ margin-left: var(--gap-8);
96
101
  } .errorWrapper {
97
- margin-top: var(--gap-2xs);
102
+ margin-top: var(--gap-4);
98
103
  color: var(--color-light-text-negative);
99
104
  } .restore {
100
105
  font-size: 14px;
101
106
  line-height: 20px;
102
107
  font-weight: 400;
103
108
 
104
- margin-left: var(--gap-s);
105
- margin-top: var(--gap-3xs);
109
+ margin-left: var(--gap-12);
110
+ margin-top: var(--gap-2);
106
111
  } .spinnerWrapper {
107
112
  display: flex;
108
113
  justify-content: center;
@@ -113,6 +118,6 @@
113
118
  width: 20px;
114
119
  height: 20px;
115
120
  } .uploadPercent {
116
- margin-top: var(--gap-2xs);
117
- margin-left: var(--gap-xl);
121
+ margin-top: var(--gap-4);
122
+ margin-left: var(--gap-24);
118
123
  }
package/esm/Component.js CHANGED
@@ -10,7 +10,7 @@ import { CrossSIcon } from '@alfalab/icons-glyph/CrossSIcon';
10
10
  import { PointerDownSIcon } from '@alfalab/icons-glyph/PointerDownSIcon';
11
11
  import { fileIcon, humanFileSize } from './utils.js';
12
12
 
13
- var styles = {"component":"file-upload-item__component_18dki","infoSection":"file-upload-item__infoSection_18dki","info":"file-upload-item__info_18dki","icon":"file-upload-item__icon_18dki","errorIcon":"file-upload-item__errorIcon_18dki","successIcon":"file-upload-item__successIcon_18dki","name":"file-upload-item__name_18dki","rowLimit":"file-upload-item__rowLimit_18dki","meta":"file-upload-item__meta_18dki","size":"file-upload-item__size_18dki","delete":"file-upload-item__delete_18dki","download":"file-upload-item__download_18dki","errorWrapper":"file-upload-item__errorWrapper_18dki","restore":"file-upload-item__restore_18dki","spinnerWrapper":"file-upload-item__spinnerWrapper_18dki","spinner":"file-upload-item__spinner_18dki","uploadPercent":"file-upload-item__uploadPercent_18dki"};
13
+ var styles = {"component":"file-upload-item__component_1utz9","infoSection":"file-upload-item__infoSection_1utz9","info":"file-upload-item__info_1utz9","icon":"file-upload-item__icon_1utz9","errorIcon":"file-upload-item__errorIcon_1utz9","successIcon":"file-upload-item__successIcon_1utz9","name":"file-upload-item__name_1utz9","rowLimit":"file-upload-item__rowLimit_1utz9","meta":"file-upload-item__meta_1utz9","size":"file-upload-item__size_1utz9","delete":"file-upload-item__delete_1utz9","download":"file-upload-item__download_1utz9","errorWrapper":"file-upload-item__errorWrapper_1utz9","restore":"file-upload-item__restore_1utz9","spinnerWrapper":"file-upload-item__spinnerWrapper_1utz9","spinner":"file-upload-item__spinner_1utz9","uploadPercent":"file-upload-item__uploadPercent_1utz9"};
14
14
  require('./index.css')
15
15
 
16
16
  var FileUploadItem = function (_a) {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1rs3w */
1
+ /* hash: xcsk9 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-300: #e7e8eb;
@@ -28,9 +28,14 @@
28
28
  --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
29
29
 
30
30
  /* новые значения, используйте их */
31
+ --gap-2: var(--gap-3xs);
32
+ --gap-4: var(--gap-2xs);
33
+ --gap-8: var(--gap-xs);
34
+ --gap-12: var(--gap-s);
35
+ --gap-24: var(--gap-xl);
31
36
  } :root {
32
37
  } :root {
33
- } .file-upload-item__component_18dki {
38
+ } .file-upload-item__component_1utz9 {
34
39
  font-size: 13px;
35
40
  line-height: 16px;
36
41
  font-weight: 400;
@@ -38,82 +43,82 @@
38
43
  display: flex;
39
44
  align-items: flex-start;
40
45
  width: 100%;
41
- padding: var(--gap-xs);
46
+ padding: var(--gap-8);
42
47
  color: var(--color-light-text-secondary);
43
48
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
44
49
  box-sizing: border-box
45
- } .file-upload-item__component_18dki svg {
50
+ } .file-upload-item__component_1utz9 svg {
46
51
  display: block;
47
- } .file-upload-item__component_18dki:last-child {
52
+ } .file-upload-item__component_1utz9:last-child {
48
53
  box-shadow: none;
49
- } .file-upload-item__infoSection_18dki {
54
+ } .file-upload-item__infoSection_1utz9 {
50
55
  display: flex;
51
56
  flex-direction: column;
52
57
  flex: 1;
53
- margin-top: var(--gap-2xs);
54
- margin-left: var(--gap-s);
58
+ margin-top: var(--gap-4);
59
+ margin-left: var(--gap-12);
55
60
  min-width: 40%;
56
- } .file-upload-item__info_18dki {
61
+ } .file-upload-item__info_1utz9 {
57
62
  display: flex;
58
63
  flex-wrap: wrap;
59
64
  flex: 1;
60
65
  overflow: hidden;
61
- } .file-upload-item__icon_18dki {
66
+ } .file-upload-item__icon_1utz9 {
62
67
  display: block;
63
68
  flex-shrink: 0;
64
69
  color: var(--color-light-neutral-translucent-1300);
65
- } .file-upload-item__errorIcon_18dki {
70
+ } .file-upload-item__errorIcon_1utz9 {
66
71
  flex-shrink: 0;
67
72
  color: var(--color-light-status-negative);
68
- } .file-upload-item__successIcon_18dki {
73
+ } .file-upload-item__successIcon_1utz9 {
69
74
  flex-shrink: 0;
70
75
  color: var(--color-light-status-positive);
71
- } .file-upload-item__name_18dki {
76
+ } .file-upload-item__name_1utz9 {
72
77
  color: var(--color-light-text-primary)
73
- } .file-upload-item__name_18dki a {
78
+ } .file-upload-item__name_1utz9 a {
74
79
  display: block;
75
80
  margin-bottom: 1px;
76
- } .file-upload-item__name_18dki.file-upload-item__rowLimit_18dki {
81
+ } .file-upload-item__name_1utz9.file-upload-item__rowLimit_1utz9 {
77
82
  white-space: nowrap;
78
83
  overflow: hidden;
79
84
  text-overflow: ellipsis;
80
- } .file-upload-item__meta_18dki {
85
+ } .file-upload-item__meta_1utz9 {
81
86
  display: flex;
82
87
  white-space: nowrap;
83
- margin-right: var(--gap-2xs);
88
+ margin-right: var(--gap-4);
84
89
  margin-left: 36px;
85
- padding: var(--gap-2xs) 0
86
- } .file-upload-item__meta_18dki > * {
87
- margin-right: var(--gap-s)
88
- } .file-upload-item__meta_18dki > *:last-child {
90
+ padding: var(--gap-4) 0
91
+ } .file-upload-item__meta_1utz9 > * {
92
+ margin-right: var(--gap-12)
93
+ } .file-upload-item__meta_1utz9 > *:last-child {
89
94
  margin-right: 0;
90
- } .file-upload-item__size_18dki {
95
+ } .file-upload-item__size_1utz9 {
91
96
  text-align: right;
92
- } .file-upload-item__delete_18dki,
93
- .file-upload-item__download_18dki {
97
+ } .file-upload-item__delete_1utz9,
98
+ .file-upload-item__download_1utz9 {
94
99
  height: 24px;
95
100
  width: 24px;
96
- margin-left: var(--gap-xs);
97
- } .file-upload-item__errorWrapper_18dki {
98
- margin-top: var(--gap-2xs);
101
+ margin-left: var(--gap-8);
102
+ } .file-upload-item__errorWrapper_1utz9 {
103
+ margin-top: var(--gap-4);
99
104
  color: var(--color-light-text-negative);
100
- } .file-upload-item__restore_18dki {
105
+ } .file-upload-item__restore_1utz9 {
101
106
  font-size: 14px;
102
107
  line-height: 20px;
103
108
  font-weight: 400;
104
109
 
105
- margin-left: var(--gap-s);
106
- margin-top: var(--gap-3xs);
107
- } .file-upload-item__spinnerWrapper_18dki {
110
+ margin-left: var(--gap-12);
111
+ margin-top: var(--gap-2);
112
+ } .file-upload-item__spinnerWrapper_1utz9 {
108
113
  display: flex;
109
114
  justify-content: center;
110
115
  align-items: center;
111
116
  width: 24px;
112
117
  height: 24px;
113
- } .file-upload-item__spinner_18dki {
118
+ } .file-upload-item__spinner_1utz9 {
114
119
  width: 20px;
115
120
  height: 20px;
116
- } .file-upload-item__uploadPercent_18dki {
117
- margin-top: var(--gap-2xs);
118
- margin-left: var(--gap-xl);
121
+ } .file-upload-item__uploadPercent_1utz9 {
122
+ margin-top: var(--gap-4);
123
+ margin-left: var(--gap-24);
119
124
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1rs3w */
1
+ /* hash: xcsk9 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-300: #e7e8eb;
@@ -28,9 +28,14 @@
28
28
  --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
29
29
 
30
30
  /* новые значения, используйте их */
31
+ --gap-2: var(--gap-3xs);
32
+ --gap-4: var(--gap-2xs);
33
+ --gap-8: var(--gap-xs);
34
+ --gap-12: var(--gap-s);
35
+ --gap-24: var(--gap-xl);
31
36
  } :root {
32
37
  } :root {
33
- } .file-upload-item__component_18dki {
38
+ } .file-upload-item__component_1utz9 {
34
39
  font-size: 13px;
35
40
  line-height: 16px;
36
41
  font-weight: 400;
@@ -38,82 +43,82 @@
38
43
  display: flex;
39
44
  align-items: flex-start;
40
45
  width: 100%;
41
- padding: var(--gap-xs);
46
+ padding: var(--gap-8);
42
47
  color: var(--color-light-text-secondary);
43
48
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
44
49
  box-sizing: border-box
45
- } .file-upload-item__component_18dki svg {
50
+ } .file-upload-item__component_1utz9 svg {
46
51
  display: block;
47
- } .file-upload-item__component_18dki:last-child {
52
+ } .file-upload-item__component_1utz9:last-child {
48
53
  box-shadow: none;
49
- } .file-upload-item__infoSection_18dki {
54
+ } .file-upload-item__infoSection_1utz9 {
50
55
  display: flex;
51
56
  flex-direction: column;
52
57
  flex: 1;
53
- margin-top: var(--gap-2xs);
54
- margin-left: var(--gap-s);
58
+ margin-top: var(--gap-4);
59
+ margin-left: var(--gap-12);
55
60
  min-width: 40%;
56
- } .file-upload-item__info_18dki {
61
+ } .file-upload-item__info_1utz9 {
57
62
  display: flex;
58
63
  flex-wrap: wrap;
59
64
  flex: 1;
60
65
  overflow: hidden;
61
- } .file-upload-item__icon_18dki {
66
+ } .file-upload-item__icon_1utz9 {
62
67
  display: block;
63
68
  flex-shrink: 0;
64
69
  color: var(--color-light-neutral-translucent-1300);
65
- } .file-upload-item__errorIcon_18dki {
70
+ } .file-upload-item__errorIcon_1utz9 {
66
71
  flex-shrink: 0;
67
72
  color: var(--color-light-status-negative);
68
- } .file-upload-item__successIcon_18dki {
73
+ } .file-upload-item__successIcon_1utz9 {
69
74
  flex-shrink: 0;
70
75
  color: var(--color-light-status-positive);
71
- } .file-upload-item__name_18dki {
76
+ } .file-upload-item__name_1utz9 {
72
77
  color: var(--color-light-text-primary)
73
- } .file-upload-item__name_18dki a {
78
+ } .file-upload-item__name_1utz9 a {
74
79
  display: block;
75
80
  margin-bottom: 1px;
76
- } .file-upload-item__name_18dki.file-upload-item__rowLimit_18dki {
81
+ } .file-upload-item__name_1utz9.file-upload-item__rowLimit_1utz9 {
77
82
  white-space: nowrap;
78
83
  overflow: hidden;
79
84
  text-overflow: ellipsis;
80
- } .file-upload-item__meta_18dki {
85
+ } .file-upload-item__meta_1utz9 {
81
86
  display: flex;
82
87
  white-space: nowrap;
83
- margin-right: var(--gap-2xs);
88
+ margin-right: var(--gap-4);
84
89
  margin-left: 36px;
85
- padding: var(--gap-2xs) 0
86
- } .file-upload-item__meta_18dki > * {
87
- margin-right: var(--gap-s)
88
- } .file-upload-item__meta_18dki > *:last-child {
90
+ padding: var(--gap-4) 0
91
+ } .file-upload-item__meta_1utz9 > * {
92
+ margin-right: var(--gap-12)
93
+ } .file-upload-item__meta_1utz9 > *:last-child {
89
94
  margin-right: 0;
90
- } .file-upload-item__size_18dki {
95
+ } .file-upload-item__size_1utz9 {
91
96
  text-align: right;
92
- } .file-upload-item__delete_18dki,
93
- .file-upload-item__download_18dki {
97
+ } .file-upload-item__delete_1utz9,
98
+ .file-upload-item__download_1utz9 {
94
99
  height: 24px;
95
100
  width: 24px;
96
- margin-left: var(--gap-xs);
97
- } .file-upload-item__errorWrapper_18dki {
98
- margin-top: var(--gap-2xs);
101
+ margin-left: var(--gap-8);
102
+ } .file-upload-item__errorWrapper_1utz9 {
103
+ margin-top: var(--gap-4);
99
104
  color: var(--color-light-text-negative);
100
- } .file-upload-item__restore_18dki {
105
+ } .file-upload-item__restore_1utz9 {
101
106
  font-size: 14px;
102
107
  line-height: 20px;
103
108
  font-weight: 400;
104
109
 
105
- margin-left: var(--gap-s);
106
- margin-top: var(--gap-3xs);
107
- } .file-upload-item__spinnerWrapper_18dki {
110
+ margin-left: var(--gap-12);
111
+ margin-top: var(--gap-2);
112
+ } .file-upload-item__spinnerWrapper_1utz9 {
108
113
  display: flex;
109
114
  justify-content: center;
110
115
  align-items: center;
111
116
  width: 24px;
112
117
  height: 24px;
113
- } .file-upload-item__spinner_18dki {
118
+ } .file-upload-item__spinner_1utz9 {
114
119
  width: 20px;
115
120
  height: 20px;
116
- } .file-upload-item__uploadPercent_18dki {
117
- margin-top: var(--gap-2xs);
118
- margin-left: var(--gap-xl);
121
+ } .file-upload-item__uploadPercent_1utz9 {
122
+ margin-top: var(--gap-4);
123
+ margin-left: var(--gap-24);
119
124
  }
package/modern/Component.js CHANGED
@@ -10,7 +10,7 @@ import { CrossSIcon } from '@alfalab/icons-glyph/CrossSIcon';
10
10
  import { PointerDownSIcon } from '@alfalab/icons-glyph/PointerDownSIcon';
11
11
  import { humanFileSize, fileIcon } from './utils.js';
12
12
 
13
- const styles = {"component":"file-upload-item__component_18dki","infoSection":"file-upload-item__infoSection_18dki","info":"file-upload-item__info_18dki","icon":"file-upload-item__icon_18dki","errorIcon":"file-upload-item__errorIcon_18dki","successIcon":"file-upload-item__successIcon_18dki","name":"file-upload-item__name_18dki","rowLimit":"file-upload-item__rowLimit_18dki","meta":"file-upload-item__meta_18dki","size":"file-upload-item__size_18dki","delete":"file-upload-item__delete_18dki","download":"file-upload-item__download_18dki","errorWrapper":"file-upload-item__errorWrapper_18dki","restore":"file-upload-item__restore_18dki","spinnerWrapper":"file-upload-item__spinnerWrapper_18dki","spinner":"file-upload-item__spinner_18dki","uploadPercent":"file-upload-item__uploadPercent_18dki"};
13
+ const styles = {"component":"file-upload-item__component_1utz9","infoSection":"file-upload-item__infoSection_1utz9","info":"file-upload-item__info_1utz9","icon":"file-upload-item__icon_1utz9","errorIcon":"file-upload-item__errorIcon_1utz9","successIcon":"file-upload-item__successIcon_1utz9","name":"file-upload-item__name_1utz9","rowLimit":"file-upload-item__rowLimit_1utz9","meta":"file-upload-item__meta_1utz9","size":"file-upload-item__size_1utz9","delete":"file-upload-item__delete_1utz9","download":"file-upload-item__download_1utz9","errorWrapper":"file-upload-item__errorWrapper_1utz9","restore":"file-upload-item__restore_1utz9","spinnerWrapper":"file-upload-item__spinnerWrapper_1utz9","spinner":"file-upload-item__spinner_1utz9","uploadPercent":"file-upload-item__uploadPercent_1utz9"};
14
14
  require('./index.css')
15
15
 
16
16
  const FileUploadItem = ({ className, children, id = '0', name = '', size, icon: Icon = fileIcon(name), uploadDate, downloadLink, download, uploadStatus, uploadPercent = 0, error, showDelete, showRestore, onDelete, onDownload, onRestore, disableButtons, multiline = false, target, dataTestId, }) => {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1rs3w */
1
+ /* hash: xcsk9 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-300: #e7e8eb;
@@ -28,9 +28,14 @@
28
28
  --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
29
29
 
30
30
  /* новые значения, используйте их */
31
+ --gap-2: var(--gap-3xs);
32
+ --gap-4: var(--gap-2xs);
33
+ --gap-8: var(--gap-xs);
34
+ --gap-12: var(--gap-s);
35
+ --gap-24: var(--gap-xl);
31
36
  } :root {
32
37
  } :root {
33
- } .file-upload-item__component_18dki {
38
+ } .file-upload-item__component_1utz9 {
34
39
  font-size: 13px;
35
40
  line-height: 16px;
36
41
  font-weight: 400;
@@ -38,82 +43,82 @@
38
43
  display: flex;
39
44
  align-items: flex-start;
40
45
  width: 100%;
41
- padding: var(--gap-xs);
46
+ padding: var(--gap-8);
42
47
  color: var(--color-light-text-secondary);
43
48
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
44
49
  box-sizing: border-box
45
- } .file-upload-item__component_18dki svg {
50
+ } .file-upload-item__component_1utz9 svg {
46
51
  display: block;
47
- } .file-upload-item__component_18dki:last-child {
52
+ } .file-upload-item__component_1utz9:last-child {
48
53
  box-shadow: none;
49
- } .file-upload-item__infoSection_18dki {
54
+ } .file-upload-item__infoSection_1utz9 {
50
55
  display: flex;
51
56
  flex-direction: column;
52
57
  flex: 1;
53
- margin-top: var(--gap-2xs);
54
- margin-left: var(--gap-s);
58
+ margin-top: var(--gap-4);
59
+ margin-left: var(--gap-12);
55
60
  min-width: 40%;
56
- } .file-upload-item__info_18dki {
61
+ } .file-upload-item__info_1utz9 {
57
62
  display: flex;
58
63
  flex-wrap: wrap;
59
64
  flex: 1;
60
65
  overflow: hidden;
61
- } .file-upload-item__icon_18dki {
66
+ } .file-upload-item__icon_1utz9 {
62
67
  display: block;
63
68
  flex-shrink: 0;
64
69
  color: var(--color-light-neutral-translucent-1300);
65
- } .file-upload-item__errorIcon_18dki {
70
+ } .file-upload-item__errorIcon_1utz9 {
66
71
  flex-shrink: 0;
67
72
  color: var(--color-light-status-negative);
68
- } .file-upload-item__successIcon_18dki {
73
+ } .file-upload-item__successIcon_1utz9 {
69
74
  flex-shrink: 0;
70
75
  color: var(--color-light-status-positive);
71
- } .file-upload-item__name_18dki {
76
+ } .file-upload-item__name_1utz9 {
72
77
  color: var(--color-light-text-primary)
73
- } .file-upload-item__name_18dki a {
78
+ } .file-upload-item__name_1utz9 a {
74
79
  display: block;
75
80
  margin-bottom: 1px;
76
- } .file-upload-item__name_18dki.file-upload-item__rowLimit_18dki {
81
+ } .file-upload-item__name_1utz9.file-upload-item__rowLimit_1utz9 {
77
82
  white-space: nowrap;
78
83
  overflow: hidden;
79
84
  text-overflow: ellipsis;
80
- } .file-upload-item__meta_18dki {
85
+ } .file-upload-item__meta_1utz9 {
81
86
  display: flex;
82
87
  white-space: nowrap;
83
- margin-right: var(--gap-2xs);
88
+ margin-right: var(--gap-4);
84
89
  margin-left: 36px;
85
- padding: var(--gap-2xs) 0
86
- } .file-upload-item__meta_18dki > * {
87
- margin-right: var(--gap-s)
88
- } .file-upload-item__meta_18dki > *:last-child {
90
+ padding: var(--gap-4) 0
91
+ } .file-upload-item__meta_1utz9 > * {
92
+ margin-right: var(--gap-12)
93
+ } .file-upload-item__meta_1utz9 > *:last-child {
89
94
  margin-right: 0;
90
- } .file-upload-item__size_18dki {
95
+ } .file-upload-item__size_1utz9 {
91
96
  text-align: right;
92
- } .file-upload-item__delete_18dki,
93
- .file-upload-item__download_18dki {
97
+ } .file-upload-item__delete_1utz9,
98
+ .file-upload-item__download_1utz9 {
94
99
  height: 24px;
95
100
  width: 24px;
96
- margin-left: var(--gap-xs);
97
- } .file-upload-item__errorWrapper_18dki {
98
- margin-top: var(--gap-2xs);
101
+ margin-left: var(--gap-8);
102
+ } .file-upload-item__errorWrapper_1utz9 {
103
+ margin-top: var(--gap-4);
99
104
  color: var(--color-light-text-negative);
100
- } .file-upload-item__restore_18dki {
105
+ } .file-upload-item__restore_1utz9 {
101
106
  font-size: 14px;
102
107
  line-height: 20px;
103
108
  font-weight: 400;
104
109
 
105
- margin-left: var(--gap-s);
106
- margin-top: var(--gap-3xs);
107
- } .file-upload-item__spinnerWrapper_18dki {
110
+ margin-left: var(--gap-12);
111
+ margin-top: var(--gap-2);
112
+ } .file-upload-item__spinnerWrapper_1utz9 {
108
113
  display: flex;
109
114
  justify-content: center;
110
115
  align-items: center;
111
116
  width: 24px;
112
117
  height: 24px;
113
- } .file-upload-item__spinner_18dki {
118
+ } .file-upload-item__spinner_1utz9 {
114
119
  width: 20px;
115
120
  height: 20px;
116
- } .file-upload-item__uploadPercent_18dki {
117
- margin-top: var(--gap-2xs);
118
- margin-left: var(--gap-xl);
121
+ } .file-upload-item__uploadPercent_1utz9 {
122
+ margin-top: var(--gap-4);
123
+ margin-left: var(--gap-24);
119
124
  }
package/moderncssm/Component.d.ts ADDED
@@ -0,0 +1,95 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { ElementType, HTMLAttributeAnchorTarget, MouseEvent, ReactNode } from "react";
4
+ type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
5
+ type FileUploadItemProps = {
6
+ /**
7
+ * Дополнительный класс
8
+ */
9
+ className?: string;
10
+ /**
11
+ * Идентификатор элемента
12
+ */
13
+ id?: string;
14
+ /**
15
+ * Имя файла с расширением
16
+ */
17
+ name?: string;
18
+ /**
19
+ * Размер файла
20
+ */
21
+ size?: string | number;
22
+ /**
23
+ * Дата загрузки файла
24
+ */
25
+ uploadDate?: string;
26
+ /**
27
+ * Ссылка на файл. Если прокидывается этот параметр, то появляется кнопка скачивания
28
+ */
29
+ downloadLink?: string;
30
+ /**
31
+ * Рекомендует браузеру скачивать контент по ссылке.
32
+ * В проп может быть передано рекомендуемое название скачиваемого файла.
33
+ */
34
+ download?: string | true;
35
+ /**
36
+ * Отображение кнопки удаления
37
+ */
38
+ showDelete?: boolean;
39
+ /**
40
+ * Отображение кнопки восстановления
41
+ */
42
+ showRestore?: boolean;
43
+ /**
44
+ * Процент загрузки файла
45
+ */
46
+ uploadPercent?: number;
47
+ /**
48
+ * Статус загрузки файла
49
+ */
50
+ uploadStatus?: FileStatuses;
51
+ /**
52
+ * Сообщение об ошибке
53
+ */
54
+ error?: ReactNode;
55
+ /**
56
+ * Дочерние элементы
57
+ */
58
+ children?: React.ReactNode;
59
+ /**
60
+ * Компонент кастомной иконки
61
+ */
62
+ icon?: ElementType<{
63
+ className?: string;
64
+ }>;
65
+ /**
66
+ * Обработчик загрузки файла
67
+ */
68
+ onDownload?: (id: string) => void;
69
+ /**
70
+ * Обработчик удаления файла
71
+ */
72
+ onDelete?: (id: string, event?: MouseEvent<HTMLElement>) => void;
73
+ /**
74
+ * Обработчик восстановления файла
75
+ */
76
+ onRestore?: (id: string) => void;
77
+ /**
78
+ * Управление активностью кнопок
79
+ */
80
+ disableButtons?: boolean;
81
+ /**
82
+ * Разрешить многострочное название файла
83
+ */
84
+ multiline?: boolean;
85
+ /**
86
+ * Указывает, где открыть скачиваемый документ
87
+ */
88
+ target?: HTMLAttributeAnchorTarget;
89
+ /**
90
+ * Идентификатор для систем автоматизированного тестирования
91
+ */
92
+ dataTestId?: string;
93
+ };
94
+ declare const FileUploadItem: React.FC<FileUploadItemProps>;
95
+ export { FileStatuses, FileUploadItemProps, FileUploadItem };
package/moderncssm/Component.js ADDED
@@ -0,0 +1,70 @@
1
+ import React from 'react';
2
+ import cn from 'classnames';
3
+ import { IconButton } from '@alfalab/core-components-icon-button/moderncssm';
4
+ import { Link } from '@alfalab/core-components-link/moderncssm';
5
+ import { Spinner } from '@alfalab/core-components-spinner/moderncssm';
6
+ import { AlertCircleMIcon } from '@alfalab/icons-glyph/AlertCircleMIcon';
7
+ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
8
+ import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
9
+ import { CrossSIcon } from '@alfalab/icons-glyph/CrossSIcon';
10
+ import { PointerDownSIcon } from '@alfalab/icons-glyph/PointerDownSIcon';
11
+ import { humanFileSize, fileIcon } from './utils.js';
12
+ import styles from './index.module.css';
13
+
14
+ const FileUploadItem = ({ className, children, id = '0', name = '', size, icon: Icon = fileIcon(name), uploadDate, downloadLink, download, uploadStatus, uploadPercent = 0, error, showDelete, showRestore, onDelete, onDownload, onRestore, disableButtons, multiline = false, target, dataTestId, }) => {
15
+ const handleDownload = (event) => {
16
+ if (onDownload) {
17
+ event.preventDefault();
18
+ onDownload(id);
19
+ }
20
+ };
21
+ const handleDelete = (event) => {
22
+ if (onDelete)
23
+ onDelete(id, event);
24
+ };
25
+ const handleRestore = () => {
26
+ if (onRestore)
27
+ onRestore(id);
28
+ };
29
+ const renderIcon = () => {
30
+ if (showRestore) {
31
+ return React.createElement(ClockMIcon, { className: styles.restoreIcon });
32
+ }
33
+ switch (uploadStatus) {
34
+ case 'ERROR':
35
+ return React.createElement(AlertCircleMIcon, { className: styles.errorIcon });
36
+ case 'SUCCESS':
37
+ return React.createElement(CheckmarkCircleMIcon, { className: styles.successIcon });
38
+ case 'LOADING':
39
+ case 'UPLOADING':
40
+ return (React.createElement("div", { className: styles.spinnerWrapper },
41
+ React.createElement(Spinner, { visible: true, className: styles.spinner })));
42
+ default: {
43
+ return React.createElement(Icon, { className: styles.icon });
44
+ }
45
+ }
46
+ };
47
+ const renderInfoSection = () => {
48
+ const shouldShownError = uploadStatus === 'ERROR' || !!error;
49
+ const errorContent = uploadStatus === 'ERROR' && !error ? 'Не удалось загрузить файл' : error;
50
+ return (React.createElement("div", { className: styles.infoSection },
51
+ React.createElement("div", { className: cn(styles.name, { [styles.rowLimit]: !multiline }) }, name),
52
+ shouldShownError && (React.createElement("div", { className: styles.errorWrapper, role: 'alert' }, errorContent))));
53
+ };
54
+ const showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
55
+ const showDownload = Boolean(downloadLink) && !showRestore;
56
+ return (React.createElement("div", { className: cn(className, styles.component, uploadStatus && styles[uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
57
+ React.createElement("div", { className: styles.info },
58
+ renderIcon(),
59
+ renderInfoSection(),
60
+ children,
61
+ uploadStatus === 'UPLOADING' && (React.createElement("span", { className: styles.uploadPercent }, `${Math.round(uploadPercent)}%`)),
62
+ showMeta && (React.createElement("div", { className: styles.meta },
63
+ uploadDate && React.createElement("span", { key: uploadDate }, uploadDate),
64
+ size && (React.createElement("span", { key: size, className: styles.size }, humanFileSize(size)))))),
65
+ showRestore && (React.createElement(Link, { pseudo: true, className: styles.restore, onClick: handleRestore }, "\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C")),
66
+ showDownload && (React.createElement(IconButton, { size: 'xxs', icon: PointerDownSIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download, target: target })),
67
+ showDelete && !showRestore && (React.createElement(IconButton, { size: 'xxs', icon: CrossSIcon, onClick: handleDelete, disabled: disableButtons, className: styles.delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
68
+ };
69
+
70
+ export { FileUploadItem };
package/moderncssm/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./Component";
package/moderncssm/index.js ADDED
@@ -0,0 +1 @@
1
+ export { FileUploadItem } from './Component.js';
package/moderncssm/index.module.css ADDED
@@ -0,0 +1,129 @@
1
+ /* */
2
+
3
+ .component {
4
+ font-size: 13px;
5
+ line-height: 16px;
6
+ font-weight: 400;
7
+
8
+ display: flex;
9
+ align-items: flex-start;
10
+ width: 100%;
11
+ padding: var(--gap-8);
12
+ color: var(--color-light-text-secondary);
13
+ box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
14
+ box-sizing: border-box
15
+ }
16
+
17
+ .component svg {
18
+ display: block;
19
+ }
20
+
21
+ .component:last-child {
22
+ box-shadow: none;
23
+ }
24
+
25
+ .infoSection {
26
+ display: flex;
27
+ flex-direction: column;
28
+ flex: 1;
29
+ margin-top: var(--gap-4);
30
+ margin-left: var(--gap-12);
31
+ min-width: 40%;
32
+ }
33
+
34
+ .info {
35
+ display: flex;
36
+ flex-wrap: wrap;
37
+ flex: 1;
38
+ overflow: hidden;
39
+ }
40
+
41
+ .icon {
42
+ display: block;
43
+ flex-shrink: 0;
44
+ color: var(--color-light-neutral-translucent-1300);
45
+ }
46
+
47
+ .errorIcon {
48
+ flex-shrink: 0;
49
+ color: var(--color-light-status-negative);
50
+ }
51
+
52
+ .successIcon {
53
+ flex-shrink: 0;
54
+ color: var(--color-light-status-positive);
55
+ }
56
+
57
+ .name {
58
+ color: var(--color-light-text-primary)
59
+ }
60
+
61
+ .name a {
62
+ display: block;
63
+ margin-bottom: 1px;
64
+ }
65
+
66
+ .name.rowLimit {
67
+ white-space: nowrap;
68
+ overflow: hidden;
69
+ text-overflow: ellipsis;
70
+ }
71
+
72
+ .meta {
73
+ display: flex;
74
+ white-space: nowrap;
75
+ margin-right: var(--gap-4);
76
+ margin-left: 36px;
77
+ padding: var(--gap-4) 0
78
+ }
79
+
80
+ .meta > * {
81
+ margin-right: var(--gap-12)
82
+ }
83
+
84
+ .meta > *:last-child {
85
+ margin-right: 0;
86
+ }
87
+
88
+ .size {
89
+ text-align: right;
90
+ }
91
+
92
+ .delete,
93
+ .download {
94
+ height: 24px;
95
+ width: 24px;
96
+ margin-left: var(--gap-8);
97
+ }
98
+
99
+ .errorWrapper {
100
+ margin-top: var(--gap-4);
101
+ color: var(--color-light-text-negative);
102
+ }
103
+
104
+ .restore {
105
+ font-size: 14px;
106
+ line-height: 20px;
107
+ font-weight: 400;
108
+
109
+ margin-left: var(--gap-12);
110
+ margin-top: var(--gap-2);
111
+ }
112
+
113
+ .spinnerWrapper {
114
+ display: flex;
115
+ justify-content: center;
116
+ align-items: center;
117
+ width: 24px;
118
+ height: 24px;
119
+ }
120
+
121
+ .spinner {
122
+ width: 20px;
123
+ height: 20px;
124
+ }
125
+
126
+ .uploadPercent {
127
+ margin-top: var(--gap-4);
128
+ margin-left: var(--gap-24);
129
+ }
package/moderncssm/utils.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ declare function humanFileSize(size: string | number): string;
3
+ declare const getExtension: (filename: string) => string | undefined;
4
+ declare function fileIcon(filename: string): import("react").FC<import("react").SVGProps<SVGSVGElement>>;
5
+ export { humanFileSize, getExtension, fileIcon };
package/moderncssm/utils.js ADDED
@@ -0,0 +1,41 @@
1
+ import { DocumentDocMIcon } from '@alfalab/icons-glyph/DocumentDocMIcon';
2
+ import { DocumentImageMIcon } from '@alfalab/icons-glyph/DocumentImageMIcon';
3
+ import { DocumentPdfMIcon } from '@alfalab/icons-glyph/DocumentPdfMIcon';
4
+ import { DocumentTxtMIcon } from '@alfalab/icons-glyph/DocumentTxtMIcon';
5
+ import { DocumentUnknownMIcon } from '@alfalab/icons-glyph/DocumentUnknownMIcon';
6
+
7
+ function humanFileSize(size) {
8
+ const units = ['Б', 'КБ', 'МБ', 'ГБ'];
9
+ let humanSize = Number(size);
10
+ let factor = 0;
11
+ while (humanSize >= 1024 && factor < units.length - 1) {
12
+ humanSize /= 1024;
13
+ factor += 1;
14
+ }
15
+ humanSize = humanSize.toFixed(2);
16
+ return `${Number(humanSize)} ${units[factor]}`;
17
+ }
18
+ const getExtension = (filename) => filename.toLowerCase().split('.').pop();
19
+ function fileIcon(filename) {
20
+ const extension = getExtension(filename);
21
+ switch (extension) {
22
+ case 'png':
23
+ case 'jpg':
24
+ case 'jpeg':
25
+ case 'svg':
26
+ case 'tif':
27
+ case 'tiff':
28
+ return DocumentImageMIcon;
29
+ case 'doc':
30
+ case 'docx':
31
+ return DocumentDocMIcon;
32
+ case 'pdf':
33
+ return DocumentPdfMIcon;
34
+ case 'txt':
35
+ return DocumentTxtMIcon;
36
+ default:
37
+ return DocumentUnknownMIcon;
38
+ }
39
+ }
40
+
41
+ export { fileIcon, getExtension, humanFileSize };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-file-upload-item",
3
- "version": "5.7.0",
3
+ "version": "5.8.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -14,13 +14,13 @@
14
14
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
15
15
  },
16
16
  "dependencies": {
17
- "@alfalab/core-components-icon-button": "^6.7.4",
18
- "@alfalab/core-components-link": "^5.2.2",
19
- "@alfalab/core-components-spinner": "^3.4.0",
17
+ "@alfalab/core-components-icon-button": "^6.8.0",
18
+ "@alfalab/core-components-link": "^5.3.0",
19
+ "@alfalab/core-components-spinner": "^3.5.0",
20
20
  "@alfalab/icons-glyph": "^2.139.0",
21
21
  "classnames": "^2.3.1",
22
22
  "tslib": "^2.4.0"
23
23
  },
24
- "themesVersion": "13.0.1",
25
- "varsVersion": "9.11.1"
24
+ "themesVersion": "13.1.0",
25
+ "varsVersion": "9.12.0"
26
26
  }
package/src/index.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-themes/src/default.css';
1
+ @import '@alfalab/core-components-vars/src/index.css';
2
2
 
3
3
  .component {
4
4
  @mixin paragraph_secondary_large;
@@ -6,7 +6,7 @@
6
6
  display: flex;
7
7
  align-items: flex-start;
8
8
  width: 100%;
9
- padding: var(--gap-xs);
9
+ padding: var(--gap-8);
10
10
  color: var(--color-light-text-secondary);
11
11
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
12
12
  box-sizing: border-box;
@@ -24,8 +24,8 @@
24
24
  display: flex;
25
25
  flex-direction: column;
26
26
  flex: 1;
27
- margin-top: var(--gap-2xs);
28
- margin-left: var(--gap-s);
27
+ margin-top: var(--gap-4);
28
+ margin-left: var(--gap-12);
29
29
  min-width: 40%;
30
30
  }
31
31
 
@@ -70,12 +70,12 @@
70
70
  .meta {
71
71
  display: flex;
72
72
  white-space: nowrap;
73
- margin-right: var(--gap-2xs);
73
+ margin-right: var(--gap-4);
74
74
  margin-left: 36px;
75
- padding: var(--gap-2xs) 0;
75
+ padding: var(--gap-4) 0;
76
76
 
77
77
  & > * {
78
- margin-right: var(--gap-s);
78
+ margin-right: var(--gap-12);
79
79
 
80
80
  &:last-child {
81
81
  margin-right: 0;
@@ -91,19 +91,19 @@
91
91
  .download {
92
92
  height: 24px;
93
93
  width: 24px;
94
- margin-left: var(--gap-xs);
94
+ margin-left: var(--gap-8);
95
95
  }
96
96
 
97
97
  .errorWrapper {
98
- margin-top: var(--gap-2xs);
98
+ margin-top: var(--gap-4);
99
99
  color: var(--color-light-text-negative);
100
100
  }
101
101
 
102
102
  .restore {
103
103
  @mixin paragraph_primary_small;
104
104
 
105
- margin-left: var(--gap-s);
106
- margin-top: var(--gap-3xs);
105
+ margin-left: var(--gap-12);
106
+ margin-top: var(--gap-2);
107
107
  }
108
108
 
109
109
  .spinnerWrapper {
@@ -120,6 +120,6 @@
120
120
  }
121
121
 
122
122
  .uploadPercent {
123
- margin-top: var(--gap-2xs);
124
- margin-left: var(--gap-xl);
123
+ margin-top: var(--gap-4);
124
+ margin-left: var(--gap-24);
125
125
  }