@alfalab/core-components 47.12.0 → 47.12.1-beta.0

package/badge/moderncssm/index.module.css

@@ -0,0 +1,263 @@
+/* */
+
+:root {
+    --badge-icon-bg-color: var(--color-light-neutral-translucent-1300-inverted);
+}
+
+.wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-radius-circle);
+    box-sizing: border-box
+}
+
+.wrapper.s {
+        padding: var(--gap-3xs);
+        width: 20px;
+        height: 20px;
+    }
+
+.wrapper.m {
+        padding: var(--gap-3xs);
+        width: 24px;
+        height: 24px;
+    }
+
+.wrapper.xl {
+        padding: 5px;
+        width: 40px;
+        height: 40px;
+    }
+
+.component {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 700;
+
+    position: relative;
+    z-index: 2;
+    box-sizing: border-box;
+    border-radius: var(--border-radius-pill);
+    overflow: hidden
+}
+
+.component.background-accent {
+        background-color: var(--color-light-accent-primary);
+        color: var(--color-static-text-primary-inverted);
+    }
+
+.component.background-specialbg-secondary-transparent {
+        background-color: var(--color-light-neutral-translucent-200);
+        color: var(--color-light-text-primary);
+    }
+
+.component.background-primary {
+        background-color: var(--color-light-neutral-0);
+        color: var(--color-light-text-primary);
+    }
+
+.countWrapper {
+    display: inline-flex;
+    border-radius: var(--border-radius-pill);
+}
+
+.count {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.outlineCount {
+    border: 2px solid var(--badge-icon-bg-color);
+}
+
+.s {
+    height: 16px;
+    min-width: 16px;
+    padding: 0 var(--gap-2xs);
+}
+
+.m {
+    height: 20px;
+    min-width: 20px;
+    padding: 0 6px;
+}
+
+.l {
+    height: 24px;
+    min-width: 24px;
+    padding: 0 6px;
+}
+
+.heightS {
+    font-size: 11px;
+    line-height: 16px;
+    font-weight: 700;
+    padding: 0 var(--gap-2xs);
+}
+
+.heightM {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+    padding: 0 var(--gap-2xs);
+}
+
+.heightL {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+    padding: 0 var(--gap-xs);
+}
+
+.heightXL {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    padding: 0 var(--gap-s);
+}
+
+.heightXXL {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    padding: 0 var(--gap-m);
+}
+
+.heightS.outlineCount {
+    border: 1px solid var(--badge-icon-bg-color);
+}
+
+.icon {
+    max-height: 30px;
+    min-width: 0;
+    padding: 0;
+    color: var(--color-light-status-positive)
+}
+
+.icon.positive {
+        color: var(--color-light-status-positive);
+        background-color: var(--color-light-status-positive);
+    }
+
+.icon.attention {
+        color: var(--color-light-status-attention);
+        background-color: var(--color-light-status-attention);
+    }
+
+.icon.negative {
+        color: var(--color-light-status-negative);
+        background-color: var(--color-light-status-negative);
+    }
+
+.icon.link {
+        color: var(--color-light-status-info);
+        background-color: var(--color-light-status-info);
+    }
+
+.icon.tertiary {
+        color: var(--color-light-neutral-500);
+        background-color: var(--color-light-neutral-500);
+    }
+
+.icon.secondary {
+        color: var(--color-light-neutral-700);
+        background-color: var(--color-light-neutral-700);
+    }
+
+.icon.primary {
+        color: var(--color-light-neutral-translucent-1300);
+        background-color: var(--color-light-neutral-translucent-1300);
+    }
+
+.icon.s {
+    width: 16px;
+    height: 16px;
+}
+
+.icon:before {
+    position: absolute;
+    z-index: -1;
+    left: 18%;
+    right: 18%;
+    top: 18%;
+    bottom: 18%;
+    border-radius: var(--border-radius-pill);
+    content: '';
+}
+
+.graphic-static-light.icon:before {
+    background-color: var(--color-static-neutral-translucent-1300-inverted);
+}
+
+.graphic-primary.icon:before {
+    background-color: var(--color-light-neutral-translucent-1300);
+}
+
+.outline {
+    background-color: var(--badge-icon-bg-color);
+}
+
+.outlineColor {
+    background-color: var(--color-light-accent-primary)
+}
+
+.outlineColor.attention {
+        background-color: var(--color-light-status-attention);
+    }
+
+.outlineColor.positive {
+        background-color: var(--color-light-status-positive);
+    }
+
+.outlineColor.negative {
+        background-color: var(--color-light-status-negative);
+    }
+
+.outlineColor.link {
+        background-color: var(--color-light-status-info);
+    }
+
+.outlineColor.tertiary {
+        background-color: var(--color-light-neutral-500);
+    }
+
+.outlineColor.secondary {
+        background-color: var(--color-light-neutral-700);
+    }
+
+.outlineColor.primary {
+        background-color: var(--color-light-neutral-translucent-1300);
+    }
+
+.dot {
+    width: 8px;
+    height: 8px;
+    min-width: 0;
+    padding: 0;
+}
+
+.dot.outlineCount {
+    border: 1px solid var(--badge-icon-bg-color);
+}
+
+.isHidden {
+    display: none;
+}
+
+.icon svg {
+    position: relative;
+}
+
+.m svg {
+    top: -2px;
+    left: -2px;
+    width: 24px;
+    height: 24px;
+}
+
+.xl svg {
+    width: 30px;
+    height: 30px;
+}

package/bank-card/Component.js

@@ -17,7 +17,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"bank-card__component_1oqhk","aspectRatioContainer":"bank-card__aspectRatioContainer_1oqhk","content":"bank-card__content_1oqhk","label":"bank-card__label_1oqhk","focused":"bank-card__focused_1oqhk","filled":"bank-card__filled_1oqhk","input":"bank-card__input_1oqhk","bankLogo":"bank-card__bankLogo_1oqhk","brandLogo":"bank-card__brandLogo_1oqhk","usePhoto":"bank-card__usePhoto_1oqhk"};
+var styles = {"component":"bank-card__component_1ipnh","aspectRatioContainer":"bank-card__aspectRatioContainer_1ipnh","content":"bank-card__content_1ipnh","label":"bank-card__label_1ipnh","focused":"bank-card__focused_1ipnh","filled":"bank-card__filled_1ipnh","input":"bank-card__input_1ipnh","bankLogo":"bank-card__bankLogo_1ipnh","brandLogo":"bank-card__brandLogo_1ipnh","usePhoto":"bank-card__usePhoto_1ipnh"};
 require('./index.css');
 
 // prettier-ignore

