@builder.io/sdk-react 0.4.5 → 0.5.1-0

package/dist/{sdk/blocks → blocks}/text/text.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface TextProps {
     text?: string;
 }

package/dist/{sdk/blocks → blocks}/text/text.js

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

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

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

package/dist/{sdk/blocks → blocks}/textarea/component-info.js

@@ -1,33 +1,27 @@
 export const componentInfo = {
     name: 'Form:TextArea',
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',
-    inputs: [
-        {
+    inputs: [{
             advanced: true,
             name: 'value',
-            type: 'string',
-        },
-        {
+            type: 'string'
+        }, {
             name: 'name',
             type: 'string',
             required: true,
-            helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"',
-        },
-        {
+            helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
+        }, {
             name: 'defaultValue',
-            type: 'string',
-        },
-        {
+            type: 'string'
+        }, {
             name: 'placeholder',
             type: 'string',
-            defaultValue: 'Hello there',
-        },
-        {
+            defaultValue: 'Hello there'
+        }, {
             name: 'required',
             type: 'boolean',
-            defaultValue: false,
-        },
-    ],
+            defaultValue: false
+        }],
     defaultStyles: {
         paddingTop: '10px',
         paddingBottom: '10px',
@@ -36,8 +30,8 @@ export const componentInfo = {
         borderRadius: '3px',
         borderWidth: '1px',
         borderStyle: 'solid',
-        borderColor: '#ccc',
+        borderColor: '#ccc'
     },
     static: true,
-    noWrap: true,
+    noWrap: true
 };

package/dist/{sdk/blocks → blocks}/textarea/textarea.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
-export interface TextareaProps {
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ export interface TextareaProps {
     attributes?: any;
     name?: string;
     value?: string;

package/dist/{sdk/blocks → blocks}/textarea/textarea.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 function Textarea(props) {
     return (React.createElement("textarea", { ...props.attributes, placeholder: props.placeholder, name: props.name, value: props.value, defaultValue: props.defaultValue }));

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/{sdk/blocks → blocks}/video/component-info.js

@@ -3,100 +3,80 @@ export const componentInfo = {
     canHaveChildren: true,
     defaultStyles: {
         minHeight: '20px',
-        minWidth: '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: [
-        {
+    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,
-        },
-        {
+            required: true
+        }, {
             name: 'posterImage',
             type: 'file',
             allowedFileTypes: ['jpeg', 'png'],
-            helperText: 'Image to show before the video plays',
-        },
-        {
+            helperText: 'Image to show before the video plays'
+        }, {
             name: 'autoPlay',
             type: 'boolean',
-            defaultValue: true,
-        },
-        {
+            defaultValue: true
+        }, {
             name: 'controls',
             type: 'boolean',
-            defaultValue: false,
-        },
-        {
+            defaultValue: false
+        }, {
             name: 'muted',
             type: 'boolean',
-            defaultValue: true,
-        },
-        {
+            defaultValue: true
+        }, {
             name: 'loop',
             type: 'boolean',
-            defaultValue: true,
-        },
-        {
+            defaultValue: true
+        }, {
             name: 'playsInline',
             type: 'boolean',
-            defaultValue: true,
-        },
-        {
+            defaultValue: true
+        }, {
             name: 'fit',
             type: 'text',
             defaultValue: 'cover',
-            enum: ['contain', 'cover', 'fill', 'auto'],
-        },
-        {
+            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,
-        },
-        {
+            advanced: true
+        }, {
             name: 'position',
             type: 'text',
             defaultValue: 'center',
-            enum: [
-                'center',
-                'top',
-                'left',
-                'right',
-                'bottom',
-                'top left',
-                'top right',
-                'bottom left',
-                'bottom right',
-            ],
-        },
-        {
+            enum: ['center', 'top', 'left', 'right', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']
+        }, {
             name: 'height',
             type: 'number',
-            advanced: true,
-        },
-        {
+            advanced: true
+        }, {
             name: 'width',
             type: 'number',
-            advanced: true,
-        },
-        {
+            advanced: true
+        }, {
             name: 'aspectRatio',
             type: 'number',
             advanced: true,
-            defaultValue: 0.7004048582995948,
-        },
-        {
+            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,
-        },
-    ],
+            advanced: true
+        }]
 };

package/dist/{sdk/blocks → blocks}/video/video.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface VideoProps {
     attributes?: any;
     video?: string;
@@ -11,6 +10,7 @@ export interface VideoProps {
     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;

package/dist/{sdk/blocks → blocks}/video/video.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 function Video(props) {
     function videoProps() {
@@ -36,7 +36,7 @@ function Video(props) {
             ...videoProps(),
         };
     }
-    return (React.createElement("video", { ...spreadProps(), style: {
+    return (React.createElement("video", { ...spreadProps(), preload: props.preload || "metadata", style: {
             width: "100%",
             height: "100%",
             ...props.attributes?.style,

package/dist/{sdk/components → components}/block/block.d.ts

@@ -1,11 +1,9 @@
-/// <reference types="react" />
 export type BlockProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;
-    components: Dictionary<RegisteredComponent>;
+    registeredComponents: RegisteredComponents;
 };
-import type { BuilderContextInterface, RegisteredComponent } from "../../context/types.js";
+import type { BuilderContextInterface, RegisteredComponents } from "../../context/types.js";
 import type { BuilderBlock } from "../../types/builder-block.js";
-import type { Dictionary } from "../../types/typescript.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/{sdk/components → components}/block/block.helpers.js

@@ -1,42 +1,25 @@
 import { evaluate } from '../../functions/evaluate';
-import { getProcessedBlock } from '../../functions/get-processed-block';
+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',
-];
+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()));
+    return typeof tagName === 'string' && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
 };
-export const getComponent = ({ block, context, }) => {
+export const getComponent = ({ block, context, registeredComponents }) => {
     const componentName = getProcessedBlock({
         block,
         localState: context.localState,
         rootState: context.rootState,
         rootSetState: context.rootSetState,
         context: context.context,
-        shouldEvaluateBindings: false,
+        shouldEvaluateBindings: false
     }).component?.name;
     if (!componentName) {
         return null;
     }
-    const ref = context.registeredComponents[componentName];
+    const ref = registeredComponents[componentName];
     if (!ref) {
         // TODO: Public doc page with more info about this message
         console.warn(`
@@ -48,9 +31,9 @@ export const getComponent = ({ block, context, }) => {
         return ref;
     }
 };
-export const getRepeatItemData = ({ block, context, }) => {
+export const getRepeatItemData = ({ block, context }) => {
     /**
-     * we don't use `state.useBlock` here because the processing done within its logic includes evaluating the block's bindings,
+     * 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;
@@ -62,7 +45,7 @@ export const getRepeatItemData = ({ block, context, }) => {
         localState: context.localState,
         rootState: context.rootState,
         rootSetState: context.rootSetState,
-        context: context.context,
+        context: context.context
     });
     if (!Array.isArray(itemsArray)) {
         return undefined;
@@ -77,10 +60,10 @@ export const getRepeatItemData = ({ block, context, }) => {
                 $index: index,
                 $item: item,
                 [itemNameToUse]: item,
-                [`$${itemNameToUse}Index`]: index,
-            },
+                [`$${itemNameToUse}Index`]: index
+            }
         },
-        block: blockWithoutRepeat,
+        block: blockWithoutRepeat
     }));
     return repeatArray;
 };

package/dist/components/block/block.js

@@ -0,0 +1,94 @@
+"use client";
+import * as React from "react";
+import { useState } 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";
+import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./block.helpers.js";
+import RepeatedBlock from "./components/repeated-block";
+import ComponentRef from "./components/component-ref/component-ref";
+import BlockWrapper from "./components/block-wrapper";
+function Block(props) {
+    function blockComponent() {
+        return getComponent({
+            block: props.block,
+            context: props.context,
+            registeredComponents: props.registeredComponents,
+        });
+    }
+    function repeatItem() {
+        return getRepeatItemData({
+            block: props.block,
+            context: props.context,
+        });
+    }
+    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,
+            });
+    }
+    function Tag() {
+        return props.block.tagName || "div";
+    }
+    function canShowBlock() {
+        if ("hide" in processedBlock()) {
+            return !processedBlock().hide;
+        }
+        if ("show" in processedBlock()) {
+            return processedBlock().show;
+        }
+        return true;
+    }
+    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 ?? []
+            : [];
+    }
+    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, setChildrenContext] = useState(() => 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/{sdk/components → components}/block/components/block-styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type BlockStylesProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;

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

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 import { useState } from "react";
 import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../../constants/device-sizes.js";

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

@@ -0,0 +1,16 @@
+/**
+ * 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';
+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,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;