@builder.io/sdk-react 0.1.3 → 0.1.5

package/dist/rsc/components/render-content/builder-editing.js

@@ -1,5 +1,48 @@
-import * as React from "react";
-export default function BuilderEditing(props) {
-    const _context = { ...props["_context"] };
-    return React.createElement("div", null);
+import React, { useEffect } from 'react';
+import { setupBrowserForEditing } from '../../scripts/init-editing.js';
+// import type { RegisteredComponent } from '../../context/types.js';
+// import type { BuilderContent } from '../../types/builder-content.js';
+/**
+ * @typedef {object} RegisteredComponent
+ * @typedef {object} BuilderContent
+ * @typedef {(data: {data: object, key: string }) => void} OnUpdateCallback
+ * @typedef {{
+ *   model: string,
+ *   components?: RegisteredComponent[],
+ *   children: any,
+ *   onUpdate?: OnUpdateCallback,
+ * }} BuilderEditingProps
+ */
+/**
+ * @param {BuilderEditingProps} props
+ */
+export function BuilderEditingWrapper(props) {
+    useEffect(() => {
+        setupBrowserForEditing();
+        if (props.components) {
+            for (const component of props.components) {
+                window.parent.postMessage({
+                    type: 'builder.registerComponent',
+                    data: component,
+                }, '*');
+            }
+        }
+        /**
+         *
+         * @param {MessageEvent} e
+         */
+        function onMessage(e) {
+            switch (e.data?.type) {
+                case 'builder.contentUpdate': {
+                    props.onUpdate?.(e.data.data);
+                }
+            }
+        }
+        addEventListener('message', onMessage);
+        return () => window.removeEventListener('message', onMessage);
+    }, [props.model]);
+    return (React.createElement("div", { onMouseDown: (e) => e.preventDefault(), onClickCapture: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+        } }, props.children));
 }

package/dist/rsc/components/render-content/components/render-styles.helpers.js

@@ -0,0 +1,51 @@
+const getCssFromFont = (font) => {
+    var _a, _b;
+    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
+    const url = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.regular;
+    let str = "";
+    if (url && family && name) {
+        str += `
+@font-face {
+font-family: "${family}";
+src: local("${name}"), url('${url}') format('woff2');
+font-display: fallback;
+font-weight: 400;
+}
+      `.trim();
+    }
+    if (font.files) {
+        for (const weight in font.files) {
+            const isNumber = String(Number(weight)) === weight;
+            if (!isNumber) {
+                continue;
+            }
+            const weightUrl = font.files[weight];
+            if (weightUrl && weightUrl !== url) {
+                str += `
+@font-face {
+font-family: "${family}";
+src: url('${weightUrl}') format('woff2');
+font-display: fallback;
+font-weight: ${weight};
+}
+        `.trim();
+            }
+        }
+    }
+    return str;
+};
+const getFontCss = ({ customFonts }) => {
+    var _a;
+    return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+};
+const getCss = ({ cssCode, contentId }) => {
+    if (!cssCode) {
+        return "";
+    }
+    if (!contentId) {
+        return cssCode;
+    }
+    return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
+};
+export { getCss, getFontCss };

package/dist/rsc/components/render-content/components/render-styles.js

@@ -1,62 +1,19 @@
 import * as React from "react";
