@alfalab/core-components 45.9.0-beta.3 → 45.10.0

package/product-cover/esm/components/text/index.js

@@ -0,0 +1,10 @@
+export { Text } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../../../button/esm/desktop';
+import '../../../../shared/esm';
+import '../../../../typography/esm';
+import '@alfalab/icons-glyph/EyeMIcon';
+import '@alfalab/utils';
+import '../../consts.js';
+import '../../utils/index.js';

package/product-cover/esm/consts.d.ts

@@ -0,0 +1,5 @@
+import { TextProps } from "../../typography";
+declare const WIDTH_TO_SIZE: Record<number, number>;
+declare const TYPOGRAPHY_VIEW_FOR_SIZE: Record<number, TextProps['view']>;
+declare const SECOND_CARD_SIZE: Record<number, number>;
+export { WIDTH_TO_SIZE, TYPOGRAPHY_VIEW_FOR_SIZE, SECOND_CARD_SIZE };

package/product-cover/esm/consts.js

@@ -0,0 +1,26 @@
+var WIDTH_TO_SIZE = {
+    16: 24,
+    32: 51,
+    40: 65,
+    48: 76,
+    96: 152,
+    128: 205,
+    164: 264,
+};
+var TYPOGRAPHY_VIEW_FOR_SIZE = {
+    16: 'secondary-small',
+    32: 'secondary-small',
+    40: 'secondary-medium',
+    48: 'secondary-medium',
+    96: 'secondary-medium',
+    128: 'primary-small',
+    164: 'primary-medium',
+};
+var SECOND_CARD_SIZE = {
+    16: 16,
+    32: 32,
+    40: 40,
+    128: 96,
+};
+
+export { SECOND_CARD_SIZE, TYPOGRAPHY_VIEW_FOR_SIZE, WIDTH_TO_SIZE };

package/product-cover/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export type { SingleProps, StackProps } from "./typings";

package/product-cover/esm/index.js

@@ -0,0 +1,17 @@
+export { ProductCover, Single } from './Component.js';
+import 'tslib';
+import 'react';
+import './single/Component.js';
+import 'classnames';
+import '../../shared/esm';
+import './components/overlay/Component.js';
+import './components/text/Component.js';
+import '../../button/esm/desktop';
+import '../../typography/esm';
+import '@alfalab/icons-glyph/EyeMIcon';
+import '@alfalab/utils';
+import './consts.js';
+import './utils/index.js';
+import './components/image-card/Component.js';
+import '@alfalab/hooks';
+import './stack/Component.js';

package/product-cover/esm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getProductCoverSingleTestIds, getProductCoverStackTestIds } from "../utils/index";

package/product-cover/esm/shared/index.js

@@ -0,0 +1,3 @@
+export { getProductCoverSingleTestIds, getProductCoverStackTestIds } from '../utils/index.js';
+import '../../../shared/esm';
+import '../consts.js';

package/product-cover/esm/single/Component.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SingleCommonProps } from "../typings";
+declare const Single: FC<SingleCommonProps>;
+export { Single };

package/product-cover/esm/single/Component.js

