@webiny/app-website-builder 6.4.0-beta.3 → 6.4.0-beta.4

package/BaseEditor/components/DragPreview/DragCursorWrapper.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface DragCursorWrapperProps {
+    componentName: string;
+    isOverSlot: boolean;
+}
+export declare const DragCursorWrapper: ({ componentName, isOverSlot }: DragCursorWrapperProps) => React.JSX.Element;
+export {};

package/BaseEditor/components/DragPreview/DragCursorWrapper.js

@@ -0,0 +1,17 @@
+import react from "react";
+import { DragCursor } from "@webiny/admin-ui";
+import { useComponent } from "../../hooks/useComponent.js";
+import { InlineSvg } from "../../defaultConfig/Toolbar/InsertElements/InlineSvg.js";
+const DragCursorWrapper = ({ componentName, isOverSlot })=>{
+    const component = useComponent(componentName);
+    return /*#__PURE__*/ react.createElement(DragCursor, {
+        label: component?.label ?? componentName,
+        icon: component?.image ? /*#__PURE__*/ react.createElement(InlineSvg, {
+            src: component.image
+        }) : void 0,
+        isOverSlot: isOverSlot
+    });
+};
+export { DragCursorWrapper };
+
+//# sourceMappingURL=DragCursorWrapper.js.map

package/BaseEditor/components/DragPreview/DragCursorWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/components/DragPreview/DragCursorWrapper.js","sources":["../../../../src/BaseEditor/components/DragPreview/DragCursorWrapper.tsx"],"sourcesContent":["import React from \"react\";\nimport { DragCursor } from \"@webiny/admin-ui\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\n\ninterface DragCursorWrapperProps {\n    componentName: string;\n    isOverSlot: boolean;\n}\n\nexport const DragCursorWrapper = ({ componentName, isOverSlot }: DragCursorWrapperProps) => {\n    const component = useComponent(componentName);\n\n    return (\n        <DragCursor\n            label={component?.label ?? componentName}\n            icon={component?.image ? <InlineSvg src={component.image} /> : undefined}\n            isOverSlot={isOverSlot}\n        />\n    );\n};\n"],"names":["DragCursorWrapper","componentName","isOverSlot","component","useComponent","DragCursor","InlineSvg","undefined"],"mappings":";;;;AAUO,MAAMA,oBAAoB,CAAC,EAAEC,aAAa,EAAEC,UAAU,EAA0B;IACnF,MAAMC,YAAYC,aAAaH;IAE/B,OAAO,WAAP,GACI,oBAACI,YAAUA;QACP,OAAOF,WAAW,SAASF;QAC3B,MAAME,WAAW,QAAQ,WAAR,GAAQ,oBAACG,WAASA;YAAC,KAAKH,UAAU,KAAK;aAAOI;QAC/D,YAAYL;;AAGxB"}

package/BaseEditor/components/DragPreview/DragPreview.js

@@ -0,0 +1,37 @@
+import react, { useEffect, useState } from "react";
+import { useDragLayer } from "react-dnd";
+import { useDropZoneManager } from "../../defaultConfig/Content/Preview/DropZoneManagerProvider.js";
+import { resetDragPosition, setDragPreviewRef, setupDragPosition } from "./useDragPosition.js";
+import { DragCursorWrapper } from "./DragCursorWrapper.js";
+const DragPreview = ()=>{
+    const [isOverSlot, setIsOverSlot] = useState(false);
+    const dropZoneManager = useDropZoneManager();
+    const { isDragging, item } = useDragLayer((monitor)=>{
+        setupDragPosition(monitor);
+        return {
+            isDragging: monitor.isDragging(),
+            item: monitor.getItem()
+        };
+    });
+    useEffect(()=>dropZoneManager.subscribeToMatchChange(setIsOverSlot), [
+        dropZoneManager
+    ]);
+    useEffect(()=>()=>{
+            resetDragPosition();
+        }, []);
+    if (!isDragging) return null;
+    if (item && item.dragInNavigator) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "fixed pointer-events-none left-0 top-0 w-full h-full z-[1001]"
+    }, /*#__PURE__*/ react.createElement("div", {
+        ref: setDragPreviewRef,
+        className: "absolute"
+    }, /*#__PURE__*/ react.createElement(DragCursorWrapper, {
+        componentName: item?.componentName,
+        isOverSlot: isOverSlot
+    })));
+};
+const DragPreview_DragPreview = DragPreview;
+export default DragPreview_DragPreview;
+
+//# sourceMappingURL=DragPreview.js.map

package/BaseEditor/components/DragPreview/DragPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/components/DragPreview/DragPreview.js","sources":["../../../../src/BaseEditor/components/DragPreview/DragPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { DragLayerMonitor } from \"react-dnd\";\nimport { useDragLayer } from \"react-dnd\";\nimport { useDropZoneManager } from \"~/BaseEditor/defaultConfig/Content/Preview/DropZoneManagerProvider.js\";\nimport { setupDragPosition, setDragPreviewRef, resetDragPosition } from \"./useDragPosition.js\";\nimport { DragCursorWrapper } from \"./DragCursorWrapper.js\";\n\nconst DragPreview = () => {\n    const [isOverSlot, setIsOverSlot] = useState(false);\n    const dropZoneManager = useDropZoneManager();\n\n    const { isDragging, item } = useDragLayer((monitor: DragLayerMonitor) => {\n        setupDragPosition(monitor);\n\n        return {\n            isDragging: monitor.isDragging(),\n            item: monitor.getItem()\n        };\n    });\n\n    useEffect(() => {\n        return dropZoneManager.subscribeToMatchChange(setIsOverSlot);\n    }, [dropZoneManager]);\n\n    useEffect(() => {\n        return () => {\n            resetDragPosition();\n        };\n    }, []);\n\n    if (!isDragging) {\n        return null;\n    }\n\n    if (item && item.dragInNavigator) {\n        return null;\n    }\n\n    return (\n        <div className=\"fixed pointer-events-none left-0 top-0 w-full h-full z-[1001]\">\n            <div ref={setDragPreviewRef} className=\"absolute\">\n                <DragCursorWrapper componentName={item?.componentName} isOverSlot={isOverSlot} />\n            </div>\n        </div>\n    );\n};\n\nexport default DragPreview;\n"],"names":["DragPreview","isOverSlot","setIsOverSlot","useState","dropZoneManager","useDropZoneManager","isDragging","item","useDragLayer","monitor","setupDragPosition","useEffect","resetDragPosition","setDragPreviewRef","DragCursorWrapper"],"mappings":";;;;;AAOA,MAAMA,cAAc;IAChB,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAS;IAC7C,MAAMC,kBAAkBC;IAExB,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGC,aAAa,CAACC;QACvCC,kBAAkBD;QAElB,OAAO;YACH,YAAYA,QAAQ,UAAU;YAC9B,MAAMA,QAAQ,OAAO;QACzB;IACJ;IAEAE,UAAU,IACCP,gBAAgB,sBAAsB,CAACF,gBAC/C;QAACE;KAAgB;IAEpBO,UAAU,IACC;YACHC;QACJ,GACD,EAAE;IAEL,IAAI,CAACN,YACD,OAAO;IAGX,IAAIC,QAAQA,KAAK,eAAe,EAC5B,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,KAAKM;QAAmB,WAAU;qBACnC,oBAACC,mBAAiBA;QAAC,eAAeP,MAAM;QAAe,YAAYN;;AAInF;AAEA,gCAAeD"}