-import RenderInlinedStyles from "../../render-inlined-styles.js";
+import RenderInlinedStyles from "../../render-inlined-styles";
+import { getCss } from "./render-styles.helpers";
+import { getFontCss } from "./render-styles.helpers";
 export default function RenderContentStyles(props) {
     const _context = { ...props["_context"] };
     const state = {
-        getCssFromFont(font) {
-            // TODO: compute what font sizes are used and only load those.......
-            const family = font.family +
-                (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-            const name = family.split(",")[0];
-            const url = font.fileUrl ?? font?.files?.regular;
-            let str = "";
-            if (url && family && name) {
-                str += `
-@font-face {
-  font-family: "${family}";
-  src: local("${name}"), url('${url}') format('woff2');
-  font-display: fallback;
-  font-weight: 400;
-}
-        `.trim();
-            }
-            if (font.files) {
-                for (const weight in font.files) {
-                    const isNumber = String(Number(weight)) === weight;
-                    if (!isNumber) {
-                        continue;
-                    }
-                    // TODO: maybe limit number loaded
-                    const weightUrl = font.files[weight];
-                    if (weightUrl && weightUrl !== url) {
-                        str += `
-@font-face {
-  font-family: "${family}";
-  src: url('${weightUrl}') format('woff2');
-  font-display: fallback;
-  font-weight: ${weight};
-}
-          `.trim();
-                    }
-                }
-            }
-            return str;
-        },
-        getFontCss({ customFonts }) {
-            // TODO: flag for this
-            // if (!this.builder.allowCustomFonts) {
-            //   return '';
-            // }
-            // TODO: separate internal data from external
-            return (customFonts?.map((font) => this.getCssFromFont(font))?.join(" ") || "");
-        },
-        get injectedStyles() {
-            return `
-${props.cssCode || ""}
-${state.getFontCss({
-                customFonts: props.customFonts,
-            })}`;
-        },
+        injectedStyles: `
+${getCss({
+            cssCode: props.cssCode,
+            contentId: props.contentId,
+        })}
+${getFontCss({
+            customFonts: props.customFonts,
+        })}
+`,
     };
     return (React.createElement(RenderInlinedStyles, { styles: state.injectedStyles, _context: _context }));
 }

package/dist/rsc/components/render-content/index.js

@@ -1,2 +1,2 @@
-import { default as default2 } from "./render-content.js";
+import { default as default2 } from "./render-content";
 export { default2 as default };

package/dist/rsc/components/render-content/render-content.helpers.js

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+    for (var prop in b || (b = {}))
+        if (__hasOwnProp.call(b, prop))
+            __defNormalProp(a, prop, b[prop]);
+    if (__getOwnPropSymbols)
+        for (var prop of __getOwnPropSymbols(b)) {
+            if (__propIsEnum.call(b, prop))
+                __defNormalProp(a, prop, b[prop]);
+        }
+    return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const getContextStateInitialValue = ({ content, data, locale }) => {
+    var _a, _b, _c;
+    const defaultValues = {};
+    (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach((input) => {
+        var _a2;
+        if (input.name && input.defaultValue !== void 0 && ((_a2 = content == null ? void 0 : content.data) == null ? void 0 : _a2.state) && content.data.state[input.name] === void 0) {
+            defaultValues[input.name] = input.defaultValue;
+        }
+    });
+    const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? { locale } : {});
+    return __spreadValues(__spreadValues({}, defaultValues), stateToUse);
+};
+const getContentInitialValue = ({ content, data }) => {
+    return !content ? void 0 : __spreadProps(__spreadValues({}, content), {
+        data: __spreadValues(__spreadValues({}, content == null ? void 0 : content.data), data),
+        meta: content == null ? void 0 : content.meta
+    });
+};
+export { getContentInitialValue, getContextStateInitialValue };

package/dist/rsc/components/render-content/render-content.js

@@ -9,55 +9,57 @@ import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
 import { components, createRegisterComponentMessage, } from "../../functions/register-component.js";
 import { _track } from "../../functions/track/index.js";
-import RenderBlocks from "../render-blocks.js";
-import RenderContentStyles from "./components/render-styles.js";
+import RenderBlocks from "../render-blocks";
+import RenderContentStyles from "./components/render-styles";
 import builderContext from "../../context/builder.context.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
 import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
+import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
 export default function RenderContent(props) {
     const _context = { ...props["_context"] };
     const state = {
         forceReRenderCount: 0,
         overrideContent: null,
-        get useContent() {
-            if (!props.content && !state.overrideContent) {
-                return undefined;
-            }
-            return {
-                ...props.content,
-                ...state.overrideContent,
+        useContent: getContentInitialValue({
+            content: props.content,
+            data: props.data,
+        }),
+        mergeNewContent(newContent) {
+            state.useContent = {
+                ...state.useContent,
+                ...newContent,
                 data: {
-                    ...props.content?.data,
-                    ...props.data,
-                    ...state.overrideContent?.data,
+                    ...state.useContent?.data,
+                    ...newContent?.data,
+                },
+                meta: {
+                    ...state.useContent?.meta,
+                    ...newContent?.meta,
+                    breakpoints: newContent?.meta?.breakpoints ||
+                        state.useContent?.meta?.breakpoints,
                 },
+            };
+        },
+        setBreakpoints(breakpoints) {
+            state.useContent = {
+                ...state.useContent,
                 meta: {
-                    ...props.content?.meta,
-                    ...state.overrideContent?.meta,
-                    breakpoints: state.useBreakpoints ||
-                        state.overrideContent?.meta?.breakpoints ||
-                        props.content?.meta?.breakpoints,
+                    ...state.useContent?.meta,
+                    breakpoints,
                 },
             };
         },
         update: 0,
-        useBreakpoints: null,
         canTrackToUse: checkIsDefined(props.canTrack) ? props.canTrack : true,
-        overrideState: {},
-        get contentState() {
-            return {
-                ...props.content?.data?.state,
-                ...props.data,
-                ...(props.locale
-                    ? {
-                        locale: props.locale,
-                    }
-                    : {}),
-                ...state.overrideState,
-            };
+        contentState: getContextStateInitialValue({
+            content: props.content,
+            data: props.data,
+            locale: props.locale,
+        }),
+        setContextState(newState) {
+            state.contentState = newState;
         },
-        contextContext: props.context || {},
         allRegisteredComponents: [
             ...getDefaultRegisteredComponents(),
             // While this `components` object is deprecated, we must maintain support for it.
@@ -81,7 +83,9 @@ export default function RenderContent(props) {
                         if (!contentId || contentId !== state.useContent?.id) {
                             return;
                         }
-                        state.useBreakpoints = breakpoints;
+                        if (breakpoints) {
+                            state.setBreakpoints(breakpoints);
+                        }
                         state.forceReRenderCount = state.forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
                         break;
                     }
@@ -93,7 +97,7 @@ export default function RenderContent(props) {
                             messageContent.modelName;
                         const contentData = messageContent.data;
                         if (key === props.model) {
-                            state.overrideContent = contentData;
+                            state.mergeNewContent(contentData);
                             state.forceReRenderCount = state.forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
                         }
                         break;
@@ -111,7 +115,7 @@ export default function RenderContent(props) {
             if (jsCode) {
                 evaluate({
                     code: jsCode,
-                    context: state.contextContext,
+                    context: props.context || {},
                     state: state.contentState,
                 });
             }
@@ -139,7 +143,7 @@ export default function RenderContent(props) {
         evalExpression(expression) {
             return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
                 code: group,
-                context: state.contextContext,
+                context: props.context || {},
                 state: state.contentState,
             }));
         },
@@ -147,11 +151,11 @@ export default function RenderContent(props) {
             fetch(url)
                 .then((response) => response.json())
                 .then((json) => {
-                const newOverrideState = {
-                    ...state.overrideState,
+                const newState = {
+                    ...state.contentState,
                     [key]: json,
                 };
-                state.overrideState = newOverrideState;
+                state.setContextState(newState);
             })
                 .catch((err) => {
                 console.log("error fetching dynamic data", url, err);
@@ -190,12 +194,13 @@ export default function RenderContent(props) {
     _context.builderContext = {
         content: state.useContent,
         state: state.contentState,
-        context: state.contextContext,
+        setState: state.setContextState,
+        context: props.context || {},
         apiKey: props.apiKey,
         registeredComponents: state.allRegisteredComponents,
     };
     return (React.createElement(React.Fragment, null, state.useContent ? (React.createElement(React.Fragment, null,
         React.createElement("div", { "builder-content-id": state.useContent?.id, "builder-model": props.model },
-            state.shouldRenderContentStyles ? (React.createElement(RenderContentStyles, { cssCode: state.useContent?.data?.cssCode, customFonts: state.useContent?.data?.customFonts, _context: _context })) : null,
+            state.shouldRenderContentStyles ? (React.createElement(RenderContentStyles, { contentId: state.useContent?.id, cssCode: state.useContent?.data?.cssCode, customFonts: state.useContent?.data?.customFonts, _context: _context })) : null,
             React.createElement(RenderBlocks, { blocks: state.useContent?.data?.blocks, key: state.forceReRenderCount, _context: _context })))) : null));
 }

package/dist/rsc/components/render-content/render-content.types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/rsc/components/render-inlined-styles.js

@@ -13,6 +13,6 @@ export default function RenderInlinedStyles(props) {
         },
     };
     const TagRef = state.tag;
-    return (React.createElement(React.Fragment, null, TARGET === "svelte" ? (React.createElement(React.Fragment, null,
-        React.createElement("div", { dangerouslySetInnerHTML: { __html: state.injectedStyleScript } }))) : (React.createElement(TagRef, null, props.styles))));
+    return (React.createElement(React.Fragment, null, TARGET === "svelte" || TARGET === "qwik" ? (React.createElement(React.Fragment, null,
+        React.createElement(TagRef, { dangerouslySetInnerHTML: { __html: props.styles } }))) : (React.createElement(TagRef, null, props.styles))));
 }

package/dist/rsc/constants/builder-registered-components.js

@@ -14,39 +14,39 @@ var __spreadValues = (a, b) => {
         }
     return a;
 };
-import { default as Button } from "../blocks/button/button.js";
+import { default as Button } from "../blocks/button/button";
 import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info.js";
-import { default as Columns } from "../blocks/columns/columns.js";
+import { default as Columns } from "../blocks/columns/columns";
 import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info.js";
 import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info.js";
-import { default as Fragment } from "../blocks/fragment/fragment.js";
+import { default as Fragment } from "../blocks/fragment/fragment";
 import { componentInfo as imageComponentInfo } from "../blocks/image/component-info.js";
-import { default as Image } from "../blocks/image/image.js";
+import { default as Image } from "../blocks/image/image";
 import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info.js";
-import { default as Section } from "../blocks/section/section.js";
+import { default as Section } from "../blocks/section/section";
 import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info.js";
-import { default as Symbol } from "../blocks/symbol/symbol.js";
+import { default as Symbol } from "../blocks/symbol/symbol";
 import { componentInfo as textComponentInfo } from "../blocks/text/component-info.js";
-import { default as Text } from "../blocks/text/text.js";
+import { default as Text } from "../blocks/text/text";
 import { componentInfo as videoComponentInfo } from "../blocks/video/component-info.js";
-import { default as Video } from "../blocks/video/video.js";
+import { default as Video } from "../blocks/video/video";
 import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info.js";
-import { default as embed } from "../blocks/embed/embed.js";
-import { default as Img } from "../blocks/img/img.js";
+import { default as embed } from "../blocks/embed/embed";
+import { default as Img } from "../blocks/img/img";
 import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.js";
-import { default as customCode } from "../blocks/custom-code/custom-code.js";
+import { default as customCode } from "../blocks/custom-code/custom-code";
 import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
 const getDefaultRegisteredComponents = () => [
+    __spreadValues({ component: Button }, buttonComponentInfo),
     __spreadValues({ component: Columns }, columnsComponentInfo),
+    __spreadValues({ component: customCode }, customCodeInfo),
+    __spreadValues({ component: embed }, embedComponentInfo),
+    __spreadValues({ component: Fragment }, fragmentComponentInfo),
     __spreadValues({ component: Image }, imageComponentInfo),
     __spreadValues({ component: Img }, imgComponentInfo),
-    __spreadValues({ component: Text }, textComponentInfo),
-    __spreadValues({ component: Video }, videoComponentInfo),
-    __spreadValues({ component: Symbol }, symbolComponentInfo),
-    __spreadValues({ component: Button }, buttonComponentInfo),
     __spreadValues({ component: Section }, sectionComponentInfo),
-    __spreadValues({ component: Fragment }, fragmentComponentInfo),
-    __spreadValues({ component: embed }, embedComponentInfo),
-    __spreadValues({ component: customCode }, customCodeInfo)
+    __spreadValues({ component: Symbol }, symbolComponentInfo),
+    __spreadValues({ component: Text }, textComponentInfo),
+    __spreadValues({ component: Video }, videoComponentInfo)
 ];
 export { getDefaultRegisteredComponents };

package/dist/rsc/context/builder.context.js

@@ -2,6 +2,8 @@ var stdin_default = {
     content: null,
     context: {},
     state: {},
+    setState() {
+    },
     apiKey: null,
     registeredComponents: {},
     inheritedStyles: {}

package/dist/rsc/index-helpers/blocks-exports.js

@@ -1,11 +1,11 @@
-import { default as default2 } from "../blocks/columns/columns.js";
-import { default as default3 } from "../blocks/image/image.js";
-import { default as default4 } from "../blocks/text/text.js";
-import { default as default5 } from "../blocks/video/video.js";
-import { default as default6 } from "../blocks/symbol/symbol.js";
-import { default as default7 } from "../blocks/button/button.js";
-import { default as default8 } from "../blocks/section/section.js";
-import { default as default9 } from "../blocks/fragment/fragment.js";
-import { default as default10 } from "../components/render-content/render-content.js";
-import { default as default11 } from "../components/render-blocks.js";
-export { default7 as Button, default2 as Columns, default9 as Fragment, default3 as Image, default11 as RenderBlocks, default10 as RenderContent, default8 as Section, default6 as Symbol, default4 as Text, default5 as Video };
+import { default as default2 } from "../blocks/button/button";
+import { default as default3 } from "../blocks/columns/columns";
+import { default as default4 } from "../blocks/fragment/fragment";
+import { default as default5 } from "../blocks/image/image";
+import { default as default6 } from "../components/render-blocks";
+import { default as default7 } from "../components/render-content/render-content";
+import { default as default8 } from "../blocks/section/section";
+import { default as default9 } from "../blocks/symbol/symbol";
+import { default as default10 } from "../blocks/text/text";
+import { default as default11 } from "../blocks/video/video";
+export { default2 as Button, default3 as Columns, default4 as Fragment, default5 as Image, default6 as RenderBlocks, default7 as RenderContent, default8 as Section, default9 as Symbol, default10 as Text, default11 as Video };

package/dist/rsc/types/input.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "main": "src/index.js",
   "type": "module",
   "exports": {

package/packages/react/src/blocks/button/button.jsx

@@ -15,11 +15,11 @@ export default function Button(props) {
           </a>
         </>
       ) : (
-        <button className="button-7028b0a4" {...props.attributes}>
+        <button className="button-66d34b93" {...props.attributes}>
           {props.text}
         </button>
       )}
-      <style>{`.button-7028b0a4 {
+      <style>{`.button-66d34b93 {
 all: unset;
 }`}</style>
     </>

package/packages/react/src/blocks/columns/columns.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import RenderBlocks from "../../components/render-blocks.js";
+import RenderBlocks from "../../components/render-blocks";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles.js";
+import RenderInlinedStyles from "../../components/render-inlined-styles";
 import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
 
@@ -124,7 +124,7 @@ export default function Columns(props) {
       <div
         className={
           `builder-columns ${props.builderBlock.id}-breakpoints` +
-          " div-bda7d4e0"
+          " div-46a0fd84"
         }
         style={{
           ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
@@ -139,7 +139,7 @@ export default function Columns(props) {
 
         {props.columns?.map((column, index) => (
           <div
-            className="builder-column div-bda7d4e0-2"
+            className="builder-column div-46a0fd84-2"
             style={{
               width: getColumnCssWidth(index),
               marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
@@ -159,10 +159,10 @@ export default function Columns(props) {
           </div>
         ))}
       </div>
-      <style>{`.div-bda7d4e0 {
+      <style>{`.div-46a0fd84 {
 display: flex;
 line-height: normal;
-}.div-bda7d4e0-2 {
+}.div-46a0fd84-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/packages/react/src/blocks/form/form.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState, useContext, useRef } from "react";
-import RenderBlock from "../../components/render-block/render-block.js";
-import BuilderBlocks from "../../components/render-blocks.js";
+import RenderBlock from "../../components/render-block/render-block";
+import BuilderBlocks from "../../components/render-blocks";
 import { isEditing } from "../../functions/is-editing.js";
 
 export default function FormComponent(props) {
@@ -232,7 +232,7 @@ export default function FormComponent(props) {
         ) : null}{" "}
         {submissionState() === "error" && responseData ? (
           <>
-            <pre className="builder-form-error-text pre-4bdc7532">
+            <pre className="builder-form-error-text pre-0d1abaf2">
               {" "}
               {JSON.stringify(responseData, null, 2)}{" "}
             </pre>
@@ -247,7 +247,7 @@ export default function FormComponent(props) {
           </>
         ) : null}{" "}
       </form>{" "}
-      <style>{`.pre-4bdc7532 { padding: 10px; color: red; text-align: center; }`}</style>{" "}
+      <style>{`.pre-0d1abaf2 { padding: 10px; color: red; text-align: center; }`}</style>{" "}
     </>
   );
 }

package/packages/react/src/blocks/image/image.jsx

@@ -66,7 +66,7 @@ export default function Image(props) {
             className={
               "builder-image" +
               (props.className ? " " + props.className : "") +
-              " img-72859b6f"
+              " img-54289eda"
             }
             src={props.image}
             srcSet={srcSetToUse()}
@@ -78,7 +78,7 @@ export default function Image(props) {
         !(props.builderBlock?.children?.length && props.fitContent) ? (
           <>
             <div
-              className="builder-image-sizer div-72859b6f"
+              className="builder-image-sizer div-54289eda"
               style={{
                 paddingTop:
                   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -94,18 +94,18 @@ export default function Image(props) {
 
         {!props.fitContent && props.children ? (
           <>
-            <div className="div-72859b6f-2">{props.children}</div>
+            <div className="div-54289eda-2">{props.children}</div>
           </>
         ) : null}
       </>
-      <style>{`.img-72859b6f {
+      <style>{`.img-54289eda {
 opacity: 1;
 transition: opacity 0.2s ease-in-out;
-}.div-72859b6f {
+}.div-54289eda {
 width: 100%;
 pointer-events: none;
 font-size: 0;
-}.div-72859b6f-2 {
+}.div-54289eda-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/packages/react/src/blocks/symbol/symbol.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useState, useContext, useEffect } from "react";
-import RenderContent from "../../components/render-content/render-content.js";
+import RenderContent from "../../components/render-content/render-content";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";

package/packages/react/src/components/render-block/block-styles.jsx

@@ -6,7 +6,7 @@ import {
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
-import RenderInlinedStyles from "../render-inlined-styles.js";
+import RenderInlinedStyles from "../render-inlined-styles";
 
 export default function BlockStyles(props) {
   function useBlock() {