@alfalab/core-components-bank-card 5.7.8 → 5.7.10

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 (8) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +6 -4
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +26 -24
  5. package/index.css +26 -24
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +26 -24
  8. package/package.json +5 -3
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":"bank-card__component_ysl7u","aspectRatioContainer":"bank-card__aspectRatioContainer_ysl7u","content":"bank-card__content_ysl7u","label":"bank-card__label_ysl7u","focused":"bank-card__focused_ysl7u","filled":"bank-card__filled_ysl7u","input":"bank-card__input_ysl7u","bankLogo":"bank-card__bankLogo_ysl7u","brandLogo":"bank-card__brandLogo_ysl7u","usePhoto":"bank-card__usePhoto_ysl7u"};
22
+ var styles = {"component":"bank-card__component_lghyr","aspectRatioContainer":"bank-card__aspectRatioContainer_lghyr","content":"bank-card__content_lghyr","label":"bank-card__label_lghyr","focused":"bank-card__focused_lghyr","filled":"bank-card__filled_lghyr","input":"bank-card__input_lghyr","bankLogo":"bank-card__bankLogo_lghyr","brandLogo":"bank-card__brandLogo_lghyr","usePhoto":"bank-card__usePhoto_lghyr"};
23
23
  require('./index.css')
24
24
 
25
25
  // prettier-ignore
package/cssm/index.module.css CHANGED
@@ -13,10 +13,12 @@
13
13
  /* Hard up */
