@builder.io/sdk-react-nextjs 0.4.5

package/dist/blocks/symbol/symbol.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+import ContentVariants from "../../components/content-variants/content-variants.js";
+import { fetchContent } from "./symbol.helpers.js";
+async function Symbol(props) {
+    const className = function className() {
+        return [
+            ...[props.attributes.className],
+            "builder-symbol",
+            props.symbol?.inline ? "builder-inline-symbol" : undefined,
+            props.symbol?.dynamic || props.dynamic
+                ? "builder-dynamic-symbol"
+                : undefined,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    };
+    const contentToUse = props.symbol?.content ||
+        (await fetchContent({
+            symbol: props.symbol,
+            builderContextValue: props.builderContext,
+        }));
+    return (React.createElement("div", { ...props.attributes, className: className() },
+        React.createElement(ContentVariants, { __isNestedRender: true, apiVersion: props.builderContext.apiVersion, apiKey: props.builderContext.apiKey, context: props.builderContext.context, customComponents: Object.values(props.builderComponents), data: {
+                ...props.symbol?.data,
+                ...props.builderContext.localState,
+                ...contentToUse?.data?.state,
+            }, model: props.symbol?.model, content: contentToUse })));
+}
+export default Symbol;

package/dist/blocks/text/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components.js';
+export declare const componentInfo: ComponentInfo;

package/dist/blocks/text/component-info.js

@@ -0,0 +1,19 @@
+export const componentInfo = {
+    name: 'Text',
+    static: true,
+    isRSC: true,
+    image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929',
+    inputs: [{
+            name: 'text',
+            type: 'html',
+            required: true,
+            autoFocus: true,
+            bubble: true,
+            defaultValue: 'Enter some text...'
+        }],
+    defaultStyles: {
+        lineHeight: 'normal',
+        height: 'auto',
+        textAlign: 'center'
+    }
+};

package/dist/blocks/text/text.d.ts

@@ -0,0 +1,5 @@
+export interface TextProps {
+    text?: string;
+}
+declare function Text(props: TextProps): JSX.Element;
+export default Text;

package/dist/blocks/text/text.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+function Text(props) {
+    return (React.createElement("span", { className: "builder-text", dangerouslySetInnerHTML: { __html: props.text?.toString() || "" }, style: {
+            outline: "none",
+        } }));
+}
+export default Text;

package/dist/blocks/video/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components.js';
+export declare const componentInfo: ComponentInfo;

package/dist/blocks/video/component-info.js

@@ -0,0 +1,82 @@
+export const componentInfo = {
+    name: 'Video',
+    canHaveChildren: true,
+    defaultStyles: {
+        minHeight: '20px',
+        minWidth: '20px'
+    },
+    image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb',
+    inputs: [{
+            name: 'video',
+            type: 'file',
+            allowedFileTypes: ['mp4'],
+            bubble: true,
+            defaultValue: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',
+            required: true
+        }, {
+            name: 'posterImage',
+            type: 'file',
+            allowedFileTypes: ['jpeg', 'png'],
+            helperText: 'Image to show before the video plays'
+        }, {
+            name: 'autoPlay',
+            type: 'boolean',
+            defaultValue: true
+        }, {
+            name: 'controls',
+            type: 'boolean',
+            defaultValue: false
+        }, {
+            name: 'muted',
+            type: 'boolean',
+            defaultValue: true
+        }, {
+            name: 'loop',
+            type: 'boolean',
+            defaultValue: true
+        }, {
+            name: 'playsInline',
+            type: 'boolean',
+            defaultValue: true
+        }, {
+            name: 'fit',
+            type: 'text',
+            defaultValue: 'cover',
+            enum: ['contain', 'cover', 'fill', 'auto']
+        }, {
+            name: 'preload',
+            type: 'text',
+            defaultValue: 'metadata',
+            enum: ['auto', 'metadata', 'none']
+        }, {
+            name: 'fitContent',
+            type: 'boolean',
+            helperText: 'When child blocks are provided, fit to them instead of using the aspect ratio',
+            defaultValue: true,
+            advanced: true
+        }, {
+            name: 'position',
+            type: 'text',
+            defaultValue: 'center',
+            enum: ['center', 'top', 'left', 'right', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']
+        }, {
+            name: 'height',
+            type: 'number',
+            advanced: true
+        }, {
+            name: 'width',
+            type: 'number',
+            advanced: true
+        }, {
+            name: 'aspectRatio',
+            type: 'number',
+            advanced: true,
+            defaultValue: 0.7004048582995948
+        }, {
+            name: 'lazyLoad',
+            type: 'boolean',
+            helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
+            defaultValue: true,
+            advanced: true
+        }]
+};

package/dist/blocks/video/video.d.ts

@@ -0,0 +1,19 @@
+export interface VideoProps {
+    attributes?: any;
+    video?: string;
+    autoPlay?: boolean;
+    controls?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    playsInline?: boolean;
+    aspectRatio?: number;
+    width?: number;
+    height?: number;
+    fit?: "contain" | "cover" | "fill";
+    preload?: "auto" | "metadata" | "none";
+    position?: "center" | "top" | "left" | "right" | "bottom" | "top left" | "top right" | "bottom left" | "bottom right";
+    posterImage?: string;
+    lazyLoad?: boolean;
+}
+declare function Video(props: VideoProps): JSX.Element;
+export default Video;

package/dist/blocks/video/video.js

@@ -0,0 +1,47 @@
+"use client";
+import * as React from "react";
+function Video(props) {
+    function videoProps() {
+        return {
+            ...(props.autoPlay === true
+                ? {
+                    autoPlay: true,
+                }
+                : {}),
+            ...(props.muted === true
+                ? {
+                    muted: true,
+                }
+                : {}),
+            ...(props.controls === true
+                ? {
+                    controls: true,
+                }
+                : {}),
+            ...(props.loop === true
+                ? {
+                    loop: true,
+                }
+                : {}),
+            ...(props.playsInline === true
+                ? {
+                    playsInline: true,
+                }
+                : {}),
+        };
+    }
+    function spreadProps() {
+        return { ...props.attributes, ...videoProps() };
+    }
+    return (React.createElement("video", { ...spreadProps(), preload: props.preload || "metadata", style: {
+            width: "100%",
+            height: "100%",
+            ...props.attributes?.style,
+            objectFit: props.fit,
+            objectPosition: props.position,
+            // Hack to get object fit to work as expected and
+            // not have the video overflow
+            borderRadius: 1,
+        }, src: props.video || "no-src", poster: props.posterImage }));
+}
+export default Video;

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

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

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

@@ -0,0 +1,13 @@
+import type { BuilderContextInterface, RegisteredComponents } from '../../context/types.js';
+import type { BuilderBlock } from '../../types/builder-block.js';
+import type { RepeatData } from './types.js';
+export declare const isEmptyHtmlElement: (tagName: unknown) => boolean;
+export declare const getComponent: ({ block, context, registeredComponents }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+    registeredComponents: RegisteredComponents;
+}) => import("../../context/types.js").RegisteredComponent;
+export declare const getRepeatItemData: ({ block, context }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+}) => RepeatData[] | undefined;

