@alfalab/core-components-bank-card 5.0.1 → 5.0.2

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 (7) hide show
  1. package/Component.js +1 -1
  2. package/esm/Component.js +1 -1
  3. package/esm/index.css +20 -20
  4. package/index.css +20 -20
  5. package/modern/Component.js +1 -1
  6. package/modern/index.css +20 -20
  7. package/package.json +2 -2
package/Component.js CHANGED
@@ -17,7 +17,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
17
17
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
18
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
19
19
 
20
- var styles = {"component":"bank-card__component_1njtl","aspectRatioContainer":"bank-card__aspectRatioContainer_1njtl","content":"bank-card__content_1njtl","label":"bank-card__label_1njtl","focused":"bank-card__focused_1njtl","filled":"bank-card__filled_1njtl","input":"bank-card__input_1njtl","bankLogo":"bank-card__bankLogo_1njtl","brandLogo":"bank-card__brandLogo_1njtl","usePhoto":"bank-card__usePhoto_1njtl"};
20
+ var styles = {"component":"bank-card__component_1wce0","aspectRatioContainer":"bank-card__aspectRatioContainer_1wce0","content":"bank-card__content_1wce0","label":"bank-card__label_1wce0","focused":"bank-card__focused_1wce0","filled":"bank-card__filled_1wce0","input":"bank-card__input_1wce0","bankLogo":"bank-card__bankLogo_1wce0","brandLogo":"bank-card__brandLogo_1wce0","usePhoto":"bank-card__usePhoto_1wce0"};
21
21
  require('./index.css')
22
22
 
23
23
  // prettier-ignore
package/esm/Component.js CHANGED
@@ -8,7 +8,7 @@ import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
8
8
  import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
9
9
  import { validateCardNumber } from './utils.js';
10
10
 
