@alfalab/core-components-bank-card 5.3.7 → 5.4.0

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/esm/Component.js +2 -2
  4. package/esm/index.css +20 -20
  5. package/index.css +20 -20
  6. package/modern/Component.js +2 -2
  7. package/modern/index.css +20 -20
  8. package/package.json +3 -3
  9. package/src/Component.tsx +1 -0
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_q6qx4","aspectRatioContainer":"bank-card__aspectRatioContainer_q6qx4","content":"bank-card__content_q6qx4","label":"bank-card__label_q6qx4","focused":"bank-card__focused_q6qx4","filled":"bank-card__filled_q6qx4","input":"bank-card__input_q6qx4","bankLogo":"bank-card__bankLogo_q6qx4","brandLogo":"bank-card__brandLogo_q6qx4","usePhoto":"bank-card__usePhoto_q6qx4"};
20
+ var styles = {"component":"bank-card__component_hi52l","aspectRatioContainer":"bank-card__aspectRatioContainer_hi52l","content":"bank-card__content_hi52l","label":"bank-card__label_hi52l","focused":"bank-card__focused_hi52l","filled":"bank-card__filled_hi52l","input":"bank-card__input_hi52l","bankLogo":"bank-card__bankLogo_hi52l","brandLogo":"bank-card__brandLogo_hi52l","usePhoto":"bank-card__usePhoto_hi52l"};
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, 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]*' }),
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]*', breakpoint: 1 }),
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, 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]*' }),
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]*', breakpoint: 1 }),
66
66
  brandIcon && React__default.default.createElement("div", { className: styles__default.default.brandLogo }, brandIcon)))));
67
67
  });
