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

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

@@ -1,9 +1,9 @@
 import React from "react";
 import { Accordion, Grid } from "@webiny/admin-ui";
-import { BackgroundImage } from "./Background/BackgroundImage";
-import { BackgroundColor } from "./Background/BackgroundColor";
-import { BackgroundPosition } from "./Background/BackgroundPosition";
-import { BackgroundScaling } from "./Background/BackgroundScaling";
+import { BackgroundImage } from "./Background/BackgroundImage.js";
+import { BackgroundColor } from "./Background/BackgroundColor.js";
+import { BackgroundPosition } from "./Background/BackgroundPosition.js";
+import { BackgroundScaling } from "./Background/BackgroundScaling.js";
 export const Background = ({
   elementId
 }) => {

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

@@ -1 +1 @@
-{"version":3,"names":["React","Accordion","Grid","BackgroundImage","BackgroundColor","BackgroundPosition","BackgroundScaling","Background","elementId","createElement","Item","title","description","Column","span"],"sources":["Background.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion, Grid } from \"@webiny/admin-ui\";\nimport { BackgroundImage } from \"./Background/BackgroundImage\";\nimport { BackgroundColor } from \"./Background/BackgroundColor\";\nimport { BackgroundPosition } from \"./Background/BackgroundPosition\";\nimport { BackgroundScaling } from \"./Background/BackgroundScaling\";\n\ninterface BackgroundProps {\n    elementId: string;\n}\n\nexport const Background = ({ elementId }: BackgroundProps) => {\n    return (\n        <Accordion.Item title={\"Background\"} description={\"Set color and image background\"}>\n            <Grid>\n                <Grid.Column span={12}>\n                    <BackgroundColor elementId={elementId} />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <BackgroundImage elementId={elementId} />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <BackgroundPosition elementId={elementId} />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <BackgroundScaling elementId={elementId} />\n                </Grid.Column>\n            </Grid>\n        </Accordion.Item>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,IAAI,QAAQ,kBAAkB;AAClD,SAASC,eAAe;AACxB,SAASC,eAAe;AACxB,SAASC,kBAAkB;AAC3B,SAASC,iBAAiB;AAM1B,OAAO,MAAMC,UAAU,GAAGA,CAAC;EAAEC;AAA2B,CAAC,KAAK;EAC1D,oBACIR,KAAA,CAAAS,aAAA,CAACR,SAAS,CAACS,IAAI;IAACC,KAAK,EAAE,YAAa;IAACC,WAAW,EAAE;EAAiC,gBAC/EZ,KAAA,CAAAS,aAAA,CAACP,IAAI,qBACDF,KAAA,CAAAS,aAAA,CAACP,IAAI,CAACW,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBd,KAAA,CAAAS,aAAA,CAACL,eAAe;IAACI,SAAS,EAAEA;EAAU,CAAE,CAC/B,CAAC,eACdR,KAAA,CAAAS,aAAA,CAACP,IAAI,CAACW,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBd,KAAA,CAAAS,aAAA,CAACN,eAAe;IAACK,SAAS,EAAEA;EAAU,CAAE,CAC/B,CAAC,eACdR,KAAA,CAAAS,aAAA,CAACP,IAAI,CAACW,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBd,KAAA,CAAAS,aAAA,CAACJ,kBAAkB;IAACG,SAAS,EAAEA;EAAU,CAAE,CAClC,CAAC,eACdR,KAAA,CAAAS,aAAA,CAACP,IAAI,CAACW,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBd,KAAA,CAAAS,aAAA,CAACH,iBAAiB;IAACE,SAAS,EAAEA;EAAU,CAAE,CACjC,CACX,CACM,CAAC;AAEzB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Accordion","Grid","BackgroundImage","BackgroundColor","BackgroundPosition","BackgroundScaling","Background","elementId","createElement","Item","title","description","Column","span"],"sources":["Background.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion, Grid } from \"@webiny/admin-ui\";\nimport { BackgroundImage } from \"./Background/BackgroundImage.js\";\nimport { BackgroundColor } from \"./Background/BackgroundColor.js\";\nimport { BackgroundPosition } from \"./Background/BackgroundPosition.js\";\nimport { BackgroundScaling } from \"./Background/BackgroundScaling.js\";\n\ninterface BackgroundProps {\n    elementId: string;\n}\n\nexport const Background = ({ elementId }: BackgroundProps) => {\n    return (\n        <Accordion.Item title={\"Background\"} description={\"Set color and image background\"}>\n            <Grid>\n                <Grid.Column span={12}>\n                    <BackgroundColor elementId={elementId} />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <BackgroundImage elementId={elementId} />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <BackgroundPosition elementId={elementId} />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <BackgroundScaling elementId={elementId} />\n                </Grid.Column>\n            </Grid>\n        </Accordion.Item>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,IAAI,QAAQ,kBAAkB;AAClD,SAASC,eAAe;AACxB,SAASC,eAAe;AACxB,SAASC,kBAAkB;AAC3B,SAASC,iBAAiB;AAM1B,OAAO,MAAMC,UAAU,GAAGA,CAAC;EAAEC;AAA2B,CAAC,KAAK;EAC1D,oBACIR,KAAA,CAAAS,aAAA,CAACR,SAAS,CAACS,IAAI;IAACC,KAAK,EAAE,YAAa;IAACC,WAAW,EAAE;EAAiC,gBAC/EZ,KAAA,CAAAS,aAAA,CAACP,IAAI,qBACDF,KAAA,CAAAS,aAAA,CAACP,IAAI,CAACW,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBd,KAAA,CAAAS,aAAA,CAACL,eAAe;IAACI,SAAS,EAAEA;EAAU,CAAE,CAC/B,CAAC,eACdR,KAAA,CAAAS,aAAA,CAACP,IAAI,CAACW,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBd,KAAA,CAAAS,aAAA,CAACN,eAAe;IAACK,SAAS,EAAEA;EAAU,CAAE,CAC/B,CAAC,eACdR,KAAA,CAAAS,aAAA,CAACP,IAAI,CAACW,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBd,KAAA,CAAAS,aAAA,CAACJ,kBAAkB;IAACG,SAAS,EAAEA;EAAU,CAAE,CAClC,CAAC,eACdR,KAAA,CAAAS,aAAA,CAACP,IAAI,CAACW,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBd,KAAA,CAAAS,aAAA,CAACH,iBAAiB;IAACE,SAAS,EAAEA;EAAU,CAAE,CACjC,CACX,CACM,CAAC;AAEzB,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/Alignment.js

@@ -6,9 +6,9 @@ import { ReactComponent as CenterVertically } from "@webiny/icons/vertical_align
 import { ReactComponent as AlignLeft } from "@webiny/icons/align_horizontal_left.svg";
 import { ReactComponent as AlignRight } from "@webiny/icons/align_horizontal_right.svg";
 import { ReactComponent as CenterHorizontally } from "@webiny/icons/align_horizontal_center.svg";
-import { useStyles } from "../../useStyles";
-import { InheritanceLabel } from "../../../InheritanceLabel";
-import { IconButton } from "./IconButton";
+import { useStyles } from "../../useStyles.js";
+import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { IconButton } from "./IconButton.js";
 const activeVariant = "secondary";
 const inactiveVariant = "ghost";
 
@@ -119,7 +119,7 @@ export const Alignment = observer(({
     onReset: onReset,
     isOverridden: isOverridden
   }), /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-row wby-w-full wby-justify-between"
+    className: "flex flex-row w-full justify-between"
   }, /*#__PURE__*/React.createElement(IconButton, {
     icon: /*#__PURE__*/React.createElement(AlignLeft, null),
     variant: isLeftAligned ? activeVariant : inactiveVariant,

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/Alignment.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","observer","ReactComponent","AlignToBottom","AlignToTop","CenterVertically","AlignLeft","AlignRight","CenterHorizontally","useStyles","InheritanceLabel","IconButton","activeVariant","inactiveVariant","Alignment","elementId","styles","onChange","inheritanceMap","onAlignLeft","set","get","onAlignRight","onCenterHorizontally","onAlignTop","onCenterVertically","onAlignBottom","onReset","unset","isLeftAligned","marginRight","marginLeft","isHorizontallyCentered","isRightAligned","isAlignedToTop","marginBottom","marginTop","isAlignedToBottom","isVerticallyCentered","isOverridden","filter","Boolean","some","item","overridden","createElement","text","className","icon","variant","onClick","tooltip"],"sources":["Alignment.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ReactComponent as AlignToBottom } from \"@webiny/icons/vertical_align_bottom.svg\";\nimport { ReactComponent as AlignToTop } from \"@webiny/icons/vertical_align_top.svg\";\nimport { ReactComponent as CenterVertically } from \"@webiny/icons/vertical_align_center.svg\";\nimport { ReactComponent as AlignLeft } from \"@webiny/icons/align_horizontal_left.svg\";\nimport { ReactComponent as AlignRight } from \"@webiny/icons/align_horizontal_right.svg\";\nimport { ReactComponent as CenterHorizontally } from \"@webiny/icons/align_horizontal_center.svg\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel\";\nimport { IconButton } from \"./IconButton\";\n\nconst activeVariant = \"secondary\";\nconst inactiveVariant = \"ghost\";\n\n/**\n * Alignment is controlled with margin and display: flex.\n * -----\n * Align to the left => margin-right: auto;\n * Align to the right => margin-left: auto;\n * Center horizontally => margin-left: auto; margin-right: auto;\n * Full width: unset margin-left and margin-right.\n * -----\n * Align to the top => margin-bottom: auto;\n * Align to the bottom => margin-top: auto;\n * Center vertically => margin-top: auto; margin-bottom: auto;\n */\nexport const Alignment = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n\n    /**\n     * Horizontal alignment\n     */\n    const onAlignLeft = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginRight\", \"auto\");\n            if (styles.get(\"marginLeft\") === \"auto\") {\n                styles.set(\"marginLeft\", \"unset\");\n            }\n        });\n    };\n\n    const onAlignRight = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginLeft\", \"auto\");\n            if (styles.get(\"marginRight\") === \"auto\") {\n                styles.set(\"marginRight\", \"unset\");\n            }\n        });\n    };\n\n    const onCenterHorizontally = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginLeft\", \"auto\");\n            styles.set(\"marginRight\", \"auto\");\n        });\n    };\n\n    /**\n     * Vertical alignment\n     */\n    const onAlignTop = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginBottom\", \"auto\");\n            if (styles.get(\"marginTop\") === \"auto\") {\n                styles.set(\"marginTop\", \"unset\");\n            }\n        });\n    };\n\n    const onCenterVertically = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginTop\", \"auto\");\n            styles.set(\"marginBottom\", \"auto\");\n        });\n    };\n\n    const onAlignBottom = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginTop\", \"auto\");\n            if (styles.get(\"marginBottom\") === \"auto\") {\n                styles.set(\"marginBottom\", \"unset\");\n            }\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"width\");\n            styles.unset(\"marginTop\");\n            styles.unset(\"marginRight\");\n            styles.unset(\"marginBottom\");\n            styles.unset(\"marginLeft\");\n        });\n    };\n\n    const isLeftAligned = styles.marginRight === \"auto\" && styles.marginLeft !== \"auto\";\n    const isHorizontallyCentered = styles.marginRight === \"auto\" && styles.marginLeft === \"auto\";\n    const isRightAligned = styles.marginRight !== \"auto\" && styles.marginLeft === \"auto\";\n    const isAlignedToTop = styles.marginBottom === \"auto\" && styles.marginTop !== \"auto\";\n    const isAlignedToBottom = styles.marginBottom !== \"auto\" && styles.marginTop === \"auto\";\n    const isVerticallyCentered = styles.marginBottom === \"auto\" && styles.marginTop === \"auto\";\n\n    const isOverridden = [\n        inheritanceMap.marginTop,\n        inheritanceMap.marginRight,\n        inheritanceMap.marginBottom,\n        inheritanceMap.marginLeft\n    ]\n        .filter(Boolean)\n        .some(item => item.overridden);\n\n    return (\n        <div>\n            <InheritanceLabel text={\"Align\"} onReset={onReset} isOverridden={isOverridden} />\n            <div className={\"wby-flex wby-flex-row wby-w-full wby-justify-between\"}>\n                {/* Horizontal Alignment */}\n                <IconButton\n                    icon={<AlignLeft />}\n                    variant={isLeftAligned ? activeVariant : inactiveVariant}\n                    onClick={onAlignLeft}\n                    tooltip={\"Align to the left side\"}\n                />\n                <IconButton\n                    icon={<CenterHorizontally />}\n                    variant={isHorizontallyCentered ? activeVariant : inactiveVariant}\n                    onClick={onCenterHorizontally}\n                    tooltip={\"Center horizontally\"}\n                />\n                <IconButton\n                    icon={<AlignRight />}\n                    variant={isRightAligned ? activeVariant : inactiveVariant}\n                    onClick={onAlignRight}\n                    tooltip={\"Align to the right side\"}\n                />\n                {/* Vertical Alignment */}\n                <IconButton\n                    icon={<AlignToTop />}\n                    variant={isAlignedToTop ? activeVariant : inactiveVariant}\n                    onClick={onAlignTop}\n                    tooltip={\"Align to the top side\"}\n                />\n                <IconButton\n                    icon={<CenterVertically />}\n                    variant={isVerticallyCentered ? activeVariant : inactiveVariant}\n                    onClick={onCenterVertically}\n                    tooltip={\"Center vertically\"}\n                />\n                <IconButton\n                    icon={<AlignToBottom />}\n                    variant={isAlignedToBottom ? activeVariant : inactiveVariant}\n                    onClick={onAlignBottom}\n                    tooltip={\"Align to the bottom side\"}\n                />\n            </div>\n        </div>\n    );\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","observer","ReactComponent","AlignToBottom","AlignToTop","CenterVertically","AlignLeft","AlignRight","CenterHorizontally","useStyles","InheritanceLabel","IconButton","activeVariant","inactiveVariant","Alignment","elementId","styles","onChange","inheritanceMap","onAlignLeft","set","get","onAlignRight","onCenterHorizontally","onAlignTop","onCenterVertically","onAlignBottom","onReset","unset","isLeftAligned","marginRight","marginLeft","isHorizontallyCentered","isRightAligned","isAlignedToTop","marginBottom","marginTop","isAlignedToBottom","isVerticallyCentered","isOverridden","filter","Boolean","some","item","overridden","createElement","text","className","icon","variant","onClick","tooltip"],"sources":["Alignment.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ReactComponent as AlignToBottom } from \"@webiny/icons/vertical_align_bottom.svg\";\nimport { ReactComponent as AlignToTop } from \"@webiny/icons/vertical_align_top.svg\";\nimport { ReactComponent as CenterVertically } from \"@webiny/icons/vertical_align_center.svg\";\nimport { ReactComponent as AlignLeft } from \"@webiny/icons/align_horizontal_left.svg\";\nimport { ReactComponent as AlignRight } from \"@webiny/icons/align_horizontal_right.svg\";\nimport { ReactComponent as CenterHorizontally } from \"@webiny/icons/align_horizontal_center.svg\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel.js\";\nimport { IconButton } from \"./IconButton.js\";\n\nconst activeVariant = \"secondary\";\nconst inactiveVariant = \"ghost\";\n\n/**\n * Alignment is controlled with margin and display: flex.\n * -----\n * Align to the left => margin-right: auto;\n * Align to the right => margin-left: auto;\n * Center horizontally => margin-left: auto; margin-right: auto;\n * Full width: unset margin-left and margin-right.\n * -----\n * Align to the top => margin-bottom: auto;\n * Align to the bottom => margin-top: auto;\n * Center vertically => margin-top: auto; margin-bottom: auto;\n */\nexport const Alignment = observer(({ elementId }: { elementId: string }) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n\n    /**\n     * Horizontal alignment\n     */\n    const onAlignLeft = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginRight\", \"auto\");\n            if (styles.get(\"marginLeft\") === \"auto\") {\n                styles.set(\"marginLeft\", \"unset\");\n            }\n        });\n    };\n\n    const onAlignRight = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginLeft\", \"auto\");\n            if (styles.get(\"marginRight\") === \"auto\") {\n                styles.set(\"marginRight\", \"unset\");\n            }\n        });\n    };\n\n    const onCenterHorizontally = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginLeft\", \"auto\");\n            styles.set(\"marginRight\", \"auto\");\n        });\n    };\n\n    /**\n     * Vertical alignment\n     */\n    const onAlignTop = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginBottom\", \"auto\");\n            if (styles.get(\"marginTop\") === \"auto\") {\n                styles.set(\"marginTop\", \"unset\");\n            }\n        });\n    };\n\n    const onCenterVertically = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginTop\", \"auto\");\n            styles.set(\"marginBottom\", \"auto\");\n        });\n    };\n\n    const onAlignBottom = () => {\n        onChange(({ styles }) => {\n            styles.set(\"marginTop\", \"auto\");\n            if (styles.get(\"marginBottom\") === \"auto\") {\n                styles.set(\"marginBottom\", \"unset\");\n            }\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"width\");\n            styles.unset(\"marginTop\");\n            styles.unset(\"marginRight\");\n            styles.unset(\"marginBottom\");\n            styles.unset(\"marginLeft\");\n        });\n    };\n\n    const isLeftAligned = styles.marginRight === \"auto\" && styles.marginLeft !== \"auto\";\n    const isHorizontallyCentered = styles.marginRight === \"auto\" && styles.marginLeft === \"auto\";\n    const isRightAligned = styles.marginRight !== \"auto\" && styles.marginLeft === \"auto\";\n    const isAlignedToTop = styles.marginBottom === \"auto\" && styles.marginTop !== \"auto\";\n    const isAlignedToBottom = styles.marginBottom !== \"auto\" && styles.marginTop === \"auto\";\n    const isVerticallyCentered = styles.marginBottom === \"auto\" && styles.marginTop === \"auto\";\n\n    const isOverridden = [\n        inheritanceMap.marginTop,\n        inheritanceMap.marginRight,\n        inheritanceMap.marginBottom,\n        inheritanceMap.marginLeft\n    ]\n        .filter(Boolean)\n        .some(item => item.overridden);\n\n    return (\n        <div>\n            <InheritanceLabel text={\"Align\"} onReset={onReset} isOverridden={isOverridden} />\n            <div className={\"flex flex-row w-full justify-between\"}>\n                {/* Horizontal Alignment */}\n                <IconButton\n                    icon={<AlignLeft />}\n                    variant={isLeftAligned ? activeVariant : inactiveVariant}\n                    onClick={onAlignLeft}\n                    tooltip={\"Align to the left side\"}\n                />\n                <IconButton\n                    icon={<CenterHorizontally />}\n                    variant={isHorizontallyCentered ? activeVariant : inactiveVariant}\n                    onClick={onCenterHorizontally}\n                    tooltip={\"Center horizontally\"}\n                />\n                <IconButton\n                    icon={<AlignRight />}\n                    variant={isRightAligned ? activeVariant : inactiveVariant}\n                    onClick={onAlignRight}\n                    tooltip={\"Align to the right side\"}\n                />\n                {/* Vertical Alignment */}\n                <IconButton\n                    icon={<AlignToTop />}\n                    variant={isAlignedToTop ? activeVariant : inactiveVariant}\n                    onClick={onAlignTop}\n                    tooltip={\"Align to the top side\"}\n                />\n                <IconButton\n                    icon={<CenterVertically />}\n                    variant={isVerticallyCentered ? activeVariant : inactiveVariant}\n                    onClick={onCenterVertically}\n                    tooltip={\"Center vertically\"}\n                />\n                <IconButton\n                    icon={<AlignToBottom />}\n                    variant={isAlignedToBottom ? activeVariant : inactiveVariant}\n                    onClick={onAlignBottom}\n                    tooltip={\"Align to the bottom side\"}\n                />\n            </div>\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,cAAc,IAAIC,aAAa,QAAQ,yCAAyC;AACzF,SAASD,cAAc,IAAIE,UAAU,QAAQ,sCAAsC;AACnF,SAASF,cAAc,IAAIG,gBAAgB,QAAQ,yCAAyC;AAC5F,SAASH,cAAc,IAAII,SAAS,QAAQ,yCAAyC;AACrF,SAASJ,cAAc,IAAIK,UAAU,QAAQ,0CAA0C;AACvF,SAASL,cAAc,IAAIM,kBAAkB,QAAQ,2CAA2C;AAChG,SAASC,SAAS;AAClB,SAASC,gBAAgB;AACzB,SAASC,UAAU;AAEnB,MAAMC,aAAa,GAAG,WAAW;AACjC,MAAMC,eAAe,GAAG,OAAO;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAGb,QAAQ,CAAC,CAAC;EAAEc;AAAiC,CAAC,KAAK;EACxE,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC;EAAe,CAAC,GAAGT,SAAS,CAACM,SAAS,CAAC;;EAEjE;AACJ;AACA;EACI,MAAMI,WAAW,GAAGA,CAAA,KAAM;IACtBF,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACI,GAAG,CAAC,aAAa,EAAE,MAAM,CAAC;MACjC,IAAIJ,MAAM,CAACK,GAAG,CAAC,YAAY,CAAC,KAAK,MAAM,EAAE;QACrCL,MAAM,CAACI,GAAG,CAAC,YAAY,EAAE,OAAO,CAAC;MACrC;IACJ,CAAC,CAAC;EACN,CAAC;EAED,MAAME,YAAY,GAAGA,CAAA,KAAM;IACvBL,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACI,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC;MAChC,IAAIJ,MAAM,CAACK,GAAG,CAAC,aAAa,CAAC,KAAK,MAAM,EAAE;QACtCL,MAAM,CAACI,GAAG,CAAC,aAAa,EAAE,OAAO,CAAC;MACtC;IACJ,CAAC,CAAC;EACN,CAAC;EAED,MAAMG,oBAAoB,GAAGA,CAAA,KAAM;IAC/BN,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACI,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC;MAChCJ,MAAM,CAACI,GAAG,CAAC,aAAa,EAAE,MAAM,CAAC;IACrC,CAAC,CAAC;EACN,CAAC;;EAED;AACJ;AACA;EACI,MAAMI,UAAU,GAAGA,CAAA,KAAM;IACrBP,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACI,GAAG,CAAC,cAAc,EAAE,MAAM,CAAC;MAClC,IAAIJ,MAAM,CAACK,GAAG,CAAC,WAAW,CAAC,KAAK,MAAM,EAAE;QACpCL,MAAM,CAACI,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;MACpC;IACJ,CAAC,CAAC;EACN,CAAC;EAED,MAAMK,kBAAkB,GAAGA,CAAA,KAAM;IAC7BR,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACI,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC;MAC/BJ,MAAM,CAACI,GAAG,CAAC,cAAc,EAAE,MAAM,CAAC;IACtC,CAAC,CAAC;EACN,CAAC;EAED,MAAMM,aAAa,GAAGA,CAAA,KAAM;IACxBT,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACI,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC;MAC/B,IAAIJ,MAAM,CAACK,GAAG,CAAC,cAAc,CAAC,KAAK,MAAM,EAAE;QACvCL,MAAM,CAACI,GAAG,CAAC,cAAc,EAAE,OAAO,CAAC;MACvC;IACJ,CAAC,CAAC;EACN,CAAC;EAED,MAAMO,OAAO,GAAGA,CAAA,KAAM;IAClBV,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACY,KAAK,CAAC,OAAO,CAAC;MACrBZ,MAAM,CAACY,KAAK,CAAC,WAAW,CAAC;MACzBZ,MAAM,CAACY,KAAK,CAAC,aAAa,CAAC;MAC3BZ,MAAM,CAACY,KAAK,CAAC,cAAc,CAAC;MAC5BZ,MAAM,CAACY,KAAK,CAAC,YAAY,CAAC;IAC9B,CAAC,CAAC;EACN,CAAC;EAED,MAAMC,aAAa,GAAGb,MAAM,CAACc,WAAW,KAAK,MAAM,IAAId,MAAM,CAACe,UAAU,KAAK,MAAM;EACnF,MAAMC,sBAAsB,GAAGhB,MAAM,CAACc,WAAW,KAAK,MAAM,IAAId,MAAM,CAACe,UAAU,KAAK,MAAM;EAC5F,MAAME,cAAc,GAAGjB,MAAM,CAACc,WAAW,KAAK,MAAM,IAAId,MAAM,CAACe,UAAU,KAAK,MAAM;EACpF,MAAMG,cAAc,GAAGlB,MAAM,CAACmB,YAAY,KAAK,MAAM,IAAInB,MAAM,CAACoB,SAAS,KAAK,MAAM;EACpF,MAAMC,iBAAiB,GAAGrB,MAAM,CAACmB,YAAY,KAAK,MAAM,IAAInB,MAAM,CAACoB,SAAS,KAAK,MAAM;EACvF,MAAME,oBAAoB,GAAGtB,MAAM,CAACmB,YAAY,KAAK,MAAM,IAAInB,MAAM,CAACoB,SAAS,KAAK,MAAM;EAE1F,MAAMG,YAAY,GAAG,CACjBrB,cAAc,CAACkB,SAAS,EACxBlB,cAAc,CAACY,WAAW,EAC1BZ,cAAc,CAACiB,YAAY,EAC3BjB,cAAc,CAACa,UAAU,CAC5B,CACIS,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAACC,IAAI,IAAIA,IAAI,CAACC,UAAU,CAAC;EAElC,oBACI5C,KAAA,CAAA6C,aAAA,2BACI7C,KAAA,CAAA6C,aAAA,CAACnC,gBAAgB;IAACoC,IAAI,EAAE,OAAQ;IAACnB,OAAO,EAAEA,OAAQ;IAACY,YAAY,EAAEA;EAAa,CAAE,CAAC,eACjFvC,KAAA,CAAA6C,aAAA;IAAKE,SAAS,EAAE;EAAuC,gBAEnD/C,KAAA,CAAA6C,aAAA,CAAClC,UAAU;IACPqC,IAAI,eAAEhD,KAAA,CAAA6C,aAAA,CAACvC,SAAS,MAAE,CAAE;IACpB2C,OAAO,EAAEpB,aAAa,GAAGjB,aAAa,GAAGC,eAAgB;IACzDqC,OAAO,EAAE/B,WAAY;IACrBgC,OAAO,EAAE;EAAyB,CACrC,CAAC,eACFnD,KAAA,CAAA6C,aAAA,CAAClC,UAAU;IACPqC,IAAI,eAAEhD,KAAA,CAAA6C,aAAA,CAACrC,kBAAkB,MAAE,CAAE;IAC7ByC,OAAO,EAAEjB,sBAAsB,GAAGpB,aAAa,GAAGC,eAAgB;IAClEqC,OAAO,EAAE3B,oBAAqB;IAC9B4B,OAAO,EAAE;EAAsB,CAClC,CAAC,eACFnD,KAAA,CAAA6C,aAAA,CAAClC,UAAU;IACPqC,IAAI,eAAEhD,KAAA,CAAA6C,aAAA,CAACtC,UAAU,MAAE,CAAE;IACrB0C,OAAO,EAAEhB,cAAc,GAAGrB,aAAa,GAAGC,eAAgB;IAC1DqC,OAAO,EAAE5B,YAAa;IACtB6B,OAAO,EAAE;EAA0B,CACtC,CAAC,eAEFnD,KAAA,CAAA6C,aAAA,CAAClC,UAAU;IACPqC,IAAI,eAAEhD,KAAA,CAAA6C,aAAA,CAACzC,UAAU,MAAE,CAAE;IACrB6C,OAAO,EAAEf,cAAc,GAAGtB,aAAa,GAAGC,eAAgB;IAC1DqC,OAAO,EAAE1B,UAAW;IACpB2B,OAAO,EAAE;EAAwB,CACpC,CAAC,eACFnD,KAAA,CAAA6C,aAAA,CAAClC,UAAU;IACPqC,IAAI,eAAEhD,KAAA,CAAA6C,aAAA,CAACxC,gBAAgB,MAAE,CAAE;IAC3B4C,OAAO,EAAEX,oBAAoB,GAAG1B,aAAa,GAAGC,eAAgB;IAChEqC,OAAO,EAAEzB,kBAAmB;IAC5B0B,OAAO,EAAE;EAAoB,CAChC,CAAC,eACFnD,KAAA,CAAA6C,aAAA,CAAClC,UAAU;IACPqC,IAAI,eAAEhD,KAAA,CAAA6C,aAAA,CAAC1C,aAAa,MAAE,CAAE;IACxB8C,OAAO,EAAEZ,iBAAiB,GAAGzB,aAAa,GAAGC,eAAgB;IAC7DqC,OAAO,EAAExB,aAAc;IACvByB,OAAO,EAAE;EAA2B,CACvC,CACA,CACJ,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/LengthWithUnitInput.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type UnitOption } from "../../UnitValuePicker";
+import { type UnitOption } from "../../UnitValuePicker.js";
 interface LengthWithUnitInputProps {
     elementId: string;
     label: string;

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/LengthWithUnitInput.js

@@ -1,8 +1,8 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
-import { InheritanceLabel } from "../../../InheritanceLabel";
-import { useStyleValue } from "../../useStyleValue";
-import { UnitValuePicker } from "../../UnitValuePicker";
+import { InheritanceLabel } from "../../../InheritanceLabel.js";
+import { useStyleValue } from "../../useStyleValue.js";
+import { UnitValuePicker } from "../../UnitValuePicker.js";
 export const LengthWithUnitInput = observer(({
   elementId,
   label,
@@ -17,7 +17,7 @@ export const LengthWithUnitInput = observer(({
     isOverridden: style.overridden,
     inheritedFrom: style.inheritedFrom
   }), /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-row wby-w-full"
+    className: "flex flex-row w-full"
   }, /*#__PURE__*/React.createElement(UnitValuePicker, {
     value: style.value,
     unit: style.unit,

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Layout/LengthWithUnitInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","observer","InheritanceLabel","useStyleValue","UnitValuePicker","LengthWithUnitInput","elementId","label","propertyName","defaultValue","unitOptions","style","createElement","text","onReset","isOverridden","overridden","inheritedFrom","className","value","unit","units","onChange","onChangePreview"],"sources":["LengthWithUnitInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel\";\nimport { useStyleValue } from \"../../useStyleValue\";\nimport { UnitValuePicker, type UnitOption } from \"../../UnitValuePicker\";\n\ninterface LengthWithUnitInputProps {\n    elementId: string;\n    label: string;\n    propertyName: string;\n    unitOptions: UnitOption[];\n    defaultValue?: string;\n}\n\nexport const LengthWithUnitInput = observer(\n    ({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => {\n        const style = useStyleValue(elementId, propertyName, defaultValue);\n\n        return (\n            <div>\n                <InheritanceLabel\n                    text={label}\n                    onReset={style.onReset}\n                    isOverridden={style.overridden}\n                    inheritedFrom={style.inheritedFrom}\n                />\n                <div className={\"wby-flex wby-flex-row wby-w-full\"}>\n                    <UnitValuePicker\n                        value={style.value}\n                        unit={style.unit}\n                        units={unitOptions}\n                        onChange={style.onChange}\n                        onChangePreview={style.onChangePreview}\n                    />\n                </div>\n            </div>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,gBAAgB;AACzB,SAASC,aAAa;AACtB,SAASC,eAAe;AAUxB,OAAO,MAAMC,mBAAmB,GAAGJ,QAAQ,CACvC,CAAC;EAAEK,SAAS;EAAEC,KAAK;EAAEC,YAAY;EAAEC,YAAY;EAAEC;AAAsC,CAAC,KAAK;EACzF,MAAMC,KAAK,GAAGR,aAAa,CAACG,SAAS,EAAEE,YAAY,EAAEC,YAAY,CAAC;EAElE,oBACIT,KAAA,CAAAY,aAAA,2BACIZ,KAAA,CAAAY,aAAA,CAACV,gBAAgB;IACbW,IAAI,EAAEN,KAAM;IACZO,OAAO,EAAEH,KAAK,CAACG,OAAQ;IACvBC,YAAY,EAAEJ,KAAK,CAACK,UAAW;IAC/BC,aAAa,EAAEN,KAAK,CAACM;EAAc,CACtC,CAAC,eACFjB,KAAA,CAAAY,aAAA;IAAKM,SAAS,EAAE;EAAmC,gBAC/ClB,KAAA,CAAAY,aAAA,CAACR,eAAe;IACZe,KAAK,EAAER,KAAK,CAACQ,KAAM;IACnBC,IAAI,EAAET,KAAK,CAACS,IAAK;IACjBC,KAAK,EAAEX,WAAY;IACnBY,QAAQ,EAAEX,KAAK,CAACW,QAAS;IACzBC,eAAe,EAAEZ,KAAK,CAACY;EAAgB,CAC1C,CACA,CACJ,CAAC;AAEd,CACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["React","observer","InheritanceLabel","useStyleValue","UnitValuePicker","LengthWithUnitInput","elementId","label","propertyName","defaultValue","unitOptions","style","createElement","text","onReset","isOverridden","overridden","inheritedFrom","className","value","unit","units","onChange","onChangePreview"],"sources":["LengthWithUnitInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { InheritanceLabel } from \"../../../InheritanceLabel.js\";\nimport { useStyleValue } from \"../../useStyleValue.js\";\nimport { UnitValuePicker, type UnitOption } from \"../../UnitValuePicker.js\";\n\ninterface LengthWithUnitInputProps {\n    elementId: string;\n    label: string;\n    propertyName: string;\n    unitOptions: UnitOption[];\n    defaultValue?: string;\n}\n\nexport const LengthWithUnitInput = observer(\n    ({ elementId, label, propertyName, defaultValue, unitOptions }: LengthWithUnitInputProps) => {\n        const style = useStyleValue(elementId, propertyName, defaultValue);\n\n        return (\n            <div>\n                <InheritanceLabel\n                    text={label}\n                    onReset={style.onReset}\n                    isOverridden={style.overridden}\n                    inheritedFrom={style.inheritedFrom}\n                />\n                <div className={\"flex flex-row w-full\"}>\n                    <UnitValuePicker\n                        value={style.value}\n                        unit={style.unit}\n                        units={unitOptions}\n                        onChange={style.onChange}\n                        onChangePreview={style.onChangePreview}\n                    />\n                </div>\n            </div>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,gBAAgB;AACzB,SAASC,aAAa;AACtB,SAASC,eAAe;AAUxB,OAAO,MAAMC,mBAAmB,GAAGJ,QAAQ,CACvC,CAAC;EAAEK,SAAS;EAAEC,KAAK;EAAEC,YAAY;EAAEC,YAAY;EAAEC;AAAsC,CAAC,KAAK;EACzF,MAAMC,KAAK,GAAGR,aAAa,CAACG,SAAS,EAAEE,YAAY,EAAEC,YAAY,CAAC;EAElE,oBACIT,KAAA,CAAAY,aAAA,2BACIZ,KAAA,CAAAY,aAAA,CAACV,gBAAgB;IACbW,IAAI,EAAEN,KAAM;IACZO,OAAO,EAAEH,KAAK,CAACG,OAAQ;IACvBC,YAAY,EAAEJ,KAAK,CAACK,UAAW;IAC/BC,aAAa,EAAEN,KAAK,CAACM;EAAc,CACtC,CAAC,eACFjB,KAAA,CAAAY,aAAA;IAAKM,SAAS,EAAE;EAAuB,gBACnClB,KAAA,CAAAY,aAAA,CAACR,eAAe;IACZe,KAAK,EAAER,KAAK,CAACQ,KAAM;IACnBC,IAAI,EAAET,KAAK,CAACS,IAAK;IACjBC,KAAK,EAAEX,WAAY;IACnBY,QAAQ,EAAEX,KAAK,CAACW,QAAS;IACzBC,eAAe,EAAEZ,KAAK,CAACY;EAAgB,CAC1C,CACA,CACJ,CAAC;AAEd,CACJ,CAAC","ignoreList":[]}

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

@@ -1,8 +1,8 @@
 import React from "react";
 import { Accordion, Grid } from "@webiny/admin-ui";
-import { Alignment } from "./Layout/Alignment";
-import { LengthWithUnitInput } from "./Layout/LengthWithUnitInput";
-import { UnitsOptions } from "../UnitsOptions";
+import { Alignment } from "./Layout/Alignment.js";
+import { LengthWithUnitInput } from "./Layout/LengthWithUnitInput.js";
+import { UnitsOptions } from "../UnitsOptions.js";
 const widthOptions = UnitsOptions.widthUnits().add("auto").getOptions();
 const heightOptions = UnitsOptions.heightUnits().add("auto").getOptions();
 export const Layout = ({

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

@@ -1 +1 @@
-{"version":3,"names":["React","Accordion","Grid","Alignment","LengthWithUnitInput","UnitsOptions","widthOptions","widthUnits","add","getOptions","heightOptions","heightUnits","Layout","elementId","createElement","Item","title","description","Column","span","label","propertyName","defaultValue","unitOptions"],"sources":["Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion, Grid } from \"@webiny/admin-ui\";\nimport { Alignment } from \"./Layout/Alignment\";\nimport { LengthWithUnitInput } from \"./Layout/LengthWithUnitInput\";\nimport { UnitsOptions } from \"../UnitsOptions\";\n\ninterface LayoutProps {\n    elementId: string;\n}\n\nconst widthOptions = UnitsOptions.widthUnits().add(\"auto\").getOptions();\nconst heightOptions = UnitsOptions.heightUnits().add(\"auto\").getOptions();\n\nexport const Layout = ({ elementId }: LayoutProps) => {\n    return (\n        <Accordion.Item title={\"Layout\"} description={\"Set alignment, width, and height\"}>\n            <Grid>\n                <Grid.Column span={12}>\n                    <Alignment elementId={elementId} />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Width\"}\n                        propertyName={\"width\"}\n                        defaultValue={\"100%\"}\n                        unitOptions={widthOptions}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Height\"}\n                        propertyName={\"height\"}\n                        defaultValue={\"auto\"}\n                        unitOptions={heightOptions}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Max width\"}\n                        propertyName={\"maxWidth\"}\n                        defaultValue={\"auto\"}\n                        unitOptions={widthOptions}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Max height\"}\n                        propertyName={\"maxHeight\"}\n                        defaultValue={\"auto\"}\n                        unitOptions={heightOptions}\n                    />\n                </Grid.Column>\n            </Grid>\n        </Accordion.Item>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,IAAI,QAAQ,kBAAkB;AAClD,SAASC,SAAS;AAClB,SAASC,mBAAmB;AAC5B,SAASC,YAAY;AAMrB,MAAMC,YAAY,GAAGD,YAAY,CAACE,UAAU,CAAC,CAAC,CAACC,GAAG,CAAC,MAAM,CAAC,CAACC,UAAU,CAAC,CAAC;AACvE,MAAMC,aAAa,GAAGL,YAAY,CAACM,WAAW,CAAC,CAAC,CAACH,GAAG,CAAC,MAAM,CAAC,CAACC,UAAU,CAAC,CAAC;AAEzE,OAAO,MAAMG,MAAM,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EAClD,oBACIb,KAAA,CAAAc,aAAA,CAACb,SAAS,CAACc,IAAI;IAACC,KAAK,EAAE,QAAS;IAACC,WAAW,EAAE;EAAmC,gBAC7EjB,KAAA,CAAAc,aAAA,CAACZ,IAAI,qBACDF,KAAA,CAAAc,aAAA,CAACZ,IAAI,CAACgB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBnB,KAAA,CAAAc,aAAA,CAACX,SAAS;IAACU,SAAS,EAAEA;EAAU,CAAE,CACzB,CAAC,eACdb,KAAA,CAAAc,aAAA,CAACZ,IAAI,CAACgB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBnB,KAAA,CAAAc,aAAA,CAACV,mBAAmB;IAChBS,SAAS,EAAEA,SAAU;IACrBO,KAAK,EAAE,OAAQ;IACfC,YAAY,EAAE,OAAQ;IACtBC,YAAY,EAAE,MAAO;IACrBC,WAAW,EAAEjB;EAAa,CAC7B,CACQ,CAAC,eACdN,KAAA,CAAAc,aAAA,CAACZ,IAAI,CAACgB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBnB,KAAA,CAAAc,aAAA,CAACV,mBAAmB;IAChBS,SAAS,EAAEA,SAAU;IACrBO,KAAK,EAAE,QAAS;IAChBC,YAAY,EAAE,QAAS;IACvBC,YAAY,EAAE,MAAO;IACrBC,WAAW,EAAEb;EAAc,CAC9B,CACQ,CAAC,eACdV,KAAA,CAAAc,aAAA,CAACZ,IAAI,CAACgB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBnB,KAAA,CAAAc,aAAA,CAACV,mBAAmB;IAChBS,SAAS,EAAEA,SAAU;IACrBO,KAAK,EAAE,WAAY;IACnBC,YAAY,EAAE,UAAW;IACzBC,YAAY,EAAE,MAAO;IACrBC,WAAW,EAAEjB;EAAa,CAC7B,CACQ,CAAC,eACdN,KAAA,CAAAc,aAAA,CAACZ,IAAI,CAACgB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBnB,KAAA,CAAAc,aAAA,CAACV,mBAAmB;IAChBS,SAAS,EAAEA,SAAU;IACrBO,KAAK,EAAE,YAAa;IACpBC,YAAY,EAAE,WAAY;IAC1BC,YAAY,EAAE,MAAO;IACrBC,WAAW,EAAEb;EAAc,CAC9B,CACQ,CACX,CACM,CAAC;AAEzB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Accordion","Grid","Alignment","LengthWithUnitInput","UnitsOptions","widthOptions","widthUnits","add","getOptions","heightOptions","heightUnits","Layout","elementId","createElement","Item","title","description","Column","span","label","propertyName","defaultValue","unitOptions"],"sources":["Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion, Grid } from \"@webiny/admin-ui\";\nimport { Alignment } from \"./Layout/Alignment.js\";\nimport { LengthWithUnitInput } from \"./Layout/LengthWithUnitInput.js\";\nimport { UnitsOptions } from \"../UnitsOptions.js\";\n\ninterface LayoutProps {\n    elementId: string;\n}\n\nconst widthOptions = UnitsOptions.widthUnits().add(\"auto\").getOptions();\nconst heightOptions = UnitsOptions.heightUnits().add(\"auto\").getOptions();\n\nexport const Layout = ({ elementId }: LayoutProps) => {\n    return (\n        <Accordion.Item title={\"Layout\"} description={\"Set alignment, width, and height\"}>\n            <Grid>\n                <Grid.Column span={12}>\n                    <Alignment elementId={elementId} />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Width\"}\n                        propertyName={\"width\"}\n                        defaultValue={\"100%\"}\n                        unitOptions={widthOptions}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Height\"}\n                        propertyName={\"height\"}\n                        defaultValue={\"auto\"}\n                        unitOptions={heightOptions}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Max width\"}\n                        propertyName={\"maxWidth\"}\n                        defaultValue={\"auto\"}\n                        unitOptions={widthOptions}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <LengthWithUnitInput\n                        elementId={elementId}\n                        label={\"Max height\"}\n                        propertyName={\"maxHeight\"}\n                        defaultValue={\"auto\"}\n                        unitOptions={heightOptions}\n                    />\n                </Grid.Column>\n            </Grid>\n        </Accordion.Item>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,IAAI,QAAQ,kBAAkB;AAClD,SAASC,SAAS;AAClB,SAASC,mBAAmB;AAC5B,SAASC,YAAY;AAMrB,MAAMC,YAAY,GAAGD,YAAY,CAACE,UAAU,CAAC,CAAC,CAACC,GAAG,CAAC,MAAM,CAAC,CAACC,UAAU,CAAC,CAAC;AACvE,MAAMC,aAAa,GAAGL,YAAY,CAACM,WAAW,CAAC,CAAC,CAACH,GAAG,CAAC,MAAM,CAAC,CAACC,UAAU,CAAC,CAAC;AAEzE,OAAO,MAAMG,MAAM,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EAClD,oBACIb,KAAA,CAAAc,aAAA,CAACb,SAAS,CAACc,IAAI;IAACC,KAAK,EAAE,QAAS;IAACC,WAAW,EAAE;EAAmC,gBAC7EjB,KAAA,CAAAc,aAAA,CAACZ,IAAI,qBACDF,KAAA,CAAAc,aAAA,CAACZ,IAAI,CAACgB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBnB,KAAA,CAAAc,aAAA,CAACX,SAAS;IAACU,SAAS,EAAEA;EAAU,CAAE,CACzB,CAAC,eACdb,KAAA,CAAAc,aAAA,CAACZ,IAAI,CAACgB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBnB,KAAA,CAAAc,aAAA,CAACV,mBAAmB;IAChBS,SAAS,EAAEA,SAAU;IACrBO,KAAK,EAAE,OAAQ;IACfC,YAAY,EAAE,OAAQ;IACtBC,YAAY,EAAE,MAAO;IACrBC,WAAW,EAAEjB;EAAa,CAC7B,CACQ,CAAC,eACdN,KAAA,CAAAc,aAAA,CAACZ,IAAI,CAACgB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBnB,KAAA,CAAAc,aAAA,CAACV,mBAAmB;IAChBS,SAAS,EAAEA,SAAU;IACrBO,KAAK,EAAE,QAAS;IAChBC,YAAY,EAAE,QAAS;IACvBC,YAAY,EAAE,MAAO;IACrBC,WAAW,EAAEb;EAAc,CAC9B,CACQ,CAAC,eACdV,KAAA,CAAAc,aAAA,CAACZ,IAAI,CAACgB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBnB,KAAA,CAAAc,aAAA,CAACV,mBAAmB;IAChBS,SAAS,EAAEA,SAAU;IACrBO,KAAK,EAAE,WAAY;IACnBC,YAAY,EAAE,UAAW;IACzBC,YAAY,EAAE,MAAO;IACrBC,WAAW,EAAEjB;EAAa,CAC7B,CACQ,CAAC,eACdN,KAAA,CAAAc,aAAA,CAACZ,IAAI,CAACgB,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBnB,KAAA,CAAAc,aAAA,CAACV,mBAAmB;IAChBS,SAAS,EAAEA,SAAU;IACrBO,KAAK,EAAE,YAAa;IACpBC,YAAY,EAAE,WAAY;IAC1BC,YAAY,EAAE,MAAO;IACrBC,WAAW,EAAEb;EAAc,CAC9B,CACQ,CACX,CACM,CAAC;AAEzB,CAAC","ignoreList":[]}

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

@@ -7,7 +7,7 @@ export const LinkedEditing = ({
   onToggle
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-absolute wby-cursor-pointer wby-fill-neutral-strong",
+    className: "absolute cursor-pointer fill-neutral-strong",
     style: {
       top: 2,
       right: 4

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

@@ -1 +1 @@
-{"version":3,"names":["React","Icon","ReactComponent","LinkOn","LinkOff","LinkedEditing","linked","onToggle","createElement","className","style","top","right","icon","label","size","onClick"],"sources":["LinkedEditing.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as LinkOn } from \"@webiny/icons/link.svg\";\nimport { ReactComponent as LinkOff } from \"@webiny/icons/link_off.svg\";\n\ninterface LinkedEditingProps {\n    linked: boolean;\n    onToggle: (linked: boolean) => void;\n}\n\nexport const LinkedEditing = ({ linked, onToggle }: LinkedEditingProps) => {\n    return (\n        <div\n            className={\"wby-absolute wby-cursor-pointer wby-fill-neutral-strong\"}\n            style={{ top: 2, right: 4 }}\n        >\n            {linked ? (\n                <Icon\n                    icon={<LinkOff />}\n                    label={\"Disable linked editing.\"}\n                    size={\"sm\"}\n                    onClick={() => onToggle(false)}\n                />\n            ) : (\n                <Icon\n                    icon={<LinkOn />}\n                    label={\"Enable linked editing.\"}\n                    size={\"sm\"}\n                    onClick={() => onToggle(true)}\n                />\n            )}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,cAAc,IAAIC,MAAM,QAAQ,wBAAwB;AACjE,SAASD,cAAc,IAAIE,OAAO,QAAQ,4BAA4B;AAOtE,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC,MAAM;EAAEC;AAA6B,CAAC,KAAK;EACvE,oBACIP,KAAA,CAAAQ,aAAA;IACIC,SAAS,EAAE,yDAA0D;IACrEC,KAAK,EAAE;MAAEC,GAAG,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE;EAAE,GAE3BN,MAAM,gBACHN,KAAA,CAAAQ,aAAA,CAACP,IAAI;IACDY,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACJ,OAAO,MAAE,CAAE;IAClBU,KAAK,EAAE,yBAA0B;IACjCC,IAAI,EAAE,IAAK;IACXC,OAAO,EAAEA,CAAA,KAAMT,QAAQ,CAAC,KAAK;EAAE,CAClC,CAAC,gBAEFP,KAAA,CAAAQ,aAAA,CAACP,IAAI;IACDY,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACL,MAAM,MAAE,CAAE;IACjBW,KAAK,EAAE,wBAAyB;IAChCC,IAAI,EAAE,IAAK;IACXC,OAAO,EAAEA,CAAA,KAAMT,QAAQ,CAAC,IAAI;EAAE,CACjC,CAEJ,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Icon","ReactComponent","LinkOn","LinkOff","LinkedEditing","linked","onToggle","createElement","className","style","top","right","icon","label","size","onClick"],"sources":["LinkedEditing.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as LinkOn } from \"@webiny/icons/link.svg\";\nimport { ReactComponent as LinkOff } from \"@webiny/icons/link_off.svg\";\n\ninterface LinkedEditingProps {\n    linked: boolean;\n    onToggle: (linked: boolean) => void;\n}\n\nexport const LinkedEditing = ({ linked, onToggle }: LinkedEditingProps) => {\n    return (\n        <div className={\"absolute cursor-pointer fill-neutral-strong\"} style={{ top: 2, right: 4 }}>\n            {linked ? (\n                <Icon\n                    icon={<LinkOff />}\n                    label={\"Disable linked editing.\"}\n                    size={\"sm\"}\n                    onClick={() => onToggle(false)}\n                />\n            ) : (\n                <Icon\n                    icon={<LinkOn />}\n                    label={\"Enable linked editing.\"}\n                    size={\"sm\"}\n                    onClick={() => onToggle(true)}\n                />\n            )}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,cAAc,IAAIC,MAAM,QAAQ,wBAAwB;AACjE,SAASD,cAAc,IAAIE,OAAO,QAAQ,4BAA4B;AAOtE,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC,MAAM;EAAEC;AAA6B,CAAC,KAAK;EACvE,oBACIP,KAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAE,6CAA8C;IAACC,KAAK,EAAE;MAAEC,GAAG,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE;EAAE,GACtFN,MAAM,gBACHN,KAAA,CAAAQ,aAAA,CAACP,IAAI;IACDY,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACJ,OAAO,MAAE,CAAE;IAClBU,KAAK,EAAE,yBAA0B;IACjCC,IAAI,EAAE,IAAK;IACXC,OAAO,EAAEA,CAAA,KAAMT,QAAQ,CAAC,KAAK;EAAE,CAClC,CAAC,gBAEFP,KAAA,CAAAQ,aAAA,CAACP,IAAI;IACDY,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACL,MAAM,MAAE,CAAE;IACjBW,KAAK,EAAE,wBAAyB;IAChCC,IAAI,EAAE,IAAK;IACXC,OAAO,EAAEA,CAAA,KAAMT,QAAQ,CAAC,IAAI;EAAE,CACjC,CAEJ,CAAC;AAEd,CAAC","ignoreList":[]}

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

@@ -1,10 +1,10 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
-import { useStyles } from "../../useStyles";
-import { LinkedEditing } from "./LinkedEditing";
-import { ValueSelector } from "../../ValueSelector";
-import { UnitsOptions } from "../../UnitsOptions";
-import { useStyleValue } from "../../useStyleValue";
+import { useStyles } from "../../useStyles.js";
+import { LinkedEditing } from "./LinkedEditing.js";
+import { ValueSelector } from "../../ValueSelector.js";
+import { UnitsOptions } from "../../UnitsOptions.js";
+import { useStyleValue } from "../../useStyleValue.js";
 const additionalUnits = ["auto", "unset"];
 const widthOptions = UnitsOptions.widthUnits().add(...additionalUnits).getOptions();
 const heightOptions = UnitsOptions.heightUnits().add(...additionalUnits).getOptions();
@@ -79,11 +79,11 @@ export const Margin = observer(({
       marginTop.onReset();
     }
   };
-  const rowClassname = "wby-flex wby-flex-row wby-w-full wby-justify-center wby-items-center";
+  const rowClassname = "flex flex-row w-full justify-center items-center";
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-col wby-rounded-md wby-relative"
+    className: "flex flex-col rounded-md relative"
   }, /*#__PURE__*/React.createElement("span", {
-    className: "wby-absolute wby-text-sm",
+    className: "absolute text-sm",
     style: {
       top: 5,
       left: 7

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

@@ -1 +1 @@
-{"version":3,"names":["React","observer","useStyles","LinkedEditing","ValueSelector","UnitsOptions","useStyleValue","additionalUnits","widthOptions","widthUnits","add","getOptions","heightOptions","heightUnits","Margin","elementId","children","onChange","onPreviewChange","metadata","marginTop","marginRight","marginBottom","marginLeft","linked","get","onToggleLinkedEditing","styles","isKeyword","value","unit","set","onMarginTopChange","onMarginTopPreviewChange","onChangePreview","onReset","unset","rowClassname","createElement","className","style","top","left","paddingTop","Object","assign","label","units","onToggle","disabled","padding"],"sources":["Margin.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useStyles } from \"../../useStyles\";\nimport { LinkedEditing } from \"./LinkedEditing\";\nimport { ValueSelector } from \"../../ValueSelector\";\nimport { UnitsOptions } from \"../../UnitsOptions\";\nimport { useStyleValue } from \"../../useStyleValue\";\n\nconst additionalUnits = [\"auto\", \"unset\"];\n\nconst widthOptions = UnitsOptions.widthUnits()\n    .add(...additionalUnits)\n    .getOptions();\n\nconst heightOptions = UnitsOptions.heightUnits()\n    .add(...additionalUnits)\n    .getOptions();\n\ninterface MarginProps {\n    elementId: string;\n    children: React.ReactNode;\n}\n\nexport const Margin = observer(({ elementId, children }: MarginProps) => {\n    const { onChange, onPreviewChange, metadata } = useStyles(elementId);\n\n    const marginTop = useStyleValue(elementId, \"marginTop\");\n    const marginRight = useStyleValue(elementId, \"marginRight\");\n    const marginBottom = useStyleValue(elementId, \"marginBottom\");\n    const marginLeft = useStyleValue(elementId, \"marginLeft\");\n\n    const linked = metadata.get<boolean>(\"marginLinkedEditing\") ?? true;\n\n    const onToggleLinkedEditing = (linked: boolean) => {\n        onChange(({ styles, metadata }) => {\n            if (linked) {\n                const isKeyword = marginTop.isKeyword;\n                const value = isKeyword\n                    ? marginTop.value\n                    : `${marginTop.value ?? 0}${marginTop.unit}`;\n                styles.set(\"marginRight\", value);\n                styles.set(\"marginBottom\", value);\n                styles.set(\"marginLeft\", value);\n            }\n            metadata.set(\"marginLinkedEditing\", linked);\n        });\n    };\n\n    const onMarginTopChange = (value: string) => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.set(\"marginTop\", value);\n                styles.set(\"marginRight\", value);\n                styles.set(\"marginBottom\", value);\n                styles.set(\"marginLeft\", value);\n            });\n        } else {\n            marginTop.onChange(value);\n        }\n    };\n\n    const onMarginTopPreviewChange = (value: string) => {\n        if (linked) {\n            onPreviewChange(({ styles }) => {\n                styles.set(\"marginTop\", value);\n                styles.set(\"marginRight\", value);\n                styles.set(\"marginBottom\", value);\n                styles.set(\"marginLeft\", value);\n            });\n        } else {\n            marginTop.onChangePreview(value);\n        }\n    };\n\n    const onReset = () => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.unset(\"marginTop\");\n                styles.unset(\"marginRight\");\n                styles.unset(\"marginBottom\");\n                styles.unset(\"marginLeft\");\n            });\n        } else {\n            marginTop.onReset();\n        }\n    };\n\n    const rowClassname = \"wby-flex wby-flex-row wby-w-full wby-justify-center wby-items-center\";\n\n    return (\n        <div className=\"wby-flex wby-flex-col wby-rounded-md wby-relative\">\n            {/* Margin Label */}\n            <span className=\"wby-absolute wby-text-sm\" style={{ top: 5, left: 7 }}>\n                Margin\n            </span>\n\n            {/* Top Margin */}\n            <div className={rowClassname} style={{ paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={linked ? \"Margin\" : \"Top margin\"}\n                    {...marginTop}\n                    onReset={onReset}\n                    units={heightOptions}\n                    onChange={onMarginTopChange}\n                    onChangePreview={onMarginTopPreviewChange}\n                />\n            </div>\n\n            <LinkedEditing linked={linked} onToggle={onToggleLinkedEditing} />\n\n            {/* Middle Row (Left Margin + Padding Box + Right Margin) */}\n            <div className={rowClassname} style={{ paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={\"Left margin\"}\n                    {...marginLeft}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n                {children}\n                <ValueSelector\n                    label={\"Right margin\"}\n                    {...marginRight}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n            </div>\n\n            {/* Bottom Margin */}\n            <div className={rowClassname} style={{ padding: \"8px 0\" }}>\n                <ValueSelector\n                    label={\"Bottom margin\"}\n                    {...marginBottom}\n                    units={heightOptions}\n                    disabled={linked}\n                />\n            </div>\n        </div>\n    );\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","observer","useStyles","LinkedEditing","ValueSelector","UnitsOptions","useStyleValue","additionalUnits","widthOptions","widthUnits","add","getOptions","heightOptions","heightUnits","Margin","elementId","children","onChange","onPreviewChange","metadata","marginTop","marginRight","marginBottom","marginLeft","linked","get","onToggleLinkedEditing","styles","isKeyword","value","unit","set","onMarginTopChange","onMarginTopPreviewChange","onChangePreview","onReset","unset","rowClassname","createElement","className","style","top","left","paddingTop","Object","assign","label","units","onToggle","disabled","padding"],"sources":["Margin.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useStyles } from \"../../useStyles.js\";\nimport { LinkedEditing } from \"./LinkedEditing.js\";\nimport { ValueSelector } from \"../../ValueSelector.js\";\nimport { UnitsOptions } from \"../../UnitsOptions.js\";\nimport { useStyleValue } from \"../../useStyleValue.js\";\n\nconst additionalUnits = [\"auto\", \"unset\"];\n\nconst widthOptions = UnitsOptions.widthUnits()\n    .add(...additionalUnits)\n    .getOptions();\n\nconst heightOptions = UnitsOptions.heightUnits()\n    .add(...additionalUnits)\n    .getOptions();\n\ninterface MarginProps {\n    elementId: string;\n    children: React.ReactNode;\n}\n\nexport const Margin = observer(({ elementId, children }: MarginProps) => {\n    const { onChange, onPreviewChange, metadata } = useStyles(elementId);\n\n    const marginTop = useStyleValue(elementId, \"marginTop\");\n    const marginRight = useStyleValue(elementId, \"marginRight\");\n    const marginBottom = useStyleValue(elementId, \"marginBottom\");\n    const marginLeft = useStyleValue(elementId, \"marginLeft\");\n\n    const linked = metadata.get<boolean>(\"marginLinkedEditing\") ?? true;\n\n    const onToggleLinkedEditing = (linked: boolean) => {\n        onChange(({ styles, metadata }) => {\n            if (linked) {\n                const isKeyword = marginTop.isKeyword;\n                const value = isKeyword\n                    ? marginTop.value\n                    : `${marginTop.value ?? 0}${marginTop.unit}`;\n                styles.set(\"marginRight\", value);\n                styles.set(\"marginBottom\", value);\n                styles.set(\"marginLeft\", value);\n            }\n            metadata.set(\"marginLinkedEditing\", linked);\n        });\n    };\n\n    const onMarginTopChange = (value: string) => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.set(\"marginTop\", value);\n                styles.set(\"marginRight\", value);\n                styles.set(\"marginBottom\", value);\n                styles.set(\"marginLeft\", value);\n            });\n        } else {\n            marginTop.onChange(value);\n        }\n    };\n\n    const onMarginTopPreviewChange = (value: string) => {\n        if (linked) {\n            onPreviewChange(({ styles }) => {\n                styles.set(\"marginTop\", value);\n                styles.set(\"marginRight\", value);\n                styles.set(\"marginBottom\", value);\n                styles.set(\"marginLeft\", value);\n            });\n        } else {\n            marginTop.onChangePreview(value);\n        }\n    };\n\n    const onReset = () => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.unset(\"marginTop\");\n                styles.unset(\"marginRight\");\n                styles.unset(\"marginBottom\");\n                styles.unset(\"marginLeft\");\n            });\n        } else {\n            marginTop.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 rounded-md relative\">\n            {/* Margin Label */}\n            <span className=\"absolute text-sm\" style={{ top: 5, left: 7 }}>\n                Margin\n            </span>\n\n            {/* Top Margin */}\n            <div className={rowClassname} style={{ paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={linked ? \"Margin\" : \"Top margin\"}\n                    {...marginTop}\n                    onReset={onReset}\n                    units={heightOptions}\n                    onChange={onMarginTopChange}\n                    onChangePreview={onMarginTopPreviewChange}\n                />\n            </div>\n\n            <LinkedEditing linked={linked} onToggle={onToggleLinkedEditing} />\n\n            {/* Middle Row (Left Margin + Padding Box + Right Margin) */}\n            <div className={rowClassname} style={{ paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={\"Left margin\"}\n                    {...marginLeft}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n                {children}\n                <ValueSelector\n                    label={\"Right margin\"}\n                    {...marginRight}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n            </div>\n\n            {/* Bottom Margin */}\n            <div className={rowClassname} style={{ padding: \"8px 0\" }}>\n                <ValueSelector\n                    label={\"Bottom margin\"}\n                    {...marginBottom}\n                    units={heightOptions}\n                    disabled={linked}\n                />\n            </div>\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,SAAS;AAClB,SAASC,aAAa;AACtB,SAASC,aAAa;AACtB,SAASC,YAAY;AACrB,SAASC,aAAa;AAEtB,MAAMC,eAAe,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;AAEzC,MAAMC,YAAY,GAAGH,YAAY,CAACI,UAAU,CAAC,CAAC,CACzCC,GAAG,CAAC,GAAGH,eAAe,CAAC,CACvBI,UAAU,CAAC,CAAC;AAEjB,MAAMC,aAAa,GAAGP,YAAY,CAACQ,WAAW,CAAC,CAAC,CAC3CH,GAAG,CAAC,GAAGH,eAAe,CAAC,CACvBI,UAAU,CAAC,CAAC;AAOjB,OAAO,MAAMG,MAAM,GAAGb,QAAQ,CAAC,CAAC;EAAEc,SAAS;EAAEC;AAAsB,CAAC,KAAK;EACrE,MAAM;IAAEC,QAAQ;IAAEC,eAAe;IAAEC;EAAS,CAAC,GAAGjB,SAAS,CAACa,SAAS,CAAC;EAEpE,MAAMK,SAAS,GAAGd,aAAa,CAACS,SAAS,EAAE,WAAW,CAAC;EACvD,MAAMM,WAAW,GAAGf,aAAa,CAACS,SAAS,EAAE,aAAa,CAAC;EAC3D,MAAMO,YAAY,GAAGhB,aAAa,CAACS,SAAS,EAAE,cAAc,CAAC;EAC7D,MAAMQ,UAAU,GAAGjB,aAAa,CAACS,SAAS,EAAE,YAAY,CAAC;EAEzD,MAAMS,MAAM,GAAGL,QAAQ,CAACM,GAAG,CAAU,qBAAqB,CAAC,IAAI,IAAI;EAEnE,MAAMC,qBAAqB,GAAIF,MAAe,IAAK;IAC/CP,QAAQ,CAAC,CAAC;MAAEU,MAAM;MAAER;IAAS,CAAC,KAAK;MAC/B,IAAIK,MAAM,EAAE;QACR,MAAMI,SAAS,GAAGR,SAAS,CAACQ,SAAS;QACrC,MAAMC,KAAK,GAAGD,SAAS,GACjBR,SAAS,CAACS,KAAK,GACf,GAAGT,SAAS,CAACS,KAAK,IAAI,CAAC,GAAGT,SAAS,CAACU,IAAI,EAAE;QAChDH,MAAM,CAACI,GAAG,CAAC,aAAa,EAAEF,KAAK,CAAC;QAChCF,MAAM,CAACI,GAAG,CAAC,cAAc,EAAEF,KAAK,CAAC;QACjCF,MAAM,CAACI,GAAG,CAAC,YAAY,EAAEF,KAAK,CAAC;MACnC;MACAV,QAAQ,CAACY,GAAG,CAAC,qBAAqB,EAAEP,MAAM,CAAC;IAC/C,CAAC,CAAC;EACN,CAAC;EAED,MAAMQ,iBAAiB,GAAIH,KAAa,IAAK;IACzC,IAAIL,MAAM,EAAE;MACRP,QAAQ,CAAC,CAAC;QAAEU;MAAO,CAAC,KAAK;QACrBA,MAAM,CAACI,GAAG,CAAC,WAAW,EAAEF,KAAK,CAAC;QAC9BF,MAAM,CAACI,GAAG,CAAC,aAAa,EAAEF,KAAK,CAAC;QAChCF,MAAM,CAACI,GAAG,CAAC,cAAc,EAAEF,KAAK,CAAC;QACjCF,MAAM,CAACI,GAAG,CAAC,YAAY,EAAEF,KAAK,CAAC;MACnC,CAAC,CAAC;IACN,CAAC,MAAM;MACHT,SAAS,CAACH,QAAQ,CAACY,KAAK,CAAC;IAC7B;EACJ,CAAC;EAED,MAAMI,wBAAwB,GAAIJ,KAAa,IAAK;IAChD,IAAIL,MAAM,EAAE;MACRN,eAAe,CAAC,CAAC;QAAES;MAAO,CAAC,KAAK;QAC5BA,MAAM,CAACI,GAAG,CAAC,WAAW,EAAEF,KAAK,CAAC;QAC9BF,MAAM,CAACI,GAAG,CAAC,aAAa,EAAEF,KAAK,CAAC;QAChCF,MAAM,CAACI,GAAG,CAAC,cAAc,EAAEF,KAAK,CAAC;QACjCF,MAAM,CAACI,GAAG,CAAC,YAAY,EAAEF,KAAK,CAAC;MACnC,CAAC,CAAC;IACN,CAAC,MAAM;MACHT,SAAS,CAACc,eAAe,CAACL,KAAK,CAAC;IACpC;EACJ,CAAC;EAED,MAAMM,OAAO,GAAGA,CAAA,KAAM;IAClB,IAAIX,MAAM,EAAE;MACRP,QAAQ,CAAC,CAAC;QAAEU;MAAO,CAAC,KAAK;QACrBA,MAAM,CAACS,KAAK,CAAC,WAAW,CAAC;QACzBT,MAAM,CAACS,KAAK,CAAC,aAAa,CAAC;QAC3BT,MAAM,CAACS,KAAK,CAAC,cAAc,CAAC;QAC5BT,MAAM,CAACS,KAAK,CAAC,YAAY,CAAC;MAC9B,CAAC,CAAC;IACN,CAAC,MAAM;MACHhB,SAAS,CAACe,OAAO,CAAC,CAAC;IACvB;EACJ,CAAC;EAED,MAAME,YAAY,GAAG,kDAAkD;EAEvE,oBACIrC,KAAA,CAAAsC,aAAA;IAAKC,SAAS,EAAC;EAAmC,gBAE9CvC,KAAA,CAAAsC,aAAA;IAAMC,SAAS,EAAC,kBAAkB;IAACC,KAAK,EAAE;MAAEC,GAAG,EAAE,CAAC;MAAEC,IAAI,EAAE;IAAE;EAAE,GAAC,QAEzD,CAAC,eAGP1C,KAAA,CAAAsC,aAAA;IAAKC,SAAS,EAAEF,YAAa;IAACG,KAAK,EAAE;MAAEG,UAAU,EAAE;IAAM;EAAE,gBACvD3C,KAAA,CAAAsC,aAAA,CAAClC,aAAa,EAAAwC,MAAA,CAAAC,MAAA;IACVC,KAAK,EAAEtB,MAAM,GAAG,QAAQ,GAAG;EAAa,GACpCJ,SAAS;IACbe,OAAO,EAAEA,OAAQ;IACjBY,KAAK,EAAEnC,aAAc;IACrBK,QAAQ,EAAEe,iBAAkB;IAC5BE,eAAe,EAAED;EAAyB,EAC7C,CACA,CAAC,eAENjC,KAAA,CAAAsC,aAAA,CAACnC,aAAa;IAACqB,MAAM,EAAEA,MAAO;IAACwB,QAAQ,EAAEtB;EAAsB,CAAE,CAAC,eAGlE1B,KAAA,CAAAsC,aAAA;IAAKC,SAAS,EAAEF,YAAa;IAACG,KAAK,EAAE;MAAEG,UAAU,EAAE;IAAM;EAAE,gBACvD3C,KAAA,CAAAsC,aAAA,CAAClC,aAAa,EAAAwC,MAAA,CAAAC,MAAA;IACVC,KAAK,EAAE;EAAc,GACjBvB,UAAU;IACdwB,KAAK,EAAEvC,YAAa;IACpByC,QAAQ,EAAEzB;EAAO,EACpB,CAAC,EACDR,QAAQ,eACThB,KAAA,CAAAsC,aAAA,CAAClC,aAAa,EAAAwC,MAAA,CAAAC,MAAA;IACVC,KAAK,EAAE;EAAe,GAClBzB,WAAW;IACf0B,KAAK,EAAEvC,YAAa;IACpByC,QAAQ,EAAEzB;EAAO,EACpB,CACA,CAAC,eAGNxB,KAAA,CAAAsC,aAAA;IAAKC,SAAS,EAAEF,YAAa;IAACG,KAAK,EAAE;MAAEU,OAAO,EAAE;IAAQ;EAAE,gBACtDlD,KAAA,CAAAsC,aAAA,CAAClC,aAAa,EAAAwC,MAAA,CAAAC,MAAA;IACVC,KAAK,EAAE;EAAgB,GACnBxB,YAAY;IAChByB,KAAK,EAAEnC,aAAc;IACrBqC,QAAQ,EAAEzB;EAAO,EACpB,CACA,CACJ,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

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

@@ -1,11 +1,11 @@
 import React from "react";
-import { Margin } from "./Margin";
-import { Padding } from "./Padding";
+import { Margin } from "./Margin.js";
+import { Padding } from "./Padding.js";
 export const MarginPaddingControl = ({
   elementId
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-light wby-text-neutral-strong wby-w-full wby-rounded-md wby-border-sm wby-border-neutral-muted"
+    className: "bg-neutral-light text-neutral-strong w-full rounded-md border-sm border-neutral-muted"
   }, /*#__PURE__*/React.createElement(Margin, {
     elementId: elementId
   }, /*#__PURE__*/React.createElement(Padding, {

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

@@ -1 +1 @@
-{"version":3,"names":["React","Margin","Padding","MarginPaddingControl","elementId","createElement","className"],"sources":["MarginPadding.tsx"],"sourcesContent":["import React from \"react\";\nimport { Margin } from \"./Margin\";\nimport { Padding } from \"./Padding\";\n\nexport const MarginPaddingControl = ({ elementId }: { elementId: string }) => {\n    return (\n        <div className=\"wby-bg-neutral-light wby-text-neutral-strong wby-w-full wby-rounded-md wby-border-sm wby-border-neutral-muted\">\n            <Margin elementId={elementId}>\n                <Padding elementId={elementId} />\n            </Margin>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM;AACf,SAASC,OAAO;AAEhB,OAAO,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC;AAAiC,CAAC,KAAK;EAC1E,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAC;EAA+G,gBAC1HN,KAAA,CAAAK,aAAA,CAACJ,MAAM;IAACG,SAAS,EAAEA;EAAU,gBACzBJ,KAAA,CAAAK,aAAA,CAACH,OAAO;IAACE,SAAS,EAAEA;EAAU,CAAE,CAC5B,CACP,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Margin","Padding","MarginPaddingControl","elementId","createElement","className"],"sources":["MarginPadding.tsx"],"sourcesContent":["import React from \"react\";\nimport { Margin } from \"./Margin.js\";\nimport { Padding } from \"./Padding.js\";\n\nexport const MarginPaddingControl = ({ elementId }: { elementId: string }) => {\n    return (\n        <div className=\"bg-neutral-light text-neutral-strong w-full rounded-md border-sm border-neutral-muted\">\n            <Margin elementId={elementId}>\n                <Padding elementId={elementId} />\n            </Margin>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM;AACf,SAASC,OAAO;AAEhB,OAAO,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC;AAAiC,CAAC,KAAK;EAC1E,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAC;EAAuF,gBAClGN,KAAA,CAAAK,aAAA,CAACJ,MAAM;IAACG,SAAS,EAAEA;EAAU,gBACzBJ,KAAA,CAAAK,aAAA,CAACH,OAAO;IAACE,SAAS,EAAEA;EAAU,CAAE,CAC5B,CACP,CAAC;AAEd,CAAC","ignoreList":[]}

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

@@ -1,10 +1,10 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
-import { LinkedEditing } from "./LinkedEditing";
-import { useStyles } from "../../useStyles";
-import { ValueSelector } from "../../ValueSelector";
-import { useStyleValue } from "../../useStyleValue";
-import { UnitsOptions } from "../../UnitsOptions";
+import { LinkedEditing } from "./LinkedEditing.js";
+import { useStyles } from "../../useStyles.js";
+import { ValueSelector } from "../../ValueSelector.js";
+import { useStyleValue } from "../../useStyleValue.js";
+import { UnitsOptions } from "../../UnitsOptions.js";
 const widthOptions = UnitsOptions.widthUnits().getOptions();
 const heightOptions = UnitsOptions.heightUnits().getOptions();
 export const Padding = observer(({
@@ -76,11 +76,11 @@ export const Padding = observer(({
       paddingTop.onReset();
     }
   };
-  const rowClassname = "wby-flex wby-flex-row wby-w-full wby-justify-center wby-items-center wby-py-[4px]";
+  const rowClassname = "flex flex-row w-full justify-center items-center py-xs";
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-col wby-items-center wby-bg-neutral-muted wby-border-sm wby-border-neutral-muted wby-relative wby-rounded-md"
+    className: "flex flex-col items-center bg-neutral-muted border-sm border-neutral-muted relative rounded-md"
   }, /*#__PURE__*/React.createElement("span", {
-    className: "wby-absolute wby-text-sm",
+    className: "absolute text-sm",
     style: {
       top: 3,
       left: 5
@@ -112,7 +112,7 @@ export const Padding = observer(({
     units: widthOptions,
     disabled: linked
   })), /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-border-sm wby-border-neutral-muted wby-bg-neutral-light wby-rounded-md wby-items-center wby-justify-center",
+    className: "flex border-sm border-neutral-muted bg-neutral-light rounded-md items-center justify-center",
     style: {
       width: 170,
       height: 30

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\";\nimport { useStyles } from \"../../useStyles\";\nimport { ValueSelector } from \"../../ValueSelector\";\nimport { useStyleValue } from \"../../useStyleValue\";\nimport { UnitsOptions } from \"../../UnitsOptions\";\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 =\n        \"wby-flex wby-flex-row wby-w-full wby-justify-center wby-items-center wby-py-[4px]\";\n\n    return (\n        <div className=\"wby-flex wby-flex-col wby-items-center wby-bg-neutral-muted wby-border-sm wby-border-neutral-muted wby-relative wby-rounded-md\">\n            <span className=\"wby-absolute wby-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=\"wby-flex wby-border-sm wby-border-neutral-muted wby-bg-neutral-light wby-rounded-md wby-items-center wby-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,"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":[]}

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Accordion } from "@webiny/admin-ui";
-import { MarginPaddingControl } from "./MarginPadding/MarginPadding";
+import { MarginPaddingControl } from "./MarginPadding/MarginPadding.js";
 export const MarginPadding = ({
   elementId
 }) => {

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\";\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,"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":[]}

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

@@ -1,8 +1,8 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { Switch } from "@webiny/admin-ui";
-import { useStyles } from "../../useStyles";
-import { InheritanceLabel } from "../../../InheritanceLabel";
+import { useStyles } from "../../useStyles.js";
+import { InheritanceLabel } from "../../../InheritanceLabel.js";
 export const Visibility = observer(({
   elementId
 }) => {

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\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel\";\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,"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":[]}

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

@@ -1,3 +1,3 @@
 import React from "react";
-import { type VisibilityProps } from "./Visibility/index";
+import { type VisibilityProps } from "./Visibility/index.js";
 export declare const VisibilityGroup: ({ elementId }: VisibilityProps) => React.JSX.Element;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Accordion } from "@webiny/admin-ui";
-import { Visibility } from "./Visibility/index";
+import { Visibility } from "./Visibility/index.js";
 export const VisibilityGroup = ({
   elementId
 }) => {

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\";\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,"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":[]}

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

@@ -1,12 +1,12 @@
 import React, { useCallback } from "react";
 import { Accordion } from "@webiny/admin-ui";
-import { useActiveElement } from "../../../hooks/useActiveElement";
-import { Background } from "./Groups/Background";
-import { MarginPadding } from "./Groups/MarginPadding";
-import { VisibilityGroup } from "./Groups/VisibilityGroup";
-import { useElementComponentManifest } from "../../Content/Preview/useElementComponentManifest";
+import { useActiveElement } from "../../../hooks/useActiveElement.js";
+import { Background } from "./Groups/Background.js";
+import { MarginPadding } from "./Groups/MarginPadding.js";
+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";
+import { Layout } from "./Groups/Layout.js";
 export const StyleProperties = () => {
   const [element] = useActiveElement();
   if (!element) {

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","Accordion","useActiveElement","Background","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\";\nimport type { DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { Background } from \"./Groups/Background\";\nimport { MarginPadding } from \"./Groups/MarginPadding\";\nimport { VisibilityGroup } from \"./Groups/VisibilityGroup\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest\";\nimport { StyleSettings } from \"@webiny/website-builder-sdk\";\nimport { Layout } from \"./Groups/Layout\";\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.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,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,GAAGR,gBAAgB,CAAC,CAAC;EACpC,IAAI,CAACQ,OAAO,EAAE;IACV,OAAO,IAAI;EACf;EAEA,oBAAOX,KAAA,CAAAY,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,GAAGlB,WAAW,CACvBmB,IAAY,IAAK;IACd,OAAOH,UAAU,CAACI,QAAQ,CAACD,IAAI,CAAC;EACpC,CAAC,EACD,CAACH,UAAU,CACf,CAAC;EAED,oBACIjB,KAAA,CAAAY,aAAA,CAACV,SAAS,QACLiB,QAAQ,CAACX,aAAa,CAACC,MAAM,CAAC,GAAG,IAAI,gBAAGT,KAAA,CAAAY,aAAA,CAACH,MAAM;IAACa,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAAC,EACzEG,QAAQ,CAACX,aAAa,CAACH,aAAa,CAAC,GAAG,IAAI,gBACzCL,KAAA,CAAAY,aAAA,CAACP,aAAa;IAACiB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAC1C,EACAG,QAAQ,CAACX,aAAa,CAACJ,UAAU,CAAC,GAAG,IAAI,gBAAGJ,KAAA,CAAAY,aAAA,CAACR,UAAU;IAACkB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAAC,EACjFG,QAAQ,CAACX,aAAa,CAACe,UAAU,CAAC,GAAG,IAAI,gBAAGvB,KAAA,CAAAY,aAAA,CAACN,eAAe;IAACgB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAC/E,CAAC;AAEpB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useCallback","Accordion","useActiveElement","Background","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 { 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.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,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,GAAGR,gBAAgB,CAAC,CAAC;EACpC,IAAI,CAACQ,OAAO,EAAE;IACV,OAAO,IAAI;EACf;EAEA,oBAAOX,KAAA,CAAAY,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,GAAGlB,WAAW,CACvBmB,IAAY,IAAK;IACd,OAAOH,UAAU,CAACI,QAAQ,CAACD,IAAI,CAAC;EACpC,CAAC,EACD,CAACH,UAAU,CACf,CAAC;EAED,oBACIjB,KAAA,CAAAY,aAAA,CAACV,SAAS,QACLiB,QAAQ,CAACX,aAAa,CAACC,MAAM,CAAC,GAAG,IAAI,gBAAGT,KAAA,CAAAY,aAAA,CAACH,MAAM;IAACa,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAAC,EACzEG,QAAQ,CAACX,aAAa,CAACH,aAAa,CAAC,GAAG,IAAI,gBACzCL,KAAA,CAAAY,aAAA,CAACP,aAAa;IAACiB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAC1C,EACAG,QAAQ,CAACX,aAAa,CAACJ,UAAU,CAAC,GAAG,IAAI,gBAAGJ,KAAA,CAAAY,aAAA,CAACR,UAAU;IAACkB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAAC,EACjFG,QAAQ,CAACX,aAAa,CAACe,UAAU,CAAC,GAAG,IAAI,gBAAGvB,KAAA,CAAAY,aAAA,CAACN,eAAe;IAACgB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAC/E,CAAC;AAEpB,CAAC","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { Sidebar } from "../../../config/Sidebar/Sidebar";
-import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer";
-import { useActiveElement } from "../../../hooks/useActiveElement";
+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, {

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\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement\";\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,"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":[]}

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

@@ -1,5 +1,5 @@
-import type { IMetadata } from "../../../metadata";
-import type { Editor } from "../../../../editorSdk/Editor";
+import type { IMetadata } from "../../../../BaseEditor/metadata/index.js";
+import type { Editor } from "../../../../editorSdk/Editor.js";
 import { type InheritanceInfo } from "@webiny/website-builder-sdk";
 export type ElementBreakpointStyles = {
     styles: Record<string, any>;