@builder.io/sdk-solid 1.0.33 → 1.0.36

package/lib/node/index.js

@@ -1,6 +1,5 @@
 import { delegateEvents, createComponent, spread, mergeProps, insert, effect, setAttribute, className, style, template, Dynamic, memo, use } from 'solid-js/web';
 import { createContext, useContext, Show, For, createSignal, createMemo, onMount, createEffect, on } from 'solid-js';
-import { css } from 'solid-styled-components';
 import { createRequire } from 'node:module';
 
 // src/blocks/button/button.tsx
@@ -305,6 +304,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));
 
@@ -383,6 +395,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)
@@ -393,14 +406,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
@@ -1040,7 +1054,7 @@ function BlockStyles(props) {
     }
     return true;
   });
-  const css5 = createMemo(() => {
+  const css = createMemo(() => {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -1090,13 +1104,13 @@ function BlockStyles(props) {
   });
   return createComponent(Show, {
     get when() {
-      return memo(() => !!(TARGET !== "reactNative" && css5()))() && canShowBlock();
+      return memo(() => !!(TARGET !== "reactNative" && css()))() && canShowBlock();
     },
     get children() {
       return createComponent(inlined_styles_default, {
         id: "builderio-block",
         get styles() {
-          return css5();
+          return css();
         }
       });
     }
@@ -1574,6 +1588,11 @@ function Block(props) {
   });
 }
 var block_default = Block;
+var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-1bb6a3a2 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}`);
 function BlocksWrapper(props) {
   const className = createMemo(() => {
     return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
@@ -1600,13 +1619,9 @@ function BlocksWrapper(props) {
       }, "*");
     }
   }
-  return createComponent(Dynamic, mergeProps({
+  return [createComponent(Dynamic, mergeProps({
     get ["class"]() {
-      return className() + " " + css({
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "stretch"
-      });
+      return className() + " dynamic-1bb6a3a2";
     },
     get ["builder-path"]() {
       return props.path;
@@ -1628,7 +1643,7 @@ function BlocksWrapper(props) {
     get children() {
       return props.children;
     }
-  }));
+  })), _tmpl$2()];
 }
 var blocks_wrapper_default = BlocksWrapper;
 
@@ -1697,7 +1712,11 @@ var getColumnsClass = (id) => {
 };
 
 // src/blocks/columns/columns.tsx
-var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$22 = /* @__PURE__ */ template(`<style>.div-f2f53158 {
+  display: flex;
+  line-height: normal;
+}`);
 function Columns(props) {
   const [gutterSize, setGutterSize] = createSignal(typeof props.space === "number" ? props.space || 0 : 20);
   const [cols, setCols] = createSignal(props.columns || []);
@@ -1809,14 +1828,11 @@ function Columns(props) {
       style: mapStyleObjToStrIfNeeded(columnCssVars(index))
     };
   }
-  return (() => {
-    const _el$ = _tmpl$2();
+  return [(() => {
+    const _el$ = _tmpl$3();
     spread(_el$, mergeProps({
       get ["class"]() {
-        return getColumnsClass(props.builderBlock?.id) + " " + css({
-          display: "flex",
-          lineHeight: "normal"
-        });
+        return getColumnsClass(props.builderBlock?.id) + " div-f2f53158";
       },
       get style() {
         return columnsCssVars();
@@ -1875,13 +1891,13 @@ function Columns(props) {
       }
     }), null);
     return _el$;
-  })();
+  })(), _tmpl$22()];
 }
 var columns_default = Columns;
-var _tmpl$3 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<span>`);
 function FragmentComponent(props) {
   return (() => {
-    const _el$ = _tmpl$3();
+    const _el$ = _tmpl$4();
     insert(_el$, () => props.children);
     return _el$;
   })();
@@ -1936,9 +1952,27 @@ function getSrcSet(url) {
 }
 
 // src/blocks/image/image.tsx
-var _tmpl$4 = /* @__PURE__ */ template(`<source type=image/webp>`);
-var _tmpl$22 = /* @__PURE__ */ template(`<picture><img>`);
-var _tmpl$32 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<source type=image/webp>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<picture><img>`);
+var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-54b38751">`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-54b38751-2>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<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%;
+}`);
 function Image(props) {
   const srcSetToUse = createMemo(() => {
     const imageToUse = props.image || props.src;
@@ -1975,23 +2009,20 @@ function Image(props) {
     const out = props.aspectRatio ? aspectRatioStyles : void 0;
     return out;
   });
-  return [(() => {
-    const _el$ = _tmpl$22(), _el$3 = _el$.firstChild;
+  return [[(() => {
+    const _el$ = _tmpl$23(), _el$3 = _el$.firstChild;
     insert(_el$, createComponent(Show, {
       get when() {
         return webpSrcSet();
       },
       get children() {
-        const _el$2 = _tmpl$4();
+        const _el$2 = _tmpl$5();
         effect(() => setAttribute(_el$2, "srcset", webpSrcSet()));
         return _el$2;
       }
     }), _el$3);
     effect((_p$) => {
-      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " " + css({
-        opacity: "1",
-        transition: "opacity 0.2s ease-in-out"
-      }), _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.altText ? void 0 : "presentation", _v$6 = {
+      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-54b38751", _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.altText ? void 0 : "presentation", _v$6 = {
         "object-position": props.backgroundPosition || "center",
         "object-fit": props.backgroundSize || "cover",
         ...aspectRatioCss()
@@ -2024,19 +2055,7 @@ function Image(props) {
     },
     get children() {
       const _el$4 = _tmpl$32();
-      effect((_p$) => {
-        const _v$10 = "builder-image-sizer " + css({
-          width: "100%",
-          pointerEvents: "none",
-          fontSize: "0"
-        }), _v$11 = props.aspectRatio * 100 + "%";
-        _v$10 !== _p$._v$10 && className(_el$4, _p$._v$10 = _v$10);
-        _v$11 !== _p$._v$11 && ((_p$._v$11 = _v$11) != null ? _el$4.style.setProperty("padding-top", _v$11) : _el$4.style.removeProperty("padding-top"));
-        return _p$;
-      }, {
-        _v$10: void 0,
-        _v$11: void 0
-      });
+      effect(() => props.aspectRatio * 100 + "%" != null ? _el$4.style.setProperty("padding-top", props.aspectRatio * 100 + "%") : _el$4.style.removeProperty("padding-top"));
       return _el$4;
     }
   }), createComponent(Show, {
@@ -2051,27 +2070,17 @@ function Image(props) {
       return !props.fitContent && props.builderBlock?.children?.length;
     },
     get children() {
-      const _el$5 = _tmpl$32();
+      const _el$5 = _tmpl$42();
       insert(_el$5, () => props.children);
-      effect(() => className(_el$5, css({
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "stretch",
-        position: "absolute",
-        top: "0",
-        left: "0",
-        width: "100%",
-        height: "100%"
-      })));
       return _el$5;
     }
-  })];
+  })], _tmpl$52()];
 }
 var image_default = Image;
-var _tmpl$5 = /* @__PURE__ */ template(`<section>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<section>`);
 function SectionComponent(props) {
   return (() => {
-    const _el$ = _tmpl$5();
+    const _el$ = _tmpl$6();
     spread(_el$, mergeProps({}, () => props.attributes, {
       get style() {
         return {
@@ -2416,8 +2425,8 @@ var convertOrderNumberToString = (order) => {
 };
 
 // src/blocks/accordion/accordion.tsx
-var _tmpl$6 = /* @__PURE__ */ template(`<div class=builder-accordion>`);
-var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div class=builder-accordion>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<div>`);
 function Accordion(props) {
   const [open, setOpen] = createSignal([]);
   const onlyOneAtATime = createMemo(() => {
@@ -2507,7 +2516,7 @@ function Accordion(props) {
     }
   }
   return (() => {
-    const _el$ = _tmpl$6();
+    const _el$ = _tmpl$7();
     insert(_el$, createComponent(For, {
       get each() {
         return props.items;
@@ -2515,7 +2524,7 @@ function Accordion(props) {
       children: (item, _index) => {
         const index = _index();
         return [(() => {
-          const _el$2 = _tmpl$23();
+          const _el$2 = _tmpl$24();
           _el$2.$$click = (event) => onClick(index);
           setAttribute(_el$2, "data-index", index);
           insert(_el$2, createComponent(blocks_default, {
@@ -2557,7 +2566,7 @@ function Accordion(props) {
             return open().includes(index);
           },
           get children() {
-            const _el$3 = _tmpl$23();
+            const _el$3 = _tmpl$24();
             insert(_el$3, createComponent(blocks_default, {
               get blocks() {
                 return item.detail;
@@ -2878,7 +2887,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) => {
@@ -3046,10 +3055,10 @@ var componentInfo7 = {
     defaultValue: "children"
   }]
 };
-var _tmpl$7 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<div>`);
 function Slot(props) {
   return (() => {
-    const _el$ = _tmpl$7();
+    const _el$ = _tmpl$8();
     _el$.style.setProperty("pointer-events", "auto");
     spread(_el$, mergeProps(() => !props.builderContext.context?.symbolId && {
       "builder-slot": props.name
@@ -3248,8 +3257,8 @@ var componentInfo9 = {
     }]
   }]
 };
-var _tmpl$8 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$24 = /* @__PURE__ */ template(`<div><div class=builder-tabs-wrap>`);
+var _tmpl$9 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$25 = /* @__PURE__ */ template(`<div><div class=builder-tabs-wrap>`);
 var _tmpl$33 = /* @__PURE__ */ template(`<span>`);
 function Tabs(props) {
   const [activeTab, setActiveTab] = createSignal(props.defaultActiveTab ? props.defaultActiveTab - 1 : 0);
@@ -3264,7 +3273,7 @@ function Tabs(props) {
     }
   }
   return (() => {
-    const _el$ = _tmpl$24(), _el$2 = _el$.firstChild;
+    const _el$ = _tmpl$25(), _el$2 = _el$.firstChild;
     _el$2.style.setProperty("display", "flex");
     _el$2.style.setProperty("flex-direction", "row");
     _el$2.style.setProperty("overflow", "auto");
@@ -3316,7 +3325,7 @@ function Tabs(props) {
         return activeTabContent(activeTab());
       },
       get children() {
-        const _el$3 = _tmpl$8();
+        const _el$3 = _tmpl$9();
         insert(_el$3, createComponent(blocks_default, {
           get parent() {
             return props.builderBlock.id;
@@ -3367,10 +3376,10 @@ var componentInfo10 = {
     textAlign: "center"
   }
 };
-var _tmpl$9 = /* @__PURE__ */ template(`<div class=builder-text>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<div class=builder-text>`);
 function Text(props) {
   return (() => {
-    const _el$ = _tmpl$9();
+    const _el$ = _tmpl$10();
     _el$.style.setProperty("outline", "none");
     effect(() => _el$.innerHTML = props.text?.toString() || "");
     return _el$;
@@ -3402,7 +3411,7 @@ var componentInfo11 = {
     advanced: true
   }]
 };
-var _tmpl$10 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$11 = /* @__PURE__ */ template(`<div>`);
 function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal([]);
   const [scriptsRun, setScriptsRun] = createSignal([]);
@@ -3436,7 +3445,7 @@ function CustomCode(props) {
     }
   });
   return (() => {
-    const _el$ = _tmpl$10();
+    const _el$ = _tmpl$11();
     const _ref$ = elementRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : elementRef = _el$;
     effect((_p$) => {
@@ -3467,7 +3476,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) {
@@ -3496,7 +3505,7 @@ var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "applicati
 var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
 
 // src/blocks/embed/embed.tsx
-var _tmpl$11 = /* @__PURE__ */ template(`<div class=builder-embed>`);
+var _tmpl$12 = /* @__PURE__ */ template(`<div class=builder-embed>`);
 function Embed(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal([]);
   const [scriptsRun, setScriptsRun] = createSignal([]);
@@ -3533,7 +3542,7 @@ function Embed(props) {
   }
   createEffect(on(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$11();
+    const _el$ = _tmpl$12();
     const _ref$ = elem;
     typeof _ref$ === "function" ? use(_ref$, _el$) : elem = _el$;
     effect(() => _el$.innerHTML = props.content);
@@ -3790,8 +3799,13 @@ var get = (obj, path, defaultValue) => {
 };
 
 // src/blocks/form/form/form.tsx
-var _tmpl$12 = /* @__PURE__ */ template(`<pre>`);
-var _tmpl$25 = /* @__PURE__ */ template(`<form>`);
+var _tmpl$13 = /* @__PURE__ */ template(`<pre class="builder-form-error-text pre-2e825338">`);
+var _tmpl$26 = /* @__PURE__ */ template(`<form>`);
+var _tmpl$34 = /* @__PURE__ */ template(`<style>.pre-2e825338 {
+  padding: 10px;
+  color: red;
+  text-align: center;
+}`);
 function FormComponent(props) {
   const [formState, setFormState] = createSignal("unsubmitted");
   const [responseData, setResponseData] = createSignal(null);
@@ -3976,8 +3990,8 @@ function FormComponent(props) {
     }
   }
   let formRef;
-  return (() => {
-    const _el$ = _tmpl$25();
+  return [(() => {
+    const _el$ = _tmpl$26();
     _el$.addEventListener("submit", (event) => onSubmit(event));
     const _ref$ = formRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : formRef = _el$;
@@ -4060,13 +4074,8 @@ function FormComponent(props) {
         return memo(() => submissionState() === "error")() && responseData();
       },
       get children() {
-        const _el$2 = _tmpl$12();
+        const _el$2 = _tmpl$13();
         insert(_el$2, () => JSON.stringify(responseData(), null, 2));
-        effect(() => className(_el$2, "builder-form-error-text " + css({
-          padding: "10px",
-          color: "red",
-          textAlign: "center"
-        })));
         return _el$2;
       }
     }), null);
@@ -4087,7 +4096,7 @@ function FormComponent(props) {
       }
     }), null);
     return _el$;
-  })();
+  })(), _tmpl$34()];
 }
 var form_default = FormComponent;
 
@@ -4144,10 +4153,10 @@ var componentInfo14 = {
     borderColor: "#ccc"
   }
 };
-var _tmpl$13 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$14 = /* @__PURE__ */ template(`<input>`);
 function FormInputComponent(props) {
   return (() => {
-    const _el$ = _tmpl$13();
+    const _el$ = _tmpl$14();
     spread(_el$, mergeProps({}, () => props.attributes, {
       get key() {
         return isEditing() && props.defaultValue ? props.defaultValue : "default-key";
@@ -4220,11 +4229,11 @@ var componentInfo15 = {
   static: true,
   noWrap: true
 };
-var _tmpl$14 = /* @__PURE__ */ template(`<select>`);
-var _tmpl$26 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$15 = /* @__PURE__ */ template(`<select>`);
+var _tmpl$27 = /* @__PURE__ */ template(`<option>`);
 function SelectComponent(props) {
   return (() => {
-    const _el$ = _tmpl$14();
+    const _el$ = _tmpl$15();
     spread(_el$, mergeProps({}, () => props.attributes, {
       get value() {
         return props.value;
@@ -4237,6 +4246,9 @@ function SelectComponent(props) {
       },
       get name() {
         return props.name;
+      },
+      get required() {
+        return props.required;
       }
     }), false, true);
     insert(_el$, createComponent(For, {
@@ -4246,7 +4258,7 @@ function SelectComponent(props) {
       children: (option, _index) => {
         const index = _index();
         return (() => {
-          const _el$2 = _tmpl$26();
+          const _el$2 = _tmpl$27();
           insert(_el$2, () => option.name || option.value);
           effect(() => setAttribute(_el$2, "key", `${option.name}-${index}`));
           effect(() => _el$2.value = option.value);
@@ -4286,10 +4298,10 @@ var componentInfo16 = {
   // TODO: defaultChildren
   // canHaveChildren: true,
 };
-var _tmpl$15 = /* @__PURE__ */ template(`<button type=submit>`);
+var _tmpl$16 = /* @__PURE__ */ template(`<button type=submit>`);
 function SubmitButton(props) {
   return (() => {
-    const _el$ = _tmpl$15();
+    const _el$ = _tmpl$16();
     spread(_el$, mergeProps({}, () => props.attributes), false, true);
     insert(_el$, () => props.text);
     return _el$;
@@ -4297,8 +4309,72 @@ function SubmitButton(props) {
 }
 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
+};
+var _tmpl$17 = /* @__PURE__ */ template(`<textarea>`);
+function Textarea(props) {
+  return (() => {
+    const _el$ = _tmpl$17();
+    spread(_el$, mergeProps({}, () => props.attributes, {
+      get placeholder() {
+        return props.placeholder;
+      },
+      get name() {
+        return props.name;
+      },
+      get value() {
+        return props.value;
+      },
+      get defaultValue() {
+        return props.defaultValue;
+      },
+      get required() {
+        return props.required;
+      }
+    }), false, false);
+    return _el$;
+  })();
+}
+var textarea_default = Textarea;
+
+// src/blocks/img/component-info.ts
+var componentInfo18 = {
   // friendlyName?
   name: "Raw:Img",
   hideFromInsertMenu: true,
@@ -4313,10 +4389,10 @@ var componentInfo17 = {
   noWrap: true,
   static: true
 };
-var _tmpl$16 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$18 = /* @__PURE__ */ template(`<img>`);
 function ImgComponent(props) {
   return (() => {
-    const _el$ = _tmpl$16();
+    const _el$ = _tmpl$18();
     spread(_el$, mergeProps({
       get style() {
         return {
@@ -4340,7 +4416,7 @@ function ImgComponent(props) {
 var img_default = ImgComponent;
 
 // src/blocks/video/component-info.ts
-var componentInfo18 = {
+var componentInfo19 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -4422,9 +4498,9 @@ var componentInfo18 = {
     advanced: true
   }]
 };
-var _tmpl$17 = /* @__PURE__ */ template(`<source type=video/mp4>`);
-var _tmpl$27 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$34 = /* @__PURE__ */ template(`<div><video class=builder-video>`);
+var _tmpl$19 = /* @__PURE__ */ template(`<source type=video/mp4>`);
+var _tmpl$28 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$35 = /* @__PURE__ */ template(`<div><video class=builder-video>`);
 function Video(props) {
   const videoProps = createMemo(() => {
     return {
@@ -4451,7 +4527,7 @@ function Video(props) {
     };
   });
   return (() => {
-    const _el$ = _tmpl$34(), _el$2 = _el$.firstChild;
+    const _el$ = _tmpl$35(), _el$2 = _el$.firstChild;
     _el$.style.setProperty("position", "relative");
     spread(_el$2, mergeProps(spreadProps, {
       get preload() {
@@ -4485,7 +4561,7 @@ function Video(props) {
         return !props.lazyLoad;
       },
       get children() {
-        const _el$3 = _tmpl$17();
+        const _el$3 = _tmpl$19();
         effect(() => setAttribute(_el$3, "src", props.video));
         return _el$3;
       }
@@ -4495,7 +4571,7 @@ function Video(props) {
         return props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length);
       },
       get children() {
-        const _el$4 = _tmpl$27();
+        const _el$4 = _tmpl$28();
         _el$4.style.setProperty("width", "100%");
         _el$4.style.setProperty("pointer-events", "none");
         _el$4.style.setProperty("font-size", "0px");
@@ -4508,7 +4584,7 @@ function Video(props) {
         return props.builderBlock?.children?.length && props.fitContent;
       },
       get children() {
-        const _el$5 = _tmpl$27();
+        const _el$5 = _tmpl$28();
         _el$5.style.setProperty("display", "flex");
         _el$5.style.setProperty("flex-direction", "column");
         _el$5.style.setProperty("align-items", "stretch");
@@ -4521,7 +4597,7 @@ function Video(props) {
         return props.builderBlock?.children?.length && !props.fitContent;
       },
       get children() {
-        const _el$6 = _tmpl$27();
+        const _el$6 = _tmpl$28();
         _el$6.style.setProperty("pointer-events", "none");
         _el$6.style.setProperty("display", "flex");
         _el$6.style.setProperty("flex-direction", "column");
@@ -4559,12 +4635,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
@@ -4667,10 +4746,10 @@ var getUpdateVariantVisibilityScript = ({
 }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
     "${variationId}", "${contentId}", ${isHydrationTarget}
   )`;
-var _tmpl$18 = /* @__PURE__ */ template(`<script>`);
+var _tmpl$20 = /* @__PURE__ */ template(`<script>`);
 function InlinedScript(props) {
   return (() => {
-    const _el$ = _tmpl$18();
+    const _el$ = _tmpl$20();
     effect((_p$) => {
       const _v$ = props.scriptStr, _v$2 = props.id;
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
@@ -5179,7 +5258,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 = {};
@@ -6161,7 +6240,7 @@ var fetchSymbolContent = async ({
 };
 
 // src/blocks/symbol/symbol.tsx
-var _tmpl$19 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$21 = /* @__PURE__ */ template(`<div>`);
 function Symbol(props) {
   const [contentToUse, setContentToUse] = createSignal(props.symbol?.content);
   const blocksWrapper = createMemo(() => {
@@ -6193,7 +6272,7 @@ function Symbol(props) {
   }
   createEffect(on(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$19();
+    const _el$ = _tmpl$21();
     spread(_el$, mergeProps({
       get ["class"]() {
         return className();