@alfalab/core-components-product-cover 1.0.0

package/cssm/components/overlay/Component.d.ts

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

package/cssm/components/overlay/Component.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var styles = require('./index.module.css');
+
+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__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Overlay = function (_a) {
+    var _b;
+    var _c = _a.colors, colors = _c === void 0 ? 'default' : _c, visible = _a.visible;
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.overlay, styles__default.default[colors], (_b = {},
+            _b[styles__default.default.visible] = visible,
+            _b)) }));
+};
+
+exports.Overlay = Overlay;

package/cssm/components/overlay/index.d.ts

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

package/cssm/components/overlay/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_overlay_Component = require('./Component.js');
+
+
+
+exports.Overlay = components_overlay_Component.Overlay;

package/cssm/components/overlay/index.module.css

@@ -0,0 +1,34 @@
+: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-static-neutral-translucent-700: rgba(4, 4, 21, 0.47);
+    --color-static-neutral-translucent-700-inverted: rgba(238, 238, 251, 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 */
+} :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 {
+} :root {
+} :root {
+} .overlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    z-index: 3;
+    opacity: 0;
+} .visible {
+    opacity: 1;
+} .default {
+    background: var(--color-static-neutral-translucent-700-inverted);
+} .inverted {
+    background: var(--color-static-neutral-translucent-700);
+}

package/cssm/components/text/Component.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import React from 'react';
+import { Size } from "../../typings";
+type TextProps = {
+    /**
+     * Кнопка показать номер карты
+     */
+    eyeButton?: boolean;
+    /**
+     * Размер
+     */
+    size?: Size;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Имя владельца карты в верхнем регистре
+     */
+    cardholderNameUppercase?: boolean;
+    /**
+     * Имя владельца карты
+     */
+    cardholderName?: string;
+    /**
+     * Номер карты
+     */
+    cardNumber?: number;
+    /**
+     * Количество карт
+     */
+    numberOfСards?: number;
+    /**
+     * Управление ориентацией стопки карт компонента
+     */
+    align?: 'bottom' | 'default';
+    /**
+     * Обработчик клика по иконке 'показать номер карты'
+     */
+    onEyeIconClick?: () => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     */
+    dataTestId?: string;
+};
+declare const Text: React.FC<TextProps>;
+export { TextProps, Text };

package/cssm/components/text/Component.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var desktop = require('@alfalab/core-components-button/cssm/desktop');
+var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
+var coreComponentsTypography = require('@alfalab/core-components-typography/cssm');
+var EyeMIcon = require('@alfalab/icons-glyph/EyeMIcon');
+var utils = require('@alfalab/utils');
+var consts = require('../../consts.js');
+var utils_index = require('../../utils/index.js');
+var styles = require('./index.module.css');
+
+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__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Text = function (_a) {
+    var cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, cardNumber = _a.cardNumber, numberOfСards = _a.numberOfСards, align = _a.align, eyeButton = _a.eyeButton, dataTestId = _a.dataTestId, _b = _a.size, size = _b === void 0 ? 164 : _b, onEyeIconClick = _a.onEyeIconClick;
+    var maxSize = size === 164;
+    var visibleNumberOfСards = utils_index["showNumberOfСards"](size, numberOfСards, align);
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component), "data-test-id": dataTestId },
+        maxSize && cardholderName ? (React__default.default.createElement(coreComponentsTypography.Typography.Text, { tag: 'div', view: 'secondary-medium', weight: 'medium', color: 'static-primary-light', className: styles__default.default.cardholderName }, cardholderNameUppercase ? cardholderName === null || cardholderName === void 0 ? void 0 : cardholderName.toUpperCase() : cardholderName)) : null,
+        cardNumber && !visibleNumberOfСards ? (React__default.default.createElement("div", { className: styles__default.default.cardNumber },
+            React__default.default.createElement(coreComponentsTypography.Typography.Text, { view: consts.TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-light' },
+                [164, 128].includes(size) && '··\u2009',
+                String(cardNumber).slice(-4)),
+            eyeButton && maxSize && (React__default.default.createElement(desktop.ButtonDesktop, { view: 'text', className: cn__default.default(styles__default.default.buttonEye), dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'eye-btn'), onClick: onEyeIconClick, colors: 'inverted' },
+                React__default.default.createElement(EyeMIcon.EyeMIcon, null))))) : null,
+        visibleNumberOfСards && (React__default.default.createElement("div", { className: styles__default.default.cardNumber },
+            React__default.default.createElement(coreComponentsTypography.Typography.Text, { view: consts.TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-dark' }, "+".concat(numberOfСards, "\u00A0"),
+                utils.pluralize(numberOfСards || 0, 'карта', 'карты', 'карт'))))));
+};
+
+exports.Text = Text;