package/BaseEditor/components/DragPreview/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./DragPreview.js";

package/BaseEditor/components/DragPreview/index.js

@@ -0,0 +1 @@
+export { default } from "./DragPreview.js";

package/BaseEditor/components/DragPreview/useDragPosition.d.ts

@@ -0,0 +1,4 @@
+import type { DragLayerMonitor } from "react-dnd";
+export declare function setupDragPosition(monitor: DragLayerMonitor): void;
+export declare function setDragPreviewRef(el: HTMLDivElement | null): void;
+export declare function resetDragPosition(): void;

package/BaseEditor/components/DragPreview/useDragPosition.js

@@ -0,0 +1,26 @@
+let subscribedToOffsetChange = false;
+let dragPreviewRef = null;
+const onOffsetChange = (monitor)=>()=>{
+        if (!dragPreviewRef) return;
+        const offset = monitor.getClientOffset();
+        if (!offset) return;
+        const transform = `translate(${offset.x + 8}px, ${offset.y + 8}px)`;
+        dragPreviewRef.style["transform"] = transform;
+        dragPreviewRef.style["-webkit-transform"] = transform;
+    };
+function setupDragPosition(monitor) {
+    if (!subscribedToOffsetChange) {
+        monitor.subscribeToOffsetChange(onOffsetChange(monitor));
+        subscribedToOffsetChange = true;
+    }
+}
+function setDragPreviewRef(el) {
+    dragPreviewRef = el;
+}
+function resetDragPosition() {
+    subscribedToOffsetChange = false;
+    dragPreviewRef = null;
+}
+export { resetDragPosition, setDragPreviewRef, setupDragPosition };
+
+//# sourceMappingURL=useDragPosition.js.map

package/BaseEditor/components/DragPreview/useDragPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/components/DragPreview/useDragPosition.js","sources":["../../../../src/BaseEditor/components/DragPreview/useDragPosition.ts"],"sourcesContent":["import type { DragLayerMonitor } from \"react-dnd\";\n\nlet subscribedToOffsetChange = false;\nlet dragPreviewRef: HTMLDivElement | null = null;\n\nconst onOffsetChange = (monitor: DragLayerMonitor) => () => {\n    if (!dragPreviewRef) {\n        return;\n    }\n\n    const offset = monitor.getClientOffset();\n    if (!offset) {\n        return;\n    }\n\n    const transform = `translate(${offset.x + 8}px, ${offset.y + 8}px)`;\n    dragPreviewRef.style[\"transform\"] = transform;\n    // @ts-expect-error\n    dragPreviewRef.style[\"-webkit-transform\"] = transform;\n};\n\nexport function setupDragPosition(monitor: DragLayerMonitor) {\n    if (!subscribedToOffsetChange) {\n        // @ts-expect-error\n        monitor.subscribeToOffsetChange(onOffsetChange(monitor));\n        subscribedToOffsetChange = true;\n    }\n}\n\nexport function setDragPreviewRef(el: HTMLDivElement | null) {\n    dragPreviewRef = el;\n}\n\nexport function resetDragPosition() {\n    subscribedToOffsetChange = false;\n    dragPreviewRef = null;\n}\n"],"names":["subscribedToOffsetChange","dragPreviewRef","onOffsetChange","monitor","offset","transform","setupDragPosition","setDragPreviewRef","el","resetDragPosition"],"mappings":"AAEA,IAAIA,2BAA2B;AAC/B,IAAIC,iBAAwC;AAE5C,MAAMC,iBAAiB,CAACC,UAA8B;QAClD,IAAI,CAACF,gBACD;QAGJ,MAAMG,SAASD,QAAQ,eAAe;QACtC,IAAI,CAACC,QACD;QAGJ,MAAMC,YAAY,CAAC,UAAU,EAAED,OAAO,CAAC,GAAG,EAAE,IAAI,EAAEA,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC;QACnEH,eAAe,KAAK,CAAC,YAAY,GAAGI;QAEpCJ,eAAe,KAAK,CAAC,oBAAoB,GAAGI;IAChD;AAEO,SAASC,kBAAkBH,OAAyB;IACvD,IAAI,CAACH,0BAA0B;QAE3BG,QAAQ,uBAAuB,CAACD,eAAeC;QAC/CH,2BAA2B;IAC/B;AACJ;AAEO,SAASO,kBAAkBC,EAAyB;IACvDP,iBAAiBO;AACrB;AAEO,SAASC;IACZT,2BAA2B;IAC3BC,iBAAiB;AACrB"}

package/BaseEditor/components/Editor.js

@@ -2,7 +2,6 @@ import react, { useEffect, useState } from "react";
 import classnames from "classnames";
 import { allNodes } from "@webiny/lexical-nodes";
 import { useLexicalContext } from "@webiny/app-admin/presentation/lexicalContext/useLexicalContext.js";
-import DragPreview from "./DragPreview.js";
 import { EditorConfig, EditorWithConfig } from "../config/index.js";
 import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { Commands } from "../index.js";
@@ -22,7 +21,7 @@ const Editor = ()=>{
         theme: theme
     }, /*#__PURE__*/ react.createElement("div", {
         className: classnames("w-full")
-    }, /*#__PURE__*/ react.createElement(EditorWithConfig, null, /*#__PURE__*/ react.createElement(EditorConfig.Ui.Layout, null)), /*#__PURE__*/ react.createElement(DragPreview, null)));
+    }, /*#__PURE__*/ react.createElement(EditorWithConfig, null, /*#__PURE__*/ react.createElement(EditorConfig.Ui.Layout, null))));
 };
 export { Editor };
 

