@alfalab/core-components 26.8.0 → 26.11.0

package/badge/index.css

@@ -1,4 +1,4 @@
-/* hash: 180e1 */
+/* hash: 19b7h */
 :root {
     --color-light-bg-accent: #ef3124;
     --color-light-bg-primary: #fff;
@@ -21,6 +21,9 @@
 }
 :root {
     --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
 }
 :root {
     --border-radius-pill: 99px;
@@ -28,7 +31,7 @@
 :root {
     --badge-icon-bg-color: var(--color-light-bg-primary);
 }
-.badge__component_8ovou {
+.badge__component_13av5 {
     font-size: 12px;
     line-height: 16px;
     font-weight: 700;
@@ -44,72 +47,161 @@
     color: var(--color-light-text-primary-inverted);
     overflow: hidden;
 }
-.badge__s_8ovou {
+.badge__count_13av5 {
+    display: inline-flex;
+    padding: 2px;
+}
+.badge__outlineCount_13av5 {
+    background-color: var(--badge-icon-bg-color);
+    border-radius: 99px;
+}
+.badge__s_13av5 {
     height: 16px;
     min-width: 16px;
     padding: 0 var(--gap-2xs);
 }
-.badge__m_8ovou {
+.badge__m_13av5 {
     height: 20px;
     min-width: 20px;
     padding: 0 6px;
 }
-.badge__l_8ovou {
+.badge__l_13av5 {
     height: 24px;
     min-width: 24px;
     padding: 0 6px;
 }
-.badge__icon_8ovou {
+.badge__heightS_13av5 {
+    padding: 0 var(--gap-2xs);
+}
+.badge__heightM_13av5 {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+    padding: 0 var(--gap-2xs);
+}
+.badge__heightL_13av5 {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+    padding: 0 var(--gap-xs);
+}
+.badge__heightXL_13av5 {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    padding: 0 var(--gap-s);
+}
+.badge__heightXXL_13av5 {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    padding: 0 var(--gap-m);
+}
+.badge__wrapper_13av5 {
+    border-radius: 50%
+}
+.badge__wrapper_13av5.badge__s_13av5 {
+        padding: 2px;
+        min-width: 14px;
+        height: 14px;
+    }
+.badge__wrapper_13av5.badge__m_13av5 {
+        padding: 2px;
+        width: 20px;
+        height: 20px;
+    }
+.badge__wrapper_13av5.badge__xl_13av5 {
+        padding: 5px;
+        width: 30px;
+        height: 30px;
+    }
+.badge__icon_13av5 {
     height: auto;
     min-width: 0;
     padding: 0;
-    color: var(--color-light-graphic-positive);
-    background-color: transparent
+    color: var(--color-light-graphic-positive)
 }
-.badge__icon_8ovou.badge__positive_8ovou {
+.badge__icon_13av5.badge__positive_13av5 {
         color: var(--color-light-graphic-positive);
+        background-color: var(--color-light-graphic-positive);
     }
-.badge__icon_8ovou.badge__attention_8ovou {
+.badge__icon_13av5.badge__attention_13av5 {
         color: var(--color-light-graphic-attention);
+        background-color: var(--color-light-graphic-attention);
     }
-.badge__icon_8ovou.badge__negative_8ovou {
+.badge__icon_13av5.badge__negative_13av5 {
         color: var(--color-light-graphic-negative);
+        background-color: var(--color-light-graphic-negative);
     }
-.badge__icon_8ovou.badge__link_8ovou {
+.badge__icon_13av5.badge__link_13av5 {
         color: var(--color-light-graphic-link);
+        background-color: var(--color-light-graphic-link);
     }
-.badge__icon_8ovou.badge__tertiary_8ovou {
+.badge__icon_13av5.badge__tertiary_13av5 {
         color: var(--color-light-graphic-tertiary);
+        background-color: var(--color-light-graphic-tertiary);
     }
-.badge__icon_8ovou.badge__secondary_8ovou {
+.badge__icon_13av5.badge__secondary_13av5 {
         color: var(--color-light-graphic-secondary);
+        background-color: var(--color-light-graphic-secondary);
     }
-.badge__icon_8ovou.badge__primary_8ovou {
+.badge__icon_13av5.badge__primary_13av5 {
         color: var(--color-light-graphic-primary);
+        background-color: var(--color-light-graphic-primary);
     }
-.badge__icon_8ovou:before {
+.badge__icon_13av5.badge__s_13av5 {
+    width: 14px;
+    height: 14px;
+}
+.badge__icon_13av5:before {
     position: absolute;
     z-index: -1;
-    left: 16%;
-    right: 16%;
-    top: 16%;
-    bottom: 16%;
+    left: 18%;
+    right: 18%;
+    top: 18%;
+    bottom: 18%;
     background-color: var(--badge-icon-bg-color);
     border-radius: var(--border-radius-pill);
     content: '';
 }
-.badge__outline_8ovou:before {
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
+.badge__outline_13av5 {
+    background-color: var(--badge-icon-bg-color);
 }
-.badge__dot_8ovou {
+.badge__outlineColor_13av5.badge__attention_13av5 {
+        background-color: var(--color-light-graphic-attention);
+    }
+.badge__outlineColor_13av5.badge__positive_13av5 {
+        background-color: var(--color-light-graphic-positive);
+    }
+.badge__outlineColor_13av5.badge__negative_13av5 {
+        background-color: var(--color-light-graphic-negative);
+    }
+.badge__outlineColor_13av5.badge__link_13av5 {
+        background-color: var(--color-light-graphic-link);
+    }
+.badge__outlineColor_13av5 .badge__tertiary_13av5 {
+        background-color: var(--color-light-graphic-tertiary);
+    }
+.badge__outlineColor_13av5.badge__secondary_13av5 {
+        background-color: var(--color-light-graphic-secondary);
+    }
+.badge__outlineColor_13av5.badge__primary_13av5 {
+        background-color: var(--color-light-graphic-primary);
+    }
+.badge__dot_13av5 {
     width: 8px;
     height: 8px;
     min-width: 0;
     padding: 0;
 }
-.badge__isHidden_8ovou {
+.badge__isHidden_13av5 {
     display: none;
 }
+.badge__m_13av5 svg {
+    width: 20px;
+    height: 20px;
+}
+.badge__xl_13av5 svg {
+    width: 30px;
+    height: 30px;
+}

package/badge/index.js

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var Component = require('./Component.js');
 require('react');
 require('classnames');
-var Component = require('./Component.js');
 
 
 

package/badge/modern/Component.d.ts

@@ -10,17 +10,26 @@ type BadgeProps = {
      */
     view: 'icon' | 'count';
     /**
-     * Размер компонента (только для view=count)
+     * Размер компонента (только для view=icon)
+     * //deprecated(используйте height для view=count )
      */
-    size?: 's' | 'm' | 'l';
+    size?: 's' | 'm' | 'l' | 'xl';
     /**
-     *  Видимость обводки вокруг иконки (только для view=icon)
+     *  Видимость белой обводки вокруг иконки
      */
     visibleIconOutline?: boolean;
+    /**
+     *  Видимость цветной обводки вокруг иконки (только для view=icon)
+     */
+    visibleColorOutline?: boolean;
     /**
      * Контент компонента
      */
     content?: React.ReactElement | number;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number;
     /**
      * Цветовое оформление иконки
      */
@@ -30,5 +39,5 @@ type BadgeProps = {
      */
     dataTestId?: string;
 };
-declare const Badge: ({ className, size, view, visibleIconOutline, content, iconColor, dataTestId, }: BadgeProps) => JSX.Element;
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, dataTestId, }: BadgeProps) => JSX.Element;
 export { BadgeProps, Badge };

package/badge/modern/Component.js

@@ -1,18 +1,31 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"badge__component_8ovou","s":"badge__s_8ovou","m":"badge__m_8ovou","l":"badge__l_8ovou","icon":"badge__icon_8ovou","positive":"badge__positive_8ovou","attention":"badge__attention_8ovou","negative":"badge__negative_8ovou","link":"badge__link_8ovou","tertiary":"badge__tertiary_8ovou","secondary":"badge__secondary_8ovou","primary":"badge__primary_8ovou","outline":"badge__outline_8ovou","dot":"badge__dot_8ovou","isHidden":"badge__isHidden_8ovou"};
+var styles = {"component":"badge__component_13av5","count":"badge__count_13av5","outlineCount":"badge__outlineCount_13av5","s":"badge__s_13av5","m":"badge__m_13av5","l":"badge__l_13av5","heightS":"badge__heightS_13av5","heightM":"badge__heightM_13av5","heightL":"badge__heightL_13av5","heightXL":"badge__heightXL_13av5","heightXXL":"badge__heightXXL_13av5","wrapper":"badge__wrapper_13av5","xl":"badge__xl_13av5","icon":"badge__icon_13av5","positive":"badge__positive_13av5","attention":"badge__attention_13av5","negative":"badge__negative_13av5","link":"badge__link_13av5","tertiary":"badge__tertiary_13av5","secondary":"badge__secondary_13av5","primary":"badge__primary_13av5","outline":"badge__outline_13av5","outlineColor":"badge__outlineColor_13av5","dot":"badge__dot_13av5","isHidden":"badge__isHidden_13av5"};
 require('./index.css');
 
-const Badge = ({ className, size = 'm', view, visibleIconOutline = false, content, iconColor, dataTestId, }) => {
+const Badge = ({ className, size = 'm', view, visibleIconOutline = false, visibleColorOutline = false, content, height = 16, iconColor, dataTestId, }) => {
     const isCountView = view === 'count';
     const isHidden = isCountView && typeof content === 'number' && content <= 0;
     const componentContent = isCountView && content && content >= 100 ? '99+' : content;
-    return (React.createElement("div", { className: cn(styles.component, styles[size], styles[view], iconColor && styles[iconColor], {
-            [styles.isHidden]: isHidden,
-            [styles.dot]: !content,
-            [styles.outline]: visibleIconOutline,
-        }, className), "data-test-id": dataTestId }, componentContent));
+    const isHeightS = isCountView && height >= 16 && height <= 17;
+    const isHeightM = isCountView && height >= 18 && height <= 24;
+    const isHeightL = isCountView && height >= 25 && height <= 32;
+    const isHeightXL = isCountView && height >= 33 && height <= 40;
+    const isHeightXXL = isCountView && height >= 41 && height <= 48;
+    return (React.createElement("div", { className: cn(!isCountView && styles.wrapper, iconColor && styles[iconColor], {
+            [styles[size]]: !isCountView,
+            [styles.outline]: !isCountView && visibleIconOutline,
+            [styles.outlineColor]: visibleColorOutline,
+            [styles.outlineCount]: isCountView && visibleIconOutline,
+            [styles.count]: isCountView,
+        }) },
+        React.createElement("div", { className: cn(styles.component, styles[size], styles[view], iconColor && styles[iconColor], isHeightS && styles.heightS, isHeightM && styles.heightM, isHeightL && styles.heightL, isHeightXL && styles.heightXL, isHeightXXL && styles.heightXXL, {
+                [styles.isHidden]: isHidden,
+                [styles.dot]: !content,
+            }, className), style: {
+                ...(isCountView && content && { height, minWidth: height }),
+            }, "data-test-id": dataTestId }, componentContent)));
 };
 
 export { Badge };

package/badge/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 180e1 */
+/* hash: 19b7h */
 :root {
     --color-light-bg-accent: #ef3124;
     --color-light-bg-primary: #fff;
@@ -21,6 +21,9 @@
 }
 :root {
     --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
 }
 :root {
     --border-radius-pill: 99px;
@@ -28,7 +31,7 @@
 :root {
     --badge-icon-bg-color: var(--color-light-bg-primary);
 }
-.badge__component_8ovou {
+.badge__component_13av5 {
     font-size: 12px;
     line-height: 16px;
     font-weight: 700;
@@ -44,72 +47,161 @@
     color: var(--color-light-text-primary-inverted);
     overflow: hidden;
 }
-.badge__s_8ovou {
+.badge__count_13av5 {
+    display: inline-flex;
+    padding: 2px;
+}
+.badge__outlineCount_13av5 {
+    background-color: var(--badge-icon-bg-color);
+    border-radius: 99px;
+}
+.badge__s_13av5 {
     height: 16px;
     min-width: 16px;
     padding: 0 var(--gap-2xs);
 }
-.badge__m_8ovou {
+.badge__m_13av5 {
     height: 20px;
     min-width: 20px;
     padding: 0 6px;
 }
-.badge__l_8ovou {
+.badge__l_13av5 {
     height: 24px;
     min-width: 24px;
     padding: 0 6px;
 }
-.badge__icon_8ovou {
+.badge__heightS_13av5 {
+    padding: 0 var(--gap-2xs);
+}
+.badge__heightM_13av5 {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+    padding: 0 var(--gap-2xs);
+}
+.badge__heightL_13av5 {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+    padding: 0 var(--gap-xs);
+}
+.badge__heightXL_13av5 {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    padding: 0 var(--gap-s);
+}
+.badge__heightXXL_13av5 {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    padding: 0 var(--gap-m);
+}
+.badge__wrapper_13av5 {
+    border-radius: 50%
+}
+.badge__wrapper_13av5.badge__s_13av5 {
+        padding: 2px;
+        min-width: 14px;
+        height: 14px;
+    }
+.badge__wrapper_13av5.badge__m_13av5 {
+        padding: 2px;
+        width: 20px;
+        height: 20px;
+    }
+.badge__wrapper_13av5.badge__xl_13av5 {
+        padding: 5px;
+        width: 30px;
+        height: 30px;
+    }
+.badge__icon_13av5 {
     height: auto;
     min-width: 0;
     padding: 0;
-    color: var(--color-light-graphic-positive);
-    background-color: transparent
+    color: var(--color-light-graphic-positive)
 }
-.badge__icon_8ovou.badge__positive_8ovou {
+.badge__icon_13av5.badge__positive_13av5 {
         color: var(--color-light-graphic-positive);
+        background-color: var(--color-light-graphic-positive);
     }
-.badge__icon_8ovou.badge__attention_8ovou {
+.badge__icon_13av5.badge__attention_13av5 {
         color: var(--color-light-graphic-attention);
+        background-color: var(--color-light-graphic-attention);
     }
-.badge__icon_8ovou.badge__negative_8ovou {
+.badge__icon_13av5.badge__negative_13av5 {
         color: var(--color-light-graphic-negative);
+        background-color: var(--color-light-graphic-negative);
     }
-.badge__icon_8ovou.badge__link_8ovou {
+.badge__icon_13av5.badge__link_13av5 {
         color: var(--color-light-graphic-link);
+        background-color: var(--color-light-graphic-link);
     }
-.badge__icon_8ovou.badge__tertiary_8ovou {
+.badge__icon_13av5.badge__tertiary_13av5 {
         color: var(--color-light-graphic-tertiary);
+        background-color: var(--color-light-graphic-tertiary);
     }
-.badge__icon_8ovou.badge__secondary_8ovou {
+.badge__icon_13av5.badge__secondary_13av5 {
         color: var(--color-light-graphic-secondary);
+        background-color: var(--color-light-graphic-secondary);
     }
-.badge__icon_8ovou.badge__primary_8ovou {
+.badge__icon_13av5.badge__primary_13av5 {
         color: var(--color-light-graphic-primary);
+        background-color: var(--color-light-graphic-primary);
     }
-.badge__icon_8ovou:before {
+.badge__icon_13av5.badge__s_13av5 {
+    width: 14px;
+    height: 14px;
+}
+.badge__icon_13av5:before {
     position: absolute;
     z-index: -1;
-    left: 16%;
-    right: 16%;
-    top: 16%;
-    bottom: 16%;
+    left: 18%;
+    right: 18%;
+    top: 18%;
+    bottom: 18%;
     background-color: var(--badge-icon-bg-color);
     border-radius: var(--border-radius-pill);
     content: '';
 }
-.badge__outline_8ovou:before {
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
+.badge__outline_13av5 {
+    background-color: var(--badge-icon-bg-color);
 }
-.badge__dot_8ovou {
+.badge__outlineColor_13av5.badge__attention_13av5 {
+        background-color: var(--color-light-graphic-attention);
+    }
+.badge__outlineColor_13av5.badge__positive_13av5 {
+        background-color: var(--color-light-graphic-positive);
+    }
+.badge__outlineColor_13av5.badge__negative_13av5 {
+        background-color: var(--color-light-graphic-negative);
+    }
+.badge__outlineColor_13av5.badge__link_13av5 {
+        background-color: var(--color-light-graphic-link);
+    }
+.badge__outlineColor_13av5 .badge__tertiary_13av5 {
+        background-color: var(--color-light-graphic-tertiary);
+    }
+.badge__outlineColor_13av5.badge__secondary_13av5 {
+        background-color: var(--color-light-graphic-secondary);
+    }
+.badge__outlineColor_13av5.badge__primary_13av5 {
+        background-color: var(--color-light-graphic-primary);
+    }
+.badge__dot_13av5 {
     width: 8px;
     height: 8px;
     min-width: 0;
     padding: 0;
 }
-.badge__isHidden_8ovou {
+.badge__isHidden_13av5 {
     display: none;
 }
+.badge__m_13av5 svg {
+    width: 20px;
+    height: 20px;
+}
+.badge__xl_13av5 svg {
+    width: 30px;
+    height: 30px;
+}

package/bank-card/Component.js

@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"bank-card__component_1y4aw","aspectRatioContainer":"bank-card__aspectRatioContainer_1y4aw","content":"bank-card__content_1y4aw","label":"bank-card__label_1y4aw","focused":"bank-card__focused_1y4aw","filled":"bank-card__filled_1y4aw","input":"bank-card__input_1y4aw","bankLogo":"bank-card__bankLogo_1y4aw","brandLogo":"bank-card__brandLogo_1y4aw","usePhoto":"bank-card__usePhoto_1y4aw"};
+var styles = {"component":"bank-card__component_16z6i","aspectRatioContainer":"bank-card__aspectRatioContainer_16z6i","content":"bank-card__content_16z6i","label":"bank-card__label_16z6i","focused":"bank-card__focused_16z6i","filled":"bank-card__filled_16z6i","input":"bank-card__input_16z6i","bankLogo":"bank-card__bankLogo_16z6i","brandLogo":"bank-card__brandLogo_16z6i","usePhoto":"bank-card__usePhoto_16z6i"};
 require('./index.css');
 
 // prettier-ignore

package/bank-card/esm/Component.js

@@ -8,7 +8,7 @@ import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
 import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
 import { validateCardNumber } from './utils.js';
 
-var styles = {"component":"bank-card__component_1y4aw","aspectRatioContainer":"bank-card__aspectRatioContainer_1y4aw","content":"bank-card__content_1y4aw","label":"bank-card__label_1y4aw","focused":"bank-card__focused_1y4aw","filled":"bank-card__filled_1y4aw","input":"bank-card__input_1y4aw","bankLogo":"bank-card__bankLogo_1y4aw","brandLogo":"bank-card__brandLogo_1y4aw","usePhoto":"bank-card__usePhoto_1y4aw"};
+var styles = {"component":"bank-card__component_16z6i","aspectRatioContainer":"bank-card__aspectRatioContainer_16z6i","content":"bank-card__content_16z6i","label":"bank-card__label_16z6i","focused":"bank-card__focused_16z6i","filled":"bank-card__filled_16z6i","input":"bank-card__input_16z6i","bankLogo":"bank-card__bankLogo_16z6i","brandLogo":"bank-card__brandLogo_16z6i","usePhoto":"bank-card__usePhoto_16z6i"};
 require('./index.css');
 
 // prettier-ignore

package/bank-card/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1pskk */
+/* hash: 1e3vl */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -598,7 +598,7 @@
     --size-l-height: 64px;
     --size-xl-height: 72px;
 }
-.bank-card__component_1y4aw {
+.bank-card__component_16z6i {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -617,11 +617,11 @@
 
     font-family: var(--font-family-styrene);
 }
-.bank-card__aspectRatioContainer_1y4aw {
+.bank-card__aspectRatioContainer_16z6i {
     /* Эталонный размер 343x215 */
     padding-bottom: 62.6%;
 }
-.bank-card__content_1y4aw {
+.bank-card__content_16z6i {
     position: absolute;
     top: 0;
     right: 0;
@@ -634,7 +634,7 @@
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
 }
-.bank-card__label_1y4aw {
+.bank-card__label_16z6i {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
@@ -642,25 +642,25 @@
     line-height: 24px
 }
 @media (max-width: 360px) {
-.bank-card__label_1y4aw {
+.bank-card__label_16z6i {
         font-size: 16px
 }
     }
-.bank-card__focused_1y4aw .bank-card__label_1y4aw,
-.bank-card__filled_1y4aw .bank-card__label_1y4aw {
+.bank-card__focused_16z6i .bank-card__label_16z6i,
+.bank-card__filled_16z6i .bank-card__label_16z6i {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
 }
 @media (max-width: 360px) {
-.bank-card__focused_1y4aw .bank-card__label_1y4aw,
-.bank-card__filled_1y4aw .bank-card__label_1y4aw {
+.bank-card__focused_16z6i .bank-card__label_16z6i,
+.bank-card__filled_16z6i .bank-card__label_16z6i {
         transform: translateY(-22px) scale(0.75)
 }
     }
-.bank-card__focused_1y4aw:before {
+.bank-card__focused_16z6i:before {
     transform: scale(1) !important;
 }
-.bank-card__input_1y4aw {
+.bank-card__input_16z6i {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -674,33 +674,33 @@
     padding-left: 0 !important
 }
 @media (max-width: 360px) {
-.bank-card__input_1y4aw {
+.bank-card__input_16z6i {
         font-size: 16px
 }
     }
-.bank-card__bankLogo_1y4aw {
+.bank-card__bankLogo_16z6i {
     position: absolute;
     top: 20px;
     left: 20px
 }
-.bank-card__bankLogo_1y4aw svg {
+.bank-card__bankLogo_16z6i svg {
         max-height: 30px;
         width: auto;
         display: block
     }
-.bank-card__bankLogo_1y4aw svg g {
+.bank-card__bankLogo_16z6i svg g {
             fill: var(--color-black);
         }
-.bank-card__brandLogo_1y4aw {
+.bank-card__brandLogo_16z6i {
     position: absolute;
     bottom: 20px;
     right: 20px
 }
-.bank-card__brandLogo_1y4aw svg {
+.bank-card__brandLogo_16z6i svg {
         display: block;
         fill: var(--color-black);
     }
-.bank-card__usePhoto_1y4aw {
+.bank-card__usePhoto_16z6i {
     display: block;
     margin: 0;
     padding: 0;
@@ -718,7 +718,7 @@
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
 }
-.bank-card__usePhoto_1y4aw svg {
+.bank-card__usePhoto_16z6i svg {
         fill: var(--color-black);
         display: block;
     }