@webiny/app-website-builder 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Padding.js

@@ -52,23 +52,15 @@ const Padding = observer(({ elementId })=>{
         });
         else paddingTop.onReset();
     };
-    const rowClassname = "flex flex-row w-full justify-center items-center py-xs";
+    const rowClassname = "flex flex-row w-full justify-center items-center";
     return /*#__PURE__*/ react.createElement("div", {
-        className: "flex flex-col items-center bg-neutral-muted border-sm border-neutral-muted relative rounded-md"
+        className: "flex flex-col items-center bg-neutral-disabled relative rounded-lg p-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "grid grid-cols-3 items-center w-full"
     }, /*#__PURE__*/ react.createElement("span", {
-        className: "absolute text-sm",
-        style: {
-            top: 3,
-            left: 5
-        }
-    }, "Padding"), /*#__PURE__*/ react.createElement(LinkedEditing, {
-        linked: linked,
-        onToggle: onToggleLinkedEditing
-    }), /*#__PURE__*/ react.createElement("div", {
-        className: rowClassname,
-        style: {
-            paddingTop: "8px"
-        }
+        className: "text-sm text-neutral-strong"
+    }, "Padding"), /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center"
     }, /*#__PURE__*/ react.createElement(ValueSelector, {
         label: "Top padding",
         ...paddingTop,
@@ -77,10 +69,15 @@ const Padding = observer(({ elementId })=>{
         onChange: onPaddingTopChange,
         onChangePreview: onPaddingTopPreviewChange
     })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-end"
+    }, /*#__PURE__*/ react.createElement(LinkedEditing, {
+        linked: linked,
+        onToggle: onToggleLinkedEditing
+    }))), /*#__PURE__*/ react.createElement("div", {
         className: rowClassname,
         style: {
             width: 168,
-            paddingTop: "8px"
+            paddingTop: "16px"
         }
     }, /*#__PURE__*/ react.createElement(ValueSelector, {
         label: "Left padding",

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Padding.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Padding.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Padding.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { LinkedEditing } from \"./LinkedEditing.js\";\nimport { useStyles } from \"../../useStyles.js\";\nimport { ValueSelector } from \"../../ValueSelector.js\";\nimport { useStyleValue } from \"../../useStyleValue.js\";\nimport { UnitsOptions } from \"../../UnitsOptions.js\";\n\nconst widthOptions = UnitsOptions.widthUnits().getOptions();\nconst heightOptions = UnitsOptions.heightUnits().getOptions();\n\ninterface PaddingProps {\n    elementId: string;\n}\n\nexport const Padding = observer(({ elementId }: PaddingProps) => {\n    const { onChange, onPreviewChange, metadata } = useStyles(elementId);\n\n    const paddingTop = useStyleValue(elementId, \"paddingTop\");\n    const paddingRight = useStyleValue(elementId, \"paddingRight\");\n    const paddingBottom = useStyleValue(elementId, \"paddingBottom\");\n    const paddingLeft = useStyleValue(elementId, \"paddingLeft\");\n\n    const linked = metadata.get<boolean>(\"paddingLinkedEditing\") ?? true;\n\n    const onToggleLinkedEditing = (linked: boolean) => {\n        onChange(({ styles, metadata }) => {\n            if (linked) {\n                const value = `${paddingTop.value ?? 0}${paddingTop.unit}`;\n                styles.set(\"paddingRight\", value);\n                styles.set(\"paddingBottom\", value);\n                styles.set(\"paddingLeft\", value);\n            }\n            metadata.set(\"paddingLinkedEditing\", linked);\n        });\n    };\n\n    const onPaddingTopChange = (value: string) => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.set(\"paddingTop\", value);\n                styles.set(\"paddingRight\", value);\n                styles.set(\"paddingBottom\", value);\n                styles.set(\"paddingLeft\", value);\n            });\n        } else {\n            paddingTop.onChange(value);\n        }\n    };\n\n    const onPaddingTopPreviewChange = (value: string) => {\n        if (linked) {\n            onPreviewChange(({ styles }) => {\n                styles.set(\"paddingTop\", value);\n                styles.set(\"paddingRight\", value);\n                styles.set(\"paddingBottom\", value);\n                styles.set(\"paddingLeft\", value);\n            });\n        } else {\n            paddingTop.onChangePreview(value);\n        }\n    };\n\n    const onReset = () => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.unset(\"paddingTop\");\n                styles.unset(\"paddingRight\");\n                styles.unset(\"paddingBottom\");\n                styles.unset(\"paddingLeft\");\n            });\n        } else {\n            paddingTop.onReset();\n        }\n    };\n\n    const rowClassname = \"flex flex-row w-full justify-center items-center py-xs\";\n\n    return (\n        <div className=\"flex flex-col items-center bg-neutral-muted border-sm border-neutral-muted relative rounded-md\">\n            <span className=\"absolute text-sm\" style={{ top: 3, left: 5 }}>\n                Padding\n            </span>\n\n            <LinkedEditing linked={linked} onToggle={onToggleLinkedEditing} />\n\n            {/* Top Padding */}\n            <div className={rowClassname} style={{ paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={\"Top padding\"}\n                    {...paddingTop}\n                    onReset={onReset}\n                    units={heightOptions}\n                    onChange={onPaddingTopChange}\n                    onChangePreview={onPaddingTopPreviewChange}\n                />\n            </div>\n\n            {/* Center Row (Left Padding + Content + Right Padding) */}\n            <div className={rowClassname} style={{ width: 168, paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={\"Left padding\"}\n                    {...paddingLeft}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n                <div\n                    className=\"flex border-sm border-neutral-muted bg-neutral-light rounded-md items-center justify-center\"\n                    style={{ width: 170, height: 30 }}\n                >\n                    -\n                </div>\n                <ValueSelector\n                    label={\"Right padding\"}\n                    {...paddingRight}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n            </div>\n\n            {/* Bottom Padding */}\n            <div className={rowClassname} style={{ padding: \"8px 0\" }}>\n                <ValueSelector\n                    label={\"Bottom padding\"}\n                    {...paddingBottom}\n                    units={heightOptions}\n                    disabled={linked}\n                />\n            </div>\n        </div>\n    );\n});\n"],"names":["widthOptions","UnitsOptions","heightOptions","Padding","observer","elementId","onChange","onPreviewChange","metadata","useStyles","paddingTop","useStyleValue","paddingRight","paddingBottom","paddingLeft","linked","onToggleLinkedEditing","styles","value","onPaddingTopChange","onPaddingTopPreviewChange","onReset","rowClassname","LinkedEditing","ValueSelector"],"mappings":";;;;;;;AAQA,MAAMA,eAAeC,aAAa,UAAU,GAAG,UAAU;AACzD,MAAMC,gBAAgBD,aAAa,WAAW,GAAG,UAAU;AAMpD,MAAME,UAAUC,SAAS,CAAC,EAAEC,SAAS,EAAgB;IACxD,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,QAAQ,EAAE,GAAGC,UAAUJ;IAE1D,MAAMK,aAAaC,cAAcN,WAAW;IAC5C,MAAMO,eAAeD,cAAcN,WAAW;IAC9C,MAAMQ,gBAAgBF,cAAcN,WAAW;IAC/C,MAAMS,cAAcH,cAAcN,WAAW;IAE7C,MAAMU,SAASP,SAAS,GAAG,CAAU,2BAA2B;IAEhE,MAAMQ,wBAAwB,CAACD;QAC3BT,SAAS,CAAC,EAAEW,MAAM,EAAET,QAAQ,EAAE;YAC1B,IAAIO,QAAQ;gBACR,MAAMG,QAAQ,GAAGR,WAAW,KAAK,IAAI,IAAIA,WAAW,IAAI,EAAE;gBAC1DO,OAAO,GAAG,CAAC,gBAAgBC;gBAC3BD,OAAO,GAAG,CAAC,iBAAiBC;gBAC5BD,OAAO,GAAG,CAAC,eAAeC;YAC9B;YACAV,SAAS,GAAG,CAAC,wBAAwBO;QACzC;IACJ;IAEA,MAAMI,qBAAqB,CAACD;QACxB,IAAIH,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,cAAcC;YACzBD,OAAO,GAAG,CAAC,gBAAgBC;YAC3BD,OAAO,GAAG,CAAC,iBAAiBC;YAC5BD,OAAO,GAAG,CAAC,eAAeC;QAC9B;aAEAR,WAAW,QAAQ,CAACQ;IAE5B;IAEA,MAAME,4BAA4B,CAACF;QAC/B,IAAIH,QACAR,gBAAgB,CAAC,EAAEU,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,cAAcC;YACzBD,OAAO,GAAG,CAAC,gBAAgBC;YAC3BD,OAAO,GAAG,CAAC,iBAAiBC;YAC5BD,OAAO,GAAG,CAAC,eAAeC;QAC9B;aAEAR,WAAW,eAAe,CAACQ;IAEnC;IAEA,MAAMG,UAAU;QACZ,IAAIN,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;QACjB;aAEAP,WAAW,OAAO;IAE1B;IAEA,MAAMY,eAAe;IAErB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAK,WAAU;QAAmB,OAAO;YAAE,KAAK;YAAG,MAAM;QAAE;OAAG,0BAI/D,oBAACC,eAAaA;QAAC,QAAQR;QAAQ,UAAUC;sBAGzC,oBAAC;QAAI,WAAWM;QAAc,OAAO;YAAE,YAAY;QAAM;qBACrD,oBAACE,eAAaA;QACV,OAAO;QACN,GAAGd,UAAU;QACd,SAASW;QACT,OAAOnB;QACP,UAAUiB;QACV,iBAAiBC;uBAKzB,oBAAC;QAAI,WAAWE;QAAc,OAAO;YAAE,OAAO;YAAK,YAAY;QAAM;qBACjE,oBAACE,eAAaA;QACV,OAAO;QACN,GAAGV,WAAW;QACf,OAAOd;QACP,UAAUe;sBAEd,oBAAC;QACG,WAAU;QACV,OAAO;YAAE,OAAO;YAAK,QAAQ;QAAG;OACnC,oBAGD,oBAACS,eAAaA;QACV,OAAO;QACN,GAAGZ,YAAY;QAChB,OAAOZ;QACP,UAAUe;uBAKlB,oBAAC;QAAI,WAAWO;QAAc,OAAO;YAAE,SAAS;QAAQ;qBACpD,oBAACE,eAAaA;QACV,OAAO;QACN,GAAGX,aAAa;QACjB,OAAOX;QACP,UAAUa;;AAK9B"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Padding.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Padding.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { LinkedEditing } from \"./LinkedEditing.js\";\nimport { useStyles } from \"../../useStyles.js\";\nimport { ValueSelector } from \"../../ValueSelector.js\";\nimport { useStyleValue } from \"../../useStyleValue.js\";\nimport { UnitsOptions } from \"../../UnitsOptions.js\";\n\nconst widthOptions = UnitsOptions.widthUnits().getOptions();\nconst heightOptions = UnitsOptions.heightUnits().getOptions();\n\ninterface PaddingProps {\n    elementId: string;\n}\n\nexport const Padding = observer(({ elementId }: PaddingProps) => {\n    const { onChange, onPreviewChange, metadata } = useStyles(elementId);\n\n    const paddingTop = useStyleValue(elementId, \"paddingTop\");\n    const paddingRight = useStyleValue(elementId, \"paddingRight\");\n    const paddingBottom = useStyleValue(elementId, \"paddingBottom\");\n    const paddingLeft = useStyleValue(elementId, \"paddingLeft\");\n\n    const linked = metadata.get<boolean>(\"paddingLinkedEditing\") ?? true;\n\n    const onToggleLinkedEditing = (linked: boolean) => {\n        onChange(({ styles, metadata }) => {\n            if (linked) {\n                const value = `${paddingTop.value ?? 0}${paddingTop.unit}`;\n                styles.set(\"paddingRight\", value);\n                styles.set(\"paddingBottom\", value);\n                styles.set(\"paddingLeft\", value);\n            }\n            metadata.set(\"paddingLinkedEditing\", linked);\n        });\n    };\n\n    const onPaddingTopChange = (value: string) => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.set(\"paddingTop\", value);\n                styles.set(\"paddingRight\", value);\n                styles.set(\"paddingBottom\", value);\n                styles.set(\"paddingLeft\", value);\n            });\n        } else {\n            paddingTop.onChange(value);\n        }\n    };\n\n    const onPaddingTopPreviewChange = (value: string) => {\n        if (linked) {\n            onPreviewChange(({ styles }) => {\n                styles.set(\"paddingTop\", value);\n                styles.set(\"paddingRight\", value);\n                styles.set(\"paddingBottom\", value);\n                styles.set(\"paddingLeft\", value);\n            });\n        } else {\n            paddingTop.onChangePreview(value);\n        }\n    };\n\n    const onReset = () => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.unset(\"paddingTop\");\n                styles.unset(\"paddingRight\");\n                styles.unset(\"paddingBottom\");\n                styles.unset(\"paddingLeft\");\n            });\n        } else {\n            paddingTop.onReset();\n        }\n    };\n\n    const rowClassname = \"flex flex-row w-full justify-center items-center\";\n\n    return (\n        <div className=\"flex flex-col items-center bg-neutral-disabled relative rounded-lg p-sm\">\n            {/* Top Padding */}\n            <div className={\"grid grid-cols-3 items-center w-full\"}>\n                <span className=\"text-sm text-neutral-strong\">Padding</span>\n                <div className={\"flex justify-center\"}>\n                    <ValueSelector\n                        label={\"Top padding\"}\n                        {...paddingTop}\n                        onReset={onReset}\n                        units={heightOptions}\n                        onChange={onPaddingTopChange}\n                        onChangePreview={onPaddingTopPreviewChange}\n                    />\n                </div>\n                <div className={\"flex justify-end\"}>\n                    <LinkedEditing linked={linked} onToggle={onToggleLinkedEditing} />\n                </div>\n            </div>\n\n            {/* Center Row (Left Padding + Content + Right Padding) */}\n            <div className={rowClassname} style={{ width: 168, paddingTop: \"16px\" }}>\n                <ValueSelector\n                    label={\"Left padding\"}\n                    {...paddingLeft}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n                <div\n                    className=\"flex border-sm border-neutral-muted bg-neutral-light rounded-md items-center justify-center\"\n                    style={{ width: 170, height: 30 }}\n                >\n                    -\n                </div>\n                <ValueSelector\n                    label={\"Right padding\"}\n                    {...paddingRight}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n            </div>\n\n            {/* Bottom Padding */}\n            <div className={rowClassname} style={{ padding: \"8px 0\" }}>\n                <ValueSelector\n                    label={\"Bottom padding\"}\n                    {...paddingBottom}\n                    units={heightOptions}\n                    disabled={linked}\n                />\n            </div>\n        </div>\n    );\n});\n"],"names":["widthOptions","UnitsOptions","heightOptions","Padding","observer","elementId","onChange","onPreviewChange","metadata","useStyles","paddingTop","useStyleValue","paddingRight","paddingBottom","paddingLeft","linked","onToggleLinkedEditing","styles","value","onPaddingTopChange","onPaddingTopPreviewChange","onReset","rowClassname","ValueSelector","LinkedEditing"],"mappings":";;;;;;;AAQA,MAAMA,eAAeC,aAAa,UAAU,GAAG,UAAU;AACzD,MAAMC,gBAAgBD,aAAa,WAAW,GAAG,UAAU;AAMpD,MAAME,UAAUC,SAAS,CAAC,EAAEC,SAAS,EAAgB;IACxD,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,QAAQ,EAAE,GAAGC,UAAUJ;IAE1D,MAAMK,aAAaC,cAAcN,WAAW;IAC5C,MAAMO,eAAeD,cAAcN,WAAW;IAC9C,MAAMQ,gBAAgBF,cAAcN,WAAW;IAC/C,MAAMS,cAAcH,cAAcN,WAAW;IAE7C,MAAMU,SAASP,SAAS,GAAG,CAAU,2BAA2B;IAEhE,MAAMQ,wBAAwB,CAACD;QAC3BT,SAAS,CAAC,EAAEW,MAAM,EAAET,QAAQ,EAAE;YAC1B,IAAIO,QAAQ;gBACR,MAAMG,QAAQ,GAAGR,WAAW,KAAK,IAAI,IAAIA,WAAW,IAAI,EAAE;gBAC1DO,OAAO,GAAG,CAAC,gBAAgBC;gBAC3BD,OAAO,GAAG,CAAC,iBAAiBC;gBAC5BD,OAAO,GAAG,CAAC,eAAeC;YAC9B;YACAV,SAAS,GAAG,CAAC,wBAAwBO;QACzC;IACJ;IAEA,MAAMI,qBAAqB,CAACD;QACxB,IAAIH,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,cAAcC;YACzBD,OAAO,GAAG,CAAC,gBAAgBC;YAC3BD,OAAO,GAAG,CAAC,iBAAiBC;YAC5BD,OAAO,GAAG,CAAC,eAAeC;QAC9B;aAEAR,WAAW,QAAQ,CAACQ;IAE5B;IAEA,MAAME,4BAA4B,CAACF;QAC/B,IAAIH,QACAR,gBAAgB,CAAC,EAAEU,MAAM,EAAE;YACvBA,OAAO,GAAG,CAAC,cAAcC;YACzBD,OAAO,GAAG,CAAC,gBAAgBC;YAC3BD,OAAO,GAAG,CAAC,iBAAiBC;YAC5BD,OAAO,GAAG,CAAC,eAAeC;QAC9B;aAEAR,WAAW,eAAe,CAACQ;IAEnC;IAEA,MAAMG,UAAU;QACZ,IAAIN,QACAT,SAAS,CAAC,EAAEW,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;YACbA,OAAO,KAAK,CAAC;QACjB;aAEAP,WAAW,OAAO;IAE1B;IAEA,MAAMY,eAAe;IAErB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBAEX,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAK,WAAU;OAA8B,0BAC9C,oBAAC;QAAI,WAAW;qBACZ,oBAACC,eAAaA;QACV,OAAO;QACN,GAAGb,UAAU;QACd,SAASW;QACT,OAAOnB;QACP,UAAUiB;QACV,iBAAiBC;uBAGzB,oBAAC;QAAI,WAAW;qBACZ,oBAACI,eAAaA;QAAC,QAAQT;QAAQ,UAAUC;wBAKjD,oBAAC;QAAI,WAAWM;QAAc,OAAO;YAAE,OAAO;YAAK,YAAY;QAAO;qBAClE,oBAACC,eAAaA;QACV,OAAO;QACN,GAAGT,WAAW;QACf,OAAOd;QACP,UAAUe;sBAEd,oBAAC;QACG,WAAU;QACV,OAAO;YAAE,OAAO;YAAK,QAAQ;QAAG;OACnC,oBAGD,oBAACQ,eAAaA;QACV,OAAO;QACN,GAAGX,YAAY;QAChB,OAAOZ;QACP,UAAUe;uBAKlB,oBAAC;QAAI,WAAWO;QAAc,OAAO;YAAE,SAAS;QAAQ;qBACpD,oBAACC,eAAaA;QACV,OAAO;QACN,GAAGV,aAAa;QACjB,OAAOX;QACP,UAAUa;;AAK9B"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding.js

@@ -1,17 +1,14 @@
 import react from "react";
-import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/border_inner.svg";
+import { StyleAccordion } from "../StyleAccordion.js";
 import { MarginPaddingControl } from "./MarginPadding/MarginPadding.js";
-const MarginPadding = ({ elementId })=>/*#__PURE__*/ react.createElement(Accordion.Item, {
+const MarginPadding = ({ elementId })=>/*#__PURE__*/ react.createElement(StyleAccordion.Item, {
         title: "Margin & Padding",
-        description: "Set spacing in and around the element"
-    }, /*#__PURE__*/ react.createElement("div", {
-        style: {
-            width: 280,
-            marginLeft: -8
-        }
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        noPadding: true
     }, /*#__PURE__*/ react.createElement(MarginPaddingControl, {
         elementId: elementId
-    })));
+    }));
 export { MarginPadding };
 
 //# sourceMappingURL=MarginPadding.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { MarginPaddingControl } from \"./MarginPadding/MarginPadding.js\";\n\ninterface MarginPaddingProps {\n    elementId: string;\n}\n\nexport const MarginPadding = ({ elementId }: MarginPaddingProps) => {\n    return (\n        <Accordion.Item\n            title={\"Margin & Padding\"}\n            description={\"Set spacing in and around the element\"}\n        >\n            <div style={{ width: 280, marginLeft: -8 }}>\n                <MarginPaddingControl elementId={elementId} />\n            </div>\n        </Accordion.Item>\n    );\n};\n"],"names":["MarginPadding","elementId","Accordion","MarginPaddingControl"],"mappings":";;;AAQO,MAAMA,gBAAgB,CAAC,EAAEC,SAAS,EAAsB,GACpD,WAAP,GACI,oBAACC,UAAU,IAAI;QACX,OAAO;QACP,aAAa;qBAEb,oBAAC;QAAI,OAAO;YAAE,OAAO;YAAK,YAAY;QAAG;qBACrC,oBAACC,sBAAoBA;QAAC,WAAWF"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as MarginPaddingIcon } from \"@webiny/icons/border_inner.svg\";\nimport { StyleAccordion } from \"../StyleAccordion.js\";\nimport { MarginPaddingControl } from \"./MarginPadding/MarginPadding.js\";\n\ninterface MarginPaddingProps {\n    elementId: string;\n}\n\nexport const MarginPadding = ({ elementId }: MarginPaddingProps) => {\n    return (\n        <StyleAccordion.Item title={\"Margin & Padding\"} icon={<MarginPaddingIcon />} noPadding>\n            <MarginPaddingControl elementId={elementId} />\n        </StyleAccordion.Item>\n    );\n};\n"],"names":["MarginPadding","elementId","StyleAccordion","MarginPaddingIcon","MarginPaddingControl"],"mappings":";;;;AASO,MAAMA,gBAAgB,CAAC,EAAEC,SAAS,EAAsB,GACpD,WAAP,GACI,oBAACC,eAAe,IAAI;QAAC,OAAO;QAAoB,oBAAM,oBAACC,gBAAiBA;QAAK;qBACzE,oBAACC,sBAAoBA;QAAC,WAAWH"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.d.ts

