@webiny/app-admin 0.0.0-unstable.2af142b57e → 0.0.0-unstable.3bc8100a7f

package/ui/views/AdminView/HeaderSectionRightElement.js

@@ -1,42 +1,21 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.HeaderSectionRightElement = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _react = _interopRequireDefault(require("react"));
-var _emotion = require("emotion");
-var _UIElement2 = require("../../UIElement");
-var _TopAppBar = require("@webiny/ui/TopAppBar");
-var edgeBars = /*#__PURE__*/(0, _emotion.css)({
+import React from "react";
+import { css } from "emotion";
+import { UIElement } from "../../UIElement";
+import { TopAppBarSection } from "@webiny/ui/TopAppBar";
+const edgeBars = css({
   width: "25%"
-}, "label:edgeBars;");
-var HeaderSectionRightElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(HeaderSectionRightElement, _UIElement);
-  var _super = (0, _createSuper2.default)(HeaderSectionRightElement);
-  function HeaderSectionRightElement(id) {
-    var _this;
-    (0, _classCallCheck2.default)(this, HeaderSectionRightElement);
-    _this = _super.call(this, id);
-    _this.useGrid(false);
-    return _this;
+});
+export class HeaderSectionRightElement extends UIElement {
+  constructor(id) {
+    super(id);
+    this.useGrid(false);
   }
-  (0, _createClass2.default)(HeaderSectionRightElement, [{
-    key: "render",
-    value: function render(props) {
-      return /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
-        className: edgeBars,
-        alignEnd: true
-      }, (0, _get2.default)((0, _getPrototypeOf2.default)(HeaderSectionRightElement.prototype), "render", this).call(this, props));
-    }
-  }]);
-  return HeaderSectionRightElement;
-}(_UIElement2.UIElement);
-exports.HeaderSectionRightElement = HeaderSectionRightElement;
+  render(props) {
+    return /*#__PURE__*/React.createElement(TopAppBarSection, {
+      className: edgeBars,
+      alignEnd: true
+    }, super.render(props));
+  }
+}
+
+//# sourceMappingURL=HeaderSectionRightElement.js.map

package/ui/views/AdminView/HeaderSectionRightElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["edgeBars","css","width","HeaderSectionRightElement","id","useGrid","props","UIElement"],"sources":["HeaderSectionRightElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\nimport { TopAppBarSection } from \"@webiny/ui/TopAppBar\";\n\nconst edgeBars = css({\n    width: \"25%\"\n});\n\nexport class HeaderSectionRightElement extends UIElement {\n    public constructor(id: string) {\n        super(id);\n\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        return (\n            <TopAppBarSection className={edgeBars} alignEnd>\n                {super.render(props)}\n            </TopAppBarSection>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AAEA,IAAMA,QAAQ,gBAAG,IAAAC,YAAG,EAAC;EACjBC,KAAK,EAAE;AACX,CAAC,oBAAC;AAAC,IAEUC,yBAAyB;EAAA;EAAA;EAClC,mCAAmBC,EAAU,EAAE;IAAA;IAAA;IAC3B,0BAAMA,EAAE;IAER,MAAKC,OAAO,CAAC,KAAK,CAAC;IAAC;EACxB;EAAC;IAAA;IAAA,OAED,gBAAuBC,KAA2B,EAAmB;MACjE,oBACI,6BAAC,2BAAgB;QAAC,SAAS,EAAEN,QAAS;QAAC,QAAQ;MAAA,qHAC7BM,KAAK,EACJ;IAE3B;EAAC;EAAA;AAAA,EAb0CC,qBAAS;AAAA"}
+{"version":3,"names":["React","css","UIElement","TopAppBarSection","edgeBars","width","HeaderSectionRightElement","constructor","id","useGrid","render","props","createElement","className","alignEnd"],"sources":["HeaderSectionRightElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport type { UiElementRenderProps } from \"~/ui/UIElement\";\nimport { UIElement } from \"~/ui/UIElement\";\nimport { TopAppBarSection } from \"@webiny/ui/TopAppBar\";\n\nconst edgeBars = css({\n    width: \"25%\"\n});\n\nexport class HeaderSectionRightElement extends UIElement {\n    public constructor(id: string) {\n        super(id);\n\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        return (\n            <TopAppBarSection className={edgeBars} alignEnd>\n                {super.render(props)}\n            </TopAppBarSection>\n        );\n    }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,QAAQ,SAAS;AAE7B,SAASC,SAAS;AAClB,SAASC,gBAAgB,QAAQ,sBAAsB;AAEvD,MAAMC,QAAQ,GAAGH,GAAG,CAAC;EACjBI,KAAK,EAAE;AACX,CAAC,CAAC;AAEF,OAAO,MAAMC,yBAAyB,SAASJ,SAAS,CAAC;EAC9CK,WAAWA,CAACC,EAAU,EAAE;IAC3B,KAAK,CAACA,EAAE,CAAC;IAET,IAAI,CAACC,OAAO,CAAC,KAAK,CAAC;EACvB;EAEgBC,MAAMA,CAACC,KAA2B,EAAmB;IACjE,oBACIX,KAAA,CAAAY,aAAA,CAACT,gBAAgB;MAACU,SAAS,EAAET,QAAS;MAACU,QAAQ;IAAA,GAC1C,KAAK,CAACJ,MAAM,CAACC,KAAK,CACL,CAAC;EAE3B;AACJ","ignoreList":[]}

package/ui/views/AdminView/components/Dialog.d.ts

@@ -1,2 +1,2 @@
 import React from "react";
-export declare const DialogContainer: React.FC;
+export declare const DialogContainer: () => React.JSX.Element;

package/ui/views/AdminView/components/Dialog.js

@@ -1,46 +1,41 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DialogContainer = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _get3 = _interopRequireDefault(require("lodash/get"));
-var _react = _interopRequireWildcard(require("react"));
-var _useUi = require("@webiny/app/hooks/useUi");
-var _Dialog = require("@webiny/ui/Dialog");
-var DialogContainer = function DialogContainer() {
-  var ui = (0, _useUi.useUi)();
-  var message = (0, _get3.default)(ui, "dialog.message");
-  var _get2 = (0, _get3.default)(ui, "dialog.options", {}),
-    dataTestId = _get2.dataTestId,
-    title = _get2.title,
-    _get2$actions = _get2.actions,
-    actions = _get2$actions === void 0 ? {
+import React, { useCallback } from "react";
+import get from "lodash/get";
+import { useUi } from "@webiny/app/hooks/useUi";
+import { Dialog } from "@webiny/admin-ui";
+export const DialogContainer = () => {
+  const ui = useUi();
+  const message = get(ui, "dialog.message");
+  const {
+    dataTestId,
+    title,
+    actions = {
       cancel: null,
       accept: {
         label: "OK"
       }
-    } : _get2$actions,
-    style = _get2.style;
-  var hideDialog = (0, _react.useCallback)(function () {
-    ui.setState(function (ui) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, ui), {}, {
-        dialog: null
-      });
-    });
+    },
+    style
+  } = get(ui, "dialog.options", {});
+  const hideDialog = useCallback(() => {
+    ui.setState(ui => ({
+      ...ui,
+      dialog: null
+    }));
   }, [ui]);
-  return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
+  return /*#__PURE__*/React.createElement(Dialog, {
     open: !!message,
     onClose: hideDialog,
     "data-testid": dataTestId,
-    style: style
-  }, title && /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, null, title), /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, null, message), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, actions.cancel && /*#__PURE__*/_react.default.createElement(_Dialog.DialogAccept, {
-    onClick: actions.cancel.onClick
-  }, actions.cancel.label), actions.accept && /*#__PURE__*/_react.default.createElement(_Dialog.DialogAccept, {
-    onClick: actions.accept.onClick
-  }, actions.accept.label)));
+    style: style,
+    title: title,
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, actions.cancel && /*#__PURE__*/React.createElement(Dialog.CancelButton, {
+      onClick: actions.cancel.onClick,
+      text: actions.cancel.label
+    }), actions.accept && /*#__PURE__*/React.createElement(Dialog.ConfirmButton, {
+      onClick: actions.accept.onClick,
+      text: actions.accept.label
+    }))
+  }, message);
 };
