@alfalab/core-components-bank-card 5.2.21 → 5.2.22

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
@@ -17,7 +17,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
17
17
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
18
18
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
19
19
 
20
- var styles = {"component":"bank-card__component_69fyk","aspectRatioContainer":"bank-card__aspectRatioContainer_69fyk","content":"bank-card__content_69fyk","label":"bank-card__label_69fyk","focused":"bank-card__focused_69fyk","filled":"bank-card__filled_69fyk","input":"bank-card__input_69fyk","bankLogo":"bank-card__bankLogo_69fyk","brandLogo":"bank-card__brandLogo_69fyk","usePhoto":"bank-card__usePhoto_69fyk"};
20
+ var styles = {"component":"bank-card__component_iobvi","aspectRatioContainer":"bank-card__aspectRatioContainer_iobvi","content":"bank-card__content_iobvi","label":"bank-card__label_iobvi","focused":"bank-card__focused_iobvi","filled":"bank-card__filled_iobvi","input":"bank-card__input_iobvi","bankLogo":"bank-card__bankLogo_iobvi","brandLogo":"bank-card__brandLogo_iobvi","usePhoto":"bank-card__usePhoto_iobvi"};
21
21
  require('./index.css')
22
22
 
23
23
  // 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_69fyk","aspectRatioContainer":"bank-card__aspectRatioContainer_69fyk","content":"bank-card__content_69fyk","label":"bank-card__label_69fyk","focused":"bank-card__focused_69fyk","filled":"bank-card__filled_69fyk","input":"bank-card__input_69fyk","bankLogo":"bank-card__bankLogo_69fyk","brandLogo":"bank-card__brandLogo_69fyk","usePhoto":"bank-card__usePhoto_69fyk"};
