@alfalab/core-components-bank-card 5.2.25 → 5.3.0

package/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_1xruw","aspectRatioContainer":"bank-card__aspectRatioContainer_1xruw","content":"bank-card__content_1xruw","label":"bank-card__label_1xruw","focused":"bank-card__focused_1xruw","filled":"bank-card__filled_1xruw","input":"bank-card__input_1xruw","bankLogo":"bank-card__bankLogo_1xruw","brandLogo":"bank-card__brandLogo_1xruw","usePhoto":"bank-card__usePhoto_1xruw"};
+var styles = {"component":"bank-card__component_uo254","aspectRatioContainer":"bank-card__aspectRatioContainer_uo254","content":"bank-card__content_uo254","label":"bank-card__label_uo254","focused":"bank-card__focused_uo254","filled":"bank-card__filled_uo254","input":"bank-card__input_uo254","bankLogo":"bank-card__bankLogo_uo254","brandLogo":"bank-card__brandLogo_uo254","usePhoto":"bank-card__usePhoto_uo254"};
 require('./index.css')
 
 // prettier-ignore

package/esm/Component.js

@@ -8,7 +8,7 @@ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
 import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
 import { validateCardNumber } from './utils.js';
 
-var styles = {"component":"bank-card__component_1xruw","aspectRatioContainer":"bank-card__aspectRatioContainer_1xruw","content":"bank-card__content_1xruw","label":"bank-card__label_1xruw","focused":"bank-card__focused_1xruw","filled":"bank-card__filled_1xruw","input":"bank-card__input_1xruw","bankLogo":"bank-card__bankLogo_1xruw","brandLogo":"bank-card__brandLogo_1xruw","usePhoto":"bank-card__usePhoto_1xruw"};
+var styles = {"component":"bank-card__component_uo254","aspectRatioContainer":"bank-card__aspectRatioContainer_uo254","content":"bank-card__content_uo254","label":"bank-card__label_uo254","focused":"bank-card__focused_uo254","filled":"bank-card__filled_uo254","input":"bank-card__input_uo254","bankLogo":"bank-card__bankLogo_uo254","brandLogo":"bank-card__brandLogo_uo254","usePhoto":"bank-card__usePhoto_uo254"};
 require('./index.css')
 
 // prettier-ignore

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 58c7q */
+/* hash: 1u46b */
 :root {
     --color-black: #000;
     --color-black-60: rgba(0, 0, 0, 0.6);
@@ -22,7 +22,7 @@
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } :root {
-} .bank-card__component_1xruw {
+} .bank-card__component_uo254 {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -41,10 +41,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-} .bank-card__aspectRatioContainer_1xruw {
+} .bank-card__aspectRatioContainer_uo254 {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_1xruw {
+} .bank-card__content_uo254 {
     position: absolute;
     top: 0;
     right: 0;
@@ -56,26 +56,26 @@
     padding-right: var(--gap-l);
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
-} .bank-card__label_1xruw {
+} .bank-card__label_uo254 {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_1xruw {
+} @media (max-width: 360px) { .bank-card__label_uo254 {
         font-size: 16px
 }
-    } .bank-card__focused_1xruw .bank-card__label_1xruw,
-.bank-card__filled_1xruw .bank-card__label_1xruw {
+    } .bank-card__focused_uo254 .bank-card__label_uo254,
+.bank-card__filled_uo254 .bank-card__label_uo254 {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_1xruw .bank-card__label_1xruw,
-.bank-card__filled_1xruw .bank-card__label_1xruw {
+} @media (max-width: 360px) { .bank-card__focused_uo254 .bank-card__label_uo254,
+.bank-card__filled_uo254 .bank-card__label_uo254 {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_1xruw:before {
+    } .bank-card__focused_uo254:before {
     transform: scale(1) !important;
-} .bank-card__input_1xruw {
+} .bank-card__input_uo254 {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -88,27 +88,27 @@
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
     padding-bottom: var(--gap-2xs) !important
-} @media (max-width: 360px) { .bank-card__input_1xruw {
+} @media (max-width: 360px) { .bank-card__input_uo254 {
         font-size: 16px
 }
-    } .bank-card__bankLogo_1xruw {
+    } .bank-card__bankLogo_uo254 {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_1xruw svg {
+} .bank-card__bankLogo_uo254 svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_1xruw svg g {
+    } .bank-card__bankLogo_uo254 svg g {
             fill: var(--color-black);
-        } .bank-card__brandLogo_1xruw {
+        } .bank-card__brandLogo_uo254 {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_1xruw svg {
+} .bank-card__brandLogo_uo254 svg {
         display: block;
         fill: var(--color-black);
-    } .bank-card__usePhoto_1xruw {
+    } .bank-card__usePhoto_uo254 {
     display: block;
     margin: 0;
     padding: 0;
@@ -125,7 +125,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_1xruw svg {
+} .bank-card__usePhoto_uo254 svg {
         fill: var(--color-black);
         display: block;
     }

package/index.css

@@ -1,4 +1,4 @@
-/* hash: 58c7q */
+/* hash: 1u46b */
 :root {
     --color-black: #000;
     --color-black-60: rgba(0, 0, 0, 0.6);
@@ -22,7 +22,7 @@
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } :root {
-} .bank-card__component_1xruw {
+} .bank-card__component_uo254 {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -41,10 +41,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-} .bank-card__aspectRatioContainer_1xruw {
+} .bank-card__aspectRatioContainer_uo254 {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_1xruw {
+} .bank-card__content_uo254 {
     position: absolute;
     top: 0;
     right: 0;
@@ -56,26 +56,26 @@
     padding-right: var(--gap-l);
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
-} .bank-card__label_1xruw {
+} .bank-card__label_uo254 {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_1xruw {
+} @media (max-width: 360px) { .bank-card__label_uo254 {
         font-size: 16px
 }
-    } .bank-card__focused_1xruw .bank-card__label_1xruw,
-.bank-card__filled_1xruw .bank-card__label_1xruw {
+    } .bank-card__focused_uo254 .bank-card__label_uo254,
+.bank-card__filled_uo254 .bank-card__label_uo254 {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_1xruw .bank-card__label_1xruw,
-.bank-card__filled_1xruw .bank-card__label_1xruw {
+} @media (max-width: 360px) { .bank-card__focused_uo254 .bank-card__label_uo254,
+.bank-card__filled_uo254 .bank-card__label_uo254 {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_1xruw:before {
+    } .bank-card__focused_uo254:before {
     transform: scale(1) !important;
-} .bank-card__input_1xruw {
+} .bank-card__input_uo254 {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -88,27 +88,27 @@
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
     padding-bottom: var(--gap-2xs) !important
-} @media (max-width: 360px) { .bank-card__input_1xruw {
+} @media (max-width: 360px) { .bank-card__input_uo254 {
         font-size: 16px
 }
-    } .bank-card__bankLogo_1xruw {
+    } .bank-card__bankLogo_uo254 {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_1xruw svg {
+} .bank-card__bankLogo_uo254 svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_1xruw svg g {
+    } .bank-card__bankLogo_uo254 svg g {
             fill: var(--color-black);
-        } .bank-card__brandLogo_1xruw {
+        } .bank-card__brandLogo_uo254 {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_1xruw svg {
+} .bank-card__brandLogo_uo254 svg {
         display: block;
         fill: var(--color-black);
-    } .bank-card__usePhoto_1xruw {
+    } .bank-card__usePhoto_uo254 {
     display: block;
     margin: 0;
     padding: 0;
@@ -125,7 +125,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_1xruw svg {
+} .bank-card__usePhoto_uo254 svg {
         fill: var(--color-black);
         display: block;
     }

package/modern/Component.js

@@ -8,7 +8,7 @@ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
 import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
 import { validateCardNumber } from './utils.js';
 
-const styles = {"component":"bank-card__component_1xruw","aspectRatioContainer":"bank-card__aspectRatioContainer_1xruw","content":"bank-card__content_1xruw","label":"bank-card__label_1xruw","focused":"bank-card__focused_1xruw","filled":"bank-card__filled_1xruw","input":"bank-card__input_1xruw","bankLogo":"bank-card__bankLogo_1xruw","brandLogo":"bank-card__brandLogo_1xruw","usePhoto":"bank-card__usePhoto_1xruw"};
+const styles = {"component":"bank-card__component_uo254","aspectRatioContainer":"bank-card__aspectRatioContainer_uo254","content":"bank-card__content_uo254","label":"bank-card__label_uo254","focused":"bank-card__focused_uo254","filled":"bank-card__filled_uo254","input":"bank-card__input_uo254","bankLogo":"bank-card__bankLogo_uo254","brandLogo":"bank-card__brandLogo_uo254","usePhoto":"bank-card__usePhoto_uo254"};
 require('./index.css')
 
 // prettier-ignore

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 58c7q */
+/* hash: 1u46b */
 :root {
     --color-black: #000;
     --color-black-60: rgba(0, 0, 0, 0.6);
@@ -22,7 +22,7 @@
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } :root {
-} .bank-card__component_1xruw {
+} .bank-card__component_uo254 {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -41,10 +41,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-} .bank-card__aspectRatioContainer_1xruw {
+} .bank-card__aspectRatioContainer_uo254 {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_1xruw {
+} .bank-card__content_uo254 {
     position: absolute;
     top: 0;
     right: 0;
@@ -56,26 +56,26 @@
     padding-right: var(--gap-l);
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
-} .bank-card__label_1xruw {
+} .bank-card__label_uo254 {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_1xruw {
+} @media (max-width: 360px) { .bank-card__label_uo254 {
         font-size: 16px
 }
-    } .bank-card__focused_1xruw .bank-card__label_1xruw,
-.bank-card__filled_1xruw .bank-card__label_1xruw {
+    } .bank-card__focused_uo254 .bank-card__label_uo254,
+.bank-card__filled_uo254 .bank-card__label_uo254 {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_1xruw .bank-card__label_1xruw,
-.bank-card__filled_1xruw .bank-card__label_1xruw {
+} @media (max-width: 360px) { .bank-card__focused_uo254 .bank-card__label_uo254,
+.bank-card__filled_uo254 .bank-card__label_uo254 {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_1xruw:before {
+    } .bank-card__focused_uo254:before {
     transform: scale(1) !important;
-} .bank-card__input_1xruw {
+} .bank-card__input_uo254 {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -88,27 +88,27 @@
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
     padding-bottom: var(--gap-2xs) !important
-} @media (max-width: 360px) { .bank-card__input_1xruw {
+} @media (max-width: 360px) { .bank-card__input_uo254 {
         font-size: 16px
 }
-    } .bank-card__bankLogo_1xruw {
+    } .bank-card__bankLogo_uo254 {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_1xruw svg {
+} .bank-card__bankLogo_uo254 svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_1xruw svg g {
+    } .bank-card__bankLogo_uo254 svg g {
             fill: var(--color-black);
-        } .bank-card__brandLogo_1xruw {
+        } .bank-card__brandLogo_uo254 {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_1xruw svg {
+} .bank-card__brandLogo_uo254 svg {
         display: block;
         fill: var(--color-black);
-    } .bank-card__usePhoto_1xruw {
+    } .bank-card__usePhoto_uo254 {
     display: block;
     margin: 0;
     padding: 0;
@@ -125,7 +125,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_1xruw svg {
+} .bank-card__usePhoto_uo254 svg {
         fill: var(--color-black);
         display: block;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-bank-card",
-    "version": "5.2.25",
+    "version": "5.3.0",
     "description": "Bank card component",
     "keywords": [],
     "license": "MIT",
@@ -15,7 +15,7 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-masked-input": "^6.1.18",
+        "@alfalab/core-components-masked-input": "^6.2.0",
         "@alfalab/icons-glyph": "^2.108.0",
         "@alfalab/icons-logotype": "^2.19.0",
         "classnames": "^2.3.1",

package/src/Component.tsx

@@ -0,0 +1,160 @@
+import React, { ChangeEvent, MouseEvent, ReactNode, useCallback, useEffect, useState } from 'react';
+import cn from 'classnames';
+
+import { MaskedInput } from '@alfalab/core-components-masked-input';
+import { CameraMIcon } from '@alfalab/icons-glyph/CameraMIcon';
+import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
+import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
+import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
+import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
+
+import { validateCardNumber } from './utils';
+
+import styles from './index.module.css';
+
+export 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;
+};
+
+// prettier-ignore
+const cardMask = [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/];
+// prettier-ignore
+const accountNumberMask = [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/];
+
+const getBrandIcon = (value = '') => {
+    // Показываем логотип только после ввода всех цифр карты
+    if (value.replace(/\s/g, '').length === 16 && validateCardNumber(value)) {
+        if (value.startsWith('2')) return <MirXxlIcon />;
+        if (value.startsWith('4')) return <VisaXxlIcon />;
+        if (value.startsWith('5')) return <MastercardLIcon />;
+        if (value.startsWith('6')) return <MastercardLIcon />;
+    }
+
+    return null;
+};
+
+export const BankCard = React.forwardRef<HTMLInputElement, BankCardProps>(
+    (
+        {
+            bankLogo = <AlfaBankLIcon />,
+            backgroundColor = '#EF3124',
+            inputLabel = 'Номер карты или счёта',
+            value,
+            className,
+            onUsePhoto,
+            onChange,
+            dataTestId,
+        },
+        ref,
+    ) => {
+        const uncontrolled = value === undefined;
+
+        const [brandIcon, setBrandIcon] = useState<ReactNode>(getBrandIcon(value));
+
+        const getMask = useCallback(
+            (newValue: string) =>
+                newValue.length <= cardMask.length ? cardMask : accountNumberMask,
+            [],
+        );
+
+        const handleInputChange = useCallback(
+            (event: ChangeEvent<HTMLInputElement>, payload: { value: string }) => {
+                if (uncontrolled) {
+                    setBrandIcon(getBrandIcon(event.target.value));
+                }
+
+                if (onChange) {
+                    onChange(event, payload);
+                }
+            },
+            [onChange, uncontrolled],
+        );
+
+        const renderRightAddons = useCallback(
+            () => (
+                <button type='button' className={styles.usePhoto} onClick={onUsePhoto}>
+                    <CameraMIcon />
+                </button>
+            ),
+            [onUsePhoto],
+        );
+
+        useEffect(() => {
+            setBrandIcon(getBrandIcon(value));
+        }, [value]);
+
+        return (
+            <div className={cn(styles.component, className)}>
+                <div className={styles.aspectRatioContainer}>
+                    <div className={styles.content} style={{ backgroundColor }}>
+                        <div className={styles.bankLogo}>{bankLogo}</div>
+
+                        <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]*'
+                        />
+
+                        {brandIcon && <div className={styles.brandLogo}>{brandIcon}</div>}
+                    </div>
+                </div>
+            </div>
+        );
+    },
+);
+
+BankCard.defaultProps = {
+    bankLogo: <AlfaBankLIcon />,
+    backgroundColor: '#EF3124',
+    inputLabel: 'Номер карты или счёта',
+};

package/src/index.module.css

@@ -0,0 +1,133 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+/* purgecss ignore */
+.component {
+    /* TODO: как это будет собираться и работать в webView */
+    --form-control-border-radius: 0;
+    --form-control-border-bottom: 1px solid var(--color-black-60);
+    --form-control-bg-color: transparent;
+
+    /* focus */
+    --form-control-focus-border-bottom: 1px solid var(--color-black);
+    --form-control-focus-shadow: transparent;
+
+    /* hover */
+    --form-control-hover-bg-color: transparent;
+    --form-control-focus-bg-color: transparent;
+    --form-control-font-family: var(--font-family-styrene);
+
+    position: relative;
+    max-width: 343px;
+
+    font-family: var(--font-family-styrene);
+}
+
+.aspectRatioContainer {
+    /* Эталонный размер 343x216 */
+    padding-bottom: 63%;
+}
+
+.content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    padding-left: var(--gap-l);
+    padding-right: var(--gap-l);
+    border-radius: var(--border-radius-l);
+    box-sizing: border-box;
+}
+
+.label {
+    left: 0;
+    transform: translateY(-1px);
+    color: var(--color-black-60);
+    font-size: 20px;
+    line-height: 24px;
+
+    @media (max-width: 360px) {
+        font-size: 16px;
+    }
+}
+
+.focused .label,
+.filled .label {
+    color: var(--color-black);
+    transform: translateY(-19px) scale(0.6);
+
+    @media (max-width: 360px) {
+        transform: translateY(-22px) scale(0.75);
+    }
+}
+
+.focused:before {
+    transform: scale(1) !important;
+}
+
+.input {
+    @mixin promo_xsmall;
+
+    color: var(--color-black);
+    caret-color: var(--color-black);
+
+    /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
+    padding-left: 0 !important;
+    padding-bottom: var(--gap-2xs) !important;
+
+    @media (max-width: 360px) {
+        font-size: 16px;
+    }
+}
+
+.bankLogo {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+
+    & svg {
+        max-height: 32px;
+        width: auto;
+        display: block;
+
+        & g {
+            fill: var(--color-black);
+        }
+    }
+}
+
+.brandLogo {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+
+    & svg {
+        display: block;
+        fill: var(--color-black);
+    }
+}
+
+.usePhoto {
+    display: block;
+    margin: 0;
+    padding: 0;
+    text-decoration: none;
+    background-color: transparent;
+    border: 0;
+    box-shadow: none;
+    user-select: none;
+    cursor: pointer;
+    outline: none;
+    margin-bottom: var(--gap-2xs);
+    align-self: flex-end;
+
+    /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
+    margin-right: calc(var(--gap-s) * -1);
+
+    & svg {
+        fill: var(--color-black);
+        display: block;
+    }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/utils.ts

@@ -0,0 +1,28 @@
+/**
+ * Проверяет номер карты по алгоритму Луна
+ *
+ * @param cardNumber - номер карты
+ *
+ */
+export function validateCardNumber(cardNumber: string) {
+    const digits = cardNumber.replace(/\s+/g, '');
+    let sum = 0;
+
+    for (let i = 0; i < digits.length; i++) {
+        let cardNum = parseInt(digits[i], 10);
+
+        if (cardNum > 9) return false;
+
+        if ((digits.length - i) % 2 === 0) {
+            cardNum *= 2;
+
+            if (cardNum > 9) {
+                cardNum -= 9;
+            }
+        }
+
+        sum += cardNum;
+    }
+
+    return sum % 10 === 0;
+}