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

package/BaseEditor/defaultConfig/DefaultEditorConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/DefaultEditorConfig.js","sources":["../../../src/BaseEditor/defaultConfig/DefaultEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as TouchIcon } from \"@webiny/icons/touch_app.svg\";\nimport { EditorConfig } from \"~/BaseEditor/config/index.js\";\nimport { InfoMessage } from \"./Sidebar/InfoMessage.js\";\nimport { StyleSettingsGroup } from \"./Sidebar/StyleSettings/StyleSettingsGroup.js\";\nimport { StyleProperties } from \"./Sidebar/StyleSettings/StyleProperties.js\";\nimport { ElementSettingsGroup } from \"./Sidebar/ElementSettings/ElementSettingsGroup.js\";\nimport { InsertElementsTab } from \"./Toolbar/InsertElements/InsertElementsTab.js\";\nimport { NavigatorTab } from \"./Toolbar/Navigator/NavigatorTab.js\";\nimport { CommandHandlers } from \"~/BaseEditor/commandHandlers/index.js\";\nimport { ElementSettings } from \"./Sidebar/ElementSettings/ElementSettings.js\";\nimport { ElementInputRenderers } from \"./ElementInputRenderers.js\";\nimport { ContentPreviewConfig } from \"./Content/ContentPreviewConfig.js\";\n\nconst { Ui } = EditorConfig;\n\nconst ClickToActivate = () => {\n    return (\n        <Ui.NoActiveElement>\n            <InfoMessage\n                icon={<TouchIcon />}\n                message={\"Select an element on the canvas to activate this panel.\"}\n            />\n        </Ui.NoActiveElement>\n    );\n};\n\nexport const DefaultEditorConfig = React.memo(() => {\n    return (\n        <>\n            <CommandHandlers />\n            <EditorConfig>\n                <ElementInputRenderers />\n                <ContentPreviewConfig />\n                <Ui.Toolbar.Element\n                    name={\"insertElements\"}\n                    group={\"tabs\"}\n                    element={<InsertElementsTab />}\n                />\n                <Ui.Toolbar.Element name={\"navigator\"} group={\"tabs\"} element={<NavigatorTab />} />\n                {/* Sidebar Groups */}\n                <Ui.Sidebar.Group name={\"element\"} element={<ElementSettingsGroup />} />\n                <Ui.Sidebar.Group name={\"style\"} element={<StyleSettingsGroup />} />\n                {/* Style Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"styleSettings\"}\n                    group={\"style\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <StyleProperties />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                <Ui.Sidebar.Element\n                    name={\"styleInactive\"}\n                    group={\"style\"}\n                    element={<ClickToActivate />}\n                />\n                {/* Element Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"elementInactive\"}\n                    group={\"element\"}\n                    element={<ClickToActivate />}\n                />\n                {/* This element renders element properties. */}\n                <Ui.Sidebar.Element\n                    name={\"elementSettings\"}\n                    group={\"element\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <ElementSettings />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                {/*<Ui.Sidebar.Element\n                    name={\"stateEditor\"}\n                    group={\"element\"}\n                    element={<DocumentStateEditor />}\n                />*/}\n            </EditorConfig>\n        </>\n    );\n});\n\nDefaultEditorConfig.displayName = \"DefaultEditorConfig\";\n"],"names":["Ui","EditorConfig","ClickToActivate","InfoMessage","TouchIcon","DefaultEditorConfig","React","CommandHandlers","ElementInputRenderers","ContentPreviewConfig","InsertElementsTab","NavigatorTab","ElementSettingsGroup","StyleSettingsGroup","StyleProperties","ElementSettings"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,EAAEA,IAAAA,EAAE,EAAE,GAAGC;AAEf,MAAMC,kBAAkB,IACb,WAAP,GACI,oBAACF,GAAG,eAAe,sBACf,oBAACG,aAAWA;QACR,oBAAM,oBAACC,gBAASA;QAChB,SAAS;;AAMlB,MAAMC,sBAAsB,WAAHA,GAAGC,MAAAA,IAAU,CAAC,IACnC,WAAP,GACI,wDACI,oBAACC,iBAAeA,OAAAA,WAAAA,GAChB,oBAACN,cAAYA,MAAAA,WAAAA,GACT,oBAACO,uBAAqBA,OAAAA,WAAAA,GACtB,oBAACC,sBAAoBA,OAAAA,WAAAA,GACrB,oBAACT,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACU,mBAAiBA;sBAE/B,oBAACV,GAAG,OAAO,CAAC,OAAO;QAAC,MAAM;QAAa,OAAO;QAAQ,uBAAS,oBAACW,cAAYA;sBAE5E,oBAACX,GAAG,OAAO,CAAC,KAAK;QAAC,MAAM;QAAW,uBAAS,oBAACY,sBAAoBA;sBACjE,oBAACZ,GAAG,OAAO,CAAC,KAAK;QAAC,MAAM;QAAS,uBAAS,oBAACa,oBAAkBA;sBAE7D,oBAACb,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBACI,oBAACA,GAAG,eAAe,sBACf,oBAACc,iBAAeA;sBAI5B,oBAACd,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACE,iBAAeA;sBAG7B,oBAACF,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACE,iBAAeA;sBAG7B,oBAACF,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBACI,oBAACA,GAAG,eAAe,sBACf,oBAACe,iBAAeA;;AAc5CV,oBAAoB,WAAW,GAAG"}
+{"version":3,"file":"BaseEditor/defaultConfig/DefaultEditorConfig.js","sources":["../../../src/BaseEditor/defaultConfig/DefaultEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorConfig } from \"~/BaseEditor/config/index.js\";\nimport { SidebarEmptyState } from \"./Sidebar/SidebarEmptyState.js\";\nimport { StyleSettingsGroup } from \"./Sidebar/StyleSettings/StyleSettingsGroup.js\";\nimport { StyleProperties } from \"./Sidebar/StyleSettings/StyleProperties.js\";\nimport { ElementSettingsGroup } from \"./Sidebar/ElementSettings/ElementSettingsGroup.js\";\nimport { InsertElementsTab } from \"./Toolbar/InsertElements/InsertElementsTab.js\";\nimport { NavigatorTab } from \"./Toolbar/Navigator/NavigatorTab.js\";\nimport { CommandHandlers } from \"~/BaseEditor/commandHandlers/index.js\";\nimport { ElementSettings } from \"./Sidebar/ElementSettings/ElementSettings.js\";\nimport { ElementInputRenderers } from \"./ElementInputRenderers.js\";\nimport { ContentPreviewConfig } from \"./Content/ContentPreviewConfig.js\";\n\nconst { Ui } = EditorConfig;\n\nconst ClickToActivate = () => {\n    return (\n        <Ui.NoActiveElement>\n            <SidebarEmptyState message={\"Select an element in the canvas to edit properties.\"} />\n        </Ui.NoActiveElement>\n    );\n};\n\nexport const DefaultEditorConfig = React.memo(() => {\n    return (\n        <>\n            <CommandHandlers />\n            <EditorConfig>\n                <ElementInputRenderers />\n                <ContentPreviewConfig />\n                <Ui.Toolbar.Element\n                    name={\"insertElements\"}\n                    group={\"tabs\"}\n                    element={<InsertElementsTab />}\n                />\n                <Ui.Toolbar.Element name={\"navigator\"} group={\"tabs\"} element={<NavigatorTab />} />\n                {/* Sidebar Groups */}\n                <Ui.Sidebar.Group name={\"element\"} element={<ElementSettingsGroup />} />\n                <Ui.Sidebar.Group name={\"style\"} element={<StyleSettingsGroup />} />\n                {/* Style Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"styleSettings\"}\n                    group={\"style\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <StyleProperties />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                <Ui.Sidebar.Element\n                    name={\"styleInactive\"}\n                    group={\"style\"}\n                    element={<ClickToActivate />}\n                />\n                {/* Element Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"elementInactive\"}\n                    group={\"element\"}\n                    element={<ClickToActivate />}\n                />\n                {/* This element renders element properties. */}\n                <Ui.Sidebar.Element\n                    name={\"elementSettings\"}\n                    group={\"element\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <ElementSettings />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                {/*<Ui.Sidebar.Element\n                    name={\"stateEditor\"}\n                    group={\"element\"}\n                    element={<DocumentStateEditor />}\n                />*/}\n            </EditorConfig>\n        </>\n    );\n});\n\nDefaultEditorConfig.displayName = \"DefaultEditorConfig\";\n"],"names":["Ui","EditorConfig","ClickToActivate","SidebarEmptyState","DefaultEditorConfig","React","CommandHandlers","ElementInputRenderers","ContentPreviewConfig","InsertElementsTab","NavigatorTab","ElementSettingsGroup","StyleSettingsGroup","StyleProperties","ElementSettings"],"mappings":";;;;;;;;;;;;AAaA,MAAM,EAAEA,IAAAA,EAAE,EAAE,GAAGC;AAEf,MAAMC,kBAAkB,IACb,WAAP,GACI,oBAACF,GAAG,eAAe,sBACf,oBAACG,mBAAiBA;QAAC,SAAS;;AAKjC,MAAMC,sBAAsB,WAAHA,GAAGC,MAAAA,IAAU,CAAC,IACnC,WAAP,GACI,wDACI,oBAACC,iBAAeA,OAAAA,WAAAA,GAChB,oBAACL,cAAYA,MAAAA,WAAAA,GACT,oBAACM,uBAAqBA,OAAAA,WAAAA,GACtB,oBAACC,sBAAoBA,OAAAA,WAAAA,GACrB,oBAACR,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACS,mBAAiBA;sBAE/B,oBAACT,GAAG,OAAO,CAAC,OAAO;QAAC,MAAM;QAAa,OAAO;QAAQ,uBAAS,oBAACU,cAAYA;sBAE5E,oBAACV,GAAG,OAAO,CAAC,KAAK;QAAC,MAAM;QAAW,uBAAS,oBAACW,sBAAoBA;sBACjE,oBAACX,GAAG,OAAO,CAAC,KAAK;QAAC,MAAM;QAAS,uBAAS,oBAACY,oBAAkBA;sBAE7D,oBAACZ,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBACI,oBAACA,GAAG,eAAe,sBACf,oBAACa,iBAAeA;sBAI5B,oBAACb,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACE,iBAAeA;sBAG7B,oBAACF,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBAAS,oBAACE,iBAAeA;sBAG7B,oBAACF,GAAG,OAAO,CAAC,OAAO;QACf,MAAM;QACN,OAAO;QACP,uBACI,oBAACA,GAAG,eAAe,sBACf,oBAACc,iBAAeA;;AAc5CV,oBAAoB,WAAW,GAAG"}

package/BaseEditor/defaultConfig/Sidebar/ElementPreview.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { DocumentElement } from "@webiny/website-builder-sdk";
+interface ElementPreviewProps {
+    element: DocumentElement;
+}
+export declare const ElementPreview: ({ element }: ElementPreviewProps) => React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Sidebar/ElementPreview.js

@@ -0,0 +1,23 @@
+import react from "react";
+import { useComponent } from "../../hooks/useComponent.js";
+import { Icon } from "@webiny/admin-ui";
+import { InlineSvg } from "../Toolbar/InsertElements/InlineSvg.js";
+const ElementPreview = ({ element })=>{
+    const component = useComponent(element.component.name);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "fill-accent-default"
+    }, component.image && /*#__PURE__*/ react.createElement(Icon, {
+        icon: /*#__PURE__*/ react.createElement(InlineSvg, {
+            src: component.image
+        }),
+        size: "md",
+        label: component.label ?? element.component.name
+    })), /*#__PURE__*/ react.createElement("span", {
+        className: "text-md font-semibold text-neutral-primary"
+    }, component.label ?? element.component.name));
+};
+export { ElementPreview };
+
+//# sourceMappingURL=ElementPreview.js.map

