@alfalab/core-components-popup-sheet 1.0.0

package/cssm/desktop-2e2b2125.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop-2e2b2125";
+export {};

package/cssm/index-ebda875c.d.ts

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

package/cssm/index.d.ts

@@ -0,0 +1 @@
+export { PopupSheet, PopupSheetProps } from "./Component";

package/cssm/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+require('tslib');
+require('react');
+require('react-swipeable');
+require('classnames');
+require('@alfalab/core-components-base-modal/cssm');
+require('@alfalab/core-components-navigation-bar/cssm/shared');
+require('@alfalab/core-components-shared/cssm');
+require('./components/backdrop/Component.js');
+require('@alfalab/core-components-backdrop/cssm');
+require('./components/backdrop/index.module.css');
+require('./index.module.css');
+
+
+
+exports.PopupSheet = Component.PopupSheet;

package/cssm/index.module.css

@@ -0,0 +1,52 @@
+:root {
+} /* 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-xs: 8px;
+} :root {
+} :root {
+} .component {
+    position: fixed;
+    bottom: 0;
+    margin: auto var(--gap-xs) var(--gap-xs);
+    width: calc(100% - 2 * var(--gap-xs));
+    max-width: 600px;
+    border-radius: 36px;
+    overflow: hidden;
+} .closer {
+    position: absolute;
+    top: 8px;
+    right: 8px
+} .closer > button {
+        -webkit-backdrop-filter: none;
+                backdrop-filter: none;
+    } .content {
+    box-sizing: border-box;
+} /* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */ .appear,
+.enter {
+    transform: translateY(calc(100% + 100px));
+} .appearActive,
+.enterActive {
+    transform: translateY(0);
+    transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
+    transition-delay: 50ms;
+} .exit {
+    transform: translateY(0);
+} .exitBySwipe {
+    transform: translateY(calc(100% + 100px));
+} .exitActiveBySwipe {
+    transition: none;
+} .exitActive,
+.exitDone {
+    transform: translateY(calc(100% + 100px));
+    transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
+}

package/cssm/typings-9211a437.d.ts

@@ -0,0 +1,95 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
+type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };

package/desktop-2e2b2125.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop-2e2b2125";
+export {};

package/esm/Component-9211a437.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { BaseButtonProps } from "./typings-9211a437";
+type SpinnerProps = {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "xs" | "s" | "m";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор компонента в DOM
+     */
+    id?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется спиннер
+     */
+    colors?: "default" | "inverted";
+};
+declare const Spinner: FC<SpinnerProps>;
+/**
+ * Минимальное время отображения лоадера - 500мс,
+ * чтобы при быстрых ответах от сервера кнопка не «моргала».
+ */
+declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
+declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { SpinnerProps, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };

