@builder.io/sdk-qwik 0.1.4-0 → 0.1.5

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { createContext, _wrapSignal, _IMMUTABLE, inlinedQrl, useLexicalScope, componentQrl, useContextProvider, useStore, useStylesScopedQrl, useContext, Fragment as Fragment$1, Slot, useRef, useWatchQrl, useClientEffectQrl, useCleanupQrl } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, useStylesScopedQrl, _wrapSignal, _IMMUTABLE, createContext, useLexicalScope, useContextProvider, useStore, useContext, Slot, Fragment as Fragment$1, useTaskQrl, useRef, useClientEffectQrl, useCleanupQrl } from "@builder.io/qwik";
 import { jsx, Fragment, jsxs } from "@builder.io/qwik/jsx-runtime";
 const TARGET = "qwik";
 function isBrowser() {
@@ -130,7 +130,35 @@ const setupBrowserForEditing = (options = {}) => {
     });
   }
 };
-const BuilderContext = createContext("Builder");
+const Button = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+  useStylesScopedQrl(inlinedQrl(STYLES$3, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: props.link ? /* @__PURE__ */ jsx("a", {
+      role: "button",
+      ...props.attributes,
+      get href() {
+        return props.link;
+      },
+      target: props.openLinkInNewTab ? "_blank" : void 0,
+      children: _wrapSignal(props, "text"),
+      [_IMMUTABLE]: {
+        href: _wrapSignal(props, "link")
+      }
+    }) : /* @__PURE__ */ jsx("button", {
+      class: "button-Button",
+      ...props.attributes,
+      children: _wrapSignal(props, "text")
+    }),
+    [_IMMUTABLE]: {
+      children: false
+    }
+  }, "jc_0");
+}, "Button_component_gJoMUICXoUQ"));
+const STYLES$3 = `
+.button-Button {
+  all: unset;
+}`;
+const builderContext = createContext("Builder");
 function isIframe() {
   return isBrowser() && window.self !== window.top;
 }
