@builder.io/sdk-react 0.4.4 → 0.5.0

package/dist/components/block/components/component-ref/component-ref.helpers.js

@@ -0,0 +1,22 @@
+import { getBlockProperties } from '../../../../functions/get-block-properties.js';
+export const getWrapperProps = ({ componentOptions, builderBlock, context, componentRef, includeBlockProps, isInteractive, contextValue }) => {
+    const interactiveElementProps = {
+        Wrapper: componentRef,
+        block: builderBlock,
+        context,
+        wrapperProps: componentOptions
+    };
+    return isInteractive ? interactiveElementProps : {
+        ...componentOptions,
+        /**
+         * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
+         * component itself directly. Otherwise, they are provided to the wrapper element.
+         */
+        ...(includeBlockProps ? {
+            attributes: getBlockProperties({
+                block: builderBlock,
+                context: contextValue
+            })
+        } : {})
+    };
+};

package/dist/components/block/components/component-ref/component-ref.js

@@ -0,0 +1,23 @@
+"use client";
+import * as React from "react";
+import { useState } from "react";
+import BlockStyles from "../block-styles";
+import Block from "../../block";
+import InteractiveElement from "../interactive-element";
+import { getWrapperProps } from "./component-ref.helpers.js";
+function ComponentRef(props) {
+    const [Wrapper, setWrapper] = useState(() => props.isInteractive ? InteractiveElement : props.componentRef);
+    return (React.createElement(React.Fragment, null, props.componentRef ? (React.createElement(React.Fragment, null,
+        React.createElement(Wrapper, { ...getWrapperProps({
+                componentOptions: props.componentOptions,
+                builderBlock: props.builderBlock,
+                context: props.context,
+                componentRef: props.componentRef,
+                includeBlockProps: props.includeBlockProps,
+                isInteractive: props.isInteractive,
+                contextValue: props.context,
+            }) },
+            props.blockChildren?.map((child) => (React.createElement(Block, { key: "block-" + child.id, block: child, context: props.context, registeredComponents: props.registeredComponents }))),
+            props.blockChildren?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: props.context })))))) : null));
+}
+export default ComponentRef;

package/dist/components/block/components/interactive-element.d.ts

@@ -0,0 +1,11 @@
+export type InteractiveElementProps = {
+    Wrapper: any;
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+    wrapperProps: object;
+};
+import type { BuilderContextInterface } from "../../../context/types.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+import type { PropsWithChildren } from "../../../types/typescript.js";
+declare function InteractiveElement(props: PropsWithChildren<InteractiveElementProps>): JSX.Element;
+export default InteractiveElement;

package/dist/components/block/components/interactive-element.js

@@ -0,0 +1,20 @@
+"use client";
+import * as React from "react";
+import { getBlockActions } from "../../../functions/get-block-actions.js";
+import { getBlockProperties } from "../../../functions/get-block-properties.js";
+function InteractiveElement(props) {
+    return (React.createElement(props.Wrapper, { ...props.wrapperProps, attributes: {
+            ...getBlockProperties({
+                block: props.block,
+                context: props.context,
+            }),
+            ...getBlockActions({
+                block: props.block,
+                rootState: props.context.rootState,
+                rootSetState: props.context.rootSetState,
+                localState: props.context.localState,
+                context: props.context.context,
+            }),
+        } }, props.children));
+}
+export default InteractiveElement;

package/dist/components/block/components/repeated-block.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    block: BuilderBlock;
+    repeatContext: BuilderContextInterface;
+    registeredComponents: RegisteredComponents;
+};
+import type { BuilderContextInterface, RegisteredComponents } from "../../../context/types.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+declare function RepeatedBlock(props: Props): JSX.Element;
+export default RepeatedBlock;

package/dist/components/block/components/repeated-block.js

@@ -0,0 +1,11 @@
+"use client";
+import * as React from "react";
+import { useState } from "react";
+import BuilderContext from "../../../context/builder.context";
+import Block from "../block";
+function RepeatedBlock(props) {
+    const [store, setStore] = useState(() => props.repeatContext);
+    return (React.createElement(BuilderContext.Provider, { value: store },
+        React.createElement(Block, { block: props.block, context: store, registeredComponents: props.registeredComponents })));
+}
+export default RepeatedBlock;