package/BaseEditor/defaultConfig/Sidebar/ElementPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementPreview.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/ElementPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent.js\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\n\ninterface ElementPreviewProps {\n    element: DocumentElement;\n}\n\nexport const ElementPreview = ({ element }: ElementPreviewProps) => {\n    const component = useComponent(element.component.name);\n\n    return (\n        <div className={\"flex items-center gap-sm\"}>\n            <div className={\"fill-accent-default\"}>\n                {component.image && (\n                    <Icon\n                        icon={<InlineSvg src={component.image} />}\n                        size={\"md\"}\n                        label={component.label ?? element.component.name}\n                    />\n                )}\n            </div>\n            <span className={\"text-md font-semibold text-neutral-primary\"}>\n                {component.label ?? element.component.name}\n            </span>\n        </div>\n    );\n};\n"],"names":["ElementPreview","element","component","useComponent","Icon","InlineSvg"],"mappings":";;;;AAUO,MAAMA,iBAAiB,CAAC,EAAEC,OAAO,EAAuB;IAC3D,MAAMC,YAAYC,aAAaF,QAAQ,SAAS,CAAC,IAAI;IAErD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;OACXC,UAAU,KAAK,IAAI,WAAJ,GACZ,oBAACE,MAAIA;QACD,oBAAM,oBAACC,WAASA;YAAC,KAAKH,UAAU,KAAK;;QACrC,MAAM;QACN,OAAOA,UAAU,KAAK,IAAID,QAAQ,SAAS,CAAC,IAAI;uBAI5D,oBAAC;QAAK,WAAW;OACZC,UAAU,KAAK,IAAID,QAAQ,SAAS,CAAC,IAAI;AAI1D"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js

@@ -6,6 +6,7 @@ import { InputRenderer } from "./InputRenderer.js";
 import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument.js";
 import { InfoMessage } from "../InfoMessage.js";
+import { ElementPreview } from "../ElementPreview.js";
 const ElementInputs = makeDecoratable("ElementInputs", ({ element })=>{
     const component = useComponent(element.component.name);
     const bindings = useSelectFromDocument((document)=>document.bindings[element.id] ?? {
@@ -21,10 +22,18 @@ const ElementInputs = makeDecoratable("ElementInputs", ({ element })=>{
         inputsAst
     ]);
     if (!element) return null;
-    if (!hasEditableInputs) return /*#__PURE__*/ react.createElement(InfoMessage, {
+    return /*#__PURE__*/ react.createElement(Grid, {
+        gap: "compact",
+        className: "pt-md px-sm"
+    }, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(ElementPreview, {
+        element: element
+    })), hasEditableInputs ? /*#__PURE__*/ react.createElement(react.Fragment, null) : /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(InfoMessage, {
         message: "This element has no inputs."
-    });
-    return /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(InputRenderer, {
+    })), /*#__PURE__*/ react.createElement(InputRenderer, {
         key: element.id,
         ast: inputsAst,
         bindings: bindings.inputs

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent.js\";\nimport { InputRenderer } from \"./InputRenderer.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { InfoMessage } from \"~/BaseEditor/defaultConfig/Sidebar/InfoMessage.js\";\n\ninterface ElementInputsProps {\n    element: DocumentElement;\n}\n\nexport const ElementInputs = makeDecoratable(\"ElementInputs\", ({ element }: ElementInputsProps) => {\n    const component = useComponent(element.component.name);\n\n    const bindings = useSelectFromDocument(\n        document => {\n            return document.bindings[element.id] ?? { inputs: {} };\n        },\n        [element.id]\n    );\n\n    const inputsAst = useMemo(() => {\n        return ComponentManifestToAstConverter.convert(component.inputs ?? []);\n    }, [component.name, element.id]);\n\n    const hasEditableInputs = useMemo(() => {\n        return inputsAst.filter(input => input.type !== \"slot\").length > 0;\n    }, [inputsAst]);\n\n    if (!element) {\n        return null;\n    }\n\n    if (!hasEditableInputs) {\n        return <InfoMessage message={\"This element has no inputs.\"} />;\n    }\n\n    return (\n        <Grid>\n            {/*<Grid.Column key={\"repeat\"} span={12}>*/}\n            {/*    <Select*/}\n            {/*        label={\"Repeat for each\"}*/}\n            {/*        placeholder={\"Select binding\"}*/}\n            {/*        options={arrayOptions}*/}\n            {/*        value={repeat.value ?? \"\"}*/}\n            {/*        onChange={value => repeat.onChange(value === \"\" ? undefined : value)}*/}\n            {/*    />*/}\n            {/*</Grid.Column>*/}\n            <InputRenderer key={element.id} ast={inputsAst} bindings={bindings.inputs} />\n        </Grid>\n    );\n});\n\n// interface ElementInputProps {\n//     element: DocumentElement;\n//     input: ComponentInput;\n// }\n//\n// const ElementInput = ({ element, input }: ElementInputProps) => {\n//     const Renderer = useInputRenderer(input.renderer || \"__unknown__\");\n//\n//     const { value, onChange, onPreviewChange, setBindingType } = useInputValue(element, input);\n//\n//     /*   return (\n//         <Renderer\n//             value={value.static}\n//             input={input}\n//             onChange={onChange}\n//             onPreviewChange={onPreviewChange}\n//         />\n//     );*/\n//     if (value.expression) {\n//         return (\n//             <WithBindingToggle type={\"expression\"} setBindingType={setBindingType}>\n//                 <ExpressionRenderer\n//                     element={element}\n//                     value={value.expression}\n//                     onChange={onChange}\n//                     input={input}\n//                 />\n//             </WithBindingToggle>\n//         );\n//     }\n//\n//     return (\n//         <WithBindingToggle type={\"static\"} setBindingType={setBindingType}>\n//             <Renderer\n//                 value={value.static}\n//                 input={input}\n//                 onChange={onChange}\n//                 onPreviewChange={onPreviewChange}\n//             />\n//         </WithBindingToggle>\n//     );\n// };\n"],"names":["ElementInputs","makeDecoratable","element","component","useComponent","bindings","useSelectFromDocument","document","inputsAst","useMemo","ComponentManifestToAstConverter","hasEditableInputs","input","InfoMessage","Grid","InputRenderer"],"mappings":";;;;;;;;AAcO,MAAMA,gBAAgBC,gBAAgB,iBAAiB,CAAC,EAAEC,OAAO,EAAsB;IAC1F,MAAMC,YAAYC,aAAaF,QAAQ,SAAS,CAAC,IAAI;IAErD,MAAMG,WAAWC,sBACbC,CAAAA,WACWA,SAAS,QAAQ,CAACL,QAAQ,EAAE,CAAC,IAAI;YAAE,QAAQ,CAAC;QAAE,GAEzD;QAACA,QAAQ,EAAE;KAAC;IAGhB,MAAMM,YAAYC,QAAQ,IACfC,gCAAgC,OAAO,CAACP,UAAU,MAAM,IAAI,EAAE,GACtE;QAACA,UAAU,IAAI;QAAED,QAAQ,EAAE;KAAC;IAE/B,MAAMS,oBAAoBF,QAAQ,IACvBD,UAAU,MAAM,CAACI,CAAAA,QAASA,AAAe,WAAfA,MAAM,IAAI,EAAa,MAAM,GAAG,GAClE;QAACJ;KAAU;IAEd,IAAI,CAACN,SACD,OAAO;IAGX,IAAI,CAACS,mBACD,OAAO,WAAP,GAAO,oBAACE,aAAWA;QAAC,SAAS;;IAGjC,OAAO,WAAP,GACI,oBAACC,MAAIA,MAAAA,WAAAA,GAUD,oBAACC,eAAaA;QAAC,KAAKb,QAAQ,EAAE;QAAE,KAAKM;QAAW,UAAUH,SAAS,MAAM;;AAGrF"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementInputs.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { useComponent } from \"~/BaseEditor/hooks/useComponent.js\";\nimport { InputRenderer } from \"./InputRenderer.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { InfoMessage } from \"~/BaseEditor/defaultConfig/Sidebar/InfoMessage.js\";\nimport { ElementPreview } from \"../ElementPreview.js\";\n\ninterface ElementInputsProps {\n    element: DocumentElement;\n}\n\nexport const ElementInputs = makeDecoratable(\"ElementInputs\", ({ element }: ElementInputsProps) => {\n    const component = useComponent(element.component.name);\n\n    const bindings = useSelectFromDocument(\n        document => {\n            return document.bindings[element.id] ?? { inputs: {} };\n        },\n        [element.id]\n    );\n\n    const inputsAst = useMemo(() => {\n        return ComponentManifestToAstConverter.convert(component.inputs ?? []);\n    }, [component.name, element.id]);\n\n    const hasEditableInputs = useMemo(() => {\n        return inputsAst.filter(input => input.type !== \"slot\").length > 0;\n    }, [inputsAst]);\n\n    if (!element) {\n        return null;\n    }\n\n    return (\n        <Grid gap={\"compact\"} className={\"pt-md px-sm\"}>\n            <Grid.Column span={12}>\n                <ElementPreview element={element} />\n            </Grid.Column>\n            {!hasEditableInputs ? (\n                <Grid.Column span={12}>\n                    <InfoMessage message={\"This element has no inputs.\"} />\n                </Grid.Column>\n            ) : (\n                <></>\n            )}\n\n            <InputRenderer key={element.id} ast={inputsAst} bindings={bindings.inputs} />\n        </Grid>\n    );\n});\n\n// interface ElementInputProps {\n//     element: DocumentElement;\n//     input: ComponentInput;\n// }\n//\n// const ElementInput = ({ element, input }: ElementInputProps) => {\n//     const Renderer = useInputRenderer(input.renderer || \"__unknown__\");\n//\n//     const { value, onChange, onPreviewChange, setBindingType } = useInputValue(element, input);\n//\n//     /*   return (\n//         <Renderer\n//             value={value.static}\n//             input={input}\n//             onChange={onChange}\n//             onPreviewChange={onPreviewChange}\n//         />\n//     );*/\n//     if (value.expression) {\n//         return (\n//             <WithBindingToggle type={\"expression\"} setBindingType={setBindingType}>\n//                 <ExpressionRenderer\n//                     element={element}\n//                     value={value.expression}\n//                     onChange={onChange}\n//                     input={input}\n//                 />\n//             </WithBindingToggle>\n//         );\n//     }\n//\n//     return (\n//         <WithBindingToggle type={\"static\"} setBindingType={setBindingType}>\n//             <Renderer\n//                 value={value.static}\n//                 input={input}\n//                 onChange={onChange}\n//                 onPreviewChange={onPreviewChange}\n//             />\n//         </WithBindingToggle>\n//     );\n// };\n"],"names":["ElementInputs","makeDecoratable","element","component","useComponent","bindings","useSelectFromDocument","document","inputsAst","useMemo","ComponentManifestToAstConverter","hasEditableInputs","input","Grid","ElementPreview","InfoMessage","InputRenderer"],"mappings":";;;;;;;;;AAeO,MAAMA,gBAAgBC,gBAAgB,iBAAiB,CAAC,EAAEC,OAAO,EAAsB;IAC1F,MAAMC,YAAYC,aAAaF,QAAQ,SAAS,CAAC,IAAI;IAErD,MAAMG,WAAWC,sBACbC,CAAAA,WACWA,SAAS,QAAQ,CAACL,QAAQ,EAAE,CAAC,IAAI;YAAE,QAAQ,CAAC;QAAE,GAEzD;QAACA,QAAQ,EAAE;KAAC;IAGhB,MAAMM,YAAYC,QAAQ,IACfC,gCAAgC,OAAO,CAACP,UAAU,MAAM,IAAI,EAAE,GACtE;QAACA,UAAU,IAAI;QAAED,QAAQ,EAAE;KAAC;IAE/B,MAAMS,oBAAoBF,QAAQ,IACvBD,UAAU,MAAM,CAACI,CAAAA,QAASA,AAAe,WAAfA,MAAM,IAAI,EAAa,MAAM,GAAG,GAClE;QAACJ;KAAU;IAEd,IAAI,CAACN,SACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACW,MAAIA;QAAC,KAAK;QAAW,WAAW;qBAC7B,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,gBAAcA;QAAC,SAASZ;SAE5B,AAACS,oB,cAKE,4CALkB,WAApBA,GACE,oBAACE,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,aAAWA;QAAC,SAAS;SAG1B,cAGJ,oBAACC,eAAaA;QAAC,KAAKd,QAAQ,EAAE;QAAE,KAAKM;QAAW,UAAUH,SAAS,MAAM;;AAGrF"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.js

@@ -1,4 +1,6 @@
 import react from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/notes.svg";
 import { Sidebar } from "../../../config/Sidebar/Sidebar.js";
 import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer.js";
 const ElementSettingsGroup = ()=>/*#__PURE__*/ react.createElement(ScrollableContainer, {
@@ -6,6 +8,10 @@ const ElementSettingsGroup = ()=>/*#__PURE__*/ react.createElement(ScrollableCon
     }, /*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
         name: "element",
         label: "Element",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Element"
+        }),
         element: /*#__PURE__*/ react.createElement(Sidebar.Elements, {
             group: "element"
         })

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\n\nexport const ElementSettingsGroup = () => {\n    return (\n        <ScrollableContainer tabIndex={-1}>\n            <Sidebar.Group.Tab\n                name={\"element\"}\n                label={\"Element\"}\n                element={<Sidebar.Elements group={\"element\"} />}\n            />\n        </ScrollableContainer>\n    );\n};\n"],"names":["ElementSettingsGroup","ScrollableContainer","Sidebar"],"mappings":";;;AAIO,MAAMA,uBAAuB,IACzB,WAAP,GACI,oBAACC,qBAAmBA;QAAC,UAAU;qBAC3B,oBAACC,QAAQ,KAAK,CAAC,GAAG;QACd,MAAM;QACN,OAAO;QACP,uBAAS,oBAACA,QAAQ,QAAQ;YAAC,OAAO"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/ElementSettings/ElementSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as NotesIcon } from \"@webiny/icons/notes.svg\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\n\nexport const ElementSettingsGroup = () => (\n    <ScrollableContainer tabIndex={-1}>\n        <Sidebar.Group.Tab\n            name={\"element\"}\n            label={\"Element\"}\n            icon={<Icon icon={<NotesIcon />} label={\"Element\"} />}\n            element={<Sidebar.Elements group={\"element\"} />}\n        />\n    </ScrollableContainer>\n);\n"],"names":["ElementSettingsGroup","ScrollableContainer","Sidebar","Icon","NotesIcon"],"mappings":";;;;;AAMO,MAAMA,uBAAuB,kBAChC,oBAACC,qBAAmBA;QAAC,UAAU;qBAC3B,oBAACC,QAAQ,KAAK,CAAC,GAAG;QACd,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAASA;YAAK,OAAO;;QACxC,uBAAS,oBAACF,QAAQ,QAAQ;YAAC,OAAO"}

package/BaseEditor/defaultConfig/Sidebar/ElementSettings/useBindingsForElement.d.ts

@@ -3,12 +3,10 @@ export declare const useBindingsForElement: (elementId: string) => {
     resolvedBindings: import("@webiny/website-builder-sdk").DocumentElementBindings & {
         inputs: import("@webiny/website-builder-sdk").DocumentElementInputBindings;
         styles: Partial<{
-            transform?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Transform | undefined> | undefined;
-            zIndex?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ZIndex | undefined> | undefined;
-            opacity?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Opacity | undefined> | undefined;
             clipPath?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ClipPath | undefined> | undefined;
             filter?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Filter | undefined> | undefined;
             mask?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Mask<string | number> | undefined> | undefined;
+            transform?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Transform | undefined> | undefined;
             fill?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Fill | undefined> | undefined;
             height?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Height<string | number> | undefined> | undefined;
             left?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Left<string | number> | undefined> | undefined;
@@ -16,8 +14,6 @@ export declare const useBindingsForElement: (elementId: string) => {
             width?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Width<string | number> | undefined> | undefined;
             position?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Position | undefined> | undefined;
             content?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Content | undefined> | undefined;
-            translate?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Translate<string | number> | undefined> | undefined;
-            color?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Color | undefined> | undefined;
             display?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Display | undefined> | undefined;
             flexDirection?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.FlexDirection | undefined> | undefined;
             overflowY?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OverflowY | undefined> | undefined;
@@ -102,6 +98,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             caretShape?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.CaretShape | undefined> | undefined;
             clear?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Clear | undefined> | undefined;
             clipRule?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ClipRule | undefined> | undefined;
+            color?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Color | undefined> | undefined;
             colorAdjust?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.PrintColorAdjust | undefined> | undefined;
             colorInterpolationFilters?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ColorInterpolationFilters | undefined> | undefined;
             colorScheme?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ColorScheme | undefined> | undefined;
@@ -258,6 +255,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             offsetPosition?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OffsetPosition<string | number> | undefined> | undefined;
             offsetRotate?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OffsetRotate | undefined> | undefined;
             offsetRotation?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OffsetRotate | undefined> | undefined;
+            opacity?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Opacity | undefined> | undefined;
             order?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Order | undefined> | undefined;
             orphans?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Orphans | undefined> | undefined;
             outlineColor?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.OutlineColor | undefined> | undefined;
@@ -392,6 +390,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             transitionDuration?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransitionDuration<string & {}> | undefined> | undefined;
             transitionProperty?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransitionProperty | undefined> | undefined;
             transitionTimingFunction?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.TransitionTimingFunction | undefined> | undefined;
+            translate?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Translate<string | number> | undefined> | undefined;
             unicodeBidi?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.UnicodeBidi | undefined> | undefined;
             userSelect?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.UserSelect | undefined> | undefined;
             vectorEffect?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.VectorEffect | undefined> | undefined;
@@ -412,6 +411,7 @@ export declare const useBindingsForElement: (elementId: string) => {
             writingMode?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.WritingMode | undefined> | undefined;
             x?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.X<string | number> | undefined> | undefined;
             y?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Y<string | number> | undefined> | undefined;
+            zIndex?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.ZIndex | undefined> | undefined;
             zoom?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.Zoom | undefined> | undefined;
             all?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Globals | undefined> | undefined;
             animationRange?: import("@webiny/website-builder-sdk").StyleValueBinding<import("csstype").Property.AnimationRange<string | number> | undefined> | undefined;

package/BaseEditor/defaultConfig/Sidebar/InfoMessage.js

@@ -1,7 +1,7 @@
 import react from "react";
 import { Icon, Text } from "@webiny/admin-ui";
 const InfoMessage = ({ message, icon })=>/*#__PURE__*/ react.createElement("div", {
-        className: "bg-neutral-dimmed p-md flex flex-col items-center"
+        className: "bg-neutral-dark/2 rounded-lg p-md flex flex-col items-center w-full"
     }, icon && /*#__PURE__*/ react.createElement(Icon, {
         label: "Select an element",
         size: "lg",
@@ -9,7 +9,7 @@ const InfoMessage = ({ message, icon })=>/*#__PURE__*/ react.createElement("div"
         color: "neutral-light"
     }), /*#__PURE__*/ react.createElement(Text, {
         size: "md",
-        className: "text-center text-neutral-dimmed my-sm"
+        className: "text-center text-neutral-strong my-sm"
     }, message));
 export { InfoMessage };
 

package/BaseEditor/defaultConfig/Sidebar/InfoMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/InfoMessage.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/InfoMessage.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React from \"react\";\nimport { Text, Icon } from \"@webiny/admin-ui\";\n\nexport interface InfoMessageProps {\n    message: string;\n    icon?: ReactElement;\n}\n\nexport const InfoMessage = ({ message, icon }: InfoMessageProps) => {\n    return (\n        <div className={\"bg-neutral-dimmed p-md flex flex-col items-center\"}>\n            {icon && (\n                <Icon label=\"Select an element\" size={\"lg\"} icon={icon} color={\"neutral-light\"} />\n            )}\n            <Text size={\"md\"} className={\"text-center text-neutral-dimmed my-sm\"}>\n                {message}\n            </Text>\n        </div>\n    );\n};\n"],"names":["InfoMessage","message","icon","Icon","Text"],"mappings":";;AASO,MAAMA,cAAc,CAAC,EAAEC,OAAO,EAAEC,IAAI,EAAoB,GACpD,WAAP,GACI,oBAAC;QAAI,WAAW;OACXA,QAAQ,WAARA,GACG,oBAACC,MAAIA;QAAC,OAAM;QAAoB,MAAM;QAAM,MAAMD;QAAM,OAAO;sBAEnE,oBAACE,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBH"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/InfoMessage.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/InfoMessage.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React from \"react\";\nimport { Text, Icon } from \"@webiny/admin-ui\";\n\nexport interface InfoMessageProps {\n    message: string;\n    icon?: ReactElement;\n}\n\nexport const InfoMessage = ({ message, icon }: InfoMessageProps) => {\n    return (\n        <div className={\"bg-neutral-dark/2 rounded-lg p-md flex flex-col items-center w-full\"}>\n            {icon && (\n                <Icon label=\"Select an element\" size={\"lg\"} icon={icon} color={\"neutral-light\"} />\n            )}\n            <Text size={\"md\"} className={\"text-center text-neutral-strong my-sm\"}>\n                {message}\n            </Text>\n        </div>\n    );\n};\n"],"names":["InfoMessage","message","icon","Icon","Text"],"mappings":";;AASO,MAAMA,cAAc,CAAC,EAAEC,OAAO,EAAEC,IAAI,EAAoB,GACpD,WAAP,GACI,oBAAC;QAAI,WAAW;OACXA,QAAQ,WAARA,GACG,oBAACC,MAAIA;QAAC,OAAM;QAAoB,MAAM;QAAM,MAAMD;QAAM,OAAO;sBAEnE,oBAACE,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBH"}

package/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js

@@ -21,6 +21,7 @@ const InheritanceLabel = ({ inheritedFrom, isOverridden, text, onReset })=>{
         breakpoints.length
     ]);
     if (isBaseBreakpoint) return /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        className: "mb-0",
         text: text
     });
     return /*#__PURE__*/ react.createElement("div", {
@@ -46,6 +47,7 @@ const InheritanceLabel = ({ inheritedFrom, isOverridden, text, onReset })=>{
         overriddenAt: isOverridden ? breakpoint.name : null,
         onReset: onReset
     }))), /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        className: "mb-0",
         text: text
     }));
 };

package/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n    Text,\n    Tag,\n    Icon,\n    Button,\n    Separator,\n    DropdownMenu,\n    FormComponentLabel\n} from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport type { Breakpoint } from \"@webiny/website-builder-sdk\";\n\nexport interface InheritanceLabelProps {\n    text: React.ReactNode;\n    isOverridden: boolean;\n    onReset: () => void;\n    inheritedFrom?: string;\n}\n\nconst getBreakpointIcon = (breakpoints: Breakpoint[], name: string) => {\n    const bp = breakpoints.find(breakpoint => breakpoint.name === name);\n    return bp ? <InlineSvg src={bp.icon} /> : null;\n};\n\nconst iconClassName = \"cursor-pointer mr-xs mb-xxs\";\n\nexport const InheritanceLabel = ({\n    inheritedFrom,\n    isOverridden,\n    text,\n    onReset\n}: InheritanceLabelProps) => {\n    const { breakpoint, breakpoints, isBaseBreakpoint } = useBreakpoint();\n    const baseBreakpoint = breakpoints[0];\n\n    const icon = useMemo(() => {\n        const bp = inheritedFrom ?? baseBreakpoint.name;\n        return getBreakpointIcon(breakpoints, bp);\n    }, [inheritedFrom, breakpoint.name, breakpoints.length]);\n\n    if (isBaseBreakpoint) {\n        return <FormComponentLabel text={text} />;\n    }\n\n    return (\n        <div className={\"flex items-center\"}>\n            <DropdownMenu\n                trigger={\n                    <Icon\n                        icon={icon}\n                        label=\"\"\n                        size=\"sm\"\n                        color={isOverridden ? \"accent\" : \"neutral-strong\"}\n                        className={iconClassName}\n                    />\n                }\n                align=\"center\"\n                side=\"bottom\"\n                className={\"wy-p-sm shadow-lg\"}\n            >\n                <div className={\"p-sm text-sm\"} style={{ width: 200 }}>\n                    <InheritedFrom\n                        inheritedFrom={inheritedFrom ?? baseBreakpoint.name}\n                        overriddenAt={isOverridden ? breakpoint.name : null}\n                        onReset={onReset}\n                    />\n                </div>\n            </DropdownMenu>\n            <FormComponentLabel text={text} />\n        </div>\n    );\n};\n\ninterface InheritedFromProps {\n    overriddenAt: string | null;\n    inheritedFrom?: string;\n    onReset: () => void;\n}\n\nexport const InheritedFrom = ({ overriddenAt, inheritedFrom, onReset }: InheritedFromProps) => {\n    if (overriddenAt) {\n        return (\n            <div>\n                This value is set on the current breakpoint.\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                <Button variant={\"primary\"} onClick={onReset} text={\"Reset value\"} size={\"sm\"} />\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                Resetting will inherit the value from the{\" \"}\n                <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n            </div>\n        );\n    }\n\n    return (\n        <Text size={\"sm\"}>\n            This value is inherited from the{\" \"}\n            <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n        </Text>\n    );\n};\n"],"names":["getBreakpointIcon","breakpoints","name","bp","breakpoint","InlineSvg","iconClassName","InheritanceLabel","inheritedFrom","isOverridden","text","onReset","isBaseBreakpoint","useBreakpoint","baseBreakpoint","icon","useMemo","FormComponentLabel","DropdownMenu","Icon","InheritedFrom","overriddenAt","Separator","Button","Tag","Text"],"mappings":";;;;AAqBA,MAAMA,oBAAoB,CAACC,aAA2BC;IAClD,MAAMC,KAAKF,YAAY,IAAI,CAACG,CAAAA,aAAcA,WAAW,IAAI,KAAKF;IAC9D,OAAOC,KAAK,WAALA,GAAK,oBAACE,WAASA;QAAC,KAAKF,GAAG,IAAI;SAAO;AAC9C;AAEA,MAAMG,gBAAgB;AAEf,MAAMC,mBAAmB,CAAC,EAC7BC,aAAa,EACbC,YAAY,EACZC,IAAI,EACJC,OAAO,EACa;IACpB,MAAM,EAAEP,UAAU,EAAEH,WAAW,EAAEW,gBAAgB,EAAE,GAAGC;IACtD,MAAMC,iBAAiBb,WAAW,CAAC,EAAE;IAErC,MAAMc,OAAOC,QAAQ;QACjB,MAAMb,KAAKK,iBAAiBM,eAAe,IAAI;QAC/C,OAAOd,kBAAkBC,aAAaE;IAC1C,GAAG;QAACK;QAAeJ,WAAW,IAAI;QAAEH,YAAY,MAAM;KAAC;IAEvD,IAAIW,kBACA,OAAO,WAAP,GAAO,oBAACK,oBAAkBA;QAAC,MAAMP;;IAGrC,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACQ,cAAYA;QACT,uBACI,oBAACC,MAAIA;YACD,MAAMJ;YACN,OAAM;YACN,MAAK;YACL,OAAON,eAAe,WAAW;YACjC,WAAWH;;QAGnB,OAAM;QACN,MAAK;QACL,WAAW;qBAEX,oBAAC;QAAI,WAAW;QAAgB,OAAO;YAAE,OAAO;QAAI;qBAChD,oBAACc,eAAaA;QACV,eAAeZ,iBAAiBM,eAAe,IAAI;QACnD,cAAcL,eAAeL,WAAW,IAAI,GAAG;QAC/C,SAASO;wBAIrB,oBAACM,oBAAkBA;QAAC,MAAMP;;AAGtC;AAQO,MAAMU,gBAAgB,CAAC,EAAEC,YAAY,EAAEb,aAAa,EAAEG,OAAO,EAAsB;IACtF,IAAIU,cACA,OAAO,WAAP,GACI,oBAAC,aAAI,8DAED,oBAACC,WAASA;QAAC,SAAS;QAAU,QAAQ;sBACtC,oBAACC,QAAMA;QAAC,SAAS;QAAW,SAASZ;QAAS,MAAM;QAAe,MAAM;sBACzE,oBAACW,WAASA;QAAC,SAAS;QAAU,QAAQ;QAAQ,6CACJ,mBAC1C,oBAACE,KAAGA;QAAC,SAAS;QAAiB,SAAShB;QAAiB;IAKrE,OAAO,WAAP,GACI,oBAACiB,MAAIA;QAAC,MAAM;OAAM,oCACmB,mBACjC,oBAACD,KAAGA;QAAC,SAAS;QAAiB,SAAShB;QAAiB;AAGrE"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n    Text,\n    Tag,\n    Icon,\n    Button,\n    Separator,\n    DropdownMenu,\n    FormComponentLabel\n} from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport type { Breakpoint } from \"@webiny/website-builder-sdk\";\n\nexport interface InheritanceLabelProps {\n    text: React.ReactNode;\n    isOverridden: boolean;\n    onReset: () => void;\n    inheritedFrom?: string;\n}\n\nconst getBreakpointIcon = (breakpoints: Breakpoint[], name: string) => {\n    const bp = breakpoints.find(breakpoint => breakpoint.name === name);\n    return bp ? <InlineSvg src={bp.icon} /> : null;\n};\n\nconst iconClassName = \"cursor-pointer mr-xs mb-xxs\";\n\nexport const InheritanceLabel = ({\n    inheritedFrom,\n    isOverridden,\n    text,\n    onReset\n}: InheritanceLabelProps) => {\n    const { breakpoint, breakpoints, isBaseBreakpoint } = useBreakpoint();\n    const baseBreakpoint = breakpoints[0];\n\n    const icon = useMemo(() => {\n        const bp = inheritedFrom ?? baseBreakpoint.name;\n        return getBreakpointIcon(breakpoints, bp);\n    }, [inheritedFrom, breakpoint.name, breakpoints.length]);\n\n    if (isBaseBreakpoint) {\n        return <FormComponentLabel className={\"mb-0\"} text={text} />;\n    }\n\n    return (\n        <div className={\"flex items-center\"}>\n            <DropdownMenu\n                trigger={\n                    <Icon\n                        icon={icon}\n                        label=\"\"\n                        size=\"sm\"\n                        color={isOverridden ? \"accent\" : \"neutral-strong\"}\n                        className={iconClassName}\n                    />\n                }\n                align=\"center\"\n                side=\"bottom\"\n                className={\"wy-p-sm shadow-lg\"}\n            >\n                <div className={\"p-sm text-sm\"} style={{ width: 200 }}>\n                    <InheritedFrom\n                        inheritedFrom={inheritedFrom ?? baseBreakpoint.name}\n                        overriddenAt={isOverridden ? breakpoint.name : null}\n                        onReset={onReset}\n                    />\n                </div>\n            </DropdownMenu>\n            <FormComponentLabel className={\"mb-0\"} text={text} />\n        </div>\n    );\n};\n\ninterface InheritedFromProps {\n    overriddenAt: string | null;\n    inheritedFrom?: string;\n    onReset: () => void;\n}\n\nexport const InheritedFrom = ({ overriddenAt, inheritedFrom, onReset }: InheritedFromProps) => {\n    if (overriddenAt) {\n        return (\n            <div>\n                This value is set on the current breakpoint.\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                <Button variant={\"primary\"} onClick={onReset} text={\"Reset value\"} size={\"sm\"} />\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                Resetting will inherit the value from the{\" \"}\n                <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n            </div>\n        );\n    }\n\n    return (\n        <Text size={\"sm\"}>\n            This value is inherited from the{\" \"}\n            <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n        </Text>\n    );\n};\n"],"names":["getBreakpointIcon","breakpoints","name","bp","breakpoint","InlineSvg","iconClassName","InheritanceLabel","inheritedFrom","isOverridden","text","onReset","isBaseBreakpoint","useBreakpoint","baseBreakpoint","icon","useMemo","FormComponentLabel","DropdownMenu","Icon","InheritedFrom","overriddenAt","Separator","Button","Tag","Text"],"mappings":";;;;AAqBA,MAAMA,oBAAoB,CAACC,aAA2BC;IAClD,MAAMC,KAAKF,YAAY,IAAI,CAACG,CAAAA,aAAcA,WAAW,IAAI,KAAKF;IAC9D,OAAOC,KAAK,WAALA,GAAK,oBAACE,WAASA;QAAC,KAAKF,GAAG,IAAI;SAAO;AAC9C;AAEA,MAAMG,gBAAgB;AAEf,MAAMC,mBAAmB,CAAC,EAC7BC,aAAa,EACbC,YAAY,EACZC,IAAI,EACJC,OAAO,EACa;IACpB,MAAM,EAAEP,UAAU,EAAEH,WAAW,EAAEW,gBAAgB,EAAE,GAAGC;IACtD,MAAMC,iBAAiBb,WAAW,CAAC,EAAE;IAErC,MAAMc,OAAOC,QAAQ;QACjB,MAAMb,KAAKK,iBAAiBM,eAAe,IAAI;QAC/C,OAAOd,kBAAkBC,aAAaE;IAC1C,GAAG;QAACK;QAAeJ,WAAW,IAAI;QAAEH,YAAY,MAAM;KAAC;IAEvD,IAAIW,kBACA,OAAO,WAAP,GAAO,oBAACK,oBAAkBA;QAAC,WAAW;QAAQ,MAAMP;;IAGxD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACQ,cAAYA;QACT,uBACI,oBAACC,MAAIA;YACD,MAAMJ;YACN,OAAM;YACN,MAAK;YACL,OAAON,eAAe,WAAW;YACjC,WAAWH;;QAGnB,OAAM;QACN,MAAK;QACL,WAAW;qBAEX,oBAAC;QAAI,WAAW;QAAgB,OAAO;YAAE,OAAO;QAAI;qBAChD,oBAACc,eAAaA;QACV,eAAeZ,iBAAiBM,eAAe,IAAI;QACnD,cAAcL,eAAeL,WAAW,IAAI,GAAG;QAC/C,SAASO;wBAIrB,oBAACM,oBAAkBA;QAAC,WAAW;QAAQ,MAAMP;;AAGzD;AAQO,MAAMU,gBAAgB,CAAC,EAAEC,YAAY,EAAEb,aAAa,EAAEG,OAAO,EAAsB;IACtF,IAAIU,cACA,OAAO,WAAP,GACI,oBAAC,aAAI,8DAED,oBAACC,WAASA;QAAC,SAAS;QAAU,QAAQ;sBACtC,oBAACC,QAAMA;QAAC,SAAS;QAAW,SAASZ;QAAS,MAAM;QAAe,MAAM;sBACzE,oBAACW,WAASA;QAAC,SAAS;QAAU,QAAQ;QAAQ,6CACJ,mBAC1C,oBAACE,KAAGA;QAAC,SAAS;QAAiB,SAAShB;QAAiB;IAKrE,OAAO,WAAP,GACI,oBAACiB,MAAIA;QAAC,MAAM;OAAM,oCACmB,mBACjC,oBAACD,KAAGA;QAAC,SAAS;QAAiB,SAAShB;QAAiB;AAGrE"}