@@ -2,6 +2,6 @@ import React from "react";
 export interface VisibilityProps {
     elementId: string;
 }
-export declare const Visibility: (({ elementId }: VisibilityProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const Visibility: (({ elementId }: VisibilityProps) => React.JSX.Element) & React.NamedExoticComponent<VisibilityProps> & {
+    readonly type: ({ elementId }: VisibilityProps) => React.JSX.Element;
 };

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.js

@@ -1,8 +1,19 @@
 import react from "react";
 import { observer } from "mobx-react-lite";
-import { Switch } from "@webiny/admin-ui";
+import { SegmentedControl } from "@webiny/admin-ui";
 import { useStyles } from "../../useStyles.js";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { SidebarRow } from "../../SidebarRow.js";
+const ITEMS = [
+    {
+        label: "Visible",
+        value: "show"
+    },
+    {
+        label: "Hidden",
+        value: "hide"
+    }
+];
 const Visibility = observer(({ elementId })=>{
     const { styles, onChange, inheritanceMap } = useStyles(elementId);
     const isVisible = "none" !== styles.display;
@@ -17,16 +28,19 @@ const Visibility = observer(({ elementId })=>{
         });
     };
     const inheritance = inheritanceMap.display ?? {};
-    return /*#__PURE__*/ react.createElement(Switch, {
+    return /*#__PURE__*/ react.createElement(SidebarRow, {
         label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
             onReset: onReset,
             isOverridden: inheritance?.overridden ?? false,
             inheritedFrom: inheritance?.inheritedFrom,
-            text: "Hide element"
-        }),
-        checked: !isVisible,
-        onChange: toggleVisibility
-    });
+            text: "Visibility"
+        })
+    }, /*#__PURE__*/ react.createElement(SegmentedControl, {
+        fullWidth: true,
+        items: ITEMS,
+        value: isVisible ? "show" : "hide",
+        onChange: (value)=>toggleVisibility("hide" === value)
+    }));
 });
 export { Visibility };
 

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Switch } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\n\nexport interface VisibilityProps {\n    elementId: string;\n}\n\nexport const Visibility = observer(({ elementId }: VisibilityProps) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n\n    const isVisible = styles.display !== \"none\";\n\n    const toggleVisibility = (isHidden: boolean) => {\n        onChange(({ styles }) => {\n            styles.set(\"display\", isHidden ? \"none\" : \"flex\");\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"display\");\n        });\n    };\n\n    const inheritance = inheritanceMap.display ?? {};\n\n    return (\n        <Switch\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Hide element\"}\n                />\n            }\n            checked={!isVisible}\n            onChange={toggleVisibility}\n        />\n    );\n});\n"],"names":["Visibility","observer","elementId","styles","onChange","inheritanceMap","useStyles","isVisible","toggleVisibility","isHidden","onReset","inheritance","Switch","InheritanceLabel"],"mappings":";;;;;AAUO,MAAMA,aAAaC,SAAS,CAAC,EAAEC,SAAS,EAAmB;IAC9D,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUJ;IAEvD,MAAMK,YAAYJ,AAAmB,WAAnBA,OAAO,OAAO;IAEhC,MAAMK,mBAAmB,CAACC;QACtBL,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,WAAWM,WAAW,SAAS;QAC9C;IACJ;IAEA,MAAMC,UAAU;QACZN,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMQ,cAAcN,eAAe,OAAO,IAAI,CAAC;IAE/C,OAAO,WAAP,GACI,oBAACO,QAAMA;QACH,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;QAGd,SAAS,CAACJ;QACV,UAAUC;;AAGtB"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.js","sources":["../../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { SegmentedControl } from \"@webiny/admin-ui\";\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 interface VisibilityProps {\n    elementId: string;\n}\n\nconst ITEMS = [\n    { label: \"Visible\", value: \"show\" },\n    { label: \"Hidden\", value: \"hide\" }\n];\n\nexport const Visibility = observer(({ elementId }: VisibilityProps) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n\n    const isVisible = styles.display !== \"none\";\n\n    const toggleVisibility = (isHidden: boolean) => {\n        onChange(({ styles }) => {\n            styles.set(\"display\", isHidden ? \"none\" : \"flex\");\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"display\");\n        });\n    };\n\n    const inheritance = inheritanceMap.display ?? {};\n\n    return (\n        <SidebarRow\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Visibility\"}\n                />\n            }\n        >\n            <SegmentedControl\n                fullWidth\n                items={ITEMS}\n                value={isVisible ? \"show\" : \"hide\"}\n                onChange={value => toggleVisibility(value === \"hide\")}\n            />\n        </SidebarRow>\n    );\n});\n"],"names":["ITEMS","Visibility","observer","elementId","styles","onChange","inheritanceMap","useStyles","isVisible","toggleVisibility","isHidden","onReset","inheritance","SidebarRow","InheritanceLabel","SegmentedControl","value"],"mappings":";;;;;;AAWA,MAAMA,QAAQ;IACV;QAAE,OAAO;QAAW,OAAO;IAAO;IAClC;QAAE,OAAO;QAAU,OAAO;IAAO;CACpC;AAEM,MAAMC,aAAaC,SAAS,CAAC,EAAEC,SAAS,EAAmB;IAC9D,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAE,GAAGC,UAAUJ;IAEvD,MAAMK,YAAYJ,AAAmB,WAAnBA,OAAO,OAAO;IAEhC,MAAMK,mBAAmB,CAACC;QACtBL,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,WAAWM,WAAW,SAAS;QAC9C;IACJ;IAEA,MAAMC,UAAU;QACZN,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAAC;QACjB;IACJ;IAEA,MAAMQ,cAAcN,eAAe,OAAO,IAAI,CAAC;IAE/C,OAAO,WAAP,GACI,oBAACO,YAAUA;QACP,qBACI,oBAACC,kBAAgBA;YACb,SAASH;YACT,cAAcC,aAAa,cAAc;YACzC,eAAeA,aAAa;YAC5B,MAAM;;qBAId,oBAACG,kBAAgBA;QACb;QACA,OAAOf;QACP,OAAOQ,YAAY,SAAS;QAC5B,UAAUQ,CAAAA,QAASP,iBAAiBO,AAAU,WAAVA;;AAIpD"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/VisibilityGroup.js