package/bank-card/esm/Component.js

@@ -10,7 +10,7 @@ import { getDefaultInputLabel } from './helpers/getDefaultInputLabel.js';
 import { MaskTypeEnum } from './enums.js';
 import { validateCardNumber } from './utils.js';
 
-var styles = {"component":"bank-card__component_1oqhk","aspectRatioContainer":"bank-card__aspectRatioContainer_1oqhk","content":"bank-card__content_1oqhk","label":"bank-card__label_1oqhk","focused":"bank-card__focused_1oqhk","filled":"bank-card__filled_1oqhk","input":"bank-card__input_1oqhk","bankLogo":"bank-card__bankLogo_1oqhk","brandLogo":"bank-card__brandLogo_1oqhk","usePhoto":"bank-card__usePhoto_1oqhk"};
+var styles = {"component":"bank-card__component_1ipnh","aspectRatioContainer":"bank-card__aspectRatioContainer_1ipnh","content":"bank-card__content_1ipnh","label":"bank-card__label_1ipnh","focused":"bank-card__focused_1ipnh","filled":"bank-card__filled_1ipnh","input":"bank-card__input_1ipnh","bankLogo":"bank-card__bankLogo_1ipnh","brandLogo":"bank-card__brandLogo_1ipnh","usePhoto":"bank-card__usePhoto_1ipnh"};
 require('./index.css');
 
 // prettier-ignore

