@webiny/app-website-builder 6.0.0-alpha.4 → 6.0.0-rc.0

package/BaseEditor/config/ElementAction.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ElementProps } from "./Element";
+import type { ElementProps } from "./Element.js";
 export type ElementActionProps = Omit<ElementProps, "scope" | "group" | "id">;
 export declare const ElementActions: (() => React.JSX.Element) & {
     original: () => React.JSX.Element;
@@ -39,5 +39,5 @@ export declare const ElementAction: ((props: ElementActionProps) => React.JSX.El
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
-    IconButton: ({ label, icon, disabled, onClick }: import("./IconButton").IconButtonProps) => React.JSX.Element;
+    IconButton: ({ label, icon, disabled, onClick }: import("./IconButton.js").IconButtonProps) => React.JSX.Element;
 };

package/BaseEditor/config/ElementAction.js

@@ -1,8 +1,8 @@
 import React from "react";
 import { makeDecoratable } from "@webiny/react-composition";
-import { Element } from "./Element";
-import { Elements } from "./Elements";
-import { IconButton } from "./IconButton";
+import { Element } from "./Element.js";
+import { Elements } from "./Elements.js";
+import { IconButton } from "./IconButton.js";
 const getElementId = value => {
   return ["elementAction", value].join(":");
 };

package/BaseEditor/config/ElementAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","Element","Elements","IconButton","getElementId","value","join","BaseElementAction","props","createElement","Object","assign","scope","id","name","before","undefined","after","ElementActions","ElementAction"],"sources":["ElementAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport type { ElementProps } from \"./Element\";\nimport { Element } from \"./Element\";\nimport { Elements } from \"./Elements\";\nimport { IconButton } from \"./IconButton\";\n\nconst getElementId = (value: string) => {\n    return [\"elementAction\", value].join(\":\");\n};\n\nexport type ElementActionProps = Omit<ElementProps, \"scope\" | \"group\" | \"id\">;\n\nconst BaseElementAction = makeDecoratable(\"ElementAction\", (props: ElementActionProps) => {\n    return (\n        <Element\n            {...props}\n            scope={\"elementActions\"}\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 ElementActions = makeDecoratable(\"ElementActions\", () => {\n    return <Elements scope={\"elementActions\"} />;\n});\n\nexport const ElementAction = Object.assign(BaseElementAction, { IconButton });\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,OAAO;AAChB,SAASC,QAAQ;AACjB,SAASC,UAAU;AAEnB,MAAMC,YAAY,GAAIC,KAAa,IAAK;EACpC,OAAO,CAAC,eAAe,EAAEA,KAAK,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AAC7C,CAAC;AAID,MAAMC,iBAAiB,GAAGP,eAAe,CAAC,eAAe,EAAGQ,KAAyB,IAAK;EACtF,oBACIT,KAAA,CAAAU,aAAA,CAACR,OAAO,EAAAS,MAAA,CAAAC,MAAA,KACAH,KAAK;IACTI,KAAK,EAAE,gBAAiB;IACxBC,EAAE,EAAET,YAAY,CAACI,KAAK,CAACM,IAAI,CAAE;IAC7BC,MAAM,EAAEP,KAAK,CAACO,MAAM,GAAGX,YAAY,CAACI,KAAK,CAACO,MAAM,CAAC,GAAGC,SAAU;IAC9DC,KAAK,EAAET,KAAK,CAACS,KAAK,GAAGb,YAAY,CAACI,KAAK,CAACS,KAAK,CAAC,GAAGD;EAAU,EAC9D,CAAC;AAEV,CAAC,CAAC;AAEF,OAAO,MAAME,cAAc,GAAGlB,eAAe,CAAC,gBAAgB,EAAE,MAAM;EAClE,oBAAOD,KAAA,CAAAU,aAAA,CAACP,QAAQ;IAACU,KAAK,EAAE;EAAiB,CAAE,CAAC;AAChD,CAAC,CAAC;AAEF,OAAO,MAAMO,aAAa,GAAGT,MAAM,CAACC,MAAM,CAACJ,iBAAiB,EAAE;EAAEJ;AAAW,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","Element","Elements","IconButton","getElementId","value","join","BaseElementAction","props","createElement","Object","assign","scope","id","name","before","undefined","after","ElementActions","ElementAction"],"sources":["ElementAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport type { ElementProps } from \"./Element.js\";\nimport { Element } from \"./Element.js\";\nimport { Elements } from \"./Elements.js\";\nimport { IconButton } from \"./IconButton.js\";\n\nconst getElementId = (value: string) => {\n    return [\"elementAction\", value].join(\":\");\n};\n\nexport type ElementActionProps = Omit<ElementProps, \"scope\" | \"group\" | \"id\">;\n\nconst BaseElementAction = makeDecoratable(\"ElementAction\", (props: ElementActionProps) => {\n    return (\n        <Element\n            {...props}\n            scope={\"elementActions\"}\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 ElementActions = makeDecoratable(\"ElementActions\", () => {\n    return <Elements scope={\"elementActions\"} />;\n});\n\nexport const ElementAction = Object.assign(BaseElementAction, { IconButton });\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,OAAO;AAChB,SAASC,QAAQ;AACjB,SAASC,UAAU;AAEnB,MAAMC,YAAY,GAAIC,KAAa,IAAK;EACpC,OAAO,CAAC,eAAe,EAAEA,KAAK,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AAC7C,CAAC;AAID,MAAMC,iBAAiB,GAAGP,eAAe,CAAC,eAAe,EAAGQ,KAAyB,IAAK;EACtF,oBACIT,KAAA,CAAAU,aAAA,CAACR,OAAO,EAAAS,MAAA,CAAAC,MAAA,KACAH,KAAK;IACTI,KAAK,EAAE,gBAAiB;IACxBC,EAAE,EAAET,YAAY,CAACI,KAAK,CAACM,IAAI,CAAE;IAC7BC,MAAM,EAAEP,KAAK,CAACO,MAAM,GAAGX,YAAY,CAACI,KAAK,CAACO,MAAM,CAAC,GAAGC,SAAU;IAC9DC,KAAK,EAAET,KAAK,CAACS,KAAK,GAAGb,YAAY,CAACI,KAAK,CAACS,KAAK,CAAC,GAAGD;EAAU,EAC9D,CAAC;AAEV,CAAC,CAAC;AAEF,OAAO,MAAME,cAAc,GAAGlB,eAAe,CAAC,gBAAgB,EAAE,MAAM;EAClE,oBAAOD,KAAA,CAAAU,aAAA,CAACP,QAAQ;IAACU,KAAK,EAAE;EAAiB,CAAE,CAAC;AAChD,CAAC,CAAC;AAEF,OAAO,MAAMO,aAAa,GAAGT,MAAM,CAACC,MAAM,CAACJ,iBAAiB,EAAE;EAAEJ;AAAW,CAAC,CAAC","ignoreList":[]}

package/BaseEditor/config/ElementInput.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ComponentInput } from "@webiny/website-builder-sdk";
-import type { InputBindingOnChange } from "../defaultConfig/Sidebar/ElementSettings/useInputValue";
-import type { IMetadata } from "../metadata";
+import type { InputBindingOnChange } from "../defaultConfig/Sidebar/ElementSettings/useInputValue.js";
+import type { IMetadata } from "../../BaseEditor/metadata/index.js";
 export interface ElementInputRendererProps {
     label: React.ReactNode;
     metadata: IMetadata;

package/BaseEditor/config/ElementInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Property","useIdGenerator","Renderer","props","getId","name","component","createElement","id","array","value","ElementInput"],"sources":["ElementInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property, useIdGenerator } from \"@webiny/react-properties\";\nimport type { ComponentInput } from \"@webiny/website-builder-sdk\";\nimport type { InputBindingOnChange } from \"../defaultConfig/Sidebar/ElementSettings/useInputValue\";\nimport type { IMetadata } from \"~/BaseEditor/metadata\";\n\nexport interface ElementInputRendererProps {\n    label: React.ReactNode;\n    metadata: IMetadata;\n    value: any;\n    onChange: InputBindingOnChange;\n    onPreviewChange: InputBindingOnChange;\n    input: ComponentInput;\n}\n\nexport interface RendererProps {\n    name: string;\n    component: React.ComponentType<any>;\n}\n\nconst Renderer = (props: RendererProps) => {\n    const getId = useIdGenerator(\"inputRenderer\");\n    const { name, component } = props;\n\n    return (\n        <Property id={getId(name)} name={\"inputRenderers\"} array={true}>\n            <Property id={getId(name, \"name\")} name={\"name\"} value={name} />\n            <Property id={getId(name, \"component\")} name={\"component\"} value={component} />\n        </Property>\n    );\n};\n\nexport interface ElementInputConfig {\n    name: string;\n    component: React.ComponentType<ElementInputRendererProps>;\n}\n\nexport const ElementInput = {\n    Renderer\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,cAAc,QAAQ,0BAA0B;AAmBnE,MAAMC,QAAQ,GAAIC,KAAoB,IAAK;EACvC,MAAMC,KAAK,GAAGH,cAAc,CAAC,eAAe,CAAC;EAC7C,MAAM;IAAEI,IAAI;IAAEC;EAAU,CAAC,GAAGH,KAAK;EAEjC,oBACIJ,KAAA,CAAAQ,aAAA,CAACP,QAAQ;IAACQ,EAAE,EAAEJ,KAAK,CAACC,IAAI,CAAE;IAACA,IAAI,EAAE,gBAAiB;IAACI,KAAK,EAAE;EAAK,gBAC3DV,KAAA,CAAAQ,aAAA,CAACP,QAAQ;IAACQ,EAAE,EAAEJ,KAAK,CAACC,IAAI,EAAE,MAAM,CAAE;IAACA,IAAI,EAAE,MAAO;IAACK,KAAK,EAAEL;EAAK,CAAE,CAAC,eAChEN,KAAA,CAAAQ,aAAA,CAACP,QAAQ;IAACQ,EAAE,EAAEJ,KAAK,CAACC,IAAI,EAAE,WAAW,CAAE;IAACA,IAAI,EAAE,WAAY;IAACK,KAAK,EAAEJ;EAAU,CAAE,CACxE,CAAC;AAEnB,CAAC;AAOD,OAAO,MAAMK,YAAY,GAAG;EACxBT;AACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Property","useIdGenerator","Renderer","props","getId","name","component","createElement","id","array","value","ElementInput"],"sources":["ElementInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property, useIdGenerator } from \"@webiny/react-properties\";\nimport type { ComponentInput } from \"@webiny/website-builder-sdk\";\nimport type { InputBindingOnChange } from \"../defaultConfig/Sidebar/ElementSettings/useInputValue.js\";\nimport type { IMetadata } from \"~/BaseEditor/metadata/index.js\";\n\nexport interface ElementInputRendererProps {\n    label: React.ReactNode;\n    metadata: IMetadata;\n    value: any;\n    onChange: InputBindingOnChange;\n    onPreviewChange: InputBindingOnChange;\n    input: ComponentInput;\n}\n\nexport interface RendererProps {\n    name: string;\n    component: React.ComponentType<any>;\n}\n\nconst Renderer = (props: RendererProps) => {\n    const getId = useIdGenerator(\"inputRenderer\");\n    const { name, component } = props;\n\n    return (\n        <Property id={getId(name)} name={\"inputRenderers\"} array={true}>\n            <Property id={getId(name, \"name\")} name={\"name\"} value={name} />\n            <Property id={getId(name, \"component\")} name={\"component\"} value={component} />\n        </Property>\n    );\n};\n\nexport interface ElementInputConfig {\n    name: string;\n    component: React.ComponentType<ElementInputRendererProps>;\n}\n\nexport const ElementInput = {\n    Renderer\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,cAAc,QAAQ,0BAA0B;AAmBnE,MAAMC,QAAQ,GAAIC,KAAoB,IAAK;EACvC,MAAMC,KAAK,GAAGH,cAAc,CAAC,eAAe,CAAC;EAC7C,MAAM;IAAEI,IAAI;IAAEC;EAAU,CAAC,GAAGH,KAAK;EAEjC,oBACIJ,KAAA,CAAAQ,aAAA,CAACP,QAAQ;IAACQ,EAAE,EAAEJ,KAAK,CAACC,IAAI,CAAE;IAACA,IAAI,EAAE,gBAAiB;IAACI,KAAK,EAAE;EAAK,gBAC3DV,KAAA,CAAAQ,aAAA,CAACP,QAAQ;IAACQ,EAAE,EAAEJ,KAAK,CAACC,IAAI,EAAE,MAAM,CAAE;IAACA,IAAI,EAAE,MAAO;IAACK,KAAK,EAAEL;EAAK,CAAE,CAAC,eAChEN,KAAA,CAAAQ,aAAA,CAACP,QAAQ;IAACQ,EAAE,EAAEJ,KAAK,CAACC,IAAI,EAAE,WAAW,CAAE;IAACA,IAAI,EAAE,WAAY;IAACK,KAAK,EAAEJ;EAAU,CAAE,CACxE,CAAC;AAEnB,CAAC;AAOD,OAAO,MAAMK,YAAY,GAAG;EACxBT;AACJ,CAAC","ignoreList":[]}

