@alfalab/core-components-bank-card 5.2.9 → 5.2.11

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 +3 -3
package/Component.js CHANGED
@@ -15,7 +15,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
15
15
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
16
16
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
17
17
 
18
- var styles = {"component":"bank-card__component_zuhzr","aspectRatioContainer":"bank-card__aspectRatioContainer_zuhzr","content":"bank-card__content_zuhzr","label":"bank-card__label_zuhzr","focused":"bank-card__focused_zuhzr","filled":"bank-card__filled_zuhzr","input":"bank-card__input_zuhzr","bankLogo":"bank-card__bankLogo_zuhzr","brandLogo":"bank-card__brandLogo_zuhzr","usePhoto":"bank-card__usePhoto_zuhzr"};
18
+ var styles = {"component":"bank-card__component_1mu0y","aspectRatioContainer":"bank-card__aspectRatioContainer_1mu0y","content":"bank-card__content_1mu0y","label":"bank-card__label_1mu0y","focused":"bank-card__focused_1mu0y","filled":"bank-card__filled_1mu0y","input":"bank-card__input_1mu0y","bankLogo":"bank-card__bankLogo_1mu0y","brandLogo":"bank-card__brandLogo_1mu0y","usePhoto":"bank-card__usePhoto_1mu0y"};
19
19
  require('./index.css')
20
20
 
21
21
  // prettier-ignore
package/esm/Component.js CHANGED
@@ -8,7 +8,7 @@ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
8
8
  import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
9
9
  import { validateCardNumber } from './utils.js';
10
10
 