package/BaseEditor/components/Editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/components/Editor.js","sources":["../../../src/BaseEditor/components/Editor.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport classSet from \"classnames\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport type { WebsiteBuilderTheme } from \"@webiny/website-builder-sdk\";\nimport { useLexicalContext } from \"@webiny/app-admin/presentation/lexicalContext/useLexicalContext.js\";\nimport DragPreview from \"./DragPreview.js\";\nimport { EditorConfig, EditorWithConfig } from \"../config/index.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { ThemeProvider } from \"~/BaseEditor/components/ThemeProvider.js\";\n\nexport const Editor = () => {\n    const { lexicalContext } = useLexicalContext();\n    const editor = useDocumentEditor();\n    const [theme, setTheme] = useState<WebsiteBuilderTheme | undefined>(undefined);\n\n    useEffect(() => {\n        editor.registerCommandHandler(Commands.SetTheme, ({ theme }) => {\n            setTheme(theme);\n            lexicalContext.setTheme(theme);\n            lexicalContext.setNodes(allNodes);\n        });\n    }, []);\n\n    return (\n        <ThemeProvider theme={theme}>\n            <div className={classSet(\"w-full\")}>\n                <EditorWithConfig>\n                    <EditorConfig.Ui.Layout />\n                </EditorWithConfig>\n                <DragPreview />\n            </div>\n        </ThemeProvider>\n    );\n};\n"],"names":["Editor","lexicalContext","useLexicalContext","editor","useDocumentEditor","theme","setTheme","useState","undefined","useEffect","Commands","allNodes","ThemeProvider","classSet","EditorWithConfig","EditorConfig","DragPreview"],"mappings":";;;;;;;;;AAWO,MAAMA,SAAS;IAClB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAC3B,MAAMC,SAASC;IACf,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAA0CC;IAEpEC,UAAU;QACNN,OAAO,sBAAsB,CAACO,SAAS,QAAQ,EAAE,CAAC,EAAEL,KAAK,EAAE;YACvDC,SAASD;YACTJ,eAAe,QAAQ,CAACI;YACxBJ,eAAe,QAAQ,CAACU;QAC5B;IACJ,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACC,eAAaA;QAAC,OAAOP;qBAClB,oBAAC;QAAI,WAAWQ,WAAS;qBACrB,oBAACC,kBAAgBA,MAAAA,WAAAA,GACb,oBAACC,aAAa,EAAE,CAAC,MAAM,wBAE3B,oBAACC,aAAWA;AAI5B"}
+{"version":3,"file":"BaseEditor/components/Editor.js","sources":["../../../src/BaseEditor/components/Editor.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport classSet from \"classnames\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport type { WebsiteBuilderTheme } from \"@webiny/website-builder-sdk\";\nimport { useLexicalContext } from \"@webiny/app-admin/presentation/lexicalContext/useLexicalContext.js\";\nimport { EditorConfig, EditorWithConfig } from \"../config/index.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { ThemeProvider } from \"~/BaseEditor/components/ThemeProvider.js\";\n\nexport const Editor = () => {\n    const { lexicalContext } = useLexicalContext();\n    const editor = useDocumentEditor();\n    const [theme, setTheme] = useState<WebsiteBuilderTheme | undefined>(undefined);\n\n    useEffect(() => {\n        editor.registerCommandHandler(Commands.SetTheme, ({ theme }) => {\n            setTheme(theme);\n            lexicalContext.setTheme(theme);\n            lexicalContext.setNodes(allNodes);\n        });\n    }, []);\n\n    return (\n        <ThemeProvider theme={theme}>\n            <div className={classSet(\"w-full\")}>\n                <EditorWithConfig>\n                    <EditorConfig.Ui.Layout />\n                </EditorWithConfig>\n            </div>\n        </ThemeProvider>\n    );\n};\n"],"names":["Editor","lexicalContext","useLexicalContext","editor","useDocumentEditor","theme","setTheme","useState","undefined","useEffect","Commands","allNodes","ThemeProvider","classSet","EditorWithConfig","EditorConfig"],"mappings":";;;;;;;;AAUO,MAAMA,SAAS;IAClB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAC3B,MAAMC,SAASC;IACf,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAA0CC;IAEpEC,UAAU;QACNN,OAAO,sBAAsB,CAACO,SAAS,QAAQ,EAAE,CAAC,EAAEL,KAAK,EAAE;YACvDC,SAASD;YACTJ,eAAe,QAAQ,CAACI;YACxBJ,eAAe,QAAQ,CAACU;QAC5B;IACJ,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACC,eAAaA;QAAC,OAAOP;qBAClB,oBAAC;QAAI,WAAWQ,WAAS;qBACrB,oBAACC,kBAAgBA,MAAAA,WAAAA,GACb,oBAACC,aAAa,EAAE,CAAC,MAAM;AAK3C"}

package/BaseEditor/config/EditorConfig.d.ts

@@ -284,6 +284,7 @@ export declare const EditorConfigComponents: {
                     displayName: string;
                 }>) => (props: unknown) => React.JSX.Element;
             };
+            Tab: ({ name, label, icon, element, disabled, visible }: import("./Toolbar/Tab.js").TabProps) => import("react").JSX.Element;
         };
         Sidebar: (() => import("react").JSX.Element) & {
             original: () => import("react").JSX.Element;
@@ -380,7 +381,7 @@ export declare const EditorConfigComponents: {
                     displayName: string;
                 }>) => (props: unknown) => React.JSX.Element;
             } & {
-                Tab: ({ name, label, disabled, element, visible, noPadding }: import("./Sidebar/Tab.js").TabProps) => import("react").JSX.Element;
+                Tab: ({ name, label, icon, disabled, element, visible }: import("./Sidebar/Tab.js").TabProps) => import("react").JSX.Element;
             };
             ScrollableContainer: ({ children }: any) => import("react").JSX.Element;
         };
@@ -761,6 +762,7 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
                     displayName: string;
                 }>) => (props: unknown) => React.JSX.Element;
             };
+            Tab: ({ name, label, icon, element, disabled, visible }: import("./Toolbar/Tab.js").TabProps) => import("react").JSX.Element;
         };
         Sidebar: (() => import("react").JSX.Element) & {
             original: () => import("react").JSX.Element;
@@ -857,7 +859,7 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
                     displayName: string;
                 }>) => (props: unknown) => React.JSX.Element;
             } & {
-                Tab: ({ name, label, disabled, element, visible, noPadding }: import("./Sidebar/Tab.js").TabProps) => import("react").JSX.Element;
+                Tab: ({ name, label, icon, disabled, element, visible }: import("./Sidebar/Tab.js").TabProps) => import("react").JSX.Element;
             };
             ScrollableContainer: ({ children }: any) => import("react").JSX.Element;
         };

package/BaseEditor/config/Layout.js

