@builder.io/sdk-qwik 0.2.0 → 0.2.1

package/lib/index.qwik.mjs

@@ -1,10 +1,13 @@
-import { componentQrl, inlinedQrl, useStylesScopedQrl, _jsxC, _jsxQ, _fnSignal, createContextId, _wrapSignal, _jsxBranch, useLexicalScope, _IMMUTABLE, _wrapProp, useContextProvider, useStore, useContext, Slot, Fragment as Fragment$1, useVisibleTaskQrl, useTaskQrl, useSignal } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, useStylesScopedQrl, _jsxC, _jsxS, _fnSignal, createContextId, useComputedQrl, useLexicalScope, _jsxQ, _jsxBranch, _IMMUTABLE, _wrapProp, useContextProvider, useStore, useContext, Slot, Fragment as Fragment$1, useVisibleTaskQrl, useTaskQrl, useSignal } from "@builder.io/qwik";
 import { Fragment } from "@builder.io/qwik/jsx-runtime";
 const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$3, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
   return /* @__PURE__ */ _jsxC(Fragment, {
-    children: props.link ? /* @__PURE__ */ _jsxQ("a", {
-      ...props.attributes
+    children: props.link ? /* @__PURE__ */ _jsxS("a", {
+      ...props.attributes,
+      children: _fnSignal((p0) => p0.text, [
+        props
+      ], "p0.text")
     }, {
       role: "button",
       href: _fnSignal((p0) => p0.link, [
@@ -13,16 +16,15 @@ const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
       target: _fnSignal((p0) => p0.openLinkInNewTab ? "_blank" : void 0, [
         props
       ], 'p0.openLinkInNewTab?"_blank":undefined')
-    }, _fnSignal((p0) => p0.text, [
-      props
-    ], "p0.text"), 2, "jc_0") : /* @__PURE__ */ _jsxQ("button", {
+    }, 0, "jc_0") : /* @__PURE__ */ _jsxS("button", {
       class: (() => {
         props.attributes.class;
       })(),
-      ...props.attributes
-    }, null, _fnSignal((p0) => p0.text, [
-      props
-    ], "p0.text"), 2, null)
+      ...props.attributes,
+      children: _fnSignal((p0) => p0.text, [
+        props
+      ], "p0.text")
+    }, null, 0, null)
   }, 1, "jc_1");
 }, "Button_component_gJoMUICXoUQ"));
 const STYLES$3 = `
@@ -159,8 +161,8 @@ const convertStyleMapToCSSArray = (style) => {
   return cssProps.filter(checkIsDefined);
 };
 const convertStyleMapToCSS = (style) => convertStyleMapToCSSArray(style).join("\n");
-const createCssClass = ({ mediaQuery, className: className3, styles }) => {
-  const cssClass = `.${className3} {
+const createCssClass = ({ mediaQuery, className, styles }) => {
+  const cssClass = `.${className} {
     ${convertStyleMapToCSS(styles)}
   }`;
   if (mediaQuery)
@@ -170,69 +172,95 @@ const createCssClass = ({ mediaQuery, className: className3, styles }) => {
   else
     return cssClass;
 };
-const tag$1 = function tag2(props, state) {
-  return "style";
-};
-const RenderInlinedStyles = (props) => {
-  const state = {};
-  state.tag = tag$1();
+const RenderInlinedStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const tag = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    return "style";
+  }, "RenderInlinedStyles_component_tag_useComputed_S1nSc0C6qB4"));
+  useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2, tag2] = useLexicalScope();
+    return `<${tag2.value}>${props2.styles}</${tag2.value}>`;
+  }, "RenderInlinedStyles_component_injectedStyleScript_useComputed_CVKinNBYTxE", [
+    props,
+    tag
+  ]));
   return /* @__PURE__ */ _jsxC(Fragment, {
-    children: /* @__PURE__ */ _jsxQ("style", {
-      dangerouslySetInnerHTML: _wrapSignal(props, "styles")
-    }, null, null, 3, "zz_0")
+    children: /* @__PURE__ */ _jsxQ("style", null, {
+      dangerouslySetInnerHTML: _fnSignal((p0) => p0.styles, [
+        props
+      ], "p0.styles")
+    }, null, 3, "zz_0")
   }, 1, "zz_2");