package/BaseEditor/defaultConfig/Sidebar/SidebarEmptyState.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const SidebarEmptyState: ({ message }: {
+    message: string;
+}) => React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/SidebarEmptyState.js

@@ -0,0 +1,12 @@
+import react from "react";
+import { Text } from "@webiny/admin-ui";
+import { LayoutIllustration } from "../Toolbar/Navigator/LayoutIllustration.js";
+const SidebarEmptyState = ({ message })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col items-center gap-md px-md text-center mt-[200px]"
+    }, /*#__PURE__*/ react.createElement(LayoutIllustration, null), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, message));
+export { SidebarEmptyState };
+
+//# sourceMappingURL=SidebarEmptyState.js.map

package/BaseEditor/defaultConfig/Sidebar/SidebarEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/SidebarEmptyState.js","sources":["../../../../src/BaseEditor/defaultConfig/Sidebar/SidebarEmptyState.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { LayoutIllustration } from \"~/BaseEditor/defaultConfig/Toolbar/Navigator/LayoutIllustration.js\";\n\nexport const SidebarEmptyState = ({ message }: { message: string }) => {\n    return (\n        <div className={\"flex flex-col items-center gap-md px-md text-center mt-[200px]\"}>\n            <LayoutIllustration />\n            <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                {message}\n            </Text>\n        </div>\n    );\n};\n"],"names":["SidebarEmptyState","message","LayoutIllustration","Text"],"mappings":";;;AAIO,MAAMA,oBAAoB,CAAC,EAAEC,OAAO,EAAuB,GACvD,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,oBAAkBA,OAAAA,WAAAA,GACnB,oBAACC,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBF"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.js