@@ -0,0 +1,37 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '../../../shared/esm';
+import { Overlay } from '../components/overlay/Component.js';
+import { Text } from '../components/text/Component.js';
+import { ImageCard } from '../components/image-card/Component.js';
+import { WIDTH_TO_SIZE } from '../consts.js';
+import '../../../button/esm/desktop';
+import '../../../typography/esm';
+import '@alfalab/icons-glyph/EyeMIcon';
+import '@alfalab/utils';
+import '../utils/index.js';
+import '@alfalab/hooks';
+
+var styles = {"component":"product-cover__component_6zdwr","size-164":"product-cover__size-164_6zdwr","size-128":"product-cover__size-128_6zdwr","size-96":"product-cover__size-96_6zdwr","size-48":"product-cover__size-48_6zdwr","size-40":"product-cover__size-40_6zdwr","size-32":"product-cover__size-32_6zdwr","size-16":"product-cover__size-16_6zdwr","icon":"product-cover__icon_6zdwr","border":"product-cover__border_6zdwr","contentAddons":"product-cover__contentAddons_6zdwr"};
+require('./index.css');
+
+var Single = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 164 : _b, Icon = _a.icon, cardId = _a.cardId, layers = _a.layers, baseUrl = _a.baseUrl, shadow = _a.shadow, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, _c = _a.overlayProps, overlayProps = _c === void 0 ? { colors: 'default', visible: false } : _c, eyeButton = _a.eyeButton, cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, numberOfСards = _a.numberOfСards, align = _a.align, cardNumber = _a.cardNumber, className = _a.className, contentAddons = _a.contentAddons, contentAddonsProps = _a.contentAddonsProps, onEyeIconClick = _a.onEyeIconClick, dataTestId = _a.dataTestId;
+    var hasContent = Boolean(cardNumber || cardholderName || numberOfСards);
+    var showContent = hasContent && size !== 16 && !contentAddons;
+    return (React.createElement("div", { className: cn(styles.component, styles["size-".concat(size)], className), style: {
+            width: WIDTH_TO_SIZE[size],
+            height: size,
+            boxShadow: shadow,
+            backgroundColor: backgroundColor,
+        }, "data-test-id": dataTestId },
+        Icon && React.createElement(Icon, { color: iconColor, className: styles.icon }),
+        React.createElement(Overlay, { colors: overlayProps.colors, visible: overlayProps.visible }),
+        borderColor && (React.createElement("div", { className: cn(styles.border), style: { boxShadow: "inset 0 0 0 1px ".concat(borderColor) } })),
+        React.createElement(ImageCard, { width: WIDTH_TO_SIZE[size], height: size, cardId: cardId, layers: layers, baseUrl: baseUrl, "numberOf\u0421ards": numberOfСards }),
+        showContent && (React.createElement(Text, { cardNumber: cardNumber, eyeButton: eyeButton, cardholderNameUppercase: cardholderNameUppercase, cardholderName: cardholderName, "numberOf\u0421ards": numberOfСards, align: align, size: size, onEyeIconClick: onEyeIconClick, dataTestId: getDataTestId(dataTestId, 'user-info') })),
+        contentAddons && (React.createElement("div", __assign({}, contentAddonsProps, { className: cn(styles.contentAddons, contentAddonsProps === null || contentAddonsProps === void 0 ? void 0 : contentAddonsProps.className) }), contentAddons))));
+};
+
+export { Single };

package/product-cover/esm/single/index.css

@@ -0,0 +1,72 @@
+/* hash: 7n3ug */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-graphic-tertiary: #b8b9c0; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+    --border-radius-xs: 2px;
+    --border-radius-s: 4px;
+    --border-radius-l: 12px;
+    --border-radius-xl: 16px;
+    --border-radius-xxl: 20px;
+} :root {
+    --gap-3xs: 2px;
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+} :root {
+} :root {
+} .product-cover__component_6zdwr {
+    display: flex;
+    align-items: end;
+    position: relative;
+    background-color: var(--color-light-graphic-tertiary);
+    box-sizing: border-box
+} .product-cover__component_6zdwr.product-cover__size-164_6zdwr {
+        border-radius: var(--border-radius-xxl);
+        padding: var(--gap-s) var(--gap-m);
+    } .product-cover__component_6zdwr.product-cover__size-128_6zdwr {
+        border-radius: var(--border-radius-xl);
+        padding: var(--gap-xs) var(--gap-s);
+    } .product-cover__component_6zdwr.product-cover__size-96_6zdwr {
+        border-radius: var(--border-radius-l);
+        padding: 6px var(--gap-s);
+    } .product-cover__component_6zdwr.product-cover__size-48_6zdwr,
+    .product-cover__component_6zdwr.product-cover__size-40_6zdwr {
+        border-radius: 6px;
+        padding: var(--gap-3xs) var(--gap-2xs);
+    } .product-cover__component_6zdwr.product-cover__size-32_6zdwr {
+        border-radius: var(--border-radius-s);
+        padding: 0 var(--gap-3xs);
+    } .product-cover__component_6zdwr.product-cover__size-16_6zdwr {
+        border-radius: var(--border-radius-xs);
+    } .product-cover__icon_6zdwr {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 4;
+} .product-cover__border_6zdwr {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    z-index: 3;
+} .product-cover__contentAddons_6zdwr {
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    overflow: hidden;
+}

package/product-cover/esm/single/index.d.ts

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

package/product-cover/esm/single/index.js

@@ -0,0 +1,15 @@
+export { Single } from './Component.js';
+import 'tslib';
+import 'react';
+import 'classnames';
+import '../../../shared/esm';
+import '../components/overlay/Component.js';
+import '../components/text/Component.js';
+import '../../../button/esm/desktop';
+import '../../../typography/esm';
+import '@alfalab/icons-glyph/EyeMIcon';
+import '@alfalab/utils';
+import '../consts.js';
+import '../utils/index.js';
+import '../components/image-card/Component.js';
+import '@alfalab/hooks';

package/product-cover/esm/stack/Component.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { StackProps } from "../typings";
+declare const Stack: FC<StackProps>;
+export { Stack };