-};
-const useBlock$1 = function useBlock2(props, state) {
-  return getProcessedBlock({
-    block: props.block,
-    state: props.context.state,
-    context: props.context.context,
-    shouldEvaluateBindings: true
-  });
-};
-const canShowBlock$1 = function canShowBlock2(props, state) {
-  if (checkIsDefined(useBlock$1(props).hide))
-    return !useBlock$1(props).hide;
-  if (checkIsDefined(useBlock$1(props).show))
-    return useBlock$1(props).show;
-  return true;
-};
-const css = function css2(props, state) {
-  const styles = useBlock$1(props).responsiveStyles;
-  const content = props.context.content;
-  const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
-  const largeStyles = styles?.large;
-  const mediumStyles = styles?.medium;
-  const smallStyles = styles?.small;
-  const className3 = useBlock$1(props).id;
-  const largeStylesClass = largeStyles ? createCssClass({
-    className: className3,
-    styles: largeStyles
-  }) : "";
-  const mediumStylesClass = mediumStyles ? createCssClass({
-    className: className3,
-    styles: mediumStyles,
-    mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints)
-  }) : "";
-  const smallStylesClass = smallStyles ? createCssClass({
-    className: className3,
-    styles: smallStyles,
-    mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
-  }) : "";
-  return [
-    largeStylesClass,
-    mediumStylesClass,
-    smallStylesClass
-  ].join(" ");
-};
-const BlockStyles = (props) => {
+}, "RenderInlinedStyles_component_ejNQtXd1ahM"));
+const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   _jsxBranch();
+  const useBlock = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    return getProcessedBlock({
+      block: props2.block,
+      state: props2.context.state,
+      context: props2.context.context,
+      shouldEvaluateBindings: true
+    });
+  }, "BlockStyles_component_useBlock_useComputed_9Y0pQBSnHds", [
+    props
+  ]));
+  const canShowBlock = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [useBlock2] = useLexicalScope();
+    if (checkIsDefined(useBlock2.value.hide))
+      return !useBlock2.value.hide;
+    if (checkIsDefined(useBlock2.value.show))
+      return useBlock2.value.show;
+    return true;
+  }, "BlockStyles_component_canShowBlock_useComputed_QhiYxJDtCJY", [
+    useBlock
+  ]));
+  const css = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2, useBlock2] = useLexicalScope();
+    const styles = useBlock2.value.responsiveStyles;
+    const content = props2.context.content;
+    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
+    const className = useBlock2.value.id;
+    if (!className)
+      return "";
+    const largeStylesClass = largeStyles ? createCssClass({
+      className,
+      styles: largeStyles
+    }) : "";
+    const mediumStylesClass = mediumStyles ? createCssClass({
+      className,
+      styles: mediumStyles,
+      mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints)
+    }) : "";
+    const smallStylesClass = smallStyles ? createCssClass({
+      className,
+      styles: smallStyles,
+      mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
+    }) : "";
+    return [
+      largeStylesClass,
+      mediumStylesClass,
+      smallStylesClass
+    ].join(" ");
+  }, "BlockStyles_component_css_useComputed_wAetZF3ncbo", [
+    props,
+    useBlock
+  ]));
   return /* @__PURE__ */ _jsxC(Fragment, {
-    children: css(props) && canShowBlock$1(props) ? /* @__PURE__ */ _jsxC(RenderInlinedStyles, {
-      styles: css(props)
+    children: css.value && canShowBlock.value ? /* @__PURE__ */ _jsxC(RenderInlinedStyles, {
+      get styles() {
+        return css.value;
+      },
+      [_IMMUTABLE]: {
+        styles: _fnSignal((p0) => p0.value, [
+          css
+        ], "p0.value")
+      }
     }, 3, "LQ_0") : null
   }, 1, "LQ_1");
-};
+}, "BlockStyles_component_r0t5qGxiwHA"));
 function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
@@ -301,9 +329,6 @@ function getStyleAttribute(style) {
       return style;
   }
 }
-function getBlockTag(block) {
-  return block.tagName || "div";
-}
 const EMPTY_HTML_ELEMENTS = [
   "area",
   "base",
@@ -370,6 +395,20 @@ const getRepeatItemData = ({ block, context }) => {
   }));
   return repeatArray;
 };
+const getProxyState = (context) => {
+  if (typeof Proxy === "undefined") {
+    console.error("no Proxy available in this environment, cannot proxy state.");
+    return context.state;
+  }
+  const useState = new Proxy(context.state, {
+    set: (obj, prop, value) => {
+      obj[prop] = value;
+      context.setState?.(obj);
+      return true;
+    }
+  });
+  return useState;
+};
 const RenderComponent = (props) => {
   return /* @__PURE__ */ _jsxC(Fragment, {
     children: props.componentRef ? /* @__PURE__ */ _jsxC(props.componentRef, {
@@ -427,111 +466,135 @@ const RenderRepeatedBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
     }
   }, 3, "K5_0");
 }, "RenderRepeatedBlock_component_nRyVBtbGKc8"));
