@webiny/app-admin 5.43.2 → 6.0.0-alpha.0

package/components/OverlayLayout/OverlayLayout.d.ts

@@ -1,22 +1,12 @@
-import * as React from "react";
-import { ExitHandler } from "react-transition-group/Transition";
-export interface OverlayLayoutProps {
+import React from "react";
+import type { ExitHandler } from "react-transition-group/Transition";
+import { overlayHeaderVariants } from "./components";
+import type { VariantProps } from "@webiny/admin-ui";
+export interface OverlayLayoutProps extends VariantProps<typeof overlayHeaderVariants> {
     barMiddle?: React.ReactNode;
     barLeft?: React.ReactNode;
     barRight?: React.ReactNode;
     children: React.ReactNode;
     onExited?: ExitHandler<HTMLElement>;
-    style?: React.CSSProperties;
 }
-interface OverlayLayoutState {
-    isVisible: boolean;
-}
-export declare class OverlayLayout extends React.Component<OverlayLayoutProps, OverlayLayoutState> {
-    constructor(props: OverlayLayoutProps);
-    static defaultProps: Partial<OverlayLayoutProps>;
-    state: OverlayLayoutState;
-    hideComponent(): void;
-    componentWillUnmount(): void;
-    render(): React.JSX.Element;
-}
-export {};
+export declare const OverlayLayout: React.FC<OverlayLayoutProps>;

package/components/OverlayLayout/OverlayLayout.js

@@ -1,151 +1,46 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.OverlayLayout = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var React = _interopRequireWildcard(require("react"));
-var _reactTransitionGroup = require("react-transition-group");
-var _emotion = require("emotion");
-var _TopAppBar = require("@webiny/ui/TopAppBar");
-var _Button = require("@webiny/ui/Button");
-var _noop = _interopRequireDefault(require("lodash/noop"));
-var _close = require("@material-design-icons/svg/outlined/close.svg");
-var _OverlayView = require("../../ui/views/OverlayView");
-var _excluded = ["onExited", "barLeft", "barMiddle", "barRight", "children", "style"];
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var OverlayLayoutWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e1inqa580"
-} : {
-  target: "e1inqa580",
-  label: "OverlayLayoutWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "7upthd",
-  styles: "position:fixed;width:100%;height:100vh;background-color:var(--mdc-theme-background);z-index:21;padding-top:65px;top:0;left:0"
-} : {
-  name: "7upthd",
-  styles: "position:fixed;width:100%;height:100vh;background-color:var(--mdc-theme-background);z-index:21;padding-top:65px;top:0;left:0",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk92ZXJsYXlMYXlvdXQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVk2QiIsImZpbGUiOiJPdmVybGF5TGF5b3V0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgVHJhbnNpdGlvbiB9IGZyb20gXCJyZWFjdC10cmFuc2l0aW9uLWdyb3VwXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJlbW90aW9uXCI7XG5pbXBvcnQgeyBUb3BBcHBCYXJTZWNvbmRhcnksIFRvcEFwcEJhclNlY3Rpb24gfSBmcm9tIFwiQHdlYmlueS91aS9Ub3BBcHBCYXJcIjtcbmltcG9ydCB7IEljb25CdXR0b24gfSBmcm9tIFwiQHdlYmlueS91aS9CdXR0b25cIjtcbmltcG9ydCBub29wIGZyb20gXCJsb2Rhc2gvbm9vcFwiO1xuXG5pbXBvcnQgeyBSZWFjdENvbXBvbmVudCBhcyBDbG9zZUljb24gfSBmcm9tIFwiQG1hdGVyaWFsLWRlc2lnbi1pY29ucy9zdmcvb3V0bGluZWQvY2xvc2Uuc3ZnXCI7XG5pbXBvcnQgeyBPdmVybGF5VmlldyB9IGZyb20gXCJ+L3VpL3ZpZXdzL092ZXJsYXlWaWV3XCI7XG5pbXBvcnQgeyBFeGl0SGFuZGxlciB9IGZyb20gXCJyZWFjdC10cmFuc2l0aW9uLWdyb3VwL1RyYW5zaXRpb25cIjtcblxuY29uc3QgT3ZlcmxheUxheW91dFdyYXBwZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHBvc2l0aW9uOiBcImZpeGVkXCIsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGhlaWdodDogXCIxMDB2aFwiLFxuICAgIGJhY2tncm91bmRDb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtYmFja2dyb3VuZClcIixcbiAgICAvKipcbiAgICAgKiBIYXMgdG8gYmUgaGlnaGVyIHRoYW4gNSBzbyBpdCdzIGFib3ZlIGFkdmFuY2VkIHNldHRpbmdzIGRpYWxvZyxcbiAgICAgKiBhbmQgYmVsb3cgMjAsIHNvIHRoZSBpbWFnZSBlZGl0b3IgJiBEaWFsb2dzIGNhbiBiZSBkaXNwbGF5ZWQgYWJvdmUuXG4gICAgICovXG4gICAgekluZGV4OiAyMSxcbiAgICBwYWRkaW5nVG9wOiA2NSxcbiAgICB0b3A6IDAsXG4gICAgbGVmdDogMFxufSk7XG5cbmNvbnN0IG5vU2Nyb2xsID0gY3NzKHtcbiAgICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgICBoZWlnaHQ6IFwiMTAwdmhcIlxufSk7XG5cbmNvbnN0IGRlZmF1bHRTdHlsZSA9IHtcbiAgICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWSg3NXZoKVwiLFxuICAgIG9wYWNpdHk6IDAsXG4gICAgdHJhbnNpdGlvblByb3BlcnR5OiBcInRyYW5zZm9ybSwgb3BhY2l0eVwiLFxuICAgIHRyYW5zaXRpb25UaW1pbmdGdW5jdGlvbjogXCJjdWJpYy1iZXppZXIoMCwgMCwgLjIsIDEpXCIsXG4gICAgdHJhbnNpdGlvbkR1cmF0aW9uOiBcIjIyNW1zXCIsXG4gICAgd2lsbENoYW5nZTogXCJvcGFjaXR5LCB0cmFuc2Zvcm1cIlxufTtcblxuY29uc3QgdHJhbnNpdGlvblN0eWxlczogUmVjb3JkPHN0cmluZywgYW55PiA9IHtcbiAgICBlbnRlcmluZzoge1xuICAgICAgICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWSg3NXZoKVwiLFxuICAgICAgICBvcGFjaXR5OiAwXG4gICAgfSxcbiAgICBlbnRlcmVkOiB7XG4gICAgICAgIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGVZKDBweClcIixcbiAgICAgICAgb3BhY2l0eTogMVxuICAgIH1cbn07XG5cbmV4cG9ydCBpbnRlcmZhY2UgT3ZlcmxheUxheW91dFByb3BzIHtcbiAgICBiYXJNaWRkbGU/OiBSZWFjdC5SZWFjdE5vZGU7XG4gICAgYmFyTGVmdD86IFJlYWN0LlJlYWN0Tm9kZTtcbiAgICBiYXJSaWdodD86IFJlYWN0LlJlYWN0Tm9kZTtcbiAgICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xuICAgIG9uRXhpdGVkPzogRXhpdEhhbmRsZXI8SFRNTEVsZW1lbnQ+O1xuICAgIHN0eWxlPzogUmVhY3QuQ1NTUHJvcGVydGllcztcbn1cblxuaW50ZXJmYWNlIE92ZXJsYXlMYXlvdXRTdGF0ZSB7XG4gICAgaXNWaXNpYmxlOiBib29sZWFuO1xufVxuXG5leHBvcnQgY2xhc3MgT3ZlcmxheUxheW91dCBleHRlbmRzIFJlYWN0LkNvbXBvbmVudDxPdmVybGF5TGF5b3V0UHJvcHMsIE92ZXJsYXlMYXlvdXRTdGF0ZT4ge1xuICAgIGNvbnN0cnVjdG9yKHByb3BzOiBPdmVybGF5TGF5b3V0UHJvcHMpIHtcbiAgICAgICAgc3VwZXIocHJvcHMpO1xuICAgICAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5hZGQobm9TY3JvbGwpO1xuICAgIH1cblxuICAgIHN0YXRpYyBkZWZhdWx0UHJvcHM6IFBhcnRpYWw8T3ZlcmxheUxheW91dFByb3BzPiA9IHtcbiAgICAgICAgb25FeGl0ZWQ6IG5vb3BcbiAgICB9O1xuXG4gICAgcHVibGljIG92ZXJyaWRlIHN0YXRlOiBPdmVybGF5TGF5b3V0U3RhdGUgPSB7XG4gICAgICAgIGlzVmlzaWJsZTogdHJ1ZVxuICAgIH07XG5cbiAgICBwdWJsaWMgaGlkZUNvbXBvbmVudCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5zZXRTdGF0ZSh7IGlzVmlzaWJsZTogZmFsc2UgfSk7XG4gICAgICAgIGlmIChPdmVybGF5Vmlldy5vcGVuZWRWaWV3cyA9PT0gMCkge1xuICAgICAgICAgICAgZG9jdW1lbnQuYm9keS5jbGFzc0xpc3QucmVtb3ZlKG5vU2Nyb2xsKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHB1YmxpYyBvdmVycmlkZSBjb21wb25lbnRXaWxsVW5tb3VudCgpOiB2b2lkIHtcbiAgICAgICAgaWYgKE92ZXJsYXlWaWV3Lm9wZW5lZFZpZXdzID09PSAwKSB7XG4gICAgICAgICAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5yZW1vdmUobm9TY3JvbGwpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHVibGljIG92ZXJyaWRlIHJlbmRlcigpIHtcbiAgICAgICAgY29uc3QgeyBvbkV4aXRlZCwgYmFyTGVmdCwgYmFyTWlkZGxlLCBiYXJSaWdodCwgY2hpbGRyZW4sIHN0eWxlLCAuLi5yZXN0IH0gPSB0aGlzLnByb3BzO1xuXG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8VHJhbnNpdGlvbiBpbj17dGhpcy5zdGF0ZS5pc1Zpc2libGV9IHRpbWVvdXQ9ezEwMH0gYXBwZWFyIG9uRXhpdGVkPXtvbkV4aXRlZH0+XG4gICAgICAgICAgICAgICAge3N0YXRlID0+IChcbiAgICAgICAgICAgICAgICAgICAgPE92ZXJsYXlMYXlvdXRXcmFwcGVyXG4gICAgICAgICAgICAgICAgICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgICAgICAgICAgICAgICAgIHN0eWxlPXt7IC4uLmRlZmF1bHRTdHlsZSwgLi4uc3R5bGUsIC4uLnRyYW5zaXRpb25TdHlsZXNbc3RhdGVdIH19XG4gICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxUb3BBcHBCYXJTZWNvbmRhcnkgZml4ZWQgc3R5bGU9e3sgdG9wOiAwIH19PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxUb3BBcHBCYXJTZWN0aW9uIHN0eWxlPXt7IHdpZHRoOiBcIjMzJVwiIH19IGFsaWduU3RhcnQ+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtiYXJMZWZ0fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvVG9wQXBwQmFyU2VjdGlvbj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8VG9wQXBwQmFyU2VjdGlvbiBzdHlsZT17eyB3aWR0aDogXCIzMyVcIiB9fT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge2Jhck1pZGRsZX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L1RvcEFwcEJhclNlY3Rpb24+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPFRvcEFwcEJhclNlY3Rpb24gc3R5bGU9e3sgd2lkdGg6IFwiMzMlXCIgfX0gYWxpZ25FbmQ+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtiYXJSaWdodH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJpcHBsZT17ZmFsc2V9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB0aGlzLmhpZGVDb21wb25lbnQoKX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGljb249ezxDbG9zZUljb24gc3R5bGU9e3sgd2lkdGg6IDI0LCBoZWlnaHQ6IDI0IH19IC8+fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvVG9wQXBwQmFyU2VjdGlvbj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvVG9wQXBwQmFyU2Vjb25kYXJ5PlxuXG4gICAgICAgICAgICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICAgICAgICAgIDwvT3ZlcmxheUxheW91dFdyYXBwZXI+XG4gICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvVHJhbnNpdGlvbj5cbiAgICAgICAgKTtcbiAgICB9XG59XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var noScroll = (0, _emotion.css)({
-  overflow: "hidden",
-  height: "100vh"
-});
-var defaultStyle = {
-  transform: "translateY(75vh)",
-  opacity: 0,
-  transitionProperty: "transform, opacity",
-  transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
-  transitionDuration: "225ms",
-  willChange: "opacity, transform"
-};
-var transitionStyles = {
-  entering: {
-    transform: "translateY(75vh)",
-    opacity: 0
-  },
-  entered: {
-    transform: "translateY(0px)",
-    opacity: 1
-  }
-};
-var OverlayLayout = exports.OverlayLayout = /*#__PURE__*/function (_React$Component) {
-  function OverlayLayout(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, OverlayLayout);
-    _this = (0, _callSuper2.default)(this, OverlayLayout, [props]);
-    (0, _defineProperty2.default)(_this, "state", {
-      isVisible: true
-    });
-    document.body.classList.add(noScroll);
-    return _this;
-  }
-  (0, _inherits2.default)(OverlayLayout, _React$Component);
-  return (0, _createClass2.default)(OverlayLayout, [{
-    key: "hideComponent",
-    value: function hideComponent() {
-      this.setState({
-        isVisible: false
-      });
-      if (_OverlayView.OverlayView.openedViews === 0) {
-        document.body.classList.remove(noScroll);
-      }
+import React, { useCallback, useEffect, useState } from "react";
+import noop from "lodash/noop";
+import { OverlayView } from "../../ui/views/OverlayView";
+import { OverlayBackdrop, OverlayContent, OverlayHeader, OverlayRoot } from "./components";
+const noScrollBodyClassNames = ["wby-overflow-hidden", "wby-h-screen"];
+export const OverlayLayout = ({
+  barMiddle,
+  barLeft,
+  barRight,
+  children,
+  onExited = noop,
+  variant
+}) => {
+  const [visible, setVisible] = useState(true);
+  const hideOverlay = useCallback(() => {
+    setVisible(false);
+    if (OverlayView.openedViews === 0) {
+      noScrollBodyClassNames.forEach(className => document.body.classList.remove(className));
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (_OverlayView.OverlayView.openedViews === 0) {
-        document.body.classList.remove(noScroll);
+  }, []);
+  useEffect(() => {
+    noScrollBodyClassNames.forEach(className => document.body.classList.add(className));
+    return () => {
+      if (OverlayView.openedViews === 0) {
+        noScrollBodyClassNames.forEach(className => document.body.classList.remove(className));
       }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        onExited = _this$props.onExited,
-        barLeft = _this$props.barLeft,
-        barMiddle = _this$props.barMiddle,
-        barRight = _this$props.barRight,
-        children = _this$props.children,
-        style = _this$props.style,
-        rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      return /*#__PURE__*/React.createElement(_reactTransitionGroup.Transition, {
-        in: this.state.isVisible,
-        timeout: 100,
-        appear: true,
-        onExited: onExited
-      }, function (state) {
-        return /*#__PURE__*/React.createElement(OverlayLayoutWrapper, Object.assign({}, rest, {
-          style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultStyle), style), transitionStyles[state])
-        }), /*#__PURE__*/React.createElement(_TopAppBar.TopAppBarSecondary, {
-          fixed: true,
-          style: {
-            top: 0
-          }
-        }, /*#__PURE__*/React.createElement(_TopAppBar.TopAppBarSection, {
-          style: {
-            width: "33%"
-          },
-          alignStart: true
-        }, barLeft), /*#__PURE__*/React.createElement(_TopAppBar.TopAppBarSection, {
-          style: {
-            width: "33%"
-          }
-        }, barMiddle), /*#__PURE__*/React.createElement(_TopAppBar.TopAppBarSection, {
-          style: {
-            width: "33%"
-          },
-          alignEnd: true
-        }, barRight, /*#__PURE__*/React.createElement(_Button.IconButton, {
-          ripple: false,
-          onClick: function onClick() {
-            return _this2.hideComponent();
-          },
-          icon: /*#__PURE__*/React.createElement(_close.ReactComponent, {
-            style: {
-              width: 24,
-              height: 24
-            }
-          })
-        }))), children);
-      });
-    }
-  }]);
-}(React.Component);
-(0, _defineProperty2.default)(OverlayLayout, "defaultProps", {
-  onExited: _noop.default
-});
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(OverlayRoot, {
+    visible: visible,
+    onExited: onExited
+  }, /*#__PURE__*/React.createElement(OverlayBackdrop, {
+    visible: visible,
+    hideOverlay: hideOverlay
+  }), /*#__PURE__*/React.createElement(OverlayContent, {
+    visible: visible
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OverlayHeader, {
+    start: barLeft,
+    middle: barMiddle,
+    end: barRight,
+    variant: variant,
+    hideOverlay: hideOverlay
+  }), children)));
+};
 
 //# sourceMappingURL=OverlayLayout.js.map

package/components/OverlayLayout/OverlayLayout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_reactTransitionGroup","_emotion","_TopAppBar","_Button","_noop","_interopRequireDefault","_close","_OverlayView","_excluded","_EMOTION_STRINGIFIED_CSS_ERROR__","OverlayLayoutWrapper","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","noScroll","css","overflow","height","defaultStyle","transform","opacity","transitionProperty","transitionTimingFunction","transitionDuration","willChange","transitionStyles","entering","entered","OverlayLayout","exports","_React$Component","props","_this","_classCallCheck2","_callSuper2","_defineProperty2","isVisible","document","body","classList","add","_inherits2","_createClass2","key","value","hideComponent","setState","OverlayView","openedViews","remove","componentWillUnmount","render","_this2","_this$props","onExited","barLeft","barMiddle","barRight","children","style","rest","_objectWithoutProperties2","createElement","Transition","in","state","timeout","appear","Object","assign","_objectSpread2","TopAppBarSecondary","fixed","top","TopAppBarSection","width","alignStart","alignEnd","IconButton","ripple","onClick","icon","ReactComponent","Component","noop"],"sources":["OverlayLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Transition } from \"react-transition-group\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { TopAppBarSecondary, TopAppBarSection } from \"@webiny/ui/TopAppBar\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport noop from \"lodash/noop\";\n\nimport { ReactComponent as CloseIcon } from \"@material-design-icons/svg/outlined/close.svg\";\nimport { OverlayView } from \"~/ui/views/OverlayView\";\nimport { ExitHandler } from \"react-transition-group/Transition\";\n\nconst OverlayLayoutWrapper = styled(\"div\")({\n    position: \"fixed\",\n    width: \"100%\",\n    height: \"100vh\",\n    backgroundColor: \"var(--mdc-theme-background)\",\n    /**\n     * Has to be higher than 5 so it's above advanced settings dialog,\n     * and below 20, so the image editor & Dialogs can be displayed above.\n     */\n    zIndex: 21,\n    paddingTop: 65,\n    top: 0,\n    left: 0\n});\n\nconst noScroll = css({\n    overflow: \"hidden\",\n    height: \"100vh\"\n});\n\nconst defaultStyle = {\n    transform: \"translateY(75vh)\",\n    opacity: 0,\n    transitionProperty: \"transform, opacity\",\n    transitionTimingFunction: \"cubic-bezier(0, 0, .2, 1)\",\n    transitionDuration: \"225ms\",\n    willChange: \"opacity, transform\"\n};\n\nconst transitionStyles: Record<string, any> = {\n    entering: {\n        transform: \"translateY(75vh)\",\n        opacity: 0\n    },\n    entered: {\n        transform: \"translateY(0px)\",\n        opacity: 1\n    }\n};\n\nexport interface OverlayLayoutProps {\n    barMiddle?: React.ReactNode;\n    barLeft?: React.ReactNode;\n    barRight?: React.ReactNode;\n    children: React.ReactNode;\n    onExited?: ExitHandler<HTMLElement>;\n    style?: React.CSSProperties;\n}\n\ninterface OverlayLayoutState {\n    isVisible: boolean;\n}\n\nexport class OverlayLayout extends React.Component<OverlayLayoutProps, OverlayLayoutState> {\n    constructor(props: OverlayLayoutProps) {\n        super(props);\n        document.body.classList.add(noScroll);\n    }\n\n    static defaultProps: Partial<OverlayLayoutProps> = {\n        onExited: noop\n    };\n\n    public override state: OverlayLayoutState = {\n        isVisible: true\n    };\n\n    public hideComponent(): void {\n        this.setState({ isVisible: false });\n        if (OverlayView.openedViews === 0) {\n            document.body.classList.remove(noScroll);\n        }\n    }\n\n    public override componentWillUnmount(): void {\n        if (OverlayView.openedViews === 0) {\n            document.body.classList.remove(noScroll);\n        }\n    }\n\n    public override render() {\n        const { onExited, barLeft, barMiddle, barRight, children, style, ...rest } = this.props;\n\n        return (\n            <Transition in={this.state.isVisible} timeout={100} appear onExited={onExited}>\n                {state => (\n                    <OverlayLayoutWrapper\n                        {...rest}\n                        style={{ ...defaultStyle, ...style, ...transitionStyles[state] }}\n                    >\n                        <TopAppBarSecondary fixed style={{ top: 0 }}>\n                            <TopAppBarSection style={{ width: \"33%\" }} alignStart>\n                                {barLeft}\n                            </TopAppBarSection>\n                            <TopAppBarSection style={{ width: \"33%\" }}>\n                                {barMiddle}\n                            </TopAppBarSection>\n                            <TopAppBarSection style={{ width: \"33%\" }} alignEnd>\n                                {barRight}\n                                <IconButton\n                                    ripple={false}\n                                    onClick={() => this.hideComponent()}\n                                    icon={<CloseIcon style={{ width: 24, height: 24 }} />}\n                                />\n                            </TopAppBarSection>\n                        </TopAppBarSecondary>\n\n                        {children}\n                    </OverlayLayoutWrapper>\n                )}\n            </Transition>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,qBAAA,GAAAD,OAAA;AAEA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAC,sBAAA,CAAAN,OAAA;AAEA,IAAAO,MAAA,GAAAP,OAAA;AACA,IAAAQ,YAAA,GAAAR,OAAA;AAAqD,IAAAS,SAAA;AAAA,SAAAC,iCAAA;AAGrD,IAAMC,oBAAoB,gBAAG,IAAAC,KAAA,CAAAC,OAAA,EAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAZ;AAAA,CAazC,CAAC;AAEF,IAAMa,QAAQ,GAAG,IAAAC,YAAG,EAAC;EACjBC,QAAQ,EAAE,QAAQ;EAClBC,MAAM,EAAE;AACZ,CAAC,CAAC;AAEF,IAAMC,YAAY,GAAG;EACjBC,SAAS,EAAE,kBAAkB;EAC7BC,OAAO,EAAE,CAAC;EACVC,kBAAkB,EAAE,oBAAoB;EACxCC,wBAAwB,EAAE,2BAA2B;EACrDC,kBAAkB,EAAE,OAAO;EAC3BC,UAAU,EAAE;AAChB,CAAC;AAED,IAAMC,gBAAqC,GAAG;EAC1CC,QAAQ,EAAE;IACNP,SAAS,EAAE,kBAAkB;IAC7BC,OAAO,EAAE;EACb,CAAC;EACDO,OAAO,EAAE;IACLR,SAAS,EAAE,iBAAiB;IAC5BC,OAAO,EAAE;EACb;AACJ,CAAC;AAAC,IAeWQ,aAAa,GAAAC,OAAA,CAAAD,aAAA,0BAAAE,gBAAA;EACtB,SAAAF,cAAYG,KAAyB,EAAE;IAAA,IAAAC,KAAA;IAAA,IAAAC,gBAAA,CAAA7B,OAAA,QAAAwB,aAAA;IACnCI,KAAA,OAAAE,WAAA,CAAA9B,OAAA,QAAAwB,aAAA,GAAMG,KAAK;IAAE,IAAAI,gBAAA,CAAA/B,OAAA,EAAA4B,KAAA,WAQ2B;MACxCI,SAAS,EAAE;IACf,CAAC;IATGC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,GAAG,CAAC1B,QAAQ,CAAC;IAAC,OAAAkB,KAAA;EAC1C;EAAC,IAAAS,UAAA,CAAArC,OAAA,EAAAwB,aAAA,EAAAE,gBAAA;EAAA,WAAAY,aAAA,CAAAtC,OAAA,EAAAwB,aAAA;IAAAe,GAAA;IAAAC,KAAA,EAUD,SAAOC,aAAaA,CAAA,EAAS;MACzB,IAAI,CAACC,QAAQ,CAAC;QAAEV,SAAS,EAAE;MAAM,CAAC,CAAC;MACnC,IAAIW,wBAAW,CAACC,WAAW,KAAK,CAAC,EAAE;QAC/BX,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACU,MAAM,CAACnC,QAAQ,CAAC;MAC5C;IACJ;EAAC;IAAA6B,GAAA;IAAAC,KAAA,EAED,SAAgBM,oBAAoBA,CAAA,EAAS;MACzC,IAAIH,wBAAW,CAACC,WAAW,KAAK,CAAC,EAAE;QAC/BX,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACU,MAAM,CAACnC,QAAQ,CAAC;MAC5C;IACJ;EAAC;IAAA6B,GAAA;IAAAC,KAAA,EAED,SAAgBO,MAAMA,CAAA,EAAG;MAAA,IAAAC,MAAA;MACrB,IAAAC,WAAA,GAA6E,IAAI,CAACtB,KAAK;QAA/EuB,QAAQ,GAAAD,WAAA,CAARC,QAAQ;QAAEC,OAAO,GAAAF,WAAA,CAAPE,OAAO;QAAEC,SAAS,GAAAH,WAAA,CAATG,SAAS;QAAEC,QAAQ,GAAAJ,WAAA,CAARI,QAAQ;QAAEC,QAAQ,GAAAL,WAAA,CAARK,QAAQ;QAAEC,KAAK,GAAAN,WAAA,CAALM,KAAK;QAAKC,IAAI,OAAAC,yBAAA,CAAAzD,OAAA,EAAAiD,WAAA,EAAArD,SAAA;MAExE,oBACIX,KAAA,CAAAyE,aAAA,CAACtE,qBAAA,CAAAuE,UAAU;QAACC,EAAE,EAAE,IAAI,CAACC,KAAK,CAAC7B,SAAU;QAAC8B,OAAO,EAAE,GAAI;QAACC,MAAM;QAACb,QAAQ,EAAEA;MAAS,GACzE,UAAAW,KAAK;QAAA,oBACF5E,KAAA,CAAAyE,aAAA,CAAC5D,oBAAoB,EAAAkE,MAAA,CAAAC,MAAA,KACbT,IAAI;UACRD,KAAK,MAAAW,cAAA,CAAAlE,OAAA,MAAAkE,cAAA,CAAAlE,OAAA,MAAAkE,cAAA,CAAAlE,OAAA,MAAOc,YAAY,GAAKyC,KAAK,GAAKlC,gBAAgB,CAACwC,KAAK,CAAC;QAAG,iBAEjE5E,KAAA,CAAAyE,aAAA,CAACpE,UAAA,CAAA6E,kBAAkB;UAACC,KAAK;UAACb,KAAK,EAAE;YAAEc,GAAG,EAAE;UAAE;QAAE,gBACxCpF,KAAA,CAAAyE,aAAA,CAACpE,UAAA,CAAAgF,gBAAgB;UAACf,KAAK,EAAE;YAAEgB,KAAK,EAAE;UAAM,CAAE;UAACC,UAAU;QAAA,GAChDrB,OACa,CAAC,eACnBlE,KAAA,CAAAyE,aAAA,CAACpE,UAAA,CAAAgF,gBAAgB;UAACf,KAAK,EAAE;YAAEgB,KAAK,EAAE;UAAM;QAAE,GACrCnB,SACa,CAAC,eACnBnE,KAAA,CAAAyE,aAAA,CAACpE,UAAA,CAAAgF,gBAAgB;UAACf,KAAK,EAAE;YAAEgB,KAAK,EAAE;UAAM,CAAE;UAACE,QAAQ;QAAA,GAC9CpB,QAAQ,eACTpE,KAAA,CAAAyE,aAAA,CAACnE,OAAA,CAAAmF,UAAU;UACPC,MAAM,EAAE,KAAM;UACdC,OAAO,EAAE,SAATA,OAAOA,CAAA;YAAA,OAAQ5B,MAAI,CAACP,aAAa,CAAC,CAAC;UAAA,CAAC;UACpCoC,IAAI,eAAE5F,KAAA,CAAAyE,aAAA,CAAChE,MAAA,CAAAoF,cAAS;YAACvB,KAAK,EAAE;cAAEgB,KAAK,EAAE,EAAE;cAAE1D,MAAM,EAAE;YAAG;UAAE,CAAE;QAAE,CACzD,CACa,CACF,CAAC,EAEpByC,QACiB,CAAC;MAAA,CAEnB,CAAC;IAErB;EAAC;AAAA,EA3D8BrE,KAAK,CAAC8F,SAAS;AAAA,IAAAhD,gBAAA,CAAA/B,OAAA,EAArCwB,aAAa,kBAM6B;EAC/C0B,QAAQ,EAAE8B;AACd,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useState","noop","OverlayView","OverlayBackdrop","OverlayContent","OverlayHeader","OverlayRoot","noScrollBodyClassNames","OverlayLayout","barMiddle","barLeft","barRight","children","onExited","variant","visible","setVisible","hideOverlay","openedViews","forEach","className","document","body","classList","remove","add","createElement","Fragment","start","middle","end"],"sources":["OverlayLayout.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport noop from \"lodash/noop\";\nimport type { ExitHandler } from \"react-transition-group/Transition\";\nimport { OverlayView } from \"~/ui/views/OverlayView\";\nimport {\n    OverlayBackdrop,\n    OverlayContent,\n    OverlayHeader,\n    overlayHeaderVariants,\n    OverlayRoot\n} from \"./components\";\nimport type { VariantProps } from \"@webiny/admin-ui\";\n\nconst noScrollBodyClassNames = [\"wby-overflow-hidden\", \"wby-h-screen\"];\n\nexport interface OverlayLayoutProps extends VariantProps<typeof overlayHeaderVariants> {\n    barMiddle?: React.ReactNode;\n    barLeft?: React.ReactNode;\n    barRight?: React.ReactNode;\n    children: React.ReactNode;\n    onExited?: ExitHandler<HTMLElement>;\n}\n\nexport const OverlayLayout: React.FC<OverlayLayoutProps> = ({\n    barMiddle,\n    barLeft,\n    barRight,\n    children,\n    onExited = noop,\n    variant\n}) => {\n    const [visible, setVisible] = useState(true);\n\n    const hideOverlay = useCallback(() => {\n        setVisible(false);\n        if (OverlayView.openedViews === 0) {\n            noScrollBodyClassNames.forEach(className => document.body.classList.remove(className));\n        }\n    }, []);\n\n    useEffect(() => {\n        noScrollBodyClassNames.forEach(className => document.body.classList.add(className));\n        return () => {\n            if (OverlayView.openedViews === 0) {\n                noScrollBodyClassNames.forEach(className =>\n                    document.body.classList.remove(className)\n                );\n            }\n        };\n    }, []);\n\n    return (\n        <OverlayRoot visible={visible} onExited={onExited}>\n            <OverlayBackdrop visible={visible} hideOverlay={hideOverlay} />\n            <OverlayContent visible={visible}>\n                <>\n                    <OverlayHeader\n                        start={barLeft}\n                        middle={barMiddle}\n                        end={barRight}\n                        variant={variant}\n                        hideOverlay={hideOverlay}\n                    />\n\n                    {children}\n                </>\n            </OverlayContent>\n        </OverlayRoot>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,OAAOC,IAAI,MAAM,aAAa;AAE9B,SAASC,WAAW;AACpB,SACIC,eAAe,EACfC,cAAc,EACdC,aAAa,EAEbC,WAAW;AAIf,MAAMC,sBAAsB,GAAG,CAAC,qBAAqB,EAAE,cAAc,CAAC;AAUtE,OAAO,MAAMC,aAA2C,GAAGA,CAAC;EACxDC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ,GAAGZ,IAAI;EACfa;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGhB,QAAQ,CAAC,IAAI,CAAC;EAE5C,MAAMiB,WAAW,GAAGnB,WAAW,CAAC,MAAM;IAClCkB,UAAU,CAAC,KAAK,CAAC;IACjB,IAAId,WAAW,CAACgB,WAAW,KAAK,CAAC,EAAE;MAC/BX,sBAAsB,CAACY,OAAO,CAACC,SAAS,IAAIC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,MAAM,CAACJ,SAAS,CAAC,CAAC;IAC1F;EACJ,CAAC,EAAE,EAAE,CAAC;EAENrB,SAAS,CAAC,MAAM;IACZQ,sBAAsB,CAACY,OAAO,CAACC,SAAS,IAAIC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACE,GAAG,CAACL,SAAS,CAAC,CAAC;IACnF,OAAO,MAAM;MACT,IAAIlB,WAAW,CAACgB,WAAW,KAAK,CAAC,EAAE;QAC/BX,sBAAsB,CAACY,OAAO,CAACC,SAAS,IACpCC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,MAAM,CAACJ,SAAS,CAC5C,CAAC;MACL;IACJ,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIvB,KAAA,CAAA6B,aAAA,CAACpB,WAAW;IAACS,OAAO,EAAEA,OAAQ;IAACF,QAAQ,EAAEA;EAAS,gBAC9ChB,KAAA,CAAA6B,aAAA,CAACvB,eAAe;IAACY,OAAO,EAAEA,OAAQ;IAACE,WAAW,EAAEA;EAAY,CAAE,CAAC,eAC/DpB,KAAA,CAAA6B,aAAA,CAACtB,cAAc;IAACW,OAAO,EAAEA;EAAQ,gBAC7BlB,KAAA,CAAA6B,aAAA,CAAA7B,KAAA,CAAA8B,QAAA,qBACI9B,KAAA,CAAA6B,aAAA,CAACrB,aAAa;IACVuB,KAAK,EAAElB,OAAQ;IACfmB,MAAM,EAAEpB,SAAU;IAClBqB,GAAG,EAAEnB,QAAS;IACdG,OAAO,EAAEA,OAAQ;IACjBG,WAAW,EAAEA;EAAY,CAC5B,CAAC,EAEDL,QACH,CACU,CACP,CAAC;AAEtB,CAAC","ignoreList":[]}