@@ -1,9 +1,10 @@
 import react from "react";
-import { Accordion } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/visibility.svg";
+import { StyleAccordion } from "../StyleAccordion.js";
 import { Visibility } from "./Visibility/index.js";
-const VisibilityGroup = ({ elementId })=>/*#__PURE__*/ react.createElement(Accordion.Item, {
+const VisibilityGroup = ({ elementId })=>/*#__PURE__*/ react.createElement(StyleAccordion.Item, {
         title: "Visibility",
-        description: "Set element visibility"
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
     }, /*#__PURE__*/ react.createElement(Visibility, {
         elementId: elementId
     }));

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/VisibilityGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/VisibilityGroup.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/VisibilityGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { Visibility, type VisibilityProps } from \"./Visibility/index.js\";\n\nexport const VisibilityGroup = ({ elementId }: VisibilityProps) => {\n    return (\n        <Accordion.Item title={\"Visibility\"} description={\"Set element visibility\"}>\n            <Visibility elementId={elementId} />\n        </Accordion.Item>\n    );\n};\n"],"names":["VisibilityGroup","elementId","Accordion","Visibility"],"mappings":";;;AAIO,MAAMA,kBAAkB,CAAC,EAAEC,SAAS,EAAmB,GACnD,WAAP,GACI,oBAACC,UAAU,IAAI;QAAC,OAAO;QAAc,aAAa;qBAC9C,oBAACC,YAAUA;QAAC,WAAWF"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/VisibilityGroup.js","sources":["../../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/VisibilityGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as VisibilityIcon } from \"@webiny/icons/visibility.svg\";\nimport { StyleAccordion } from \"../StyleAccordion.js\";\nimport { Visibility, type VisibilityProps } from \"./Visibility/index.js\";\n\nexport const VisibilityGroup = ({ elementId }: VisibilityProps) => {\n    return (\n        <StyleAccordion.Item title={\"Visibility\"} icon={<VisibilityIcon />}>\n            <Visibility elementId={elementId} />\n        </StyleAccordion.Item>\n    );\n};\n"],"names":["VisibilityGroup","elementId","StyleAccordion","VisibilityIcon","Visibility"],"mappings":";;;;AAKO,MAAMA,kBAAkB,CAAC,EAAEC,SAAS,EAAmB,GACnD,WAAP,GACI,oBAACC,eAAe,IAAI;QAAC,OAAO;QAAc,oBAAM,oBAACC,gBAAcA;qBAC3D,oBAACC,YAAUA;QAAC,WAAWH"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface SidebarRowProps {
+    label: React.ReactNode;
+    tooltip?: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare const SidebarRow: ({ label, tooltip, children }: SidebarRowProps) => React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js

@@ -0,0 +1,24 @@
+import react from "react";
+import { Icon, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/info.svg";
+const SidebarRow = ({ label, tooltip, children })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex items-start gap-xxs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "w-[80px] pt-sm flex flex-row items-center gap-xxs shrink-0 text-sm text-neutral-strong"
+    }, label, tooltip ? /*#__PURE__*/ react.createElement(Tooltip, {
+        trigger: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "xs",
+            label: "More information",
+            color: "neutral-light"
+        }),
+        content: tooltip,
+        side: "left"
+    }) : /*#__PURE__*/ react.createElement("div", {
+        className: "w-xs shrink-0"
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 min-w-0"
+    }, children));
+export { SidebarRow };
+
+//# sourceMappingURL=SidebarRow.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/SidebarRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\n\ninterface SidebarRowProps {\n    label: React.ReactNode;\n    tooltip?: React.ReactNode;\n    children: React.ReactNode;\n}\n\nexport const SidebarRow = ({ label, tooltip, children }: SidebarRowProps) => {\n    return (\n        <div className={\"flex items-start gap-xxs\"}>\n            <div\n                className={\n                    \"w-[80px] pt-sm flex flex-row items-center gap-xxs shrink-0 text-sm text-neutral-strong\"\n                }\n            >\n                {label}\n\n                {tooltip ? (\n                    <Tooltip\n                        trigger={\n                            <Icon\n                                icon={<InfoIcon />}\n                                size={\"xs\"}\n                                label={\"More information\"}\n                                color={\"neutral-light\"}\n                            />\n                        }\n                        content={tooltip}\n                        side={\"left\"}\n                    />\n                ) : (\n                    <div className={\"w-xs shrink-0\"} />\n                )}\n            </div>\n            {/* min-w-0 lets the cell shrink below its content's intrinsic width, so long\n                unbroken values (e.g. a hashed file name) truncate instead of widening the\n                row and pushing controls past the sidebar edge. */}\n            <div className={\"flex-1 min-w-0\"}>{children}</div>\n        </div>\n    );\n};\n"],"names":["SidebarRow","label","tooltip","children","Tooltip","Icon","InfoIcon"],"mappings":";;;AAUO,MAAMA,aAAa,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAEC,QAAQ,EAAmB,GAC7D,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,WACI;OAGHF,OAEAC,UAAU,WAAVA,GACG,oBAACE,SAAOA;QACJ,uBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACC,gBAAQA;YACf,MAAM;YACN,OAAO;YACP,OAAO;;QAGf,SAASJ;QACT,MAAM;uBAGV,oBAAC;QAAI,WAAW;uBAMxB,oBAAC;QAAI,WAAW;OAAmBC"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordion.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { StyleAccordionItem } from "./StyleAccordionItem.js";
+interface StyleAccordionProps {
+    children: React.ReactNode;
+}
+declare const StyleAccordionRoot: ({ children }: StyleAccordionProps) => React.JSX.Element;
+export declare const StyleAccordion: typeof StyleAccordionRoot & {
+    Item: typeof StyleAccordionItem;
+};
+export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordion.js

