@builder.io/sdk-solid 1.0.33 → 1.0.36

package/lib/node/dev.jsx

@@ -10,7 +10,7 @@ var isEmptyElement = (tagName) => {
 
 // src/components/dynamic-renderer/dynamic-renderer.tsx
 function DynamicRenderer(props) {
-  return <Show
+  return <><Show
     fallback={<Dynamic
       {...props.attributes}
       {...props.actionAttributes}
@@ -28,7 +28,7 @@ function DynamicRenderer(props) {
     {...props.attributes}
     {...props.actionAttributes}
     component={props.TagName}
-  >{props.children}</Dynamic></Show></Show>;
+  >{props.children}</Dynamic></Show></Show></>;
 }
 var Dynamic_renderer_default = DynamicRenderer;
 
@@ -66,17 +66,16 @@ function Button(props) {
       }
     };
   }
-  return <Dynamic_renderer_default
+  return <><Dynamic_renderer_default
     attributes={attrs()}
     TagName={props.link ? props.builderLinkComponent || "a" : "button"}
     actionAttributes={{}}
-  >{props.text}</Dynamic_renderer_default>;
+  >{props.text}</Dynamic_renderer_default></>;
 }
 var button_default = Button;
 
 // src/blocks/columns/columns.tsx
 import { Show as Show6, For as For4, createSignal as createSignal7 } from "solid-js";
-import { css as css2 } from "solid-styled-components";
 
 // src/components/blocks/blocks.tsx
 import { useContext, Show as Show5, For as For3 } from "solid-js";
@@ -292,6 +291,19 @@ function flattenState({
   });
 }
 
+// src/constants/sdk-name.ts
+var SDK_NAME_FOR_TARGET = (() => {
+  switch (TARGET) {
+    case "rsc":
+      return "react-nextjs";
+    case "reactNative":
+      return "react-native";
+    default:
+      return TARGET;
+  }
+})();
+var SDK_NAME = `@builder.io/sdk-${SDK_NAME_FOR_TARGET}`;
+
 // src/functions/fast-clone.ts
 var fastClone = (obj) => JSON.parse(JSON.stringify(obj));
 
@@ -373,6 +385,7 @@ if (typeof output === 'object' && output !== null) {
 };
 var IVM_INSTANCE = null;
 var IVM_CONTEXT = null;
