@webiny/app-website-builder 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/BaseEditor/config/Toolbar/Toolbar.js

@@ -1,34 +1,33 @@
-import React from "react";
+import react from "react";
 import { makeDecoratable } from "@webiny/app-admin";
-import { Element as BaseElement } from "../Element.js";
+import { Element } from "../Element.js";
 import { Layout } from "./Layout.js";
-import { Elements as BaseElements } from "../Elements.js";
+import { Elements } from "../Elements.js";
 import { createGetId } from "../createGetId.js";
+import { Tab } from "./Tab.js";
 const SCOPE = "toolbar";
-const BaseToolbar = makeDecoratable("ToolbarLayout", () => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-[300px] flex-none",
-    "data-affects-preview": "width"
-  }, /*#__PURE__*/React.createElement(Layout, null));
-});
+const BaseToolbar = makeDecoratable("ToolbarLayout", ()=>/*#__PURE__*/ react.createElement("div", {
+        className: "w-[var(--wb-spacing-toolbar)] flex-none",
+        "data-affects-preview": "width"
+    }, /*#__PURE__*/ react.createElement(Layout, null)));
 const getElementId = createGetId(SCOPE)();
-const BaseToolbarElement = makeDecoratable("ToolbarElement", props => {
-  return /*#__PURE__*/React.createElement(BaseElement, Object.assign({}, props, {
-    scope: SCOPE,
-    id: getElementId(props.name),
-    before: props.before ? getElementId(props.before) : undefined,
-    after: props.after ? getElementId(props.after) : undefined
-  }));
-});
-const Elements = makeDecoratable("ToolbarElements", props => {
-  return /*#__PURE__*/React.createElement(BaseElements, Object.assign({}, props, {
-    scope: SCOPE
-  }));
-});
-export const Toolbar = Object.assign(BaseToolbar, {
-  Layout,
-  Element: BaseToolbarElement,
-  Elements
+const BaseToolbarElement = makeDecoratable("ToolbarElement", (props)=>/*#__PURE__*/ react.createElement(Element, {
+        ...props,
+        scope: SCOPE,
+        id: getElementId(props.name),
+        before: props.before ? getElementId(props.before) : void 0,
+        after: props.after ? getElementId(props.after) : void 0
+    }));
+const Toolbar_Elements = makeDecoratable("ToolbarElements", (props)=>/*#__PURE__*/ react.createElement(Elements, {
+        ...props,
+        scope: SCOPE
+    }));
+const Toolbar = Object.assign(BaseToolbar, {
+    Layout: Layout,
+    Element: BaseToolbarElement,
+    Elements: Toolbar_Elements,
+    Tab: Tab
 });
+export { Toolbar };
 
 //# sourceMappingURL=Toolbar.js.map

package/BaseEditor/config/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","Element","BaseElement","Layout","Elements","BaseElements","createGetId","SCOPE","BaseToolbar","createElement","className","getElementId","BaseToolbarElement","props","Object","assign","scope","id","name","before","undefined","after","Toolbar"],"sources":["Toolbar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { ElementProps as BaseElementProps } from \"../Element.js\";\nimport { Element as BaseElement } from \"../Element.js\";\nimport { Layout } from \"./Layout.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { createGetId } from \"../createGetId.js\";\n\nconst SCOPE = \"toolbar\";\n\nconst BaseToolbar = makeDecoratable(\"ToolbarLayout\", () => {\n    return (\n        <div className={\"w-[300px] flex-none\"} data-affects-preview={\"width\"}>\n            <Layout />\n        </div>\n    );\n});\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type ElementProps = Omit<BaseElementProps, \"scope\" | \"id\">;\n\nconst BaseToolbarElement = makeDecoratable(\"ToolbarElement\", (props: ElementProps) => {\n    return (\n        <BaseElement\n            {...props}\n            scope={SCOPE}\n            id={getElementId(props.name)}\n            before={props.before ? getElementId(props.before) : undefined}\n            after={props.after ? getElementId(props.after) : undefined}\n        />\n    );\n});\n\nexport type ElementsProps = Omit<BaseElementsProps, \"scope\">;\n\nconst Elements = makeDecoratable(\"ToolbarElements\", (props: ElementsProps) => {\n    return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport const Toolbar = Object.assign(BaseToolbar, {\n    Layout,\n    Element: BaseToolbarElement,\n    Elements\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,OAAO,IAAIC,WAAW;AAC/B,SAASC,MAAM;AAEf,SAASC,QAAQ,IAAIC,YAAY;AACjC,SAASC,WAAW;AAEpB,MAAMC,KAAK,GAAG,SAAS;AAEvB,MAAMC,WAAW,GAAGR,eAAe,CAAC,eAAe,EAAE,MAAM;EACvD,oBACID,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAE,qBAAsB;IAAC,wBAAsB;EAAQ,gBACjEX,KAAA,CAAAU,aAAA,CAACN,MAAM,MAAE,CACR,CAAC;AAEd,CAAC,CAAC;AAEF,MAAMQ,YAAY,GAAGL,WAAW,CAACC,KAAK,CAAC,CAAC,CAAC;AAIzC,MAAMK,kBAAkB,GAAGZ,eAAe,CAAC,gBAAgB,EAAGa,KAAmB,IAAK;EAClF,oBACId,KAAA,CAAAU,aAAA,CAACP,WAAW,EAAAY,MAAA,CAAAC,MAAA,KACJF,KAAK;IACTG,KAAK,EAAET,KAAM;IACbU,EAAE,EAAEN,YAAY,CAACE,KAAK,CAACK,IAAI,CAAE;IAC7BC,MAAM,EAAEN,KAAK,CAACM,MAAM,GAAGR,YAAY,CAACE,KAAK,CAACM,MAAM,CAAC,GAAGC,SAAU;IAC9DC,KAAK,EAAER,KAAK,CAACQ,KAAK,GAAGV,YAAY,CAACE,KAAK,CAACQ,KAAK,CAAC,GAAGD;EAAU,EAC9D,CAAC;AAEV,CAAC,CAAC;AAIF,MAAMhB,QAAQ,GAAGJ,eAAe,CAAC,iBAAiB,EAAGa,KAAoB,IAAK;EAC1E,oBAAOd,KAAA,CAAAU,aAAA,CAACJ,YAAY,EAAAS,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEG,KAAK,EAAET;EAAM,EAAE,CAAC;AACpD,CAAC,CAAC;AAEF,OAAO,MAAMe,OAAO,GAAGR,MAAM,CAACC,MAAM,CAACP,WAAW,EAAE;EAC9CL,MAAM;EACNF,OAAO,EAAEW,kBAAkB;EAC3BR;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/config/Toolbar/Toolbar.js","sources":["../../../../src/BaseEditor/config/Toolbar/Toolbar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { ElementProps as BaseElementProps } from \"../Element.js\";\nimport { Element as BaseElement } from \"../Element.js\";\nimport { Layout } from \"./Layout.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { createGetId } from \"../createGetId.js\";\nimport { Tab } from \"./Tab.js\";\n\nconst SCOPE = \"toolbar\";\n\nconst BaseToolbar = makeDecoratable(\"ToolbarLayout\", () => {\n    return (\n        <div className={\"w-[var(--wb-spacing-toolbar)] flex-none\"} data-affects-preview={\"width\"}>\n            <Layout />\n        </div>\n    );\n});\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type ElementProps = Omit<BaseElementProps, \"scope\" | \"id\">;\n\nconst BaseToolbarElement = makeDecoratable(\"ToolbarElement\", (props: ElementProps) => {\n    return (\n        <BaseElement\n            {...props}\n            scope={SCOPE}\n            id={getElementId(props.name)}\n            before={props.before ? getElementId(props.before) : undefined}\n            after={props.after ? getElementId(props.after) : undefined}\n        />\n    );\n});\n\nexport type ElementsProps = Omit<BaseElementsProps, \"scope\">;\n\nconst Elements = makeDecoratable(\"ToolbarElements\", (props: ElementsProps) => {\n    return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport const Toolbar = Object.assign(BaseToolbar, {\n    Layout,\n    Element: BaseToolbarElement,\n    Elements,\n    Tab\n});\n"],"names":["SCOPE","BaseToolbar","makeDecoratable","Layout","getElementId","createGetId","BaseToolbarElement","props","BaseElement","undefined","Elements","BaseElements","Toolbar","Object","Tab"],"mappings":";;;;;;;AAUA,MAAMA,QAAQ;AAEd,MAAMC,cAAcC,gBAAgB,iBAAiB,IAC1C,WAAP,GACI,oBAAC;QAAI,WAAW;QAA2C,wBAAsB;qBAC7E,oBAACC,QAAMA;AAKnB,MAAMC,eAAeC,YAAYL;AAIjC,MAAMM,qBAAqBJ,gBAAgB,kBAAkB,CAACK,QACnD,WAAP,GACI,oBAACC,SAAWA;QACP,GAAGD,KAAK;QACT,OAAOP;QACP,IAAII,aAAaG,MAAM,IAAI;QAC3B,QAAQA,MAAM,MAAM,GAAGH,aAAaG,MAAM,MAAM,IAAIE;QACpD,OAAOF,MAAM,KAAK,GAAGH,aAAaG,MAAM,KAAK,IAAIE;;AAO7D,MAAMC,mBAAWR,gBAAgB,mBAAmB,CAACK,QAC1C,WAAP,GAAO,oBAACI,UAAYA;QAAE,GAAGJ,KAAK;QAAE,OAAOP;;AAGpC,MAAMY,UAAUC,OAAO,MAAM,CAACZ,aAAa;IAC9CE,QAAMA;IACN,SAASG;IACTI,UAAAA;IACAI,KAAGA;AACP"}

package/BaseEditor/config/TopBar/Divider.js

@@ -1,22 +1,14 @@
-import _styled from "@emotion/styled/base";
-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)."; }
-import React from "react";
+import react from "react";
+import styled from "@emotion/styled";
 import { makeDecoratable } from "@webiny/app-admin";