@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import { ColorPicker } from "@webiny/admin-ui";
 import { useStyles } from "../../useStyles.js";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { SidebarRow } from "../../SidebarRow.js";
 const BackgroundColor = observer(({ elementId })=>{
     const { styles, onChange, onPreviewChange, inheritanceMap } = useStyles(elementId);
     const [value, setValue] = useState(styles.backgroundColor ?? "transparent");
@@ -30,17 +31,19 @@ const BackgroundColor = observer(({ elementId })=>{
         });
     };
     const inheritance = inheritanceMap?.backgroundColor ?? {};
-    return /*#__PURE__*/ react.createElement(ColorPicker, {
+    return /*#__PURE__*/ react.createElement(SidebarRow, {
         label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
             onReset: onReset,
             isOverridden: inheritance?.overridden ?? false,
             inheritedFrom: inheritance?.inheritedFrom,
             text: "Color"
-        }),
-        description: "Select your background color",
+        })
+    }, /*#__PURE__*/ react.createElement(ColorPicker, {
         value: value,
-        onChange: handleChange
-    });
+        onChange: handleChange,
+        size: "md",
+        variant: "secondary"
+    }));
 });
 export { BackgroundColor };
 

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ColorPicker } from \"@webiny/admin-ui\";\n\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\n\nexport const BackgroundColor = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, onPreviewChange, inheritanceMap } = useStyles(elementId);\n    const [value, setValue] = useState(styles.backgroundColor ?? \"transparent\");\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n        if (styles.backgroundColor !== value) {\n            setValue(styles.backgroundColor ?? \"transparent\");\n        }\n    }, [styles.backgroundColor]);\n\n    const handleChange = (value: string) => {\n        setValue(value);\n        onPreviewChange(({ styles }) => {\n            styles.set(\"backgroundColor\", value);\n        });\n\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        timeoutRef.current = setTimeout(() => {\n            onChange(({ styles }) => {\n                styles.set(\"backgroundColor\", value);\n            });\n        }, 300); // wait 300ms after last input event\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundColor\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundColor ?? {};\n\n    return (\n        <ColorPicker\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Color\"}\n                />\n            }\n            description=\"Select your background color\"\n            value={value}\n            onChange={handleChange}\n        />\n    );\n});\n"],"names":["BackgroundColor","observer","elementId","styles","onChange","onPreviewChange","inheritanceMap","useStyles","value","setValue","useState","timeoutRef","useRef","useEffect","handleChange","clearTimeout","setTimeout","onReset","inheritance","ColorPicker","InheritanceLabel"],"mappings":";;;;;AAOO,MAAMA,kBAAkBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IACzE,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,cAAc,EAAE,GAAGC,UAAUL;IACxE,MAAM,CAACM,OAAOC,SAAS,GAAGC,SAASP,OAAO,eAAe,IAAI;IAC7D,MAAMQ,aAAaC,OAA6C;IAEhEC,UAAU;QACN,IAAIV,OAAO,eAAe,KAAKK,OAC3BC,SAASN,OAAO,eAAe,IAAI;IAE3C,GAAG;QAACA,OAAO,eAAe;KAAC;IAE3B,MAAMW,eAAe,CAACN;QAClBC,SAASD;QACTH,gBAAgB,CAAC,EAAEF,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,mBAAmBK;QAClC;QAEA,IAAIG,WAAW,OAAO,EAClBI,aAAaJ,WAAW,OAAO;QAGnCA,WAAW,OAAO,GAAGK,WAAW;YAC5BZ,SAAS,CAAC,EAAED,MAAM,EAAE;gBAChBA,OAAO,GAAG,CAAC,mBAAmBK;YAClC;QACJ,GAAG;IACP;IAEA,MAAMS,UAAU;QACZb,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMe,cAAcZ,gBAAgB,mBAAmB,CAAC;IAExD,OAAO,WAAP,GACI,oBAACa,aAAWA;QACR,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;QAGd,aAAY;QACZ,OAAOV;QACP,UAAUM;;AAGtB"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundColor.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ColorPicker } from \"@webiny/admin-ui\";\n\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\n\nexport const BackgroundColor = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, onPreviewChange, inheritanceMap } = useStyles(elementId);\n    const [value, setValue] = useState(styles.backgroundColor ?? \"transparent\");\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n        if (styles.backgroundColor !== value) {\n            setValue(styles.backgroundColor ?? \"transparent\");\n        }\n    }, [styles.backgroundColor]);\n\n    const handleChange = (value: string) => {\n        setValue(value);\n        onPreviewChange(({ styles }) => {\n            styles.set(\"backgroundColor\", value);\n        });\n\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        timeoutRef.current = setTimeout(() => {\n            onChange(({ styles }) => {\n                styles.set(\"backgroundColor\", value);\n            });\n        }, 300); // wait 300ms after last input event\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundColor\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundColor ?? {};\n\n    return (\n        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Color\"}\n                />\n            }\n        >\n            <ColorPicker value={value} onChange={handleChange} size={\"md\"} variant={\"secondary\"} />\n        </SidebarRow>\n    );\n});\n"],"names":["BackgroundColor","observer","elementId","styles","onChange","onPreviewChange","inheritanceMap","useStyles","value","setValue","useState","timeoutRef","useRef","useEffect","handleChange","clearTimeout","setTimeout","onReset","inheritance","SidebarRow","InheritanceLabel","ColorPicker"],"mappings":";;;;;;AAQO,MAAMA,kBAAkBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IACzE,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,cAAc,EAAE,GAAGC,UAAUL;IACxE,MAAM,CAACM,OAAOC,SAAS,GAAGC,SAASP,OAAO,eAAe,IAAI;IAC7D,MAAMQ,aAAaC,OAA6C;IAEhEC,UAAU;QACN,IAAIV,OAAO,eAAe,KAAKK,OAC3BC,SAASN,OAAO,eAAe,IAAI;IAE3C,GAAG;QAACA,OAAO,eAAe;KAAC;IAE3B,MAAMW,eAAe,CAACN;QAClBC,SAASD;QACTH,gBAAgB,CAAC,EAAEF,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,mBAAmBK;QAClC;QAEA,IAAIG,WAAW,OAAO,EAClBI,aAAaJ,WAAW,OAAO;QAGnCA,WAAW,OAAO,GAAGK,WAAW;YAC5BZ,SAAS,CAAC,EAAED,MAAM,EAAE;gBAChBA,OAAO,GAAG,CAAC,mBAAmBK;YAClC;QACJ,GAAG;IACP;IAEA,MAAMS,UAAU;QACZb,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMe,cAAcZ,gBAAgB,mBAAmB,CAAC;IAExD,OAAO,WAAP,GACI,oBAACa,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACG,aAAWA;QAAC,OAAOb;QAAO,UAAUM;QAAc,MAAM;QAAM,SAAS;;AAGpF"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js