package/esm/Component.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import React from 'react';
+import { KeyboardEvent, MouseEvent } from "react";
+import { BaseModalProps } from "@alfalab/core-components-base-modal";
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+type PopupSheetProps = Omit<BaseModalProps, 'onClose'> & {
+    /**
+     * Наличие кнопки закрытия
+     */
+    hasCloser?: boolean;
+    /**
+     * Будет ли свайпаться шторка
+     */
+    swipeable?: boolean;
+    /**
+     * Отступы
+     */
+    padding?: PaddingType;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe') => void;
+};
+declare const PopupSheet: React.ForwardRefExoticComponent<Omit<BaseModalProps, "onClose"> & {
+    /**
+     * Наличие кнопки закрытия
+     */
+    hasCloser?: boolean | undefined;
+    /**
+     * Будет ли свайпаться шторка
+     */
+    swipeable?: boolean | undefined;
+    /**
+     * Отступы
+     */
+    padding?: PaddingType | undefined;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: ((event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick' | 'swipe') => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { PopupSheetProps, PopupSheet };

package/esm/Component.desktop-2e2b2125.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
+type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
+declare const ButtonDesktop: React.ForwardRefExoticComponent<ButtonDesktopProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonDesktopProps, ButtonDesktop };

package/esm/Component.js

@@ -0,0 +1,130 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef, useState, useRef } from 'react';
+import { useSwipeable } from 'react-swipeable';
+import cn from 'classnames';
+import { BaseModal } from '@alfalab/core-components-base-modal/esm';
+import { Closer } from '@alfalab/core-components-navigation-bar/esm/shared';
+import { createPaddingStyle, getDataTestId, easingFns } from '@alfalab/core-components-shared/esm';
+import { PopupBackdrop } from './components/backdrop/Component.js';
+import '@alfalab/core-components-backdrop/esm';
+
+var styles = {"component":"popup-sheet__component_18ukp","closer":"popup-sheet__closer_18ukp","content":"popup-sheet__content_18ukp","appear":"popup-sheet__appear_18ukp","enter":"popup-sheet__enter_18ukp","appearActive":"popup-sheet__appearActive_18ukp","enterActive":"popup-sheet__enterActive_18ukp","exit":"popup-sheet__exit_18ukp","exitBySwipe":"popup-sheet__exitBySwipe_18ukp","exitActiveBySwipe":"popup-sheet__exitActiveBySwipe_18ukp","exitActive":"popup-sheet__exitActive_18ukp","exitDone":"popup-sheet__exitDone_18ukp"};
+require('./index.css')
+
+var SWIPE_VELOCITY = 0.3;
+var CLOSE_OFFSET = 0.3;
+var ANIMATION_DURATION = 350;
+var DEFAULT_PADDING = 32;
+var PopupSheet = forwardRef(function (_a, ref) {
+    var children = _a.children, hasCloser = _a.hasCloser, className = _a.className, onClose = _a.onClose, transitionProps = _a.transitionProps, contentProps = _a.contentProps, swipeable = _a.swipeable, dataTestId = _a.dataTestId, backdropProps = _a.backdropProps, _b = _a.padding, padding = _b === void 0 ? DEFAULT_PADDING : _b, restProps = __rest(_a, ["children", "hasCloser", "className", "onClose", "transitionProps", "contentProps", "swipeable", "dataTestId", "backdropProps", "padding"]);
+    var _c = useState(0), sheetOffset = _c[0], setSheetOffset = _c[1];
+    var _d = useState(1), backdropOpacity = _d[0], setBackdropOpacity = _d[1];
+    var sheetHeight = useRef(0);
+    var sheetRef = useRef(null);
+    var bySwipeCloseAnimation = useRef(false);
+    var getSheetOffset = function (deltaY) { return Math.max(0, deltaY); };
+    var getBackdropOpacity = function (offset) {
+        return Math.max(0, 1 - offset / sheetHeight.current);
+    };
+    var getSwipeStyles = function () {
+        return sheetOffset ? { transform: "translateY(".concat(sheetOffset, "px)") } : {};
+    };
+    var handleSwiping = function (_a) {
+        var deltaY = _a.deltaY;
+        var offset = getSheetOffset(deltaY);
+        setSheetOffset(offset);
+        setBackdropOpacity(getBackdropOpacity(offset));
+    };
+    var handleSwiped = function (_a) {
+        var deltaY = _a.deltaY, velocity = _a.velocity, event = _a.event;
+        var shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;
+        var shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;
+        var offset = sheetOffset;
+        var animDuration = ANIMATION_DURATION / 2;
+        var start;
+        if (shouldCloseByVelocity || shouldCloseByOffset) {
+            bySwipeCloseAnimation.current = true;
+            onClose === null || onClose === void 0 ? void 0 : onClose(event, 'swipe');
+            var runLoop_1 = function (timeStamp) {
+                if (!start)
+                    start = timeStamp;
+                var elapsedTime = timeStamp - start;
+                if (elapsedTime <= animDuration) {
+                    var nextOffset = offset +
+                        (sheetHeight.current - offset) *
+                            easingFns.easeInOutQuad(elapsedTime / animDuration);
+                    if (nextOffset > 0) {
+                        setSheetOffset(nextOffset);
+                    }
+                    requestAnimationFrame(runLoop_1);
+                }
+                else {
+                    setSheetOffset(0);
+                    bySwipeCloseAnimation.current = false;
+                }
+            };
+            requestAnimationFrame(runLoop_1);
+        }
+        else {
+            var runLoop_2 = function (timeStamp) {
+                if (!start)
+                    start = timeStamp;
+                var elapsedTime = timeStamp - start;
+                if (elapsedTime <= animDuration) {
+                    var nextOffset = offset - offset * easingFns.easeInOutQuad(elapsedTime / animDuration);
+                    if (nextOffset > 0) {
+                        setSheetOffset(nextOffset);
+                        setBackdropOpacity(getBackdropOpacity(nextOffset));
+                    }
+                    requestAnimationFrame(runLoop_2);
+                }
+                else {
+                    setSheetOffset(0);
+                    setBackdropOpacity(1);
+                }
+            };
+            requestAnimationFrame(runLoop_2);
+        }
+    };
+    var handleEntered = function (node, isAppearing) {
+        bySwipeCloseAnimation.current = false;
+        if (sheetRef.current) {
+            sheetHeight.current = sheetRef.current.offsetHeight;
+        }
+        if (transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.onEntered) {
+            transitionProps.onEntered(node, isAppearing);
+        }
+    };
+    var handleExited = function (node) {
+        bySwipeCloseAnimation.current = false;
+        setSheetOffset(0);
+        setBackdropOpacity(1);
+        if (transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.onExited) {
+            transitionProps.onExited(node);
+        }
+    };
+    var sheetSwipeableHandlers = useSwipeable({
+        onSwiping: handleSwiping,
+        onSwiped: handleSwiped,
+        trackMouse: swipeable,
+        trackTouch: swipeable,
+        delta: 5,
+    });
+    return (React.createElement(BaseModal, __assign({}, restProps, { onClose: onClose, ref: ref, className: cn(styles.component, className), dataTestId: dataTestId, Backdrop: PopupBackdrop, backdropProps: __assign(__assign({}, backdropProps), { opacity: backdropOpacity }), transitionProps: __assign(__assign({ classNames: {
+                enter: styles.enter,
+                appear: styles.appear,
+                enterActive: styles.enterActive,
+                appearActive: styles.appearActive,
+                exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,
+                exitActive: bySwipeCloseAnimation.current
+                    ? styles.exitActiveBySwipe
+                    : styles.exitActive,
+            }, timeout: ANIMATION_DURATION }, transitionProps), { onEntered: handleEntered, onExited: handleExited }), componentDivProps: {
+            ref: sheetRef,
+            style: getSwipeStyles(),
+        }, contentProps: __assign(__assign(__assign({ style: createPaddingStyle(padding) }, contentProps), sheetSwipeableHandlers), { className: cn(styles.content, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }) }),
+        hasCloser && (React.createElement(Closer, { view: 'mobile', className: styles.closer, onClick: onClose, dataTestId: getDataTestId(dataTestId, 'closer') })),
+        children));
+});
+
+export { PopupSheet };

package/esm/components/backdrop/Component.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { BackdropProps } from "@alfalab/core-components-backdrop";
+type PopupBackdropProps = BackdropProps & {
+    /**
+     * Прозрачность бэкдропа
+     */
+    opacity?: number;
+    /**
+     * Время анимации opacity
+     */
+    opacityTimeout?: number;
+};
+declare const PopupBackdrop: FC<BackdropProps>;
+export { PopupBackdropProps, PopupBackdrop };

package/esm/components/backdrop/Component.js

@@ -0,0 +1,14 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Backdrop } from '@alfalab/core-components-backdrop/esm';
+
+var styles = {"appear":"popup-sheet__appear_1kdlf","enter":"popup-sheet__enter_1kdlf","appearActive":"popup-sheet__appearActive_1kdlf","enterActive":"popup-sheet__enterActive_1kdlf","appearDone":"popup-sheet__appearDone_1kdlf","enterDone":"popup-sheet__enterDone_1kdlf","exit":"popup-sheet__exit_1kdlf","exitActive":"popup-sheet__exitActive_1kdlf","exitDone":"popup-sheet__exitDone_1kdlf"};
+require('./index.css')
+
+var PopupBackdrop = function (_a) {
+    var opacity = _a.opacity, opacityTimeout = _a.opacityTimeout, style = _a.style, backdropProps = __rest(_a, ["opacity", "opacityTimeout", "style"]);
+    return (React.createElement("div", { style: __assign({ opacity: opacity, transition: opacity === 1 ? "opacity ".concat(opacityTimeout, "ms ease-in-out") : '', position: 'relative' }, style) },
+        React.createElement(Backdrop, __assign({ transitionClassNames: styles }, backdropProps))));
+};
+
+export { PopupBackdrop };

package/esm/components/backdrop/index.css

@@ -0,0 +1,36 @@
+/* hash: 19vqu */
+:root {
+} /* deprecated */ :root {
+    --color-light-bg-overlay: rgba(0, 0, 0, 0.6); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
+} :root {
+    --backdrop-visible-background: var(--color-light-bg-overlay);
+    --backdrop-hidden-background: transparent;
+} .popup-sheet__appear_1kdlf,
+.popup-sheet__enter_1kdlf {
+    background-color: var(--backdrop-hidden-background);
+} .popup-sheet__appearActive_1kdlf,
+.popup-sheet__enterActive_1kdlf,
+.popup-sheet__appearDone_1kdlf,
+.popup-sheet__enterDone_1kdlf {
+    background-color: var(--backdrop-visible-background);
+    transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
+} .popup-sheet__exit_1kdlf {
+    background-color: var(--backdrop-visible-background);
+} .popup-sheet__exitActive_1kdlf,
+.popup-sheet__exitDone_1kdlf {
+    background-color: var(--backdrop-hidden-background);
+    transition: background-color 300ms cubic-bezier(0.65, 0, 0.35, 1);
+}

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

@@ -0,0 +1 @@
+export { PopupBackdrop } from "./Component";

package/esm/components/backdrop/index.js

@@ -0,0 +1,4 @@
+export { PopupBackdrop } from './Component.js';
+import 'tslib';
+import 'react';
+import '@alfalab/core-components-backdrop/esm';

package/esm/desktop-2e2b2125.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop-2e2b2125";
+export {};

package/esm/index-ebda875c.d.ts

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

package/esm/index.css

@@ -0,0 +1,53 @@
+/* hash: 1qn71 */
+:root {
+} /* 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-xs: 8px;
+} :root {
+} :root {
+} .popup-sheet__component_18ukp {
+    position: fixed;
+    bottom: 0;
+    margin: auto var(--gap-xs) var(--gap-xs);
+    width: calc(100% - 2 * var(--gap-xs));
+    max-width: 600px;
+    border-radius: 36px;
+    overflow: hidden;
+} .popup-sheet__closer_18ukp {
+    position: absolute;
+    top: 8px;
+    right: 8px
+} .popup-sheet__closer_18ukp > button {
+        -webkit-backdrop-filter: none;
+                backdrop-filter: none;
+    } .popup-sheet__content_18ukp {
+    box-sizing: border-box;
+} /* 100px нужны для того, чтобы фон успевал немного затемниться перед тем, как начнет выезжать шторка */ .popup-sheet__appear_18ukp,
+.popup-sheet__enter_18ukp {
+    transform: translateY(calc(100% + 100px));
+} .popup-sheet__appearActive_18ukp,
+.popup-sheet__enterActive_18ukp {
+    transform: translateY(0);
+    transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
+    transition-delay: 50ms;
+} .popup-sheet__exit_18ukp {
+    transform: translateY(0);
+} .popup-sheet__exitBySwipe_18ukp {
+    transform: translateY(calc(100% + 100px));
+} .popup-sheet__exitActiveBySwipe_18ukp {
+    transition: none;
+} .popup-sheet__exitActive_18ukp,
+.popup-sheet__exitDone_18ukp {
+    transform: translateY(calc(100% + 100px));
+    transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
+}

package/esm/index.d.ts

@@ -0,0 +1 @@
+export { PopupSheet, PopupSheetProps } from "./Component";

package/esm/index.js

@@ -0,0 +1,10 @@
+export { PopupSheet } from './Component.js';
+import 'tslib';
+import 'react';
+import 'react-swipeable';
+import 'classnames';
+import '@alfalab/core-components-base-modal/esm';
+import '@alfalab/core-components-navigation-bar/esm/shared';
+import '@alfalab/core-components-shared/esm';
+import './components/backdrop/Component.js';
+import '@alfalab/core-components-backdrop/esm';

package/esm/typings-9211a437.d.ts

@@ -0,0 +1,95 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
+type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };