@alfalab/core-components-bank-card 5.2.0 → 5.2.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 (9) hide show
  1. package/Component.js +2 -2
  2. package/cssm/Component.js +1 -1
  3. package/cssm/index.module.css +4 -3
  4. package/esm/Component.js +2 -2
  5. package/esm/index.css +24 -23
  6. package/index.css +24 -23
  7. package/modern/Component.js +2 -2
  8. package/modern/index.css +24 -23
  9. 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_jjf52","aspectRatioContainer":"bank-card__aspectRatioContainer_jjf52","content":"bank-card__content_jjf52","label":"bank-card__label_jjf52","focused":"bank-card__focused_jjf52","filled":"bank-card__filled_jjf52","input":"bank-card__input_jjf52","bankLogo":"bank-card__bankLogo_jjf52","brandLogo":"bank-card__brandLogo_jjf52","usePhoto":"bank-card__usePhoto_jjf52"};
20
+ var styles = {"component":"bank-card__component_6di2j","aspectRatioContainer":"bank-card__aspectRatioContainer_6di2j","content":"bank-card__content_6di2j","label":"bank-card__label_6di2j","focused":"bank-card__focused_6di2j","filled":"bank-card__filled_6di2j","input":"bank-card__input_6di2j","bankLogo":"bank-card__bankLogo_6di2j","brandLogo":"bank-card__brandLogo_6di2j","usePhoto":"bank-card__usePhoto_6di2j"};
21
21
  require('./index.css')
22
22
 
23
23
  // prettier-ignore
@@ -63,7 +63,7 @@ var BankCard = React__default['default'].forwardRef(function (_a, ref) {
63
63
  React__default['default'].createElement("div", { className: styles.aspectRatioContainer },
64
64
  React__default['default'].createElement("div", { className: styles.content, style: { backgroundColor: backgroundColor } },
65
65
  React__default['default'].createElement("div", { className: styles.bankLogo }, bankLogo),
66
- React__default['default'].createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
66
+ React__default['default'].createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
67
67
  brandIcon && React__default['default'].createElement("div", { className: styles.brandLogo }, brandIcon)))));
68
68
  });
69
69
  BankCard.defaultProps = {
package/cssm/Component.js CHANGED
@@ -62,7 +62,7 @@ var BankCard = React__default['default'].forwardRef(function (_a, ref) {
62
62
  React__default['default'].createElement("div", { className: styles__default['default'].aspectRatioContainer },
63
63
  React__default['default'].createElement("div", { className: styles__default['default'].content, style: { backgroundColor: backgroundColor } },
64
64
  React__default['default'].createElement("div", { className: styles__default['default'].bankLogo }, bankLogo),
65
- React__default['default'].createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, rightAddons: renderRightAddons(), inputClassName: styles__default['default'].input, labelClassName: styles__default['default'].label, filledClassName: styles__default['default'].filled, focusedClassName: styles__default['default'].focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
65
+ React__default['default'].createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles__default['default'].input, labelClassName: styles__default['default'].label, filledClassName: styles__default['default'].filled, focusedClassName: styles__default['default'].focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
66
66
  brandIcon && React__default['default'].createElement("div", { className: styles__default['default'].brandLogo }, brandIcon)))));
67
67
  });
68
68
  BankCard.defaultProps = {
package/cssm/index.module.css CHANGED
@@ -42,8 +42,8 @@
42
42
  font-family: var(--font-family-styrene);
43
43
  }
44
44
  .aspectRatioContainer {
45
- /* Эталонный размер 343x215 */
46
- padding-bottom: 62.6%;
45
+ /* Эталонный размер 343x216 */
46
+ padding-bottom: 63%;
47
47
  }
48
48
  .content {
49
49
  position: absolute;
@@ -95,7 +95,8 @@
95
95
  caret-color: var(--color-black);
96
96
 
97
97
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
98
- padding-left: 0 !important
98
+ padding-left: 0 !important;
99
+ padding-bottom: 4px !important
99
100
  }
