@cloud-ru/uikit-product-mobile-modal 0.9.18 → 0.9.20

package/dist/cjs/helperComponents/Footer/styles.module.css

@@ -0,0 +1,37 @@
+.footerActions{
+  gap:var(--space-modal-footer-action-row-gap, 8px);
+  display:flex;
+  flex-direction:row-reverse;
+  flex-wrap:wrap-reverse;
+  align-items:center;
+  justify-content:center;
+}
+
+.footerDisclaimer{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-end;
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+
+.footer{
+  padding:0 var(--dimension-2m, 16px) var(--dimension-3m, 24px) var(--dimension-2m, 16px);
+  gap:var(--dimension-2m, 16px);
+  display:flex;
+  flex-direction:column;
+}
+.footer[data-align=vertical]{
+  align-items:center;
+}
+.footer[data-align=vertical] .footerActions{
+  width:100%;
+}
+.footer[data-align=vertical] .footerDisclaimer{
+  align-items:center;
+}
+.footer[data-align=center]{
+  align-items:center;
+}
+.footer[data-align=center] .footerDisclaimer{
+  align-items:center;
+}

package/dist/cjs/helperComponents/Header/Header.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { MobileQuestionTooltipProps } from '@sbercloud/uikit-product-mobile-tooltip';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { ContentAlign } from '../../types';
+export type ModalHeaderProps = WithSupportProps<{
+    /** Заголовок модального окна */
+    title: ReactNode;
+    /** Тултип для заголовка */
+    titleTooltip?: MobileQuestionTooltipProps['tip'];
+    /** Подзаголовок */
+    subtitle?: ReactNode;
+    /** Выравнивание контента */
+    align?: ContentAlign;
+    className?: string;
+}>;
+export declare function ModalHeader({ title, titleTooltip, subtitle, align, className, ...rest }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/Header/Header.js

@@ -0,0 +1,28 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalHeader = ModalHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const uikit_product_mobile_tooltip_1 = require("@sbercloud/uikit-product-mobile-tooltip");
+const typography_1 = require("@snack-uikit/typography");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ModalHeader(_a) {
+    var { title, titleTooltip, subtitle, align = constants_1.CONTENT_ALIGN.Default, className } = _a, rest = __rest(_a, ["title", "titleTooltip", "subtitle", "align", "className"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.header, className) }, (0, utils_1.extractSupportProps)(rest), { "data-test-id": constants_1.TEST_IDS.header, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headlineLayout, "data-align": align, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headline, children: (0, jsx_runtime_1.jsxs)(typography_1.Typography.SansHeadlineS, { className: styles_module_scss_1.default.title, "data-test-id": constants_1.TEST_IDS.title, children: [title, titleTooltip && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.questionTooltip, children: (0, jsx_runtime_1.jsx)(uikit_product_mobile_tooltip_1.MobileQuestionTooltip, { tip: titleTooltip, size: 's', "data-test-id": constants_1.TEST_IDS.tooltip }) }))] }) }), subtitle && ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.subtitle, "data-test-id": constants_1.TEST_IDS.subtitle, children: subtitle }))] }) })));
+}

package/dist/cjs/helperComponents/Header/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Header';
+export * from './types';

package/dist/cjs/helperComponents/Header/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Header"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/helperComponents/Header/styles.module.css

