@builder.io/sdk-react 2.0.0 → 2.0.2

package/lib/node/blocks-exports.mjs

@@ -3,9 +3,9 @@ var He = Object.defineProperty;
 var qe = (e, t, n) => t in e ? He(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var ie = (e, t, n) => (qe(e, typeof t != "symbol" ? t + "" : t, n), n);
 import { jsx as s, Fragment as R, jsxs as P } from "react/jsx-runtime";
-import { TARGET as K, checkIsDefined as Y, logger as Z, isBrowser as G, fastClone as de, isEditing as $, registerInsertMenu as Ke, setupBrowserForEditing as ze, createRegisterComponentMessage as _e, getDefaultCanTrack as Q, _track as he, isPreviewing as Je, fetchOneEntry as Ie, createEditorListener as Ye, fetch as Ge, serializeComponentInfo as ge, handleABTestingSync as Qe } from "./server-entry-e8ac67b5.js";
-import { createContext as we, useState as C, useEffect as B, useContext as be, useRef as ee, createElement as Re } from "react";
-import { getFunctionArguments as Xe, runInNode as Ze, parseCode as et, getBuilderGlobals as tt, set as Ee } from "./node-runtime-80c4bfc8.js";
+import { TARGET as K, checkIsDefined as Y, logger as Z, isBrowser as G, fastClone as de, isEditing as $, registerInsertMenu as Ke, setupBrowserForEditing as ze, createRegisterComponentMessage as _e, getDefaultCanTrack as Q, _track as he, isPreviewing as Je, fetchOneEntry as Ie, createEditorListener as Ye, fetch as Ge, serializeComponentInfo as ge, handleABTestingSync as Qe } from "./server-entry-5ebd1c9b.js";
+import { createContext as we, useState as T, useEffect as V, useContext as be, useRef as ee, createElement as Re } from "react";
+import { getFunctionArguments as Xe, runInNode as Ze, parseCode as et, getBuilderGlobals as tt, set as Ee } from "./node-runtime-0f3a5df1.js";
 const nt = /* @__PURE__ */ new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]), it = (e) => typeof e == "string" && nt.has(e.toLowerCase());
 function ue(e) {
   return /* @__PURE__ */ s(R, { children: it(e.TagName) ? /* @__PURE__ */ s(R, { children: /* @__PURE__ */ s(e.TagName, { ...e.attributes, ...e.actionAttributes }) }) : /* @__PURE__ */ s(R, { children: typeof e.TagName == "string" ? /* @__PURE__ */ s(e.TagName, { ...e.attributes, ...e.actionAttributes, children: e.children }) : /* @__PURE__ */ s(e.TagName, { ...e.attributes, ...e.actionAttributes, children: e.children }) }) });
@@ -60,7 +60,8 @@ const me = we({
   componentInfos: {},
   inheritedStyles: {},
   BlocksWrapper: "div",
-  BlocksWrapperProps: {}
+  BlocksWrapperProps: {},
+  nonce: ""
 }), Be = we({ registeredComponents: {} });
 function at(e) {
   var t;
@@ -319,8 +320,8 @@ function ht(e) {
       leading: !1
     });
     function r(f) {
-      const d = f.getBoundingClientRect(), m = window.innerHeight, p = (e.thresholdPercent || 0) / 100 * m;
-      return d.bottom > p && d.top < m - p;
+      const d = f.getBoundingClientRect(), m = window.innerHeight, y = (e.thresholdPercent || 0) / 100 * m;
+      return d.bottom > y && d.top < m - y;
     }
     const c = e.steps[0].styles;
     function u() {
@@ -501,7 +502,8 @@ function ne(e) {
     "style",
     {
       dangerouslySetInnerHTML: { __html: e.styles },
-      "data-id": e.id
+      "data-id": e.id,
+      nonce: e.nonce
     }
   );
 }
@@ -518,7 +520,7 @@ function Tt(e) {
     return Y(i.hide) ? !i.hide : Y(i.show) ? i.show : !0;
   }
   function n() {
-    var x, E, V;
+    var p, B, E;
     const i = X({
       block: e.block,
       localState: e.context.localState,
@@ -527,7 +529,7 @@ function Tt(e) {
       context: e.context.context,
       shouldEvaluateBindings: !0
     }), o = i.responsiveStyles, l = e.context.content, a = De(
-      ((x = l == null ? void 0 : l.meta) == null ? void 0 : x.breakpoints) || {}
+      ((p = l == null ? void 0 : l.meta) == null ? void 0 : p.breakpoints) || {}
     ), r = o == null ? void 0 : o.large, c = o == null ? void 0 : o.medium, u = o == null ? void 0 : o.small, f = i.id;
     if (!f)
       return "";
@@ -548,18 +550,18 @@ function Tt(e) {
         "small",
         a
       )
-    }) : "", p = i.animations && i.animations.find((A) => A.trigger === "hover");
-    let I = "";
-    if (p) {
-      const A = ((V = (E = p.steps) == null ? void 0 : E[1]) == null ? void 0 : V.styles) || {};
-      I = _({
+    }) : "", y = i.animations && i.animations.find((A) => A.trigger === "hover");
+    let C = "";
+    if (y) {
+      const A = ((E = (B = y.steps) == null ? void 0 : B[1]) == null ? void 0 : E.styles) || {};
+      C = _({
         className: `${f}:hover`,
         styles: {
           ...A,
-          transition: `all ${p.duration}s ${te(
-            p.easing
+          transition: `all ${y.duration}s ${te(
+            y.easing
           )}`,
-          transitionDelay: p.delay ? `${p.delay}s` : "0s"
+          transitionDelay: y.delay ? `${y.delay}s` : "0s"
         }
       }) || "";
     }
@@ -567,10 +569,17 @@ function Tt(e) {
       d,
       m,
       g,
-      I
+      C
     ].join(" ");
   }
-  return /* @__PURE__ */ s(R, { children: n() && t() ? /* @__PURE__ */ s(R, { children: /* @__PURE__ */ s(ne, { id: "builderio-block", styles: n() }) }) : null });
+  return /* @__PURE__ */ s(R, { children: n() && t() ? /* @__PURE__ */ s(R, { children: /* @__PURE__ */ s(
+    ne,
+    {
+      id: "builderio-block",
+      styles: n(),
+      nonce: e.context.nonce
+    }
+  ) }) : null });
 }
 function It(e) {
   return e.charAt(0).toUpperCase() + e.slice(1);
@@ -706,7 +715,7 @@ const At = ({
 };
 function ye(e) {
   var i;
-  const [t, n] = C(
+  const [t, n] = T(
     () => e.isInteractive ? Vt : e.componentRef
   );
   return /* @__PURE__ */ s(R, { children: e.componentRef ? /* @__PURE__ */ s(R, { children: /* @__PURE__ */ s(
@@ -736,7 +745,7 @@ function ye(e) {
   ) }) : null });
 }
 function Nt(e) {
-  const [t, n] = C(() => e.repeatContext);
+  const [t, n] = T(() => e.repeatContext);
   return /* @__PURE__ */ s(me.Provider, { value: t, children: /* @__PURE__ */ s(
     z,
     {
@@ -778,9 +787,9 @@ function z(e) {
     return e.block.tagName === "a" || ((m = i().properties) == null ? void 0 : m.href) || i().href ? e.linkComponent || "a" : e.block.tagName || "div";
   }
   function l() {
-    var g, p;
+    var g, y;
     if ((g = e.block.repeat) != null && g.collection)
-      return !!((p = n == null ? void 0 : n()) != null && p.length);
+      return !!((y = n == null ? void 0 : n()) != null && y.length);
     const d = "hide" in i() ? i().hide : !1;
     return ("show" in i() ? i().show : !0) && !d;
   }
@@ -789,7 +798,7 @@ function z(e) {
     return !((m = t == null ? void 0 : t()) != null && m.component) && !n() ? (g = i().children) != null ? g : [] : [];
   }
   function r() {
-    var d, m, g, p;
+    var d, m, g, y;
     return {
       blockChildren: (d = i().children) != null ? d : [],
       componentRef: (m = t == null ? void 0 : t()) == null ? void 0 : m.component,
@@ -808,10 +817,10 @@ function z(e) {
       registeredComponents: e.registeredComponents,
       builderBlock: i(),
       includeBlockProps: ((g = t == null ? void 0 : t()) == null ? void 0 : g.noWrap) === !0,
-      isInteractive: !((p = t == null ? void 0 : t()) != null && p.isRSC)
+      isInteractive: !((y = t == null ? void 0 : t()) != null && y.isRSC)
     };
   }
-  return B(() => {
+  return V(() => {
     const d = i().id, m = i().animations;
     m && d && mt(
       m.map((g) => ({
@@ -960,9 +969,9 @@ function D(e) {
 const Ft = (e) => `builder-columns ${e}-breakpoints`;
 function $t(e) {
   var A, O;
-  const [t, n] = C(
+  const [t, n] = T(
     () => typeof e.space == "number" ? e.space || 0 : 20
-  ), [i, o] = C(() => e.columns || []), [l, a] = C(
+  ), [i, o] = T(() => e.columns || []), [l, a] = T(
     () => e.stackColumnsAt || "tablet"
   );
   function r(S) {
@@ -988,10 +997,10 @@ function $t(e) {
   }) {
     return l === "never" ? w : S;
   }
-  const [m, g] = C(
+  const [m, g] = T(
     () => e.stackColumnsAt === "never" ? "row" : e.reverseColumnsWhenStacked ? "column-reverse" : "column"
   );
-  function p() {
+  function y() {
     return {
       "--flex-dir": m,
       "--flex-dir-tablet": f({
@@ -1000,8 +1009,8 @@ function $t(e) {
       })
     };
   }
-  function I(S) {
-    const w = S === 0 ? 0 : t, N = u(S), b = `${w}px`, h = "100%", y = 0;
+  function C(S) {
+    const w = S === 0 ? 0 : t, N = u(S), b = `${w}px`, h = "100%", x = 0;
     return {
       ...{
         display: "flex",
@@ -1015,7 +1024,7 @@ function $t(e) {
         desktopStyle: N
       }),
       "--column-margin-left-mobile": d({
-        stackedStyle: y,
+        stackedStyle: x,
         desktopStyle: b
       }),
       "--column-width-tablet": f({
@@ -1023,20 +1032,20 @@ function $t(e) {
         desktopStyle: N
       }),
       "--column-margin-left-tablet": f({
-        stackedStyle: y,
+        stackedStyle: x,
         desktopStyle: b
       })
     };
   }
-  function x(S) {
+  function p(S) {
     var N, b;
     return De(
       ((b = (N = e.builderContext.content) == null ? void 0 : N.meta) == null ? void 0 : b.breakpoints) || {}
     )[S].max;
   }
-  function E() {
+  function B() {
     return `
-        @media (max-width: ${x("medium")}px) {
+        @media (max-width: ${p("medium")}px) {
           .${e.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir-tablet);
             align-items: stretch;
@@ -1048,7 +1057,7 @@ function $t(e) {
           }
         }
 
-        @media (max-width: ${x("small")}px) {
+        @media (max-width: ${p("small")}px) {
           .${e.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir);
             align-items: stretch;
@@ -1061,29 +1070,36 @@ function $t(e) {
         },
       `;
   }
-  function V(S, w) {
+  function E(S, w) {
     return {
       ...S.link ? {
         href: S.link
       } : {},
       [H()]: "builder-column",
-      style: Fe(I(w))
+      style: Fe(C(w))
     };
   }
   return /* @__PURE__ */ P(R, { children: [
     /* @__PURE__ */ P(
       "div",
       {
-        className: Ft((A = e.builderBlock) == null ? void 0 : A.id) + " div-b622c1bc",
-        style: p(),
+        className: Ft((A = e.builderBlock) == null ? void 0 : A.id) + " div-fe220f58",
+        style: y(),
         children: [
-          /* @__PURE__ */ s(ne, { id: "builderio-columns", styles: E() }),
+          /* @__PURE__ */ s(
+            ne,
+            {
+              id: "builderio-columns",
+              styles: B(),
+              nonce: e.builderContext.nonce
+            }
+          ),
           (O = e.columns) == null ? void 0 : O.map((S, w) => /* @__PURE__ */ s(
             ue,
             {
               TagName: r(S),
               actionAttributes: {},
-              attributes: V(S, w),
+              attributes: E(S, w),
               children: /* @__PURE__ */ s(
                 D,
                 {
@@ -1104,7 +1120,7 @@ function $t(e) {
         ]
       }
     ),
-    /* @__PURE__ */ s("style", { children: `.div-b622c1bc {
+    /* @__PURE__ */ s("style", { children: `.div-fe220f58 {
   display: flex;
   line-height: normal;
 }` })
@@ -1152,12 +1168,14 @@ function jt(e) {
     // images, otherwise you can supply this prop manually
     !(d.match(/builder\.io/) || d.match(/cdn\.shopify\.com/)))
       return e.srcset;
-    if (e.srcset && ((m = e.image) != null && m.includes("builder.io/api/v1/image"))) {
-      if (!e.srcset.includes(e.image.split("?")[0]))
-        return console.debug("Removed given srcset"), oe(d);
-    } else if (e.image && !e.srcset)
+    if (!e.noWebp) {
+      if (e.srcset && ((m = e.image) != null && m.includes("builder.io/api/v1/image"))) {
+        if (!e.srcset.includes(e.image.split("?")[0]))
+          return console.debug("Removed given srcset"), oe(d);
+      } else if (e.image && !e.srcset)
+        return oe(d);
       return oe(d);
-    return oe(d);
+    }
   }
   function n() {
     var f;
@@ -1189,7 +1207,7 @@ function jt(e) {
               objectFit: e.backgroundSize || "cover",
               ...i()
             },
-            className: "builder-image" + (e.className ? " " + e.className : "") + " img-ac3dff4a",
+            className: "builder-image" + (e.className ? " " + e.className : "") + " img-56bbd606",
             src: e.image,
             srcSet: t(),
             sizes: e.sizes
@@ -1199,23 +1217,23 @@ function jt(e) {
       e.aspectRatio && !((l = (o = e.builderBlock) == null ? void 0 : o.children) != null && l.length && e.fitContent) ? /* @__PURE__ */ s(
         "div",
         {
-          className: "builder-image-sizer div-ac3dff4a",
+          className: "builder-image-sizer div-56bbd606",
           style: {
             paddingTop: e.aspectRatio * 100 + "%"
           }
         }
       ) : null,
       (r = (a = e.builderBlock) == null ? void 0 : a.children) != null && r.length && e.fitContent ? /* @__PURE__ */ s(R, { children: e.children }) : null,
-      !e.fitContent && ((u = (c = e.builderBlock) == null ? void 0 : c.children) != null && u.length) ? /* @__PURE__ */ s("div", { className: "div-ac3dff4a-2", children: e.children }) : null
+      !e.fitContent && ((u = (c = e.builderBlock) == null ? void 0 : c.children) != null && u.length) ? /* @__PURE__ */ s("div", { className: "div-56bbd606-2", children: e.children }) : null
     ] }),
-    /* @__PURE__ */ s("style", { children: `.img-ac3dff4a {
+    /* @__PURE__ */ s("style", { children: `.img-56bbd606 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-ac3dff4a {
+}.div-56bbd606 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-ac3dff4a-2 {
+}.div-56bbd606-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1375,7 +1393,7 @@ const ae = {
 }, ve = (e) => e.toString();
 function Ht(e) {
   var d;
-  const [t, n] = C(() => []);
+  const [t, n] = T(() => []);
   function i() {
     return !!(e.grid || e.oneAtATime);
   }
@@ -1401,7 +1419,7 @@ function Ht(e) {
       cursor: "pointer"
     };
     return Object.fromEntries(
-      Object.entries(g).filter(([p, I]) => I !== void 0)
+      Object.entries(g).filter(([y, C]) => C !== void 0)
     );
   }
   function a(m) {
@@ -1413,23 +1431,23 @@ function Ht(e) {
   function c() {
     let m = null;
     if (e.grid && t.length && document) {
-      const p = t[0];
-      let x = document.querySelector(
-        `.builder-accordion-title[data-index="${p}"]`
+      const y = t[0];
+      let p = document.querySelector(
+        `.builder-accordion-title[data-index="${y}"]`
       );
-      if (m = p, x) {
-        let E = x.getBoundingClientRect();
-        for (; x = x && x.nextElementSibling; )
-          if (x) {
-            if (x.classList.contains("builder-accordion-detail"))
+      if (m = y, p) {
+        let B = p.getBoundingClientRect();
+        for (; p = p && p.nextElementSibling; )
+          if (p) {
+            if (p.classList.contains("builder-accordion-detail"))
               continue;
-            const V = x.getBoundingClientRect();
-            if (V.left > E.left) {
+            const E = p.getBoundingClientRect();
+            if (E.left > B.left) {
               const A = parseInt(
-                x.getAttribute("data-index") || "",
+                p.getAttribute("data-index") || "",
                 10
               );
-              isNaN(A) || (E = V, m = A);
+              isNaN(A) || (B = E, m = A);
             } else
               break;
           }
@@ -1445,7 +1463,7 @@ function Ht(e) {
       }
     };
     return Object.fromEntries(
-      Object.entries(m).filter(([g, p]) => p !== void 0)
+      Object.entries(m).filter(([g, y]) => y !== void 0)
     );
   }
   function f(m) {
@@ -1462,7 +1480,7 @@ function Ht(e) {
           order: c() !== null ? ve(g) : ve(g + 1)
         },
         "data-index": g,
-        onClick: (p) => f(g),
+        onClick: (y) => f(g),
         children: /* @__PURE__ */ s(
           D,
           {
@@ -2115,7 +2133,7 @@ const Qt = {
 };
 function Zt(e) {
   var l;
-  const [t, n] = C(
+  const [t, n] = T(
     () => e.defaultActiveTab ? e.defaultActiveTab - 1 : 0
   );
   function i(a) {
@@ -2231,8 +2249,8 @@ const nn = {
   }]
 };
 function on(e) {
-  const t = ee(null), [n, i] = C(() => []), [o, l] = C(() => []);
-  return B(() => {
+  const t = ee(null), [n, i] = T(() => []), [o, l] = T(() => []);
+  return V(() => {
     var r;
     if (!((r = t.current) != null && r.getElementsByTagName) || typeof window == "undefined")
       return;
@@ -2285,7 +2303,7 @@ const an = {
   }]
 }, rn = ["text/javascript", "application/javascript", "application/ecmascript"], ln = (e) => rn.includes(e.type);
 function sn(e) {
-  const t = ee(null), [n, i] = C(() => []), [o, l] = C(() => []), [a, r] = C(() => !1);
+  const t = ee(null), [n, i] = T(() => []), [o, l] = T(() => []), [a, r] = T(() => !1);
   function c() {
     if (!t.current || !t.current.getElementsByTagName)
       return;
@@ -2304,7 +2322,7 @@ function sn(e) {
         }
     }
   }
-  return B(() => {
+  return V(() => {
     t.current && !a && (r(!0), c());
   }, [t.current, a]), /* @__PURE__ */ s(
     "div",
@@ -2561,39 +2579,39 @@ const cn = {
 };
 function fn(e) {
   var d, m;
-  const t = ee(null), [n, i] = C(() => "unsubmitted"), [o, l] = C(() => null), [a, r] = C(() => "");
+  const t = ee(null), [n, i] = T(() => "unsubmitted"), [o, l] = T(() => null), [a, r] = T(() => "");
   function c(g) {
-    var I, x;
-    const p = {
+    var C, p;
+    const y = {
       ...e.builderContext.rootState,
       ...g
     };
-    e.builderContext.rootSetState ? (x = (I = e.builderContext).rootSetState) == null || x.call(I, p) : e.builderContext.rootState = p;
+    e.builderContext.rootSetState ? (p = (C = e.builderContext).rootSetState) == null || p.call(C, y) : e.builderContext.rootState = y;
   }
   function u() {
     return $() && e.previewState || n;
   }
   function f(g) {
-    var I;
-    const p = e.sendWithJs || e.sendSubmissionsTo === "email";
+    var C;
+    const y = e.sendWithJs || e.sendSubmissionsTo === "email";
     if (e.sendSubmissionsTo === "zapier")
       g.preventDefault();
-    else if (p) {
+    else if (y) {
       if (!(e.action || e.sendSubmissionsTo === "email")) {
         g.preventDefault();
         return;
       }
       g.preventDefault();
-      const x = g.currentTarget || g.target, E = e.customHeaders || {};
-      let V;
-      const A = new FormData(x), O = Array.from(x.querySelectorAll("input,select,textarea")).filter((b) => !!b.name).map((b) => {
+      const p = g.currentTarget || g.target, B = e.customHeaders || {};
+      let E;
+      const A = new FormData(p), O = Array.from(p.querySelectorAll("input,select,textarea")).filter((b) => !!b.name).map((b) => {
         let h;
-        const y = b.name;
+        const x = b.name;
         if (b instanceof HTMLInputElement)
           if (b.type === "radio") {
             if (b.checked)
               return h = b.name, {
-                key: y,
+                key: x,
                 value: h
               };
           } else if (b.type === "checkbox")
@@ -2606,7 +2624,7 @@ function fn(e) {
         else
           h = b.value;
         return {
-          key: y,
+          key: x,
           value: h
         };
       });
@@ -2614,15 +2632,15 @@ function fn(e) {
       if (e.sendSubmissionsTo === "email" && (S = "multipart/form-data"), Array.from(O).forEach(({ value: b }) => {
         (b instanceof File || Array.isArray(b) && b[0] instanceof File || b instanceof FileList) && (S = "multipart/form-data");
       }), S !== "application/json")
-        V = A;
+        E = A;
       else {
         const b = {};
-        Array.from(O).forEach(({ value: h, key: y }) => {
-          Ee(b, y, h);
-        }), V = JSON.stringify(b);
+        Array.from(O).forEach(({ value: h, key: x }) => {
+          Ee(b, x, h);
+        }), E = JSON.stringify(b);
       }
-      S && S !== "multipart/form-data" && (p && ((I = e.action) != null && I.includes("zapier.com")) || (E["content-type"] = S));
-      const w = new CustomEvent("presubmit", { detail: { body: V } });
+      S && S !== "multipart/form-data" && (y && ((C = e.action) != null && C.includes("zapier.com")) || (B["content-type"] = S));
+      const w = new CustomEvent("presubmit", { detail: { body: E } });
       if (t.current && (t.current.dispatchEvent(w), w.defaultPrevented))
         return;
       i("sending");
@@ -2631,12 +2649,12 @@ function fn(e) {
       )}&name=${encodeURIComponent(e.name || "")}`;
       fetch(
         e.sendSubmissionsTo === "email" ? N : e.action,
-        { body: V, headers: E, method: e.method || "post" }
+        { body: E, headers: B, method: e.method || "post" }
       ).then(
         async (b) => {
           let h;
-          const y = b.headers.get("content-type");
-          if (y && y.indexOf("application/json") !== -1 ? h = await b.json() : h = await b.text(), !b.ok && e.errorMessagePath) {
+          const x = b.headers.get("content-type");
+          if (x && x.indexOf("application/json") !== -1 ? h = await b.json() : h = await b.text(), !b.ok && e.errorMessagePath) {
             let v = mn(h, e.errorMessagePath);
             v && (typeof v != "string" && (v = JSON.stringify(v)), r(v), c({ formErrorMessage: v }));
           }
@@ -2681,7 +2699,7 @@ function fn(e) {
         onSubmit: (g) => f(g),
         ...e.attributes,
         children: [
-          e.builderBlock && e.builderBlock.children ? /* @__PURE__ */ s(R, { children: (m = (d = e.builderBlock) == null ? void 0 : d.children) == null ? void 0 : m.map((g, p) => /* @__PURE__ */ s(
+          e.builderBlock && e.builderBlock.children ? /* @__PURE__ */ s(R, { children: (m = (d = e.builderBlock) == null ? void 0 : d.children) == null ? void 0 : m.map((g, y) => /* @__PURE__ */ s(
             z,
             {
               block: g,
@@ -2689,7 +2707,7 @@ function fn(e) {
               registeredComponents: e.builderComponents,
               linkComponent: e.builderLinkComponent
             },
-            `form-block-${p}`
+            `form-block-${y}`
           )) }) : null,
           u() === "error" ? /* @__PURE__ */ s(
             D,
@@ -3315,7 +3333,8 @@ function ce(e) {
     "script",
     {
       dangerouslySetInnerHTML: { __html: e.scriptStr },
-      "data-id": e.id
+      "data-id": e.id,
+      nonce: e.nonce || ""
     }
   );
 }
@@ -3414,22 +3433,22 @@ font-weight: ${r};
 }
 `, Mn = (e) => e ? "" : jn, Un = (e) => `variant-${e}`;
 function Hn(e) {
-  var V, A, O, S, w, N, b;
+  var E, A, O, S, w, N, b;
   const t = ee(null);
   function n(h) {
     var v, k;
-    const y = {
+    const x = {
       ...e.builderContextSignal.rootState,
       ...h
     };
-    e.builderContextSignal.rootSetState ? (k = (v = e.builderContextSignal).rootSetState) == null || k.call(v, y) : e.setBuilderContextSignal((T) => ({
-      ...T,
-      rootState: y
+    e.builderContextSignal.rootSetState ? (k = (v = e.builderContextSignal).rootSetState) == null || k.call(v, x) : e.setBuilderContextSignal((I) => ({
+      ...I,
+      rootState: x
     }));
   }
   function i(h) {
-    var v, k, T, W, j;
-    const y = {
+    var v, k, I, W, j;
+    const x = {
       ...e.builderContextSignal.content,
       ...h,
       data: {
@@ -3439,12 +3458,12 @@ function Hn(e) {
       meta: {
         ...(k = e.builderContextSignal.content) == null ? void 0 : k.meta,
         ...h == null ? void 0 : h.meta,
-        breakpoints: ((T = h == null ? void 0 : h.meta) == null ? void 0 : T.breakpoints) || ((j = (W = e.builderContextSignal.content) == null ? void 0 : W.meta) == null ? void 0 : j.breakpoints)
+        breakpoints: ((I = h == null ? void 0 : h.meta) == null ? void 0 : I.breakpoints) || ((j = (W = e.builderContextSignal.content) == null ? void 0 : W.meta) == null ? void 0 : j.breakpoints)
       }
     };
     e.setBuilderContextSignal((F) => ({
       ...F,
-      content: y
+      content: x
     }));
   }
   function o() {
@@ -3453,7 +3472,7 @@ function Hn(e) {
       "aria-hidden": !0
     };
   }
-  const [l, a] = C(
+  const [l, a] = T(
     () => e.contentWrapper || "div"
   );
   function r(h) {
@@ -3461,27 +3480,27 @@ function Hn(e) {
       model: e.model,
       trustedHosts: e.trustedHosts,
       callbacks: {
-        configureSdk: (y) => {
-          var T;
-          const { breakpoints: v, contentId: k } = y;
-          !k || k !== ((T = e.builderContextSignal.content) == null ? void 0 : T.id) || v && i({
+        configureSdk: (x) => {
+          var I;
+          const { breakpoints: v, contentId: k } = x;
+          !k || k !== ((I = e.builderContextSignal.content) == null ? void 0 : I.id) || v && i({
             meta: {
               breakpoints: v
             }
           });
         },
-        animation: (y) => {
-          Ne(y);
+        animation: (x) => {
+          Ne(x);
         },
-        contentUpdate: (y) => {
-          i(y);
+        contentUpdate: (x) => {
+          i(x);
         }
       }
     })(h);
   }
   function c() {
-    var y, v;
-    const h = (v = (y = e.builderContextSignal.content) == null ? void 0 : y.data) == null ? void 0 : v.jsCode;
+    var x, v;
+    const h = (v = (x = e.builderContextSignal.content) == null ? void 0 : x.data) == null ? void 0 : v.jsCode;
     h && q({
       code: h,
       context: e.context || {},
@@ -3494,30 +3513,30 @@ function Hn(e) {
       enableCache: !1
     });
   }
-  const [u, f] = C(() => ({})), [d, m] = C(() => ({})), [g, p] = C(() => !1);
-  function I(h) {
-    var y, v;
+  const [u, f] = T(() => ({})), [d, m] = T(() => ({})), [g, y] = T(() => !1);
+  function C(h) {
+    var x, v;
     if (e.builderContextSignal.content) {
-      const k = (y = e.builderContextSignal.content) == null ? void 0 : y.testVariationId, T = (v = e.builderContextSignal.content) == null ? void 0 : v.id;
+      const k = (x = e.builderContextSignal.content) == null ? void 0 : x.testVariationId, I = (v = e.builderContextSignal.content) == null ? void 0 : v.id;
       he({
         type: "click",
         canTrack: Q(e.canTrack),
-        contentId: T,
+        contentId: I,
         apiKey: e.apiKey,
-        variationId: k !== T ? k : void 0,
+        variationId: k !== I ? k : void 0,
         ...$n(h),
         unique: !g
       });
     }
-    g || p(!0);
+    g || y(!0);
   }
-  function x() {
-    var y, v, k;
-    const h = (k = (v = (y = e.builderContextSignal.content) == null ? void 0 : y.data) == null ? void 0 : v.httpRequests) != null ? k : {};
-    Object.entries(h).forEach(([T, W]) => {
-      if (!W || d[T] || u[T] && !$())
+  function p() {
+    var x, v, k;
+    const h = (k = (v = (x = e.builderContextSignal.content) == null ? void 0 : x.data) == null ? void 0 : v.httpRequests) != null ? k : {};
+    Object.entries(h).forEach(([I, W]) => {
+      if (!W || d[I] || u[I] && !$())
         return;
-      d[T] = !0;
+      d[I] = !0;
       const j = W.replace(
         /{{([^}]+)}}/g,
         (F, Ue) => String(
@@ -3533,16 +3552,16 @@ function Hn(e) {
       );
       Ge(j).then((F) => F.json()).then((F) => {
         n({
-          [T]: F
-        }), u[T] = !0;
+          [I]: F
+        }), u[I] = !0;
       }).catch((F) => {
         console.error("error fetching dynamic data", W, F);
       }).finally(() => {
-        d[T] = !1;
+        d[I] = !1;
       });
     });
   }
-  function E() {
+  function B() {
     $() && window.dispatchEvent(
       new CustomEvent(
         "builder:component:stateChange",
@@ -3557,8 +3576,8 @@ function Hn(e) {
       )
     );
   }
-  return B(() => {
-    var h, y;
+  return V(() => {
+    var h, x;
     if (G()) {
       if ($() && (window.addEventListener("message", r), Ke(), ze({
         ...e.locale ? {
@@ -3574,26 +3593,26 @@ function Hn(e) {
         e.builderContextSignal.componentInfos
       ).forEach((k) => {
         var W;
-        const T = _e(k);
-        (W = window.parent) == null || W.postMessage(T, "*");
+        const I = _e(k);
+        (W = window.parent) == null || W.postMessage(I, "*");
       }), window.addEventListener(
         "builder:component:stateChangeListenerActivated",
-        E
+        B
       )), e.builderContextSignal.content && Q(e.canTrack)) {
-        const k = (h = e.builderContextSignal.content) == null ? void 0 : h.testVariationId, T = (y = e.builderContextSignal.content) == null ? void 0 : y.id, W = e.apiKey;
+        const k = (h = e.builderContextSignal.content) == null ? void 0 : h.testVariationId, I = (x = e.builderContextSignal.content) == null ? void 0 : x.id, W = e.apiKey;
         he({
           type: "impression",
           canTrack: !0,
-          contentId: T,
+          contentId: I,
           apiKey: W,
-          variationId: k !== T ? k : void 0
+          variationId: k !== I ? k : void 0
         });
       }
       if (Je() && !$()) {
-        const k = new URL(location.href).searchParams, T = k.get("builder.preview"), W = k.get(
-          `builder.overrides.${T}`
+        const k = new URL(location.href).searchParams, I = k.get("builder.preview"), W = k.get(
+          `builder.overrides.${I}`
         ), j = k.get("apiKey") || k.get("builder.space");
-        T === e.model && j === e.apiKey && (!e.content || W === e.content.id) && Ie({
+        I === e.model && j === e.apiKey && (!e.content || W === e.content.id) && Ie({
           model: e.model,
           apiKey: e.apiKey,
           apiVersion: e.builderContextSignal.apiVersion
@@ -3602,34 +3621,34 @@ function Hn(e) {
         });
       }
     }
-  }, []), B(() => {
+  }, []), V(() => {
     e.apiKey || Z.error(
       "No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop."
-    ), c(), x(), E();
-  }, []), B(() => {
+    ), c(), p(), B();
+  }, []), V(() => {
     e.content && i(e.content);
-  }, [e.content]), B(() => {
+  }, [e.content]), V(() => {
     c();
-  }, [(A = (V = e.builderContextSignal.content) == null ? void 0 : V.data) == null ? void 0 : A.jsCode]), B(() => {
-    x();
-  }, [(S = (O = e.builderContextSignal.content) == null ? void 0 : O.data) == null ? void 0 : S.httpRequests]), B(() => {
-    E();
-  }, [e.builderContextSignal.rootState]), B(() => {
+  }, [(A = (E = e.builderContextSignal.content) == null ? void 0 : E.data) == null ? void 0 : A.jsCode]), V(() => {
+    p();
+  }, [(S = (O = e.builderContextSignal.content) == null ? void 0 : O.data) == null ? void 0 : S.httpRequests]), V(() => {
+    B();
+  }, [e.builderContextSignal.rootState]), V(() => {
     e.data && n(e.data);
-  }, [e.data]), B(() => {
+  }, [e.data]), V(() => {
     e.locale && n({
       locale: e.locale
     });
-  }, [e.locale]), B(() => () => {
+  }, [e.locale]), V(() => () => {
     G() && (window.removeEventListener("message", r), window.removeEventListener(
       "builder:component:stateChangeListenerActivated",
-      E
+      B
     ));
   }, []), /* @__PURE__ */ s(me.Provider, { value: e.builderContextSignal, children: e.builderContextSignal.content ? /* @__PURE__ */ s(
     l,
     {
       ref: t,
-      onClick: (h) => I(h),
+      onClick: (h) => C(h),
       "builder-content-id": (w = e.builderContextSignal.content) == null ? void 0 : w.id,
       "builder-model": e.model,
       ...o(),
@@ -3642,7 +3661,7 @@ function Hn(e) {
   ) : null });
 }
 function qn(e) {
-  const [t, n] = C(
+  const [t, n] = T(
     () => `
 ${On({
       cssCode: e.cssCode,
@@ -3654,7 +3673,14 @@ ${Ln({
 ${Mn(e.isNestedRender)}
 `.trim()
   );
-  return /* @__PURE__ */ s(ne, { id: "builderio-content", styles: t });
+  return /* @__PURE__ */ s(
+    ne,
+    {
+      id: "builderio-content",
+      styles: t,
+      nonce: e.nonce
+    }
+  );
 }
 const Kn = ({
   content: e,
@@ -3685,68 +3711,75 @@ const Kn = ({
   meta: e == null ? void 0 : e.meta
 } : void 0;
 function Te(e) {
-  var c, u, f, d, m, g, p;
-  const [t, n] = C(
+  var c, u, f, d, m, g, y;
+  const [t, n] = T(
     () => {
-      var I, x;
+      var C, p;
       return Nn({
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-        variationId: (I = e.content) == null ? void 0 : I.testVariationId,
+        variationId: (C = e.content) == null ? void 0 : C.testVariationId,
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-        contentId: (x = e.content) == null ? void 0 : x.id
+        contentId: (p = e.content) == null ? void 0 : p.id
       });
     }
   );
-  function i(I) {
-    r((x) => ({
-      ...x,
-      rootState: I
+  function i(C) {
+    r((p) => ({
+      ...p,
+      rootState: C
     }));
   }
-  const [o, l] = C(
-    () => [
-      ...Se(),
-      ...e.customComponents || []
-    ].reduce(
-      (I, { component: x, ...E }) => ({
-        ...I,
-        [E.name]: {
-          component: x,
-          ...ge(E)
-        }
+  const [o, l] = T(
+    () => {
+      var C;
+      return [
+        ...Se(),
+        ...((C = e.customComponents) == null ? void 0 : C.filter(({ models: p }) => !(p != null && p.length) || !e.model ? !0 : p.includes(e.model))) || []
+      ].reduce(
+        (p, { component: B, ...E }) => ({
+          ...p,
+          [E.name]: {
+            component: B,
+            ...ge(E)
+          }
+        }),
+        {}
+      );
+    }
+  ), [a, r] = T(() => {
+    var C;
+    return {
+      content: zn({
+        content: e.content,
+        data: e.data
       }),
-      {}
-    )
-  ), [a, r] = C(() => ({
-    content: zn({
-      content: e.content,
-      data: e.data
-    }),
-    localState: void 0,
-    rootState: Kn({
-      content: e.content,
-      data: e.data,
-      locale: e.locale
-    }),
-    rootSetState: i,
-    context: e.context || {},
-    canTrack: e.canTrack,
-    apiKey: e.apiKey,
-    apiVersion: e.apiVersion,
-    componentInfos: [
-      ...Se(),
-      ...e.customComponents || []
-    ].reduce(
-      (I, { component: x, ...E }) => ({
-        ...I,
-        [E.name]: ge(E)
+      localState: void 0,
+      rootState: Kn({
+        content: e.content,
+        data: e.data,
+        locale: e.locale
       }),
-      {}
-    ),
-    inheritedStyles: {},
-    BlocksWrapper: e.blocksWrapper || "div",
-    BlocksWrapperProps: e.blocksWrapperProps || {}
-  }));
+      rootSetState: i,
+      context: e.context || {},
+      canTrack: e.canTrack,
+      apiKey: e.apiKey,
+      apiVersion: e.apiVersion,
+      componentInfos: [
+        ...Se(),
+        ...((C = e.customComponents) == null ? void 0 : C.filter(({ models: p }) => !(p != null && p.length) || !e.model ? !0 : p.includes(e.model))) || []
+      ].reduce(
+        (p, { component: B, ...E }) => ({
+          ...p,
+          [E.name]: ge(E)
+        }),
+        {}
+      ),
+      inheritedStyles: {},
+      BlocksWrapper: e.blocksWrapper || "div",
+      BlocksWrapperProps: e.blocksWrapperProps || {},
+      nonce: e.nonce || ""
+    };
+  });
   return /* @__PURE__ */ s(
     Be.Provider,
     {
@@ -3756,6 +3789,7 @@ function Te(e) {
       children: /* @__PURE__ */ P(
         Hn,
         {
+          nonce: e.nonce,
           content: e.content,
           data: e.data,
           model: e.model,
@@ -3775,12 +3809,14 @@ function Te(e) {
               ce,
               {
                 id: "builderio-variant-visibility",
-                scriptStr: t
+                scriptStr: t,
+                nonce: e.nonce || ""
               }
             ) : null,
             /* @__PURE__ */ s(
               qn,
               {
+                nonce: e.nonce || "",
                 isNestedRender: e.isNestedRender,
                 contentId: (c = a.content) == null ? void 0 : c.id,
                 cssCode: (f = (u = a.content) == null ? void 0 : u.data) == null ? void 0 : f.cssCode,
@@ -3790,7 +3826,7 @@ function Te(e) {
             /* @__PURE__ */ s(
               D,
               {
-                blocks: (p = (g = a.content) == null ? void 0 : g.data) == null ? void 0 : p.blocks,
+                blocks: (y = (g = a.content) == null ? void 0 : g.data) == null ? void 0 : y.blocks,
                 context: a,
                 registeredComponents: o,
                 linkComponent: e.linkComponent
@@ -3804,7 +3840,7 @@ function Te(e) {
 }
 function _n(e) {
   var a;
-  const [t, n] = C(
+  const [t, n] = T(
     () => Bn({
       canTrack: Q(e.canTrack),
       content: e.content
@@ -3833,14 +3869,14 @@ function _n(e) {
       canTrack: Q(e.canTrack)
     });
   }
-  return B(() => {
-  }, []), B(() => {
-  }), /* @__PURE__ */ P(R, { children: [
+  return V(() => {
+  }, []), /* @__PURE__ */ P(R, { children: [
     !e.isNestedRender && K !== "reactNative" ? /* @__PURE__ */ s(
       ce,
       {
         id: "builderio-init-variants-fns",
-        scriptStr: Vn()
+        scriptStr: Vn(),
+        nonce: e.nonce || ""
       }
     ) : null,
     t ? /* @__PURE__ */ P(R, { children: [
@@ -3848,20 +3884,23 @@ function _n(e) {
         ne,
         {
           id: "builderio-variants",
-          styles: o()
+          styles: o(),
+          nonce: e.nonce || ""
         }
       ),
       /* @__PURE__ */ s(
         ce,
         {
           id: "builderio-variants-visibility",
-          scriptStr: i()
+          scriptStr: i(),
+          nonce: e.nonce || ""
         }
       ),
       (a = J(e.content)) == null ? void 0 : a.map((r) => /* @__PURE__ */ s(
         Te,
         {
           isNestedRender: e.isNestedRender,
+          nonce: e.nonce,
           content: r,
           showContent: !1,
           model: e.model,
@@ -3887,6 +3926,7 @@ function _n(e) {
     /* @__PURE__ */ s(
       Te,
       {
+        nonce: e.nonce,
         isNestedRender: e.isNestedRender,
         content: l(),
         showContent: !0,
@@ -3946,7 +3986,7 @@ function Yn(e) {
       (m = e.symbol) != null && m.dynamic || e.dynamic ? "builder-dynamic-symbol" : void 0
     ].filter(Boolean).join(" ");
   }
-  const [o, l] = C(() => {
+  const [o, l] = T(() => {
     var d;
     return (d = e.symbol) == null ? void 0 : d.content;
   });
@@ -3958,12 +3998,13 @@ function Yn(e) {
       d && l(d);
     });
   }
-  return B(() => {
-  }, []), B(() => {
+  return V(() => {
+  }, []), V(() => {
     a();
   }, [e.symbol]), /* @__PURE__ */ s("div", { ...e.attributes, className: i(), children: /* @__PURE__ */ s(
     _n,
     {
+      nonce: e.builderContext.nonce,
       isNestedRender: !0,
       apiVersion: e.builderContext.apiVersion,
       apiKey: e.builderContext.apiKey,