-const StyledDivider = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1mqd0ta0"
-} : {
-  target: "e1mqd0ta0",
-  label: "StyledDivider"
-})(process.env.NODE_ENV === "production" ? {
-  name: "wvw4q6",
-  styles: "width:1px;margin:0 5px;height:100%;flex:none;background-color:var(--mdc-theme-on-background)"
-} : {
-  name: "wvw4q6",
-  styles: "width:1px;margin:0 5px;height:100%;flex:none;background-color:var(--mdc-theme-on-background)/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRpdmlkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlnQyIsImZpbGUiOiJEaXZpZGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgbWFrZURlY29yYXRhYmxlIH0gZnJvbSBcIkB3ZWJpbnkvYXBwLWFkbWluXCI7XG5cbmNvbnN0IFN0eWxlZERpdmlkZXIgPSBzdHlsZWQuZGl2YFxuICAgIHdpZHRoOiAxcHg7XG4gICAgbWFyZ2luOiAwIDVweDtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgZmxleDogbm9uZTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZCk7XG5gO1xuXG5leHBvcnQgY29uc3QgRGl2aWRlciA9IG1ha2VEZWNvcmF0YWJsZShcIlRvcEJhckRpdmlkZXJcIiwgKCkgPT4ge1xuICAgIHJldHVybiA8U3R5bGVkRGl2aWRlciAvPjtcbn0pO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-export const Divider = makeDecoratable("TopBarDivider", () => {
-  return /*#__PURE__*/React.createElement(StyledDivider, null);
-});
+const StyledDivider = styled.div`
+    width: 1px;
+    margin: 0 5px;
+    height: 100%;
+    flex: none;
+    background-color: var(--mdc-theme-on-background);
+`;
+const Divider = makeDecoratable("TopBarDivider", ()=>/*#__PURE__*/ react.createElement(StyledDivider, null));
+export { Divider };
 
 //# sourceMappingURL=Divider.js.map

package/BaseEditor/config/TopBar/Divider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","StyledDivider","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Divider","createElement"],"sources":["Divider.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\n\nconst StyledDivider = styled.div`\n    width: 1px;\n    margin: 0 5px;\n    height: 100%;\n    flex: none;\n    background-color: var(--mdc-theme-on-background);\n`;\n\nexport const Divider = makeDecoratable(\"TopBarDivider\", () => {\n    return <StyledDivider />;\n});\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,MAAMC,aAAa,gBAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,EAMlB;AAED,OAAO,MAAMC,OAAO,GAAGZ,eAAe,CAAC,eAAe,EAAE,MAAM;EAC1D,oBAAOD,KAAA,CAAAc,aAAA,CAACZ,aAAa,MAAE,CAAC;AAC5B,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/config/TopBar/Divider.js","sources":["../../../../src/BaseEditor/config/TopBar/Divider.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\n\nconst StyledDivider = styled.div`\n    width: 1px;\n    margin: 0 5px;\n    height: 100%;\n    flex: none;\n    background-color: var(--mdc-theme-on-background);\n`;\n\nexport const Divider = makeDecoratable(\"TopBarDivider\", () => {\n    return <StyledDivider />;\n});\n"],"names":["StyledDivider","styled","Divider","makeDecoratable"],"mappings":";;;AAIA,MAAMA,gBAAgBC,OAAO,GAAG,CAAC;;;;;;AAMjC,CAAC;AAEM,MAAMC,UAAUC,gBAAgB,iBAAiB,IAC7C,WAAP,GAAO,oBAACH,eAAaA"}

package/BaseEditor/config/TopBar/Layout.js

@@ -1,36 +1,31 @@
-import React from "react";
-import { makeDecoratable, OptionsMenu } from "@webiny/app-admin";
+import react from "react";
+import { OptionsMenu, makeDecoratable } from "@webiny/app-admin";
 import { HeaderBar } from "@webiny/admin-ui";
 import { TopBar } from "./TopBar.js";
-export const Layout = makeDecoratable("TopBarLayout", () => {
-  return /*#__PURE__*/React.createElement(HeaderBar, {
-    "data-role": "top-bar-layout",
-    "data-affects-preview": "height",
-    start: /*#__PURE__*/React.createElement(TopBar.Elements, {
-      group: "left"
-    }),
-    middle: /*#__PURE__*/React.createElement(TopBar.Elements, {
-      group: "center"
-    }),
-    end: /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center gap-sm"
-    }, /*#__PURE__*/React.createElement(TopBar.Elements, {
-      group: "actions"
-    }))
-  });
-});
-export const TopBarOptionsMenu = () => {
-  return /*#__PURE__*/React.createElement(TopBar.Elements, {
-    group: "dropdownActions",
-    render: elements => {
-      if (elements.length === 0) {
-        return null;
-      }
-      return /*#__PURE__*/React.createElement(OptionsMenu, {
-        actions: elements
-      });
-    }
-  });
-};
+const Layout = makeDecoratable("TopBarLayout", ()=>/*#__PURE__*/ react.createElement(HeaderBar, {
+        "data-role": "top-bar-layout",
+        "data-affects-preview": "height",
+        start: /*#__PURE__*/ react.createElement(TopBar.Elements, {
+            group: "left"
+        }),
+        middle: /*#__PURE__*/ react.createElement(TopBar.Elements, {
+            group: "center"
+        }),
+        end: /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center gap-sm"
+        }, /*#__PURE__*/ react.createElement(TopBar.Elements, {
+            group: "actions"
+        }))
+    }));
+const TopBarOptionsMenu = ()=>/*#__PURE__*/ react.createElement(TopBar.Elements, {
+        group: "dropdownActions",
+        render: (elements)=>{
+            if (0 === elements.length) return null;
+            return /*#__PURE__*/ react.createElement(OptionsMenu, {
+                actions: elements
+            });
+        }
+    });
+export { Layout, TopBarOptionsMenu };
 
 //# sourceMappingURL=Layout.js.map