+var SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === "@builder.io/sdk-react-nextjs" || SDK_NAME === "@builder.io/sdk-react";
 var getIvm = () => {
   try {
     if (IVM_INSTANCE)
@@ -383,14 +396,15 @@ var getIvm = () => {
   } catch (error2) {
     logger.error("isolated-vm import error.", error2);
   }
-  throw new Error(`${MSG_PREFIX}could not import \`isolated-vm\` module for safe script execution on Node server.
+  const ERROR_MESSAGE = `${MSG_PREFIX}could not import \`isolated-vm\` module for safe script execution on a Node server.
     
-    In certain Node environments, the SDK requires additional initialization steps. This can be achieved by 
-    importing and calling \`initializeNodeRuntime()\` from "@builder.io/sdk-react/node/init". This must be done in
-    a server-only execution path within your application.
+    SOLUTION: In a server-only execution path within your application, do one of the following:
+  
+    ${SHOULD_MENTION_INITIALIZE_SCRIPT ? '- import and call `initializeNodeRuntime()` from "${SDK_NAME}/node/init".' : ""}
+    - add the following import: \`await import('isolated-vm')\`.
 
-    Please see the documentation for more information: https://builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments
-    `);
+    For more information, visit https://builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments`;
+  throw new Error(ERROR_MESSAGE);
 };
 function setIsolateContext(options = {
   memoryLimit: 128
@@ -1004,7 +1018,7 @@ var getSizesForBreakpoints = ({
 
 // src/components/inlined-styles.tsx
 function InlinedStyles(props) {
-  return <style innerHTML={props.styles} data-id={props.id} />;
+  return <><style innerHTML={props.styles} data-id={props.id} /></>;
 }
 var Inlined_styles_default = InlinedStyles;
 
@@ -1027,7 +1041,7 @@ function BlockStyles(props) {
     }
     return true;
   });
-  const css5 = createMemo(() => {
+  const css = createMemo(() => {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -1090,7 +1104,7 @@ function BlockStyles(props) {
       hoverStylesClass
     ].join(" ");
   });
-  return <Show2 when={TARGET !== "reactNative" && css5() && canShowBlock()}><Inlined_styles_default id="builderio-block" styles={css5()} /></Show2>;
+  return <><Show2 when={TARGET !== "reactNative" && css() && canShowBlock()}><Inlined_styles_default id="builderio-block" styles={css()} /></Show2></>;
 }
 var Block_styles_default = BlockStyles;
 
@@ -1173,7 +1187,7 @@ function getBlockProperties({
 
 // src/components/block/components/block-wrapper.tsx
 function BlockWrapper(props) {
-  return <Dynamic_renderer_default
+  return <><Dynamic_renderer_default
     TagName={props.Wrapper}
     attributes={getBlockProperties({
       block: props.block,
@@ -1187,7 +1201,7 @@ function BlockWrapper(props) {
       context: props.context.context,
       stripPrefix: true
     })}
-  >{props.children}</Dynamic_renderer_default>;
+  >{props.children}</Dynamic_renderer_default></>;
 }
 var Block_wrapper_default = BlockWrapper;
 
@@ -1214,11 +1228,11 @@ function InteractiveElement(props) {
       })
     } : {};
   });
-  return <Dynamic2
+  return <><Dynamic2
     {...props.wrapperProps}
     attributes={attributes()}
     component={props.Wrapper}
-  >{props.children}</Dynamic2>;
+  >{props.children}</Dynamic2></>;
 }
 var interactive_element_default = InteractiveElement;
 
@@ -1260,7 +1274,7 @@ function ComponentRef(props) {
   const [Wrapper, setWrapper] = createSignal3(
     props.isInteractive ? interactive_element_default : props.componentRef
   );
-  return <Show3 when={props.componentRef}><Dynamic3
+  return <><Show3 when={props.componentRef}><Dynamic3
     {...getWrapperProps({
       componentOptions: props.componentOptions,
       builderBlock: props.builderBlock,
@@ -1281,7 +1295,7 @@ function ComponentRef(props) {
       registeredComponents={props.registeredComponents}
       linkComponent={props.linkComponent}
     />;
-  }}</For></Dynamic3></Show3>;
+  }}</For></Dynamic3></Show3></>;
 }
 var Component_ref_default = ComponentRef;
 
@@ -1289,12 +1303,12 @@ var Component_ref_default = ComponentRef;
 import { createSignal as createSignal4 } from "solid-js";
 function RepeatedBlock(props) {
   const [store, setStore] = createSignal4(props.repeatContext);
-  return <builder_context_default.Provider value={store()}><Block_default
+  return <><builder_context_default.Provider value={store()}><Block_default
     block={props.block}
     context={store()}
     registeredComponents={props.registeredComponents}
     linkComponent={props.linkComponent}
-  /></builder_context_default.Provider>;
+  /></builder_context_default.Provider></>;
 }
 var Repeated_block_default = RepeatedBlock;
 
@@ -1378,7 +1392,7 @@ function Block(props) {
       );
     }
   });
-  return <Show4 when={canShowBlock()}>
+  return <><Show4 when={canShowBlock()}>
     <Block_styles_default block={props.block} context={props.context} />
     <Show4
       fallback={<Component_ref_default
@@ -1432,14 +1446,13 @@ function Block(props) {
         />;
       }}</For2>
     </Block_wrapper_default></Show4></Show4>