@@ -0,0 +1,11 @@
+import react from "react";
+import { StyleAccordionItem } from "./StyleAccordionItem.js";
+const StyleAccordionRoot = ({ children })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-y-sm"
+    }, children);
+const StyleAccordion = Object.assign(StyleAccordionRoot, {
+    Item: StyleAccordionItem
+});
+export { StyleAccordion };
+
+//# sourceMappingURL=StyleAccordion.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordion.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { StyleAccordionItem } from \"./StyleAccordionItem.js\";\n\ninterface StyleAccordionProps {\n    children: React.ReactNode;\n}\n\nconst StyleAccordionRoot = ({ children }: StyleAccordionProps) => (\n    <div className={\"flex flex-col gap-y-sm\"}>{children}</div>\n);\n\nexport const StyleAccordion = Object.assign(StyleAccordionRoot, {\n    Item: StyleAccordionItem\n});\n"],"names":["StyleAccordionRoot","children","StyleAccordion","Object","StyleAccordionItem"],"mappings":";;AAOA,MAAMA,qBAAqB,CAAC,EAAEC,QAAQ,EAAuB,iBACzD,oBAAC;QAAI,WAAW;OAA2BA;AAGxC,MAAMC,iBAAiBC,OAAO,MAAM,CAACH,oBAAoB;IAC5D,MAAMI;AACV"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordionItem.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface StyleAccordionItemProps {
+    title: string;
+    icon?: React.ReactElement;
+    defaultOpen?: boolean;
+    noPadding?: boolean;
+    children: React.ReactNode;
+}
+export declare const StyleAccordionItem: ({ title, icon, defaultOpen, noPadding, children }: StyleAccordionItemProps) => React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordionItem.js

@@ -0,0 +1,45 @@
+import react, { useState } from "react";
+import { Collapsible } from "radix-ui";
+import { ReactComponent } from "@webiny/icons/keyboard_arrow_down.svg";
+import { Icon } from "@webiny/admin-ui";
+const StyleAccordionItem = ({ title, icon, defaultOpen = false, noPadding = false, children })=>{
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    return /*#__PURE__*/ react.createElement(Collapsible.Root, {
+        defaultOpen: defaultOpen,
+        onOpenChange: setIsOpen
+    }, /*#__PURE__*/ react.createElement(Collapsible.Trigger, {
+        asChild: true
+    }, /*#__PURE__*/ react.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        className: "w-full flex items-center justify-between py-sm px-sm cursor-pointer select-none rounded-lg " + (isOpen ? "" : "bg-neutral-subtle"),
+        onKeyDown: (e)=>{
+            if ("Enter" === e.key || " " === e.key) {
+                e.preventDefault();
+                e.currentTarget.click();
+            }
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm"
+    }, icon && /*#__PURE__*/ react.createElement(Icon, {
+        icon: icon,
+        label: title,
+        size: "md",
+        color: isOpen ? "accent" : "neutral-light"
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "text-md text-neutral-primary " + (isOpen ? "font-semibold" : "")
+    }, title)), /*#__PURE__*/ react.createElement(Icon, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: "Toggle",
+        size: "md",
+        color: "neutral-strong",
+        className: "transition-transform " + (isOpen ? "rotate-180" : "")
+    }))), /*#__PURE__*/ react.createElement(Collapsible.Content, {
+        className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: noPadding ? "px-sm pt-sm pb-lg" : "px-md pt-sm pb-lg"
+    }, children)));
+};
+export { StyleAccordionItem };
+
+//# sourceMappingURL=StyleAccordionItem.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordionItem.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleAccordionItem.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Collapsible } from \"radix-ui\";\nimport { ReactComponent as ChevronIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { Icon } from \"@webiny/admin-ui\";\n\nexport interface StyleAccordionItemProps {\n    title: string;\n    icon?: React.ReactElement;\n    defaultOpen?: boolean;\n    noPadding?: boolean;\n    children: React.ReactNode;\n}\n\nexport const StyleAccordionItem = ({\n    title,\n    icon,\n    defaultOpen = false,\n    noPadding = false,\n    children\n}: StyleAccordionItemProps) => {\n    const [isOpen, setIsOpen] = useState(defaultOpen);\n\n    return (\n        <Collapsible.Root defaultOpen={defaultOpen} onOpenChange={setIsOpen}>\n            <Collapsible.Trigger asChild>\n                <div\n                    role=\"button\"\n                    tabIndex={0}\n                    className={\n                        \"w-full flex items-center justify-between py-sm px-sm cursor-pointer select-none rounded-lg \" +\n                        (isOpen ? \"\" : \"bg-neutral-subtle\")\n                    }\n                    onKeyDown={e => {\n                        if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            e.currentTarget.click();\n                        }\n                    }}\n                >\n                    <div className={\"flex items-center gap-sm\"}>\n                        {icon && (\n                            <Icon\n                                icon={icon}\n                                label={title}\n                                size={\"md\"}\n                                color={isOpen ? \"accent\" : \"neutral-light\"}\n                            />\n                        )}\n                        <span\n                            className={\n                                \"text-md text-neutral-primary \" + (isOpen ? \"font-semibold\" : \"\")\n                            }\n                        >\n                            {title}\n                        </span>\n                    </div>\n                    <Icon\n                        icon={<ChevronIcon />}\n                        label={\"Toggle\"}\n                        size={\"md\"}\n                        color={\"neutral-strong\"}\n                        className={\"transition-transform \" + (isOpen ? \"rotate-180\" : \"\")}\n                    />\n                </div>\n            </Collapsible.Trigger>\n            <Collapsible.Content\n                className={\n                    \"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\"\n                }\n            >\n                <div className={noPadding ? \"px-sm pt-sm pb-lg\" : \"px-md pt-sm pb-lg\"}>\n                    {children}\n                </div>\n            </Collapsible.Content>\n        </Collapsible.Root>\n    );\n};\n"],"names":["StyleAccordionItem","title","icon","defaultOpen","noPadding","children","isOpen","setIsOpen","useState","Collapsible","e","Icon","ChevronIcon"],"mappings":";;;;AAaO,MAAMA,qBAAqB,CAAC,EAC/BC,KAAK,EACLC,IAAI,EACJC,cAAc,KAAK,EACnBC,YAAY,KAAK,EACjBC,QAAQ,EACc;IACtB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASL;IAErC,OAAO,WAAP,GACI,oBAACM,YAAY,IAAI;QAAC,aAAaN;QAAa,cAAcI;qBACtD,oBAACE,YAAY,OAAO;QAAC;qBACjB,oBAAC;QACG,MAAK;QACL,UAAU;QACV,WACI,gGACCH,CAAAA,SAAS,KAAK,mBAAkB;QAErC,WAAWI,CAAAA;YACP,IAAIA,AAAU,YAAVA,EAAE,GAAG,IAAgBA,AAAU,QAAVA,EAAE,GAAG,EAAU;gBACpCA,EAAE,cAAc;gBAChBA,EAAE,aAAa,CAAC,KAAK;YACzB;QACJ;qBAEA,oBAAC;QAAI,WAAW;OACXR,QAAQ,WAARA,GACG,oBAACS,MAAIA;QACD,MAAMT;QACN,OAAOD;QACP,MAAM;QACN,OAAOK,SAAS,WAAW;sBAGnC,oBAAC;QACG,WACI,kCAAmCA,CAAAA,SAAS,kBAAkB,EAAC;OAGlEL,SAAAA,WAAAA,GAGT,oBAACU,MAAIA;QACD,oBAAM,oBAACC,gBAAWA;QAClB,OAAO;QACP,MAAM;QACN,OAAO;QACP,WAAW,0BAA2BN,CAAAA,SAAS,eAAe,EAAC;wBAI3E,oBAACG,YAAY,OAAO;QAChB,WACI;qBAGJ,oBAAC;QAAI,WAAWL,YAAY,sBAAsB;OAC7CC;AAKrB"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js

