@webiny/website-builder-react 6.6.0-alpha.0 → 6.6.0-alpha.2

package/components/EditingElementRenderer/EditingElementRenderer.d.ts

@@ -3,7 +3,7 @@ import { type DocumentElement } from "@webiny/website-builder-sdk";
 interface PreviewElementRendererProps {
     element: DocumentElement;
 }
-export declare const EditingElementRenderer: ((props: PreviewElementRendererProps) => React.JSX.Element | null) & {
-    displayName: string;
+export declare const EditingElementRenderer: ((props: PreviewElementRendererProps) => React.JSX.Element | null) & React.NamedExoticComponent<PreviewElementRendererProps> & {
+    readonly type: (props: PreviewElementRendererProps) => React.JSX.Element | null;
 };
 export {};

package/components/ElementRenderer.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 interface ElementRendererProps {
     id: string;
 }
-export declare const ElementRenderer: ((props: ElementRendererProps) => React.JSX.Element | null) & {
-    displayName: string;
+export declare const ElementRenderer: ((props: ElementRendererProps) => React.JSX.Element | null) & React.NamedExoticComponent<ElementRendererProps> & {
+    readonly type: (props: ElementRendererProps) => React.JSX.Element | null;
 };
 export {};

package/components/LiveElementRenderer.d.ts

@@ -4,7 +4,7 @@ interface LiveElementRendererProps {
     element: DocumentElement;
     bindings?: DocumentElementBindings;
 }
-export declare const LiveElementRenderer: (({ element }: LiveElementRendererProps) => React.JSX.Element | null) & {
-    displayName: string;
+export declare const LiveElementRenderer: (({ element }: LiveElementRendererProps) => React.JSX.Element | null) & React.NamedExoticComponent<LiveElementRendererProps> & {
+    readonly type: ({ element }: LiveElementRendererProps) => React.JSX.Element | null;
 };
 export {};

package/createComponent.d.ts

@@ -1,3 +1 @@
-import type { Component, ComponentManifestInput } from "@webiny/website-builder-sdk";
-import type { ExtractInputs } from "./types.js";
-export declare function createComponent<TComponent extends (props: any) => any, TInputs extends ExtractInputs<Parameters<TComponent>[0]>>(component: TComponent, manifest: ComponentManifestInput<TInputs>): Component;
+export { createComponent } from "@webiny/website-builder-sdk";

package/createComponent.js

@@ -1,32 +1 @@
-import { createSlotInput } from "@webiny/website-builder-sdk";
-function createComponent(component, manifest) {
-    const inputs = [];
-    if (Array.isArray(manifest.inputs)) inputs.push(...manifest.inputs);
-    else {
-        const inputsObject = manifest.inputs ?? {};
-        Object.keys(inputsObject).forEach((name)=>{
-            inputs.push({
-                ...inputsObject[name],
-                name
-            });
-        });
-    }
-    const acceptsChildren = manifest.acceptsChildren;
-    if (acceptsChildren) {
-        const hasChildren = inputs.some((input)=>"children" === input.name);
-        if (!hasChildren) inputs.push(createSlotInput({
-            name: "children"
-        }));
-    }
-    return {
-        component,
-        manifest: {
-            ...manifest,
-            tags: manifest.tags ?? [],
-            inputs
-        }
-    };
-}
-export { createComponent };
-
-//# sourceMappingURL=createComponent.js.map
+export { createComponent } from "@webiny/website-builder-sdk";

package/createComponent.test.js

@@ -4,7 +4,7 @@ import { createTextInput } from "./index.js";
 import { createSlotInput } from "@webiny/website-builder-sdk";
 describe("Component Manifest", ()=>{
     it("should support input arrays and strict input objects", ()=>{
-        const Button = (_)=>null;
+        const Button = ({})=>null;
         const button1 = createComponent(Button, {
             name: "Button",
             inputs: [
@@ -49,7 +49,7 @@ describe("Component Manifest", ()=>{
         expect(button2.manifest).toEqual(snapshot);
     });
     it("acceptsChildren should satisfy the `children` input requirement", ()=>{
-        const Button = (_)=>null;
+        const Button = ({})=>null;
         const { manifest } = createComponent(Button, {
             name: "Button",
             acceptsChildren: true
@@ -70,7 +70,7 @@ describe("Component Manifest", ()=>{
         });
     });
     it("`acceptsChildren` should work alongside other inputs", ()=>{
-        const Button = (_)=>null;
+        const Button = ({})=>null;
         const button1 = createComponent(Button, {
             name: "Button",
             acceptsChildren: true,

package/createComponent.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.test.js","sources":["../src/createComponent.test.ts"],"sourcesContent":["import { describe, expect, it } from \"vitest\";\nimport type { ComponentProps, ExtractInputNames } from \"~/types.js\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { createTextInput } from \"~/index.js\";\nimport { createSlotInput } from \"@webiny/website-builder-sdk\";\n\n/**\n * These tests are aimed at testing TS types rather than functionality itself.\n * // TODO: figure out how to enable typechecking for a single test. Currently it only typechecks at build time.\n */\n\ndescribe(\"Component Manifest\", () => {\n    it(\"should support input arrays and strict input objects\", () => {\n        const Button = (_: ComponentProps<{ title: string; children: React.ReactNode }>) => {\n            return null;\n        };\n\n        type Inputs = ExtractInputNames<typeof Button>;\n\n        const button1 = createComponent(Button, {\n            name: \"Button\",\n            inputs: [\n                // Passing a generic narrows down the `name` property and provides autocomplete.\n                createTextInput<Inputs>({\n                    name: \"title\",\n                    label: \"Title\"\n                }),\n                // Skipping the generic still performs typechecks, but doesn't provide autocomplete.\n                createSlotInput({\n                    name: \"children\"\n                })\n            ]\n        });\n\n        const button2 = createComponent(Button, {\n            name: \"Button\",\n            inputs: {\n                title: createTextInput({\n                    label: \"Title\"\n                }),\n                children: createSlotInput({})\n            }\n        });\n\n        const snapshot = {\n            name: \"Button\",\n            tags: [],\n            inputs: [\n                {\n                    type: \"text\",\n                    label: \"Title\",\n                    renderer: \"Webiny/Input\",\n                    name: \"title\"\n                },\n                {\n                    type: \"slot\",\n                    renderer: \"Webiny/Slot\",\n                    name: \"children\",\n                    list: true,\n                    defaultValue: []\n                }\n            ]\n        };\n\n        expect(button1.manifest).toEqual(snapshot);\n        expect(button2.manifest).toEqual(snapshot);\n    });\n\n    it(\"acceptsChildren should satisfy the `children` input requirement\", () => {\n        const Button = (_: ComponentProps<{ children: React.ReactNode }>) => {\n            return null;\n        };\n\n        const { manifest } = createComponent(Button, {\n            name: \"Button\",\n            acceptsChildren: true\n        });\n\n        expect(manifest).toEqual({\n            name: \"Button\",\n            acceptsChildren: true,\n            tags: [],\n            inputs: [\n                {\n                    type: \"slot\",\n                    list: true,\n                    renderer: \"Webiny/Slot\",\n                    name: \"children\",\n                    defaultValue: []\n                }\n            ]\n        });\n    });\n\n    it(\"`acceptsChildren` should work alongside other inputs\", () => {\n        const Button = (_: ComponentProps<{ title: string; children: React.ReactNode }>) => {\n            return null;\n        };\n\n        // Inputs as array\n        const button1 = createComponent(Button, {\n            name: \"Button\",\n            acceptsChildren: true,\n            inputs: [\n                createTextInput({\n                    name: \"title\",\n                    label: \"Title\"\n                })\n            ]\n        });\n\n        // Inputs as object\n        const button2 = createComponent(Button, {\n            name: \"Button\",\n            acceptsChildren: true,\n            inputs: {\n                title: createTextInput({\n                    label: \"Title\"\n                })\n            }\n        });\n\n        // Both must produce the same component manifest\n        const snapshot = {\n            name: \"Button\",\n            acceptsChildren: true,\n            tags: [],\n            inputs: [\n                {\n                    type: \"text\",\n                    renderer: \"Webiny/Input\",\n                    name: \"title\",\n                    label: \"Title\"\n                },\n                {\n                    type: \"slot\",\n                    renderer: \"Webiny/Slot\",\n                    name: \"children\",\n                    list: true,\n                    defaultValue: []\n                }\n            ]\n        };\n\n        expect(button1.manifest).toEqual(snapshot);\n        expect(button2.manifest).toEqual(snapshot);\n    });\n});\n"],"names":["describe","it","Button","_","button1","createComponent","createTextInput","createSlotInput","button2","snapshot","expect","manifest"],"mappings":";;;;AAWAA,SAAS,sBAAsB;IAC3BC,GAAG,wDAAwD;QACvD,MAAMC,SAAS,CAACC,IACL;QAKX,MAAMC,UAAUC,gBAAgBH,QAAQ;YACpC,MAAM;YACN,QAAQ;gBAEJI,gBAAwB;oBACpB,MAAM;oBACN,OAAO;gBACX;gBAEAC,gBAAgB;oBACZ,MAAM;gBACV;aACH;QACL;QAEA,MAAMC,UAAUH,gBAAgBH,QAAQ;YACpC,MAAM;YACN,QAAQ;gBACJ,OAAOI,gBAAgB;oBACnB,OAAO;gBACX;gBACA,UAAUC,gBAAgB,CAAC;YAC/B;QACJ;QAEA,MAAME,WAAW;YACb,MAAM;YACN,MAAM,EAAE;YACR,QAAQ;gBACJ;oBACI,MAAM;oBACN,OAAO;oBACP,UAAU;oBACV,MAAM;gBACV;gBACA;oBACI,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,MAAM;oBACN,cAAc,EAAE;gBACpB;aACH;QACL;QAEAC,OAAON,QAAQ,QAAQ,EAAE,OAAO,CAACK;QACjCC,OAAOF,QAAQ,QAAQ,EAAE,OAAO,CAACC;IACrC;IAEAR,GAAG,mEAAmE;QAClE,MAAMC,SAAS,CAACC,IACL;QAGX,MAAM,EAAEQ,QAAQ,EAAE,GAAGN,gBAAgBH,QAAQ;YACzC,MAAM;YACN,iBAAiB;QACrB;QAEAQ,OAAOC,UAAU,OAAO,CAAC;YACrB,MAAM;YACN,iBAAiB;YACjB,MAAM,EAAE;YACR,QAAQ;gBACJ;oBACI,MAAM;oBACN,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,cAAc,EAAE;gBACpB;aACH;QACL;IACJ;IAEAV,GAAG,wDAAwD;QACvD,MAAMC,SAAS,CAACC,IACL;QAIX,MAAMC,UAAUC,gBAAgBH,QAAQ;YACpC,MAAM;YACN,iBAAiB;YACjB,QAAQ;gBACJI,gBAAgB;oBACZ,MAAM;oBACN,OAAO;gBACX;aACH;QACL;QAGA,MAAME,UAAUH,gBAAgBH,QAAQ;YACpC,MAAM;YACN,iBAAiB;YACjB,QAAQ;gBACJ,OAAOI,gBAAgB;oBACnB,OAAO;gBACX;YACJ;QACJ;QAGA,MAAMG,WAAW;YACb,MAAM;YACN,iBAAiB;YACjB,MAAM,EAAE;YACR,QAAQ;gBACJ;oBACI,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,OAAO;gBACX;gBACA;oBACI,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,MAAM;oBACN,cAAc,EAAE;gBACpB;aACH;QACL;QAEAC,OAAON,QAAQ,QAAQ,EAAE,OAAO,CAACK;QACjCC,OAAOF,QAAQ,QAAQ,EAAE,OAAO,CAACC;IACrC;AACJ"}
+{"version":3,"file":"createComponent.test.js","sources":["../src/createComponent.test.ts"],"sourcesContent":["import { describe, expect, it } from \"vitest\";\nimport type { ComponentProps, ExtractInputNames } from \"~/types.js\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { createTextInput } from \"~/index.js\";\nimport { createSlotInput } from \"@webiny/website-builder-sdk\";\n\n/**\n * These tests are aimed at testing TS types rather than functionality itself.\n * // TODO: figure out how to enable typechecking for a single test. Currently it only typechecks at build time.\n */\n\ndescribe(\"Component Manifest\", () => {\n    it(\"should support input arrays and strict input objects\", () => {\n        const Button = ({}: ComponentProps<{ title: string; children: React.ReactNode }>) => {\n            return null;\n        };\n\n        type Inputs = ExtractInputNames<typeof Button>;\n\n        const button1 = createComponent(Button, {\n            name: \"Button\",\n            inputs: [\n                // Passing a generic narrows down the `name` property and provides autocomplete.\n                createTextInput<Inputs>({\n                    name: \"title\",\n                    label: \"Title\"\n                }),\n                // Skipping the generic still performs typechecks, but doesn't provide autocomplete.\n                createSlotInput({\n                    name: \"children\"\n                })\n            ]\n        });\n\n        const button2 = createComponent(Button, {\n            name: \"Button\",\n            inputs: {\n                title: createTextInput({\n                    label: \"Title\"\n                }),\n                children: createSlotInput({})\n            }\n        });\n\n        const snapshot = {\n            name: \"Button\",\n            tags: [],\n            inputs: [\n                {\n                    type: \"text\",\n                    label: \"Title\",\n                    renderer: \"Webiny/Input\",\n                    name: \"title\"\n                },\n                {\n                    type: \"slot\",\n                    renderer: \"Webiny/Slot\",\n                    name: \"children\",\n                    list: true,\n                    defaultValue: []\n                }\n            ]\n        };\n\n        expect(button1.manifest).toEqual(snapshot);\n        expect(button2.manifest).toEqual(snapshot);\n    });\n\n    it(\"acceptsChildren should satisfy the `children` input requirement\", () => {\n        const Button = ({}: ComponentProps<{ children: React.ReactNode }>) => {\n            return null;\n        };\n\n        const { manifest } = createComponent(Button, {\n            name: \"Button\",\n            acceptsChildren: true\n        });\n\n        expect(manifest).toEqual({\n            name: \"Button\",\n            acceptsChildren: true,\n            tags: [],\n            inputs: [\n                {\n                    type: \"slot\",\n                    list: true,\n                    renderer: \"Webiny/Slot\",\n                    name: \"children\",\n                    defaultValue: []\n                }\n            ]\n        });\n    });\n\n    it(\"`acceptsChildren` should work alongside other inputs\", () => {\n        const Button = ({}: ComponentProps<{ title: string; children: React.ReactNode }>) => {\n            return null;\n        };\n\n        // Inputs as array\n        const button1 = createComponent(Button, {\n            name: \"Button\",\n            acceptsChildren: true,\n            inputs: [\n                createTextInput({\n                    name: \"title\",\n                    label: \"Title\"\n                })\n            ]\n        });\n\n        // Inputs as object\n        const button2 = createComponent(Button, {\n            name: \"Button\",\n            acceptsChildren: true,\n            inputs: {\n                title: createTextInput({\n                    label: \"Title\"\n                })\n            }\n        });\n\n        // Both must produce the same component manifest\n        const snapshot = {\n            name: \"Button\",\n            acceptsChildren: true,\n            tags: [],\n            inputs: [\n                {\n                    type: \"text\",\n                    renderer: \"Webiny/Input\",\n                    name: \"title\",\n                    label: \"Title\"\n                },\n                {\n                    type: \"slot\",\n                    renderer: \"Webiny/Slot\",\n                    name: \"children\",\n                    list: true,\n                    defaultValue: []\n                }\n            ]\n        };\n\n        expect(button1.manifest).toEqual(snapshot);\n        expect(button2.manifest).toEqual(snapshot);\n    });\n});\n"],"names":["describe","it","Button","button1","createComponent","createTextInput","createSlotInput","button2","snapshot","expect","manifest"],"mappings":";;;;AAWAA,SAAS,sBAAsB;IAC3BC,GAAG,wDAAwD;QACvD,MAAMC,SAAS,CAAC,EAAgE,GACrE;QAKX,MAAMC,UAAUC,gBAAgBF,QAAQ;YACpC,MAAM;YACN,QAAQ;gBAEJG,gBAAwB;oBACpB,MAAM;oBACN,OAAO;gBACX;gBAEAC,gBAAgB;oBACZ,MAAM;gBACV;aACH;QACL;QAEA,MAAMC,UAAUH,gBAAgBF,QAAQ;YACpC,MAAM;YACN,QAAQ;gBACJ,OAAOG,gBAAgB;oBACnB,OAAO;gBACX;gBACA,UAAUC,gBAAgB,CAAC;YAC/B;QACJ;QAEA,MAAME,WAAW;YACb,MAAM;YACN,MAAM,EAAE;YACR,QAAQ;gBACJ;oBACI,MAAM;oBACN,OAAO;oBACP,UAAU;oBACV,MAAM;gBACV;gBACA;oBACI,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,MAAM;oBACN,cAAc,EAAE;gBACpB;aACH;QACL;QAEAC,OAAON,QAAQ,QAAQ,EAAE,OAAO,CAACK;QACjCC,OAAOF,QAAQ,QAAQ,EAAE,OAAO,CAACC;IACrC;IAEAP,GAAG,mEAAmE;QAClE,MAAMC,SAAS,CAAC,EAAiD,GACtD;QAGX,MAAM,EAAEQ,QAAQ,EAAE,GAAGN,gBAAgBF,QAAQ;YACzC,MAAM;YACN,iBAAiB;QACrB;QAEAO,OAAOC,UAAU,OAAO,CAAC;YACrB,MAAM;YACN,iBAAiB;YACjB,MAAM,EAAE;YACR,QAAQ;gBACJ;oBACI,MAAM;oBACN,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,cAAc,EAAE;gBACpB;aACH;QACL;IACJ;IAEAT,GAAG,wDAAwD;QACvD,MAAMC,SAAS,CAAC,EAAgE,GACrE;QAIX,MAAMC,UAAUC,gBAAgBF,QAAQ;YACpC,MAAM;YACN,iBAAiB;YACjB,QAAQ;gBACJG,gBAAgB;oBACZ,MAAM;oBACN,OAAO;gBACX;aACH;QACL;QAGA,MAAME,UAAUH,gBAAgBF,QAAQ;YACpC,MAAM;YACN,iBAAiB;YACjB,QAAQ;gBACJ,OAAOG,gBAAgB;oBACnB,OAAO;gBACX;YACJ;QACJ;QAGA,MAAMG,WAAW;YACb,MAAM;YACN,iBAAiB;YACjB,MAAM,EAAE;YACR,QAAQ;gBACJ;oBACI,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,OAAO;gBACX;gBACA;oBACI,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,MAAM;oBACN,cAAc,EAAE;gBACpB;aACH;QACL;QAEAC,OAAON,QAAQ,QAAQ,EAAE,OAAO,CAACK;QACjCC,OAAOF,QAAQ,QAAQ,EAAE,OAAO,CAACC;IACrC;AACJ"}

package/image/BackgroundImage.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { type Asset } from "@webiny/website-builder-sdk";
+export interface BackgroundImageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "style"> {
+    /** The image value (unified `Asset` or a legacy value — both accepted). */
+    image: Asset;
+    /** Content rendered on top of the background (auto-stacked above the image). */
+    children?: React.ReactNode;
+    /** Class applied to the wrapper element. */
+    className?: string;
+    /** Styles merged into the wrapper. Give it a height (e.g. `minHeight`). */
+    style?: React.CSSProperties;
+    /** Class applied to the background `<img>`. */
+    imgClassName?: string;
+    /** Explicit alt text; falls back to the image's stored alt. Empty = decorative. */
+    alt?: string;
+    /** Delivery width requested for the background image. Defaults to 1920. */
+    width?: number;
+    /**
+     * Responsive URL builder — e.g. `({ src, width }) => \`${src}?width=${width}&format=auto\``.
+     * When provided, a `srcSet` is generated from `widths`.
+     */
+    loader?: (params: {
+        src: string;
+        width: number;
+    }) => string;
+    /** Candidate widths for the generated `srcSet`. */
+    widths?: number[];
+    /** The `sizes` attribute (defaults to `100vw`, since backgrounds are usually full-bleed). */
+    sizes?: string;
+    /** Native loading strategy for the background image. */
+    loading?: "eager" | "lazy";
+}
+export declare function BackgroundImage({ image, children, className, style, imgClassName, alt, width, loader, widths, sizes, loading, ...rest }: BackgroundImageProps): React.JSX.Element;

package/image/BackgroundImage.js

@@ -0,0 +1,61 @@
+import react from "react";
+import { normalizeToAsset } from "@webiny/website-builder-sdk";
+const DEFAULT_WIDTHS = [
+    640,
+    750,
+    828,
+    1080,
+    1200,
+    1920,
+    2048
+];
+function BackgroundImage({ image, children, className, style, imgClassName, alt, width = 1920, loader, widths = DEFAULT_WIDTHS, sizes = "100vw", loading, ...rest }) {
+    const asset = normalizeToAsset(image);
+    const src = asset?.src ?? "";
+    const focalPoint = asset?.image?.focalPoint ?? {
+        x: 0.5,
+        y: 0.5
+    };
+    const resolvedAlt = alt ?? asset?.image?.alt ?? "";
+    const resolvedSrc = loader ? loader({
+        src,
+        width
+    }) : src;
+    const srcSet = loader ? widths.map((w)=>`${loader({
+            src,
+            width: w
+        })} ${w}w`).join(", ") || void 0 : void 0;
+    return /*#__PURE__*/ react.createElement("div", {
+        ...rest,
+        className: className,
+        style: {
+            position: "relative",
+            overflow: "hidden",
+            ...style
+        }
+    }, /*#__PURE__*/ react.createElement("img", {
+        className: imgClassName,
+        src: resolvedSrc,
+        srcSet: srcSet,
+        sizes: srcSet ? sizes : void 0,
+        alt: resolvedAlt,
+        "aria-hidden": "" === resolvedAlt ? true : void 0,
+        loading: loading,
+        style: {
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            objectPosition: `${100 * focalPoint.x}% ${100 * focalPoint.y}%`
+        }
+    }), null != children ? /*#__PURE__*/ react.createElement("div", {
+        style: {
+            position: "relative",
+            zIndex: 1
+        }
+    }, children) : null);
+}
+export { BackgroundImage };
+
+//# sourceMappingURL=BackgroundImage.js.map

package/image/BackgroundImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image/BackgroundImage.js","sources":["../../src/image/BackgroundImage.tsx"],"sourcesContent":["import React from \"react\";\nimport { normalizeToAsset, type Asset } from \"@webiny/website-builder-sdk\";\n\nexport interface BackgroundImageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"style\"> {\n    /** The image value (unified `Asset` or a legacy value — both accepted). */\n    image: Asset;\n    /** Content rendered on top of the background (auto-stacked above the image). */\n    children?: React.ReactNode;\n    /** Class applied to the wrapper element. */\n    className?: string;\n    /** Styles merged into the wrapper. Give it a height (e.g. `minHeight`). */\n    style?: React.CSSProperties;\n    /** Class applied to the background `<img>`. */\n    imgClassName?: string;\n    /** Explicit alt text; falls back to the image's stored alt. Empty = decorative. */\n    alt?: string;\n    /** Delivery width requested for the background image. Defaults to 1920. */\n    width?: number;\n    /**\n     * Responsive URL builder — e.g. `({ src, width }) => \\`${src}?width=${width}&format=auto\\``.\n     * When provided, a `srcSet` is generated from `widths`.\n     */\n    loader?: (params: { src: string; width: number }) => string;\n    /** Candidate widths for the generated `srcSet`. */\n    widths?: number[];\n    /** The `sizes` attribute (defaults to `100vw`, since backgrounds are usually full-bleed). */\n    sizes?: string;\n    /** Native loading strategy for the background image. */\n    loading?: \"eager\" | \"lazy\";\n}\n\nconst DEFAULT_WIDTHS = [640, 750, 828, 1080, 1200, 1920, 2048];\n\nexport function BackgroundImage({\n    image,\n    children,\n    className,\n    style,\n    imgClassName,\n    alt,\n    width = 1920,\n    loader,\n    widths = DEFAULT_WIDTHS,\n    sizes = \"100vw\",\n    loading,\n    ...rest\n}: BackgroundImageProps) {\n    const asset = normalizeToAsset(image);\n    const src = asset?.src ?? \"\";\n    const focalPoint = asset?.image?.focalPoint ?? { x: 0.5, y: 0.5 };\n    const resolvedAlt = alt ?? asset?.image?.alt ?? \"\";\n\n    const resolvedSrc = loader ? loader({ src, width }) : src;\n    const srcSet = loader\n        ? widths.map(w => `${loader({ src, width: w })} ${w}w`).join(\", \") || undefined\n        : undefined;\n\n    return (\n        <div\n            {...rest}\n            className={className}\n            style={{ position: \"relative\", overflow: \"hidden\", ...style }}\n        >\n            <img\n                className={imgClassName}\n                src={resolvedSrc}\n                srcSet={srcSet}\n                sizes={srcSet ? sizes : undefined}\n                alt={resolvedAlt}\n                aria-hidden={resolvedAlt === \"\" ? true : undefined}\n                loading={loading}\n                style={{\n                    position: \"absolute\",\n                    inset: 0,\n                    width: \"100%\",\n                    height: \"100%\",\n                    objectFit: \"cover\",\n                    objectPosition: `${focalPoint.x * 100}% ${focalPoint.y * 100}%`\n                }}\n            />\n            {children != null ? (\n                <div style={{ position: \"relative\", zIndex: 1 }}>{children}</div>\n            ) : null}\n        </div>\n    );\n}\n"],"names":["DEFAULT_WIDTHS","BackgroundImage","image","children","className","style","imgClassName","alt","width","loader","widths","sizes","loading","rest","asset","normalizeToAsset","src","focalPoint","resolvedAlt","resolvedSrc","srcSet","w","undefined"],"mappings":";;AA+BA,MAAMA,iBAAiB;IAAC;IAAK;IAAK;IAAK;IAAM;IAAM;IAAM;CAAK;AAEvD,SAASC,gBAAgB,EAC5BC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,YAAY,EACZC,GAAG,EACHC,QAAQ,IAAI,EACZC,MAAM,EACNC,SAASV,cAAc,EACvBW,QAAQ,OAAO,EACfC,OAAO,EACP,GAAGC,MACgB;IACnB,MAAMC,QAAQC,iBAAiBb;IAC/B,MAAMc,MAAMF,OAAO,OAAO;IAC1B,MAAMG,aAAaH,OAAO,OAAO,cAAc;QAAE,GAAG;QAAK,GAAG;IAAI;IAChE,MAAMI,cAAcX,OAAOO,OAAO,OAAO,OAAO;IAEhD,MAAMK,cAAcV,SAASA,OAAO;QAAEO;QAAKR;IAAM,KAAKQ;IACtD,MAAMI,SAASX,SACTC,OAAO,GAAG,CAACW,CAAAA,IAAK,GAAGZ,OAAO;YAAEO;YAAK,OAAOK;QAAE,GAAG,CAAC,EAAEA,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,SAASC,SACpEA;IAEN,OAAO,WAAP,GACI,oBAAC;QACI,GAAGT,IAAI;QACR,WAAWT;QACX,OAAO;YAAE,UAAU;YAAY,UAAU;YAAU,GAAGC,KAAK;QAAC;qBAE5D,oBAAC;QACG,WAAWC;QACX,KAAKa;QACL,QAAQC;QACR,OAAOA,SAAST,QAAQW;QACxB,KAAKJ;QACL,eAAaA,AAAgB,OAAhBA,cAAqB,OAAOI;QACzC,SAASV;QACT,OAAO;YACH,UAAU;YACV,OAAO;YACP,OAAO;YACP,QAAQ;YACR,WAAW;YACX,gBAAgB,GAAGK,AAAe,MAAfA,WAAW,CAAC,CAAO,EAAE,EAAEA,AAAe,MAAfA,WAAW,CAAC,CAAO,CAAC,CAAC;QACnE;QAEHd,AAAY,QAAZA,WAAmB,WAAP,GACT,oBAAC;QAAI,OAAO;YAAE,UAAU;YAAY,QAAQ;QAAE;OAAIA,YAClD;AAGhB"}

package/image/Image.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import type { AspectRatioInput, Asset } from "@webiny/website-builder-sdk";
+export interface ImageComponentProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "width" | "height" | "style" | "alt"> {
+    image: Asset;
+    /** Target aspect ratio (e.g. `16 / 9` or `{ width, height }`). Omit for the crop's own ratio. */
+    aspectRatio?: AspectRatioInput;
+    /** Explicit alt text; falls back to the image's stored alt. */
+    alt?: string;
+    /** Class applied to the wrapper element. */
+    className?: string;
+    /** Class applied to the `<img>` element. */
+    imgClassName?: string;
+    /** Extra styles merged into the wrapper (e.g. `maxWidth`). */
+    style?: React.CSSProperties;
+    /**
+     * Optional responsive URL builder — e.g. `({ src, width }) => \`${src}?width=${width}\``.
+     * When provided, a `srcSet` is generated from `widths`. This is also the seam for a
+     * future server/CDN transform (crop params can be appended here).
+     */
+    loader?: (params: {
+        src: string;
+        width: number;
+    }) => string;
+    /** Candidate widths for the generated `srcSet` (defaults to a common set). */
+    widths?: number[];
+    /** The `sizes` attribute for responsive selection. */
+    sizes?: string;
+}
+export declare function Image({ image, aspectRatio, alt, className, imgClassName, style, loader, widths, sizes, ...imgProps }: ImageComponentProps): React.JSX.Element;

package/image/Image.js

@@ -0,0 +1,43 @@
+import react from "react";
+import { getImageProps } from "./getImageProps.js";
+const DEFAULT_WIDTHS = [
+    640,
+    750,
+    828,
+    1080,
+    1200,
+    1920,
+    2048
+];
+function Image({ image, aspectRatio, alt, className, imgClassName, style, loader, widths = DEFAULT_WIDTHS, sizes, ...imgProps }) {
+    const { style: containerStyle, imgStyle, src, alt: resolvedAlt, width } = getImageProps(image, {
+        aspectRatio,
+        alt
+    });
+    const srcSet = loader ? widths.filter((w)=>!width || w <= width).map((w)=>`${loader({
+            src,
+            width: w
+        })} ${w}w`).join(", ") || void 0 : void 0;
+    const resolvedSrc = loader ? loader({
+        src,
+        width: width || widths[widths.length - 1]
+    }) : src;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: className,
+        style: {
+            ...containerStyle,
+            ...style
+        }
+    }, /*#__PURE__*/ react.createElement("img", {
+        ...imgProps,
+        className: imgClassName,
+        src: resolvedSrc,
+        srcSet: srcSet,
+        sizes: sizes,
+        alt: resolvedAlt,
+        style: imgStyle
+    }));
+}
+export { Image };
+
+//# sourceMappingURL=Image.js.map

package/image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image/Image.js","sources":["../../src/image/Image.tsx"],"sourcesContent":["import React from \"react\";\nimport type { AspectRatioInput, Asset } from \"@webiny/website-builder-sdk\";\nimport { getImageProps } from \"./getImageProps.js\";\n\nexport interface ImageComponentProps extends Omit<\n    React.ImgHTMLAttributes<HTMLImageElement>,\n    \"src\" | \"width\" | \"height\" | \"style\" | \"alt\"\n> {\n    image: Asset;\n    /** Target aspect ratio (e.g. `16 / 9` or `{ width, height }`). Omit for the crop's own ratio. */\n    aspectRatio?: AspectRatioInput;\n    /** Explicit alt text; falls back to the image's stored alt. */\n    alt?: string;\n    /** Class applied to the wrapper element. */\n    className?: string;\n    /** Class applied to the `<img>` element. */\n    imgClassName?: string;\n    /** Extra styles merged into the wrapper (e.g. `maxWidth`). */\n    style?: React.CSSProperties;\n    /**\n     * Optional responsive URL builder — e.g. `({ src, width }) => \\`${src}?width=${width}\\``.\n     * When provided, a `srcSet` is generated from `widths`. This is also the seam for a\n     * future server/CDN transform (crop params can be appended here).\n     */\n    loader?: (params: { src: string; width: number }) => string;\n    /** Candidate widths for the generated `srcSet` (defaults to a common set). */\n    widths?: number[];\n    /** The `sizes` attribute for responsive selection. */\n    sizes?: string;\n}\n\nconst DEFAULT_WIDTHS = [640, 750, 828, 1080, 1200, 1920, 2048];\n\nexport function Image({\n    image,\n    aspectRatio,\n    alt,\n    className,\n    imgClassName,\n    style,\n    loader,\n    widths = DEFAULT_WIDTHS,\n    sizes,\n    ...imgProps\n}: ImageComponentProps) {\n    const {\n        style: containerStyle,\n        imgStyle,\n        src,\n        alt: resolvedAlt,\n        width\n    } = getImageProps(image, { aspectRatio, alt });\n\n    const srcSet = loader\n        ? widths\n              .filter(w => !width || w <= width)\n              .map(w => `${loader({ src, width: w })} ${w}w`)\n              .join(\", \") || undefined\n        : undefined;\n\n    const resolvedSrc = loader ? loader({ src, width: width || widths[widths.length - 1] }) : src;\n\n    return (\n        <div className={className} style={{ ...containerStyle, ...style }}>\n            <img\n                {...imgProps}\n                className={imgClassName}\n                src={resolvedSrc}\n                srcSet={srcSet}\n                sizes={sizes}\n                alt={resolvedAlt}\n                style={imgStyle}\n            />\n        </div>\n    );\n}\n"],"names":["DEFAULT_WIDTHS","Image","image","aspectRatio","alt","className","imgClassName","style","loader","widths","sizes","imgProps","containerStyle","imgStyle","src","resolvedAlt","width","getImageProps","srcSet","w","undefined","resolvedSrc"],"mappings":";;AA+BA,MAAMA,iBAAiB;IAAC;IAAK;IAAK;IAAK;IAAM;IAAM;IAAM;CAAK;AAEvD,SAASC,MAAM,EAClBC,KAAK,EACLC,WAAW,EACXC,GAAG,EACHC,SAAS,EACTC,YAAY,EACZC,KAAK,EACLC,MAAM,EACNC,SAAST,cAAc,EACvBU,KAAK,EACL,GAAGC,UACe;IAClB,MAAM,EACF,OAAOC,cAAc,EACrBC,QAAQ,EACRC,GAAG,EACH,KAAKC,WAAW,EAChBC,KAAK,EACR,GAAGC,cAAcf,OAAO;QAAEC;QAAaC;IAAI;IAE5C,MAAMc,SAASV,SACTC,OACK,MAAM,CAACU,CAAAA,IAAK,CAACH,SAASG,KAAKH,OAC3B,GAAG,CAACG,CAAAA,IAAK,GAAGX,OAAO;YAAEM;YAAK,OAAOK;QAAE,GAAG,CAAC,EAAEA,EAAE,CAAC,CAAC,EAC7C,IAAI,CAAC,SAASC,SACnBA;IAEN,MAAMC,cAAcb,SAASA,OAAO;QAAEM;QAAK,OAAOE,SAASP,MAAM,CAACA,OAAO,MAAM,GAAG,EAAE;IAAC,KAAKK;IAE1F,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWT;QAAW,OAAO;YAAE,GAAGO,cAAc;YAAE,GAAGL,KAAK;QAAC;qBAC5D,oBAAC;QACI,GAAGI,QAAQ;QACZ,WAAWL;QACX,KAAKe;QACL,QAAQH;QACR,OAAOR;QACP,KAAKK;QACL,OAAOF;;AAIvB"}

package/image/getImageProps.d.ts

@@ -0,0 +1,42 @@
+import type { CSSProperties } from "react";
+import { type AspectRatioInput, type Asset } from "@webiny/website-builder-sdk";
+export interface ImageProps {
+    /** Wrapper style: an aspect-ratio box that clips overflow. Spread onto a container. */
+    style: CSSProperties;
+    /** Image style: absolutely positioned to reveal exactly the cropped/focused region. */
+    imgStyle: CSSProperties;
+    /** The image URL. */
+    src: string;
+    /** Resolved alt text (explicit override, else the image's stored alt, else ""). */
+    alt: string;
+    /** Intrinsic (original) pixel dimensions of the asset. */
+    width: number;
+    height: number;
+}
+export interface ImageValue {
+    id: string;
+    name: string;
+    size: number;
+    mimeType: string;
+    src: string;
+    width: number;
+    height: number;
+}
+export interface GetImagePropsOptions {
+    /** Target aspect ratio. Omit to render at the crop's own aspect ratio. */
+    aspectRatio?: AspectRatioInput;
+    /** Explicit alt text; falls back to the image's stored `image.alt`. */
+    alt?: string;
+}
+/**
+ * Compute the props needed to render a Webiny image honoring its crop + focal point,
+ * using pure CSS (no image backend). Works with a plain `<img>`, SSR, and static
+ * export. Spread `style` onto a wrapper element and `imgStyle` onto the `<img>`.
+ *
+ * Accepts either the unified {@link Asset} shape or a legacy
+ * `ImageValue` (existing page snapshots) — both are normalized transparently.
+ *
+ * This is the escape hatch for custom rendering; most consumers can use the
+ * `<Image>` component instead.
+ */
+export declare function getImageProps(input: Asset | ImageValue, options?: GetImagePropsOptions): ImageProps;

package/image/getImageProps.js

@@ -0,0 +1,18 @@
+import { getAssetImageRenderData, normalizeToAsset } from "@webiny/website-builder-sdk";
+function getImageProps(input, options = {}) {
+    const asset = normalizeToAsset(input);
+    const data = getAssetImageRenderData({
+        image: asset?.image
+    }, options.aspectRatio);
+    return {
+        style: data.container,
+        imgStyle: data.image,
+        src: asset?.src ?? "",
+        alt: options.alt ?? asset?.image?.alt ?? "",
+        width: data.intrinsicWidth,
+        height: data.intrinsicHeight
+    };
+}
+export { getImageProps };
+
+//# sourceMappingURL=getImageProps.js.map

package/image/getImageProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image/getImageProps.js","sources":["../../src/image/getImageProps.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport {\n    getAssetImageRenderData,\n    normalizeToAsset,\n    type AspectRatioInput,\n    type Asset\n} from \"@webiny/website-builder-sdk\";\n\nexport interface ImageProps {\n    /** Wrapper style: an aspect-ratio box that clips overflow. Spread onto a container. */\n    style: CSSProperties;\n    /** Image style: absolutely positioned to reveal exactly the cropped/focused region. */\n    imgStyle: CSSProperties;\n    /** The image URL. */\n    src: string;\n    /** Resolved alt text (explicit override, else the image's stored alt, else \"\"). */\n    alt: string;\n    /** Intrinsic (original) pixel dimensions of the asset. */\n    width: number;\n    height: number;\n}\n\nexport interface ImageValue {\n    id: string;\n    name: string;\n    size: number;\n    mimeType: string; // not \"type\"\n    src: string;\n    width: number; // top-level, not nested in image\n    height: number; // top-level\n}\n\nexport interface GetImagePropsOptions {\n    /** Target aspect ratio. Omit to render at the crop's own aspect ratio. */\n    aspectRatio?: AspectRatioInput;\n    /** Explicit alt text; falls back to the image's stored `image.alt`. */\n    alt?: string;\n}\n\n/**\n * Compute the props needed to render a Webiny image honoring its crop + focal point,\n * using pure CSS (no image backend). Works with a plain `<img>`, SSR, and static\n * export. Spread `style` onto a wrapper element and `imgStyle` onto the `<img>`.\n *\n * Accepts either the unified {@link Asset} shape or a legacy\n * `ImageValue` (existing page snapshots) — both are normalized transparently.\n *\n * This is the escape hatch for custom rendering; most consumers can use the\n * `<Image>` component instead.\n */\nexport function getImageProps(\n    input: Asset | ImageValue,\n    options: GetImagePropsOptions = {}\n): ImageProps {\n    const asset = normalizeToAsset(input);\n    const data = getAssetImageRenderData({ image: asset?.image }, options.aspectRatio);\n\n    return {\n        style: data.container,\n        imgStyle: data.image,\n        src: asset?.src ?? \"\",\n        alt: options.alt ?? asset?.image?.alt ?? \"\",\n        width: data.intrinsicWidth,\n        height: data.intrinsicHeight\n    };\n}\n"],"names":["getImageProps","input","options","asset","normalizeToAsset","data","getAssetImageRenderData"],"mappings":";AAkDO,SAASA,cACZC,KAAyB,EACzBC,UAAgC,CAAC,CAAC;IAElC,MAAMC,QAAQC,iBAAiBH;IAC/B,MAAMI,OAAOC,wBAAwB;QAAE,OAAOH,OAAO;IAAM,GAAGD,QAAQ,WAAW;IAEjF,OAAO;QACH,OAAOG,KAAK,SAAS;QACrB,UAAUA,KAAK,KAAK;QACpB,KAAKF,OAAO,OAAO;QACnB,KAAKD,QAAQ,GAAG,IAAIC,OAAO,OAAO,OAAO;QACzC,OAAOE,KAAK,cAAc;QAC1B,QAAQA,KAAK,eAAe;IAChC;AACJ"}

package/image/getImageProps.test.d.ts

@@ -0,0 +1 @@
+export {};

package/image/getImageProps.test.js

@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import { getImageProps } from "./getImageProps.js";
+const asset = (overrides = {})=>({
+        id: "1",
+        name: "photo.jpg",
+        size: 1234,
+        type: "image/jpeg",
+        src: "https://cdn.test/photo.jpg",
+        url: "https://cdn.test/photo.jpg",
+        image: {
+            width: 1600,
+            height: 900
+        },
+        ...overrides
+    });
+describe("getImageProps", ()=>{
+    it("returns wrapper + image styles and passes through src and dimensions", ()=>{
+        const props = getImageProps(asset());
+        expect(props.src).toBe("https://cdn.test/photo.jpg");
+        expect(props.width).toBe(1600);
+        expect(props.height).toBe(900);
+        expect(props.style.overflow).toBe("hidden");
+        expect(props.style.position).toBe("relative");
+        expect(props.imgStyle.position).toBe("absolute");
+    });
+    it("resolves alt from the explicit option first", ()=>{
+        const props = getImageProps(asset({
+            image: {
+                alt: "stored alt"
+            }
+        }), {
+            alt: "explicit alt"
+        });
+        expect(props.alt).toBe("explicit alt");
+    });
+    it("falls back to the image's stored alt", ()=>{
+        const props = getImageProps(asset({
+            image: {
+                alt: "stored alt"
+            }
+        }));
+        expect(props.alt).toBe("stored alt");
+    });
+    it("defaults alt to an empty string", ()=>{
+        expect(getImageProps(asset()).alt).toBe("");
+    });
+    it("produces a wrapper with the requested aspect ratio", ()=>{
+        const props = getImageProps(asset(), {
+            aspectRatio: 1
+        });
+        expect(props.style.aspectRatio).toBe("1");
+    });
+    it("offsets the image to reveal a focal-point-shifted crop region", ()=>{
+        const props = getImageProps(asset({
+            image: {
+                width: 1600,
+                height: 900,
+                focalPoint: {
+                    x: 0.9,
+                    y: 0.5
+                }
+            }
+        }), {
+            aspectRatio: 1
+        });
+        expect(parseFloat(props.imgStyle.left)).toBeLessThan(0);
+    });
+});
+
+//# sourceMappingURL=getImageProps.test.js.map

package/image/getImageProps.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image/getImageProps.test.js","sources":["../../src/image/getImageProps.test.ts"],"sourcesContent":["import { describe, expect, it } from \"vitest\";\nimport { getImageProps } from \"./getImageProps.js\";\nimport type { Asset } from \"@webiny/website-builder-sdk\";\n\nconst asset = (overrides: Partial<Asset> = {}): Asset => ({\n    id: \"1\",\n    name: \"photo.jpg\",\n    size: 1234,\n    type: \"image/jpeg\",\n    src: \"https://cdn.test/photo.jpg\",\n    url: \"https://cdn.test/photo.jpg\",\n    image: { width: 1600, height: 900 },\n    ...overrides\n});\n\ndescribe(\"getImageProps\", () => {\n    it(\"returns wrapper + image styles and passes through src and dimensions\", () => {\n        const props = getImageProps(asset());\n        expect(props.src).toBe(\"https://cdn.test/photo.jpg\");\n        expect(props.width).toBe(1600);\n        expect(props.height).toBe(900);\n        expect(props.style.overflow).toBe(\"hidden\");\n        expect(props.style.position).toBe(\"relative\");\n        expect(props.imgStyle.position).toBe(\"absolute\");\n    });\n\n    it(\"resolves alt from the explicit option first\", () => {\n        const props = getImageProps(asset({ image: { alt: \"stored alt\" } }), {\n            alt: \"explicit alt\"\n        });\n        expect(props.alt).toBe(\"explicit alt\");\n    });\n\n    it(\"falls back to the image's stored alt\", () => {\n        const props = getImageProps(asset({ image: { alt: \"stored alt\" } }));\n        expect(props.alt).toBe(\"stored alt\");\n    });\n\n    it(\"defaults alt to an empty string\", () => {\n        expect(getImageProps(asset()).alt).toBe(\"\");\n    });\n\n    it(\"produces a wrapper with the requested aspect ratio\", () => {\n        const props = getImageProps(asset(), { aspectRatio: 1 });\n        expect(props.style.aspectRatio).toBe(\"1\");\n    });\n\n    it(\"offsets the image to reveal a focal-point-shifted crop region\", () => {\n        const props = getImageProps(\n            asset({\n                image: {\n                    width: 1600,\n                    height: 900,\n                    focalPoint: { x: 0.9, y: 0.5 }\n                }\n            }),\n            { aspectRatio: 1 }\n        );\n        expect(parseFloat(props.imgStyle.left as string)).toBeLessThan(0);\n    });\n});\n"],"names":["asset","overrides","describe","it","props","getImageProps","expect","parseFloat"],"mappings":";;AAIA,MAAMA,QAAQ,CAACC,YAA4B,CAAC,CAAC,GAAa;QACtD,IAAI;QACJ,MAAM;QACN,MAAM;QACN,MAAM;QACN,KAAK;QACL,KAAK;QACL,OAAO;YAAE,OAAO;YAAM,QAAQ;QAAI;QAClC,GAAGA,SAAS;IAChB;AAEAC,SAAS,iBAAiB;IACtBC,GAAG,wEAAwE;QACvE,MAAMC,QAAQC,cAAcL;QAC5BM,OAAOF,MAAM,GAAG,EAAE,IAAI,CAAC;QACvBE,OAAOF,MAAM,KAAK,EAAE,IAAI,CAAC;QACzBE,OAAOF,MAAM,MAAM,EAAE,IAAI,CAAC;QAC1BE,OAAOF,MAAM,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;QAClCE,OAAOF,MAAM,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;QAClCE,OAAOF,MAAM,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC;IACzC;IAEAD,GAAG,+CAA+C;QAC9C,MAAMC,QAAQC,cAAcL,MAAM;YAAE,OAAO;gBAAE,KAAK;YAAa;QAAE,IAAI;YACjE,KAAK;QACT;QACAM,OAAOF,MAAM,GAAG,EAAE,IAAI,CAAC;IAC3B;IAEAD,GAAG,wCAAwC;QACvC,MAAMC,QAAQC,cAAcL,MAAM;YAAE,OAAO;gBAAE,KAAK;YAAa;QAAE;QACjEM,OAAOF,MAAM,GAAG,EAAE,IAAI,CAAC;IAC3B;IAEAD,GAAG,mCAAmC;QAClCG,OAAOD,cAAcL,SAAS,GAAG,EAAE,IAAI,CAAC;IAC5C;IAEAG,GAAG,sDAAsD;QACrD,MAAMC,QAAQC,cAAcL,SAAS;YAAE,aAAa;QAAE;QACtDM,OAAOF,MAAM,KAAK,CAAC,WAAW,EAAE,IAAI,CAAC;IACzC;IAEAD,GAAG,iEAAiE;QAChE,MAAMC,QAAQC,cACVL,MAAM;YACF,OAAO;gBACH,OAAO;gBACP,QAAQ;gBACR,YAAY;oBAAE,GAAG;oBAAK,GAAG;gBAAI;YACjC;QACJ,IACA;YAAE,aAAa;QAAE;QAErBM,OAAOC,WAAWH,MAAM,QAAQ,CAAC,IAAI,GAAa,YAAY,CAAC;IACnE;AACJ"}

package/image/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./getImageProps.js";
+export * from "./Image.js";
+export * from "./BackgroundImage.js";

package/image/index.js

@@ -0,0 +1,3 @@
+export * from "./getImageProps.js";
+export * from "./Image.js";
+export * from "./BackgroundImage.js";

package/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./components/index.js";
-export * from "./createComponent.js";
-export { createTextInput, createLongTextInput, createNumberInput, createBooleanInput, createColorInput, createFileInput, createDateInput, createLexicalInput, createSelectInput, createRadioInput, createObjectInput, createTagsInput, createSlotInput, createInput, createElement, createTheme, contentSdk, environment, setHeadersProvider, getHeadersProvider, registerComponentGroup, type CssProperties, type Document, type DocumentElement, type Breakpoint, type CreateElementParams, type ContentSDKConfig, type ComponentManifest, type ComponentInput, type ComponentConstraint, type WebsiteBuilderThemeInput, StyleSettings } from "@webiny/website-builder-sdk";
+export { createComponent } from "@webiny/website-builder-sdk";
+export { createTextInput, createLongTextInput, createNumberInput, createBooleanInput, createColorInput, createFileInput, createDateInput, createLexicalInput, createSelectInput, createRadioInput, createObjectInput, createTagsInput, createSlotInput, createInput, createElement, createTheme, contentSdk, environment, setHeadersProvider, getHeadersProvider, registerComponentGroup, getPageWithExperiment, resolveVisitorContext, assignVariant, forcedAssignment, registerAnalyticsProvider, getAnalyticsProvider, ASPECT_RATIO_PRESETS, FORCED_VARIANT_PARAM, DEFAULT_VISITOR_COOKIE, CONTROL_VARIANT_ID, type ActiveExperiment, type ActiveExperimentVariant, type VariantContent, type VariantAssignment, type VisitorContext, type DeviceType, type ExperimentTrafficSplit, type ExperimentTargeting, type ExperimentAnalyticsConfig, type ExperimentSdk, type ExperimentRenderResult, type GetPageWithExperimentOptions, type ExperimentCookie, type CssProperties, type Document, type DocumentElement, type Breakpoint, type CreateElementParams, type ContentSDKConfig, type ComponentManifest, type ComponentInput, type ComponentConstraint, type WebsiteBuilderThemeInput, type AssetCrop, type AssetFocalPoint, type Asset, type AssetImage, type AssetDocument, type AssetVideo, type AssetCategory, normalizeToAsset, getAssetCategory, getAssetUrl, getAssetCropParam, type AssetUrlOptions, IMAGE_RESIZE_WIDTHS, getImageSrcSet, getImageDimensions, type ImageSrcSet, type ImageSrcSetOptions, type ImageDimensions, type AspectRatioInput, type AspectRatioPreset, StyleSettings } from "@webiny/website-builder-sdk";
 export type { ComponentProps, ComponentPropsWithChildren, InferManifest, InferComponentChange, InferDescendantChange } from "./types.js";

package/index.js

@@ -1,3 +1,2 @@
 export * from "./components/index.js";
-export * from "./createComponent.js";
-export { StyleSettings, contentSdk, createBooleanInput, createColorInput, createDateInput, createElement, createFileInput, createInput, createLexicalInput, createLongTextInput, createNumberInput, createObjectInput, createRadioInput, createSelectInput, createSlotInput, createTagsInput, createTextInput, createTheme, environment, getHeadersProvider, registerComponentGroup, setHeadersProvider } from "@webiny/website-builder-sdk";
+export { ASPECT_RATIO_PRESETS, CONTROL_VARIANT_ID, DEFAULT_VISITOR_COOKIE, FORCED_VARIANT_PARAM, IMAGE_RESIZE_WIDTHS, StyleSettings, assignVariant, contentSdk, createBooleanInput, createColorInput, createComponent, createDateInput, createElement, createFileInput, createInput, createLexicalInput, createLongTextInput, createNumberInput, createObjectInput, createRadioInput, createSelectInput, createSlotInput, createTagsInput, createTextInput, createTheme, environment, forcedAssignment, getAnalyticsProvider, getAssetCategory, getAssetCropParam, getAssetUrl, getHeadersProvider, getImageDimensions, getImageSrcSet, getPageWithExperiment, normalizeToAsset, registerAnalyticsProvider, registerComponentGroup, resolveVisitorContext, setHeadersProvider } from "@webiny/website-builder-sdk";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/website-builder-react",
-	"version": "6.6.0-alpha.0",
+	"version": "6.6.0-alpha.2",
 	"type": "module",
 	"repository": {
 		"type": "git",
@@ -17,18 +17,18 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@webiny/website-builder-sdk": "6.6.0-alpha.0",
+		"@webiny/website-builder-sdk": "6.6.0-alpha.2",
 		"deep-equal": "2.2.3",
-		"mobx": "6.16.1",
-		"mobx-react-lite": "4.1.1",
+		"mobx": "7.0.3",
+		"mobx-react-lite": "5.0.3",
 		"react": "18.3.1",
 		"react-dom": "18.3.1"
 	},
 	"devDependencies": {
 		"@types/react": "18.3.31",
-		"@webiny/build-tools": "6.6.0-alpha.0",
+		"@webiny/build-tools": "6.6.0-alpha.2",
 		"typescript": "7.0.2",
-		"vitest": "4.1.10"
+		"vitest": "4.1.11"
 	},
 	"publishConfig": {
 		"access": "public"

package/types.d.ts

@@ -1,4 +1,5 @@
-import type { CssProperties, DocumentElement, ComponentManifestInput, ComponentChangeHandler, DescendantChangeHandler } from "@webiny/website-builder-sdk";
+import type { CssProperties, DocumentElement, ComponentManifestInput, ComponentChangeHandler, DescendantChangeHandler, ExtractInputs } from "@webiny/website-builder-sdk";
+export type { ExtractInputs } from "@webiny/website-builder-sdk";
 export type ComponentProps<TInputs = unknown> = {
     inputs: TInputs;
     styles: CssProperties;
@@ -8,9 +9,6 @@ export type ComponentProps<TInputs = unknown> = {
 export type ComponentPropsWithChildren<TInputs = unknown> = ComponentProps<TInputs & {
     children: React.ReactNode;
 }>;
-export type ExtractInputs<T> = T extends {
-    inputs: infer I;
-} ? I : never;
 export type ExtractInputNames<T extends (props: any) => any> = keyof ExtractInputs<Parameters<T>[0]>;
 /**
  * Infer the full typed ComponentManifestInput from a React component.

package/createComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"createComponent.js","sources":["../src/createComponent.ts"],"sourcesContent":["import type {\n    Component,\n    ComponentInput,\n    ComponentManifest,\n    ComponentManifestInput,\n    InputFactory\n} from \"@webiny/website-builder-sdk\";\nimport { createSlotInput } from \"@webiny/website-builder-sdk\";\nimport type { ExtractInputs } from \"~/types.js\";\n\nexport function createComponent<\n    TComponent extends (props: any) => any,\n    TInputs extends ExtractInputs<Parameters<TComponent>[0]>\n>(component: TComponent, manifest: ComponentManifestInput<TInputs>): Component {\n    const inputs: ComponentInput[] = [];\n\n    // Normalize inputs to always be an array of objects.\n\n    if (Array.isArray(manifest.inputs)) {\n        inputs.push(...manifest.inputs);\n    } else {\n        const inputsObject: Record<string, InputFactory<any>> = manifest.inputs ?? {};\n        Object.keys(inputsObject).forEach((name: string) => {\n            inputs.push({ ...inputsObject[name], name });\n        });\n    }\n\n    const acceptsChildren = manifest.acceptsChildren;\n\n    if (acceptsChildren) {\n        const hasChildren = inputs.some(input => input.name === \"children\");\n        if (!hasChildren) {\n            inputs.push(createSlotInput({ name: \"children\" }));\n        }\n    }\n\n    return {\n        component,\n        manifest: { ...manifest, tags: manifest.tags ?? [], inputs } as ComponentManifest\n    };\n}\n"],"names":["createComponent","component","manifest","inputs","Array","inputsObject","Object","name","acceptsChildren","hasChildren","input","createSlotInput"],"mappings":";AAUO,SAASA,gBAGdC,SAAqB,EAAEC,QAAyC;IAC9D,MAAMC,SAA2B,EAAE;IAInC,IAAIC,MAAM,OAAO,CAACF,SAAS,MAAM,GAC7BC,OAAO,IAAI,IAAID,SAAS,MAAM;SAC3B;QACH,MAAMG,eAAkDH,SAAS,MAAM,IAAI,CAAC;QAC5EI,OAAO,IAAI,CAACD,cAAc,OAAO,CAAC,CAACE;YAC/BJ,OAAO,IAAI,CAAC;gBAAE,GAAGE,YAAY,CAACE,KAAK;gBAAEA;YAAK;QAC9C;IACJ;IAEA,MAAMC,kBAAkBN,SAAS,eAAe;IAEhD,IAAIM,iBAAiB;QACjB,MAAMC,cAAcN,OAAO,IAAI,CAACO,CAAAA,QAASA,AAAe,eAAfA,MAAM,IAAI;QACnD,IAAI,CAACD,aACDN,OAAO,IAAI,CAACQ,gBAAgB;YAAE,MAAM;QAAW;IAEvD;IAEA,OAAO;QACHV;QACA,UAAU;YAAE,GAAGC,QAAQ;YAAE,MAAMA,SAAS,IAAI,IAAI,EAAE;YAAEC;QAAO;IAC/D;AACJ"}