package/dist/components/block/block.helpers.js

@@ -0,0 +1,67 @@
+import { evaluate } from '../../functions/evaluate.js';
+import { getProcessedBlock } from '../../functions/get-processed-block.js';
+/**
+ * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
+ */
+const EMPTY_HTML_ELEMENTS = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+export const isEmptyHtmlElement = (tagName) => {
+    return typeof tagName === 'string' && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
+};
+export const getComponent = ({ block, context, registeredComponents }) => {
+    const componentName = getProcessedBlock({
+        block,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        context: context.context,
+        shouldEvaluateBindings: false
+    }).component?.name;
+    if (!componentName) {
+        return null;
+    }
+    const ref = registeredComponents[componentName];
+    if (!ref) {
+        // TODO: Public doc page with more info about this message
+        console.warn(`
+      Could not find a registered component named "${componentName}". 
+      If you registered it, is the file that registered it imported by the file that needs to render it?`);
+        return undefined;
+    }
+    else {
+        return ref;
+    }
+};
+export const getRepeatItemData = ({ block, context }) => {
+    /**
+     * we don't use `state.processedBlock` here because the processing done within its logic includes evaluating the block's bindings,
+     * which will not work if there is a repeat.
+     */
+    const { repeat, ...blockWithoutRepeat } = block;
+    if (!repeat?.collection) {
+        return undefined;
+    }
+    const itemsArray = evaluate({
+        code: repeat.collection,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        context: context.context
+    });
+    if (!Array.isArray(itemsArray)) {
+        return undefined;
+    }
+    const collectionName = repeat.collection.split('.').pop();
+    const itemNameToUse = repeat.itemName || (collectionName ? collectionName + 'Item' : 'item');
+    const repeatArray = itemsArray.map((item, index) => ({
+        context: { ...context,
+            localState: { ...context.localState,
+                $index: index,
+                $item: item,
+                [itemNameToUse]: item,
+                [`$${itemNameToUse}Index`]: index
+            }
+        },
+        block: blockWithoutRepeat
+    }));
+    return repeatArray;
+};