11
+ var styles = {"component":"bank-card__component_iobvi","aspectRatioContainer":"bank-card__aspectRatioContainer_iobvi","content":"bank-card__content_iobvi","label":"bank-card__label_iobvi","focused":"bank-card__focused_iobvi","filled":"bank-card__filled_iobvi","input":"bank-card__input_iobvi","bankLogo":"bank-card__bankLogo_iobvi","brandLogo":"bank-card__brandLogo_iobvi","usePhoto":"bank-card__usePhoto_iobvi"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: x2gwt */
1
+ /* hash: mx6yl */
2
2
  :root {
3
3
  --color-black: #000;
4
4
  --color-black-60: rgba(0, 0, 0, 0.6);
@@ -22,7 +22,7 @@
22
22
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
23
23
  'Helvetica Neue', Helvetica, sans-serif;
24
24
  } :root {
25
- } .bank-card__component_69fyk {
25
+ } .bank-card__component_iobvi {
26
26
  /* TODO: как это будет собираться и работать в webView */
27
27
  --form-control-border-radius: 0;
28
28
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -41,10 +41,10 @@
41
41
  max-width: 343px;
42
42
 
43
43
  font-family: var(--font-family-styrene);
44
- } .bank-card__aspectRatioContainer_69fyk {
44
+ } .bank-card__aspectRatioContainer_iobvi {
45
45
  /* Эталонный размер 343x216 */
46
46
  padding-bottom: 63%;
47
- } .bank-card__content_69fyk {
47
+ } .bank-card__content_iobvi {
48
48
  position: absolute;
49
49
  top: 0;
50
50
  right: 0;
@@ -56,26 +56,26 @@
56
56
  padding-right: var(--gap-l);
57
57
  border-radius: var(--border-radius-l);
58
58
  box-sizing: border-box;
59
- } .bank-card__label_69fyk {
59
+ } .bank-card__label_iobvi {
60
60
  left: 0;
61
61
  transform: translateY(-1px);
62
62
  color: var(--color-black-60);
63
63
  font-size: 20px;
64
64
  line-height: 24px
65
- } @media (max-width: 360px) { .bank-card__label_69fyk {
65
+ } @media (max-width: 360px) { .bank-card__label_iobvi {
66
66
  font-size: 16px
67
67
  }
68
- } .bank-card__focused_69fyk .bank-card__label_69fyk,
69
- .bank-card__filled_69fyk .bank-card__label_69fyk {
68
+ } .bank-card__focused_iobvi .bank-card__label_iobvi,
69
+ .bank-card__filled_iobvi .bank-card__label_iobvi {
70
70
  color: var(--color-black);
71
71
  transform: translateY(-19px) scale(0.6)
72
- } @media (max-width: 360px) { .bank-card__focused_69fyk .bank-card__label_69fyk,
73
- .bank-card__filled_69fyk .bank-card__label_69fyk {
72
+ } @media (max-width: 360px) { .bank-card__focused_iobvi .bank-card__label_iobvi,
73
+ .bank-card__filled_iobvi .bank-card__label_iobvi {
74
74
  transform: translateY(-22px) scale(0.75)
75
75
  }
76
- } .bank-card__focused_69fyk:before {
76
+ } .bank-card__focused_iobvi:before {
77
77
  transform: scale(1) !important;
78
- } .bank-card__input_69fyk {
78
+ } .bank-card__input_iobvi {
79
79
  font-size: 20px;
80
80
  line-height: 24px;
81
81
  font-weight: 400;
@@ -88,27 +88,27 @@
88
88
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
89
89
  padding-left: 0 !important;
90
90
  padding-bottom: var(--gap-2xs) !important
91
- } @media (max-width: 360px) { .bank-card__input_69fyk {
91
+ } @media (max-width: 360px) { .bank-card__input_iobvi {
92
92
  font-size: 16px
93
93
  }
94
- } .bank-card__bankLogo_69fyk {
94
+ } .bank-card__bankLogo_iobvi {
95
95
  position: absolute;
96
96
  top: 20px;
97
97
  left: 20px
98
- } .bank-card__bankLogo_69fyk svg {
98
+ } .bank-card__bankLogo_iobvi svg {
99
99
  max-height: 32px;
100
100
  width: auto;
101
101
  display: block
102
- } .bank-card__bankLogo_69fyk svg g {
102
+ } .bank-card__bankLogo_iobvi svg g {
103
103
  fill: var(--color-black);
104
- } .bank-card__brandLogo_69fyk {
104
+ } .bank-card__brandLogo_iobvi {
105
105
  position: absolute;
106
106
  bottom: 20px;
107
107
  right: 20px
108
- } .bank-card__brandLogo_69fyk svg {
108
+ } .bank-card__brandLogo_iobvi svg {
109
109
  display: block;
110
110
  fill: var(--color-black);
111
- } .bank-card__usePhoto_69fyk {
111
+ } .bank-card__usePhoto_iobvi {
112
112
  display: block;
113
113
  margin: 0;
114
114
  padding: 0;
@@ -125,7 +125,7 @@
125
125
 
126
126
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
127
127
  margin-right: calc(var(--gap-s) * -1)
128
- } .bank-card__usePhoto_69fyk svg {
128
+ } .bank-card__usePhoto_iobvi svg {
129
129
  fill: var(--color-black);
130
130
  display: block;
131
131
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: x2gwt */
1
+ /* hash: mx6yl */
2
2
  :root {
3
3
  --color-black: #000;
4
4
  --color-black-60: rgba(0, 0, 0, 0.6);
@@ -22,7 +22,7 @@
22
22
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
23
23
  'Helvetica Neue', Helvetica, sans-serif;
24
24
  } :root {
25
- } .bank-card__component_69fyk {
25
+ } .bank-card__component_iobvi {
26
26
  /* TODO: как это будет собираться и работать в webView */
27
27
  --form-control-border-radius: 0;
28
28
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -41,10 +41,10 @@
41
41
  max-width: 343px;
42
42
 
43
43
  font-family: var(--font-family-styrene);
44
- } .bank-card__aspectRatioContainer_69fyk {
44
+ } .bank-card__aspectRatioContainer_iobvi {
45
45
  /* Эталонный размер 343x216 */
46
46
  padding-bottom: 63%;
47
- } .bank-card__content_69fyk {
47
+ } .bank-card__content_iobvi {
48
48
  position: absolute;
49
49
  top: 0;
50
50
  right: 0;
@@ -56,26 +56,26 @@
56
56
  padding-right: var(--gap-l);
57
57
  border-radius: var(--border-radius-l);
58
58
  box-sizing: border-box;
59
- } .bank-card__label_69fyk {
59
+ } .bank-card__label_iobvi {
60
60
  left: 0;
61
61
  transform: translateY(-1px);
62
62
  color: var(--color-black-60);
63
63
  font-size: 20px;
64
64
  line-height: 24px
65
- } @media (max-width: 360px) { .bank-card__label_69fyk {
65
+ } @media (max-width: 360px) { .bank-card__label_iobvi {
66
66
  font-size: 16px
67
67
  }
68
- } .bank-card__focused_69fyk .bank-card__label_69fyk,
69
- .bank-card__filled_69fyk .bank-card__label_69fyk {
68
+ } .bank-card__focused_iobvi .bank-card__label_iobvi,
69
+ .bank-card__filled_iobvi .bank-card__label_iobvi {
70
70
  color: var(--color-black);
71
71
  transform: translateY(-19px) scale(0.6)
72
- } @media (max-width: 360px) { .bank-card__focused_69fyk .bank-card__label_69fyk,
73
- .bank-card__filled_69fyk .bank-card__label_69fyk {
72
+ } @media (max-width: 360px) { .bank-card__focused_iobvi .bank-card__label_iobvi,
73
+ .bank-card__filled_iobvi .bank-card__label_iobvi {
74
74
  transform: translateY(-22px) scale(0.75)
75
75
  }
76
- } .bank-card__focused_69fyk:before {
76
+ } .bank-card__focused_iobvi:before {
77
77
  transform: scale(1) !important;
78
- } .bank-card__input_69fyk {
78
+ } .bank-card__input_iobvi {
79
79
  font-size: 20px;
80
80
  line-height: 24px;
81
81
  font-weight: 400;
@@ -88,27 +88,27 @@
88
88
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
89
89
  padding-left: 0 !important;
90
90
  padding-bottom: var(--gap-2xs) !important
91
- } @media (max-width: 360px) { .bank-card__input_69fyk {
91
+ } @media (max-width: 360px) { .bank-card__input_iobvi {
92
92
  font-size: 16px
93
93
  }
94
- } .bank-card__bankLogo_69fyk {
94
+ } .bank-card__bankLogo_iobvi {
95
95
  position: absolute;
96
96
  top: 20px;
97
97
  left: 20px
98
- } .bank-card__bankLogo_69fyk svg {
98
+ } .bank-card__bankLogo_iobvi svg {
99
99
  max-height: 32px;
100
100
  width: auto;
101
101
  display: block
102
- } .bank-card__bankLogo_69fyk svg g {
102
+ } .bank-card__bankLogo_iobvi svg g {
103
103
  fill: var(--color-black);
104
- } .bank-card__brandLogo_69fyk {
104
+ } .bank-card__brandLogo_iobvi {
105
105
  position: absolute;
106
106
  bottom: 20px;
107
107
  right: 20px
108
- } .bank-card__brandLogo_69fyk svg {
108
+ } .bank-card__brandLogo_iobvi svg {
109
109
  display: block;
110
110
  fill: var(--color-black);
111
- } .bank-card__usePhoto_69fyk {
111
+ } .bank-card__usePhoto_iobvi {
112
112
  display: block;
113
113
  margin: 0;
114
114
  padding: 0;
@@ -125,7 +125,7 @@
125
125
 
126
126
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
127
127
  margin-right: calc(var(--gap-s) * -1)
128
- } .bank-card__usePhoto_69fyk svg {
128
+ } .bank-card__usePhoto_iobvi svg {
129
129
  fill: var(--color-black);
130
130
  display: block;
131
131
  }
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_69fyk","aspectRatioContainer":"bank-card__aspectRatioContainer_69fyk","content":"bank-card__content_69fyk","label":"bank-card__label_69fyk","focused":"bank-card__focused_69fyk","filled":"bank-card__filled_69fyk","input":"bank-card__input_69fyk","bankLogo":"bank-card__bankLogo_69fyk","brandLogo":"bank-card__brandLogo_69fyk","usePhoto":"bank-card__usePhoto_69fyk"};
11
+ const styles = {"component":"bank-card__component_iobvi","aspectRatioContainer":"bank-card__aspectRatioContainer_iobvi","content":"bank-card__content_iobvi","label":"bank-card__label_iobvi","focused":"bank-card__focused_iobvi","filled":"bank-card__filled_iobvi","input":"bank-card__input_iobvi","bankLogo":"bank-card__bankLogo_iobvi","brandLogo":"bank-card__brandLogo_iobvi","usePhoto":"bank-card__usePhoto_iobvi"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: x2gwt */
1
+ /* hash: mx6yl */
2
2
  :root {
3
3
  --color-black: #000;
4
4
  --color-black-60: rgba(0, 0, 0, 0.6);
@@ -22,7 +22,7 @@
22
22
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
23
23
  'Helvetica Neue', Helvetica, sans-serif;
24
24
  } :root {
25
- } .bank-card__component_69fyk {
25
+ } .bank-card__component_iobvi {
26
26
  /* TODO: как это будет собираться и работать в webView */
27
27
  --form-control-border-radius: 0;
28
28
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -41,10 +41,10 @@
41
41
  max-width: 343px;
42
42
 
43
43
  font-family: var(--font-family-styrene);
44
- } .bank-card__aspectRatioContainer_69fyk {
44
+ } .bank-card__aspectRatioContainer_iobvi {
45
45
  /* Эталонный размер 343x216 */
46
46
  padding-bottom: 63%;
47
- } .bank-card__content_69fyk {
47
+ } .bank-card__content_iobvi {
48
48
  position: absolute;
49
49
  top: 0;
50
50
  right: 0;
@@ -56,26 +56,26 @@
56
56
  padding-right: var(--gap-l);
57
57
  border-radius: var(--border-radius-l);
58
58
  box-sizing: border-box;
59
- } .bank-card__label_69fyk {
59
+ } .bank-card__label_iobvi {
60
60
  left: 0;
61
61
  transform: translateY(-1px);
62
62
  color: var(--color-black-60);
63
63
  font-size: 20px;
64
64
  line-height: 24px
65
- } @media (max-width: 360px) { .bank-card__label_69fyk {
65
+ } @media (max-width: 360px) { .bank-card__label_iobvi {
66
66
  font-size: 16px
67
67
  }
68
- } .bank-card__focused_69fyk .bank-card__label_69fyk,
69
- .bank-card__filled_69fyk .bank-card__label_69fyk {
68
+ } .bank-card__focused_iobvi .bank-card__label_iobvi,
69
+ .bank-card__filled_iobvi .bank-card__label_iobvi {
70
70
  color: var(--color-black);
71
71
  transform: translateY(-19px) scale(0.6)
72
- } @media (max-width: 360px) { .bank-card__focused_69fyk .bank-card__label_69fyk,
73
- .bank-card__filled_69fyk .bank-card__label_69fyk {
72
+ } @media (max-width: 360px) { .bank-card__focused_iobvi .bank-card__label_iobvi,
73
+ .bank-card__filled_iobvi .bank-card__label_iobvi {
74
74
  transform: translateY(-22px) scale(0.75)
75
75
  }
76
- } .bank-card__focused_69fyk:before {
76
+ } .bank-card__focused_iobvi:before {
77
77
  transform: scale(1) !important;
78
- } .bank-card__input_69fyk {
78
+ } .bank-card__input_iobvi {
79
79
  font-size: 20px;
80
80
  line-height: 24px;
81
81
  font-weight: 400;
@@ -88,27 +88,27 @@
88
88
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
89
89
  padding-left: 0 !important;
90
90
  padding-bottom: var(--gap-2xs) !important
91
- } @media (max-width: 360px) { .bank-card__input_69fyk {
91
+ } @media (max-width: 360px) { .bank-card__input_iobvi {
92
92
  font-size: 16px
93
93
  }
94
- } .bank-card__bankLogo_69fyk {
94
+ } .bank-card__bankLogo_iobvi {
95
95
  position: absolute;
96
96
  top: 20px;
97
97
  left: 20px
98
- } .bank-card__bankLogo_69fyk svg {
98
+ } .bank-card__bankLogo_iobvi svg {
99
99
  max-height: 32px;
100
100
  width: auto;
101
101
  display: block
102
- } .bank-card__bankLogo_69fyk svg g {
102
+ } .bank-card__bankLogo_iobvi svg g {
103
103
  fill: var(--color-black);
104
- } .bank-card__brandLogo_69fyk {
104
+ } .bank-card__brandLogo_iobvi {
105
105
  position: absolute;
106
106
  bottom: 20px;
107
107
  right: 20px
108
- } .bank-card__brandLogo_69fyk svg {
108
+ } .bank-card__brandLogo_iobvi svg {
109
109
  display: block;
110
110
  fill: var(--color-black);
111
- } .bank-card__usePhoto_69fyk {
111
+ } .bank-card__usePhoto_iobvi {
112
112
  display: block;
113
113
  margin: 0;
114
114
  padding: 0;
@@ -125,7 +125,7 @@
125
125
 
126
126
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
127
127
  margin-right: calc(var(--gap-s) * -1)
128
- } .bank-card__usePhoto_69fyk svg {
128
+ } .bank-card__usePhoto_iobvi svg {
129
129
  fill: var(--color-black);
130
130
  display: block;
131
131
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-bank-card",
3
- "version": "5.2.21",
3
+ "version": "5.2.22",
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.14",
22
- "@alfalab/icons-glyph": "^2.89.0",
21
+ "@alfalab/core-components-masked-input": "^6.1.15",
22
+ "@alfalab/icons-glyph": "^2.108.0",
23
23
  "@alfalab/icons-logotype": "^2.19.0",
24
24
  "classnames": "^2.3.1",
25
25
  "tslib": "^2.4.0"