@alfalab/core-components-bank-card 5.2.2 → 5.2.4

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 (17) hide show
  1. package/Component.d.ts +1 -1
  2. package/Component.js +3 -3
  3. package/cssm/Component.d.ts +1 -1
  4. package/cssm/Component.js +3 -3
  5. package/cssm/index.js +3 -3
  6. package/cssm/index.module.css +1 -0
  7. package/esm/Component.d.ts +1 -1
  8. package/esm/Component.js +3 -3
  9. package/esm/index.css +21 -20
  10. package/esm/index.js +3 -3
  11. package/index.css +21 -20
  12. package/index.js +3 -3
  13. package/modern/Component.d.ts +1 -1
  14. package/modern/Component.js +3 -3
  15. package/modern/index.css +21 -20
  16. package/modern/index.js +3 -3
  17. package/package.json +2 -2
package/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { MouseEvent, ReactNode, ChangeEvent } from "react";
3
+ import { ChangeEvent, MouseEvent, ReactNode } from "react";
4
4
  type BankCardProps = {
5
5
  /**
6
6
  * Дополнительный класс
package/Component.js CHANGED
@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var cn = require('classnames');
7
7
  var coreComponentsMaskedInput = require('@alfalab/core-components-masked-input');
8
- var AlfaBankLIcon = require('@alfalab/icons-logotype/AlfaBankLIcon');
9
8
  var CameraMIcon = require('@alfalab/icons-glyph/CameraMIcon');
10
- var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
9
+ var AlfaBankLIcon = require('@alfalab/icons-logotype/AlfaBankLIcon');
11
10
  var MastercardLIcon = require('@alfalab/icons-logotype/MastercardLIcon');
12
11
  var MirXxlIcon = require('@alfalab/icons-logotype/MirXxlIcon');
12
+ var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
13
13
  var utils = require('./utils.js');
14
14
 
15
15
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -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_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"};
20
+ var styles = {"component":"bank-card__component_x2sls","aspectRatioContainer":"bank-card__aspectRatioContainer_x2sls","content":"bank-card__content_x2sls","label":"bank-card__label_x2sls","focused":"bank-card__focused_x2sls","filled":"bank-card__filled_x2sls","input":"bank-card__input_x2sls","bankLogo":"bank-card__bankLogo_x2sls","brandLogo":"bank-card__brandLogo_x2sls","usePhoto":"bank-card__usePhoto_x2sls"};
21
21
  require('./index.css')
22
22
 
23
23
  // prettier-ignore
package/cssm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { MouseEvent, ReactNode, ChangeEvent } from "react";
3
+ import { ChangeEvent, MouseEvent, ReactNode } from "react";
4
4
  type BankCardProps = {
5
5
  /**
6
6
  * Дополнительный класс
package/cssm/Component.js CHANGED
@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var cn = require('classnames');
7
7
  var coreComponentsMaskedInput = require('@alfalab/core-components-masked-input/cssm');
8
- var AlfaBankLIcon = require('@alfalab/icons-logotype/AlfaBankLIcon');
9
8
  var CameraMIcon = require('@alfalab/icons-glyph/CameraMIcon');
10
- var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
9
+ var AlfaBankLIcon = require('@alfalab/icons-logotype/AlfaBankLIcon');
11
10
  var MastercardLIcon = require('@alfalab/icons-logotype/MastercardLIcon');
12
11
  var MirXxlIcon = require('@alfalab/icons-logotype/MirXxlIcon');
13
- var styles = require('./index.module.css');
12
+ var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
14
13
  var utils = require('./utils.js');
14
+ var styles = require('./index.module.css');
15
15
 
16
16
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
17
 
package/cssm/index.js CHANGED
@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  require('react');
6
6
  require('classnames');
7
7
  require('@alfalab/core-components-masked-input/cssm');
8
- require('@alfalab/icons-logotype/AlfaBankLIcon');
9
8
  require('@alfalab/icons-glyph/CameraMIcon');
10
- require('@alfalab/icons-logotype/VisaXxlIcon');
9
+ require('@alfalab/icons-logotype/AlfaBankLIcon');
11
10
  require('@alfalab/icons-logotype/MastercardLIcon');
12
11
  require('@alfalab/icons-logotype/MirXxlIcon');
13
- require('./index.module.css');
12
+ require('@alfalab/icons-logotype/VisaXxlIcon');
14
13
  require('./utils.js');
14
+ require('./index.module.css');
15
15
  var Component = require('./Component.js');
16
16
 
17
17
 
package/cssm/index.module.css CHANGED
@@ -30,6 +30,7 @@
30
30
 
31
31
  /* focus */
32
32
  --form-control-focus-border-bottom: 1px solid var(--color-black);
33
+ --form-control-focus-shadow: transparent;
33
34
 
34
35
  /* hover */
35
36
  --form-control-hover-bg-color: transparent;
package/esm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { MouseEvent, ReactNode, ChangeEvent } from "react";
3
+ import { ChangeEvent, MouseEvent, ReactNode } from "react";
4
4
  type BankCardProps = {
5
5
  /**
6
6
  * Дополнительный класс
package/esm/Component.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import React, { useState, useCallback, useEffect } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { MaskedInput } from '@alfalab/core-components-masked-input/esm';
4
- import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
5
4
  import { CameraMIcon } from '@alfalab/icons-glyph/CameraMIcon';
6
- import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
5
+ import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
7
6
  import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
8
7
  import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
8
+ import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
9
9
  import { validateCardNumber } from './utils.js';
10
10
 
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"};
11
+ var styles = {"component":"bank-card__component_x2sls","aspectRatioContainer":"bank-card__aspectRatioContainer_x2sls","content":"bank-card__content_x2sls","label":"bank-card__label_x2sls","focused":"bank-card__focused_x2sls","filled":"bank-card__filled_x2sls","input":"bank-card__input_x2sls","bankLogo":"bank-card__bankLogo_x2sls","brandLogo":"bank-card__brandLogo_x2sls","usePhoto":"bank-card__usePhoto_x2sls"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: e8n6i */
1
+ /* hash: 1lcwp */
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_6di2j {
26
+ .bank-card__component_x2sls {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -31,6 +31,7 @@
31
31
 
32
32
  /* focus */
33
33
  --form-control-focus-border-bottom: 1px solid var(--color-black);
34
+ --form-control-focus-shadow: transparent;
34
35
 
35
36
  /* hover */
36
37
  --form-control-hover-bg-color: transparent;
@@ -42,11 +43,11 @@
42
43
 
43
44
  font-family: var(--font-family-styrene);
44
45
  }
45
- .bank-card__aspectRatioContainer_6di2j {
46
+ .bank-card__aspectRatioContainer_x2sls {
46
47
  /* Эталонный размер 343x216 */
47
48
  padding-bottom: 63%;
48
49
  }
49
- .bank-card__content_6di2j {
50
+ .bank-card__content_x2sls {
50
51
  position: absolute;
51
52
  top: 0;
52
53
  right: 0;
@@ -59,7 +60,7 @@
59
60
  border-radius: var(--border-radius-l);
60
61
  box-sizing: border-box;
61
62
  }
62
- .bank-card__label_6di2j {
63
+ .bank-card__label_x2sls {
63
64
  left: 0;
64
65
  transform: translateY(-1px);
65
66
  color: var(--color-black-60);
@@ -67,25 +68,25 @@
67
68
  line-height: 24px
68
69
  }
69
70
  @media (max-width: 360px) {
70
- .bank-card__label_6di2j {
71
+ .bank-card__label_x2sls {
71
72
  font-size: 16px
72
73
  }
73
74
  }
74
- .bank-card__focused_6di2j .bank-card__label_6di2j,
75
- .bank-card__filled_6di2j .bank-card__label_6di2j {
75
+ .bank-card__focused_x2sls .bank-card__label_x2sls,
76
+ .bank-card__filled_x2sls .bank-card__label_x2sls {
76
77
  color: var(--color-black);
77
78
  transform: translateY(-19px) scale(0.6)
78
79
  }
79
80
  @media (max-width: 360px) {
80
- .bank-card__focused_6di2j .bank-card__label_6di2j,
81
- .bank-card__filled_6di2j .bank-card__label_6di2j {
81
+ .bank-card__focused_x2sls .bank-card__label_x2sls,
82
+ .bank-card__filled_x2sls .bank-card__label_x2sls {
82
83
  transform: translateY(-22px) scale(0.75)
83
84
  }
84
85
  }
85
- .bank-card__focused_6di2j:before {
86
+ .bank-card__focused_x2sls:before {
86
87
  transform: scale(1) !important;
87
88
  }
88
- .bank-card__input_6di2j {
89
+ .bank-card__input_x2sls {
89
90
  font-size: 20px;
90
91
  line-height: 24px;
91
92
  font-weight: 400;
@@ -100,33 +101,33 @@
100
101
  padding-bottom: 4px !important
101
102
  }
102
103
  @media (max-width: 360px) {
103
- .bank-card__input_6di2j {
104
+ .bank-card__input_x2sls {
104
105
  font-size: 16px
105
106
  }
106
107
  }
107
- .bank-card__bankLogo_6di2j {
108
+ .bank-card__bankLogo_x2sls {
108
109
  position: absolute;
109
110
  top: 20px;
110
111
  left: 20px
111
112
  }
112
- .bank-card__bankLogo_6di2j svg {
113
+ .bank-card__bankLogo_x2sls svg {
113
114
  max-height: 32px;
114
115
  width: auto;
115
116
  display: block
116
117
  }
117
- .bank-card__bankLogo_6di2j svg g {
118
+ .bank-card__bankLogo_x2sls svg g {
118
119
  fill: var(--color-black);
119
120
  }
120
- .bank-card__brandLogo_6di2j {
121
+ .bank-card__brandLogo_x2sls {
121
122
  position: absolute;
122
123
  bottom: 20px;
123
124
  right: 20px
124
125
  }
125
- .bank-card__brandLogo_6di2j svg {
126
+ .bank-card__brandLogo_x2sls svg {
126
127
  display: block;
127
128
  fill: var(--color-black);
128
129
  }
129
- .bank-card__usePhoto_6di2j {
130
+ .bank-card__usePhoto_x2sls {
130
131
  display: block;
131
132
  margin: 0;
132
133
  padding: 0;
@@ -144,7 +145,7 @@
144
145
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
145
146
  margin-right: calc(var(--gap-s) * -1)
146
147
  }
147
- .bank-card__usePhoto_6di2j svg {
148
+ .bank-card__usePhoto_x2sls svg {
148
149
  fill: var(--color-black);
149
150
  display: block;
150
151
  }
package/esm/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import 'react';
2
2
  import 'classnames';
3
3
  import '@alfalab/core-components-masked-input/esm';
4
- import '@alfalab/icons-logotype/AlfaBankLIcon';
5
4
  import '@alfalab/icons-glyph/CameraMIcon';
6
- import '@alfalab/icons-logotype/VisaXxlIcon';
5
+ import '@alfalab/icons-logotype/AlfaBankLIcon';
7
6
  import '@alfalab/icons-logotype/MastercardLIcon';
8
7
  import '@alfalab/icons-logotype/MirXxlIcon';
9
- export { BankCard } from './Component.js';
8
+ import '@alfalab/icons-logotype/VisaXxlIcon';
10
9
  import './utils.js';
10
+ export { BankCard } from './Component.js';
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: e8n6i */
1
+ /* hash: 1lcwp */
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_6di2j {
26
+ .bank-card__component_x2sls {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -31,6 +31,7 @@
31
31
 
32
32
  /* focus */
33
33
  --form-control-focus-border-bottom: 1px solid var(--color-black);
34
+ --form-control-focus-shadow: transparent;
34
35
 
35
36
  /* hover */
36
37
  --form-control-hover-bg-color: transparent;
@@ -42,11 +43,11 @@
42
43
 
43
44
  font-family: var(--font-family-styrene);
44
45
  }
45
- .bank-card__aspectRatioContainer_6di2j {
46
+ .bank-card__aspectRatioContainer_x2sls {
46
47
  /* Эталонный размер 343x216 */
47
48
  padding-bottom: 63%;
48
49
  }
49
- .bank-card__content_6di2j {
50
+ .bank-card__content_x2sls {
50
51
  position: absolute;
51
52
  top: 0;
52
53
  right: 0;
@@ -59,7 +60,7 @@
59
60
  border-radius: var(--border-radius-l);
60
61
  box-sizing: border-box;
61
62
  }
62
- .bank-card__label_6di2j {
63
+ .bank-card__label_x2sls {
63
64
  left: 0;
64
65
  transform: translateY(-1px);
65
66
  color: var(--color-black-60);
@@ -67,25 +68,25 @@
67
68
  line-height: 24px
68
69
  }
69
70
  @media (max-width: 360px) {
70
- .bank-card__label_6di2j {
71
+ .bank-card__label_x2sls {
71
72
  font-size: 16px
72
73
  }
73
74
  }
74
- .bank-card__focused_6di2j .bank-card__label_6di2j,
75
- .bank-card__filled_6di2j .bank-card__label_6di2j {
75
+ .bank-card__focused_x2sls .bank-card__label_x2sls,
76
+ .bank-card__filled_x2sls .bank-card__label_x2sls {
76
77
  color: var(--color-black);
77
78
  transform: translateY(-19px) scale(0.6)
78
79
  }
79
80
  @media (max-width: 360px) {
80
- .bank-card__focused_6di2j .bank-card__label_6di2j,
81
- .bank-card__filled_6di2j .bank-card__label_6di2j {
81
+ .bank-card__focused_x2sls .bank-card__label_x2sls,
82
+ .bank-card__filled_x2sls .bank-card__label_x2sls {
82
83
  transform: translateY(-22px) scale(0.75)
83
84
  }
84
85
  }
85
- .bank-card__focused_6di2j:before {
86
+ .bank-card__focused_x2sls:before {
86
87
  transform: scale(1) !important;
87
88
  }
88
- .bank-card__input_6di2j {
89
+ .bank-card__input_x2sls {
89
90
  font-size: 20px;
90
91
  line-height: 24px;
91
92
  font-weight: 400;
@@ -100,33 +101,33 @@
100
101
  padding-bottom: 4px !important
101
102
  }
102
103
  @media (max-width: 360px) {
103
- .bank-card__input_6di2j {
104
+ .bank-card__input_x2sls {
104
105
  font-size: 16px
105
106
  }
106
107
  }
107
- .bank-card__bankLogo_6di2j {
108
+ .bank-card__bankLogo_x2sls {
108
109
  position: absolute;
109
110
  top: 20px;
110
111
  left: 20px
111
112
  }
112
- .bank-card__bankLogo_6di2j svg {
113
+ .bank-card__bankLogo_x2sls svg {
113
114
  max-height: 32px;
114
115
  width: auto;
115
116
  display: block
116
117
  }
117
- .bank-card__bankLogo_6di2j svg g {
118
+ .bank-card__bankLogo_x2sls svg g {
118
119
  fill: var(--color-black);
119
120
  }
120
- .bank-card__brandLogo_6di2j {
121
+ .bank-card__brandLogo_x2sls {
121
122
  position: absolute;
122
123
  bottom: 20px;
123
124
  right: 20px
124
125
  }
125
- .bank-card__brandLogo_6di2j svg {
126
+ .bank-card__brandLogo_x2sls svg {
126
127
  display: block;
127
128
  fill: var(--color-black);
128
129
  }
129
- .bank-card__usePhoto_6di2j {
130
+ .bank-card__usePhoto_x2sls {
130
131
  display: block;
131
132
  margin: 0;
132
133
  padding: 0;
@@ -144,7 +145,7 @@
144
145
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
145
146
  margin-right: calc(var(--gap-s) * -1)
146
147
  }
147
- .bank-card__usePhoto_6di2j svg {
148
+ .bank-card__usePhoto_x2sls svg {
148
149
  fill: var(--color-black);
149
150
  display: block;
150
151
  }
package/index.js CHANGED
@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  require('react');
6
6
  require('classnames');
7
7
  require('@alfalab/core-components-masked-input');
8
- require('@alfalab/icons-logotype/AlfaBankLIcon');
9
8
  require('@alfalab/icons-glyph/CameraMIcon');
10
- require('@alfalab/icons-logotype/VisaXxlIcon');
9
+ require('@alfalab/icons-logotype/AlfaBankLIcon');
11
10
  require('@alfalab/icons-logotype/MastercardLIcon');
12
11
  require('@alfalab/icons-logotype/MirXxlIcon');
13
- var Component = require('./Component.js');
12
+ require('@alfalab/icons-logotype/VisaXxlIcon');
14
13
  require('./utils.js');
14
+ var Component = require('./Component.js');
15
15
 
16
16
 
17
17
 
package/modern/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { MouseEvent, ReactNode, ChangeEvent } from "react";
3
+ import { ChangeEvent, MouseEvent, ReactNode } from "react";
4
4
  type BankCardProps = {
5
5
  /**
6
6
  * Дополнительный класс
package/modern/Component.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import React, { useState, useCallback, useEffect } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { MaskedInput } from '@alfalab/core-components-masked-input/modern';
4
- import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
5
4
  import { CameraMIcon } from '@alfalab/icons-glyph/CameraMIcon';
6
- import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
5
+ import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
7
6
  import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
8
7
  import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
8
+ import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
9
9
  import { validateCardNumber } from './utils.js';
10
10
 
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"};
11
+ var styles = {"component":"bank-card__component_x2sls","aspectRatioContainer":"bank-card__aspectRatioContainer_x2sls","content":"bank-card__content_x2sls","label":"bank-card__label_x2sls","focused":"bank-card__focused_x2sls","filled":"bank-card__filled_x2sls","input":"bank-card__input_x2sls","bankLogo":"bank-card__bankLogo_x2sls","brandLogo":"bank-card__brandLogo_x2sls","usePhoto":"bank-card__usePhoto_x2sls"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: e8n6i */
1
+ /* hash: 1lcwp */
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_6di2j {
26
+ .bank-card__component_x2sls {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -31,6 +31,7 @@
31
31
 
32
32
  /* focus */
33
33
  --form-control-focus-border-bottom: 1px solid var(--color-black);
34
+ --form-control-focus-shadow: transparent;
34
35
 
35
36
  /* hover */
36
37
  --form-control-hover-bg-color: transparent;
@@ -42,11 +43,11 @@
42
43
 
43
44
  font-family: var(--font-family-styrene);
44
45
  }
45
- .bank-card__aspectRatioContainer_6di2j {
46
+ .bank-card__aspectRatioContainer_x2sls {
46
47
  /* Эталонный размер 343x216 */
47
48
  padding-bottom: 63%;
48
49
  }
49
- .bank-card__content_6di2j {
50
+ .bank-card__content_x2sls {
50
51
  position: absolute;
51
52
  top: 0;
52
53
  right: 0;
@@ -59,7 +60,7 @@
59
60
  border-radius: var(--border-radius-l);
60
61
  box-sizing: border-box;
61
62
  }
62
- .bank-card__label_6di2j {
63
+ .bank-card__label_x2sls {
63
64
  left: 0;
64
65
  transform: translateY(-1px);
65
66
  color: var(--color-black-60);
@@ -67,25 +68,25 @@
67
68
  line-height: 24px
68
69
  }
69
70
  @media (max-width: 360px) {
70
- .bank-card__label_6di2j {
71
+ .bank-card__label_x2sls {
71
72
  font-size: 16px
72
73
  }
73
74
  }
74
- .bank-card__focused_6di2j .bank-card__label_6di2j,
75
- .bank-card__filled_6di2j .bank-card__label_6di2j {
75
+ .bank-card__focused_x2sls .bank-card__label_x2sls,
76
+ .bank-card__filled_x2sls .bank-card__label_x2sls {
76
77
  color: var(--color-black);
77
78
  transform: translateY(-19px) scale(0.6)
78
79
  }
79
80
  @media (max-width: 360px) {
80
- .bank-card__focused_6di2j .bank-card__label_6di2j,
81
- .bank-card__filled_6di2j .bank-card__label_6di2j {
81
+ .bank-card__focused_x2sls .bank-card__label_x2sls,
82
+ .bank-card__filled_x2sls .bank-card__label_x2sls {
82
83
  transform: translateY(-22px) scale(0.75)
83
84
  }
84
85
  }
85
- .bank-card__focused_6di2j:before {
86
+ .bank-card__focused_x2sls:before {
86
87
  transform: scale(1) !important;
87
88
  }
88
- .bank-card__input_6di2j {
89
+ .bank-card__input_x2sls {
89
90
  font-size: 20px;
90
91
  line-height: 24px;
91
92
  font-weight: 400;
@@ -100,33 +101,33 @@
100
101
  padding-bottom: 4px !important
101
102
  }
102
103
  @media (max-width: 360px) {
103
- .bank-card__input_6di2j {
104
+ .bank-card__input_x2sls {
104
105
  font-size: 16px
105
106
  }
106
107
  }
107
- .bank-card__bankLogo_6di2j {
108
+ .bank-card__bankLogo_x2sls {
108
109
  position: absolute;
109
110
  top: 20px;
110
111
  left: 20px
111
112
  }
112
- .bank-card__bankLogo_6di2j svg {
113
+ .bank-card__bankLogo_x2sls svg {
113
114
  max-height: 32px;
114
115
  width: auto;
115
116
  display: block
116
117
  }
117
- .bank-card__bankLogo_6di2j svg g {
118
+ .bank-card__bankLogo_x2sls svg g {
118
119
  fill: var(--color-black);
119
120
  }
120
- .bank-card__brandLogo_6di2j {
121
+ .bank-card__brandLogo_x2sls {
121
122
  position: absolute;
122
123
  bottom: 20px;
123
124
  right: 20px
124
125
  }
125
- .bank-card__brandLogo_6di2j svg {
126
+ .bank-card__brandLogo_x2sls svg {
126
127
  display: block;
127
128
  fill: var(--color-black);
128
129
  }
129
- .bank-card__usePhoto_6di2j {
130
+ .bank-card__usePhoto_x2sls {
130
131
  display: block;
131
132
  margin: 0;
132
133
  padding: 0;
@@ -144,7 +145,7 @@
144
145
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
145
146
  margin-right: calc(var(--gap-s) * -1)
146
147
  }
147
- .bank-card__usePhoto_6di2j svg {
148
+ .bank-card__usePhoto_x2sls svg {
148
149
  fill: var(--color-black);
149
150
  display: block;
150
151
  }
package/modern/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import 'react';
2
2
  import 'classnames';
3
3
  import '@alfalab/core-components-masked-input/modern';
4
- import '@alfalab/icons-logotype/AlfaBankLIcon';
5
4
  import '@alfalab/icons-glyph/CameraMIcon';
6
- import '@alfalab/icons-logotype/VisaXxlIcon';
5
+ import '@alfalab/icons-logotype/AlfaBankLIcon';
7
6
  import '@alfalab/icons-logotype/MastercardLIcon';
8
7
  import '@alfalab/icons-logotype/MirXxlIcon';
9
- export { BankCard } from './Component.js';
8
+ import '@alfalab/icons-logotype/VisaXxlIcon';
10
9
  import './utils.js';
10
+ export { BankCard } from './Component.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-bank-card",
3
- "version": "5.2.2",
3
+ "version": "5.2.4",
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.10",
21
+ "@alfalab/core-components-masked-input": "^6.0.1",
22
22
  "@alfalab/icons-glyph": "^2.71.0",
23
23
  "@alfalab/icons-logotype": "^2.19.0",
24
24
  "classnames": "^2.3.1"