@@ -24,7 +24,7 @@ const Layout = makeDecoratable("EditorLayout", ()=>{
         };
     }, []);
     return /*#__PURE__*/ react.createElement(EditorLayoutContainer, null, /*#__PURE__*/ react.createElement(EditorConfig.Ui.TopBar, null), /*#__PURE__*/ react.createElement("div", {
-        className: "flex flex-row border-solid border-t-1 border-neutral-dimmed"
+        className: "flex flex-row"
     }, /*#__PURE__*/ react.createElement(IsNotReadOnly, null, /*#__PURE__*/ react.createElement(EditorConfig.Ui.Toolbar, null)), /*#__PURE__*/ react.createElement("div", {
         className: "flex-auto"
     }, /*#__PURE__*/ react.createElement(EditorConfig.Ui.Content, null)), /*#__PURE__*/ react.createElement(IsNotReadOnly, null, /*#__PURE__*/ react.createElement(EditorConfig.Ui.Sidebar, null))), /*#__PURE__*/ react.createElement(EditorConfig.Ui.Elements, {

package/BaseEditor/config/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/config/Layout.js","sources":["../../../src/BaseEditor/config/Layout.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { EditorConfig } from \"./EditorConfig.js\";\nimport styled from \"@emotion/styled\";\nimport { IsNotReadOnly } from \"~/BaseEditor/config/IsNotReadOnly.js\";\nimport { useReservedUISpace } from \"~/BaseEditor/hooks/useReservedUISpace.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\n\nconst EditorLayoutContainer = styled.div`\n    height: 100%;\n    overflow: hidden;\n`;\n\nexport const Layout = makeDecoratable(\"EditorLayout\", () => {\n    const editor = useDocumentEditor();\n\n    useReservedUISpace(dimensions => {\n        editor.updateEditor(state => {\n            state.uiReservedSpace = dimensions;\n        });\n    });\n\n    useEffect(() => {\n        const currentOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = currentOverflow;\n        };\n    }, []);\n\n    return (\n        <EditorLayoutContainer>\n            <EditorConfig.Ui.TopBar />\n            <div className={\"flex flex-row border-solid border-t-1 border-neutral-dimmed\"}>\n                <IsNotReadOnly>\n                    <EditorConfig.Ui.Toolbar />\n                </IsNotReadOnly>\n                <div className={\"flex-auto\"}>\n                    <EditorConfig.Ui.Content />\n                </div>\n                <IsNotReadOnly>\n                    <EditorConfig.Ui.Sidebar />\n                </IsNotReadOnly>\n            </div>\n            <EditorConfig.Ui.Elements group={\"overlays\"} />\n        </EditorLayoutContainer>\n    );\n});\n"],"names":["EditorLayoutContainer","styled","Layout","makeDecoratable","editor","useDocumentEditor","useReservedUISpace","dimensions","state","useEffect","currentOverflow","document","EditorConfig","IsNotReadOnly"],"mappings":";;;;;;;AAQA,MAAMA,wBAAwBC,OAAO,GAAG,CAAC;;;AAGzC,CAAC;AAEM,MAAMC,SAASC,gBAAgB,gBAAgB;IAClD,MAAMC,SAASC;IAEfC,mBAAmBC,CAAAA;QACfH,OAAO,YAAY,CAACI,CAAAA;YAChBA,MAAM,eAAe,GAAGD;QAC5B;IACJ;IAEAE,UAAU;QACN,MAAMC,kBAAkBC,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ;QACpDA,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG;QAC/B,OAAO;YACHA,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAGD;QACnC;IACJ,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACV,uBAAqBA,MAAAA,WAAAA,GAClB,oBAACY,aAAa,EAAE,CAAC,MAAM,uBACvB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,eAAaA,MAAAA,WAAAA,GACV,oBAACD,aAAa,EAAE,CAAC,OAAO,wBAE5B,oBAAC;QAAI,WAAW;qBACZ,oBAACA,aAAa,EAAE,CAAC,OAAO,wBAE5B,oBAACC,eAAaA,MAAAA,WAAAA,GACV,oBAACD,aAAa,EAAE,CAAC,OAAO,yBAGhC,oBAACA,aAAa,EAAE,CAAC,QAAQ;QAAC,OAAO;;AAG7C"}
+{"version":3,"file":"BaseEditor/config/Layout.js","sources":["../../../src/BaseEditor/config/Layout.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { EditorConfig } from \"./EditorConfig.js\";\nimport styled from \"@emotion/styled\";\nimport { IsNotReadOnly } from \"~/BaseEditor/config/IsNotReadOnly.js\";\nimport { useReservedUISpace } from \"~/BaseEditor/hooks/useReservedUISpace.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\n\nconst EditorLayoutContainer = styled.div`\n    height: 100%;\n    overflow: hidden;\n`;\n\nexport const Layout = makeDecoratable(\"EditorLayout\", () => {\n    const editor = useDocumentEditor();\n\n    useReservedUISpace(dimensions => {\n        editor.updateEditor(state => {\n            state.uiReservedSpace = dimensions;\n        });\n    });\n\n    useEffect(() => {\n        const currentOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = currentOverflow;\n        };\n    }, []);\n\n    return (\n        <EditorLayoutContainer>\n            <EditorConfig.Ui.TopBar />\n            <div className={\"flex flex-row\"}>\n                <IsNotReadOnly>\n                    <EditorConfig.Ui.Toolbar />\n                </IsNotReadOnly>\n                <div className={\"flex-auto\"}>\n                    <EditorConfig.Ui.Content />\n                </div>\n                <IsNotReadOnly>\n                    <EditorConfig.Ui.Sidebar />\n                </IsNotReadOnly>\n            </div>\n            <EditorConfig.Ui.Elements group={\"overlays\"} />\n        </EditorLayoutContainer>\n    );\n});\n"],"names":["EditorLayoutContainer","styled","Layout","makeDecoratable","editor","useDocumentEditor","useReservedUISpace","dimensions","state","useEffect","currentOverflow","document","EditorConfig","IsNotReadOnly"],"mappings":";;;;;;;AAQA,MAAMA,wBAAwBC,OAAO,GAAG,CAAC;;;AAGzC,CAAC;AAEM,MAAMC,SAASC,gBAAgB,gBAAgB;IAClD,MAAMC,SAASC;IAEfC,mBAAmBC,CAAAA;QACfH,OAAO,YAAY,CAACI,CAAAA;YAChBA,MAAM,eAAe,GAAGD;QAC5B;IACJ;IAEAE,UAAU;QACN,MAAMC,kBAAkBC,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ;QACpDA,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG;QAC/B,OAAO;YACHA,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAGD;QACnC;IACJ,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACV,uBAAqBA,MAAAA,WAAAA,GAClB,oBAACY,aAAa,EAAE,CAAC,MAAM,uBACvB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,eAAaA,MAAAA,WAAAA,GACV,oBAACD,aAAa,EAAE,CAAC,OAAO,wBAE5B,oBAAC;QAAI,WAAW;qBACZ,oBAACA,aAAa,EAAE,CAAC,OAAO,wBAE5B,oBAACC,eAAaA,MAAAA,WAAAA,GACV,oBAACD,aAAa,EAAE,CAAC,OAAO,yBAGhC,oBAACA,aAAa,EAAE,CAAC,QAAQ;QAAC,OAAO;;AAG7C"}

package/BaseEditor/config/Sidebar/Layout.js

@@ -1,23 +1,17 @@
 import react from "react";
 import { makeDecoratable } from "@webiny/app-admin";
-import { Tabs } from "@webiny/admin-ui";
+import { SegmentedControl } from "@webiny/admin-ui";
 import { Sidebar } from "./Sidebar.js";
 const Layout = makeDecoratable("SidebarLayout", ()=>/*#__PURE__*/ react.createElement("div", {
         "data-role": "editor-sidebar",
         "data-affects-preview": "width",
-        className: "bg-neutral-base border-l-sm border-l-neutral-dimmed"
-    }, /*#__PURE__*/ react.createElement(Tabs, {
-        size: "md",
-        spacing: "md",
-        separator: true,
-        defaultValue: "element",
-        tabs: [
-            /*#__PURE__*/ react.createElement(Sidebar.Elements, {
-                group: "groups",
-                key: "groups"
-            })
-        ]
-    })));
+        className: "bg-neutral-base border-l-sm border-l-neutral-dimmed h-full flex flex-col p-sm"
+    }, /*#__PURE__*/ react.createElement(SegmentedControl.Tabs, {
+        className: "flex-1 flex flex-col min-h-0",
+        variant: "dimmed"
+    }, /*#__PURE__*/ react.createElement(Sidebar.Elements, {
+        group: "groups"
+    }))));
 export { Layout };
 
 //# sourceMappingURL=Layout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/config/Sidebar/Layout.js","sources":["../../../../src/BaseEditor/config/Sidebar/Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { Tabs } from \"@webiny/admin-ui\";\nimport { Sidebar } from \"./Sidebar.js\";\n\nexport const Layout = makeDecoratable(\"SidebarLayout\", () => {\n    return (\n        <div\n            data-role=\"editor-sidebar\"\n            data-affects-preview={\"width\"}\n            className={\"bg-neutral-base border-l-sm border-l-neutral-dimmed\"}\n        >\n            <Tabs\n                size=\"md\"\n                spacing={\"md\"}\n                separator={true}\n                defaultValue={\"element\"}\n                tabs={[<Sidebar.Elements group=\"groups\" key={\"groups\"} />]}\n            />\n        </div>\n    );\n});\n"],"names":["Layout","makeDecoratable","Tabs","Sidebar"],"mappings":";;;;AAKO,MAAMA,SAASC,gBAAgB,iBAAiB,IAC5C,WAAP,GACI,oBAAC;QACG,aAAU;QACV,wBAAsB;QACtB,WAAW;qBAEX,oBAACC,MAAIA;QACD,MAAK;QACL,SAAS;QACT,WAAW;QACX,cAAc;QACd,MAAM;0BAAC,oBAACC,QAAQ,QAAQ;gBAAC,OAAM;gBAAS,KAAK;;SAAa"}