package/bank-card/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: mna6l */
+/* hash: 1b272 */
 :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 */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -26,7 +26,7 @@
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } :root {
-} .bank-card__component_1oqhk {
+} .bank-card__component_1ipnh {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -45,10 +45,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-} .bank-card__aspectRatioContainer_1oqhk {
+} .bank-card__aspectRatioContainer_1ipnh {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_1oqhk {
+} .bank-card__content_1ipnh {
     position: absolute;
     top: 0;
     right: 0;
@@ -60,26 +60,26 @@
     padding-right: var(--gap-l);
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
-} .bank-card__label_1oqhk {
+} .bank-card__label_1ipnh {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-light-text-secondary);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_1oqhk {
+} @media (max-width: 360px) { .bank-card__label_1ipnh {
         font-size: 16px
 }
-    } .bank-card__focused_1oqhk .bank-card__label_1oqhk,
-.bank-card__filled_1oqhk .bank-card__label_1oqhk {
+    } .bank-card__focused_1ipnh .bank-card__label_1ipnh,
+.bank-card__filled_1ipnh .bank-card__label_1ipnh {
     color: var(--color-light-neutral-translucent-1300);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_1oqhk .bank-card__label_1oqhk,
-.bank-card__filled_1oqhk .bank-card__label_1oqhk {
+} @media (max-width: 360px) { .bank-card__focused_1ipnh .bank-card__label_1ipnh,
+.bank-card__filled_1ipnh .bank-card__label_1ipnh {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_1oqhk:before {
+    } .bank-card__focused_1ipnh:before {
     transform: scale(1) !important;
-} .bank-card__input_1oqhk {
+} .bank-card__input_1ipnh {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -92,27 +92,27 @@
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
     padding-bottom: var(--gap-2xs) !important
-} @media (max-width: 360px) { .bank-card__input_1oqhk {
+} @media (max-width: 360px) { .bank-card__input_1ipnh {
         font-size: 16px
 }
-    } .bank-card__bankLogo_1oqhk {
+    } .bank-card__bankLogo_1ipnh {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_1oqhk svg {
+} .bank-card__bankLogo_1ipnh svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_1oqhk svg g {
+    } .bank-card__bankLogo_1ipnh svg g {
             fill: var(--color-light-neutral-translucent-1300);
-        } .bank-card__brandLogo_1oqhk {
+        } .bank-card__brandLogo_1ipnh {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_1oqhk svg {
+} .bank-card__brandLogo_1ipnh svg {
         display: block;
         fill: var(--color-light-neutral-translucent-1300);
-    } .bank-card__usePhoto_1oqhk {
+    } .bank-card__usePhoto_1ipnh {
     display: block;
     margin: 0;
     padding: 0;
@@ -129,7 +129,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_1oqhk svg {
+} .bank-card__usePhoto_1ipnh svg {
         fill: var(--color-light-neutral-translucent-1300);
         display: block;
     }

package/bank-card/index.css

@@ -1,4 +1,4 @@
-/* hash: mna6l */
+/* hash: 1b272 */
 :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 */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -26,7 +26,7 @@
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } :root {
-} .bank-card__component_1oqhk {
+} .bank-card__component_1ipnh {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -45,10 +45,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-} .bank-card__aspectRatioContainer_1oqhk {
+} .bank-card__aspectRatioContainer_1ipnh {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_1oqhk {
+} .bank-card__content_1ipnh {
     position: absolute;
     top: 0;
     right: 0;
@@ -60,26 +60,26 @@
     padding-right: var(--gap-l);
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
-} .bank-card__label_1oqhk {
+} .bank-card__label_1ipnh {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-light-text-secondary);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_1oqhk {
+} @media (max-width: 360px) { .bank-card__label_1ipnh {
         font-size: 16px
 }
-    } .bank-card__focused_1oqhk .bank-card__label_1oqhk,
-.bank-card__filled_1oqhk .bank-card__label_1oqhk {
+    } .bank-card__focused_1ipnh .bank-card__label_1ipnh,
+.bank-card__filled_1ipnh .bank-card__label_1ipnh {
     color: var(--color-light-neutral-translucent-1300);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_1oqhk .bank-card__label_1oqhk,
-.bank-card__filled_1oqhk .bank-card__label_1oqhk {
+} @media (max-width: 360px) { .bank-card__focused_1ipnh .bank-card__label_1ipnh,
+.bank-card__filled_1ipnh .bank-card__label_1ipnh {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_1oqhk:before {
+    } .bank-card__focused_1ipnh:before {
     transform: scale(1) !important;
-} .bank-card__input_1oqhk {
+} .bank-card__input_1ipnh {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -92,27 +92,27 @@
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
     padding-bottom: var(--gap-2xs) !important
-} @media (max-width: 360px) { .bank-card__input_1oqhk {
+} @media (max-width: 360px) { .bank-card__input_1ipnh {
         font-size: 16px
 }
-    } .bank-card__bankLogo_1oqhk {
+    } .bank-card__bankLogo_1ipnh {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_1oqhk svg {
+} .bank-card__bankLogo_1ipnh svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_1oqhk svg g {
+    } .bank-card__bankLogo_1ipnh svg g {
             fill: var(--color-light-neutral-translucent-1300);
-        } .bank-card__brandLogo_1oqhk {
+        } .bank-card__brandLogo_1ipnh {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_1oqhk svg {
+} .bank-card__brandLogo_1ipnh svg {
         display: block;
         fill: var(--color-light-neutral-translucent-1300);
-    } .bank-card__usePhoto_1oqhk {
+    } .bank-card__usePhoto_1ipnh {
     display: block;
     margin: 0;
     padding: 0;
@@ -129,7 +129,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_1oqhk svg {
+} .bank-card__usePhoto_1ipnh svg {
         fill: var(--color-light-neutral-translucent-1300);
         display: block;
     }

package/bank-card/modern/Component.js

@@ -10,7 +10,7 @@ import { getDefaultInputLabel } from './helpers/getDefaultInputLabel.js';
 import { MaskTypeEnum } from './enums.js';
 import { validateCardNumber } from './utils.js';
 
-const styles = {"component":"bank-card__component_1oqhk","aspectRatioContainer":"bank-card__aspectRatioContainer_1oqhk","content":"bank-card__content_1oqhk","label":"bank-card__label_1oqhk","focused":"bank-card__focused_1oqhk","filled":"bank-card__filled_1oqhk","input":"bank-card__input_1oqhk","bankLogo":"bank-card__bankLogo_1oqhk","brandLogo":"bank-card__brandLogo_1oqhk","usePhoto":"bank-card__usePhoto_1oqhk"};
+const styles = {"component":"bank-card__component_1ipnh","aspectRatioContainer":"bank-card__aspectRatioContainer_1ipnh","content":"bank-card__content_1ipnh","label":"bank-card__label_1ipnh","focused":"bank-card__focused_1ipnh","filled":"bank-card__filled_1ipnh","input":"bank-card__input_1ipnh","bankLogo":"bank-card__bankLogo_1ipnh","brandLogo":"bank-card__brandLogo_1ipnh","usePhoto":"bank-card__usePhoto_1ipnh"};
 require('./index.css');
 
 // prettier-ignore

package/bank-card/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: mna6l */
+/* hash: 1b272 */
 :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 */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -26,7 +26,7 @@
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } :root {
-} .bank-card__component_1oqhk {
+} .bank-card__component_1ipnh {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -45,10 +45,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-} .bank-card__aspectRatioContainer_1oqhk {
+} .bank-card__aspectRatioContainer_1ipnh {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_1oqhk {
+} .bank-card__content_1ipnh {
     position: absolute;
     top: 0;
     right: 0;
@@ -60,26 +60,26 @@
     padding-right: var(--gap-l);
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
-} .bank-card__label_1oqhk {
+} .bank-card__label_1ipnh {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-light-text-secondary);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_1oqhk {
+} @media (max-width: 360px) { .bank-card__label_1ipnh {
         font-size: 16px
 }
-    } .bank-card__focused_1oqhk .bank-card__label_1oqhk,
-.bank-card__filled_1oqhk .bank-card__label_1oqhk {
+    } .bank-card__focused_1ipnh .bank-card__label_1ipnh,
+.bank-card__filled_1ipnh .bank-card__label_1ipnh {
     color: var(--color-light-neutral-translucent-1300);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_1oqhk .bank-card__label_1oqhk,
-.bank-card__filled_1oqhk .bank-card__label_1oqhk {
+} @media (max-width: 360px) { .bank-card__focused_1ipnh .bank-card__label_1ipnh,
+.bank-card__filled_1ipnh .bank-card__label_1ipnh {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_1oqhk:before {
+    } .bank-card__focused_1ipnh:before {
     transform: scale(1) !important;
-} .bank-card__input_1oqhk {
+} .bank-card__input_1ipnh {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -92,27 +92,27 @@
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
     padding-bottom: var(--gap-2xs) !important
-} @media (max-width: 360px) { .bank-card__input_1oqhk {
+} @media (max-width: 360px) { .bank-card__input_1ipnh {
         font-size: 16px
 }
-    } .bank-card__bankLogo_1oqhk {
+    } .bank-card__bankLogo_1ipnh {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_1oqhk svg {
+} .bank-card__bankLogo_1ipnh svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_1oqhk svg g {
+    } .bank-card__bankLogo_1ipnh svg g {
             fill: var(--color-light-neutral-translucent-1300);
-        } .bank-card__brandLogo_1oqhk {
+        } .bank-card__brandLogo_1ipnh {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_1oqhk svg {
+} .bank-card__brandLogo_1ipnh svg {
         display: block;
         fill: var(--color-light-neutral-translucent-1300);
-    } .bank-card__usePhoto_1oqhk {
+    } .bank-card__usePhoto_1ipnh {
     display: block;
     margin: 0;
     padding: 0;
@@ -129,7 +129,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_1oqhk svg {
+} .bank-card__usePhoto_1ipnh svg {
         fill: var(--color-light-neutral-translucent-1300);
         display: block;
     }

package/bank-card/moderncssm/Component.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, MouseEvent, ReactNode } from "react";
+import { MaskType } from "./types";
+type BankCardProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Цвет фона карты
+     */
+    backgroundColor?: string;
+    /**
+     * Иконка логотипа банка (размер L)
+     */
+    bankLogo?: ReactNode;
+    /**
+     * Лэйбл поля ввода
+     */
+    inputLabel?: string;
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+    /**
+     * Обработчик ввода
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        value: string;
+    }) => void;
+    /**
+     * Обработчик вызова камеры
+     */
+    onUsePhoto?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Тип вводимой маски. Позволяет устанавливать необходимый тип номера (номер карты или номер счёта)
+     * Если параметр не передавать - работает с обоими типами номеров
+     */
+    maskType?: MaskType;
+};
+declare const BankCard: React.ForwardRefExoticComponent<BankCardProps & React.RefAttributes<HTMLInputElement>>;
+export { BankCardProps, BankCard };