@alfalab/core-components-bottom-sheet 2.0.1 → 3.0.0

package/CHANGELOG.md

@@ -3,6 +3,76 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-bottom-sheet@2.1.1...@alfalab/core-components-bottom-sheet@3.0.0) (2021-11-26)
+
+
+### Features
+
+* **button:** добавлена кнопка размера 40px, изменены скругления ([#886](https://github.com/alfa-laboratory/core-components/issues/886)) ([88e657a](https://github.com/alfa-laboratory/core-components/commit/88e657a9f0f68b8b58f6e9437053954ee984f83c)), closes [#890](https://github.com/alfa-laboratory/core-components/issues/890)
+
+
+### BREAKING CHANGES
+
+* **button:** Кнопка размера xs теперь имеет размер 40px. Тем, кто использовал размер xs, надо
+заменить размер  на xxs. Можно воспользоваться codemod.
+
+* feat(codemod): add button xs to xxs transformer
+
+* feat(tag): добавлен тэг размера 40px, изменены отступы
+
+Добавлен тэг размером 40px, изменены отступы. Тем, кто использовал размер xs, надо заменить размер
+на xxs.
+* **button:** Тэг размера xs теперь имеет размер 40px. Тем, кто использовал размер xs, надо
+заменить размер на xxs. Можно воспользоваться codemod.
+
+* test: update screenshots
+
+* test: update screenshots
+
+* feat(button): linter fix
+
+* feat(button): fix min-width
+
+* feat(tag): remove vertical paddings
+
+* feat(tag): remove vertical paddings
+
+* feat(button): updates
+
+
+
+
+
+## [2.1.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-bottom-sheet@2.1.0...@alfalab/core-components-bottom-sheet@2.1.1) (2021-09-14)
+
+
+### Bug Fixes
+
+* **base-modal:** modal scroll ([#820](https://github.com/alfa-laboratory/core-components/issues/820)) ([1b2d94a](https://github.com/alfa-laboratory/core-components/commit/1b2d94ad45e04145bf1292d749ae2028702dc622))
+
+
+
+
+
+# [2.1.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-bottom-sheet@2.0.2...@alfalab/core-components-bottom-sheet@2.1.0) (2021-07-23)
+
+
+### Features
+
+* **bottom-sheet:** fix marker gap, fix animation duration ([#750](https://github.com/alfa-laboratory/core-components/issues/750)) ([cb04ed8](https://github.com/alfa-laboratory/core-components/commit/cb04ed8cc214fac9dba32a0ab39a4399743d5bfc))
+
+
+
+
+
+## [2.0.2](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-bottom-sheet@2.0.1...@alfalab/core-components-bottom-sheet@2.0.2) (2021-07-19)
+
+**Note:** Version bump only for package @alfalab/core-components-bottom-sheet
+
+
+
+
+
 ## [2.0.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-bottom-sheet@2.0.0...@alfalab/core-components-bottom-sheet@2.0.1) (2021-07-09)
 
 **Note:** Version bump only for package @alfalab/core-components-bottom-sheet

package/dist/{Component-13357572.js → Component-e3bb3949.js}

@@ -47,11 +47,8 @@ function __rest(s, e) {
 }
 
 var SwipeableBackdrop = function (_a) {
-    var opacity = _a.opacity, handlers = _a.handlers, opacityTimeout = _a.opacityTimeout, backdropProps = __rest(_a, ["opacity", "handlers", "opacityTimeout"]);
-    return (React__default['default'].createElement("div", exports.__assign({}, handlers, { style: {
-            opacity: opacity,
-            transition: opacity === 1 ? "opacity " + opacityTimeout + "ms ease-in-out" : '',
-        } }),
+    var opacity = _a.opacity, handlers = _a.handlers, opacityTimeout = _a.opacityTimeout, style = _a.style, backdropProps = __rest(_a, ["opacity", "handlers", "opacityTimeout", "style"]);
+    return (React__default['default'].createElement("div", exports.__assign({}, handlers, { style: exports.__assign({ opacity: opacity, transition: opacity === 1 ? "opacity " + opacityTimeout + "ms ease-in-out" : '', position: 'relative' }, style) }),
         React__default['default'].createElement(coreComponentsBackdrop.Backdrop, exports.__assign({}, backdropProps))));
 };
 

package/dist/component.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_swipeableBackdrop_Component = require('./Component-13357572.js');
+var components_swipeableBackdrop_Component = require('./Component-e3bb3949.js');
 var React = require('react');
 var cn = require('classnames');
 var reactSwipeable = require('react-swipeable');
@@ -16,7 +16,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"modal":"bottom-sheet__modal_1kio3","component":"bottom-sheet__component_1kio3","withTransition":"bottom-sheet__withTransition_1kio3","marker":"bottom-sheet__marker_1kio3","scrollableContainer":"bottom-sheet__scrollableContainer_1kio3","withPadding":"bottom-sheet__withPadding_1kio3","content":"bottom-sheet__content_1kio3","title":"bottom-sheet__title_1kio3","scrollLocked":"bottom-sheet__scrollLocked_1kio3","appear":"bottom-sheet__appear_1kio3","enter":"bottom-sheet__enter_1kio3","appearActive":"bottom-sheet__appearActive_1kio3","enterActive":"bottom-sheet__enterActive_1kio3","enterDone":"bottom-sheet__enterDone_1kio3","appearDone":"bottom-sheet__appearDone_1kio3","exit":"bottom-sheet__exit_1kio3","exitActive":"bottom-sheet__exitActive_1kio3"};
+var styles = {"modal":"bottom-sheet__modal_p2g7f","component":"bottom-sheet__component_p2g7f","withTransition":"bottom-sheet__withTransition_p2g7f","marker":"bottom-sheet__marker_p2g7f","scrollableContainer":"bottom-sheet__scrollableContainer_p2g7f","withPadding":"bottom-sheet__withPadding_p2g7f","content":"bottom-sheet__content_p2g7f","title":"bottom-sheet__title_p2g7f","scrollLocked":"bottom-sheet__scrollLocked_p2g7f","appear":"bottom-sheet__appear_p2g7f","enter":"bottom-sheet__enter_p2g7f","appearActive":"bottom-sheet__appearActive_p2g7f","enterActive":"bottom-sheet__enterActive_p2g7f","enterDone":"bottom-sheet__enterDone_p2g7f","appearDone":"bottom-sheet__appearDone_p2g7f","exit":"bottom-sheet__exit_p2g7f","exitActive":"bottom-sheet__exitActive_p2g7f"};
 require('./index.css')
 
 var TIMEOUT = 300;

package/dist/components/footer/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"footer":"bottom-sheet__footer_qx44t","highlighted":"bottom-sheet__highlighted_qx44t"};
+var styles = {"footer":"bottom-sheet__footer_dbwxf","highlighted":"bottom-sheet__highlighted_dbwxf"};
 require('./index.css')
 
 var Footer = function (_a) {

package/dist/components/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: qx44t */
+/* hash: 18aaf */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -15,12 +15,12 @@
     --gap-m: 16px;
     --gap-3xl: 40px;
 }
-.bottom-sheet__footer_qx44t {
+.bottom-sheet__footer_dbwxf {
     position: sticky;
     bottom: 0;
     padding: var(--gap-m) var(--gap-m) var(--gap-3xl);
     background-color: var(--color-light-bg-primary);
 }
-.bottom-sheet__highlighted_qx44t {
+.bottom-sheet__highlighted_dbwxf {
     box-shadow: var(--shadow-s-up);
 }

package/dist/components/swipeable-backdrop/Component.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_swipeableBackdrop_Component = require('../../Component-13357572.js');
+var components_swipeableBackdrop_Component = require('../../Component-e3bb3949.js');
 require('react');
 require('@alfalab/core-components-backdrop');
 

package/dist/cssm/{Component-3a3629ef.js → Component-24200d96.js}

@@ -47,11 +47,8 @@ function __rest(s, e) {
 }
 
 var SwipeableBackdrop = function (_a) {
-    var opacity = _a.opacity, handlers = _a.handlers, opacityTimeout = _a.opacityTimeout, backdropProps = __rest(_a, ["opacity", "handlers", "opacityTimeout"]);
-    return (React__default['default'].createElement("div", exports.__assign({}, handlers, { style: {
-            opacity: opacity,
-            transition: opacity === 1 ? "opacity " + opacityTimeout + "ms ease-in-out" : '',
-        } }),
+    var opacity = _a.opacity, handlers = _a.handlers, opacityTimeout = _a.opacityTimeout, style = _a.style, backdropProps = __rest(_a, ["opacity", "handlers", "opacityTimeout", "style"]);
+    return (React__default['default'].createElement("div", exports.__assign({}, handlers, { style: exports.__assign({ opacity: opacity, transition: opacity === 1 ? "opacity " + opacityTimeout + "ms ease-in-out" : '', position: 'relative' }, style) }),
         React__default['default'].createElement(coreComponentsBackdrop.Backdrop, exports.__assign({}, backdropProps))));
 };
 

package/dist/cssm/component.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_swipeableBackdrop_Component = require('./Component-3a3629ef.js');
+var components_swipeableBackdrop_Component = require('./Component-24200d96.js');
 var React = require('react');
 var cn = require('classnames');
 var reactSwipeable = require('react-swipeable');

package/dist/cssm/components/swipeable-backdrop/Component.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_swipeableBackdrop_Component = require('../../Component-3a3629ef.js');
+var components_swipeableBackdrop_Component = require('../../Component-24200d96.js');
 require('react');
 require('@alfalab/core-components-backdrop/dist/cssm');
 

package/dist/cssm/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./Component-3a3629ef.js');
+require('./Component-24200d96.js');
 require('react');
 require('classnames');
 require('react-swipeable');

package/dist/cssm/index.module.css

@@ -12,13 +12,13 @@
     /* Hard up */
 }
 :root {
-    --gap-2xs: 4px;
+    --gap-xs: 8px;
     --gap-m: 16px;
     --gap-xl: 24px;
     --gap-2xl: 32px;
 }
 :root {
-    --bottom-sheet-in-transition: 0.7s cubic-bezier(0.09, 0.91, 0.18, 0.99);
+    --bottom-sheet-in-transition: 0.5s cubic-bezier(0.09, 0.91, 0.18, 0.99);
     --bottom-sheet-out-transition: 0.3s ease;
 }
 .modal {
@@ -43,7 +43,7 @@
 }
 .marker {
     position: absolute;
-    top: var(--gap-2xs);
+    top: var(--gap-xs);
     left: 50%;
     width: 36px;
     height: 4px;

package/dist/esm/{Component-ac22cf12.js → Component-949ec7bb.js}

@@ -41,11 +41,8 @@ function __rest(s, e) {
 }
 
 var SwipeableBackdrop = function (_a) {
-    var opacity = _a.opacity, handlers = _a.handlers, opacityTimeout = _a.opacityTimeout, backdropProps = __rest(_a, ["opacity", "handlers", "opacityTimeout"]);
-    return (React.createElement("div", __assign({}, handlers, { style: {
-            opacity: opacity,
-            transition: opacity === 1 ? "opacity " + opacityTimeout + "ms ease-in-out" : '',
-        } }),
+    var opacity = _a.opacity, handlers = _a.handlers, opacityTimeout = _a.opacityTimeout, style = _a.style, backdropProps = __rest(_a, ["opacity", "handlers", "opacityTimeout", "style"]);
+    return (React.createElement("div", __assign({}, handlers, { style: __assign({ opacity: opacity, transition: opacity === 1 ? "opacity " + opacityTimeout + "ms ease-in-out" : '', position: 'relative' }, style) }),
         React.createElement(Backdrop, __assign({}, backdropProps))));
 };
 

package/dist/esm/component.js

@@ -1,4 +1,4 @@
-import { S as SwipeableBackdrop, _ as __assign } from './Component-ac22cf12.js';
+import { S as SwipeableBackdrop, _ as __assign } from './Component-949ec7bb.js';
 import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import { useSwipeable } from 'react-swipeable';
@@ -7,7 +7,7 @@ import { Typography } from '@alfalab/core-components-typography/dist/esm';
 import { Footer } from './components/footer/Component.js';
 import '@alfalab/core-components-backdrop/dist/esm';
 
-var styles = {"modal":"bottom-sheet__modal_1kio3","component":"bottom-sheet__component_1kio3","withTransition":"bottom-sheet__withTransition_1kio3","marker":"bottom-sheet__marker_1kio3","scrollableContainer":"bottom-sheet__scrollableContainer_1kio3","withPadding":"bottom-sheet__withPadding_1kio3","content":"bottom-sheet__content_1kio3","title":"bottom-sheet__title_1kio3","scrollLocked":"bottom-sheet__scrollLocked_1kio3","appear":"bottom-sheet__appear_1kio3","enter":"bottom-sheet__enter_1kio3","appearActive":"bottom-sheet__appearActive_1kio3","enterActive":"bottom-sheet__enterActive_1kio3","enterDone":"bottom-sheet__enterDone_1kio3","appearDone":"bottom-sheet__appearDone_1kio3","exit":"bottom-sheet__exit_1kio3","exitActive":"bottom-sheet__exitActive_1kio3"};
+var styles = {"modal":"bottom-sheet__modal_p2g7f","component":"bottom-sheet__component_p2g7f","withTransition":"bottom-sheet__withTransition_p2g7f","marker":"bottom-sheet__marker_p2g7f","scrollableContainer":"bottom-sheet__scrollableContainer_p2g7f","withPadding":"bottom-sheet__withPadding_p2g7f","content":"bottom-sheet__content_p2g7f","title":"bottom-sheet__title_p2g7f","scrollLocked":"bottom-sheet__scrollLocked_p2g7f","appear":"bottom-sheet__appear_p2g7f","enter":"bottom-sheet__enter_p2g7f","appearActive":"bottom-sheet__appearActive_p2g7f","enterActive":"bottom-sheet__enterActive_p2g7f","enterDone":"bottom-sheet__enterDone_p2g7f","appearDone":"bottom-sheet__appearDone_p2g7f","exit":"bottom-sheet__exit_p2g7f","exitActive":"bottom-sheet__exitActive_p2g7f"};
 require('./index.css')
 
 var TIMEOUT = 300;

package/dist/esm/components/footer/Component.js

@@ -2,7 +2,7 @@ import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import { BaseModalContext } from '@alfalab/core-components-base-modal/dist/esm';
 
-var styles = {"footer":"bottom-sheet__footer_qx44t","highlighted":"bottom-sheet__highlighted_qx44t"};
+var styles = {"footer":"bottom-sheet__footer_dbwxf","highlighted":"bottom-sheet__highlighted_dbwxf"};
 require('./index.css')
 
 var Footer = function (_a) {

package/dist/esm/components/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: qx44t */
+/* hash: 18aaf */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -15,12 +15,12 @@
     --gap-m: 16px;
     --gap-3xl: 40px;
 }
-.bottom-sheet__footer_qx44t {
+.bottom-sheet__footer_dbwxf {
     position: sticky;
     bottom: 0;
     padding: var(--gap-m) var(--gap-m) var(--gap-3xl);
     background-color: var(--color-light-bg-primary);
 }
-.bottom-sheet__highlighted_qx44t {
+.bottom-sheet__highlighted_dbwxf {
     box-shadow: var(--shadow-s-up);
 }

package/dist/esm/components/swipeable-backdrop/Component.js

@@ -1,3 +1,3 @@
-export { S as SwipeableBackdrop } from '../../Component-ac22cf12.js';
+export { S as SwipeableBackdrop } from '../../Component-949ec7bb.js';
 import 'react';
 import '@alfalab/core-components-backdrop/dist/esm';

package/dist/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1kio3 */
+/* hash: 1bvaw */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-graphic-neutral: #dbdee1;
@@ -13,23 +13,23 @@
     /* Hard up */
 }
 :root {
-    --gap-2xs: 4px;
+    --gap-xs: 8px;
     --gap-m: 16px;
     --gap-xl: 24px;
     --gap-2xl: 32px;
 }
 :root {
-    --bottom-sheet-in-transition: 0.7s cubic-bezier(0.09, 0.91, 0.18, 0.99);
+    --bottom-sheet-in-transition: 0.5s cubic-bezier(0.09, 0.91, 0.18, 0.99);
     --bottom-sheet-out-transition: 0.3s ease;
 }
-.bottom-sheet__modal_1kio3 {
+.bottom-sheet__modal_p2g7f {
     background-color: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     max-width: 600px;
 }
-.bottom-sheet__component_1kio3 {
+.bottom-sheet__component_p2g7f {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -39,12 +39,12 @@
     background: var(--color-light-bg-primary);
     transform: translateY(100%);
 }
-.bottom-sheet__withTransition_1kio3 {
+.bottom-sheet__withTransition_p2g7f {
     transition: var(--bottom-sheet-out-transition);
 }
-.bottom-sheet__marker_1kio3 {
+.bottom-sheet__marker_p2g7f {
     position: absolute;
-    top: var(--gap-2xs);
+    top: var(--gap-xs);
     left: 50%;
     width: 36px;
     height: 4px;
@@ -52,41 +52,41 @@
     transform: translateX(-50%);
     background-color: var(--color-light-graphic-neutral);
 }
-.bottom-sheet__scrollableContainer_1kio3 {
+.bottom-sheet__scrollableContainer_p2g7f {
     overflow: auto;
     padding-top: var(--gap-2xl);
 }
-.bottom-sheet__withPadding_1kio3 {
+.bottom-sheet__withPadding_p2g7f {
     padding-bottom: var(--gap-xl);
 }
-.bottom-sheet__content_1kio3 {
+.bottom-sheet__content_p2g7f {
     display: flex;
     flex-direction: column;
     flex: 1;
     padding: 0 var(--gap-m) var(--gap-m);
     color: var(--color-light-text-primary);
 }
-.bottom-sheet__title_1kio3 {
+.bottom-sheet__title_p2g7f {
     margin-bottom: var(--gap-xl);
     padding: 0 var(--gap-m);
 }
-.bottom-sheet__scrollLocked_1kio3 {
+.bottom-sheet__scrollLocked_p2g7f {
     overflow: hidden;
 }
-.bottom-sheet__appear_1kio3 .bottom-sheet__component_1kio3, .bottom-sheet__enter_1kio3 .bottom-sheet__component_1kio3 {
+.bottom-sheet__appear_p2g7f .bottom-sheet__component_p2g7f, .bottom-sheet__enter_p2g7f .bottom-sheet__component_p2g7f {
         transition: none;
     }
-.bottom-sheet__appearActive_1kio3 .bottom-sheet__component_1kio3, .bottom-sheet__enterActive_1kio3 .bottom-sheet__component_1kio3 {
+.bottom-sheet__appearActive_p2g7f .bottom-sheet__component_p2g7f, .bottom-sheet__enterActive_p2g7f .bottom-sheet__component_p2g7f {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
     }
-.bottom-sheet__enterDone_1kio3 .bottom-sheet__component_1kio3, .bottom-sheet__appearDone_1kio3 .bottom-sheet__component_1kio3 {
+.bottom-sheet__enterDone_p2g7f .bottom-sheet__component_p2g7f, .bottom-sheet__appearDone_p2g7f .bottom-sheet__component_p2g7f {
         transform: translateY(0);
     }
-.bottom-sheet__exit_1kio3 .bottom-sheet__component_1kio3 {
+.bottom-sheet__exit_p2g7f .bottom-sheet__component_p2g7f {
         transform: translateY(0);
     }
-.bottom-sheet__exitActive_1kio3 .bottom-sheet__component_1kio3 {
+.bottom-sheet__exitActive_p2g7f .bottom-sheet__component_p2g7f {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
     }

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import './Component-ac22cf12.js';
+import './Component-949ec7bb.js';
 import 'react';
 import 'classnames';
 import 'react-swipeable';

package/dist/index.css

@@ -1,4 +1,4 @@
-/* hash: 1kio3 */
+/* hash: 1bvaw */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-graphic-neutral: #dbdee1;
@@ -13,23 +13,23 @@
     /* Hard up */
 }
 :root {
-    --gap-2xs: 4px;
+    --gap-xs: 8px;
     --gap-m: 16px;
     --gap-xl: 24px;
     --gap-2xl: 32px;
 }
 :root {
-    --bottom-sheet-in-transition: 0.7s cubic-bezier(0.09, 0.91, 0.18, 0.99);
+    --bottom-sheet-in-transition: 0.5s cubic-bezier(0.09, 0.91, 0.18, 0.99);
     --bottom-sheet-out-transition: 0.3s ease;
 }
-.bottom-sheet__modal_1kio3 {
+.bottom-sheet__modal_p2g7f {
     background-color: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     max-width: 600px;
 }
-.bottom-sheet__component_1kio3 {
+.bottom-sheet__component_p2g7f {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -39,12 +39,12 @@
     background: var(--color-light-bg-primary);
     transform: translateY(100%);
 }
-.bottom-sheet__withTransition_1kio3 {
+.bottom-sheet__withTransition_p2g7f {
     transition: var(--bottom-sheet-out-transition);
 }
-.bottom-sheet__marker_1kio3 {
+.bottom-sheet__marker_p2g7f {
     position: absolute;
-    top: var(--gap-2xs);
+    top: var(--gap-xs);
     left: 50%;
     width: 36px;
     height: 4px;
@@ -52,41 +52,41 @@
     transform: translateX(-50%);
     background-color: var(--color-light-graphic-neutral);
 }
-.bottom-sheet__scrollableContainer_1kio3 {
+.bottom-sheet__scrollableContainer_p2g7f {
     overflow: auto;
     padding-top: var(--gap-2xl);
 }
-.bottom-sheet__withPadding_1kio3 {
+.bottom-sheet__withPadding_p2g7f {
     padding-bottom: var(--gap-xl);
 }
-.bottom-sheet__content_1kio3 {
+.bottom-sheet__content_p2g7f {
     display: flex;
     flex-direction: column;
     flex: 1;
     padding: 0 var(--gap-m) var(--gap-m);
     color: var(--color-light-text-primary);
 }
-.bottom-sheet__title_1kio3 {
+.bottom-sheet__title_p2g7f {
     margin-bottom: var(--gap-xl);
     padding: 0 var(--gap-m);
 }
-.bottom-sheet__scrollLocked_1kio3 {
+.bottom-sheet__scrollLocked_p2g7f {
     overflow: hidden;
 }
-.bottom-sheet__appear_1kio3 .bottom-sheet__component_1kio3, .bottom-sheet__enter_1kio3 .bottom-sheet__component_1kio3 {
+.bottom-sheet__appear_p2g7f .bottom-sheet__component_p2g7f, .bottom-sheet__enter_p2g7f .bottom-sheet__component_p2g7f {
         transition: none;
     }
-.bottom-sheet__appearActive_1kio3 .bottom-sheet__component_1kio3, .bottom-sheet__enterActive_1kio3 .bottom-sheet__component_1kio3 {
+.bottom-sheet__appearActive_p2g7f .bottom-sheet__component_p2g7f, .bottom-sheet__enterActive_p2g7f .bottom-sheet__component_p2g7f {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
     }
-.bottom-sheet__enterDone_1kio3 .bottom-sheet__component_1kio3, .bottom-sheet__appearDone_1kio3 .bottom-sheet__component_1kio3 {
+.bottom-sheet__enterDone_p2g7f .bottom-sheet__component_p2g7f, .bottom-sheet__appearDone_p2g7f .bottom-sheet__component_p2g7f {
         transform: translateY(0);
     }
-.bottom-sheet__exit_1kio3 .bottom-sheet__component_1kio3 {
+.bottom-sheet__exit_p2g7f .bottom-sheet__component_p2g7f {
         transform: translateY(0);
     }
-.bottom-sheet__exitActive_1kio3 .bottom-sheet__component_1kio3 {
+.bottom-sheet__exitActive_p2g7f .bottom-sheet__component_p2g7f {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
     }

package/dist/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./Component-13357572.js');
+require('./Component-e3bb3949.js');
 require('react');
 require('classnames');
 require('react-swipeable');

package/dist/modern/component.js

@@ -7,7 +7,7 @@ import { Footer } from './components/footer/Component.js';
 import '@alfalab/core-components-backdrop/dist/modern';
 import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
 
-var styles = {"modal":"bottom-sheet__modal_1kio3","component":"bottom-sheet__component_1kio3","withTransition":"bottom-sheet__withTransition_1kio3","marker":"bottom-sheet__marker_1kio3","scrollableContainer":"bottom-sheet__scrollableContainer_1kio3","withPadding":"bottom-sheet__withPadding_1kio3","content":"bottom-sheet__content_1kio3","title":"bottom-sheet__title_1kio3","scrollLocked":"bottom-sheet__scrollLocked_1kio3","appear":"bottom-sheet__appear_1kio3","enter":"bottom-sheet__enter_1kio3","appearActive":"bottom-sheet__appearActive_1kio3","enterActive":"bottom-sheet__enterActive_1kio3","enterDone":"bottom-sheet__enterDone_1kio3","appearDone":"bottom-sheet__appearDone_1kio3","exit":"bottom-sheet__exit_1kio3","exitActive":"bottom-sheet__exitActive_1kio3"};
+var styles = {"modal":"bottom-sheet__modal_p2g7f","component":"bottom-sheet__component_p2g7f","withTransition":"bottom-sheet__withTransition_p2g7f","marker":"bottom-sheet__marker_p2g7f","scrollableContainer":"bottom-sheet__scrollableContainer_p2g7f","withPadding":"bottom-sheet__withPadding_p2g7f","content":"bottom-sheet__content_p2g7f","title":"bottom-sheet__title_p2g7f","scrollLocked":"bottom-sheet__scrollLocked_p2g7f","appear":"bottom-sheet__appear_p2g7f","enter":"bottom-sheet__enter_p2g7f","appearActive":"bottom-sheet__appearActive_p2g7f","enterActive":"bottom-sheet__enterActive_p2g7f","enterDone":"bottom-sheet__enterDone_p2g7f","appearDone":"bottom-sheet__appearDone_p2g7f","exit":"bottom-sheet__exit_p2g7f","exitActive":"bottom-sheet__exitActive_p2g7f"};
 require('./index.css')
 
 const TIMEOUT = 300;

package/dist/modern/components/footer/Component.js

@@ -2,7 +2,7 @@ import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import { BaseModalContext } from '@alfalab/core-components-base-modal/dist/modern';
 
-var styles = {"footer":"bottom-sheet__footer_qx44t","highlighted":"bottom-sheet__highlighted_qx44t"};
+var styles = {"footer":"bottom-sheet__footer_dbwxf","highlighted":"bottom-sheet__highlighted_dbwxf"};
 require('./index.css')
 
 const Footer = ({ children, className }) => {

package/dist/modern/components/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: qx44t */
+/* hash: 18aaf */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -15,12 +15,12 @@
     --gap-m: 16px;
     --gap-3xl: 40px;
 }
-.bottom-sheet__footer_qx44t {
+.bottom-sheet__footer_dbwxf {
     position: sticky;
     bottom: 0;
     padding: var(--gap-m) var(--gap-m) var(--gap-3xl);
     background-color: var(--color-light-bg-primary);
 }
-.bottom-sheet__highlighted_qx44t {
+.bottom-sheet__highlighted_dbwxf {
     box-shadow: var(--shadow-s-up);
 }

package/dist/modern/components/swipeable-backdrop/Component.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Backdrop } from '@alfalab/core-components-backdrop/dist/modern';
 
-const SwipeableBackdrop = ({ opacity, handlers, opacityTimeout, ...backdropProps }) => (React.createElement("div", Object.assign({}, handlers, { style: {
+const SwipeableBackdrop = ({ opacity, handlers, opacityTimeout, style, ...backdropProps }) => (React.createElement("div", Object.assign({}, handlers, { style: {
         opacity,
         transition: opacity === 1 ? `opacity ${opacityTimeout}ms ease-in-out` : '',
+        position: 'relative',
+        ...style,
     } }),
     React.createElement(Backdrop, Object.assign({}, backdropProps))));
 

package/dist/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1kio3 */
+/* hash: 1bvaw */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-graphic-neutral: #dbdee1;
@@ -13,23 +13,23 @@
     /* Hard up */
 }
 :root {
-    --gap-2xs: 4px;
+    --gap-xs: 8px;
     --gap-m: 16px;
     --gap-xl: 24px;
     --gap-2xl: 32px;
 }
 :root {
-    --bottom-sheet-in-transition: 0.7s cubic-bezier(0.09, 0.91, 0.18, 0.99);
+    --bottom-sheet-in-transition: 0.5s cubic-bezier(0.09, 0.91, 0.18, 0.99);
     --bottom-sheet-out-transition: 0.3s ease;
 }
-.bottom-sheet__modal_1kio3 {
+.bottom-sheet__modal_p2g7f {
     background-color: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     max-width: 600px;
 }
-.bottom-sheet__component_1kio3 {
+.bottom-sheet__component_p2g7f {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -39,12 +39,12 @@
     background: var(--color-light-bg-primary);
     transform: translateY(100%);
 }
-.bottom-sheet__withTransition_1kio3 {
+.bottom-sheet__withTransition_p2g7f {
     transition: var(--bottom-sheet-out-transition);
 }
-.bottom-sheet__marker_1kio3 {
+.bottom-sheet__marker_p2g7f {
     position: absolute;
-    top: var(--gap-2xs);
+    top: var(--gap-xs);
     left: 50%;
     width: 36px;
     height: 4px;
@@ -52,41 +52,41 @@
     transform: translateX(-50%);
     background-color: var(--color-light-graphic-neutral);
 }
-.bottom-sheet__scrollableContainer_1kio3 {
+.bottom-sheet__scrollableContainer_p2g7f {
     overflow: auto;
     padding-top: var(--gap-2xl);
 }
-.bottom-sheet__withPadding_1kio3 {
+.bottom-sheet__withPadding_p2g7f {
     padding-bottom: var(--gap-xl);
 }
-.bottom-sheet__content_1kio3 {
+.bottom-sheet__content_p2g7f {
     display: flex;
     flex-direction: column;
     flex: 1;
     padding: 0 var(--gap-m) var(--gap-m);
     color: var(--color-light-text-primary);
 }
-.bottom-sheet__title_1kio3 {
+.bottom-sheet__title_p2g7f {
     margin-bottom: var(--gap-xl);
     padding: 0 var(--gap-m);
 }
-.bottom-sheet__scrollLocked_1kio3 {
+.bottom-sheet__scrollLocked_p2g7f {
     overflow: hidden;
 }
-.bottom-sheet__appear_1kio3 .bottom-sheet__component_1kio3, .bottom-sheet__enter_1kio3 .bottom-sheet__component_1kio3 {
+.bottom-sheet__appear_p2g7f .bottom-sheet__component_p2g7f, .bottom-sheet__enter_p2g7f .bottom-sheet__component_p2g7f {
         transition: none;
     }
-.bottom-sheet__appearActive_1kio3 .bottom-sheet__component_1kio3, .bottom-sheet__enterActive_1kio3 .bottom-sheet__component_1kio3 {
+.bottom-sheet__appearActive_p2g7f .bottom-sheet__component_p2g7f, .bottom-sheet__enterActive_p2g7f .bottom-sheet__component_p2g7f {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
     }
-.bottom-sheet__enterDone_1kio3 .bottom-sheet__component_1kio3, .bottom-sheet__appearDone_1kio3 .bottom-sheet__component_1kio3 {
+.bottom-sheet__enterDone_p2g7f .bottom-sheet__component_p2g7f, .bottom-sheet__appearDone_p2g7f .bottom-sheet__component_p2g7f {
         transform: translateY(0);
     }
-.bottom-sheet__exit_1kio3 .bottom-sheet__component_1kio3 {
+.bottom-sheet__exit_p2g7f .bottom-sheet__component_p2g7f {
         transform: translateY(0);
     }
-.bottom-sheet__exitActive_1kio3 .bottom-sheet__component_1kio3 {
+.bottom-sheet__exitActive_p2g7f .bottom-sheet__component_p2g7f {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-bottom-sheet",
-    "version": "2.0.1",
+    "version": "3.0.0",
     "description": "Bottom sheet mobile component",
     "keywords": [],
     "license": "MIT",
@@ -21,11 +21,11 @@
     },
     "dependencies": {
         "@alfalab/core-components-backdrop": "^2.0.1",
-        "@alfalab/core-components-base-modal": "^3.0.1",
-        "@alfalab/core-components-typography": "^2.0.1",
+        "@alfalab/core-components-base-modal": "^3.0.2",
+        "@alfalab/core-components-typography": "^2.2.0",
         "classnames": "^2.2.6",
         "react-swipeable": "^5.5.0",
         "react-transition-group": "^4.3.0"
     },
-    "gitHead": "0934905ac76c93940e8dd2b0ea9bb3131908ac00"
+    "gitHead": "10c9fd1caacf98a5c15f84529889ddf41e9e1b54"
 }