package/components/OverlayLayout/components/OverlayBackdrop.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface OverlayBackdropProps extends React.HTMLAttributes<HTMLDivElement> {
+    visible?: boolean;
+    hideOverlay: () => void;
+}
+declare const OverlayBackdrop: ({ hideOverlay, visible }: OverlayBackdropProps) => React.JSX.Element;
+export { OverlayBackdrop, type OverlayBackdropProps };

package/components/OverlayLayout/components/OverlayBackdrop.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { cn } from "@webiny/admin-ui";
+const OverlayBackdrop = ({
+  hideOverlay,
+  visible
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: hideOverlay,
+    "data-state": visible ? "open" : "closed",
+    className: cn("wby-fixed wby-inset-0 wby-bg-neutral-dark/50", "wby-transition wby-ease-in-out", "data-[state=open]:wby-animate-in data-[state=open]:wby-fade-in data-[state=open]:wby-duration-500", "data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out data-[state=closed]:wby-duration-150")
+  });
+};
+export { OverlayBackdrop };
+
+//# sourceMappingURL=OverlayBackdrop.js.map

package/components/OverlayLayout/components/OverlayBackdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","OverlayBackdrop","hideOverlay","visible","createElement","onClick","className"],"sources":["OverlayBackdrop.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\n\ninterface OverlayBackdropProps extends React.HTMLAttributes<HTMLDivElement> {\n    visible?: boolean;\n    hideOverlay: () => void;\n}\n\nconst OverlayBackdrop = ({ hideOverlay, visible }: OverlayBackdropProps) => {\n    return (\n        <div\n            onClick={hideOverlay}\n            data-state={visible ? \"open\" : \"closed\"}\n            className={cn(\n                \"wby-fixed wby-inset-0 wby-bg-neutral-dark/50\",\n                \"wby-transition wby-ease-in-out\",\n                \"data-[state=open]:wby-animate-in data-[state=open]:wby-fade-in data-[state=open]:wby-duration-500\",\n                \"data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out data-[state=closed]:wby-duration-150\"\n            )}\n        />\n    );\n};\n\nexport { OverlayBackdrop, type OverlayBackdropProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,QAAQ,kBAAkB;AAOrC,MAAMC,eAAe,GAAGA,CAAC;EAAEC,WAAW;EAAEC;AAA8B,CAAC,KAAK;EACxE,oBACIJ,KAAA,CAAAK,aAAA;IACIC,OAAO,EAAEH,WAAY;IACrB,cAAYC,OAAO,GAAG,MAAM,GAAG,QAAS;IACxCG,SAAS,EAAEN,EAAE,CACT,8CAA8C,EAC9C,gCAAgC,EAChC,mGAAmG,EACnG,2GACJ;EAAE,CACL,CAAC;AAEV,CAAC;AAED,SAASC,eAAe","ignoreList":[]}

package/components/OverlayLayout/components/OverlayContent.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface OverlayContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    visible?: boolean;
+}
+declare const OverlayContent: ({ visible, className, style, children, ...props }: OverlayContentProps) => React.JSX.Element;
+export { OverlayContent, type OverlayContentProps };

package/components/OverlayLayout/components/OverlayContent.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { cn } from "@webiny/admin-ui";
+const OverlayContent = ({
+  visible,
+  className,
+  style,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    "data-state": visible ? "open" : "closed",
+    className: cn(["wby-fixed wby-inset-x-0 wby-top-lg", "wby-w-screen", "wby-rounded-t-lg wby-overflow-hidden", "wby-bg-neutral-base", "wby-transition wby-ease-in-out", "data-[state=open]:wby-animate-in data-[state=open]:wby-slide-in-from-bottom data-[state=open]:wby-fade-in data-[state=open]:wby-duration-500", "data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out data-[state=closed]:wby-duration-150"], className),
+    style: {
+      ...style,
+      height: "calc(100vh - 24px)"
+    }
+  }, props), children);
+};
+export { OverlayContent };
+
+//# sourceMappingURL=OverlayContent.js.map