package/dist/components/block/block.js

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import BlockStyles from "./components/block-styles.js";
+import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./block.helpers.js";
+import RepeatedBlock from "./components/repeated-block.js";
+import ComponentRef from "./components/component-ref/component-ref.js";
+import BlockWrapper from "./components/block-wrapper.js";
+function Block(props) {
+    const blockComponent = function blockComponent() {
+        return getComponent({
+            block: props.block,
+            context: props.context,
+            registeredComponents: props.registeredComponents,
+        });
+    };
+    const repeatItem = function repeatItem() {
+        return getRepeatItemData({
+            block: props.block,
+            context: props.context,
+        });
+    };
+    const processedBlock = function processedBlock() {
+        return repeatItem()
+            ? props.block
+            : getProcessedBlock({
+                block: props.block,
+                localState: props.context.localState,
+                rootState: props.context.rootState,
+                rootSetState: props.context.rootSetState,
+                context: props.context.context,
+                shouldEvaluateBindings: true,
+            });
+    };
+    const Tag = function Tag() {
+        return props.block.tagName || "div";
+    };
+    const canShowBlock = function canShowBlock() {
+        if ("hide" in processedBlock()) {
+            return !processedBlock().hide;
+        }
+        if ("show" in processedBlock()) {
+            return processedBlock().show;
+        }
+        return true;
+    };
+    const childrenWithoutParentComponent = function childrenWithoutParentComponent() {
+        /**
+         * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+         * we render them outside of `componentRef`.
+         * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
+         * blocks, and the children will be repeated within those blocks.
+         */
+        const shouldRenderChildrenOutsideRef = !blockComponent()?.component && !repeatItem();
+        return shouldRenderChildrenOutsideRef
+            ? processedBlock().children ?? []
+            : [];
+    };
+    const componentRefProps = function componentRefProps() {
+        return {
+            blockChildren: processedBlock().children ?? [],
+            componentRef: blockComponent()?.component,
+            componentOptions: {
+                ...getBlockComponentOptions(processedBlock()),
+                builderContext: props.context,
+                ...(blockComponent()?.name === "Symbol" ||
+                    blockComponent()?.name === "Columns"
+                    ? {
+                        builderComponents: props.registeredComponents,
+                    }
+                    : {}),
+            },
+            context: childrenContext,
+            registeredComponents: props.registeredComponents,
+            builderBlock: processedBlock(),
+            includeBlockProps: blockComponent()?.noWrap === true,
+            isInteractive: !blockComponent()?.isRSC,
+        };
+    };
+    const childrenContext = props.context;
+    return (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !blockComponent()?.noWrap ? (React.createElement(React.Fragment, null,
+        isEmptyHtmlElement(Tag()) ? (React.createElement(React.Fragment, null,
+            React.createElement(BlockWrapper, { Wrapper: Tag(), block: processedBlock(), context: props.context, hasChildren: false }))) : null,
+        !isEmptyHtmlElement(Tag()) && repeatItem() ? (React.createElement(React.Fragment, null, repeatItem()?.map((data, index) => (React.createElement(RepeatedBlock, { key: index, repeatContext: data.context, block: data.block, registeredComponents: props.registeredComponents }))))) : null,
+        !isEmptyHtmlElement(Tag()) && !repeatItem() ? (React.createElement(React.Fragment, null,
+            React.createElement(BlockWrapper, { Wrapper: Tag(), block: processedBlock(), context: props.context, hasChildren: true },
+                React.createElement(ComponentRef, { ...componentRefProps() }),
+                childrenWithoutParentComponent()?.map((child) => (React.createElement(Block, { key: "block-" + child.id, block: child, context: childrenContext, registeredComponents: props.registeredComponents }))),
+                childrenWithoutParentComponent()?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: childrenContext })))))) : null)) : (React.createElement(React.Fragment, null,
+        React.createElement(ComponentRef, { ...componentRefProps() }))))) : null));
+}
+export default Block;

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

@@ -0,0 +1,8 @@
+export type BlockStylesProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+};
+import type { BuilderContextInterface } from "../../../context/types.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+declare function BlockStyles(props: BlockStylesProps): JSX.Element;
+export default BlockStyles;

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

