@builder.io/sdk-react-nextjs 0.18.2 → 0.18.9

package/lib/browser/blocks/columns/columns.cjs

@@ -1,4 +1,4 @@
-"use strict";const o=require("react/jsx-runtime"),W=require("../../components/blocks/blocks.cjs"),j=require("../../components/dynamic-renderer/dynamic-renderer.cjs"),q=require("../../components/inlined-styles.cjs"),z=require("../../constants/device-sizes.cjs"),B=require("../../functions/get-class-prop-name.cjs"),p=require("../../functions/get-style.cjs"),A=require("./helpers.cjs");function N(e){var f,g;const a=function(){return typeof e.space=="number"?e.space||0:20},s=function(){return e.columns||[]},u=function(){return e.stackColumnsAt||"tablet"},y=function(t){return t.link?e.builderLinkComponent||"a":"div"},S=function(t){var i;return((i=s()[t])==null?void 0:i.width)||100/s().length},x=function(t){const i=S(t),l=a()*(s().length-1)*(i/100);return`calc(${i}% - ${l}px)`},c=function({stackedStyle:t,desktopStyle:i}){return u()==="tablet"?t:i},m=function({stackedStyle:t,desktopStyle:i}){return u()==="never"?i:t},d=function(){return e.stackColumnsAt==="never"?"row":e.reverseColumnsWhenStacked?"column-reverse":"column"},C=function(){return{"--flex-dir":d(),"--flex-dir-tablet":c({stackedStyle:d(),desktopStyle:"row"})}},v=function(t){const i=t===0?0:a(),l=x(t),r=`${i}px`,k="100%",h=0;return{...{display:"flex",flexDirection:"column",alignItems:"stretch"},width:l,["marginLeft"]:r,"--column-width-mobile":m({stackedStyle:k,desktopStyle:l}),"--column-margin-left-mobile":m({stackedStyle:h,desktopStyle:r}),"--column-width-tablet":c({stackedStyle:k,desktopStyle:l}),"--column-margin-left-tablet":c({stackedStyle:h,desktopStyle:r})}},b=function(t){var l,r;return z.getSizesForBreakpoints(((r=(l=e.builderContext.content)==null?void 0:l.meta)==null?void 0:r.breakpoints)||{})[t].max},w=function(){const t=`.${e.builderBlock.id}-breakpoints > .builder-column`;return`
+"use strict";const o=require("react/jsx-runtime"),W=require("../../components/blocks/blocks.cjs"),j=require("../../components/dynamic-renderer/dynamic-renderer.cjs"),q=require("../../components/inlined-styles.cjs"),z=require("../../constants/device-sizes.cjs"),B=require("../../functions/get-class-prop-name.cjs"),p=require("../../functions/get-style.cjs"),A=require("./helpers.cjs");function N(e){var g,f;const a=function(){return typeof e.space=="number"?e.space||0:20},s=function(){return e.columns||[]},u=function(){return e.stackColumnsAt||"tablet"},y=function(t){return t.link?e.builderLinkComponent||"a":"div"},S=function(t){var i;return((i=s()[t])==null?void 0:i.width)||100/s().length},x=function(t){const i=S(t),l=a()*(s().length-1)*(i/100);return`calc(${i}% - ${l}px)`},c=function({stackedStyle:t,desktopStyle:i}){return u()==="tablet"?t:i},d=function({stackedStyle:t,desktopStyle:i}){return u()==="never"?i:t},m=function(){return e.stackColumnsAt==="never"?"row":e.reverseColumnsWhenStacked?"column-reverse":"column"},C=function(){return{"--flex-dir":m(),"--flex-dir-tablet":c({stackedStyle:m(),desktopStyle:"row"})}},v=function(t){const i=t===0?0:a(),l=x(t),r=`${i}px`,h="100%",k=0;return{...{display:"flex",flexDirection:"column",alignItems:"stretch"},width:l,["marginLeft"]:r,"--column-width-mobile":d({stackedStyle:h,desktopStyle:l}),"--column-margin-left-mobile":d({stackedStyle:k,desktopStyle:r}),"--column-width-tablet":c({stackedStyle:h,desktopStyle:l}),"--column-margin-left-tablet":c({stackedStyle:k,desktopStyle:r})}},b=function(t){var l,r;return z.getSizesForBreakpoints(((r=(l=e.builderContext.content)==null?void 0:l.meta)==null?void 0:r.breakpoints)||{})[t].max},w=function(){const t=`.${e.builderBlock.id}-breakpoints > .builder-column`;return`
         @media (max-width: ${b("medium")}px) {
           .${e.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir-tablet);
@@ -22,7 +22,8 @@
             margin-left: var(--column-margin-left-mobile) !important;
           }
         },
-      `},$=function(t,i){return{...t.link?{href:t.link}:{},[B.getClassPropName()]:"builder-column",style:p.mapStyleObjToStrIfNeeded(v(i))}};return o.jsxs(o.Fragment,{children:[o.jsxs("div",{className:A.getColumnsClass((f=e.builderBlock)==null?void 0:f.id)+" div-1aff548e",style:C(),children:[o.jsx(q,{id:"builderio-columns",styles:w(),nonce:e.builderContext.nonce}),(g=e.columns)==null?void 0:g.map((n,t)=>o.jsx(j,{TagName:y(n),actionAttributes:{},attributes:$(n,t),children:o.jsx(W,{path:`columns.${t}.blocks`,parent:e.builderBlock.id,context:e.builderContext,registeredComponents:e.builderComponents,linkComponent:e.builderLinkComponent,blocks:n.blocks,styleProp:{flexGrow:"1"}})},t))]}),o.jsx("style",{children:`.div-1aff548e {
+      `},$=function(t,i){return{...t.link?{href:t.link}:{},[B.getClassPropName()]:"builder-column",style:p.mapStyleObjToStrIfNeeded(v(i))}};return o.jsxs(o.Fragment,{children:[o.jsxs("div",{className:A.getColumnsClass((g=e.builderBlock)==null?void 0:g.id)+" div-3cd4dbac",style:C(),children:[o.jsx(q,{id:"builderio-columns",styles:w(),nonce:e.builderContext.nonce}),(f=e.columns)==null?void 0:f.map((n,t)=>o.jsx(j,{TagName:y(n),actionAttributes:{},attributes:$(n,t),children:o.jsx(W,{path:`columns.${t}.blocks`,parent:e.builderBlock.id,context:e.builderContext,registeredComponents:e.builderComponents,linkComponent:e.builderLinkComponent,blocks:n.blocks,styleProp:{flexGrow:"1"}})},t))]}),o.jsx("style",{children:`.div-3cd4dbac {
   display: flex;
   line-height: normal;
+  height: 100%;
 }`})]})}module.exports=N;

package/lib/browser/blocks/columns/columns.mjs

@@ -7,7 +7,7 @@ import { getClassPropName as N } from "../../functions/get-class-prop-name.mjs";
 import { mapStyleObjToStrIfNeeded as T } from "../../functions/get-style.mjs";
 import { getColumnsClass as D } from "./helpers.mjs";
 function q(e) {
-  var b, g;
+  var f, g;
   const a = function() {
     return typeof e.space == "number" ? e.space || 0 : 20;
   }, s = function() {
@@ -69,7 +69,7 @@ function q(e) {
         desktopStyle: o
       })
     };
-  }, f = function(t) {
+  }, b = function(t) {
     var l, o;
     return L(
       ((o = (l = e.builderContext.content) == null ? void 0 : l.meta) == null ? void 0 : o.breakpoints) || {}
@@ -77,7 +77,7 @@ function q(e) {
   }, p = function() {
     const t = `.${e.builderBlock.id}-breakpoints > .builder-column`;
     return `
-        @media (max-width: ${f("medium")}px) {
+        @media (max-width: ${b("medium")}px) {
           .${e.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir-tablet);
             align-items: stretch;
@@ -89,7 +89,7 @@ function q(e) {
           }
         }
 
-        @media (max-width: ${f("small")}px) {
+        @media (max-width: ${b("small")}px) {
           .${e.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir);
             align-items: stretch;
@@ -114,7 +114,7 @@ function q(e) {
     /* @__PURE__ */ y(
       "div",
       {
-        className: D((b = e.builderBlock) == null ? void 0 : b.id) + " div-1aff548e",
+        className: D((f = e.builderBlock) == null ? void 0 : f.id) + " div-3cd4dbac",
         style: v(),
         children: [
           /* @__PURE__ */ r(
@@ -151,9 +151,10 @@ function q(e) {
         ]
       }
     ),
-    /* @__PURE__ */ r("style", { children: `.div-1aff548e {
+    /* @__PURE__ */ r("style", { children: `.div-3cd4dbac {
   display: flex;
   line-height: normal;
+  height: 100%;
 }` })
   ] });
 }

package/lib/browser/blocks/custom-code/custom-code.cjs

@@ -1 +1 @@
-"use client";"use strict";const p=require("react/jsx-runtime"),n=require("react");function l(r){const s=n.useRef(null),[i,d]=n.useState(()=>[]),[u,m]=n.useState(()=>[]);return n.useEffect(()=>{var a;if(!((a=s.current)!=null&&a.getElementsByTagName)||typeof window=="undefined")return;const o=s.current.getElementsByTagName("script");for(let c=0;c<o.length;c++){const e=o[c];if(e.src){if(i.includes(e.src))continue;i.push(e.src);const t=document.createElement("script");t.async=!0,t.src=e.src,document.head.appendChild(t)}else if(!e.type||["text/javascript","application/javascript","application/ecmascript"].includes(e.type)){if(u.includes(e.innerText))continue;try{u.push(e.innerText),new Function(e.innerText)()}catch(t){console.warn("`CustomCode`: Error running script:",t)}}}},[]),p.jsx("div",{ref:s,className:"builder-custom-code"+(r.replaceNodes?" replace-nodes":""),dangerouslySetInnerHTML:{__html:r.code}})}module.exports=l;
+"use client";"use strict";const l=require("react/jsx-runtime"),n=require("react"),p=require("../../functions/is-editing.cjs"),f=require("../../helpers/logger.cjs");function m(s){const r=n.useRef(null),[i,g]=n.useState(()=>[]),[u,E]=n.useState(()=>[]);function o(){var d;if(!r.current||!((d=r.current)!=null&&d.getElementsByTagName)||typeof window=="undefined")return;const a=r.current.getElementsByTagName("script");for(let c=0;c<a.length;c++){const e=a[c];if(e.src){if(i.includes(e.src))continue;i.push(e.src);const t=document.createElement("script");t.async=!0,t.src=e.src,document.head.appendChild(t)}else if(!e.type||["text/javascript","application/javascript","application/ecmascript"].includes(e.type)){if(u.includes(e.innerText))continue;try{u.push(e.innerText),new Function(e.innerText)()}catch(t){f.logger.warn("[BUILDER.IO] `CustomCode`: Error running script:",t)}}}}return n.useEffect(()=>{o()},[]),n.useEffect(()=>{p.isEditing()&&o()},[s.code]),l.jsx("div",{ref:r,className:"builder-custom-code"+(s.replaceNodes?" replace-nodes":""),dangerouslySetInnerHTML:{__html:s.code}})}module.exports=m;

package/lib/browser/blocks/custom-code/custom-code.mjs

@@ -1,19 +1,21 @@
 "use client";
-import { jsx as p } from "react/jsx-runtime";
-import { useRef as l, useState as a, useEffect as d } from "react";
-function h(s) {
-  const n = l(null), [c, m] = a(() => []), [i, f] = a(() => []);
-  return d(() => {
-    var u;
-    if (!((u = n.current) != null && u.getElementsByTagName) || typeof window == "undefined")
+import { jsx as l } from "react/jsx-runtime";
+import { useRef as m, useState as a, useEffect as d } from "react";
+import { isEditing as f } from "../../functions/is-editing.mjs";
+import { logger as g } from "../../helpers/logger.mjs";
+function w(r) {
+  const n = m(null), [s, y] = a(() => []), [i, h] = a(() => []);
+  function o() {
+    var p;
+    if (!n.current || !((p = n.current) != null && p.getElementsByTagName) || typeof window == "undefined")
       return;
-    const o = n.current.getElementsByTagName("script");
-    for (let r = 0; r < o.length; r++) {
-      const e = o[r];
+    const u = n.current.getElementsByTagName("script");
+    for (let c = 0; c < u.length; c++) {
+      const e = u[c];
       if (e.src) {
-        if (c.includes(e.src))
+        if (s.includes(e.src))
           continue;
-        c.push(e.src);
+        s.push(e.src);
         const t = document.createElement("script");
         t.async = !0, t.src = e.src, document.head.appendChild(t);
       } else if (!e.type || [
@@ -26,19 +28,27 @@ function h(s) {
         try {
           i.push(e.innerText), new Function(e.innerText)();
         } catch (t) {
-          console.warn("`CustomCode`: Error running script:", t);
+          g.warn(
+            "[BUILDER.IO] `CustomCode`: Error running script:",
+            t
+          );
         }
       }
     }
-  }, []), /* @__PURE__ */ p(
+  }
+  return d(() => {
+    o();
+  }, []), d(() => {
+    f() && o();
+  }, [r.code]), /* @__PURE__ */ l(
     "div",
     {
       ref: n,
-      className: "builder-custom-code" + (s.replaceNodes ? " replace-nodes" : ""),
-      dangerouslySetInnerHTML: { __html: s.code }
+      className: "builder-custom-code" + (r.replaceNodes ? " replace-nodes" : ""),
+      dangerouslySetInnerHTML: { __html: r.code }
     }
   );
 }
 export {
-  h as default
+  w as default
 };

package/lib/browser/blocks/embed/embed.cjs

@@ -1 +1 @@
-"use client";"use strict";const d=require("react/jsx-runtime"),r=require("react"),m=require("./helpers.cjs");function f(a){const t=r.useRef(null),[c,S]=r.useState(()=>[]),[i,h]=r.useState(()=>[]),[u,l]=r.useState(()=>!1);function p(){if(!t.current||!t.current.getElementsByTagName)return;const o=t.current.getElementsByTagName("script");for(let s=0;s<o.length;s++){const e=o[s];if(e.src&&!c.includes(e.src)){c.push(e.src);const n=document.createElement("script");n.async=!0,n.src=e.src,document.head.appendChild(n)}else if(m.isJsScript(e)&&!i.includes(e.innerText))try{i.push(e.innerText),new Function(e.innerText)()}catch(n){console.warn("`Embed`: Error running script:",n)}}}return r.useEffect(()=>{t.current&&!u&&(l(!0),p())},[t.current,u]),d.jsx("div",{className:"builder-embed",ref:t,dangerouslySetInnerHTML:{__html:a.content}})}module.exports=f;
+"use client";"use strict";const d=require("react/jsx-runtime"),r=require("react"),m=require("../../helpers/logger.cjs"),f=require("./helpers.cjs");function g(l){const t=r.useRef(null),[c,S]=r.useState(()=>[]),[i,h]=r.useState(()=>[]),[u,a]=r.useState(()=>!1);function p(){if(!t.current||!t.current.getElementsByTagName)return;const o=t.current.getElementsByTagName("script");for(let s=0;s<o.length;s++){const e=o[s];if(e.src&&!c.includes(e.src)){c.push(e.src);const n=document.createElement("script");n.async=!0,n.src=e.src,document.head.appendChild(n)}else if(f.isJsScript(e)&&!i.includes(e.innerText))try{i.push(e.innerText),new Function(e.innerText)()}catch(n){m.logger.warn("[BUILDER.IO] `Embed`: Error running script:",n)}}}return r.useEffect(()=>{t.current&&!u&&(a(!0),p())},[t.current,u]),d.jsx("div",{className:"builder-embed",ref:t,dangerouslySetInnerHTML:{__html:l.content}})}module.exports=g;

package/lib/browser/blocks/embed/embed.mjs

@@ -1,35 +1,36 @@
 "use client";
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { useRef as d, useState as s, useEffect as f } from "react";
-import { isJsScript as g } from "./helpers.mjs";
-function y(l) {
-  const t = d(null), [c, h] = s(() => []), [i, E] = s(() => []), [u, p] = s(() => !1);
-  function a() {
+import { logger as g } from "../../helpers/logger.mjs";
+import { isJsScript as E } from "./helpers.mjs";
+function y(m) {
+  const t = d(null), [c, h] = s(() => []), [i, I] = s(() => []), [u, p] = s(() => !1);
+  function l() {
     if (!t.current || !t.current.getElementsByTagName)
       return;
     const o = t.current.getElementsByTagName("script");
-    for (let r = 0; r < o.length; r++) {
-      const e = o[r];
+    for (let n = 0; n < o.length; n++) {
+      const e = o[n];
       if (e.src && !c.includes(e.src)) {
         c.push(e.src);
-        const n = document.createElement("script");
-        n.async = !0, n.src = e.src, document.head.appendChild(n);
-      } else if (g(e) && !i.includes(e.innerText))
+        const r = document.createElement("script");
+        r.async = !0, r.src = e.src, document.head.appendChild(r);
+      } else if (E(e) && !i.includes(e.innerText))
         try {
           i.push(e.innerText), new Function(e.innerText)();
-        } catch (n) {
-          console.warn("`Embed`: Error running script:", n);
+        } catch (r) {
+          g.warn("[BUILDER.IO] `Embed`: Error running script:", r);
         }
     }
   }
   return f(() => {
-    t.current && !u && (p(!0), a());
-  }, [t.current, u]), /* @__PURE__ */ m(
+    t.current && !u && (p(!0), l());
+  }, [t.current, u]), /* @__PURE__ */ a(
     "div",
     {
       className: "builder-embed",
       ref: t,
-      dangerouslySetInnerHTML: { __html: l.content }
+      dangerouslySetInnerHTML: { __html: m.content }
     }
   );
 }

package/lib/browser/blocks/image/component-info.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../../constants/file-types.cjs"),p={name:"Image",static:!0,image:"https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",defaultStyles:{position:"relative",minHeight:"20px",minWidth:"20px",overflow:"hidden"},canHaveChildren:!0,inputs:[{name:"image",type:"file",bubble:!0,allowedFileTypes:m.IMAGE_FILE_TYPES,required:!0,defaultValue:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",onChange:t=>{t.delete("srcset"),t.delete("noWebp");function s(e,o=6e4){return new Promise((u,n)=>{const i=document.createElement("img");let l=!1;i.onload=()=>{l=!0,u(i)},i.addEventListener("error",d=>{console.warn("Image load failed",d.error),n(d.error)}),i.src=e,setTimeout(()=>{l||n(new Error("Image load timed out"))},o)})}function h(e){return Math.round(e*1e3)/1e3}const a=t.get("image"),r=t.get("aspectRatio");if(fetch(a).then(e=>e.blob()).then(e=>{e.type.includes("svg")&&t.set("noWebp",!0)}),a&&(!r||r===.7041))return s(a).then(e=>{const o=t.get("aspectRatio");t.get("image")===a&&(!o||o===.7041)&&e.width&&e.height&&(t.set("aspectRatio",h(e.height/e.width)),t.set("height",e.height),t.set("width",e.width))})}},{name:"backgroundSize",type:"text",defaultValue:"cover",enum:[{label:"contain",value:"contain",helperText:"The image should never get cropped"},{label:"cover",value:"cover",helperText:"The image should fill it's box, cropping when needed"}]},{name:"backgroundPosition",type:"text",defaultValue:"center",enum:["center","top","left","right","bottom","top left","top right","bottom left","bottom right"]},{name:"altText",type:"string",helperText:"Text to display when the user has images off"},{name:"height",type:"number",hideFromUI:!0},{name:"width",type:"number",hideFromUI:!0},{name:"sizes",type:"string",hideFromUI:!0},{name:"srcset",type:"string",hideFromUI:!0},{name:"lazy",type:"boolean",defaultValue:!0,hideFromUI:!0},{name:"fitContent",type:"boolean",helperText:"When child blocks are provided, fit to them instead of using the image's aspect ratio",defaultValue:!0},{name:"highPriority",type:"boolean",advanced:!0,helperText:"Mark this image as high priority compared to other images on the page. This prevents lazy loading of the image and tells the browser to load this image before others on the page."},{name:"aspectRatio",type:"number",helperText:"This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",advanced:!0,defaultValue:.7041}],shouldReceiveBuilderProps:{builderBlock:!0}};exports.componentInfo=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../../constants/file-types.cjs"),m={name:"Image",static:!0,image:"https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",defaultStyles:{position:"relative",minHeight:"20px",minWidth:"20px",overflow:"hidden"},canHaveChildren:!0,inputs:[{name:"image",type:"file",bubble:!0,allowedFileTypes:p.IMAGE_FILE_TYPES,required:!0,defaultValue:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",onChange:t=>{t.delete("srcset"),t.delete("noWebp");function d(e,o=6e4){return new Promise((u,n)=>{const i=document.createElement("img");let l=!1;i.onload=()=>{l=!0,u(i)},i.addEventListener("error",s=>{console.warn("Image load failed",s.error),n(s.error)}),i.src=e,setTimeout(()=>{l||n(new Error("Image load timed out"))},o)})}function h(e){return Math.round(e*1e3)/1e3}const a=t.get("image"),r=t.get("aspectRatio");if(fetch(a).then(e=>e.blob()).then(e=>{e.type.includes("svg")&&t.set("noWebp",!0)}),a&&(!r||r===.7041))return d(a).then(e=>{const o=t.get("aspectRatio");t.get("image")===a&&(!o||o===.7041)&&e.width&&e.height&&(t.set("aspectRatio",h(e.height/e.width)),t.set("height",e.height),t.set("width",e.width))})}},{name:"backgroundSize",type:"text",defaultValue:"cover",enum:[{label:"contain",value:"contain",helperText:"The image should never get cropped"},{label:"cover",value:"cover",helperText:"The image should fill it's box, cropping when needed"}]},{name:"backgroundPosition",type:"text",defaultValue:"center",enum:["center","top","left","right","bottom","top left","top right","bottom left","bottom right"]},{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",hideFromUI:!0},{name:"width",type:"number",hideFromUI:!0},{name:"sizes",type:"string",hideFromUI:!0},{name:"srcset",type:"string",hideFromUI:!0},{name:"lazy",type:"boolean",defaultValue:!0,hideFromUI:!0},{name:"fitContent",type:"boolean",helperText:"When child blocks are provided, fit to them instead of using the image's aspect ratio",defaultValue:!0},{name:"highPriority",type:"boolean",advanced:!0,helperText:"Mark this image as high priority compared to other images on the page. This prevents lazy loading of the image and tells the browser to load this image before others on the page."},{name:"aspectRatio",type:"number",helperText:"This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",advanced:!0,defaultValue:.7041}],shouldReceiveBuilderProps:{builderBlock:!0}};exports.componentInfo=m;

package/lib/browser/blocks/image/component-info.mjs

@@ -1,5 +1,5 @@
-import { IMAGE_FILE_TYPES as m } from "../../constants/file-types.mjs";
-const g = {
+import { IMAGE_FILE_TYPES as p } from "../../constants/file-types.mjs";
+const c = {
   name: "Image",
   static: !0,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
@@ -14,19 +14,19 @@ const g = {
     name: "image",
     type: "file",
     bubble: !0,
-    allowedFileTypes: m,
+    allowedFileTypes: p,
     required: !0,
     defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
     onChange: (t) => {
       t.delete("srcset"), t.delete("noWebp");
-      function h(e, o = 6e4) {
+      function d(e, o = 6e4) {
         return new Promise((u, n) => {
           const i = document.createElement("img");
           let l = !1;
           i.onload = () => {
             l = !0, u(i);
-          }, i.addEventListener("error", (d) => {
-            console.warn("Image load failed", d.error), n(d.error);
+          }, i.addEventListener("error", (h) => {
+            console.warn("Image load failed", h.error), n(h.error);
           }), i.src = e, setTimeout(() => {
             l || n(new Error("Image load timed out"));
           }, o);
@@ -39,7 +39,7 @@ const g = {
       if (fetch(a).then((e) => e.blob()).then((e) => {
         e.type.includes("svg") && t.set("noWebp", !0);
       }), a && (!r || r === 0.7041))
-        return h(a).then((e) => {
+        return d(a).then((e) => {
           const o = t.get("aspectRatio");
           t.get("image") === a && (!o || o === 0.7041) && e.width && e.height && (t.set("aspectRatio", s(e.height / e.width)), t.set("height", e.height), t.set("width", e.width));
         });
@@ -66,6 +66,10 @@ const g = {
     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",
@@ -109,5 +113,5 @@ const g = {
   }
 };
 export {
-  g as componentInfo
+  c as componentInfo
 };

package/lib/browser/blocks/image/image.cjs

@@ -1,11 +1,11 @@
-"use client";"use strict";const t=require("react/jsx-runtime"),a=require("./image.helpers.cjs");function b(e){var s,r,u,o,d,g;function n(){var h;const i=e.image||e.src;if(!i||!(typeof i=="string"&&(i.match(/builder\.io/)||i.match(/cdn\.shopify\.com/))))return e.srcset;if(!e.noWebp){if(e.srcset&&((h=e.image)!=null&&h.includes("builder.io/api/v1/image"))){if(!e.srcset.includes(e.image.split("?")[0]))return console.debug("Removed given srcset"),a.getSrcSet(i)}else if(e.image&&!e.srcset)return a.getSrcSet(i);return a.getSrcSet(i)}}function l(){var c;return(c=n==null?void 0:n())!=null&&c.match(/builder\.io/)&&!e.noWebp?n().replace(/\?/g,"?format=webp&"):""}function m(){const c={position:"absolute",height:"100%",width:"100%",left:"0px",top:"0px"};return e.aspectRatio?c:void 0}return t.jsxs(t.Fragment,{children:[t.jsxs(t.Fragment,{children:[t.jsxs("picture",{children:[l()?t.jsx("source",{type:"image/webp",srcSet:l()}):null,t.jsx("img",{loading:e.highPriority?"eager":"lazy",fetchPriority:e.highPriority?"high":"auto",alt:e.altText,role:e.altText?void 0:"presentation",style:{objectPosition:e.backgroundPosition||"center",objectFit:e.backgroundSize||"cover",...m()},className:"builder-image"+(e.className?" "+e.className:"")+" img-606b99a4",src:e.image,srcSet:n(),sizes:e.sizes})]}),e.aspectRatio&&!((r=(s=e.builderBlock)==null?void 0:s.children)!=null&&r.length&&e.fitContent)?t.jsx("div",{className:"builder-image-sizer div-606b99a4",style:{paddingTop:e.aspectRatio*100+"%"}}):null,(o=(u=e.builderBlock)==null?void 0:u.children)!=null&&o.length&&e.fitContent?t.jsx(t.Fragment,{children:e.children}):null,!e.fitContent&&((g=(d=e.builderBlock)==null?void 0:d.children)!=null&&g.length)?t.jsx("div",{className:"div-606b99a4-2",children:e.children}):null]}),t.jsx("style",{children:`.img-606b99a4 {
+"use client";"use strict";const t=require("react/jsx-runtime"),l=require("./image.helpers.cjs");function f(e){var s,r,u,d,o,g;function n(){var h;const i=e.image||e.src;if(!i||!(typeof i=="string"&&(i.match(/builder\.io/)||i.match(/cdn\.shopify\.com/))))return e.srcset;if(!e.noWebp){if(e.srcset&&((h=e.image)!=null&&h.includes("builder.io/api/v1/image"))){if(!e.srcset.includes(e.image.split("?")[0]))return console.debug("Removed given srcset"),l.getSrcSet(i)}else if(e.image&&!e.srcset)return l.getSrcSet(i);return l.getSrcSet(i)}}function a(){var c;return(c=n==null?void 0:n())!=null&&c.match(/builder\.io/)&&!e.noWebp?n().replace(/\?/g,"?format=webp&"):""}function m(){const c={position:"absolute",height:"100%",width:"100%",left:"0px",top:"0px"};return e.aspectRatio?c:void 0}return t.jsxs(t.Fragment,{children:[t.jsxs(t.Fragment,{children:[t.jsxs("picture",{children:[a()?t.jsx("source",{type:"image/webp",srcSet:a()}):null,t.jsx("img",{loading:e.highPriority?"eager":"lazy",fetchPriority:e.highPriority?"high":"auto",alt:e.altText,title:e.title,role:e.altText?void 0:"presentation",style:{objectPosition:e.backgroundPosition||"center",objectFit:e.backgroundSize||"cover",...m()},className:"builder-image"+(e.className?" "+e.className:"")+" img-0525a549",src:e.image,srcSet:n(),sizes:e.sizes})]}),e.aspectRatio&&!((r=(s=e.builderBlock)==null?void 0:s.children)!=null&&r.length&&e.fitContent)?t.jsx("div",{className:"builder-image-sizer div-0525a549",style:{paddingTop:e.aspectRatio*100+"%"}}):null,(d=(u=e.builderBlock)==null?void 0:u.children)!=null&&d.length&&e.fitContent?t.jsx(t.Fragment,{children:e.children}):null,!e.fitContent&&((g=(o=e.builderBlock)==null?void 0:o.children)!=null&&g.length)?t.jsx("div",{className:"div-0525a549-2",children:e.children}):null]}),t.jsx("style",{children:`.img-0525a549 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-606b99a4 {
+}.div-0525a549 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-606b99a4-2 {
+}.div-0525a549-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -14,4 +14,4 @@
   left: 0;
   width: 100%;
   height: 100%;
-}`})]})}module.exports=b;
+}`})]})}module.exports=f;

package/lib/browser/blocks/image/image.mjs

@@ -2,16 +2,16 @@
 import { jsxs as a, Fragment as c, jsx as t } from "react/jsx-runtime";
 import { getSrcSet as o } from "./image.helpers.mjs";
 function x(e) {
-  var d, s, u, g, h, m;
+  var d, u, s, g, h, m;
   function n() {
-    var b;
+    var f;
     const i = e.image || e.src;
     if (!i || // We can auto add srcset for cdn.builder.io and shopify
     // images, otherwise you can supply this prop manually
     !(typeof i == "string" && (i.match(/builder\.io/) || i.match(/cdn\.shopify\.com/))))
       return e.srcset;
     if (!e.noWebp) {
-      if (e.srcset && ((b = e.image) != null && b.includes("builder.io/api/v1/image"))) {
+      if (e.srcset && ((f = e.image) != null && f.includes("builder.io/api/v1/image"))) {
         if (!e.srcset.includes(e.image.split("?")[0]))
           return console.debug("Removed given srcset"), o(i);
       } else if (e.image && !e.srcset)
@@ -23,7 +23,7 @@ function x(e) {
     var l;
     return (l = n == null ? void 0 : n()) != null && l.match(/builder\.io/) && !e.noWebp ? n().replace(/\?/g, "?format=webp&") : "";
   }
-  function f() {
+  function b() {
     const l = {
       position: "absolute",
       height: "100%",
@@ -43,39 +43,40 @@ function x(e) {
             loading: e.highPriority ? "eager" : "lazy",
             fetchPriority: e.highPriority ? "high" : "auto",
             alt: e.altText,
+            title: e.title,
             role: e.altText ? void 0 : "presentation",
             style: {
               objectPosition: e.backgroundPosition || "center",
               objectFit: e.backgroundSize || "cover",
-              ...f()
+              ...b()
             },
-            className: "builder-image" + (e.className ? " " + e.className : "") + " img-606b99a4",
+            className: "builder-image" + (e.className ? " " + e.className : "") + " img-0525a549",
             src: e.image,
             srcSet: n(),
             sizes: e.sizes
           }
         )
       ] }),
-      e.aspectRatio && !((s = (d = e.builderBlock) == null ? void 0 : d.children) != null && s.length && e.fitContent) ? /* @__PURE__ */ t(
+      e.aspectRatio && !((u = (d = e.builderBlock) == null ? void 0 : d.children) != null && u.length && e.fitContent) ? /* @__PURE__ */ t(
         "div",
         {
-          className: "builder-image-sizer div-606b99a4",
+          className: "builder-image-sizer div-0525a549",
           style: {
             paddingTop: e.aspectRatio * 100 + "%"
           }
         }
       ) : null,
-      (g = (u = e.builderBlock) == null ? void 0 : u.children) != null && g.length && e.fitContent ? /* @__PURE__ */ t(c, { children: e.children }) : null,
-      !e.fitContent && ((m = (h = e.builderBlock) == null ? void 0 : h.children) != null && m.length) ? /* @__PURE__ */ t("div", { className: "div-606b99a4-2", children: e.children }) : null
+      (g = (s = e.builderBlock) == null ? void 0 : s.children) != null && g.length && e.fitContent ? /* @__PURE__ */ t(c, { children: e.children }) : null,
+      !e.fitContent && ((m = (h = e.builderBlock) == null ? void 0 : h.children) != null && m.length) ? /* @__PURE__ */ t("div", { className: "div-0525a549-2", children: e.children }) : null
     ] }),
-    /* @__PURE__ */ t("style", { children: `.img-606b99a4 {
+    /* @__PURE__ */ t("style", { children: `.img-0525a549 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-606b99a4 {
+}.div-0525a549 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-606b99a4-2 {
+}.div-0525a549-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/lib/browser/components/blocks/blocks-wrapper.cjs

@@ -1,5 +1,5 @@
-"use client";"use strict";const i=require("react/jsx-runtime"),r=require("react"),l=require("../../functions/is-editing.cjs");function u(e){const c=r.useRef(null);function o(){var t;return["builder-blocks",(t=e.blocks)!=null&&t.length?"":"no-blocks",e.classNameProp].filter(Boolean).join(" ")}function a(){if(!e.path)return;const t="this.",n="component.options.";return e.path.startsWith(t)?e.path.replace(t,""):e.path.startsWith(n)?e.path:`${n}${e.path||""}`}function s(){var t,n;l.isEditing()&&!((t=e.blocks)!=null&&t.length)&&((n=window.parent)==null||n.postMessage({type:"builder.clickEmptyBlocks",data:{parentElementId:e.parent,dataPath:a()}},"*"))}function d(){var t,n;l.isEditing()&&!((t=e.blocks)!=null&&t.length)&&((n=window.parent)==null||n.postMessage({type:"builder.hoverEmptyBlocks",data:{parentElementId:e.parent,dataPath:a()}},"*"))}return r.useEffect(()=>{},[]),i.jsxs(i.Fragment,{children:[i.jsx(e.BlocksWrapper,{ref:c,className:o()+" props-blocks-wrapper-78b0d3be","builder-path":a(),"builder-parent-id":e.parent,style:e.styleProp,onClick:t=>s(),onMouseEnter:t=>d(),onKeyPress:t=>s(),...e.BlocksWrapperProps,children:e.children}),i.jsx("style",{children:`.props-blocks-wrapper-78b0d3be {
+"use client";"use strict";const a=require("react/jsx-runtime"),i=require("react"),r=require("../../functions/is-editing.cjs");function d(e){const c=i.useRef(null);i.useState(()=>!1);function o(){var t;return["builder-blocks",(t=e.blocks)!=null&&t.length?"":"no-blocks",e.classNameProp].filter(Boolean).join(" ")}function s(){if(!e.path)return;const t="this.",n="component.options.";return e.path.startsWith(t)?e.path.replace(t,""):e.path.startsWith(n)?e.path:`${n}${e.path||""}`}function l(){var t,n;r.isEditing()&&!((t=e.blocks)!=null&&t.length)&&((n=window.parent)==null||n.postMessage({type:"builder.clickEmptyBlocks",data:{parentElementId:e.parent,dataPath:s()}},"*"))}function u(){var t,n;r.isEditing()&&!((t=e.blocks)!=null&&t.length)&&((n=window.parent)==null||n.postMessage({type:"builder.hoverEmptyBlocks",data:{parentElementId:e.parent,dataPath:s()}},"*"))}return i.useEffect(()=>{},[]),i.useEffect(()=>{},[e.blocks]),a.jsxs(a.Fragment,{children:[a.jsx(e.BlocksWrapper,{ref:c,className:o()+" props-blocks-wrapper-2b05e766","builder-path":s(),"builder-parent-id":e.parent,style:e.styleProp,onClick:t=>l(),onMouseEnter:t=>u(),onKeyPress:t=>l(),...e.BlocksWrapperProps,children:e.children}),a.jsx("style",{children:`.props-blocks-wrapper-2b05e766 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-}`})]})}module.exports=u;
+}`})]})}module.exports=d;

package/lib/browser/components/blocks/blocks-wrapper.mjs

@@ -1,10 +1,11 @@
 "use client";
-import { jsxs as d, Fragment as h, jsx as r } from "react/jsx-runtime";
-import { useRef as f, useEffect as u } from "react";
-import { isEditing as i } from "../../functions/is-editing.mjs";
-function k(e) {
-  const o = f(null);
-  function s() {
+import { jsxs as h, Fragment as f, jsx as r } from "react/jsx-runtime";
+import { useRef as u, useState as k, useEffect as i } from "react";
+import { isEditing as s } from "../../functions/is-editing.mjs";
+function y(e) {
+  const c = u(null);
+  k(() => !1);
+  function o() {
     var t;
     return [
       "builder-blocks",
@@ -20,7 +21,7 @@ function k(e) {
   }
   function l() {
     var t, n;
-    i() && !((t = e.blocks) != null && t.length) && ((n = window.parent) == null || n.postMessage(
+    s() && !((t = e.blocks) != null && t.length) && ((n = window.parent) == null || n.postMessage(
       {
         type: "builder.clickEmptyBlocks",
         data: {
@@ -31,9 +32,9 @@ function k(e) {
       "*"
     ));
   }
-  function c() {
+  function d() {
     var t, n;
-    i() && !((t = e.blocks) != null && t.length) && ((n = window.parent) == null || n.postMessage(
+    s() && !((t = e.blocks) != null && t.length) && ((n = window.parent) == null || n.postMessage(
       {
         type: "builder.hoverEmptyBlocks",
         data: {
@@ -44,24 +45,25 @@ function k(e) {
       "*"
     ));
   }
-  return u(() => {
-  }, []), /* @__PURE__ */ d(h, { children: [
+  return i(() => {
+  }, []), i(() => {
+  }, [e.blocks]), /* @__PURE__ */ h(f, { children: [
     /* @__PURE__ */ r(
       e.BlocksWrapper,
       {
-        ref: o,
-        className: s() + " props-blocks-wrapper-78b0d3be",
+        ref: c,
+        className: o() + " props-blocks-wrapper-2b05e766",
         "builder-path": a(),
         "builder-parent-id": e.parent,
         style: e.styleProp,
         onClick: (t) => l(),
-        onMouseEnter: (t) => c(),
+        onMouseEnter: (t) => d(),
         onKeyPress: (t) => l(),
         ...e.BlocksWrapperProps,
         children: e.children
       }
     ),
-    /* @__PURE__ */ r("style", { children: `.props-blocks-wrapper-78b0d3be {
+    /* @__PURE__ */ r("style", { children: `.props-blocks-wrapper-2b05e766 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -69,5 +71,5 @@ function k(e) {
   ] });
 }
 export {
-  k as default
+  y as default
 };

package/lib/browser/components/content-variants/helpers.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../constants/target.cjs"),S=require("../../functions/is-browser.cjs"),r=require("./inlined-fns.cjs"),e="builderIoAbTest",s="builderIoRenderContent",a=i=>Object.values((i==null?void 0:i.variations)||{}).map(t=>({...t,testVariationId:t.id,id:i==null?void 0:i.id})),d=({canTrack:i,content:t})=>!(!(a(t).length>0)||!i||S.isBrowser()),I=i=>i==="react"||i==="reactNative",n=I(o.TARGET),T=()=>`
-  window.${e} = ${r.UPDATE_COOKIES_AND_STYLES_SCRIPT}
-  window.${s} = ${r.UPDATE_VARIANT_VISIBILITY_SCRIPT}
-  `,c=(i,t)=>`
-  window.${e}(
-    "${t}",${JSON.stringify(i)}, ${n}
-  )`,g=({contentId:i,variationId:t})=>`window.${s}(
-    "${t}", "${i}", ${n}
-  )`;exports.checkShouldRenderVariants=d;exports.getInitVariantsFnsScriptString=T;exports.getUpdateCookieAndStylesScript=c;exports.getUpdateVariantVisibilityScript=g;exports.getVariants=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../constants/target.cjs"),S=require("../../functions/is-browser.cjs"),r=require("./inlined-fns.cjs"),s="builderIoAbTest",a="builderIoRenderContent",n=i=>Object.values((i==null?void 0:i.variations)||{}).map(t=>({...t,testVariationId:t.id,id:i==null?void 0:i.id})),d=({canTrack:i,content:t})=>!(!(n(t).length>0)||!i||S.isBrowser()),I=i=>i==="react"||i==="reactNative",T=e.TARGET==="angular",o=I(e.TARGET),c=()=>`
+  window.${s} = ${r.UPDATE_COOKIES_AND_STYLES_SCRIPT}
+  window.${a} = ${r.UPDATE_VARIANT_VISIBILITY_SCRIPT}
+  `,g=(i,t)=>`
+  window.${s}(
+    "${t}",${JSON.stringify(i)}, ${o}, ${T}
+  )`,l=({contentId:i,variationId:t})=>`window.${a}(
+    "${t}", "${i}", ${o}
+  )`;exports.checkShouldRenderVariants=d;exports.getInitVariantsFnsScriptString=c;exports.getUpdateCookieAndStylesScript=g;exports.getUpdateVariantVisibilityScript=l;exports.getVariants=n;

package/lib/browser/components/content-variants/helpers.mjs

@@ -1,29 +1,29 @@
-import { TARGET as e } from "../../constants/target.mjs";
+import { TARGET as t } from "../../constants/target.mjs";
 import { isBrowser as o } from "../../functions/is-browser.mjs";
-import { UPDATE_COOKIES_AND_STYLES_SCRIPT as I, UPDATE_VARIANT_VISIBILITY_SCRIPT as n } from "./inlined-fns.mjs";
-const t = "builderIoAbTest", s = "builderIoRenderContent", S = (i) => Object.values((i == null ? void 0 : i.variations) || {}).map((r) => ({
+import { UPDATE_COOKIES_AND_STYLES_SCRIPT as n, UPDATE_VARIANT_VISIBILITY_SCRIPT as I } from "./inlined-fns.mjs";
+const s = "builderIoAbTest", a = "builderIoRenderContent", S = (i) => Object.values((i == null ? void 0 : i.variations) || {}).map((r) => ({
   ...r,
   testVariationId: r.id,
   id: i == null ? void 0 : i.id
-})), $ = ({
+})), V = ({
   canTrack: i,
   content: r
-}) => !(!(S(r).length > 0) || !i || o()), T = (i) => i === "react" || i === "reactNative", a = T(e), E = () => `
-  window.${t} = ${I}
+}) => !(!(S(r).length > 0) || !i || o()), T = (i) => i === "react" || i === "reactNative", d = t === "angular", e = T(t), g = () => `
   window.${s} = ${n}
-  `, f = (i, r) => `
-  window.${t}(
-    "${r}",${JSON.stringify(i)}, ${a}
-  )`, l = ({
+  window.${a} = ${I}
+  `, u = (i, r) => `
+  window.${s}(
+    "${r}",${JSON.stringify(i)}, ${e}, ${d}
+  )`, E = ({
   contentId: i,
   variationId: r
-}) => `window.${s}(
-    "${r}", "${i}", ${a}
+}) => `window.${a}(
+    "${r}", "${i}", ${e}
   )`;
 export {
-  $ as checkShouldRenderVariants,
-  E as getInitVariantsFnsScriptString,
-  f as getUpdateCookieAndStylesScript,
-  l as getUpdateVariantVisibilityScript,
+  V as checkShouldRenderVariants,
+  g as getInitVariantsFnsScriptString,
+  u as getUpdateCookieAndStylesScript,
+  E as getUpdateVariantVisibilityScript,
   S as getVariants
 };

package/lib/browser/components/content-variants/inlined-fns.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=`function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=`function updateCookiesAndStyles(contentId, variants, isHydrationTarget, isAngularSDK) {
   function getAndSetVariantId() {
     function setCookie(name, value, days) {
       let expires = '';
@@ -40,7 +40,10 @@
     return contentId;
   }
   const winningVariantId = getAndSetVariantId();
-  const styleEl = document.currentScript?.previousElementSibling;
+  let styleEl = document.currentScript?.previousElementSibling;
+  if (isAngularSDK) {
+    styleEl = document.currentScript?.parentElement?.previousElementSibling?.querySelector('style');
+  }
   if (isHydrationTarget) {
     styleEl.remove();
     const thisScriptEl = document.currentScript;

package/lib/browser/components/content-variants/inlined-fns.mjs

@@ -1,4 +1,4 @@
-const n = `function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {
+const n = `function updateCookiesAndStyles(contentId, variants, isHydrationTarget, isAngularSDK) {
   function getAndSetVariantId() {
     function setCookie(name, value, days) {
       let expires = '';
@@ -40,7 +40,10 @@ const n = `function updateCookiesAndStyles(contentId, variants, isHydrationTarge
     return contentId;
   }
   const winningVariantId = getAndSetVariantId();
-  const styleEl = document.currentScript?.previousElementSibling;
+  let styleEl = document.currentScript?.previousElementSibling;
+  if (isAngularSDK) {
+    styleEl = document.currentScript?.parentElement?.previousElementSibling?.querySelector('style');
+  }
   if (isHydrationTarget) {
     styleEl.remove();
     const thisScriptEl = document.currentScript;

package/lib/browser/constants/sdk-version.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="0.18.2";exports.SDK_VERSION=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="0.18.9";exports.SDK_VERSION=e;

package/lib/browser/constants/sdk-version.mjs

@@ -1,4 +1,4 @@
-const o = "0.18.2";
+const o = "0.18.9";
 export {
   o as SDK_VERSION
 };