package/components/OverlayLayout/components/OverlayContent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","OverlayContent","visible","className","style","children","props","createElement","Object","assign","height"],"sources":["OverlayContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\n\ninterface OverlayContentProps extends React.HTMLAttributes<HTMLDivElement> {\n    visible?: boolean;\n}\n\nconst OverlayContent = ({ visible, className, style, children, ...props }: OverlayContentProps) => {\n    return (\n        <div\n            data-state={visible ? \"open\" : \"closed\"}\n            className={cn(\n                [\n                    \"wby-fixed wby-inset-x-0 wby-top-lg\",\n                    \"wby-w-screen\",\n                    \"wby-rounded-t-lg wby-overflow-hidden\",\n                    \"wby-bg-neutral-base\",\n                    \"wby-transition wby-ease-in-out\",\n                    \"data-[state=open]:wby-animate-in data-[state=open]:wby-slide-in-from-bottom data-[state=open]:wby-fade-in data-[state=open]:wby-duration-500\",\n                    \"data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out data-[state=closed]:wby-duration-150\"\n                ],\n                className\n            )}\n            style={{ ...style, height: \"calc(100vh - 24px)\" }}\n            {...props}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport { OverlayContent, type OverlayContentProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,QAAQ,kBAAkB;AAMrC,MAAMC,cAAc,GAAGA,CAAC;EAAEC,OAAO;EAAEC,SAAS;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAA2B,CAAC,KAAK;EAC/F,oBACIP,KAAA,CAAAQ,aAAA,QAAAC,MAAA,CAAAC,MAAA;IACI,cAAYP,OAAO,GAAG,MAAM,GAAG,QAAS;IACxCC,SAAS,EAAEH,EAAE,CACT,CACI,oCAAoC,EACpC,cAAc,EACd,sCAAsC,EACtC,qBAAqB,EACrB,gCAAgC,EAChC,8IAA8I,EAC9I,2GAA2G,CAC9G,EACDG,SACJ,CAAE;IACFC,KAAK,EAAE;MAAE,GAAGA,KAAK;MAAEM,MAAM,EAAE;IAAqB;EAAE,GAC9CJ,KAAK,GAERD,QACA,CAAC;AAEd,CAAC;AAED,SAASJ,cAAc","ignoreList":[]}

package/components/OverlayLayout/components/OverlayHeader.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { type VariantProps } from "@webiny/admin-ui";
+declare const overlayHeaderVariants: (props?: ({
+    variant?: "default" | "strong" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface OverlayHeaderProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof overlayHeaderVariants> {
+    start?: React.ReactNode;
+    middle?: React.ReactNode;
+    end?: React.ReactNode;
+    hideOverlay?: () => void;
+}
+declare const OverlayHeader: ({ start, middle, end, hideOverlay, variant, className, ...props }: OverlayHeaderProps) => React.JSX.Element;
+export { OverlayHeader, type OverlayHeaderProps, overlayHeaderVariants };

package/components/OverlayLayout/components/OverlayHeader.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { cn, cva, HeaderBar, IconButton } from "@webiny/admin-ui";
+import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
+const overlayHeaderVariants = cva("", {
+  variants: {
+    variant: {
+      default: "wby-bg-neutral-base wby-text-neutral-base",
+      strong: "wby-bg-neutral-dark wby-text-neutral-light"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+const OverlayHeader = ({
+  start,
+  middle,
+  end,
+  hideOverlay,
+  variant,
+  className,
+  ...props
+}) => {
+  const buttonIconVariant = variant === "strong" ? "ghost-negative" : "ghost";
+  return /*#__PURE__*/React.createElement(HeaderBar, Object.assign({
+    start: /*#__PURE__*/React.createElement("div", {
+      className: "wby-pl-md"
+    }, start),
+    middle: middle,
+    end: /*#__PURE__*/React.createElement(React.Fragment, null, end, /*#__PURE__*/React.createElement(IconButton, {
+      variant: buttonIconVariant,
+      size: "md",
+      iconSize: "lg",
+      onClick: hideOverlay,
+      icon: /*#__PURE__*/React.createElement(CloseIcon, null)
+    })),
+    className: cn(overlayHeaderVariants({
+      variant
+    }), className)
+  }, props));
+};
+export { OverlayHeader, overlayHeaderVariants };
+
+//# sourceMappingURL=OverlayHeader.js.map

package/components/OverlayLayout/components/OverlayHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","HeaderBar","IconButton","ReactComponent","CloseIcon","overlayHeaderVariants","variants","variant","default","strong","defaultVariants","OverlayHeader","start","middle","end","hideOverlay","className","props","buttonIconVariant","createElement","Object","assign","Fragment","size","iconSize","onClick","icon"],"sources":["OverlayHeader.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, HeaderBar, IconButton, type VariantProps } from \"@webiny/admin-ui\";\nimport { ReactComponent as CloseIcon } from \"@webiny/icons/close.svg\";\n\nconst overlayHeaderVariants = cva(\"\", {\n    variants: {\n        variant: {\n            default: \"wby-bg-neutral-base wby-text-neutral-base\",\n            strong: \"wby-bg-neutral-dark wby-text-neutral-light\"\n        }\n    },\n    defaultVariants: {\n        variant: \"default\"\n    }\n});\n\ninterface OverlayHeaderProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof overlayHeaderVariants> {\n    start?: React.ReactNode;\n    middle?: React.ReactNode;\n    end?: React.ReactNode;\n    hideOverlay?: () => void;\n}\n\nconst OverlayHeader = ({\n    start,\n    middle,\n    end,\n    hideOverlay,\n    variant,\n    className,\n    ...props\n}: OverlayHeaderProps) => {\n    const buttonIconVariant = variant === \"strong\" ? \"ghost-negative\" : \"ghost\";\n\n    return (\n        <HeaderBar\n            start={<div className={\"wby-pl-md\"}>{start}</div>}\n            middle={middle}\n            end={\n                <>\n                    {end}\n                    <IconButton\n                        variant={buttonIconVariant}\n                        size={\"md\"}\n                        iconSize={\"lg\"}\n                        onClick={hideOverlay}\n                        icon={<CloseIcon />}\n                    />\n                </>\n            }\n            className={cn(overlayHeaderVariants({ variant }), className)}\n            {...props}\n        />\n    );\n};\n\nexport { OverlayHeader, type OverlayHeaderProps, overlayHeaderVariants };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAEC,SAAS,EAAEC,UAAU,QAA2B,kBAAkB;AACpF,SAASC,cAAc,IAAIC,SAAS,QAAQ,yBAAyB;AAErE,MAAMC,qBAAqB,GAAGL,GAAG,CAAC,EAAE,EAAE;EAClCM,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,OAAO,EAAE,2CAA2C;MACpDC,MAAM,EAAE;IACZ;EACJ,CAAC;EACDC,eAAe,EAAE;IACbH,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAWF,MAAMI,aAAa,GAAGA,CAAC;EACnBC,KAAK;EACLC,MAAM;EACNC,GAAG;EACHC,WAAW;EACXR,OAAO;EACPS,SAAS;EACT,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,iBAAiB,GAAGX,OAAO,KAAK,QAAQ,GAAG,gBAAgB,GAAG,OAAO;EAE3E,oBACIT,KAAA,CAAAqB,aAAA,CAAClB,SAAS,EAAAmB,MAAA,CAAAC,MAAA;IACNT,KAAK,eAAEd,KAAA,CAAAqB,aAAA;MAAKH,SAAS,EAAE;IAAY,GAAEJ,KAAW,CAAE;IAClDC,MAAM,EAAEA,MAAO;IACfC,GAAG,eACChB,KAAA,CAAAqB,aAAA,CAAArB,KAAA,CAAAwB,QAAA,QACKR,GAAG,eACJhB,KAAA,CAAAqB,aAAA,CAACjB,UAAU;MACPK,OAAO,EAAEW,iBAAkB;MAC3BK,IAAI,EAAE,IAAK;MACXC,QAAQ,EAAE,IAAK;MACfC,OAAO,EAAEV,WAAY;MACrBW,IAAI,eAAE5B,KAAA,CAAAqB,aAAA,CAACf,SAAS,MAAE;IAAE,CACvB,CACH,CACL;IACDY,SAAS,EAAEjB,EAAE,CAACM,qBAAqB,CAAC;MAAEE;IAAQ,CAAC,CAAC,EAAES,SAAS;EAAE,GACzDC,KAAK,CACZ,CAAC;AAEV,CAAC;AAED,SAASN,aAAa,EAA2BN,qBAAqB","ignoreList":[]}

package/components/OverlayLayout/components/OverlayRoot.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ExitHandler } from "react-transition-group/Transition";
+interface OverlayRootProps {
+    visible?: boolean;
+    onExited?: ExitHandler<HTMLElement>;
+    children: React.ReactNode;
+}
+declare const OverlayRoot: ({ visible, onExited, children }: OverlayRootProps) => React.JSX.Element;
+export { OverlayRoot, type OverlayRootProps };

package/components/OverlayLayout/components/OverlayRoot.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Transition } from "react-transition-group";
+const OverlayRoot = ({
+  visible,
+  onExited,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(Transition, {
+    in: visible,
+    timeout: 100,
+    appear: true,
+    onExited: onExited
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-pointer-events-auto"
+  }, children));
+};
+export { OverlayRoot };
+
+//# sourceMappingURL=OverlayRoot.js.map

package/components/OverlayLayout/components/OverlayRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Transition","OverlayRoot","visible","onExited","children","createElement","in","timeout","appear","className"],"sources":["OverlayRoot.tsx"],"sourcesContent":["import React from \"react\";\nimport { Transition } from \"react-transition-group\";\nimport type { ExitHandler } from \"react-transition-group/Transition\";\n\ninterface OverlayRootProps {\n    visible?: boolean;\n    onExited?: ExitHandler<HTMLElement>;\n    children: React.ReactNode;\n}\n\nconst OverlayRoot = ({ visible, onExited, children }: OverlayRootProps) => {\n    return (\n        <Transition in={visible} timeout={100} appear onExited={onExited}>\n            <div className={\"wby-pointer-events-auto\"}>{children}</div>\n        </Transition>\n    );\n};\n\nexport { OverlayRoot, type OverlayRootProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,wBAAwB;AASnD,MAAMC,WAAW,GAAGA,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAEC;AAA2B,CAAC,KAAK;EACvE,oBACIL,KAAA,CAAAM,aAAA,CAACL,UAAU;IAACM,EAAE,EAAEJ,OAAQ;IAACK,OAAO,EAAE,GAAI;IAACC,MAAM;IAACL,QAAQ,EAAEA;EAAS,gBAC7DJ,KAAA,CAAAM,aAAA;IAAKI,SAAS,EAAE;EAA0B,GAAEL,QAAc,CAClD,CAAC;AAErB,CAAC;AAED,SAASH,WAAW","ignoreList":[]}

package/components/OverlayLayout/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./OverlayHeader";
+export * from "./OverlayBackdrop";
+export * from "./OverlayContent";
+export * from "./OverlayRoot";

package/components/OverlayLayout/components/index.js

@@ -0,0 +1,6 @@
+export * from "./OverlayHeader";
+export * from "./OverlayBackdrop";
+export * from "./OverlayContent";
+export * from "./OverlayRoot";
+
+//# sourceMappingURL=index.js.map

package/components/OverlayLayout/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./OverlayHeader\";\nexport * from \"./OverlayBackdrop\";\nexport * from \"./OverlayContent\";\nexport * from \"./OverlayRoot\";\n"],"mappings":"AAAA;AACA;AACA;AACA","ignoreList":[]}

package/components/OverlayLayout/index.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _OverlayLayout = require("./OverlayLayout");
-Object.keys(_OverlayLayout).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _OverlayLayout[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _OverlayLayout[key];
-    }
-  });
-});
+export * from "./OverlayLayout";
 
 //# sourceMappingURL=index.js.map