@@ -0,0 +1,65 @@
+"use client";
+import * as React from "react";
+import { useState } from "react";
+import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../../constants/device-sizes.js";
+import { TARGET } from "../../../constants/target.js";
+import { getProcessedBlock } from "../../../functions/get-processed-block.js";
+import { createCssClass } from "../../../helpers/css.js";
+import { checkIsDefined } from "../../../helpers/nullable.js";
+import InlinedStyles from "../../inlined-styles.js";
+function BlockStyles(props) {
+    const [processedBlock, setProcessedBlock] = useState(() => getProcessedBlock({
+        block: props.block,
+        localState: props.context.localState,
+        rootState: props.context.rootState,
+        rootSetState: props.context.rootSetState,
+        context: props.context.context,
+        shouldEvaluateBindings: true,
+    }));
+    function canShowBlock() {
+        // only render styles for blocks that are visible
+        if (checkIsDefined(processedBlock.hide)) {
+            return !processedBlock.hide;
+        }
+        if (checkIsDefined(processedBlock.show)) {
+            return processedBlock.show;
+        }
+        return true;
+    }
+    function css() {
+        const styles = processedBlock.responsiveStyles;
+        const content = props.context.content;
+        const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+        const largeStyles = styles?.large;
+        const mediumStyles = styles?.medium;
+        const smallStyles = styles?.small;
+        const className = processedBlock.id;
+        if (!className) {
+            return "";
+        }
+        const largeStylesClass = largeStyles
+            ? createCssClass({
+                className,
+                styles: largeStyles,
+            })
+            : "";
+        const mediumStylesClass = mediumStyles
+            ? createCssClass({
+                className,
+                styles: mediumStyles,
+                mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints),
+            })
+            : "";
+        const smallStylesClass = smallStyles
+            ? createCssClass({
+                className,
+                styles: smallStyles,
+                mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints),
+            })
+            : "";
+        return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
+    }
+    return (React.createElement(React.Fragment, null, TARGET !== "reactNative" && css() && canShowBlock() ? (React.createElement(React.Fragment, null,
+        React.createElement(InlinedStyles, { styles: css() }))) : null));
+}
+export default BlockStyles;

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

@@ -0,0 +1,17 @@
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */
+type BlockWrapperProps = {
+    Wrapper: string;
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+    hasChildren: boolean;
+};
+/**
+ * This component renders a block's wrapper HTML element (from the block's `tagName` property).
+ * It reuses the exact same logic as the `InteractiveElement` component, but we need to have 2 separate components for
+ * Svelte's sake, as it needs to know at compile-time whether to use: *  - `<svelte:element>` (for HTML element) or *  - `<svelte:component>` (for custom components) */ import type { PropsWithChildren } from "../../../types/typescript.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+import type { BuilderContextInterface } from "../../../context/types.js";
+declare function BlockWrapper(props: PropsWithChildren<BlockWrapperProps>): JSX.Element;
+export default BlockWrapper;

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

@@ -0,0 +1,36 @@
+"use client";
+import * as React from "react";
+import { getBlockActions } from "../../../functions/get-block-actions.js";
+import { getBlockProperties } from "../../../functions/get-block-properties.js";
+function BlockWrapper(props) {
+    return (React.createElement(React.Fragment, null,
+        " ",
+        props.hasChildren ? (React.createElement(React.Fragment, null,
+            React.createElement(props.Wrapper, { ...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,
+                    stripPrefix: true,
+                }) },
+                " ",
+                props.children,
+                " "))) : (React.createElement(React.Fragment, null,
+            React.createElement(props.Wrapper, { ...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,
+                    stripPrefix: true,
+                }) }))),
+        " "));
+}
+export default BlockWrapper;

package/dist/components/block/components/component-ref/component-ref.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "./component-ref.helpers.js";
+declare function ComponentRef(props: ComponentProps): JSX.Element;
+export default ComponentRef;

package/dist/components/block/components/component-ref/component-ref.helpers.d.ts

@@ -0,0 +1,28 @@
+import type { BuilderContextInterface, RegisteredComponents } from '../../../../context/types.js';
+import type { BuilderBlock } from '../../../../types/builder-block.js';
+import type { PropsWithBuilderData } from '../../../../types/builder-props.js';
+import type { InteractiveElementProps } from '../interactive-element.js';
+type ComponentOptions = PropsWithBuilderData<{
+    [index: string]: any;
+    attributes?: {
+        [index: string]: any;
+    };
+}>;
+export interface ComponentProps {
+    componentRef: any;
+    componentOptions: ComponentOptions;
+    blockChildren: BuilderBlock[];
+    context: BuilderContextInterface;
+    registeredComponents: RegisteredComponents;
+    builderBlock: BuilderBlock;
+    includeBlockProps: boolean;
+    isInteractive: boolean | undefined;
+}
+export declare const getWrapperProps: ({ componentOptions, builderBlock, context, componentRef, includeBlockProps, isInteractive, contextValue }: Omit<ComponentProps, "registeredComponents" | "blockChildren"> & {
+    contextValue: BuilderContextInterface;
+}) => InteractiveElementProps | {
+    attributes?: any;
+    builderBlock: BuilderBlock;
+    builderContext: BuilderContextInterface;
+};
+export {};

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

@@ -0,0 +1,21 @@
+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,21 @@
+import * as React from "react";
+import BlockStyles from "../block-styles.js";
+import Block from "../../block.js";
+import InteractiveElement from "../interactive-element.js";
+import { getWrapperProps } from "./component-ref.helpers.js";
+function ComponentRef(props) {
+    const Wrapper = 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;