14
14
  } :root {
15
15
  --border-radius-l: 12px;
16
- } :root {
17
- --gap-2xs: 4px;
18
- --gap-s: 12px;
19
- --gap-l: 20px;
16
+ } :root { /* deprecated */
17
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
18
+ --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */
19
+ --gap-l: 20px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
20
+
21
+ /* новые значения, используйте их */
20
22
  } :root {
21
23
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
22
24
  'Helvetica Neue', Helvetica, sans-serif;
package/esm/Component.js CHANGED
@@ -10,7 +10,7 @@ import { getDefaultInputLabel } from './helpers/getDefaultInputLabel.js';
10
10
  import { MaskTypeEnum } from './enums.js';
11
11
  import { validateCardNumber } from './utils.js';
12
12
 
13
- var styles = {"component":"bank-card__component_ysl7u","aspectRatioContainer":"bank-card__aspectRatioContainer_ysl7u","content":"bank-card__content_ysl7u","label":"bank-card__label_ysl7u","focused":"bank-card__focused_ysl7u","filled":"bank-card__filled_ysl7u","input":"bank-card__input_ysl7u","bankLogo":"bank-card__bankLogo_ysl7u","brandLogo":"bank-card__brandLogo_ysl7u","usePhoto":"bank-card__usePhoto_ysl7u"};
13
+ var styles = {"component":"bank-card__component_lghyr","aspectRatioContainer":"bank-card__aspectRatioContainer_lghyr","content":"bank-card__content_lghyr","label":"bank-card__label_lghyr","focused":"bank-card__focused_lghyr","filled":"bank-card__filled_lghyr","input":"bank-card__input_lghyr","bankLogo":"bank-card__bankLogo_lghyr","brandLogo":"bank-card__brandLogo_lghyr","usePhoto":"bank-card__usePhoto_lghyr"};
14
14
  require('./index.css')
15
15
 
16
16
  // prettier-ignore
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 929fw */
1
+ /* hash: 1a2jf */
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-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -14,15 +14,17 @@
14
14
  /* Hard up */
15
15
  } :root {
16
16
  --border-radius-l: 12px;
17
- } :root {
18
- --gap-2xs: 4px;
19
- --gap-s: 12px;
20
- --gap-l: 20px;
17
+ } :root { /* deprecated */
18
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
19
+ --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */
20
+ --gap-l: 20px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
+
22
+ /* новые значения, используйте их */
21
23
  } :root {
22
24
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
23
25
  'Helvetica Neue', Helvetica, sans-serif;
24
26
  } :root {
25
- } .bank-card__component_ysl7u {
27
+ } .bank-card__component_lghyr {
26
28
  /* TODO: как это будет собираться и работать в webView */
27
29
  --form-control-border-radius: 0;
28
30
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -41,10 +43,10 @@
41
43
  max-width: 343px;
42
44
 
43
45
  font-family: var(--font-family-styrene);
44
- } .bank-card__aspectRatioContainer_ysl7u {
46
+ } .bank-card__aspectRatioContainer_lghyr {
45
47
  /* Эталонный размер 343x216 */
46
48
  padding-bottom: 63%;
47
- } .bank-card__content_ysl7u {
49
+ } .bank-card__content_lghyr {
48
50
  position: absolute;
49
51
  top: 0;
50
52
  right: 0;
@@ -56,26 +58,26 @@
56
58
  padding-right: var(--gap-l);
57
59
  border-radius: var(--border-radius-l);
58
60
  box-sizing: border-box;
59
- } .bank-card__label_ysl7u {
61
+ } .bank-card__label_lghyr {
60
62
  left: 0;
61
63
  transform: translateY(-1px);
62
64
  color: var(--color-light-text-secondary);
63
65
  font-size: 20px;
64
66
  line-height: 24px
65
- } @media (max-width: 360px) { .bank-card__label_ysl7u {
67
+ } @media (max-width: 360px) { .bank-card__label_lghyr {
66
68
  font-size: 16px
67
69
  }
68
- } .bank-card__focused_ysl7u .bank-card__label_ysl7u,
69
- .bank-card__filled_ysl7u .bank-card__label_ysl7u {
70
+ } .bank-card__focused_lghyr .bank-card__label_lghyr,
71
+ .bank-card__filled_lghyr .bank-card__label_lghyr {
70
72
  color: var(--color-light-neutral-translucent-1300);
71
73
  transform: translateY(-19px) scale(0.6)
72
- } @media (max-width: 360px) { .bank-card__focused_ysl7u .bank-card__label_ysl7u,
73
- .bank-card__filled_ysl7u .bank-card__label_ysl7u {
74
+ } @media (max-width: 360px) { .bank-card__focused_lghyr .bank-card__label_lghyr,
75
+ .bank-card__filled_lghyr .bank-card__label_lghyr {
74
76
  transform: translateY(-22px) scale(0.75)
75
77
  }
76
- } .bank-card__focused_ysl7u:before {
78
+ } .bank-card__focused_lghyr:before {
77
79
  transform: scale(1) !important;
78
- } .bank-card__input_ysl7u {
80
+ } .bank-card__input_lghyr {
79
81
  font-size: 20px;
80
82
  line-height: 24px;
81
83
  font-weight: 400;
@@ -88,27 +90,27 @@
88
90
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
89
91
  padding-left: 0 !important;
90
92
  padding-bottom: var(--gap-2xs) !important
91
- } @media (max-width: 360px) { .bank-card__input_ysl7u {
93
+ } @media (max-width: 360px) { .bank-card__input_lghyr {
92
94
  font-size: 16px
93
95
  }
94
- } .bank-card__bankLogo_ysl7u {
96
+ } .bank-card__bankLogo_lghyr {
95
97
  position: absolute;
96
98
  top: 20px;
97
99
  left: 20px
98
- } .bank-card__bankLogo_ysl7u svg {
100
+ } .bank-card__bankLogo_lghyr svg {
99
101
  max-height: 32px;
100
102
  width: auto;
101
103
  display: block
102
- } .bank-card__bankLogo_ysl7u svg g {
104
+ } .bank-card__bankLogo_lghyr svg g {
103
105
  fill: var(--color-light-neutral-translucent-1300);
104
- } .bank-card__brandLogo_ysl7u {
106
+ } .bank-card__brandLogo_lghyr {
105
107
  position: absolute;
106
108
  bottom: 20px;
107
109
  right: 20px
108
- } .bank-card__brandLogo_ysl7u svg {
110
+ } .bank-card__brandLogo_lghyr svg {
109
111
  display: block;
110
112
  fill: var(--color-light-neutral-translucent-1300);
111
- } .bank-card__usePhoto_ysl7u {
113
+ } .bank-card__usePhoto_lghyr {
112
114
  display: block;
113
115
  margin: 0;
114
116
  padding: 0;
@@ -125,7 +127,7 @@
125
127
 
126
128
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
127
129
  margin-right: calc(var(--gap-s) * -1)
128
- } .bank-card__usePhoto_ysl7u svg {
130
+ } .bank-card__usePhoto_lghyr svg {
129
131
  fill: var(--color-light-neutral-translucent-1300);
130
132
  display: block;
131
133
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 929fw */
1
+ /* hash: 1a2jf */
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-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -14,15 +14,17 @@
14
14
  /* Hard up */
15
15
  } :root {
16
16
  --border-radius-l: 12px;
17
- } :root {
18
- --gap-2xs: 4px;
19
- --gap-s: 12px;
20
- --gap-l: 20px;
17
+ } :root { /* deprecated */
18
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
19
+ --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */
20
+ --gap-l: 20px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
+
22
+ /* новые значения, используйте их */
21
23
  } :root {
22
24
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
23
25
  'Helvetica Neue', Helvetica, sans-serif;
24
26
  } :root {
25
- } .bank-card__component_ysl7u {
27
+ } .bank-card__component_lghyr {
26
28
  /* TODO: как это будет собираться и работать в webView */
27
29
  --form-control-border-radius: 0;
28
30
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -41,10 +43,10 @@
41
43
  max-width: 343px;
42
44
 
43
45
  font-family: var(--font-family-styrene);
44
- } .bank-card__aspectRatioContainer_ysl7u {
46
+ } .bank-card__aspectRatioContainer_lghyr {
45
47
  /* Эталонный размер 343x216 */
46
48
  padding-bottom: 63%;
47
- } .bank-card__content_ysl7u {
49
+ } .bank-card__content_lghyr {
48
50
  position: absolute;
49
51
  top: 0;
50
52
  right: 0;
@@ -56,26 +58,26 @@
56
58
  padding-right: var(--gap-l);
57
59
  border-radius: var(--border-radius-l);
58
60
  box-sizing: border-box;
59
- } .bank-card__label_ysl7u {
61
+ } .bank-card__label_lghyr {
60
62
  left: 0;
61
63
  transform: translateY(-1px);
62
64
  color: var(--color-light-text-secondary);
63
65
  font-size: 20px;
64
66
  line-height: 24px
65
- } @media (max-width: 360px) { .bank-card__label_ysl7u {
67
+ } @media (max-width: 360px) { .bank-card__label_lghyr {
66
68
  font-size: 16px
67
69
  }
68
- } .bank-card__focused_ysl7u .bank-card__label_ysl7u,
69
- .bank-card__filled_ysl7u .bank-card__label_ysl7u {
70
+ } .bank-card__focused_lghyr .bank-card__label_lghyr,
71
+ .bank-card__filled_lghyr .bank-card__label_lghyr {
70
72
  color: var(--color-light-neutral-translucent-1300);
71
73
  transform: translateY(-19px) scale(0.6)
72
- } @media (max-width: 360px) { .bank-card__focused_ysl7u .bank-card__label_ysl7u,
73
- .bank-card__filled_ysl7u .bank-card__label_ysl7u {
74
+ } @media (max-width: 360px) { .bank-card__focused_lghyr .bank-card__label_lghyr,
75
+ .bank-card__filled_lghyr .bank-card__label_lghyr {
74
76
  transform: translateY(-22px) scale(0.75)
75
77
  }
76
- } .bank-card__focused_ysl7u:before {
78
+ } .bank-card__focused_lghyr:before {
77
79
  transform: scale(1) !important;
78
- } .bank-card__input_ysl7u {
80
+ } .bank-card__input_lghyr {
79
81
  font-size: 20px;
80
82
  line-height: 24px;
81
83
  font-weight: 400;
@@ -88,27 +90,27 @@
88
90
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
89
91
  padding-left: 0 !important;
90
92
  padding-bottom: var(--gap-2xs) !important
91
- } @media (max-width: 360px) { .bank-card__input_ysl7u {
93
+ } @media (max-width: 360px) { .bank-card__input_lghyr {
92
94
  font-size: 16px
93
95
  }
94
- } .bank-card__bankLogo_ysl7u {
96
+ } .bank-card__bankLogo_lghyr {
95
97
  position: absolute;
96
98
  top: 20px;
97
99
  left: 20px
98
- } .bank-card__bankLogo_ysl7u svg {
100
+ } .bank-card__bankLogo_lghyr svg {
99
101
  max-height: 32px;
100
102
  width: auto;
101
103
  display: block
102
- } .bank-card__bankLogo_ysl7u svg g {
104
+ } .bank-card__bankLogo_lghyr svg g {
103
105
  fill: var(--color-light-neutral-translucent-1300);
104
- } .bank-card__brandLogo_ysl7u {
106
+ } .bank-card__brandLogo_lghyr {
105
107
  position: absolute;
106
108
  bottom: 20px;
107
109
  right: 20px
108
- } .bank-card__brandLogo_ysl7u svg {
110
+ } .bank-card__brandLogo_lghyr svg {
109
111
  display: block;
110
112
  fill: var(--color-light-neutral-translucent-1300);
111
- } .bank-card__usePhoto_ysl7u {
113
+ } .bank-card__usePhoto_lghyr {
112
114
  display: block;
113
115
  margin: 0;
114
116
  padding: 0;
@@ -125,7 +127,7 @@
125
127
 
126
128
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
127
129
  margin-right: calc(var(--gap-s) * -1)
128
- } .bank-card__usePhoto_ysl7u svg {
130
+ } .bank-card__usePhoto_lghyr svg {
129
131
  fill: var(--color-light-neutral-translucent-1300);
130
132
  display: block;
131
133
  }
package/modern/Component.js CHANGED
@@ -10,7 +10,7 @@ import { getDefaultInputLabel } from './helpers/getDefaultInputLabel.js';
10
10
  import { MaskTypeEnum } from './enums.js';
11
11
  import { validateCardNumber } from './utils.js';
12
12
 
13
- const styles = {"component":"bank-card__component_ysl7u","aspectRatioContainer":"bank-card__aspectRatioContainer_ysl7u","content":"bank-card__content_ysl7u","label":"bank-card__label_ysl7u","focused":"bank-card__focused_ysl7u","filled":"bank-card__filled_ysl7u","input":"bank-card__input_ysl7u","bankLogo":"bank-card__bankLogo_ysl7u","brandLogo":"bank-card__brandLogo_ysl7u","usePhoto":"bank-card__usePhoto_ysl7u"};
13
+ const styles = {"component":"bank-card__component_lghyr","aspectRatioContainer":"bank-card__aspectRatioContainer_lghyr","content":"bank-card__content_lghyr","label":"bank-card__label_lghyr","focused":"bank-card__focused_lghyr","filled":"bank-card__filled_lghyr","input":"bank-card__input_lghyr","bankLogo":"bank-card__bankLogo_lghyr","brandLogo":"bank-card__brandLogo_lghyr","usePhoto":"bank-card__usePhoto_lghyr"};
14
14
  require('./index.css')
15
15
 
16
16
  // prettier-ignore
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 929fw */
1
+ /* hash: 1a2jf */
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-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -14,15 +14,17 @@
14
14
  /* Hard up */
15
15
  } :root {
16
16
  --border-radius-l: 12px;
17
- } :root {
18
- --gap-2xs: 4px;
19
- --gap-s: 12px;
20
- --gap-l: 20px;
17
+ } :root { /* deprecated */
18
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
19
+ --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */
20
+ --gap-l: 20px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
+
22
+ /* новые значения, используйте их */
21
23
  } :root {
22
24
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
23
25
  'Helvetica Neue', Helvetica, sans-serif;
24
26
  } :root {
25
- } .bank-card__component_ysl7u {
27
+ } .bank-card__component_lghyr {
26
28
  /* TODO: как это будет собираться и работать в webView */
27
29
  --form-control-border-radius: 0;
28
30
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -41,10 +43,10 @@
41
43
  max-width: 343px;
42
44
 
43
45
  font-family: var(--font-family-styrene);
44
- } .bank-card__aspectRatioContainer_ysl7u {
46
+ } .bank-card__aspectRatioContainer_lghyr {
45
47
  /* Эталонный размер 343x216 */
46
48
  padding-bottom: 63%;
47
- } .bank-card__content_ysl7u {
49
+ } .bank-card__content_lghyr {
48
50
  position: absolute;
49
51
  top: 0;
50
52
  right: 0;
@@ -56,26 +58,26 @@
56
58
  padding-right: var(--gap-l);
57
59
  border-radius: var(--border-radius-l);
58
60
  box-sizing: border-box;
59
- } .bank-card__label_ysl7u {
61
+ } .bank-card__label_lghyr {
60
62
  left: 0;
61
63
  transform: translateY(-1px);
62
64
  color: var(--color-light-text-secondary);
63
65
  font-size: 20px;
64
66
  line-height: 24px
65
- } @media (max-width: 360px) { .bank-card__label_ysl7u {
67
+ } @media (max-width: 360px) { .bank-card__label_lghyr {
66
68
  font-size: 16px
67
69
  }
68
- } .bank-card__focused_ysl7u .bank-card__label_ysl7u,
69
- .bank-card__filled_ysl7u .bank-card__label_ysl7u {
70
+ } .bank-card__focused_lghyr .bank-card__label_lghyr,
71
+ .bank-card__filled_lghyr .bank-card__label_lghyr {
70
72
  color: var(--color-light-neutral-translucent-1300);
71
73
  transform: translateY(-19px) scale(0.6)
72
- } @media (max-width: 360px) { .bank-card__focused_ysl7u .bank-card__label_ysl7u,
73
- .bank-card__filled_ysl7u .bank-card__label_ysl7u {
74
+ } @media (max-width: 360px) { .bank-card__focused_lghyr .bank-card__label_lghyr,
75
+ .bank-card__filled_lghyr .bank-card__label_lghyr {
74
76
  transform: translateY(-22px) scale(0.75)
75
77
  }
76
- } .bank-card__focused_ysl7u:before {
78
+ } .bank-card__focused_lghyr:before {
77
79
  transform: scale(1) !important;
78
- } .bank-card__input_ysl7u {
80
+ } .bank-card__input_lghyr {
79
81
  font-size: 20px;
80
82
  line-height: 24px;
81
83
  font-weight: 400;
@@ -88,27 +90,27 @@
88
90
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
89
91
  padding-left: 0 !important;
90
92
  padding-bottom: var(--gap-2xs) !important
91
- } @media (max-width: 360px) { .bank-card__input_ysl7u {
93
+ } @media (max-width: 360px) { .bank-card__input_lghyr {
92
94
  font-size: 16px
93
95
  }
94
- } .bank-card__bankLogo_ysl7u {
96
+ } .bank-card__bankLogo_lghyr {
95
97
  position: absolute;
96
98
  top: 20px;
97
99
  left: 20px
98
- } .bank-card__bankLogo_ysl7u svg {
100
+ } .bank-card__bankLogo_lghyr svg {
99
101
  max-height: 32px;
100
102
  width: auto;
101
103
  display: block
102
- } .bank-card__bankLogo_ysl7u svg g {
104
+ } .bank-card__bankLogo_lghyr svg g {
103
105
  fill: var(--color-light-neutral-translucent-1300);
104
- } .bank-card__brandLogo_ysl7u {
106
+ } .bank-card__brandLogo_lghyr {
105
107
  position: absolute;
106
108
  bottom: 20px;
107
109
  right: 20px
108
- } .bank-card__brandLogo_ysl7u svg {
110
+ } .bank-card__brandLogo_lghyr svg {
109
111
  display: block;
110
112
  fill: var(--color-light-neutral-translucent-1300);
111
- } .bank-card__usePhoto_ysl7u {
113
+ } .bank-card__usePhoto_lghyr {
112
114
  display: block;
113
115
  margin: 0;
114
116
  padding: 0;
@@ -125,7 +127,7 @@
125
127
 
126
128
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
127
129
  margin-right: calc(var(--gap-s) * -1)
128
- } .bank-card__usePhoto_ysl7u svg {
130
+ } .bank-card__usePhoto_lghyr svg {
129
131
  fill: var(--color-light-neutral-translucent-1300);
130
132
  display: block;
131
133
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-bank-card",
3
- "version": "5.7.8",
3
+ "version": "5.7.10",
4
4
  "description": "Bank card component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,10 +15,12 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-masked-input": "^6.3.13",
18
+ "@alfalab/core-components-masked-input": "^6.3.15",
19
19
  "@alfalab/icons-glyph": "^2.139.0",
20
20
  "@alfalab/icons-logotype": "^2.27.0",
21
21
  "classnames": "^2.3.1",
22
22
  "tslib": "^2.4.0"
23
- }
23
+ },
24
+ "themesVersion": "13.0.1",
25
+ "varsVersion": "9.10.0"
24
26
  }