@@ -0,0 +1,56 @@
+.header{
+}
+
+.title{
+  display:inline;
+  color:var(--sys-neutral-text-main, #41424e);
+  word-break:break-word;
+}
+
+.subtitle{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.questionTooltip{
+  display:inline-flex;
+  height:var(--dimension-4m, 32px);
+  padding-left:4px;
+}
+.questionTooltip > span{
+  transform:translate(0, 4px);
+}
+
+.image{
+  border-top-left-radius:var(--radius-modal-modal-window, 12px);
+  border-top-right-radius:var(--radius-modal-modal-window, 12px);
+  height:var(--size-modal-image, 184px);
+  display:block;
+  width:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+
+.icon{
+  padding-top:var(--space-modal-icon-decor, 32px);
+  display:flex;
+  justify-content:center;
+}
+
+.headlineLayout{
+  padding:var(--dimension-3m, 24px) var(--dimension-2m, 16px) 0;
+  gap:var(--dimension-1m, 8px);
+  display:flex;
+  flex-direction:column;
+}
+.headlineLayout[data-align=center]{
+  align-items:center;
+}
+.headlineLayout[data-align=center] .title, .headlineLayout[data-align=center] .subtitle{
+  text-align:center;
+}
+
+.headline{
+  gap:var(--space-modal-headline-layout-headline, 4px);
+  display:flex;
+  align-items:center;
+}

package/dist/cjs/helperComponents/Header/types.d.ts

@@ -0,0 +1,4 @@
+export type ModalHeaderImage = {
+    src: string;
+    alt: string;
+};

package/dist/cjs/helperComponents/Header/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/helperComponents/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Body';
+export * from './Footer';
+export * from './Header';

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Body"), exports);
+__exportStar(require("./Footer"), exports);
+__exportStar(require("./Header"), exports);

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/dist/cjs/types.d.ts

@@ -0,0 +1,6 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { ALIGN, CONTENT_ALIGN, MODE, SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;
+export type Mode = ValueOf<typeof MODE>;
+export type Align = ValueOf<typeof ALIGN>;
+export type ContentAlign = ValueOf<typeof CONTENT_ALIGN>;

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/utils.d.ts

@@ -0,0 +1,17 @@
+import { Align } from './types';
+export declare function getAlignProps({ align }: {
+    align: Align;
+}): {
+    header: "default";
+    body: "default";
+    footer: "vertical";
+} | {
+    header: "center";
+    body: "center";
+    footer: "center";
+} | {
+    header: "center";
+    body: "center";
+    footer: "vertical";
+};
+export declare function getButtonsSize(): "m";

package/dist/cjs/utils.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAlignProps = getAlignProps;
+exports.getButtonsSize = getButtonsSize;
+const constants_1 = require("./constants");
+const MAP_ALIGNS = {
+    [constants_1.ALIGN.Default]: {
+        header: constants_1.CONTENT_ALIGN.Default,
+        body: constants_1.CONTENT_ALIGN.Default,
+        footer: constants_1.ALIGN.Vertical,
+    },
+    [constants_1.ALIGN.Center]: {
+        header: constants_1.CONTENT_ALIGN.Center,
+        body: constants_1.CONTENT_ALIGN.Center,
+        footer: constants_1.ALIGN.Center,
+    },
+    [constants_1.ALIGN.Vertical]: {
+        header: constants_1.CONTENT_ALIGN.Center,
+        body: constants_1.CONTENT_ALIGN.Center,
+        footer: constants_1.ALIGN.Vertical,
+    },
+};
+function getAlignProps({ align }) {
+    return MAP_ALIGNS[align];
+}
+function getButtonsSize() {
+    return 'm';
+}

package/dist/esm/components/AdaptiveDrawer/AdaptiveDrawer.d.ts

@@ -0,0 +1,10 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { DrawerCustom, DrawerProps } from '@snack-uikit/drawer';
+import { MobileModalProps } from '../MobileModal';
+import { MobileModalCustom } from '../MobileModalCustom';
+export type AdaptiveDrawerProps = WithLayoutType<Omit<DrawerProps, 'size'> & {
+    size?: DrawerProps['size'] | MobileModalProps['size'];
+}>;
+export declare function AdaptiveDrawer({ layoutType, size, ...props }: AdaptiveDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function useAdaptiveDrawerCustom({ layoutType }: WithLayoutType): typeof MobileModalCustom | typeof DrawerCustom;
+export type { DrawerProps };

package/dist/esm/components/AdaptiveDrawer/AdaptiveDrawer.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Drawer, DrawerCustom } from '@snack-uikit/drawer';
+import { SIZE } from '../../constants';
+import { MobileModal } from '../MobileModal';
+import { MobileModalCustom } from '../MobileModalCustom';
+export function AdaptiveDrawer(_a) {
+    var { layoutType, size } = _a, props = __rest(_a, ["layoutType", "size"]);
+    const isMobile = layoutType === 'mobile';
+    const mobileSize = size && Object.values(SIZE).includes(size) ? size : undefined;
+    const desktopProps = Object.assign(Object.assign({}, props), { size: size && ['s', 'm', 'l'].includes(size) ? size : undefined });
+    return isMobile ? (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    _jsx(MobileModal, Object.assign({ size: mobileSize }, props))) : (_jsx(Drawer, Object.assign({}, desktopProps)));
+}
+export function useAdaptiveDrawerCustom({ layoutType }) {
+    const isMobile = layoutType === 'mobile';
+    return isMobile ? MobileModalCustom : DrawerCustom;
+}

package/dist/esm/components/AdaptiveDrawer/index.d.ts

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

package/dist/esm/components/AdaptiveDrawer/index.js

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

package/dist/esm/components/AdaptiveModal/AdaptiveModal.d.ts

@@ -0,0 +1,10 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { ModalCustom, ModalProps } from '@snack-uikit/modal';
+import { MobileModalProps } from '../MobileModal';
+import { MobileModalCustom } from '../MobileModalCustom';
+export type AdaptiveModalProps = WithLayoutType<Omit<ModalProps, 'size'> & {
+    size?: ModalProps['size'] | MobileModalProps['size'];
+}>;
+export declare function AdaptiveModal({ layoutType, size, ...props }: AdaptiveModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function useAdaptiveModalCustom({ layoutType }: WithLayoutType): typeof MobileModalCustom | typeof ModalCustom;
+export type { ModalProps };

package/dist/esm/components/AdaptiveModal/AdaptiveModal.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal, ModalCustom } from '@snack-uikit/modal';
+import { SIZE } from '../../constants';
+import { MobileModal } from '../MobileModal';
+import { MobileModalCustom } from '../MobileModalCustom';
+export function AdaptiveModal(_a) {
+    var { layoutType, size } = _a, props = __rest(_a, ["layoutType", "size"]);
+    const isMobile = layoutType === 'mobile';
+    const mobileSize = size && Object.values(SIZE).includes(size) ? size : undefined;
+    const desktopProps = Object.assign(Object.assign({}, props), { size: size && ['s', 'm', 'l'].includes(size) ? size : undefined });
+    return isMobile ? _jsx(MobileModal, Object.assign({ size: mobileSize }, props)) : _jsx(Modal, Object.assign({}, desktopProps));
+}
+export function useAdaptiveModalCustom({ layoutType }) {
+    const isMobile = layoutType === 'mobile';
+    return isMobile ? MobileModalCustom : ModalCustom;
+}

package/dist/esm/components/AdaptiveModal/index.d.ts

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

package/dist/esm/components/AdaptiveModal/index.js

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

package/dist/esm/components/MobileModal/MobileModal.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { ButtonFilledProps, ButtonOutlineProps, ButtonSimpleProps } from '@snack-uikit/button';
+import { LinkProps } from '@snack-uikit/link';
+import { Align } from '../../types';
+import { MobileModalCustom, MobileModalCustomProps } from '../MobileModalCustom';
+export type MobileModalProps = Omit<MobileModalCustomProps, 'children'> & {
+    /** Заголовок модального окна */
+    title: string;
+    /** Всплывающая подсказка для заголовка */
+    titleTooltip?: MobileModalCustom.HeaderProps['titleTooltip'];
+    /** Подзаголовок */
+    subtitle?: string;
+    /** Содержимое модального окна */
+    content?: MobileModalCustom.BodyProps['content'];
+    /** Основная кнопка действия */
+    approveButton: Omit<ButtonFilledProps, 'size' | 'data-test-id'>;
+    /** Кнопка отмены */
+    cancelButton?: Omit<ButtonOutlineProps, 'size' | 'data-test-id'>;
+    /** Вторая кнопка действия */
+    additionalButton?: Omit<ButtonSimpleProps, 'size' | 'data-test-id'>;
+    /** Небольшой текст под кнопками футера с возможностью передать дополнительно ссылку */
+    disclaimer?: {
+        text: string;
+        link?: Pick<LinkProps, 'text' | 'href' | 'target'>;
+    };
+    /**
+     * Выравнивание, для разных размеров доступны разные значения
+     * <br> для size=`s` - все
+     */
+    align?: Align;
+    /**
+     *  Максимальное кол-во строк
+     * <br> - `title` - в заголовке
+     * <br> - `subtitle` - в подзаголовке
+     * @default '{ <br>title: 1; <br>subtitle: 2; }'
+     */
+    truncate?: {
+        title?: number;
+        subtitle?: number;
+    };
+    /** Управление состоянием загрузки */
+    loading?: boolean;
+    /** Содержимое состояния загрузки вместо спиннера по умолчанию */
+    loadingState?: ReactNode;
+};
+export declare function MobileModal({ title, titleTooltip, subtitle, content, approveButton, cancelButton, additionalButton, disclaimer, align, loading, loadingState, ...rest }: MobileModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MobileModal/MobileModal.js

@@ -0,0 +1,41 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { ButtonFilled, ButtonOutline, ButtonSimple, } from '@snack-uikit/button';
+import { Link } from '@snack-uikit/link';
+import { Spinner } from '@snack-uikit/loaders';
+import { Typography } from '@snack-uikit/typography';
+import { ALIGN, TEST_IDS } from '../../constants';
+import { getAlignProps, getButtonsSize } from '../../utils';
+import { MobileModalCustom } from '../MobileModalCustom';
+import styles from './styles.module.css';
+export function MobileModal(_a) {
+    var { title, titleTooltip, subtitle, content, approveButton, cancelButton, additionalButton, disclaimer, align = ALIGN.Default, loading, loadingState } = _a, rest = __rest(_a, ["title", "titleTooltip", "subtitle", "content", "approveButton", "cancelButton", "additionalButton", "disclaimer", "align", "loading", "loadingState"]);
+    const aligns = getAlignProps({ align });
+    const buttonsSize = getButtonsSize();
+    const showFooter = !loading && (Boolean(approveButton) || Boolean(cancelButton) || Boolean(additionalButton) || Boolean(disclaimer));
+    const body = useMemo(() => {
+        if (loading) {
+            if (loadingState) {
+                return _jsx(MobileModalCustom.Body, { content: loadingState, align: aligns.body });
+            }
+            return (_jsx(MobileModalCustom.Body, { content: _jsx("div", { className: styles.loaderWrapper, children: _jsx(Spinner, { size: 'm', "data-test-id": TEST_IDS.loadingSpinner }) }), align: aligns.body }));
+        }
+        if (content) {
+            return _jsx(MobileModalCustom.Body, { className: styles.modalBody, content: content, align: aligns.body });
+        }
+        return null;
+    }, [aligns.body, content, loading, loadingState]);
+    return (_jsxs(MobileModalCustom, Object.assign({}, rest, { children: [_jsx(MobileModalCustom.Header, { className: cn({ [styles.modalHeader]: !content }), title: title, titleTooltip: titleTooltip, subtitle: subtitle, align: aligns.header }), body, showFooter && (_jsx(MobileModalCustom.Footer, { actions: _jsxs(_Fragment, { children: [approveButton && (_jsx(ButtonFilled, Object.assign({ appearance: 'primary' }, approveButton, { size: buttonsSize, className: cn(styles.footerButton, approveButton.className), "data-test-id": TEST_IDS.approveButton }))), cancelButton && (_jsx(ButtonOutline, Object.assign({ appearance: 'neutral' }, cancelButton, { size: buttonsSize, className: cn(styles.footerButton, cancelButton.className), "data-test-id": TEST_IDS.cancelButton }))), additionalButton && (_jsx(ButtonSimple, Object.assign({ appearance: 'neutral' }, additionalButton, { size: buttonsSize, className: cn(styles.footerButton, additionalButton.className), "data-test-id": TEST_IDS.additionalButton })))] }), disclaimer: disclaimer && (_jsxs(_Fragment, { children: [_jsx(Typography.SansBodyS, { "data-test-id": TEST_IDS.disclaimerText, children: disclaimer.text }), disclaimer.link && _jsx(Link, Object.assign({}, disclaimer.link, { size: 's', "data-test-id": TEST_IDS.disclaimerLink }))] })), align: aligns.footer, className: styles.modalFooter }))] })));
+}

package/dist/esm/components/MobileModal/index.d.ts

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

package/dist/esm/components/MobileModal/index.js

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

package/dist/esm/components/MobileModal/styles.module.css

@@ -0,0 +1,21 @@
+.modalFooter[data-align=vertical] .footerButton{
+  width:100%;
+}
+
+.modalBody{
+  flex:0 1 auto;
+  height:-moz-min-content;
+  height:min-content;
+}
+
+.modalHeader{
+  margin-bottom:24px;
+}
+
+.loaderWrapper{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  padding-top:var(--space-modal-body-top-bottom, 4px);
+  padding-bottom:var(--space-modal-footer-bottom, 32px);
+}

package/dist/esm/components/MobileModalCustom/MobileModalCustom.d.ts

@@ -0,0 +1,28 @@
+import { MobileDrawerCustomProps } from '@sbercloud/uikit-product-mobile-drawer';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps } from '../../helperComponents';
+import { Mode, Size } from '../../types';
+export type MobileModalCustomProps = Pick<MobileDrawerCustomProps, 'open' | 'onClose' | 'className' | 'children' | 'closeButtonEnabled' | 'closeOnPopstate'> & WithSupportProps<{
+    /**
+     * Режим отображения модального окна:
+     * <br> - __`Regular`__ -  есть кнопка закрытия, клик на оверлей и нажатие кнопки `Esc` закрывают модалку
+     * <br> - __`Aggressive`__ - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише `Esc`
+     * <br> - __`Forced`__ - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части
+     * @default Mode.Regular
+     */
+    mode?: Mode;
+    /**
+     * Размер модального окна
+     * @default Size.Auto
+     */
+    size?: Size;
+}>;
+export declare function MobileModalCustom({ size, mode, closeButtonEnabled, ...rest }: MobileModalCustomProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MobileModalCustom {
+    type HeaderProps = ModalHeaderProps;
+    type BodyProps = ModalBodyProps;
+    type FooterProps = ModalFooterProps;
+    const Header: typeof ModalHeader;
+    const Body: typeof ModalBody;
+    const Footer: typeof ModalFooter;
+}

package/dist/esm/components/MobileModalCustom/MobileModalCustom.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MobileDrawerCustom } from '@sbercloud/uikit-product-mobile-drawer';
+import { MODE, SIZE } from '../../constants';
+import { ModalBody, ModalFooter, ModalHeader, } from '../../helperComponents';
+export function MobileModalCustom(_a) {
+    var { size = SIZE.Auto, mode = MODE.Regular, closeButtonEnabled = false } = _a, rest = __rest(_a, ["size", "mode", "closeButtonEnabled"]);
+    return (_jsx(MobileDrawerCustom, Object.assign({}, rest, { modalMode: mode, size: size === SIZE.Auto ? 'auto' : '100%', hasBorderRadius: true, position: 'bottom', swipeEnabled: true, closeButtonEnabled: closeButtonEnabled })));
+}
+(function (MobileModalCustom) {
+    MobileModalCustom.Header = ModalHeader;
+    MobileModalCustom.Body = ModalBody;
+    MobileModalCustom.Footer = ModalFooter;
+})(MobileModalCustom || (MobileModalCustom = {}));

package/dist/esm/components/MobileModalCustom/index.d.ts

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

package/dist/esm/components/MobileModalCustom/index.js

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

package/dist/esm/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './AdaptiveDrawer';
+export * from './AdaptiveModal';
+export * from './MobileModal';
+export * from './MobileModalCustom';

package/dist/esm/components/index.js

@@ -0,0 +1,4 @@
+export * from './AdaptiveDrawer';
+export * from './AdaptiveModal';
+export * from './MobileModal';
+export * from './MobileModalCustom';

package/dist/esm/constants.d.ts

@@ -0,0 +1,37 @@
+export declare const SIZE: {
+    readonly Full: "full";
+    readonly Auto: "auto";
+};
+export declare const MODE: {
+    readonly Regular: "regular";
+    readonly Aggressive: "aggressive";
+    readonly Forced: "forced";
+};
+export declare const ALIGN: {
+    readonly Default: "default";
+    readonly Center: "center";
+    readonly Vertical: "vertical";
+};
+export declare const CONTENT_ALIGN: {
+    readonly Default: "default";
+    readonly Center: "center";
+};
+export declare const TEST_IDS: {
+    overlay: string;
+    closeButton: string;
+    header: string;
+    title: string;
+    subtitle: string;
+    tooltip: string;
+    icon: string;
+    image: string;
+    content: string;
+    footer: string;
+    approveButton: string;
+    cancelButton: string;
+    additionalButton: string;
+    disclaimer: string;
+    disclaimerText: string;
+    disclaimerLink: string;
+    loadingSpinner: string;
+};