package/BaseEditor/config/TopBar/Layout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","OptionsMenu","HeaderBar","TopBar","Layout","createElement","start","Elements","group","middle","end","className","TopBarOptionsMenu","render","elements","length","actions"],"sources":["Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, OptionsMenu } from \"@webiny/app-admin\";\nimport { HeaderBar } from \"@webiny/admin-ui\";\nimport { TopBar } from \"./TopBar.js\";\n\nexport const Layout = makeDecoratable(\"TopBarLayout\", () => {\n    return (\n        <HeaderBar\n            data-role={\"top-bar-layout\"}\n            data-affects-preview={\"height\"}\n            start={<TopBar.Elements group={\"left\"} />}\n            middle={<TopBar.Elements group={\"center\"} />}\n            end={\n                <div className={\"flex items-center gap-sm\"}>\n                    <TopBar.Elements group={\"actions\"} />\n                </div>\n            }\n        />\n    );\n});\n\nexport const TopBarOptionsMenu = () => {\n    return (\n        <TopBar.Elements\n            group={\"dropdownActions\"}\n            render={elements => {\n                if (elements.length === 0) {\n                    return null;\n                }\n\n                return <OptionsMenu actions={elements} />;\n            }}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,EAAEC,WAAW,QAAQ,mBAAmB;AAChE,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,MAAM;AAEf,OAAO,MAAMC,MAAM,GAAGJ,eAAe,CAAC,cAAc,EAAE,MAAM;EACxD,oBACID,KAAA,CAAAM,aAAA,CAACH,SAAS;IACN,aAAW,gBAAiB;IAC5B,wBAAsB,QAAS;IAC/BI,KAAK,eAAEP,KAAA,CAAAM,aAAA,CAACF,MAAM,CAACI,QAAQ;MAACC,KAAK,EAAE;IAAO,CAAE,CAAE;IAC1CC,MAAM,eAAEV,KAAA,CAAAM,aAAA,CAACF,MAAM,CAACI,QAAQ;MAACC,KAAK,EAAE;IAAS,CAAE,CAAE;IAC7CE,GAAG,eACCX,KAAA,CAAAM,aAAA;MAAKM,SAAS,EAAE;IAA2B,gBACvCZ,KAAA,CAAAM,aAAA,CAACF,MAAM,CAACI,QAAQ;MAACC,KAAK,EAAE;IAAU,CAAE,CACnC;EACR,CACJ,CAAC;AAEV,CAAC,CAAC;AAEF,OAAO,MAAMI,iBAAiB,GAAGA,CAAA,KAAM;EACnC,oBACIb,KAAA,CAAAM,aAAA,CAACF,MAAM,CAACI,QAAQ;IACZC,KAAK,EAAE,iBAAkB;IACzBK,MAAM,EAAEC,QAAQ,IAAI;MAChB,IAAIA,QAAQ,CAACC,MAAM,KAAK,CAAC,EAAE;QACvB,OAAO,IAAI;MACf;MAEA,oBAAOhB,KAAA,CAAAM,aAAA,CAACJ,WAAW;QAACe,OAAO,EAAEF;MAAS,CAAE,CAAC;IAC7C;EAAE,CACL,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/config/TopBar/Layout.js","sources":["../../../../src/BaseEditor/config/TopBar/Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, OptionsMenu } from \"@webiny/app-admin\";\nimport { HeaderBar } from \"@webiny/admin-ui\";\nimport { TopBar } from \"./TopBar.js\";\n\nexport const Layout = makeDecoratable(\"TopBarLayout\", () => {\n    return (\n        <HeaderBar\n            data-role={\"top-bar-layout\"}\n            data-affects-preview={\"height\"}\n            start={<TopBar.Elements group={\"left\"} />}\n            middle={<TopBar.Elements group={\"center\"} />}\n            end={\n                <div className={\"flex items-center gap-sm\"}>\n                    <TopBar.Elements group={\"actions\"} />\n                </div>\n            }\n        />\n    );\n});\n\nexport const TopBarOptionsMenu = () => {\n    return (\n        <TopBar.Elements\n            group={\"dropdownActions\"}\n            render={elements => {\n                if (elements.length === 0) {\n                    return null;\n                }\n\n                return <OptionsMenu actions={elements} />;\n            }}\n        />\n    );\n};\n"],"names":["Layout","makeDecoratable","HeaderBar","TopBar","TopBarOptionsMenu","elements","OptionsMenu"],"mappings":";;;;AAKO,MAAMA,SAASC,gBAAgB,gBAAgB,IAC3C,WAAP,GACI,oBAACC,WAASA;QACN,aAAW;QACX,wBAAsB;QACtB,qBAAO,oBAACC,OAAO,QAAQ;YAAC,OAAO;;QAC/B,sBAAQ,oBAACA,OAAO,QAAQ;YAAC,OAAO;;QAChC,mBACI,oBAAC;YAAI,WAAW;yBACZ,oBAACA,OAAO,QAAQ;YAAC,OAAO;;;AAOrC,MAAMC,oBAAoB,IACtB,WAAP,GACI,oBAACD,OAAO,QAAQ;QACZ,OAAO;QACP,QAAQE,CAAAA;YACJ,IAAIA,AAAoB,MAApBA,SAAS,MAAM,EACf,OAAO;YAGX,OAAO,WAAP,GAAO,oBAACC,aAAWA;gBAAC,SAASD;;QACjC"}

package/BaseEditor/config/TopBar/MenuItem.js

@@ -1,16 +1,15 @@
-import React from "react";
+import react from "react";
 import { DropdownMenu, Icon } from "@webiny/admin-ui";