@@ -1,6 +1,7 @@
 import react, { useCallback } from "react";
-import { Accordion } from "@webiny/admin-ui";
+import { StyleAccordion } from "./StyleAccordion.js";
 import { useActiveElement } from "../../../hooks/useActiveElement.js";
+import { ElementPreview } from "../ElementPreview.js";
 import { Background } from "./Groups/Background.js";
 import { Border } from "./Groups/Border.js";
 import { MarginPadding } from "./Groups/MarginPadding.js";
@@ -11,9 +12,13 @@ import { Layout } from "./Groups/Layout.js";
 const StyleProperties = ()=>{
     const [element] = useActiveElement();
     if (!element) return null;
-    return /*#__PURE__*/ react.createElement(ElementStyleProperties, {
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "pt-md mb-md px-sm"
+    }, /*#__PURE__*/ react.createElement(ElementPreview, {
         element: element
-    });
+    })), /*#__PURE__*/ react.createElement(ElementStyleProperties, {
+        element: element
+    }));
 };
 const defaultHidden = [];
 const ElementStyleProperties = ({ element })=>{
@@ -22,7 +27,7 @@ const ElementStyleProperties = ({ element })=>{
     const isHidden = useCallback((name)=>hideStyles.includes(name), [
         hideStyles
     ]);
-    return /*#__PURE__*/ react.createElement(Accordion, null, isHidden(StyleSettings.Layout) ? null : /*#__PURE__*/ react.createElement(Layout, {
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(StyleAccordion, null, isHidden(StyleSettings.Layout) ? null : /*#__PURE__*/ react.createElement(Layout, {
         elementId: element.id
     }), isHidden(StyleSettings.MarginPadding) ? null : /*#__PURE__*/ react.createElement(MarginPadding, {
         elementId: element.id
@@ -32,7 +37,7 @@ const ElementStyleProperties = ({ element })=>{
         elementId: element.id
     }), isHidden(StyleSettings.Visibility) ? null : /*#__PURE__*/ react.createElement(VisibilityGroup, {
         elementId: element.id
-    }));
+    })));
 };
 export { StyleProperties };
 

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { Background } from \"./Groups/Background.js\";\nimport { Border } from \"./Groups/Border.js\";\nimport { MarginPadding } from \"./Groups/MarginPadding.js\";\nimport { VisibilityGroup } from \"./Groups/VisibilityGroup.js\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { StyleSettings } from \"@webiny/website-builder-sdk\";\nimport { Layout } from \"./Groups/Layout.js\";\n\nexport const StyleProperties = () => {\n    const [element] = useActiveElement();\n    if (!element) {\n        return null;\n    }\n\n    return <ElementStyleProperties element={element} />;\n};\n\nconst defaultHidden: string[] = [];\n\nconst ElementStyleProperties = ({ element }: { element: DocumentElement }) => {\n    const componentManifest = useElementComponentManifest(element.id);\n    const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;\n\n    const isHidden = useCallback(\n        (name: string) => {\n            return hideStyles.includes(name);\n        },\n        [hideStyles]\n    );\n\n    return (\n        <Accordion>\n            {isHidden(StyleSettings.Layout) ? null : <Layout elementId={element.id} />}\n            {isHidden(StyleSettings.MarginPadding) ? null : (\n                <MarginPadding elementId={element.id} />\n            )}\n            {isHidden(StyleSettings.Border) ? null : <Border elementId={element.id} />}\n            {isHidden(StyleSettings.Background) ? null : <Background elementId={element.id} />}\n            {isHidden(StyleSettings.Visibility) ? null : <VisibilityGroup elementId={element.id} />}\n        </Accordion>\n    );\n};\n"],"names":["StyleProperties","element","useActiveElement","ElementStyleProperties","defaultHidden","componentManifest","useElementComponentManifest","hideStyles","isHidden","useCallback","name","Accordion","StyleSettings","Layout","MarginPadding","Border","Background","VisibilityGroup"],"mappings":";;;;;;;;;;AAYO,MAAMA,kBAAkB;IAC3B,MAAM,CAACC,QAAQ,GAAGC;IAClB,IAAI,CAACD,SACD,OAAO;IAGX,OAAO,WAAP,GAAO,oBAACE,wBAAsBA;QAAC,SAASF;;AAC5C;AAEA,MAAMG,gBAA0B,EAAE;AAElC,MAAMD,yBAAyB,CAAC,EAAEF,OAAO,EAAgC;IACrE,MAAMI,oBAAoBC,4BAA4BL,QAAQ,EAAE;IAChE,MAAMM,aAAaF,mBAAmB,qBAAqBD;IAE3D,MAAMI,WAAWC,YACb,CAACC,OACUH,WAAW,QAAQ,CAACG,OAE/B;QAACH;KAAW;IAGhB,OAAO,WAAP,GACI,oBAACI,WAASA,MACLH,SAASI,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACC,QAAMA;QAAC,WAAWZ,QAAQ,EAAE;QACrEO,SAASI,cAAc,aAAa,IAAI,OAAO,WAAP,GACrC,oBAACE,eAAaA;QAAC,WAAWb,QAAQ,EAAE;QAEvCO,SAASI,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACG,QAAMA;QAAC,WAAWd,QAAQ,EAAE;QACrEO,SAASI,cAAc,UAAU,IAAI,OAAO,WAAP,GAAO,oBAACI,YAAUA;QAAC,WAAWf,QAAQ,EAAE;QAC7EO,SAASI,cAAc,UAAU,IAAI,OAAO,WAAP,GAAO,oBAACK,iBAAeA;QAAC,WAAWhB,QAAQ,EAAE;;AAG/F"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { StyleAccordion } from \"./StyleAccordion.js\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { ElementPreview } from \"~/BaseEditor/defaultConfig/Sidebar/ElementPreview.js\";\nimport { Background } from \"./Groups/Background.js\";\nimport { Border } from \"./Groups/Border.js\";\nimport { MarginPadding } from \"./Groups/MarginPadding.js\";\nimport { VisibilityGroup } from \"./Groups/VisibilityGroup.js\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js\";\nimport { StyleSettings } from \"@webiny/website-builder-sdk\";\nimport { Layout } from \"./Groups/Layout.js\";\n\nexport const StyleProperties = () => {\n    const [element] = useActiveElement();\n    if (!element) {\n        return null;\n    }\n\n    return (\n        <>\n            <div className={\"pt-md mb-md px-sm\"}>\n                <ElementPreview element={element} />\n            </div>\n            <ElementStyleProperties element={element} />\n        </>\n    );\n};\n\nconst defaultHidden: string[] = [];\n\nconst ElementStyleProperties = ({ element }: { element: DocumentElement }) => {\n    const componentManifest = useElementComponentManifest(element.id);\n    const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;\n\n    const isHidden = useCallback(\n        (name: string) => {\n            return hideStyles.includes(name);\n        },\n        [hideStyles]\n    );\n\n    return (\n        <>\n            <StyleAccordion>\n                {isHidden(StyleSettings.Layout) ? null : <Layout elementId={element.id} />}\n                {isHidden(StyleSettings.MarginPadding) ? null : (\n                    <MarginPadding elementId={element.id} />\n                )}\n                {isHidden(StyleSettings.Border) ? null : <Border elementId={element.id} />}\n                {isHidden(StyleSettings.Background) ? null : <Background elementId={element.id} />}\n                {isHidden(StyleSettings.Visibility) ? null : (\n                    <VisibilityGroup elementId={element.id} />\n                )}\n            </StyleAccordion>\n        </>\n    );\n};\n"],"names":["StyleProperties","element","useActiveElement","ElementPreview","ElementStyleProperties","defaultHidden","componentManifest","useElementComponentManifest","hideStyles","isHidden","useCallback","name","StyleAccordion","StyleSettings","Layout","MarginPadding","Border","Background","VisibilityGroup"],"mappings":";;;;;;;;;;;AAaO,MAAMA,kBAAkB;IAC3B,MAAM,CAACC,QAAQ,GAAGC;IAClB,IAAI,CAACD,SACD,OAAO;IAGX,OAAO,WAAP,GACI,wDACI,oBAAC;QAAI,WAAW;qBACZ,oBAACE,gBAAcA;QAAC,SAASF;uBAE7B,oBAACG,wBAAsBA;QAAC,SAASH;;AAG7C;AAEA,MAAMI,gBAA0B,EAAE;AAElC,MAAMD,yBAAyB,CAAC,EAAEH,OAAO,EAAgC;IACrE,MAAMK,oBAAoBC,4BAA4BN,QAAQ,EAAE;IAChE,MAAMO,aAAaF,mBAAmB,qBAAqBD;IAE3D,MAAMI,WAAWC,YACb,CAACC,OACUH,WAAW,QAAQ,CAACG,OAE/B;QAACH;KAAW;IAGhB,OAAO,WAAP,GACI,wDACI,oBAACI,gBAAcA,MACVH,SAASI,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACC,QAAMA;QAAC,WAAWb,QAAQ,EAAE;QACrEQ,SAASI,cAAc,aAAa,IAAI,OAAO,WAAP,GACrC,oBAACE,eAAaA;QAAC,WAAWd,QAAQ,EAAE;QAEvCQ,SAASI,cAAc,MAAM,IAAI,OAAO,WAAP,GAAO,oBAACG,QAAMA;QAAC,WAAWf,QAAQ,EAAE;QACrEQ,SAASI,cAAc,UAAU,IAAI,OAAO,WAAP,GAAO,oBAACI,YAAUA;QAAC,WAAWhB,QAAQ,EAAE;QAC7EQ,SAASI,cAAc,UAAU,IAAI,OAAO,WAAP,GAClC,oBAACK,iBAAeA;QAAC,WAAWjB,QAAQ,EAAE;;AAK1D"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js