-  </Show4>;
+  </Show4></>;
 }
 var Block_default = Block;
 
 // src/components/blocks/blocks-wrapper.tsx
 import { createMemo as createMemo6 } from "solid-js";
 import { Dynamic as Dynamic4 } from "solid-js/web";
-import { css } from "solid-styled-components";
 function BlocksWrapper(props) {
   const className = createMemo6(() => {
     return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
@@ -1472,22 +1485,25 @@ function BlocksWrapper(props) {
       );
     }
   }
-  return <Dynamic4
-    class={className() + " " + css({
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch"
-    })}
-    builder-path={props.path}
-    builder-parent-id={props.parent}
-    {...{}}
-    style={props.styleProp}
-    onClick={(event) => onClick()}
-    onMouseEnter={(event) => onMouseEnter()}
-    onKeyPress={(event) => onClick()}
-    {...props.BlocksWrapperProps}
-    component={props.BlocksWrapper}
-  >{props.children}</Dynamic4>;
+  return <>
+    <Dynamic4
+      class={className() + " dynamic-1bb6a3a2"}
+      builder-path={props.path}
+      builder-parent-id={props.parent}
+      {...{}}
+      style={props.styleProp}
+      onClick={(event) => onClick()}
+      onMouseEnter={(event) => onMouseEnter()}
+      onKeyPress={(event) => onClick()}
+      {...props.BlocksWrapperProps}
+      component={props.BlocksWrapper}
+    >{props.children}</Dynamic4>
+    <style>{`.dynamic-1bb6a3a2 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}`}</style>
+  </>;
 }
 var Blocks_wrapper_default = BlocksWrapper;
 
@@ -1495,7 +1511,7 @@ var Blocks_wrapper_default = BlocksWrapper;
 function Blocks(props) {
   const builderContext = useContext(builder_context_default);
   const componentsContext = useContext(components_context_default);
-  return <Blocks_wrapper_default
+  return <><Blocks_wrapper_default
     blocks={props.blocks}
     parent={props.parent}
     path={props.path}
@@ -1511,7 +1527,7 @@ function Blocks(props) {
       context={props.context || builderContext}
       registeredComponents={props.registeredComponents || componentsContext.registeredComponents}
     />;
-  }}</For3></Show5></Blocks_wrapper_default>;
+  }}</For3></Show5></Blocks_wrapper_default></>;
 }
 var Blocks_default = Blocks;
 
@@ -1638,50 +1654,52 @@ function Columns(props) {
       style: mapStyleObjToStrIfNeeded(columnCssVars(index))
     };
   }
-  return <div
-    class={getColumnsClass(props.builderBlock?.id) + " " + css2({
-      display: "flex",
-      lineHeight: "normal"
-    })}
-    style={columnsCssVars()}
-    {...{}}
-  >
-    <Show6 when={TARGET !== "reactNative"}><Inlined_styles_default
-      id="builderio-columns"
-      styles={columnsStyles()}
-    /></Show6>
-    <For4 each={props.columns}>{(column, _index) => {
-      const index = _index();
-      return <Dynamic_renderer_default
-        key={index}
-        TagName={getTagName(column)}
-        actionAttributes={{}}
-        attributes={getAttributes(column, index)}
-      ><Blocks_default
-        path={`component.options.columns.${index}.blocks`}
-        parent={props.builderBlock.id}
-        styleProp={{
-          flexGrow: "1"
-        }}
-        context={props.builderContext}
-        registeredComponents={props.builderComponents}
-        linkComponent={props.builderLinkComponent}
-        blocks={column.blocks}
-      /></Dynamic_renderer_default>;
-    }}</For4>
-  </div>;
+  return <>
+    <div
+      class={getColumnsClass(props.builderBlock?.id) + " div-f2f53158"}
+      style={columnsCssVars()}
+      {...{}}
+    >
+      <Show6 when={TARGET !== "reactNative"}><Inlined_styles_default
+        id="builderio-columns"
+        styles={columnsStyles()}
+      /></Show6>
+      <For4 each={props.columns}>{(column, _index) => {
+        const index = _index();
+        return <Dynamic_renderer_default
+          key={index}
+          TagName={getTagName(column)}
+          actionAttributes={{}}
+          attributes={getAttributes(column, index)}
+        ><Blocks_default
+          path={`component.options.columns.${index}.blocks`}
+          parent={props.builderBlock.id}
+          styleProp={{
+            flexGrow: "1"
+          }}
+          context={props.builderContext}
+          registeredComponents={props.builderComponents}
+          linkComponent={props.builderLinkComponent}
+          blocks={column.blocks}
+        /></Dynamic_renderer_default>;
+      }}</For4>
+    </div>
+    <style>{`.div-f2f53158 {
+  display: flex;
+  line-height: normal;
+}`}</style>
+  </>;
 }
 var columns_default = Columns;
 
 // src/blocks/fragment/fragment.tsx
 function FragmentComponent(props) {
-  return <span>{props.children}</span>;
+  return <><span>{props.children}</span></>;
 }
 var fragment_default = FragmentComponent;
 
 // src/blocks/image/image.tsx
 import { Show as Show7, createMemo as createMemo8 } from "solid-js";