-export const MenuItem = props => {
-  return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-    onClick: props.onClick,
-    disabled: Boolean(props.disabled),
-    "data-testid": props["data-testid"],
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: props.icon,
-      label: props.label
-    }),
-    text: props.label
-  });
-};
+const MenuItem = (props)=>/*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        onClick: props.onClick,
+        disabled: Boolean(props.disabled),
+        "data-testid": props["data-testid"],
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: props.icon,
+            label: props.label
+        }),
+        text: props.label
+    });
+export { MenuItem };
 
 //# sourceMappingURL=MenuItem.js.map

package/BaseEditor/config/TopBar/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","DropdownMenu","Icon","MenuItem","props","createElement","Item","onClick","disabled","Boolean","icon","label","text"],"sources":["MenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { DropdownMenu, Icon } from \"@webiny/admin-ui\";\n\nexport interface MenuItemProps {\n    label: string;\n    onClick: () => void;\n    icon: React.JSX.Element;\n    \"data-testid\"?: string;\n    disabled?: boolean;\n}\n\nexport const MenuItem = (props: MenuItemProps) => {\n    return (\n        <DropdownMenu.Item\n            onClick={props.onClick}\n            disabled={Boolean(props.disabled)}\n            data-testid={props[\"data-testid\"]}\n            icon={<Icon icon={props.icon} label={props.label} />}\n            text={props.label}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AAUrD,OAAO,MAAMC,QAAQ,GAAIC,KAAoB,IAAK;EAC9C,oBACIJ,KAAA,CAAAK,aAAA,CAACJ,YAAY,CAACK,IAAI;IACdC,OAAO,EAAEH,KAAK,CAACG,OAAQ;IACvBC,QAAQ,EAAEC,OAAO,CAACL,KAAK,CAACI,QAAQ,CAAE;IAClC,eAAaJ,KAAK,CAAC,aAAa,CAAE;IAClCM,IAAI,eAAEV,KAAA,CAAAK,aAAA,CAACH,IAAI;MAACQ,IAAI,EAAEN,KAAK,CAACM,IAAK;MAACC,KAAK,EAAEP,KAAK,CAACO;IAAM,CAAE,CAAE;IACrDC,IAAI,EAAER,KAAK,CAACO;EAAM,CACrB,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/config/TopBar/MenuItem.js","sources":["../../../../src/BaseEditor/config/TopBar/MenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { DropdownMenu, Icon } from \"@webiny/admin-ui\";\n\nexport interface MenuItemProps {\n    label: string;\n    onClick: () => void;\n    icon: React.JSX.Element;\n    \"data-testid\"?: string;\n    disabled?: boolean;\n}\n\nexport const MenuItem = (props: MenuItemProps) => {\n    return (\n        <DropdownMenu.Item\n            onClick={props.onClick}\n            disabled={Boolean(props.disabled)}\n            data-testid={props[\"data-testid\"]}\n            icon={<Icon icon={props.icon} label={props.label} />}\n            text={props.label}\n        />\n    );\n};\n"],"names":["MenuItem","props","DropdownMenu","Boolean","Icon"],"mappings":";;AAWO,MAAMA,WAAW,CAACC,QACd,WAAP,GACI,oBAACC,aAAa,IAAI;QACd,SAASD,MAAM,OAAO;QACtB,UAAUE,QAAQF,MAAM,QAAQ;QAChC,eAAaA,KAAK,CAAC,cAAc;QACjC,oBAAM,oBAACG,MAAIA;YAAC,MAAMH,MAAM,IAAI;YAAE,OAAOA,MAAM,KAAK;;QAChD,MAAMA,MAAM,KAAK"}

package/BaseEditor/config/TopBar/TopBar.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
 import type { ElementProps as BaseElementProps } from "../Element.js";
 import type { ElementsProps as BaseElementsProps } from "../Elements.js";
+declare const BaseTopBar: () => React.JSX.Element;
 export type ElementProps = Omit<BaseElementProps, "scope" | "id">;
 export type ActionProps = Omit<ElementProps, "group">;
 export type DropdownActionProps = Omit<ElementProps, "group">;
 export type ElementsProps = Omit<BaseElementsProps, "scope">;
-export declare const TopBar: (() => React.JSX.Element) & {
+export declare const TopBar: typeof BaseTopBar & {
     Element: ((props: ElementProps) => React.JSX.Element) & {
         original: (props: ElementProps) => React.JSX.Element;
         originalName: string;
@@ -124,3 +125,4 @@ export declare const TopBar: (() => React.JSX.Element) & {
         MenuLink: (props: import("@webiny/app-admin").OptionsMenuLinkProps) => React.JSX.Element;
     };
 };
+export {};

package/BaseEditor/config/TopBar/TopBar.js

@@ -1,49 +1,43 @@
-import React from "react";
-import { makeDecoratable } from "@webiny/app-admin";
-import { OptionsMenuItem, OptionsMenuLink } from "@webiny/app-admin";
-import { Element as BaseElement } from "../Element.js";
-import { Elements as BaseElements } from "../Elements.js";
+import react from "react";
+import { OptionsMenuItem, OptionsMenuLink, makeDecoratable } from "@webiny/app-admin";
+import { Element } from "../Element.js";
+import { Elements } from "../Elements.js";
 import { Divider } from "./Divider.js";
 import { Layout } from "./Layout.js";
 import { createGetId } from "../createGetId.js";
 const SCOPE = "topBar";
-const BaseTopBar = () => {
-  return /*#__PURE__*/React.createElement(Layout, null);
-};
+const BaseTopBar = ()=>/*#__PURE__*/ react.createElement(Layout, null);
 const getElementId = createGetId(SCOPE)();