package/BaseEditor/config/ElementProperty.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import type { ElementProps } from "./Element";
-import type { ElementsProps } from "./Elements";
+import type { ElementProps } from "./Element.js";
+import type { ElementsProps } from "./Elements.js";
 export type ElementPropertyProps = Omit<ElementProps, "scope" | "id">;
 export declare const ElementProperty: ((props: ElementPropertyProps) => React.JSX.Element) & {
     original: (props: ElementPropertyProps) => React.JSX.Element;

package/BaseEditor/config/ElementProperty.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { makeDecoratable } from "@webiny/react-composition";
-import { Element } from "./Element";
-import { Elements } from "./Elements";
+import { Element } from "./Element.js";
+import { Elements } from "./Elements.js";
 const SCOPE = "elementProperties";
 const getElementId = value => {
   return ["elementProperty", value].join(":");

package/BaseEditor/config/ElementProperty.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","Element","Elements","SCOPE","getElementId","value","join","BaseElementProperty","props","createElement","Object","assign","scope","id","name","before","undefined","after","ElementPropertyGroups","STYLE","ELEMENT","ElementProperty","ElementProperties","group","transform"],"sources":["ElementProperty.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport type { ElementProps } from \"./Element\";\nimport { Element } from \"./Element\";\nimport type { ElementsProps } from \"./Elements\";\nimport { Elements } from \"./Elements\";\n\nconst SCOPE = \"elementProperties\";\n\nexport type ElementPropertyProps = Omit<ElementProps, \"scope\" | \"id\">;\n\nconst getElementId = (value: string) => {\n    return [\"elementProperty\", value].join(\":\");\n};\n\nconst BaseElementProperty = makeDecoratable(\"ElementProperty\", (props: ElementPropertyProps) => {\n    return (\n        <Element\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\nconst ElementPropertyGroups = {\n    STYLE: \"styleGroup\",\n    ELEMENT: \"elementGroup\"\n};\n\nexport const ElementProperty = Object.assign(BaseElementProperty, ElementPropertyGroups);\n\nexport interface ElementPropertiesProps {\n    group?: string;\n    transform?: ElementsProps[\"transform\"];\n}\n\nexport const ElementProperties = (props: ElementPropertiesProps) => {\n    return <Elements group={props.group} scope={SCOPE} transform={props.transform} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,OAAO;AAEhB,SAASC,QAAQ;AAEjB,MAAMC,KAAK,GAAG,mBAAmB;AAIjC,MAAMC,YAAY,GAAIC,KAAa,IAAK;EACpC,OAAO,CAAC,iBAAiB,EAAEA,KAAK,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AAC/C,CAAC;AAED,MAAMC,mBAAmB,GAAGP,eAAe,CAAC,iBAAiB,EAAGQ,KAA2B,IAAK;EAC5F,oBACIT,KAAA,CAAAU,aAAA,CAACR,OAAO,EAAAS,MAAA,CAAAC,MAAA,KACAH,KAAK;IACTI,KAAK,EAAET,KAAM;IACbU,EAAE,EAAET,YAAY,CAACI,KAAK,CAACM,IAAI,CAAE;IAC7BC,MAAM,EAAEP,KAAK,CAACO,MAAM,GAAGX,YAAY,CAACI,KAAK,CAACO,MAAM,CAAC,GAAGC,SAAU;IAC9DC,KAAK,EAAET,KAAK,CAACS,KAAK,GAAGb,YAAY,CAACI,KAAK,CAACS,KAAK,CAAC,GAAGD;EAAU,EAC9D,CAAC;AAEV,CAAC,CAAC;AAEF,MAAME,qBAAqB,GAAG;EAC1BC,KAAK,EAAE,YAAY;EACnBC,OAAO,EAAE;AACb,CAAC;AAED,OAAO,MAAMC,eAAe,GAAGX,MAAM,CAACC,MAAM,CAACJ,mBAAmB,EAAEW,qBAAqB,CAAC;AAOxF,OAAO,MAAMI,iBAAiB,GAAId,KAA6B,IAAK;EAChE,oBAAOT,KAAA,CAAAU,aAAA,CAACP,QAAQ;IAACqB,KAAK,EAAEf,KAAK,CAACe,KAAM;IAACX,KAAK,EAAET,KAAM;IAACqB,SAAS,EAAEhB,KAAK,CAACgB;EAAU,CAAE,CAAC;AACrF,CAAC","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","Element","Elements","SCOPE","getElementId","value","join","BaseElementProperty","props","createElement","Object","assign","scope","id","name","before","undefined","after","ElementPropertyGroups","STYLE","ELEMENT","ElementProperty","ElementProperties","group","transform"],"sources":["ElementProperty.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport type { ElementProps } from \"./Element.js\";\nimport { Element } from \"./Element.js\";\nimport type { ElementsProps } from \"./Elements.js\";\nimport { Elements } from \"./Elements.js\";\n\nconst SCOPE = \"elementProperties\";\n\nexport type ElementPropertyProps = Omit<ElementProps, \"scope\" | \"id\">;\n\nconst getElementId = (value: string) => {\n    return [\"elementProperty\", value].join(\":\");\n};\n\nconst BaseElementProperty = makeDecoratable(\"ElementProperty\", (props: ElementPropertyProps) => {\n    return (\n        <Element\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\nconst ElementPropertyGroups = {\n    STYLE: \"styleGroup\",\n    ELEMENT: \"elementGroup\"\n};\n\nexport const ElementProperty = Object.assign(BaseElementProperty, ElementPropertyGroups);\n\nexport interface ElementPropertiesProps {\n    group?: string;\n    transform?: ElementsProps[\"transform\"];\n}\n\nexport const ElementProperties = (props: ElementPropertiesProps) => {\n    return <Elements group={props.group} scope={SCOPE} transform={props.transform} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,OAAO;AAEhB,SAASC,QAAQ;AAEjB,MAAMC,KAAK,GAAG,mBAAmB;AAIjC,MAAMC,YAAY,GAAIC,KAAa,IAAK;EACpC,OAAO,CAAC,iBAAiB,EAAEA,KAAK,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AAC/C,CAAC;AAED,MAAMC,mBAAmB,GAAGP,eAAe,CAAC,iBAAiB,EAAGQ,KAA2B,IAAK;EAC5F,oBACIT,KAAA,CAAAU,aAAA,CAACR,OAAO,EAAAS,MAAA,CAAAC,MAAA,KACAH,KAAK;IACTI,KAAK,EAAET,KAAM;IACbU,EAAE,EAAET,YAAY,CAACI,KAAK,CAACM,IAAI,CAAE;IAC7BC,MAAM,EAAEP,KAAK,CAACO,MAAM,GAAGX,YAAY,CAACI,KAAK,CAACO,MAAM,CAAC,GAAGC,SAAU;IAC9DC,KAAK,EAAET,KAAK,CAACS,KAAK,GAAGb,YAAY,CAACI,KAAK,CAACS,KAAK,CAAC,GAAGD;EAAU,EAC9D,CAAC;AAEV,CAAC,CAAC;AAEF,MAAME,qBAAqB,GAAG;EAC1BC,KAAK,EAAE,YAAY;EACnBC,OAAO,EAAE;AACb,CAAC;AAED,OAAO,MAAMC,eAAe,GAAGX,MAAM,CAACC,MAAM,CAACJ,mBAAmB,EAAEW,qBAAqB,CAAC;AAOxF,OAAO,MAAMI,iBAAiB,GAAId,KAA6B,IAAK;EAChE,oBAAOT,KAAA,CAAAU,aAAA,CAACP,QAAQ;IAACqB,KAAK,EAAEf,KAAK,CAACe,KAAM;IAACX,KAAK,EAAET,KAAM;IAACqB,SAAS,EAAEhB,KAAK,CAACgB;EAAU,CAAE,CAAC;AACrF,CAAC","ignoreList":[]}

package/BaseEditor/config/Elements.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import type { ElementConfig } from "./Element";
-declare global {
+import type { ElementConfig } from "./Element.js";
+declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
             "wb-editor-ui-elements": {

package/BaseEditor/config/Elements.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { useEditorConfig } from "./EditorConfig";
+import { useEditorConfig } from "./EditorConfig.js";
 const passthrough = () => true;
 const byGroup = group => {
   return group ? item => item.group === group : passthrough;
@@ -22,11 +22,11 @@ export const Elements = ({
   return /*#__PURE__*/React.createElement("wb-editor-ui-elements", {
     "data-scope": scope,
     "data-group": group,
-    class: "wby-contents"
+    class: "contents"
   }, transform(groupElements).map(element => /*#__PURE__*/React.createElement("wb-editor-ui-element", {
     key: element.name,
     "data-name": element.name,
-    class: "wby-contents"
+    class: "contents"
   }, element.element)));
 };
 

package/BaseEditor/config/Elements.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useEditorConfig","passthrough","byGroup","group","item","byScope","scope","defaultTransform","elements","Elements","transform","groupElements","filter","createElement","class","map","element","key","name"],"sources":["Elements.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { useEditorConfig } from \"./EditorConfig\";\nimport type { ElementConfig } from \"./Element\";\n\ndeclare global {\n    // eslint-disable-next-line\n    namespace JSX {\n        interface IntrinsicElements {\n            \"wb-editor-ui-elements\": {\n                class?: string;\n                \"data-scope\"?: string;\n                \"data-group\"?: string;\n                [key: string]: any;\n            };\n            \"wb-editor-ui-element\": {\n                class?: string;\n                \"data-name\"?: string;\n                [key: string]: any;\n            };\n        }\n    }\n}\n\nexport interface ElementsProps {\n    group?: string;\n    scope?: string;\n    transform?: (elements: ElementConfig[]) => ElementConfig[];\n}\n\nconst passthrough = () => true;\n\nconst byGroup = (group?: string) => {\n    return group ? (item: ElementConfig) => item.group === group : passthrough;\n};\nconst byScope = (scope?: string) => {\n    return scope ? (item: ElementConfig) => item.scope === scope : passthrough;\n};\n\nconst defaultTransform = (elements: ElementConfig[]) => elements;\n\nexport const Elements = ({ group, scope, transform = defaultTransform }: ElementsProps) => {\n    const { elements } = useEditorConfig();\n\n    const groupElements = useMemo(() => {\n        return elements.filter(byGroup(group)).filter(byScope(scope));\n    }, [elements, group, scope]);\n\n    return (\n        <wb-editor-ui-elements data-scope={scope} data-group={group} class={\"wby-contents\"}>\n            {transform(groupElements).map(element => (\n                <wb-editor-ui-element\n                    key={element.name}\n                    data-name={element.name}\n                    class={\"wby-contents\"}\n                >\n                    {element.element}\n                </wb-editor-ui-element>\n            ))}\n        </wb-editor-ui-elements>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AA4BxB,MAAMC,WAAW,GAAGA,CAAA,KAAM,IAAI;AAE9B,MAAMC,OAAO,GAAIC,KAAc,IAAK;EAChC,OAAOA,KAAK,GAAIC,IAAmB,IAAKA,IAAI,CAACD,KAAK,KAAKA,KAAK,GAAGF,WAAW;AAC9E,CAAC;AACD,MAAMI,OAAO,GAAIC,KAAc,IAAK;EAChC,OAAOA,KAAK,GAAIF,IAAmB,IAAKA,IAAI,CAACE,KAAK,KAAKA,KAAK,GAAGL,WAAW;AAC9E,CAAC;AAED,MAAMM,gBAAgB,GAAIC,QAAyB,IAAKA,QAAQ;AAEhE,OAAO,MAAMC,QAAQ,GAAGA,CAAC;EAAEN,KAAK;EAAEG,KAAK;EAAEI,SAAS,GAAGH;AAAgC,CAAC,KAAK;EACvF,MAAM;IAAEC;EAAS,CAAC,GAAGR,eAAe,CAAC,CAAC;EAEtC,MAAMW,aAAa,GAAGZ,OAAO,CAAC,MAAM;IAChC,OAAOS,QAAQ,CAACI,MAAM,CAACV,OAAO,CAACC,KAAK,CAAC,CAAC,CAACS,MAAM,CAACP,OAAO,CAACC,KAAK,CAAC,CAAC;EACjE,CAAC,EAAE,CAACE,QAAQ,EAAEL,KAAK,EAAEG,KAAK,CAAC,CAAC;EAE5B,oBACIR,KAAA,CAAAe,aAAA;IAAuB,cAAYP,KAAM;IAAC,cAAYH,KAAM;IAACW,KAAK,EAAE;EAAe,GAC9EJ,SAAS,CAACC,aAAa,CAAC,CAACI,GAAG,CAACC,OAAO,iBACjClB,KAAA,CAAAe,aAAA;IACII,GAAG,EAAED,OAAO,CAACE,IAAK;IAClB,aAAWF,OAAO,CAACE,IAAK;IACxBJ,KAAK,EAAE;EAAe,GAErBE,OAAO,CAACA,OACS,CACzB,CACkB,CAAC;AAEhC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useMemo","useEditorConfig","passthrough","byGroup","group","item","byScope","scope","defaultTransform","elements","Elements","transform","groupElements","filter","createElement","class","map","element","key","name"],"sources":["Elements.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { useEditorConfig } from \"./EditorConfig.js\";\nimport type { ElementConfig } from \"./Element.js\";\n\ndeclare module \"react\" {\n    namespace JSX {\n        interface IntrinsicElements {\n            \"wb-editor-ui-elements\": {\n                class?: string;\n                \"data-scope\"?: string;\n                \"data-group\"?: string;\n                [key: string]: any;\n            };\n            \"wb-editor-ui-element\": {\n                class?: string;\n                \"data-name\"?: string;\n                [key: string]: any;\n            };\n        }\n    }\n}\n\nexport interface ElementsProps {\n    group?: string;\n    scope?: string;\n    transform?: (elements: ElementConfig[]) => ElementConfig[];\n}\n\nconst passthrough = () => true;\n\nconst byGroup = (group?: string) => {\n    return group ? (item: ElementConfig) => item.group === group : passthrough;\n};\nconst byScope = (scope?: string) => {\n    return scope ? (item: ElementConfig) => item.scope === scope : passthrough;\n};\n\nconst defaultTransform = (elements: ElementConfig[]) => elements;\n\nexport const Elements = ({ group, scope, transform = defaultTransform }: ElementsProps) => {\n    const { elements } = useEditorConfig();\n\n    const groupElements = useMemo(() => {\n        return elements.filter(byGroup(group)).filter(byScope(scope));\n    }, [elements, group, scope]);\n\n    return (\n        <wb-editor-ui-elements data-scope={scope} data-group={group} class={\"contents\"}>\n            {transform(groupElements).map(element => (\n                <wb-editor-ui-element\n                    key={element.name}\n                    data-name={element.name}\n                    class={\"contents\"}\n                >\n                    {element.element}\n                </wb-editor-ui-element>\n            ))}\n        </wb-editor-ui-elements>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AA2BxB,MAAMC,WAAW,GAAGA,CAAA,KAAM,IAAI;AAE9B,MAAMC,OAAO,GAAIC,KAAc,IAAK;EAChC,OAAOA,KAAK,GAAIC,IAAmB,IAAKA,IAAI,CAACD,KAAK,KAAKA,KAAK,GAAGF,WAAW;AAC9E,CAAC;AACD,MAAMI,OAAO,GAAIC,KAAc,IAAK;EAChC,OAAOA,KAAK,GAAIF,IAAmB,IAAKA,IAAI,CAACE,KAAK,KAAKA,KAAK,GAAGL,WAAW;AAC9E,CAAC;AAED,MAAMM,gBAAgB,GAAIC,QAAyB,IAAKA,QAAQ;AAEhE,OAAO,MAAMC,QAAQ,GAAGA,CAAC;EAAEN,KAAK;EAAEG,KAAK;EAAEI,SAAS,GAAGH;AAAgC,CAAC,KAAK;EACvF,MAAM;IAAEC;EAAS,CAAC,GAAGR,eAAe,CAAC,CAAC;EAEtC,MAAMW,aAAa,GAAGZ,OAAO,CAAC,MAAM;IAChC,OAAOS,QAAQ,CAACI,MAAM,CAACV,OAAO,CAACC,KAAK,CAAC,CAAC,CAACS,MAAM,CAACP,OAAO,CAACC,KAAK,CAAC,CAAC;EACjE,CAAC,EAAE,CAACE,QAAQ,EAAEL,KAAK,EAAEG,KAAK,CAAC,CAAC;EAE5B,oBACIR,KAAA,CAAAe,aAAA;IAAuB,cAAYP,KAAM;IAAC,cAAYH,KAAM;IAACW,KAAK,EAAE;EAAW,GAC1EJ,SAAS,CAACC,aAAa,CAAC,CAACI,GAAG,CAACC,OAAO,iBACjClB,KAAA,CAAAe,aAAA;IACII,GAAG,EAAED,OAAO,CAACE,IAAK;IAClB,aAAWF,OAAO,CAACE,IAAK;IACxBJ,KAAK,EAAE;EAAW,GAEjBE,OAAO,CAACA,OACS,CACzB,CACkB,CAAC;AAEhC,CAAC","ignoreList":[]}

package/BaseEditor/config/IconButton.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { IconButton as BaseIconButton } from "@webiny/ui/Button";
-import { Tooltip } from "@webiny/ui/Tooltip";
+import { IconButton as BaseIconButton } from "@webiny/ui/Button/index.js";
+import { Tooltip } from "@webiny/ui/Tooltip/index.js";
 export const IconButton = ({
   label,
   icon,

package/BaseEditor/config/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","IconButton","BaseIconButton","Tooltip","label","icon","disabled","onClick","createElement","placement","content"],"sources":["IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton as BaseIconButton } from \"@webiny/ui/Button\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\n\nexport interface IconButtonProps {\n    icon: JSX.Element;\n    label: string;\n    disabled?: boolean;\n    onClick?: () => void;\n}\n\nexport const IconButton = ({ label, icon, disabled = false, onClick }: IconButtonProps) => {\n    return (\n        <Tooltip placement={\"bottom\"} content={label}>\n            <BaseIconButton icon={icon} onClick={onClick} disabled={disabled} />\n        </Tooltip>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,IAAIC,cAAc,QAAQ,mBAAmB;AAChE,SAASC,OAAO,QAAQ,oBAAoB;AAS5C,OAAO,MAAMF,UAAU,GAAGA,CAAC;EAAEG,KAAK;EAAEC,IAAI;EAAEC,QAAQ,GAAG,KAAK;EAAEC;AAAyB,CAAC,KAAK;EACvF,oBACIP,KAAA,CAAAQ,aAAA,CAACL,OAAO;IAACM,SAAS,EAAE,QAAS;IAACC,OAAO,EAAEN;EAAM,gBACzCJ,KAAA,CAAAQ,aAAA,CAACN,cAAc;IAACG,IAAI,EAAEA,IAAK;IAACE,OAAO,EAAEA,OAAQ;IAACD,QAAQ,EAAEA;EAAS,CAAE,CAC9D,CAAC;AAElB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","IconButton","BaseIconButton","Tooltip","label","icon","disabled","onClick","createElement","placement","content"],"sources":["IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton as BaseIconButton } from \"@webiny/ui/Button/index.js\";\nimport { Tooltip } from \"@webiny/ui/Tooltip/index.js\";\n\nexport interface IconButtonProps {\n    icon: JSX.Element;\n    label: string;\n    disabled?: boolean;\n    onClick?: () => void;\n}\n\nexport const IconButton = ({ label, icon, disabled = false, onClick }: IconButtonProps) => {\n    return (\n        <Tooltip placement={\"bottom\"} content={label}>\n            <BaseIconButton icon={icon} onClick={onClick} disabled={disabled} />\n        </Tooltip>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,IAAIC,cAAc,QAAQ,4BAA4B;AACzE,SAASC,OAAO,QAAQ,6BAA6B;AASrD,OAAO,MAAMF,UAAU,GAAGA,CAAC;EAAEG,KAAK;EAAEC,IAAI;EAAEC,QAAQ,GAAG,KAAK;EAAEC;AAAyB,CAAC,KAAK;EACvF,oBACIP,KAAA,CAAAQ,aAAA,CAACL,OAAO;IAACM,SAAS,EAAE,QAAS;IAACC,OAAO,EAAEN;EAAM,gBACzCJ,KAAA,CAAAQ,aAAA,CAACN,cAAc;IAACG,IAAI,EAAEA,IAAK;IAACE,OAAO,EAAEA,OAAQ;IAACD,QAAQ,EAAEA;EAAS,CAAE,CAC9D,CAAC;AAElB,CAAC","ignoreList":[]}

package/BaseEditor/config/Layout.js

@@ -2,19 +2,18 @@ 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, { useEffect } from "react";
 import { makeDecoratable } from "@webiny/react-composition";
-import { EditorConfig } from "./EditorConfig";
+import { EditorConfig } from "./EditorConfig.js";
 const EditorLayoutContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e17ht31x0"
 } : {
   target: "e17ht31x0",
   label: "EditorLayoutContainer"
 })(process.env.NODE_ENV === "production" ? {
-  name: "134c3g3",
-  styles: "background-color:#f2f2f2;height:100%;overflow:hidden"
+  name: "3ytxc3",
+  styles: "height:100%;overflow:hidden"
 } : {
-  name: "134c3g3",
-  styles: "background-color:#f2f2f2;height:100%;overflow:hidden",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxheW91dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3dDIiwiZmlsZSI6IkxheW91dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBtYWtlRGVjb3JhdGFibGUgfSBmcm9tIFwiQHdlYmlueS9yZWFjdC1jb21wb3NpdGlvblwiO1xuaW1wb3J0IHsgRWRpdG9yQ29uZmlnIH0gZnJvbSBcIi4vRWRpdG9yQ29uZmlnXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuY29uc3QgRWRpdG9yTGF5b3V0Q29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjJmMmYyO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IExheW91dCA9IG1ha2VEZWNvcmF0YWJsZShcIkVkaXRvckxheW91dFwiLCAoKSA9PiB7XG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgY29uc3QgY3VycmVudE92ZXJmbG93ID0gZG9jdW1lbnQuYm9keS5zdHlsZS5vdmVyZmxvdztcbiAgICAgICAgZG9jdW1lbnQuYm9keS5zdHlsZS5vdmVyZmxvdyA9IFwiaGlkZGVuXCI7XG4gICAgICAgIHJldHVybiAoKSA9PiB7XG4gICAgICAgICAgICBkb2N1bWVudC5ib2R5LnN0eWxlLm92ZXJmbG93ID0gY3VycmVudE92ZXJmbG93O1xuICAgICAgICB9O1xuICAgIH0sIFtdKTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxFZGl0b3JMYXlvdXRDb250YWluZXI+XG4gICAgICAgICAgICA8RWRpdG9yQ29uZmlnLlVpLlRvcEJhciAvPlxuICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e1wid2J5LWZsZXggd2J5LWZsZXgtcm93XCJ9PlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtcIndieS13LVszMDBweF0gd2J5LWZsZXgtbm9uZVwifT5cbiAgICAgICAgICAgICAgICAgICAgPEVkaXRvckNvbmZpZy5VaS5Ub29sYmFyIC8+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e1wid2J5LWZsZXgtYXV0b1wifT5cbiAgICAgICAgICAgICAgICAgICAgPEVkaXRvckNvbmZpZy5VaS5Db250ZW50IC8+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e1wid2J5LXctWzMwMHB4XSB3YnktZmxleC1ub25lXCJ9PlxuICAgICAgICAgICAgICAgICAgICA8RWRpdG9yQ29uZmlnLlVpLlNpZGViYXIgLz5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPEVkaXRvckNvbmZpZy5VaS5FbGVtZW50cyBncm91cD17XCJvdmVybGF5c1wifSAvPlxuICAgICAgICA8L0VkaXRvckxheW91dENvbnRhaW5lcj5cbiAgICApO1xufSk7XG4iXX0= */",
+  name: "3ytxc3",
+  styles: "height:100%;overflow:hidden/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxheW91dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3dDIiwiZmlsZSI6IkxheW91dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBtYWtlRGVjb3JhdGFibGUgfSBmcm9tIFwiQHdlYmlueS9yZWFjdC1jb21wb3NpdGlvblwiO1xuaW1wb3J0IHsgRWRpdG9yQ29uZmlnIH0gZnJvbSBcIi4vRWRpdG9yQ29uZmlnLmpzXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuY29uc3QgRWRpdG9yTGF5b3V0Q29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbmA7XG5cbmV4cG9ydCBjb25zdCBMYXlvdXQgPSBtYWtlRGVjb3JhdGFibGUoXCJFZGl0b3JMYXlvdXRcIiwgKCkgPT4ge1xuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICAgIGNvbnN0IGN1cnJlbnRPdmVyZmxvdyA9IGRvY3VtZW50LmJvZHkuc3R5bGUub3ZlcmZsb3c7XG4gICAgICAgIGRvY3VtZW50LmJvZHkuc3R5bGUub3ZlcmZsb3cgPSBcImhpZGRlblwiO1xuICAgICAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgICAgICAgZG9jdW1lbnQuYm9keS5zdHlsZS5vdmVyZmxvdyA9IGN1cnJlbnRPdmVyZmxvdztcbiAgICAgICAgfTtcbiAgICB9LCBbXSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8RWRpdG9yTGF5b3V0Q29udGFpbmVyPlxuICAgICAgICAgICAgPEVkaXRvckNvbmZpZy5VaS5Ub3BCYXIgLz5cbiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtcImZsZXggZmxleC1yb3dcIn0+XG4gICAgICAgICAgICAgICAgPEVkaXRvckNvbmZpZy5VaS5Ub29sYmFyIC8+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e1wiZmxleC1hdXRvXCJ9PlxuICAgICAgICAgICAgICAgICAgICA8RWRpdG9yQ29uZmlnLlVpLkNvbnRlbnQgLz5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8RWRpdG9yQ29uZmlnLlVpLlNpZGViYXIgLz5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPEVkaXRvckNvbmZpZy5VaS5FbGVtZW50cyBncm91cD17XCJvdmVybGF5c1wifSAvPlxuICAgICAgICA8L0VkaXRvckxheW91dENvbnRhaW5lcj5cbiAgICApO1xufSk7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const Layout = makeDecoratable("EditorLayout", () => {
@@ -26,14 +25,10 @@ export const Layout = makeDecoratable("EditorLayout", () => {
     };
   }, []);
   return /*#__PURE__*/React.createElement(EditorLayoutContainer, null, /*#__PURE__*/React.createElement(EditorConfig.Ui.TopBar, null), /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-[300px] wby-flex-none"
-  }, /*#__PURE__*/React.createElement(EditorConfig.Ui.Toolbar, null)), /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex-auto"
-  }, /*#__PURE__*/React.createElement(EditorConfig.Ui.Content, null)), /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-[300px] wby-flex-none"
-  }, /*#__PURE__*/React.createElement(EditorConfig.Ui.Sidebar, null))), /*#__PURE__*/React.createElement(EditorConfig.Ui.Elements, {
+    className: "flex flex-row"
+  }, /*#__PURE__*/React.createElement(EditorConfig.Ui.Toolbar, null), /*#__PURE__*/React.createElement("div", {
+    className: "flex-auto"
+  }, /*#__PURE__*/React.createElement(EditorConfig.Ui.Content, null)), /*#__PURE__*/React.createElement(EditorConfig.Ui.Sidebar, null)), /*#__PURE__*/React.createElement(EditorConfig.Ui.Elements, {
     group: "overlays"
   }));
 });

