@builder.io/sdk-react-nextjs 0.17.7 → 0.18.0

package/lib/browser/constants/device-sizes.mjs

@@ -1,7 +1,12 @@
-import { fastClone as l } from "../functions/fast-clone.mjs";
+import { fastClone as r } from "../functions/fast-clone.mjs";
 const o = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -15,34 +20,46 @@ const o = {
     default: 991,
     max: 1200
   }
-}, s = (a, e = o) => `@media (max-width: ${e[a].max}px)`, x = ({
-  small: a,
-  medium: e
-}) => {
-  const m = l(o);
-  if (!a || !e)
+}, d = (a, m = o) => `@media (max-width: ${m[a].max}px)`, f = (a) => {
+  const m = r(o);
+  if (!a)
+    return m;
+  const {
+    xsmall: l,
+    small: e,
+    medium: t
+  } = a;
+  if (l) {
+    const x = Math.floor(l / 2);
+    m.xsmall = {
+      max: l,
+      min: x,
+      default: x + 1
+    };
+  }
+  if (!e || !t)
     return m;
-  const t = Math.floor(a / 2);
+  const i = l ? m.xsmall.max + 1 : Math.floor(e / 2);
   m.small = {
-    max: a,
-    min: t,
-    default: t + 1
-  };
-  const i = m.small.max + 1;
-  m.medium = {
     max: e,
     min: i,
     default: i + 1
   };
-  const n = m.medium.max + 1;
+  const n = m.small.max + 1;
+  m.medium = {
+    max: t,
+    min: n,
+    default: n + 1
+  };
+  const s = m.medium.max + 1;
   return m.large = {
     max: 2e3,
     // TODO: decide upper limit
-    min: n,
-    default: n + 1
+    min: s,
+    default: s + 1
   }, m;
 };
 export {
-  s as getMaxWidthQueryForSize,
-  x as getSizesForBreakpoints
+  d as getMaxWidthQueryForSize,
+  f as getSizesForBreakpoints
 };

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

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

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

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

package/lib/browser/helpers/subscribe-to-editor.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../functions/is-browser.cjs"),u=require("../functions/is-from-trusted-host.cjs"),g=require("../scripts/init-editing.cjs"),b=require("./logger.cjs"),o=({model:n,trustedHosts:i,callbacks:e})=>t=>{if(!u.isFromTrustedHost(i,t))return;const{data:r}=t;if(r)switch(r.type){case"builder.configureSdk":{e.configureSdk(r.data);break}case"builder.triggerAnimation":{e.animation(r.data);break}case"builder.contentUpdate":{const s=r.data,a=s.key||s.alias||s.entry||s.modelName,d=s.data;a===n&&e.contentUpdate(d);break}}},m=(n,i,e)=>{if(!c.isBrowser)return b.logger.warn("`subscribeToEditor` only works in the browser. It currently seems to be running on the server."),()=>{};g.setupBrowserForEditing();const t=o({callbacks:{contentUpdate:i,animation:()=>{},configureSdk:()=>{}},model:n,trustedHosts:e==null?void 0:e.trustedHosts});return window.addEventListener("message",t),()=>{window.removeEventListener("message",t)}};exports.createEditorListener=o;exports.subscribeToEditor=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../functions/is-browser.cjs"),u=require("../functions/is-from-trusted-host.cjs"),g=require("../scripts/init-editing.cjs"),b=require("./logger.cjs"),s=({model:n,trustedHosts:o,callbacks:t})=>i=>{if(!u.isFromTrustedHost(o,i))return;const{data:e}=i;if(e)switch(e.type){case"builder.configureSdk":{t.configureSdk(e.data);break}case"builder.triggerAnimation":{t.animation(e.data);break}case"builder.contentUpdate":{const r=e.data,a=r.key||r.alias||r.entry||r.modelName,d=r.data;a===n&&t.contentUpdate(d);break}}},m=({model:n,apiKey:o,callback:t,trustedHosts:i})=>{if(!c.isBrowser)return b.logger.warn("`subscribeToEditor` only works in the browser. It currently seems to be running on the server."),()=>{};g.setupBrowserForEditing({modelName:n,apiKey:o});const e=s({callbacks:{contentUpdate:t,animation:()=>{},configureSdk:()=>{}},model:n,trustedHosts:i});return window.addEventListener("message",e),()=>{window.removeEventListener("message",e)}};exports.createEditorListener=s;exports.subscribeToEditor=m;

package/lib/browser/helpers/subscribe-to-editor.mjs