@@ -1,20 +1,18 @@
 import react from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/select_all.svg";
 import { Sidebar } from "../../../config/Sidebar/Sidebar.js";
-import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer.js";
-import { useActiveElement } from "../../../hooks/useActiveElement.js";
-const StyleSettingsGroup = ()=>{
-    const [element] = useActiveElement();
-    return /*#__PURE__*/ react.createElement(ScrollableContainer, {
-        tabIndex: -1
-    }, /*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
+const StyleSettingsGroup = ()=>/*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
         name: "style",
         label: "Style",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Style"
+        }),
         element: /*#__PURE__*/ react.createElement(Sidebar.Elements, {
             group: "style"
-        }),
-        noPadding: !!element
-    }));
-};
+        })
+    });
 export { StyleSettingsGroup };
 
 //# sourceMappingURL=StyleSettingsGroup.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\n\nexport const StyleSettingsGroup = () => {\n    const [element] = useActiveElement();\n\n    return (\n        <ScrollableContainer tabIndex={-1}>\n            <Sidebar.Group.Tab\n                name={\"style\"}\n                label={\"Style\"}\n                element={<Sidebar.Elements group={\"style\"} />}\n                noPadding={element ? true : false}\n            />\n        </ScrollableContainer>\n    );\n};\n"],"names":["StyleSettingsGroup","element","useActiveElement","ScrollableContainer","Sidebar"],"mappings":";;;;AAKO,MAAMA,qBAAqB;IAC9B,MAAM,CAACC,QAAQ,GAAGC;IAElB,OAAO,WAAP,GACI,oBAACC,qBAAmBA;QAAC,UAAU;qBAC3B,oBAACC,QAAQ,KAAK,CAAC,GAAG;QACd,MAAM;QACN,OAAO;QACP,uBAAS,oBAACA,QAAQ,QAAQ;YAAC,OAAO;;QAClC,SAAS,IAAEH;;AAI3B"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as SelectAllIcon } from \"@webiny/icons/select_all.svg\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar.js\";\n\nexport const StyleSettingsGroup = () => {\n    return (\n        <Sidebar.Group.Tab\n            name={\"style\"}\n            label={\"Style\"}\n            icon={<Icon icon={<SelectAllIcon />} label={\"Style\"} />}\n            element={<Sidebar.Elements group={\"style\"} />}\n        />\n    );\n};\n"],"names":["StyleSettingsGroup","Sidebar","Icon","SelectAllIcon"],"mappings":";;;;AAKO,MAAMA,qBAAqB,IACvB,WAAP,GACI,oBAACC,QAAQ,KAAK,CAAC,GAAG;QACd,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAaA;YAAK,OAAO;;QAC5C,uBAAS,oBAACF,QAAQ,QAAQ;YAAC,OAAO"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js

@@ -1,7 +1,7 @@
 import { BindingsProcessor, ComponentManifestToAstConverter, InheritanceProcessor, StylesBindingsProcessor } from "@webiny/website-builder-sdk";
 import { BreakpointElementMetadata, ElementMetadata, NullMetadata, StylesMetadata } from "../../../metadata/index.js";
 import { Commands } from "../../../index.js";