11
- var styles = {"component":"bank-card__component_1njtl","aspectRatioContainer":"bank-card__aspectRatioContainer_1njtl","content":"bank-card__content_1njtl","label":"bank-card__label_1njtl","focused":"bank-card__focused_1njtl","filled":"bank-card__filled_1njtl","input":"bank-card__input_1njtl","bankLogo":"bank-card__bankLogo_1njtl","brandLogo":"bank-card__brandLogo_1njtl","usePhoto":"bank-card__usePhoto_1njtl"};
11
+ var styles = {"component":"bank-card__component_1wce0","aspectRatioContainer":"bank-card__aspectRatioContainer_1wce0","content":"bank-card__content_1wce0","label":"bank-card__label_1wce0","focused":"bank-card__focused_1wce0","filled":"bank-card__filled_1wce0","input":"bank-card__input_1wce0","bankLogo":"bank-card__bankLogo_1wce0","brandLogo":"bank-card__brandLogo_1wce0","usePhoto":"bank-card__usePhoto_1wce0"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1e9gc */
1
+ /* hash: 2t2lw */
2
2
  :root {
3
3
  --color-black: #000;
4
4
  --color-black-60: rgba(0, 0, 0, 0.6);
@@ -23,7 +23,7 @@
23
23
  :root {
24
24
  --border-radius-l: 12px;
25
25
  }
26
- .bank-card__component_1njtl {
26
+ .bank-card__component_1wce0 {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -42,11 +42,11 @@
42
42
 
43
43
  font-family: var(--font-family-styrene);
44
44
  }
45
- .bank-card__aspectRatioContainer_1njtl {
45
+ .bank-card__aspectRatioContainer_1wce0 {
46
46
  /* Эталонный размер 343x215 */
47
47
  padding-bottom: 62.6%;
48
48
  }
49
- .bank-card__content_1njtl {
49
+ .bank-card__content_1wce0 {
50
50
  position: absolute;
51
51
  top: 0;
52
52
  right: 0;
@@ -59,7 +59,7 @@
59
59
  border-radius: var(--border-radius-l);
60
60
  box-sizing: border-box;
61
61
  }
62
- .bank-card__label_1njtl {
62
+ .bank-card__label_1wce0 {
63
63
  left: 0;
64
64
  transform: translateY(-1px);
65
65
  color: var(--color-black-60);
@@ -67,25 +67,25 @@
67
67
  line-height: 24px
68
68
  }
69
69
  @media (max-width: 360px) {
70
- .bank-card__label_1njtl {
70
+ .bank-card__label_1wce0 {
71
71
  font-size: 16px
72
72
  }
73
73
  }
74
- .bank-card__focused_1njtl .bank-card__label_1njtl,
75
- .bank-card__filled_1njtl .bank-card__label_1njtl {
74
+ .bank-card__focused_1wce0 .bank-card__label_1wce0,
75
+ .bank-card__filled_1wce0 .bank-card__label_1wce0 {
76
76
  color: var(--color-black);
77
77
  transform: translateY(-19px) scale(0.6)
78
78
  }
79
79
  @media (max-width: 360px) {
80
- .bank-card__focused_1njtl .bank-card__label_1njtl,
81
- .bank-card__filled_1njtl .bank-card__label_1njtl {
80
+ .bank-card__focused_1wce0 .bank-card__label_1wce0,
81
+ .bank-card__filled_1wce0 .bank-card__label_1wce0 {
82
82
  transform: translateY(-22px) scale(0.75)
83
83
  }
84
84
  }
85
- .bank-card__focused_1njtl:before {
85
+ .bank-card__focused_1wce0:before {
86
86
  transform: scale(1) !important;
87
87
  }
88
- .bank-card__input_1njtl {
88
+ .bank-card__input_1wce0 {
89
89
  font-size: 20px;
90
90
  line-height: 24px;
91
91
  font-weight: 400;
@@ -99,33 +99,33 @@
99
99
  padding-left: 0 !important
100
100
  }
101
101
  @media (max-width: 360px) {
102
- .bank-card__input_1njtl {
102
+ .bank-card__input_1wce0 {
103
103
  font-size: 16px
104
104
  }
105
105
  }
106
- .bank-card__bankLogo_1njtl {
106
+ .bank-card__bankLogo_1wce0 {
107
107
  position: absolute;
108
108
  top: 20px;
109
109
  left: 20px
110
110
  }
111
- .bank-card__bankLogo_1njtl svg {
111
+ .bank-card__bankLogo_1wce0 svg {
112
112
  max-height: 30px;
113
113
  width: auto;
114
114
  display: block
115
115
  }
116
- .bank-card__bankLogo_1njtl svg g {
116
+ .bank-card__bankLogo_1wce0 svg g {
117
117
  fill: var(--color-black);
118
118
  }
119
- .bank-card__brandLogo_1njtl {
119
+ .bank-card__brandLogo_1wce0 {
120
120
  position: absolute;
121
121
  bottom: 20px;
122
122
  right: 20px
123
123
  }
124
- .bank-card__brandLogo_1njtl svg {
124
+ .bank-card__brandLogo_1wce0 svg {
125
125
  display: block;
126
126
  fill: var(--color-black);
127
127
  }
128
- .bank-card__usePhoto_1njtl {
128
+ .bank-card__usePhoto_1wce0 {
129
129
  display: block;
130
130
  margin: 0;
131
131
  padding: 0;
@@ -143,7 +143,7 @@
143
143
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
144
144
  margin-right: calc(var(--gap-s) * -1)
145
145
  }
146
- .bank-card__usePhoto_1njtl svg {
146
+ .bank-card__usePhoto_1wce0 svg {
147
147
  fill: var(--color-black);
148
148
  display: block;
149
149
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1e9gc */
1
+ /* hash: 2t2lw */
2
2
  :root {
3
3
  --color-black: #000;
4
4
  --color-black-60: rgba(0, 0, 0, 0.6);
@@ -23,7 +23,7 @@
23
23
  :root {
24
24
  --border-radius-l: 12px;
25
25
  }
26
- .bank-card__component_1njtl {
26
+ .bank-card__component_1wce0 {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -42,11 +42,11 @@
42
42
 
43
43
  font-family: var(--font-family-styrene);
44
44
  }
45
- .bank-card__aspectRatioContainer_1njtl {
45
+ .bank-card__aspectRatioContainer_1wce0 {
46
46
  /* Эталонный размер 343x215 */
47
47
  padding-bottom: 62.6%;
48
48
  }
49
- .bank-card__content_1njtl {
49
+ .bank-card__content_1wce0 {
50
50
  position: absolute;
51
51
  top: 0;
52
52
  right: 0;
@@ -59,7 +59,7 @@
59
59
  border-radius: var(--border-radius-l);
60
60
  box-sizing: border-box;
61
61
  }
62
- .bank-card__label_1njtl {
62
+ .bank-card__label_1wce0 {
63
63
  left: 0;
64
64
  transform: translateY(-1px);
65
65
  color: var(--color-black-60);
@@ -67,25 +67,25 @@
67
67
  line-height: 24px
68
68
  }
69
69
  @media (max-width: 360px) {
70
- .bank-card__label_1njtl {
70
+ .bank-card__label_1wce0 {
71
71
  font-size: 16px
72
72
  }
73
73
  }
74
- .bank-card__focused_1njtl .bank-card__label_1njtl,
75
- .bank-card__filled_1njtl .bank-card__label_1njtl {
74
+ .bank-card__focused_1wce0 .bank-card__label_1wce0,
75
+ .bank-card__filled_1wce0 .bank-card__label_1wce0 {
76
76
  color: var(--color-black);
77
77
  transform: translateY(-19px) scale(0.6)
78
78
  }
79
79
  @media (max-width: 360px) {
80
- .bank-card__focused_1njtl .bank-card__label_1njtl,
81
- .bank-card__filled_1njtl .bank-card__label_1njtl {
80
+ .bank-card__focused_1wce0 .bank-card__label_1wce0,
81
+ .bank-card__filled_1wce0 .bank-card__label_1wce0 {
82
82
  transform: translateY(-22px) scale(0.75)
83
83
  }
84
84
  }
85
- .bank-card__focused_1njtl:before {
85
+ .bank-card__focused_1wce0:before {
86
86
  transform: scale(1) !important;
87
87
  }
88
- .bank-card__input_1njtl {
88
+ .bank-card__input_1wce0 {
89
89
  font-size: 20px;
90
90
  line-height: 24px;
91
91
  font-weight: 400;
@@ -99,33 +99,33 @@
99
99
  padding-left: 0 !important
100
100
  }
101
101
  @media (max-width: 360px) {
102
- .bank-card__input_1njtl {
102
+ .bank-card__input_1wce0 {
103
103
  font-size: 16px
104
104
  }
105
105
  }
106
- .bank-card__bankLogo_1njtl {
106
+ .bank-card__bankLogo_1wce0 {
107
107
  position: absolute;
108
108
  top: 20px;
109
109
  left: 20px
110
110
  }
111
- .bank-card__bankLogo_1njtl svg {
111
+ .bank-card__bankLogo_1wce0 svg {
112
112
  max-height: 30px;
113
113
  width: auto;
114
114
  display: block
115
115
  }
116
- .bank-card__bankLogo_1njtl svg g {
116
+ .bank-card__bankLogo_1wce0 svg g {
117
117
  fill: var(--color-black);
118
118
  }
119
- .bank-card__brandLogo_1njtl {
119
+ .bank-card__brandLogo_1wce0 {
120
120
  position: absolute;
121
121
  bottom: 20px;
122
122
  right: 20px
123
123
  }
124
- .bank-card__brandLogo_1njtl svg {
124
+ .bank-card__brandLogo_1wce0 svg {
125
125
  display: block;
126
126
  fill: var(--color-black);
127
127
  }
128
- .bank-card__usePhoto_1njtl {
128
+ .bank-card__usePhoto_1wce0 {
129
129
  display: block;
130
130
  margin: 0;
131
131
  padding: 0;
@@ -143,7 +143,7 @@
143
143
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
144
144
  margin-right: calc(var(--gap-s) * -1)
145
145
  }
146
- .bank-card__usePhoto_1njtl svg {
146
+ .bank-card__usePhoto_1wce0 svg {
147
147
  fill: var(--color-black);
148
148
  display: block;
149
149
  }
package/modern/Component.js CHANGED
@@ -8,7 +8,7 @@ import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
8
8
  import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
9
9
  import { validateCardNumber } from './utils.js';
10
10
 
11
- var styles = {"component":"bank-card__component_1njtl","aspectRatioContainer":"bank-card__aspectRatioContainer_1njtl","content":"bank-card__content_1njtl","label":"bank-card__label_1njtl","focused":"bank-card__focused_1njtl","filled":"bank-card__filled_1njtl","input":"bank-card__input_1njtl","bankLogo":"bank-card__bankLogo_1njtl","brandLogo":"bank-card__brandLogo_1njtl","usePhoto":"bank-card__usePhoto_1njtl"};
11
+ var styles = {"component":"bank-card__component_1wce0","aspectRatioContainer":"bank-card__aspectRatioContainer_1wce0","content":"bank-card__content_1wce0","label":"bank-card__label_1wce0","focused":"bank-card__focused_1wce0","filled":"bank-card__filled_1wce0","input":"bank-card__input_1wce0","bankLogo":"bank-card__bankLogo_1wce0","brandLogo":"bank-card__brandLogo_1wce0","usePhoto":"bank-card__usePhoto_1wce0"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1e9gc */
1
+ /* hash: 2t2lw */
2
2
  :root {
3
3
  --color-black: #000;
4
4
  --color-black-60: rgba(0, 0, 0, 0.6);
@@ -23,7 +23,7 @@
23
23
  :root {
24
24
  --border-radius-l: 12px;
25
25
  }
26
- .bank-card__component_1njtl {
26
+ .bank-card__component_1wce0 {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -42,11 +42,11 @@
42
42
 
43
43
  font-family: var(--font-family-styrene);
44
44
  }
45
- .bank-card__aspectRatioContainer_1njtl {
45
+ .bank-card__aspectRatioContainer_1wce0 {
46
46
  /* Эталонный размер 343x215 */
47
47
  padding-bottom: 62.6%;
48
48
  }
49
- .bank-card__content_1njtl {
49
+ .bank-card__content_1wce0 {
50
50
  position: absolute;
51
51
  top: 0;
52
52
  right: 0;
@@ -59,7 +59,7 @@
59
59
  border-radius: var(--border-radius-l);
60
60
  box-sizing: border-box;
61
61
  }
62
- .bank-card__label_1njtl {
62
+ .bank-card__label_1wce0 {
63
63
  left: 0;
64
64
  transform: translateY(-1px);
65
65
  color: var(--color-black-60);
@@ -67,25 +67,25 @@
67
67
  line-height: 24px
68
68
  }
69
69
  @media (max-width: 360px) {
70
- .bank-card__label_1njtl {
70
+ .bank-card__label_1wce0 {
71
71
  font-size: 16px
72
72
  }
73
73
  }
74
- .bank-card__focused_1njtl .bank-card__label_1njtl,
75
- .bank-card__filled_1njtl .bank-card__label_1njtl {
74
+ .bank-card__focused_1wce0 .bank-card__label_1wce0,
75
+ .bank-card__filled_1wce0 .bank-card__label_1wce0 {
76
76
  color: var(--color-black);
77
77
  transform: translateY(-19px) scale(0.6)
78
78
  }
79
79
  @media (max-width: 360px) {
80
- .bank-card__focused_1njtl .bank-card__label_1njtl,
81
- .bank-card__filled_1njtl .bank-card__label_1njtl {
80
+ .bank-card__focused_1wce0 .bank-card__label_1wce0,
81
+ .bank-card__filled_1wce0 .bank-card__label_1wce0 {
82
82
  transform: translateY(-22px) scale(0.75)
83
83
  }
84
84
  }
85
- .bank-card__focused_1njtl:before {
85
+ .bank-card__focused_1wce0:before {
86
86
  transform: scale(1) !important;
87
87
  }
88
- .bank-card__input_1njtl {
88
+ .bank-card__input_1wce0 {
89
89
  font-size: 20px;
90
90
  line-height: 24px;
91
91
  font-weight: 400;
@@ -99,33 +99,33 @@
99
99
  padding-left: 0 !important
100
100
  }
101
101
  @media (max-width: 360px) {
102
- .bank-card__input_1njtl {
102
+ .bank-card__input_1wce0 {
103
103
  font-size: 16px
104
104
  }
105
105
  }
106
- .bank-card__bankLogo_1njtl {
106
+ .bank-card__bankLogo_1wce0 {
107
107
  position: absolute;
108
108
  top: 20px;
109
109
  left: 20px
110
110
  }
111
- .bank-card__bankLogo_1njtl svg {
111
+ .bank-card__bankLogo_1wce0 svg {
112
112
  max-height: 30px;
113
113
  width: auto;
114
114
  display: block
115
115
  }
116
- .bank-card__bankLogo_1njtl svg g {
116
+ .bank-card__bankLogo_1wce0 svg g {
117
117
  fill: var(--color-black);
118
118
  }
119
- .bank-card__brandLogo_1njtl {
119
+ .bank-card__brandLogo_1wce0 {
120
120
  position: absolute;
121
121
  bottom: 20px;
122
122
  right: 20px
123
123
  }
124
- .bank-card__brandLogo_1njtl svg {
124
+ .bank-card__brandLogo_1wce0 svg {
125
125
  display: block;
126
126
  fill: var(--color-black);
127
127
  }
128
- .bank-card__usePhoto_1njtl {
128
+ .bank-card__usePhoto_1wce0 {
129
129
  display: block;
130
130
  margin: 0;
131
131
  padding: 0;
@@ -143,7 +143,7 @@
143
143
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
144
144
  margin-right: calc(var(--gap-s) * -1)
145
145
  }
146
- .bank-card__usePhoto_1njtl svg {
146
+ .bank-card__usePhoto_1wce0 svg {
147
147
  fill: var(--color-black);
148
148
  display: block;
149
149
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-bank-card",
3
- "version": "5.0.1",
3
+ "version": "5.0.2",
4
4
  "description": "Bank card component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -18,7 +18,7 @@
18
18
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
19
19
  },
20
20
  "dependencies": {
21
- "@alfalab/core-components-masked-input": "^5.0.1",
21
+ "@alfalab/core-components-masked-input": "^5.0.2",
22
22
  "@alfalab/icons-classic": "^1.76.0",
23
23
  "@alfalab/icons-glyph": "^2.16.0",
24
24
  "@alfalab/icons-logotype": "^1.28.0",