@builder.io/sdk-solid 4.0.3 → 4.0.4

package/dist/index.d.ts

@@ -596,6 +596,7 @@ interface ImageProps {
     height?: number;
     width?: number;
     altText?: string;
+    title?: string;
     backgroundSize?: 'cover' | 'contain';
     backgroundPosition?: string;
     srcset?: string;

package/lib/browser/dev.js

@@ -1641,12 +1641,13 @@ function Block(props) {
   });
 }
 var block_default = Block;
-var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-3d7ff108 {
+var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-023c60f2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }`);
 function BlocksWrapper(props) {
+  createSignal(false);
   const className = createMemo(() => {
     return ["builder-blocks", !props.blocks?.length ? "no-blocks" : "", props.classNameProp].filter(Boolean).join(" ");
   });
@@ -1683,9 +1684,13 @@ function BlocksWrapper(props) {
   let blocksWrapperRef;
   onMount(() => {
   });
+  const onUpdateFn_0_props_blocks = createMemo(() => props.blocks);
+  function onUpdateFn_0() {
+  }
+  createEffect(on(() => [onUpdateFn_0_props_blocks()], onUpdateFn_0));
   return [createComponent(Dynamic, mergeProps({
     get ["class"]() {
-      return className() + " dynamic-3d7ff108";
+      return className() + " dynamic-023c60f2";
     },
     ref(r$) {
       const _ref$ = blocksWrapperRef;
@@ -2038,16 +2043,16 @@ function getSrcSet(url) {
 // src/blocks/image/image.tsx
 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-dc6700b4">`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-dc6700b4-2>`);
-var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-dc6700b4 {
+var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-040e729e">`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-040e729e-2>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-040e729e {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-dc6700b4 {
+}.div-040e729e {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-dc6700b4-2 {
+}.div-040e729e-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -2110,20 +2115,21 @@ function Image(props) {
       }
     }), _el$3);
     effect((_p$) => {
-      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-dc6700b4", _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-040e729e", _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.title, _v$6 = props.altText ? void 0 : "presentation", _v$7 = {
         "object-position": props.backgroundPosition || "center",
         "object-fit": props.backgroundSize || "cover",
         ...aspectRatioCss()
-      }, _v$7 = props.image, _v$8 = srcSetToUse(), _v$9 = props.sizes;
+      }, _v$8 = props.image, _v$9 = srcSetToUse(), _v$10 = props.sizes;
       _v$ !== _p$._v$ && className(_el$3, _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && setAttribute(_el$3, "loading", _p$._v$2 = _v$2);
       _v$3 !== _p$._v$3 && setAttribute(_el$3, "fetchpriority", _p$._v$3 = _v$3);
       _v$4 !== _p$._v$4 && setAttribute(_el$3, "alt", _p$._v$4 = _v$4);
-      _v$5 !== _p$._v$5 && setAttribute(_el$3, "role", _p$._v$5 = _v$5);
-      _p$._v$6 = style(_el$3, _v$6, _p$._v$6);
-      _v$7 !== _p$._v$7 && setAttribute(_el$3, "src", _p$._v$7 = _v$7);
-      _v$8 !== _p$._v$8 && setAttribute(_el$3, "srcset", _p$._v$8 = _v$8);
-      _v$9 !== _p$._v$9 && setAttribute(_el$3, "sizes", _p$._v$9 = _v$9);
+      _v$5 !== _p$._v$5 && setAttribute(_el$3, "title", _p$._v$5 = _v$5);
+      _v$6 !== _p$._v$6 && setAttribute(_el$3, "role", _p$._v$6 = _v$6);
+      _p$._v$7 = style(_el$3, _v$7, _p$._v$7);
+      _v$8 !== _p$._v$8 && setAttribute(_el$3, "src", _p$._v$8 = _v$8);
+      _v$9 !== _p$._v$9 && setAttribute(_el$3, "srcset", _p$._v$9 = _v$9);
+      _v$10 !== _p$._v$10 && setAttribute(_el$3, "sizes", _p$._v$10 = _v$10);
       return _p$;
     }, {
       _v$: void 0,
@@ -2134,7 +2140,8 @@ function Image(props) {
       _v$6: void 0,
       _v$7: void 0,
       _v$8: void 0,
-      _v$9: void 0
+      _v$9: void 0,
+      _v$10: void 0
     });
     return _el$;
   })(), createComponent(Show, {
@@ -3118,6 +3125,10 @@ var componentInfo5 = {
     name: "altText",
     type: "string",
     helperText: "Text to display when the user has images off"
+  }, {
+    name: "title",
+    type: "string",
+    helperText: "Text to display when hovering over the asset"
   }, {
     name: "height",
     type: "number",
@@ -5341,7 +5352,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.3";
+var SDK_VERSION = "4.0.4";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({

package/lib/browser/dev.jsx

@@ -1480,9 +1480,10 @@ function Block(props) {
 var Block_default = Block;
 
 // src/components/blocks/blocks-wrapper.tsx
-import { onMount as onMount3, createMemo as createMemo6 } from "solid-js";
+import { onMount as onMount3, on as on2, createEffect as createEffect2, createMemo as createMemo6, createSignal as createSignal6 } from "solid-js";
 import { Dynamic as Dynamic4 } from "solid-js/web";
 function BlocksWrapper(props) {
+  const [shouldUpdate, setShouldUpdate] = createSignal6(false);
   const className = createMemo6(() => {
     return [
       "builder-blocks",
@@ -1529,9 +1530,13 @@ function BlocksWrapper(props) {
   let blocksWrapperRef;
   onMount3(() => {
   });
+  const onUpdateFn_0_props_blocks = createMemo6(() => props.blocks);
+  function onUpdateFn_0() {
+  }
+  createEffect2(on2(() => [onUpdateFn_0_props_blocks()], onUpdateFn_0));
   return <>
     <Dynamic4
-      class={className() + " dynamic-3d7ff108"}
+      class={className() + " dynamic-023c60f2"}
       ref={blocksWrapperRef}
       builder-path={dataPath()}
       builder-parent-id={props.parent}
@@ -1543,7 +1548,7 @@ function BlocksWrapper(props) {
       {...props.BlocksWrapperProps}
       component={props.BlocksWrapper}
     >{props.children}</Dynamic4>
-    <style>{`.dynamic-3d7ff108 {
+    <style>{`.dynamic-023c60f2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1847,10 +1852,11 @@ function Image(props) {
       <picture>
         <Show8 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show8>
         <img
-          class={"builder-image" + (props.className ? " " + props.className : "") + " img-dc6700b4"}
+          class={"builder-image" + (props.className ? " " + props.className : "") + " img-040e729e"}
           loading={props.highPriority ? "eager" : "lazy"}
           fetchpriority={props.highPriority ? "high" : "auto"}
           alt={props.altText}
+          title={props.title}
           role={props.altText ? void 0 : "presentation"}
           style={{
             "object-position": props.backgroundPosition || "center",
@@ -1865,22 +1871,22 @@ function Image(props) {
       <Show8
         when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
       ><div
-        class="builder-image-sizer div-dc6700b4"
+        class="builder-image-sizer div-040e729e"
         style={{
           "padding-top": props.aspectRatio * 100 + "%"
         }}
       /></Show8>
       <Show8 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show8>
-      <Show8 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-dc6700b4-2">{props.children}</div></Show8>
+      <Show8 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-040e729e-2">{props.children}</div></Show8>
     </>
-    <style>{`.img-dc6700b4 {
+    <style>{`.img-040e729e {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-dc6700b4 {
+}.div-040e729e {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-dc6700b4-2 {
+}.div-040e729e-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1916,7 +1922,7 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount9, on as on5, createEffect as createEffect5, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
+import { onMount as onMount9, on as on6, createEffect as createEffect6, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
 import { Show as Show16, For as For9, onMount as onMount8, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
@@ -2815,6 +2821,10 @@ var componentInfo5 = {
     name: "altText",
     type: "string",
     helperText: "Text to display when the user has images off"
+  }, {
+    name: "title",
+    type: "string",
+    helperText: "Text to display when hovering over the asset"
   }, {
     name: "height",
     type: "number",
@@ -3625,7 +3635,7 @@ var componentInfo12 = {
 };
 
 // src/blocks/custom-code/custom-code.tsx
-import { onMount as onMount5, on as on2, createEffect as createEffect2, createMemo as createMemo12, createSignal as createSignal12 } from "solid-js";
+import { onMount as onMount5, on as on3, createEffect as createEffect3, createMemo as createMemo12, createSignal as createSignal12 } from "solid-js";
 function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal12([]);
   const [scriptsRun, setScriptsRun] = createSignal12([]);
@@ -3675,7 +3685,7 @@ function CustomCode(props) {
       runScripts();
     }
   }
-  createEffect2(on2(() => [onUpdateFn_0_props_code()], onUpdateFn_0));
+  createEffect3(on3(() => [onUpdateFn_0_props_code()], onUpdateFn_0));
   return <><div
     class={"builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")}
     ref={elementRef}
@@ -3703,7 +3713,7 @@ var componentInfo13 = {
 };
 
 // src/blocks/embed/embed.tsx
-import { on as on3, createEffect as createEffect3, createMemo as createMemo13, createSignal as createSignal13 } from "solid-js";
+import { on as on4, createEffect as createEffect4, createMemo as createMemo13, createSignal as createSignal13 } from "solid-js";
 
 // src/blocks/embed/helpers.ts
 var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
@@ -3745,8 +3755,8 @@ function Embed(props) {
       findAndRunScripts();
     }
   }
-  createEffect3(
-    on3(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0)
+  createEffect4(
+    on4(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0)
   );
   return <><div class="builder-embed" ref={elem} innerHTML={props.content} /></>;
 }
@@ -4838,8 +4848,8 @@ var getUpdateVariantVisibilityScript = ({
 import {
   Show as Show14,
   onMount as onMount7,
-  on as on4,
-  createEffect as createEffect4,
+  on as on5,
+  createEffect as createEffect5,
   createMemo as createMemo16,
   createSignal as createSignal16
 } from "solid-js";
@@ -4851,7 +4861,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.3";
+var SDK_VERSION = "4.0.4";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5943,15 +5953,15 @@ function EnableEditor(props) {
       mergeNewContent(props.content);
     }
   }
-  createEffect4(on4(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
+  createEffect5(on5(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
   const onUpdateFn_1_props_builderContextSignal_rootState = createMemo16(
     () => props.builderContextSignal.rootState
   );
   function onUpdateFn_1() {
     emitStateUpdate();
   }
-  createEffect4(
-    on4(
+  createEffect5(
+    on5(
       () => [onUpdateFn_1_props_builderContextSignal_rootState()],
       onUpdateFn_1
     )
@@ -5962,7 +5972,7 @@ function EnableEditor(props) {
       mergeNewRootState(props.data);
     }
   }
-  createEffect4(on4(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
+  createEffect5(on5(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
   const onUpdateFn_3_props_locale = createMemo16(() => props.locale);
   function onUpdateFn_3() {
     if (props.locale) {
@@ -5971,7 +5981,7 @@ function EnableEditor(props) {
       });
     }
   }
-  createEffect4(on4(() => [onUpdateFn_3_props_locale()], onUpdateFn_3));
+  createEffect5(on5(() => [onUpdateFn_3_props_locale()], onUpdateFn_3));
   return <><builder_context_default.Provider value={props.builderContextSignal}><Show14
     when={props.builderContextSignal.content || needsElementRefDivForEditing()}
   ><Dynamic5
@@ -6349,7 +6359,7 @@ function Symbol(props) {
   function onUpdateFn_0() {
     setContent();
   }
-  createEffect5(on5(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
+  createEffect6(on6(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
   return <><div class={className()} {...{}} {...props.attributes} {...{}}><Content_variants_default
     nonce={props.builderContext.nonce}
     isNestedRender={true}

package/lib/browser/index.js

@@ -1632,12 +1632,13 @@ function Block(props) {
   });
 }
 var block_default = Block;
-var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-3d7ff108 {
+var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-023c60f2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }`);
 function BlocksWrapper(props) {
+  createSignal(false);
   const className = createMemo(() => {
     return ["builder-blocks", !props.blocks?.length ? "no-blocks" : "", props.classNameProp].filter(Boolean).join(" ");
   });
@@ -1674,9 +1675,13 @@ function BlocksWrapper(props) {
   let blocksWrapperRef;
   onMount(() => {
   });
+  const onUpdateFn_0_props_blocks = createMemo(() => props.blocks);
+  function onUpdateFn_0() {
+  }
+  createEffect(on(() => [onUpdateFn_0_props_blocks()], onUpdateFn_0));
   return [createComponent(Dynamic, mergeProps({
     get ["class"]() {
-      return className() + " dynamic-3d7ff108";
+      return className() + " dynamic-023c60f2";
     },
     ref(r$) {
       const _ref$ = blocksWrapperRef;
@@ -2029,16 +2034,16 @@ function getSrcSet(url) {
 // src/blocks/image/image.tsx
 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-dc6700b4">`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-dc6700b4-2>`);
-var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-dc6700b4 {
+var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-040e729e">`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-040e729e-2>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-040e729e {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-dc6700b4 {
+}.div-040e729e {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-dc6700b4-2 {
+}.div-040e729e-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -2100,20 +2105,21 @@ function Image(props) {
       }
     }), _el$3);
     effect((_p$) => {
-      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-dc6700b4", _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-040e729e", _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.title, _v$6 = props.altText ? void 0 : "presentation", _v$7 = {
         "object-position": props.backgroundPosition || "center",
         "object-fit": props.backgroundSize || "cover",
         ...aspectRatioCss()
-      }, _v$7 = props.image, _v$8 = srcSetToUse(), _v$9 = props.sizes;
+      }, _v$8 = props.image, _v$9 = srcSetToUse(), _v$10 = props.sizes;
       _v$ !== _p$._v$ && className(_el$3, _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && setAttribute(_el$3, "loading", _p$._v$2 = _v$2);
       _v$3 !== _p$._v$3 && setAttribute(_el$3, "fetchpriority", _p$._v$3 = _v$3);
       _v$4 !== _p$._v$4 && setAttribute(_el$3, "alt", _p$._v$4 = _v$4);
-      _v$5 !== _p$._v$5 && setAttribute(_el$3, "role", _p$._v$5 = _v$5);
-      _p$._v$6 = style(_el$3, _v$6, _p$._v$6);
-      _v$7 !== _p$._v$7 && setAttribute(_el$3, "src", _p$._v$7 = _v$7);
-      _v$8 !== _p$._v$8 && setAttribute(_el$3, "srcset", _p$._v$8 = _v$8);
-      _v$9 !== _p$._v$9 && setAttribute(_el$3, "sizes", _p$._v$9 = _v$9);
+      _v$5 !== _p$._v$5 && setAttribute(_el$3, "title", _p$._v$5 = _v$5);
+      _v$6 !== _p$._v$6 && setAttribute(_el$3, "role", _p$._v$6 = _v$6);
+      _p$._v$7 = style(_el$3, _v$7, _p$._v$7);
+      _v$8 !== _p$._v$8 && setAttribute(_el$3, "src", _p$._v$8 = _v$8);
+      _v$9 !== _p$._v$9 && setAttribute(_el$3, "srcset", _p$._v$9 = _v$9);
+      _v$10 !== _p$._v$10 && setAttribute(_el$3, "sizes", _p$._v$10 = _v$10);
       return _p$;
     }, {
       _v$: void 0,
@@ -2124,7 +2130,8 @@ function Image(props) {
       _v$6: void 0,
       _v$7: void 0,
       _v$8: void 0,
-      _v$9: void 0
+      _v$9: void 0,
+      _v$10: void 0
     });
     return _el$;
   })(), createComponent(Show, {
@@ -3107,6 +3114,10 @@ var componentInfo5 = {
     name: "altText",
     type: "string",
     helperText: "Text to display when the user has images off"
+  }, {
+    name: "title",
+    type: "string",
+    helperText: "Text to display when hovering over the asset"
   }, {
     name: "height",
     type: "number",
@@ -5329,7 +5340,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.3";
+var SDK_VERSION = "4.0.4";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({

package/lib/browser/index.jsx

@@ -1473,9 +1473,10 @@ function Block(props) {
 var Block_default = Block;
 
 // src/components/blocks/blocks-wrapper.tsx
-import { onMount as onMount3, createMemo as createMemo6 } from "solid-js";
+import { onMount as onMount3, on as on2, createEffect as createEffect2, createMemo as createMemo6, createSignal as createSignal6 } from "solid-js";
 import { Dynamic as Dynamic4 } from "solid-js/web";
 function BlocksWrapper(props) {
+  const [shouldUpdate, setShouldUpdate] = createSignal6(false);
   const className = createMemo6(() => {
     return [
       "builder-blocks",
@@ -1522,9 +1523,13 @@ function BlocksWrapper(props) {
   let blocksWrapperRef;
   onMount3(() => {
   });
+  const onUpdateFn_0_props_blocks = createMemo6(() => props.blocks);
+  function onUpdateFn_0() {
+  }
+  createEffect2(on2(() => [onUpdateFn_0_props_blocks()], onUpdateFn_0));
   return <>
     <Dynamic4
-      class={className() + " dynamic-3d7ff108"}
+      class={className() + " dynamic-023c60f2"}
       ref={blocksWrapperRef}
       builder-path={dataPath()}
       builder-parent-id={props.parent}
@@ -1536,7 +1541,7 @@ function BlocksWrapper(props) {
       {...props.BlocksWrapperProps}
       component={props.BlocksWrapper}
     >{props.children}</Dynamic4>
-    <style>{`.dynamic-3d7ff108 {
+    <style>{`.dynamic-023c60f2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1839,10 +1844,11 @@ function Image(props) {
       <picture>
         <Show8 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show8>
         <img
-          class={"builder-image" + (props.className ? " " + props.className : "") + " img-dc6700b4"}
+          class={"builder-image" + (props.className ? " " + props.className : "") + " img-040e729e"}
           loading={props.highPriority ? "eager" : "lazy"}
           fetchpriority={props.highPriority ? "high" : "auto"}
           alt={props.altText}
+          title={props.title}
           role={props.altText ? void 0 : "presentation"}
           style={{
             "object-position": props.backgroundPosition || "center",
@@ -1857,22 +1863,22 @@ function Image(props) {
       <Show8
         when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
       ><div
-        class="builder-image-sizer div-dc6700b4"
+        class="builder-image-sizer div-040e729e"
         style={{
           "padding-top": props.aspectRatio * 100 + "%"
         }}
       /></Show8>
       <Show8 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show8>
-      <Show8 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-dc6700b4-2">{props.children}</div></Show8>
+      <Show8 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-040e729e-2">{props.children}</div></Show8>
     </>
-    <style>{`.img-dc6700b4 {
+    <style>{`.img-040e729e {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-dc6700b4 {
+}.div-040e729e {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-dc6700b4-2 {
+}.div-040e729e-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1908,7 +1914,7 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount9, on as on5, createEffect as createEffect5, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
+import { onMount as onMount9, on as on6, createEffect as createEffect6, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
 import { Show as Show16, For as For9, onMount as onMount8, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
@@ -2806,6 +2812,10 @@ var componentInfo5 = {
     name: "altText",
     type: "string",
     helperText: "Text to display when the user has images off"
+  }, {
+    name: "title",
+    type: "string",
+    helperText: "Text to display when hovering over the asset"
   }, {
     name: "height",
     type: "number",
@@ -3616,7 +3626,7 @@ var componentInfo12 = {
 };
 
 // src/blocks/custom-code/custom-code.tsx
-import { onMount as onMount5, on as on2, createEffect as createEffect2, createMemo as createMemo12, createSignal as createSignal12 } from "solid-js";
+import { onMount as onMount5, on as on3, createEffect as createEffect3, createMemo as createMemo12, createSignal as createSignal12 } from "solid-js";
 function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal12([]);
   const [scriptsRun, setScriptsRun] = createSignal12([]);
@@ -3666,7 +3676,7 @@ function CustomCode(props) {
       runScripts();
     }
   }
-  createEffect2(on2(() => [onUpdateFn_0_props_code()], onUpdateFn_0));
+  createEffect3(on3(() => [onUpdateFn_0_props_code()], onUpdateFn_0));
   return <><div
     class={"builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")}
     ref={elementRef}
@@ -3694,7 +3704,7 @@ var componentInfo13 = {
 };
 
 // src/blocks/embed/embed.tsx
-import { on as on3, createEffect as createEffect3, createMemo as createMemo13, createSignal as createSignal13 } from "solid-js";
+import { on as on4, createEffect as createEffect4, createMemo as createMemo13, createSignal as createSignal13 } from "solid-js";
 
 // src/blocks/embed/helpers.ts
 var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
@@ -3736,8 +3746,8 @@ function Embed(props) {
       findAndRunScripts();
     }
   }
-  createEffect3(
-    on3(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0)
+  createEffect4(
+    on4(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0)
   );
   return <><div class="builder-embed" ref={elem} innerHTML={props.content} /></>;
 }
@@ -4828,8 +4838,8 @@ var getUpdateVariantVisibilityScript = ({
 import {
   Show as Show14,
   onMount as onMount7,
-  on as on4,
-  createEffect as createEffect4,
+  on as on5,
+  createEffect as createEffect5,
   createMemo as createMemo16,
   createSignal as createSignal16
 } from "solid-js";
@@ -4841,7 +4851,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.3";
+var SDK_VERSION = "4.0.4";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5926,15 +5936,15 @@ function EnableEditor(props) {
       mergeNewContent(props.content);
     }
   }
-  createEffect4(on4(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
+  createEffect5(on5(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
   const onUpdateFn_1_props_builderContextSignal_rootState = createMemo16(
     () => props.builderContextSignal.rootState
   );
   function onUpdateFn_1() {
     emitStateUpdate();
   }
-  createEffect4(
-    on4(
+  createEffect5(
+    on5(
       () => [onUpdateFn_1_props_builderContextSignal_rootState()],
       onUpdateFn_1
     )
@@ -5945,7 +5955,7 @@ function EnableEditor(props) {
       mergeNewRootState(props.data);
     }
   }
-  createEffect4(on4(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
+  createEffect5(on5(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
   const onUpdateFn_3_props_locale = createMemo16(() => props.locale);
   function onUpdateFn_3() {
     if (props.locale) {
@@ -5954,7 +5964,7 @@ function EnableEditor(props) {
       });
     }
   }
-  createEffect4(on4(() => [onUpdateFn_3_props_locale()], onUpdateFn_3));
+  createEffect5(on5(() => [onUpdateFn_3_props_locale()], onUpdateFn_3));
   return <><builder_context_default.Provider value={props.builderContextSignal}><Show14
     when={props.builderContextSignal.content || needsElementRefDivForEditing()}
   ><Dynamic5
@@ -6332,7 +6342,7 @@ function Symbol(props) {
   function onUpdateFn_0() {
     setContent();
   }
-  createEffect5(on5(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
+  createEffect6(on6(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
   return <><div class={className()} {...{}} {...props.attributes} {...{}}><Content_variants_default
     nonce={props.builderContext.nonce}
     isNestedRender={true}