-exports.DialogContainer = DialogContainer;
+
+//# sourceMappingURL=Dialog.js.map

package/ui/views/AdminView/components/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["DialogContainer","ui","useUi","message","dataTestId","title","actions","cancel","accept","label","style","hideDialog","useCallback","setState","dialog","onClick"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { get } from \"lodash\";\nimport { useUi } from \"@webiny/app/hooks/useUi\";\nimport { Dialog, DialogAccept, DialogTitle, DialogActions, DialogContent } from \"@webiny/ui/Dialog\";\n\nexport const DialogContainer: React.FC = () => {\n    const ui = useUi();\n    const message = get(ui, \"dialog.message\");\n    const {\n        dataTestId,\n        title,\n        actions = { cancel: null, accept: { label: \"OK\" } },\n        style\n    } = get(ui, \"dialog.options\", {});\n\n    const hideDialog = useCallback(() => {\n        ui.setState(ui => ({ ...ui, dialog: null }));\n    }, [ui]);\n\n    return (\n        <Dialog open={!!message} onClose={hideDialog} data-testid={dataTestId} style={style}>\n            {title && <DialogTitle>{title}</DialogTitle>}\n            <DialogContent>{message}</DialogContent>\n            <DialogActions>\n                {actions.cancel && (\n                    <DialogAccept onClick={actions.cancel.onClick}>\n                        {actions.cancel.label}\n                    </DialogAccept>\n                )}\n                {actions.accept && (\n                    <DialogAccept onClick={actions.accept.onClick}>\n                        {actions.accept.label}\n                    </DialogAccept>\n                )}\n            </DialogActions>\n        </Dialog>\n    );\n};\n"],"mappings":";;;;;;;;;;AAAA;AAEA;AACA;AAEO,IAAMA,eAAyB,GAAG,SAA5BA,eAAyB,GAAS;EAC3C,IAAMC,EAAE,GAAG,IAAAC,YAAK,GAAE;EAClB,IAAMC,OAAO,GAAG,mBAAIF,EAAE,EAAE,gBAAgB,CAAC;EACzC,YAKI,mBAAIA,EAAE,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAJ7BG,UAAU,SAAVA,UAAU;IACVC,KAAK,SAALA,KAAK;IAAA,sBACLC,OAAO;IAAPA,OAAO,8BAAG;MAAEC,MAAM,EAAE,IAAI;MAAEC,MAAM,EAAE;QAAEC,KAAK,EAAE;MAAK;IAAE,CAAC;IACnDC,KAAK,SAALA,KAAK;EAGT,IAAMC,UAAU,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACjCX,EAAE,CAACY,QAAQ,CAAC,UAAAZ,EAAE;MAAA,mEAAUA,EAAE;QAAEa,MAAM,EAAE;MAAI;IAAA,CAAG,CAAC;EAChD,CAAC,EAAE,CAACb,EAAE,CAAC,CAAC;EAER,oBACI,6BAAC,cAAM;IAAC,IAAI,EAAE,CAAC,CAACE,OAAQ;IAAC,OAAO,EAAEQ,UAAW;IAAC,eAAaP,UAAW;IAAC,KAAK,EAAEM;EAAM,GAC/EL,KAAK,iBAAI,6BAAC,mBAAW,QAAEA,KAAK,CAAe,eAC5C,6BAAC,qBAAa,QAAEF,OAAO,CAAiB,eACxC,6BAAC,qBAAa,QACTG,OAAO,CAACC,MAAM,iBACX,6BAAC,oBAAY;IAAC,OAAO,EAAED,OAAO,CAACC,MAAM,CAACQ;EAAQ,GACzCT,OAAO,CAACC,MAAM,CAACE,KAAK,CAE5B,EACAH,OAAO,CAACE,MAAM,iBACX,6BAAC,oBAAY;IAAC,OAAO,EAAEF,OAAO,CAACE,MAAM,CAACO;EAAQ,GACzCT,OAAO,CAACE,MAAM,CAACC,KAAK,CAE5B,CACW,CACX;AAEjB,CAAC;AAAC"}
+{"version":3,"names":["React","useCallback","get","useUi","Dialog","DialogContainer","ui","message","dataTestId","title","actions","cancel","accept","label","style","hideDialog","setState","dialog","createElement","open","onClose","Fragment","CancelButton","onClick","text","ConfirmButton"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport get from \"lodash/get\";\nimport { useUi } from \"@webiny/app/hooks/useUi\";\nimport { Dialog } from \"@webiny/admin-ui\";\n\nexport const DialogContainer = () => {\n    const ui = useUi();\n    const message = get(ui, \"dialog.message\");\n    const {\n        dataTestId,\n        title,\n        actions = { cancel: null, accept: { label: \"OK\" } },\n        style\n    } = get(ui, \"dialog.options\", {});\n\n    const hideDialog = useCallback(() => {\n        ui.setState(ui => ({ ...ui, dialog: null }));\n    }, [ui]);\n\n    return (\n        <Dialog\n            open={!!message}\n            onClose={hideDialog}\n            data-testid={dataTestId}\n            style={style}\n            title={title}\n            actions={\n                <>\n                    {actions.cancel && (\n                        <Dialog.CancelButton\n                            onClick={actions.cancel.onClick}\n                            text={actions.cancel.label}\n                        />\n                    )}\n                    {actions.accept && (\n                        <Dialog.ConfirmButton\n                            onClick={actions.accept.onClick}\n                            text={actions.accept.label}\n                        />\n                    )}\n                </>\n            }\n        >\n            {message}\n        </Dialog>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,GAAG,MAAM,YAAY;AAC5B,SAASC,KAAK,QAAQ,yBAAyB;AAC/C,SAASC,MAAM,QAAQ,kBAAkB;AAEzC,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAMC,EAAE,GAAGH,KAAK,CAAC,CAAC;EAClB,MAAMI,OAAO,GAAGL,GAAG,CAACI,EAAE,EAAE,gBAAgB,CAAC;EACzC,MAAM;IACFE,UAAU;IACVC,KAAK;IACLC,OAAO,GAAG;MAAEC,MAAM,EAAE,IAAI;MAAEC,MAAM,EAAE;QAAEC,KAAK,EAAE;MAAK;IAAE,CAAC;IACnDC;EACJ,CAAC,GAAGZ,GAAG,CAACI,EAAE,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC;EAEjC,MAAMS,UAAU,GAAGd,WAAW,CAAC,MAAM;IACjCK,EAAE,CAACU,QAAQ,CAACV,EAAE,KAAK;MAAE,GAAGA,EAAE;MAAEW,MAAM,EAAE;IAAK,CAAC,CAAC,CAAC;EAChD,CAAC,EAAE,CAACX,EAAE,CAAC,CAAC;EAER,oBACIN,KAAA,CAAAkB,aAAA,CAACd,MAAM;IACHe,IAAI,EAAE,CAAC,CAACZ,OAAQ;IAChBa,OAAO,EAAEL,UAAW;IACpB,eAAaP,UAAW;IACxBM,KAAK,EAAEA,KAAM;IACbL,KAAK,EAAEA,KAAM;IACbC,OAAO,eACHV,KAAA,CAAAkB,aAAA,CAAAlB,KAAA,CAAAqB,QAAA,QACKX,OAAO,CAACC,MAAM,iBACXX,KAAA,CAAAkB,aAAA,CAACd,MAAM,CAACkB,YAAY;MAChBC,OAAO,EAAEb,OAAO,CAACC,MAAM,CAACY,OAAQ;MAChCC,IAAI,EAAEd,OAAO,CAACC,MAAM,CAACE;IAAM,CAC9B,CACJ,EACAH,OAAO,CAACE,MAAM,iBACXZ,KAAA,CAAAkB,aAAA,CAACd,MAAM,CAACqB,aAAa;MACjBF,OAAO,EAAEb,OAAO,CAACE,MAAM,CAACW,OAAQ;MAChCC,IAAI,EAAEd,OAAO,CAACE,MAAM,CAACC;IAAM,CAC9B,CAEP;EACL,GAEAN,OACG,CAAC;AAEjB,CAAC","ignoreList":[]}

package/ui/views/AdminView/components/Hamburger.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const Hamburger: React.FC;
+declare const Hamburger: () => React.JSX.Element;
 export default Hamburger;

package/ui/views/AdminView/components/Hamburger.js

@@ -1,24 +1,15 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _dotPropImmutable = require("dot-prop-immutable");
-var _useUi = require("@webiny/app/hooks/useUi");
-var _Button = require("@webiny/ui/Button");
-var _baselineMenu24px = require("../../../../assets/icons/baseline-menu-24px.svg");
-var Hamburger = function Hamburger() {
-  var ui = (0, _useUi.useUi)();
-  var toggleMenu = (0, _react.useCallback)(function () {
-    ui.setState(function (ui) {
-      return (0, _dotPropImmutable.set)(ui, "appsMenu.show", !((0, _dotPropImmutable.get)(ui, "appsMenu.show") || false));
-    });
+import React, { useCallback } from "react";
+import { get, set } from "dot-prop-immutable";
+import { useUi } from "@webiny/app/hooks/useUi";
+import { IconButton } from "@webiny/ui/Button";
+import { ReactComponent as MenuIcon } from "@webiny/icons/menu.svg";
+const Hamburger = () => {
+  const ui = useUi();
+  const toggleMenu = useCallback(() => {
+    ui.setState(ui => set(ui, "appsMenu.show", !(get(ui, "appsMenu.show") || false)));
   }, [ui]);
-  return /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    icon: /*#__PURE__*/_react.default.createElement(_baselineMenu24px.ReactComponent, {
+  return /*#__PURE__*/React.createElement(IconButton, {
+    icon: /*#__PURE__*/React.createElement(MenuIcon, {
       style: {
         color: "white"
       }
@@ -27,5 +18,6 @@ var Hamburger = function Hamburger() {
     "data-testid": "apps-menu"
   });
 };
-var _default = Hamburger;
-exports.default = _default;
+export default Hamburger;
+
+//# sourceMappingURL=Hamburger.js.map

package/ui/views/AdminView/components/Hamburger.js.map

@@ -1 +1 @@
-{"version":3,"names":["Hamburger","ui","useUi","toggleMenu","useCallback","setState","set","get","color"],"sources":["Hamburger.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { get, set } from \"dot-prop-immutable\";\nimport { useUi } from \"@webiny/app/hooks/useUi\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { ReactComponent as MenuIcon } from \"~/assets/icons/baseline-menu-24px.svg\";\n\nconst Hamburger: React.FC = () => {\n    const ui = useUi();\n\n    const toggleMenu = useCallback(() => {\n        ui.setState(ui => set(ui, \"appsMenu.show\", !(get(ui, \"appsMenu.show\") || false)));\n    }, [ui]);\n\n    return (\n        <IconButton\n            icon={<MenuIcon style={{ color: \"white\" }} />}\n            onClick={toggleMenu}\n            data-testid={\"apps-menu\"}\n        />\n    );\n};\n\nexport default Hamburger;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA,IAAMA,SAAmB,GAAG,SAAtBA,SAAmB,GAAS;EAC9B,IAAMC,EAAE,GAAG,IAAAC,YAAK,GAAE;EAElB,IAAMC,UAAU,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACjCH,EAAE,CAACI,QAAQ,CAAC,UAAAJ,EAAE;MAAA,OAAI,IAAAK,qBAAG,EAACL,EAAE,EAAE,eAAe,EAAE,EAAE,IAAAM,qBAAG,EAACN,EAAE,EAAE,eAAe,CAAC,IAAI,KAAK,CAAC,CAAC;IAAA,EAAC;EACrF,CAAC,EAAE,CAACA,EAAE,CAAC,CAAC;EAER,oBACI,6BAAC,kBAAU;IACP,IAAI,eAAE,6BAAC,gCAAQ;MAAC,KAAK,EAAE;QAAEO,KAAK,EAAE;MAAQ;IAAE,EAAI;IAC9C,OAAO,EAAEL,UAAW;IACpB,eAAa;EAAY,EAC3B;AAEV,CAAC;AAAC,eAEaH,SAAS;AAAA"}
+{"version":3,"names":["React","useCallback","get","set","useUi","IconButton","ReactComponent","MenuIcon","Hamburger","ui","toggleMenu","setState","createElement","icon","style","color","onClick"],"sources":["Hamburger.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { get, set } from \"dot-prop-immutable\";\nimport { useUi } from \"@webiny/app/hooks/useUi\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { ReactComponent as MenuIcon } from \"@webiny/icons/menu.svg\";\n\nconst Hamburger = () => {\n    const ui = useUi();\n\n    const toggleMenu = useCallback(() => {\n        ui.setState(ui => set(ui, \"appsMenu.show\", !(get(ui, \"appsMenu.show\") || false)));\n    }, [ui]);\n\n    return (\n        <IconButton\n            icon={<MenuIcon style={{ color: \"white\" }} />}\n            onClick={toggleMenu}\n            data-testid={\"apps-menu\"}\n        />\n    );\n};\n\nexport default Hamburger;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,GAAG,EAAEC,GAAG,QAAQ,oBAAoB;AAC7C,SAASC,KAAK,QAAQ,yBAAyB;AAC/C,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,cAAc,IAAIC,QAAQ,QAAQ,wBAAwB;AAEnE,MAAMC,SAAS,GAAGA,CAAA,KAAM;EACpB,MAAMC,EAAE,GAAGL,KAAK,CAAC,CAAC;EAElB,MAAMM,UAAU,GAAGT,WAAW,CAAC,MAAM;IACjCQ,EAAE,CAACE,QAAQ,CAACF,EAAE,IAAIN,GAAG,CAACM,EAAE,EAAE,eAAe,EAAE,EAAEP,GAAG,CAACO,EAAE,EAAE,eAAe,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC;EACrF,CAAC,EAAE,CAACA,EAAE,CAAC,CAAC;EAER,oBACIT,KAAA,CAAAY,aAAA,CAACP,UAAU;IACPQ,IAAI,eAAEb,KAAA,CAAAY,aAAA,CAACL,QAAQ;MAACO,KAAK,EAAE;QAAEC,KAAK,EAAE;MAAQ;IAAE,CAAE,CAAE;IAC9CC,OAAO,EAAEN,UAAW;IACpB,eAAa;EAAY,CAC5B,CAAC;AAEV,CAAC;AAED,eAAeF,SAAS","ignoreList":[]}

package/ui/views/FormView/FormContainerElement.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
-import { UIElement, UIElementConfig, UiElementRenderProps } from "../../UIElement";
+import React from "react";
+import type { UIElementConfig, UiElementRenderProps } from "../../UIElement";
+import { UIElement } from "../../UIElement";
 interface FormContainerConfig extends UIElementConfig {
     testId?: string;
     noElevation?: boolean;
@@ -7,6 +8,6 @@ interface FormContainerConfig extends UIElementConfig {
 }
 export declare class FormContainerElement extends UIElement<FormContainerConfig> {
     constructor(id: string, config: FormContainerConfig);
-    render(props: UiElementRenderProps): JSX.Element;
+    render(props: UiElementRenderProps): React.JSX.Element;
 }
 export {};

package/ui/views/FormView/FormContainerElement.js

@@ -1,50 +1,19 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FormContainerElement = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _Elevation = require("@webiny/ui/Elevation");
-var _UIElement2 = require("../../UIElement");
-var FormContainerWrapper = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "eyimbyl0",
-  label: "FormContainerWrapper"
-})({
-  position: "relative",
-  margin: "17px 50px"
-});
-var FormContainerElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(FormContainerElement, _UIElement);
-  var _super = (0, _createSuper2.default)(FormContainerElement);
-  function FormContainerElement(id, config) {
-    var _this;
-    (0, _classCallCheck2.default)(this, FormContainerElement);
-    _this = _super.call(this, id, config);
-    _this.useGrid(false);
-    return _this;
+import React from "react";
+import classNames from "classnames";
+import { UIElement } from "../../UIElement";
+import { SimpleForm } from "../../../components/SimpleForm";
+export class FormContainerElement extends UIElement {
+  constructor(id, config) {
+    super(id, config);
+    this.useGrid(false);
+  }
+  render(props) {
+    const children = super.render(props);
+    return /*#__PURE__*/React.createElement(SimpleForm, {
+      className: classNames("webiny-data-list", this.config.className),
+      "data-testid": this.config.testId
+    }, children);
   }
-  (0, _createClass2.default)(FormContainerElement, [{
-    key: "render",
-    value: function render(props) {
-      var children = (0, _get2.default)((0, _getPrototypeOf2.default)(FormContainerElement.prototype), "render", this).call(this, props);
-      return /*#__PURE__*/_react.default.createElement(FormContainerWrapper, {
-        className: (0, _classnames.default)("webiny-data-list", this.config.className),
-        "data-testid": this.config.testId
-      }, this.config.noElevation ? children : /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
-        z: 1
-      }, children));
-    }
-  }]);
-  return FormContainerElement;
-}(_UIElement2.UIElement);
-exports.FormContainerElement = FormContainerElement;
+}
+
+//# sourceMappingURL=FormContainerElement.js.map

package/ui/views/FormView/FormContainerElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["FormContainerWrapper","styled","position","margin","FormContainerElement","id","config","useGrid","props","children","classNames","className","testId","noElevation","UIElement"],"sources":["FormContainerElement.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport styled from \"@emotion/styled\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { UIElement, UIElementConfig, UiElementRenderProps } from \"~/ui/UIElement\";\n\nconst FormContainerWrapper = styled(\"div\")({\n    position: \"relative\",\n    margin: \"17px 50px\"\n});\n\ninterface FormContainerConfig extends UIElementConfig {\n    testId?: string;\n    noElevation?: boolean;\n    className?: string;\n}\n\nexport class FormContainerElement extends UIElement<FormContainerConfig> {\n    public constructor(id: string, config: FormContainerConfig) {\n        super(id, config);\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps) {\n        const children = super.render(props);\n\n        return (\n            <FormContainerWrapper\n                className={classNames(\"webiny-data-list\", this.config.className)}\n                data-testid={this.config.testId}\n            >\n                {this.config.noElevation ? children : <Elevation z={1}>{children}</Elevation>}\n            </FormContainerWrapper>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA,IAAMA,oBAAoB,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACvCC,QAAQ,EAAE,UAAU;EACpBC,MAAM,EAAE;AACZ,CAAC,CAAC;AAAC,IAQUC,oBAAoB;EAAA;EAAA;EAC7B,8BAAmBC,EAAU,EAAEC,MAA2B,EAAE;IAAA;IAAA;IACxD,0BAAMD,EAAE,EAAEC,MAAM;IAChB,MAAKC,OAAO,CAAC,KAAK,CAAC;IAAC;EACxB;EAAC;IAAA;IAAA,OAED,gBAAuBC,KAA2B,EAAE;MAChD,IAAMC,QAAQ,gHAAgBD,KAAK,CAAC;MAEpC,oBACI,6BAAC,oBAAoB;QACjB,SAAS,EAAE,IAAAE,mBAAU,EAAC,kBAAkB,EAAE,IAAI,CAACJ,MAAM,CAACK,SAAS,CAAE;QACjE,eAAa,IAAI,CAACL,MAAM,CAACM;MAAO,GAE/B,IAAI,CAACN,MAAM,CAACO,WAAW,GAAGJ,QAAQ,gBAAG,6BAAC,oBAAS;QAAC,CAAC,EAAE;MAAE,GAAEA,QAAQ,CAAa,CAC1D;IAE/B;EAAC;EAAA;AAAA,EAjBqCK,qBAAS;AAAA"}
+{"version":3,"names":["React","classNames","UIElement","SimpleForm","FormContainerElement","constructor","id","config","useGrid","render","props","children","createElement","className","testId"],"sources":["FormContainerElement.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport type { UIElementConfig, UiElementRenderProps } from \"~/ui/UIElement\";\nimport { UIElement } from \"~/ui/UIElement\";\nimport { SimpleForm } from \"~/components/SimpleForm\";\n\ninterface FormContainerConfig extends UIElementConfig {\n    testId?: string;\n    noElevation?: boolean;\n    className?: string;\n}\n\nexport class FormContainerElement extends UIElement<FormContainerConfig> {\n    public constructor(id: string, config: FormContainerConfig) {\n        super(id, config);\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps) {\n        const children = super.render(props);\n\n        return (\n            <SimpleForm\n                className={classNames(\"webiny-data-list\", this.config.className)}\n                data-testid={this.config.testId}\n            >\n                {children}\n            </SimpleForm>\n        );\n    }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,SAAS;AAClB,SAASC,UAAU;AAQnB,OAAO,MAAMC,oBAAoB,SAASF,SAAS,CAAsB;EAC9DG,WAAWA,CAACC,EAAU,EAAEC,MAA2B,EAAE;IACxD,KAAK,CAACD,EAAE,EAAEC,MAAM,CAAC;IACjB,IAAI,CAACC,OAAO,CAAC,KAAK,CAAC;EACvB;EAEgBC,MAAMA,CAACC,KAA2B,EAAE;IAChD,MAAMC,QAAQ,GAAG,KAAK,CAACF,MAAM,CAACC,KAAK,CAAC;IAEpC,oBACIV,KAAA,CAAAY,aAAA,CAACT,UAAU;MACPU,SAAS,EAAEZ,UAAU,CAAC,kBAAkB,EAAE,IAAI,CAACM,MAAM,CAACM,SAAS,CAAE;MACjE,eAAa,IAAI,CAACN,MAAM,CAACO;IAAO,GAE/BH,QACO,CAAC;EAErB;AACJ","ignoreList":[]}

package/ui/views/FormView/FormContentElement.d.ts

@@ -1,3 +1,6 @@
+import React from "react";
+import type { UiElementRenderProps } from "../../UIElement";
 import { UIElement } from "../../UIElement";
 export declare class FormContentElement extends UIElement {
+    render(props: UiElementRenderProps): React.JSX.Element;
 }

package/ui/views/FormView/FormContentElement.js

@@ -1,22 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FormContentElement = void 0;
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _UIElement2 = require("../../UIElement");
-var FormContentElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(FormContentElement, _UIElement);
-  var _super = (0, _createSuper2.default)(FormContentElement);
-  function FormContentElement() {
-    (0, _classCallCheck2.default)(this, FormContentElement);
-    return _super.apply(this, arguments);
+import React from "react";
+import { UIElement } from "../../UIElement";
+import { SimpleFormContent } from "../../../components/SimpleForm";
+export class FormContentElement extends UIElement {
+  render(props) {
+    return /*#__PURE__*/React.createElement(SimpleFormContent, null, super.render(props));
   }
-  return (0, _createClass2.default)(FormContentElement);
-}(_UIElement2.UIElement);
-exports.FormContentElement = FormContentElement;
+}
+
+//# sourceMappingURL=FormContentElement.js.map

package/ui/views/FormView/FormContentElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["FormContentElement","UIElement"],"sources":["FormContentElement.tsx"],"sourcesContent":["import { UIElement } from \"~/ui/UIElement\";\n\nexport class FormContentElement extends UIElement {}\n"],"mappings":";;;;;;;;;;;AAAA;AAA2C,IAE9BA,kBAAkB;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;AAAA,EAASC,qBAAS;AAAA"}
+{"version":3,"names":["React","UIElement","SimpleFormContent","FormContentElement","render","props","createElement"],"sources":["FormContentElement.tsx"],"sourcesContent":["import React from \"react\";\nimport type { UiElementRenderProps } from \"~/ui/UIElement\";\nimport { UIElement } from \"~/ui/UIElement\";\nimport { SimpleFormContent } from \"~/components/SimpleForm\";\n\nexport class FormContentElement extends UIElement {\n    public override render(props: UiElementRenderProps) {\n        return <SimpleFormContent>{super.render(props)}</SimpleFormContent>;\n    }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS;AAClB,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,kBAAkB,SAASF,SAAS,CAAC;EAC9BG,MAAMA,CAACC,KAA2B,EAAE;IAChD,oBAAOL,KAAA,CAAAM,aAAA,CAACJ,iBAAiB,QAAE,KAAK,CAACE,MAAM,CAACC,KAAK,CAAqB,CAAC;EACvE;AACJ","ignoreList":[]}

package/ui/views/FormView/FormFooterElement.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
-import { UIElement, UiElementRenderProps } from "../../UIElement";
+import React from "react";
+import type { UiElementRenderProps } from "../../UIElement";
+import { UIElement } from "../../UIElement";
 export declare class FormFooterElement extends UIElement {
     constructor(id: string);
-    render(props: UiElementRenderProps): JSX.Element;
+    render(props: UiElementRenderProps): React.JSX.Element;
 }

package/ui/views/FormView/FormFooterElement.js

@@ -1,49 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FormFooterElement = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _react = _interopRequireDefault(require("react"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _UIElement2 = require("../../UIElement");
-var ButtonWrapper = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "es96np90",
-  label: "ButtonWrapper"
-})({
-  display: "flex",
-  justifyContent: "space-between",
-  borderTop: "1px solid var(--mdc-theme-on-background)",
-  color: "var(--mdc-theme-text-primary-on-background)",
-  textAlign: "right",
-  padding: 25,
-  ">:last-child": {
-    marginLeft: "auto"
+import React from "react";
+import { UIElement } from "../../UIElement";
+import { SimpleFormFooter } from "../../../components/SimpleForm";
+export class FormFooterElement extends UIElement {
+  constructor(id) {
+    super(id);
+    this.useGrid(false);
   }
-});
-var FormFooterElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(FormFooterElement, _UIElement);
-  var _super = (0, _createSuper2.default)(FormFooterElement);
-  function FormFooterElement(id) {
-    var _this;
-    (0, _classCallCheck2.default)(this, FormFooterElement);
-    _this = _super.call(this, id);
-    _this.useGrid(false);
-    return _this;
+  render(props) {
+    return /*#__PURE__*/React.createElement(SimpleFormFooter, null, super.render(props));
   }
-  (0, _createClass2.default)(FormFooterElement, [{
-    key: "render",
-    value: function render(props) {
-      return /*#__PURE__*/_react.default.createElement(ButtonWrapper, null, (0, _get2.default)((0, _getPrototypeOf2.default)(FormFooterElement.prototype), "render", this).call(this, props));
-    }
-  }]);
-  return FormFooterElement;
-}(_UIElement2.UIElement);
-exports.FormFooterElement = FormFooterElement;
+}
+
+//# sourceMappingURL=FormFooterElement.js.map

package/ui/views/FormView/FormFooterElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["ButtonWrapper","styled","display","justifyContent","borderTop","color","textAlign","padding","marginLeft","FormFooterElement","id","useGrid","props","UIElement"],"sources":["FormFooterElement.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\n\nconst ButtonWrapper = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    textAlign: \"right\",\n    padding: 25,\n    \">:last-child\": {\n        marginLeft: \"auto\"\n    }\n});\n\nexport class FormFooterElement extends UIElement {\n    public constructor(id: string) {\n        super(id);\n\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps) {\n        return <ButtonWrapper>{super.render(props)}</ButtonWrapper>;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AAEA,IAAMA,aAAa,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAChCC,OAAO,EAAE,MAAM;EACfC,cAAc,EAAE,eAAe;EAC/BC,SAAS,EAAE,0CAA0C;EACrDC,KAAK,EAAE,6CAA6C;EACpDC,SAAS,EAAE,OAAO;EAClBC,OAAO,EAAE,EAAE;EACX,cAAc,EAAE;IACZC,UAAU,EAAE;EAChB;AACJ,CAAC,CAAC;AAAC,IAEUC,iBAAiB;EAAA;EAAA;EAC1B,2BAAmBC,EAAU,EAAE;IAAA;IAAA;IAC3B,0BAAMA,EAAE;IAER,MAAKC,OAAO,CAAC,KAAK,CAAC;IAAC;EACxB;EAAC;IAAA;IAAA,OAED,gBAAuBC,KAA2B,EAAE;MAChD,oBAAO,6BAAC,aAAa,kHAAeA,KAAK,EAAkB;IAC/D;EAAC;EAAA;AAAA,EATkCC,qBAAS;AAAA"}
+{"version":3,"names":["React","UIElement","SimpleFormFooter","FormFooterElement","constructor","id","useGrid","render","props","createElement"],"sources":["FormFooterElement.tsx"],"sourcesContent":["import React from \"react\";\nimport type { UiElementRenderProps } from \"~/ui/UIElement\";\nimport { UIElement } from \"~/ui/UIElement\";\nimport { SimpleFormFooter } from \"~/components/SimpleForm\";\n\nexport class FormFooterElement extends UIElement {\n    public constructor(id: string) {\n        super(id);\n\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps) {\n        return <SimpleFormFooter>{super.render(props)}</SimpleFormFooter>;\n    }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS;AAClB,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,iBAAiB,SAASF,SAAS,CAAC;EACtCG,WAAWA,CAACC,EAAU,EAAE;IAC3B,KAAK,CAACA,EAAE,CAAC;IAET,IAAI,CAACC,OAAO,CAAC,KAAK,CAAC;EACvB;EAEgBC,MAAMA,CAACC,KAA2B,EAAE;IAChD,oBAAOR,KAAA,CAAAS,aAAA,CAACP,gBAAgB,QAAE,KAAK,CAACK,MAAM,CAACC,KAAK,CAAoB,CAAC;EACrE;AACJ","ignoreList":[]}

package/ui/views/FormView/FormHeaderElement.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
-import { UIElement, UIElementConfig } from "../../UIElement";
-import { FormElementRenderProps } from "../../elements/form/FormElement";
+import type { UIElementConfig } from "../../UIElement";
+import { UIElement } from "../../UIElement";
+import type { FormElementRenderProps } from "../../elements/form/FormElement";
 interface FormHeaderConfig extends UIElementConfig {
     getTitle(props: FormElementRenderProps): string;
     icon?: React.ReactElement;

package/ui/views/FormView/FormHeaderElement.js

@@ -1,81 +1,30 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FormHeaderElement = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _react = _interopRequireDefault(require("react"));
-var _emotion = require("emotion");
-var _Grid = require("@webiny/ui/Grid");
-var _Typography = require("@webiny/ui/Typography");
-var _UIElement2 = require("../../UIElement");
-var _Icon = require("@webiny/ui/Icon");
-var iconClass = /*#__PURE__*/(0, _emotion.css)({
-  marginRight: 15,
-  color: "var(--mdc-theme-text-primary-on-background)"
-}, "label:iconClass;");
-var headerClass = /*#__PURE__*/(0, _emotion.css)({
-  borderBottom: "1px solid var(--mdc-theme-on-background)",
-  color: "var(--mdc-theme-text-primary-on-background)"
-}, "label:headerClass;");
-var titleClass = /*#__PURE__*/(0, _emotion.css)({
-  display: "flex",
-  alignItems: "center"
-}, "label:titleClass;");
-var actionsClass = /*#__PURE__*/(0, _emotion.css)({
-  display: "flex",
-  justifyContent: "flex-end",
-  alignItems: "center"
-}, "label:actionsClass;");
-var FormHeaderElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(FormHeaderElement, _UIElement);
-  var _super = (0, _createSuper2.default)(FormHeaderElement);
-  function FormHeaderElement(id, config) {
-    var _this;
-    (0, _classCallCheck2.default)(this, FormHeaderElement);
-    _this = _super.call(this, id, config);
-    _this.useGrid(false);
-    return _this;
+import React from "react";
+import { UIElement } from "../../UIElement";
+import { SimpleFormHeader } from "../../../components/SimpleForm";
+import { Icon } from "@webiny/admin-ui";
+export class FormHeaderElement extends UIElement {
+  constructor(id, config) {
+    super(id, config);
+    this.useGrid(false);
+  }
+  setIcon(icon) {
+    this.config.icon = icon;
+  }
+  addAction(element) {
+    this.addElement(element);
   }
-  (0, _createClass2.default)(FormHeaderElement, [{
-    key: "setIcon",
-    value: function setIcon(icon) {
-      this.config.icon = icon;
-    }
-  }, {
-    key: "addAction",
-    value: function addAction(element) {
-      this.addElement(element);
-    }
-  }, {
-    key: "render",
-    value: function render(props) {
-      var _this$config = this.config,
-        icon = _this$config.icon,
-        getTitle = _this$config.getTitle;
-      return /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
-        className: headerClass
-      }, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-        span: 6,
-        className: titleClass
-      }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
-        className: iconClass,
+  render(props) {
+    const {
+      icon,
+      getTitle
+    } = this.config;
+    return /*#__PURE__*/React.createElement(SimpleFormHeader, {
+      title: /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement(Icon, {
+        label: "Icon",
         icon: icon
-      }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-        use: "headline5"
-      }, getTitle(props)))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-        span: 6,
-        className: actionsClass
-      }, (0, _get2.default)((0, _getPrototypeOf2.default)(FormHeaderElement.prototype), "render", this).call(this, props)));
-    }
-  }]);
-  return FormHeaderElement;
-}(_UIElement2.UIElement);
-exports.FormHeaderElement = FormHeaderElement;
+      }), getTitle(props))
+    }, super.render(props));
+  }
+}
+
+//# sourceMappingURL=FormHeaderElement.js.map