package/dist/components/blocks/blocks-wrapper.d.ts

@@ -0,0 +1,10 @@
+export type BlocksWrapperProps = {
+    blocks: BuilderBlock[] | undefined;
+    parent: string | undefined;
+    path: string | undefined;
+    styleProp: Record<string, any> | undefined;
+};
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { PropsWithChildren } from "../../types/typescript.js";
+declare function BlocksWrapper(props: PropsWithChildren<BlocksWrapperProps>): JSX.Element;
+export default BlocksWrapper;

package/dist/{sdk/components/render-blocks.js → components/blocks/blocks-wrapper.js}

@@ -1,11 +1,7 @@
-'use client';
+"use client";
 import * as React from "react";
-import { useContext } from "react";
-import BuilderContext from "../context/builder.context.js";
-import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles";
-import RenderBlock from "./render-block/render-block";
-function RenderBlocks(props) {
+import { isEditing } from "../../functions/is-editing.js";
+function BlocksWrapper(props) {
     function className() {
         return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
     }
@@ -31,15 +27,12 @@ function RenderBlocks(props) {
             }, "*");
         }
     }
-    const builderContext = useContext(BuilderContext);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: className() + " div-6dd9939e", "builder-path": props.path, "builder-parent-id": props.parent, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter(), onKeyPress: (event) => onClick() },
-            props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(RenderBlock, { key: "render-block-" + block.id, block: block, context: builderContext }))))) : null,
-            props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: builderContext }))))) : null),
-        React.createElement("style", null, `.div-6dd9939e {
+        React.createElement("div", { className: className() + " div-b2473120", "builder-path": props.path, "builder-parent-id": props.parent, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter(), onKeyPress: (event) => onClick() }, props.children),
+        React.createElement("style", null, `.div-b2473120 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }`)));
 }
-export default RenderBlocks;
+export default BlocksWrapper;

package/dist/components/blocks/blocks.d.ts

@@ -0,0 +1,8 @@
+export type BlocksProps = Partial<BlocksWrapperProps> & {
+    context: BuilderContextInterface;
+    registeredComponents: RegisteredComponents;
+};
+import type { BlocksWrapperProps } from "./blocks-wrapper";
+import type { BuilderContextInterface, RegisteredComponents } from "../../context/types.js";
+declare function Blocks(props: BlocksProps): JSX.Element;
+export default Blocks;

package/dist/components/blocks/blocks.js

@@ -0,0 +1,11 @@
+"use client";
+import * as React from "react";
+import BlockStyles from "../block/components/block-styles";
+import Block from "../block/block";
+import BlocksWrapper from "./blocks-wrapper";
+function Blocks(props) {
+    return (React.createElement(BlocksWrapper, { blocks: props.blocks, parent: props.parent, path: props.path, styleProp: props.styleProp },
+        props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(Block, { key: "render-block-" + block.id, block: block, context: props.context, registeredComponents: props.registeredComponents }))))) : null,
+        props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: props.context }))))) : null));
+}
+export default Blocks;

package/dist/components/content/components/enable-editor.d.ts

@@ -0,0 +1,9 @@
+type BuilderEditorProps = Omit<ContentProps, "customComponents" | "data" | "apiVersion" | "isSsrAbTest"> & {
+    builderContextSignal: BuilderContextInterface;
+    setBuilderContextSignal?: (signal: any) => any;
+    children?: any;
+};
+import type { BuilderContextInterface } from "../../../context/types.js";
+import type { ContentProps } from "../content.types.js";
+declare function EnableEditor(props: BuilderEditorProps): JSX.Element;
+export default EnableEditor;

package/dist/{sdk/components/render-content/render-content.js → components/content/components/enable-editor.js}

@@ -1,69 +1,45 @@
-'use client';
+"use client";
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
-import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
-import { evaluate } from "../../functions/evaluate.js";
-import { getContent } from "../../functions/get-content/index.js";
-import { fetch } from "../../functions/get-fetch.js";
-import { isBrowser } from "../../functions/is-browser.js";
-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";
-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";
-import { TARGET } from "../../constants/target.js";
-import { logger } from "../../helpers/logger.js";
-import { getRenderContentScriptString } from "../render-content-variants/helpers.js";
-import { wrapComponentRef } from "./wrap-component-ref.js";
-function RenderContent(props) {
+import { evaluate } from "../../../functions/evaluate";
+import { fetch } from "../../../functions/get-fetch.js";
+import { isBrowser } from "../../../functions/is-browser.js";
+import { isEditing } from "../../../functions/is-editing.js";
+import { createRegisterComponentMessage } from "../../../functions/register-component.js";
+import { _track } from "../../../functions/track/index.js";
+import builderContext from "../../../context/builder.context";
+import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing.js";
+import { checkIsDefined } from "../../../helpers/nullable.js";
+import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction.js";
+import { logger } from "../../../helpers/logger.js";
+import { getContent } from "../../../functions/get-content/index.js";
+import { isPreviewing } from "../../../functions/is-previewing.js";
+function EnableEditor(props) {
     const elementRef = useRef(null);
+    const [canTrackToUse, setCanTrackToUse] = useState(() => checkIsDefined(props.canTrack) ? props.canTrack : true);
     const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
-    const [overrideContent, setOverrideContent] = useState(() => null);
     function mergeNewContent(newContent) {
-        setBuilderContextSignal((PREVIOUS_VALUE) => ({
-            ...PREVIOUS_VALUE,
-            content: {
-                ...builderContextSignal.content,
-                ...newContent,
-                data: {
-                    ...builderContextSignal.content?.data,
-                    ...newContent?.data,
-                },
-                meta: {
-                    ...builderContextSignal.content?.meta,
-                    ...newContent?.meta,
-                    breakpoints: newContent?.meta?.breakpoints ||
-                        builderContextSignal.content?.meta?.breakpoints,
-                },
+        const newContentValue = {
+            ...props.builderContextSignal.content,
+            ...newContent,
+            data: {
+                ...props.builderContextSignal.content?.data,
+                ...newContent?.data,
             },
-        }));
-    }
-    function setBreakpoints(breakpoints) {
-        setBuilderContextSignal((PREVIOUS_VALUE) => ({
-            ...PREVIOUS_VALUE,
-            content: {
-                ...builderContextSignal.content,
-                meta: {
-                    ...builderContextSignal.content?.meta,
-                    breakpoints,
-                },
+            meta: {
+                ...props.builderContextSignal.content?.meta,
+                ...newContent?.meta,
+                breakpoints: newContent?.meta?.breakpoints ||
+                    props.builderContextSignal.content?.meta?.breakpoints,
             },
-        }));
-    }
-    const [update, setUpdate] = useState(() => 0);
-    const [canTrackToUse, setCanTrackToUse] = useState(() => checkIsDefined(props.canTrack) ? props.canTrack : true);
-    function contentSetState(newRootState) {
-        setBuilderContextSignal((PREVIOUS_VALUE) => ({
+        };
+        props.setBuilderContextSignal((PREVIOUS_VALUE) => ({
             ...PREVIOUS_VALUE,
-            rootState: newRootState,
+            content: newContentValue,
         }));
     }
+    const [lastUpdated, setLastUpdated] = useState(() => 0);
+    const [shouldSendResetCookie, setShouldSendResetCookie] = useState(() => false);
     function processMessage(event) {
         const { data } = event;
         if (data) {
@@ -71,11 +47,16 @@ function RenderContent(props) {
                 case "builder.configureSdk": {
                     const messageContent = data.data;
                     const { breakpoints, contentId } = messageContent;
-                    if (!contentId || contentId !== builderContextSignal.content?.id) {
+                    if (!contentId ||
+                        contentId !== props.builderContextSignal.content?.id) {
                         return;
                     }
                     if (breakpoints) {
-                        setBreakpoints(breakpoints);
+                        mergeNewContent({
+                            meta: {
+                                breakpoints,
+                            },
+                        });
                     }
                     setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
                     break;
@@ -93,32 +74,28 @@ function RenderContent(props) {
                     }
                     break;
                 }
-                case "builder.patchUpdates": {
-                    // TODO
-                    break;
-                }
             }
         }
     }
     function evaluateJsCode() {
         // run any dynamic JS code attached to content
-        const jsCode = builderContextSignal.content?.data?.jsCode;
+        const jsCode = props.builderContextSignal.content?.data?.jsCode;
         if (jsCode) {
             evaluate({
                 code: jsCode,
                 context: props.context || {},
                 localState: undefined,
-                rootState: builderContextSignal.rootState,
-                rootSetState: contentSetState,
+                rootState: props.builderContextSignal.rootState,
+                rootSetState: props.builderContextSignal.rootSetState,
             });
         }
     }
     const [httpReqsData, setHttpReqsData] = useState(() => ({}));
     const [clicked, setClicked] = useState(() => false);
     function onClick(event) {
-        if (builderContextSignal.content) {
-            const variationId = builderContextSignal.content?.testVariationId;
-            const contentId = builderContextSignal.content?.id;
+        if (props.builderContextSignal.content) {
+            const variationId = props.builderContextSignal.content?.testVariationId;
+            const contentId = props.builderContextSignal.content?.id;
             _track({
                 type: "click",
                 canTrack: canTrackToUse,
@@ -138,8 +115,8 @@ function RenderContent(props) {
             code: group,
             context: props.context || {},
             localState: undefined,
-            rootState: builderContextSignal.rootState,
-            rootSetState: contentSetState,
+            rootState: props.builderContextSignal.rootState,
+            rootSetState: props.builderContextSignal.rootSetState,
         }));
     }
     function handleRequest({ url, key }) {
@@ -147,17 +124,18 @@ function RenderContent(props) {
             .then((response) => response.json())
             .then((json) => {
             const newState = {
-                ...builderContextSignal.rootState,
+                ...props.builderContextSignal.rootState,
                 [key]: json,
             };
-            contentSetState(newState);
+            props.builderContextSignal.rootSetState?.(newState);
+            httpReqsData[key] = true;
         })
             .catch((err) => {
             console.error("error fetching dynamic data", url, err);
         });
     }
     function runHttpRequests() {
-        const requests = builderContextSignal.content?.data?.httpRequests ?? {};
+        const requests = props.builderContextSignal.content?.data?.httpRequests ?? {};
         Object.entries(requests).forEach(([key, url]) => {
             if (url && (!httpReqsData[key] || isEditing())) {
                 const evaluatedUrl = evalExpression(url);
@@ -172,7 +150,7 @@ function RenderContent(props) {
         if (isEditing()) {
             window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
                 detail: {
-                    state: builderContextSignal.rootState,
+                    state: props.builderContextSignal.rootState,
                     ref: {
                         name: props.model,
                     },
@@ -180,44 +158,6 @@ function RenderContent(props) {
             }));
         }
     }
-    const [scriptStr, setScriptStr] = useState(() => getRenderContentScriptString({
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-        contentId: props.content?.id,
-        parentContentId: props.parentContentId,
-    }));
-    const [builderContextSignal, setBuilderContextSignal] = useState(() => ({
-        content: getContentInitialValue({
-            content: props.content,
-            data: props.data,
-        }),
-        localState: undefined,
-        rootState: getContextStateInitialValue({
-            content: props.content,
-            data: props.data,
-            locale: props.locale,
-        }),
-        rootSetState: contentSetState,
-        context: props.context || {},
-        apiKey: props.apiKey,
-        apiVersion: props.apiVersion,
-        registeredComponents: [
-            ...getDefaultRegisteredComponents(),
-            // While this `components` object is deprecated, we must maintain support for it.
-            // Since users are able to override our default components, we need to make sure that we do not break such
-            // existing usage.
-            // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
-            // which is the new standard way of providing custom components, and must therefore take precedence.
-            ...components,
-            ...(props.customComponents || []),
-        ].reduce((acc, { component, ...curr }) => ({
-            ...acc,
-            [curr.name]: {
-                component: TARGET === "vue3" ? wrapComponentRef(component) : component,
-                ...curr,
-            },
-        }), {}),
-        inheritedStyles: {},
-    }));
     useEffect(() => {
         if (!props.apiKey) {
             logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
@@ -225,6 +165,7 @@ function RenderContent(props) {
         if (isBrowser()) {
             if (isEditing()) {
                 setForceReRenderCount(forceReRenderCount + 1);
+                window.addEventListener("message", processMessage);
                 registerInsertMenu();
                 setupBrowserForEditing({
                     ...(props.locale
@@ -243,16 +184,15 @@ function RenderContent(props) {
                         }
                         : {}),
                 });
-                Object.values(builderContextSignal.registeredComponents).forEach((registeredComponent) => {
+                Object.values(props.builderContextSignal.componentInfos).forEach((registeredComponent) => {
                     const message = createRegisterComponentMessage(registeredComponent);
                     window.parent?.postMessage(message, "*");
                 });
-                window.addEventListener("message", processMessage);
                 window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
             }
-            if (builderContextSignal.content) {
-                const variationId = builderContextSignal.content?.testVariationId;
-                const contentId = builderContextSignal.content?.id;
+            if (props.builderContextSignal.content) {
+                const variationId = props.builderContextSignal.content?.testVariationId;
+                const contentId = props.builderContextSignal.content?.id;
                 _track({
                     type: "impression",
                     canTrack: canTrackToUse,
@@ -280,7 +220,7 @@ function RenderContent(props) {
                     getContent({
                         model: props.model,
                         apiKey: props.apiKey,
-                        apiVersion: props.apiVersion,
+                        apiVersion: props.builderContextSignal.apiVersion,
                     }).then((content) => {
                         if (content) {
                             mergeNewContent(content);
@@ -298,18 +238,19 @@ function RenderContent(props) {
             mergeNewContent(props.content);
         }
     }, [props.content]);
+    useEffect(() => { }, [shouldSendResetCookie]);
     useEffect(() => {
         evaluateJsCode();
     }, [
-        builderContextSignal.content?.data?.jsCode,
-        builderContextSignal.rootState,
+        props.builderContextSignal.content?.data?.jsCode,
+        props.builderContextSignal.rootState,
     ]);
     useEffect(() => {
         runHttpRequests();
-    }, [builderContextSignal.content?.data?.httpRequests]);
+    }, [props.builderContextSignal.content?.data?.httpRequests]);
     useEffect(() => {
         emitStateUpdate();
-    }, [builderContextSignal.rootState]);
+    }, [props.builderContextSignal.rootState]);
     useEffect(() => {
         return () => {
             if (isBrowser()) {
@@ -318,24 +259,12 @@ function RenderContent(props) {
             }
         };
     }, []);
-    return (React.createElement(builderContext.Provider, { value: builderContextSignal }, builderContextSignal.content ? (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": builderContextSignal.content?.id, "builder-model": props.model, ...(TARGET === "reactNative"
-                ? {
-                    dataSet: {
-                        // currently, we can't set the actual ID here. // we don't need it right now, we just need to identify content divs for testing.
-                        "builder-content-id": "",
-                    },
-                }
-                : {}), ...(props.hideContent
-                ? {
+    return (React.createElement(builderContext.Provider, { value: props.builderContextSignal }, props.builderContextSignal.content ? (React.createElement(React.Fragment, null,
+        React.createElement("div", { key: forceReRenderCount, ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": props.builderContextSignal.content?.id, "builder-model": props.model, ...(props.showContent
+                ? {}
+                : {
                     hidden: true,
                     "aria-hidden": true,
-                }
-                : {}), className: props.classNameProp },
-            props.isSsrAbTest ? (React.createElement(React.Fragment, null,
-                React.createElement("script", { dangerouslySetInnerHTML: { __html: scriptStr } }))) : null,
-            TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
-                React.createElement(RenderContentStyles, { contentId: builderContextSignal.content?.id, cssCode: builderContextSignal.content?.data?.cssCode, customFonts: builderContextSignal.content?.data?.customFonts }))) : null,
-            React.createElement(RenderBlocks, { blocks: builderContextSignal.content?.data?.blocks, key: forceReRenderCount })))) : null));
+                }), className: props.classNameProp }, props.children))) : null));
 }
-export default RenderContent;
+export default EnableEditor;

package/dist/components/content/components/styles.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    cssCode?: string;
+    customFonts?: CustomFont[];
+    contentId?: string;
+}
+import type { CustomFont } from "./styles.helpers.js";
+declare function ContentStyles(props: Props): JSX.Element;
+export default ContentStyles;

package/dist/{sdk/components/render-content/components/render-styles.helpers.d.ts → components/content/components/styles.helpers.d.ts}

@@ -9,7 +9,7 @@ export interface CustomFont {
 export declare const getFontCss: ({ customFonts }: {
     customFonts?: CustomFont[];
 }) => string;
-export declare const getCss: ({ cssCode, contentId, }: {
+export declare const getCss: ({ cssCode, contentId }: {
     cssCode?: string;
     contentId?: string;
 }) => string;

package/dist/{sdk/components/render-content/components/render-styles.helpers.js → components/content/components/styles.helpers.js}

@@ -1,7 +1,6 @@
 const 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 family = font.family + (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
     const name = family.split(',')[0];
     const url = font.fileUrl ?? font?.files?.regular;
     let str = '';
@@ -43,9 +42,9 @@ export const getFontCss = ({ customFonts }) => {
     //   return '';
     // }
     // TODO: separate internal data from external
-    return customFonts?.map((font) => getCssFromFont(font))?.join(' ') || '';
+    return customFonts?.map(font => getCssFromFont(font))?.join(' ') || '';
 };
-export const getCss = ({ cssCode, contentId, }) => {
+export const getCss = ({ cssCode, contentId }) => {
     if (!cssCode) {
         return '';
     }

package/dist/{sdk/components/render-content/components/render-styles.js → components/content/components/styles.js}

@@ -1,10 +1,10 @@
-'use client';
+"use client";
 import * as React from "react";
 import { useState } from "react";
-import RenderInlinedStyles from "../../render-inlined-styles";
-import { getCss } from "./render-styles.helpers";
-import { getFontCss } from "./render-styles.helpers";
-function RenderContentStyles(props) {
+import InlinedStyles from "../../inlined-styles";
+import { getCss } from "./styles.helpers.js";
+import { getFontCss } from "./styles.helpers.js";
+function ContentStyles(props) {
     const [injectedStyles, setInjectedStyles] = useState(() => `
 ${getCss({
         cssCode: props.cssCode,
@@ -27,6 +27,6 @@ ${getFontCss({
   font-family: inherit;
 }
 `.trim());
-    return React.createElement(RenderInlinedStyles, { styles: injectedStyles });
+    return React.createElement(InlinedStyles, { styles: injectedStyles });
 }
-export default RenderContentStyles;
+export default ContentStyles;

package/dist/components/content/content.d.ts

@@ -0,0 +1,3 @@
+import type { ContentProps } from "./content.types.js";
+declare function ContentComponent(props: ContentProps): JSX.Element;
+export default ContentComponent;

package/dist/components/content/content.helpers.d.ts

@@ -0,0 +1,7 @@
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { Nullable } from '../../types/typescript.js';
+import type { ContentProps } from './content.types.js';
+export declare const getContextStateInitialValue: ({ content, data, locale }: Pick<ContentProps, 'content' | 'data' | 'locale'>) => {
+    [x: string]: unknown;
+};
+export declare const getContentInitialValue: ({ content, data }: Pick<ContentProps, 'content' | 'data'>) => Nullable<BuilderContent>;

package/dist/components/content/content.helpers.js

@@ -0,0 +1,30 @@
+export const getContextStateInitialValue = ({ content, data, locale }) => {
+    const defaultValues = {};
+    // set default values for content state inputs
+    content?.data?.inputs?.forEach(input => {
+        if (input.name && input.defaultValue !== undefined && content?.data?.state && content.data.state[input.name] === undefined) {
+            defaultValues[input.name] = input.defaultValue;
+        }
+    });
+    const stateToUse = {
+        ...content?.data?.state,
+        ...data,
+        ...(locale ? {
+            locale
+        } : {})
+    };
+    return {
+        ...defaultValues,
+        ...stateToUse
+    };
+};
+export const getContentInitialValue = ({ content, data }) => {
+    return !content ? undefined : {
+        ...content,
+        data: {
+            ...content?.data,
+            ...data
+        },
+        meta: content?.meta
+    };
+};