68
68
  BankCard.defaultProps = {
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_q6qx4","aspectRatioContainer":"bank-card__aspectRatioContainer_q6qx4","content":"bank-card__content_q6qx4","label":"bank-card__label_q6qx4","focused":"bank-card__focused_q6qx4","filled":"bank-card__filled_q6qx4","input":"bank-card__input_q6qx4","bankLogo":"bank-card__bankLogo_q6qx4","brandLogo":"bank-card__brandLogo_q6qx4","usePhoto":"bank-card__usePhoto_q6qx4"};
11
+ var styles = {"component":"bank-card__component_hi52l","aspectRatioContainer":"bank-card__aspectRatioContainer_hi52l","content":"bank-card__content_hi52l","label":"bank-card__label_hi52l","focused":"bank-card__focused_hi52l","filled":"bank-card__filled_hi52l","input":"bank-card__input_hi52l","bankLogo":"bank-card__bankLogo_hi52l","brandLogo":"bank-card__brandLogo_hi52l","usePhoto":"bank-card__usePhoto_hi52l"};
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, 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]*' }),
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]*', breakpoint: 1 }),
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: 15ys9 */
1
+ /* hash: yvbvw */
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_q6qx4 {
25
+ } .bank-card__component_hi52l {
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_q6qx4 {
44
+ } .bank-card__aspectRatioContainer_hi52l {
45
45
  /* Эталонный размер 343x216 */
46
46
  padding-bottom: 63%;
47
- } .bank-card__content_q6qx4 {
47
+ } .bank-card__content_hi52l {
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_q6qx4 {
59
+ } .bank-card__label_hi52l {
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_q6qx4 {
65
+ } @media (max-width: 360px) { .bank-card__label_hi52l {
66
66
  font-size: 16px
67
67
  }
68
- } .bank-card__focused_q6qx4 .bank-card__label_q6qx4,
69
- .bank-card__filled_q6qx4 .bank-card__label_q6qx4 {
68
+ } .bank-card__focused_hi52l .bank-card__label_hi52l,
69
+ .bank-card__filled_hi52l .bank-card__label_hi52l {
70
70
  color: var(--color-black);
71
71
  transform: translateY(-19px) scale(0.6)
72
- } @media (max-width: 360px) { .bank-card__focused_q6qx4 .bank-card__label_q6qx4,
73
- .bank-card__filled_q6qx4 .bank-card__label_q6qx4 {
72
+ } @media (max-width: 360px) { .bank-card__focused_hi52l .bank-card__label_hi52l,
73
+ .bank-card__filled_hi52l .bank-card__label_hi52l {
74
74
  transform: translateY(-22px) scale(0.75)
75
75
  }
76
- } .bank-card__focused_q6qx4:before {
76
+ } .bank-card__focused_hi52l:before {
77
77
  transform: scale(1) !important;
78
- } .bank-card__input_q6qx4 {
78
+ } .bank-card__input_hi52l {
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_q6qx4 {
91
+ } @media (max-width: 360px) { .bank-card__input_hi52l {
92
92
  font-size: 16px
93
93
  }
94
- } .bank-card__bankLogo_q6qx4 {
94
+ } .bank-card__bankLogo_hi52l {
95
95
  position: absolute;
96
96
  top: 20px;
97
97
  left: 20px
98
- } .bank-card__bankLogo_q6qx4 svg {
98
+ } .bank-card__bankLogo_hi52l svg {
99
99
  max-height: 32px;
100
100
  width: auto;
101
101
  display: block
102
- } .bank-card__bankLogo_q6qx4 svg g {
102
+ } .bank-card__bankLogo_hi52l svg g {
103
103
  fill: var(--color-black);
104
- } .bank-card__brandLogo_q6qx4 {
104
+ } .bank-card__brandLogo_hi52l {
105
105
  position: absolute;
106
106
  bottom: 20px;
107
107
  right: 20px
108
- } .bank-card__brandLogo_q6qx4 svg {
108
+ } .bank-card__brandLogo_hi52l svg {
109
109
  display: block;
110
110
  fill: var(--color-black);
111
- } .bank-card__usePhoto_q6qx4 {
111
+ } .bank-card__usePhoto_hi52l {
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_q6qx4 svg {
128
+ } .bank-card__usePhoto_hi52l svg {
129
129
  fill: var(--color-black);
130
130
  display: block;
131
131
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 15ys9 */
1
+ /* hash: yvbvw */
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_q6qx4 {
25
+ } .bank-card__component_hi52l {
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_q6qx4 {
44
+ } .bank-card__aspectRatioContainer_hi52l {
45
45
  /* Эталонный размер 343x216 */
46
46
  padding-bottom: 63%;
47
- } .bank-card__content_q6qx4 {
47
+ } .bank-card__content_hi52l {
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_q6qx4 {
59
+ } .bank-card__label_hi52l {
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_q6qx4 {
65
+ } @media (max-width: 360px) { .bank-card__label_hi52l {
66
66
  font-size: 16px
67
67
  }
68
- } .bank-card__focused_q6qx4 .bank-card__label_q6qx4,
69
- .bank-card__filled_q6qx4 .bank-card__label_q6qx4 {
68
+ } .bank-card__focused_hi52l .bank-card__label_hi52l,
69
+ .bank-card__filled_hi52l .bank-card__label_hi52l {
70
70
  color: var(--color-black);
71
71
  transform: translateY(-19px) scale(0.6)
72
- } @media (max-width: 360px) { .bank-card__focused_q6qx4 .bank-card__label_q6qx4,
73
- .bank-card__filled_q6qx4 .bank-card__label_q6qx4 {
72
+ } @media (max-width: 360px) { .bank-card__focused_hi52l .bank-card__label_hi52l,
73
+ .bank-card__filled_hi52l .bank-card__label_hi52l {
74
74
  transform: translateY(-22px) scale(0.75)
75
75
  }
76
- } .bank-card__focused_q6qx4:before {
76
+ } .bank-card__focused_hi52l:before {
77
77
  transform: scale(1) !important;
78
- } .bank-card__input_q6qx4 {
78
+ } .bank-card__input_hi52l {
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_q6qx4 {
91
+ } @media (max-width: 360px) { .bank-card__input_hi52l {
92
92
  font-size: 16px
93
93
  }
94
- } .bank-card__bankLogo_q6qx4 {
94
+ } .bank-card__bankLogo_hi52l {
95
95
  position: absolute;
96
96
  top: 20px;
97
97
  left: 20px
98
- } .bank-card__bankLogo_q6qx4 svg {
98
+ } .bank-card__bankLogo_hi52l svg {
99
99
  max-height: 32px;
100
100
  width: auto;
101
101
  display: block
102
- } .bank-card__bankLogo_q6qx4 svg g {
102
+ } .bank-card__bankLogo_hi52l svg g {
103
103
  fill: var(--color-black);
104
- } .bank-card__brandLogo_q6qx4 {
104
+ } .bank-card__brandLogo_hi52l {
105
105
  position: absolute;
106
106
  bottom: 20px;
107
107
  right: 20px
108
- } .bank-card__brandLogo_q6qx4 svg {
108
+ } .bank-card__brandLogo_hi52l svg {
109
109
  display: block;
110
110
  fill: var(--color-black);
111
- } .bank-card__usePhoto_q6qx4 {
111
+ } .bank-card__usePhoto_hi52l {
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_q6qx4 svg {
128
+ } .bank-card__usePhoto_hi52l 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_q6qx4","aspectRatioContainer":"bank-card__aspectRatioContainer_q6qx4","content":"bank-card__content_q6qx4","label":"bank-card__label_q6qx4","focused":"bank-card__focused_q6qx4","filled":"bank-card__filled_q6qx4","input":"bank-card__input_q6qx4","bankLogo":"bank-card__bankLogo_q6qx4","brandLogo":"bank-card__brandLogo_q6qx4","usePhoto":"bank-card__usePhoto_q6qx4"};
11
+ const styles = {"component":"bank-card__component_hi52l","aspectRatioContainer":"bank-card__aspectRatioContainer_hi52l","content":"bank-card__content_hi52l","label":"bank-card__label_hi52l","focused":"bank-card__focused_hi52l","filled":"bank-card__filled_hi52l","input":"bank-card__input_hi52l","bankLogo":"bank-card__bankLogo_hi52l","brandLogo":"bank-card__brandLogo_hi52l","usePhoto":"bank-card__usePhoto_hi52l"};
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, 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]*' }),
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]*', breakpoint: 1 }),
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: 15ys9 */
1
+ /* hash: yvbvw */
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_q6qx4 {
25
+ } .bank-card__component_hi52l {
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_q6qx4 {
44
+ } .bank-card__aspectRatioContainer_hi52l {
45
45
  /* Эталонный размер 343x216 */
46
46
  padding-bottom: 63%;
47
- } .bank-card__content_q6qx4 {
47
+ } .bank-card__content_hi52l {
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_q6qx4 {
59
+ } .bank-card__label_hi52l {
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_q6qx4 {
65
+ } @media (max-width: 360px) { .bank-card__label_hi52l {
66
66
  font-size: 16px
67
67
  }
68
- } .bank-card__focused_q6qx4 .bank-card__label_q6qx4,
69
- .bank-card__filled_q6qx4 .bank-card__label_q6qx4 {
68
+ } .bank-card__focused_hi52l .bank-card__label_hi52l,
69
+ .bank-card__filled_hi52l .bank-card__label_hi52l {
70
70
  color: var(--color-black);
71
71
  transform: translateY(-19px) scale(0.6)
72
- } @media (max-width: 360px) { .bank-card__focused_q6qx4 .bank-card__label_q6qx4,
73
- .bank-card__filled_q6qx4 .bank-card__label_q6qx4 {
72
+ } @media (max-width: 360px) { .bank-card__focused_hi52l .bank-card__label_hi52l,
73
+ .bank-card__filled_hi52l .bank-card__label_hi52l {
74
74
  transform: translateY(-22px) scale(0.75)
75
75
  }
76
- } .bank-card__focused_q6qx4:before {
76
+ } .bank-card__focused_hi52l:before {
77
77
  transform: scale(1) !important;
78
- } .bank-card__input_q6qx4 {
78
+ } .bank-card__input_hi52l {
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_q6qx4 {
91
+ } @media (max-width: 360px) { .bank-card__input_hi52l {
92
92
  font-size: 16px
93
93
  }
94
- } .bank-card__bankLogo_q6qx4 {
94
+ } .bank-card__bankLogo_hi52l {
95
95
  position: absolute;
96
96
  top: 20px;
97
97
  left: 20px
98
- } .bank-card__bankLogo_q6qx4 svg {
98
+ } .bank-card__bankLogo_hi52l svg {
99
99
  max-height: 32px;
100
100
  width: auto;
101
101
  display: block
102
- } .bank-card__bankLogo_q6qx4 svg g {
102
+ } .bank-card__bankLogo_hi52l svg g {
103
103
  fill: var(--color-black);
104
- } .bank-card__brandLogo_q6qx4 {
104
+ } .bank-card__brandLogo_hi52l {
105
105
  position: absolute;
106
106
  bottom: 20px;
107
107
  right: 20px
108
- } .bank-card__brandLogo_q6qx4 svg {
108
+ } .bank-card__brandLogo_hi52l svg {
109
109
  display: block;
110
110
  fill: var(--color-black);
111
- } .bank-card__usePhoto_q6qx4 {
111
+ } .bank-card__usePhoto_hi52l {
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_q6qx4 svg {
128
+ } .bank-card__usePhoto_hi52l 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.3.7",
3
+ "version": "5.4.0",
4
4
  "description": "Bank card component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,9 +15,9 @@
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.2.7",
18
+ "@alfalab/core-components-masked-input": "^6.2.8",
19
19
  "@alfalab/icons-glyph": "^2.108.0",
20
- "@alfalab/icons-logotype": "^2.19.0",
20
+ "@alfalab/icons-logotype": "^2.27.0",
21
21
  "classnames": "^2.3.1",
22
22
  "tslib": "^2.4.0"
23
23
  }
package/src/Component.tsx CHANGED
@@ -143,6 +143,7 @@ export const BankCard = React.forwardRef<HTMLInputElement, BankCardProps>(
143
143
  dataTestId={dataTestId}
144
144
  inputMode='numeric'
145
145
  pattern='[0-9]*'
146
+ breakpoint={1}
146
147
  />
147
148
 
148
149
  {brandIcon && <div className={styles.brandLogo}>{brandIcon}</div>}