@@ -6,6 +6,7 @@ import { useStyles } from "../../useStyles.js";
 import { BackgroundImageParser } from "./BackgroundImageParser.js";
 import { useBreakpoint } from "../../../../../hooks/useBreakpoint.js";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { SidebarRow } from "../../SidebarRow.js";
 const DEFAULT_POSITION = "center";
 const DEFAULT_SCALING = {
     backgroundSize: "cover",
@@ -64,24 +65,25 @@ const BackgroundImage = observer(({ elementId })=>{
     };
     const inheritance = inheritanceMap?.backgroundImage ?? {};
     const fileInfo = metadata.get("backgroundImage");
-    return /*#__PURE__*/ react.createElement(FileManager, {
+    return /*#__PURE__*/ react.createElement(SidebarRow, {
+        label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
+            onReset: onReset,
+            isOverridden: inheritance?.overridden ?? false,
+            inheritedFrom: inheritance?.inheritedFrom,
+            text: "Image"
+        })
+    }, /*#__PURE__*/ react.createElement(FileManager, {
         images: true,
         onChange: onFileChange,
         render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(FilePicker, {
-                label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
-                    onReset: onReset,
-                    isOverridden: inheritance?.overridden ?? false,
-                    inheritedFrom: inheritance?.inheritedFrom,
-                    text: "Image"
-                }),
-                description: "Select a background image",
+                variant: "secondary",
                 type: "compact",
                 value: url ? fileInfo : void 0,
                 onSelectItem: ()=>showFileManager(),
                 onRemoveItem: onRemove,
                 onEditItem: ()=>showFileManager()
             })
-    });
+    }));
 });
 export { BackgroundImage, parseValue };
 

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.tsx"],"sourcesContent":["import React, { useEffect, useState, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel.js\";\n\ntype FileInfo = {\n    id: string;\n    name: string;\n    size: number;\n    type: string;\n    url: string;\n};\n\nconst DEFAULT_POSITION = \"center\";\nconst DEFAULT_SCALING = {\n    backgroundSize: \"cover\",\n    backgroundRepeat: \"no-repeat\"\n};\n\nexport const parseValue = (value: string) => {\n    if (!value) {\n        return undefined;\n    }\n\n    return;\n};\n\nexport const BackgroundImage = observer(({ elementId }: { elementId: string }) => {\n    const { isBaseBreakpoint } = useBreakpoint();\n    const { styles, metadata, onChange, inheritanceMap } = useStyles(elementId);\n    const [localValue, setLocalValue] = useState<string | null>(styles.backgroundImage);\n    const url = useMemo(() => {\n        const parser = new BackgroundImageParser(styles.backgroundImage);\n        const rules = parser.getRules();\n        const urlRule = rules.find(r => r.type === \"url\");\n        if (urlRule && urlRule.type === \"url\") {\n            return urlRule.parsed.url;\n        }\n        return null;\n    }, [styles.backgroundImage]);\n\n    useEffect(() => {\n        if (styles.backgroundImage !== localValue) {\n            setLocalValue(styles.backgroundImage);\n        }\n    }, [styles.backgroundImage]);\n\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ styles, metadata }) => {\n            styles.set(\"backgroundPosition\", DEFAULT_POSITION);\n            styles.set(\"backgroundSize\", DEFAULT_SCALING.backgroundSize);\n            styles.set(\"backgroundRepeat\", DEFAULT_SCALING.backgroundRepeat);\n            styles.set(\"backgroundImage\", `url(\"${file.src}\")`);\n\n            metadata.set(\"backgroundImage\", {\n                id: file.id,\n                name: file.name,\n                size: file.size,\n                type: file.type,\n                url: file.src || \"\"\n            });\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ styles, metadata }) => {\n            // On base breakpoint, we unset the image and all styles related to it.\n            if (isBaseBreakpoint) {\n                styles.unset(\"backgroundImage\");\n                styles.unset(\"backgroundPosition\");\n                styles.unset(\"backgroundSize\");\n                styles.unset(\"backgroundRepeat\");\n            } else {\n                styles.set(\"backgroundImage\", \"none\");\n            }\n\n            metadata.unset(\"backgroundImage\");\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundImage\");\n\n            metadata.unset(\"backgroundImage\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundImage ?? {};\n\n    const fileInfo = metadata.get<FileInfo>(\"backgroundImage\");\n\n    return (\n        <FileManager\n            images={true}\n            onChange={onFileChange}\n            render={({ showFileManager }) => (\n                <FilePicker\n                    label={\n                        <InheritanceLabel\n                            onReset={onReset}\n                            isOverridden={inheritance?.overridden ?? false}\n                            inheritedFrom={inheritance?.inheritedFrom}\n                            text={\"Image\"}\n                        />\n                    }\n                    description=\"Select a background image\"\n                    type=\"compact\"\n                    value={url ? fileInfo : undefined}\n                    onSelectItem={() => showFileManager()}\n                    onRemoveItem={onRemove}\n                    onEditItem={() => showFileManager()}\n                />\n            )}\n        />\n    );\n});\n"],"names":["DEFAULT_POSITION","DEFAULT_SCALING","parseValue","value","BackgroundImage","observer","elementId","isBaseBreakpoint","useBreakpoint","styles","metadata","onChange","inheritanceMap","useStyles","localValue","setLocalValue","useState","url","useMemo","parser","BackgroundImageParser","rules","urlRule","r","useEffect","onFileChange","file","onRemove","onReset","inheritance","fileInfo","FileManager","showFileManager","FilePicker","InheritanceLabel","undefined"],"mappings":";;;;;;;;AAiBA,MAAMA,mBAAmB;AACzB,MAAMC,kBAAkB;IACpB,gBAAgB;IAChB,kBAAkB;AACtB;AAEO,MAAMC,aAAa,CAACC,SAM3B;AAEO,MAAMC,kBAAkBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IACzE,MAAM,EAAEC,gBAAgB,EAAE,GAAGC;IAC7B,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUP;IACjE,MAAM,CAACQ,YAAYC,cAAc,GAAGC,SAAwBP,OAAO,eAAe;IAClF,MAAMQ,MAAMC,QAAQ;QAChB,MAAMC,SAAS,IAAIC,sBAAsBX,OAAO,eAAe;QAC/D,MAAMY,QAAQF,OAAO,QAAQ;QAC7B,MAAMG,UAAUD,MAAM,IAAI,CAACE,CAAAA,IAAKA,AAAW,UAAXA,EAAE,IAAI;QACtC,IAAID,WAAWA,AAAiB,UAAjBA,QAAQ,IAAI,EACvB,OAAOA,QAAQ,MAAM,CAAC,GAAG;QAE7B,OAAO;IACX,GAAG;QAACb,OAAO,eAAe;KAAC;IAE3Be,UAAU;QACN,IAAIf,OAAO,eAAe,KAAKK,YAC3BC,cAAcN,OAAO,eAAe;IAE5C,GAAG;QAACA,OAAO,eAAe;KAAC;IAE3B,MAAMgB,eAAe,CAACC;QAClBf,SAAS,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAE;YAC1BD,OAAO,GAAG,CAAC,sBAAsBT;YACjCS,OAAO,GAAG,CAAC,kBAAkBR,gBAAgB,cAAc;YAC3DQ,OAAO,GAAG,CAAC,oBAAoBR,gBAAgB,gBAAgB;YAC/DQ,OAAO,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAEiB,KAAK,GAAG,CAAC,EAAE,CAAC;YAElDhB,SAAS,GAAG,CAAC,mBAAmB;gBAC5B,IAAIgB,KAAK,EAAE;gBACX,MAAMA,KAAK,IAAI;gBACf,MAAMA,KAAK,IAAI;gBACf,MAAMA,KAAK,IAAI;gBACf,KAAKA,KAAK,GAAG,IAAI;YACrB;QACJ;IACJ;IAEA,MAAMC,WAAW;QACbhB,SAAS,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAE;YAE1B,IAAIH,kBAAkB;gBAClBE,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;YACjB,OACIA,OAAO,GAAG,CAAC,mBAAmB;YAGlCC,SAAS,KAAK,CAAC;QACnB;IACJ;IAEA,MAAMkB,UAAU;QACZjB,SAAS,CAAC,EAAEF,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YAEbC,SAAS,KAAK,CAAC;QACnB;IACJ;IAEA,MAAMmB,cAAcjB,gBAAgB,mBAAmB,CAAC;IAExD,MAAMkB,WAAWpB,SAAS,GAAG,CAAW;IAExC,OAAO,WAAP,GACI,oBAACqB,aAAWA;QACR,QAAQ;QACR,UAAUN;QACV,QAAQ,CAAC,EAAEO,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,qBACI,oBAACC,kBAAgBA;oBACb,SAASN;oBACT,cAAcC,aAAa,cAAc;oBACzC,eAAeA,aAAa;oBAC5B,MAAM;;gBAGd,aAAY;gBACZ,MAAK;gBACL,OAAOZ,MAAMa,WAAWK;gBACxB,cAAc,IAAMH;gBACpB,cAAcL;gBACd,YAAY,IAAMK;;;AAKtC"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundImage.tsx"],"sourcesContent":["import React, { useEffect, useState, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\n\ntype FileInfo = {\n    id: string;\n    name: string;\n    size: number;\n    type: string;\n    url: string;\n};\n\nconst DEFAULT_POSITION = \"center\";\nconst DEFAULT_SCALING = {\n    backgroundSize: \"cover\",\n    backgroundRepeat: \"no-repeat\"\n};\n\nexport const parseValue = (value: string) => {\n    if (!value) {\n        return undefined;\n    }\n\n    return;\n};\n\nexport const BackgroundImage = observer(({ elementId }: { elementId: string }) => {\n    const { isBaseBreakpoint } = useBreakpoint();\n    const { styles, metadata, onChange, inheritanceMap } = useStyles(elementId);\n    const [localValue, setLocalValue] = useState<string | null>(styles.backgroundImage);\n    const url = useMemo(() => {\n        const parser = new BackgroundImageParser(styles.backgroundImage);\n        const rules = parser.getRules();\n        const urlRule = rules.find(r => r.type === \"url\");\n        if (urlRule && urlRule.type === \"url\") {\n            return urlRule.parsed.url;\n        }\n        return null;\n    }, [styles.backgroundImage]);\n\n    useEffect(() => {\n        if (styles.backgroundImage !== localValue) {\n            setLocalValue(styles.backgroundImage);\n        }\n    }, [styles.backgroundImage]);\n\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ styles, metadata }) => {\n            styles.set(\"backgroundPosition\", DEFAULT_POSITION);\n            styles.set(\"backgroundSize\", DEFAULT_SCALING.backgroundSize);\n            styles.set(\"backgroundRepeat\", DEFAULT_SCALING.backgroundRepeat);\n            styles.set(\"backgroundImage\", `url(\"${file.src}\")`);\n\n            metadata.set(\"backgroundImage\", {\n                id: file.id,\n                name: file.name,\n                size: file.size,\n                type: file.type,\n                url: file.src || \"\"\n            });\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ styles, metadata }) => {\n            // On base breakpoint, we unset the image and all styles related to it.\n            if (isBaseBreakpoint) {\n                styles.unset(\"backgroundImage\");\n                styles.unset(\"backgroundPosition\");\n                styles.unset(\"backgroundSize\");\n                styles.unset(\"backgroundRepeat\");\n            } else {\n                styles.set(\"backgroundImage\", \"none\");\n            }\n\n            metadata.unset(\"backgroundImage\");\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundImage\");\n\n            metadata.unset(\"backgroundImage\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundImage ?? {};\n\n    const fileInfo = metadata.get<FileInfo>(\"backgroundImage\");\n\n    return (\n        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Image\"}\n                />\n            }\n        >\n            <FileManager\n                images={true}\n                onChange={onFileChange}\n                render={({ showFileManager }) => (\n                    <FilePicker\n                        variant={\"secondary\"}\n                        type=\"compact\"\n                        value={url ? fileInfo : undefined}\n                        onSelectItem={() => showFileManager()}\n                        onRemoveItem={onRemove}\n                        onEditItem={() => showFileManager()}\n                    />\n                )}\n            />\n        </SidebarRow>\n    );\n});\n"],"names":["DEFAULT_POSITION","DEFAULT_SCALING","parseValue","value","BackgroundImage","observer","elementId","isBaseBreakpoint","useBreakpoint","styles","metadata","onChange","inheritanceMap","useStyles","localValue","setLocalValue","useState","url","useMemo","parser","BackgroundImageParser","rules","urlRule","r","useEffect","onFileChange","file","onRemove","onReset","inheritance","fileInfo","SidebarRow","InheritanceLabel","FileManager","showFileManager","FilePicker","undefined"],"mappings":";;;;;;;;;AAkBA,MAAMA,mBAAmB;AACzB,MAAMC,kBAAkB;IACpB,gBAAgB;IAChB,kBAAkB;AACtB;AAEO,MAAMC,aAAa,CAACC,SAM3B;AAEO,MAAMC,kBAAkBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IACzE,MAAM,EAAEC,gBAAgB,EAAE,GAAGC;IAC7B,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUP;IACjE,MAAM,CAACQ,YAAYC,cAAc,GAAGC,SAAwBP,OAAO,eAAe;IAClF,MAAMQ,MAAMC,QAAQ;QAChB,MAAMC,SAAS,IAAIC,sBAAsBX,OAAO,eAAe;QAC/D,MAAMY,QAAQF,OAAO,QAAQ;QAC7B,MAAMG,UAAUD,MAAM,IAAI,CAACE,CAAAA,IAAKA,AAAW,UAAXA,EAAE,IAAI;QACtC,IAAID,WAAWA,AAAiB,UAAjBA,QAAQ,IAAI,EACvB,OAAOA,QAAQ,MAAM,CAAC,GAAG;QAE7B,OAAO;IACX,GAAG;QAACb,OAAO,eAAe;KAAC;IAE3Be,UAAU;QACN,IAAIf,OAAO,eAAe,KAAKK,YAC3BC,cAAcN,OAAO,eAAe;IAE5C,GAAG;QAACA,OAAO,eAAe;KAAC;IAE3B,MAAMgB,eAAe,CAACC;QAClBf,SAAS,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAE;YAC1BD,OAAO,GAAG,CAAC,sBAAsBT;YACjCS,OAAO,GAAG,CAAC,kBAAkBR,gBAAgB,cAAc;YAC3DQ,OAAO,GAAG,CAAC,oBAAoBR,gBAAgB,gBAAgB;YAC/DQ,OAAO,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAEiB,KAAK,GAAG,CAAC,EAAE,CAAC;YAElDhB,SAAS,GAAG,CAAC,mBAAmB;gBAC5B,IAAIgB,KAAK,EAAE;gBACX,MAAMA,KAAK,IAAI;gBACf,MAAMA,KAAK,IAAI;gBACf,MAAMA,KAAK,IAAI;gBACf,KAAKA,KAAK,GAAG,IAAI;YACrB;QACJ;IACJ;IAEA,MAAMC,WAAW;QACbhB,SAAS,CAAC,EAAEF,MAAM,EAAEC,QAAQ,EAAE;YAE1B,IAAIH,kBAAkB;gBAClBE,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;gBACbA,OAAO,KAAK,CAAC;YACjB,OACIA,OAAO,GAAG,CAAC,mBAAmB;YAGlCC,SAAS,KAAK,CAAC;QACnB;IACJ;IAEA,MAAMkB,UAAU;QACZjB,SAAS,CAAC,EAAEF,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YAEbC,SAAS,KAAK,CAAC;QACnB;IACJ;IAEA,MAAMmB,cAAcjB,gBAAgB,mBAAmB,CAAC;IAExD,MAAMkB,WAAWpB,SAAS,GAAG,CAAW;IAExC,OAAO,WAAP,GACI,oBAACqB,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASJ;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACI,aAAWA;QACR,QAAQ;QACR,UAAUR;QACV,QAAQ,CAAC,EAAES,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,SAAS;gBACT,MAAK;gBACL,OAAOlB,MAAMa,WAAWM;gBACxB,cAAc,IAAMF;gBACpB,cAAcP;gBACd,YAAY,IAAMO;;;AAM1C"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundPosition.js