-import { css as css3 } from "solid-styled-components";
 
 // src/blocks/image/image.helpers.ts
 function removeProtocol(path) {
@@ -1769,59 +1787,60 @@ function Image(props) {
     return out;
   });
   return <>
-    <picture>
-      <Show7 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show7>
-      <img
-        class={"builder-image" + (props.className ? " " + props.className : "") + " " + css3({
-          opacity: "1",
-          transition: "opacity 0.2s ease-in-out"
-        })}
-        loading={props.highPriority ? "eager" : "lazy"}
-        fetchpriority={props.highPriority ? "high" : "auto"}
-        alt={props.altText}
-        role={props.altText ? void 0 : "presentation"}
+    <>
+      <picture>
+        <Show7 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show7>
+        <img
+          class={"builder-image" + (props.className ? " " + props.className : "") + " img-54b38751"}
+          loading={props.highPriority ? "eager" : "lazy"}
+          fetchpriority={props.highPriority ? "high" : "auto"}
+          alt={props.altText}
+          role={props.altText ? void 0 : "presentation"}
+          style={{
+            "object-position": props.backgroundPosition || "center",
+            "object-fit": props.backgroundSize || "cover",
+            ...aspectRatioCss()
+          }}
+          src={props.image}
+          srcset={srcSetToUse()}
+          sizes={props.sizes}
+        />
+      </picture>
+      <Show7
+        when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
+      ><div
+        class="builder-image-sizer div-54b38751"
         style={{
-          "object-position": props.backgroundPosition || "center",
-          "object-fit": props.backgroundSize || "cover",
-          ...aspectRatioCss()
+          "padding-top": props.aspectRatio * 100 + "%"
         }}
-        src={props.image}
-        srcset={srcSetToUse()}
-        sizes={props.sizes}
-      />
-    </picture>
-    <Show7
-      when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
-    ><div
-      class={"builder-image-sizer " + css3({
-        width: "100%",
-        pointerEvents: "none",
-        fontSize: "0"
-      })}
-      style={{
-        "padding-top": props.aspectRatio * 100 + "%"
-      }}
-    /></Show7>
-    <Show7 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show7>
-    <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div
-      class={css3({
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "stretch",
-        position: "absolute",
-        top: "0",
-        left: "0",
-        width: "100%",
-        height: "100%"
-      })}
-    >{props.children}</div></Show7>
+      /></Show7>
+      <Show7 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show7>
+      <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-54b38751-2">{props.children}</div></Show7>
+    </>
+    <style>{`.img-54b38751 {
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}.div-54b38751 {
+  width: 100%;
+  pointer-events: none;
+  font-size: 0;
+}.div-54b38751-2 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}`}</style>
   </>;
 }
 var image_default = Image;
 
 // src/blocks/section/section.tsx
 function SectionComponent(props) {
-  return <section
+  return <><section
     {...{}}
     {...props.attributes}
     style={{
@@ -1836,7 +1855,7 @@ function SectionComponent(props) {
       "margin-left": "auto",
       "margin-right": "auto"
     }}
-  >{props.children}</section>;
+  >{props.children}</section></>;
 }
 var section_default = SectionComponent;
 
@@ -2278,7 +2297,7 @@ function Accordion(props) {
       setOpen(onlyOneAtATime() ? [index] : open().concat(index));
     }
   }