package/product-cover/esm/stack/Component.js

@@ -0,0 +1,35 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '../../../shared/esm';
+import { Single } from '../single/Component.js';
+import { getSizeSecondCard } from '../utils/index.js';
+import '../components/overlay/Component.js';
+import '../components/text/Component.js';
+import '../../../button/esm/desktop';
+import '../../../typography/esm';
+import '@alfalab/icons-glyph/EyeMIcon';
+import '@alfalab/utils';
+import '../consts.js';
+import '../components/image-card/Component.js';
+import '@alfalab/hooks';
+
+var styles = {"wrapper":"product-cover__wrapper_pkwq0","size-128":"product-cover__size-128_pkwq0","size-40":"product-cover__size-40_pkwq0","size-32":"product-cover__size-32_pkwq0","size-16":"product-cover__size-16_pkwq0","bottom":"product-cover__bottom_pkwq0","componentImage":"product-cover__componentImage_pkwq0","componentStack":"product-cover__componentStack_pkwq0","firstCard":"product-cover__firstCard_pkwq0","wrapperSecondCard":"product-cover__wrapperSecondCard_pkwq0"};
+require('./index.css');
+
+var Stack = function (_a) {
+    var _b;
+    var firstCard = _a.firstCard, secondCard = _a.secondCard, _c = _a.size, size = _c === void 0 ? 128 : _c, numberOfСards = _a.numberOfСards, className = _a.className, _d = _a.align, align = _d === void 0 ? 'default' : _d, dataTestId = _a.dataTestId;
+    var sizeClassNames = "size-".concat(size);
+    var secondCardSize = getSizeSecondCard(size, align);
+    var commonClassName = (_b = {},
+        _b[styles[sizeClassNames]] = true,
+        _b[styles[align]] = Boolean(styles[align]),
+        _b);
+    return (React.createElement("div", { className: cn(styles.wrapper, styles.componentStack, commonClassName, className), "data-test-id": dataTestId },
+        React.createElement(Single, __assign({}, firstCard, { className: cn(styles.firstCard, commonClassName), size: size, dataTestId: getDataTestId(dataTestId, 'first-card') })),
+        React.createElement("div", { className: cn(styles.wrapperSecondCard, commonClassName) },
+            React.createElement(Single, __assign({}, secondCard, { size: secondCardSize, align: align, "numberOf\u0421ards": numberOfСards, dataTestId: getDataTestId(dataTestId, 'second-card') })))));
+};
+
+export { Stack };

package/product-cover/esm/stack/index.css

@@ -0,0 +1,69 @@
+/* hash: 1s8sj */
+: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 { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+    --gap-l-neg: -20px;
+} :root {
+} :root {
+} .product-cover__wrapper_pkwq0 {
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box
+} .product-cover__wrapper_pkwq0.product-cover__size-128_pkwq0 {
+        width: 213px;
+        height: 128px;
+    } .product-cover__wrapper_pkwq0.product-cover__size-40_pkwq0 {
+        width: 76px;
+        height: 56px;
+    } .product-cover__wrapper_pkwq0.product-cover__size-32_pkwq0 {
+        width: 55px;
+        height: 48px;
+    } .product-cover__wrapper_pkwq0.product-cover__size-16_pkwq0 {
+        width: 28px;
+        height: 20px;
+    } .product-cover__wrapper_pkwq0.product-cover__size-40_pkwq0.product-cover__bottom_pkwq0 {
+        width: 65px;
+        height: 48px;
+    } .product-cover__componentImage_pkwq0 {
+    align-items: center;
+} .product-cover__componentStack_pkwq0.product-cover__size-128_pkwq0 {
+        padding-left: var(--gap-xs);
+    } .product-cover__firstCard_pkwq0 {
+    z-index: 4
+} .product-cover__firstCard_pkwq0.product-cover__size-32_pkwq0 {
+        margin-top: var(--gap-2xs);
+    } .product-cover__firstCard_pkwq0.product-cover__size-40_pkwq0.product-cover__bottom_pkwq0 {
+        margin-left: -7px;
+        margin-top: var(--gap-2xs);
+    } .product-cover__wrapperSecondCard_pkwq0.product-cover__size-128_pkwq0 {
+        width: 213px;
+        padding-left: var(--gap-xs);
+        margin-top: 18px;
+        margin-left: -221px;
+    } .product-cover__wrapperSecondCard_pkwq0.product-cover__size-40_pkwq0 {
+        margin-top: var(--gap-m);
+        margin-left: -54px;
+    } .product-cover__wrapperSecondCard_pkwq0.product-cover__size-32_pkwq0 {
+        margin-top: var(--gap-s);
+        margin-left: -47px;
+    } .product-cover__wrapperSecondCard_pkwq0.product-cover__size-16_pkwq0 {
+        margin-top: var(--gap-2xs);
+        margin-left: var(--gap-l-neg);
+    } .product-cover__wrapperSecondCard_pkwq0.product-cover__size-40_pkwq0.product-cover__bottom_pkwq0 {
+        margin-top: var(--gap-m);
+        margin-left: -58px;
+    }