package/BaseEditor/config/Layout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","makeDecoratable","EditorConfig","EditorLayoutContainer","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Layout","currentOverflow","document","body","style","overflow","createElement","Ui","TopBar","className","Toolbar","Content","Sidebar","Elements","group"],"sources":["Layout.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { EditorConfig } from \"./EditorConfig\";\nimport styled from \"@emotion/styled\";\n\nconst EditorLayoutContainer = styled.div`\n    background-color: #f2f2f2;\n    height: 100%;\n    overflow: hidden;\n`;\n\nexport const Layout = makeDecoratable(\"EditorLayout\", () => {\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={\"wby-flex wby-flex-row\"}>\n                <div className={\"wby-w-[300px] wby-flex-none\"}>\n                    <EditorConfig.Ui.Toolbar />\n                </div>\n                <div className={\"wby-flex-auto\"}>\n                    <EditorConfig.Ui.Content />\n                </div>\n                <div className={\"wby-w-[300px] wby-flex-none\"}>\n                    <EditorConfig.Ui.Sidebar />\n                </div>\n            </div>\n            <EditorConfig.Ui.Elements group={\"overlays\"} />\n        </EditorLayoutContainer>\n    );\n});\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,YAAY;AAGrB,MAAMC,qBAAqB,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,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAI1B;AAED,OAAO,MAAMC,MAAM,GAAGd,eAAe,CAAC,cAAc,EAAE,MAAM;EACxDD,SAAS,CAAC,MAAM;IACZ,MAAMgB,eAAe,GAAGC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ;IACpDH,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAG,QAAQ;IACvC,OAAO,MAAM;MACTH,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAGJ,eAAe;IAClD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIjB,KAAA,CAAAsB,aAAA,CAAClB,qBAAqB,qBAClBJ,KAAA,CAAAsB,aAAA,CAACnB,YAAY,CAACoB,EAAE,CAACC,MAAM,MAAE,CAAC,eAC1BxB,KAAA,CAAAsB,aAAA;IAAKG,SAAS,EAAE;EAAwB,gBACpCzB,KAAA,CAAAsB,aAAA;IAAKG,SAAS,EAAE;EAA8B,gBAC1CzB,KAAA,CAAAsB,aAAA,CAACnB,YAAY,CAACoB,EAAE,CAACG,OAAO,MAAE,CACzB,CAAC,eACN1B,KAAA,CAAAsB,aAAA;IAAKG,SAAS,EAAE;EAAgB,gBAC5BzB,KAAA,CAAAsB,aAAA,CAACnB,YAAY,CAACoB,EAAE,CAACI,OAAO,MAAE,CACzB,CAAC,eACN3B,KAAA,CAAAsB,aAAA;IAAKG,SAAS,EAAE;EAA8B,gBAC1CzB,KAAA,CAAAsB,aAAA,CAACnB,YAAY,CAACoB,EAAE,CAACK,OAAO,MAAE,CACzB,CACJ,CAAC,eACN5B,KAAA,CAAAsB,aAAA,CAACnB,YAAY,CAACoB,EAAE,CAACM,QAAQ;IAACC,KAAK,EAAE;EAAW,CAAE,CAC3B,CAAC;AAEhC,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","makeDecoratable","EditorConfig","EditorLayoutContainer","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Layout","currentOverflow","document","body","style","overflow","createElement","Ui","TopBar","className","Toolbar","Content","Sidebar","Elements","group"],"sources":["Layout.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { EditorConfig } from \"./EditorConfig.js\";\nimport styled from \"@emotion/styled\";\n\nconst EditorLayoutContainer = styled.div`\n    height: 100%;\n    overflow: hidden;\n`;\n\nexport const Layout = makeDecoratable(\"EditorLayout\", () => {\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                <EditorConfig.Ui.Toolbar />\n                <div className={\"flex-auto\"}>\n                    <EditorConfig.Ui.Content />\n                </div>\n                <EditorConfig.Ui.Sidebar />\n            </div>\n            <EditorConfig.Ui.Elements group={\"overlays\"} />\n        </EditorLayoutContainer>\n    );\n});\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,YAAY;AAGrB,MAAMC,qBAAqB,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,EAG1B;AAED,OAAO,MAAMC,MAAM,GAAGb,eAAe,CAAC,cAAc,EAAE,MAAM;EACxDD,SAAS,CAAC,MAAM;IACZ,MAAMe,eAAe,GAAGC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ;IACpDH,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAG,QAAQ;IACvC,OAAO,MAAM;MACTH,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAGJ,eAAe;IAClD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIhB,KAAA,CAAAqB,aAAA,CAACjB,qBAAqB,qBAClBJ,KAAA,CAAAqB,aAAA,CAAClB,YAAY,CAACmB,EAAE,CAACC,MAAM,MAAE,CAAC,eAC1BvB,KAAA,CAAAqB,aAAA;IAAKG,SAAS,EAAE;EAAgB,gBAC5BxB,KAAA,CAAAqB,aAAA,CAAClB,YAAY,CAACmB,EAAE,CAACG,OAAO,MAAE,CAAC,eAC3BzB,KAAA,CAAAqB,aAAA;IAAKG,SAAS,EAAE;EAAY,gBACxBxB,KAAA,CAAAqB,aAAA,CAAClB,YAAY,CAACmB,EAAE,CAACI,OAAO,MAAE,CACzB,CAAC,eACN1B,KAAA,CAAAqB,aAAA,CAAClB,YAAY,CAACmB,EAAE,CAACK,OAAO,MAAE,CACzB,CAAC,eACN3B,KAAA,CAAAqB,aAAA,CAAClB,YAAY,CAACmB,EAAE,CAACM,QAAQ;IAACC,KAAK,EAAE;EAAW,CAAE,CAC3B,CAAC;AAEhC,CAAC,CAAC","ignoreList":[]}