@@ -5,6 +5,7 @@ import { useStyles } from "../../useStyles.js";
 import { BackgroundImageParser } from "./BackgroundImageParser.js";
 import { toTitleCaseLabel } from "./toTitleCaseLabel.js";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { SidebarRow } from "../../SidebarRow.js";
 const POSITIONS = [
     "top left",
     "top",
@@ -45,20 +46,22 @@ const BackgroundPosition = observer(({ elementId })=>{
         });
     };
     const inheritance = inheritanceMap?.backgroundPosition ?? {};
-    return /*#__PURE__*/ react.createElement(Select, {
+    return /*#__PURE__*/ react.createElement(SidebarRow, {
         label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
             onReset: onReset,
             isOverridden: inheritance?.overridden ?? false,
             inheritedFrom: inheritance?.inheritedFrom,
             text: "Position"
-        }),
-        description: "Select background position",
+        })
+    }, /*#__PURE__*/ react.createElement(Select, {
+        size: "md",
+        variant: "secondary",
         disabled: !hasBackgroundImage,
         value: localValue ?? "center",
         displayResetAction: false,
         onChange: onPositionChange,
         options: options
-    });
+    }));
 });
 export { BackgroundPosition };
 

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundPosition.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundPosition.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Select } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { toTitleCaseLabel } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/toTitleCaseLabel.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\n\nconst POSITIONS = [\n    \"top left\",\n    \"top\",\n    \"top right\",\n    \"center left\",\n    \"center\",\n    \"center right\",\n    \"bottom left\",\n    \"bottom center\",\n    \"bottom right\"\n];\n\nconst options = POSITIONS.map(key => ({ label: toTitleCaseLabel(key), value: key }));\n\nexport const BackgroundPosition = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n    const [localValue, setLocalValue] = useState<string>(styles.backgroundPosition);\n    const hasBackgroundImage = useMemo(() => {\n        const parser = new BackgroundImageParser(styles.backgroundImage);\n        return parser.getRules().find(r => r.type === \"url\") !== undefined;\n    }, [styles.backgroundImage]);\n\n    useEffect(() => {\n        if (styles.backgroundPosition !== localValue) {\n            setLocalValue(styles.backgroundPosition);\n        }\n    }, [styles.backgroundPosition]);\n\n    const onPositionChange = (value: string) => {\n        onChange(({ styles }) => {\n            styles.set(\"backgroundPosition\", value);\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundPosition\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundPosition ?? {};\n\n    return (\n        <Select\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Position\"}\n                />\n            }\n            description={\"Select background position\"}\n            disabled={!hasBackgroundImage}\n            value={localValue ?? \"center\"}\n            displayResetAction={false}\n            onChange={onPositionChange}\n            options={options}\n        />\n    );\n});\n"],"names":["POSITIONS","options","key","toTitleCaseLabel","BackgroundPosition","observer","elementId","styles","onChange","inheritanceMap","useStyles","localValue","setLocalValue","useState","hasBackgroundImage","useMemo","parser","BackgroundImageParser","undefined","r","useEffect","onPositionChange","value","onReset","inheritance","Select","InheritanceLabel"],"mappings":";;;;;;;AAQA,MAAMA,YAAY;IACd;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACH;AAED,MAAMC,UAAUD,UAAU,GAAG,CAACE,CAAAA,MAAQ;QAAE,OAAOC,iBAAiBD;QAAM,OAAOA;IAAI;AAE1E,MAAME,qBAAqBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IAC5E,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUJ;IACvD,MAAM,CAACK,YAAYC,cAAc,GAAGC,SAAiBN,OAAO,kBAAkB;IAC9E,MAAMO,qBAAqBC,QAAQ;QAC/B,MAAMC,SAAS,IAAIC,sBAAsBV,OAAO,eAAe;QAC/D,OAAOS,AAAkDE,WAAlDF,OAAO,QAAQ,GAAG,IAAI,CAACG,CAAAA,IAAKA,AAAW,UAAXA,EAAE,IAAI;IAC7C,GAAG;QAACZ,OAAO,eAAe;KAAC;IAE3Ba,UAAU;QACN,IAAIb,OAAO,kBAAkB,KAAKI,YAC9BC,cAAcL,OAAO,kBAAkB;IAE/C,GAAG;QAACA,OAAO,kBAAkB;KAAC;IAE9B,MAAMc,mBAAmB,CAACC;QACtBd,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,sBAAsBe;QACrC;IACJ;IAEA,MAAMC,UAAU;QACZf,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMiB,cAAcf,gBAAgB,sBAAsB,CAAC;IAE3D,OAAO,WAAP,GACI,oBAACgB,QAAMA;QACH,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;QAGd,aAAa;QACb,UAAU,CAACV;QACX,OAAOH,cAAc;QACrB,oBAAoB;QACpB,UAAUU;QACV,SAASpB;;AAGrB"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundPosition.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundPosition.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Select } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { toTitleCaseLabel } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/toTitleCaseLabel.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\n\nconst POSITIONS = [\n    \"top left\",\n    \"top\",\n    \"top right\",\n    \"center left\",\n    \"center\",\n    \"center right\",\n    \"bottom left\",\n    \"bottom center\",\n    \"bottom right\"\n];\n\nconst options = POSITIONS.map(key => ({ label: toTitleCaseLabel(key), value: key }));\n\nexport const BackgroundPosition = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n    const [localValue, setLocalValue] = useState<string>(styles.backgroundPosition);\n    const hasBackgroundImage = useMemo(() => {\n        const parser = new BackgroundImageParser(styles.backgroundImage);\n        return parser.getRules().find(r => r.type === \"url\") !== undefined;\n    }, [styles.backgroundImage]);\n\n    useEffect(() => {\n        if (styles.backgroundPosition !== localValue) {\n            setLocalValue(styles.backgroundPosition);\n        }\n    }, [styles.backgroundPosition]);\n\n    const onPositionChange = (value: string) => {\n        onChange(({ styles }) => {\n            styles.set(\"backgroundPosition\", value);\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundPosition\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundPosition ?? {};\n\n    return (\n        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Position\"}\n                />\n            }\n        >\n            <Select\n                size={\"md\"}\n                variant={\"secondary\"}\n                disabled={!hasBackgroundImage}\n                value={localValue ?? \"center\"}\n                displayResetAction={false}\n                onChange={onPositionChange}\n                options={options}\n            />\n        </SidebarRow>\n    );\n});\n"],"names":["POSITIONS","options","key","toTitleCaseLabel","BackgroundPosition","observer","elementId","styles","onChange","inheritanceMap","useStyles","localValue","setLocalValue","useState","hasBackgroundImage","useMemo","parser","BackgroundImageParser","undefined","r","useEffect","onPositionChange","value","onReset","inheritance","SidebarRow","InheritanceLabel","Select"],"mappings":";;;;;;;;AASA,MAAMA,YAAY;IACd;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACH;AAED,MAAMC,UAAUD,UAAU,GAAG,CAACE,CAAAA,MAAQ;QAAE,OAAOC,iBAAiBD;QAAM,OAAOA;IAAI;AAE1E,MAAME,qBAAqBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IAC5E,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUJ;IACvD,MAAM,CAACK,YAAYC,cAAc,GAAGC,SAAiBN,OAAO,kBAAkB;IAC9E,MAAMO,qBAAqBC,QAAQ;QAC/B,MAAMC,SAAS,IAAIC,sBAAsBV,OAAO,eAAe;QAC/D,OAAOS,AAAkDE,WAAlDF,OAAO,QAAQ,GAAG,IAAI,CAACG,CAAAA,IAAKA,AAAW,UAAXA,EAAE,IAAI;IAC7C,GAAG;QAACZ,OAAO,eAAe;KAAC;IAE3Ba,UAAU;QACN,IAAIb,OAAO,kBAAkB,KAAKI,YAC9BC,cAAcL,OAAO,kBAAkB;IAE/C,GAAG;QAACA,OAAO,kBAAkB;KAAC;IAE9B,MAAMc,mBAAmB,CAACC;QACtBd,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,sBAAsBe;QACrC;IACJ;IAEA,MAAMC,UAAU;QACZf,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMiB,cAAcf,gBAAgB,sBAAsB,CAAC;IAE3D,OAAO,WAAP,GACI,oBAACgB,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACG,QAAMA;QACH,MAAM;QACN,SAAS;QACT,UAAU,CAACb;QACX,OAAOH,cAAc;QACrB,oBAAoB;QACpB,UAAUU;QACV,SAASpB;;AAIzB"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundScaling.js