-const Element = makeDecoratable("TopBarElement", props => {
-  return /*#__PURE__*/React.createElement(BaseElement, Object.assign({}, props, {
-    scope: SCOPE,
-    id: getElementId(props.name),
-    before: props.before ? getElementId(props.before) : undefined,
-    after: props.after ? getElementId(props.after) : undefined
-  }));
-});
-const Action = makeDecoratable("TopBarAction", props => {
-  return /*#__PURE__*/React.createElement(Element, Object.assign({}, props, {
-    group: "actions"
-  }));
-});
-const BaseDropdownAction = makeDecoratable("TopBarDropdownAction", props => {
-  return /*#__PURE__*/React.createElement(Element, Object.assign({}, props, {
-    group: "dropdownActions"
-  }));
-});
-const Elements = makeDecoratable("TopBarElements", props => {
-  return /*#__PURE__*/React.createElement(BaseElements, Object.assign({}, props, {
-    scope: SCOPE
-  }));
-});
-export const TopBar = Object.assign(BaseTopBar, {
-  Element,
-  Elements,
-  Layout,
-  Divider,
-  Action,
-  DropdownAction: Object.assign(BaseDropdownAction, {
-    MenuItem: OptionsMenuItem,
-    MenuLink: OptionsMenuLink
-  })
+const TopBar_Element = makeDecoratable("TopBarElement", (props)=>/*#__PURE__*/ react.createElement(Element, {
+        ...props,
+        scope: SCOPE,
+        id: getElementId(props.name),
+        before: props.before ? getElementId(props.before) : void 0,
+        after: props.after ? getElementId(props.after) : void 0
+    }));
+const Action = makeDecoratable("TopBarAction", (props)=>/*#__PURE__*/ react.createElement(TopBar_Element, {
+        ...props,
+        group: "actions"
+    }));
+const BaseDropdownAction = makeDecoratable("TopBarDropdownAction", (props)=>/*#__PURE__*/ react.createElement(TopBar_Element, {
+        ...props,
+        group: "dropdownActions"
+    }));
+const TopBar_Elements = makeDecoratable("TopBarElements", (props)=>/*#__PURE__*/ react.createElement(Elements, {
+        ...props,
+        scope: SCOPE
+    }));
+const TopBar = Object.assign(BaseTopBar, {
+    Element: TopBar_Element,
+    Elements: TopBar_Elements,
+    Layout: Layout,
+    Divider: Divider,
+    Action: Action,
+    DropdownAction: Object.assign(BaseDropdownAction, {
+        MenuItem: OptionsMenuItem,
+        MenuLink: OptionsMenuLink
+    })
 });
+export { TopBar };
 
 //# sourceMappingURL=TopBar.js.map

package/BaseEditor/config/TopBar/TopBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","OptionsMenuItem","OptionsMenuLink","Element","BaseElement","Elements","BaseElements","Divider","Layout","createGetId","SCOPE","BaseTopBar","createElement","getElementId","props","Object","assign","scope","id","name","before","undefined","after","Action","group","BaseDropdownAction","TopBar","DropdownAction","MenuItem","MenuLink"],"sources":["TopBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { OptionsMenuItem, OptionsMenuLink } from \"@webiny/app-admin\";\nimport type { ElementProps as BaseElementProps } from \"../Element.js\";\nimport { Element as BaseElement } from \"../Element.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { Divider } from \"./Divider.js\";\nimport { Layout } from \"./Layout.js\";\nimport { createGetId } from \"../createGetId.js\";\n\nconst SCOPE = \"topBar\";\n\nconst BaseTopBar = () => {\n    return <Layout />;\n};\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type ElementProps = Omit<BaseElementProps, \"scope\" | \"id\">;\n\nconst Element = makeDecoratable(\"TopBarElement\", (props: ElementProps) => {\n    return (\n        <BaseElement\n            {...props}\n            scope={SCOPE}\n            id={getElementId(props.name)}\n            before={props.before ? getElementId(props.before) : undefined}\n            after={props.after ? getElementId(props.after) : undefined}\n        />\n    );\n});\n\nexport type ActionProps = Omit<ElementProps, \"group\">;\n\nconst Action = makeDecoratable(\"TopBarAction\", (props: ActionProps) => {\n    return <Element {...props} group={\"actions\"} />;\n});\n\nexport type DropdownActionProps = Omit<ElementProps, \"group\">;\n\nconst BaseDropdownAction = makeDecoratable(\"TopBarDropdownAction\", (props: DropdownActionProps) => {\n    return <Element {...props} group={\"dropdownActions\"} />;\n});\n\nexport type ElementsProps = Omit<BaseElementsProps, \"scope\">;\n\nconst Elements = makeDecoratable(\"TopBarElements\", (props: ElementsProps) => {\n    return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport const TopBar = Object.assign(BaseTopBar, {\n    Element,\n    Elements,\n    Layout,\n    Divider,\n    Action,\n    DropdownAction: Object.assign(BaseDropdownAction, {\n        MenuItem: OptionsMenuItem,\n        MenuLink: OptionsMenuLink\n    })\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,eAAe,EAAEC,eAAe,QAAQ,mBAAmB;AAEpE,SAASC,OAAO,IAAIC,WAAW;AAE/B,SAASC,QAAQ,IAAIC,YAAY;AACjC,SAASC,OAAO;AAChB,SAASC,MAAM;AACf,SAASC,WAAW;AAEpB,MAAMC,KAAK,GAAG,QAAQ;AAEtB,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACrB,oBAAOZ,KAAA,CAAAa,aAAA,CAACJ,MAAM,MAAE,CAAC;AACrB,CAAC;AAED,MAAMK,YAAY,GAAGJ,WAAW,CAACC,KAAK,CAAC,CAAC,CAAC;AAIzC,MAAMP,OAAO,GAAGH,eAAe,CAAC,eAAe,EAAGc,KAAmB,IAAK;EACtE,oBACIf,KAAA,CAAAa,aAAA,CAACR,WAAW,EAAAW,MAAA,CAAAC,MAAA,KACJF,KAAK;IACTG,KAAK,EAAEP,KAAM;IACbQ,EAAE,EAAEL,YAAY,CAACC,KAAK,CAACK,IAAI,CAAE;IAC7BC,MAAM,EAAEN,KAAK,CAACM,MAAM,GAAGP,YAAY,CAACC,KAAK,CAACM,MAAM,CAAC,GAAGC,SAAU;IAC9DC,KAAK,EAAER,KAAK,CAACQ,KAAK,GAAGT,YAAY,CAACC,KAAK,CAACQ,KAAK,CAAC,GAAGD;EAAU,EAC9D,CAAC;AAEV,CAAC,CAAC;AAIF,MAAME,MAAM,GAAGvB,eAAe,CAAC,cAAc,EAAGc,KAAkB,IAAK;EACnE,oBAAOf,KAAA,CAAAa,aAAA,CAACT,OAAO,EAAAY,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEU,KAAK,EAAE;EAAU,EAAE,CAAC;AACnD,CAAC,CAAC;AAIF,MAAMC,kBAAkB,GAAGzB,eAAe,CAAC,sBAAsB,EAAGc,KAA0B,IAAK;EAC/F,oBAAOf,KAAA,CAAAa,aAAA,CAACT,OAAO,EAAAY,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEU,KAAK,EAAE;EAAkB,EAAE,CAAC;AAC3D,CAAC,CAAC;AAIF,MAAMnB,QAAQ,GAAGL,eAAe,CAAC,gBAAgB,EAAGc,KAAoB,IAAK;EACzE,oBAAOf,KAAA,CAAAa,aAAA,CAACN,YAAY,EAAAS,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEG,KAAK,EAAEP;EAAM,EAAE,CAAC;AACpD,CAAC,CAAC;AAEF,OAAO,MAAMgB,MAAM,GAAGX,MAAM,CAACC,MAAM,CAACL,UAAU,EAAE;EAC5CR,OAAO;EACPE,QAAQ;EACRG,MAAM;EACND,OAAO;EACPgB,MAAM;EACNI,cAAc,EAAEZ,MAAM,CAACC,MAAM,CAACS,kBAAkB,EAAE;IAC9CG,QAAQ,EAAE3B,eAAe;IACzB4B,QAAQ,EAAE3B;EACd,CAAC;AACL,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/config/TopBar/TopBar.js","sources":["../../../../src/BaseEditor/config/TopBar/TopBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { OptionsMenuItem, OptionsMenuLink } from \"@webiny/app-admin\";\nimport type { ElementProps as BaseElementProps } from \"../Element.js\";\nimport { Element as BaseElement } from \"../Element.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { Divider } from \"./Divider.js\";\nimport { Layout } from \"./Layout.js\";\nimport { createGetId } from \"../createGetId.js\";\n\nconst SCOPE = \"topBar\";\n\nconst BaseTopBar = () => {\n    return <Layout />;\n};\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type ElementProps = Omit<BaseElementProps, \"scope\" | \"id\">;\n\nconst Element = makeDecoratable(\"TopBarElement\", (props: ElementProps) => {\n    return (\n        <BaseElement\n            {...props}\n            scope={SCOPE}\n            id={getElementId(props.name)}\n            before={props.before ? getElementId(props.before) : undefined}\n            after={props.after ? getElementId(props.after) : undefined}\n        />\n    );\n});\n\nexport type ActionProps = Omit<ElementProps, \"group\">;\n\nconst Action = makeDecoratable(\"TopBarAction\", (props: ActionProps) => {\n    return <Element {...props} group={\"actions\"} />;\n});\n\nexport type DropdownActionProps = Omit<ElementProps, \"group\">;\n\nconst BaseDropdownAction = makeDecoratable(\"TopBarDropdownAction\", (props: DropdownActionProps) => {\n    return <Element {...props} group={\"dropdownActions\"} />;\n});\n\nexport type ElementsProps = Omit<BaseElementsProps, \"scope\">;\n\nconst Elements = makeDecoratable(\"TopBarElements\", (props: ElementsProps) => {\n    return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport const TopBar = Object.assign(BaseTopBar, {\n    Element,\n    Elements,\n    Layout,\n    Divider,\n    Action,\n    DropdownAction: Object.assign(BaseDropdownAction, {\n        MenuItem: OptionsMenuItem,\n        MenuLink: OptionsMenuLink\n    })\n});\n"],"names":["SCOPE","BaseTopBar","Layout","getElementId","createGetId","Element","makeDecoratable","props","BaseElement","undefined","Action","BaseDropdownAction","Elements","BaseElements","TopBar","Object","Divider","OptionsMenuItem","OptionsMenuLink"],"mappings":";;;;;;;AAWA,MAAMA,QAAQ;AAEd,MAAMC,aAAa,IACR,WAAP,GAAO,oBAACC,QAAMA;AAGlB,MAAMC,eAAeC,YAAYJ;AAIjC,MAAMK,iBAAUC,gBAAgB,iBAAiB,CAACC,QACvC,WAAP,GACI,oBAACC,SAAWA;QACP,GAAGD,KAAK;QACT,OAAOP;QACP,IAAIG,aAAaI,MAAM,IAAI;QAC3B,QAAQA,MAAM,MAAM,GAAGJ,aAAaI,MAAM,MAAM,IAAIE;QACpD,OAAOF,MAAM,KAAK,GAAGJ,aAAaI,MAAM,KAAK,IAAIE;;AAO7D,MAAMC,SAASJ,gBAAgB,gBAAgB,CAACC,QACrC,WAAP,GAAO,oBAACF,gBAAOA;QAAE,GAAGE,KAAK;QAAE,OAAO;;AAKtC,MAAMI,qBAAqBL,gBAAgB,wBAAwB,CAACC,QACzD,WAAP,GAAO,oBAACF,gBAAOA;QAAE,GAAGE,KAAK;QAAE,OAAO;;AAKtC,MAAMK,kBAAWN,gBAAgB,kBAAkB,CAACC,QACzC,WAAP,GAAO,oBAACM,UAAYA;QAAE,GAAGN,KAAK;QAAE,OAAOP;;AAGpC,MAAMc,SAASC,OAAO,MAAM,CAACd,YAAY;IAC5CI,SAAAA;IACAO,UAAAA;IACAV,QAAMA;IACNc,SAAOA;IACPN,QAAAA;IACA,gBAAgBK,OAAO,MAAM,CAACJ,oBAAoB;QAC9C,UAAUM;QACV,UAAUC;IACd;AACJ"}

package/BaseEditor/config/createGetId.js

@@ -1,5 +1,8 @@
-export const createGetId = scope => prefix => name => {
-  return [scope, prefix, name].filter(Boolean).join(":");
-};
+const createGetId = (scope)=>(prefix)=>(name)=>[
+                scope,
+                prefix,
+                name
+            ].filter(Boolean).join(":");
+export { createGetId };
 
 //# sourceMappingURL=createGetId.js.map

package/BaseEditor/config/createGetId.js.map

@@ -1 +1 @@
-{"version":3,"names":["createGetId","scope","prefix","name","filter","Boolean","join"],"sources":["createGetId.ts"],"sourcesContent":["export const createGetId = (scope: string) => (prefix?: string) => (name: string) => {\n    return [scope, prefix, name].filter(Boolean).join(\":\");\n};\n"],"mappings":"AAAA,OAAO,MAAMA,WAAW,GAAIC,KAAa,IAAMC,MAAe,IAAMC,IAAY,IAAK;EACjF,OAAO,CAACF,KAAK,EAAEC,MAAM,EAAEC,IAAI,CAAC,CAACC,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AAC1D,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/config/createGetId.js","sources":["../../../src/BaseEditor/config/createGetId.ts"],"sourcesContent":["export const createGetId = (scope: string) => (prefix?: string) => (name: string) => {\n    return [scope, prefix, name].filter(Boolean).join(\":\");\n};\n"],"names":["createGetId","scope","prefix","name","Boolean"],"mappings":"AAAO,MAAMA,cAAc,CAACC,QAAkB,CAACC,SAAoB,CAACC,OACzD;gBAACF;gBAAOC;gBAAQC;aAAK,CAAC,MAAM,CAACC,SAAS,IAAI,CAAC"}

package/BaseEditor/config/index.js

@@ -1,3 +1 @@
 export * from "./EditorConfig.js";
-
-//# sourceMappingURL=index.js.map

package/BaseEditor/defaultConfig/Content/AddressBar/AddressBar.js

@@ -1,35 +1,32 @@
-import React, { useEffect, useState } from "react";
-import { BreakpointSelector } from "./BreakpointSelector.js";
+import react, { useEffect, useState } from "react";
 import { PreviewInNewTab } from "./PreviewInNewTab.js";
 import { OpenInNewTab } from "./OpenInNewTab.js";
 import { RefreshPreview } from "./RefreshPreview.js";
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
 import { PreviewDomain } from "./PreviewDomain.js";
 import { usePreviewDomain } from "../usePreviewDomain.js";
-export const AddressBar = () => {
-  const path = useSelectFromDocument(document => document.properties.path);
-  const {
-    previewDomain
-  } = usePreviewDomain();
-  const [addressBarUrl, setAddressBarUrl] = useState("");
-  useEffect(() => {
-    if (!previewDomain) {
-      return;
-    }
-    setAddressBarUrl(`${previewDomain}${path}`);
-  }, [path, previewDomain]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full h-[49px] flex flex-row p-sm bg-neutral-base border-solid border-b-sm border-neutral-dimmed gap-sm",
-    "data-affects-preview": "height"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "relative flex-auto"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "w-full absolute -top-px py-xs-plus pl-xl border-sm text-md peer cursor-not-allowed rounded-md border-neutral-subtle text-neutral-muted bg-neutral-disabled text-neutral-disabled"
-  }, /*#__PURE__*/React.createElement(PreviewDomain, null), addressBarUrl), /*#__PURE__*/React.createElement("div", {
-    className: "absolute right-0 top-0"
-  }, /*#__PURE__*/React.createElement(RefreshPreview, null), /*#__PURE__*/React.createElement(PreviewInNewTab, null), /*#__PURE__*/React.createElement(OpenInNewTab, null))), /*#__PURE__*/React.createElement("div", {
-    className: "flex-none"
-  }, /*#__PURE__*/React.createElement(BreakpointSelector, null)));
+const AddressBar = ()=>{
+    const path = useSelectFromDocument((document)=>document.properties.path);
+    const { previewDomain } = usePreviewDomain();
+    const [addressBarUrl, setAddressBarUrl] = useState("");
+    useEffect(()=>{
+        if (!previewDomain) return;
+        setAddressBarUrl(`${previewDomain}${path}`);
+    }, [
+        path,
+        previewDomain
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "w-full h-[49px] flex flex-row p-sm bg-neutral-base border-solid border-b-sm border-neutral-dimmed gap-sm",
+        "data-affects-preview": "height"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "relative flex-auto"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "w-full absolute -top-px py-xs-plus pl-xl border-sm text-md peer cursor-not-allowed rounded-md border-neutral-subtle text-neutral-muted bg-neutral-disabled text-neutral-disabled"
+    }, /*#__PURE__*/ react.createElement(PreviewDomain, null), addressBarUrl), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute right-0 top-0"
+    }, /*#__PURE__*/ react.createElement(RefreshPreview, null), /*#__PURE__*/ react.createElement(PreviewInNewTab, null), /*#__PURE__*/ react.createElement(OpenInNewTab, null))));
 };
