@prom-ui/core 0.0.142 → 0.1.0

package/Media/breakpoints.d.ts

@@ -6,7 +6,7 @@ export declare const SCREEN_BREAKPOINTS: {
     wide: number;
     huge: number;
 };
-export declare type tSCREEN_BREAKPOINTS = keyof typeof SCREEN_BREAKPOINTS;
+export type tSCREEN_BREAKPOINTS = keyof typeof SCREEN_BREAKPOINTS;
 export declare const SCREEN_BREAKPOINTS_PROXY: {
     small: number;
     medium: number;

package/Media/cjs/index.development.js

@@ -1,16 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var reactResponsive = require('react-responsive');
 var React = require('react');
 var PropTypes = require('prop-types');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
 var MIN_SCREEN_WIDTH = 1;
 var SCREEN_BREAKPOINTS = {
   small: 480,
@@ -60,7 +53,7 @@ var MediaProvider = function (_a) {
       setValue(undefined);
     }
   }, []);
-  return React__default["default"].createElement(reactResponsive.Context.Provider, {
+  return React.createElement(reactResponsive.Context.Provider, {
     value: value
   }, children);
 };
@@ -68,9 +61,9 @@ var MediaProvider = function (_a) {
 //     resetOnMount: false,
 // };
 MediaProvider.propTypes = {
-  resetOnMount: PropTypes__default["default"].bool,
+  resetOnMount: PropTypes.bool,
   // children: PropTypes.node.isRequired,
-  width: PropTypes__default["default"].oneOf(['small', 'medium', 'large', 'wide', 'huge'])
+  width: PropTypes.oneOf(['small', 'medium', 'large', 'wide', 'huge'])
 };
 
 var Media = function (_a) {

package/Media/cjs/index.development.v2.js

@@ -1,16 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var reactResponsive = require('react-responsive');
 var React = require('react');
 var PropTypes = require('prop-types');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
 var MIN_SCREEN_WIDTH = 1;
 var SCREEN_BREAKPOINTS = {
   small: 480,
@@ -60,7 +53,7 @@ var MediaProvider = function (_a) {
       setValue(undefined);
     }
   }, []);
-  return React__default["default"].createElement(reactResponsive.Context.Provider, {
+  return React.createElement(reactResponsive.Context.Provider, {
     value: value
   }, children);
 };
@@ -68,9 +61,9 @@ var MediaProvider = function (_a) {
 //     resetOnMount: false,
 // };
 MediaProvider.propTypes = {
-  resetOnMount: PropTypes__default["default"].bool,
+  resetOnMount: PropTypes.bool,
   // children: PropTypes.node.isRequired,
-  width: PropTypes__default["default"].oneOf(['small', 'medium', 'large', 'wide', 'huge'])
+  width: PropTypes.oneOf(['small', 'medium', 'large', 'wide', 'huge'])
 };
 
 var Media = function (_a) {

package/Media/cjs/index.production.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react-responsive"),t=require("react"),r=require("prop-types");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(t),o=i(r),u={small:480,medium:768,large:960,wide:1200,huge:1400},d=new Proxy(u,{get:function(e,t){if(!e.hasOwnProperty(t)){var r=JSON.stringify(Object.keys(e));throw new Error('Media received unknown width "'.concat(t,'". You should use one of ').concat(r))}return e[t]}}),a=function(e){return"production"!==process.env.NODE_ENV?d[e]:u[e]},s=function(t){var r=t.minWidth,i=t.maxWidth;return e.useMediaQuery({minWidth:r?a(r):1,maxWidth:i?a(i)-1:void 0})},c=function(r){var i=r.resetOnMount,o=void 0!==i&&i,u=r.width,d=r.children,s=t.useState({width:u?a(u):1}),c=s[0],l=s[1];return t.useEffect((function(){o&&l(void 0)}),[]),n.default.createElement(e.Context.Provider,{value:c},d)};c.propTypes={resetOnMount:o.default.bool,width:o.default.oneOf(["small","medium","large","wide","huge"])};exports.Media=function(e){var t=e.minWidth,r=e.maxWidth,i=e.children;return s({minWidth:t,maxWidth:r})?i:null},exports.MediaProvider=c,exports.useMedia=s;
+"use strict";var e=require("react-responsive"),r=require("react"),t=require("prop-types"),i={small:480,medium:768,large:960,wide:1200,huge:1400},n=new Proxy(i,{get:function(e,r){if(!e.hasOwnProperty(r)){var t=JSON.stringify(Object.keys(e));throw new Error('Media received unknown width "'.concat(r,'". You should use one of ').concat(t))}return e[r]}}),o=function(e){return"production"!==process.env.NODE_ENV?n[e]:i[e]},u=function(r){var t=r.minWidth,i=r.maxWidth;return e.useMediaQuery({minWidth:t?o(t):1,maxWidth:i?o(i)-1:void 0})},d=function(t){var i=t.resetOnMount,n=void 0!==i&&i,u=t.width,d=t.children,a=r.useState({width:u?o(u):1}),s=a[0],c=a[1];return r.useEffect((function(){n&&c(void 0)}),[]),r.createElement(e.Context.Provider,{value:s},d)};d.propTypes={resetOnMount:t.bool,width:t.oneOf(["small","medium","large","wide","huge"])};exports.Media=function(e){var r=e.minWidth,t=e.maxWidth,i=e.children;return u({minWidth:r,maxWidth:t})?i:null},exports.MediaProvider=d,exports.useMedia=u;

package/Media/cjs/index.production.v2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react-responsive"),t=require("react"),r=require("prop-types");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(t),o=i(r),u={small:480,medium:768,large:960,wide:1200,huge:1400},d=new Proxy(u,{get:function(e,t){if(!e.hasOwnProperty(t)){var r=JSON.stringify(Object.keys(e));throw new Error('Media received unknown width "'.concat(t,'". You should use one of ').concat(r))}return e[t]}}),a=function(e){return"production"!==process.env.NODE_ENV?d[e]:u[e]},s=function(t){var r=t.minWidth,i=t.maxWidth;return e.useMediaQuery({minWidth:r?a(r):1,maxWidth:i?a(i)-1:void 0})},c=function(r){var i=r.resetOnMount,o=void 0!==i&&i,u=r.width,d=r.children,s=t.useState({width:u?a(u):1}),c=s[0],l=s[1];return t.useEffect((function(){o&&l(void 0)}),[]),n.default.createElement(e.Context.Provider,{value:c},d)};c.propTypes={resetOnMount:o.default.bool,width:o.default.oneOf(["small","medium","large","wide","huge"])};exports.Media=function(e){var t=e.minWidth,r=e.maxWidth,i=e.children;return s({minWidth:t,maxWidth:r})?i:null},exports.MediaProvider=c,exports.useMedia=s;
+"use strict";var e=require("react-responsive"),r=require("react"),t=require("prop-types"),i={small:480,medium:768,large:960,wide:1200,huge:1400},n=new Proxy(i,{get:function(e,r){if(!e.hasOwnProperty(r)){var t=JSON.stringify(Object.keys(e));throw new Error('Media received unknown width "'.concat(r,'". You should use one of ').concat(t))}return e[r]}}),o=function(e){return"production"!==process.env.NODE_ENV?n[e]:i[e]},u=function(r){var t=r.minWidth,i=r.maxWidth;return e.useMediaQuery({minWidth:t?o(t):1,maxWidth:i?o(i)-1:void 0})},d=function(t){var i=t.resetOnMount,n=void 0!==i&&i,u=t.width,d=t.children,a=r.useState({width:u?o(u):1}),s=a[0],c=a[1];return r.useEffect((function(){n&&c(void 0)}),[]),r.createElement(e.Context.Provider,{value:s},d)};d.propTypes={resetOnMount:t.bool,width:t.oneOf(["small","medium","large","wide","huge"])};exports.Media=function(e){var r=e.minWidth,t=e.maxWidth,i=e.children;return u({minWidth:r,maxWidth:t})?i:null},exports.MediaProvider=d,exports.useMedia=u;

package/Media/context.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { tSCREEN_BREAKPOINTS } from './breakpoints';
-export declare type MediaProviderProps = {
+export type MediaProviderProps = {
     children?: React.ReactNode;
     resetOnMount?: boolean;
     width?: tSCREEN_BREAKPOINTS;

package/Media/index.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { tSCREEN_BREAKPOINTS } from './breakpoints';
 import { useMedia } from './useMedia';
 import { MediaProvider } from './context';
-export declare type MediaProps = {
+export type MediaProps = {
     minWidth?: tSCREEN_BREAKPOINTS;
     maxWidth?: tSCREEN_BREAKPOINTS;
     /** React children */

package/Media/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Media",
-  "version": "0.0.142",
+  "version": "0.1.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Media/useMedia.d.ts

@@ -1,5 +1,5 @@
 import { tSCREEN_BREAKPOINTS } from './breakpoints';
-declare type tUseMedia = (arg: {
+type tUseMedia = (arg: {
     minWidth?: tSCREEN_BREAKPOINTS;
     maxWidth?: tSCREEN_BREAKPOINTS;
 }) => boolean;

package/OutsideClick/cjs/index.development.js

@@ -1,12 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var useOutsideClick = require('@prom-ui/hooks/useOutsideClick');
 
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -19,11 +16,11 @@ function _interopNamespace(e) {
             }
         });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.

package/OutsideClick/cjs/index.development.v2.js

@@ -1,12 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var useOutsideClick = require('@prom-ui/hooks/useOutsideClick');
 
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -19,11 +16,11 @@ function _interopNamespace(e) {
             }
         });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.

package/OutsideClick/cjs/index.production.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@prom-ui/hooks/useOutsideClick");function t(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=t(e),i=function(){return i=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var i in r=arguments[t])Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i]);return e},i.apply(this,arguments)};exports.OutsideClick=function(e){var t=e.children,o=e.isActive,c=void 0===o||o,u=e.onClick,l=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)r.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(t[n[i]]=e[n[i]])}return t}(e,["children","isActive","onClick"]),a=r.useOutsideClick(u)[0];return c?n.createElement("div",i({},l,{ref:a}),t):n.createElement("div",null,t)};
+"use strict";var e=require("react"),t=require("@prom-ui/hooks/useOutsideClick");function r(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=r(e),i=function(){return i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};exports.OutsideClick=function(e){var r=e.children,c=e.isActive,o=void 0===c||c,l=e.onClick,u=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r}(e,["children","isActive","onClick"]),a=t.useOutsideClick(l)[0];return o?n.createElement("div",i({},u,{ref:a}),r):n.createElement("div",null,r)};

package/OutsideClick/cjs/index.production.v2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@prom-ui/hooks/useOutsideClick");function t(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=t(e),i=function(){return i=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var i in r=arguments[t])Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i]);return e},i.apply(this,arguments)};exports.OutsideClick=function(e){var t=e.children,o=e.isActive,c=void 0===o||o,u=e.onClick,l=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)r.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(t[n[i]]=e[n[i]])}return t}(e,["children","isActive","onClick"]),a=r.useOutsideClick(u)[0];return c?n.createElement("div",i({},l,{ref:a}),t):n.createElement("div",null,t)};
+"use strict";var e=require("react"),t=require("@prom-ui/hooks/useOutsideClick");function r(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=r(e),i=function(){return i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};exports.OutsideClick=function(e){var r=e.children,c=e.isActive,o=void 0===c||c,l=e.onClick,u=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r}(e,["children","isActive","onClick"]),a=t.useOutsideClick(l)[0];return o?n.createElement("div",i({},u,{ref:a}),r):n.createElement("div",null,r)};

package/OutsideClick/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type OutsideClickProps = {
+type OutsideClickProps = {
     /** React children */
     children?: React.ReactNode;
     /** Если передать `false` компонент перестанет работать */

package/OutsideClick/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/OutsideClick",
-  "version": "0.0.142",
+  "version": "0.1.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Overlay/cjs/index.development.js

@@ -1,14 +1,13 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var ScrollLock = require('react-scrolllock');
+var reactTransitionGroup = require('react-transition-group');
+var classNames = require('classnames');
+var Backdrop = require('@prom-ui/core/Backdrop');
 var KeyPress = require('@prom-ui/core/KeyPress');
 var Portal = require('@prom-ui/core/Portal');
 var Media = require('@prom-ui/core/Media');
-var evokit = require('evokit');
-var reactTransitionGroup = require('react-transition-group');
 var Button = require('@prom-ui/core/Button');
 var Icon = require('@prom-ui/core/Icon');
 var Text = require('@prom-ui/core/Text');
@@ -18,10 +17,7 @@ var ArrowBack = require('@prom-ui/icons/ArrowBack');
 var utils = require('react-scrolllock/dist/utils');
 var Swipe = require('react-easy-swipe');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -34,14 +30,11 @@ function _interopNamespace(e) {
             }
         });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var ScrollLock__default = /*#__PURE__*/_interopDefaultLegacy(ScrollLock);
-var Swipe__default = /*#__PURE__*/_interopDefaultLegacy(Swipe);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -88,33 +81,6 @@ function __makeTemplateObject(cooked, raw) {
 
 var css = {"root":"Overlay__root___v0oYp","backdrop":"Overlay__backdrop___RvRWz","popup":"Overlay__popup___elIqJ","popup_placement_top":"Overlay__popup_placement_top___Llv4b","popup_placement_bottom":"Overlay__popup_placement_bottom___DJyNc","popup_placement_right":"Overlay__popup_placement_right___4DX3c","popup_placement_left":"Overlay__popup_placement_left___OwkR7","content":"Overlay__content___5qQ0k","header":"Overlay__header___LIk9z","header__grid":"Overlay__header__grid___SShy4","header__item":"Overlay__header__item___9fUzS","header__title":"Overlay__header__title___Vuilz Overlay__header__item___9fUzS","header__action":"Overlay__header__action___c-A8d Overlay__header__item___9fUzS","header__actionButton":"Overlay__header__actionButton___yYG24","header__actionIcon":"Overlay__header__actionIcon___La2ok","footer":"Overlay__footer___3Ca-G","enter":"Overlay__enter___OjeZp","exit":"Overlay__exit___HiHMU","enterActive":"Overlay__enterActive___Ne-Vn","exitActive":"Overlay__exitActive___6f7f1"};
 
-var BLOCKS_PRESET = {
-  css: css,
-  b: ''
-};
-var Root = evokit.createBlock('div', 'root', [], BLOCKS_PRESET);
-var Backdrop = evokit.createBlock('div', 'backdrop', [], BLOCKS_PRESET);
-var Popup = evokit.createBlock('div', 'popup', ['placement'], BLOCKS_PRESET);
-var OverlayContent = evokit.createBlock('div', 'content', [], BLOCKS_PRESET);
-var Animate = function (_a) {
-  var _b = _a.open,
-    open = _b === void 0 ? false : _b,
-    children = _a.children,
-    _c = _a.enabled,
-    enabled = _c === void 0 ? true : _c,
-    onEnter = _a.onEnter,
-    onEntered = _a.onEntered,
-    onExited = _a.onExited;
-  return React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
-    in: open,
-    timeout: enabled ? 225 : 0,
-    classNames: css,
-    unmountOnExit: true,
-    onEnter: onEnter,
-    onEntered: onEntered,
-    onExited: onExited
-  }, children);
-};
 var OverlayHeader = function (_a) {
   var isShowPrevButton = _a.isShowPrevButton,
     isShowCloseButton = _a.isShowCloseButton,
@@ -123,65 +89,46 @@ var OverlayHeader = function (_a) {
     onClose = _a.onClose,
     onPrev = _a.onPrev;
   var t = BodyProvider.useBodyLocale().t;
-  return React__default["default"].createElement("div", {
+  return React.createElement("header", {
     className: css.header
-  }, typeof children !== 'undefined' ? children : React__default["default"].createElement("div", {
+  }, typeof children !== 'undefined' ? children : React.createElement("div", {
     className: css.header__grid
-  }, React__default["default"].createElement("div", {
+  }, React.createElement("div", {
     className: css.header__action
-  }, isShowPrevButton && React__default["default"].createElement(Button.Button, {
+  }, isShowPrevButton && React.createElement(Button.Button, {
     className: css.header__actionButton,
     "button-theme": 'black-inherit',
     type: 'button',
     onClick: onPrev,
     "aria-label": t(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\u041D\u0430\u0437\u0430\u0434"], ["\u041D\u0430\u0437\u0430\u0434"]))),
     "data-qaid": 'prev'
-  }, React__default["default"].createElement(Icon.Icon, {
+  }, React.createElement(Icon.Icon, {
     "icon-as": ArrowBack.ArrowBack,
     className: css.header__actionIcon
-  }))), React__default["default"].createElement("div", {
+  }))), React.createElement("div", {
     className: css.header__title
-  }, typeof title === 'string' ? React__default["default"].createElement(Text.Text, {
+  }, typeof title === 'string' ? React.createElement(Text.Text, {
     "text-align": 'center',
     "text-size": 'h4',
     "text-wrap": 'ellipsis',
     "text-weight": 'bold',
     "data-qaid": 'title'
-  }, title) : title), React__default["default"].createElement("div", {
+  }, title) : title), React.createElement("div", {
     className: css.header__action
-  }, isShowCloseButton && onClose && React__default["default"].createElement(Button.Button, {
+  }, isShowCloseButton && onClose && React.createElement(Button.Button, {
     className: css.header__actionButton,
     "button-theme": 'black-inherit',
     type: 'button',
     onClick: onClose,
     "aria-label": t(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\u0417\u0430\u043A\u0440\u044B\u0442\u044C"], ["\u0417\u0430\u043A\u0440\u044B\u0442\u044C"]))),
     "data-qaid": 'close'
-  }, React__default["default"].createElement(Icon.Icon, {
+  }, React.createElement(Icon.Icon, {
     "icon-as": Close.Close,
     className: css.header__actionIcon
   })))));
 };
-var OverlayFooter = function (_a) {
-  var children = _a.children;
-  return React__default["default"].createElement("div", {
-    className: css.footer
-  }, children);
-};
 var templateObject_1, templateObject_2;
 
-var getPopupStyle = function (placement, size, maxSize) {
-  if (['top', 'bottom'].includes(placement)) {
-    return {
-      height: size,
-      maxHeight: maxSize
-    };
-  }
-  return {
-    width: size,
-    maxWidth: maxSize
-  };
-};
-
 // FORK FROM https://github.com/jossmac/react-scrolllock/blob/master/src/TouchScrollable.js
 var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
 /* @ts-ignore */
@@ -295,7 +242,7 @@ var SwipeClose = function (_a) {
       });
       setStyle(contentRef.current, {
         'pointer-events': "none",
-        'overflow': 'hidden'
+        overflow: 'hidden'
       });
     }
   };
@@ -307,7 +254,7 @@ var SwipeClose = function (_a) {
       });
       setStyle(contentRef.current, {
         'pointer-events': null,
-        'overflow': null
+        overflow: null
       });
       setTimeout(function () {
         setStyle(rootRef.current, {
@@ -323,13 +270,30 @@ var SwipeClose = function (_a) {
     isAllowSwipe.current = null;
     isAllowClose.current = false;
   };
-  return React__namespace.createElement(Swipe__default["default"], {
+  return React__namespace.createElement(Swipe, {
     onSwipeMove: onSwipeMove,
     onSwipeEnd: onSwipeEnd
   }, children);
 };
 
+var getPopupStyle = function (placement, size, maxSize) {
+  if (['top', 'bottom'].includes(placement)) {
+    return {
+      height: size,
+      maxHeight: maxSize
+    };
+  }
+  return {
+    width: size,
+    maxWidth: maxSize
+  };
+};
+
 var DEFAULT_SIZE = 400;
+/**
+ * Компонент используется для создания оверлея (накладывающегося слоя) на верху содержимого.
+ * Он может использоваться, например, для создания модальных окон, выпадающих списков и других элементов интерфейса.
+ */
 var Overlay = function (_a) {
   var children = _a.children,
     onClose = _a.onClose,
@@ -391,12 +355,19 @@ var Overlay = function (_a) {
   if (placement === 'adaptive') {
     currentPlacement = isMinWidthMedium ? 'right' : 'bottom';
   }
-  return React__namespace.createElement(Animate, {
-    open: isOpen,
+  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(Backdrop.Backdrop, {
+    isOpen: isOpen,
+    isAnimated: isAnimated,
+    zIndex: zIndex - 1,
+    isRenderPortal: isRenderPortal
+  }), React__namespace.createElement(reactTransitionGroup.CSSTransition, {
+    in: isOpen,
+    timeout: isAnimated ? 225 : 0,
+    classNames: css,
+    unmountOnExit: true,
     onEnter: onOpen,
     onEntered: onOpened,
-    onExited: onClosed,
-    enabled: isAnimated
+    onExited: onClosed
   }, React__namespace.createElement(Portal.Portal, {
     isActive: isRenderPortal
   }, React__namespace.createElement(SwipeClose, {
@@ -405,27 +376,29 @@ var Overlay = function (_a) {
     contentRef: currentContentRef,
     placement: currentPlacement,
     onClose: onClose
-  }, React__namespace.createElement(Root, __assign({
+  }, React__namespace.createElement("div", __assign({
+    className: css.root,
     role: 'presentation',
     style: {
       zIndex: zIndex
     }
-  }, props), React__namespace.createElement(ScrollLock__default["default"], {
+  }, props), React__namespace.createElement(ScrollLock, {
     isActive: isScrollLock
   }), React__namespace.createElement(KeyPress.KeyPress, {
     isActive: isCloseOnEscape,
     code: 'Escape',
     onKeyDown: onClose
-  }), React__namespace.createElement(Backdrop, {
+  }), React__namespace.createElement("div", {
+    className: css.backdrop,
     "aria-hidden": true,
     onClick: function (e) {
       if (isCloseOutsideClick && onClose) {
         onClose(e);
       }
     }
-  }), React__namespace.createElement(Popup, {
+  }), React__namespace.createElement("div", {
     ref: popupRef,
-    "popup-placement": currentPlacement,
+    className: classNames(css.popup, css["popup_placement_".concat(currentPlacement)]),
     "aria-modal": true,
     role: 'dialog',
     style: getPopupStyle(currentPlacement, currentSize, maxSize),
@@ -436,15 +409,18 @@ var Overlay = function (_a) {
     onClose: onClose,
     onPrev: onPrev,
     title: title
-  }, header), React__namespace.createElement(OverlayFooter, null, footer), React__namespace.createElement(TouchScrollable, {
+  }, header), React__namespace.createElement("footer", {
+    className: css.footer
+  }, footer), React__namespace.createElement(TouchScrollable, {
     isActive: isScrollLockTouch,
     scrollRef: currentContentRef
-  }, React__namespace.createElement(OverlayContent, {
+  }, React__namespace.createElement("div", {
+    className: css.content,
     ref: currentContentRef,
     style: {
       padding: padding
     }
-  }, children)))))));
+  }, children))))))));
 };
 
 exports.Overlay = Overlay;