@webiny/app-website-builder 6.3.0 → 6.4.0-beta.0

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

@@ -1 +1 @@
-{"version":3,"names":["React","observer","LinkedEditing","useStyles","ValueSelector","useStyleValue","UnitsOptions","widthOptions","widthUnits","getOptions","heightOptions","heightUnits","Padding","elementId","onChange","onPreviewChange","metadata","paddingTop","paddingRight","paddingBottom","paddingLeft","linked","get","onToggleLinkedEditing","styles","value","unit","set","onPaddingTopChange","onPaddingTopPreviewChange","onChangePreview","onReset","unset","rowClassname","createElement","className","style","top","left","onToggle","Object","assign","label","units","width","disabled","height","padding"],"sources":["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"],"mappings":"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","ignoreList":[]}
+{"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"}

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

@@ -1,20 +1,17 @@
-import React from "react";
+import react from "react";
 import { Accordion } from "@webiny/admin-ui";
 import { MarginPaddingControl } from "./MarginPadding/MarginPadding.js";
-export const MarginPadding = ({
-  elementId
-}) => {
-  return /*#__PURE__*/React.createElement(Accordion.Item, {
-    title: "Margin & Padding",
-    description: "Set spacing in and around the element"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: 280,
-      marginLeft: -8
-    }
-  }, /*#__PURE__*/React.createElement(MarginPaddingControl, {
-    elementId: elementId
-  })));
-};
+const MarginPadding = ({ elementId })=>/*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: "Margin & Padding",
+        description: "Set spacing in and around the element"
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            width: 280,
+            marginLeft: -8
+        }
+    }, /*#__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,"names":["React","Accordion","MarginPaddingControl","MarginPadding","elementId","createElement","Item","title","description","style","width","marginLeft"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,oBAAoB;AAM7B,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAA8B,CAAC,KAAK;EAChE,oBACIJ,KAAA,CAAAK,aAAA,CAACJ,SAAS,CAACK,IAAI;IACXC,KAAK,EAAE,kBAAmB;IAC1BC,WAAW,EAAE;EAAwC,gBAErDR,KAAA,CAAAK,aAAA;IAAKI,KAAK,EAAE;MAAEC,KAAK,EAAE,GAAG;MAAEC,UAAU,EAAE,CAAC;IAAE;EAAE,gBACvCX,KAAA,CAAAK,aAAA,CAACH,oBAAoB;IAACE,SAAS,EAAEA;EAAU,CAAE,CAC5C,CACO,CAAC;AAEzB,CAAC","ignoreList":[]}
+{"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"}

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

@@ -1,42 +1,33 @@
-import React from "react";
+import react from "react";
 import { observer } from "mobx-react-lite";
 import { Switch } from "@webiny/admin-ui";
 import { useStyles } from "../../useStyles.js";
 import { InheritanceLabel } from "../../../InheritanceLabel.js";
-export const Visibility = observer(({
-  elementId
-}) => {
-  const {
-    styles,
-    onChange,
-    inheritanceMap
-  } = useStyles(elementId);
-  const isVisible = styles.display !== "none";
-  const toggleVisibility = isHidden => {
-    onChange(({
-      styles
-    }) => {
-      styles.set("display", isHidden ? "none" : "flex");
+const Visibility = observer(({ elementId })=>{
+    const { styles, onChange, inheritanceMap } = useStyles(elementId);
+    const isVisible = "none" !== styles.display;
+    const toggleVisibility = (isHidden)=>{
+        onChange(({ styles })=>{
+            styles.set("display", isHidden ? "none" : "flex");
+        });
+    };
+    const onReset = ()=>{
+        onChange(({ styles })=>{
+            styles.unset("display");
+        });
+    };
+    const inheritance = inheritanceMap.display ?? {};
+    return /*#__PURE__*/ react.createElement(Switch, {
+        label: /*#__PURE__*/ react.createElement(InheritanceLabel, {
+            onReset: onReset,
+            isOverridden: inheritance?.overridden ?? false,
+            inheritedFrom: inheritance?.inheritedFrom,
+            text: "Hide element"
+        }),
+        checked: !isVisible,
+        onChange: toggleVisibility
     });