@@ -5,6 +5,7 @@ import { useStyles } from "../../useStyles.js";
 import { BackgroundImageParser } from "./BackgroundImageParser.js";
 import { toTitleCaseLabel } from "./toTitleCaseLabel.js";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { SidebarRow } from "../../SidebarRow.js";
 const SCALING_MAP = [
     {
         name: "cover",
@@ -66,20 +67,22 @@ const BackgroundScaling = observer(({ elementId })=>{
         });
     };
     const inheritance = inheritanceMap?.backgroundSize ?? {};
-    return /*#__PURE__*/ react.createElement(Select, {
+    return /*#__PURE__*/ react.createElement(SidebarRow, {
         label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
             onReset: onReset,
             isOverridden: inheritance?.overridden ?? false,
             inheritedFrom: inheritance?.inheritedFrom,
             text: "Scaling"
-        }),
-        description: "Select image scaling",
+        })
+    }, /*#__PURE__*/ react.createElement(Select, {
+        size: "md",
+        variant: "secondary",
         disabled: !hasBackgroundImage,
         value: scaling ? scaling.name : "",
         displayResetAction: false,
         onChange: onValueChange,
         options: options
-    });
+    }));
 });
 export { BackgroundScaling };
 

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundScaling.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundScaling.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundScaling.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Select } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { toTitleCaseLabel } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/toTitleCaseLabel.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\n\ninterface Scaling {\n    name: string;\n    backgroundSize: string;\n    backgroundRepeat: string;\n}\n\nconst SCALING_MAP: Scaling[] = [\n    {\n        name: \"cover\",\n        backgroundSize: \"cover\",\n        backgroundRepeat: \"no-repeat\"\n    },\n    {\n        name: \"contain\",\n        backgroundSize: \"contain\",\n        backgroundRepeat: \"no-repeat\"\n    },\n    {\n        name: \"originalSize\",\n        backgroundSize: \"auto\",\n        backgroundRepeat: \"no-repeat\"\n    },\n    {\n        name: \"tile\",\n        backgroundSize: \"auto\",\n        backgroundRepeat: \"repeat\"\n    },\n    {\n        name: \"tileHorizontally\",\n        backgroundSize: \"auto\",\n        backgroundRepeat: \"repeat-x\"\n    },\n    {\n        name: \"tileVertically\",\n        backgroundSize: \"auto\",\n        backgroundRepeat: \"repeat-y\"\n    }\n];\n\nconst options = SCALING_MAP.map(item => ({ label: toTitleCaseLabel(item.name), value: item.name }));\n\nexport const BackgroundScaling = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n\n    const scaling = SCALING_MAP.find(item => {\n        return (\n            item.backgroundSize === styles.backgroundSize &&\n            item.backgroundRepeat === styles.backgroundRepeat\n        );\n    });\n\n    const hasBackgroundImage = useMemo(() => {\n        const parser = new BackgroundImageParser(styles.backgroundImage);\n        return parser.getRules().find(r => r.type === \"url\") !== undefined;\n    }, [styles.backgroundImage]);\n\n    const onValueChange = (value: string) => {\n        onChange(({ styles }) => {\n            const scaling = SCALING_MAP.find(item => item.name === value);\n            if (scaling) {\n                styles.set(\"backgroundRepeat\", scaling.backgroundRepeat);\n                styles.set(\"backgroundSize\", scaling.backgroundSize);\n            }\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundRepeat\");\n            styles.unset(\"backgroundSize\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundSize ?? {};\n\n    return (\n        <Select\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Scaling\"}\n                />\n            }\n            description={\"Select image scaling\"}\n            disabled={!hasBackgroundImage}\n            value={scaling ? scaling.name : \"\"}\n            displayResetAction={false}\n            onChange={onValueChange}\n            options={options}\n        />\n    );\n});\n"],"names":["SCALING_MAP","options","item","toTitleCaseLabel","BackgroundScaling","observer","elementId","styles","onChange","inheritanceMap","useStyles","scaling","hasBackgroundImage","useMemo","parser","BackgroundImageParser","undefined","r","onValueChange","value","onReset","inheritance","Select","InheritanceLabel"],"mappings":";;;;;;;AAcA,MAAMA,cAAyB;IAC3B;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;CACH;AAED,MAAMC,UAAUD,YAAY,GAAG,CAACE,CAAAA,OAAS;QAAE,OAAOC,iBAAiBD,KAAK,IAAI;QAAG,OAAOA,KAAK,IAAI;IAAC;AAEzF,MAAME,oBAAoBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IAC3E,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUJ;IAEvD,MAAMK,UAAUX,YAAY,IAAI,CAACE,CAAAA,OAEzBA,KAAK,cAAc,KAAKK,OAAO,cAAc,IAC7CL,KAAK,gBAAgB,KAAKK,OAAO,gBAAgB;IAIzD,MAAMK,qBAAqBC,QAAQ;QAC/B,MAAMC,SAAS,IAAIC,sBAAsBR,OAAO,eAAe;QAC/D,OAAOO,AAAkDE,WAAlDF,OAAO,QAAQ,GAAG,IAAI,CAACG,CAAAA,IAAKA,AAAW,UAAXA,EAAE,IAAI;IAC7C,GAAG;QAACV,OAAO,eAAe;KAAC;IAE3B,MAAMW,gBAAgB,CAACC;QACnBX,SAAS,CAAC,EAAED,MAAM,EAAE;YAChB,MAAMI,UAAUX,YAAY,IAAI,CAACE,CAAAA,OAAQA,KAAK,IAAI,KAAKiB;YACvD,IAAIR,SAAS;gBACTJ,OAAO,GAAG,CAAC,oBAAoBI,QAAQ,gBAAgB;gBACvDJ,OAAO,GAAG,CAAC,kBAAkBI,QAAQ,cAAc;YACvD;QACJ;IACJ;IAEA,MAAMS,UAAU;QACZZ,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMc,cAAcZ,gBAAgB,kBAAkB,CAAC;IAEvD,OAAO,WAAP,GACI,oBAACa,QAAMA;QACH,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;QAGd,aAAa;QACb,UAAU,CAACT;QACX,OAAOD,UAAUA,QAAQ,IAAI,GAAG;QAChC,oBAAoB;QACpB,UAAUO;QACV,SAASjB;;AAGrB"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundScaling.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/BackgroundScaling.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Select } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { BackgroundImageParser } from \"./BackgroundImageParser.js\";\nimport { toTitleCaseLabel } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Background/toTitleCaseLabel.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\nimport { SidebarRow } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js\";\n\ninterface Scaling {\n    name: string;\n    backgroundSize: string;\n    backgroundRepeat: string;\n}\n\nconst SCALING_MAP: Scaling[] = [\n    {\n        name: \"cover\",\n        backgroundSize: \"cover\",\n        backgroundRepeat: \"no-repeat\"\n    },\n    {\n        name: \"contain\",\n        backgroundSize: \"contain\",\n        backgroundRepeat: \"no-repeat\"\n    },\n    {\n        name: \"originalSize\",\n        backgroundSize: \"auto\",\n        backgroundRepeat: \"no-repeat\"\n    },\n    {\n        name: \"tile\",\n        backgroundSize: \"auto\",\n        backgroundRepeat: \"repeat\"\n    },\n    {\n        name: \"tileHorizontally\",\n        backgroundSize: \"auto\",\n        backgroundRepeat: \"repeat-x\"\n    },\n    {\n        name: \"tileVertically\",\n        backgroundSize: \"auto\",\n        backgroundRepeat: \"repeat-y\"\n    }\n];\n\nconst options = SCALING_MAP.map(item => ({ label: toTitleCaseLabel(item.name), value: item.name }));\n\nexport const BackgroundScaling = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n\n    const scaling = SCALING_MAP.find(item => {\n        return (\n            item.backgroundSize === styles.backgroundSize &&\n            item.backgroundRepeat === styles.backgroundRepeat\n        );\n    });\n\n    const hasBackgroundImage = useMemo(() => {\n        const parser = new BackgroundImageParser(styles.backgroundImage);\n        return parser.getRules().find(r => r.type === \"url\") !== undefined;\n    }, [styles.backgroundImage]);\n\n    const onValueChange = (value: string) => {\n        onChange(({ styles }) => {\n            const scaling = SCALING_MAP.find(item => item.name === value);\n            if (scaling) {\n                styles.set(\"backgroundRepeat\", scaling.backgroundRepeat);\n                styles.set(\"backgroundSize\", scaling.backgroundSize);\n            }\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"backgroundRepeat\");\n            styles.unset(\"backgroundSize\");\n        });\n    };\n\n    const inheritance = inheritanceMap?.backgroundSize ?? {};\n\n    return (\n        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Scaling\"}\n                />\n            }\n        >\n            <Select\n                size={\"md\"}\n                variant={\"secondary\"}\n                disabled={!hasBackgroundImage}\n                value={scaling ? scaling.name : \"\"}\n                displayResetAction={false}\n                onChange={onValueChange}\n                options={options}\n            />\n        </SidebarRow>\n    );\n});\n"],"names":["SCALING_MAP","options","item","toTitleCaseLabel","BackgroundScaling","observer","elementId","styles","onChange","inheritanceMap","useStyles","scaling","hasBackgroundImage","useMemo","parser","BackgroundImageParser","undefined","r","onValueChange","value","onReset","inheritance","SidebarRow","InheritanceLabel","Select"],"mappings":";;;;;;;;AAeA,MAAMA,cAAyB;IAC3B;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;IACA;QACI,MAAM;QACN,gBAAgB;QAChB,kBAAkB;IACtB;CACH;AAED,MAAMC,UAAUD,YAAY,GAAG,CAACE,CAAAA,OAAS;QAAE,OAAOC,iBAAiBD,KAAK,IAAI;QAAG,OAAOA,KAAK,IAAI;IAAC;AAEzF,MAAME,oBAAoBC,SAAS,CAAC,EAAEC,SAAS,EAAyB;IAC3E,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUJ;IAEvD,MAAMK,UAAUX,YAAY,IAAI,CAACE,CAAAA,OAEzBA,KAAK,cAAc,KAAKK,OAAO,cAAc,IAC7CL,KAAK,gBAAgB,KAAKK,OAAO,gBAAgB;IAIzD,MAAMK,qBAAqBC,QAAQ;QAC/B,MAAMC,SAAS,IAAIC,sBAAsBR,OAAO,eAAe;QAC/D,OAAOO,AAAkDE,WAAlDF,OAAO,QAAQ,GAAG,IAAI,CAACG,CAAAA,IAAKA,AAAW,UAAXA,EAAE,IAAI;IAC7C,GAAG;QAACV,OAAO,eAAe;KAAC;IAE3B,MAAMW,gBAAgB,CAACC;QACnBX,SAAS,CAAC,EAAED,MAAM,EAAE;YAChB,MAAMI,UAAUX,YAAY,IAAI,CAACE,CAAAA,OAAQA,KAAK,IAAI,KAAKiB;YACvD,IAAIR,SAAS;gBACTJ,OAAO,GAAG,CAAC,oBAAoBI,QAAQ,gBAAgB;gBACvDJ,OAAO,GAAG,CAAC,kBAAkBI,QAAQ,cAAc;YACvD;QACJ;IACJ;IAEA,MAAMS,UAAU;QACZZ,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMc,cAAcZ,gBAAgB,kBAAkB,CAAC;IAEvD,OAAO,WAAP,GACI,oBAACa,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACG,QAAMA;QACH,MAAM;QACN,SAAS;QACT,UAAU,CAACZ;QACX,OAAOD,UAAUA,QAAQ,IAAI,GAAG;QAChC,oBAAoB;QACpB,UAAUO;QACV,SAASjB;;AAIzB"}