package/cssm/components/text/index.d.ts

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

package/cssm/components/text/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_text_Component = require('./Component.js');
+
+
+
+exports.Text = components_text_Component.Text;

package/cssm/components/text/index.module.css

@@ -0,0 +1,46 @@
+: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-static-text-primary-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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-3xs: 2px;
+} :root {
+} :root {
+} .component {
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    grid-gap: var(--gap-3xs);
+    gap: var(--gap-3xs);
+} .cardholderName {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+} .cardNumber {
+    display: flex;
+    align-items: center;
+} .buttonEye.buttonEye {
+    margin-left: 5px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    color: var(--color-static-text-primary-light)
+} .buttonEye.buttonEye:hover {
+        color: var(--color-static-text-primary-light);
+    } .buttonEye.buttonEye:active {
+        color: var(--color-static-text-primary-light);
+    } .buttonEye.buttonEye > span {
+        display: flex;
+        align-items: center;
+    }

package/cssm/consts.d.ts

@@ -0,0 +1,5 @@
+import { TextProps } from "@alfalab/core-components-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/cssm/consts.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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,
+};
+
+exports.SECOND_CARD_SIZE = SECOND_CARD_SIZE;
+exports.TYPOGRAPHY_VIEW_FOR_SIZE = TYPOGRAPHY_VIEW_FOR_SIZE;
+exports.WIDTH_TO_SIZE = WIDTH_TO_SIZE;

package/cssm/index.d.ts

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

package/cssm/index.js

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

package/cssm/shared/index.d.ts

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

package/cssm/shared/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils_index = require('../utils/index.js');
+
+
+
+exports.getProductCoverSingleTestIds = utils_index.getProductCoverSingleTestIds;
+exports.getProductCoverStackTestIds = utils_index.getProductCoverStackTestIds;

package/cssm/single/Component.d.ts

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

package/cssm/single/Component.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
+var components_overlay_Component = require('../components/overlay/Component.js');
+var components_text_Component = require('../components/text/Component.js');
+var components_imageCard_Component = require('../components/image-card/Component.js');
+var consts = require('../consts.js');
+var styles = require('./index.module.css');
+
+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__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+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__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default["size-".concat(size)], className), style: {
+            width: consts.WIDTH_TO_SIZE[size],
+            height: size,
+            boxShadow: shadow,
+            backgroundColor: backgroundColor,
+        }, "data-test-id": dataTestId },
+        Icon && React__default.default.createElement(Icon, { color: iconColor, className: styles__default.default.icon }),
+        React__default.default.createElement(components_overlay_Component.Overlay, { colors: overlayProps.colors, visible: overlayProps.visible }),
+        borderColor && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.border), style: { boxShadow: "inset 0 0 0 1px ".concat(borderColor) } })),
+        React__default.default.createElement(components_imageCard_Component.ImageCard, { width: consts.WIDTH_TO_SIZE[size], height: size, cardId: cardId, layers: layers, baseUrl: baseUrl, "numberOf\u0421ards": numberOfСards }),
+        showContent && (React__default.default.createElement(components_text_Component.Text, { cardNumber: cardNumber, eyeButton: eyeButton, cardholderNameUppercase: cardholderNameUppercase, cardholderName: cardholderName, "numberOf\u0421ards": numberOfСards, align: align, size: size, onEyeIconClick: onEyeIconClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'user-info') })),
+        contentAddons && (React__default.default.createElement("div", tslib.__assign({}, contentAddonsProps, { className: cn__default.default(styles__default.default.contentAddons, contentAddonsProps === null || contentAddonsProps === void 0 ? void 0 : contentAddonsProps.className) }), contentAddons))));
+};
+
+exports.Single = Single;

