@alfalab/core-components-bank-card 5.8.21 → 6.0.0-snapshot-6a9d3fc

package/Component.d.ts

@@ -1,8 +1,6 @@
-/// <reference types="react" />
-import React from 'react';
-import { ChangeEvent, MouseEvent, ReactNode } from "react";
-import { MaskType } from "./types";
-type BankCardProps = {
+import React, { ChangeEvent, MouseEvent, ReactNode } from 'react';
+import { MaskType } from './types';
+export declare type BankCardProps = {
     /**
      * Дополнительный класс
      */
@@ -43,5 +41,4 @@ type BankCardProps = {
      */
     maskType?: MaskType;
 };
-declare const BankCard: React.ForwardRefExoticComponent<BankCardProps & React.RefAttributes<HTMLInputElement>>;
-export { BankCardProps, BankCard };
+export declare const BankCard: React.ForwardRefExoticComponent<BankCardProps & React.RefAttributes<HTMLInputElement>>;

package/Component.js

@@ -10,18 +10,16 @@ var AlfaBankSignMIcon = require('@alfalab/icons-logo/AlfaBankSignMIcon');
 var MastercardLIcon = require('@alfalab/icons-logotype/MastercardLIcon');
 var MirXxlIcon = require('@alfalab/icons-logotype/MirXxlIcon');
 var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
-var helpers_getDefaultInputLabel = require('./helpers/getDefaultInputLabel.js');
+var getDefaultInputLabel = require('./helpers/getDefaultInputLabel.js');
 var enums = require('./enums.js');
 var utils = require('./utils.js');
+var index_module = require('./index.module.css.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"bank-card__component_rieqn","aspectRatioContainer":"bank-card__aspectRatioContainer_rieqn","content":"bank-card__content_rieqn","label":"bank-card__label_rieqn","focused":"bank-card__focused_rieqn","filled":"bank-card__filled_rieqn","input":"bank-card__input_rieqn","bankLogo":"bank-card__bankLogo_rieqn","brandLogo":"bank-card__brandLogo_rieqn","usePhoto":"bank-card__usePhoto_rieqn"};
-require('./index.css')
-
 // prettier-ignore
 var cardMask = [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/];
 // prettier-ignore
@@ -42,7 +40,7 @@ var getBrandIcon = function (value) {
     return null;
 };
 var BankCard = React.forwardRef(function (_a, ref) {
-    var _b = _a.bankLogo, bankLogo = _b === void 0 ? React__default.default.createElement(AlfaBankSignMIcon.AlfaBankSignMIcon, { width: 30, height: 40 }) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId, _d = _a.maskType, maskType = _d === void 0 ? enums.MaskTypeEnum.Default : _d, _e = _a.inputLabel, inputLabel = _e === void 0 ? helpers_getDefaultInputLabel.getDefaultInputLabel(maskType) : _e;
+    var _b = _a.bankLogo, bankLogo = _b === void 0 ? React__default.default.createElement(AlfaBankSignMIcon.AlfaBankSignMIcon, { width: 30, height: 40 }) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId, _d = _a.maskType, maskType = _d === void 0 ? enums.MaskTypeEnum.Default : _d, _e = _a.inputLabel, inputLabel = _e === void 0 ? getDefaultInputLabel.getDefaultInputLabel(maskType) : _e;
     var uncontrolled = value === undefined;
     var _f = React.useState(getBrandIcon(value)), brandIcon = _f[0], setBrandIcon = _f[1];
     var getMask = React.useCallback(function (newValue) {
@@ -64,18 +62,19 @@ var BankCard = React.forwardRef(function (_a, ref) {
             onChange(event, payload);
         }
     }, [onChange, uncontrolled]);
-    var renderRightAddons = React.useCallback(function () { return (React__default.default.createElement("button", { type: 'button', className: styles.usePhoto, onClick: onUsePhoto },
+    var renderRightAddons = React.useCallback(function () { return (React__default.default.createElement("button", { type: 'button', className: index_module.usePhoto, onClick: onUsePhoto },
         React__default.default.createElement(CameraMIcon.CameraMIcon, null))); }, [onUsePhoto]);
     React.useEffect(function () {
         setBrandIcon(getBrandIcon(value));
     }, [value]);
-    return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className) },
-        React__default.default.createElement("div", { className: styles.aspectRatioContainer },
-            React__default.default.createElement("div", { className: styles.content, style: { backgroundColor: backgroundColor } },
-                React__default.default.createElement("div", { className: styles.bankLogo }, bankLogo),
-                React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*', breakpoint: 1 }),
-                brandIcon && React__default.default.createElement("div", { className: styles.brandLogo }, brandIcon)))));
+    return (React__default.default.createElement("div", { className: cn__default.default(index_module.component, className) },
+        React__default.default.createElement("div", { className: index_module.aspectRatioContainer },
+            React__default.default.createElement("div", { className: index_module.content, style: { backgroundColor: backgroundColor } },
+                React__default.default.createElement("div", { className: index_module.bankLogo }, bankLogo),
+                React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: index_module.input, labelClassName: index_module.label, filledClassName: index_module.filled, focusedClassName: index_module.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*', breakpoint: 1 }),
+                brandIcon && React__default.default.createElement("div", { className: index_module.brandLogo }, brandIcon)))));
 });
 BankCard.displayName = 'BankCard';
 
 exports.BankCard = BankCard;
+//# sourceMappingURL=Component.js.map

package/Component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    forwardRef,\n    MouseEvent,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useState,\n} from 'react';\nimport cn from 'classnames';\n\nimport { MaskedInput } from '@alfalab/core-components-masked-input';\nimport { CameraMIcon } from '@alfalab/icons-glyph/CameraMIcon';\nimport { AlfaBankSignMIcon } from '@alfalab/icons-logo/AlfaBankSignMIcon';\nimport { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';\nimport { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';\nimport { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';\n\nimport { getDefaultInputLabel } from './helpers/getDefaultInputLabel';\nimport { MaskTypeEnum } from './enums';\nimport { MaskType } from './types';\nimport { validateCardNumber } from './utils';\n\nimport styles from './index.module.css';\n\nexport type BankCardProps = {\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Цвет фона карты\n     */\n    backgroundColor?: string;\n\n    /**\n     * Иконка логотипа банка (размер L)\n     */\n    bankLogo?: ReactNode;\n\n    /**\n     * Лэйбл поля ввода\n     */\n    inputLabel?: string;\n\n    /**\n     * Значение поля ввода\n     */\n    value?: string;\n\n    /**\n     * Обработчик ввода\n     */\n    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: { value: string }) => void;\n\n    /**\n     * Обработчик вызова камеры\n     */\n    onUsePhoto?: (event: MouseEvent<HTMLButtonElement>) => void;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Тип вводимой маски. Позволяет устанавливать необходимый тип номера (номер карты или номер счёта)\n     * Если параметр не передавать - работает с обоими типами номеров\n     */\n    maskType?: MaskType;\n};\n\n// prettier-ignore\nconst cardMask = [/\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/];\n// prettier-ignore\nconst accountNumberMask = [/\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/];\n\nconst getBrandIcon = (value = '') => {\n    // Показываем логотип только после ввода всех цифр карты\n    if (value.replace(/\\s/g, '').length === 16 && validateCardNumber(value)) {\n        if (value.startsWith('2')) return <MirXxlIcon />;\n        if (value.startsWith('4')) return <VisaXxlIcon />;\n        if (value.startsWith('5')) return <MastercardLIcon />;\n        if (value.startsWith('6')) return <MastercardLIcon />;\n    }\n\n    return null;\n};\n\nexport const BankCard = forwardRef<HTMLInputElement, BankCardProps>(\n    (\n        {\n            bankLogo = <AlfaBankSignMIcon width={30} height={40} />,\n            backgroundColor = '#EF3124',\n            value,\n            className,\n            onUsePhoto,\n            onChange,\n            dataTestId,\n            maskType = MaskTypeEnum.Default,\n            inputLabel = getDefaultInputLabel(maskType),\n        },\n        ref,\n    ) => {\n        const uncontrolled = value === undefined;\n\n        const [brandIcon, setBrandIcon] = useState<ReactNode>(getBrandIcon(value));\n\n        const getMask = useCallback(\n            (newValue: string) => {\n                switch (maskType) {\n                    case MaskTypeEnum.Card:\n                        return cardMask;\n                    case MaskTypeEnum.AccountNumber:\n                        return accountNumberMask;\n                    case MaskTypeEnum.Default:\n                    default:\n                        return newValue.length <= cardMask.length ? cardMask : accountNumberMask;\n                }\n            },\n            [maskType],\n        );\n\n        const handleInputChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>, payload: { value: string }) => {\n                if (uncontrolled) {\n                    setBrandIcon(getBrandIcon(event.target.value));\n                }\n\n                if (onChange) {\n                    onChange(event, payload);\n                }\n            },\n            [onChange, uncontrolled],\n        );\n\n        const renderRightAddons = useCallback(\n            () => (\n                <button type='button' className={styles.usePhoto} onClick={onUsePhoto}>\n                    <CameraMIcon />\n                </button>\n            ),\n            [onUsePhoto],\n        );\n\n        useEffect(() => {\n            setBrandIcon(getBrandIcon(value));\n        }, [value]);\n\n        return (\n            <div className={cn(styles.component, className)}>\n                <div className={styles.aspectRatioContainer}>\n                    <div className={styles.content} style={{ backgroundColor }}>\n                        <div className={styles.bankLogo}>{bankLogo}</div>\n\n                        <MaskedInput\n                            ref={ref}\n                            value={value}\n                            mask={getMask}\n                            block={true}\n                            label={inputLabel}\n                            size='m'\n                            rightAddons={renderRightAddons()}\n                            inputClassName={styles.input}\n                            labelClassName={styles.label}\n                            filledClassName={styles.filled}\n                            focusedClassName={styles.focused}\n                            onChange={handleInputChange}\n                            dataTestId={dataTestId}\n                            inputMode='numeric'\n                            pattern='[0-9]*'\n                            breakpoint={1}\n                        />\n\n                        {brandIcon && <div className={styles.brandLogo}>{brandIcon}</div>}\n                    </div>\n                </div>\n            </div>\n        );\n    },\n);\n\nBankCard.displayName = 'BankCard';\n"],"names":["validateCardNumber","React","MirXxlIcon","VisaXxlIcon","MastercardLIcon","forwardRef","AlfaBankSignMIcon","MaskTypeEnum","getDefaultInputLabel","useState","useCallback","styles","CameraMIcon","useEffect","cn","MaskedInput"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAyEA;AACA,IAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;AAChI;AACA,IAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;AAEtK,IAAM,YAAY,GAAG,UAAC,KAAU,EAAA;AAAV,IAAA,IAAA,KAAA,KAAA,MAAA,EAAA,EAAA,KAAU,GAAA,EAAA,CAAA;;AAE5B,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,MAAM,KAAK,EAAE,IAAIA,wBAAkB,CAAC,KAAK,CAAC,EAAE;AACrE,QAAA,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;YAAE,OAAOC,sBAAA,CAAA,aAAA,CAACC,qBAAU,EAAA,IAAA,CAAG;AAChD,QAAA,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;YAAE,OAAOD,sBAAA,CAAA,aAAA,CAACE,uBAAW,EAAA,IAAA,CAAG;AACjD,QAAA,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;YAAE,OAAOF,sBAAA,CAAA,aAAA,CAACG,+BAAe,EAAA,IAAA,CAAG;AACrD,QAAA,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;YAAE,OAAOH,sBAAA,CAAA,aAAA,CAACG,+BAAe,EAAA,IAAA,CAAG;AACxD;AAED,IAAA,OAAO,IAAI;AACf,CAAC;IAEY,QAAQ,GAAGC,gBAAU,CAC9B,UACI,EAUC,EACD,GAAG,EAAA;QAVC,EAAuD,GAAA,EAAA,CAAA,QAAA,EAAvD,QAAQ,GAAA,EAAA,KAAA,MAAA,GAAGJ,sBAAC,CAAA,aAAA,CAAAK,mCAAiB,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAI,CAAA,GAAA,EAAA,EACvD,EAAA,GAAA,EAAA,CAAA,eAA2B,EAA3B,eAAe,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,GAAA,EAAA,EAC3B,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,SAAS,eAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAA+B,GAAA,EAAA,CAAA,QAAA,EAA/B,QAAQ,GAAA,EAAA,KAAA,MAAA,GAAGC,kBAAY,CAAC,OAAO,GAAA,EAAA,EAC/B,EAA2C,GAAA,EAAA,CAAA,UAAA,EAA3C,UAAU,GAAA,EAAA,KAAA,MAAA,GAAGC,yCAAoB,CAAC,QAAQ,CAAC,GAAA,EAAA;AAI/C,IAAA,IAAM,YAAY,GAAG,KAAK,KAAK,SAAS;AAElC,IAAA,IAAA,EAA4B,GAAAC,cAAQ,CAAY,YAAY,CAAC,KAAK,CAAC,CAAC,EAAnE,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,QAA4C;AAE1E,IAAA,IAAM,OAAO,GAAGC,iBAAW,CACvB,UAAC,QAAgB,EAAA;AACb,QAAA,QAAQ,QAAQ;YACZ,KAAKH,kBAAY,CAAC,IAAI;AAClB,gBAAA,OAAO,QAAQ;YACnB,KAAKA,kBAAY,CAAC,aAAa;AAC3B,gBAAA,OAAO,iBAAiB;YAC5B,KAAKA,kBAAY,CAAC,OAAO;AACzB,YAAA;AACI,gBAAA,OAAO,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM,GAAG,QAAQ,GAAG,iBAAiB;AAC/E;AACL,KAAC,EACD,CAAC,QAAQ,CAAC,CACb;AAED,IAAA,IAAM,iBAAiB,GAAGG,iBAAW,CACjC,UAAC,KAAoC,EAAE,OAA0B,EAAA;AAC7D,QAAA,IAAI,YAAY,EAAE;YACd,YAAY,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACjD;AAED,QAAA,IAAI,QAAQ,EAAE;AACV,YAAA,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;AAC3B;AACL,KAAC,EACD,CAAC,QAAQ,EAAE,YAAY,CAAC,CAC3B;IAED,IAAM,iBAAiB,GAAGA,iBAAW,CACjC,cAAM,QACFT,iDAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAEU,YAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAA;QACjEV,sBAAC,CAAA,aAAA,CAAAW,uBAAW,EAAG,IAAA,CAAA,CACV,EACZ,EAAA,EACD,CAAC,UAAU,CAAC,CACf;AAED,IAAAC,eAAS,CAAC,YAAA;AACN,QAAA,YAAY,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;AACrC,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACIZ,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEa,mBAAE,CAACH,YAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAAA;AAC3C,QAAAV,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEU,YAAM,CAAC,oBAAoB,EAAA;YACvCV,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEU,YAAM,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,eAAe,EAAA,eAAA,EAAE,EAAA;AACtD,gBAAAV,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEU,YAAM,CAAC,QAAQ,EAAA,EAAG,QAAQ,CAAO;AAEjD,gBAAAV,sBAAA,CAAA,aAAA,CAACc,qCAAW,EAAA,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,GAAG,EACR,WAAW,EAAE,iBAAiB,EAAE,EAChC,cAAc,EAAEJ,YAAM,CAAC,KAAK,EAC5B,cAAc,EAAEA,YAAM,CAAC,KAAK,EAC5B,eAAe,EAAEA,YAAM,CAAC,MAAM,EAC9B,gBAAgB,EAAEA,YAAM,CAAC,OAAO,EAChC,QAAQ,EAAE,iBAAiB,EAC3B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAC,SAAS,EACnB,OAAO,EAAC,QAAQ,EAChB,UAAU,EAAE,CAAC,EACf,CAAA;AAED,gBAAA,SAAS,IAAIV,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEU,YAAM,CAAC,SAAS,EAAG,EAAA,SAAS,CAAO,CAC/D,CACJ,CACJ;AAEd,CAAC;AAGL,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/cssm/Component.d.ts

@@ -1,8 +1,6 @@
-/// <reference types="react" />
-import React from 'react';
-import { ChangeEvent, MouseEvent, ReactNode } from "react";
-import { MaskType } from "./types";
-type BankCardProps = {
+import React, { ChangeEvent, MouseEvent, ReactNode } from 'react';
+import { MaskType } from './types';
+export declare type BankCardProps = {
     /**
      * Дополнительный класс
      */
@@ -43,5 +41,4 @@ type BankCardProps = {
      */
     maskType?: MaskType;
 };
-declare const BankCard: React.ForwardRefExoticComponent<BankCardProps & React.RefAttributes<HTMLInputElement>>;
-export { BankCardProps, BankCard };
+export declare const BankCard: React.ForwardRefExoticComponent<BankCardProps & React.RefAttributes<HTMLInputElement>>;

package/cssm/Component.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
-var coreComponentsMaskedInput = require('@alfalab/core-components-masked-input/cssm');
+var cssm = require('@alfalab/core-components-masked-input/cssm');
 var CameraMIcon = require('@alfalab/icons-glyph/CameraMIcon');
 var AlfaBankSignMIcon = require('@alfalab/icons-logo/AlfaBankSignMIcon');
 var MastercardLIcon = require('@alfalab/icons-logotype/MastercardLIcon');
 var MirXxlIcon = require('@alfalab/icons-logotype/MirXxlIcon');
 var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
-var helpers_getDefaultInputLabel = require('./helpers/getDefaultInputLabel.js');
+var getDefaultInputLabel = require('./helpers/getDefaultInputLabel.js');
 var enums = require('./enums.js');
 var utils = require('./utils.js');
 var styles = require('./index.module.css');
@@ -41,7 +41,7 @@ var getBrandIcon = function (value) {
     return null;
 };
 var BankCard = React.forwardRef(function (_a, ref) {
-    var _b = _a.bankLogo, bankLogo = _b === void 0 ? React__default.default.createElement(AlfaBankSignMIcon.AlfaBankSignMIcon, { width: 30, height: 40 }) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId, _d = _a.maskType, maskType = _d === void 0 ? enums.MaskTypeEnum.Default : _d, _e = _a.inputLabel, inputLabel = _e === void 0 ? helpers_getDefaultInputLabel.getDefaultInputLabel(maskType) : _e;
+    var _b = _a.bankLogo, bankLogo = _b === void 0 ? React__default.default.createElement(AlfaBankSignMIcon.AlfaBankSignMIcon, { width: 30, height: 40 }) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId, _d = _a.maskType, maskType = _d === void 0 ? enums.MaskTypeEnum.Default : _d, _e = _a.inputLabel, inputLabel = _e === void 0 ? getDefaultInputLabel.getDefaultInputLabel(maskType) : _e;
     var uncontrolled = value === undefined;
     var _f = React.useState(getBrandIcon(value)), brandIcon = _f[0], setBrandIcon = _f[1];
     var getMask = React.useCallback(function (newValue) {
@@ -72,9 +72,10 @@ var BankCard = React.forwardRef(function (_a, ref) {
         React__default.default.createElement("div", { className: styles__default.default.aspectRatioContainer },
             React__default.default.createElement("div", { className: styles__default.default.content, style: { backgroundColor: backgroundColor } },
                 React__default.default.createElement("div", { className: styles__default.default.bankLogo }, bankLogo),
-                React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles__default.default.input, labelClassName: styles__default.default.label, filledClassName: styles__default.default.filled, focusedClassName: styles__default.default.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*', breakpoint: 1 }),
+                React__default.default.createElement(cssm.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles__default.default.input, labelClassName: styles__default.default.label, filledClassName: styles__default.default.filled, focusedClassName: styles__default.default.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*', breakpoint: 1 }),
                 brandIcon && React__default.default.createElement("div", { className: styles__default.default.brandLogo }, brandIcon)))));
 });
 BankCard.displayName = 'BankCard';
 
 exports.BankCard = BankCard;
+//# sourceMappingURL=Component.js.map

package/cssm/Component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    forwardRef,\n    MouseEvent,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useState,\n} from 'react';\nimport cn from 'classnames';\n\nimport { MaskedInput } from '@alfalab/core-components-masked-input';\nimport { CameraMIcon } from '@alfalab/icons-glyph/CameraMIcon';\nimport { AlfaBankSignMIcon } from '@alfalab/icons-logo/AlfaBankSignMIcon';\nimport { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';\nimport { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';\nimport { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';\n\nimport { getDefaultInputLabel } from './helpers/getDefaultInputLabel';\nimport { MaskTypeEnum } from './enums';\nimport { MaskType } from './types';\nimport { validateCardNumber } from './utils';\n\nimport styles from './index.module.css';\n\nexport type BankCardProps = {\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Цвет фона карты\n     */\n    backgroundColor?: string;\n\n    /**\n     * Иконка логотипа банка (размер L)\n     */\n    bankLogo?: ReactNode;\n\n    /**\n     * Лэйбл поля ввода\n     */\n    inputLabel?: string;\n\n    /**\n     * Значение поля ввода\n     */\n    value?: string;\n\n    /**\n     * Обработчик ввода\n     */\n    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: { value: string }) => void;\n\n    /**\n     * Обработчик вызова камеры\n     */\n    onUsePhoto?: (event: MouseEvent<HTMLButtonElement>) => void;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Тип вводимой маски. Позволяет устанавливать необходимый тип номера (номер карты или номер счёта)\n     * Если параметр не передавать - работает с обоими типами номеров\n     */\n    maskType?: MaskType;\n};\n\n// prettier-ignore\nconst cardMask = [/\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/];\n// prettier-ignore\nconst accountNumberMask = [/\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/];\n\nconst getBrandIcon = (value = '') => {\n    // Показываем логотип только после ввода всех цифр карты\n    if (value.replace(/\\s/g, '').length === 16 && validateCardNumber(value)) {\n        if (value.startsWith('2')) return <MirXxlIcon />;\n        if (value.startsWith('4')) return <VisaXxlIcon />;\n        if (value.startsWith('5')) return <MastercardLIcon />;\n        if (value.startsWith('6')) return <MastercardLIcon />;\n    }\n\n    return null;\n};\n\nexport const BankCard = forwardRef<HTMLInputElement, BankCardProps>(\n    (\n        {\n            bankLogo = <AlfaBankSignMIcon width={30} height={40} />,\n            backgroundColor = '#EF3124',\n            value,\n            className,\n            onUsePhoto,\n            onChange,\n            dataTestId,\n            maskType = MaskTypeEnum.Default,\n            inputLabel = getDefaultInputLabel(maskType),\n        },\n        ref,\n    ) => {\n        const uncontrolled = value === undefined;\n\n        const [brandIcon, setBrandIcon] = useState<ReactNode>(getBrandIcon(value));\n\n        const getMask = useCallback(\n            (newValue: string) => {\n                switch (maskType) {\n                    case MaskTypeEnum.Card:\n                        return cardMask;\n                    case MaskTypeEnum.AccountNumber:\n                        return accountNumberMask;\n                    case MaskTypeEnum.Default:\n                    default:\n                        return newValue.length <= cardMask.length ? cardMask : accountNumberMask;\n                }\n            },\n            [maskType],\n        );\n\n        const handleInputChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>, payload: { value: string }) => {\n                if (uncontrolled) {\n                    setBrandIcon(getBrandIcon(event.target.value));\n                }\n\n                if (onChange) {\n                    onChange(event, payload);\n                }\n            },\n            [onChange, uncontrolled],\n        );\n\n        const renderRightAddons = useCallback(\n            () => (\n                <button type='button' className={styles.usePhoto} onClick={onUsePhoto}>\n                    <CameraMIcon />\n                </button>\n            ),\n            [onUsePhoto],\n        );\n\n        useEffect(() => {\n            setBrandIcon(getBrandIcon(value));\n        }, [value]);\n\n        return (\n            <div className={cn(styles.component, className)}>\n                <div className={styles.aspectRatioContainer}>\n                    <div className={styles.content} style={{ backgroundColor }}>\n                        <div className={styles.bankLogo}>{bankLogo}</div>\n\n                        <MaskedInput\n                            ref={ref}\n                            value={value}\n                            mask={getMask}\n                            block={true}\n                            label={inputLabel}\n                            size='m'\n                            rightAddons={renderRightAddons()}\n                            inputClassName={styles.input}\n                            labelClassName={styles.label}\n                            filledClassName={styles.filled}\n                            focusedClassName={styles.focused}\n                            onChange={handleInputChange}\n                            dataTestId={dataTestId}\n                            inputMode='numeric'\n                            pattern='[0-9]*'\n                            breakpoint={1}\n                        />\n\n                        {brandIcon && <div className={styles.brandLogo}>{brandIcon}</div>}\n                    </div>\n                </div>\n            </div>\n        );\n    },\n);\n\nBankCard.displayName = 'BankCard';\n"],"names":["validateCardNumber","React","MirXxlIcon","VisaXxlIcon","MastercardLIcon","forwardRef","AlfaBankSignMIcon","MaskTypeEnum","getDefaultInputLabel","useState","useCallback","styles","CameraMIcon","useEffect","cn","MaskedInput"],"mappings":"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"}

package/cssm/enums.d.ts

@@ -1,6 +1,5 @@
-declare enum MaskTypeEnum {
+export declare enum MaskTypeEnum {
     Card = "card",
     AccountNumber = "account-number",
     Default = "default"
 }
-export { MaskTypeEnum };

package/cssm/enums.js

@@ -8,3 +8,4 @@ exports.MaskTypeEnum = void 0;
     MaskTypeEnum["AccountNumber"] = "account-number";
     MaskTypeEnum["Default"] = "default";
 })(exports.MaskTypeEnum || (exports.MaskTypeEnum = {}));
+//# sourceMappingURL=enums.js.map

package/cssm/enums.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enums.js","sources":["../src/enums.ts"],"sourcesContent":["export enum MaskTypeEnum {\n    Card = 'card',\n    AccountNumber = 'account-number',\n    Default = 'default',\n}\n"],"names":["MaskTypeEnum"],"mappings":";;;;AAAYA;AAAZ,CAAA,UAAY,YAAY,EAAA;AACpB,IAAA,YAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,YAAA,CAAA,eAAA,CAAA,GAAA,gBAAgC;AAChC,IAAA,YAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACvB,CAAC,EAJWA,oBAAY,KAAZA,oBAAY,GAIvB,EAAA,CAAA,CAAA;;"}

package/cssm/helpers/getDefaultInputLabel.d.ts

@@ -1,3 +1,2 @@
-import { MaskType } from "../types";
-declare const getDefaultInputLabel: (maskType: MaskType) => "Номер карты" | "Номер счёта" | "Номер карты или счёта";
-export { getDefaultInputLabel };
+import { MaskType } from '../types';
+export declare const getDefaultInputLabel: (maskType: MaskType) => "Номер карты" | "Номер счёта" | "Номер карты или счёта";

package/cssm/helpers/getDefaultInputLabel.js

@@ -17,3 +17,4 @@ var getDefaultInputLabel = function (maskType) {
 };
 
 exports.getDefaultInputLabel = getDefaultInputLabel;
+//# sourceMappingURL=getDefaultInputLabel.js.map

package/cssm/helpers/getDefaultInputLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDefaultInputLabel.js","sources":["../../src/helpers/getDefaultInputLabel.tsx"],"sourcesContent":["import { MaskTypeEnum } from '../enums';\nimport { MaskType } from '../types';\n\nexport const getDefaultInputLabel = (maskType: MaskType) => {\n    switch (maskType) {\n        case MaskTypeEnum.Card:\n            return 'Номер карты';\n        case MaskTypeEnum.AccountNumber:\n            return 'Номер счёта';\n        case MaskTypeEnum.Default:\n        default:\n            return 'Номер карты или счёта';\n    }\n};\n"],"names":["MaskTypeEnum"],"mappings":";;;;;;AAGO,IAAM,oBAAoB,GAAG,UAAC,QAAkB,EAAA;AACnD,IAAA,QAAQ,QAAQ;QACZ,KAAKA,kBAAY,CAAC,IAAI;AAClB,YAAA,OAAO,aAAa;QACxB,KAAKA,kBAAY,CAAC,aAAa;AAC3B,YAAA,OAAO,aAAa;QACxB,KAAKA,kBAAY,CAAC,OAAO;AACzB,QAAA;AACI,YAAA,OAAO,uBAAuB;AACrC;AACL;;;;"}

package/cssm/index.d.ts

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

package/cssm/index.js

@@ -7,3 +7,4 @@ var Component = require('./Component.js');
 
 
 exports.BankCard = Component.BankCard;
+//# sourceMappingURL=index.js.map

package/cssm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/cssm/index.module.css

@@ -1,31 +1,14 @@
-: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 {
+:root {
     --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
-    --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-} :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 */ /* 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 { /* 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 */
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55);
 } :root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-} :root { /* deprecated */ /* deprecated */ /* deprecated */
-    --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-
-    /* новые значения, используйте их */
+    --border-radius-l: 12px;
     --border-radius-12: var(--border-radius-l);
-} :root { /* deprecated */
-    --gap-2xs: 4px; /* deprecated */ /* deprecated */
-    --gap-s: 12px; /* deprecated */ /* deprecated */
-    --gap-m: 16px; /* deprecated */
-    --gap-l: 20px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-
-    /* новые значения, используйте их */
-
-    /* no-unit может приводить к проблемам в calc (#1559) */
-    /* stylelint-disable-next-line length-zero-no-unit */
+} :root {
+    --gap-2xs: 4px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+    --gap-l: 20px;
     --gap-0: 0px;
     --gap-4: var(--gap-2xs);
     --gap-12: var(--gap-s);
@@ -34,18 +17,12 @@
 } :root {
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
-} /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
-} /* сбрасывает синюю подсветку при нажатии */ .component {
-    /* TODO: как это будет собираться и работать в webView */
+} .component {
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
     --form-control-bg-color: transparent;
-
-    /* focus */
     --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-translucent-1300);
     --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);
@@ -55,7 +32,6 @@
 
     font-family: var(--font-family-styrene);
 } .aspectRatioContainer {
-    /* Эталонный размер 343x216 */
     padding-bottom: 63%;
 } .content {
     position: absolute;
@@ -97,8 +73,6 @@
 
     color: var(--color-light-neutral-translucent-1300);
     caret-color: var(--color-light-neutral-translucent-1300);
-
-    /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: var(--gap-0) !important;
     padding-bottom: var(--gap-4) !important
 } @media (max-width: 360px) { .input {
@@ -128,13 +102,12 @@
     border: 0;
     box-shadow: none;
     -webkit-user-select: none;
+       -moz-user-select: none;
             user-select: none;
     cursor: pointer;
     outline: none;
     margin-bottom: var(--gap-4);
     align-self: flex-end;
-
-    /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-12) * -1)
 } .usePhoto svg {
         fill: var(--color-light-neutral-translucent-1300);

package/cssm/types.d.ts

@@ -1,2 +1 @@
-type MaskType = 'default' | 'card' | 'account-number';
-export { MaskType };
+export declare type MaskType = 'default' | 'card' | 'account-number';

package/cssm/types.js

@@ -1,2 +1,3 @@
 'use strict';
 
+//# sourceMappingURL=types.js.map

package/cssm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/cssm/utils.d.ts

@@ -4,5 +4,4 @@
  * @param cardNumber - номер карты
  *
  */
-declare function validateCardNumber(cardNumber: string): boolean;
-export { validateCardNumber };
+export declare function validateCardNumber(cardNumber: string): boolean;

package/cssm/utils.js

@@ -27,3 +27,4 @@ function validateCardNumber(cardNumber) {
 }
 
 exports.validateCardNumber = validateCardNumber;
+//# sourceMappingURL=utils.js.map

package/cssm/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["/**\n * Проверяет номер карты по алгоритму Луна\n *\n * @param cardNumber - номер карты\n *\n */\nexport function validateCardNumber(cardNumber: string) {\n    const digits = cardNumber.replace(/\\s+/g, '');\n    let sum = 0;\n\n    for (let i = 0; i < digits.length; i++) {\n        let cardNum = parseInt(digits[i], 10);\n\n        if (cardNum > 9) return false;\n\n        if ((digits.length - i) % 2 === 0) {\n            cardNum *= 2;\n\n            if (cardNum > 9) {\n                cardNum -= 9;\n            }\n        }\n\n        sum += cardNum;\n    }\n\n    return sum % 10 === 0;\n}\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AACG,SAAU,kBAAkB,CAAC,UAAkB,EAAA;IACjD,IAAM,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC;IAC7C,IAAI,GAAG,GAAG,CAAC;AAEX,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACpC,IAAI,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QAErC,IAAI,OAAO,GAAG,CAAC;AAAE,YAAA,OAAO,KAAK;QAE7B,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC/B,OAAO,IAAI,CAAC;YAEZ,IAAI,OAAO,GAAG,CAAC,EAAE;gBACb,OAAO,IAAI,CAAC;AACf;AACJ;QAED,GAAG,IAAI,OAAO;AACjB;AAED,IAAA,OAAO,GAAG,GAAG,EAAE,KAAK,CAAC;AACzB;;;;"}

package/enums.d.ts

@@ -1,6 +1,5 @@
-declare enum MaskTypeEnum {
+export declare enum MaskTypeEnum {
     Card = "card",
     AccountNumber = "account-number",
     Default = "default"
 }
-export { MaskTypeEnum };

package/enums.js

@@ -8,3 +8,4 @@ exports.MaskTypeEnum = void 0;
     MaskTypeEnum["AccountNumber"] = "account-number";
     MaskTypeEnum["Default"] = "default";
 })(exports.MaskTypeEnum || (exports.MaskTypeEnum = {}));
+//# sourceMappingURL=enums.js.map

package/enums.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enums.js","sources":["src/enums.ts"],"sourcesContent":["export enum MaskTypeEnum {\n    Card = 'card',\n    AccountNumber = 'account-number',\n    Default = 'default',\n}\n"],"names":["MaskTypeEnum"],"mappings":";;;;AAAYA;AAAZ,CAAA,UAAY,YAAY,EAAA;AACpB,IAAA,YAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,YAAA,CAAA,eAAA,CAAA,GAAA,gBAAgC;AAChC,IAAA,YAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACvB,CAAC,EAJWA,oBAAY,KAAZA,oBAAY,GAIvB,EAAA,CAAA,CAAA;;"}

package/esm/Component.d.ts

@@ -1,8 +1,6 @@
-/// <reference types="react" />
-import React from 'react';
-import { ChangeEvent, MouseEvent, ReactNode } from "react";
-import { MaskType } from "./types";
-type BankCardProps = {
+import React, { ChangeEvent, MouseEvent, ReactNode } from 'react';
+import { MaskType } from './types';
+export declare type BankCardProps = {
     /**
      * Дополнительный класс
      */
@@ -43,5 +41,4 @@ type BankCardProps = {
      */
     maskType?: MaskType;
 };
-declare const BankCard: React.ForwardRefExoticComponent<BankCardProps & React.RefAttributes<HTMLInputElement>>;
-export { BankCardProps, BankCard };
+export declare const BankCard: React.ForwardRefExoticComponent<BankCardProps & React.RefAttributes<HTMLInputElement>>;

package/esm/Component.js

@@ -9,9 +9,7 @@ import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
 import { getDefaultInputLabel } from './helpers/getDefaultInputLabel.js';
 import { MaskTypeEnum } from './enums.js';
 import { validateCardNumber } from './utils.js';
-
-var styles = {"component":"bank-card__component_rieqn","aspectRatioContainer":"bank-card__aspectRatioContainer_rieqn","content":"bank-card__content_rieqn","label":"bank-card__label_rieqn","focused":"bank-card__focused_rieqn","filled":"bank-card__filled_rieqn","input":"bank-card__input_rieqn","bankLogo":"bank-card__bankLogo_rieqn","brandLogo":"bank-card__brandLogo_rieqn","usePhoto":"bank-card__usePhoto_rieqn"};
-require('./index.css')
+import styles from './index.module.css.js';
 
 // prettier-ignore
 var cardMask = [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/];
@@ -70,3 +68,4 @@ var BankCard = forwardRef(function (_a, ref) {
 BankCard.displayName = 'BankCard';
 
 export { BankCard };
+//# sourceMappingURL=Component.js.map

package/esm/Component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    forwardRef,\n    MouseEvent,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useState,\n} from 'react';\nimport cn from 'classnames';\n\nimport { MaskedInput } from '@alfalab/core-components-masked-input';\nimport { CameraMIcon } from '@alfalab/icons-glyph/CameraMIcon';\nimport { AlfaBankSignMIcon } from '@alfalab/icons-logo/AlfaBankSignMIcon';\nimport { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';\nimport { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';\nimport { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';\n\nimport { getDefaultInputLabel } from './helpers/getDefaultInputLabel';\nimport { MaskTypeEnum } from './enums';\nimport { MaskType } from './types';\nimport { validateCardNumber } from './utils';\n\nimport styles from './index.module.css';\n\nexport type BankCardProps = {\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Цвет фона карты\n     */\n    backgroundColor?: string;\n\n    /**\n     * Иконка логотипа банка (размер L)\n     */\n    bankLogo?: ReactNode;\n\n    /**\n     * Лэйбл поля ввода\n     */\n    inputLabel?: string;\n\n    /**\n     * Значение поля ввода\n     */\n    value?: string;\n\n    /**\n     * Обработчик ввода\n     */\n    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: { value: string }) => void;\n\n    /**\n     * Обработчик вызова камеры\n     */\n    onUsePhoto?: (event: MouseEvent<HTMLButtonElement>) => void;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Тип вводимой маски. Позволяет устанавливать необходимый тип номера (номер карты или номер счёта)\n     * Если параметр не передавать - работает с обоими типами номеров\n     */\n    maskType?: MaskType;\n};\n\n// prettier-ignore\nconst cardMask = [/\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/];\n// prettier-ignore\nconst accountNumberMask = [/\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, /\\d/];\n\nconst getBrandIcon = (value = '') => {\n    // Показываем логотип только после ввода всех цифр карты\n    if (value.replace(/\\s/g, '').length === 16 && validateCardNumber(value)) {\n        if (value.startsWith('2')) return <MirXxlIcon />;\n        if (value.startsWith('4')) return <VisaXxlIcon />;\n        if (value.startsWith('5')) return <MastercardLIcon />;\n        if (value.startsWith('6')) return <MastercardLIcon />;\n    }\n\n    return null;\n};\n\nexport const BankCard = forwardRef<HTMLInputElement, BankCardProps>(\n    (\n        {\n            bankLogo = <AlfaBankSignMIcon width={30} height={40} />,\n            backgroundColor = '#EF3124',\n            value,\n            className,\n            onUsePhoto,\n            onChange,\n            dataTestId,\n            maskType = MaskTypeEnum.Default,\n            inputLabel = getDefaultInputLabel(maskType),\n        },\n        ref,\n    ) => {\n        const uncontrolled = value === undefined;\n\n        const [brandIcon, setBrandIcon] = useState<ReactNode>(getBrandIcon(value));\n\n        const getMask = useCallback(\n            (newValue: string) => {\n                switch (maskType) {\n                    case MaskTypeEnum.Card:\n                        return cardMask;\n                    case MaskTypeEnum.AccountNumber:\n                        return accountNumberMask;\n                    case MaskTypeEnum.Default:\n                    default:\n                        return newValue.length <= cardMask.length ? cardMask : accountNumberMask;\n                }\n            },\n            [maskType],\n        );\n\n        const handleInputChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>, payload: { value: string }) => {\n                if (uncontrolled) {\n                    setBrandIcon(getBrandIcon(event.target.value));\n                }\n\n                if (onChange) {\n                    onChange(event, payload);\n                }\n            },\n            [onChange, uncontrolled],\n        );\n\n        const renderRightAddons = useCallback(\n            () => (\n                <button type='button' className={styles.usePhoto} onClick={onUsePhoto}>\n                    <CameraMIcon />\n                </button>\n            ),\n            [onUsePhoto],\n        );\n\n        useEffect(() => {\n            setBrandIcon(getBrandIcon(value));\n        }, [value]);\n\n        return (\n            <div className={cn(styles.component, className)}>\n                <div className={styles.aspectRatioContainer}>\n                    <div className={styles.content} style={{ backgroundColor }}>\n                        <div className={styles.bankLogo}>{bankLogo}</div>\n\n                        <MaskedInput\n                            ref={ref}\n                            value={value}\n                            mask={getMask}\n                            block={true}\n                            label={inputLabel}\n                            size='m'\n                            rightAddons={renderRightAddons()}\n                            inputClassName={styles.input}\n                            labelClassName={styles.label}\n                            filledClassName={styles.filled}\n                            focusedClassName={styles.focused}\n                            onChange={handleInputChange}\n                            dataTestId={dataTestId}\n                            inputMode='numeric'\n                            pattern='[0-9]*'\n                            breakpoint={1}\n                        />\n\n                        {brandIcon && <div className={styles.brandLogo}>{brandIcon}</div>}\n                    </div>\n                </div>\n            </div>\n        );\n    },\n);\n\nBankCard.displayName = 'BankCard';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAyEA;AACA,IAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;AAChI;AACA,IAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;AAEtK,IAAM,YAAY,GAAG,UAAC,KAAU,EAAA;AAAV,IAAA,IAAA,KAAA,KAAA,MAAA,EAAA,EAAA,KAAU,GAAA,EAAA,CAAA;;AAE5B,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,kBAAkB,CAAC,KAAK,CAAC,EAAE;AACrE,QAAA,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;YAAE,OAAO,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA,CAAG;AAChD,QAAA,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;YAAE,OAAO,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,CAAG;AACjD,QAAA,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;YAAE,OAAO,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,CAAG;AACrD,QAAA,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;YAAE,OAAO,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,CAAG;AACxD;AAED,IAAA,OAAO,IAAI;AACf,CAAC;IAEY,QAAQ,GAAG,UAAU,CAC9B,UACI,EAUC,EACD,GAAG,EAAA;QAVC,EAAuD,GAAA,EAAA,CAAA,QAAA,EAAvD,QAAQ,GAAA,EAAA,KAAA,MAAA,GAAG,KAAC,CAAA,aAAA,CAAA,iBAAiB,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAI,CAAA,GAAA,EAAA,EACvD,EAAA,GAAA,EAAA,CAAA,eAA2B,EAA3B,eAAe,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,GAAA,EAAA,EAC3B,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,SAAS,eAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAA+B,GAAA,EAAA,CAAA,QAAA,EAA/B,QAAQ,GAAA,EAAA,KAAA,MAAA,GAAG,YAAY,CAAC,OAAO,GAAA,EAAA,EAC/B,EAA2C,GAAA,EAAA,CAAA,UAAA,EAA3C,UAAU,GAAA,EAAA,KAAA,MAAA,GAAG,oBAAoB,CAAC,QAAQ,CAAC,GAAA,EAAA;AAI/C,IAAA,IAAM,YAAY,GAAG,KAAK,KAAK,SAAS;AAElC,IAAA,IAAA,EAA4B,GAAA,QAAQ,CAAY,YAAY,CAAC,KAAK,CAAC,CAAC,EAAnE,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,QAA4C;AAE1E,IAAA,IAAM,OAAO,GAAG,WAAW,CACvB,UAAC,QAAgB,EAAA;AACb,QAAA,QAAQ,QAAQ;YACZ,KAAK,YAAY,CAAC,IAAI;AAClB,gBAAA,OAAO,QAAQ;YACnB,KAAK,YAAY,CAAC,aAAa;AAC3B,gBAAA,OAAO,iBAAiB;YAC5B,KAAK,YAAY,CAAC,OAAO;AACzB,YAAA;AACI,gBAAA,OAAO,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM,GAAG,QAAQ,GAAG,iBAAiB;AAC/E;AACL,KAAC,EACD,CAAC,QAAQ,CAAC,CACb;AAED,IAAA,IAAM,iBAAiB,GAAG,WAAW,CACjC,UAAC,KAAoC,EAAE,OAA0B,EAAA;AAC7D,QAAA,IAAI,YAAY,EAAE;YACd,YAAY,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACjD;AAED,QAAA,IAAI,QAAQ,EAAE;AACV,YAAA,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;AAC3B;AACL,KAAC,EACD,CAAC,QAAQ,EAAE,YAAY,CAAC,CAC3B;IAED,IAAM,iBAAiB,GAAG,WAAW,CACjC,cAAM,QACF,gCAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAA;QACjE,KAAC,CAAA,aAAA,CAAA,WAAW,EAAG,IAAA,CAAA,CACV,EACZ,EAAA,EACD,CAAC,UAAU,CAAC,CACf;AAED,IAAA,SAAS,CAAC,YAAA;AACN,QAAA,YAAY,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;AACrC,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAAA;AAC3C,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,EAAA;YACvC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,eAAe,EAAA,eAAA,EAAE,EAAA;AACtD,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA,EAAG,QAAQ,CAAO;AAEjD,gBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,GAAG,EACR,WAAW,EAAE,iBAAiB,EAAE,EAChC,cAAc,EAAE,MAAM,CAAC,KAAK,EAC5B,cAAc,EAAE,MAAM,CAAC,KAAK,EAC5B,eAAe,EAAE,MAAM,CAAC,MAAM,EAC9B,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAChC,QAAQ,EAAE,iBAAiB,EAC3B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAC,SAAS,EACnB,OAAO,EAAC,QAAQ,EAChB,UAAU,EAAE,CAAC,EACf,CAAA;AAED,gBAAA,SAAS,IAAI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAG,EAAA,SAAS,CAAO,CAC/D,CACJ,CACJ;AAEd,CAAC;AAGL,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/esm/enums.d.ts

@@ -1,6 +1,5 @@
-declare enum MaskTypeEnum {
+export declare enum MaskTypeEnum {
     Card = "card",
     AccountNumber = "account-number",
     Default = "default"
 }
-export { MaskTypeEnum };

package/esm/enums.js

@@ -6,3 +6,4 @@ var MaskTypeEnum;
 })(MaskTypeEnum || (MaskTypeEnum = {}));
 
 export { MaskTypeEnum };
+//# sourceMappingURL=enums.js.map

package/esm/enums.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enums.js","sources":["../src/enums.ts"],"sourcesContent":["export enum MaskTypeEnum {\n    Card = 'card',\n    AccountNumber = 'account-number',\n    Default = 'default',\n}\n"],"names":[],"mappings":"IAAY;AAAZ,CAAA,UAAY,YAAY,EAAA;AACpB,IAAA,YAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,YAAA,CAAA,eAAA,CAAA,GAAA,gBAAgC;AAChC,IAAA,YAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACvB,CAAC,EAJW,YAAY,KAAZ,YAAY,GAIvB,EAAA,CAAA,CAAA;;;;"}

package/esm/helpers/getDefaultInputLabel.d.ts

@@ -1,3 +1,2 @@
-import { MaskType } from "../types";
-declare const getDefaultInputLabel: (maskType: MaskType) => "Номер карты" | "Номер счёта" | "Номер карты или счёта";
-export { getDefaultInputLabel };
+import { MaskType } from '../types';
+export declare const getDefaultInputLabel: (maskType: MaskType) => "Номер карты" | "Номер счёта" | "Номер карты или счёта";

package/esm/helpers/getDefaultInputLabel.js

@@ -13,3 +13,4 @@ var getDefaultInputLabel = function (maskType) {
 };
 
 export { getDefaultInputLabel };
+//# sourceMappingURL=getDefaultInputLabel.js.map

package/esm/helpers/getDefaultInputLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDefaultInputLabel.js","sources":["../../src/helpers/getDefaultInputLabel.tsx"],"sourcesContent":["import { MaskTypeEnum } from '../enums';\nimport { MaskType } from '../types';\n\nexport const getDefaultInputLabel = (maskType: MaskType) => {\n    switch (maskType) {\n        case MaskTypeEnum.Card:\n            return 'Номер карты';\n        case MaskTypeEnum.AccountNumber:\n            return 'Номер счёта';\n        case MaskTypeEnum.Default:\n        default:\n            return 'Номер карты или счёта';\n    }\n};\n"],"names":[],"mappings":";;AAGO,IAAM,oBAAoB,GAAG,UAAC,QAAkB,EAAA;AACnD,IAAA,QAAQ,QAAQ;QACZ,KAAK,YAAY,CAAC,IAAI;AAClB,YAAA,OAAO,aAAa;QACxB,KAAK,YAAY,CAAC,aAAa;AAC3B,YAAA,OAAO,aAAa;QACxB,KAAK,YAAY,CAAC,OAAO;AACzB,QAAA;AACI,YAAA,OAAO,uBAAuB;AACrC;AACL;;;;"}