package/BaseEditor/config/OnActiveElement.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { useActiveElement } from "../hooks/useActiveElement";
+import { useActiveElement } from "../hooks/useActiveElement.js";
 export const OnActiveElement = ({
   children
 }) => {

package/BaseEditor/config/OnActiveElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useActiveElement","OnActiveElement","children","element","createElement","Fragment"],"sources":["OnActiveElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement\";\n\nexport interface OnActiveElementProps {\n    children?: React.ReactNode;\n}\n\nexport const OnActiveElement = ({ children }: OnActiveElementProps) => {\n    const [element] = useActiveElement();\n\n    if (!element) {\n        return null;\n    }\n\n    return <>{children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB;AAMzB,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC;AAA+B,CAAC,KAAK;EACnE,MAAM,CAACC,OAAO,CAAC,GAAGH,gBAAgB,CAAC,CAAC;EAEpC,IAAI,CAACG,OAAO,EAAE;IACV,OAAO,IAAI;EACf;EAEA,oBAAOJ,KAAA,CAAAK,aAAA,CAAAL,KAAA,CAAAM,QAAA,QAAGH,QAAW,CAAC;AAC1B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useActiveElement","OnActiveElement","children","element","createElement","Fragment"],"sources":["OnActiveElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\n\nexport interface OnActiveElementProps {\n    children?: React.ReactNode;\n}\n\nexport const OnActiveElement = ({ children }: OnActiveElementProps) => {\n    const [element] = useActiveElement();\n\n    if (!element) {\n        return null;\n    }\n\n    return <>{children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,gBAAgB;AAMzB,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC;AAA+B,CAAC,KAAK;EACnE,MAAM,CAACC,OAAO,CAAC,GAAGH,gBAAgB,CAAC,CAAC;EAEpC,IAAI,CAACG,OAAO,EAAE;IACV,OAAO,IAAI;EACf;EAEA,oBAAOJ,KAAA,CAAAK,aAAA,CAAAL,KAAA,CAAAM,QAAA,QAAGH,QAAW,CAAC;AAC1B,CAAC","ignoreList":[]}