-  };
-  const onReset = () => {
-    onChange(({
-      styles
-    }) => {
-      styles.unset("display");
-    });
-  };
-  const inheritance = inheritanceMap.display ?? {};
-  return /*#__PURE__*/React.createElement(Switch, {
-    label: /*#__PURE__*/React.createElement(InheritanceLabel, {
-      onReset: onReset,
-      isOverridden: inheritance?.overridden ?? false,
-      inheritedFrom: inheritance?.inheritedFrom,
-      text: "Hide element"
-    }),
-    checked: !isVisible,
-    onChange: toggleVisibility
-  });
 });
+export { Visibility };
 
 //# sourceMappingURL=Visibility.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","observer","Switch","useStyles","InheritanceLabel","Visibility","elementId","styles","onChange","inheritanceMap","isVisible","display","toggleVisibility","isHidden","set","onReset","unset","inheritance","createElement","label","isOverridden","overridden","inheritedFrom","text","checked"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,SAAS;AAClB,SAASC,gBAAgB;AAMzB,OAAO,MAAMC,UAAU,GAAGJ,QAAQ,CAAC,CAAC;EAAEK;AAA2B,CAAC,KAAK;EACnE,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC;EAAe,CAAC,GAAGN,SAAS,CAACG,SAAS,CAAC;EAEjE,MAAMI,SAAS,GAAGH,MAAM,CAACI,OAAO,KAAK,MAAM;EAE3C,MAAMC,gBAAgB,GAAIC,QAAiB,IAAK;IAC5CL,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACO,GAAG,CAAC,SAAS,EAAED,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACrD,CAAC,CAAC;EACN,CAAC;EAED,MAAME,OAAO,GAAGA,CAAA,KAAM;IAClBP,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACS,KAAK,CAAC,SAAS,CAAC;IAC3B,CAAC,CAAC;EACN,CAAC;EAED,MAAMC,WAAW,GAAGR,cAAc,CAACE,OAAO,IAAI,CAAC,CAAC;EAEhD,oBACIX,KAAA,CAAAkB,aAAA,CAAChB,MAAM;IACHiB,KAAK,eACDnB,KAAA,CAAAkB,aAAA,CAACd,gBAAgB;MACbW,OAAO,EAAEA,OAAQ;MACjBK,YAAY,EAAEH,WAAW,EAAEI,UAAU,IAAI,KAAM;MAC/CC,aAAa,EAAEL,WAAW,EAAEK,aAAc;MAC1CC,IAAI,EAAE;IAAe,CACxB,CACJ;IACDC,OAAO,EAAE,CAACd,SAAU;IACpBF,QAAQ,EAAEI;EAAiB,CAC9B,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}
+{"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"}

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

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

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

@@ -1,15 +1,12 @@
-import React from "react";
+import react from "react";
 import { Accordion } from "@webiny/admin-ui";
 import { Visibility } from "./Visibility/index.js";
-export const VisibilityGroup = ({
-  elementId
-}) => {
-  return /*#__PURE__*/React.createElement(Accordion.Item, {
-    title: "Visibility",
-    description: "Set element visibility"
-  }, /*#__PURE__*/React.createElement(Visibility, {
-    elementId: elementId
-  }));
-};
+const VisibilityGroup = ({ elementId })=>/*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: "Visibility",
+        description: "Set element visibility"
+    }, /*#__PURE__*/ react.createElement(Visibility, {
+        elementId: elementId
+    }));
+export { VisibilityGroup };
 
 //# sourceMappingURL=VisibilityGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","Accordion","Visibility","VisibilityGroup","elementId","createElement","Item","title","description"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,UAAU;AAEnB,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC;AAA2B,CAAC,KAAK;EAC/D,oBACIJ,KAAA,CAAAK,aAAA,CAACJ,SAAS,CAACK,IAAI;IAACC,KAAK,EAAE,YAAa;IAACC,WAAW,EAAE;EAAyB,gBACvER,KAAA,CAAAK,aAAA,CAACH,UAAU;IAACE,SAAS,EAAEA;EAAU,CAAE,CACvB,CAAC;AAEzB,CAAC","ignoreList":[]}