-import { autorun, makeAutoObservable, runInAction } from "mobx";
+import { autorun, makeAutoObservable, runInAction, toJS } from "mobx";
 import { $getComponentManifestByElementId } from "../../../../editorSdk/utils/index.js";
 import { BASE_BREAKPOINT } from "../../../../constants.js";
 class StylesStore {
@@ -28,7 +28,7 @@ class StylesStore {
         };
         this.onPreviewChange = (cb)=>{
             if (!this.stylesProcessor) return;
-            const styles = new StylesValueObject(structuredClone(this.devFriendlyStyles));
+            const styles = new StylesValueObject(structuredClone(toJS(this.devFriendlyStyles)));
             cb({
                 styles,
                 metadata: this.elementMetadata

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.ts"],"sourcesContent":["import type { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { StylesBindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata } from \"~/BaseEditor/metadata/index.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    NullMetadata,\n    StylesMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { autorun, makeAutoObservable, runInAction } from \"mobx\";\nimport { type InheritanceInfo, InheritanceProcessor } from \"@webiny/website-builder-sdk\";\nimport {\n    BindingsProcessor,\n    type DocumentElementBindings,\n    type Document\n} from \"@webiny/website-builder-sdk\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils/index.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\n\nexport type ElementBreakpointStyles = {\n    styles: Record<string, any>;\n    metadata: IMetadata;\n    inheritanceMap: InheritanceInfo[\"styles\"];\n};\n\nexport class StylesStore {\n    private editor: ReturnType<typeof useDocumentEditor>;\n    private elementId: string;\n    private breakpointNames: string[];\n    private stylesProcessor: StylesBindingsProcessor | undefined;\n    private elementMetadata: IMetadata = new NullMetadata();\n    private devFriendlyStyles: Record<string, any> = {};\n    private localPreviewStyles: Record<string, any> | undefined = undefined;\n    private currentBreakpoint: string;\n    private inheritanceMap: InheritanceInfo[\"styles\"] = {};\n    private rawBindings: DocumentElementBindings = {};\n    private bindingsProcessor: BindingsProcessor;\n    private inheritanceProcessor: InheritanceProcessor;\n    constructor(editor: Editor, elementId: string, breakpointNames: string[]) {\n        this.editor = editor;\n        this.elementId = elementId;\n        this.breakpointNames = breakpointNames;\n\n        const manifest = $getComponentManifestByElementId(editor, elementId ?? \"\");\n        const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);\n\n        this.bindingsProcessor = new BindingsProcessor(breakpointNames);\n        this.inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);\n\n        const document = this.editor.getDocumentState().read();\n        const editorState = this.editor.getEditorState().read();\n        const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n        this.currentBreakpoint = breakpoint;\n\n        // Initial setup.\n        this.calculateStuff(document, breakpoint);\n\n        autorun(() => {\n            const document = this.editor.getDocumentState().read();\n            const editorState = this.editor.getEditorState().read();\n            const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n\n            runInAction(() => {\n                this.currentBreakpoint = breakpoint;\n                this.calculateStuff(document, breakpoint);\n            });\n        });\n\n        makeAutoObservable(this);\n    }\n\n    get vm(): ElementBreakpointStyles {\n        return {\n            styles: this.localPreviewStyles ?? this.devFriendlyStyles,\n            metadata: this.elementMetadata,\n            inheritanceMap: this.inheritanceMap\n        };\n    }\n\n    onChange = (cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void) => {\n        if (!this.stylesProcessor) {\n            return;\n        }\n\n        const styles = new StylesValueObject(this.devFriendlyStyles);\n        cb({ styles, metadata: this.elementMetadata });\n\n        const finalStyles = styles.getAll();\n\n        const updatedStyles = this.stylesProcessor.createUpdate(\n            finalStyles,\n            this.currentBreakpoint\n        );\n\n        this.editor.updateDocument(document => {\n            updatedStyles.applyToDocument(document);\n            this.elementMetadata.applyToDocument(document);\n        });\n\n        this.localPreviewStyles = undefined;\n    };\n\n    onPreviewChange = (\n        cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void\n    ) => {\n        if (!this.stylesProcessor) {\n            return;\n        }\n\n        const styles = new StylesValueObject(structuredClone(this.devFriendlyStyles));\n\n        cb({ styles, metadata: this.elementMetadata });\n\n        const finalStyles = styles.getAll();\n\n        this.localPreviewStyles = finalStyles;\n\n        const updatedStyles = this.stylesProcessor.createUpdate(\n            finalStyles,\n            this.currentBreakpoint\n        );\n\n        this.editor.executeCommand(Commands.PreviewPatchElement, {\n            elementId: this.elementId,\n            patch: updatedStyles.createJsonPatch(this.rawBindings)\n        });\n    };\n\n    private calculateStuff(document: Document, breakpoint: string) {\n        const bindings = document.bindings[this.elementId] ?? {};\n\n        this.rawBindings = bindings;\n        const resolvedBindings = this.bindingsProcessor.getBindings(bindings, breakpoint);\n\n        const inheritanceMap = this.inheritanceProcessor.getInheritanceMap(bindings, breakpoint);\n\n        this.inheritanceMap = inheritanceMap.styles;\n\n        this.stylesProcessor = new StylesBindingsProcessor(\n            this.elementId,\n            this.breakpointNames,\n            bindings\n        );\n\n        this.elementMetadata = new StylesMetadata(\n            new BreakpointElementMetadata(\n                this.breakpointNames,\n                breakpoint,\n                new ElementMetadata(this.elementId, bindings.metadata)\n            )\n        );\n\n        this.devFriendlyStyles = this.stylesProcessor.toDeepStyles(resolvedBindings.styles);\n    }\n}\n\nexport class StylesValueObject {\n    private readonly value: Record<string, any>;\n\n    constructor(value: any = {}) {\n        this.value = value;\n    }\n\n    set(key: string, value: any) {\n        this.value[key] = value;\n    }\n\n    get(key: string) {\n        return this.value[key];\n    }\n\n    getAll() {\n        return this.value;\n    }\n\n    unset(key: string) {\n        delete this.value[key];\n    }\n}\n"],"names":["StylesStore","editor","elementId","breakpointNames","NullMetadata","undefined","cb","styles","StylesValueObject","finalStyles","updatedStyles","document","structuredClone","Commands","manifest","$getComponentManifestByElementId","inputsAst","ComponentManifestToAstConverter","BindingsProcessor","InheritanceProcessor","editorState","breakpoint","BASE_BREAKPOINT","autorun","runInAction","makeAutoObservable","bindings","resolvedBindings","inheritanceMap","StylesBindingsProcessor","StylesMetadata","BreakpointElementMetadata","ElementMetadata","value","key"],"mappings":"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"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.ts"],"sourcesContent":["import type { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { StylesBindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata } from \"~/BaseEditor/metadata/index.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    NullMetadata,\n    StylesMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { autorun, makeAutoObservable, runInAction, toJS } from \"mobx\";\nimport { type InheritanceInfo, InheritanceProcessor } from \"@webiny/website-builder-sdk\";\nimport {\n    BindingsProcessor,\n    type DocumentElementBindings,\n    type Document\n} from \"@webiny/website-builder-sdk\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils/index.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\n\nexport type ElementBreakpointStyles = {\n    styles: Record<string, any>;\n    metadata: IMetadata;\n    inheritanceMap: InheritanceInfo[\"styles\"];\n};\n\nexport class StylesStore {\n    private editor: ReturnType<typeof useDocumentEditor>;\n    private elementId: string;\n    private breakpointNames: string[];\n    private stylesProcessor: StylesBindingsProcessor | undefined;\n    private elementMetadata: IMetadata = new NullMetadata();\n    private devFriendlyStyles: Record<string, any> = {};\n    private localPreviewStyles: Record<string, any> | undefined = undefined;\n    private currentBreakpoint: string;\n    private inheritanceMap: InheritanceInfo[\"styles\"] = {};\n    private rawBindings: DocumentElementBindings = {};\n    private bindingsProcessor: BindingsProcessor;\n    private inheritanceProcessor: InheritanceProcessor;\n    constructor(editor: Editor, elementId: string, breakpointNames: string[]) {\n        this.editor = editor;\n        this.elementId = elementId;\n        this.breakpointNames = breakpointNames;\n\n        const manifest = $getComponentManifestByElementId(editor, elementId ?? \"\");\n        const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);\n\n        this.bindingsProcessor = new BindingsProcessor(breakpointNames);\n        this.inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);\n\n        const document = this.editor.getDocumentState().read();\n        const editorState = this.editor.getEditorState().read();\n        const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n        this.currentBreakpoint = breakpoint;\n\n        // Initial setup.\n        this.calculateStuff(document, breakpoint);\n\n        autorun(() => {\n            const document = this.editor.getDocumentState().read();\n            const editorState = this.editor.getEditorState().read();\n            const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n\n            runInAction(() => {\n                this.currentBreakpoint = breakpoint;\n                this.calculateStuff(document, breakpoint);\n            });\n        });\n\n        makeAutoObservable(this);\n    }\n\n    get vm(): ElementBreakpointStyles {\n        return {\n            styles: this.localPreviewStyles ?? this.devFriendlyStyles,\n            metadata: this.elementMetadata,\n            inheritanceMap: this.inheritanceMap\n        };\n    }\n\n    onChange = (cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void) => {\n        if (!this.stylesProcessor) {\n            return;\n        }\n\n        const styles = new StylesValueObject(this.devFriendlyStyles);\n        cb({ styles, metadata: this.elementMetadata });\n\n        const finalStyles = styles.getAll();\n\n        const updatedStyles = this.stylesProcessor.createUpdate(\n            finalStyles,\n            this.currentBreakpoint\n        );\n\n        this.editor.updateDocument(document => {\n            updatedStyles.applyToDocument(document);\n            this.elementMetadata.applyToDocument(document);\n        });\n\n        this.localPreviewStyles = undefined;\n    };\n\n    onPreviewChange = (\n        cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void\n    ) => {\n        if (!this.stylesProcessor) {\n            return;\n        }\n\n        const styles = new StylesValueObject(structuredClone(toJS(this.devFriendlyStyles)));\n\n        cb({ styles, metadata: this.elementMetadata });\n\n        const finalStyles = styles.getAll();\n\n        this.localPreviewStyles = finalStyles;\n\n        const updatedStyles = this.stylesProcessor.createUpdate(\n            finalStyles,\n            this.currentBreakpoint\n        );\n\n        this.editor.executeCommand(Commands.PreviewPatchElement, {\n            elementId: this.elementId,\n            patch: updatedStyles.createJsonPatch(this.rawBindings)\n        });\n    };\n\n    private calculateStuff(document: Document, breakpoint: string) {\n        const bindings = document.bindings[this.elementId] ?? {};\n\n        this.rawBindings = bindings;\n        const resolvedBindings = this.bindingsProcessor.getBindings(bindings, breakpoint);\n\n        const inheritanceMap = this.inheritanceProcessor.getInheritanceMap(bindings, breakpoint);\n\n        this.inheritanceMap = inheritanceMap.styles;\n\n        this.stylesProcessor = new StylesBindingsProcessor(\n            this.elementId,\n            this.breakpointNames,\n            bindings\n        );\n\n        this.elementMetadata = new StylesMetadata(\n            new BreakpointElementMetadata(\n                this.breakpointNames,\n                breakpoint,\n                new ElementMetadata(this.elementId, bindings.metadata)\n            )\n        );\n\n        this.devFriendlyStyles = this.stylesProcessor.toDeepStyles(resolvedBindings.styles);\n    }\n}\n\nexport class StylesValueObject {\n    private readonly value: Record<string, any>;\n\n    constructor(value: any = {}) {\n        this.value = value;\n    }\n\n    set(key: string, value: any) {\n        this.value[key] = value;\n    }\n\n    get(key: string) {\n        return this.value[key];\n    }\n\n    getAll() {\n        return this.value;\n    }\n\n    unset(key: string) {\n        delete this.value[key];\n    }\n}\n"],"names":["StylesStore","editor","elementId","breakpointNames","NullMetadata","undefined","cb","styles","StylesValueObject","finalStyles","updatedStyles","document","structuredClone","toJS","Commands","manifest","$getComponentManifestByElementId","inputsAst","ComponentManifestToAstConverter","BindingsProcessor","InheritanceProcessor","editorState","breakpoint","BASE_BREAKPOINT","autorun","runInAction","makeAutoObservable","bindings","resolvedBindings","inheritanceMap","StylesBindingsProcessor","StylesMetadata","BreakpointElementMetadata","ElementMetadata","value","key"],"mappings":"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"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.js

@@ -43,6 +43,7 @@ const UnitValuePicker = (props)=>{
     }, /*#__PURE__*/ react.createElement(Input, {
         disabled: isAuto,
         size: "md",
+        variant: "secondary",
         value: isAuto ? "-" : props.value ?? defaultValue,
         onEnter: onEnter,
         autoSelect: true,
@@ -50,9 +51,10 @@ const UnitValuePicker = (props)=>{
         onBlur: (e)=>setValue(e.target.value),
         autoFocus: true
     })), /*#__PURE__*/ react.createElement("div", {
-        className: "flex-col"
+        className: "w-[80px] shrink-0"
     }, /*#__PURE__*/ react.createElement(Select, {
         size: "md",
+        variant: "secondary",
         value: props.unit,
         options: props.units,
         onChange: setUnit,

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Input, Select } from \"@webiny/admin-ui\";\n\nexport type UnitOption = {\n    label: string;\n    value: string;\n};\n\ninterface UnitValueProps {\n    value: string;\n    unit: string;\n    units: UnitOption[];\n    onChange: (value: string) => void;\n    onChangePreview: (value: string) => void;\n}\n\nclass Value {\n    static from(value: string | undefined) {\n        return value === \"auto\" ? 0 : parseInt(value ?? \"0\");\n    }\n}\n\nconst capTo100 = [\"%\", \"vh\", \"vw\"];\n\nexport const UnitValuePicker = (props: UnitValueProps) => {\n    const [editing, setEditing] = useState(false);\n\n    const defaultValue = editing ? \"\" : 0;\n\n    const isAuto = props.value === \"auto\";\n\n    const currentValue = Value.from(props.value);\n\n    const onEnter = () => {\n        setValue(props.value);\n    };\n\n    const setUnit = (unit: string) => {\n        const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;\n        props.onChange(unit === \"auto\" ? \"auto\" : `${value}${unit}`);\n    };\n\n    const setValue = (value: string) => {\n        const parsedValue = Value.from(value);\n        const finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        props.onChange(`${finalValue}${props.unit}`);\n    };\n\n    const setPreviewValue = (value: string) => {\n        setEditing(true);\n        let finalValue: string | number = \"\";\n        if (value !== \"\") {\n            const parsedValue = parseInt(value);\n            finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        }\n        props.onChangePreview(`${finalValue}${props.unit}`);\n    };\n\n    return (\n        <div className={\"flex flex-row space-x-sm\"}>\n            <div className={\"flex-col\"}>\n                <Input\n                    disabled={isAuto}\n                    size={\"md\"}\n                    value={isAuto ? \"-\" : (props.value ?? defaultValue)}\n                    onEnter={onEnter}\n                    autoSelect={true}\n                    onChange={value => setPreviewValue(value)}\n                    onBlur={e => setValue(e.target.value)}\n                    autoFocus={true}\n                />\n            </div>\n            <div className={\"flex-col\"}>\n                <Select\n                    size=\"md\"\n                    value={props.unit}\n                    options={props.units}\n                    onChange={setUnit}\n                    displayResetAction={false}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["Value","value","parseInt","capTo100","UnitValuePicker","props","editing","setEditing","useState","defaultValue","isAuto","currentValue","onEnter","setValue","setUnit","unit","parsedValue","finalValue","isNaN","setPreviewValue","Input","e","Select"],"mappings":";;AAgBA,MAAMA;IACF,OAAO,KAAKC,KAAyB,EAAE;QACnC,OAAOA,AAAU,WAAVA,QAAmB,IAAIC,SAASD,SAAS;IACpD;AACJ;AAEA,MAAME,WAAW;IAAC;IAAK;IAAM;CAAK;AAE3B,MAAMC,kBAAkB,CAACC;IAC5B,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAS;IAEvC,MAAMC,eAAeH,UAAU,KAAK;IAEpC,MAAMI,SAASL,AAAgB,WAAhBA,MAAM,KAAK;IAE1B,MAAMM,eAAeX,MAAM,IAAI,CAACK,MAAM,KAAK;IAE3C,MAAMO,UAAU;QACZC,SAASR,MAAM,KAAK;IACxB;IAEA,MAAMS,UAAU,CAACC;QACb,MAAMd,QAAQE,SAAS,QAAQ,CAACY,SAASJ,eAAe,MAAM,MAAMA;QACpEN,MAAM,QAAQ,CAACU,AAAS,WAATA,OAAkB,SAAS,GAAGd,QAAQc,MAAM;IAC/D;IAEA,MAAMF,WAAW,CAACZ;QACd,MAAMe,cAAchB,MAAM,IAAI,CAACC;QAC/B,MAAMgB,aAAaC,MAAMF,eAAe,IAAIA;QAC5CX,MAAM,QAAQ,CAAC,GAAGY,aAAaZ,MAAM,IAAI,EAAE;IAC/C;IAEA,MAAMc,kBAAkB,CAAClB;QACrBM,WAAW;QACX,IAAIU,aAA8B;QAClC,IAAIhB,AAAU,OAAVA,OAAc;YACd,MAAMe,cAAcd,SAASD;YAC7BgB,aAAaC,MAAMF,eAAe,IAAIA;QAC1C;QACAX,MAAM,eAAe,CAAC,GAAGY,aAAaZ,MAAM,IAAI,EAAE;IACtD;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACe,OAAKA;QACF,UAAUV;QACV,MAAM;QACN,OAAOA,SAAS,MAAOL,MAAM,KAAK,IAAII;QACtC,SAASG;QACT,YAAY;QACZ,UAAUX,CAAAA,QAASkB,gBAAgBlB;QACnC,QAAQoB,CAAAA,IAAKR,SAASQ,EAAE,MAAM,CAAC,KAAK;QACpC,WAAW;uBAGnB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAK;QACL,OAAOjB,MAAM,IAAI;QACjB,SAASA,MAAM,KAAK;QACpB,UAAUS;QACV,oBAAoB;;AAKxC"}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Input, Select } from \"@webiny/admin-ui\";\n\nexport type UnitOption = {\n    label: string;\n    value: string;\n};\n\ninterface UnitValueProps {\n    value: string;\n    unit: string;\n    units: UnitOption[];\n    onChange: (value: string) => void;\n    onChangePreview: (value: string) => void;\n}\n\nclass Value {\n    static from(value: string | undefined) {\n        return value === \"auto\" ? 0 : parseInt(value ?? \"0\");\n    }\n}\n\nconst capTo100 = [\"%\", \"vh\", \"vw\"];\n\nexport const UnitValuePicker = (props: UnitValueProps) => {\n    const [editing, setEditing] = useState(false);\n\n    const defaultValue = editing ? \"\" : 0;\n\n    const isAuto = props.value === \"auto\";\n\n    const currentValue = Value.from(props.value);\n\n    const onEnter = () => {\n        setValue(props.value);\n    };\n\n    const setUnit = (unit: string) => {\n        const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;\n        props.onChange(unit === \"auto\" ? \"auto\" : `${value}${unit}`);\n    };\n\n    const setValue = (value: string) => {\n        const parsedValue = Value.from(value);\n        const finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        props.onChange(`${finalValue}${props.unit}`);\n    };\n\n    const setPreviewValue = (value: string) => {\n        setEditing(true);\n        let finalValue: string | number = \"\";\n        if (value !== \"\") {\n            const parsedValue = parseInt(value);\n            finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        }\n        props.onChangePreview(`${finalValue}${props.unit}`);\n    };\n\n    return (\n        <div className={\"flex flex-row space-x-sm\"}>\n            <div className={\"flex-col\"}>\n                <Input\n                    disabled={isAuto}\n                    size={\"md\"}\n                    variant={\"secondary\"}\n                    value={isAuto ? \"-\" : (props.value ?? defaultValue)}\n                    onEnter={onEnter}\n                    autoSelect={true}\n                    onChange={value => setPreviewValue(value)}\n                    onBlur={e => setValue(e.target.value)}\n                    autoFocus={true}\n                />\n            </div>\n            <div className={\"w-[80px] shrink-0\"}>\n                <Select\n                    size={\"md\"}\n                    variant={\"secondary\"}\n                    value={props.unit}\n                    options={props.units}\n                    onChange={setUnit}\n                    displayResetAction={false}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["Value","value","parseInt","capTo100","UnitValuePicker","props","editing","setEditing","useState","defaultValue","isAuto","currentValue","onEnter","setValue","setUnit","unit","parsedValue","finalValue","isNaN","setPreviewValue","Input","e","Select"],"mappings":";;AAgBA,MAAMA;IACF,OAAO,KAAKC,KAAyB,EAAE;QACnC,OAAOA,AAAU,WAAVA,QAAmB,IAAIC,SAASD,SAAS;IACpD;AACJ;AAEA,MAAME,WAAW;IAAC;IAAK;IAAM;CAAK;AAE3B,MAAMC,kBAAkB,CAACC;IAC5B,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAS;IAEvC,MAAMC,eAAeH,UAAU,KAAK;IAEpC,MAAMI,SAASL,AAAgB,WAAhBA,MAAM,KAAK;IAE1B,MAAMM,eAAeX,MAAM,IAAI,CAACK,MAAM,KAAK;IAE3C,MAAMO,UAAU;QACZC,SAASR,MAAM,KAAK;IACxB;IAEA,MAAMS,UAAU,CAACC;QACb,MAAMd,QAAQE,SAAS,QAAQ,CAACY,SAASJ,eAAe,MAAM,MAAMA;QACpEN,MAAM,QAAQ,CAACU,AAAS,WAATA,OAAkB,SAAS,GAAGd,QAAQc,MAAM;IAC/D;IAEA,MAAMF,WAAW,CAACZ;QACd,MAAMe,cAAchB,MAAM,IAAI,CAACC;QAC/B,MAAMgB,aAAaC,MAAMF,eAAe,IAAIA;QAC5CX,MAAM,QAAQ,CAAC,GAAGY,aAAaZ,MAAM,IAAI,EAAE;IAC/C;IAEA,MAAMc,kBAAkB,CAAClB;QACrBM,WAAW;QACX,IAAIU,aAA8B;QAClC,IAAIhB,AAAU,OAAVA,OAAc;YACd,MAAMe,cAAcd,SAASD;YAC7BgB,aAAaC,MAAMF,eAAe,IAAIA;QAC1C;QACAX,MAAM,eAAe,CAAC,GAAGY,aAAaZ,MAAM,IAAI,EAAE;IACtD;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACe,OAAKA;QACF,UAAUV;QACV,MAAM;QACN,SAAS;QACT,OAAOA,SAAS,MAAOL,MAAM,KAAK,IAAII;QACtC,SAASG;QACT,YAAY;QACZ,UAAUX,CAAAA,QAASkB,gBAAgBlB;QACnC,QAAQoB,CAAAA,IAAKR,SAASQ,EAAE,MAAM,CAAC,KAAK;QACpC,WAAW;uBAGnB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAM;QACN,SAAS;QACT,OAAOjB,MAAM,IAAI;QACjB,SAASA,MAAM,KAAK;QACpB,UAAUS;QACV,oBAAoB;;AAKxC"}