@webiny/app-website-builder 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.fdd9228b5d

package/BaseEditor/config/Elements.d.ts

@@ -3,8 +3,17 @@ import type { ElementConfig } from "./Element";
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            "pb-editor-ui-elements": React.HTMLProps<HTMLDivElement>;
-            "pb-editor-ui-element": React.HTMLProps<HTMLDivElement>;
+            "wb-editor-ui-elements": {
+                class?: string;
+                "data-scope"?: string;
+                "data-group"?: string;
+                [key: string]: any;
+            };
+            "wb-editor-ui-element": {
+                class?: string;
+                "data-name"?: string;
+                [key: string]: any;
+            };
         }
     }
 }

package/BaseEditor/config/Elements.js

@@ -19,12 +19,14 @@ export const Elements = ({
   const groupElements = useMemo(() => {
     return elements.filter(byGroup(group)).filter(byScope(scope));
   }, [elements, group, scope]);
-  return /*#__PURE__*/React.createElement("pb-editor-ui-elements", {
+  return /*#__PURE__*/React.createElement("wb-editor-ui-elements", {
     "data-scope": scope,
-    "data-group": group
-  }, transform(groupElements).map(element => /*#__PURE__*/React.createElement("pb-editor-ui-element", {
+    "data-group": group,
+    class: "wby-contents"
+  }, transform(groupElements).map(element => /*#__PURE__*/React.createElement("wb-editor-ui-element", {
     key: element.name,
-    "data-name": element.name
+    "data-name": element.name,
+    class: "wby-contents"
   }, element.element)));
 };
 

package/BaseEditor/config/Elements.js.map

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

package/BaseEditor/defaultConfig/Content/Preview/AddressBar.js

@@ -17,7 +17,7 @@ export const AddressBar = () => {
       return;
     }
     setAddressBarUrl(`${previewDomain}${path}`);
-  }, [previewDomain]);
+  }, [path, previewDomain]);
   return /*#__PURE__*/React.createElement("div", {
     className: "wby-w-full wby-h-[49px] wby-flex wby-flex-row wby-p-sm wby-bg-neutral-base wby-border-solid wby-border-b-sm wby-border-neutral-dimmed"
   }, /*#__PURE__*/React.createElement("div", {

package/BaseEditor/defaultConfig/Content/Preview/AddressBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","BreakpointSelector","PreviewInNewTab","OpenInNewTab","RefreshPreview","useSelectFromDocument","PreviewDomain","usePreviewDomain","AddressBar","path","document","properties","previewDomain","addressBarUrl","setAddressBarUrl","createElement","className"],"sources":["AddressBar.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { BreakpointSelector } from \"./BreakpointSelector\";\nimport { PreviewInNewTab } from \"./AddressBar/PreviewInNewTab\";\nimport { OpenInNewTab } from \"./AddressBar/OpenInNewTab\";\nimport { RefreshPreview } from \"./AddressBar/RefreshPreview\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { PreviewDomain } from \"./AddressBar/PreviewDomain\";\nimport { usePreviewDomain } from \"./usePreviewDomain\";\n\nexport const AddressBar = () => {\n    const path = useSelectFromDocument(document => document.properties.path);\n\n    const { previewDomain } = usePreviewDomain();\n    const [addressBarUrl, setAddressBarUrl] = useState<string>(\"\");\n\n    useEffect(() => {\n        if (!previewDomain) {\n            return;\n        }\n\n        setAddressBarUrl(`${previewDomain}${path}`);\n    }, [previewDomain]);\n\n    return (\n        <div className=\"wby-w-full wby-h-[49px] wby-flex wby-flex-row wby-p-sm wby-bg-neutral-base wby-border-solid wby-border-b-sm wby-border-neutral-dimmed\">\n            <div className={\"wby-relative wby-flex-auto wby-mr-sm\"}>\n                <div\n                    className={\n                        \"wby-w-full wby-absolute wby-top-[-1px] wby-py-[6px] wby-pl-xl wby-border-sm wby-text-md wby-peer wby-cursor-not-allowed wby-rounded-md wby-border-neutral-subtle wby-text-neutral-muted wby-bg-neutral-disabled wby-text-neutral-disabled\"\n                    }\n                >\n                    <PreviewDomain />\n                    {addressBarUrl}\n                </div>\n                <div className={\"wby-absolute wby-right-0 wby-top-0\"}>\n                    <RefreshPreview />\n                    <PreviewInNewTab />\n                    <OpenInNewTab />\n                </div>\n            </div>\n            <div className={\"wby-flex-none\"}>\n                <BreakpointSelector />\n            </div>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,kBAAkB;AAC3B,SAASC,eAAe;AACxB,SAASC,YAAY;AACrB,SAASC,cAAc;AACvB,SAASC,qBAAqB;AAC9B,SAASC,aAAa;AACtB,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAMC,IAAI,GAAGJ,qBAAqB,CAACK,QAAQ,IAAIA,QAAQ,CAACC,UAAU,CAACF,IAAI,CAAC;EAExE,MAAM;IAAEG;EAAc,CAAC,GAAGL,gBAAgB,CAAC,CAAC;EAC5C,MAAM,CAACM,aAAa,EAAEC,gBAAgB,CAAC,GAAGd,QAAQ,CAAS,EAAE,CAAC;EAE9DD,SAAS,CAAC,MAAM;IACZ,IAAI,CAACa,aAAa,EAAE;MAChB;IACJ;IAEAE,gBAAgB,CAAC,GAAGF,aAAa,GAAGH,IAAI,EAAE,CAAC;EAC/C,CAAC,EAAE,CAACG,aAAa,CAAC,CAAC;EAEnB,oBACId,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAC;EAAuI,gBAClJlB,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAuC,gBACnDlB,KAAA,CAAAiB,aAAA;IACIC,SAAS,EACL;EACH,gBAEDlB,KAAA,CAAAiB,aAAA,CAACT,aAAa,MAAE,CAAC,EAChBO,aACA,CAAC,eACNf,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAqC,gBACjDlB,KAAA,CAAAiB,aAAA,CAACX,cAAc,MAAE,CAAC,eAClBN,KAAA,CAAAiB,aAAA,CAACb,eAAe,MAAE,CAAC,eACnBJ,KAAA,CAAAiB,aAAA,CAACZ,YAAY,MAAE,CACd,CACJ,CAAC,eACNL,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAgB,gBAC5BlB,KAAA,CAAAiB,aAAA,CAACd,kBAAkB,MAAE,CACpB,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","BreakpointSelector","PreviewInNewTab","OpenInNewTab","RefreshPreview","useSelectFromDocument","PreviewDomain","usePreviewDomain","AddressBar","path","document","properties","previewDomain","addressBarUrl","setAddressBarUrl","createElement","className"],"sources":["AddressBar.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { BreakpointSelector } from \"./BreakpointSelector\";\nimport { PreviewInNewTab } from \"./AddressBar/PreviewInNewTab\";\nimport { OpenInNewTab } from \"./AddressBar/OpenInNewTab\";\nimport { RefreshPreview } from \"./AddressBar/RefreshPreview\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { PreviewDomain } from \"./AddressBar/PreviewDomain\";\nimport { usePreviewDomain } from \"./usePreviewDomain\";\n\nexport const AddressBar = () => {\n    const path = useSelectFromDocument(document => document.properties.path);\n\n    const { previewDomain } = usePreviewDomain();\n    const [addressBarUrl, setAddressBarUrl] = useState<string>(\"\");\n\n    useEffect(() => {\n        if (!previewDomain) {\n            return;\n        }\n\n        setAddressBarUrl(`${previewDomain}${path}`);\n    }, [path, previewDomain]);\n\n    return (\n        <div className=\"wby-w-full wby-h-[49px] wby-flex wby-flex-row wby-p-sm wby-bg-neutral-base wby-border-solid wby-border-b-sm wby-border-neutral-dimmed\">\n            <div className={\"wby-relative wby-flex-auto wby-mr-sm\"}>\n                <div\n                    className={\n                        \"wby-w-full wby-absolute wby-top-[-1px] wby-py-[6px] wby-pl-xl wby-border-sm wby-text-md wby-peer wby-cursor-not-allowed wby-rounded-md wby-border-neutral-subtle wby-text-neutral-muted wby-bg-neutral-disabled wby-text-neutral-disabled\"\n                    }\n                >\n                    <PreviewDomain />\n                    {addressBarUrl}\n                </div>\n                <div className={\"wby-absolute wby-right-0 wby-top-0\"}>\n                    <RefreshPreview />\n                    <PreviewInNewTab />\n                    <OpenInNewTab />\n                </div>\n            </div>\n            <div className={\"wby-flex-none\"}>\n                <BreakpointSelector />\n            </div>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,kBAAkB;AAC3B,SAASC,eAAe;AACxB,SAASC,YAAY;AACrB,SAASC,cAAc;AACvB,SAASC,qBAAqB;AAC9B,SAASC,aAAa;AACtB,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAMC,IAAI,GAAGJ,qBAAqB,CAACK,QAAQ,IAAIA,QAAQ,CAACC,UAAU,CAACF,IAAI,CAAC;EAExE,MAAM;IAAEG;EAAc,CAAC,GAAGL,gBAAgB,CAAC,CAAC;EAC5C,MAAM,CAACM,aAAa,EAAEC,gBAAgB,CAAC,GAAGd,QAAQ,CAAS,EAAE,CAAC;EAE9DD,SAAS,CAAC,MAAM;IACZ,IAAI,CAACa,aAAa,EAAE;MAChB;IACJ;IAEAE,gBAAgB,CAAC,GAAGF,aAAa,GAAGH,IAAI,EAAE,CAAC;EAC/C,CAAC,EAAE,CAACA,IAAI,EAAEG,aAAa,CAAC,CAAC;EAEzB,oBACId,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAC;EAAuI,gBAClJlB,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAuC,gBACnDlB,KAAA,CAAAiB,aAAA;IACIC,SAAS,EACL;EACH,gBAEDlB,KAAA,CAAAiB,aAAA,CAACT,aAAa,MAAE,CAAC,EAChBO,aACA,CAAC,eACNf,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAqC,gBACjDlB,KAAA,CAAAiB,aAAA,CAACX,cAAc,MAAE,CAAC,eAClBN,KAAA,CAAAiB,aAAA,CAACb,eAAe,MAAE,CAAC,eACnBJ,KAAA,CAAAiB,aAAA,CAACZ,YAAY,MAAE,CACd,CACJ,CAAC,eACNL,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAAgB,gBAC5BlB,KAAA,CAAAiB,aAAA,CAACd,kBAAkB,MAAE,CACpB,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/ApplyTheme.d.ts

@@ -0,0 +1 @@
+export declare const ApplyTheme: () => null;

package/BaseEditor/defaultConfig/Content/Preview/ApplyTheme.js

@@ -0,0 +1,51 @@
+import { useEffect } from "react";
+import { useWebsiteBuilderTheme } from "../../../components";
+export const ApplyTheme = () => {
+  const {
+    theme
+  } = useWebsiteBuilderTheme();
+  useEffect(() => {
+    if (!theme) {
+      return;
+    }
+    if (theme.css) {
+      const existing = document.querySelector(`style[id="wb-editor-css"]`);
+      const style = document.createElement("style");
+      style.id = "wb-editor-css";
+      style.innerHTML = theme.css;
+      if (existing) {
+        existing.replaceWith(style);
+      } else {
+        document.head.appendChild(style);
+      }
+    }
+    if (theme.cssVariables) {
+      const existing = document.querySelector(`style[id="wb-editor-css-variables"]`);
+      const style = document.createElement("style");
+      style.id = "wb-editor-css-variables";
+      style.innerHTML = `:root {
+                ${Object.entries(theme.cssVariables).map(([key, value]) => `${key}: ${value}`).join("\n")}
+            `;
+      if (existing) {
+        existing.replaceWith(style);
+      } else {
+        document.head.appendChild(style);
+      }
+    }
+    if (theme.fonts) {
+      theme.fonts.forEach(font => {
+        const existing = document.querySelector(`link[href="${font}"]`);
+        if (existing) {
+          return;
+        }
+        const link = document.createElement("link");
+        link.href = font;
+        link.rel = "stylesheet";
+        document.head.appendChild(link);
+      });
+    }
+  }, [theme]);
+  return null;
+};
+
+//# sourceMappingURL=ApplyTheme.js.map

package/BaseEditor/defaultConfig/Content/Preview/ApplyTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useWebsiteBuilderTheme","ApplyTheme","theme","css","existing","document","querySelector","style","createElement","id","innerHTML","replaceWith","head","appendChild","cssVariables","Object","entries","map","key","value","join","fonts","forEach","font","link","href","rel"],"sources":["ApplyTheme.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components\";\n\nexport const ApplyTheme = () => {\n    const { theme } = useWebsiteBuilderTheme();\n\n    useEffect(() => {\n        if (!theme) {\n            return;\n        }\n\n        if (theme.css) {\n            const existing = document.querySelector(`style[id=\"wb-editor-css\"]`);\n\n            const style = document.createElement(\"style\");\n            style.id = \"wb-editor-css\";\n            style.innerHTML = theme.css;\n\n            if (existing) {\n                existing.replaceWith(style);\n            } else {\n                document.head.appendChild(style);\n            }\n        }\n\n        if (theme.cssVariables) {\n            const existing = document.querySelector(`style[id=\"wb-editor-css-variables\"]`);\n\n            const style = document.createElement(\"style\");\n            style.id = \"wb-editor-css-variables\";\n            style.innerHTML = `:root {\n                ${Object.entries(theme.cssVariables)\n                    .map(([key, value]) => `${key}: ${value}`)\n                    .join(\"\\n\")}\n            `;\n\n            if (existing) {\n                existing.replaceWith(style);\n            } else {\n                document.head.appendChild(style);\n            }\n        }\n\n        if (theme.fonts) {\n            theme.fonts.forEach(font => {\n                const existing = document.querySelector(`link[href=\"${font}\"]`);\n                if (existing) {\n                    return;\n                }\n\n                const link = document.createElement(\"link\");\n                link.href = font;\n                link.rel = \"stylesheet\";\n                document.head.appendChild(link);\n            });\n        }\n    }, [theme]);\n\n    return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,sBAAsB;AAE/B,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAM;IAAEC;EAAM,CAAC,GAAGF,sBAAsB,CAAC,CAAC;EAE1CD,SAAS,CAAC,MAAM;IACZ,IAAI,CAACG,KAAK,EAAE;MACR;IACJ;IAEA,IAAIA,KAAK,CAACC,GAAG,EAAE;MACX,MAAMC,QAAQ,GAAGC,QAAQ,CAACC,aAAa,CAAC,2BAA2B,CAAC;MAEpE,MAAMC,KAAK,GAAGF,QAAQ,CAACG,aAAa,CAAC,OAAO,CAAC;MAC7CD,KAAK,CAACE,EAAE,GAAG,eAAe;MAC1BF,KAAK,CAACG,SAAS,GAAGR,KAAK,CAACC,GAAG;MAE3B,IAAIC,QAAQ,EAAE;QACVA,QAAQ,CAACO,WAAW,CAACJ,KAAK,CAAC;MAC/B,CAAC,MAAM;QACHF,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACN,KAAK,CAAC;MACpC;IACJ;IAEA,IAAIL,KAAK,CAACY,YAAY,EAAE;MACpB,MAAMV,QAAQ,GAAGC,QAAQ,CAACC,aAAa,CAAC,qCAAqC,CAAC;MAE9E,MAAMC,KAAK,GAAGF,QAAQ,CAACG,aAAa,CAAC,OAAO,CAAC;MAC7CD,KAAK,CAACE,EAAE,GAAG,yBAAyB;MACpCF,KAAK,CAACG,SAAS,GAAG;AAC9B,kBAAkBK,MAAM,CAACC,OAAO,CAACd,KAAK,CAACY,YAAY,CAAC,CAC/BG,GAAG,CAAC,CAAC,CAACC,GAAG,EAAEC,KAAK,CAAC,KAAK,GAAGD,GAAG,KAAKC,KAAK,EAAE,CAAC,CACzCC,IAAI,CAAC,IAAI,CAAC;AAC/B,aAAa;MAED,IAAIhB,QAAQ,EAAE;QACVA,QAAQ,CAACO,WAAW,CAACJ,KAAK,CAAC;MAC/B,CAAC,MAAM;QACHF,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACN,KAAK,CAAC;MACpC;IACJ;IAEA,IAAIL,KAAK,CAACmB,KAAK,EAAE;MACbnB,KAAK,CAACmB,KAAK,CAACC,OAAO,CAACC,IAAI,IAAI;QACxB,MAAMnB,QAAQ,GAAGC,QAAQ,CAACC,aAAa,CAAC,cAAciB,IAAI,IAAI,CAAC;QAC/D,IAAInB,QAAQ,EAAE;UACV;QACJ;QAEA,MAAMoB,IAAI,GAAGnB,QAAQ,CAACG,aAAa,CAAC,MAAM,CAAC;QAC3CgB,IAAI,CAACC,IAAI,GAAGF,IAAI;QAChBC,IAAI,CAACE,GAAG,GAAG,YAAY;QACvBrB,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACW,IAAI,CAAC;MACnC,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACtB,KAAK,CAAC,CAAC;EAEX,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/Preview.js

@@ -14,7 +14,7 @@ import { Commands } from "../../..";
 import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor";
 import { AwaitIframeUrl } from "./AwaitIframeUrl";
 import { PreviewEvents } from "./PreviewEvents";
-import { LoadThemeStylesheet } from "./LoadThemeStylesheet";
+import { ApplyTheme } from "./ApplyTheme";
 export const Preview = () => {
   const editor = useDocumentEditor();
   const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());
@@ -100,7 +100,7 @@ export const Preview = () => {
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropZoneManagerProvider, {
     dropzoneManager: dropzoneManager
-  }, /*#__PURE__*/React.createElement(LoadThemeStylesheet, null), /*#__PURE__*/React.createElement(AddressBar, null), /*#__PURE__*/React.createElement(AwaitIframeUrl, null, ({
+  }, /*#__PURE__*/React.createElement(ApplyTheme, null), /*#__PURE__*/React.createElement(AddressBar, null), /*#__PURE__*/React.createElement(AwaitIframeUrl, null, ({
     url
   }) => /*#__PURE__*/React.createElement(Iframe, {
     url: url,

package/BaseEditor/defaultConfig/Content/Preview/Preview.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","useDocumentEditor","AddressBar","Iframe","HoverManager","DropZoneManager","DropZoneManagerProvider","Boxes","ScrollTracker","KeyboardShortcuts","ViewportManager","mouseTracker","Commands","useSelectFromEditor","AwaitIframeUrl","PreviewEvents","LoadThemeStylesheet","Preview","editor","iframeTimestamp","setIframeTimestamp","Date","now","loadingPreview","state","scrollTracker","window","e","source","target","dataset","role","hoverManager","editorState","getEditorState","read","boxes","filter","box","id","viewportManager","previewEvents","dropzoneManager","updateEditor","offRefreshPreview","registerCommandHandler","RefreshPreview","preview","start","stop","destroy","setMousePositionFromDrag","setPosition","clientX","clientY","addEventListener","offHoverChange","onHoverChange","highlightedElement","removeEventListener","onConnected","messenger","createElement","Fragment","url","timestamp","showLoading"],"sources":["Preview.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { AddressBar } from \"./AddressBar\";\nimport { Iframe } from \"./Iframe\";\nimport { HoverManager } from \"./HoverManager\";\nimport { DropZoneManager } from \"./DropZoneManager\";\nimport { DropZoneManagerProvider } from \"./DropZoneManagerProvider\";\nimport { Boxes } from \"~/BaseEditor/hooks/Boxes\";\nimport { ScrollTracker } from \"~/BaseEditor/defaultConfig/Content/Preview/ScrollTracker\";\nimport { KeyboardShortcuts } from \"./KeyboardShortcuts\";\nimport { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { AwaitIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl\";\nimport { PreviewEvents } from \"~/BaseEditor/defaultConfig/Content/Preview/PreviewEvents\";\nimport { LoadThemeStylesheet } from \"./LoadThemeStylesheet\";\n\nexport const Preview = () => {\n    const editor = useDocumentEditor();\n    const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());\n\n    const loadingPreview = useSelectFromEditor(state => state.loadingPreview);\n\n    const scrollTracker = useMemo(() => {\n        return new ScrollTracker(window, e => {\n            const source = e.target as HTMLDivElement | null;\n\n            if (!source) {\n                return false;\n            }\n\n            return source.dataset.role === \"element-overlay\";\n        });\n    }, []);\n\n    const hoverManager = useMemo(() => {\n        return new HoverManager(mouseTracker, () => {\n            const editorState = editor.getEditorState().read();\n            return new Boxes(editorState.boxes.editor).filter(box => box.id !== \"root\");\n        });\n    }, [mouseTracker]);\n\n    const viewportManager = useMemo(() => {\n        return new ViewportManager();\n    }, []);\n\n    const previewEvents = useMemo(() => {\n        return new PreviewEvents(editor, scrollTracker);\n    }, []);\n\n    const dropzoneManager = useMemo(() => {\n        return new DropZoneManager(mouseTracker);\n    }, [mouseTracker]);\n\n    useEffect(() => {\n        // On first mount, show loading.\n        editor.updateEditor(state => {\n            state.loadingPreview = true;\n        });\n\n        const offRefreshPreview = editor.registerCommandHandler(Commands.RefreshPreview, () => {\n            setIframeTimestamp(Date.now());\n\n            editor.updateEditor(state => {\n                // Unset boxes to remove old overlays.\n                state.loadingPreview = true;\n                state.boxes = {\n                    preview: {},\n                    editor: {}\n                };\n            });\n        });\n\n        return () => {\n            offRefreshPreview();\n        };\n    }, []);\n\n    // Start various trackers\n    useEffect(() => {\n        scrollTracker.start();\n        mouseTracker.start();\n        dropzoneManager.start();\n\n        return () => {\n            dropzoneManager.stop();\n            mouseTracker.stop();\n            scrollTracker.destroy();\n            viewportManager.destroy();\n            hoverManager.destroy();\n            previewEvents.destroy();\n        };\n    }, [dropzoneManager, scrollTracker, mouseTracker]);\n\n    // Update mouse position while dragging\n    useEffect(() => {\n        const setMousePositionFromDrag = (e: DragEvent) => {\n            mouseTracker.setPosition(e.clientX, e.clientY);\n        };\n\n        window.addEventListener(\"dragover\", setMousePositionFromDrag);\n\n        const offHoverChange = hoverManager.onHoverChange(id => {\n            editor.updateEditor(state => {\n                state.highlightedElement = id;\n            });\n        });\n\n        return () => {\n            window.removeEventListener(\"dragover\", setMousePositionFromDrag);\n            offHoverChange();\n        };\n    }, []);\n\n    const onConnected = useCallback((messenger: Messenger) => {\n        previewEvents.onConnected(messenger);\n    }, []);\n\n    return (\n        <>\n            <DropZoneManagerProvider dropzoneManager={dropzoneManager}>\n                <LoadThemeStylesheet />\n                <AddressBar />\n                <AwaitIframeUrl>\n                    {({ url }) => (\n                        <Iframe\n                            url={url}\n                            timestamp={iframeTimestamp}\n                            viewportManager={viewportManager}\n                            onConnected={onConnected}\n                            showLoading={loadingPreview}\n                        />\n                    )}\n                </AwaitIframeUrl>\n            </DropZoneManagerProvider>\n            <KeyboardShortcuts />\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","useDocumentEditor","AddressBar","Iframe","HoverManager","DropZoneManager","DropZoneManagerProvider","Boxes","ScrollTracker","KeyboardShortcuts","ViewportManager","mouseTracker","Commands","useSelectFromEditor","AwaitIframeUrl","PreviewEvents","ApplyTheme","Preview","editor","iframeTimestamp","setIframeTimestamp","Date","now","loadingPreview","state","scrollTracker","window","e","source","target","dataset","role","hoverManager","editorState","getEditorState","read","boxes","filter","box","id","viewportManager","previewEvents","dropzoneManager","updateEditor","offRefreshPreview","registerCommandHandler","RefreshPreview","preview","start","stop","destroy","setMousePositionFromDrag","setPosition","clientX","clientY","addEventListener","offHoverChange","onHoverChange","highlightedElement","removeEventListener","onConnected","messenger","createElement","Fragment","url","timestamp","showLoading"],"sources":["Preview.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { Messenger } from \"@webiny/website-builder-sdk\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { AddressBar } from \"./AddressBar\";\nimport { Iframe } from \"./Iframe\";\nimport { HoverManager } from \"./HoverManager\";\nimport { DropZoneManager } from \"./DropZoneManager\";\nimport { DropZoneManagerProvider } from \"./DropZoneManagerProvider\";\nimport { Boxes } from \"~/BaseEditor/hooks/Boxes\";\nimport { ScrollTracker } from \"~/BaseEditor/defaultConfig/Content/Preview/ScrollTracker\";\nimport { KeyboardShortcuts } from \"./KeyboardShortcuts\";\nimport { ViewportManager } from \"@webiny/website-builder-sdk\";\nimport { mouseTracker } from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { AwaitIframeUrl } from \"~/BaseEditor/defaultConfig/Content/Preview/AwaitIframeUrl\";\nimport { PreviewEvents } from \"~/BaseEditor/defaultConfig/Content/Preview/PreviewEvents\";\nimport { ApplyTheme } from \"./ApplyTheme\";\n\nexport const Preview = () => {\n    const editor = useDocumentEditor();\n    const [iframeTimestamp, setIframeTimestamp] = useState(Date.now());\n\n    const loadingPreview = useSelectFromEditor(state => state.loadingPreview);\n\n    const scrollTracker = useMemo(() => {\n        return new ScrollTracker(window, e => {\n            const source = e.target as HTMLDivElement | null;\n\n            if (!source) {\n                return false;\n            }\n\n            return source.dataset.role === \"element-overlay\";\n        });\n    }, []);\n\n    const hoverManager = useMemo(() => {\n        return new HoverManager(mouseTracker, () => {\n            const editorState = editor.getEditorState().read();\n            return new Boxes(editorState.boxes.editor).filter(box => box.id !== \"root\");\n        });\n    }, [mouseTracker]);\n\n    const viewportManager = useMemo(() => {\n        return new ViewportManager();\n    }, []);\n\n    const previewEvents = useMemo(() => {\n        return new PreviewEvents(editor, scrollTracker);\n    }, []);\n\n    const dropzoneManager = useMemo(() => {\n        return new DropZoneManager(mouseTracker);\n    }, [mouseTracker]);\n\n    useEffect(() => {\n        // On first mount, show loading.\n        editor.updateEditor(state => {\n            state.loadingPreview = true;\n        });\n\n        const offRefreshPreview = editor.registerCommandHandler(Commands.RefreshPreview, () => {\n            setIframeTimestamp(Date.now());\n\n            editor.updateEditor(state => {\n                // Unset boxes to remove old overlays.\n                state.loadingPreview = true;\n                state.boxes = {\n                    preview: {},\n                    editor: {}\n                };\n            });\n        });\n\n        return () => {\n            offRefreshPreview();\n        };\n    }, []);\n\n    // Start various trackers\n    useEffect(() => {\n        scrollTracker.start();\n        mouseTracker.start();\n        dropzoneManager.start();\n\n        return () => {\n            dropzoneManager.stop();\n            mouseTracker.stop();\n            scrollTracker.destroy();\n            viewportManager.destroy();\n            hoverManager.destroy();\n            previewEvents.destroy();\n        };\n    }, [dropzoneManager, scrollTracker, mouseTracker]);\n\n    // Update mouse position while dragging\n    useEffect(() => {\n        const setMousePositionFromDrag = (e: DragEvent) => {\n            mouseTracker.setPosition(e.clientX, e.clientY);\n        };\n\n        window.addEventListener(\"dragover\", setMousePositionFromDrag);\n\n        const offHoverChange = hoverManager.onHoverChange(id => {\n            editor.updateEditor(state => {\n                state.highlightedElement = id;\n            });\n        });\n\n        return () => {\n            window.removeEventListener(\"dragover\", setMousePositionFromDrag);\n            offHoverChange();\n        };\n    }, []);\n\n    const onConnected = useCallback((messenger: Messenger) => {\n        previewEvents.onConnected(messenger);\n    }, []);\n\n    return (\n        <>\n            <DropZoneManagerProvider dropzoneManager={dropzoneManager}>\n                <ApplyTheme />\n                <AddressBar />\n                <AwaitIframeUrl>\n                    {({ url }) => (\n                        <Iframe\n                            url={url}\n                            timestamp={iframeTimestamp}\n                            viewportManager={viewportManager}\n                            onConnected={onConnected}\n                            showLoading={loadingPreview}\n                        />\n                    )}\n                </AwaitIframeUrl>\n            </DropZoneManagerProvider>\n            <KeyboardShortcuts />\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/useIframeUrl.js

@@ -1,7 +1,11 @@
 import { useMemo } from "react";
+import { useTenancy } from "@webiny/app-tenancy";
 import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
 import { usePreviewDomain } from "./usePreviewDomain";
 export const useIframeUrl = () => {
+  const {
+    tenant
+  } = useTenancy();
   const {
     previewDomain
   } = usePreviewDomain();
@@ -13,17 +17,18 @@ export const useIframeUrl = () => {
       return null;
     }
     const newUrl = new URL(`${previewDomain}${path}`);
-    addSearchParamsFromDocument(newUrl, id, documentType);
+    addSearchParamsFromDocument(tenant, newUrl, id, documentType);
     return newUrl.toString();
   }, [previewDomain, id, path, documentType]);
 };
-function addSearchParamsFromDocument(url, id, documentType) {
+function addSearchParamsFromDocument(tenant, url, id, documentType) {
   const searchParams = url.searchParams;
   searchParams.set("wb.editing", "true");
   searchParams.set("wb.type", documentType);
   searchParams.set("wb.id", id);
   searchParams.set("wb.path", url.pathname);
   searchParams.set("wb.referrer", window.location.origin);
+  searchParams.set("wb.tenant", tenant);
 }
 
 //# sourceMappingURL=useIframeUrl.js.map

package/BaseEditor/defaultConfig/Content/Preview/useIframeUrl.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useSelectFromDocument","usePreviewDomain","useIframeUrl","previewDomain","id","document","documentType","metadata","path","properties","newUrl","URL","addSearchParamsFromDocument","toString","url","searchParams","set","pathname","window","location","origin"],"sources":["useIframeUrl.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { usePreviewDomain } from \"./usePreviewDomain\";\n\nexport const useIframeUrl = () => {\n    const { previewDomain } = usePreviewDomain();\n\n    const id = useSelectFromDocument(document => document.id);\n    const documentType = useSelectFromDocument(document => document.metadata.documentType);\n    const path = useSelectFromDocument(document => document.properties.path);\n\n    return useMemo(() => {\n        if (!previewDomain) {\n            return null;\n        }\n        const newUrl = new URL(`${previewDomain}${path}`);\n        addSearchParamsFromDocument(newUrl, id, documentType);\n        return newUrl.toString();\n    }, [previewDomain, id, path, documentType]);\n};\n\nfunction addSearchParamsFromDocument(url: URL, id: string, documentType: string) {\n    const searchParams = url.searchParams;\n    searchParams.set(\"wb.editing\", \"true\");\n    searchParams.set(\"wb.type\", documentType);\n    searchParams.set(\"wb.id\", id);\n    searchParams.set(\"wb.path\", url.pathname);\n    searchParams.set(\"wb.referrer\", window.location.origin);\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,qBAAqB;AAC9B,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM;IAAEC;EAAc,CAAC,GAAGF,gBAAgB,CAAC,CAAC;EAE5C,MAAMG,EAAE,GAAGJ,qBAAqB,CAACK,QAAQ,IAAIA,QAAQ,CAACD,EAAE,CAAC;EACzD,MAAME,YAAY,GAAGN,qBAAqB,CAACK,QAAQ,IAAIA,QAAQ,CAACE,QAAQ,CAACD,YAAY,CAAC;EACtF,MAAME,IAAI,GAAGR,qBAAqB,CAACK,QAAQ,IAAIA,QAAQ,CAACI,UAAU,CAACD,IAAI,CAAC;EAExE,OAAOT,OAAO,CAAC,MAAM;IACjB,IAAI,CAACI,aAAa,EAAE;MAChB,OAAO,IAAI;IACf;IACA,MAAMO,MAAM,GAAG,IAAIC,GAAG,CAAC,GAAGR,aAAa,GAAGK,IAAI,EAAE,CAAC;IACjDI,2BAA2B,CAACF,MAAM,EAAEN,EAAE,EAAEE,YAAY,CAAC;IACrD,OAAOI,MAAM,CAACG,QAAQ,CAAC,CAAC;EAC5B,CAAC,EAAE,CAACV,aAAa,EAAEC,EAAE,EAAEI,IAAI,EAAEF,YAAY,CAAC,CAAC;AAC/C,CAAC;AAED,SAASM,2BAA2BA,CAACE,GAAQ,EAAEV,EAAU,EAAEE,YAAoB,EAAE;EAC7E,MAAMS,YAAY,GAAGD,GAAG,CAACC,YAAY;EACrCA,YAAY,CAACC,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC;EACtCD,YAAY,CAACC,GAAG,CAAC,SAAS,EAAEV,YAAY,CAAC;EACzCS,YAAY,CAACC,GAAG,CAAC,OAAO,EAAEZ,EAAE,CAAC;EAC7BW,YAAY,CAACC,GAAG,CAAC,SAAS,EAAEF,GAAG,CAACG,QAAQ,CAAC;EACzCF,YAAY,CAACC,GAAG,CAAC,aAAa,EAAEE,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC;AAC3D","ignoreList":[]}
+{"version":3,"names":["useMemo","useTenancy","useSelectFromDocument","usePreviewDomain","useIframeUrl","tenant","previewDomain","id","document","documentType","metadata","path","properties","newUrl","URL","addSearchParamsFromDocument","toString","url","searchParams","set","pathname","window","location","origin"],"sources":["useIframeUrl.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useTenancy } from \"@webiny/app-tenancy\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { usePreviewDomain } from \"./usePreviewDomain\";\n\nexport const useIframeUrl = () => {\n    const { tenant } = useTenancy();\n    const { previewDomain } = usePreviewDomain();\n\n    const id = useSelectFromDocument(document => document.id);\n    const documentType = useSelectFromDocument(document => document.metadata.documentType);\n    const path = useSelectFromDocument(document => document.properties.path);\n\n    return useMemo(() => {\n        if (!previewDomain) {\n            return null;\n        }\n        const newUrl = new URL(`${previewDomain}${path}`);\n        addSearchParamsFromDocument(tenant!, newUrl, id, documentType);\n        return newUrl.toString();\n    }, [previewDomain, id, path, documentType]);\n};\n\nfunction addSearchParamsFromDocument(tenant: string, url: URL, id: string, documentType: string) {\n    const searchParams = url.searchParams;\n    searchParams.set(\"wb.editing\", \"true\");\n    searchParams.set(\"wb.type\", documentType);\n    searchParams.set(\"wb.id\", id);\n    searchParams.set(\"wb.path\", url.pathname);\n    searchParams.set(\"wb.referrer\", window.location.origin);\n    searchParams.set(\"wb.tenant\", tenant);\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,UAAU,QAAQ,qBAAqB;AAChD,SAASC,qBAAqB;AAC9B,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM;IAAEC;EAAO,CAAC,GAAGJ,UAAU,CAAC,CAAC;EAC/B,MAAM;IAAEK;EAAc,CAAC,GAAGH,gBAAgB,CAAC,CAAC;EAE5C,MAAMI,EAAE,GAAGL,qBAAqB,CAACM,QAAQ,IAAIA,QAAQ,CAACD,EAAE,CAAC;EACzD,MAAME,YAAY,GAAGP,qBAAqB,CAACM,QAAQ,IAAIA,QAAQ,CAACE,QAAQ,CAACD,YAAY,CAAC;EACtF,MAAME,IAAI,GAAGT,qBAAqB,CAACM,QAAQ,IAAIA,QAAQ,CAACI,UAAU,CAACD,IAAI,CAAC;EAExE,OAAOX,OAAO,CAAC,MAAM;IACjB,IAAI,CAACM,aAAa,EAAE;MAChB,OAAO,IAAI;IACf;IACA,MAAMO,MAAM,GAAG,IAAIC,GAAG,CAAC,GAAGR,aAAa,GAAGK,IAAI,EAAE,CAAC;IACjDI,2BAA2B,CAACV,MAAM,EAAGQ,MAAM,EAAEN,EAAE,EAAEE,YAAY,CAAC;IAC9D,OAAOI,MAAM,CAACG,QAAQ,CAAC,CAAC;EAC5B,CAAC,EAAE,CAACV,aAAa,EAAEC,EAAE,EAAEI,IAAI,EAAEF,YAAY,CAAC,CAAC;AAC/C,CAAC;AAED,SAASM,2BAA2BA,CAACV,MAAc,EAAEY,GAAQ,EAAEV,EAAU,EAAEE,YAAoB,EAAE;EAC7F,MAAMS,YAAY,GAAGD,GAAG,CAACC,YAAY;EACrCA,YAAY,CAACC,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC;EACtCD,YAAY,CAACC,GAAG,CAAC,SAAS,EAAEV,YAAY,CAAC;EACzCS,YAAY,CAACC,GAAG,CAAC,OAAO,EAAEZ,EAAE,CAAC;EAC7BW,YAAY,CAACC,GAAG,CAAC,SAAS,EAAEF,GAAG,CAACG,QAAQ,CAAC;EACzCF,YAAY,CAACC,GAAG,CAAC,aAAa,EAAEE,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC;EACvDL,YAAY,CAACC,GAAG,CAAC,WAAW,EAAEd,MAAM,CAAC;AACzC","ignoreList":[]}

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

@@ -22,7 +22,7 @@ export const useBindingsForElement = elementId => {
       resolvedBindings: bindingsProcessor.getBindings(bindings, breakpoint.name),
       inheritanceMap: inheritanceProcessor.getInheritanceMap(bindings, breakpoint.name)
     };
-  }, [elementId, breakpoint.name]);
+  }, [elementId, breakpoint.name, breakpoints.length]);
 };
 
 //# sourceMappingURL=useBindingsForElement.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["toJS","BindingsProcessor","useBreakpoint","useSelectFromDocument","useElementInputsAst","InheritanceProcessor","useBindingsForElement","elementId","breakpoint","breakpoints","inputsAst","document","bindings","breakpointNames","map","bp","name","bindingsProcessor","inheritanceProcessor","rawBindings","resolvedBindings","getBindings","inheritanceMap","getInheritanceMap"],"sources":["useBindingsForElement.ts"],"sourcesContent":["import { toJS } from \"mobx\";\nimport { BindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst\";\nimport { InheritanceProcessor } from \"@webiny/website-builder-sdk\";\n\nexport const useBindingsForElement = (elementId: string) => {\n    const { breakpoint, breakpoints } = useBreakpoint();\n    const inputsAst = useElementInputsAst(elementId);\n\n    return useSelectFromDocument(\n        document => {\n            const bindings = toJS(document.bindings[elementId]) ?? {};\n\n            // Merge element bindings.\n            const breakpointNames = breakpoints.map(bp => bp.name);\n            const bindingsProcessor = new BindingsProcessor(breakpointNames);\n            const inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);\n\n            return {\n                rawBindings: bindings,\n                resolvedBindings: bindingsProcessor.getBindings(bindings, breakpoint.name),\n                inheritanceMap: inheritanceProcessor.getInheritanceMap(bindings, breakpoint.name)\n            };\n        },\n        [elementId, breakpoint.name]\n    );\n};\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,MAAM;AAC3B,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,aAAa;AACtB,SAASC,qBAAqB;AAC9B,SAASC,mBAAmB;AAC5B,SAASC,oBAAoB,QAAQ,6BAA6B;AAElE,OAAO,MAAMC,qBAAqB,GAAIC,SAAiB,IAAK;EACxD,MAAM;IAAEC,UAAU;IAAEC;EAAY,CAAC,GAAGP,aAAa,CAAC,CAAC;EACnD,MAAMQ,SAAS,GAAGN,mBAAmB,CAACG,SAAS,CAAC;EAEhD,OAAOJ,qBAAqB,CACxBQ,QAAQ,IAAI;IACR,MAAMC,QAAQ,GAAGZ,IAAI,CAACW,QAAQ,CAACC,QAAQ,CAACL,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;;IAEzD;IACA,MAAMM,eAAe,GAAGJ,WAAW,CAACK,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CAAC;IACtD,MAAMC,iBAAiB,GAAG,IAAIhB,iBAAiB,CAACY,eAAe,CAAC;IAChE,MAAMK,oBAAoB,GAAG,IAAIb,oBAAoB,CAACQ,eAAe,EAAEH,SAAS,CAAC;IAEjF,OAAO;MACHS,WAAW,EAAEP,QAAQ;MACrBQ,gBAAgB,EAAEH,iBAAiB,CAACI,WAAW,CAACT,QAAQ,EAAEJ,UAAU,CAACQ,IAAI,CAAC;MAC1EM,cAAc,EAAEJ,oBAAoB,CAACK,iBAAiB,CAACX,QAAQ,EAAEJ,UAAU,CAACQ,IAAI;IACpF,CAAC;EACL,CAAC,EACD,CAACT,SAAS,EAAEC,UAAU,CAACQ,IAAI,CAC/B,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["toJS","BindingsProcessor","useBreakpoint","useSelectFromDocument","useElementInputsAst","InheritanceProcessor","useBindingsForElement","elementId","breakpoint","breakpoints","inputsAst","document","bindings","breakpointNames","map","bp","name","bindingsProcessor","inheritanceProcessor","rawBindings","resolvedBindings","getBindings","inheritanceMap","getInheritanceMap","length"],"sources":["useBindingsForElement.ts"],"sourcesContent":["import { toJS } from \"mobx\";\nimport { BindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { useElementInputsAst } from \"~/BaseEditor/hooks/useElementInputsAst\";\nimport { InheritanceProcessor } from \"@webiny/website-builder-sdk\";\n\nexport const useBindingsForElement = (elementId: string) => {\n    const { breakpoint, breakpoints } = useBreakpoint();\n    const inputsAst = useElementInputsAst(elementId);\n\n    return useSelectFromDocument(\n        document => {\n            const bindings = toJS(document.bindings[elementId]) ?? {};\n\n            // Merge element bindings.\n            const breakpointNames = breakpoints.map(bp => bp.name);\n            const bindingsProcessor = new BindingsProcessor(breakpointNames);\n            const inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);\n\n            return {\n                rawBindings: bindings,\n                resolvedBindings: bindingsProcessor.getBindings(bindings, breakpoint.name),\n                inheritanceMap: inheritanceProcessor.getInheritanceMap(bindings, breakpoint.name)\n            };\n        },\n        [elementId, breakpoint.name, breakpoints.length]\n    );\n};\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,MAAM;AAC3B,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,aAAa;AACtB,SAASC,qBAAqB;AAC9B,SAASC,mBAAmB;AAC5B,SAASC,oBAAoB,QAAQ,6BAA6B;AAElE,OAAO,MAAMC,qBAAqB,GAAIC,SAAiB,IAAK;EACxD,MAAM;IAAEC,UAAU;IAAEC;EAAY,CAAC,GAAGP,aAAa,CAAC,CAAC;EACnD,MAAMQ,SAAS,GAAGN,mBAAmB,CAACG,SAAS,CAAC;EAEhD,OAAOJ,qBAAqB,CACxBQ,QAAQ,IAAI;IACR,MAAMC,QAAQ,GAAGZ,IAAI,CAACW,QAAQ,CAACC,QAAQ,CAACL,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;;IAEzD;IACA,MAAMM,eAAe,GAAGJ,WAAW,CAACK,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CAAC;IACtD,MAAMC,iBAAiB,GAAG,IAAIhB,iBAAiB,CAACY,eAAe,CAAC;IAChE,MAAMK,oBAAoB,GAAG,IAAIb,oBAAoB,CAACQ,eAAe,EAAEH,SAAS,CAAC;IAEjF,OAAO;MACHS,WAAW,EAAEP,QAAQ;MACrBQ,gBAAgB,EAAEH,iBAAiB,CAACI,WAAW,CAACT,QAAQ,EAAEJ,UAAU,CAACQ,IAAI,CAAC;MAC1EM,cAAc,EAAEJ,oBAAoB,CAACK,iBAAiB,CAACX,QAAQ,EAAEJ,UAAU,CAACQ,IAAI;IACpF,CAAC;EACL,CAAC,EACD,CAACT,SAAS,EAAEC,UAAU,CAACQ,IAAI,EAAEP,WAAW,CAACe,MAAM,CACnD,CAAC;AACL,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js

@@ -1,9 +1,12 @@
 import React, { useMemo } from "react";
 import { Text, Tag, Icon, Button, Separator, DropdownMenu, FormComponentLabel } from "@webiny/admin-ui";
 import { useBreakpoint } from "../../hooks/useBreakpoint";
+import { InlineSvg } from "../Toolbar/InsertElements/InlineSvg";
 const getBreakpointIcon = (breakpoints, name) => {
   const bp = breakpoints.find(breakpoint => breakpoint.name === name);
-  return bp ? bp.icon : null;
+  return bp ? /*#__PURE__*/React.createElement(InlineSvg, {
+    src: bp.icon
+  }) : null;
 };
 const iconClassName = "wby-cursor-pointer wby-mr-xs wby-mb-[2px]";
 export const InheritanceLabel = ({

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","Text","Tag","Icon","Button","Separator","DropdownMenu","FormComponentLabel","useBreakpoint","getBreakpointIcon","breakpoints","name","bp","find","breakpoint","icon","iconClassName","InheritanceLabel","inheritedFrom","isOverridden","text","onReset","isBaseBreakpoint","baseBreakpoint","createElement","className","trigger","label","size","color","style","fill","align","side","width","InheritedFrom","overriddenAt","variant","margin","onClick","content"],"sources":["InheritanceLabel.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n    Text,\n    Tag,\n    Icon,\n    Button,\n    Separator,\n    DropdownMenu,\n    FormComponentLabel\n} from \"@webiny/admin-ui\";\nimport type { EditorBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\n\nexport interface InheritanceLabelProps {\n    text: React.ReactNode;\n    isOverridden: boolean;\n    onReset: () => void;\n    inheritedFrom?: string;\n}\n\nconst getBreakpointIcon = (breakpoints: EditorBreakpoint[], name: string) => {\n    const bp = breakpoints.find(breakpoint => breakpoint.name === name);\n    return bp ? bp.icon : null;\n};\n\nconst iconClassName = \"wby-cursor-pointer wby-mr-xs wby-mb-[2px]\";\n\nexport const InheritanceLabel = ({\n    inheritedFrom,\n    isOverridden,\n    text,\n    onReset\n}: InheritanceLabelProps) => {\n    const { breakpoint, breakpoints, isBaseBreakpoint } = useBreakpoint();\n    const baseBreakpoint = breakpoints[0];\n\n    const icon = useMemo(() => {\n        const bp = inheritedFrom ?? baseBreakpoint.name;\n        return getBreakpointIcon(breakpoints, bp);\n    }, [inheritedFrom, breakpoint.name]);\n\n    if (isBaseBreakpoint) {\n        return <FormComponentLabel text={text} />;\n    }\n\n    return (\n        <div className={\"wby-flex wby-items-center\"}>\n            <DropdownMenu\n                trigger={\n                    isOverridden ? (\n                        <Icon\n                            icon={icon}\n                            label=\"\"\n                            size=\"sm\"\n                            color=\"neutral-strong\"\n                            className={iconClassName}\n                            style={{ fill: \"hsl(var(--bg-success-default))\" }}\n                        />\n                    ) : (\n                        <Icon\n                            icon={icon}\n                            label=\"\"\n                            size=\"sm\"\n                            color=\"neutral-strong\"\n                            className={iconClassName}\n                        />\n                    )\n                }\n                align=\"center\"\n                side=\"bottom\"\n                className={\"wy-p-sm wby-shadow-lg\"}\n            >\n                <div className={\"wby-p-sm wby-text-sm\"} style={{ width: 200 }}>\n                    <InheritedFrom\n                        inheritedFrom={inheritedFrom ?? baseBreakpoint.name}\n                        overriddenAt={isOverridden ? breakpoint.name : null}\n                        onReset={onReset}\n                    />\n                </div>\n            </DropdownMenu>\n            <FormComponentLabel text={text} />\n        </div>\n    );\n};\n\ninterface InheritedFromProps {\n    overriddenAt: string | null;\n    inheritedFrom?: string;\n    onReset: () => void;\n}\n\nexport const InheritedFrom = ({ overriddenAt, inheritedFrom, onReset }: InheritedFromProps) => {\n    if (overriddenAt) {\n        return (\n            <div>\n                This value is set on the current breakpoint.\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                <Button variant={\"primary\"} onClick={onReset} text={\"Reset value\"} size={\"sm\"} />\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                Resetting will inherit the value from the{\" \"}\n                <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n            </div>\n        );\n    }\n\n    return (\n        <Text size={\"sm\"}>\n            This value is inherited from the{\" \"}\n            <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n        </Text>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SACIC,IAAI,EACJC,GAAG,EACHC,IAAI,EACJC,MAAM,EACNC,SAAS,EACTC,YAAY,EACZC,kBAAkB,QACf,kBAAkB;AAEzB,SAASC,aAAa;AAStB,MAAMC,iBAAiB,GAAGA,CAACC,WAA+B,EAAEC,IAAY,KAAK;EACzE,MAAMC,EAAE,GAAGF,WAAW,CAACG,IAAI,CAACC,UAAU,IAAIA,UAAU,CAACH,IAAI,KAAKA,IAAI,CAAC;EACnE,OAAOC,EAAE,GAAGA,EAAE,CAACG,IAAI,GAAG,IAAI;AAC9B,CAAC;AAED,MAAMC,aAAa,GAAG,2CAA2C;AAEjE,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAC7BC,aAAa;EACbC,YAAY;EACZC,IAAI;EACJC;AACmB,CAAC,KAAK;EACzB,MAAM;IAAEP,UAAU;IAAEJ,WAAW;IAAEY;EAAiB,CAAC,GAAGd,aAAa,CAAC,CAAC;EACrE,MAAMe,cAAc,GAAGb,WAAW,CAAC,CAAC,CAAC;EAErC,MAAMK,IAAI,GAAGf,OAAO,CAAC,MAAM;IACvB,MAAMY,EAAE,GAAGM,aAAa,IAAIK,cAAc,CAACZ,IAAI;IAC/C,OAAOF,iBAAiB,CAACC,WAAW,EAAEE,EAAE,CAAC;EAC7C,CAAC,EAAE,CAACM,aAAa,EAAEJ,UAAU,CAACH,IAAI,CAAC,CAAC;EAEpC,IAAIW,gBAAgB,EAAE;IAClB,oBAAOvB,KAAA,CAAAyB,aAAA,CAACjB,kBAAkB;MAACa,IAAI,EAAEA;IAAK,CAAE,CAAC;EAC7C;EAEA,oBACIrB,KAAA,CAAAyB,aAAA;IAAKC,SAAS,EAAE;EAA4B,gBACxC1B,KAAA,CAAAyB,aAAA,CAAClB,YAAY;IACToB,OAAO,EACHP,YAAY,gBACRpB,KAAA,CAAAyB,aAAA,CAACrB,IAAI;MACDY,IAAI,EAAEA,IAAK;MACXY,KAAK,EAAC,EAAE;MACRC,IAAI,EAAC,IAAI;MACTC,KAAK,EAAC,gBAAgB;MACtBJ,SAAS,EAAET,aAAc;MACzBc,KAAK,EAAE;QAAEC,IAAI,EAAE;MAAiC;IAAE,CACrD,CAAC,gBAEFhC,KAAA,CAAAyB,aAAA,CAACrB,IAAI;MACDY,IAAI,EAAEA,IAAK;MACXY,KAAK,EAAC,EAAE;MACRC,IAAI,EAAC,IAAI;MACTC,KAAK,EAAC,gBAAgB;MACtBJ,SAAS,EAAET;IAAc,CAC5B,CAER;IACDgB,KAAK,EAAC,QAAQ;IACdC,IAAI,EAAC,QAAQ;IACbR,SAAS,EAAE;EAAwB,gBAEnC1B,KAAA,CAAAyB,aAAA;IAAKC,SAAS,EAAE,sBAAuB;IAACK,KAAK,EAAE;MAAEI,KAAK,EAAE;IAAI;EAAE,gBAC1DnC,KAAA,CAAAyB,aAAA,CAACW,aAAa;IACVjB,aAAa,EAAEA,aAAa,IAAIK,cAAc,CAACZ,IAAK;IACpDyB,YAAY,EAAEjB,YAAY,GAAGL,UAAU,CAACH,IAAI,GAAG,IAAK;IACpDU,OAAO,EAAEA;EAAQ,CACpB,CACA,CACK,CAAC,eACftB,KAAA,CAAAyB,aAAA,CAACjB,kBAAkB;IAACa,IAAI,EAAEA;EAAK,CAAE,CAChC,CAAC;AAEd,CAAC;AAQD,OAAO,MAAMe,aAAa,GAAGA,CAAC;EAAEC,YAAY;EAAElB,aAAa;EAAEG;AAA4B,CAAC,KAAK;EAC3F,IAAIe,YAAY,EAAE;IACd,oBACIrC,KAAA,CAAAyB,aAAA,cAAK,8CAED,eAAAzB,KAAA,CAAAyB,aAAA,CAACnB,SAAS;MAACgC,OAAO,EAAE,QAAS;MAACC,MAAM,EAAE;IAAK,CAAE,CAAC,eAC9CvC,KAAA,CAAAyB,aAAA,CAACpB,MAAM;MAACiC,OAAO,EAAE,SAAU;MAACE,OAAO,EAAElB,OAAQ;MAACD,IAAI,EAAE,aAAc;MAACQ,IAAI,EAAE;IAAK,CAAE,CAAC,eACjF7B,KAAA,CAAAyB,aAAA,CAACnB,SAAS;MAACgC,OAAO,EAAE,QAAS;MAACC,MAAM,EAAE;IAAK,CAAE,CAAC,6CACL,EAAC,GAAG,eAC7CvC,KAAA,CAAAyB,aAAA,CAACtB,GAAG;MAACmC,OAAO,EAAE,eAAgB;MAACG,OAAO,EAAEtB;IAAc,CAAE,CAAC,gBACxD,CAAC;EAEd;EAEA,oBACInB,KAAA,CAAAyB,aAAA,CAACvB,IAAI;IAAC2B,IAAI,EAAE;EAAK,GAAC,kCACkB,EAAC,GAAG,eACpC7B,KAAA,CAAAyB,aAAA,CAACtB,GAAG;IAACmC,OAAO,EAAE,eAAgB;IAACG,OAAO,EAAEtB;EAAc,CAAE,CAAC,gBACvD,CAAC;AAEf,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useMemo","Text","Tag","Icon","Button","Separator","DropdownMenu","FormComponentLabel","useBreakpoint","InlineSvg","getBreakpointIcon","breakpoints","name","bp","find","breakpoint","createElement","src","icon","iconClassName","InheritanceLabel","inheritedFrom","isOverridden","text","onReset","isBaseBreakpoint","baseBreakpoint","className","trigger","label","size","color","style","fill","align","side","width","InheritedFrom","overriddenAt","variant","margin","onClick","content"],"sources":["InheritanceLabel.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n    Text,\n    Tag,\n    Icon,\n    Button,\n    Separator,\n    DropdownMenu,\n    FormComponentLabel\n} from \"@webiny/admin-ui\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg\";\nimport type { Breakpoint } from \"@webiny/website-builder-sdk\";\n\nexport interface InheritanceLabelProps {\n    text: React.ReactNode;\n    isOverridden: boolean;\n    onReset: () => void;\n    inheritedFrom?: string;\n}\n\nconst getBreakpointIcon = (breakpoints: Breakpoint[], name: string) => {\n    const bp = breakpoints.find(breakpoint => breakpoint.name === name);\n    return bp ? <InlineSvg src={bp.icon} /> : null;\n};\n\nconst iconClassName = \"wby-cursor-pointer wby-mr-xs wby-mb-[2px]\";\n\nexport const InheritanceLabel = ({\n    inheritedFrom,\n    isOverridden,\n    text,\n    onReset\n}: InheritanceLabelProps) => {\n    const { breakpoint, breakpoints, isBaseBreakpoint } = useBreakpoint();\n    const baseBreakpoint = breakpoints[0];\n\n    const icon = useMemo(() => {\n        const bp = inheritedFrom ?? baseBreakpoint.name;\n        return getBreakpointIcon(breakpoints, bp);\n    }, [inheritedFrom, breakpoint.name]);\n\n    if (isBaseBreakpoint) {\n        return <FormComponentLabel text={text} />;\n    }\n\n    return (\n        <div className={\"wby-flex wby-items-center\"}>\n            <DropdownMenu\n                trigger={\n                    isOverridden ? (\n                        <Icon\n                            icon={icon}\n                            label=\"\"\n                            size=\"sm\"\n                            color=\"neutral-strong\"\n                            className={iconClassName}\n                            style={{ fill: \"hsl(var(--bg-success-default))\" }}\n                        />\n                    ) : (\n                        <Icon\n                            icon={icon}\n                            label=\"\"\n                            size=\"sm\"\n                            color=\"neutral-strong\"\n                            className={iconClassName}\n                        />\n                    )\n                }\n                align=\"center\"\n                side=\"bottom\"\n                className={\"wy-p-sm wby-shadow-lg\"}\n            >\n                <div className={\"wby-p-sm wby-text-sm\"} style={{ width: 200 }}>\n                    <InheritedFrom\n                        inheritedFrom={inheritedFrom ?? baseBreakpoint.name}\n                        overriddenAt={isOverridden ? breakpoint.name : null}\n                        onReset={onReset}\n                    />\n                </div>\n            </DropdownMenu>\n            <FormComponentLabel text={text} />\n        </div>\n    );\n};\n\ninterface InheritedFromProps {\n    overriddenAt: string | null;\n    inheritedFrom?: string;\n    onReset: () => void;\n}\n\nexport const InheritedFrom = ({ overriddenAt, inheritedFrom, onReset }: InheritedFromProps) => {\n    if (overriddenAt) {\n        return (\n            <div>\n                This value is set on the current breakpoint.\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                <Button variant={\"primary\"} onClick={onReset} text={\"Reset value\"} size={\"sm\"} />\n                <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                Resetting will inherit the value from the{\" \"}\n                <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n            </div>\n        );\n    }\n\n    return (\n        <Text size={\"sm\"}>\n            This value is inherited from the{\" \"}\n            <Tag variant={\"neutral-muted\"} content={inheritedFrom} /> breakpoint.\n        </Text>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -19,8 +19,8 @@ export class StylesStore {
     this.breakpointNames = breakpointNames;
     const manifest = $getComponentManifestByElementId(editor, elementId ?? "");
     const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);
-    this.bindingsProcessor = new BindingsProcessor(this.breakpointNames);
-    this.inheritanceProcessor = new InheritanceProcessor(this.breakpointNames, inputsAst);
+    this.bindingsProcessor = new BindingsProcessor(breakpointNames);
+    this.inheritanceProcessor = new InheritanceProcessor(breakpointNames, inputsAst);
     const document = this.editor.getDocumentState().read();
     const editorState = this.editor.getEditorState().read();
     const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;
@@ -57,11 +57,11 @@ export class StylesStore {
     });
     const finalStyles = styles.getAll();
     const updatedStyles = this.stylesProcessor.createUpdate(finalStyles, this.currentBreakpoint);
-    this.localPreviewStyles = undefined;
     this.editor.updateDocument(document => {
       updatedStyles.applyToDocument(document);
       this.elementMetadata.applyToDocument(document);
     });
+    this.localPreviewStyles = undefined;
   };
   onPreviewChange = cb => {
     if (!this.stylesProcessor) {

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

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

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

@@ -11,14 +11,15 @@ export function useStyles(elementId) {
     breakpoints
   } = useBreakpoint();
   const store = useMemo(() => {
+    const cacheKey = [elementId, ...breakpoints].join(";");
     // Create or get existing store for this element
-    let store = stylesStores.get(elementId);
+    let store = stylesStores.get(cacheKey);
     if (!store) {
       store = new StylesStore(editor, elementId, breakpoints.map(bp => bp.name));
-      stylesStores.set(elementId, store);
+      stylesStores.set(cacheKey, store);
     }
     return store;
-  }, [elementId]);
+  }, [elementId, breakpoints.length]);
   return {
     store,
     styles: store.vm.styles,

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useDocumentEditor","useBreakpoint","StylesStore","stylesStores","Map","useStyles","elementId","editor","breakpoints","store","get","map","bp","name","set","styles","vm","metadata","inheritanceMap","onChange","onPreviewChange"],"sources":["useStyles.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { StylesStore, type ElementBreakpointStyles } from \"./StylesStore\";\n\n// Singleton store container\nconst stylesStores = new Map<string, StylesStore>();\n\nexport type { ElementBreakpointStyles };\n\nexport function useStyles(elementId: string) {\n    const editor = useDocumentEditor();\n    const { breakpoints } = useBreakpoint();\n\n    const store = useMemo(() => {\n        // Create or get existing store for this element\n        let store = stylesStores.get(elementId);\n\n        if (!store) {\n            store = new StylesStore(\n                editor,\n                elementId,\n                breakpoints.map(bp => bp.name)\n            );\n            stylesStores.set(elementId, store);\n        }\n\n        return store;\n    }, [elementId]);\n\n    return {\n        store,\n        styles: store.vm.styles,\n        metadata: store.vm.metadata,\n        inheritanceMap: store.vm.inheritanceMap,\n        onChange: store.onChange,\n        onPreviewChange: store.onPreviewChange\n    };\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,iBAAiB;AAC1B,SAASC,aAAa;AACtB,SAASC,WAAW;;AAEpB;AACA,MAAMC,YAAY,GAAG,IAAIC,GAAG,CAAsB,CAAC;AAInD,OAAO,SAASC,SAASA,CAACC,SAAiB,EAAE;EACzC,MAAMC,MAAM,GAAGP,iBAAiB,CAAC,CAAC;EAClC,MAAM;IAAEQ;EAAY,CAAC,GAAGP,aAAa,CAAC,CAAC;EAEvC,MAAMQ,KAAK,GAAGV,OAAO,CAAC,MAAM;IACxB;IACA,IAAIU,KAAK,GAAGN,YAAY,CAACO,GAAG,CAACJ,SAAS,CAAC;IAEvC,IAAI,CAACG,KAAK,EAAE;MACRA,KAAK,GAAG,IAAIP,WAAW,CACnBK,MAAM,EACND,SAAS,EACTE,WAAW,CAACG,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CACjC,CAAC;MACDV,YAAY,CAACW,GAAG,CAACR,SAAS,EAAEG,KAAK,CAAC;IACtC;IAEA,OAAOA,KAAK;EAChB,CAAC,EAAE,CAACH,SAAS,CAAC,CAAC;EAEf,OAAO;IACHG,KAAK;IACLM,MAAM,EAAEN,KAAK,CAACO,EAAE,CAACD,MAAM;IACvBE,QAAQ,EAAER,KAAK,CAACO,EAAE,CAACC,QAAQ;IAC3BC,cAAc,EAAET,KAAK,CAACO,EAAE,CAACE,cAAc;IACvCC,QAAQ,EAAEV,KAAK,CAACU,QAAQ;IACxBC,eAAe,EAAEX,KAAK,CAACW;EAC3B,CAAC;AACL","ignoreList":[]}
+{"version":3,"names":["useMemo","useDocumentEditor","useBreakpoint","StylesStore","stylesStores","Map","useStyles","elementId","editor","breakpoints","store","cacheKey","join","get","map","bp","name","set","length","styles","vm","metadata","inheritanceMap","onChange","onPreviewChange"],"sources":["useStyles.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { StylesStore, type ElementBreakpointStyles } from \"./StylesStore\";\n\n// Singleton store container\nconst stylesStores = new Map<string, StylesStore>();\n\nexport type { ElementBreakpointStyles };\n\nexport function useStyles(elementId: string) {\n    const editor = useDocumentEditor();\n    const { breakpoints } = useBreakpoint();\n\n    const store = useMemo(() => {\n        const cacheKey = [elementId, ...breakpoints].join(\";\");\n        // Create or get existing store for this element\n        let store = stylesStores.get(cacheKey);\n\n        if (!store) {\n            store = new StylesStore(\n                editor,\n                elementId,\n                breakpoints.map(bp => bp.name)\n            );\n            stylesStores.set(cacheKey, store);\n        }\n\n        return store;\n    }, [elementId, breakpoints.length]);\n\n    return {\n        store,\n        styles: store.vm.styles,\n        metadata: store.vm.metadata,\n        inheritanceMap: store.vm.inheritanceMap,\n        onChange: store.onChange,\n        onPreviewChange: store.onPreviewChange\n    };\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,iBAAiB;AAC1B,SAASC,aAAa;AACtB,SAASC,WAAW;;AAEpB;AACA,MAAMC,YAAY,GAAG,IAAIC,GAAG,CAAsB,CAAC;AAInD,OAAO,SAASC,SAASA,CAACC,SAAiB,EAAE;EACzC,MAAMC,MAAM,GAAGP,iBAAiB,CAAC,CAAC;EAClC,MAAM;IAAEQ;EAAY,CAAC,GAAGP,aAAa,CAAC,CAAC;EAEvC,MAAMQ,KAAK,GAAGV,OAAO,CAAC,MAAM;IACxB,MAAMW,QAAQ,GAAG,CAACJ,SAAS,EAAE,GAAGE,WAAW,CAAC,CAACG,IAAI,CAAC,GAAG,CAAC;IACtD;IACA,IAAIF,KAAK,GAAGN,YAAY,CAACS,GAAG,CAACF,QAAQ,CAAC;IAEtC,IAAI,CAACD,KAAK,EAAE;MACRA,KAAK,GAAG,IAAIP,WAAW,CACnBK,MAAM,EACND,SAAS,EACTE,WAAW,CAACK,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CACjC,CAAC;MACDZ,YAAY,CAACa,GAAG,CAACN,QAAQ,EAAED,KAAK,CAAC;IACrC;IAEA,OAAOA,KAAK;EAChB,CAAC,EAAE,CAACH,SAAS,EAAEE,WAAW,CAACS,MAAM,CAAC,CAAC;EAEnC,OAAO;IACHR,KAAK;IACLS,MAAM,EAAET,KAAK,CAACU,EAAE,CAACD,MAAM;IACvBE,QAAQ,EAAEX,KAAK,CAACU,EAAE,CAACC,QAAQ;IAC3BC,cAAc,EAAEZ,KAAK,CAACU,EAAE,CAACE,cAAc;IACvCC,QAAQ,EAAEb,KAAK,CAACa,QAAQ;IACxBC,eAAe,EAAEd,KAAK,CAACc;EAC3B,CAAC;AACL","ignoreList":[]}

package/BaseEditor/hooks/useBreakpoint.d.ts

@@ -1,16 +1,6 @@
-import type React from "react";
-import type { Breakpoint } from "@webiny/website-builder-sdk";
-export type EditorBreakpoint = Breakpoint & {
-    title: string;
-    description: string;
-    icon: React.ReactNode;
-};
 export declare const useBreakpoint: () => {
     isBaseBreakpoint: boolean;
-    breakpoint: import("@webiny/website-builder-sdk/types/WebsiteBuilderTheme").Breakpoint | {
-        name: string;
-        maxWidth: number;
-    };
-    breakpoints: import("@webiny/website-builder-sdk/types/WebsiteBuilderTheme").Breakpoint[];
+    breakpoint: import("@webiny/website-builder-sdk").Breakpoint;
+    breakpoints: import("@webiny/website-builder-sdk").Breakpoint[];
     setBreakpoint: (mode: string) => void;
 };

package/BaseEditor/hooks/useBreakpoint.js

@@ -16,9 +16,13 @@ export const useBreakpoint = () => {
     const bp = breakpoints.find(bp => bp.name === activeBreakpoint);
     return bp ?? {
       name: BASE_BREAKPOINT,
+      title: "Base Breakpoint",
+      description: "",
+      icon: "",
+      minWidth: 0,
       maxWidth: 4000
     };
-  }, [activeBreakpoint, breakpoints]);
+  }, [activeBreakpoint, breakpoints.length]);
   const setBreakpoint = useCallback(mode => {
     editor.updateEditor(state => {
       state.breakpoint = mode;

package/BaseEditor/hooks/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useMemo","useDocumentEditor","useSelectFromEditor","BASE_BREAKPOINT","useWebsiteBuilderTheme","useBreakpoint","theme","breakpoints","editor","activeBreakpoint","state","breakpoint","name","bp","find","maxWidth","setBreakpoint","mode","updateEditor","isBaseBreakpoint"],"sources":["useBreakpoint.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useCallback, useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport type { Breakpoint } from \"@webiny/website-builder-sdk\";\nimport { BASE_BREAKPOINT } from \"~/constants\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components\";\n\nexport type EditorBreakpoint = Breakpoint & {\n    title: string;\n    description: string;\n    icon: React.ReactNode;\n};\n\nexport const useBreakpoint = () => {\n    const { theme } = useWebsiteBuilderTheme();\n    const breakpoints = theme?.breakpoints ?? [];\n\n    const editor = useDocumentEditor();\n    const activeBreakpoint = useSelectFromEditor<string>(state => {\n        return state.breakpoint ?? breakpoints[0]?.name ?? \"desktop\";\n    });\n\n    const breakpoint = useMemo(() => {\n        const bp = breakpoints.find(bp => bp.name === activeBreakpoint);\n        return (\n            bp ?? {\n                name: BASE_BREAKPOINT,\n                maxWidth: 4000\n            }\n        );\n    }, [activeBreakpoint, breakpoints]);\n\n    const setBreakpoint = useCallback(\n        (mode: string) => {\n            editor.updateEditor(state => {\n                state.breakpoint = mode;\n            });\n        },\n        [editor]\n    );\n\n    return {\n        isBaseBreakpoint: breakpoint.name === BASE_BREAKPOINT,\n        breakpoint,\n        breakpoints,\n        setBreakpoint\n    };\n};\n"],"mappings":"AACA,SAASA,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAC5C,SAASC,iBAAiB;AAC1B,SAASC,mBAAmB;AAE5B,SAASC,eAAe;AACxB,SAASC,sBAAsB;AAQ/B,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EAC/B,MAAM;IAAEC;EAAM,CAAC,GAAGF,sBAAsB,CAAC,CAAC;EAC1C,MAAMG,WAAW,GAAGD,KAAK,EAAEC,WAAW,IAAI,EAAE;EAE5C,MAAMC,MAAM,GAAGP,iBAAiB,CAAC,CAAC;EAClC,MAAMQ,gBAAgB,GAAGP,mBAAmB,CAASQ,KAAK,IAAI;IAC1D,OAAOA,KAAK,CAACC,UAAU,IAAIJ,WAAW,CAAC,CAAC,CAAC,EAAEK,IAAI,IAAI,SAAS;EAChE,CAAC,CAAC;EAEF,MAAMD,UAAU,GAAGX,OAAO,CAAC,MAAM;IAC7B,MAAMa,EAAE,GAAGN,WAAW,CAACO,IAAI,CAACD,EAAE,IAAIA,EAAE,CAACD,IAAI,KAAKH,gBAAgB,CAAC;IAC/D,OACII,EAAE,IAAI;MACFD,IAAI,EAAET,eAAe;MACrBY,QAAQ,EAAE;IACd,CAAC;EAET,CAAC,EAAE,CAACN,gBAAgB,EAAEF,WAAW,CAAC,CAAC;EAEnC,MAAMS,aAAa,GAAGjB,WAAW,CAC5BkB,IAAY,IAAK;IACdT,MAAM,CAACU,YAAY,CAACR,KAAK,IAAI;MACzBA,KAAK,CAACC,UAAU,GAAGM,IAAI;IAC3B,CAAC,CAAC;EACN,CAAC,EACD,CAACT,MAAM,CACX,CAAC;EAED,OAAO;IACHW,gBAAgB,EAAER,UAAU,CAACC,IAAI,KAAKT,eAAe;IACrDQ,UAAU;IACVJ,WAAW;IACXS;EACJ,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["useCallback","useMemo","useDocumentEditor","useSelectFromEditor","BASE_BREAKPOINT","useWebsiteBuilderTheme","useBreakpoint","theme","breakpoints","editor","activeBreakpoint","state","breakpoint","name","bp","find","title","description","icon","minWidth","maxWidth","length","setBreakpoint","mode","updateEditor","isBaseBreakpoint"],"sources":["useBreakpoint.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport { BASE_BREAKPOINT } from \"~/constants\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components\";\n\nexport const useBreakpoint = () => {\n    const { theme } = useWebsiteBuilderTheme();\n    const breakpoints = theme?.breakpoints ?? [];\n\n    const editor = useDocumentEditor();\n    const activeBreakpoint = useSelectFromEditor<string>(state => {\n        return state.breakpoint ?? breakpoints[0]?.name ?? \"desktop\";\n    });\n\n    const breakpoint = useMemo(() => {\n        const bp = breakpoints.find(bp => bp.name === activeBreakpoint);\n        return (\n            bp ?? {\n                name: BASE_BREAKPOINT,\n                title: \"Base Breakpoint\",\n                description: \"\",\n                icon: \"\",\n                minWidth: 0,\n                maxWidth: 4000\n            }\n        );\n    }, [activeBreakpoint, breakpoints.length]);\n\n    const setBreakpoint = useCallback(\n        (mode: string) => {\n            editor.updateEditor(state => {\n                state.breakpoint = mode;\n            });\n        },\n        [editor]\n    );\n\n    return {\n        isBaseBreakpoint: breakpoint.name === BASE_BREAKPOINT,\n        breakpoint,\n        breakpoints,\n        setBreakpoint\n    };\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAC5C,SAASC,iBAAiB;AAC1B,SAASC,mBAAmB;AAC5B,SAASC,eAAe;AACxB,SAASC,sBAAsB;AAE/B,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EAC/B,MAAM;IAAEC;EAAM,CAAC,GAAGF,sBAAsB,CAAC,CAAC;EAC1C,MAAMG,WAAW,GAAGD,KAAK,EAAEC,WAAW,IAAI,EAAE;EAE5C,MAAMC,MAAM,GAAGP,iBAAiB,CAAC,CAAC;EAClC,MAAMQ,gBAAgB,GAAGP,mBAAmB,CAASQ,KAAK,IAAI;IAC1D,OAAOA,KAAK,CAACC,UAAU,IAAIJ,WAAW,CAAC,CAAC,CAAC,EAAEK,IAAI,IAAI,SAAS;EAChE,CAAC,CAAC;EAEF,MAAMD,UAAU,GAAGX,OAAO,CAAC,MAAM;IAC7B,MAAMa,EAAE,GAAGN,WAAW,CAACO,IAAI,CAACD,EAAE,IAAIA,EAAE,CAACD,IAAI,KAAKH,gBAAgB,CAAC;IAC/D,OACII,EAAE,IAAI;MACFD,IAAI,EAAET,eAAe;MACrBY,KAAK,EAAE,iBAAiB;MACxBC,WAAW,EAAE,EAAE;MACfC,IAAI,EAAE,EAAE;MACRC,QAAQ,EAAE,CAAC;MACXC,QAAQ,EAAE;IACd,CAAC;EAET,CAAC,EAAE,CAACV,gBAAgB,EAAEF,WAAW,CAACa,MAAM,CAAC,CAAC;EAE1C,MAAMC,aAAa,GAAGtB,WAAW,CAC5BuB,IAAY,IAAK;IACdd,MAAM,CAACe,YAAY,CAACb,KAAK,IAAI;MACzBA,KAAK,CAACC,UAAU,GAAGW,IAAI;IAC3B,CAAC,CAAC;EACN,CAAC,EACD,CAACd,MAAM,CACX,CAAC;EAED,OAAO;IACHgB,gBAAgB,EAAEb,UAAU,CAACC,IAAI,KAAKT,eAAe;IACrDQ,UAAU;IACVJ,WAAW;IACXc;EACJ,CAAC;AACL,CAAC","ignoreList":[]}

package/BaseEditor/index.d.ts

@@ -1,4 +1,4 @@
 export { DefaultEditorConfig } from "./defaultConfig/DefaultEditorConfig";
 export * from "./config";
 export * from "./commands";
-export { ElementInputRendererProps } from "./config/ElementInput";
+export type { ElementInputRendererProps } from "./config/ElementInput";

package/BaseEditor/index.js

@@ -1,6 +1,5 @@
 export { DefaultEditorConfig } from "./defaultConfig/DefaultEditorConfig";
 export * from "./config";
 export * from "./commands";
-export { ElementInputRendererProps } from "./config/ElementInput";
 
 //# sourceMappingURL=index.js.map

package/BaseEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["DefaultEditorConfig","ElementInputRendererProps"],"sources":["index.tsx"],"sourcesContent":["export { DefaultEditorConfig } from \"./defaultConfig/DefaultEditorConfig\";\nexport * from \"./config\";\nexport * from \"./commands\";\nexport { ElementInputRendererProps } from \"./config/ElementInput\";\n"],"mappings":"AAAA,SAASA,mBAAmB;AAC5B;AACA;AACA,SAASC,yBAAyB","ignoreList":[]}
+{"version":3,"names":["DefaultEditorConfig"],"sources":["index.tsx"],"sourcesContent":["export { DefaultEditorConfig } from \"./defaultConfig/DefaultEditorConfig\";\nexport * from \"./config\";\nexport * from \"./commands\";\nexport type { ElementInputRendererProps } from \"./config/ElementInput\";\n"],"mappings":"AAAA,SAASA,mBAAmB;AAC5B;AACA","ignoreList":[]}

package/configs/pages/list/Browser/FolderAction.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { AcoConfig, FolderActionConfig } from "@webiny/app-aco";
-export { FolderActionConfig };
+import { AcoConfig, type FolderActionConfig } from "@webiny/app-aco";
+export type { FolderActionConfig };
 type FolderActionProps = React.ComponentProps<typeof AcoConfig.Folder.Action>;
 export declare const FolderAction: ((props: FolderActionProps) => React.JSX.Element) & {
     OptionsMenuItem: (props: import("@webiny/app-admin").OptionsMenuItemProps) => React.JSX.Element;

package/configs/pages/list/Browser/FolderAction.js

@@ -1,9 +1,8 @@
 import React from "react";
-import { AcoConfig, FolderActionConfig } from "@webiny/app-aco";
+import { AcoConfig } from "@webiny/app-aco";
 const {
   Folder
 } = AcoConfig;
-export { FolderActionConfig };
 const BaseFolderAction = props => {
   return /*#__PURE__*/React.createElement(AcoConfig, null, /*#__PURE__*/React.createElement(Folder.Action, props));
 };

package/configs/pages/list/Browser/FolderAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","AcoConfig","FolderActionConfig","Folder","BaseFolderAction","props","createElement","Action","FolderAction","Object","assign","OptionsMenuItem"],"sources":["FolderAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { AcoConfig, FolderActionConfig } from \"@webiny/app-aco\";\n\nconst { Folder } = AcoConfig;\n\nexport { FolderActionConfig };\n\ntype FolderActionProps = React.ComponentProps<typeof AcoConfig.Folder.Action>;\n\nconst BaseFolderAction = (props: FolderActionProps) => {\n    return (\n        <AcoConfig>\n            <Folder.Action {...props} />\n        </AcoConfig>\n    );\n};\n\nexport const FolderAction = Object.assign(BaseFolderAction, {\n    OptionsMenuItem: Folder.Action.OptionsMenuItem\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,kBAAkB,QAAQ,iBAAiB;AAE/D,MAAM;EAAEC;AAAO,CAAC,GAAGF,SAAS;AAE5B,SAASC,kBAAkB;AAI3B,MAAME,gBAAgB,GAAIC,KAAwB,IAAK;EACnD,oBACIL,KAAA,CAAAM,aAAA,CAACL,SAAS,qBACND,KAAA,CAAAM,aAAA,CAACH,MAAM,CAACI,MAAM,EAAKF,KAAQ,CACpB,CAAC;AAEpB,CAAC;AAED,OAAO,MAAMG,YAAY,GAAGC,MAAM,CAACC,MAAM,CAACN,gBAAgB,EAAE;EACxDO,eAAe,EAAER,MAAM,CAACI,MAAM,CAACI;AACnC,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","AcoConfig","Folder","BaseFolderAction","props","createElement","Action","FolderAction","Object","assign","OptionsMenuItem"],"sources":["FolderAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { AcoConfig, type FolderActionConfig } from \"@webiny/app-aco\";\n\nconst { Folder } = AcoConfig;\n\nexport type { FolderActionConfig };\n\ntype FolderActionProps = React.ComponentProps<typeof AcoConfig.Folder.Action>;\n\nconst BaseFolderAction = (props: FolderActionProps) => {\n    return (\n        <AcoConfig>\n            <Folder.Action {...props} />\n        </AcoConfig>\n    );\n};\n\nexport const FolderAction = Object.assign(BaseFolderAction, {\n    OptionsMenuItem: Folder.Action.OptionsMenuItem\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAiC,iBAAiB;AAEpE,MAAM;EAAEC;AAAO,CAAC,GAAGD,SAAS;AAM5B,MAAME,gBAAgB,GAAIC,KAAwB,IAAK;EACnD,oBACIJ,KAAA,CAAAK,aAAA,CAACJ,SAAS,qBACND,KAAA,CAAAK,aAAA,CAACH,MAAM,CAACI,MAAM,EAAKF,KAAQ,CACpB,CAAC;AAEpB,CAAC;AAED,OAAO,MAAMG,YAAY,GAAGC,MAAM,CAACC,MAAM,CAACN,gBAAgB,EAAE;EACxDO,eAAe,EAAER,MAAM,CAACI,MAAM,CAACI;AACnC,CAAC,CAAC","ignoreList":[]}

package/configs/pages/list/Browser/PageAction.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { AcoConfig, RecordActionConfig } from "@webiny/app-aco";
-export { RecordActionConfig as PageActionConfig };
+import { AcoConfig, type RecordActionConfig } from "@webiny/app-aco";
+export type { RecordActionConfig as PageActionConfig };
 type PageActionProps = React.ComponentProps<typeof AcoConfig.Record.Action>;
 export declare const PageAction: ((props: PageActionProps) => React.JSX.Element) & {
     OptionsMenuItem: (props: import("@webiny/app-admin").OptionsMenuItemProps) => React.JSX.Element;

package/configs/pages/list/Browser/PageAction.js

@@ -1,9 +1,8 @@
 import React from "react";
-import { AcoConfig, RecordActionConfig } from "@webiny/app-aco";
+import { AcoConfig } from "@webiny/app-aco";
 const {
   Record
 } = AcoConfig;
-export { RecordActionConfig as PageActionConfig };
 const BasePageAction = props => {
   return /*#__PURE__*/React.createElement(AcoConfig, null, /*#__PURE__*/React.createElement(Record.Action, props));
 };

package/configs/pages/list/Browser/PageAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","AcoConfig","RecordActionConfig","Record","PageActionConfig","BasePageAction","props","createElement","Action","PageAction","Object","assign","OptionsMenuItem","OptionsMenuLink"],"sources":["PageAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { AcoConfig, RecordActionConfig } from \"@webiny/app-aco\";\n\nconst { Record } = AcoConfig;\n\nexport { RecordActionConfig as PageActionConfig };\n\ntype PageActionProps = React.ComponentProps<typeof AcoConfig.Record.Action>;\n\nconst BasePageAction = (props: PageActionProps) => {\n    return (\n        <AcoConfig>\n            <Record.Action {...props} />\n        </AcoConfig>\n    );\n};\n\nexport const PageAction = Object.assign(BasePageAction, {\n    OptionsMenuItem: Record.Action.OptionsMenuItem,\n    OptionsMenuLink: Record.Action.OptionsMenuLink\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,kBAAkB,QAAQ,iBAAiB;AAE/D,MAAM;EAAEC;AAAO,CAAC,GAAGF,SAAS;AAE5B,SAASC,kBAAkB,IAAIE,gBAAgB;AAI/C,MAAMC,cAAc,GAAIC,KAAsB,IAAK;EAC/C,oBACIN,KAAA,CAAAO,aAAA,CAACN,SAAS,qBACND,KAAA,CAAAO,aAAA,CAACJ,MAAM,CAACK,MAAM,EAAKF,KAAQ,CACpB,CAAC;AAEpB,CAAC;AAED,OAAO,MAAMG,UAAU,GAAGC,MAAM,CAACC,MAAM,CAACN,cAAc,EAAE;EACpDO,eAAe,EAAET,MAAM,CAACK,MAAM,CAACI,eAAe;EAC9CC,eAAe,EAAEV,MAAM,CAACK,MAAM,CAACK;AACnC,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","AcoConfig","Record","BasePageAction","props","createElement","Action","PageAction","Object","assign","OptionsMenuItem","OptionsMenuLink"],"sources":["PageAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { AcoConfig, type RecordActionConfig } from \"@webiny/app-aco\";\n\nconst { Record } = AcoConfig;\n\nexport type { RecordActionConfig as PageActionConfig };\n\ntype PageActionProps = React.ComponentProps<typeof AcoConfig.Record.Action>;\n\nconst BasePageAction = (props: PageActionProps) => {\n    return (\n        <AcoConfig>\n            <Record.Action {...props} />\n        </AcoConfig>\n    );\n};\n\nexport const PageAction = Object.assign(BasePageAction, {\n    OptionsMenuItem: Record.Action.OptionsMenuItem,\n    OptionsMenuLink: Record.Action.OptionsMenuLink\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAiC,iBAAiB;AAEpE,MAAM;EAAEC;AAAO,CAAC,GAAGD,SAAS;AAM5B,MAAME,cAAc,GAAIC,KAAsB,IAAK;EAC/C,oBACIJ,KAAA,CAAAK,aAAA,CAACJ,SAAS,qBACND,KAAA,CAAAK,aAAA,CAACH,MAAM,CAACI,MAAM,EAAKF,KAAQ,CACpB,CAAC;AAEpB,CAAC;AAED,OAAO,MAAMG,UAAU,GAAGC,MAAM,CAACC,MAAM,CAACN,cAAc,EAAE;EACpDO,eAAe,EAAER,MAAM,CAACI,MAAM,CAACI,eAAe;EAC9CC,eAAe,EAAET,MAAM,CAACI,MAAM,CAACK;AACnC,CAAC,CAAC","ignoreList":[]}

package/configs/pages/list/Browser/Table/Column.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { AcoConfig, TableColumnConfig as ColumnConfig } from "@webiny/app-aco";
+import { AcoConfig, type TableColumnConfig as ColumnConfig } from "@webiny/app-aco";
 import type { DocumentDto } from "../../../../../modules/pages/PagesList/presenters/DocumentListMapper.js";
-export { ColumnConfig };
+export type { ColumnConfig };
 type ColumnProps = React.ComponentProps<typeof AcoConfig.Table.Column>;
 export declare const Column: ((props: ColumnProps) => React.JSX.Element) & {
     original: (props: ColumnProps) => React.JSX.Element;

package/configs/pages/list/Browser/Table/Column.js

@@ -1,10 +1,9 @@
 import React from "react";
-import { AcoConfig, TableColumnConfig as ColumnConfig } from "@webiny/app-aco";
+import { AcoConfig } from "@webiny/app-aco";
 import { makeDecoratable } from "@webiny/react-composition";
 const {
   Table
 } = AcoConfig;
-export { ColumnConfig };
 const BaseColumnComponent = props => {
   return /*#__PURE__*/React.createElement(AcoConfig, null, /*#__PURE__*/React.createElement(Table.Column, props));
 };

package/configs/pages/list/Browser/Table/Column.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","AcoConfig","TableColumnConfig","ColumnConfig","makeDecoratable","Table","BaseColumnComponent","props","createElement","Column","BaseColumn","Object","assign","useTableRow","createUseTableRow","isFolderRow"],"sources":["Column.tsx"],"sourcesContent":["import React from \"react\";\nimport { AcoConfig, TableColumnConfig as ColumnConfig } from \"@webiny/app-aco\";\nimport type { DocumentDto } from \"~/modules/pages/PagesList/presenters/DocumentListMapper.js\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\nconst { Table } = AcoConfig;\n\nexport { ColumnConfig };\n\ntype ColumnProps = React.ComponentProps<typeof AcoConfig.Table.Column>;\n\nconst BaseColumnComponent = (props: ColumnProps) => {\n    return (\n        <AcoConfig>\n            <Table.Column {...props} />\n        </AcoConfig>\n    );\n};\n\nconst BaseColumn = makeDecoratable(\"Column\", BaseColumnComponent);\n\nexport const Column = Object.assign(BaseColumn, {\n    useTableRow: Table.Column.createUseTableRow<DocumentDto>(),\n    isFolderRow: Table.Column.isFolderRow\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,iBAAiB,IAAIC,YAAY,QAAQ,iBAAiB;AAE9E,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,MAAM;EAAEC;AAAM,CAAC,GAAGJ,SAAS;AAE3B,SAASE,YAAY;AAIrB,MAAMG,mBAAmB,GAAIC,KAAkB,IAAK;EAChD,oBACIP,KAAA,CAAAQ,aAAA,CAACP,SAAS,qBACND,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,MAAM,EAAKF,KAAQ,CACnB,CAAC;AAEpB,CAAC;AAED,MAAMG,UAAU,GAAGN,eAAe,CAAC,QAAQ,EAAEE,mBAAmB,CAAC;AAEjE,OAAO,MAAMG,MAAM,GAAGE,MAAM,CAACC,MAAM,CAACF,UAAU,EAAE;EAC5CG,WAAW,EAAER,KAAK,CAACI,MAAM,CAACK,iBAAiB,CAAc,CAAC;EAC1DC,WAAW,EAAEV,KAAK,CAACI,MAAM,CAACM;AAC9B,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","AcoConfig","makeDecoratable","Table","BaseColumnComponent","props","createElement","Column","BaseColumn","Object","assign","useTableRow","createUseTableRow","isFolderRow"],"sources":["Column.tsx"],"sourcesContent":["import React from \"react\";\nimport { AcoConfig, type TableColumnConfig as ColumnConfig } from \"@webiny/app-aco\";\nimport type { DocumentDto } from \"~/modules/pages/PagesList/presenters/DocumentListMapper.js\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\nconst { Table } = AcoConfig;\n\nexport type { ColumnConfig };\n\ntype ColumnProps = React.ComponentProps<typeof AcoConfig.Table.Column>;\n\nconst BaseColumnComponent = (props: ColumnProps) => {\n    return (\n        <AcoConfig>\n            <Table.Column {...props} />\n        </AcoConfig>\n    );\n};\n\nconst BaseColumn = makeDecoratable(\"Column\", BaseColumnComponent);\n\nexport const Column = Object.assign(BaseColumn, {\n    useTableRow: Table.Column.createUseTableRow<DocumentDto>(),\n    isFolderRow: Table.Column.isFolderRow\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAgD,iBAAiB;AAEnF,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,MAAM;EAAEC;AAAM,CAAC,GAAGF,SAAS;AAM3B,MAAMG,mBAAmB,GAAIC,KAAkB,IAAK;EAChD,oBACIL,KAAA,CAAAM,aAAA,CAACL,SAAS,qBACND,KAAA,CAAAM,aAAA,CAACH,KAAK,CAACI,MAAM,EAAKF,KAAQ,CACnB,CAAC;AAEpB,CAAC;AAED,MAAMG,UAAU,GAAGN,eAAe,CAAC,QAAQ,EAAEE,mBAAmB,CAAC;AAEjE,OAAO,MAAMG,MAAM,GAAGE,MAAM,CAACC,MAAM,CAACF,UAAU,EAAE;EAC5CG,WAAW,EAAER,KAAK,CAACI,MAAM,CAACK,iBAAiB,CAAc,CAAC;EAC1DC,WAAW,EAAEV,KAAK,CAACI,MAAM,CAACM;AAC9B,CAAC,CAAC","ignoreList":[]}

package/inputRenderers/LexicalInput/TypographyDropDown.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { $getNearestNodeOfType } from "@lexical/utils";
 import { DropDown, DropDownItem, useCurrentSelection, useCurrentElement, useTypographyAction } from "@webiny/lexical-editor";
 import { $isHeadingNode, $isParagraphNode, $isQuoteNode, $isListNode, ListNode } from "@webiny/lexical-nodes";
-import { useTheme } from "@webiny/app-admin";
+import { useWebsiteBuilderTheme } from "../../BaseEditor/components";
 export const TypographyDropDown = () => {
   const {
     value,
@@ -10,7 +10,7 @@ export const TypographyDropDown = () => {
   } = useTypographyAction();
   const {
     theme
-  } = useTheme();
+  } = useWebsiteBuilderTheme();
   const [styles, setStyles] = useState([]);
   const {
     element
@@ -63,7 +63,7 @@ export const TypographyDropDown = () => {
         setStyles(getListStyles("ol"));
       }
     } else if ($isQuoteNode(element)) {
-      setStyles(theme?.styles.typography?.quotes || []);
+      setStyles(theme?.styles?.typography?.quotes || []);
     } else {
       setStyles([]);
     }
@@ -77,10 +77,7 @@ export const TypographyDropDown = () => {
     showScroll: true
   }, styles?.map(option => /*#__PURE__*/React.createElement(DropDownItem, {
     className: `item typography-item ${value?.id === option.id ? "active dropdown-item-active" : ""}`,
-    onClick: () => applyTypography({
-      ...option,
-      css: option.styles
-    }),
+    onClick: () => applyTypography(option),
     key: option.id
   }, /*#__PURE__*/React.createElement("span", {
     className: "text"

package/inputRenderers/LexicalInput/TypographyDropDown.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","$getNearestNodeOfType","DropDown","DropDownItem","useCurrentSelection","useCurrentElement","useTypographyAction","$isHeadingNode","$isParagraphNode","$isQuoteNode","$isListNode","ListNode","useTheme","TypographyDropDown","value","applyTypography","theme","styles","setStyles","element","rangeSelection","getAllTextStyles","typography","headingsStyles","headings","paragraphStyles","paragraphs","getListStyles","tag","listStyles","lists","filter","x","length","fallbackTag","type","anchorNode","anchor","getNode","parentList","getListType","quotes","createElement","Fragment","buttonClassName","buttonAriaLabel","buttonLabel","name","stopCloseOnClickSelf","disabled","showScroll","map","option","className","id","onClick","css","key"],"sources":["TypographyDropDown.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { $getNearestNodeOfType } from \"@lexical/utils\";\nimport {\n    DropDown,\n    DropDownItem,\n    useCurrentSelection,\n    useCurrentElement,\n    useTypographyAction\n} from \"@webiny/lexical-editor\";\nimport {\n    $isHeadingNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isListNode,\n    ListNode\n} from \"@webiny/lexical-nodes\";\nimport type { TypographyStyle } from \"@webiny/theme/types\";\nimport type { TypographyValue } from \"@webiny/lexical-theme\";\nimport { useTheme } from \"@webiny/app-admin\";\n\nexport const TypographyDropDown = () => {\n    const { value, applyTypography } = useTypographyAction();\n    const { theme } = useTheme();\n    const [styles, setStyles] = useState<TypographyStyle[]>([]);\n    const { element } = useCurrentElement();\n    const { rangeSelection } = useCurrentSelection();\n\n    const getAllTextStyles = (): TypographyStyle[] => {\n        if (!theme?.styles.typography) {\n            return [];\n        }\n        const headingsStyles = theme.styles.typography?.headings || [];\n        const paragraphStyles = theme.styles.typography?.paragraphs || [];\n        return [...headingsStyles, ...paragraphStyles];\n    };\n\n    useEffect(() => {\n        // In static toolbar typography, styles always need to be visible.\n        if (theme?.styles) {\n            setStyles(getAllTextStyles());\n        }\n    }, [theme?.styles]);\n\n    const getListStyles = (tag: string): TypographyStyle[] => {\n        const listStyles = theme?.styles.typography.lists?.filter(x => x.tag === tag) || [];\n        if (listStyles.length > 0) {\n            return listStyles;\n        }\n\n        const fallbackTag = tag === \"ul\" ? \"ol\" : \"ul\";\n        return theme?.styles.typography.lists?.filter(x => x.tag === fallbackTag) || [];\n    };\n\n    useEffect(() => {\n        if (!element || !rangeSelection) {\n            return;\n        }\n\n        if ($isParagraphNode(element) || $isHeadingNode(element)) {\n            setStyles(getAllTextStyles());\n        } else if ($isListNode(element)) {\n            let type;\n            try {\n                const anchorNode = rangeSelection.anchor.getNode();\n                const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n                if (parentList) {\n                    type = parentList.getListType();\n                }\n            } catch {\n                type = element.getListType();\n            }\n\n            if (type === \"bullet\") {\n                setStyles(getListStyles(\"ul\"));\n            } else {\n                setStyles(getListStyles(\"ol\"));\n            }\n        } else if ($isQuoteNode(element)) {\n            setStyles(theme?.styles.typography?.quotes || []);\n        } else {\n            setStyles([]);\n        }\n    }, [element]);\n\n    return (\n        <>\n            {!!styles?.length ? (\n                <DropDown\n                    buttonClassName=\"toolbar-item typography-dropdown\"\n                    buttonAriaLabel={\"Typography formatting options\"}\n                    buttonLabel={value?.name || \"Typography\"}\n                    stopCloseOnClickSelf={true}\n                    disabled={false}\n                    showScroll={true}\n                >\n                    {styles?.map(option => (\n                        <DropDownItem\n                            className={`item typography-item ${\n                                value?.id === option.id ? \"active dropdown-item-active\" : \"\"\n                            }`}\n                            onClick={() =>\n                                applyTypography({\n                                    ...option,\n                                    css: option.styles\n                                } as TypographyValue)\n                            }\n                            key={option.id}\n                        >\n                            <span className=\"text\">{option.name}</span>\n                        </DropDownItem>\n                    ))}\n                </DropDown>\n            ) : null}\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","$getNearestNodeOfType","DropDown","DropDownItem","useCurrentSelection","useCurrentElement","useTypographyAction","$isHeadingNode","$isParagraphNode","$isQuoteNode","$isListNode","ListNode","useWebsiteBuilderTheme","TypographyDropDown","value","applyTypography","theme","styles","setStyles","element","rangeSelection","getAllTextStyles","typography","headingsStyles","headings","paragraphStyles","paragraphs","getListStyles","tag","listStyles","lists","filter","x","length","fallbackTag","type","anchorNode","anchor","getNode","parentList","getListType","quotes","createElement","Fragment","buttonClassName","buttonAriaLabel","buttonLabel","name","stopCloseOnClickSelf","disabled","showScroll","map","option","className","id","onClick","key"],"sources":["TypographyDropDown.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { $getNearestNodeOfType } from \"@lexical/utils\";\nimport {\n    DropDown,\n    DropDownItem,\n    useCurrentSelection,\n    useCurrentElement,\n    useTypographyAction\n} from \"@webiny/lexical-editor\";\nimport {\n    $isHeadingNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isListNode,\n    ListNode\n} from \"@webiny/lexical-nodes\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components\";\nimport type { TypographyStyle } from \"@webiny/website-builder-sdk/types/WebsiteBuilderTheme\";\n\nexport const TypographyDropDown = () => {\n    const { value, applyTypography } = useTypographyAction();\n    const { theme } = useWebsiteBuilderTheme();\n    const [styles, setStyles] = useState<TypographyStyle[]>([]);\n    const { element } = useCurrentElement();\n    const { rangeSelection } = useCurrentSelection();\n\n    const getAllTextStyles = (): TypographyStyle[] => {\n        if (!theme?.styles.typography) {\n            return [];\n        }\n        const headingsStyles = theme.styles.typography?.headings || [];\n        const paragraphStyles = theme.styles.typography?.paragraphs || [];\n        return [...headingsStyles, ...paragraphStyles];\n    };\n\n    useEffect(() => {\n        // In static toolbar typography, styles always need to be visible.\n        if (theme?.styles) {\n            setStyles(getAllTextStyles());\n        }\n    }, [theme?.styles]);\n\n    const getListStyles = (tag: string): TypographyStyle[] => {\n        const listStyles = theme?.styles.typography.lists?.filter(x => x.tag === tag) || [];\n        if (listStyles.length > 0) {\n            return listStyles;\n        }\n\n        const fallbackTag = tag === \"ul\" ? \"ol\" : \"ul\";\n        return theme?.styles.typography.lists?.filter(x => x.tag === fallbackTag) || [];\n    };\n\n    useEffect(() => {\n        if (!element || !rangeSelection) {\n            return;\n        }\n\n        if ($isParagraphNode(element) || $isHeadingNode(element)) {\n            setStyles(getAllTextStyles());\n        } else if ($isListNode(element)) {\n            let type;\n            try {\n                const anchorNode = rangeSelection.anchor.getNode();\n                const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n                if (parentList) {\n                    type = parentList.getListType();\n                }\n            } catch {\n                type = element.getListType();\n            }\n\n            if (type === \"bullet\") {\n                setStyles(getListStyles(\"ul\"));\n            } else {\n                setStyles(getListStyles(\"ol\"));\n            }\n        } else if ($isQuoteNode(element)) {\n            setStyles(theme?.styles?.typography?.quotes || []);\n        } else {\n            setStyles([]);\n        }\n    }, [element]);\n\n    return (\n        <>\n            {!!styles?.length ? (\n                <DropDown\n                    buttonClassName=\"toolbar-item typography-dropdown\"\n                    buttonAriaLabel={\"Typography formatting options\"}\n                    buttonLabel={value?.name || \"Typography\"}\n                    stopCloseOnClickSelf={true}\n                    disabled={false}\n                    showScroll={true}\n                >\n                    {styles?.map(option => (\n                        <DropDownItem\n                            className={`item typography-item ${\n                                value?.id === option.id ? \"active dropdown-item-active\" : \"\"\n                            }`}\n                            onClick={() => applyTypography(option)}\n                            key={option.id}\n                        >\n                            <span className=\"text\">{option.name}</span>\n                        </DropDownItem>\n                    ))}\n                </DropDown>\n            ) : null}\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/modules/pages/PagesList/hooks/usePagePreviewLink.js

@@ -1,6 +1,10 @@
 import { useMemo } from "react";
+import { useTenancy } from "@webiny/app-tenancy";
 import { usePreviewDomain } from "../../../../BaseEditor/defaultConfig/Content/Preview/usePreviewDomain";
 export const usePagePreviewLink = pageDto => {
+  const {
+    tenant
+  } = useTenancy();
   const {
     previewDomain
   } = usePreviewDomain();
@@ -12,6 +16,7 @@ export const usePagePreviewLink = pageDto => {
     url.searchParams.set("wb.preview", "true");
     url.searchParams.set("wb.type", pageDto.metadata.documentType);
     url.searchParams.set("wb.id", pageDto.id);
+    url.searchParams.set("wb.tenant", tenant);
     url.searchParams.set("wb.path", pageDto.properties.path);
     return url.toString();
   }, [previewDomain]);

package/modules/pages/PagesList/hooks/usePagePreviewLink.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","usePreviewDomain","usePagePreviewLink","pageDto","previewDomain","properties","path","url","URL","searchParams","set","metadata","documentType","id","toString"],"sources":["usePagePreviewLink.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { PageDto } from \"~/domain/Page\";\nimport { usePreviewDomain } from \"~/BaseEditor/defaultConfig/Content/Preview/usePreviewDomain\";\n\nexport const usePagePreviewLink = (pageDto: PageDto) => {\n    const { previewDomain } = usePreviewDomain();\n\n    return useMemo(() => {\n        if (!previewDomain || !pageDto.properties.path) {\n            return null;\n        }\n\n        const url = new URL(`${previewDomain}${pageDto.properties.path}`);\n        url.searchParams.set(\"wb.preview\", \"true\");\n        url.searchParams.set(\"wb.type\", pageDto.metadata.documentType);\n        url.searchParams.set(\"wb.id\", pageDto.id);\n        url.searchParams.set(\"wb.path\", pageDto.properties.path);\n        return url.toString();\n    }, [previewDomain]);\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAE/B,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,kBAAkB,GAAIC,OAAgB,IAAK;EACpD,MAAM;IAAEC;EAAc,CAAC,GAAGH,gBAAgB,CAAC,CAAC;EAE5C,OAAOD,OAAO,CAAC,MAAM;IACjB,IAAI,CAACI,aAAa,IAAI,CAACD,OAAO,CAACE,UAAU,CAACC,IAAI,EAAE;MAC5C,OAAO,IAAI;IACf;IAEA,MAAMC,GAAG,GAAG,IAAIC,GAAG,CAAC,GAAGJ,aAAa,GAAGD,OAAO,CAACE,UAAU,CAACC,IAAI,EAAE,CAAC;IACjEC,GAAG,CAACE,YAAY,CAACC,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC;IAC1CH,GAAG,CAACE,YAAY,CAACC,GAAG,CAAC,SAAS,EAAEP,OAAO,CAACQ,QAAQ,CAACC,YAAY,CAAC;IAC9DL,GAAG,CAACE,YAAY,CAACC,GAAG,CAAC,OAAO,EAAEP,OAAO,CAACU,EAAE,CAAC;IACzCN,GAAG,CAACE,YAAY,CAACC,GAAG,CAAC,SAAS,EAAEP,OAAO,CAACE,UAAU,CAACC,IAAI,CAAC;IACxD,OAAOC,GAAG,CAACO,QAAQ,CAAC,CAAC;EACzB,CAAC,EAAE,CAACV,aAAa,CAAC,CAAC;AACvB,CAAC","ignoreList":[]}
+{"version":3,"names":["useMemo","useTenancy","usePreviewDomain","usePagePreviewLink","pageDto","tenant","previewDomain","properties","path","url","URL","searchParams","set","metadata","documentType","id","toString"],"sources":["usePagePreviewLink.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useTenancy } from \"@webiny/app-tenancy\";\nimport type { PageDto } from \"~/domain/Page\";\nimport { usePreviewDomain } from \"~/BaseEditor/defaultConfig/Content/Preview/usePreviewDomain\";\n\nexport const usePagePreviewLink = (pageDto: PageDto) => {\n    const { tenant } = useTenancy();\n    const { previewDomain } = usePreviewDomain();\n\n    return useMemo(() => {\n        if (!previewDomain || !pageDto.properties.path) {\n            return null;\n        }\n\n        const url = new URL(`${previewDomain}${pageDto.properties.path}`);\n        url.searchParams.set(\"wb.preview\", \"true\");\n        url.searchParams.set(\"wb.type\", pageDto.metadata.documentType);\n        url.searchParams.set(\"wb.id\", pageDto.id);\n        url.searchParams.set(\"wb.tenant\", tenant!);\n        url.searchParams.set(\"wb.path\", pageDto.properties.path);\n        return url.toString();\n    }, [previewDomain]);\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,UAAU,QAAQ,qBAAqB;AAEhD,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,kBAAkB,GAAIC,OAAgB,IAAK;EACpD,MAAM;IAAEC;EAAO,CAAC,GAAGJ,UAAU,CAAC,CAAC;EAC/B,MAAM;IAAEK;EAAc,CAAC,GAAGJ,gBAAgB,CAAC,CAAC;EAE5C,OAAOF,OAAO,CAAC,MAAM;IACjB,IAAI,CAACM,aAAa,IAAI,CAACF,OAAO,CAACG,UAAU,CAACC,IAAI,EAAE;MAC5C,OAAO,IAAI;IACf;IAEA,MAAMC,GAAG,GAAG,IAAIC,GAAG,CAAC,GAAGJ,aAAa,GAAGF,OAAO,CAACG,UAAU,CAACC,IAAI,EAAE,CAAC;IACjEC,GAAG,CAACE,YAAY,CAACC,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC;IAC1CH,GAAG,CAACE,YAAY,CAACC,GAAG,CAAC,SAAS,EAAER,OAAO,CAACS,QAAQ,CAACC,YAAY,CAAC;IAC9DL,GAAG,CAACE,YAAY,CAACC,GAAG,CAAC,OAAO,EAAER,OAAO,CAACW,EAAE,CAAC;IACzCN,GAAG,CAACE,YAAY,CAACC,GAAG,CAAC,WAAW,EAAEP,MAAO,CAAC;IAC1CI,GAAG,CAACE,YAAY,CAACC,GAAG,CAAC,SAAS,EAAER,OAAO,CAACG,UAAU,CAACC,IAAI,CAAC;IACxD,OAAOC,GAAG,CAACO,QAAQ,CAAC,CAAC;EACzB,CAAC,EAAE,CAACV,aAAa,CAAC,CAAC;AACvB,CAAC","ignoreList":[]}

package/package.json

@@ -1,16 +1,11 @@
 {
 	"name": "@webiny/app-website-builder",
-	"version": "0.0.0-unstable.e53eceafb5",
+	"version": "0.0.0-unstable.fdd9228b5d",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
 	},
-	"exports": {
-		".": "./index.js",
-		"./ecommerce": "./ecommerce/index.js",
-		"./Extension": "./Extension.js"
-	},
 	"author": "Pavel Denisjuk",
 	"license": "MIT",
 	"dependencies": {
@@ -21,30 +16,29 @@
 		"@monaco-editor/react": "4.7.0",
 		"@svgr/webpack": "6.5.1",
 		"@types/react": "18.2.79",
-		"@webiny/admin-ui": "0.0.0-unstable.e53eceafb5",
-		"@webiny/app": "0.0.0-unstable.e53eceafb5",
-		"@webiny/app-aco": "0.0.0-unstable.e53eceafb5",
-		"@webiny/app-admin": "0.0.0-unstable.e53eceafb5",
-		"@webiny/app-headless-cms-common": "0.0.0-unstable.e53eceafb5",
-		"@webiny/app-i18n": "0.0.0-unstable.e53eceafb5",
-		"@webiny/app-security": "0.0.0-unstable.e53eceafb5",
-		"@webiny/app-tenancy": "0.0.0-unstable.e53eceafb5",
-		"@webiny/app-utils": "0.0.0-unstable.e53eceafb5",
-		"@webiny/error": "0.0.0-unstable.e53eceafb5",
-		"@webiny/form": "0.0.0-unstable.e53eceafb5",
-		"@webiny/icons": "0.0.0-unstable.e53eceafb5",
-		"@webiny/lexical-converter": "0.0.0-unstable.e53eceafb5",
-		"@webiny/lexical-editor": "0.0.0-unstable.e53eceafb5",
-		"@webiny/lexical-nodes": "0.0.0-unstable.e53eceafb5",
-		"@webiny/lexical-theme": "0.0.0-unstable.e53eceafb5",
-		"@webiny/react-composition": "0.0.0-unstable.e53eceafb5",
-		"@webiny/react-properties": "0.0.0-unstable.e53eceafb5",
-		"@webiny/react-router": "0.0.0-unstable.e53eceafb5",
-		"@webiny/theme": "0.0.0-unstable.e53eceafb5",
-		"@webiny/ui": "0.0.0-unstable.e53eceafb5",
-		"@webiny/utils": "0.0.0-unstable.e53eceafb5",
-		"@webiny/validation": "0.0.0-unstable.e53eceafb5",
-		"@webiny/website-builder-sdk": "0.0.0-unstable.e53eceafb5",
+		"@webiny/admin-ui": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/app": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/app-aco": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/app-admin": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/app-headless-cms-common": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/app-i18n": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/app-security": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/app-tenancy": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/app-utils": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/error": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/form": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/icons": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/lexical-converter": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/lexical-editor": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/lexical-nodes": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/lexical-theme": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/react-composition": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/react-properties": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/react-router": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/ui": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/utils": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/validation": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/website-builder-sdk": "0.0.0-unstable.fdd9228b5d",
 		"apollo-cache": "1.3.5",
 		"apollo-client": "2.6.10",
 		"apollo-link": "1.2.14",
@@ -80,8 +74,8 @@
 		"@types/react-virtualized": "9.22.0",
 		"@types/resize-observer-browser": "0.1.7",
 		"@types/store": "2.0.2",
-		"@webiny/cli": "0.0.0-unstable.e53eceafb5",
-		"@webiny/project-utils": "0.0.0-unstable.e53eceafb5",
+		"@webiny/cli": "0.0.0-unstable.fdd9228b5d",
+		"@webiny/project-utils": "0.0.0-unstable.fdd9228b5d",
 		"execa": "5.1.1",
 		"rimraf": "6.0.1",
 		"typescript": "5.3.3"
@@ -101,5 +95,5 @@
 			]
 		}
 	},
-	"gitHead": "e53eceafb5ce1a3872c9b4548939bb2eae5b1aef"
+	"gitHead": "fdd9228b5d2636463e8a34b6e0d26eea1e29c01d"
 }

package/BaseEditor/defaultConfig/Content/Preview/LoadThemeStylesheet.d.ts

@@ -1 +0,0 @@
-export declare const LoadThemeStylesheet: () => null;

package/BaseEditor/defaultConfig/Content/Preview/LoadThemeStylesheet.js

@@ -1,31 +0,0 @@
-import { useEffect } from "react";
-import { useWebsiteBuilderTheme } from "../../../components";
-import { usePreviewDomain } from "./usePreviewDomain";
-export const LoadThemeStylesheet = () => {
-  const {
-    theme
-  } = useWebsiteBuilderTheme();
-  const {
-    previewDomain
-  } = usePreviewDomain();
-  useEffect(() => {
-    if (theme && theme.themeUrl) {
-      const url = theme.themeUrl.startsWith("/") ? `${previewDomain}${theme.themeUrl}` : theme.themeUrl;
-
-      // Remove existing stylesheet with the same href
-      const existing = document.querySelector(`link[rel="stylesheet"][href="${url}"]`);
-      if (existing) {
-        existing.remove();
-      }
-
-      // Create a new link element
-      const link = document.createElement("link");
-      link.rel = "stylesheet";
-      link.href = url;
-      document.head.appendChild(link);
-    }
-  }, [theme]);
-  return null;
-};
-
-//# sourceMappingURL=LoadThemeStylesheet.js.map

package/BaseEditor/defaultConfig/Content/Preview/LoadThemeStylesheet.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useEffect","useWebsiteBuilderTheme","usePreviewDomain","LoadThemeStylesheet","theme","previewDomain","themeUrl","url","startsWith","existing","document","querySelector","remove","link","createElement","rel","href","head","appendChild"],"sources":["LoadThemeStylesheet.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components\";\nimport { usePreviewDomain } from \"~/BaseEditor/defaultConfig/Content/Preview/usePreviewDomain\";\n\nexport const LoadThemeStylesheet = () => {\n    const { theme } = useWebsiteBuilderTheme();\n    const { previewDomain } = usePreviewDomain();\n\n    useEffect(() => {\n        if (theme && theme.themeUrl) {\n            const url = theme.themeUrl.startsWith(\"/\")\n                ? `${previewDomain}${theme.themeUrl}`\n                : theme.themeUrl;\n\n            // Remove existing stylesheet with the same href\n            const existing = document.querySelector(`link[rel=\"stylesheet\"][href=\"${url}\"]`);\n            if (existing) {\n                existing.remove();\n            }\n\n            // Create a new link element\n            const link = document.createElement(\"link\");\n            link.rel = \"stylesheet\";\n            link.href = url;\n\n            document.head.appendChild(link);\n        }\n    }, [theme]);\n\n    return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,sBAAsB;AAC/B,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;EACrC,MAAM;IAAEC;EAAM,CAAC,GAAGH,sBAAsB,CAAC,CAAC;EAC1C,MAAM;IAAEI;EAAc,CAAC,GAAGH,gBAAgB,CAAC,CAAC;EAE5CF,SAAS,CAAC,MAAM;IACZ,IAAII,KAAK,IAAIA,KAAK,CAACE,QAAQ,EAAE;MACzB,MAAMC,GAAG,GAAGH,KAAK,CAACE,QAAQ,CAACE,UAAU,CAAC,GAAG,CAAC,GACpC,GAAGH,aAAa,GAAGD,KAAK,CAACE,QAAQ,EAAE,GACnCF,KAAK,CAACE,QAAQ;;MAEpB;MACA,MAAMG,QAAQ,GAAGC,QAAQ,CAACC,aAAa,CAAC,gCAAgCJ,GAAG,IAAI,CAAC;MAChF,IAAIE,QAAQ,EAAE;QACVA,QAAQ,CAACG,MAAM,CAAC,CAAC;MACrB;;MAEA;MACA,MAAMC,IAAI,GAAGH,QAAQ,CAACI,aAAa,CAAC,MAAM,CAAC;MAC3CD,IAAI,CAACE,GAAG,GAAG,YAAY;MACvBF,IAAI,CAACG,IAAI,GAAGT,GAAG;MAEfG,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACL,IAAI,CAAC;IACnC;EACJ,CAAC,EAAE,CAACT,KAAK,CAAC,CAAC;EAEX,OAAO,IAAI;AACf,CAAC","ignoreList":[]}