+{"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"}

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import react, { useCallback } from "react";
 import { Accordion } from "@webiny/admin-ui";
 import { useActiveElement } from "../../../hooks/useActiveElement.js";
 import { Background } from "./Groups/Background.js";
@@ -8,35 +8,32 @@ import { VisibilityGroup } from "./Groups/VisibilityGroup.js";
 import { useElementComponentManifest } from "../../Content/Preview/useElementComponentManifest.js";
 import { StyleSettings } from "@webiny/website-builder-sdk";
 import { Layout } from "./Groups/Layout.js";
-export const StyleProperties = () => {
-  const [element] = useActiveElement();
-  if (!element) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(ElementStyleProperties, {
-    element: element
-  });
+const StyleProperties = ()=>{
+    const [element] = useActiveElement();
+    if (!element) return null;
+    return /*#__PURE__*/ react.createElement(ElementStyleProperties, {
+        element: element
+    });
 };
 const defaultHidden = [];
-const ElementStyleProperties = ({
-  element
-}) => {
-  const componentManifest = useElementComponentManifest(element.id);
-  const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;
-  const isHidden = useCallback(name => {
-    return hideStyles.includes(name);
-  }, [hideStyles]);
-  return /*#__PURE__*/React.createElement(Accordion, null, isHidden(StyleSettings.Layout) ? null : /*#__PURE__*/React.createElement(Layout, {
-    elementId: element.id
-  }), isHidden(StyleSettings.MarginPadding) ? null : /*#__PURE__*/React.createElement(MarginPadding, {
-    elementId: element.id
-  }), isHidden(StyleSettings.Border) ? null : /*#__PURE__*/React.createElement(Border, {
-    elementId: element.id
-  }), isHidden(StyleSettings.Background) ? null : /*#__PURE__*/React.createElement(Background, {
-    elementId: element.id
-  }), isHidden(StyleSettings.Visibility) ? null : /*#__PURE__*/React.createElement(VisibilityGroup, {
-    elementId: element.id
-  }));
+const ElementStyleProperties = ({ element })=>{
+    const componentManifest = useElementComponentManifest(element.id);
+    const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;
+    const isHidden = useCallback((name)=>hideStyles.includes(name), [
+        hideStyles
+    ]);
+    return /*#__PURE__*/ react.createElement(Accordion, null, isHidden(StyleSettings.Layout) ? null : /*#__PURE__*/ react.createElement(Layout, {
+        elementId: element.id
+    }), isHidden(StyleSettings.MarginPadding) ? null : /*#__PURE__*/ react.createElement(MarginPadding, {
+        elementId: element.id
+    }), isHidden(StyleSettings.Border) ? null : /*#__PURE__*/ react.createElement(Border, {
+        elementId: element.id
+    }), isHidden(StyleSettings.Background) ? null : /*#__PURE__*/ react.createElement(Background, {
+        elementId: element.id
+    }), isHidden(StyleSettings.Visibility) ? null : /*#__PURE__*/ react.createElement(VisibilityGroup, {
+        elementId: element.id
+    }));
 };
+export { StyleProperties };
 
 //# sourceMappingURL=StyleProperties.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","Accordion","useActiveElement","Background","Border","MarginPadding","VisibilityGroup","useElementComponentManifest","StyleSettings","Layout","StyleProperties","element","createElement","ElementStyleProperties","defaultHidden","componentManifest","id","hideStyles","hideStyleSettings","isHidden","name","includes","elementId","Visibility"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,gBAAgB;AAEzB,SAASC,UAAU;AACnB,SAASC,MAAM;AACf,SAASC,aAAa;AACtB,SAASC,eAAe;AACxB,SAASC,2BAA2B;AACpC,SAASC,aAAa,QAAQ,6BAA6B;AAC3D,SAASC,MAAM;AAEf,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAM,CAACC,OAAO,CAAC,GAAGT,gBAAgB,CAAC,CAAC;EACpC,IAAI,CAACS,OAAO,EAAE;IACV,OAAO,IAAI;EACf;EAEA,oBAAOZ,KAAA,CAAAa,aAAA,CAACC,sBAAsB;IAACF,OAAO,EAAEA;EAAQ,CAAE,CAAC;AACvD,CAAC;AAED,MAAMG,aAAuB,GAAG,EAAE;AAElC,MAAMD,sBAAsB,GAAGA,CAAC;EAAEF;AAAsC,CAAC,KAAK;EAC1E,MAAMI,iBAAiB,GAAGR,2BAA2B,CAACI,OAAO,CAACK,EAAE,CAAC;EACjE,MAAMC,UAAU,GAAGF,iBAAiB,EAAEG,iBAAiB,IAAIJ,aAAa;EAExE,MAAMK,QAAQ,GAAGnB,WAAW,CACvBoB,IAAY,IAAK;IACd,OAAOH,UAAU,CAACI,QAAQ,CAACD,IAAI,CAAC;EACpC,CAAC,EACD,CAACH,UAAU,CACf,CAAC;EAED,oBACIlB,KAAA,CAAAa,aAAA,CAACX,SAAS,QACLkB,QAAQ,CAACX,aAAa,CAACC,MAAM,CAAC,GAAG,IAAI,gBAAGV,KAAA,CAAAa,aAAA,CAACH,MAAM;IAACa,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAAC,EACzEG,QAAQ,CAACX,aAAa,CAACH,aAAa,CAAC,GAAG,IAAI,gBACzCN,KAAA,CAAAa,aAAA,CAACP,aAAa;IAACiB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAC1C,EACAG,QAAQ,CAACX,aAAa,CAACJ,MAAM,CAAC,GAAG,IAAI,gBAAGL,KAAA,CAAAa,aAAA,CAACR,MAAM;IAACkB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAAC,EACzEG,QAAQ,CAACX,aAAa,CAACL,UAAU,CAAC,GAAG,IAAI,gBAAGJ,KAAA,CAAAa,aAAA,CAACT,UAAU;IAACmB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAAC,EACjFG,QAAQ,CAACX,aAAa,CAACe,UAAU,CAAC,GAAG,IAAI,gBAAGxB,KAAA,CAAAa,aAAA,CAACN,eAAe;IAACgB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAC/E,CAAC;AAEpB,CAAC","ignoreList":[]}
+{"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"}

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

@@ -1,19 +1,20 @@
-import React from "react";
+import react from "react";
 import { Sidebar } from "../../../config/Sidebar/Sidebar.js";
 import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer.js";
 import { useActiveElement } from "../../../hooks/useActiveElement.js";
-export const StyleSettingsGroup = () => {
-  const [element] = useActiveElement();
-  return /*#__PURE__*/React.createElement(ScrollableContainer, {
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement(Sidebar.Group.Tab, {
-    name: "style",
-    label: "Style",
-    element: /*#__PURE__*/React.createElement(Sidebar.Elements, {
-      group: "style"
-    }),
-    noPadding: element ? true : false
-  }));
+const StyleSettingsGroup = ()=>{
+    const [element] = useActiveElement();
+    return /*#__PURE__*/ react.createElement(ScrollableContainer, {
+        tabIndex: -1
+    }, /*#__PURE__*/ react.createElement(Sidebar.Group.Tab, {
+        name: "style",
+        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,"names":["React","Sidebar","ScrollableContainer","useActiveElement","StyleSettingsGroup","element","createElement","tabIndex","Group","Tab","name","label","Elements","group","noPadding"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO;AAChB,SAASC,mBAAmB;AAC5B,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM,CAACC,OAAO,CAAC,GAAGF,gBAAgB,CAAC,CAAC;EAEpC,oBACIH,KAAA,CAAAM,aAAA,CAACJ,mBAAmB;IAACK,QAAQ,EAAE,CAAC;EAAE,gBAC9BP,KAAA,CAAAM,aAAA,CAACL,OAAO,CAACO,KAAK,CAACC,GAAG;IACdC,IAAI,EAAE,OAAQ;IACdC,KAAK,EAAE,OAAQ;IACfN,OAAO,eAAEL,KAAA,CAAAM,aAAA,CAACL,OAAO,CAACW,QAAQ;MAACC,KAAK,EAAE;IAAQ,CAAE,CAAE;IAC9CC,SAAS,EAAET,OAAO,GAAG,IAAI,GAAG;EAAM,CACrC,CACgB,CAAC;AAE9B,CAAC","ignoreList":[]}
+{"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"}

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

@@ -1,112 +1,104 @@
-import { StylesBindingsProcessor } from "@webiny/website-builder-sdk";
+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 { InheritanceProcessor } from "@webiny/website-builder-sdk";
-import { BindingsProcessor } from "@webiny/website-builder-sdk";
 import { $getComponentManifestByElementId } from "../../../../editorSdk/utils/index.js";
-import { ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
 import { BASE_BREAKPOINT } from "../../../../constants.js";
-export class StylesStore {
-  elementMetadata = new NullMetadata();
-  devFriendlyStyles = {};
-  localPreviewStyles = undefined;
-  inheritanceMap = {};
-  rawBindings = {};
-  constructor(editor, elementId, breakpointNames) {
-    this.editor = editor;
-    this.elementId = elementId;
-    this.breakpointNames = breakpointNames;
-    const manifest = $getComponentManifestByElementId(editor, elementId ?? "");
-    const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);
-    this.bindingsProcessor = new BindingsProcessor(breakpointNames);
-    this.inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);
-    const document = this.editor.getDocumentState().read();
-    const editorState = this.editor.getEditorState().read();
-    const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;
-    this.currentBreakpoint = breakpoint;
-
-    // Initial setup.
-    this.calculateStuff(document, breakpoint);
-    autorun(() => {
-      const document = this.editor.getDocumentState().read();
-      const editorState = this.editor.getEditorState().read();
-      const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;
-      runInAction(() => {
+class StylesStore {
+    constructor(editor, elementId, breakpointNames){
+        this.elementMetadata = new NullMetadata();
+        this.devFriendlyStyles = {};
+        this.localPreviewStyles = void 0;
+        this.inheritanceMap = {};
+        this.rawBindings = {};
+        this.onChange = (cb)=>{
+            if (!this.stylesProcessor) return;
+            const styles = new StylesValueObject(this.devFriendlyStyles);
+            cb({
+                styles,
+                metadata: this.elementMetadata
+            });
+            const finalStyles = styles.getAll();
+            const updatedStyles = this.stylesProcessor.createUpdate(finalStyles, this.currentBreakpoint);
+            this.editor.updateDocument((document)=>{
+                updatedStyles.applyToDocument(document);
+                this.elementMetadata.applyToDocument(document);
+            });
+            this.localPreviewStyles = void 0;
+        };
+        this.onPreviewChange = (cb)=>{
+            if (!this.stylesProcessor) return;
+            const styles = new StylesValueObject(structuredClone(this.devFriendlyStyles));
+            cb({
+                styles,
+                metadata: this.elementMetadata
+            });
+            const finalStyles = styles.getAll();
+            this.localPreviewStyles = finalStyles;
+            const updatedStyles = this.stylesProcessor.createUpdate(finalStyles, this.currentBreakpoint);
+            this.editor.executeCommand(Commands.PreviewPatchElement, {
+                elementId: this.elementId,
+                patch: updatedStyles.createJsonPatch(this.rawBindings)
+            });
+        };
+        this.editor = editor;
+        this.elementId = elementId;
+        this.breakpointNames = breakpointNames;
+        const manifest = $getComponentManifestByElementId(editor, elementId ?? "");
+        const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);
+        this.bindingsProcessor = new BindingsProcessor(breakpointNames);
+        this.inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);
+        const document = this.editor.getDocumentState().read();
+        const editorState = this.editor.getEditorState().read();
+        const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;
         this.currentBreakpoint = breakpoint;
         this.calculateStuff(document, breakpoint);
-      });
-    });
-    makeAutoObservable(this);
-  }
-  get vm() {
-    return {
-      styles: this.localPreviewStyles ?? this.devFriendlyStyles,
-      metadata: this.elementMetadata,
-      inheritanceMap: this.inheritanceMap
-    };
-  }
-  onChange = cb => {
-    if (!this.stylesProcessor) {
-      return;
+        autorun(()=>{
+            const document = this.editor.getDocumentState().read();
+            const editorState = this.editor.getEditorState().read();
+            const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;
+            runInAction(()=>{
+                this.currentBreakpoint = breakpoint;
+                this.calculateStuff(document, breakpoint);
+            });
+        });
+        makeAutoObservable(this);
+    }
+    get vm() {
+        return {
+            styles: this.localPreviewStyles ?? this.devFriendlyStyles,
+            metadata: this.elementMetadata,
+            inheritanceMap: this.inheritanceMap
+        };
     }
-    const styles = new StylesValueObject(this.devFriendlyStyles);
-    cb({
-      styles,
-      metadata: this.elementMetadata
-    });
-    const finalStyles = styles.getAll();
-    const updatedStyles = this.stylesProcessor.createUpdate(finalStyles, this.currentBreakpoint);
-    this.editor.updateDocument(document => {
-      updatedStyles.applyToDocument(document);
-      this.elementMetadata.applyToDocument(document);
-    });
-    this.localPreviewStyles = undefined;
-  };
-  onPreviewChange = cb => {
-    if (!this.stylesProcessor) {
-      return;
+    calculateStuff(document, breakpoint) {
+        const bindings = document.bindings[this.elementId] ?? {};
+        this.rawBindings = bindings;
+        const resolvedBindings = this.bindingsProcessor.getBindings(bindings, breakpoint);
+        const inheritanceMap = this.inheritanceProcessor.getInheritanceMap(bindings, breakpoint);
+        this.inheritanceMap = inheritanceMap.styles;
+        this.stylesProcessor = new StylesBindingsProcessor(this.elementId, this.breakpointNames, bindings);
+        this.elementMetadata = new StylesMetadata(new BreakpointElementMetadata(this.breakpointNames, breakpoint, new ElementMetadata(this.elementId, bindings.metadata)));
+        this.devFriendlyStyles = this.stylesProcessor.toDeepStyles(resolvedBindings.styles);
     }
-    const styles = new StylesValueObject(structuredClone(this.devFriendlyStyles));
-    cb({
-      styles,
-      metadata: this.elementMetadata
-    });
-    const finalStyles = styles.getAll();
-    this.localPreviewStyles = finalStyles;
-    const updatedStyles = this.stylesProcessor.createUpdate(finalStyles, this.currentBreakpoint);
-    this.editor.executeCommand(Commands.PreviewPatchElement, {
-      elementId: this.elementId,
-      patch: updatedStyles.createJsonPatch(this.rawBindings)
-    });
-  };
-  calculateStuff(document, breakpoint) {
-    const bindings = document.bindings[this.elementId] ?? {};
-    this.rawBindings = bindings;
-    const resolvedBindings = this.bindingsProcessor.getBindings(bindings, breakpoint);
-    const inheritanceMap = this.inheritanceProcessor.getInheritanceMap(bindings, breakpoint);
-    this.inheritanceMap = inheritanceMap.styles;
-    this.stylesProcessor = new StylesBindingsProcessor(this.elementId, this.breakpointNames, bindings);
-    this.elementMetadata = new StylesMetadata(new BreakpointElementMetadata(this.breakpointNames, breakpoint, new ElementMetadata(this.elementId, bindings.metadata)));
-    this.devFriendlyStyles = this.stylesProcessor.toDeepStyles(resolvedBindings.styles);
-  }
 }
-export class StylesValueObject {
-  constructor(value = {}) {
-    this.value = value;
-  }
-  set(key, value) {
-    this.value[key] = value;
-  }
-  get(key) {
-    return this.value[key];
-  }
-  getAll() {
-    return this.value;
-  }
-  unset(key) {
-    delete this.value[key];
-  }
+class StylesValueObject {
+    constructor(value = {}){
+        this.value = value;
+    }
+    set(key, value) {
+        this.value[key] = value;
+    }
+    get(key) {
+        return this.value[key];
+    }
+    getAll() {
+        return this.value;
+    }
+    unset(key) {
+        delete this.value[key];
+    }
 }
+export { StylesStore, StylesValueObject };
 
 //# sourceMappingURL=StylesStore.js.map