@@ -273,8 +301,13 @@ const RenderInlinedStyles = (props) => {
   const state = {};
   state.tag = tag$1();
   return /* @__PURE__ */ jsx(Fragment, {
-    children: /* @__PURE__ */ jsx(state.tag, {
-      children: _wrapSignal(props, "styles")
+    children: /* @__PURE__ */ jsx("style", {
+      get dangerouslySetInnerHTML() {
+        return props.styles;
+      },
+      [_IMMUTABLE]: {
+        dangerouslySetInnerHTML: _wrapSignal(props, "styles")
+      }
     }),
     [_IMMUTABLE]: {
       children: false
@@ -499,7 +532,7 @@ const RenderComponent = (props) => {
   }, "R9_0");
 };
 const RenderRepeatedBlock = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  useContextProvider(BuilderContext, useStore({
+  useContextProvider(builderContext, useStore({
     content: props.repeatContext.content,
     state: props.repeatContext.state,
     context: props.repeatContext.context,
@@ -537,10 +570,24 @@ const useBlock = function useBlock22(props, state) {
     shouldEvaluateBindings: true
   });
 };
+const proxyState = function proxyState2(props, state) {
+  if (typeof Proxy === "undefined") {
+    console.error("no Proxy available in this environment, cannot proxy state.");
+    return props.context.state;
+  }
+  const useState = new Proxy(props.context.state, {
+    set: (obj, prop, value) => {
+      obj[prop] = value;
+      props.context.setState?.(obj);
+      return true;
+    }
+  });
+  return useState;
+};
 const actions = function actions2(props, state) {
   return getBlockActions({
     block: useBlock(props),
-    state: props.context.state,
+    state: proxyState(props),
     context: props.context.context
   });
 };
@@ -587,6 +634,7 @@ const childrenContext = function childrenContext2(props, state) {
     state: props.context.state,
     content: props.context.content,
     context: props.context.context,
+    setState: props.context.setState,
     registeredComponents: props.context.registeredComponents,
     inheritedStyles: getInheritedTextStyles()
   };
@@ -649,10 +697,10 @@ const RenderBlock = (props) => {
   }, "9d_3");
 };
 const RenderBlock$1 = RenderBlock;
-const className$1 = function className2(props, state, builderContext) {
+const className$1 = function className2(props, state, builderContext2) {
   return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
 };
-const onClick$1 = function onClick2(props, state, builderContext) {
+const onClick$1 = function onClick2(props, state, builderContext2) {
   if (isEditing() && !props.blocks?.length)
     window.parent?.postMessage({
       type: "builder.clickEmptyBlocks",
@@ -662,7 +710,7 @@ const onClick$1 = function onClick2(props, state, builderContext) {
       }
     }, "*");
 };
-const onMouseEnter = function onMouseEnter2(props, state, builderContext) {
+const onMouseEnter = function onMouseEnter2(props, state, builderContext2) {
   if (isEditing() && !props.blocks?.length)
     window.parent?.postMessage({
       type: "builder.hoverEmptyBlocks",
@@ -673,8 +721,8 @@ const onMouseEnter = function onMouseEnter2(props, state, builderContext) {
     }, "*");
 };
 const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  useStylesScopedQrl(inlinedQrl(STYLES$3, "RenderBlocks_component_useStylesScoped_0XKYzaR059E"));
-  const builderContext = useContext(BuilderContext);
+  useStylesScopedQrl(inlinedQrl(STYLES$2, "RenderBlocks_component_useStylesScoped_0XKYzaR059E"));
+  const builderContext$1 = useContext(builderContext);
   const state = {};
   return /* @__PURE__ */ jsxs("div", {
     class: className$1(props) + " div-RenderBlocks",
@@ -691,7 +739,7 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       const [builderContext2, props2, state2] = useLexicalScope();
       return onClick$1(props2);
     }, "RenderBlocks_component_div_onClick_RzhhZa265Yg", [
-      builderContext,
+      builderContext$1,
       props,
       state
     ]),
@@ -699,7 +747,7 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       const [builderContext2, props2, state2] = useLexicalScope();
       return onMouseEnter(props2);
     }, "RenderBlocks_component_div_onMouseEnter_nG7I7RYG3JQ", [
-      builderContext,
+      builderContext$1,
       props,
       state
     ]),
@@ -707,13 +755,13 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       props.blocks ? (props.blocks || []).map(function(block) {
         return /* @__PURE__ */ jsx(RenderBlock$1, {
           block,
-          context: builderContext
+          context: builderContext$1
         }, "render-block-" + block.id);
       }) : null,
       props.blocks ? (props.blocks || []).map(function(block) {
         return /* @__PURE__ */ jsx(BlockStyles, {
           block,
-          context: builderContext
+          context: builderContext$1
         }, "block-style-" + block.id);
       }) : null
     ],
@@ -725,7 +773,7 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     }
   });
 }, "RenderBlocks_component_MYUZ0j1uLsw"));
-const STYLES$3 = `
+const STYLES$2 = `
 .div-RenderBlocks {
   display: flex;
   flex-direction: column;
@@ -820,7 +868,7 @@ const columnsStyles = function columnsStyles2(props, state) {
       `;
 };
 const Columns = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  useStylesScopedQrl(inlinedQrl(STYLES$2, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
+  useStylesScopedQrl(inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
   const state = {};
   return /* @__PURE__ */ jsxs("div", {
     class: `builder-columns ${props.builderBlock.id}-breakpoints div-Columns`,
@@ -865,7 +913,7 @@ const Columns = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     }
   });
 }, "Columns_component_7yLj4bxdI6c"));
-const STYLES$2 = `
+const STYLES$1 = `
 .div-Columns {
   display: flex;
   line-height: normal;
@@ -874,6 +922,11 @@ const STYLES$2 = `
   flex-direction: column;
   align-items: stretch;
 }`;
+const FragmentComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+  return /* @__PURE__ */ jsx("span", {
+    children: /* @__PURE__ */ jsx(Slot, {}, "oj_0")
+  });
+}, "FragmentComponent_component_T0AypnadAK0"));
 function removeProtocol(path) {
   return path.replace(/http(s)?:/, "");
 }
@@ -960,7 +1013,7 @@ const aspectRatioCss = function aspectRatioCss2(props, state) {
   return out;
 };
 const Image = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  useStylesScopedQrl(inlinedQrl(STYLES$1, "Image_component_useStylesScoped_fBMYiVf9fuU"));
+  useStylesScopedQrl(inlinedQrl(STYLES, "Image_component_useStylesScoped_fBMYiVf9fuU"));
   return /* @__PURE__ */ jsxs(Fragment$1, {
     children: [
       /* @__PURE__ */ jsxs("picture", {
@@ -1016,7 +1069,7 @@ const Image = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     }
   }, "0A_2");
 }, "Image_component_LRxDkFa1EfU"));
-const STYLES$1 = `
+const STYLES = `
 .img-Image {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
@@ -1034,90 +1087,6 @@ const STYLES$1 = `
   width: 100%;
   height: 100%;
 }`;
-const Text = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  return /* @__PURE__ */ jsx("span", {
-    class: "builder-text",
-    get dangerouslySetInnerHTML() {
-      return props.text;
-    },
-    [_IMMUTABLE]: {
-      dangerouslySetInnerHTML: _wrapSignal(props, "text")
-    }
-  });
-}, "Text_component_15p0cKUxgIE"));
-const videoProps = function videoProps2(props, state) {
-  return {
-    ...props.autoPlay === true ? {
-      autoPlay: true
-    } : {},
-    ...props.muted === true ? {
-      muted: true
-    } : {},
-    ...props.controls === true ? {
-      controls: true
-    } : {},
-    ...props.loop === true ? {
-      loop: true
-    } : {},
-    ...props.playsInline === true ? {
-      playsInline: true
-    } : {}
-  };
-};
-const spreadProps = function spreadProps2(props, state) {
-  return {
-    ...props.attributes,
-    ...videoProps(props)
-  };
-};
-const Video = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  return /* @__PURE__ */ jsx("video", {
-    ...spreadProps(props),
-    style: {
-      width: "100%",
-      height: "100%",
-      ...props.attributes?.style,
-      objectFit: props.fit,
-      objectPosition: props.position,
-      borderRadius: 1
-    },
-    src: props.video || "no-src",
-    get poster() {
-      return props.posterImage;
-    },
-    [_IMMUTABLE]: {
-      poster: _wrapSignal(props, "posterImage")
-    }
-  });
-}, "Video_component_qdcTZflYyoQ"));
-const Button = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  useStylesScopedQrl(inlinedQrl(STYLES, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: props.link ? /* @__PURE__ */ jsx("a", {
-      role: "button",
-      ...props.attributes,
-      get href() {
-        return props.link;
-      },
-      target: props.openLinkInNewTab ? "_blank" : void 0,
-      children: _wrapSignal(props, "text"),
-      [_IMMUTABLE]: {
-        href: _wrapSignal(props, "link")
-      }
-    }) : /* @__PURE__ */ jsx("button", {
-      class: "button-Button",
-      ...props.attributes,
-      children: _wrapSignal(props, "text")
-    }),
-    [_IMMUTABLE]: {
-      children: false
-    }
-  }, "jc_0");
-}, "Button_component_gJoMUICXoUQ"));
-const STYLES = `
-.button-Button {
-  all: unset;
-}`;
 const componentInfo$a = {
   name: "Core:Button",
   builtIn: true,
@@ -1410,11 +1379,6 @@ const componentInfo$8 = {
   canHaveChildren: true,
   noWrap: true
 };
-const FragmentComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  return /* @__PURE__ */ jsx("span", {
-    children: /* @__PURE__ */ jsx(Slot, {}, "oj_0")
-  });
-}, "FragmentComponent_component_T0AypnadAK0"));
 const componentInfo$7 = {
   name: "Image",
   static: true,
@@ -1668,667 +1632,787 @@ const componentInfo$5 = {
     }
   ]
 };
-const componentInfo$4 = {
-  name: "Text",
-  static: true,
-  builtIn: true,
-  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
-  inputs: [
-    {
-      name: "text",
-      type: "html",
-      required: true,
-      autoFocus: true,
-      bubble: true,
-      defaultValue: "Enter some text..."
-    }
+function getGlobalThis() {
+  if (typeof globalThis !== "undefined")
+    return globalThis;
+  if (typeof window !== "undefined")
+    return window;
+  if (typeof global !== "undefined")
+    return global;
+  if (typeof self !== "undefined")
+    return self;
+  return globalThis;
+}
+function getFetch() {
+  const globalFetch = getGlobalThis().fetch;
+  if (typeof globalFetch === "undefined") {
+    console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
+      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
+    throw new Error("Builder SDK could not find a global `fetch` function");
+  }
+  return globalFetch;
+}
+const fetch$1 = getFetch();
+const getTopLevelDomain = (host) => {
+  if (host === "localhost" || host === "127.0.0.1")
+    return host;
+  const parts = host.split(".");
+  if (parts.length > 2)
+    return parts.slice(1).join(".");
+  return host;
+};
+const getCookie = async ({ name, canTrack }) => {
+  try {
+    if (!canTrack)
+      return void 0;
+    return document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))?.split("=")[1];
+  } catch (err) {
+    console.debug("[COOKIE] GET error: ", err);
+    return void 0;
+  }
+};
+const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).filter(checkIsDefined).join("; ");
+const SECURE_CONFIG = [
+  [
+    "secure",
+    ""
   ],
-  defaultStyles: {
-    lineHeight: "normal",
-    height: "auto",
-    textAlign: "center"
+  [
+    "SameSite",
+    "None"
+  ]
+];
+const createCookieString = ({ name, value, expires }) => {
+  const secure = isBrowser() ? location.protocol === "https:" : true;
+  const secureObj = secure ? SECURE_CONFIG : [
+    []
+  ];
+  const expiresObj = expires ? [
+    [
+      "expires",
+      expires.toUTCString()
+    ]
+  ] : [
+    []
+  ];
+  const cookieValue = [
+    [
+      name,
+      value
+    ],
+    ...expiresObj,
+    [
+      "path",
+      "/"
+    ],
+    [
+      "domain",
+      getTopLevelDomain(window.location.hostname)
+    ],
+    ...secureObj
+  ];
+  const cookie = stringifyCookie(cookieValue);
+  return cookie;
+};
+const setCookie = async ({ name, value, expires, canTrack }) => {
+  try {
+    if (!canTrack)
+      return;
+    const cookie = createCookieString({
+      name,
+      value,
+      expires
+    });
+    document.cookie = cookie;
+  } catch (err) {
+    console.warn("[COOKIE] SET error: ", err);
   }
 };
-const componentInfo$3 = {
-  name: "Video",
-  canHaveChildren: true,
-  builtIn: true,
-  defaultStyles: {
-    minHeight: "20px",
-    minWidth: "20px"
-  },
-  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
-  inputs: [
-    {
-      name: "video",
-      type: "file",
-      allowedFileTypes: [
-        "mp4"
-      ],
-      bubble: true,
-      defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
-      required: true
-    },
-    {
-      name: "posterImage",
-      type: "file",
-      allowedFileTypes: [
-        "jpeg",
-        "png"
-      ],
-      helperText: "Image to show before the video plays"
-    },
-    {
-      name: "autoPlay",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "controls",
-      type: "boolean",
-      defaultValue: false
-    },
-    {
-      name: "muted",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "loop",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "playsInline",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "fit",
-      type: "text",
-      defaultValue: "cover",
-      enum: [
-        "contain",
-        "cover",
-        "fill",
-        "auto"
-      ]
-    },
-    {
-      name: "fitContent",
-      type: "boolean",
-      helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
-      defaultValue: true,
-      advanced: true
-    },
-    {
-      name: "position",
-      type: "text",
-      defaultValue: "center",
-      enum: [
-        "center",
-        "top",
-        "left",
-        "right",
-        "bottom",
-        "top left",
-        "top right",
-        "bottom left",
-        "bottom right"
-      ]
-    },
-    {
-      name: "height",
-      type: "number",
-      advanced: true
-    },
-    {
-      name: "width",
-      type: "number",
-      advanced: true
-    },
-    {
-      name: "aspectRatio",
-      type: "number",
-      advanced: true,
-      defaultValue: 0.7004048582995948
-    },
-    {
-      name: "lazyLoad",
-      type: "boolean",
-      helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
-      defaultValue: true,
-      advanced: true
-    }
-  ]
+const BUILDER_STORE_PREFIX = "builderio.variations";
+const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
+const getContentVariationCookie = ({ contentId, canTrack }) => getCookie({
+  name: getContentTestKey(contentId),
+  canTrack
+});
+const setContentVariationCookie = ({ contentId, canTrack, value }) => setCookie({
+  name: getContentTestKey(contentId),
+  value,
+  canTrack
+});
+const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
+const getRandomVariationId = ({ id, variations }) => {
+  let n = 0;
+  const random = Math.random();
+  for (const id1 in variations) {
+    const testRatio = variations[id1]?.testRatio;
+    n += testRatio;
+    if (random < n)
+      return id1;
+  }
+  return id;
 };
-const componentInfo$2 = {
-  name: "Embed",
-  static: true,
-  builtIn: true,
-  inputs: [
-    {
-      name: "url",
-      type: "url",
-      required: true,
-      defaultValue: "",
-      helperText: "e.g. enter a youtube url, google map, etc",
-      onChange: serializeFn((options) => {
-        const url = options.get("url");
-        if (url) {
-          options.set("content", "Loading...");
-          const apiKey = "ae0e60e78201a3f2b0de4b";
-          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
-            if (options.get("url") === url) {
-              if (data.html)
-                options.set("content", data.html);
-              else
-                options.set("content", "Invalid url, please try another");
-            }
-          }).catch((_err) => {
-            options.set("content", "There was an error embedding this URL, please try again or another URL");
-          });
-        } else
-          options.delete("content");
-      })
-    },
-    {
-      name: "content",
-      type: "html",
-      defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
-      hideFromUI: true
-    }
-  ]
+const getTestFields = ({ item, testGroupId }) => {
+  const variationValue = item.variations[testGroupId];
+  if (testGroupId === item.id || !variationValue)
+    return {
+      testVariationId: item.id,
+      testVariationName: "Default"
+    };
+  else
+    return {
+      data: variationValue.data,
+      testVariationId: variationValue.id,
+      testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
+    };
 };
-const SCRIPT_MIME_TYPES = [
-  "text/javascript",
-  "application/javascript",
-  "application/ecmascript"
-];
-const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
-const findAndRunScripts$1 = function findAndRunScripts2(props, state, elem) {
-  if (!elem || !elem.getElementsByTagName)
+const getContentVariation = async ({ item, canTrack }) => {
+  const testGroupId = await getContentVariationCookie({
+    canTrack,
+    contentId: item.id
+  });
+  const testFields = testGroupId ? getTestFields({
+    item,
+    testGroupId
+  }) : void 0;
+  if (testFields)
+    return testFields;
+  else {
+    const randomVariationId = getRandomVariationId({
+      variations: item.variations,
+      id: item.id
+    });
+    setContentVariationCookie({
+      contentId: item.id,
+      value: randomVariationId,
+      canTrack
+    }).catch((err) => {
+      console.error("could not store A/B test variation: ", err);
+    });
+    return getTestFields({
+      item,
+      testGroupId: randomVariationId
+    });
+  }
+};
+const handleABTesting = async ({ item, canTrack }) => {
+  if (!checkIsBuilderContentWithVariations(item))
     return;
-  const scripts = elem.getElementsByTagName("script");
-  for (let i = 0; i < scripts.length; i++) {
-    const script = scripts[i];
-    if (script.src && !state.scriptsInserted.includes(script.src)) {
-      state.scriptsInserted.push(script.src);
-      const newScript = document.createElement("script");
-      newScript.async = true;
-      newScript.src = script.src;
-      document.head.appendChild(newScript);
-    } else if (isJsScript(script) && !state.scriptsRun.includes(script.innerText))
-      try {
-        state.scriptsRun.push(script.innerText);
-        new Function(script.innerText)();
-      } catch (error) {
-        console.warn("`Embed`: Error running script:", error);
-      }
+  const variationValue = await getContentVariation({
+    item,
+    canTrack
+  });
+  Object.assign(item, variationValue);
+};
+function flatten(object, path = null, separator = ".") {
+  return Object.keys(object).reduce((acc, key) => {
+    const value = object[key];
+    const newPath = [
+      path,
+      key
+    ].filter(Boolean).join(separator);
+    const isObject = [
+      typeof value === "object",
+      value !== null,
+      !(Array.isArray(value) && value.length === 0)
+    ].every(Boolean);
+    return isObject ? {
+      ...acc,
+      ...flatten(value, newPath, separator)
+    } : {
+      ...acc,
+      [newPath]: value
+    };
+  }, {});
+}
+const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
+const BUILDER_OPTIONS_PREFIX = "options.";
+const convertSearchParamsToQueryObject = (searchParams) => {
+  const options = {};
+  searchParams.forEach((value, key) => {
+    options[key] = value;
+  });
+  return options;
+};
+const getBuilderSearchParams = (_options) => {
+  if (!_options)
+    return {};
+  const options = normalizeSearchParams(_options);
+  const newOptions = {};
+  Object.keys(options).forEach((key) => {
+    if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
+      const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
+      newOptions[trimmedKey] = options[key];
+    }
+  });
+  return newOptions;
+};
+const getBuilderSearchParamsFromWindow = () => {
+  if (!isBrowser())
+    return {};
+  const searchParams = new URLSearchParams(window.location.search);
+  return getBuilderSearchParams(searchParams);
+};
+const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
+const generateContentUrl = (options) => {
+  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale } = options;
+  if (!apiKey)
+    throw new Error("Missing API key");
+  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
+  const queryOptions = {
+    ...getBuilderSearchParamsFromWindow(),
+    ...normalizeSearchParams(options.options || {})
+  };
+  const flattened = flatten(queryOptions);
+  for (const key in flattened)
+    url.searchParams.set(key, String(flattened[key]));
+  if (userAttributes)
+    url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
+  if (query) {
+    const flattened1 = flatten({
+      query
+    });
+    for (const key1 in flattened1)
+      url.searchParams.set(key1, JSON.stringify(flattened1[key1]));
   }
+  return url;
 };
-const Embed = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  const elem = useRef();
+async function getContent(options) {
+  return (await getAllContent({
+    ...options,
+    limit: 1
+  })).results[0] || null;
+}
+async function getAllContent(options) {
+  const url = generateContentUrl(options);
+  const res = await fetch$1(url.href);
+  const content = await res.json();
+  const canTrack = options.canTrack !== false;
+  if (canTrack && Array.isArray(content.results))
+    for (const item of content.results)
+      await handleABTesting({
+        item,
+        canTrack
+      });
+  return content;
+}
+const className = function className22(props, state, builderContext2) {
+  return [
+    ...[
+      props.attributes.class
+    ],
+    "builder-symbol",
+    props.symbol?.inline ? "builder-inline-symbol" : void 0,
+    props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
+  ].filter(Boolean).join(" ");
+};
+const contentToUse = function contentToUse2(props, state, builderContext2) {
+  return props.symbol?.content || state.fetchedContent;
+};
+const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+  const builderContext$1 = useContext(builderContext);
   const state = useStore({
-    ranInitFn: false,
-    scriptsInserted: [],
-    scriptsRun: []
+    fetchedContent: null
   });
-  useWatchQrl(inlinedQrl(({ track: track2 }) => {
-    const [elem2, props2, state2] = useLexicalScope();
-    state2 && track2(state2, "ranInitFn");
-    if (elem2 && !state2.ranInitFn) {
-      state2.ranInitFn = true;
-      findAndRunScripts$1(props2, state2, elem2);
-    }
-  }, "Embed_component_useWatch_AxgWjrHdlAI", [
-    elem,
+  useTaskQrl(inlinedQrl(({ track: track2 }) => {
+    const [builderContext2, props2, state2] = useLexicalScope();
+    track2(() => props2.symbol);
+    track2(() => state2.fetchedContent);
+    const symbolToUse = props2.symbol;
+    if (symbolToUse && !symbolToUse.content && !state2.fetchedContent && symbolToUse.model && builderContext2?.apiKey)
+      getContent({
+        model: symbolToUse.model,
+        apiKey: builderContext2.apiKey,
+        query: {
+          id: symbolToUse.entry
+        }
+      }).then((response) => {
+        state2.fetchedContent = response;
+      });
+  }, "Symbol_component_useTask_NIAWAC1bMBo", [
+    builderContext$1,
     props,
     state
   ]));
   return /* @__PURE__ */ jsx("div", {
-    class: "builder-embed",
-    ref: elem,
+    ...props.attributes,
+    class: className(props),
+    children: /* @__PURE__ */ jsx(RenderContent$1, {
+      get apiKey() {
+        return builderContext$1.apiKey;
+      },
+      get context() {
+        return builderContext$1.context;
+      },
+      customComponents: Object.values(builderContext$1.registeredComponents),
+      data: {
+        ...props.symbol?.data,
+        ...builderContext$1.state,
+        ...props.symbol?.content?.data?.state
+      },
+      model: props.symbol?.model,
+      content: contentToUse(props, state),
+      [_IMMUTABLE]: {
+        apiKey: _wrapSignal(builderContext$1, "apiKey"),
+        context: _wrapSignal(builderContext$1, "context")
+      }
+    }, "Wt_0")
+  });
+}, "Symbol_component_WVvggdkUPdk"));
+const componentInfo$4 = {
+  name: "Text",
+  static: true,
+  builtIn: true,
+  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
+  inputs: [
+    {
+      name: "text",
+      type: "html",
+      required: true,
+      autoFocus: true,
+      bubble: true,
+      defaultValue: "Enter some text..."
+    }
+  ],
+  defaultStyles: {
+    lineHeight: "normal",
+    height: "auto",
+    textAlign: "center"
+  }
+};
+const Text = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+  return /* @__PURE__ */ jsx("span", {
+    class: "builder-text",
     get dangerouslySetInnerHTML() {
-      return props.content;
+      return props.text;
     },
     [_IMMUTABLE]: {
-      dangerouslySetInnerHTML: _wrapSignal(props, "content")
+      dangerouslySetInnerHTML: _wrapSignal(props, "text")
     }
   });
-}, "Embed_component_Uji08ORjXbE"));
-const ImgComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  return /* @__PURE__ */ jsx("img", {
-    style: {
-      objectFit: props.backgroundSize || "cover",
-      objectPosition: props.backgroundPosition || "center"
-    },
-    get alt() {
-      return props.altText;
-    },
-    src: props.imgSrc || props.image,
-    ...props.attributes,
-    [_IMMUTABLE]: {
-      alt: _wrapSignal(props, "altText")
-    }
-  }, isEditing() && props.imgSrc || "default-key");
-}, "ImgComponent_component_FXvIDBSffO8"));
-const componentInfo$1 = {
-  name: "Raw:Img",
-  hideFromInsertMenu: true,
+}, "Text_component_15p0cKUxgIE"));
+const componentInfo$3 = {
+  name: "Video",
+  canHaveChildren: true,
   builtIn: true,
-  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: {
+    minHeight: "20px",
+    minWidth: "20px"
+  },
+  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
   inputs: [
     {
-      name: "image",
+      name: "video",
+      type: "file",
+      allowedFileTypes: [
+        "mp4"
+      ],
       bubble: true,
+      defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
+      required: true
+    },
+    {
+      name: "posterImage",
       type: "file",
       allowedFileTypes: [
         "jpeg",
-        "jpg",
-        "png",
-        "svg"
+        "png"
       ],
-      required: true
-    }
-  ],
-  noWrap: true,
-  static: true
-};
-const findAndRunScripts = function findAndRunScripts22(props, state, elem) {
-  if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
-    const scripts = elem.getElementsByTagName("script");
-    for (let i = 0; i < scripts.length; i++) {
-      const script = scripts[i];
-      if (script.src) {
-        if (state.scriptsInserted.includes(script.src))
-          continue;
-        state.scriptsInserted.push(script.src);
-        const newScript = document.createElement("script");
-        newScript.async = true;
-        newScript.src = script.src;
-        document.head.appendChild(newScript);
-      } else if (!script.type || [
-        "text/javascript",
-        "application/javascript",
-        "application/ecmascript"
-      ].includes(script.type)) {
-        if (state.scriptsRun.includes(script.innerText))
-          continue;
-        try {
-          state.scriptsRun.push(script.innerText);
-          new Function(script.innerText)();
-        } catch (error) {
-          console.warn("`CustomCode`: Error running script:", error);
-        }
-      }
-    }
-  }
-};
-const CustomCode = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  const elem = useRef();
-  const state = useStore({
-    scriptsInserted: [],
-    scriptsRun: []
-  });
-  useClientEffectQrl(inlinedQrl(() => {
-    const [elem2, props2, state2] = useLexicalScope();
-    findAndRunScripts(props2, state2, elem2);
-  }, "CustomCode_component_useClientEffect_4w4c951ufB4", [
-    elem,
-    props,
-    state
-  ]));
-  return /* @__PURE__ */ jsx("div", {
-    ref: elem,
-    class: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""),
-    get dangerouslySetInnerHTML() {
-      return props.code;
+      helperText: "Image to show before the video plays"
+    },
+    {
+      name: "autoPlay",
+      type: "boolean",
+      defaultValue: true
     },
-    [_IMMUTABLE]: {
-      dangerouslySetInnerHTML: _wrapSignal(props, "code")
-    }
-  });
-}, "CustomCode_component_uYOSy7w7Zqw"));
-const componentInfo = {
-  name: "Custom Code",
-  static: true,
-  builtIn: true,
-  requiredPermissions: [
-    "editCode"
-  ],
-  inputs: [
     {
-      name: "code",
-      type: "html",
-      required: true,
-      defaultValue: "<p>Hello there, I am custom HTML code!</p>",
-      code: true
+      name: "controls",
+      type: "boolean",
+      defaultValue: false
     },
     {
-      name: "replaceNodes",
+      name: "muted",
       type: "boolean",
-      helperText: "Preserve server rendered dom nodes",
-      advanced: true
+      defaultValue: true
     },
     {
-      name: "scriptsClientOnly",
+      name: "loop",
       type: "boolean",
-      defaultValue: false,
-      helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
+      defaultValue: true
+    },
+    {
+      name: "playsInline",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "fit",
+      type: "text",
+      defaultValue: "cover",
+      enum: [
+        "contain",
+        "cover",
+        "fill",
+        "auto"
+      ]
+    },
+    {
+      name: "fitContent",
+      type: "boolean",
+      helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
+      defaultValue: true,
       advanced: true
-    }
-  ]
-};
-const getDefaultRegisteredComponents = () => [
-  {
-    component: Columns,
-    ...componentInfo$9
-  },
-  {
-    component: Image,
-    ...componentInfo$7
-  },
-  {
-    component: ImgComponent,
-    ...componentInfo$1
-  },
-  {
-    component: Text,
-    ...componentInfo$4
-  },
-  {
-    component: Video,
-    ...componentInfo$3
-  },
-  {
-    component: Symbol$1,
-    ...componentInfo$5
-  },
-  {
-    component: Button,
-    ...componentInfo$a
-  },
-  {
-    component: SectionComponent,
-    ...componentInfo$6
-  },
-  {
-    component: FragmentComponent,
-    ...componentInfo$8
-  },
-  {
-    component: Embed,
-    ...componentInfo$2
-  },
-  {
-    component: CustomCode,
-    ...componentInfo
-  }
-];
-function getGlobalThis() {
-  if (typeof globalThis !== "undefined")
-    return globalThis;
-  if (typeof window !== "undefined")
-    return window;
-  if (typeof global !== "undefined")
-    return global;
-  if (typeof self !== "undefined")
-    return self;
-  return globalThis;
-}
-function getFetch() {
-  const globalFetch = getGlobalThis().fetch;
-  if (typeof globalFetch === "undefined") {
-    console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
-      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
-    throw new Error("Builder SDK could not find a global `fetch` function");
-  }
-  return globalFetch;
-}
-const fetch$1 = getFetch();
-const getTopLevelDomain = (host) => {
-  if (host === "localhost" || host === "127.0.0.1")
-    return host;
-  const parts = host.split(".");
-  if (parts.length > 2)
-    return parts.slice(1).join(".");
-  return host;
-};
-const getCookie = async ({ name, canTrack }) => {
-  try {
-    if (!canTrack)
-      return void 0;
-    return document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))?.split("=")[1];
-  } catch (err) {
-    console.debug("[COOKIE] GET error: ", err);
-    return void 0;
-  }
-};
-const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).filter(checkIsDefined).join("; ");
-const SECURE_CONFIG = [
-  [
-    "secure",
-    ""
-  ],
-  [
-    "SameSite",
-    "None"
-  ]
-];
-const createCookieString = ({ name, value, expires }) => {
-  const secure = isBrowser() ? location.protocol === "https:" : true;
-  const secureObj = secure ? SECURE_CONFIG : [
-    []
-  ];
-  const expiresObj = expires ? [
-    [
-      "expires",
-      expires.toUTCString()
-    ]
-  ] : [
-    []
-  ];
-  const cookieValue = [
-    [
-      name,
-      value
-    ],
-    ...expiresObj,
-    [
-      "path",
-      "/"
-    ],
-    [
-      "domain",
-      getTopLevelDomain(window.location.hostname)
-    ],
-    ...secureObj
-  ];
-  const cookie = stringifyCookie(cookieValue);
-  return cookie;
-};
-const setCookie = async ({ name, value, expires, canTrack }) => {
-  try {
-    if (!canTrack)
-      return;
-    const cookie = createCookieString({
-      name,
-      value,
-      expires
-    });
-    document.cookie = cookie;
-  } catch (err) {
-    console.warn("[COOKIE] SET error: ", err);
-  }
-};
-const BUILDER_STORE_PREFIX = "builderio.variations";
-const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
-const getContentVariationCookie = ({ contentId, canTrack }) => getCookie({
-  name: getContentTestKey(contentId),
-  canTrack
-});
-const setContentVariationCookie = ({ contentId, canTrack, value }) => setCookie({
-  name: getContentTestKey(contentId),
-  value,
-  canTrack
-});
-const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
-const getRandomVariationId = ({ id, variations }) => {
-  let n = 0;
-  const random = Math.random();
-  for (const id1 in variations) {
-    const testRatio = variations[id1]?.testRatio;
-    n += testRatio;
-    if (random < n)
-      return id1;
-  }
-  return id;
+    },
+    {
+      name: "position",
+      type: "text",
+      defaultValue: "center",
+      enum: [
+        "center",
+        "top",
+        "left",
+        "right",
+        "bottom",
+        "top left",
+        "top right",
+        "bottom left",
+        "bottom right"
+      ]
+    },
+    {
+      name: "height",
+      type: "number",
+      advanced: true
+    },
+    {
+      name: "width",
+      type: "number",
+      advanced: true
+    },
+    {
+      name: "aspectRatio",
+      type: "number",
+      advanced: true,
+      defaultValue: 0.7004048582995948
+    },
+    {
+      name: "lazyLoad",
+      type: "boolean",
+      helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
+      defaultValue: true,
+      advanced: true
+    }
+  ]
 };
-const getTestFields = ({ item, testGroupId }) => {
-  const variationValue = item.variations[testGroupId];
-  if (testGroupId === item.id || !variationValue)
-    return {
-      testVariationId: item.id,
-      testVariationName: "Default"
-    };
-  else
-    return {
-      data: variationValue.data,
-      testVariationId: variationValue.id,
-      testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
-    };
+const videoProps = function videoProps2(props, state) {
+  return {
+    ...props.autoPlay === true ? {
+      autoPlay: true
+    } : {},
+    ...props.muted === true ? {
+      muted: true
+    } : {},
+    ...props.controls === true ? {
+      controls: true
+    } : {},
+    ...props.loop === true ? {
+      loop: true
+    } : {},
+    ...props.playsInline === true ? {
+      playsInline: true
+    } : {}
+  };
 };
-const getContentVariation = async ({ item, canTrack }) => {
-  const testGroupId = await getContentVariationCookie({
-    canTrack,
-    contentId: item.id
+const spreadProps = function spreadProps2(props, state) {
+  return {
+    ...props.attributes,
+    ...videoProps(props)
+  };
+};
+const Video = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+  return /* @__PURE__ */ jsx("video", {
+    ...spreadProps(props),
+    style: {
+      width: "100%",
+      height: "100%",
+      ...props.attributes?.style,
+      objectFit: props.fit,
+      objectPosition: props.position,
+      borderRadius: 1
+    },
+    src: props.video || "no-src",
+    get poster() {
+      return props.posterImage;
+    },
+    [_IMMUTABLE]: {
+      poster: _wrapSignal(props, "posterImage")
+    }
   });
-  const testFields = testGroupId ? getTestFields({
-    item,
-    testGroupId
-  }) : void 0;
-  if (testFields)
-    return testFields;
-  else {
-    const randomVariationId = getRandomVariationId({
-      variations: item.variations,
-      id: item.id
-    });
-    setContentVariationCookie({
-      contentId: item.id,
-      value: randomVariationId,
-      canTrack
-    }).catch((err) => {
-      console.error("could not store A/B test variation: ", err);
-    });
-    return getTestFields({
-      item,
-      testGroupId: randomVariationId
-    });
-  }
+}, "Video_component_qdcTZflYyoQ"));
+const componentInfo$2 = {
+  name: "Embed",
+  static: true,
+  builtIn: true,
+  inputs: [
+    {
+      name: "url",
+      type: "url",
+      required: true,
+      defaultValue: "",
+      helperText: "e.g. enter a youtube url, google map, etc",
+      onChange: serializeFn((options) => {
+        const url = options.get("url");
+        if (url) {
+          options.set("content", "Loading...");
+          const apiKey = "ae0e60e78201a3f2b0de4b";
+          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
+            if (options.get("url") === url) {
+              if (data.html)
+                options.set("content", data.html);
+              else
+                options.set("content", "Invalid url, please try another");
+            }
+          }).catch((_err) => {
+            options.set("content", "There was an error embedding this URL, please try again or another URL");
+          });
+        } else
+          options.delete("content");
+      })
+    },
+    {
+      name: "content",
+      type: "html",
+      defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+      hideFromUI: true
+    }
+  ]
 };
-const handleABTesting = async ({ item, canTrack }) => {
-  if (!checkIsBuilderContentWithVariations(item))
+const SCRIPT_MIME_TYPES = [
+  "text/javascript",
+  "application/javascript",
+  "application/ecmascript"
+];
+const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
+const findAndRunScripts$1 = function findAndRunScripts2(props, state, elem) {
+  if (!elem || !elem.getElementsByTagName)
     return;
-  const variationValue = await getContentVariation({
-    item,
-    canTrack
-  });
-  Object.assign(item, variationValue);
+  const scripts = elem.getElementsByTagName("script");
+  for (let i = 0; i < scripts.length; i++) {
+    const script = scripts[i];
+    if (script.src && !state.scriptsInserted.includes(script.src)) {
+      state.scriptsInserted.push(script.src);
+      const newScript = document.createElement("script");
+      newScript.async = true;
+      newScript.src = script.src;
+      document.head.appendChild(newScript);
+    } else if (isJsScript(script) && !state.scriptsRun.includes(script.innerText))
+      try {
+        state.scriptsRun.push(script.innerText);
+        new Function(script.innerText)();
+      } catch (error) {
+        console.warn("`Embed`: Error running script:", error);
+      }
+  }
 };
-function flatten(object, path = null, separator = ".") {
-  return Object.keys(object).reduce((acc, key) => {
-    const value = object[key];
-    const newPath = [
-      path,
-      key
-    ].filter(Boolean).join(separator);
-    const isObject = [
-      typeof value === "object",
-      value !== null,
-      !(Array.isArray(value) && value.length === 0)
-    ].every(Boolean);
-    return isObject ? {
-      ...acc,
-      ...flatten(value, newPath, separator)
-    } : {
-      ...acc,
-      [newPath]: value
-    };
-  }, {});
-}
-const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
-const BUILDER_OPTIONS_PREFIX = "options.";
-const convertSearchParamsToQueryObject = (searchParams) => {
-  const options = {};
-  searchParams.forEach((value, key) => {
-    options[key] = value;
+const Embed = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+  const elem = useRef();
+  const state = useStore({
+    ranInitFn: false,
+    scriptsInserted: [],
+    scriptsRun: []
   });
-  return options;
+  useTaskQrl(inlinedQrl(({ track: track2 }) => {
+    const [elem2, props2, state2] = useLexicalScope();
+    track2(() => elem2);
+    track2(() => state2.ranInitFn);
+    if (elem2 && !state2.ranInitFn) {
+      state2.ranInitFn = true;
+      findAndRunScripts$1(props2, state2, elem2);
+    }
+  }, "Embed_component_useTask_bg7ez0XUtiM", [
+    elem,
+    props,
+    state
+  ]));
+  return /* @__PURE__ */ jsx("div", {
+    class: "builder-embed",
+    ref: elem,
+    get dangerouslySetInnerHTML() {
+      return props.content;
+    },
+    [_IMMUTABLE]: {
+      dangerouslySetInnerHTML: _wrapSignal(props, "content")
+    }
+  });
+}, "Embed_component_Uji08ORjXbE"));
+const ImgComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+  return /* @__PURE__ */ jsx("img", {
+    style: {
+      objectFit: props.backgroundSize || "cover",
+      objectPosition: props.backgroundPosition || "center"
+    },
+    get alt() {
+      return props.altText;
+    },
+    src: props.imgSrc || props.image,
+    ...props.attributes,
+    [_IMMUTABLE]: {
+      alt: _wrapSignal(props, "altText")
+    }
+  }, isEditing() && props.imgSrc || "default-key");
+}, "ImgComponent_component_FXvIDBSffO8"));
+const componentInfo$1 = {
+  name: "Raw:Img",
+  hideFromInsertMenu: true,
+  builtIn: true,
+  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",
+  inputs: [
+    {
+      name: "image",
+      bubble: true,
+      type: "file",
+      allowedFileTypes: [
+        "jpeg",
+        "jpg",
+        "png",
+        "svg"
+      ],
+      required: true
+    }
+  ],
+  noWrap: true,
+  static: true
+};
+const findAndRunScripts = function findAndRunScripts22(props, state, elem) {
+  if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
+    const scripts = elem.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      const script = scripts[i];
+      if (script.src) {
+        if (state.scriptsInserted.includes(script.src))
+          continue;
+        state.scriptsInserted.push(script.src);
+        const newScript = document.createElement("script");
+        newScript.async = true;
+        newScript.src = script.src;
+        document.head.appendChild(newScript);
+      } else if (!script.type || [
+        "text/javascript",
+        "application/javascript",
+        "application/ecmascript"
+      ].includes(script.type)) {
+        if (state.scriptsRun.includes(script.innerText))
+          continue;
+        try {
+          state.scriptsRun.push(script.innerText);
+          new Function(script.innerText)();
+        } catch (error) {
+          console.warn("`CustomCode`: Error running script:", error);
+        }
+      }
+    }
+  }
 };
-const getBuilderSearchParams = (_options) => {
-  if (!_options)
-    return {};
-  const options = normalizeSearchParams(_options);
-  const newOptions = {};
-  Object.keys(options).forEach((key) => {
-    if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
-      const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
-      newOptions[trimmedKey] = options[key];
+const CustomCode = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
+  const elem = useRef();
+  const state = useStore({
+    scriptsInserted: [],
+    scriptsRun: []
+  });
+  useClientEffectQrl(inlinedQrl(() => {
+    const [elem2, props2, state2] = useLexicalScope();
+    findAndRunScripts(props2, state2, elem2);
+  }, "CustomCode_component_useClientEffect_4w4c951ufB4", [
+    elem,
+    props,
+    state
+  ]));
+  return /* @__PURE__ */ jsx("div", {
+    ref: elem,
+    class: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""),
+    get dangerouslySetInnerHTML() {
+      return props.code;
+    },
+    [_IMMUTABLE]: {
+      dangerouslySetInnerHTML: _wrapSignal(props, "code")
     }
   });
-  return newOptions;
-};
-const getBuilderSearchParamsFromWindow = () => {
-  if (!isBrowser())
-    return {};
-  const searchParams = new URLSearchParams(window.location.search);
-  return getBuilderSearchParams(searchParams);
+}, "CustomCode_component_uYOSy7w7Zqw"));
+const componentInfo = {
+  name: "Custom Code",
+  static: true,
+  builtIn: true,
+  requiredPermissions: [
+    "editCode"
+  ],
+  inputs: [
+    {
+      name: "code",
+      type: "html",
+      required: true,
+      defaultValue: "<p>Hello there, I am custom HTML code!</p>",
+      code: true
+    },
+    {
+      name: "replaceNodes",
+      type: "boolean",
+      helperText: "Preserve server rendered dom nodes",
+      advanced: true
+    },
+    {
+      name: "scriptsClientOnly",
+      type: "boolean",
+      defaultValue: false,
+      helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
+      advanced: true
+    }
+  ]
 };
-const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
-const generateContentUrl = (options) => {
-  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale } = options;
-  if (!apiKey)
-    throw new Error("Missing API key");
-  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
-  const queryOptions = {
-    ...getBuilderSearchParamsFromWindow(),
-    ...normalizeSearchParams(options.options || {})
-  };
-  const flattened = flatten(queryOptions);
-  for (const key in flattened)
-    url.searchParams.set(key, String(flattened[key]));
-  if (userAttributes)
-    url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
-  if (query) {
-    const flattened1 = flatten({
-      query
-    });
-    for (const key1 in flattened1)
-      url.searchParams.set(key1, JSON.stringify(flattened1[key1]));
+const getDefaultRegisteredComponents = () => [
+  {
+    component: Button,
+    ...componentInfo$a
+  },
+  {
+    component: Columns,
+    ...componentInfo$9
+  },
+  {
+    component: CustomCode,
+    ...componentInfo
+  },
+  {
+    component: Embed,
+    ...componentInfo$2
+  },
+  {
+    component: FragmentComponent,
+    ...componentInfo$8
+  },
+  {
+    component: Image,
+    ...componentInfo$7
+  },
+  {
+    component: ImgComponent,
+    ...componentInfo$1
+  },
+  {
+    component: SectionComponent,
+    ...componentInfo$6
+  },
+  {
+    component: Symbol$1,
+    ...componentInfo$5
+  },
+  {
+    component: Text,
+    ...componentInfo$4
+  },
+  {
+    component: Video,
+    ...componentInfo$3
   }
-  return url;
-};
-async function getContent(options) {
-  return (await getAllContent({
-    ...options,
-    limit: 1
-  })).results[0] || null;
-}
-async function getAllContent(options) {
-  const url = generateContentUrl(options);
-  const res = await fetch$1(url.href);
-  const content = await res.json();
-  const canTrack = options.canTrack !== false;
-  if (canTrack && Array.isArray(content.results))
-    for (const item of content.results)
-      await handleABTesting({
-        item,
-        canTrack
-      });
-  return content;
-}
+];
 function isPreviewing() {
   if (!isBrowser())
     return false;
@@ -2589,20 +2673,20 @@ const getInteractionPropertiesForEvent = (event) => {
     }
   };
 };
-const getCssFromFont = function getCssFromFont2(props, state, font) {
+const getCssFromFont = (font) => {
   const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
   const name = family.split(",")[0];
   const url = font.fileUrl ?? font?.files?.regular;
   let str = "";
   if (url && family && name)
     str += `
-  @font-face {
-    font-family: "${family}";
-    src: local("${name}"), url('${url}') format('woff2');
-    font-display: fallback;
-    font-weight: 400;
-  }
-          `.trim();
+@font-face {
+font-family: "${family}";
+src: local("${name}"), url('${url}') format('woff2');
+font-display: fallback;
+font-weight: 400;
+}
+      `.trim();
   if (font.files)
     for (const weight in font.files) {
       const isNumber = String(Number(weight)) === weight;
@@ -2611,60 +2695,102 @@ const getCssFromFont = function getCssFromFont2(props, state, font) {
       const weightUrl = font.files[weight];
       if (weightUrl && weightUrl !== url)
         str += `
-  @font-face {
-    font-family: "${family}";
-    src: url('${weightUrl}') format('woff2');
-    font-display: fallback;
-    font-weight: ${weight};
-  }
-            `.trim();
+@font-face {
+font-family: "${family}";
+src: url('${weightUrl}') format('woff2');
+font-display: fallback;
+font-weight: ${weight};
+}
+        `.trim();
     }
   return str;
 };
-const getFontCss = function getFontCss2(props, state, { customFonts }) {
-  return customFonts?.map((font) => getCssFromFont(props, state, font))?.join(" ") || "";
+const getFontCss = ({ customFonts }) => {
+  return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
 };
-const injectedStyles = function injectedStyles2(props, state) {
-  return `
-${props.cssCode || ""}
-${getFontCss(props, state, {
-    customFonts: props.customFonts
-  })}`;
+const getCss = ({ cssCode, contentId }) => {
+  if (!cssCode)
+    return "";
+  if (!contentId)
+    return cssCode;
+  return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || "";
 };
 const RenderContentStyles = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  const state = {};
+  const state = useStore({
+    injectedStyles: `
+${getCss({
+      cssCode: props.cssCode,
+      contentId: props.contentId
+    })}
+${getFontCss({
+      customFonts: props.customFonts
+    })}
+`
+  });
   return /* @__PURE__ */ jsx(RenderInlinedStyles, {
-    styles: injectedStyles(props, state)
+    get styles() {
+      return state.injectedStyles;
+    },
+    [_IMMUTABLE]: {
+      styles: _wrapSignal(state, "injectedStyles")
+    }
   }, "V0_0");
 }, "RenderContentStyles_component_Og0xL34Zbvc"));
-const useContent = function useContent2(props, state, elementRef) {
-  if (!props.content && !state.overrideContent)
-    return void 0;
+const getContextStateInitialValue = ({ content, data, locale }) => {
+  const defaultValues = {};
+  content?.data?.inputs?.forEach((input) => {
+    if (input.name && input.defaultValue !== void 0 && content?.data?.state && content.data.state[input.name] === void 0)
+      defaultValues[input.name] = input.defaultValue;
+  });
+  const stateToUse = {
+    ...content?.data?.state,
+    ...data,
+    ...locale ? {
+      locale
+    } : {}
+  };
   return {
-    ...props.content,
-    ...state.overrideContent,
+    ...defaultValues,
+    ...stateToUse
+  };
+};
+const getContentInitialValue = ({ content, data }) => {
+  return !content ? void 0 : {
+    ...content,
+    data: {
+      ...content?.data,
+      ...data
+    },
+    meta: content?.meta
+  };
+};
+const mergeNewContent = function mergeNewContent2(props, state, elementRef, newContent) {
+  state.useContent = {
+    ...state.useContent,
+    ...newContent,
     data: {
-      ...props.content?.data,
-      ...props.data,
-      ...state.overrideContent?.data
+      ...state.useContent?.data,
+      ...newContent?.data
     },
     meta: {
-      ...props.content?.meta,
-      ...state.overrideContent?.meta,
-      breakpoints: state.useBreakpoints || state.overrideContent?.meta?.breakpoints || props.content?.meta?.breakpoints
+      ...state.useContent?.meta,
+      ...newContent?.meta,
+      breakpoints: newContent?.meta?.breakpoints || state.useContent?.meta?.breakpoints
     }
   };
 };
-const contentState = function contentState2(props, state, elementRef) {
-  return {
-    ...props.content?.data?.state,
-    ...props.data,
-    ...props.locale ? {
-      locale: props.locale
-    } : {},
-    ...state.overrideState
+const setBreakpoints = function setBreakpoints2(props, state, elementRef, breakpoints) {
+  state.useContent = {
+    ...state.useContent,
+    meta: {
+      ...state.useContent?.meta,
+      breakpoints
+    }
   };
 };
+const setContextState = function setContextState2(props, state, elementRef, newState) {
+  state.contentState = newState;
+};
 const processMessage = function processMessage2(props, state, elementRef, event) {
   const { data } = event;
   if (data)
@@ -2672,9 +2798,10 @@ const processMessage = function processMessage2(props, state, elementRef, event)
       case "builder.configureSdk": {
         const messageContent = data.data;
         const { breakpoints, contentId } = messageContent;
-        if (!contentId || contentId !== useContent(props, state)?.id)
+        if (!contentId || contentId !== state.useContent?.id)
           return;
-        state.useBreakpoints = breakpoints;
+        if (breakpoints)
+          setBreakpoints(props, state, elementRef, breakpoints);
         state.forceReRenderCount = state.forceReRenderCount + 1;
         break;
       }
@@ -2683,7 +2810,7 @@ const processMessage = function processMessage2(props, state, elementRef, event)
         const key = messageContent1.key || messageContent1.alias || messageContent1.entry || messageContent1.modelName;
         const contentData = messageContent1.data;
         if (key === props.model) {
-          state.overrideContent = contentData;
+          mergeNewContent(props, state, elementRef, contentData);
           state.forceReRenderCount = state.forceReRenderCount + 1;
         }
         break;
@@ -2691,18 +2818,18 @@ const processMessage = function processMessage2(props, state, elementRef, event)
     }
 };
 const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
-  const jsCode = useContent(props, state)?.data?.jsCode;
+  const jsCode = state.useContent?.data?.jsCode;
   if (jsCode)
     evaluate({
       code: jsCode,
-      context: state.contextContext,
-      state: contentState(props, state)
+      context: props.context || {},
+      state: state.contentState
     });
 };
 const onClick = function onClick22(props, state, elementRef, event) {
-  if (useContent(props, state)) {
-    const variationId = useContent(props, state)?.testVariationId;
-    const contentId = useContent(props, state)?.id;
+  if (state.useContent) {
+    const variationId = state.useContent?.testVariationId;
+    const contentId = state.useContent?.id;
     _track({
       type: "click",
       canTrack: state.canTrackToUse,
@@ -2719,23 +2846,23 @@ const onClick = function onClick22(props, state, elementRef, event) {
 const evalExpression = function evalExpression2(props, state, elementRef, expression) {
   return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
     code: group,
-    context: state.contextContext,
-    state: contentState(props, state)
+    context: props.context || {},
+    state: state.contentState
   }));
 };
 const handleRequest = function handleRequest2(props, state, elementRef, { url, key }) {
   fetch$1(url).then((response) => response.json()).then((json) => {
-    const newOverrideState = {
-      ...state.overrideState,
+    const newState = {
+      ...state.contentState,
       [key]: json
     };
-    state.overrideState = newOverrideState;
+    setContextState(props, state, elementRef, newState);
   }).catch((err) => {
     console.log("error fetching dynamic data", url, err);
   });
 };
 const runHttpRequests = function runHttpRequests2(props, state, elementRef) {
-  const requests = useContent(props, state)?.data?.httpRequests ?? {};
+  const requests = state.useContent?.data?.httpRequests ?? {};
   Object.entries(requests).forEach(([key, url]) => {
     if (url && (!state.httpReqsData[key] || isEditing())) {
       const evaluatedUrl = evalExpression(props, state, elementRef, url);
@@ -2750,7 +2877,7 @@ const emitStateUpdate = function emitStateUpdate2(props, state, elementRef) {
   if (isEditing())
     window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
       detail: {
-        state: contentState(props, state),
+        state: state.contentState,
         ref: {
           name: props.model
         }
@@ -2758,7 +2885,7 @@ const emitStateUpdate = function emitStateUpdate2(props, state, elementRef) {
     }));
 };
 const shouldRenderContentStyles = function shouldRenderContentStyles2(props, state, elementRef) {
-  return Boolean((useContent(props, state)?.data?.cssCode || useContent(props, state)?.data?.customFonts?.length) && TARGET !== "reactNative");
+  return Boolean((state.useContent?.data?.cssCode || state.useContent?.data?.customFonts?.length) && TARGET !== "reactNative");
 };
 const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   const elementRef = useRef();
@@ -2773,18 +2900,24 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     }), {}),
     canTrackToUse: checkIsDefined(props.canTrack) ? props.canTrack : true,
     clicked: false,
-    contextContext: props.context || {},
+    contentState: getContextStateInitialValue({
+      content: props.content,
+      data: props.data,
+      locale: props.locale
+    }),
     forceReRenderCount: 0,
     httpReqsData: {},
     overrideContent: null,
-    overrideState: {},
     update: 0,
-    useBreakpoints: null
+    useContent: getContentInitialValue({
+      content: props.content,
+      data: props.data
+    })
   });
-  useContextProvider(BuilderContext, useStore({
-    content: useContent(props, state),
-    state: contentState(props, state),
-    context: state.contextContext,
+  useContextProvider(builderContext, useStore({
+    content: state.useContent,
+    state: state.contentState,
+    context: props.context || {},
     apiKey: props.apiKey,
     registeredComponents: state.allRegisteredComponents
   }));
@@ -2811,9 +2944,9 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
         window.addEventListener("message", processMessage.bind(null, props2, state2, elementRef2));
         window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, elementRef2));
       }
-      if (useContent(props2, state2)) {
-        const variationId = useContent(props2, state2)?.testVariationId;
-        const contentId = useContent(props2, state2)?.id;
+      if (state2.useContent) {
+        const variationId = state2.useContent?.testVariationId;
+        const contentId = state2.useContent?.id;
         _track({
           type: "impression",
           canTrack: state2.canTrackToUse,
@@ -2832,7 +2965,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
             apiKey: props2.apiKey
           }).then((content) => {
             if (content)
-              state2.overrideContent = content;
+              mergeNewContent(props2, state2, elementRef2, content);
           });
       }
       evaluateJsCode(props2, state2);
@@ -2844,30 +2977,30 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     props,
     state
   ]));
-  useWatchQrl(inlinedQrl(({ track: track2 }) => {
+  useTaskQrl(inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = useLexicalScope();
-    state2.useContent?.data && track2(state2.useContent?.data, "jsCode");
-    state2 && track2(state2, "contentState");
+    track2(() => state2.useContent?.data?.jsCode);
+    track2(() => state2.contentState);
     evaluateJsCode(props2, state2);
-  }, "RenderContent_component_useWatch_OIBatobA0hE", [
+  }, "RenderContent_component_useTask_Kulmlf9pM08", [
     elementRef,
     props,
     state
   ]));
-  useWatchQrl(inlinedQrl(({ track: track2 }) => {
+  useTaskQrl(inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = useLexicalScope();
-    state2.useContent?.data && track2(state2.useContent?.data, "httpRequests");
+    track2(() => state2.useContent?.data?.httpRequests);
     runHttpRequests(props2, state2, elementRef2);
-  }, "RenderContent_component_useWatch_1_LQM67VNl14k", [
+  }, "RenderContent_component_useTask_1_X59YMGOetns", [
     elementRef,
     props,
     state
   ]));
-  useWatchQrl(inlinedQrl(({ track: track2 }) => {
+  useTaskQrl(inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = useLexicalScope();
-    state2 && track2(state2, "contentState");
+    track2(() => state2.contentState);
     emitStateUpdate(props2, state2);
-  }, "RenderContent_component_useWatch_2_aGi0RpYNBO0", [
+  }, "RenderContent_component_useTask_2_u3gn3Pj2b2s", [
     elementRef,
     props,
     state
@@ -2884,7 +3017,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     state
   ]));
   return /* @__PURE__ */ jsx(Fragment, {
-    children: useContent(props, state) ? /* @__PURE__ */ jsxs("div", {
+    children: state.useContent ? /* @__PURE__ */ jsxs("div", {
       ref: elementRef,
       onClick$: inlinedQrl((event) => {
         const [elementRef2, props2, state2] = useLexicalScope();
@@ -2894,17 +3027,18 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
         props,
         state
       ]),
-      "builder-content-id": useContent(props, state)?.id,
+      "builder-content-id": state.useContent?.id,
       get "builder-model"() {
         return props.model;
       },
       children: [
         shouldRenderContentStyles(props, state) ? /* @__PURE__ */ jsx(RenderContentStyles, {
-          cssCode: useContent(props, state)?.data?.cssCode,
-          customFonts: useContent(props, state)?.data?.customFonts
+          contentId: state.useContent?.id,
+          cssCode: state.useContent?.data?.cssCode,
+          customFonts: state.useContent?.data?.customFonts
         }, "03_0") : null,
         /* @__PURE__ */ jsx(RenderBlocks, {
-          blocks: useContent(props, state)?.data?.blocks
+          blocks: state.useContent?.data?.blocks
         }, state.forceReRenderCount)
       ],
       [_IMMUTABLE]: {
@@ -2917,69 +3051,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     }
   }, "03_1");
 }, "RenderContent_component_hEAI0ahViXM"));
-const className = function className22(props, state, builderContext) {
-  return [
-    ...[
-      props.attributes.class
-    ],
-    "builder-symbol",
-    props.symbol?.inline ? "builder-inline-symbol" : void 0,
-    props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
-  ].filter(Boolean).join(" ");
-};
-const contentToUse = function contentToUse2(props, state, builderContext) {
-  return props.symbol?.content || state.fetchedContent;
-};
-const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
-  const builderContext = useContext(BuilderContext);
-  const state = useStore({
-    fetchedContent: null
-  });
-  useWatchQrl(inlinedQrl(({ track: track2 }) => {
-    const [builderContext2, props2, state2] = useLexicalScope();
-    props2 && track2(props2, "symbol");
-    state2 && track2(state2, "fetchedContent");
-    const symbolToUse = props2.symbol;
-    if (symbolToUse && !symbolToUse.content && !state2.fetchedContent && symbolToUse.model && builderContext2?.apiKey)
-      getContent({
-        model: symbolToUse.model,
-        apiKey: builderContext2.apiKey,
-        query: {
-          id: symbolToUse.entry
-        }
-      }).then((response) => {
-        state2.fetchedContent = response;
-      });
-  }, "Symbol_component_useWatch_9HNT04zd0Dk", [
-    builderContext,
-    props,
-    state
-  ]));
-  return /* @__PURE__ */ jsx("div", {
-    ...props.attributes,
-    class: className(props),
-    children: /* @__PURE__ */ jsx(RenderContent, {
-      get apiKey() {
-        return builderContext.apiKey;
-      },
-      get context() {
-        return builderContext.context;
-      },
-      customComponents: Object.values(builderContext.registeredComponents),
-      data: {
-        ...props.symbol?.data,
-        ...builderContext.state,
-        ...props.symbol?.content?.data?.state
-      },
-      model: props.symbol?.model,
-      content: contentToUse(props, state),
-      [_IMMUTABLE]: {
-        apiKey: _wrapSignal(builderContext, "apiKey"),
-        context: _wrapSignal(builderContext, "context")
-      }
-    }, "Wt_0")
-  });
-}, "Symbol_component_WVvggdkUPdk"));
+const RenderContent$1 = RenderContent;
 const settings = {};
 function setEditorSettings(newSettings) {
   if (isBrowser()) {
@@ -2997,7 +3069,7 @@ export {
   FragmentComponent as Fragment,
   Image,
   RenderBlocks,
-  RenderContent,
+  RenderContent$1 as RenderContent,
   SectionComponent as Section,
   Symbol$1 as Symbol,
   Text,