11
- var styles = {"component":"bank-card__component_zuhzr","aspectRatioContainer":"bank-card__aspectRatioContainer_zuhzr","content":"bank-card__content_zuhzr","label":"bank-card__label_zuhzr","focused":"bank-card__focused_zuhzr","filled":"bank-card__filled_zuhzr","input":"bank-card__input_zuhzr","bankLogo":"bank-card__bankLogo_zuhzr","brandLogo":"bank-card__brandLogo_zuhzr","usePhoto":"bank-card__usePhoto_zuhzr"};
11
+ var styles = {"component":"bank-card__component_1mu0y","aspectRatioContainer":"bank-card__aspectRatioContainer_1mu0y","content":"bank-card__content_1mu0y","label":"bank-card__label_1mu0y","focused":"bank-card__focused_1mu0y","filled":"bank-card__filled_1mu0y","input":"bank-card__input_1mu0y","bankLogo":"bank-card__bankLogo_1mu0y","brandLogo":"bank-card__brandLogo_1mu0y","usePhoto":"bank-card__usePhoto_1mu0y"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: c0u0h */
1
+ /* hash: erka9 */
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_zuhzr {
26
+ .bank-card__component_1mu0y {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -43,11 +43,11 @@
43
43
 
44
44
  font-family: var(--font-family-styrene);
45
45
  }
46
- .bank-card__aspectRatioContainer_zuhzr {
46
+ .bank-card__aspectRatioContainer_1mu0y {
47
47
  /* Эталонный размер 343x216 */
48
48
  padding-bottom: 63%;
49
49
  }
50
- .bank-card__content_zuhzr {
50
+ .bank-card__content_1mu0y {
51
51
  position: absolute;
52
52
  top: 0;
53
53
  right: 0;
@@ -60,7 +60,7 @@
60
60
  border-radius: var(--border-radius-l);
61
61
  box-sizing: border-box;
62
62
  }
63
- .bank-card__label_zuhzr {
63
+ .bank-card__label_1mu0y {
64
64
  left: 0;
65
65
  transform: translateY(-1px);
66
66
  color: var(--color-black-60);
@@ -68,25 +68,25 @@
68
68
  line-height: 24px
69
69
  }
70
70
  @media (max-width: 360px) {
71
- .bank-card__label_zuhzr {
71
+ .bank-card__label_1mu0y {
72
72
  font-size: 16px
73
73
  }
74
74
  }
75
- .bank-card__focused_zuhzr .bank-card__label_zuhzr,
76
- .bank-card__filled_zuhzr .bank-card__label_zuhzr {
75
+ .bank-card__focused_1mu0y .bank-card__label_1mu0y,
76
+ .bank-card__filled_1mu0y .bank-card__label_1mu0y {
77
77
  color: var(--color-black);
78
78
  transform: translateY(-19px) scale(0.6)
79
79
  }
80
80
  @media (max-width: 360px) {
81
- .bank-card__focused_zuhzr .bank-card__label_zuhzr,
82
- .bank-card__filled_zuhzr .bank-card__label_zuhzr {
81
+ .bank-card__focused_1mu0y .bank-card__label_1mu0y,
82
+ .bank-card__filled_1mu0y .bank-card__label_1mu0y {
83
83
  transform: translateY(-22px) scale(0.75)
84
84
  }
85
85
  }
86
- .bank-card__focused_zuhzr:before {
86
+ .bank-card__focused_1mu0y:before {
87
87
  transform: scale(1) !important;
88
88
  }
89
- .bank-card__input_zuhzr {
89
+ .bank-card__input_1mu0y {
90
90
  font-size: 20px;
91
91
  line-height: 24px;
92
92
  font-weight: 400;
@@ -101,33 +101,33 @@
101
101
  padding-bottom: var(--gap-2xs) !important
102
102
  }
103
103
  @media (max-width: 360px) {
104
- .bank-card__input_zuhzr {
104
+ .bank-card__input_1mu0y {
105
105
  font-size: 16px
106
106
  }
107
107
  }
108
- .bank-card__bankLogo_zuhzr {
108
+ .bank-card__bankLogo_1mu0y {
109
109
  position: absolute;
110
110
  top: 20px;
111
111
  left: 20px
112
112
  }
113
- .bank-card__bankLogo_zuhzr svg {
113
+ .bank-card__bankLogo_1mu0y svg {
114
114
  max-height: 32px;
115
115
  width: auto;
116
116
  display: block
117
117
  }
118
- .bank-card__bankLogo_zuhzr svg g {
118
+ .bank-card__bankLogo_1mu0y svg g {
119
119
  fill: var(--color-black);
120
120
  }
121
- .bank-card__brandLogo_zuhzr {
121
+ .bank-card__brandLogo_1mu0y {
122
122
  position: absolute;
123
123
  bottom: 20px;
124
124
  right: 20px
125
125
  }
126
- .bank-card__brandLogo_zuhzr svg {
126
+ .bank-card__brandLogo_1mu0y svg {
127
127
  display: block;
128
128
  fill: var(--color-black);
129
129
  }
130
- .bank-card__usePhoto_zuhzr {
130
+ .bank-card__usePhoto_1mu0y {
131
131
  display: block;
132
132
  margin: 0;
133
133
  padding: 0;
@@ -145,7 +145,7 @@
145
145
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
146
146
  margin-right: calc(var(--gap-s) * -1)
147
147
  }
148
- .bank-card__usePhoto_zuhzr svg {
148
+ .bank-card__usePhoto_1mu0y svg {
149
149
  fill: var(--color-black);
150
150
  display: block;
151
151
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: c0u0h */
1
+ /* hash: erka9 */
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_zuhzr {
26
+ .bank-card__component_1mu0y {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -43,11 +43,11 @@
43
43
 
44
44
  font-family: var(--font-family-styrene);
45
45
  }
46
- .bank-card__aspectRatioContainer_zuhzr {
46
+ .bank-card__aspectRatioContainer_1mu0y {
47
47
  /* Эталонный размер 343x216 */
48
48
  padding-bottom: 63%;
49
49
  }
50
- .bank-card__content_zuhzr {
50
+ .bank-card__content_1mu0y {
51
51
  position: absolute;
52
52
  top: 0;
53
53
  right: 0;
@@ -60,7 +60,7 @@
60
60
  border-radius: var(--border-radius-l);
61
61
  box-sizing: border-box;
62
62
  }
63
- .bank-card__label_zuhzr {
63
+ .bank-card__label_1mu0y {
64
64
  left: 0;
65
65
  transform: translateY(-1px);
66
66
  color: var(--color-black-60);
@@ -68,25 +68,25 @@
68
68
  line-height: 24px
69
69
  }
70
70
  @media (max-width: 360px) {
71
- .bank-card__label_zuhzr {
71
+ .bank-card__label_1mu0y {
72
72
  font-size: 16px
73
73
  }
74
74
  }
75
- .bank-card__focused_zuhzr .bank-card__label_zuhzr,
76
- .bank-card__filled_zuhzr .bank-card__label_zuhzr {
75
+ .bank-card__focused_1mu0y .bank-card__label_1mu0y,
76
+ .bank-card__filled_1mu0y .bank-card__label_1mu0y {
77
77
  color: var(--color-black);
78
78
  transform: translateY(-19px) scale(0.6)
79
79
  }
80
80
  @media (max-width: 360px) {
81
- .bank-card__focused_zuhzr .bank-card__label_zuhzr,
82
- .bank-card__filled_zuhzr .bank-card__label_zuhzr {
81
+ .bank-card__focused_1mu0y .bank-card__label_1mu0y,
82
+ .bank-card__filled_1mu0y .bank-card__label_1mu0y {
83
83
  transform: translateY(-22px) scale(0.75)
84
84
  }
85
85
  }
86
- .bank-card__focused_zuhzr:before {
86
+ .bank-card__focused_1mu0y:before {
87
87
  transform: scale(1) !important;
88
88
  }
89
- .bank-card__input_zuhzr {
89
+ .bank-card__input_1mu0y {
90
90
  font-size: 20px;
91
91
  line-height: 24px;
92
92
  font-weight: 400;
@@ -101,33 +101,33 @@
101
101
  padding-bottom: var(--gap-2xs) !important
102
102
  }
103
103
  @media (max-width: 360px) {
104
- .bank-card__input_zuhzr {
104
+ .bank-card__input_1mu0y {
105
105
  font-size: 16px
106
106
  }
107
107
  }
108
- .bank-card__bankLogo_zuhzr {
108
+ .bank-card__bankLogo_1mu0y {
109
109
  position: absolute;
110
110
  top: 20px;
111
111
  left: 20px
112
112
  }
113
- .bank-card__bankLogo_zuhzr svg {
113
+ .bank-card__bankLogo_1mu0y svg {
114
114
  max-height: 32px;
115
115
  width: auto;
116
116
  display: block
117
117
  }
118
- .bank-card__bankLogo_zuhzr svg g {
118
+ .bank-card__bankLogo_1mu0y svg g {
119
119
  fill: var(--color-black);
120
120
  }
121
- .bank-card__brandLogo_zuhzr {
121
+ .bank-card__brandLogo_1mu0y {
122
122
  position: absolute;
123
123
  bottom: 20px;
124
124
  right: 20px
125
125
  }
126
- .bank-card__brandLogo_zuhzr svg {
126
+ .bank-card__brandLogo_1mu0y svg {
127
127
  display: block;
128
128
  fill: var(--color-black);
129
129
  }
130
- .bank-card__usePhoto_zuhzr {
130
+ .bank-card__usePhoto_1mu0y {
131
131
  display: block;
132
132
  margin: 0;
133
133
  padding: 0;
@@ -145,7 +145,7 @@
145
145
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
146
146
  margin-right: calc(var(--gap-s) * -1)
147
147
  }
148
- .bank-card__usePhoto_zuhzr svg {
148
+ .bank-card__usePhoto_1mu0y svg {
149
149
  fill: var(--color-black);
150
150
  display: block;
151
151
  }
package/modern/Component.js CHANGED
@@ -8,7 +8,7 @@ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
8
8
  import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
9
9
  import { validateCardNumber } from './utils.js';
10
10
 
11
- const styles = {"component":"bank-card__component_zuhzr","aspectRatioContainer":"bank-card__aspectRatioContainer_zuhzr","content":"bank-card__content_zuhzr","label":"bank-card__label_zuhzr","focused":"bank-card__focused_zuhzr","filled":"bank-card__filled_zuhzr","input":"bank-card__input_zuhzr","bankLogo":"bank-card__bankLogo_zuhzr","brandLogo":"bank-card__brandLogo_zuhzr","usePhoto":"bank-card__usePhoto_zuhzr"};
11
+ const styles = {"component":"bank-card__component_1mu0y","aspectRatioContainer":"bank-card__aspectRatioContainer_1mu0y","content":"bank-card__content_1mu0y","label":"bank-card__label_1mu0y","focused":"bank-card__focused_1mu0y","filled":"bank-card__filled_1mu0y","input":"bank-card__input_1mu0y","bankLogo":"bank-card__bankLogo_1mu0y","brandLogo":"bank-card__brandLogo_1mu0y","usePhoto":"bank-card__usePhoto_1mu0y"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: c0u0h */
1
+ /* hash: erka9 */
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_zuhzr {
26
+ .bank-card__component_1mu0y {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -43,11 +43,11 @@
43
43
 
44
44
  font-family: var(--font-family-styrene);
45
45
  }
46
- .bank-card__aspectRatioContainer_zuhzr {
46
+ .bank-card__aspectRatioContainer_1mu0y {
47
47
  /* Эталонный размер 343x216 */
48
48
  padding-bottom: 63%;
49
49
  }
50
- .bank-card__content_zuhzr {
50
+ .bank-card__content_1mu0y {
51
51
  position: absolute;
52
52
  top: 0;
53
53
  right: 0;
@@ -60,7 +60,7 @@
60
60
  border-radius: var(--border-radius-l);
61
61
  box-sizing: border-box;
62
62
  }
63
- .bank-card__label_zuhzr {
63
+ .bank-card__label_1mu0y {
64
64
  left: 0;
65
65
  transform: translateY(-1px);
66
66
  color: var(--color-black-60);
@@ -68,25 +68,25 @@
68
68
  line-height: 24px
69
69
  }
70
70
  @media (max-width: 360px) {
71
- .bank-card__label_zuhzr {
71
+ .bank-card__label_1mu0y {
72
72
  font-size: 16px
73
73
  }
74
74
  }
75
- .bank-card__focused_zuhzr .bank-card__label_zuhzr,
76
- .bank-card__filled_zuhzr .bank-card__label_zuhzr {
75
+ .bank-card__focused_1mu0y .bank-card__label_1mu0y,
76
+ .bank-card__filled_1mu0y .bank-card__label_1mu0y {
77
77
  color: var(--color-black);
78
78
  transform: translateY(-19px) scale(0.6)
79
79
  }
80
80
  @media (max-width: 360px) {
81
- .bank-card__focused_zuhzr .bank-card__label_zuhzr,
82
- .bank-card__filled_zuhzr .bank-card__label_zuhzr {
81
+ .bank-card__focused_1mu0y .bank-card__label_1mu0y,
82
+ .bank-card__filled_1mu0y .bank-card__label_1mu0y {
83
83
  transform: translateY(-22px) scale(0.75)
84
84
  }
85
85
  }
86
- .bank-card__focused_zuhzr:before {
86
+ .bank-card__focused_1mu0y:before {
87
87
  transform: scale(1) !important;
88
88
  }
89
- .bank-card__input_zuhzr {
89
+ .bank-card__input_1mu0y {
90
90
  font-size: 20px;
91
91
  line-height: 24px;
92
92
  font-weight: 400;
@@ -101,33 +101,33 @@
101
101
  padding-bottom: var(--gap-2xs) !important
102
102
  }
103
103
  @media (max-width: 360px) {
104
- .bank-card__input_zuhzr {
104
+ .bank-card__input_1mu0y {
105
105
  font-size: 16px
106
106
  }
107
107
  }
108
- .bank-card__bankLogo_zuhzr {
108
+ .bank-card__bankLogo_1mu0y {
109
109
  position: absolute;
110
110
  top: 20px;
111
111
  left: 20px
112
112
  }
113
- .bank-card__bankLogo_zuhzr svg {
113
+ .bank-card__bankLogo_1mu0y svg {
114
114
  max-height: 32px;
115
115
  width: auto;
116
116
  display: block
117
117
  }
118
- .bank-card__bankLogo_zuhzr svg g {
118
+ .bank-card__bankLogo_1mu0y svg g {
119
119
  fill: var(--color-black);
120
120
  }
121
- .bank-card__brandLogo_zuhzr {
121
+ .bank-card__brandLogo_1mu0y {
122
122
  position: absolute;
123
123
  bottom: 20px;
124
124
  right: 20px
125
125
  }
126
- .bank-card__brandLogo_zuhzr svg {
126
+ .bank-card__brandLogo_1mu0y svg {
127
127
  display: block;
128
128
  fill: var(--color-black);
129
129
  }
130
- .bank-card__usePhoto_zuhzr {
130
+ .bank-card__usePhoto_1mu0y {
131
131
  display: block;
132
132
  margin: 0;
133
133
  padding: 0;
@@ -145,7 +145,7 @@
145
145
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
146
146
  margin-right: calc(var(--gap-s) * -1)
147
147
  }
148
- .bank-card__usePhoto_zuhzr svg {
148
+ .bank-card__usePhoto_1mu0y svg {
149
149
  fill: var(--color-black);
150
150
  display: block;
151
151
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-bank-card",
3
- "version": "5.2.9",
3
+ "version": "5.2.11",
4
4
  "description": "Bank card component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -18,8 +18,8 @@
18
18
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
19
19
  },
20
20
  "dependencies": {
21
- "@alfalab/core-components-masked-input": "^6.1.2",
22
- "@alfalab/icons-glyph": "^2.71.0",
21
+ "@alfalab/core-components-masked-input": "^6.1.4",
22
+ "@alfalab/icons-glyph": "^2.89.0",
23
23
  "@alfalab/icons-logotype": "^2.19.0",
24
24
  "classnames": "^2.3.1"
25
25
  }