+export { AddressBar };
 
 //# sourceMappingURL=AddressBar.js.map

package/BaseEditor/defaultConfig/Content/AddressBar/AddressBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","BreakpointSelector","PreviewInNewTab","OpenInNewTab","RefreshPreview","useSelectFromDocument","PreviewDomain","usePreviewDomain","AddressBar","path","document","properties","previewDomain","addressBarUrl","setAddressBarUrl","createElement","className"],"sources":["AddressBar.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { BreakpointSelector } from \"./BreakpointSelector.js\";\nimport { PreviewInNewTab } from \"./PreviewInNewTab.js\";\nimport { OpenInNewTab } from \"./OpenInNewTab.js\";\nimport { RefreshPreview } from \"./RefreshPreview.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { PreviewDomain } from \"./PreviewDomain.js\";\nimport { usePreviewDomain } from \"../usePreviewDomain.js\";\n\nexport const AddressBar = () => {\n    const path = useSelectFromDocument(document => document.properties.path);\n\n    const { previewDomain } = usePreviewDomain();\n    const [addressBarUrl, setAddressBarUrl] = useState<string>(\"\");\n\n    useEffect(() => {\n        if (!previewDomain) {\n            return;\n        }\n\n        setAddressBarUrl(`${previewDomain}${path}`);\n    }, [path, previewDomain]);\n\n    return (\n        <div\n            className=\"w-full h-[49px] flex flex-row p-sm bg-neutral-base border-solid border-b-sm border-neutral-dimmed gap-sm\"\n            data-affects-preview={\"height\"}\n        >\n            <div className={\"relative flex-auto\"}>\n                <div\n                    className={\n                        \"w-full absolute -top-px py-xs-plus pl-xl border-sm text-md peer cursor-not-allowed rounded-md border-neutral-subtle text-neutral-muted bg-neutral-disabled text-neutral-disabled\"\n                    }\n                >\n                    <PreviewDomain />\n                    {addressBarUrl}\n                </div>\n                <div className={\"absolute right-0 top-0\"}>\n                    <RefreshPreview />\n                    <PreviewInNewTab />\n                    <OpenInNewTab />\n                </div>\n            </div>\n            <div className={\"flex-none\"}>\n                <BreakpointSelector />\n            </div>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,kBAAkB;AAC3B,SAASC,eAAe;AACxB,SAASC,YAAY;AACrB,SAASC,cAAc;AACvB,SAASC,qBAAqB;AAC9B,SAASC,aAAa;AACtB,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAMC,IAAI,GAAGJ,qBAAqB,CAACK,QAAQ,IAAIA,QAAQ,CAACC,UAAU,CAACF,IAAI,CAAC;EAExE,MAAM;IAAEG;EAAc,CAAC,GAAGL,gBAAgB,CAAC,CAAC;EAC5C,MAAM,CAACM,aAAa,EAAEC,gBAAgB,CAAC,GAAGd,QAAQ,CAAS,EAAE,CAAC;EAE9DD,SAAS,CAAC,MAAM;IACZ,IAAI,CAACa,aAAa,EAAE;MAChB;IACJ;IAEAE,gBAAgB,CAAC,GAAGF,aAAa,GAAGH,IAAI,EAAE,CAAC;EAC/C,CAAC,EAAE,CAACA,IAAI,EAAEG,aAAa,CAAC,CAAC;EAEzB,oBACId,KAAA,CAAAiB,aAAA;IACIC,SAAS,EAAC,0GAA0G;IACpH,wBAAsB;EAAS,gBAE/BlB,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAqB,gBACjClB,KAAA,CAAAiB,aAAA;IACIC,SAAS,EACL;EACH,gBAEDlB,KAAA,CAAAiB,aAAA,CAACT,aAAa,MAAE,CAAC,EAChBO,aACA,CAAC,eACNf,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAyB,gBACrClB,KAAA,CAAAiB,aAAA,CAACX,cAAc,MAAE,CAAC,eAClBN,KAAA,CAAAiB,aAAA,CAACb,eAAe,MAAE,CAAC,eACnBJ,KAAA,CAAAiB,aAAA,CAACZ,YAAY,MAAE,CACd,CACJ,CAAC,eACNL,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAY,gBACxBlB,KAAA,CAAAiB,aAAA,CAACd,kBAAkB,MAAE,CACpB,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/AddressBar.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/AddressBar.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { PreviewInNewTab } from \"./PreviewInNewTab.js\";\nimport { OpenInNewTab } from \"./OpenInNewTab.js\";\nimport { RefreshPreview } from \"./RefreshPreview.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { PreviewDomain } from \"./PreviewDomain.js\";\nimport { usePreviewDomain } from \"../usePreviewDomain.js\";\n\nexport const AddressBar = () => {\n    const path = useSelectFromDocument(document => document.properties.path);\n\n    const { previewDomain } = usePreviewDomain();\n    const [addressBarUrl, setAddressBarUrl] = useState<string>(\"\");\n\n    useEffect(() => {\n        if (!previewDomain) {\n            return;\n        }\n\n        setAddressBarUrl(`${previewDomain}${path}`);\n    }, [path, previewDomain]);\n\n    return (\n        <div\n            className=\"w-full h-[49px] flex flex-row p-sm bg-neutral-base border-solid border-b-sm border-neutral-dimmed gap-sm\"\n            data-affects-preview={\"height\"}\n        >\n            <div className={\"relative flex-auto\"}>\n                <div\n                    className={\n                        \"w-full absolute -top-px py-xs-plus pl-xl border-sm text-md peer cursor-not-allowed rounded-md border-neutral-subtle text-neutral-muted bg-neutral-disabled text-neutral-disabled\"\n                    }\n                >\n                    <PreviewDomain />\n                    {addressBarUrl}\n                </div>\n                <div className={\"absolute right-0 top-0\"}>\n                    <RefreshPreview />\n                    <PreviewInNewTab />\n                    <OpenInNewTab />\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["AddressBar","path","useSelectFromDocument","document","previewDomain","usePreviewDomain","addressBarUrl","setAddressBarUrl","useState","useEffect","PreviewDomain","RefreshPreview","PreviewInNewTab","OpenInNewTab"],"mappings":";;;;;;;AAQO,MAAMA,aAAa;IACtB,MAAMC,OAAOC,sBAAsBC,CAAAA,WAAYA,SAAS,UAAU,CAAC,IAAI;IAEvE,MAAM,EAAEC,aAAa,EAAE,GAAGC;IAC1B,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,SAAiB;IAE3DC,UAAU;QACN,IAAI,CAACL,eACD;QAGJG,iBAAiB,GAAGH,gBAAgBH,MAAM;IAC9C,GAAG;QAACA;QAAMG;KAAc;IAExB,OAAO,WAAP,GACI,oBAAC;QACG,WAAU;QACV,wBAAsB;qBAEtB,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,WACI;qBAGJ,oBAACM,eAAaA,OACbJ,gBAAAA,WAAAA,GAEL,oBAAC;QAAI,WAAW;qBACZ,oBAACK,gBAAcA,OAAAA,WAAAA,GACf,oBAACC,iBAAeA,OAAAA,WAAAA,GAChB,oBAACC,cAAYA;AAKjC"}