@@ -3,52 +3,60 @@ import { isFromTrustedHost as c } from "../functions/is-from-trusted-host.mjs";
 import { setupBrowserForEditing as m } from "../scripts/init-editing.mjs";
 import { logger as u } from "./logger.mjs";
 const g = ({
-  model: o,
-  trustedHosts: s,
-  callbacks: e
-}) => (t) => {
-  if (!c(s, t))
+  model: n,
+  trustedHosts: i,
+  callbacks: t
+}) => (o) => {
+  if (!c(i, o))
     return;
   const {
-    data: r
-  } = t;
-  if (r)
-    switch (r.type) {
+    data: e
+  } = o;
+  if (e)
+    switch (e.type) {
       case "builder.configureSdk": {
-        e.configureSdk(r.data);
+        t.configureSdk(e.data);
         break;
       }
       case "builder.triggerAnimation": {
-        e.animation(r.data);
+        t.animation(e.data);
         break;
       }
       case "builder.contentUpdate": {
-        const n = r.data, i = n.key || n.alias || n.entry || n.modelName, a = n.data;
-        i === o && e.contentUpdate(a);
+        const r = e.data, s = r.key || r.alias || r.entry || r.modelName, a = r.data;
+        s === n && t.contentUpdate(a);
         break;
       }
     }
-}, l = (o, s, e) => {
+}, k = ({
+  model: n,
+  apiKey: i,
+  callback: t,
+  trustedHosts: o
+}) => {
   if (!d)
     return u.warn("`subscribeToEditor` only works in the browser. It currently seems to be running on the server."), () => {
     };
-  m();
-  const t = g({
+  m({
+    modelName: n,
+    apiKey: i
+  });
+  const e = g({
     callbacks: {
-      contentUpdate: s,
+      contentUpdate: t,
       animation: () => {
       },
       configureSdk: () => {
       }
     },
-    model: o,
-    trustedHosts: e == null ? void 0 : e.trustedHosts
+    model: n,
+    trustedHosts: o
   });
-  return window.addEventListener("message", t), () => {
-    window.removeEventListener("message", t);
+  return window.addEventListener("message", e), () => {
+    window.removeEventListener("message", e);
   };
 };
 export {
   g as createEditorListener,
-  l as subscribeToEditor
+  k as subscribeToEditor
 };

package/lib/browser/scripts/init-editing.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../constants/sdk-version.cjs"),y=require("../constants/target.cjs"),b=require("../functions/is-browser.cjs"),M=require("../functions/is-from-trusted-host.cjs"),B=require("../functions/register.cjs"),E=()=>{B.register("insertMenu",{name:"_default",default:!0,items:[{name:"Box"},{name:"Text"},{name:"Image"},{name:"Columns"},{name:"Core:Section"},{name:"Core:Button"},{name:"Embed"},{name:"Custom Code"}]})};let c=!1;const v=(o={})=>{var a,i;c||(c=!0,b.isBrowser()&&((a=window.parent)==null||a.postMessage({type:"builder.sdkInfo",data:{target:y.TARGET,version:f.SDK_VERSION,supportsPatchUpdates:!1,supportsAddBlockScoping:!0,supportsCustomBreakpoints:!0,blockLevelPersonalization:!0}},"*"),(i=window.parent)==null||i.postMessage({type:"builder.updateContent",data:{options:o}},"*"),window.addEventListener("message",u=>{var d,l;if(!M.isFromTrustedHost(o.trustedHosts,u))return;const{data:e}=u;if(e!=null&&e.type)switch(e.type){case"builder.evaluate":{const g=e.data.text,m=e.data.arguments||[],r=e.data.id,w=new Function(g);let t,s=null;try{t=w.apply(null,m)}catch(n){s=n}s?(d=window.parent)==null||d.postMessage({type:"builder.evaluateError",data:{id:r,error:s.message}},"*"):t&&typeof t.then=="function"?t.then(n=>{var p;(p=window.parent)==null||p.postMessage({type:"builder.evaluateResult",data:{id:r,result:n}},"*")}).catch(console.error):(l=window.parent)==null||l.postMessage({type:"builder.evaluateResult",data:{result:t,id:r}},"*");break}}})))};exports.registerInsertMenu=E;exports.setupBrowserForEditing=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../constants/sdk-version.cjs"),y=require("../constants/target.cjs"),b=require("../functions/is-browser.cjs"),B=require("../functions/is-from-trusted-host.cjs"),M=require("../functions/register.cjs"),E=()=>{M.register("insertMenu",{name:"_default",default:!0,items:[{name:"Box"},{name:"Text"},{name:"Image"},{name:"Columns"},{name:"Core:Section"},{name:"Core:Button"},{name:"Embed"},{name:"Custom Code"}]})};let c=!1;const S=r=>{var o,i;c||(c=!0,b.isBrowser()&&((o=window.parent)==null||o.postMessage({type:"builder.sdkInfo",data:{target:y.TARGET,version:f.SDK_VERSION,supportsPatchUpdates:!1,supportsAddBlockScoping:!0,supportsCustomBreakpoints:!0,modelName:r.modelName,apiKey:r.apiKey,supportsXSmallBreakpoint:!0,blockLevelPersonalization:!0}},"*"),(i=window.parent)==null||i.postMessage({type:"builder.updateContent",data:{options:r}},"*"),window.addEventListener("message",u=>{var d,l;if(!B.isFromTrustedHost(r.trustedHosts,u))return;const{data:e}=u;if(e!=null&&e.type)switch(e.type){case"builder.evaluate":{const m=e.data.text,g=e.data.arguments||[],s=e.data.id,w=new Function(m);let t,a=null;try{t=w.apply(null,g)}catch(n){a=n}a?(d=window.parent)==null||d.postMessage({type:"builder.evaluateError",data:{id:s,error:a.message}},"*"):t&&typeof t.then=="function"?t.then(n=>{var p;(p=window.parent)==null||p.postMessage({type:"builder.evaluateResult",data:{id:s,result:n}},"*")}).catch(console.error):(l=window.parent)==null||l.postMessage({type:"builder.evaluateResult",data:{result:t,id:s}},"*");break}}})))};exports.registerInsertMenu=E;exports.setupBrowserForEditing=S;

package/lib/browser/scripts/init-editing.mjs

@@ -1,10 +1,10 @@
 import { SDK_VERSION as w } from "../constants/sdk-version.mjs";
 import { TARGET as y } from "../constants/target.mjs";
 import { isBrowser as b } from "../functions/is-browser.mjs";
-import { isFromTrustedHost as C } from "../functions/is-from-trusted-host.mjs";
-import { register as E } from "../functions/register.mjs";
-const x = () => {
-  E("insertMenu", {
+import { isFromTrustedHost as B } from "../functions/is-from-trusted-host.mjs";
+import { register as C } from "../functions/register.mjs";
+const S = () => {
+  C("insertMenu", {
     name: "_default",
     default: !0,
     items: [{
@@ -27,7 +27,7 @@ const x = () => {
   });
 };
 let m = !1;
-const S = (a = {}) => {
+const x = (r) => {
   var n, i;
   m || (m = !0, b() && ((n = window.parent) == null || n.postMessage({
     type: "builder.sdkInfo",
@@ -39,16 +39,19 @@ const S = (a = {}) => {
       // scope our '+ add block' button styling
       supportsAddBlockScoping: !0,
       supportsCustomBreakpoints: !0,
+      modelName: r.modelName,
+      apiKey: r.apiKey,
+      supportsXSmallBreakpoint: !0,
       blockLevelPersonalization: !0
     }
   }, "*"), (i = window.parent) == null || i.postMessage({
     type: "builder.updateContent",
     data: {
-      options: a
+      options: r
     }
   }, "*"), window.addEventListener("message", (u) => {
     var p, d;
-    if (!C(a.trustedHosts, u))
+    if (!B(r.trustedHosts, u))
       return;
     const {
       data: e
@@ -56,7 +59,7 @@ const S = (a = {}) => {
     if (e != null && e.type)
       switch (e.type) {
         case "builder.evaluate": {
-          const c = e.data.text, f = e.data.arguments || [], r = e.data.id, g = new Function(c);
+          const c = e.data.text, f = e.data.arguments || [], a = e.data.id, g = new Function(c);
           let t, s = null;
           try {
             t = g.apply(null, f);
@@ -66,7 +69,7 @@ const S = (a = {}) => {
           s ? (p = window.parent) == null || p.postMessage({
             type: "builder.evaluateError",
             data: {
-              id: r,
+              id: a,
               error: s.message
             }
           }, "*") : t && typeof t.then == "function" ? t.then((o) => {
@@ -74,7 +77,7 @@ const S = (a = {}) => {
             (l = window.parent) == null || l.postMessage({
               type: "builder.evaluateResult",
               data: {
-                id: r,
+                id: a,
                 result: o
               }
             }, "*");
@@ -82,7 +85,7 @@ const S = (a = {}) => {
             type: "builder.evaluateResult",
             data: {
               result: t,
-              id: r
+              id: a
             }
           }, "*");
           break;
@@ -91,6 +94,6 @@ const S = (a = {}) => {
   })));
 };
 export {
-  x as registerInsertMenu,
-  S as setupBrowserForEditing
+  S as registerInsertMenu,
+  x as setupBrowserForEditing
 };

package/lib/edge/blocks/symbol/symbol.cjs

@@ -1 +1 @@
-"use strict";const s=require("react/jsx-runtime"),y=require("../../components/content-variants/content-variants.cjs"),C=require("../../functions/get-class-prop-name.cjs"),x=require("./symbol.helpers.cjs");async function k(e){var n,i,o,l,a;const u=function(){return"div"},d=function(){return"div"},m=function(){var r,b;return[e.attributes[C.getClassPropName()],"builder-symbol",(r=e.symbol)!=null&&r.inline?"builder-inline-symbol":void 0,(b=e.symbol)!=null&&b.dynamic||e.dynamic?"builder-dynamic-symbol":void 0].filter(Boolean).join(" ")},t=((n=e.symbol)==null?void 0:n.content)||await x.fetchSymbolContent({symbol:e.symbol,builderContextValue:e.builderContext});return s.jsx("div",{...e.attributes,className:m(),children:s.jsx(y,{nonce:e.builderContext.nonce,isNestedRender:!0,apiVersion:e.builderContext.apiVersion,apiKey:e.builderContext.apiKey,context:{...e.builderContext.context,symbolId:(i=e.builderBlock)==null?void 0:i.id},customComponents:Object.values(e.builderComponents),data:{...(o=e.symbol)==null?void 0:o.data,...e.builderContext.localState,...(l=t==null?void 0:t.data)==null?void 0:l.state},canTrack:e.builderContext.canTrack,model:(a=e.symbol)==null?void 0:a.model,content:t,linkComponent:e.builderLinkComponent,blocksWrapper:u(),contentWrapper:d()})})}module.exports=k;
+"use strict";const u=require("react/jsx-runtime"),C=require("../../components/content-variants/content-variants.cjs"),x=require("../../functions/get-class-prop-name.cjs"),k=require("./symbol.helpers.cjs");async function f(e){var n,i,o,l,a,c;const d=function(){return"div"},m=function(){return"div"},y=function(){var b,s;return[e.attributes[x.getClassPropName()],"builder-symbol",(b=e.symbol)!=null&&b.inline?"builder-inline-symbol":void 0,(s=e.symbol)!=null&&s.dynamic||e.dynamic?"builder-dynamic-symbol":void 0].filter(Boolean).join(" ")},t=((n=e.symbol)==null?void 0:n.content)||await k.fetchSymbolContent({symbol:e.symbol,builderContextValue:e.builderContext});return u.jsx("div",{...e.attributes,className:y(),children:u.jsx(C,{nonce:e.builderContext.nonce,isNestedRender:!0,apiVersion:e.builderContext.apiVersion,apiKey:e.builderContext.apiKey,context:{...e.builderContext.context,symbolId:(i=e.builderBlock)==null?void 0:i.id},customComponents:Object.values(e.builderComponents),data:{...(o=e.symbol)==null?void 0:o.data,...e.builderContext.localState,...(l=t==null?void 0:t.data)==null?void 0:l.state},canTrack:e.builderContext.canTrack,model:(c=(a=e.symbol)==null?void 0:a.model)!=null?c:"",content:t,linkComponent:e.builderLinkComponent,blocksWrapper:d(),contentWrapper:m()})})}module.exports=f;

package/lib/edge/blocks/symbol/symbol.mjs

@@ -1,27 +1,27 @@
-import { jsx as b } from "react/jsx-runtime";
-import y from "../../components/content-variants/content-variants.mjs";
-import { getClassPropName as C } from "../../functions/get-class-prop-name.mjs";
-import { fetchSymbolContent as x } from "./symbol.helpers.mjs";
-async function N(e) {
-  var n, o, i, l, a;
-  const d = function() {
-    return "div";
-  }, u = function() {
+import { jsx as d } from "react/jsx-runtime";
+import C from "../../components/content-variants/content-variants.mjs";
+import { getClassPropName as x } from "../../functions/get-class-prop-name.mjs";
+import { fetchSymbolContent as f } from "./symbol.helpers.mjs";
+async function V(e) {
+  var n, o, i, l, a, r;
+  const u = function() {
     return "div";
   }, s = function() {
-    var c, m;
+    return "div";
+  }, y = function() {
+    var m, b;
     return [
-      e.attributes[C()],
+      e.attributes[x()],
       "builder-symbol",
-      (c = e.symbol) != null && c.inline ? "builder-inline-symbol" : void 0,
-      (m = e.symbol) != null && m.dynamic || e.dynamic ? "builder-dynamic-symbol" : void 0
+      (m = e.symbol) != null && m.inline ? "builder-inline-symbol" : void 0,
+      (b = e.symbol) != null && b.dynamic || e.dynamic ? "builder-dynamic-symbol" : void 0
     ].filter(Boolean).join(" ");
-  }, t = ((n = e.symbol) == null ? void 0 : n.content) || await x({
+  }, t = ((n = e.symbol) == null ? void 0 : n.content) || await f({
     symbol: e.symbol,
     builderContextValue: e.builderContext
   });
-  return /* @__PURE__ */ b("div", { ...e.attributes, className: s(), children: /* @__PURE__ */ b(
-    y,
+  return /* @__PURE__ */ d("div", { ...e.attributes, className: y(), children: /* @__PURE__ */ d(
+    C,
     {
       nonce: e.builderContext.nonce,
       isNestedRender: !0,
@@ -38,14 +38,14 @@ async function N(e) {
         ...(l = t == null ? void 0 : t.data) == null ? void 0 : l.state
       },
       canTrack: e.builderContext.canTrack,
-      model: (a = e.symbol) == null ? void 0 : a.model,
+      model: (r = (a = e.symbol) == null ? void 0 : a.model) != null ? r : "",
       content: t,
       linkComponent: e.builderLinkComponent,
-      blocksWrapper: d(),
-      contentWrapper: u()
+      blocksWrapper: u(),
+      contentWrapper: s()
     }
   ) });
 }
 export {
-  N as default
+  V as default
 };

package/lib/edge/blocks/video/video.cjs

@@ -1 +1 @@
-"use client";"use strict";const t=require("react/jsx-runtime");function s(e){var i,l,n,o,d,u,c;function a(){return{...e.autoPlay===!0?{autoPlay:!0}:{},...e.muted===!0?{muted:!0}:{},...e.controls===!0?{controls:!0}:{},...e.loop===!0?{loop:!0}:{},...e.playsInline===!0?{playsInline:!0}:{}}}function r(){return{...a()}}return t.jsxs("div",{style:{position:"relative"},children:[t.jsx("video",{className:"builder-video",...r(),preload:e.preload||"metadata",style:{width:"100%",height:"100%",...(i=e.attributes)==null?void 0:i.style,objectFit:e.fit,objectPosition:e.position,borderRadius:"1px",...e.aspectRatio?{position:"absolute"}:null},src:e.video||"no-src",poster:e.posterImage,children:e.lazyLoad?null:t.jsx("source",{type:"video/mp4",src:e.video})}),e.aspectRatio&&!(e.fitContent&&((n=(l=e.builderBlock)==null?void 0:l.children)!=null&&n.length))?t.jsx("div",{style:{width:"100%",paddingTop:e.aspectRatio*100+"%",pointerEvents:"none",fontSize:"0px"}}):null,(d=(o=e.builderBlock)==null?void 0:o.children)!=null&&d.length&&e.fitContent?t.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"stretch"},children:e.children}):null,(c=(u=e.builderBlock)==null?void 0:u.children)!=null&&c.length&&!e.fitContent?t.jsx("div",{style:{pointerEvents:"none",display:"flex",flexDirection:"column",alignItems:"stretch",position:"absolute",top:"0",left:"0",width:"100%",height:"100%"},children:e.children}):null]})}module.exports=s;
+"use client";"use strict";const i=require("react/jsx-runtime"),n=require("react");function j(e){var a,d,s,u,f,h,v;const l=n.useRef(null);function m(){return{...e.autoPlay===!0?{autoPlay:!0}:{},...e.muted===!0?{muted:!0}:{},...e.controls===!0?{controls:!0}:{},...e.loop===!0?{loop:!0}:{},...e.playsInline===!0?{playsInline:!0}:{}}}function x(){return{...m()}}const[c,g]=n.useState(()=>{});return n.useEffect(()=>{if(e.lazyLoad){const o=new IntersectionObserver(function(E){E.forEach(function(y){if(!y.isIntersecting)return;const r=y.target;try{Array.from(r.children).filter(t=>t instanceof HTMLElement&&t.tagName==="SOURCE").forEach(t=>{const b=t.dataset.src;b&&(t.src=b)}),r.load(),o.unobserve(r)}catch(t){console.error("Error loading lazy video:",t)}})});l.current&&o.observe(l.current),g(o)}},[]),n.useEffect(()=>()=>{c&&c.disconnect()},[]),i.jsxs("div",{style:{position:"relative"},children:[i.jsx("video",{className:"builder-video",...x(),ref:l,preload:e.lazyLoad?"none":e.preload||"metadata",style:{width:"100%",height:"100%",...(a=e.attributes)==null?void 0:a.style,objectFit:e.fit,objectPosition:e.position,borderRadius:"1px",...e.aspectRatio?{position:"absolute"}:null},poster:e.posterImage,children:i.jsx("source",{type:"video/mp4",...e.lazyLoad?{"data-src":e.video}:{src:e.video}})}),e.aspectRatio&&!(e.fitContent&&((s=(d=e.builderBlock)==null?void 0:d.children)!=null&&s.length))?i.jsx("div",{style:{width:"100%",paddingTop:e.aspectRatio*100+"%",pointerEvents:"none",fontSize:"0px"}}):null,(f=(u=e.builderBlock)==null?void 0:u.children)!=null&&f.length&&e.fitContent?i.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"stretch"},children:e.children}):null,(v=(h=e.builderBlock)==null?void 0:h.children)!=null&&v.length&&!e.fitContent?i.jsx("div",{style:{pointerEvents:"none",display:"flex",flexDirection:"column",alignItems:"stretch",position:"absolute",top:"0",left:"0",width:"100%",height:"100%"},children:e.children}):null]})}module.exports=j;

package/lib/edge/blocks/video/video.mjs

@@ -1,8 +1,10 @@
 "use client";
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-function f(e) {
-  var i, l, n, o, d, u, a;
-  function c() {
+import { jsxs as z, jsx as i } from "react/jsx-runtime";
+import { useRef as I, useState as R, useEffect as m } from "react";
+function j(e) {
+  var a, c, d, u, s, f, h;
+  const n = I(null);
+  function b() {
     return {
       ...e.autoPlay === !0 ? {
         autoPlay: !0
@@ -21,28 +23,54 @@ function f(e) {
       } : {}
     };
   }
-  function r() {
+  function g() {
     return {
-      ...c()
+      ...b()
     };
   }
-  return /* @__PURE__ */ s(
+  const [r, x] = R(() => {
+  });
+  return m(() => {
+    if (e.lazyLoad) {
+      const l = new IntersectionObserver(function(E) {
+        E.forEach(function(v) {
+          if (!v.isIntersecting)
+            return;
+          const o = v.target;
+          try {
+            Array.from(o.children).filter(
+              (t) => t instanceof HTMLElement && t.tagName === "SOURCE"
+            ).forEach((t) => {
+              const y = t.dataset.src;
+              y && (t.src = y);
+            }), o.load(), l.unobserve(o);
+          } catch (t) {
+            console.error("Error loading lazy video:", t);
+          }
+        });
+      });
+      n.current && l.observe(n.current), x(l);
+    }
+  }, []), m(() => () => {
+    r && r.disconnect();
+  }, []), /* @__PURE__ */ z(
     "div",
     {
       style: {
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ i(
           "video",
           {
             className: "builder-video",
-            ...r(),
-            preload: e.preload || "metadata",
+            ...g(),
+            ref: n,
+            preload: e.lazyLoad ? "none" : e.preload || "metadata",
             style: {
               width: "100%",
               height: "100%",
-              ...(i = e.attributes) == null ? void 0 : i.style,
+              ...(a = e.attributes) == null ? void 0 : a.style,
               objectFit: e.fit,
               objectPosition: e.position,
               // Hack to get object fit to work as expected and
@@ -52,12 +80,21 @@ function f(e) {
                 position: "absolute"
               } : null
             },
-            src: e.video || "no-src",
             poster: e.posterImage,
-            children: e.lazyLoad ? null : /* @__PURE__ */ t("source", { type: "video/mp4", src: e.video })
+            children: /* @__PURE__ */ i(
+              "source",
+              {
+                type: "video/mp4",
+                ...e.lazyLoad ? {
+                  "data-src": e.video
+                } : {
+                  src: e.video
+                }
+              }
+            )
           }
         ),
-        e.aspectRatio && !(e.fitContent && ((n = (l = e.builderBlock) == null ? void 0 : l.children) != null && n.length)) ? /* @__PURE__ */ t(
+        e.aspectRatio && !(e.fitContent && ((d = (c = e.builderBlock) == null ? void 0 : c.children) != null && d.length)) ? /* @__PURE__ */ i(
           "div",
           {
             style: {
@@ -68,7 +105,7 @@ function f(e) {
             }
           }
         ) : null,
-        (d = (o = e.builderBlock) == null ? void 0 : o.children) != null && d.length && e.fitContent ? /* @__PURE__ */ t(
+        (s = (u = e.builderBlock) == null ? void 0 : u.children) != null && s.length && e.fitContent ? /* @__PURE__ */ i(
           "div",
           {
             style: {
@@ -79,7 +116,7 @@ function f(e) {
             children: e.children
           }
         ) : null,
-        (a = (u = e.builderBlock) == null ? void 0 : u.children) != null && a.length && !e.fitContent ? /* @__PURE__ */ t(
+        (h = (f = e.builderBlock) == null ? void 0 : f.children) != null && h.length && !e.fitContent ? /* @__PURE__ */ i(
           "div",
           {
             style: {
@@ -101,5 +138,5 @@ function f(e) {
   );
 }
 export {
-  f as default
+  j as default
 };

package/lib/edge/components/block/components/block-styles.cjs

@@ -1 +1 @@
-"use strict";const o=require("react/jsx-runtime"),a=require("../../../constants/device-sizes.cjs"),j=require("../../../functions/camel-to-kebab-case.cjs"),c=require("../../../helpers/css.cjs"),b=require("../../../helpers/nullable.cjs"),z=require("../../inlined-styles.cjs");function F(i){const f=function(){const e=i.block;return b.checkIsDefined(e.hide)?!e.hide:b.checkIsDefined(e.show)?e.show:!0},u=function(){var C,k,g;const e=i.block,s=e.responsiveStyles,r=i.context.content,d=a.getSizesForBreakpoints(((C=r==null?void 0:r.meta)==null?void 0:C.breakpoints)||{}),m=s==null?void 0:s.large,y=s==null?void 0:s.medium,h=s==null?void 0:s.small,n=e.id;if(!n)return"";const v=m?c.createCssClass({className:n,styles:m}):"",B=y?c.createCssClass({className:n,styles:y,mediaQuery:a.getMaxWidthQueryForSize("medium",d)}):"",q=h?c.createCssClass({className:n,styles:h,mediaQuery:a.getMaxWidthQueryForSize("small",d)}):"",t=e.animations&&e.animations.find(l=>l.trigger==="hover");let S="";if(t){const l=((g=(k=t.steps)==null?void 0:k[1])==null?void 0:g.styles)||{};S=c.createCssClass({className:`${n}:hover`,styles:{...l,transition:`all ${t.duration}s ${j.camelToKebabCase(t.easing)}`,transitionDelay:t.delay?`${t.delay}s`:"0s"}})||""}return[v,B,q,S].join(" ")};return o.jsx(o.Fragment,{children:u()&&f()?o.jsx(o.Fragment,{children:o.jsx(z,{id:"builderio-block",styles:u(),nonce:i.context.nonce})}):null})}module.exports=F;
+"use strict";const a=require("react/jsx-runtime"),r=require("../../../constants/device-sizes.cjs"),$=require("../../../functions/camel-to-kebab-case.cjs"),o=require("../../../helpers/css.cjs"),B=require("../../../helpers/nullable.cjs"),w=require("../../inlined-styles.cjs");function W(i){const v=function(){const s=i.block;return B.checkIsDefined(s.hide)?!s.hide:B.checkIsDefined(s.show)?s.show:!0},u=function(){var k,x,g,b,f;const s=i.block,e=s.responsiveStyles,t=i.context.content,c=r.getSizesForBreakpoints(((k=t==null?void 0:t.meta)==null?void 0:k.breakpoints)||{}),z=!!((g=(x=t==null?void 0:t.meta)==null?void 0:x.breakpoints)!=null&&g.xsmall),d=e==null?void 0:e.large,y=e==null?void 0:e.medium,S=e==null?void 0:e.small,h=e==null?void 0:e.xsmall,n=s.id;if(!n)return"";const F=d?o.createCssClass({className:n,styles:d}):"",Q=y?o.createCssClass({className:n,styles:y,mediaQuery:r.getMaxWidthQueryForSize("medium",c)}):"",j=S?o.createCssClass({className:n,styles:S,mediaQuery:r.getMaxWidthQueryForSize("small",c)}):"",p=h&&z?o.createCssClass({className:n,styles:h,mediaQuery:r.getMaxWidthQueryForSize("xsmall",c)}):"",l=s.animations&&s.animations.find(m=>m.trigger==="hover");let C="";if(l){const m=((f=(b=l.steps)==null?void 0:b[1])==null?void 0:f.styles)||{};C=o.createCssClass({className:`${n}:hover`,styles:{...m,transition:`all ${l.duration}s ${$.camelToKebabCase(l.easing)}`,transitionDelay:l.delay?`${l.delay}s`:"0s"}})||""}return[F,Q,j,p,C].join(" ")};return a.jsx(a.Fragment,{children:u()&&v()?a.jsx(a.Fragment,{children:a.jsx(w,{id:"builderio-block",styles:u(),nonce:i.context.nonce})}):null})}module.exports=W;

package/lib/edge/components/block/components/block-styles.mjs

@@ -1,68 +1,76 @@
-import { jsx as a, Fragment as g } from "react/jsx-runtime";
-import { getSizesForBreakpoints as $, getMaxWidthQueryForSize as p } from "../../../constants/device-sizes.mjs";
-import { camelToKebabCase as z } from "../../../functions/camel-to-kebab-case.mjs";
-import { createCssClass as i } from "../../../helpers/css.mjs";
-import { checkIsDefined as b } from "../../../helpers/nullable.mjs";
-import F from "../../inlined-styles.mjs";
-function A(n) {
-  const B = function() {
-    const e = n.block;
-    return b(e.hide) ? !e.hide : b(e.show) ? e.show : !0;
-  }, c = function() {
-    var h, S, k;
-    const e = n.block, s = e.responsiveStyles, l = n.context.content, m = $(
-      ((h = l == null ? void 0 : l.meta) == null ? void 0 : h.breakpoints) || {}
-    ), d = s == null ? void 0 : s.large, u = s == null ? void 0 : s.medium, y = s == null ? void 0 : s.small, o = e.id;
+import { jsx as c, Fragment as b } from "react/jsx-runtime";
+import { getSizesForBreakpoints as D, getMaxWidthQueryForSize as m } from "../../../constants/device-sizes.mjs";
+import { camelToKebabCase as I } from "../../../functions/camel-to-kebab-case.mjs";
+import { createCssClass as n } from "../../../helpers/css.mjs";
+import { checkIsDefined as C } from "../../../helpers/nullable.mjs";
+import N from "../../inlined-styles.mjs";
+function U(a) {
+  const v = function() {
+    const e = a.block;
+    return C(e.hide) ? !e.hide : C(e.show) ? e.show : !0;
+  }, d = function() {
+    var k, p, x, g, B;
+    const e = a.block, s = e.responsiveStyles, t = a.context.content, i = D(
+      ((k = t == null ? void 0 : t.meta) == null ? void 0 : k.breakpoints) || {}
+    ), Q = !!((x = (p = t == null ? void 0 : t.meta) == null ? void 0 : p.breakpoints) != null && x.xsmall), u = s == null ? void 0 : s.large, y = s == null ? void 0 : s.medium, S = s == null ? void 0 : s.small, f = s == null ? void 0 : s.xsmall, o = e.id;
     if (!o)
       return "";
-    const v = d ? i({
+    const $ = u ? n({
       className: o,
-      styles: d
-    }) : "", x = u ? i({
+      styles: u
+    }) : "", z = y ? n({
       className: o,
-      styles: u,
-      mediaQuery: p(
+      styles: y,
+      mediaQuery: m(
         "medium",
-        m
+        i
       )
-    }) : "", w = y ? i({
+    }) : "", F = S ? n({
       className: o,
-      styles: y,
-      mediaQuery: p(
+      styles: S,
+      mediaQuery: m(
         "small",
-        m
+        i
+      )
+    }) : "", j = f && Q ? n({
+      className: o,
+      styles: f,
+      mediaQuery: m(
+        "xsmall",
+        i
       )
-    }) : "", t = e.animations && e.animations.find((r) => r.trigger === "hover");
-    let f = "";
-    if (t) {
-      const r = ((k = (S = t.steps) == null ? void 0 : S[1]) == null ? void 0 : k.styles) || {};
-      f = i({
+    }) : "", l = e.animations && e.animations.find((r) => r.trigger === "hover");
+    let h = "";
+    if (l) {
+      const r = ((B = (g = l.steps) == null ? void 0 : g[1]) == null ? void 0 : B.styles) || {};
+      h = n({
         className: `${o}:hover`,
         styles: {
           ...r,
-          transition: `all ${t.duration}s ${z(
-            t.easing
+          transition: `all ${l.duration}s ${I(
+            l.easing
           )}`,
-          transitionDelay: t.delay ? `${t.delay}s` : "0s"
+          transitionDelay: l.delay ? `${l.delay}s` : "0s"
         }
       }) || "";
     }
     return [
-      v,
-      x,
-      w,
-      f
+      $,
+      z,
+      F,
+      j,
+      h
     ].join(" ");
   };
-  return /* @__PURE__ */ a(g, { children: c() && B() ? /* @__PURE__ */ a(g, { children: /* @__PURE__ */ a(
-    F,
+  return /* @__PURE__ */ c(b, { children: d() && v() ? /* @__PURE__ */ c(b, { children: /* @__PURE__ */ c(
+    N,
     {
       id: "builderio-block",
-      styles: c(),
-      nonce: n.context.nonce
+      styles: d(),
+      nonce: a.context.nonce
     }
   ) }) : null });
 }
 export {
-  A as default
+  U as default
 };