+{"version":3,"file":"BaseEditor/config/Sidebar/Layout.js","sources":["../../../../src/BaseEditor/config/Sidebar/Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { SegmentedControl } from \"@webiny/admin-ui\";\nimport { Sidebar } from \"./Sidebar.js\";\n\nexport const Layout = makeDecoratable(\"SidebarLayout\", () => {\n    return (\n        <div\n            data-role=\"editor-sidebar\"\n            data-affects-preview={\"width\"}\n            className={\n                \"bg-neutral-base border-l-sm border-l-neutral-dimmed h-full flex flex-col p-sm\"\n            }\n        >\n            <SegmentedControl.Tabs className={\"flex-1 flex flex-col min-h-0\"} variant={\"dimmed\"}>\n                <Sidebar.Elements group={\"groups\"} />\n            </SegmentedControl.Tabs>\n        </div>\n    );\n});\n"],"names":["Layout","makeDecoratable","SegmentedControl","Sidebar"],"mappings":";;;;AAKO,MAAMA,SAASC,gBAAgB,iBAAiB,IAC5C,WAAP,GACI,oBAAC;QACG,aAAU;QACV,wBAAsB;QACtB,WACI;qBAGJ,oBAACC,iBAAiB,IAAI;QAAC,WAAW;QAAgC,SAAS;qBACvE,oBAACC,QAAQ,QAAQ;QAAC,OAAO"}

package/BaseEditor/config/Sidebar/Sidebar.d.ts

@@ -100,7 +100,7 @@ export declare const Sidebar: (() => React.JSX.Element) & {
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     } & {
-        Tab: ({ name, label, disabled, element, visible, noPadding }: import("./Tab.js").TabProps) => React.JSX.Element;
+        Tab: ({ name, label, icon, disabled, element, visible }: import("./Tab.js").TabProps) => React.JSX.Element;
     };
     ScrollableContainer: ({ children }: any) => React.JSX.Element;
 };

package/BaseEditor/config/Sidebar/Sidebar.js