package/BaseEditor/defaultConfig/Content/AddressBar/BreakpointSelector.js

@@ -1,38 +1,30 @@
-import React from "react";
-import classNames from "classnames";
-import { IconButton, Tooltip, Text, Heading } from "@webiny/admin-ui";
+import react, { useMemo } from "react";
+import { Text, ToggleGroupPrimitive } from "@webiny/admin-ui";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 import { InlineSvg } from "../../Toolbar/InsertElements/InlineSvg.js";
-export const BreakpointSelector = () => {
-  const {
-    breakpoint,
-    breakpoints,
-    setBreakpoint
-  } = useBreakpoint();
-  return /*#__PURE__*/React.createElement("div", {
-    className: "align-right bg-neutral-light rounded-md"
-  }, breakpoints.map(bp => {
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      key: bp.name,
-      content: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
-        level: 5
-      }, bp.title), /*#__PURE__*/React.createElement(Text, {
-        size: "md"
-      }, bp.description)),
-      side: "bottom",
-      className: classNames("action-wrapper", {
-        active: bp === breakpoint
-      }),
-      trigger: /*#__PURE__*/React.createElement(IconButton, {
+const BreakpointSelector = ()=>{
+    const { breakpoint, breakpoints, setBreakpoint } = useBreakpoint();
+    const items = useMemo(()=>breakpoints.map((bp)=>({
+                value: bp.name,
+                icon: /*#__PURE__*/ react.createElement(InlineSvg, {
+                    src: bp.icon,
+                    className: "size-md"
+                }),
+                tooltip: /*#__PURE__*/ react.createElement(Text, {
+                    size: "md"
+                }, /*#__PURE__*/ react.createElement("strong", null, bp.title), bp.description && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("br", null), bp.description))
+            })), [
+        breakpoints
+    ]);
+    return /*#__PURE__*/ react.createElement(ToggleGroupPrimitive, {
         size: "md",
-        icon: /*#__PURE__*/React.createElement(InlineSvg, {
-          src: bp.icon
-        }),
-        variant: breakpoint.name === bp.name ? "tertiary" : "ghost",
-        onClick: () => setBreakpoint(bp.name)
-      })
+        items: items,
+        value: breakpoint.name,
+        onChange: setBreakpoint,
+        variant: "ghost",
+        bordered: false
     });
-  }));
 };
