@webiny/website-builder-sdk 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

package/Theme.js

@@ -1,29 +1,33 @@
-import deepMerge from "deepmerge";
+import deepmerge from "deepmerge";
 import { defaultBreakpoints } from "./defaultBreakpoints.js";
-export class Theme {
-  static from(input) {
-    const {
-      custom = {},
-      ...builtInOverrides
-    } = input?.breakpoints ?? {};
-    const mergedBreakpoints = deepMerge.all([{}, defaultBreakpoints, builtInOverrides, custom]);
-    const breakpoints = [];
-    Object.entries(mergedBreakpoints ?? {}).forEach(([name, breakpoint]) => {
-      breakpoints.push({
-        name,
-        ...breakpoint
-      });
-    });
-    return {
-      css: input.css,
-      fonts: input.fonts,
-      breakpoints: breakpoints.sort((a, b) => b.maxWidth - a.maxWidth),
-      colors: input?.colors ?? [],
-      typography: {
-        ...input?.typography
-      }
-    };
-  }
+class Theme {
+    static from(input) {
+        const { custom = {}, ...builtInOverrides } = input?.breakpoints ?? {};
+        const mergedBreakpoints = deepmerge.all([
+            {},
+            defaultBreakpoints,
+            builtInOverrides,
+            custom
+        ]);
+        const breakpoints = [];
+        Object.entries(mergedBreakpoints ?? {}).forEach(([name, breakpoint])=>{
+            breakpoints.push({
+                name,
+                ...breakpoint
+            });
+        });
+        return {
+            css: input.css,
+            fonts: input.fonts,
+            fontSizes: input.fontSizes,
+            breakpoints: breakpoints.sort((a, b)=>b.maxWidth - a.maxWidth),
+            colors: input?.colors ?? [],
+            typography: {
+                ...input?.typography
+            }
+        };
+    }
 }
+export { Theme };
 
 //# sourceMappingURL=Theme.js.map

package/Theme.js.map

@@ -1 +1 @@
-{"version":3,"names":["deepMerge","defaultBreakpoints","Theme","from","input","custom","builtInOverrides","breakpoints","mergedBreakpoints","all","Object","entries","forEach","name","breakpoint","push","css","fonts","sort","a","b","maxWidth","colors","typography"],"sources":["Theme.ts"],"sourcesContent":["import deepMerge from \"deepmerge\";\nimport type {\n    Breakpoint,\n    WebsiteBuilderTheme,\n    WebsiteBuilderThemeInput\n} from \"~/types/WebsiteBuilderTheme.js\";\nimport { defaultBreakpoints } from \"~/defaultBreakpoints.js\";\n\nexport class Theme {\n    static from(input: WebsiteBuilderThemeInput): WebsiteBuilderTheme {\n        const { custom = {}, ...builtInOverrides } = input?.breakpoints ?? {};\n\n        const mergedBreakpoints = deepMerge.all([\n            {},\n            defaultBreakpoints,\n            builtInOverrides,\n            custom\n        ]) as WebsiteBuilderThemeInput[\"breakpoints\"];\n\n        const breakpoints: Breakpoint[] = [];\n        Object.entries(mergedBreakpoints ?? {}).forEach(([name, breakpoint]) => {\n            breakpoints.push({\n                name,\n                ...(breakpoint as Omit<Breakpoint, \"name\">)\n            });\n        });\n\n        return {\n            css: input.css,\n            fonts: input.fonts,\n            breakpoints: breakpoints.sort((a, b) => b.maxWidth - a.maxWidth),\n            colors: input?.colors ?? [],\n            typography: {\n                ...input?.typography\n            }\n        };\n    }\n}\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,WAAW;AAMjC,SAASC,kBAAkB;AAE3B,OAAO,MAAMC,KAAK,CAAC;EACf,OAAOC,IAAIA,CAACC,KAA+B,EAAuB;IAC9D,MAAM;MAAEC,MAAM,GAAG,CAAC,CAAC;MAAE,GAAGC;IAAiB,CAAC,GAAGF,KAAK,EAAEG,WAAW,IAAI,CAAC,CAAC;IAErE,MAAMC,iBAAiB,GAAGR,SAAS,CAACS,GAAG,CAAC,CACpC,CAAC,CAAC,EACFR,kBAAkB,EAClBK,gBAAgB,EAChBD,MAAM,CACT,CAA4C;IAE7C,MAAME,WAAyB,GAAG,EAAE;IACpCG,MAAM,CAACC,OAAO,CAACH,iBAAiB,IAAI,CAAC,CAAC,CAAC,CAACI,OAAO,CAAC,CAAC,CAACC,IAAI,EAAEC,UAAU,CAAC,KAAK;MACpEP,WAAW,CAACQ,IAAI,CAAC;QACbF,IAAI;QACJ,GAAIC;MACR,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,OAAO;MACHE,GAAG,EAAEZ,KAAK,CAACY,GAAG;MACdC,KAAK,EAAEb,KAAK,CAACa,KAAK;MAClBV,WAAW,EAAEA,WAAW,CAACW,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKA,CAAC,CAACC,QAAQ,GAAGF,CAAC,CAACE,QAAQ,CAAC;MAChEC,MAAM,EAAElB,KAAK,EAAEkB,MAAM,IAAI,EAAE;MAC3BC,UAAU,EAAE;QACR,GAAGnB,KAAK,EAAEmB;MACd;IACJ,CAAC;EACL;AACJ","ignoreList":[]}
+{"version":3,"file":"Theme.js","sources":["../src/Theme.ts"],"sourcesContent":["import deepMerge from \"deepmerge\";\nimport type {\n    Breakpoint,\n    WebsiteBuilderTheme,\n    WebsiteBuilderThemeInput\n} from \"~/types/WebsiteBuilderTheme.js\";\nimport { defaultBreakpoints } from \"~/defaultBreakpoints.js\";\n\nexport class Theme {\n    static from(input: WebsiteBuilderThemeInput): WebsiteBuilderTheme {\n        const { custom = {}, ...builtInOverrides } = input?.breakpoints ?? {};\n\n        const mergedBreakpoints = deepMerge.all([\n            {},\n            defaultBreakpoints,\n            builtInOverrides,\n            custom\n        ]) as WebsiteBuilderThemeInput[\"breakpoints\"];\n\n        const breakpoints: Breakpoint[] = [];\n        Object.entries(mergedBreakpoints ?? {}).forEach(([name, breakpoint]) => {\n            breakpoints.push({\n                name,\n                ...(breakpoint as Omit<Breakpoint, \"name\">)\n            });\n        });\n\n        return {\n            css: input.css,\n            fonts: input.fonts,\n            fontSizes: input.fontSizes,\n            breakpoints: breakpoints.sort((a, b) => b.maxWidth - a.maxWidth),\n            colors: input?.colors ?? [],\n            typography: {\n                ...input?.typography\n            }\n        };\n    }\n}\n"],"names":["Theme","input","custom","builtInOverrides","mergedBreakpoints","deepMerge","defaultBreakpoints","breakpoints","Object","name","breakpoint","a","b"],"mappings":";;AAQO,MAAMA;IACT,OAAO,KAAKC,KAA+B,EAAuB;QAC9D,MAAM,EAAEC,SAAS,CAAC,CAAC,EAAE,GAAGC,kBAAkB,GAAGF,OAAO,eAAe,CAAC;QAEpE,MAAMG,oBAAoBC,UAAAA,GAAa,CAAC;YACpC,CAAC;YACDC;YACAH;YACAD;SACH;QAED,MAAMK,cAA4B,EAAE;QACpCC,OAAO,OAAO,CAACJ,qBAAqB,CAAC,GAAG,OAAO,CAAC,CAAC,CAACK,MAAMC,WAAW;YAC/DH,YAAY,IAAI,CAAC;gBACbE;gBACA,GAAIC,UAAU;YAClB;QACJ;QAEA,OAAO;YACH,KAAKT,MAAM,GAAG;YACd,OAAOA,MAAM,KAAK;YAClB,WAAWA,MAAM,SAAS;YAC1B,aAAaM,YAAY,IAAI,CAAC,CAACI,GAAGC,IAAMA,EAAE,QAAQ,GAAGD,EAAE,QAAQ;YAC/D,QAAQV,OAAO,UAAU,EAAE;YAC3B,YAAY;gBACR,GAAGA,OAAO,UAAU;YACxB;QACJ;IACJ;AACJ"}

package/ViewportManager.js

@@ -1,110 +1,98 @@
 "use client";
-
 import { environment } from "./Environment.js";
-export class ViewportManager {
-  /**
-   * We need this fallback breakpoint for server environments.
-   */
-  breakpoints = [{
-    name: "desktop",
-    title: "",
-    description: "",
-    icon: "",
-    minWidth: 0,
-    maxWidth: 4000
-  }];
-  constructor(timeout = 150) {
-    this.changeTimeout = timeout;
-    this.changeStartSubscribers = new Set();
-    this.changeEndSubscribers = new Set();
-    this.isChanging = false;
-    this.changeTimer = null;
-    this.handleViewportChange = this.handleViewportChange.bind(this);
-    this.handleResize = this.handleResize.bind(this);
-    if (environment.isClient()) {
-      window.addEventListener("resize", this.handleResize, {
-        passive: true
-      });
+class ViewportManager {
+    constructor(timeout = 150){
+        this.breakpoints = [
+            {
+                name: "desktop",
+                title: "",
+                description: "",
+                icon: "",
+                minWidth: 0,
+                maxWidth: 4000
+            }
+        ];
+        this.changeTimeout = timeout;
+        this.changeStartSubscribers = new Set();
+        this.changeEndSubscribers = new Set();
+        this.isChanging = false;
+        this.changeTimer = null;
+        this.handleViewportChange = this.handleViewportChange.bind(this);
+        this.handleResize = this.handleResize.bind(this);
+        if (environment.isClient()) window.addEventListener("resize", this.handleResize, {
+            passive: true
+        });
     }
-  }
-  setBreakpoints(breakpoints) {
-    this.breakpoints = breakpoints;
-  }
-  onViewportChangeStart(callback) {
-    this.changeStartSubscribers.add(callback);
-    return () => this.changeStartSubscribers.delete(callback);
-  }
-  onViewportChangeEnd(callback) {
-    this.changeEndSubscribers.add(callback);
-    return () => this.changeEndSubscribers.delete(callback);
-  }
-
-  /**
-   * Get the current viewport information
-   */
-  getViewport() {
-    return this.getViewportInfo();
-  }
-  destroy() {
-    if (environment.isClient()) {
-      window.removeEventListener("resize", this.handleResize);
-      if (this.changeTimer !== null) {
-        clearTimeout(this.changeTimer);
-      }
-      this.changeStartSubscribers.clear();
-      this.changeEndSubscribers.clear();
+    setBreakpoints(breakpoints) {
+        this.breakpoints = breakpoints;
+    }
+    onViewportChangeStart(callback) {
+        this.changeStartSubscribers.add(callback);
+        return ()=>this.changeStartSubscribers.delete(callback);
+    }
+    onViewportChangeEnd(callback) {
+        this.changeEndSubscribers.add(callback);
+        return ()=>this.changeEndSubscribers.delete(callback);
+    }
+    getViewport() {
+        return this.getViewportInfo();
+    }
+    destroy() {
+        if (environment.isClient()) {
+            window.removeEventListener("resize", this.handleResize);
+            if (null !== this.changeTimer) clearTimeout(this.changeTimer);
+            this.changeStartSubscribers.clear();
+            this.changeEndSubscribers.clear();
+        }
+    }
+    handleResize() {
+        this.handleViewportChange();
+    }
+    handleViewportChange() {
+        const viewportInfo = this.getViewportInfo();
+        if (!this.isChanging) {
+            this.isChanging = true;
+            this.notifySubscribers(this.changeStartSubscribers, viewportInfo);
+        }
+        if (null !== this.changeTimer) clearTimeout(this.changeTimer);
+        this.changeTimer = window.setTimeout(()=>{
+            this.isChanging = false;
+            this.notifySubscribers(this.changeEndSubscribers, viewportInfo);
+        }, this.changeTimeout);
     }
-  }
-  handleResize() {
-    this.handleViewportChange();
-  }
-  handleViewportChange() {
-    const viewportInfo = this.getViewportInfo();
-    if (!this.isChanging) {
-      this.isChanging = true;
-      this.notifySubscribers(this.changeStartSubscribers, viewportInfo);
+    getViewportInfo() {
+        const modes = [
+            ...this.breakpoints
+        ].reverse();
+        const viewport = environment.isClient() ? {
+            width: window.innerWidth,
+            height: window.innerHeight,
+            scrollWidth: window.document.body.scrollWidth,
+            scrollHeight: window.document.body.scrollHeight,
+            scrollX: window.scrollX,
+            scrollY: window.scrollY
+        } : {
+            height: 0,
+            width: 2000,
+            scrollHeight: 0,
+            scrollWidth: 2000,
+            scrollX: 0,
+            scrollY: 0
+        };
+        const [breakpoint] = modes.filter((mode)=>mode.maxWidth >= viewport.width);
+        return {
+            ...viewport,
+            breakpoint: breakpoint.name,
+            breakpoints: this.breakpoints
+        };
     }
-    if (this.changeTimer !== null) {
-      clearTimeout(this.changeTimer);
+    notifySubscribers(subscribers, viewportInfo) {
+        subscribers.forEach((callback)=>{
+            if ("function" == typeof callback) callback(viewportInfo);
+        });
     }
-    this.changeTimer = window.setTimeout(() => {
-      this.isChanging = false;
-      this.notifySubscribers(this.changeEndSubscribers, viewportInfo);
-    }, this.changeTimeout);
-  }
-  getViewportInfo() {
-    const modes = [...this.breakpoints].reverse();
-    const viewport = environment.isClient() ? {
-      width: window.innerWidth,
-      height: window.innerHeight,
-      scrollWidth: window.document.body.scrollWidth,
-      scrollHeight: window.document.body.scrollHeight,
-      scrollX: window.scrollX,
-      scrollY: window.scrollY
-    } : {
-      // During SSR or Next.js build, viewport is not available.
-      height: 0,
-      width: 2000,
-      scrollHeight: 0,
-      scrollWidth: 2000,
-      scrollX: 0,
-      scrollY: 0
-    };
-    const [breakpoint] = modes.filter(mode => mode.maxWidth >= viewport.width);
-    return {
-      ...viewport,
-      breakpoint: breakpoint.name,
-      breakpoints: this.breakpoints
-    };
-  }
-  notifySubscribers(subscribers, viewportInfo) {
-    subscribers.forEach(callback => {
-      if (typeof callback === "function") {
-        callback(viewportInfo);
-      }
-    });
-  }
 }
-export const viewportManager = new ViewportManager();
+const viewportManager = new ViewportManager();
+export { ViewportManager, viewportManager };
 
 //# sourceMappingURL=ViewportManager.js.map

package/ViewportManager.js.map

@@ -1 +1 @@
-{"version":3,"names":["environment","ViewportManager","breakpoints","name","title","description","icon","minWidth","maxWidth","constructor","timeout","changeTimeout","changeStartSubscribers","Set","changeEndSubscribers","isChanging","changeTimer","handleViewportChange","bind","handleResize","isClient","window","addEventListener","passive","setBreakpoints","onViewportChangeStart","callback","add","delete","onViewportChangeEnd","getViewport","getViewportInfo","destroy","removeEventListener","clearTimeout","clear","viewportInfo","notifySubscribers","setTimeout","modes","reverse","viewport","width","innerWidth","height","innerHeight","scrollWidth","document","body","scrollHeight","scrollX","scrollY","breakpoint","filter","mode","subscribers","forEach","viewportManager"],"sources":["ViewportManager.ts"],"sourcesContent":["\"use client\";\nimport type { Breakpoint } from \"~/types.js\";\nimport { environment } from \"~/Environment.js\";\n\nexport interface ViewportInfo {\n    width: number;\n    height: number;\n    scrollWidth: number;\n    scrollHeight: number;\n    scrollX: number;\n    scrollY: number;\n    breakpoint: string;\n    breakpoints: Breakpoint[];\n}\n\nexport class ViewportManager {\n    private readonly changeTimeout: number;\n    private readonly changeStartSubscribers: Set<(info: ViewportInfo) => void>;\n    private readonly changeEndSubscribers: Set<(info: ViewportInfo) => void>;\n    private isChanging: boolean;\n    private changeTimer: number | null;\n\n    /**\n     * We need this fallback breakpoint for server environments.\n     */\n    private breakpoints: Breakpoint[] = [\n        {\n            name: \"desktop\",\n            title: \"\",\n            description: \"\",\n            icon: \"\",\n            minWidth: 0,\n            maxWidth: 4000\n        }\n    ];\n\n    constructor(timeout: number = 150) {\n        this.changeTimeout = timeout;\n        this.changeStartSubscribers = new Set();\n        this.changeEndSubscribers = new Set();\n        this.isChanging = false;\n        this.changeTimer = null;\n\n        this.handleViewportChange = this.handleViewportChange.bind(this);\n        this.handleResize = this.handleResize.bind(this);\n\n        if (environment.isClient()) {\n            window.addEventListener(\"resize\", this.handleResize, { passive: true });\n        }\n    }\n\n    public setBreakpoints(breakpoints: Breakpoint[]) {\n        this.breakpoints = breakpoints;\n    }\n\n    public onViewportChangeStart(callback: (info: ViewportInfo) => void): () => void {\n        this.changeStartSubscribers.add(callback);\n        return () => this.changeStartSubscribers.delete(callback);\n    }\n\n    public onViewportChangeEnd(callback: (info: ViewportInfo) => void): () => void {\n        this.changeEndSubscribers.add(callback);\n        return () => this.changeEndSubscribers.delete(callback);\n    }\n\n    /**\n     * Get the current viewport information\n     */\n    public getViewport(): ViewportInfo {\n        return this.getViewportInfo();\n    }\n\n    public destroy(): void {\n        if (environment.isClient()) {\n            window.removeEventListener(\"resize\", this.handleResize);\n            if (this.changeTimer !== null) {\n                clearTimeout(this.changeTimer);\n            }\n            this.changeStartSubscribers.clear();\n            this.changeEndSubscribers.clear();\n        }\n    }\n\n    private handleResize(): void {\n        this.handleViewportChange();\n    }\n\n    private handleViewportChange(): void {\n        const viewportInfo = this.getViewportInfo();\n\n        if (!this.isChanging) {\n            this.isChanging = true;\n            this.notifySubscribers(this.changeStartSubscribers, viewportInfo);\n        }\n\n        if (this.changeTimer !== null) {\n            clearTimeout(this.changeTimer);\n        }\n\n        this.changeTimer = window.setTimeout(() => {\n            this.isChanging = false;\n            this.notifySubscribers(this.changeEndSubscribers, viewportInfo);\n        }, this.changeTimeout);\n    }\n\n    private getViewportInfo(): ViewportInfo {\n        const modes = [...this.breakpoints].reverse();\n        const viewport = environment.isClient()\n            ? {\n                  width: window.innerWidth,\n                  height: window.innerHeight,\n                  scrollWidth: window.document.body.scrollWidth,\n                  scrollHeight: window.document.body.scrollHeight,\n                  scrollX: window.scrollX,\n                  scrollY: window.scrollY\n              }\n            : {\n                  // During SSR or Next.js build, viewport is not available.\n                  height: 0,\n                  width: 2000,\n                  scrollHeight: 0,\n                  scrollWidth: 2000,\n                  scrollX: 0,\n                  scrollY: 0\n              };\n\n        const [breakpoint] = modes.filter(mode => mode.maxWidth >= viewport.width);\n\n        return { ...viewport, breakpoint: breakpoint.name, breakpoints: this.breakpoints };\n    }\n\n    private notifySubscribers(\n        subscribers: Set<(info: ViewportInfo) => void>,\n        viewportInfo: ViewportInfo\n    ): void {\n        subscribers.forEach(callback => {\n            if (typeof callback === \"function\") {\n                callback(viewportInfo);\n            }\n        });\n    }\n}\n\nexport const viewportManager = new ViewportManager();\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ViewportManager.js","sources":["../src/ViewportManager.ts"],"sourcesContent":["\"use client\";\nimport type { Breakpoint } from \"~/types.js\";\nimport { environment } from \"~/Environment.js\";\n\nexport interface ViewportInfo {\n    width: number;\n    height: number;\n    scrollWidth: number;\n    scrollHeight: number;\n    scrollX: number;\n    scrollY: number;\n    breakpoint: string;\n    breakpoints: Breakpoint[];\n}\n\nexport class ViewportManager {\n    private readonly changeTimeout: number;\n    private readonly changeStartSubscribers: Set<(info: ViewportInfo) => void>;\n    private readonly changeEndSubscribers: Set<(info: ViewportInfo) => void>;\n    private isChanging: boolean;\n    private changeTimer: number | null;\n\n    /**\n     * We need this fallback breakpoint for server environments.\n     */\n    private breakpoints: Breakpoint[] = [\n        {\n            name: \"desktop\",\n            title: \"\",\n            description: \"\",\n            icon: \"\",\n            minWidth: 0,\n            maxWidth: 4000\n        }\n    ];\n\n    constructor(timeout: number = 150) {\n        this.changeTimeout = timeout;\n        this.changeStartSubscribers = new Set();\n        this.changeEndSubscribers = new Set();\n        this.isChanging = false;\n        this.changeTimer = null;\n\n        this.handleViewportChange = this.handleViewportChange.bind(this);\n        this.handleResize = this.handleResize.bind(this);\n\n        if (environment.isClient()) {\n            window.addEventListener(\"resize\", this.handleResize, { passive: true });\n        }\n    }\n\n    public setBreakpoints(breakpoints: Breakpoint[]) {\n        this.breakpoints = breakpoints;\n    }\n\n    public onViewportChangeStart(callback: (info: ViewportInfo) => void): () => void {\n        this.changeStartSubscribers.add(callback);\n        return () => this.changeStartSubscribers.delete(callback);\n    }\n\n    public onViewportChangeEnd(callback: (info: ViewportInfo) => void): () => void {\n        this.changeEndSubscribers.add(callback);\n        return () => this.changeEndSubscribers.delete(callback);\n    }\n\n    /**\n     * Get the current viewport information\n     */\n    public getViewport(): ViewportInfo {\n        return this.getViewportInfo();\n    }\n\n    public destroy(): void {\n        if (environment.isClient()) {\n            window.removeEventListener(\"resize\", this.handleResize);\n            if (this.changeTimer !== null) {\n                clearTimeout(this.changeTimer);\n            }\n            this.changeStartSubscribers.clear();\n            this.changeEndSubscribers.clear();\n        }\n    }\n\n    private handleResize(): void {\n        this.handleViewportChange();\n    }\n\n    private handleViewportChange(): void {\n        const viewportInfo = this.getViewportInfo();\n\n        if (!this.isChanging) {\n            this.isChanging = true;\n            this.notifySubscribers(this.changeStartSubscribers, viewportInfo);\n        }\n\n        if (this.changeTimer !== null) {\n            clearTimeout(this.changeTimer);\n        }\n\n        this.changeTimer = window.setTimeout(() => {\n            this.isChanging = false;\n            this.notifySubscribers(this.changeEndSubscribers, viewportInfo);\n        }, this.changeTimeout);\n    }\n\n    private getViewportInfo(): ViewportInfo {\n        const modes = [...this.breakpoints].reverse();\n        const viewport = environment.isClient()\n            ? {\n                  width: window.innerWidth,\n                  height: window.innerHeight,\n                  scrollWidth: window.document.body.scrollWidth,\n                  scrollHeight: window.document.body.scrollHeight,\n                  scrollX: window.scrollX,\n                  scrollY: window.scrollY\n              }\n            : {\n                  // During SSR or Next.js build, viewport is not available.\n                  height: 0,\n                  width: 2000,\n                  scrollHeight: 0,\n                  scrollWidth: 2000,\n                  scrollX: 0,\n                  scrollY: 0\n              };\n\n        const [breakpoint] = modes.filter(mode => mode.maxWidth >= viewport.width);\n\n        return { ...viewport, breakpoint: breakpoint.name, breakpoints: this.breakpoints };\n    }\n\n    private notifySubscribers(\n        subscribers: Set<(info: ViewportInfo) => void>,\n        viewportInfo: ViewportInfo\n    ): void {\n        subscribers.forEach(callback => {\n            if (typeof callback === \"function\") {\n                callback(viewportInfo);\n            }\n        });\n    }\n}\n\nexport const viewportManager = new ViewportManager();\n"],"names":["ViewportManager","timeout","Set","environment","window","breakpoints","callback","clearTimeout","viewportInfo","modes","viewport","breakpoint","mode","subscribers","viewportManager"],"mappings":"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"}

package/constants.d.ts

@@ -3,4 +3,5 @@ export declare const StyleSettings: {
     Visibility: string;
     Background: string;
     MarginPadding: string;
+    Border: string;
 };

package/constants.js

@@ -1,8 +1,10 @@
-export const StyleSettings = {
-  Layout: "layout",
-  Visibility: "visibility",
-  Background: "background",
-  MarginPadding: "marginPadding"
+const StyleSettings = {
+    Layout: "layout",
+    Visibility: "visibility",
+    Background: "background",
+    MarginPadding: "marginPadding",
+    Border: "border"
 };
+export { StyleSettings };
 
 //# sourceMappingURL=constants.js.map

package/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSettings","Layout","Visibility","Background","MarginPadding"],"sources":["constants.ts"],"sourcesContent":["export const StyleSettings = {\n    Layout: \"layout\",\n    Visibility: \"visibility\",\n    Background: \"background\",\n    MarginPadding: \"marginPadding\"\n};\n"],"mappings":"AAAA,OAAO,MAAMA,aAAa,GAAG;EACzBC,MAAM,EAAE,QAAQ;EAChBC,UAAU,EAAE,YAAY;EACxBC,UAAU,EAAE,YAAY;EACxBC,aAAa,EAAE;AACnB,CAAC","ignoreList":[]}
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export const StyleSettings = {\n    Layout: \"layout\",\n    Visibility: \"visibility\",\n    Background: \"background\",\n    MarginPadding: \"marginPadding\",\n    Border: \"border\"\n};\n"],"names":["StyleSettings"],"mappings":"AAAO,MAAMA,gBAAgB;IACzB,QAAQ;IACR,YAAY;IACZ,YAAY;IACZ,eAAe;IACf,QAAQ;AACZ"}

package/createElement.js

@@ -1,8 +1,7 @@
-export const createElement = params => {
-  return {
-    action: "CreateElement",
-    params
-  };
-};
+const createElement = (params)=>({
+        action: "CreateElement",
+        params
+    });
+export { createElement };
 
 //# sourceMappingURL=createElement.js.map

package/createElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["createElement","params","action"],"sources":["createElement.ts"],"sourcesContent":["import type { ResponsiveStyles } from \"~/types.js\";\n\nexport interface CreateElementParams {\n    component: string;\n    inputs?: Record<string, any>;\n    styles?: ResponsiveStyles;\n}\n\nexport const createElement = (params: CreateElementParams) => {\n    return {\n        action: \"CreateElement\",\n        params\n    };\n};\n"],"mappings":"AAQA,OAAO,MAAMA,aAAa,GAAIC,MAA2B,IAAK;EAC1D,OAAO;IACHC,MAAM,EAAE,eAAe;IACvBD;EACJ,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"file":"createElement.js","sources":["../src/createElement.ts"],"sourcesContent":["import type { ResponsiveStyles } from \"~/types.js\";\n\nexport interface CreateElementParams {\n    component: string;\n    inputs?: Record<string, any>;\n    styles?: ResponsiveStyles;\n}\n\nexport const createElement = (params: CreateElementParams) => {\n    return {\n        action: \"CreateElement\",\n        params\n    };\n};\n"],"names":["createElement","params"],"mappings":"AAQO,MAAMA,gBAAgB,CAACC,SACnB;QACH,QAAQ;QACRA;IACJ"}

package/createInput.js

@@ -1,160 +1,102 @@
 import { functionConverter } from "./FunctionConverter.js";
-
-/**
- * TypeScript Overload Resolution and Input Factory Design
- *
- * Each input factory (e.g., createTextInput) is defined with two TypeScript overload signatures:
- *   1. One overload requires a `name` property in the input (used for array-based APIs, where inference is needed).
- *   2. The other overload omits the `name` property (used for object-based APIs, where the key provides the name).
- *
- * TypeScript resolves overloads by scanning from top to bottom and picking the first matching signature.
- * The implementation signature uses `any` for the argument, and the return type is unified to match all overloads.
- *
- * In array mode, the `name` must be explicitly provided in the input object, so inference for `TName` works.
- * In object mode, the input does not require a `name` property; instead, the key in the object (e.g., `{ foo: createTextInput({ ... }) }`)
- * provides the name via contextual typing from the consuming function (such as `createComponent`). TypeScript uses this context
- * to resolve the correct type for `TName` even when `name` is omitted from the input.
- *
- * This pattern ensures that all returned input objects are typed as `{ name: TName }`, whether `name` is provided explicitly or inferred,
- * so consumers of these factories do not need to worry about the presence of the `name` property in the result.
- */
-// Text
-
-export function createTextInput(input) {
-  return createInput({
-    type: "text",
-    renderer: "Webiny/Input",
-    ...input
-  });
+function createTextInput(input) {
+    return createInput({
+        type: "text",
+        renderer: "Webiny/Input",
+        ...input
+    });
 }
-
-// Long Text
-
-export function createLongTextInput(input) {
-  return createInput({
-    type: "longText",
-    renderer: "Webiny/Textarea",
-    ...input
-  });
+function createLongTextInput(input) {
+    return createInput({
+        type: "longText",
+        renderer: "Webiny/Textarea",
+        ...input
+    });
 }
-
-// Number
-
-export function createNumberInput(input) {
-  return createInput({
-    type: "number",
-    renderer: "Webiny/Number",
-    ...input
-  });
+function createNumberInput(input) {
+    return createInput({
+        type: "number",
+        renderer: "Webiny/Number",
+        ...input
+    });
 }
-
-// Boolean
-
-export function createBooleanInput(input) {
-  return createInput({
-    type: "boolean",
-    renderer: "Webiny/Switch",
-    ...input
-  });
+function createBooleanInput(input) {
+    return createInput({
+        type: "boolean",
+        renderer: "Webiny/Switch",
+        ...input
+    });
 }
-
-// Color
-
-export function createColorInput(input) {
-  return createInput({
-    type: "color",
-    renderer: "Webiny/ColorPicker",
-    ...input
-  });
+function createColorInput(input) {
+    return createInput({
+        type: "color",
+        renderer: "Webiny/ColorPicker",
+        ...input
+    });
 }
-
-// File
-
-export function createFileInput(input) {
-  return createInput({
-    type: "file",
-    renderer: "Webiny/FileManager",
-    ...input
-  });
+function createFileInput(input) {
+    return createInput({
+        type: "file",
+        renderer: "Webiny/FileManager",
+        ...input
+    });
 }
-
-// Date
-
-export function createDateInput(input) {
-  return createInput({
-    type: "datetime",
-    renderer: "Webiny/DateTime",
-    ...input
-  });
+function createDateInput(input) {
+    return createInput({
+        type: "datetime",
+        renderer: "Webiny/DateTime",
+        ...input
+    });
 }
-
-// Rich Text
-
-export function createLexicalInput(input) {
-  return createInput({
-    type: "lexical",
-    renderer: "Webiny/Lexical",
-    ...input
-  });
+function createLexicalInput(input) {
+    return createInput({
+        type: "lexical",
+        renderer: "Webiny/Lexical",
+        ...input
+    });
 }
-
-// Select
-
-export function createSelectInput(input) {
-  return createInput({
-    type: "select",
-    renderer: "Webiny/Select",
-    ...input
-  });
+function createSelectInput(input) {
+    return createInput({
+        type: "select",
+        renderer: "Webiny/Select",
+        ...input
+    });
 }
-
-// Radio
-
-export function createRadioInput(input) {
-  return createInput({
-    type: "radio",
-    renderer: "Webiny/RadioGroup",
-    ...input
-  });
+function createRadioInput(input) {
+    return createInput({
+        type: "radio",
+        renderer: "Webiny/RadioGroup",
+        ...input
+    });
 }
-
-// Object
-
-export function createObjectInput(input) {
-  return createInput({
-    type: "object",
-    renderer: "Webiny/Object",
-    ...input
-  });
+function createObjectInput(input) {
+    return createInput({
+        type: "object",
+        renderer: "Webiny/Object",
+        ...input
+    });
 }
-
-// Tags
-
-export function createTagsInput(input) {
-  return createInput({
-    type: "text",
-    list: true,
-    renderer: "Webiny/Tags",
-    ...input
-  });
+function createTagsInput(input) {
+    return createInput({
+        type: "text",
+        list: true,
+        renderer: "Webiny/Tags",
+        ...input
+    });
 }
-export function createSlotInput(input) {
-  return createInput({
-    type: "slot",
-    list: true,
-    renderer: "Webiny/Slot",
-    defaultValue: [],
-    ...input
-  });
+function createSlotInput(input) {
+    return createInput({
+        type: "slot",
+        list: true,
+        renderer: "Webiny/Slot",
+        defaultValue: [],
+        ...input
+    });
 }
-
-// Implementation
-export function createInput(input) {
-  if (input.onChange) {
-    // @ts-expect-error We don't use this function on the frontend, so this is ok.
-    input.onChange = functionConverter.serialize(input.onChange);
-  }
-  return input;
+function createInput(input) {
+    if (input.onChange) input.onChange = functionConverter.serialize(input.onChange);
+    return input;
 }
+export { createBooleanInput, createColorInput, createDateInput, createFileInput, createInput, createLexicalInput, createLongTextInput, createNumberInput, createObjectInput, createRadioInput, createSelectInput, createSlotInput, createTagsInput, createTextInput };
 
 //# sourceMappingURL=createInput.js.map