@@ -8,7 +8,7 @@ import { createGetId } from "../createGetId.js";
 import { ScrollableContainer } from "./ScrollableContainer.js";
 const SCOPE = "sidebar";
 const BaseSidebar = makeDecoratable("SidebarScopedLayout", ()=>/*#__PURE__*/ react.createElement("div", {
-        className: "w-[300px] flex-none"
+        className: "w-[var(--wb-spacing-sidebar)] flex-none"
     }, /*#__PURE__*/ react.createElement(Layout, null)));
 const ScopedElement = makeDecoratable("SidebarScopedElement", (props)=>/*#__PURE__*/ react.createElement(Element, {
         ...props,

package/BaseEditor/config/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/config/Sidebar/Sidebar.js","sources":["../../../../src/BaseEditor/config/Sidebar/Sidebar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { ElementProps as CoreElementProps } from \"../Element.js\";\nimport { Element as CoreElement } from \"../Element.js\";\nimport { Layout } from \"./Layout.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { Tab } from \"./Tab.js\";\nimport { createGetId } from \"../createGetId.js\";\nimport { ScrollableContainer } from \"../Sidebar/ScrollableContainer.js\";\n\nconst SCOPE = \"sidebar\";\n\nconst BaseSidebar = makeDecoratable(\"SidebarScopedLayout\", () => {\n    return (\n        <div className={\"w-[300px] flex-none\"}>\n            <Layout />\n        </div>\n    );\n});\n\nexport type ScopedElementProps = Omit<CoreElementProps, \"scope\">;\n\nconst ScopedElement = makeDecoratable(\"SidebarScopedElement\", (props: ScopedElementProps) => {\n    return <CoreElement {...props} scope={SCOPE} />;\n});\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type BaseElementProps = Omit<ScopedElementProps, \"id\">;\n\nconst BaseElement = makeDecoratable(\"SidebarElement\", (props: BaseElementProps) => {\n    return (\n        <ScopedElement\n            {...props}\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(\"SidebarElements\", (props: ElementsProps) => {\n    return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport type GroupProps = Omit<BaseElementProps, \"group\">;\n\nconst BaseGroup = makeDecoratable(\"SidebarGroup\", (props: GroupProps) => {\n    return (\n        <ScopedElement\n            {...props}\n            group={\"groups\"}\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 const Sidebar = Object.assign(BaseSidebar, {\n    Layout,\n    Element: BaseElement,\n    Elements,\n    Group: Object.assign(BaseGroup, { Tab }),\n    ScrollableContainer\n});\n"],"names":["SCOPE","BaseSidebar","makeDecoratable","Layout","ScopedElement","props","CoreElement","getElementId","createGetId","BaseElement","undefined","Elements","BaseElements","BaseGroup","Sidebar","Object","Tab","ScrollableContainer"],"mappings":";;;;;;;;AAWA,MAAMA,QAAQ;AAEd,MAAMC,cAAcC,gBAAgB,uBAAuB,IAChD,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;AAOnB,MAAMC,gBAAgBF,gBAAgB,wBAAwB,CAACG,QACpD,WAAP,GAAO,oBAACC,SAAWA;QAAE,GAAGD,KAAK;QAAE,OAAOL;;AAG1C,MAAMO,eAAeC,YAAYR;AAIjC,MAAMS,cAAcP,gBAAgB,kBAAkB,CAACG,QAC5C,WAAP,GACI,oBAACD,eAAaA;QACT,GAAGC,KAAK;QACT,IAAIE,aAAaF,MAAM,IAAI;QAC3B,QAAQA,MAAM,MAAM,GAAGE,aAAaF,MAAM,MAAM,IAAIK;QACpD,OAAOL,MAAM,KAAK,GAAGE,aAAaF,MAAM,KAAK,IAAIK;;AAO7D,MAAMC,mBAAWT,gBAAgB,mBAAmB,CAACG,QAC1C,WAAP,GAAO,oBAACO,UAAYA;QAAE,GAAGP,KAAK;QAAE,OAAOL;;AAK3C,MAAMa,YAAYX,gBAAgB,gBAAgB,CAACG,QACxC,WAAP,GACI,oBAACD,eAAaA;QACT,GAAGC,KAAK;QACT,OAAO;QACP,IAAIE,aAAaF,MAAM,IAAI;QAC3B,QAAQA,MAAM,MAAM,GAAGE,aAAaF,MAAM,MAAM,IAAIK;QACpD,OAAOL,MAAM,KAAK,GAAGE,aAAaF,MAAM,KAAK,IAAIK;;AAKtD,MAAMI,UAAUC,OAAO,MAAM,CAACd,aAAa;IAC9CE,QAAMA;IACN,SAASM;IACTE,UAAAA;IACA,OAAOI,OAAO,MAAM,CAACF,WAAW;QAAEG,KAAGA;IAAC;IACtCC,qBAAmBA;AACvB"}
+{"version":3,"file":"BaseEditor/config/Sidebar/Sidebar.js","sources":["../../../../src/BaseEditor/config/Sidebar/Sidebar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { ElementProps as CoreElementProps } from \"../Element.js\";\nimport { Element as CoreElement } from \"../Element.js\";\nimport { Layout } from \"./Layout.js\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements.js\";\nimport { Elements as BaseElements } from \"../Elements.js\";\nimport { Tab } from \"./Tab.js\";\nimport { createGetId } from \"../createGetId.js\";\nimport { ScrollableContainer } from \"../Sidebar/ScrollableContainer.js\";\n\nconst SCOPE = \"sidebar\";\n\nconst BaseSidebar = makeDecoratable(\"SidebarScopedLayout\", () => {\n    return (\n        <div className={\"w-[var(--wb-spacing-sidebar)] flex-none\"}>\n            <Layout />\n        </div>\n    );\n});\n\nexport type ScopedElementProps = Omit<CoreElementProps, \"scope\">;\n\nconst ScopedElement = makeDecoratable(\"SidebarScopedElement\", (props: ScopedElementProps) => {\n    return <CoreElement {...props} scope={SCOPE} />;\n});\n\nconst getElementId = createGetId(SCOPE)();\n\nexport type BaseElementProps = Omit<ScopedElementProps, \"id\">;\n\nconst BaseElement = makeDecoratable(\"SidebarElement\", (props: BaseElementProps) => {\n    return (\n        <ScopedElement\n            {...props}\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(\"SidebarElements\", (props: ElementsProps) => {\n    return <BaseElements {...props} scope={SCOPE} />;\n});\n\nexport type GroupProps = Omit<BaseElementProps, \"group\">;\n\nconst BaseGroup = makeDecoratable(\"SidebarGroup\", (props: GroupProps) => {\n    return (\n        <ScopedElement\n            {...props}\n            group={\"groups\"}\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 const Sidebar = Object.assign(BaseSidebar, {\n    Layout,\n    Element: BaseElement,\n    Elements,\n    Group: Object.assign(BaseGroup, { Tab }),\n    ScrollableContainer\n});\n"],"names":["SCOPE","BaseSidebar","makeDecoratable","Layout","ScopedElement","props","CoreElement","getElementId","createGetId","BaseElement","undefined","Elements","BaseElements","BaseGroup","Sidebar","Object","Tab","ScrollableContainer"],"mappings":";;;;;;;;AAWA,MAAMA,QAAQ;AAEd,MAAMC,cAAcC,gBAAgB,uBAAuB,IAChD,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;AAOnB,MAAMC,gBAAgBF,gBAAgB,wBAAwB,CAACG,QACpD,WAAP,GAAO,oBAACC,SAAWA;QAAE,GAAGD,KAAK;QAAE,OAAOL;;AAG1C,MAAMO,eAAeC,YAAYR;AAIjC,MAAMS,cAAcP,gBAAgB,kBAAkB,CAACG,QAC5C,WAAP,GACI,oBAACD,eAAaA;QACT,GAAGC,KAAK;QACT,IAAIE,aAAaF,MAAM,IAAI;QAC3B,QAAQA,MAAM,MAAM,GAAGE,aAAaF,MAAM,MAAM,IAAIK;QACpD,OAAOL,MAAM,KAAK,GAAGE,aAAaF,MAAM,KAAK,IAAIK;;AAO7D,MAAMC,mBAAWT,gBAAgB,mBAAmB,CAACG,QAC1C,WAAP,GAAO,oBAACO,UAAYA;QAAE,GAAGP,KAAK;QAAE,OAAOL;;AAK3C,MAAMa,YAAYX,gBAAgB,gBAAgB,CAACG,QACxC,WAAP,GACI,oBAACD,eAAaA;QACT,GAAGC,KAAK;QACT,OAAO;QACP,IAAIE,aAAaF,MAAM,IAAI;QAC3B,QAAQA,MAAM,MAAM,GAAGE,aAAaF,MAAM,MAAM,IAAIK;QACpD,OAAOL,MAAM,KAAK,GAAGE,aAAaF,MAAM,KAAK,IAAIK;;AAKtD,MAAMI,UAAUC,OAAO,MAAM,CAACd,aAAa;IAC9CE,QAAMA;IACN,SAASM;IACTE,UAAAA;IACA,OAAOI,OAAO,MAAM,CAACF,WAAW;QAAEG,KAAGA;IAAC;IACtCC,qBAAmBA;AACvB"}

package/BaseEditor/config/Sidebar/Tab.d.ts

@@ -6,9 +6,9 @@ export declare const TabContainer: import("@emotion/styled").StyledComponent<{
 export interface TabProps {
     name: string;
     label: string;
-    noPadding?: boolean;
+    icon?: React.ReactElement;
     element: React.JSX.Element;
     disabled?: boolean;
     visible?: boolean;
 }
-export declare const Tab: ({ name, label, disabled, element, visible, noPadding }: TabProps) => React.JSX.Element;
+export declare const Tab: ({ name, label, icon, disabled, element, visible }: TabProps) => React.JSX.Element;

package/BaseEditor/config/Sidebar/Tab.js

@@ -1,6 +1,6 @@
 import react from "react";
 import styled from "@emotion/styled";
-import { Tabs } from "@webiny/admin-ui";
+import { SegmentedControl } from "@webiny/admin-ui";
 const TabContainer = styled("div")({
     display: "flex",
     position: "relative",
@@ -18,10 +18,10 @@ const TabContainer = styled("div")({
         outline: "1px solid slategrey"
     }
 });
-const Tab = ({ name, label, disabled, element, visible, noPadding })=>/*#__PURE__*/ react.createElement(Tabs.Tab, {
-        className: noPadding ? "p-0" : void 0,
+const Tab = ({ name, label, icon, disabled, element, visible })=>/*#__PURE__*/ react.createElement(SegmentedControl.Tabs.Tab, {
         value: name,
         trigger: label,
+        icon: icon,
         disabled: disabled,
         visible: visible,
         content: /*#__PURE__*/ react.createElement(TabContainer, null, element)

package/BaseEditor/config/Sidebar/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/config/Sidebar/Tab.js","sources":["../../../../src/BaseEditor/config/Sidebar/Tab.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Tabs } from \"@webiny/admin-ui\";\n\nexport const TabContainer = styled(\"div\")({\n    display: \"flex\",\n    position: \"relative\",\n    flexDirection: \"column\",\n    height: \"calc(100vh - 44px - 49px)\", // Subtract top-bar and tab-header height\n    overflowY: \"auto\",\n    // Style scrollbar\n    \"&::-webkit-scrollbar\": {\n        width: 1\n    },\n    \"&::-webkit-scrollbar-track\": {\n        boxShadow: \"inset 0 0 6px rgba(0, 0, 0, 0.3)\"\n    },\n    \"&::-webkit-scrollbar-thumb\": {\n        backgroundColor: \"darkgrey\",\n        outline: \"1px solid slategrey\"\n    }\n});\n\nexport interface TabProps {\n    name: string;\n    label: string;\n    noPadding?: boolean;\n    element: React.JSX.Element;\n    disabled?: boolean;\n    visible?: boolean;\n}\n\nexport const Tab = ({ name, label, disabled, element, visible, noPadding }: TabProps) => {\n    return (\n        <Tabs.Tab\n            className={noPadding ? \"p-0\" : undefined}\n            value={name}\n            trigger={label}\n            disabled={disabled}\n            visible={visible}\n            content={<TabContainer>{element}</TabContainer>}\n        />\n    );\n};\n"],"names":["TabContainer","styled","Tab","name","label","disabled","element","visible","noPadding","Tabs","undefined"],"mappings":";;;AAIO,MAAMA,eAAeC,OAAO,OAAO;IACtC,SAAS;IACT,UAAU;IACV,eAAe;IACf,QAAQ;IACR,WAAW;IAEX,wBAAwB;QACpB,OAAO;IACX;IACA,8BAA8B;QAC1B,WAAW;IACf;IACA,8BAA8B;QAC1B,iBAAiB;QACjB,SAAS;IACb;AACJ;AAWO,MAAMC,MAAM,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAEC,SAAS,EAAY,GACzE,WAAP,GACI,oBAACC,KAAK,GAAG;QACL,WAAWD,YAAY,QAAQE;QAC/B,OAAOP;QACP,SAASC;QACT,UAAUC;QACV,SAASE;QACT,uBAAS,oBAACP,cAAYA,MAAEM"}
+{"version":3,"file":"BaseEditor/config/Sidebar/Tab.js","sources":["../../../../src/BaseEditor/config/Sidebar/Tab.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { SegmentedControl } from \"@webiny/admin-ui\";\n\nexport const TabContainer = styled(\"div\")({\n    display: \"flex\",\n    position: \"relative\",\n    flexDirection: \"column\",\n    height: \"calc(100vh - 44px - 49px)\", // Subtract top-bar and tab-header height\n    overflowY: \"auto\",\n    // Style scrollbar\n    \"&::-webkit-scrollbar\": {\n        width: 1\n    },\n    \"&::-webkit-scrollbar-track\": {\n        boxShadow: \"inset 0 0 6px rgba(0, 0, 0, 0.3)\"\n    },\n    \"&::-webkit-scrollbar-thumb\": {\n        backgroundColor: \"darkgrey\",\n        outline: \"1px solid slategrey\"\n    }\n});\n\nexport interface TabProps {\n    name: string;\n    label: string;\n    icon?: React.ReactElement;\n    element: React.JSX.Element;\n    disabled?: boolean;\n    visible?: boolean;\n}\n\nexport const Tab = ({ name, label, icon, disabled, element, visible }: TabProps) => {\n    return (\n        <SegmentedControl.Tabs.Tab\n            value={name}\n            trigger={label}\n            icon={icon}\n            disabled={disabled}\n            visible={visible}\n            content={<TabContainer>{element}</TabContainer>}\n        />\n    );\n};\n"],"names":["TabContainer","styled","Tab","name","label","icon","disabled","element","visible","SegmentedControl"],"mappings":";;;AAIO,MAAMA,eAAeC,OAAO,OAAO;IACtC,SAAS;IACT,UAAU;IACV,eAAe;IACf,QAAQ;IACR,WAAW;IAEX,wBAAwB;QACpB,OAAO;IACX;IACA,8BAA8B;QAC1B,WAAW;IACf;IACA,8BAA8B;QAC1B,iBAAiB;QACjB,SAAS;IACb;AACJ;AAWO,MAAMC,MAAM,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAY,GACpE,WAAP,GACI,oBAACC,iBAAiB,IAAI,CAAC,GAAG;QACtB,OAAON;QACP,SAASC;QACT,MAAMC;QACN,UAAUC;QACV,SAASE;QACT,uBAAS,oBAACR,cAAYA,MAAEO"}

package/BaseEditor/config/Toolbar/Layout.js

@@ -1,21 +1,15 @@
 import react from "react";
+import { SegmentedControl } from "@webiny/admin-ui";
 import { Toolbar } from "./Toolbar.js";
-import { Tabs } from "@webiny/admin-ui/Tabs/index.js";
 const Layout = ()=>/*#__PURE__*/ react.createElement("div", {
         "data-role": "editor-toolbar",
-        className: "bg-neutral-base border-r-sm border-r-neutral-dimmed w-[300px] h-full"
-    }, /*#__PURE__*/ react.createElement(Tabs, {
-        size: "md",
-        spacing: "md",
-        defaultValue: "insert",
-        tabs: [
-            /*#__PURE__*/ react.createElement(Toolbar.Elements, {
-                key: "tabs",
-                group: "tabs"
-            })
-        ],
-        separator: true
-    }));
+        className: "bg-neutral-base border-r-sm border-r-neutral-dimmed h-full flex flex-col p-sm"
+    }, /*#__PURE__*/ react.createElement(SegmentedControl.Tabs, {
+        className: "flex-1 flex flex-col min-h-0",
+        variant: "dimmed"
+    }, /*#__PURE__*/ react.createElement(Toolbar.Elements, {
+        group: "tabs"
+    })));
 export { Layout };
 
 //# sourceMappingURL=Layout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/config/Toolbar/Layout.js","sources":["../../../../src/BaseEditor/config/Toolbar/Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { Toolbar } from \"./Toolbar.js\";\nimport { Tabs } from \"@webiny/admin-ui/Tabs/index.js\";\n\nexport const Layout = () => {\n    return (\n        <div\n            data-role={\"editor-toolbar\"}\n            className={\"bg-neutral-base border-r-sm border-r-neutral-dimmed w-[300px] h-full\"}\n        >\n            <Tabs\n                size=\"md\"\n                spacing={\"md\"}\n                defaultValue={\"insert\"}\n                tabs={[<Toolbar.Elements key=\"tabs\" group={\"tabs\"} />]}\n                separator={true}\n            />\n        </div>\n    );\n};\n"],"names":["Layout","Tabs","Toolbar"],"mappings":";;;AAIO,MAAMA,SAAS,IACX,WAAP,GACI,oBAAC;QACG,aAAW;QACX,WAAW;qBAEX,oBAACC,MAAIA;QACD,MAAK;QACL,SAAS;QACT,cAAc;QACd,MAAM;0BAAC,oBAACC,QAAQ,QAAQ;gBAAC,KAAI;gBAAO,OAAO;;SAAW;QACtD,WAAW"}
+{"version":3,"file":"BaseEditor/config/Toolbar/Layout.js","sources":["../../../../src/BaseEditor/config/Toolbar/Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { SegmentedControl } from \"@webiny/admin-ui\";\nimport { Toolbar } from \"./Toolbar.js\";\n\nexport const Layout = () => {\n    return (\n        <div\n            data-role={\"editor-toolbar\"}\n            className={\n                \"bg-neutral-base border-r-sm border-r-neutral-dimmed h-full flex flex-col p-sm\"\n            }\n        >\n            <SegmentedControl.Tabs className={\"flex-1 flex flex-col min-h-0\"} variant={\"dimmed\"}>\n                <Toolbar.Elements group={\"tabs\"} />\n            </SegmentedControl.Tabs>\n        </div>\n    );\n};\n"],"names":["Layout","SegmentedControl","Toolbar"],"mappings":";;;AAIO,MAAMA,SAAS,IACX,WAAP,GACI,oBAAC;QACG,aAAW;QACX,WACI;qBAGJ,oBAACC,iBAAiB,IAAI;QAAC,WAAW;QAAgC,SAAS;qBACvE,oBAACC,QAAQ,QAAQ;QAAC,OAAO"}

package/BaseEditor/config/Toolbar/Tab.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface TabProps {
+    name: string;
+    label: string;
+    icon?: React.ReactElement;
+    element: React.JSX.Element;
+    disabled?: boolean;
+    visible?: boolean;
+}
+export declare const Tab: ({ name, label, icon, element, disabled, visible }: TabProps) => React.JSX.Element;

package/BaseEditor/config/Toolbar/Tab.js

@@ -0,0 +1,13 @@
+import react from "react";
+import { SegmentedControl } from "@webiny/admin-ui";
+const Tab = ({ name, label, icon, element, disabled, visible })=>/*#__PURE__*/ react.createElement(SegmentedControl.Tabs.Tab, {
+        value: name,
+        trigger: label,
+        icon: icon,
+        disabled: disabled,
+        visible: visible,
+        content: element
+    });
+export { Tab };
+
+//# sourceMappingURL=Tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/config/Toolbar/Tab.js","sources":["../../../../src/BaseEditor/config/Toolbar/Tab.tsx"],"sourcesContent":["import React from \"react\";\nimport { SegmentedControl } from \"@webiny/admin-ui\";\n\nexport interface TabProps {\n    name: string;\n    label: string;\n    icon?: React.ReactElement;\n    element: React.JSX.Element;\n    disabled?: boolean;\n    visible?: boolean;\n}\n\nexport const Tab = ({ name, label, icon, element, disabled, visible }: TabProps) => (\n    <SegmentedControl.Tabs.Tab\n        value={name}\n        trigger={label}\n        icon={icon}\n        disabled={disabled}\n        visible={visible}\n        content={element}\n    />\n);\n"],"names":["Tab","name","label","icon","element","disabled","visible","SegmentedControl"],"mappings":";;AAYO,MAAMA,MAAM,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,OAAO,EAAY,iBAC3E,oBAACC,iBAAiB,IAAI,CAAC,GAAG;QACtB,OAAON;QACP,SAASC;QACT,MAAMC;QACN,UAAUE;QACV,SAASC;QACT,SAASF"}

package/BaseEditor/config/Toolbar/Toolbar.d.ts

@@ -61,4 +61,5 @@ export declare const Toolbar: (() => React.JSX.Element) & {
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
+    Tab: ({ name, label, icon, element, disabled, visible }: import("./Tab.js").TabProps) => React.JSX.Element;
 };

package/BaseEditor/config/Toolbar/Toolbar.js

@@ -4,9 +4,10 @@ import { Element } from "../Element.js";
 import { Layout } from "./Layout.js";
 import { Elements } from "../Elements.js";
 import { createGetId } from "../createGetId.js";
+import { Tab } from "./Tab.js";
 const SCOPE = "toolbar";
 const BaseToolbar = makeDecoratable("ToolbarLayout", ()=>/*#__PURE__*/ react.createElement("div", {
-        className: "w-[300px] flex-none",
+        className: "w-[var(--wb-spacing-toolbar)] flex-none",
         "data-affects-preview": "width"
     }, /*#__PURE__*/ react.createElement(Layout, null)));
 const getElementId = createGetId(SCOPE)();
@@ -24,7 +25,8 @@ const Toolbar_Elements = makeDecoratable("ToolbarElements", (props)=>/*#__PURE__
 const Toolbar = Object.assign(BaseToolbar, {
     Layout: Layout,
     Element: BaseToolbarElement,
-    Elements: Toolbar_Elements
+    Elements: Toolbar_Elements,
+    Tab: Tab
 });
 export { Toolbar };
 

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

@@ -1 +1 @@
-{"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\";\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"],"names":["SCOPE","BaseToolbar","makeDecoratable","Layout","getElementId","createGetId","BaseToolbarElement","props","BaseElement","undefined","Elements","BaseElements","Toolbar","Object"],"mappings":";;;;;;AASA,MAAMA,QAAQ;AAEd,MAAMC,cAAcC,gBAAgB,iBAAiB,IAC1C,WAAP,GACI,oBAAC;QAAI,WAAW;QAAuB,wBAAsB;qBACzD,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;AACJ"}
+{"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/defaultConfig/Content/AddressBar/AddressBar.js

@@ -1,5 +1,4 @@
 import react, { useEffect, useState } from "react";
-import { BreakpointSelector } from "./BreakpointSelector.js";
 import { PreviewInNewTab } from "./PreviewInNewTab.js";
 import { OpenInNewTab } from "./OpenInNewTab.js";
 import { RefreshPreview } from "./RefreshPreview.js";
@@ -26,9 +25,7 @@ const AddressBar = ()=>{
         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)));
+    }, /*#__PURE__*/ react.createElement(RefreshPreview, null), /*#__PURE__*/ react.createElement(PreviewInNewTab, null), /*#__PURE__*/ react.createElement(OpenInNewTab, null))));
 };
 export { AddressBar };
 

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