package/components/OverlayLayout/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_OverlayLayout","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["index.ts"],"sourcesContent":["export * from \"./OverlayLayout\";\n"],"mappings":";;;;;AAAA,IAAAA,cAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,cAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,cAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,cAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./OverlayLayout\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/Permissions/CannotUseAaclAlert.js

@@ -1,17 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CannotUseAaclAlert = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Alert = require("@webiny/ui/Alert");
-var CannotUseAaclAlert = exports.CannotUseAaclAlert = function CannotUseAaclAlert() {
-  return /*#__PURE__*/_react.default.createElement(_Alert.Alert, {
+import React from "react";
+import { Alert } from "@webiny/admin-ui";
+export const CannotUseAaclAlert = () => {
+  return /*#__PURE__*/React.createElement(Alert, {
     title: "Advanced Access Control Layer (AACL) not activated",
     type: "warning"
-  }, /*#__PURE__*/_react.default.createElement("strong", null, "Custom access"), " option cannot be used because the Advanced Access Control Layer (AACL) is not activated. ", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "To learn more, please visit the official\xA0", /*#__PURE__*/_react.default.createElement("a", {
+  }, /*#__PURE__*/React.createElement("strong", null, "Custom access"), " option cannot be used because the Advanced Access Control Layer (AACL) is not activated. ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "To learn more, please visit the official\xA0", /*#__PURE__*/React.createElement("a", {
     href: "https://webiny.link/aacl",
     target: "_blank",
     rel: "noreferrer"

package/components/Permissions/CannotUseAaclAlert.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Alert","CannotUseAaclAlert","exports","default","createElement","Alert","title","type","href","target","rel"],"sources":["CannotUseAaclAlert.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert } from \"@webiny/ui/Alert\";\n\nexport const CannotUseAaclAlert = () => {\n    return (\n        <Alert title={\"Advanced Access Control Layer (AACL) not activated\"} type={\"warning\"}>\n            <strong>Custom access</strong> option cannot be used because the Advanced Access Control\n            Layer (AACL) is not activated. <br />\n            <br />\n            To learn more, please visit the official&nbsp;\n            <a href={\"https://webiny.link/aacl\"} target={\"_blank\"} rel={\"noreferrer\"}>\n                documentation\n            </a>\n            .\n        </Alert>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEO,IAAME,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,SAArBA,kBAAkBA,CAAA,EAAS;EACpC,oBACIJ,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAACJ,MAAA,CAAAK,KAAK;IAACC,KAAK,EAAE,oDAAqD;IAACC,IAAI,EAAE;EAAU,gBAChFV,MAAA,CAAAM,OAAA,CAAAC,aAAA,iBAAQ,eAAqB,CAAC,8FACC,eAAAP,MAAA,CAAAM,OAAA,CAAAC,aAAA,WAAK,CAAC,eACrCP,MAAA,CAAAM,OAAA,CAAAC,aAAA,WAAK,CAAC,gDAEN,eAAAP,MAAA,CAAAM,OAAA,CAAAC,aAAA;IAAGI,IAAI,EAAE,0BAA2B;IAACC,MAAM,EAAE,QAAS;IAACC,GAAG,EAAE;EAAa,GAAC,eAEvE,CAAC,KAED,CAAC;AAEhB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Alert","CannotUseAaclAlert","createElement","title","type","href","target","rel"],"sources":["CannotUseAaclAlert.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert } from \"@webiny/admin-ui\";\n\nexport const CannotUseAaclAlert = () => {\n    return (\n        <Alert title={\"Advanced Access Control Layer (AACL) not activated\"} type={\"warning\"}>\n            <strong>Custom access</strong> option cannot be used because the Advanced Access Control\n            Layer (AACL) is not activated. <br />\n            <br />\n            To learn more, please visit the official&nbsp;\n            <a href={\"https://webiny.link/aacl\"} target={\"_blank\"} rel={\"noreferrer\"}>\n                documentation\n            </a>\n            .\n        </Alert>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,kBAAkB;AAExC,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,oBACIF,KAAA,CAAAG,aAAA,CAACF,KAAK;IAACG,KAAK,EAAE,oDAAqD;IAACC,IAAI,EAAE;EAAU,gBAChFL,KAAA,CAAAG,aAAA,iBAAQ,eAAqB,CAAC,8FACC,eAAAH,KAAA,CAAAG,aAAA,WAAK,CAAC,eACrCH,KAAA,CAAAG,aAAA,WAAK,CAAC,gDAEN,eAAAH,KAAA,CAAAG,aAAA;IAAGG,IAAI,EAAE,0BAA2B;IAACC,MAAM,EAAE,QAAS;IAACC,GAAG,EAAE;EAAa,GAAC,eAEvE,CAAC,KAED,CAAC;AAEhB,CAAC","ignoreList":[]}