100
101
  @media (max-width: 360px) {
101
102
  .input {
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_jjf52","aspectRatioContainer":"bank-card__aspectRatioContainer_jjf52","content":"bank-card__content_jjf52","label":"bank-card__label_jjf52","focused":"bank-card__focused_jjf52","filled":"bank-card__filled_jjf52","input":"bank-card__input_jjf52","bankLogo":"bank-card__bankLogo_jjf52","brandLogo":"bank-card__brandLogo_jjf52","usePhoto":"bank-card__usePhoto_jjf52"};
11
+ var styles = {"component":"bank-card__component_6di2j","aspectRatioContainer":"bank-card__aspectRatioContainer_6di2j","content":"bank-card__content_6di2j","label":"bank-card__label_6di2j","focused":"bank-card__focused_6di2j","filled":"bank-card__filled_6di2j","input":"bank-card__input_6di2j","bankLogo":"bank-card__bankLogo_6di2j","brandLogo":"bank-card__brandLogo_6di2j","usePhoto":"bank-card__usePhoto_6di2j"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
@@ -54,7 +54,7 @@ var BankCard = React.forwardRef(function (_a, ref) {
54
54
  React.createElement("div", { className: styles.aspectRatioContainer },
55
55
  React.createElement("div", { className: styles.content, style: { backgroundColor: backgroundColor } },
56
56
  React.createElement("div", { className: styles.bankLogo }, bankLogo),
57
- React.createElement(MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
57
+ React.createElement(MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
58
58
  brandIcon && React.createElement("div", { className: styles.brandLogo }, brandIcon)))));
59
59
  });
60
60
  BankCard.defaultProps = {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1ojua */
1
+ /* hash: e8n6i */
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_jjf52 {
26
+ .bank-card__component_6di2j {
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_jjf52 {
46
- /* Эталонный размер 343x215 */
47
- padding-bottom: 62.6%;
45
+ .bank-card__aspectRatioContainer_6di2j {
46
+ /* Эталонный размер 343x216 */
47
+ padding-bottom: 63%;
48
48
  }
49
- .bank-card__content_jjf52 {
49
+ .bank-card__content_6di2j {
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_jjf52 {
62
+ .bank-card__label_6di2j {
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_jjf52 {
70
+ .bank-card__label_6di2j {
71
71
  font-size: 16px
72
72
  }
73
73
  }
74
- .bank-card__focused_jjf52 .bank-card__label_jjf52,
75
- .bank-card__filled_jjf52 .bank-card__label_jjf52 {
74
+ .bank-card__focused_6di2j .bank-card__label_6di2j,
75
+ .bank-card__filled_6di2j .bank-card__label_6di2j {
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_jjf52 .bank-card__label_jjf52,
81
- .bank-card__filled_jjf52 .bank-card__label_jjf52 {
80
+ .bank-card__focused_6di2j .bank-card__label_6di2j,
81
+ .bank-card__filled_6di2j .bank-card__label_6di2j {
82
82
  transform: translateY(-22px) scale(0.75)
83
83
  }
84
84
  }
85
- .bank-card__focused_jjf52:before {
85
+ .bank-card__focused_6di2j:before {
86
86
  transform: scale(1) !important;
87
87
  }
88
- .bank-card__input_jjf52 {
88
+ .bank-card__input_6di2j {
89
89
  font-size: 20px;
90
90
  line-height: 24px;
91
91
  font-weight: 400;
@@ -96,36 +96,37 @@
96
96
  caret-color: var(--color-black);
97
97
 
98
98
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
99
- padding-left: 0 !important
99
+ padding-left: 0 !important;
100
+ padding-bottom: 4px !important
100
101
  }
101
102
  @media (max-width: 360px) {
102
- .bank-card__input_jjf52 {
103
+ .bank-card__input_6di2j {
103
104
  font-size: 16px
104
105
  }
105
106
  }
106
- .bank-card__bankLogo_jjf52 {
107
+ .bank-card__bankLogo_6di2j {
107
108
  position: absolute;
108
109
  top: 20px;
109
110
  left: 20px
110
111
  }
111
- .bank-card__bankLogo_jjf52 svg {
112
+ .bank-card__bankLogo_6di2j svg {
112
113
  max-height: 32px;
113
114
  width: auto;
114
115
  display: block
115
116
  }
116
- .bank-card__bankLogo_jjf52 svg g {
117
+ .bank-card__bankLogo_6di2j svg g {
117
118
  fill: var(--color-black);
118
119
  }
119
- .bank-card__brandLogo_jjf52 {
120
+ .bank-card__brandLogo_6di2j {
120
121
  position: absolute;
121
122
  bottom: 20px;
122
123
  right: 20px
123
124
  }
124
- .bank-card__brandLogo_jjf52 svg {
125
+ .bank-card__brandLogo_6di2j svg {
125
126
  display: block;
126
127
  fill: var(--color-black);
127
128
  }
128
- .bank-card__usePhoto_jjf52 {
129
+ .bank-card__usePhoto_6di2j {
129
130
  display: block;
130
131
  margin: 0;
131
132
  padding: 0;
@@ -143,7 +144,7 @@
143
144
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
144
145
  margin-right: calc(var(--gap-s) * -1)
145
146
  }
146
- .bank-card__usePhoto_jjf52 svg {
147
+ .bank-card__usePhoto_6di2j svg {
147
148
  fill: var(--color-black);
148
149
  display: block;
149
150
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1ojua */
1
+ /* hash: e8n6i */
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_jjf52 {
26
+ .bank-card__component_6di2j {
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_jjf52 {
46
- /* Эталонный размер 343x215 */
47
- padding-bottom: 62.6%;
45
+ .bank-card__aspectRatioContainer_6di2j {
46
+ /* Эталонный размер 343x216 */
47
+ padding-bottom: 63%;
48
48
  }
49
- .bank-card__content_jjf52 {
49
+ .bank-card__content_6di2j {
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_jjf52 {
62
+ .bank-card__label_6di2j {
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_jjf52 {
70
+ .bank-card__label_6di2j {
71
71
  font-size: 16px
72
72
  }
73
73
  }
74
- .bank-card__focused_jjf52 .bank-card__label_jjf52,
75
- .bank-card__filled_jjf52 .bank-card__label_jjf52 {
74
+ .bank-card__focused_6di2j .bank-card__label_6di2j,
75
+ .bank-card__filled_6di2j .bank-card__label_6di2j {
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_jjf52 .bank-card__label_jjf52,
81
- .bank-card__filled_jjf52 .bank-card__label_jjf52 {
80
+ .bank-card__focused_6di2j .bank-card__label_6di2j,
81
+ .bank-card__filled_6di2j .bank-card__label_6di2j {
82
82
  transform: translateY(-22px) scale(0.75)
83
83
  }
84
84
  }
85
- .bank-card__focused_jjf52:before {
85
+ .bank-card__focused_6di2j:before {
86
86
  transform: scale(1) !important;
87
87
  }
88
- .bank-card__input_jjf52 {
88
+ .bank-card__input_6di2j {
89
89
  font-size: 20px;
90
90
  line-height: 24px;
91
91
  font-weight: 400;
@@ -96,36 +96,37 @@
96
96
  caret-color: var(--color-black);
97
97
 
98
98
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
99
- padding-left: 0 !important
99
+ padding-left: 0 !important;
100
+ padding-bottom: 4px !important
100
101
  }
101
102
  @media (max-width: 360px) {
102
- .bank-card__input_jjf52 {
103
+ .bank-card__input_6di2j {
103
104
  font-size: 16px
104
105
  }
105
106
  }
106
- .bank-card__bankLogo_jjf52 {
107
+ .bank-card__bankLogo_6di2j {
107
108
  position: absolute;
108
109
  top: 20px;
109
110
  left: 20px
110
111
  }
111
- .bank-card__bankLogo_jjf52 svg {
112
+ .bank-card__bankLogo_6di2j svg {
112
113
  max-height: 32px;
113
114
  width: auto;
114
115
  display: block
115
116
  }
116
- .bank-card__bankLogo_jjf52 svg g {
117
+ .bank-card__bankLogo_6di2j svg g {
117
118
  fill: var(--color-black);
118
119
  }
119
- .bank-card__brandLogo_jjf52 {
120
+ .bank-card__brandLogo_6di2j {
120
121
  position: absolute;
121
122
  bottom: 20px;
122
123
  right: 20px
123
124
  }
124
- .bank-card__brandLogo_jjf52 svg {
125
+ .bank-card__brandLogo_6di2j svg {
125
126
  display: block;
126
127
  fill: var(--color-black);
127
128
  }
128
- .bank-card__usePhoto_jjf52 {
129
+ .bank-card__usePhoto_6di2j {
129
130
  display: block;
130
131
  margin: 0;
131
132
  padding: 0;
@@ -143,7 +144,7 @@
143
144
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
144
145
  margin-right: calc(var(--gap-s) * -1)
145
146
  }
146
- .bank-card__usePhoto_jjf52 svg {
147
+ .bank-card__usePhoto_6di2j svg {
147
148
  fill: var(--color-black);
148
149
  display: block;
149
150
  }
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_jjf52","aspectRatioContainer":"bank-card__aspectRatioContainer_jjf52","content":"bank-card__content_jjf52","label":"bank-card__label_jjf52","focused":"bank-card__focused_jjf52","filled":"bank-card__filled_jjf52","input":"bank-card__input_jjf52","bankLogo":"bank-card__bankLogo_jjf52","brandLogo":"bank-card__brandLogo_jjf52","usePhoto":"bank-card__usePhoto_jjf52"};
11
+ var styles = {"component":"bank-card__component_6di2j","aspectRatioContainer":"bank-card__aspectRatioContainer_6di2j","content":"bank-card__content_6di2j","label":"bank-card__label_6di2j","focused":"bank-card__focused_6di2j","filled":"bank-card__filled_6di2j","input":"bank-card__input_6di2j","bankLogo":"bank-card__bankLogo_6di2j","brandLogo":"bank-card__brandLogo_6di2j","usePhoto":"bank-card__usePhoto_6di2j"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
@@ -50,7 +50,7 @@ const BankCard = React.forwardRef(({ bankLogo = React.createElement(AlfaBankLIco
50
50
  React.createElement("div", { className: styles.aspectRatioContainer },
51
51
  React.createElement("div", { className: styles.content, style: { backgroundColor } },
52
52
  React.createElement("div", { className: styles.bankLogo }, bankLogo),
53
- React.createElement(MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
53
+ React.createElement(MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
54
54
  brandIcon && React.createElement("div", { className: styles.brandLogo }, brandIcon)))));
55
55
  });
56
56
  BankCard.defaultProps = {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1ojua */
1
+ /* hash: e8n6i */
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_jjf52 {
26
+ .bank-card__component_6di2j {
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_jjf52 {
46
- /* Эталонный размер 343x215 */
47
- padding-bottom: 62.6%;
45
+ .bank-card__aspectRatioContainer_6di2j {
46
+ /* Эталонный размер 343x216 */
47
+ padding-bottom: 63%;
48
48
  }
49
- .bank-card__content_jjf52 {
49
+ .bank-card__content_6di2j {
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_jjf52 {
62
+ .bank-card__label_6di2j {
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_jjf52 {
70
+ .bank-card__label_6di2j {
71
71
  font-size: 16px
72
72
  }
73
73
  }
74
- .bank-card__focused_jjf52 .bank-card__label_jjf52,
75
- .bank-card__filled_jjf52 .bank-card__label_jjf52 {
74
+ .bank-card__focused_6di2j .bank-card__label_6di2j,
75
+ .bank-card__filled_6di2j .bank-card__label_6di2j {
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_jjf52 .bank-card__label_jjf52,
81
- .bank-card__filled_jjf52 .bank-card__label_jjf52 {
80
+ .bank-card__focused_6di2j .bank-card__label_6di2j,
81
+ .bank-card__filled_6di2j .bank-card__label_6di2j {
82
82
  transform: translateY(-22px) scale(0.75)
83
83
  }
84
84
  }
85
- .bank-card__focused_jjf52:before {
85
+ .bank-card__focused_6di2j:before {
86
86
  transform: scale(1) !important;
87
87
  }
88
- .bank-card__input_jjf52 {
88
+ .bank-card__input_6di2j {
89
89
  font-size: 20px;
90
90
  line-height: 24px;
91
91
  font-weight: 400;
@@ -96,36 +96,37 @@
96
96
  caret-color: var(--color-black);
97
97
 
98
98
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
99
- padding-left: 0 !important
99
+ padding-left: 0 !important;
100
+ padding-bottom: 4px !important
100
101
  }
101
102
  @media (max-width: 360px) {
102
- .bank-card__input_jjf52 {
103
+ .bank-card__input_6di2j {
103
104
  font-size: 16px
104
105
  }
105
106
  }
106
- .bank-card__bankLogo_jjf52 {
107
+ .bank-card__bankLogo_6di2j {
107
108
  position: absolute;
108
109
  top: 20px;
109
110
  left: 20px
110
111
  }
111
- .bank-card__bankLogo_jjf52 svg {
112
+ .bank-card__bankLogo_6di2j svg {
112
113
  max-height: 32px;
113
114
  width: auto;
114
115
  display: block
115
116
  }
116
- .bank-card__bankLogo_jjf52 svg g {
117
+ .bank-card__bankLogo_6di2j svg g {
117
118
  fill: var(--color-black);
118
119
  }
119
- .bank-card__brandLogo_jjf52 {
120
+ .bank-card__brandLogo_6di2j {
120
121
  position: absolute;
121
122
  bottom: 20px;
122
123
  right: 20px
123
124
  }
124
- .bank-card__brandLogo_jjf52 svg {
125
+ .bank-card__brandLogo_6di2j svg {
125
126
  display: block;
126
127
  fill: var(--color-black);
127
128
  }
128
- .bank-card__usePhoto_jjf52 {
129
+ .bank-card__usePhoto_6di2j {
129
130
  display: block;
130
131
  margin: 0;
131
132
  padding: 0;
@@ -143,7 +144,7 @@
143
144
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
144
145
  margin-right: calc(var(--gap-s) * -1)
145
146
  }
146
- .bank-card__usePhoto_jjf52 svg {
147
+ .bank-card__usePhoto_6di2j svg {
147
148
  fill: var(--color-black);
148
149
  display: block;
149
150
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-bank-card",
3
- "version": "5.2.0",
3
+ "version": "5.2.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.8",
21
+ "@alfalab/core-components-masked-input": "^5.0.10",
22
22
  "@alfalab/icons-glyph": "^2.71.0",
23
23
  "@alfalab/icons-logotype": "^2.19.0",
24
24
  "classnames": "^2.3.1"