-const component = function component2(props, state) {
-  return getComponent({
-    block: props.block,
-    context: props.context
-  });
-};
-const tag = function tag22(props, state) {
-  return getBlockTag(useBlock(props));
-};
-const useBlock = function useBlock22(props, state) {
-  return repeatItemData(props) ? props.block : getProcessedBlock({
-    block: props.block,
-    state: props.context.state,
-    context: props.context.context,
-    shouldEvaluateBindings: true
-  });
-};
-const canShowBlock = function canShowBlock22(props, state) {
-  if (checkIsDefined(useBlock(props).hide))
-    return !useBlock(props).hide;
-  if (checkIsDefined(useBlock(props).show))
-    return useBlock(props).show;
-  return 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: proxyState(props),
-    context: props.context.context
+const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  _jsxBranch();
+  const state = useStore({
+    proxyState: getProxyState(props.context),
+    tag: props.block.tagName || "div"
   });
-};
-const attributes = function attributes2(props, state) {
-  const blockProperties = getBlockProperties(useBlock(props));
-  return {
-    ...blockProperties,
-    ...{}
-  };
-};
-const renderComponentProps = function renderComponentProps2(props, state) {
-  return {
-    blockChildren: useBlock(props).children ?? [],
-    componentRef: component(props)?.component,
-    componentOptions: {
-      ...getBlockComponentOptions(useBlock(props)),
-      ...!component(props)?.noWrap ? {} : {
-        attributes: {
-          ...attributes(props),
-          ...actions(props)
+  const component = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    return getComponent({
+      block: props2.block,
+      context: props2.context
+    });
+  }, "RenderBlock_component_component_useComputed_qb7DMTJ9XGY", [
+    props
+  ]));
+  const repeatItemData = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    return getRepeatItemData({
+      block: props2.block,
+      context: props2.context
+    });
+  }, "RenderBlock_component_repeatItemData_useComputed_Q2wkGRsY3KE", [
+    props
+  ]));
+  const useBlock = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2, repeatItemData2] = useLexicalScope();
+    return repeatItemData2.value ? props2.block : getProcessedBlock({
+      block: props2.block,
+      state: props2.context.state,
+      context: props2.context.context,
+      shouldEvaluateBindings: true
+    });
+  }, "RenderBlock_component_useBlock_useComputed_4ZTSqMpaluI", [
+    props,
+    repeatItemData
+  ]));
+  const canShowBlock = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [useBlock2] = useLexicalScope();
+    if (checkIsDefined(useBlock2.value.hide))
+      return !useBlock2.value.hide;
+    if (checkIsDefined(useBlock2.value.show))
+      return useBlock2.value.show;
+    return true;
+  }, "RenderBlock_component_canShowBlock_useComputed_82dAQcDBUzY", [
+    useBlock
+  ]));
+  const actions = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2, state2, useBlock2] = useLexicalScope();
+    return getBlockActions({
+      block: useBlock2.value,
+      state: props2.context.state,
+      context: props2.context.context
+    });
+  }, "RenderBlock_component_actions_useComputed_AOTwdXfwCqY", [
+    props,
+    state,
+    useBlock
+  ]));
+  const attributes = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2, useBlock2] = useLexicalScope();
+    const blockProperties = getBlockProperties(useBlock2.value);
+    return {
+      ...blockProperties,
+      ...{}
+    };
+  }, "RenderBlock_component_attributes_useComputed_2cvnb0dCzeU", [
+    props,
+    useBlock
+  ]));
+  const childrenWithoutParentComponent = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [component2, repeatItemData2, useBlock2] = useLexicalScope();
+    const shouldRenderChildrenOutsideRef = !component2.value?.component && !repeatItemData2.value;
+    return shouldRenderChildrenOutsideRef ? useBlock2.value.children ?? [] : [];
+  }, "RenderBlock_component_childrenWithoutParentComponent_useComputed_l4hT2V9liQc", [
+    component,
+    repeatItemData,
+    useBlock
+  ]));
+  const childrenContext = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [attributes2, props2, useBlock2] = useLexicalScope();
+    const getInheritedTextStyles = () => {
+      return {};
+    };
+    return {
+      apiKey: props2.context.apiKey,
+      apiVersion: props2.context.apiVersion,
+      state: props2.context.state,
+      content: props2.context.content,
+      context: props2.context.context,
+      setState: props2.context.setState,
+      registeredComponents: props2.context.registeredComponents,
+      inheritedStyles: getInheritedTextStyles()
+    };
+  }, "RenderBlock_component_childrenContext_useComputed_gskFnyBnHDI", [
+    attributes,
+    props,
+    useBlock
+  ]));
+  const renderComponentProps = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [actions2, attributes2, childrenContext2, component2, useBlock2] = useLexicalScope();
+    return {
+      blockChildren: useBlock2.value.children ?? [],
+      componentRef: component2.value?.component,
+      componentOptions: {
+        ...getBlockComponentOptions(useBlock2.value),
+        ...!component2.value?.noWrap ? {} : {
+          attributes: {
+            ...attributes2.value,
+            ...actions2.value
+          }
         }
-      }
-    },
-    context: childrenContext(props)
-  };
-};
-const childrenWithoutParentComponent = function childrenWithoutParentComponent2(props, state) {
-  const shouldRenderChildrenOutsideRef = !component(props)?.component && !repeatItemData(props);
-  return shouldRenderChildrenOutsideRef ? useBlock(props).children ?? [] : [];
-};
-const repeatItemData = function repeatItemData2(props, state) {
-  return getRepeatItemData({
-    block: props.block,
-    context: props.context
-  });
-};
-const childrenContext = function childrenContext2(props, state) {
-  const getInheritedTextStyles = () => {
-    return {};
-  };
-  return {
-    apiKey: props.context.apiKey,
-    apiVersion: props.context.apiVersion,
-    state: props.context.state,
-    content: props.context.content,
-    context: props.context.context,
-    setState: props.context.setState,
-    registeredComponents: props.context.registeredComponents,
-    inheritedStyles: getInheritedTextStyles()
-  };
-};
-const RenderBlock = (props) => {
-  _jsxBranch();
-  const state = {};
-  state.tag = tag(props);
+      },
+      context: childrenContext2.value
+    };
+  }, "RenderBlock_component_renderComponentProps_useComputed_tWa1cp0r7XY", [
+    actions,
+    attributes,
+    childrenContext,
+    component,
+    useBlock
+  ]));
   return /* @__PURE__ */ _jsxC(Fragment, {
-    children: canShowBlock(props) ? !component(props)?.noWrap ? /* @__PURE__ */ _jsxC(Fragment, {
+    children: canShowBlock.value ? !component.value?.noWrap ? /* @__PURE__ */ _jsxC(Fragment, {
       children: [
-        isEmptyHtmlElement(tag(props)) ? /* @__PURE__ */ _jsxC(state.tag, {
-          ...attributes(props),
-          ...actions(props)
-        }, 2, "9d_0") : null,
-        !isEmptyHtmlElement(tag(props)) && repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
+        isEmptyHtmlElement(state.tag) ? /* @__PURE__ */ _jsxC(state.tag, {
+          ...attributes.value,
+          ...actions.value
+        }, 0, "9d_0") : null,
+        !isEmptyHtmlElement(state.tag) && repeatItemData.value ? (repeatItemData.value || []).map(function(data, index) {
           return /* @__PURE__ */ _jsxC(RenderRepeatedBlock, {
             get repeatContext() {
               return data.context;
@@ -545,36 +608,47 @@ const RenderBlock = (props) => {
             }
           }, 3, index);
         }) : null,
-        !isEmptyHtmlElement(tag(props)) && !repeatItemData(props) ? /* @__PURE__ */ _jsxC(state.tag, {
-          ...attributes(props),
-          ...actions(props),
+        !isEmptyHtmlElement(state.tag) && !repeatItemData.value ? /* @__PURE__ */ _jsxC(state.tag, {
+          ...attributes.value,
+          ...actions.value,
           children: [
             /* @__PURE__ */ _jsxC(RenderComponent, {
-              ...renderComponentProps(props)
-            }, 2, "9d_1"),
-            (childrenWithoutParentComponent(props) || []).map(function(child) {
+              ...renderComponentProps.value
+            }, 0, "9d_1"),
+            (childrenWithoutParentComponent.value || []).map(function(child) {
               return /* @__PURE__ */ _jsxC(RenderBlock, {
                 block: child,
-                context: childrenContext(props)
+                get context() {
+                  return childrenContext.value;
+                },
+                [_IMMUTABLE]: {
+                  context: _fnSignal((p0) => p0.value, [
+                    childrenContext
+                  ], "p0.value")
+                }
               }, 3, "render-block-" + child.id);
             }),
-            (childrenWithoutParentComponent(props) || []).map(function(child) {
+            (childrenWithoutParentComponent.value || []).map(function(child) {
               return /* @__PURE__ */ _jsxC(BlockStyles, {
                 block: child,
-                context: childrenContext(props)
+                get context() {
+                  return childrenContext.value;
+                },
+                [_IMMUTABLE]: {
+                  context: _fnSignal((p0) => p0.value, [
+                    childrenContext
+                  ], "p0.value")
+                }
               }, 3, "block-style-" + child.id);
             })
           ]
         }, 0, "9d_2") : null
       ]
     }, 1, "9d_3") : /* @__PURE__ */ _jsxC(RenderComponent, {
-      ...renderComponentProps(props)
-    }, 2, "9d_4") : null
+      ...renderComponentProps.value
+    }, 0, "9d_4") : null
   }, 1, "9d_5");
-};
-const className = function className2(props, state, builderContext2) {
-  return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
-};
+}, "RenderBlock_component_m0hg0zT573Q"));
 const onClick$1 = function onClick2(props, state, builderContext2) {
   if (isEditing() && !props.blocks?.length)
     window.parent?.postMessage({
@@ -599,8 +673,13 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
   useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$2, "RenderBlocks_component_useStylesScoped_0XKYzaR059E"));
   const builderContext$1 = useContext(builderContext);
   const state = {};
+  const className = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    return "builder-blocks" + (!props2.blocks?.length ? " no-blocks" : "");
+  }, "RenderBlocks_component_className_useComputed_7iQuBozD6Tc", [
+    props
+  ]));
   return /* @__PURE__ */ _jsxQ("div", {
-    class: className(props) + " div-RenderBlocks",
     onClick$: /* @__PURE__ */ inlinedQrl((event) => {
       const [builderContext2, props2, state2] = useLexicalScope();
       return onClick$1(props2);
@@ -618,6 +697,9 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
       state
     ])
   }, {
+    class: _fnSignal((p0) => p0.value + " div-RenderBlocks", [
+      className
+    ], 'p0.value+" div-RenderBlocks"'),
     "builder-path": _fnSignal((p0) => p0.path, [
       props
     ], "p0.path"),
@@ -668,15 +750,6 @@ const getTabletStyle = function getTabletStyle2(props, state, builderContext2, {
 const getMobileStyle = function getMobileStyle2(props, state, builderContext2, { stackedStyle, desktopStyle }) {
   return state.stackAt === "never" ? desktopStyle : stackedStyle;
 };
-const columnsCssVars = function columnsCssVars2(props, state, builderContext2) {
-  return {
-    "--flex-dir": state.flexDir,
-    "--flex-dir-tablet": getTabletStyle(props, state, builderContext2, {
-      stackedStyle: state.flexDir,
-      desktopStyle: "row"
-    })
-  };
-};
 const columnCssVars = function columnCssVars2(props, state, builderContext2, index) {
   index === 0 ? 0 : state.gutterSize;
   const width = getColumnCssWidth(props, state, builderContext2, index);
@@ -706,52 +779,79 @@ const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, sta
   const breakpointSizes = getSizesForBreakpoints(builderContext2.content?.meta?.breakpoints || {});
   return breakpointSizes[size].max;
 };
-const columnsStyles = function columnsStyles2(props, state, builderContext2) {
-  return `
-        @media (max-width: ${getWidthForBreakpointSize(props, state, builderContext2, "medium")}px) {
-          .${props.builderBlock.id}-breakpoints {
+const Columns = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  _jsxBranch();
+  useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
+  const builderContext$1 = useContext(builderContext);
+  const state = useStore({
+    cols: props.columns || [],
+    flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
+    gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
+    stackAt: props.stackColumnsAt || "tablet"
+  });
+  const columnsCssVars = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [builderContext2, props2, state2] = useLexicalScope();
+    return {
+      "--flex-dir": state2.flexDir,
+      "--flex-dir-tablet": getTabletStyle(props2, state2, builderContext2, {
+        stackedStyle: state2.flexDir,
+        desktopStyle: "row"
+      })
+    };
+  }, "Columns_component_columnsCssVars_useComputed_adFEq2RWT9s", [
+    builderContext$1,
+    props,
+    state
+  ]));
+  const columnsStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [builderContext2, props2, state2] = useLexicalScope();
+    return `
+        @media (max-width: ${getWidthForBreakpointSize(props2, state2, builderContext2, "medium")}px) {
+          .${props2.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir-tablet);
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          .${props2.builderBlock.id}-breakpoints > .builder-column {
             width: var(--column-width-tablet) !important;
             margin-left: var(--column-margin-left-tablet) !important;
           }
         }
 
-        @media (max-width: ${getWidthForBreakpointSize(props, state, builderContext2, "small")}px) {
-          .${props.builderBlock.id}-breakpoints {
+        @media (max-width: ${getWidthForBreakpointSize(props2, state2, builderContext2, "small")}px) {
+          .${props2.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir);
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          .${props2.builderBlock.id}-breakpoints > .builder-column {
             width: var(--column-width-mobile) !important;
             margin-left: var(--column-margin-left-mobile) !important;
           }
         },
       `;
-};
-const Columns = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  _jsxBranch();
-  useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
-  const builderContext$1 = useContext(builderContext);
-  const state = useStore({
-    cols: props.columns || [],
-    flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
-    gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
-    stackAt: props.stackColumnsAt || "tablet"
-  });
-  return /* @__PURE__ */ _jsxQ("div", {
-    style: columnsCssVars(props, state, builderContext$1)
-  }, {
+  }, "Columns_component_columnsStyles_useComputed_nBtMPbzd1Wc", [
+    builderContext$1,
+    props,
+    state
+  ]));
+  return /* @__PURE__ */ _jsxQ("div", null, {
     class: _fnSignal((p0) => `builder-columns ${p0.builderBlock.id}-breakpoints div-Columns`, [
       props
-    ], '`builder-columns ${p0.builderBlock.id}-breakpoints`+" div-Columns"')
+    ], '`builder-columns ${p0.builderBlock.id}-breakpoints`+" div-Columns"'),
+    style: _fnSignal((p0) => p0.value, [
+      columnsCssVars
+    ], "p0.value")
   }, [
     /* @__PURE__ */ _jsxC(RenderInlinedStyles, {
-      styles: columnsStyles(props, state, builderContext$1)
+      get styles() {
+        return columnsStyles.value;
+      },
+      [_IMMUTABLE]: {
+        styles: _fnSignal((p0) => p0.value, [
+          columnsStyles
+        ], "p0.value")
+      }
     }, 3, "c0_0"),
     (props.columns || []).map(function(column, index) {
       return /* @__PURE__ */ _jsxQ("div", {
@@ -847,55 +947,59 @@ function getSrcSet(url) {
     ]).join(", ");
   return url;
 }
-const srcSetToUse = function srcSetToUse2(props, state) {
-  const imageToUse = props.image || props.src;
-  if (!imageToUse || !(imageToUse.match(/builder\.io/) || imageToUse.match(/cdn\.shopify\.com/)))
-    return props.srcset;
-  if (props.srcset && props.image?.includes("builder.io/api/v1/image")) {
-    if (!props.srcset.includes(props.image.split("?")[0])) {
-      console.debug("Removed given srcset");
-      return getSrcSet(imageToUse);
-    }
-  } else if (props.image && !props.srcset)
-    return getSrcSet(imageToUse);
-  return getSrcSet(imageToUse);
-};
-const webpSrcSet = function webpSrcSet2(props, state) {
-  if (srcSetToUse(props)?.match(/builder\.io/) && !props.noWebp)
-    return srcSetToUse(props).replace(/\?/g, "?format=webp&");
-  else
-    return "";
-};
-const aspectRatioCss = function aspectRatioCss2(props, state) {
-  const aspectRatioStyles = {
-    position: "absolute",
-    height: "100%",
-    width: "100%",
-    left: "0px",
-    top: "0px"
-  };
-  const out = props.aspectRatio ? aspectRatioStyles : void 0;
-  return out;
-};
 const Image = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   _jsxBranch();
   useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES, "Image_component_useStylesScoped_fBMYiVf9fuU"));
+  const srcSetToUse = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    const imageToUse = props2.image || props2.src;
+    if (!imageToUse || !(imageToUse.match(/builder\.io/) || imageToUse.match(/cdn\.shopify\.com/)))
+      return props2.srcset;
+    if (props2.srcset && props2.image?.includes("builder.io/api/v1/image")) {
+      if (!props2.srcset.includes(props2.image.split("?")[0])) {
+        console.debug("Removed given srcset");
+        return getSrcSet(imageToUse);
+      }
+    } else if (props2.image && !props2.srcset)
+      return getSrcSet(imageToUse);
+    return getSrcSet(imageToUse);
+  }, "Image_component_srcSetToUse_useComputed_TZMibf9Gpvw", [
+    props
+  ]));
+  const webpSrcSet = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2, srcSetToUse2] = useLexicalScope();
+    if (srcSetToUse2.value?.match(/builder\.io/) && !props2.noWebp)
+      return srcSetToUse2.value.replace(/\?/g, "?format=webp&");
+    else
+      return "";
+  }, "Image_component_webpSrcSet_useComputed_01YCu72BBtA", [
+    props,
+    srcSetToUse
+  ]));
+  const aspectRatioCss = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    const aspectRatioStyles = {
+      position: "absolute",
+      height: "100%",
+      width: "100%",
+      left: "0px",
+      top: "0px"
+    };
+    const out = props2.aspectRatio ? aspectRatioStyles : void 0;
+    return out;
+  }, "Image_component_aspectRatioCss_useComputed_yJ1jG0g5fbw", [
+    props
+  ]));
   return /* @__PURE__ */ _jsxC(Fragment$1, {
     children: [
       /* @__PURE__ */ _jsxQ("picture", null, null, [
-        webpSrcSet(props) ? /* @__PURE__ */ _jsxQ("source", {
-          srcSet: webpSrcSet(props)
-        }, {
-          type: "image/webp"
+        webpSrcSet.value ? /* @__PURE__ */ _jsxQ("source", null, {
+          type: "image/webp",
+          srcSet: _fnSignal((p0) => p0.value, [
+            webpSrcSet
+          ], "p0.value")
         }, null, 3, "0A_0") : null,
-        /* @__PURE__ */ _jsxQ("img", {
-          style: {
-            objectPosition: props.backgroundPosition || "center",
-            objectFit: props.backgroundSize || "cover",
-            ...aspectRatioCss(props)
-          },
-          srcSet: srcSetToUse(props)
-        }, {
+        /* @__PURE__ */ _jsxQ("img", null, {
           loading: "lazy",
           alt: _fnSignal((p0) => p0.altText, [
             props
@@ -903,12 +1007,23 @@ const Image = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
           role: _fnSignal((p0) => p0.altText ? "presentation" : void 0, [
             props
           ], 'p0.altText?"presentation":undefined'),
+          style: _fnSignal((p0, p1) => ({
+            objectPosition: p1.backgroundPosition || "center",
+            objectFit: p1.backgroundSize || "cover",
+            ...p0.value
+          }), [
+            aspectRatioCss,
+            props
+          ], '{objectPosition:p1.backgroundPosition||"center",objectFit:p1.backgroundSize||"cover",...p0.value}'),
           class: _fnSignal((p0) => "builder-image" + (p0.className ? " " + p0.className : "") + " img-Image", [
             props
           ], '"builder-image"+(p0.className?" "+p0.className:"")+" img-Image"'),
           src: _fnSignal((p0) => p0.image, [
             props
           ], "p0.image"),
+          srcSet: _fnSignal((p0) => p0.value, [
+            srcSetToUse
+          ], "p0.value"),
           sizes: _fnSignal((p0) => p0.sizes, [
             props
           ], "p0.sizes")
@@ -1432,7 +1547,7 @@ const componentInfo$6 = {
   ]
 };
 const SectionComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  return /* @__PURE__ */ _jsxQ("section", {
+  return /* @__PURE__ */ _jsxS("section", {
     ...props.attributes,
     style: {
       width: "100%",
@@ -1445,8 +1560,9 @@ const SectionComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl
       alignItems: "stretch",
       marginLeft: "auto",
       marginRight: "auto"
-    }
-  }, null, /* @__PURE__ */ _jsxC(Slot, null, 3, "2Y_0"), 0, "2Y_1");
+    },
+    children: /* @__PURE__ */ _jsxC(Slot, null, 3, "2Y_0")
+  }, null, 0, "2Y_1");
 }, "SectionComponent_component_ZWF9iD5WeLg"));
 const componentInfo$5 = {
   name: "Symbol",
@@ -1810,68 +1926,69 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
     props,
     state
   ]));
-  return /* @__PURE__ */ _jsxQ("div", {
-    ...props.attributes
+  return /* @__PURE__ */ _jsxS("div", {
+    ...props.attributes,
+    children: /* @__PURE__ */ _jsxC(RenderContent, {
+      get apiVersion() {
+        return builderContext$1.apiVersion;
+      },
+      get apiKey() {
+        return builderContext$1.apiKey;
+      },
+      get context() {
+        return builderContext$1.context;
+      },
+      get customComponents() {
+        return Object.values(builderContext$1.registeredComponents);
+      },
+      get data() {
+        return {
+          ...props.symbol?.data,
+          ...builderContext$1.state,
+          ...state.contentToUse?.data?.state
+        };
+      },
+      get model() {
+        return props.symbol?.model;
+      },
+      get content() {
+        return state.contentToUse;
+      },
+      [_IMMUTABLE]: {
+        apiVersion: _fnSignal((p0) => p0.apiVersion, [
+          builderContext$1
+        ], "p0.apiVersion"),
+        apiKey: _fnSignal((p0) => p0.apiKey, [
+          builderContext$1
+        ], "p0.apiKey"),
+        context: _fnSignal((p0) => p0.context, [
+          builderContext$1
+        ], "p0.context"),
+        customComponents: _fnSignal((p0) => Object.values(p0.registeredComponents), [
+          builderContext$1
+        ], "Object.values(p0.registeredComponents)"),
+        data: _fnSignal((p0, p1, p2) => ({
+          ...p1.symbol?.data,
+          ...p0.state,
+          ...p2.contentToUse?.data?.state
+        }), [
+          builderContext$1,
+          props,
+          state
+        ], "{...p1.symbol?.data,...p0.state,...p2.contentToUse?.data?.state}"),
+        model: _fnSignal((p0) => p0.symbol?.model, [
+          props
+        ], "p0.symbol?.model"),
+        content: _fnSignal((p0) => p0.contentToUse, [
+          state
+        ], "p0.contentToUse")
+      }
+    }, 3, "Wt_0")
   }, {
     class: _fnSignal((p0) => p0.className, [
       state
     ], "p0.className")
-  }, /* @__PURE__ */ _jsxC(RenderContent, {
-    get apiVersion() {
-      return builderContext$1.apiVersion;
-    },
-    get apiKey() {
-      return builderContext$1.apiKey;
-    },
-    get context() {
-      return builderContext$1.context;
-    },
-    get customComponents() {
-      return Object.values(builderContext$1.registeredComponents);
-    },
-    get data() {
-      return {
-        ...props.symbol?.data,
-        ...builderContext$1.state,
-        ...state.contentToUse?.data?.state
-      };
-    },
-    get model() {
-      return props.symbol?.model;
-    },
-    get content() {
-      return state.contentToUse;
-    },
-    [_IMMUTABLE]: {
-      apiVersion: _fnSignal((p0) => p0.apiVersion, [
-        builderContext$1
-      ], "p0.apiVersion"),
-      apiKey: _fnSignal((p0) => p0.apiKey, [
-        builderContext$1
-      ], "p0.apiKey"),
-      context: _fnSignal((p0) => p0.context, [
-        builderContext$1
-      ], "p0.context"),
-      customComponents: _fnSignal((p0) => Object.values(p0.registeredComponents), [
-        builderContext$1
-      ], "Object.values(p0.registeredComponents)"),
-      data: _fnSignal((p0, p1, p2) => ({
-        ...p1.symbol?.data,
-        ...p0.state,
-        ...p2.contentToUse?.data?.state
-      }), [
-        builderContext$1,
-        props,
-        state
-      ], "{...p1.symbol?.data,...p0.state,...p2.contentToUse?.data?.state}"),
-      model: _fnSignal((p0) => p0.symbol?.model, [
-        props
-      ], "p0.symbol?.model"),
-      content: _fnSignal((p0) => p0.contentToUse, [
-        state
-      ], "p0.contentToUse")
-    }
-  }, 3, "Wt_0"), 0, "Wt_1");
+  }, 0, "Wt_1");
 }, "Symbol_component_WVvggdkUPdk"));
 const componentInfo$4 = {
   name: "Text",
@@ -2017,34 +2134,41 @@ const componentInfo$3 = {
     }
   ]
 };
-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(/* @__PURE__ */ inlinedQrl((props) => {
-  return /* @__PURE__ */ _jsxQ("video", {
-    ...spreadProps(props)
+  const videoProps = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    return {
+      ...props2.autoPlay === true ? {
+        autoPlay: true
+      } : {},
+      ...props2.muted === true ? {
+        muted: true
+      } : {},
+      ...props2.controls === true ? {
+        controls: true
+      } : {},
+      ...props2.loop === true ? {
+        loop: true
+      } : {},
+      ...props2.playsInline === true ? {
+        playsInline: true
+      } : {}
+    };
+  }, "Video_component_videoProps_useComputed_60AadUGY06E", [
+    props
+  ]));
+  const spreadProps = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2, videoProps2] = useLexicalScope();
+    return {
+      ...props2.attributes,
+      ...videoProps2.value
+    };
+  }, "Video_component_spreadProps_useComputed_ZdLsx18NYH4", [
+    props,
+    videoProps
+  ]));
+  return /* @__PURE__ */ _jsxS("video", {
+    ...spreadProps.value
   }, {
     style: _fnSignal((p0) => ({
       width: "100%",
@@ -2062,7 +2186,7 @@ const Video = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     poster: _fnSignal((p0) => p0.posterImage, [
       props
     ], "p0.posterImage")
-  }, null, 2, "j7_0");
+  }, 0, "j7_0");
 }, "Video_component_qdcTZflYyoQ"));
 const componentInfo$2 = {
   name: "Embed",
@@ -2157,7 +2281,7 @@ const Embed = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
   }, null, 3, "9r_0");
 }, "Embed_component_Uji08ORjXbE"));
 const ImgComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  return /* @__PURE__ */ _jsxQ("img", {
+  return /* @__PURE__ */ _jsxS("img", {
     ...props.attributes
   }, {
     style: _fnSignal((p0) => ({
@@ -2172,7 +2296,7 @@ const ImgComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     src: _fnSignal((p0) => p0.imgSrc || p0.image, [
       props
     ], "p0.imgSrc||p0.image")
-  }, null, 2, isEditing() && props.imgSrc || "default-key");
+  }, 0, isEditing() && props.imgSrc || "default-key");
 }, "ImgComponent_component_FXvIDBSffO8"));
 const componentInfo$1 = {
   name: "Raw:Img",
@@ -2333,13 +2457,13 @@ function isPreviewing() {
   return Boolean(location.search.indexOf("builder.preview=") !== -1);
 }
 const components = [];
-function registerComponent(component3, info) {
+function registerComponent(component, info) {
   components.push({
-    component: component3,
+    component,
     ...info
   });
   console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
-  return component3;
+  return component;
 }
 const createRegisterComponentMessage = ({ component: _, ...info }) => ({
   type: "builder.registerComponent",
@@ -2962,6 +3086,8 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
       content: props.content,
       data: props.data
     })
+  }, {
+    deep: true
   });
   useContextProvider(builderContext, useStore({
     content: state.useContent,