package/BaseEditor/config/Sidebar/Layout.js

@@ -1,25 +1,11 @@
-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 { makeDecoratable } from "@webiny/app-admin";
 import { Tabs } from "@webiny/admin-ui";
-import { Sidebar } from "./Sidebar";
-const SidebarContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
-  target: "et2pvyj0"
-} : {
-  target: "et2pvyj0",
-  label: "SidebarContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1m90fee",
-  styles: "background-color:#ffffff;border-left:1px solid var(--mdc-theme-on-background)"
-} : {
-  name: "1m90fee",
-  styles: "background-color:#ffffff;border-left:1px solid var(--mdc-theme-on-background)",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxheW91dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTW1DIiwiZmlsZSI6IkxheW91dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IG1ha2VEZWNvcmF0YWJsZSB9IGZyb20gXCJAd2ViaW55L2FwcC1hZG1pblwiO1xuaW1wb3J0IHsgVGFicyB9IGZyb20gXCJAd2ViaW55L2FkbWluLXVpXCI7XG5pbXBvcnQgeyBTaWRlYmFyIH0gZnJvbSBcIi4vU2lkZWJhclwiO1xuXG5jb25zdCBTaWRlYmFyQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmO1xuICAgIGJvcmRlci1sZWZ0OiAxcHggc29saWQgdmFyKC0tbWRjLXRoZW1lLW9uLWJhY2tncm91bmQpO1xuYDtcblxuZXhwb3J0IGNvbnN0IExheW91dCA9IG1ha2VEZWNvcmF0YWJsZShcIlNpZGViYXJMYXlvdXRcIiwgKCkgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxTaWRlYmFyQ29udGFpbmVyPlxuICAgICAgICAgICAgPFRhYnNcbiAgICAgICAgICAgICAgICBzaXplPVwibWRcIlxuICAgICAgICAgICAgICAgIHNwYWNpbmc9e1wibWRcIn1cbiAgICAgICAgICAgICAgICBzZXBhcmF0b3I9e3RydWV9XG4gICAgICAgICAgICAgICAgZGVmYXVsdFZhbHVlPXtcImVsZW1lbnRcIn1cbiAgICAgICAgICAgICAgICB0YWJzPXtbPFNpZGViYXIuRWxlbWVudHMgZ3JvdXA9XCJncm91cHNcIiBrZXk9e1wiZ3JvdXBzXCJ9IC8+XX1cbiAgICAgICAgICAgIC8+XG4gICAgICAgIDwvU2lkZWJhckNvbnRhaW5lcj5cbiAgICApO1xufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+import { Sidebar } from "./Sidebar.js";
 export const Layout = makeDecoratable("SidebarLayout", () => {
-  return /*#__PURE__*/React.createElement(SidebarContainer, null, /*#__PURE__*/React.createElement(Tabs, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "bg-neutral-base border-l-sm border-l-neutral-dimmed"
+  }, /*#__PURE__*/React.createElement(Tabs, {
     size: "md",
     spacing: "md",
     separator: true,

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

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","Tabs","Sidebar","SidebarContainer","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Layout","createElement","size","spacing","separator","defaultValue","tabs","Elements","group","key"],"sources":["Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { Tabs } from \"@webiny/admin-ui\";\nimport { Sidebar } from \"./Sidebar\";\n\nconst SidebarContainer = styled.div`\n    background-color: #ffffff;\n    border-left: 1px solid var(--mdc-theme-on-background);\n`;\n\nexport const Layout = makeDecoratable(\"SidebarLayout\", () => {\n    return (\n        <SidebarContainer>\n            <Tabs\n                size=\"md\"\n                spacing={\"md\"}\n                separator={true}\n                defaultValue={\"element\"}\n                tabs={[<Sidebar.Elements group=\"groups\" key={\"groups\"} />]}\n            />\n        </SidebarContainer>\n    );\n});\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,OAAO;AAEhB,MAAMC,gBAAgB,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,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAGrB;AAED,OAAO,MAAMC,MAAM,GAAGf,eAAe,CAAC,eAAe,EAAE,MAAM;EACzD,oBACID,KAAA,CAAAiB,aAAA,CAACb,gBAAgB,qBACbJ,KAAA,CAAAiB,aAAA,CAACf,IAAI;IACDgB,IAAI,EAAC,IAAI;IACTC,OAAO,EAAE,IAAK;IACdC,SAAS,EAAE,IAAK;IAChBC,YAAY,EAAE,SAAU;IACxBC,IAAI,EAAE,cAACtB,KAAA,CAAAiB,aAAA,CAACd,OAAO,CAACoB,QAAQ;MAACC,KAAK,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAS,CAAE,CAAC;EAAE,CAC9D,CACa,CAAC;AAE3B,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","Tabs","Sidebar","Layout","createElement","className","size","spacing","separator","defaultValue","tabs","Elements","group","key"],"sources":["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 className={\"bg-neutral-base border-l-sm border-l-neutral-dimmed\"}>\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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,OAAO;AAEhB,OAAO,MAAMC,MAAM,GAAGH,eAAe,CAAC,eAAe,EAAE,MAAM;EACzD,oBACID,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAAsD,gBAClEN,KAAA,CAAAK,aAAA,CAACH,IAAI;IACDK,IAAI,EAAC,IAAI;IACTC,OAAO,EAAE,IAAK;IACdC,SAAS,EAAE,IAAK;IAChBC,YAAY,EAAE,SAAU;IACxBC,IAAI,EAAE,cAACX,KAAA,CAAAK,aAAA,CAACF,OAAO,CAACS,QAAQ;MAACC,KAAK,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAS,CAAE,CAAC;EAAE,CAC9D,CACA,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

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

@@ -1,5 +1,2 @@
-/// <reference types="react" />
-export declare const ScrollableContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+import React from "react";
+export declare const ScrollableContainer: ({ children }: any) => React.JSX.Element;

package/BaseEditor/config/Sidebar/ScrollableContainer.js

@@ -1,18 +1,11 @@
-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)."; }
-export const ScrollableContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1nxtiw30"
-} : {
-  target: "e1nxtiw30",
-  label: "ScrollableContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1atz1qs",
-  styles: "display:flex;flex-direction:column;height:calc(100vh - 65px - 48px);overflow-y:auto;&::-webkit-scrollbar{width:1px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3);}&::-webkit-scrollbar-thumb{background-color:darkgrey;outline:1px solid slategrey;}"
-} : {
-  name: "1atz1qs",
-  styles: "display:flex;flex-direction:column;height:calc(100vh - 65px - 48px);overflow-y:auto;&::-webkit-scrollbar{width:1px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3);}&::-webkit-scrollbar-thumb{background-color:darkgrey;outline:1px solid slategrey;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNjcm9sbGFibGVDb250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVtQyIsImZpbGUiOiJTY3JvbGxhYmxlQ29udGFpbmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5leHBvcnQgY29uc3QgU2Nyb2xsYWJsZUNvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgICBoZWlnaHQ6IFwiY2FsYygxMDB2aCAtIDY1cHggLSA0OHB4KVwiLCAvLyBTdWJ0cmFjdCB0b3AtYmFyIGFuZCB0YWItaGVhZGVyIGhlaWdodFxuICAgIG92ZXJmbG93WTogXCJhdXRvXCIsXG4gICAgLy8gU3R5bGUgc2Nyb2xsYmFyXG4gICAgXCImOjotd2Via2l0LXNjcm9sbGJhclwiOiB7XG4gICAgICAgIHdpZHRoOiAxXG4gICAgfSxcbiAgICBcIiY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNrXCI6IHtcbiAgICAgICAgYm94U2hhZG93OiBcImluc2V0IDAgMCA2cHggcmdiYSgwLCAwLCAwLCAwLjMpXCJcbiAgICB9LFxuICAgIFwiJjo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWJcIjoge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwiZGFya2dyZXlcIixcbiAgICAgICAgb3V0bGluZTogXCIxcHggc29saWQgc2xhdGVncmV5XCJcbiAgICB9XG59KTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+import React from "react";
+import { ScrollArea } from "@webiny/admin-ui";
+export const ScrollableContainer = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(ScrollArea, {
+    className: "h-[calc(100vh-var(--spacing-header)-65px)]"
+  }, children);
+};
 
 //# sourceMappingURL=ScrollableContainer.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["ScrollableContainer","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"sources":["ScrollableContainer.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const ScrollableContainer = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"column\",\n    height: \"calc(100vh - 65px - 48px)\", // 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"],"mappings":";;AAEA,OAAO,MAAMA,mBAAmB,gBAAGC,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAgB/C,CAAC","ignoreList":[]}
+{"version":3,"names":["React","ScrollArea","ScrollableContainer","children","createElement","className"],"sources":["ScrollableContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { ScrollArea } from \"@webiny/admin-ui\";\n\nexport const ScrollableContainer = ({ children }: any) => {\n    return (\n        <ScrollArea className={\"h-[calc(100vh-var(--spacing-header)-65px)]\"}>{children}</ScrollArea>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC;AAAc,CAAC,KAAK;EACtD,oBACIH,KAAA,CAAAI,aAAA,CAACH,UAAU;IAACI,SAAS,EAAE;EAA6C,GAAEF,QAAqB,CAAC;AAEpG,CAAC","ignoreList":[]}

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

@@ -1,11 +1,29 @@
 import React from "react";
-import type { ElementProps as CoreElementProps } from "../Element";
-import type { ElementsProps as BaseElementsProps } from "../Elements";
+import type { ElementProps as CoreElementProps } from "../Element.js";
+import type { ElementsProps as BaseElementsProps } from "../Elements.js";
 export type ScopedElementProps = Omit<CoreElementProps, "scope">;
 export type BaseElementProps = Omit<ScopedElementProps, "id">;
 export type ElementsProps = Omit<BaseElementsProps, "scope">;
 export type GroupProps = Omit<BaseElementProps, "group">;
 export declare const Sidebar: (() => React.JSX.Element) & {
+    original: () => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (() => React.JSX.Element) & {
+        original: () => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(() => React.JSX.Element) & {
+        original: () => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+} & {
     Layout: (() => React.JSX.Element) & {
         original: () => React.JSX.Element;
         originalName: string;
@@ -82,10 +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").TabProps) => React.JSX.Element;
+        Tab: ({ name, label, disabled, element, visible, noPadding }: import("./Tab.js").TabProps) => React.JSX.Element;
     };
-    ScrollableContainer: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-    }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    ScrollableContainer: ({ children }: any) => React.JSX.Element;
 };

package/BaseEditor/config/Sidebar/Sidebar.js

@@ -1,15 +1,17 @@
 import React from "react";
 import { makeDecoratable } from "@webiny/app-admin";
-import { Element as CoreElement } from "../Element";
-import { Layout } from "./Layout";
-import { Elements as BaseElements } from "../Elements";
-import { Tab } from "./Tab";
-import { createGetId } from "../createGetId";
-import { ScrollableContainer } from "../Sidebar/ScrollableContainer";
+import { Element as CoreElement } from "../Element.js";
+import { Layout } from "./Layout.js";
+import { Elements as BaseElements } from "../Elements.js";
+import { Tab } from "./Tab.js";
+import { createGetId } from "../createGetId.js";
+import { ScrollableContainer } from "../Sidebar/ScrollableContainer.js";
 const SCOPE = "sidebar";
-const BaseSidebar = () => {
-  return /*#__PURE__*/React.createElement(Layout, null);
-};
+const BaseSidebar = makeDecoratable("SidebarScopedLayout", () => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-[300px] flex-none"
+  }, /*#__PURE__*/React.createElement(Layout, null));
+});
 const ScopedElement = makeDecoratable("SidebarScopedElement", props => {
   return /*#__PURE__*/React.createElement(CoreElement, Object.assign({}, props, {
     scope: SCOPE

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

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","Element","CoreElement","Layout","Elements","BaseElements","Tab","createGetId","ScrollableContainer","SCOPE","BaseSidebar","createElement","ScopedElement","props","Object","assign","scope","getElementId","BaseElement","id","name","before","undefined","after","BaseGroup","group","Sidebar","Group"],"sources":["Sidebar.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { ElementProps as CoreElementProps } from \"../Element\";\nimport { Element as CoreElement } from \"../Element\";\nimport { Layout } from \"./Layout\";\nimport type { ElementsProps as BaseElementsProps } from \"../Elements\";\nimport { Elements as BaseElements } from \"../Elements\";\nimport { Tab } from \"./Tab\";\nimport { createGetId } from \"../createGetId\";\nimport { ScrollableContainer } from \"../Sidebar/ScrollableContainer\";\n\nconst SCOPE = \"sidebar\";\n\nconst BaseSidebar = () => {\n    return <Layout />;\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"],"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,GAAG;AACZ,SAASC,WAAW;AACpB,SAASC,mBAAmB;AAE5B,MAAMC,KAAK,GAAG,SAAS;AAEvB,MAAMC,WAAW,GAAGA,CAAA,KAAM;EACtB,oBAAOX,KAAA,CAAAY,aAAA,CAACR,MAAM,MAAE,CAAC;AACrB,CAAC;AAID,MAAMS,aAAa,GAAGZ,eAAe,CAAC,sBAAsB,EAAGa,KAAyB,IAAK;EACzF,oBAAOd,KAAA,CAAAY,aAAA,CAACT,WAAW,EAAAY,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEG,KAAK,EAAEP;EAAM,EAAE,CAAC;AACnD,CAAC,CAAC;AAEF,MAAMQ,YAAY,GAAGV,WAAW,CAACE,KAAK,CAAC,CAAC,CAAC;AAIzC,MAAMS,WAAW,GAAGlB,eAAe,CAAC,gBAAgB,EAAGa,KAAuB,IAAK;EAC/E,oBACId,KAAA,CAAAY,aAAA,CAACC,aAAa,EAAAE,MAAA,CAAAC,MAAA,KACNF,KAAK;IACTM,EAAE,EAAEF,YAAY,CAACJ,KAAK,CAACO,IAAI,CAAE;IAC7BC,MAAM,EAAER,KAAK,CAACQ,MAAM,GAAGJ,YAAY,CAACJ,KAAK,CAACQ,MAAM,CAAC,GAAGC,SAAU;IAC9DC,KAAK,EAAEV,KAAK,CAACU,KAAK,GAAGN,YAAY,CAACJ,KAAK,CAACU,KAAK,CAAC,GAAGD;EAAU,EAC9D,CAAC;AAEV,CAAC,CAAC;AAIF,MAAMlB,QAAQ,GAAGJ,eAAe,CAAC,iBAAiB,EAAGa,KAAoB,IAAK;EAC1E,oBAAOd,KAAA,CAAAY,aAAA,CAACN,YAAY,EAAAS,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEG,KAAK,EAAEP;EAAM,EAAE,CAAC;AACpD,CAAC,CAAC;AAIF,MAAMe,SAAS,GAAGxB,eAAe,CAAC,cAAc,EAAGa,KAAiB,IAAK;EACrE,oBACId,KAAA,CAAAY,aAAA,CAACC,aAAa,EAAAE,MAAA,CAAAC,MAAA,KACNF,KAAK;IACTY,KAAK,EAAE,QAAS;IAChBN,EAAE,EAAEF,YAAY,CAACJ,KAAK,CAACO,IAAI,CAAE;IAC7BC,MAAM,EAAER,KAAK,CAACQ,MAAM,GAAGJ,YAAY,CAACJ,KAAK,CAACQ,MAAM,CAAC,GAAGC,SAAU;IAC9DC,KAAK,EAAEV,KAAK,CAACU,KAAK,GAAGN,YAAY,CAACJ,KAAK,CAACU,KAAK,CAAC,GAAGD;EAAU,EAC9D,CAAC;AAEV,CAAC,CAAC;AAEF,OAAO,MAAMI,OAAO,GAAGZ,MAAM,CAACC,MAAM,CAACL,WAAW,EAAE;EAC9CP,MAAM;EACNF,OAAO,EAAEiB,WAAW;EACpBd,QAAQ;EACRuB,KAAK,EAAEb,MAAM,CAACC,MAAM,CAACS,SAAS,EAAE;IAAElB;EAAI,CAAC,CAAC;EACxCE;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","Element","CoreElement","Layout","Elements","BaseElements","Tab","createGetId","ScrollableContainer","SCOPE","BaseSidebar","createElement","className","ScopedElement","props","Object","assign","scope","getElementId","BaseElement","id","name","before","undefined","after","BaseGroup","group","Sidebar","Group"],"sources":["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"],"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,GAAG;AACZ,SAASC,WAAW;AACpB,SAASC,mBAAmB;AAE5B,MAAMC,KAAK,GAAG,SAAS;AAEvB,MAAMC,WAAW,GAAGV,eAAe,CAAC,qBAAqB,EAAE,MAAM;EAC7D,oBACID,KAAA,CAAAY,aAAA;IAAKC,SAAS,EAAE;EAAsB,gBAClCb,KAAA,CAAAY,aAAA,CAACR,MAAM,MAAE,CACR,CAAC;AAEd,CAAC,CAAC;AAIF,MAAMU,aAAa,GAAGb,eAAe,CAAC,sBAAsB,EAAGc,KAAyB,IAAK;EACzF,oBAAOf,KAAA,CAAAY,aAAA,CAACT,WAAW,EAAAa,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEG,KAAK,EAAER;EAAM,EAAE,CAAC;AACnD,CAAC,CAAC;AAEF,MAAMS,YAAY,GAAGX,WAAW,CAACE,KAAK,CAAC,CAAC,CAAC;AAIzC,MAAMU,WAAW,GAAGnB,eAAe,CAAC,gBAAgB,EAAGc,KAAuB,IAAK;EAC/E,oBACIf,KAAA,CAAAY,aAAA,CAACE,aAAa,EAAAE,MAAA,CAAAC,MAAA,KACNF,KAAK;IACTM,EAAE,EAAEF,YAAY,CAACJ,KAAK,CAACO,IAAI,CAAE;IAC7BC,MAAM,EAAER,KAAK,CAACQ,MAAM,GAAGJ,YAAY,CAACJ,KAAK,CAACQ,MAAM,CAAC,GAAGC,SAAU;IAC9DC,KAAK,EAAEV,KAAK,CAACU,KAAK,GAAGN,YAAY,CAACJ,KAAK,CAACU,KAAK,CAAC,GAAGD;EAAU,EAC9D,CAAC;AAEV,CAAC,CAAC;AAIF,MAAMnB,QAAQ,GAAGJ,eAAe,CAAC,iBAAiB,EAAGc,KAAoB,IAAK;EAC1E,oBAAOf,KAAA,CAAAY,aAAA,CAACN,YAAY,EAAAU,MAAA,CAAAC,MAAA,KAAKF,KAAK;IAAEG,KAAK,EAAER;EAAM,EAAE,CAAC;AACpD,CAAC,CAAC;AAIF,MAAMgB,SAAS,GAAGzB,eAAe,CAAC,cAAc,EAAGc,KAAiB,IAAK;EACrE,oBACIf,KAAA,CAAAY,aAAA,CAACE,aAAa,EAAAE,MAAA,CAAAC,MAAA,KACNF,KAAK;IACTY,KAAK,EAAE,QAAS;IAChBN,EAAE,EAAEF,YAAY,CAACJ,KAAK,CAACO,IAAI,CAAE;IAC7BC,MAAM,EAAER,KAAK,CAACQ,MAAM,GAAGJ,YAAY,CAACJ,KAAK,CAACQ,MAAM,CAAC,GAAGC,SAAU;IAC9DC,KAAK,EAAEV,KAAK,CAACU,KAAK,GAAGN,YAAY,CAACJ,KAAK,CAACU,KAAK,CAAC,GAAGD;EAAU,EAC9D,CAAC;AAEV,CAAC,CAAC;AAEF,OAAO,MAAMI,OAAO,GAAGZ,MAAM,CAACC,MAAM,CAACN,WAAW,EAAE;EAC9CP,MAAM;EACNF,OAAO,EAAEkB,WAAW;EACpBf,QAAQ;EACRwB,KAAK,EAAEb,MAAM,CAACC,MAAM,CAACS,SAAS,EAAE;IAAEnB;EAAI,CAAC,CAAC;EACxCE;AACJ,CAAC,CAAC","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 import React from "react";
 export declare const TabContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export interface TabProps {
     name: string;

package/BaseEditor/config/Sidebar/Tab.js

@@ -12,8 +12,7 @@ export const TabContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV ===
   styles: "display:flex;position:relative;flex-direction:column;height:calc(100vh - 44px - 49px);overflow-y:auto;&::-webkit-scrollbar{width:1px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3);}&::-webkit-scrollbar-thumb{background-color:darkgrey;outline:1px solid slategrey;}"
 } : {
   name: "k20ukt",
-  styles: "display:flex;position:relative;flex-direction:column;height:calc(100vh - 44px - 49px);overflow-y:auto;&::-webkit-scrollbar{width:1px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3);}&::-webkit-scrollbar-thumb{background-color:darkgrey;outline:1px solid slategrey;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhYi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTRCIiwiZmlsZSI6IlRhYi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IFRhYnMgfSBmcm9tIFwiQHdlYmlueS9hZG1pbi11aVwiO1xuXG5leHBvcnQgY29uc3QgVGFiQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAgaGVpZ2h0OiBcImNhbGMoMTAwdmggLSA0NHB4IC0gNDlweClcIiwgLy8gU3VidHJhY3QgdG9wLWJhciBhbmQgdGFiLWhlYWRlciBoZWlnaHRcbiAgICBvdmVyZmxvd1k6IFwiYXV0b1wiLFxuICAgIC8vIFN0eWxlIHNjcm9sbGJhclxuICAgIFwiJjo6LXdlYmtpdC1zY3JvbGxiYXJcIjoge1xuICAgICAgICB3aWR0aDogMVxuICAgIH0sXG4gICAgXCImOjotd2Via2l0LXNjcm9sbGJhci10cmFja1wiOiB7XG4gICAgICAgIGJveFNoYWRvdzogXCJpbnNldCAwIDAgNnB4IHJnYmEoMCwgMCwgMCwgMC4zKVwiXG4gICAgfSxcbiAgICBcIiY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iXCI6IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcImRhcmtncmV5XCIsXG4gICAgICAgIG91dGxpbmU6IFwiMXB4IHNvbGlkIHNsYXRlZ3JleVwiXG4gICAgfVxufSk7XG5cbmV4cG9ydCBpbnRlcmZhY2UgVGFiUHJvcHMge1xuICAgIG5hbWU6IHN0cmluZztcbiAgICBsYWJlbDogc3RyaW5nO1xuICAgIG5vUGFkZGluZz86IGJvb2xlYW47XG4gICAgZWxlbWVudDogSlNYLkVsZW1lbnQ7XG4gICAgZGlzYWJsZWQ/OiBib29sZWFuO1xuICAgIHZpc2libGU/OiBib29sZWFuO1xufVxuXG5leHBvcnQgY29uc3QgVGFiID0gKHsgbmFtZSwgbGFiZWwsIGRpc2FibGVkLCBlbGVtZW50LCB2aXNpYmxlLCBub1BhZGRpbmcgfTogVGFiUHJvcHMpID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgICA8VGFicy5UYWJcbiAgICAgICAgICAgIGNsYXNzTmFtZT17bm9QYWRkaW5nID8gXCJ3YnktcC0wXCIgOiB1bmRlZmluZWR9XG4gICAgICAgICAgICB2YWx1ZT17bmFtZX1cbiAgICAgICAgICAgIHRyaWdnZXI9e2xhYmVsfVxuICAgICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICAgICAgdmlzaWJsZT17dmlzaWJsZX1cbiAgICAgICAgICAgIGNvbnRlbnQ9ezxUYWJDb250YWluZXI+e2VsZW1lbnR9PC9UYWJDb250YWluZXI+fVxuICAgICAgICAvPlxuICAgICk7XG59O1xuIl19 */",
+  styles: "display:flex;position:relative;flex-direction:column;height:calc(100vh - 44px - 49px);overflow-y:auto;&::-webkit-scrollbar{width:1px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3);}&::-webkit-scrollbar-thumb{background-color:darkgrey;outline:1px solid slategrey;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhYi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTRCIiwiZmlsZSI6IlRhYi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IFRhYnMgfSBmcm9tIFwiQHdlYmlueS9hZG1pbi11aVwiO1xuXG5leHBvcnQgY29uc3QgVGFiQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAgaGVpZ2h0OiBcImNhbGMoMTAwdmggLSA0NHB4IC0gNDlweClcIiwgLy8gU3VidHJhY3QgdG9wLWJhciBhbmQgdGFiLWhlYWRlciBoZWlnaHRcbiAgICBvdmVyZmxvd1k6IFwiYXV0b1wiLFxuICAgIC8vIFN0eWxlIHNjcm9sbGJhclxuICAgIFwiJjo6LXdlYmtpdC1zY3JvbGxiYXJcIjoge1xuICAgICAgICB3aWR0aDogMVxuICAgIH0sXG4gICAgXCImOjotd2Via2l0LXNjcm9sbGJhci10cmFja1wiOiB7XG4gICAgICAgIGJveFNoYWRvdzogXCJpbnNldCAwIDAgNnB4IHJnYmEoMCwgMCwgMCwgMC4zKVwiXG4gICAgfSxcbiAgICBcIiY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iXCI6IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcImRhcmtncmV5XCIsXG4gICAgICAgIG91dGxpbmU6IFwiMXB4IHNvbGlkIHNsYXRlZ3JleVwiXG4gICAgfVxufSk7XG5cbmV4cG9ydCBpbnRlcmZhY2UgVGFiUHJvcHMge1xuICAgIG5hbWU6IHN0cmluZztcbiAgICBsYWJlbDogc3RyaW5nO1xuICAgIG5vUGFkZGluZz86IGJvb2xlYW47XG4gICAgZWxlbWVudDogSlNYLkVsZW1lbnQ7XG4gICAgZGlzYWJsZWQ/OiBib29sZWFuO1xuICAgIHZpc2libGU/OiBib29sZWFuO1xufVxuXG5leHBvcnQgY29uc3QgVGFiID0gKHsgbmFtZSwgbGFiZWwsIGRpc2FibGVkLCBlbGVtZW50LCB2aXNpYmxlLCBub1BhZGRpbmcgfTogVGFiUHJvcHMpID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgICA8VGFicy5UYWJcbiAgICAgICAgICAgIGNsYXNzTmFtZT17bm9QYWRkaW5nID8gXCJwLTBcIiA6IHVuZGVmaW5lZH1cbiAgICAgICAgICAgIHZhbHVlPXtuYW1lfVxuICAgICAgICAgICAgdHJpZ2dlcj17bGFiZWx9XG4gICAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICAgICB2aXNpYmxlPXt2aXNpYmxlfVxuICAgICAgICAgICAgY29udGVudD17PFRhYkNvbnRhaW5lcj57ZWxlbWVudH08L1RhYkNvbnRhaW5lcj59XG4gICAgICAgIC8+XG4gICAgKTtcbn07XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const Tab = ({
@@ -25,7 +24,7 @@ export const Tab = ({
   noPadding
 }) => {
   return /*#__PURE__*/React.createElement(Tabs.Tab, {
-    className: noPadding ? "wby-p-0" : undefined,
+    className: noPadding ? "p-0" : undefined,
     value: name,
     trigger: label,
     disabled: disabled,

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

@@ -1 +1 @@
-{"version":3,"names":["React","Tabs","TabContainer","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Tab","disabled","element","visible","noPadding","createElement","className","undefined","value","trigger","content"],"sources":["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: 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 ? \"wby-p-0\" : undefined}\n            value={name}\n            trigger={label}\n            disabled={disabled}\n            visible={visible}\n            content={<TabContainer>{element}</TabContainer>}\n        />\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,OAAO,MAAMC,YAAY,gBAAGC,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAiBxC,CAAC;AAWF,OAAO,MAAMC,GAAG,GAAGA,CAAC;EAAEL,IAAI;EAAED,KAAK;EAAEO,QAAQ;EAAEC,OAAO;EAAEC,OAAO;EAAEC;AAAoB,CAAC,KAAK;EACrF,oBACIlB,KAAA,CAAAmB,aAAA,CAAClB,IAAI,CAACa,GAAG;IACLM,SAAS,EAAEF,SAAS,GAAG,SAAS,GAAGG,SAAU;IAC7CC,KAAK,EAAEb,IAAK;IACZc,OAAO,EAAEf,KAAM;IACfO,QAAQ,EAAEA,QAAS;IACnBE,OAAO,EAAEA,OAAQ;IACjBO,OAAO,eAAExB,KAAA,CAAAmB,aAAA,CAACjB,YAAY,QAAEc,OAAsB;EAAE,CACnD,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Tabs","TabContainer","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Tab","disabled","element","visible","noPadding","createElement","className","undefined","value","trigger","content"],"sources":["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: 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"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,OAAO,MAAMC,YAAY,gBAAGC,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,CAiBxC,CAAC;AAWF,OAAO,MAAMC,GAAG,GAAGA,CAAC;EAAEJ,IAAI;EAAED,KAAK;EAAEM,QAAQ;EAAEC,OAAO;EAAEC,OAAO;EAAEC;AAAoB,CAAC,KAAK;EACrF,oBACIjB,KAAA,CAAAkB,aAAA,CAACjB,IAAI,CAACY,GAAG;IACLM,SAAS,EAAEF,SAAS,GAAG,KAAK,GAAGG,SAAU;IACzCC,KAAK,EAAEZ,IAAK;IACZa,OAAO,EAAEd,KAAM;IACfM,QAAQ,EAAEA,QAAS;IACnBE,OAAO,EAAEA,OAAQ;IACjBO,OAAO,eAAEvB,KAAA,CAAAkB,aAAA,CAAChB,YAAY,QAAEa,OAAsB;EAAE,CACnD,CAAC;AAEV,CAAC","ignoreList":[]}

package/BaseEditor/config/Toolbar/Layout.js

@@ -1,25 +1,10 @@
-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 { Toolbar } from "./Toolbar";
-import { Tabs } from "@webiny/admin-ui/Tabs";
-const ToolbarContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
-  target: "eauoe6d0"
-} : {
-  target: "eauoe6d0",
-  label: "ToolbarContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1qdiijb",
-  styles: "display:block;width:300px;height:100%;background-color:var(--mdc-theme-surface);border-right:1px solid var(--mdc-theme-on-background)"
-} : {
-  name: "1qdiijb",
-  styles: "display:block;width:300px;height:100%;background-color:var(--mdc-theme-surface);border-right:1px solid var(--mdc-theme-on-background)",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxheW91dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3lCIiwiZmlsZSI6IkxheW91dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IFRvb2xiYXIgfSBmcm9tIFwiLi9Ub29sYmFyXCI7XG5pbXBvcnQgeyBUYWJzIH0gZnJvbSBcIkB3ZWJpbnkvYWRtaW4tdWkvVGFic1wiO1xuXG5jb25zdCBUb29sYmFyQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBkaXNwbGF5OiBcImJsb2NrXCIsXG4gICAgd2lkdGg6IDMwMCxcbiAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgIGJhY2tncm91bmRDb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtc3VyZmFjZSlcIixcbiAgICBib3JkZXJSaWdodDogXCIxcHggc29saWQgdmFyKC0tbWRjLXRoZW1lLW9uLWJhY2tncm91bmQpXCJcbn0pO1xuXG5leHBvcnQgY29uc3QgTGF5b3V0ID0gKCkgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxUb29sYmFyQ29udGFpbmVyIGRhdGEtcm9sZT17XCJ0b29sYmFyLWxheW91dFwifT5cbiAgICAgICAgICAgIDxUYWJzXG4gICAgICAgICAgICAgICAgc2l6ZT1cIm1kXCJcbiAgICAgICAgICAgICAgICBzcGFjaW5nPXtcIm1kXCJ9XG4gICAgICAgICAgICAgICAgZGVmYXVsdFZhbHVlPXtcImluc2VydFwifVxuICAgICAgICAgICAgICAgIHRhYnM9e1s8VG9vbGJhci5FbGVtZW50cyBrZXk9XCJ0YWJzXCIgZ3JvdXA9e1widGFic1wifSAvPl19XG4gICAgICAgICAgICAgICAgc2VwYXJhdG9yPXt0cnVlfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgPC9Ub29sYmFyQ29udGFpbmVyPlxuICAgICk7XG59O1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+import { Toolbar } from "./Toolbar.js";
+import { Tabs } from "@webiny/admin-ui/Tabs/index.js";
 export const Layout = () => {
-  return /*#__PURE__*/React.createElement(ToolbarContainer, {
-    "data-role": "toolbar-layout"
+  return /*#__PURE__*/React.createElement("div", {
+    "data-role": "toolbar-layout",
+    className: "bg-neutral-base border-r-sm border-r-neutral-dimmed w-[300px] h-full"
   }, /*#__PURE__*/React.createElement(Tabs, {
     size: "md",
     spacing: "md",

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

@@ -1 +1 @@
-{"version":3,"names":["React","Toolbar","Tabs","ToolbarContainer","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Layout","createElement","size","spacing","defaultValue","tabs","Elements","key","group","separator"],"sources":["Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Toolbar } from \"./Toolbar\";\nimport { Tabs } from \"@webiny/admin-ui/Tabs\";\n\nconst ToolbarContainer = styled(\"div\")({\n    display: \"block\",\n    width: 300,\n    height: \"100%\",\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    borderRight: \"1px solid var(--mdc-theme-on-background)\"\n});\n\nexport const Layout = () => {\n    return (\n        <ToolbarContainer data-role={\"toolbar-layout\"}>\n            <Tabs\n                size=\"md\"\n                spacing={\"md\"}\n                defaultValue={\"insert\"}\n                tabs={[<Toolbar.Elements key=\"tabs\" group={\"tabs\"} />]}\n                separator={true}\n            />\n        </ToolbarContainer>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,OAAO;AAChB,SAASC,IAAI,QAAQ,uBAAuB;AAE5C,MAAMC,gBAAgB,gBAAGC,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAMrC,CAAC;AAEF,OAAO,MAAMC,MAAM,GAAGA,CAAA,KAAM;EACxB,oBACIf,KAAA,CAAAgB,aAAA,CAACb,gBAAgB;IAAC,aAAW;EAAiB,gBAC1CH,KAAA,CAAAgB,aAAA,CAACd,IAAI;IACDe,IAAI,EAAC,IAAI;IACTC,OAAO,EAAE,IAAK;IACdC,YAAY,EAAE,QAAS;IACvBC,IAAI,EAAE,cAACpB,KAAA,CAAAgB,aAAA,CAACf,OAAO,CAACoB,QAAQ;MAACC,GAAG,EAAC,MAAM;MAACC,KAAK,EAAE;IAAO,CAAE,CAAC,CAAE;IACvDC,SAAS,EAAE;EAAK,CACnB,CACa,CAAC;AAE3B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Toolbar","Tabs","Layout","createElement","className","size","spacing","defaultValue","tabs","Elements","key","group","separator"],"sources":["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={\"toolbar-layout\"}\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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO;AAChB,SAASC,IAAI,QAAQ,gCAAgC;AAErD,OAAO,MAAMC,MAAM,GAAGA,CAAA,KAAM;EACxB,oBACIH,KAAA,CAAAI,aAAA;IACI,aAAW,gBAAiB;IAC5BC,SAAS,EAAE;EAAuE,gBAElFL,KAAA,CAAAI,aAAA,CAACF,IAAI;IACDI,IAAI,EAAC,IAAI;IACTC,OAAO,EAAE,IAAK;IACdC,YAAY,EAAE,QAAS;IACvBC,IAAI,EAAE,cAACT,KAAA,CAAAI,aAAA,CAACH,OAAO,CAACS,QAAQ;MAACC,GAAG,EAAC,MAAM;MAACC,KAAK,EAAE;IAAO,CAAE,CAAC,CAAE;IACvDC,SAAS,EAAE;EAAK,CACnB,CACA,CAAC;AAEd,CAAC","ignoreList":[]}