@@ -1 +1 @@
-{"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 { 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"],"names":["AddressBar","path","useSelectFromDocument","document","previewDomain","usePreviewDomain","addressBarUrl","setAddressBarUrl","useState","useEffect","PreviewDomain","RefreshPreview","PreviewInNewTab","OpenInNewTab","BreakpointSelector"],"mappings":";;;;;;;;AASO,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,SAAAA,WAAAA,GAGrB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,oBAAkBA;AAInC"}
+{"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,32 +1,29 @@
-import react from "react";
-import classnames from "classnames";
-import { Heading, IconButton, Text, Tooltip } 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";
 const BreakpointSelector = ()=>{
     const { breakpoint, breakpoints, setBreakpoint } = useBreakpoint();
-    return /*#__PURE__*/ react.createElement("div", {
-        className: "align-right bg-neutral-light rounded-md"
-    }, breakpoints.map((bp)=>/*#__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, {
-                size: "md",
+    const items = useMemo(()=>breakpoints.map((bp)=>({
+                value: bp.name,
                 icon: /*#__PURE__*/ react.createElement(InlineSvg, {
-                    src: bp.icon
+                    src: bp.icon,
+                    className: "size-md"
                 }),
-                variant: breakpoint.name === bp.name ? "tertiary" : "ghost",
-                onClick: ()=>setBreakpoint(bp.name)
-            })
-        })));
+                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",
+        items: items,
+        value: breakpoint.name,
+        onChange: setBreakpoint,
+        variant: "ghost",
+        bordered: false
+    });
 };
 export { BreakpointSelector };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Content/AddressBar/BreakpointSelector.js","sources":["../../../../../src/BaseEditor/defaultConfig/Content/AddressBar/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"],"names":["BreakpointSelector","breakpoint","breakpoints","setBreakpoint","useBreakpoint","bp","Tooltip","Heading","Text","classNames","IconButton","InlineSvg"],"mappings":";;;;;AAMO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAEC,aAAa,EAAE,GAAGC;IAEnD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXF,YAAY,GAAG,CAACG,CAAAA,KACN,WAAP,GACI,oBAACC,SAAOA;YACJ,KAAKD,GAAG,IAAI;YACZ,uBACI,oBAAC,2BACG,oBAACE,SAAOA;gBAAC,OAAO;eAAIF,GAAG,KAAK,iBAC5B,oBAACG,MAAIA;gBAAC,MAAK;eAAMH,GAAG,WAAW;YAGvC,MAAK;YACL,WAAWI,WAAW,kBAAkB;gBACpC,QAAQJ,OAAOJ;YACnB;YACA,uBACI,oBAACS,YAAUA;gBACP,MAAM;gBACN,oBAAM,oBAACC,WAASA;oBAAC,KAAKN,GAAG,IAAI;;gBAC7B,SAASJ,WAAW,IAAI,KAAKI,GAAG,IAAI,GAAG,aAAa;gBACpD,SAAS,IAAMF,cAAcE,GAAG,IAAI;;;AAQpE"}
+{"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"}

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

@@ -26,7 +26,7 @@ const PreviewDomain = ()=>{
     }, [
         previewDomain
     ]);
-    const classNames = cn("absolute left-0 top-0", isOverridden ? "fill-accent-default" : "fill-neutral-disabled");
+    const classNames = cn("absolute left-0 top-0", isOverridden ? "fill-accent-default" : "");
     return /*#__PURE__*/ react.createElement(DropdownMenu, {
         open: isOpen,
         align: "center",