-  return <div class="builder-accordion" style={accordionStyles()}><For5 each={props.items}>{(item, _index) => {
+  return <><div class="builder-accordion" style={accordionStyles()}><For5 each={props.items}>{(item, _index) => {
     const index = _index();
     return <>
       <div
@@ -2312,7 +2331,7 @@ function Accordion(props) {
         linkComponent={props.builderLinkComponent}
       /></div></Show8>
     </>;
-  }}</For5></div>;
+  }}</For5></div></>;
 }
 var accordion_default = Accordion;
 
@@ -2597,7 +2616,7 @@ var componentInfo5 = {
     name: "image",
     type: "file",
     bubble: true,
-    allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
+    allowedFileTypes: ["jpeg", "jpg", "png", "svg", "webp"],
     required: true,
     defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
     onChange: (options) => {
@@ -2769,7 +2788,7 @@ var componentInfo7 = {
 
 // src/blocks/slot/slot.tsx
 function Slot(props) {
-  return <div
+  return <><div
     style={{
       "pointer-events": "auto"
     }}
@@ -2781,7 +2800,7 @@ function Slot(props) {
     path={`symbol.data.${props.name}`}
     context={props.builderContext}
     blocks={props.builderContext.rootState?.[props.name]}
-  /></div>;
+  /></div></>;
 }
 var slot_default = Slot;
 
@@ -2977,7 +2996,7 @@ function Tabs(props) {
       setActiveTab(index);
     }
   }
-  return <div>
+  return <><div>
     <div
       class="builder-tabs-wrap"
       style={{
@@ -3012,7 +3031,7 @@ function Tabs(props) {
       registeredComponents={props.builderComponents}
       linkComponent={props.builderLinkComponent}
     /></div></Show9>
-  </div>;
+  </div></>;
 }
 var tabs_default = Tabs;
 
@@ -3039,13 +3058,13 @@ var componentInfo10 = {
 
 // src/blocks/text/text.tsx
 function Text(props) {
-  return <div
+  return <><div
     class="builder-text"
     innerHTML={props.text?.toString() || ""}
     style={{
       outline: "none"
     }}
-  />;
+  /></>;
 }
 var text_default = Text;
 
@@ -3113,11 +3132,11 @@ function CustomCode(props) {
       }
     }
   });
-  return <div
+  return <><div
     class={"builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")}
     ref={elementRef}
     innerHTML={props.code}
-  />;
+  /></>;
 }
 var custom_code_default = CustomCode;
 
@@ -3135,7 +3154,7 @@ var componentInfo12 = {
       const url = options.get("url");
       if (url) {
         options.set("content", "Loading...");
-        const apiKey = "ae0e60e78201a3f2b0de4b";
+        const apiKey = _iframelyApiKey;
         return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
           if (options.get("url") === url) {
             if (data.html) {
@@ -3205,7 +3224,7 @@ function Embed(props) {
   createEffect(
     on(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0)
   );
-  return <div class="builder-embed" ref={elem} innerHTML={props.content} />;
+  return <><div class="builder-embed" ref={elem} innerHTML={props.content} /></>;
 }
 var embed_default = Embed;
 
@@ -3445,7 +3464,6 @@ var componentInfo13 = {
 
 // src/blocks/form/form/form.tsx
 import { Show as Show10, For as For7, createSignal as createSignal13 } from "solid-js";
-import { css as css4 } from "solid-styled-components";
 
 // src/functions/get-env.ts
 var validEnvList = ["production", "qa", "test", "development", "dev", "cdn-qa", "cloud", "fast", "cdn2", "cdn-prod"];
@@ -3648,50 +3666,51 @@ function FormComponent(props) {
     }
   }
   let formRef;
-  return <form
-    validate={props.validate}
-    ref={formRef}
-    action={!props.sendWithJs && props.action}
-    method={props.method}
-    name={props.name}
-    onSubmit={(event) => onSubmit(event)}
-    {...{}}
-    {...{}}
-    {...props.attributes}
-  >
-    <Show10 when={props.builderBlock && props.builderBlock.children}><For7 each={props.builderBlock?.children}>{(block, _index) => {
-      const idx = _index();
-      return <Block_default
-        key={`form-block-${idx}`}
-        block={block}
+  return <>
+    <form
+      validate={props.validate}
+      ref={formRef}
+      action={!props.sendWithJs && props.action}
+      method={props.method}
+      name={props.name}
+      onSubmit={(event) => onSubmit(event)}
+      {...{}}
+      {...{}}
+      {...props.attributes}
+    >
+      <Show10 when={props.builderBlock && props.builderBlock.children}><For7 each={props.builderBlock?.children}>{(block, _index) => {
+        const idx = _index();
+        return <Block_default
+          key={`form-block-${idx}`}
+          block={block}
+          context={props.builderContext}
+          registeredComponents={props.builderComponents}
+          linkComponent={props.builderLinkComponent}
+        />;
+      }}</For7></Show10>
+      <Show10 when={submissionState() === "error"}><Blocks_default
+        path="errorMessage"
+        blocks={props.errorMessage}
         context={props.builderContext}
-        registeredComponents={props.builderComponents}
-        linkComponent={props.builderLinkComponent}
-      />;
-    }}</For7></Show10>
-    <Show10 when={submissionState() === "error"}><Blocks_default
-      path="errorMessage"
-      blocks={props.errorMessage}
-      context={props.builderContext}
-    /></Show10>
-    <Show10 when={submissionState() === "sending"}><Blocks_default
-      path="sendingMessage"
-      blocks={props.sendingMessage}
-      context={props.builderContext}
-    /></Show10>
-    <Show10 when={submissionState() === "error" && responseData()}><pre
-      class={"builder-form-error-text " + css4({
-        padding: "10px",
-        color: "red",
-        textAlign: "center"
-      })}
-    >{JSON.stringify(responseData(), null, 2)}</pre></Show10>
-    <Show10 when={submissionState() === "success"}><Blocks_default
-      path="successMessage"
-      blocks={props.successMessage}
-      context={props.builderContext}
-    /></Show10>
-  </form>;
+      /></Show10>
+      <Show10 when={submissionState() === "sending"}><Blocks_default
+        path="sendingMessage"
+        blocks={props.sendingMessage}
+        context={props.builderContext}
+      /></Show10>
+      <Show10 when={submissionState() === "error" && responseData()}><pre class="builder-form-error-text pre-2e825338">{JSON.stringify(responseData(), null, 2)}</pre></Show10>
+      <Show10 when={submissionState() === "success"}><Blocks_default
+        path="successMessage"
+        blocks={props.successMessage}
+        context={props.builderContext}
+      /></Show10>
+    </form>
+    <style>{`.pre-2e825338 {
+  padding: 10px;
+  color: red;
+  text-align: center;
+}`}</style>
+  </>;
 }
 var form_default = FormComponent;
 
@@ -3751,7 +3770,7 @@ var componentInfo14 = {
 
 // src/blocks/form/input/input.tsx
 function FormInputComponent(props) {
-  return <input
+  return <><input
     {...{}}
     {...props.attributes}
     key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"}
@@ -3761,7 +3780,7 @@ function FormInputComponent(props) {
     value={props.value}
     defaultValue={props.defaultValue}
     required={props.required}
-  />;
+  /></>;
 }
 var input_default = FormInputComponent;
 
@@ -3813,17 +3832,18 @@ var componentInfo15 = {
 // src/blocks/form/select/select.tsx
 import { For as For8 } from "solid-js";
 function SelectComponent(props) {
-  return <select
+  return <><select
     {...{}}
     {...props.attributes}
     value={props.value}
     key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"}
     defaultValue={props.defaultValue}
     name={props.name}
+    required={props.required}
   ><For8 each={props.options}>{(option, _index) => {
     const index = _index();
     return <option key={`${option.name}-${index}`} value={option.value}>{option.name || option.value}</option>;
-  }}</For8></select>;
+  }}</For8></select></>;
 }
 var select_default = SelectComponent;
 
@@ -3857,12 +3877,65 @@ var componentInfo16 = {
 
 // src/blocks/form/submit-button/submit-button.tsx
 function SubmitButton(props) {
-  return <button type="submit" {...{}} {...props.attributes}>{props.text}</button>;
+  return <><button type="submit" {...{}} {...props.attributes}>{props.text}</button></>;
 }
 var submit_button_default = SubmitButton;
 
-// src/blocks/img/component-info.ts
+// src/blocks/form/textarea/component-info.ts
 var componentInfo17 = {
+  name: "Form:TextArea",
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
+  inputs: [{
+    advanced: true,
+    name: "value",
+    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"'
+  }, {
+    name: "defaultValue",
+    type: "string"
+  }, {
+    name: "placeholder",
+    type: "string",
+    defaultValue: "Hello there"
+  }, {
+    name: "required",
+    type: "boolean",
+    defaultValue: false
+  }],
+  defaultStyles: {
+    paddingTop: "10px",
+    paddingBottom: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px",
+    borderRadius: "3px",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#ccc"
+  },
+  static: true,
+  noWrap: true
+};
+
+// src/blocks/form/textarea/textarea.tsx
+function Textarea(props) {
+  return <><textarea
+    {...{}}
+    {...props.attributes}
+    placeholder={props.placeholder}
+    name={props.name}
+    value={props.value}
+    defaultValue={props.defaultValue}
+    required={props.required}
+  /></>;
+}
+var textarea_default = Textarea;
+
+// src/blocks/img/component-info.ts
+var componentInfo18 = {
   // friendlyName?
   name: "Raw:Img",
   hideFromInsertMenu: true,
@@ -3880,7 +3953,7 @@ var componentInfo17 = {
 
 // src/blocks/img/img.tsx
 function ImgComponent(props) {
-  return <img
+  return <><img
     style={{
       "object-fit": props.backgroundSize || "cover",
       "object-position": props.backgroundPosition || "center"
@@ -3890,12 +3963,12 @@ function ImgComponent(props) {
     src={props.imgSrc || props.image}
     {...{}}
     {...props.attributes}
-  />;
+  /></>;
 }
 var img_default = ImgComponent;
 
 // src/blocks/video/component-info.ts
-var componentInfo18 = {
+var componentInfo19 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -4005,7 +4078,7 @@ function Video(props) {
       ...videoProps()
     };
   });
-  return <div
+  return <><div
     style={{
       position: "relative"
     }}
@@ -4061,7 +4134,7 @@ function Video(props) {
         height: "100%"
       }}
     >{props.children}</div></Show11>
-  </div>;
+  </div></>;
 }
 var video_default = Video;
 
@@ -4084,12 +4157,15 @@ var getExtraComponents = () => [{
 }, {
   component: select_default,
   ...componentInfo15
+}, {
+  component: textarea_default,
+  ...componentInfo17
 }], {
   component: img_default,
-  ...componentInfo17
+  ...componentInfo18
 }, {
   component: video_default,
-  ...componentInfo18
+  ...componentInfo19
 }];
 
 // src/constants/builder-registered-components.ts
@@ -4195,7 +4271,7 @@ var getUpdateVariantVisibilityScript = ({
 
 // src/components/inlined-script.tsx
 function InlinedScript(props) {
-  return <script innerHTML={props.scriptStr} data-id={props.id} />;
+  return <><script innerHTML={props.scriptStr} data-id={props.id} /></>;
 }
 var Inlined_script_default = InlinedScript;
 
@@ -4709,7 +4785,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "1.0.33";
+var SDK_VERSION = "1.0.36";
 
 // src/functions/register.ts
 var registry = {};
@@ -5274,7 +5350,7 @@ function EnableEditor(props) {
     }
   }
   createEffect2(on2(() => [onUpdateFn_5_props_locale()], onUpdateFn_5));
-  return <builder_context_default.Provider value={props.builderContextSignal}><Show12 when={props.builderContextSignal.content}><Dynamic5
+  return <><builder_context_default.Provider value={props.builderContextSignal}><Show12 when={props.builderContextSignal.content}><Dynamic5
     class={getWrapperClassName(
       props.content?.testVariationId || props.content?.id
     )}
@@ -5287,7 +5363,7 @@ function EnableEditor(props) {
     {...showContentProps()}
     {...props.contentWrapperProps}
     component={ContentWrapper()}
-  >{props.children}</Dynamic5></Show12></builder_context_default.Provider>;
+  >{props.children}</Dynamic5></Show12></builder_context_default.Provider></>;
 }
 var Enable_editor_default = EnableEditor;
 
@@ -5306,10 +5382,10 @@ ${getFontCss({
 ${getDefaultStyles(props.isNestedRender)}
 `.trim()
   );
-  return <Inlined_styles_default
+  return <><Inlined_styles_default
     id="builderio-content"
     styles={injectedStyles()}
-  />;
+  /></>;
 }
 var Styles_default = ContentStyles;
 
@@ -5410,7 +5486,7 @@ function ContentComponent(props) {
       rootState: newRootState
     }));
   }
-  return <components_context_default.Provider
+  return <><components_context_default.Provider
     value={{
       registeredComponents: registeredComponents()
     }}
@@ -5448,7 +5524,7 @@ function ContentComponent(props) {
       registeredComponents={registeredComponents()}
       linkComponent={props.linkComponent}
     />
-  </Enable_editor_default></components_context_default.Provider>;
+  </Enable_editor_default></components_context_default.Provider></>;
 }
 var Content_default = ContentComponent;
 
@@ -5484,7 +5560,7 @@ function ContentVariants(props) {
   onMount4(() => {
     setShouldRenderVariants(false);
   });
-  return <>
+  return <><>
     <Show14 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default
       id="builderio-init-variants-fns"
       scriptStr={getInitVariantsFnsScriptString()}
@@ -5546,7 +5622,7 @@ function ContentVariants(props) {
       contentWrapperProps={props.contentWrapperProps}
       trustedHosts={props.trustedHosts}
     />
-  </>;
+  </></>;
 }
 var Content_variants_default = ContentVariants;
 
@@ -5610,7 +5686,7 @@ function Symbol(props) {
     setContent();
   }
   createEffect3(on3(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
-  return <div class={className()} {...{}} {...props.attributes} {...{}}><Content_variants_default
+  return <><div class={className()} {...{}} {...props.attributes} {...{}}><Content_variants_default
     isNestedRender={true}
     apiVersion={props.builderContext.apiVersion}
     apiKey={props.builderContext.apiKey}
@@ -5630,7 +5706,7 @@ function Symbol(props) {
     linkComponent={props.builderLinkComponent}
     blocksWrapper={blocksWrapper()}
     contentWrapper={contentWrapper()}
-  /></div>;
+  /></div></>;
 }
 var symbol_default = Symbol;