package/product-cover/esm/stack/index.d.ts

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

package/product-cover/esm/stack/index.js

@@ -0,0 +1,16 @@
+export { Stack } from './Component.js';
+import 'tslib';
+import 'react';
+import 'classnames';
+import '../../../shared/esm';
+import '../single/Component.js';
+import '../components/overlay/Component.js';
+import '../components/text/Component.js';
+import '../../../button/esm/desktop';
+import '../../../typography/esm';
+import '@alfalab/icons-glyph/EyeMIcon';
+import '@alfalab/utils';
+import '../consts.js';
+import '../utils/index.js';
+import '../components/image-card/Component.js';
+import '@alfalab/hooks';

package/product-cover/esm/typings.d.ts

@@ -0,0 +1,144 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+type Size = 16 | 32 | 40 | 48 | 96 | 128 | 164;
+type OverlayProps = {
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Управление видимостью
+     */
+    visible?: boolean;
+};
+type SingleCommonProps = {
+    /**
+     * Размер
+     */
+    size?: Size;
+    /**
+     * Идентификатор карты
+     * (например: RM,SQ,SR)
+     */
+    cardId?: string;
+    /**
+     * Базовый URL сервиса с изображениями
+     * (например: https://online.alfabank.ru/cards-images/cards/)
+     */
+    baseUrl?: string;
+    /**
+     * Какие слои показывать, через запятую без пробелов
+     * (полный набор: BACKGROUND,CARD_NUMBER,CARD_HOLDER,PAY_PASS,CHIP,LOGO,PAYMENT_SYSTEM,RESERVED_1,RESERVED_2,VALID_DATE)
+     */
+    layers?: string;
+    /**
+     * Слот для иконки с оверлеем
+     */
+    icon?: ElementType;
+    /**
+     * Тень для компонента
+     */
+    shadow?: string;
+    /**
+     * Цвет иконки
+     */
+    iconColor?: string;
+    /**
+     * Фон для компонента
+     */
+    backgroundColor?: string;
+    /**
+     * Бордер для компонента
+     */
+    borderColor?: string;
+    /**
+     * Настройки оверлея
+     */
+    overlayProps?: OverlayProps;
+    /**
+     * Кнопка показать номер карты
+     */
+    eyeButton?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Имя владельца карты в верхнем регистре
+     */
+    cardholderNameUppercase?: boolean;
+    /**
+     * Имя владельца карты
+     */
+    cardholderName?: string;
+    /**
+     * Номер карты
+     */
+    cardNumber?: number;
+    /**
+     * Количество карт
+     */
+    numberOfСards?: number;
+    /**
+     * Управление ориентацией стопки карт компонента
+     */
+    align?: 'bottom' | 'default';
+    /**
+     * Слот для кастомного контента компонента
+     */
+    contentAddons?: ReactNode;
+    /**
+     * Свойства для обертки кастомного контента
+     */
+    contentAddonsProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Обработчик клика по кнопке 'показать номер карты'
+     */
+    onEyeIconClick?: () => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+type SingleProps = Omit<SingleCommonProps, 'numberOfСards' | 'align'>;
+type BankCardImageProps = Omit<SingleCommonProps, 'size' | 'numberOfСards' | 'className' | 'dataTestId' | 'align'>;
+type SizeStack = Exclude<Size, 48 | 96 | 164>;
+type ConditionalProps = {
+    /**
+     * Размер
+     */
+    size?: SizeStack;
+    /**
+     * Управление ориентацией стопки карт компонента
+     * для размеров 16, 32 - default (ориентация только вправо и вниз)
+     * для размера 40 -  default или bottom (ориентация вправо и вниз или вниз)
+     * для размера 164 - default (ориентация только влево)
+     * @default default
+     */
+    align?: 'default';
+} | {
+    size?: 40;
+    align?: 'bottom' | 'default';
+};
+type StackProps = ConditionalProps & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Свойства для первой карты
+     */
+    firstCard?: BankCardImageProps;
+    /**
+     * Свойства для второй карты
+     */
+    secondCard?: BankCardImageProps;
+    /**
+     * Количество карт
+     */
+    numberOfСards?: number;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+export { Size, OverlayProps, SingleCommonProps, SingleProps, BankCardImageProps, SizeStack, ConditionalProps, StackProps };

package/product-cover/esm/typings.js

@@ -0,0 +1 @@
+

package/product-cover/esm/utils/index.d.ts

@@ -0,0 +1,15 @@
+declare function getProductCoverSingleTestIds(dataTestId: string): {
+    productCoverSingle: string;
+    userInfo: string;
+    userInfoEye: string;
+};
+declare function getProductCoverStackTestIds(dataTestId: string): {
+    productCoverStack: string;
+    firstCard: string;
+    secondCard: string;
+    userInfoFirstCard: string;
+    userInfoSecondCard: string;
+};
+declare const showNumberOfСards: (sizeCard: number, numberOfСards?: number, align?: string) => boolean;
+declare const getSizeSecondCard: (size: number, align: string) => number;
+export { getProductCoverSingleTestIds, getProductCoverStackTestIds, showNumberOfСards, getSizeSecondCard };

package/product-cover/esm/utils/index.js

@@ -0,0 +1,32 @@
+import { getDataTestId } from '../../../shared/esm';
+import { SECOND_CARD_SIZE } from '../consts.js';
+
+function getProductCoverSingleTestIds(dataTestId) {
+    return {
+        productCoverSingle: dataTestId,
+        userInfo: getDataTestId(dataTestId, 'user-info'),
+        userInfoEye: getDataTestId(dataTestId, 'user-info-eye-btn'),
+    };
+}
+function getProductCoverStackTestIds(dataTestId) {
+    return {
+        productCoverStack: dataTestId,
+        firstCard: getDataTestId(dataTestId, 'first-card'),
+        secondCard: getDataTestId(dataTestId, 'second-card'),
+        userInfoFirstCard: getDataTestId(dataTestId, 'first-card-user-info'),
+        userInfoSecondCard: getDataTestId(dataTestId, 'second-card-user-info'),
+    };
+}
+var showNumberOfСards = function (sizeCard, numberOfСards, align) {
+    if (numberOfСards) {
+        return numberOfСards >= 2 && numberOfСards < 10 && sizeCard === 40 && align === 'default';
+    }
+    return false;
+};
+var getSizeSecondCard = function (size, align) {
+    if (align === 'bottom' && size === 40)
+        return 32;
+    return SECOND_CARD_SIZE[size];
+};
+
+export { getProductCoverSingleTestIds, getProductCoverStackTestIds, getSizeSecondCard, showNumberOfСards };

package/product-cover/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export type { SingleProps, StackProps } from "./typings";

package/product-cover/index.js

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

package/product-cover/modern/Component.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { SingleProps, StackProps } from "./typings";
+declare const Single: FC<SingleProps>;
+declare const ProductCover: {
+    Single: FC<SingleProps>;
+    Stack: FC<StackProps>;
+};
+export { Single, ProductCover };

package/product-cover/modern/Component.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Single as Single$1 } from './single/Component.js';
+import { Stack } from './stack/Component.js';
+import 'classnames';
+import '../../shared/modern';
+import './components/overlay/Component.js';
+import './components/text/Component.js';
+import '../../button/modern/desktop';
+import '../../typography/modern';
+import '@alfalab/icons-glyph/EyeMIcon';
+import '@alfalab/utils';
+import './consts.js';
+import './utils/index.js';
+import './components/image-card/Component.js';
+import '@alfalab/hooks';
+
+const Single = (props) => React.createElement(Single$1, { ...props });
+const ProductCover = {
+    Single,
+    Stack,
+};
+
+export { ProductCover, Single };

package/product-cover/modern/components/image-card/Component.d.ts

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+type ImageCardProps = {
+    /**
+     * Идентификатор карты
+     * (например: RM, SQ, SR)
+     */
+    cardId?: string;
+    /**
+     * Базовый URL сервиса с изображениями
+     * https://online.alfabank.ru/cards-images/cards/
+     */
+    baseUrl?: string;
+    /**
+     * Какие слои показывать, через запятую без пробелов
+     * (полный набор: BACKGROUND,CARD_NUMBER,CARD_HOLDER,PAY_PASS,CHIP,LOGO,PAYMENT_SYSTEM,RESERVED_1,RESERVED_2,VALID_DATE)
+     */
+    layers?: string;
+    /**
+     * Ширина карты
+     */
+    width?: number;
+    /**
+     * Высота карты
+     */
+    height?: number;
+    /**
+     * Количество карт
+     */
+    numberOfСards?: number;
+};
+declare const ImageCard: FC<ImageCardProps>;
+export { ImageCardProps, ImageCard };