@builder.io/sdk-solid 1.0.33 → 1.0.35

package/lib/browser/dev.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';
 
 // src/blocks/button/button.tsx
 
@@ -891,7 +890,7 @@ function BlockStyles(props) {
     }
     return true;
   });
-  const css5 = createMemo(() => {
+  const css = createMemo(() => {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -941,13 +940,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();
         }
       });
     }
@@ -1425,6 +1424,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" : "");
@@ -1451,13 +1455,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;
@@ -1479,7 +1479,7 @@ function BlocksWrapper(props) {
     get children() {
       return props.children;
     }
-  }));
+  })), _tmpl$2()];
 }
 var blocks_wrapper_default = BlocksWrapper;
 
@@ -1548,7 +1548,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 || []);
@@ -1660,14 +1664,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();
@@ -1726,13 +1727,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$;
   })();
@@ -1787,9 +1788,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;
@@ -1827,23 +1846,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()
@@ -1876,19 +1892,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, {
@@ -1903,27 +1907,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 {
@@ -2268,8 +2262,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(() => {
@@ -2359,7 +2353,7 @@ function Accordion(props) {
     }
   }
   return (() => {
-    const _el$ = _tmpl$6();
+    const _el$ = _tmpl$7();
     insert(_el$, createComponent(For, {
       get each() {
         return props.items;
@@ -2367,7 +2361,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, {
@@ -2409,7 +2403,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;
@@ -2730,7 +2724,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) => {
@@ -2899,10 +2893,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
@@ -3101,8 +3095,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);
@@ -3117,7 +3111,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");
@@ -3169,7 +3163,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;
@@ -3220,10 +3214,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$;
@@ -3255,7 +3249,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([]);
@@ -3290,7 +3284,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$) => {
@@ -3321,7 +3315,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) {
@@ -3350,7 +3344,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([]);
@@ -3388,7 +3382,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);
@@ -3645,8 +3639,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);
@@ -3831,8 +3830,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$;
@@ -3915,13 +3914,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);
@@ -3942,7 +3936,7 @@ function FormComponent(props) {
       }
     }), null);
     return _el$;
-  })();
+  })(), _tmpl$34()];
 }
 var form_default = FormComponent;
 
@@ -3999,10 +3993,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";
@@ -4075,11 +4069,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;
@@ -4101,7 +4095,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);
@@ -4141,10 +4135,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$;
@@ -4168,10 +4162,10 @@ var componentInfo17 = {
   noWrap: true,
   static: true
 };
-var _tmpl$16 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$17 = /* @__PURE__ */ template(`<img>`);
 function ImgComponent(props) {
   return (() => {
-    const _el$ = _tmpl$16();
+    const _el$ = _tmpl$17();
     spread(_el$, mergeProps({
       get style() {
         return {
@@ -4277,9 +4271,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$18 = /* @__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 {
@@ -4306,7 +4300,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() {
@@ -4340,7 +4334,7 @@ function Video(props) {
         return !props.lazyLoad;
       },
       get children() {
-        const _el$3 = _tmpl$17();
+        const _el$3 = _tmpl$18();
         effect(() => setAttribute(_el$3, "src", props.video));
         return _el$3;
       }
@@ -4350,7 +4344,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");
@@ -4363,7 +4357,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");
@@ -4376,7 +4370,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");
@@ -4522,10 +4516,10 @@ var getUpdateVariantVisibilityScript = ({
 }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
     "${variationId}", "${contentId}", ${isHydrationTarget}
   )`;
-var _tmpl$18 = /* @__PURE__ */ template(`<script>`);
+var _tmpl$19 = /* @__PURE__ */ template(`<script>`);
 function InlinedScript(props) {
   return (() => {
-    const _el$ = _tmpl$18();
+    const _el$ = _tmpl$19();
     effect((_p$) => {
       const _v$ = props.scriptStr, _v$2 = props.id;
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
@@ -5039,7 +5033,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "1.0.33";
+var SDK_VERSION = "1.0.35";
 
 // src/functions/register.ts
 var registry = {};
@@ -6023,7 +6017,7 @@ var fetchSymbolContent = async ({
 };
 
 // src/blocks/symbol/symbol.tsx
-var _tmpl$19 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$20 = /* @__PURE__ */ template(`<div>`);
 function Symbol(props) {
   const [contentToUse, setContentToUse] = createSignal(props.symbol?.content);
   const blocksWrapper = createMemo(() => {
@@ -6055,7 +6049,7 @@ function Symbol(props) {
   }
   createEffect(on(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$19();
+    const _el$ = _tmpl$20();
     spread(_el$, mergeProps({
       get ["class"]() {
         return className();