@cloud-ru/uikit-product-mobile-drawer 0.9.15 → 0.9.16

package/dist/cjs/components/MobileDrawerCustom/styles.module.css

@@ -0,0 +1,182 @@
+.content{
+  flex-grow:1;
+  min-width:var(--dimension-5m, 40px);
+  min-height:var(--dimension-5m, 40px);
+  display:flex;
+  flex-direction:column;
+}
+.content[data-swipe]{
+  cursor:grab;
+}
+.content[data-swipe][data-pointers]{
+  cursor:grabbing;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+  -webkit-user-drag:none;
+}
+
+.drawerRoot{
+  z-index:initial !important;
+}
+.drawerRoot, .drawerRoot *{
+  overscroll-behavior-y:contain;
+}
+.drawerRoot div[data-content-wrapper=true]{
+  will-change:transform;
+  z-index:initial;
+  overflow:hidden;
+  touch-action:none;
+}
+.drawerRoot div[data-content-wrapper=true][data-position=left], .drawerRoot div[data-content-wrapper=true][data-position=right]{
+  height:100%;
+  max-height:100%;
+  max-width:calc(100% - var(--space-drawer-outside-gap, 24px));
+  top:0;
+  bottom:0;
+}
+.drawerRoot div[data-content-wrapper=true][data-position=left] .content, .drawerRoot div[data-content-wrapper=true][data-position=right] .content{
+  max-height:100dvh;
+}
+.drawerRoot div[data-content-wrapper=true][data-position=left][data-size=s], .drawerRoot div[data-content-wrapper=true][data-position=right][data-size=s]{
+  min-width:var(--size-drawer-min-width-s, 304px);
+  width:var(--size-drawer-width-s, 464px);
+}
+.drawerRoot div[data-content-wrapper=true][data-position=left][data-size=m], .drawerRoot div[data-content-wrapper=true][data-position=right][data-size=m]{
+  min-width:var(--size-drawer-min-width-m, 304px);
+  width:var(--size-drawer-width-m, 864px);
+}
+.drawerRoot div[data-content-wrapper=true][data-position=left][data-size=l], .drawerRoot div[data-content-wrapper=true][data-position=right][data-size=l]{
+  min-width:var(--size-drawer-min-width-l, 304px);
+  width:var(--size-drawer-width-l, 1872px);
+}
+.drawerRoot div[data-content-wrapper=true][data-position=left]{
+  left:0;
+}
+.drawerRoot div[data-content-wrapper=true][data-position=left][data-border-radius]{
+  border-bottom-right-radius:12px;
+  border-top-right-radius:12px;
+}
+.drawerRoot div[data-content-wrapper=true][data-position=left][data-outline]{
+  border-right:1px solid var(--sys-neutral-decor-default, #dde0ea);
+}
+.drawerRoot div[data-content-wrapper=true][data-position=right]{
+  right:0;
+}
+.drawerRoot div[data-content-wrapper=true][data-position=right][data-border-radius]{
+  border-bottom-left-radius:12px;
+  border-top-left-radius:12px;
+}
+.drawerRoot div[data-content-wrapper=true][data-position=right][data-outline]{
+  border-left:1px solid var(--sys-neutral-decor-default, #dde0ea);
+}
+.drawerRoot div[data-content-wrapper=true][data-position=bottom], .drawerRoot div[data-content-wrapper=true][data-position=top]{
+  width:100%;
+  max-width:100%;
+  max-height:calc(100% - var(--space-drawer-outside-gap, 24px));
+  left:0;
+  right:0;
+}
+.drawerRoot div[data-content-wrapper=true][data-position=bottom] .content, .drawerRoot div[data-content-wrapper=true][data-position=top] .content{
+  max-height:calc(100dvh - var(--space-drawer-outside-gap, 24px));
+}
+.drawerRoot div[data-content-wrapper=true][data-position=bottom][data-size=s], .drawerRoot div[data-content-wrapper=true][data-position=top][data-size=s]{
+  height:var(--size-drawer-width-s, 464px);
+  min-height:var(--size-drawer-min-width-s, 304px);
+}
+.drawerRoot div[data-content-wrapper=true][data-position=bottom][data-size=m], .drawerRoot div[data-content-wrapper=true][data-position=top][data-size=m]{
+  height:var(--size-drawer-width-m, 864px);
+  min-height:var(--size-drawer-min-width-m, 304px);
+}
+.drawerRoot div[data-content-wrapper=true][data-position=bottom][data-size=l], .drawerRoot div[data-content-wrapper=true][data-position=top][data-size=l]{
+  height:var(--size-drawer-width-l, 1872px);
+  min-height:var(--size-drawer-min-width-l, 304px);
+}
+.drawerRoot div[data-content-wrapper=true][data-position=bottom]{
+  bottom:0;
+}
+.drawerRoot div[data-content-wrapper=true][data-position=bottom][data-border-radius]{
+  border-top-left-radius:12px;
+  border-top-right-radius:12px;
+}
+.drawerRoot div[data-content-wrapper=true][data-position=bottom][data-outline]{
+  border-top:1px solid var(--sys-neutral-decor-default, #dde0ea);
+}
+.drawerRoot div[data-content-wrapper=true][data-position=top]{
+  top:0;
+}
+.drawerRoot div[data-content-wrapper=true][data-position=top][data-border-radius]{
+  border-bottom-left-radius:12px;
+  border-bottom-right-radius:12px;
+}
+.drawerRoot div[data-content-wrapper=true][data-position=top][data-outline]{
+  border-bottom:1px solid var(--sys-neutral-decor-default, #dde0ea);
+}
+.drawerRoot div[data-content-wrapper=true][data-mode=regular] .drawer{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+}
+.drawerRoot div[data-content-wrapper=true][data-mode=soft] .drawer{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+}
+
+.drawer{
+  overflow:unset;
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  box-shadow:var(--box-shadow-elevation-level5, 0px 0px 16px 0px rgba(0, 0, 0, 0.0784313725), 0px 24px 16px 0px rgba(0, 0, 0, 0.0784313725));
+}
+
+.mask{
+  z-index:initial !important;
+  background-color:var(--sys-blackout, rgba(0, 0, 0, 0.3215686275));
+}
+
+.maskBlur{
+  backdrop-filter:blur(var(--background-blur-background-blur, 16px));
+}
+
+.drawerBlur{
+  outline:none;
+}
+
+.swiper{
+  position:absolute;
+  background-color:var(--sys-neutral-decor-default, #dde0ea);
+  border-radius:var(--dimension-050m, 4px);
+}
+.swiper[data-position=left], .swiper[data-position=right]{
+  width:var(--dimension-050m, 4px);
+  height:var(--dimension-10m, 80px);
+}
+.swiper[data-position=left]{
+  right:var(--dimension-050m, 4px);
+  top:calc(50% - var(--dimension-10m, 80px) / 2);
+}
+.swiper[data-position=right]{
+  left:var(--dimension-050m, 4px);
+  top:calc(50% - var(--dimension-10m, 80px) / 2);
+}
+.swiper[data-position=bottom], .swiper[data-position=top]{
+  width:var(--dimension-10m, 80px);
+  height:var(--dimension-050m, 4px);
+}
+.swiper[data-position=bottom]{
+  top:var(--dimension-050m, 4px);
+  left:calc(50% - var(--dimension-10m, 80px) / 2);
+}
+.swiper[data-position=top]{
+  bottom:var(--dimension-050m, 4px);
+  left:calc(50% - var(--dimension-10m, 80px) / 2);
+}
+
+.headerElements{
+  padding-top:var(--space-drawer-header-elements-top, 16px);
+  padding-right:var(--space-drawer-header-elements-side, 16px);
+  gap:var(--space-drawer-headline-layout-badge-elements-layout-gap, 16px);
+  position:absolute;
+  top:0;
+  right:0;
+  display:flex;
+  align-items:center;
+}

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

@@ -0,0 +1,2 @@
+export * from './MobileDrawer';
+export * from './MobileDrawerCustom';

package/dist/cjs/components/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("./MobileDrawer"), exports);
+__exportStar(require("./MobileDrawerCustom"), exports);

package/dist/cjs/constants.d.ts

@@ -0,0 +1,36 @@
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const SIZE_AS_VALUES: string[];
+export declare const MODE: {
+    readonly Regular: "regular";
+    readonly Soft: "soft";
+};
+export declare const MODAL_MODE: {
+    readonly Regular: "regular";
+    readonly Aggressive: "aggressive";
+    readonly Forced: "forced";
+};
+export declare const POSITION: {
+    readonly Right: "right";
+    readonly Left: "left";
+    readonly Bottom: "bottom";
+    readonly Top: "top";
+};
+export declare const NESTED_DRAWER_PUSH_DISTANCE = 24;
+export declare const TEST_IDS: {
+    closeButton: string;
+    header: string;
+    title: string;
+    tooltip: string;
+    subtitle: string;
+    image: string;
+    content: string;
+    footer: string;
+    footerActions: string;
+    approveButton: string;
+    cancelButton: string;
+    additionalButton: string;
+};

package/dist/cjs/constants.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_IDS = exports.NESTED_DRAWER_PUSH_DISTANCE = exports.POSITION = exports.MODAL_MODE = exports.MODE = exports.SIZE_AS_VALUES = exports.SIZE = void 0;
+exports.SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+exports.SIZE_AS_VALUES = Object.values(exports.SIZE);
+exports.MODE = {
+    Regular: 'regular',
+    Soft: 'soft',
+};
+exports.MODAL_MODE = {
+    Regular: 'regular',
+    Aggressive: 'aggressive',
+    Forced: 'forced',
+};
+exports.POSITION = {
+    Right: 'right',
+    Left: 'left',
+    Bottom: 'bottom',
+    Top: 'top',
+};
+exports.NESTED_DRAWER_PUSH_DISTANCE = 24;
+exports.TEST_IDS = {
+    closeButton: 'drawer__close-button',
+    header: 'drawer__header',
+    title: 'drawer__title',
+    tooltip: 'drawer__title-tooltip',
+    subtitle: 'drawer__subtitle',
+    image: 'drawer__image',
+    content: 'drawer__body',
+    footer: 'drawer__footer',
+    footerActions: 'drawer__footer-actions',
+    approveButton: 'drawer__approve-button',
+    cancelButton: 'drawer__cancel-button',
+    additionalButton: 'drawer__additional-button',
+};

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type DrawerBodyProps = WithSupportProps<{
+    /** Контент */
+    content: ReactNode;
+    /** CSS-класс */
+    className?: string;
+}>;
+/** Вспомогательный компонент для добавления "тела" в DrawerCustom */
+export declare function DrawerBody({ content, className, ...rest }: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/Body/Body.js

@@ -0,0 +1,27 @@
+"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.DrawerBody = DrawerBody;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const scroll_1 = require("@snack-uikit/scroll");
+const utils_1 = require("@snack-uikit/utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Вспомогательный компонент для добавления "тела" в DrawerCustom */
+function DrawerBody(_a) {
+    var { content, className } = _a, rest = __rest(_a, ["content", "className"]);
+    return ((0, jsx_runtime_1.jsx)(scroll_1.Scroll, Object.assign({ size: 'm', barHideStrategy: 'never', className: (0, classnames_1.default)(styles_module_scss_1.default.drawerBody, className) }, (0, utils_1.extractSupportProps)(rest), { children: content })));
+}

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

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

package/dist/cjs/helperComponents/Body/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("./Body"), exports);

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

@@ -0,0 +1,9 @@
+.drawerBody{
+  padding-left:var(--space-drawer-body-side, 32px);
+  padding-right:var(--space-drawer-body-side, 32px);
+  padding:0 var(--dimension-2m, 16px);
+  flex:1 1 auto;
+  box-sizing:border-box;
+  min-height:var(--dimension-2m, 16px);
+  color:var(--sys-neutral-text-main, #41424e);
+}

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

@@ -0,0 +1,5 @@
+type ButtonCloseProps = {
+    onClick(): void;
+};
+export declare function ButtonClose({ onClick }: ButtonCloseProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/ButtonClose/ButtonClose.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonClose = ButtonClose;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ButtonClose({ onClick }) {
+    return ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: styles_module_scss_1.default.buttonClose, onClick: onClick, "aria-label": 'close drawer', "data-test-id": constants_1.TEST_IDS.closeButton, children: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.CrossSVG, {}) }));
+}

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

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

package/dist/cjs/helperComponents/ButtonClose/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("./ButtonClose"), exports);

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

@@ -0,0 +1,35 @@
+.buttonClose{
+  width:var(--size-drawer-button-close, 32px);
+  height:var(--size-drawer-button-close, 32px);
+  border-radius:var(--radius-drawer-button-close, 16px);
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  color:var(--sys-neutral-text-support, #6d707f);
+  background-color:var(--sys-neutral-decor-default, #dde0ea);
+  border:0 solid transparent;
+  outline:0;
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.buttonClose:hover, .buttonClose:focus-visible{
+  color:var(--sys-neutral-text-main, #41424e);
+  background-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.buttonClose:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-color:var(--sys-available-complementary, #1c1c24);
+}
+.buttonClose:active{
+  color:var(--sys-neutral-text-main, #41424e);
+  background-color:var(--sys-neutral-decor-activated, #b6bac7);
+}
+.buttonClose svg{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type DrawerFooterProps = WithSupportProps<{
+    /** Слот для добавления кнопок-действий */
+    actions: ReactNode;
+    /** CSS-класс */
+    className?: string;
+}>;
+/** Вспомогательный компонент для добавления "футера" в DrawerCustom */
+export declare function DrawerFooter({ actions, className, ...rest }: DrawerFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/Footer/Footer.js

@@ -0,0 +1,27 @@
+"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.DrawerFooter = DrawerFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Вспомогательный компонент для добавления "футера" в DrawerCustom */
+function DrawerFooter(_a) {
+    var { actions, className } = _a, rest = __rest(_a, ["actions", "className"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.footer, className) }, (0, utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.footerActions, "data-test-id": constants_1.TEST_IDS.footerActions, children: actions }) })));
+}

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

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

package/dist/cjs/helperComponents/Footer/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("./Footer"), exports);

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

@@ -0,0 +1,14 @@
+.footer{
+  padding:var(--dimension-2m, 16px);
+  gap:var(--dimension-1m, 8px);
+  display:flex;
+  flex-direction:column;
+}
+
+.footerActions{
+  gap:var(--space-drawer-footer-action-row-gap, 8px);
+  display:flex;
+  flex-direction:row-reverse;
+  flex-wrap:wrap-reverse;
+  align-items:center;
+}

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { MobileQuestionTooltipProps } from '@sbercloud/uikit-product-mobile-tooltip';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type DrawerHeaderProps = WithSupportProps<{
+    /** Изображение */
+    image?: {
+        src: string;
+        alt: string;
+    };
+    /** Заголовок */
+    title: ReactNode;
+    /** Тултип для заголовка */
+    titleTooltip?: MobileQuestionTooltipProps['tip'];
+    /** Подзаголовок */
+    subtitle?: ReactNode;
+    /** CSS-класс */
+    className?: string;
+}>;
+/** Вспомогательный компонент для добавления "шапки" в DrawerCustom */
+export declare function DrawerHeader({ title, titleTooltip, subtitle, image, className, ...rest }: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,29 @@
+"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.DrawerHeader = DrawerHeader;
+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'));
+/** Вспомогательный компонент для добавления "шапки" в DrawerCustom */
+function DrawerHeader(_a) {
+    var { title, titleTooltip, subtitle, image, className } = _a, rest = __rest(_a, ["title", "titleTooltip", "subtitle", "image", "className"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.drawerHeader, className) }, (0, utils_1.extractSupportProps)(rest), { children: [image && (0, jsx_runtime_1.jsx)("img", { src: image.src, alt: image.alt, className: styles_module_scss_1.default.image, "data-test-id": constants_1.TEST_IDS.image }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headlineLayout, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headline, children: [(0, jsx_runtime_1.jsx)(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)(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 @@
+export * from './Header';

package/dist/cjs/helperComponents/Header/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("./Header"), exports);

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

@@ -0,0 +1,32 @@
+.drawerHeader{
+}
+
+.image{
+  height:var(--size-drawer-image, 184px);
+  display:block;
+  width:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+
+.headlineLayout{
+  padding:var(--dimension-2m, 16px);
+  gap:var(--dimension-1m, 8px);
+  display:flex;
+  flex-direction:column;
+}
+
+.headline{
+  gap:var(--space-drawer-headline-layout-headline, 4px);
+  display:flex;
+  align-items:center;
+}
+
+.title{
+  display:grid;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.subtitle{
+  color:var(--sys-neutral-text-support, #6d707f);
+}

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

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { MobileTooltipProps } from '@sbercloud/uikit-product-mobile-tooltip';
+type WithTooltipProps = PropsWithChildren<{
+    /** Тултип над кнопкой */
+    tooltip?: MobileTooltipProps;
+}>;
+export declare function WithTooltip({ tooltip, children }: WithTooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/WithTooltip/WithTooltip.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithTooltip = WithTooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_mobile_tooltip_1 = require("@sbercloud/uikit-product-mobile-tooltip");
+function WithTooltip({ tooltip, children }) {
+    if (!tooltip) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    }
+    return (0, jsx_runtime_1.jsx)(uikit_product_mobile_tooltip_1.MobileTooltip, Object.assign({}, tooltip, { children: children }));
+}

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

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