+export { BreakpointSelector };
 
 //# sourceMappingURL=BreakpointSelector.js.map

package/BaseEditor/defaultConfig/Content/AddressBar/BreakpointSelector.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","classNames","IconButton","Tooltip","Text","Heading","useBreakpoint","InlineSvg","BreakpointSelector","breakpoint","breakpoints","setBreakpoint","createElement","className","map","bp","key","name","content","level","title","size","description","side","active","trigger","icon","src","variant","onClick"],"sources":["BreakpointSelector.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { IconButton, Tooltip, Text, Heading } from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\n\nexport const BreakpointSelector = () => {\n    const { breakpoint, breakpoints, setBreakpoint } = useBreakpoint();\n\n    return (\n        <div className={\"align-right bg-neutral-light rounded-md\"}>\n            {breakpoints.map(bp => {\n                return (\n                    <Tooltip\n                        key={bp.name}\n                        content={\n                            <div>\n                                <Heading level={5}>{bp.title}</Heading>\n                                <Text size=\"md\">{bp.description}</Text>\n                            </div>\n                        }\n                        side=\"bottom\"\n                        className={classNames(\"action-wrapper\", {\n                            active: bp === breakpoint\n                        })}\n                        trigger={\n                            <IconButton\n                                size={\"md\"}\n                                icon={<InlineSvg src={bp.icon} />}\n                                variant={breakpoint.name === bp.name ? \"tertiary\" : \"ghost\"}\n                                onClick={() => setBreakpoint(bp.name)}\n                            />\n                        }\n                    />\n                );\n            })}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,UAAU,EAAEC,OAAO,EAAEC,IAAI,EAAEC,OAAO,QAAQ,kBAAkB;AACrE,SAASC,aAAa;AACtB,SAASC,SAAS;AAElB,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM;IAAEC,UAAU;IAAEC,WAAW;IAAEC;EAAc,CAAC,GAAGL,aAAa,CAAC,CAAC;EAElE,oBACIN,KAAA,CAAAY,aAAA;IAAKC,SAAS,EAAE;EAA0C,GACrDH,WAAW,CAACI,GAAG,CAACC,EAAE,IAAI;IACnB,oBACIf,KAAA,CAAAY,aAAA,CAACT,OAAO;MACJa,GAAG,EAAED,EAAE,CAACE,IAAK;MACbC,OAAO,eACHlB,KAAA,CAAAY,aAAA,2BACIZ,KAAA,CAAAY,aAAA,CAACP,OAAO;QAACc,KAAK,EAAE;MAAE,GAAEJ,EAAE,CAACK,KAAe,CAAC,eACvCpB,KAAA,CAAAY,aAAA,CAACR,IAAI;QAACiB,IAAI,EAAC;MAAI,GAAEN,EAAE,CAACO,WAAkB,CACrC,CACR;MACDC,IAAI,EAAC,QAAQ;MACbV,SAAS,EAAEZ,UAAU,CAAC,gBAAgB,EAAE;QACpCuB,MAAM,EAAET,EAAE,KAAKN;MACnB,CAAC,CAAE;MACHgB,OAAO,eACHzB,KAAA,CAAAY,aAAA,CAACV,UAAU;QACPmB,IAAI,EAAE,IAAK;QACXK,IAAI,eAAE1B,KAAA,CAAAY,aAAA,CAACL,SAAS;UAACoB,GAAG,EAAEZ,EAAE,CAACW;QAAK,CAAE,CAAE;QAClCE,OAAO,EAAEnB,UAAU,CAACQ,IAAI,KAAKF,EAAE,CAACE,IAAI,GAAG,UAAU,GAAG,OAAQ;QAC5DY,OAAO,EAAEA,CAAA,KAAMlB,aAAa,CAACI,EAAE,CAACE,IAAI;MAAE,CACzC;IACJ,CACJ,CAAC;EAEV,CAAC,CACA,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/BreakpointSelector.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/BreakpointSelector.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Text, ToggleGroupPrimitive } from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\n\nexport const BreakpointSelector = () => {\n    const { breakpoint, breakpoints, setBreakpoint } = useBreakpoint();\n\n    const items = useMemo(() => {\n        return breakpoints.map(bp => ({\n            value: bp.name,\n            icon: <InlineSvg src={bp.icon} className={\"size-md\"} />,\n            tooltip: (\n                <Text size=\"md\">\n                    <strong>{bp.title}</strong>\n                    {bp.description && (\n                        <>\n                            <br />\n                            {bp.description}\n                        </>\n                    )}\n                </Text>\n            )\n        }));\n    }, [breakpoints]);\n\n    return (\n        <ToggleGroupPrimitive\n            size={\"md\"}\n            items={items}\n            value={breakpoint.name}\n            onChange={setBreakpoint}\n            variant={\"ghost\"}\n            bordered={false}\n        />\n    );\n};\n"],"names":["BreakpointSelector","breakpoint","breakpoints","setBreakpoint","useBreakpoint","items","useMemo","bp","InlineSvg","Text","ToggleGroupPrimitive"],"mappings":";;;;AAKO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAEC,aAAa,EAAE,GAAGC;IAEnD,MAAMC,QAAQC,QAAQ,IACXJ,YAAY,GAAG,CAACK,CAAAA,KAAO;gBAC1B,OAAOA,GAAG,IAAI;gBACd,MAAM,WAAN,GAAM,oBAACC,WAASA;oBAAC,KAAKD,GAAG,IAAI;oBAAE,WAAW;;gBAC1C,SAAS,WAAT,GACI,oBAACE,MAAIA;oBAAC,MAAK;iCACP,oBAAC,gBAAQF,GAAG,KAAK,GAChBA,GAAG,WAAW,IAAI,WAAJ,GACX,wDACI,oBAAC,aACAA,GAAG,WAAW;YAKnC,KACD;QAACL;KAAY;IAEhB,OAAO,WAAP,GACI,oBAACQ,sBAAoBA;QACjB,MAAM;QACN,OAAOL;QACP,OAAOJ,WAAW,IAAI;QACtB,UAAUE;QACV,SAAS;QACT,UAAU;;AAGtB"}