package/cssm/single/index.d.ts

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

package/cssm/single/index.js

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

package/cssm/single/index.module.css

@@ -0,0 +1,71 @@
+: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 {
+} .component {
+    display: flex;
+    align-items: end;
+    position: relative;
+    background-color: var(--color-light-graphic-tertiary);
+    box-sizing: border-box
+} .component.size-164 {
+        border-radius: var(--border-radius-xxl);
+        padding: var(--gap-s) var(--gap-m);
+    } .component.size-128 {
+        border-radius: var(--border-radius-xl);
+        padding: var(--gap-xs) var(--gap-s);
+    } .component.size-96 {
+        border-radius: var(--border-radius-l);
+        padding: 6px var(--gap-s);
+    } .component.size-48,
+    .component.size-40 {
+        border-radius: 6px;
+        padding: var(--gap-3xs) var(--gap-2xs);
+    } .component.size-32 {
+        border-radius: var(--border-radius-s);
+        padding: 0 var(--gap-3xs);
+    } .component.size-16 {
+        border-radius: var(--border-radius-xs);
+    } .icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 4;
+} .border {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    z-index: 3;
+} .contentAddons {
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    overflow: hidden;
+}

package/cssm/stack/Component.d.ts

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

package/cssm/stack/Component.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
+var single_Component = require('../single/Component.js');
+var utils_index = require('../utils/index.js');
+var styles = require('./index.module.css');
+
+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__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+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 = utils_index.getSizeSecondCard(size, align);
+    var commonClassName = (_b = {},
+        _b[styles__default.default[sizeClassNames]] = true,
+        _b[styles__default.default[align]] = Boolean(styles__default.default[align]),
+        _b);
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.wrapper, styles__default.default.componentStack, commonClassName, className), "data-test-id": dataTestId },
+        React__default.default.createElement(single_Component.Single, tslib.__assign({}, firstCard, { className: cn__default.default(styles__default.default.firstCard, commonClassName), size: size, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'first-card') })),
+        React__default.default.createElement("div", { className: cn__default.default(styles__default.default.wrapperSecondCard, commonClassName) },
+            React__default.default.createElement(single_Component.Single, tslib.__assign({}, secondCard, { size: secondCardSize, align: align, "numberOf\u0421ards": numberOfСards, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'second-card') })))));
+};
+
+exports.Stack = Stack;

package/cssm/stack/index.d.ts

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

package/cssm/stack/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var stack_Component = require('./Component.js');
+
+
+
+exports.Stack = stack_Component.Stack;

package/cssm/stack/index.module.css

@@ -0,0 +1,68 @@
+: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 {
+} .wrapper {
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box
+} .wrapper.size-128 {
+        width: 213px;
+        height: 128px;
+    } .wrapper.size-40 {
+        width: 76px;
+        height: 56px;
+    } .wrapper.size-32 {
+        width: 55px;
+        height: 48px;
+    } .wrapper.size-16 {
+        width: 28px;
+        height: 20px;
+    } .wrapper.size-40.bottom {
+        width: 65px;
+        height: 48px;
+    } .componentImage {
+    align-items: center;
+} .componentStack.size-128 {
+        padding-left: var(--gap-xs);
+    } .firstCard {
+    z-index: 4
+} .firstCard.size-32 {
+        margin-top: var(--gap-2xs);
+    } .firstCard.size-40.bottom {
+        margin-left: -7px;
+        margin-top: var(--gap-2xs);
+    } .wrapperSecondCard.size-128 {
+        width: 213px;
+        padding-left: var(--gap-xs);
+        margin-top: 18px;
+        margin-left: -221px;
+    } .wrapperSecondCard.size-40 {
+        margin-top: var(--gap-m);
+        margin-left: -54px;
+    } .wrapperSecondCard.size-32 {
+        margin-top: var(--gap-s);
+        margin-left: -47px;
+    } .wrapperSecondCard.size-16 {
+        margin-top: var(--gap-2xs);
+        margin-left: var(--gap-l-neg);
+    } .wrapperSecondCard.size-40.bottom {
+        margin-top: var(--gap-m);
+        margin-left: -58px;
+    }