@builder.io/sdk-qwik 0.2.0 → 0.2.1

package/lib/index.qwik.cjs

@@ -5,8 +5,11 @@ const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const Button = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   qwik.useStylesScopedQrl(/* @__PURE__ */ qwik.inlinedQrl(STYLES$3, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
   return /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
-    children: props.link ? /* @__PURE__ */ qwik._jsxQ("a", {
-      ...props.attributes
+    children: props.link ? /* @__PURE__ */ qwik._jsxS("a", {
+      ...props.attributes,
+      children: qwik._fnSignal((p0) => p0.text, [
+        props
+      ], "p0.text")
     }, {
       role: "button",
       href: qwik._fnSignal((p0) => p0.link, [
@@ -15,16 +18,15 @@ const Button = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
       target: qwik._fnSignal((p0) => p0.openLinkInNewTab ? "_blank" : void 0, [
         props
       ], 'p0.openLinkInNewTab?"_blank":undefined')
-    }, qwik._fnSignal((p0) => p0.text, [
-      props
-    ], "p0.text"), 2, "jc_0") : /* @__PURE__ */ qwik._jsxQ("button", {
+    }, 0, "jc_0") : /* @__PURE__ */ qwik._jsxS("button", {
       class: (() => {
         props.attributes.class;
       })(),
-      ...props.attributes
-    }, null, qwik._fnSignal((p0) => p0.text, [
-      props
-    ], "p0.text"), 2, null)
+      ...props.attributes,
+      children: qwik._fnSignal((p0) => p0.text, [
+        props
+      ], "p0.text")
+    }, null, 0, null)
   }, 1, "jc_1");
 }, "Button_component_gJoMUICXoUQ"));
 const STYLES$3 = `
@@ -161,8 +163,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)
@@ -172,69 +174,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__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  const tag = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    return "style";
+  }, "RenderInlinedStyles_component_tag_useComputed_S1nSc0C6qB4"));
+  qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2, tag2] = qwik.useLexicalScope();
+    return `<${tag2.value}>${props2.styles}</${tag2.value}>`;
+  }, "RenderInlinedStyles_component_injectedStyleScript_useComputed_CVKinNBYTxE", [
+    props,
+    tag
+  ]));
   return /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
-    children: /* @__PURE__ */ qwik._jsxQ("style", {
-      dangerouslySetInnerHTML: qwik._wrapSignal(props, "styles")
-    }, null, null, 3, "zz_0")
+    children: /* @__PURE__ */ qwik._jsxQ("style", null, {
+      dangerouslySetInnerHTML: qwik._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__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   qwik._jsxBranch();
+  const useBlock = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.useLexicalScope();
+    return getProcessedBlock({
+      block: props2.block,
+      state: props2.context.state,
+      context: props2.context.context,
+      shouldEvaluateBindings: true
+    });
+  }, "BlockStyles_component_useBlock_useComputed_9Y0pQBSnHds", [
+    props
+  ]));
+  const canShowBlock = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [useBlock2] = qwik.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 = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2, useBlock2] = qwik.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__ */ qwik._jsxC(jsxRuntime.Fragment, {
-    children: css(props) && canShowBlock$1(props) ? /* @__PURE__ */ qwik._jsxC(RenderInlinedStyles, {
-      styles: css(props)
+    children: css.value && canShowBlock.value ? /* @__PURE__ */ qwik._jsxC(RenderInlinedStyles, {
+      get styles() {
+        return css.value;
+      },
+      [qwik._IMMUTABLE]: {
+        styles: qwik._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);
 }
@@ -303,9 +331,6 @@ function getStyleAttribute(style) {
       return style;
   }
 }
-function getBlockTag(block) {
-  return block.tagName || "div";
-}
 const EMPTY_HTML_ELEMENTS = [
   "area",
   "base",
@@ -372,6 +397,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__ */ qwik._jsxC(jsxRuntime.Fragment, {
     children: props.componentRef ? /* @__PURE__ */ qwik._jsxC(props.componentRef, {
@@ -429,111 +468,135 @@ const RenderRepeatedBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qw
     }
   }, 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__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  qwik._jsxBranch();
+  const state = qwik.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 = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.useLexicalScope();
+    return getComponent({
+      block: props2.block,
+      context: props2.context
+    });
+  }, "RenderBlock_component_component_useComputed_qb7DMTJ9XGY", [
+    props
+  ]));
+  const repeatItemData = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.useLexicalScope();
+    return getRepeatItemData({
+      block: props2.block,
+      context: props2.context
+    });
+  }, "RenderBlock_component_repeatItemData_useComputed_Q2wkGRsY3KE", [
+    props
+  ]));
+  const useBlock = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2, repeatItemData2] = qwik.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 = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [useBlock2] = qwik.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 = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2, state2, useBlock2] = qwik.useLexicalScope();
+    return getBlockActions({
+      block: useBlock2.value,
+      state: props2.context.state,
+      context: props2.context.context
+    });
+  }, "RenderBlock_component_actions_useComputed_AOTwdXfwCqY", [
+    props,
+    state,
+    useBlock
+  ]));
+  const attributes = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2, useBlock2] = qwik.useLexicalScope();
+    const blockProperties = getBlockProperties(useBlock2.value);
+    return {
+      ...blockProperties,
+      ...{}
+    };
+  }, "RenderBlock_component_attributes_useComputed_2cvnb0dCzeU", [
+    props,
+    useBlock
+  ]));
+  const childrenWithoutParentComponent = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [component2, repeatItemData2, useBlock2] = qwik.useLexicalScope();
+    const shouldRenderChildrenOutsideRef = !component2.value?.component && !repeatItemData2.value;
+    return shouldRenderChildrenOutsideRef ? useBlock2.value.children ?? [] : [];
+  }, "RenderBlock_component_childrenWithoutParentComponent_useComputed_l4hT2V9liQc", [
+    component,
+    repeatItemData,
+    useBlock
+  ]));
+  const childrenContext = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [attributes2, props2, useBlock2] = qwik.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 = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [actions2, attributes2, childrenContext2, component2, useBlock2] = qwik.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) => {
-  qwik._jsxBranch();
-  const state = {};
-  state.tag = tag(props);
+      },
+      context: childrenContext2.value
+    };
+  }, "RenderBlock_component_renderComponentProps_useComputed_tWa1cp0r7XY", [
+    actions,
+    attributes,
+    childrenContext,
+    component,
+    useBlock
+  ]));
   return /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
-    children: canShowBlock(props) ? !component(props)?.noWrap ? /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
+    children: canShowBlock.value ? !component.value?.noWrap ? /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
       children: [
-        isEmptyHtmlElement(tag(props)) ? /* @__PURE__ */ qwik._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__ */ qwik._jsxC(state.tag, {
+          ...attributes.value,
+          ...actions.value
+        }, 0, "9d_0") : null,
+        !isEmptyHtmlElement(state.tag) && repeatItemData.value ? (repeatItemData.value || []).map(function(data, index) {
           return /* @__PURE__ */ qwik._jsxC(RenderRepeatedBlock, {
             get repeatContext() {
               return data.context;
@@ -547,36 +610,47 @@ const RenderBlock = (props) => {
             }
           }, 3, index);
         }) : null,
-        !isEmptyHtmlElement(tag(props)) && !repeatItemData(props) ? /* @__PURE__ */ qwik._jsxC(state.tag, {
-          ...attributes(props),
-          ...actions(props),
+        !isEmptyHtmlElement(state.tag) && !repeatItemData.value ? /* @__PURE__ */ qwik._jsxC(state.tag, {
+          ...attributes.value,
+          ...actions.value,
           children: [
             /* @__PURE__ */ qwik._jsxC(RenderComponent, {
-              ...renderComponentProps(props)
-            }, 2, "9d_1"),
-            (childrenWithoutParentComponent(props) || []).map(function(child) {
+              ...renderComponentProps.value
+            }, 0, "9d_1"),
+            (childrenWithoutParentComponent.value || []).map(function(child) {
               return /* @__PURE__ */ qwik._jsxC(RenderBlock, {
                 block: child,
-                context: childrenContext(props)
+                get context() {
+                  return childrenContext.value;
+                },
+                [qwik._IMMUTABLE]: {
+                  context: qwik._fnSignal((p0) => p0.value, [
+                    childrenContext
+                  ], "p0.value")
+                }
               }, 3, "render-block-" + child.id);
             }),
-            (childrenWithoutParentComponent(props) || []).map(function(child) {
+            (childrenWithoutParentComponent.value || []).map(function(child) {
               return /* @__PURE__ */ qwik._jsxC(BlockStyles, {
                 block: child,
-                context: childrenContext(props)
+                get context() {
+                  return childrenContext.value;
+                },
+                [qwik._IMMUTABLE]: {
+                  context: qwik._fnSignal((p0) => p0.value, [
+                    childrenContext
+                  ], "p0.value")
+                }
               }, 3, "block-style-" + child.id);
             })
           ]
         }, 0, "9d_2") : null
       ]
     }, 1, "9d_3") : /* @__PURE__ */ qwik._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({
@@ -601,8 +675,13 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
   qwik.useStylesScopedQrl(/* @__PURE__ */ qwik.inlinedQrl(STYLES$2, "RenderBlocks_component_useStylesScoped_0XKYzaR059E"));
   const builderContext$1 = qwik.useContext(builderContext);
   const state = {};
+  const className = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.useLexicalScope();
+    return "builder-blocks" + (!props2.blocks?.length ? " no-blocks" : "");
+  }, "RenderBlocks_component_className_useComputed_7iQuBozD6Tc", [
+    props
+  ]));
   return /* @__PURE__ */ qwik._jsxQ("div", {
-    class: className(props) + " div-RenderBlocks",
     onClick$: /* @__PURE__ */ qwik.inlinedQrl((event) => {
       const [builderContext2, props2, state2] = qwik.useLexicalScope();
       return onClick$1(props2);
@@ -620,6 +699,9 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
       state
     ])
   }, {
+    class: qwik._fnSignal((p0) => p0.value + " div-RenderBlocks", [
+      className
+    ], 'p0.value+" div-RenderBlocks"'),
     "builder-path": qwik._fnSignal((p0) => p0.path, [
       props
     ], "p0.path"),
@@ -670,15 +752,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);
@@ -708,52 +781,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__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  qwik._jsxBranch();
+  qwik.useStylesScopedQrl(/* @__PURE__ */ qwik.inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
+  const builderContext$1 = qwik.useContext(builderContext);
+  const state = qwik.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 = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [builderContext2, props2, state2] = qwik.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 = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [builderContext2, props2, state2] = qwik.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__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  qwik._jsxBranch();
-  qwik.useStylesScopedQrl(/* @__PURE__ */ qwik.inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
-  const builderContext$1 = qwik.useContext(builderContext);
-  const state = qwik.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__ */ qwik._jsxQ("div", {
-    style: columnsCssVars(props, state, builderContext$1)
-  }, {
+  }, "Columns_component_columnsStyles_useComputed_nBtMPbzd1Wc", [
+    builderContext$1,
+    props,
+    state
+  ]));
+  return /* @__PURE__ */ qwik._jsxQ("div", null, {
     class: qwik._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: qwik._fnSignal((p0) => p0.value, [
+      columnsCssVars
+    ], "p0.value")
   }, [
     /* @__PURE__ */ qwik._jsxC(RenderInlinedStyles, {
-      styles: columnsStyles(props, state, builderContext$1)
+      get styles() {
+        return columnsStyles.value;
+      },
+      [qwik._IMMUTABLE]: {
+        styles: qwik._fnSignal((p0) => p0.value, [
+          columnsStyles
+        ], "p0.value")
+      }
     }, 3, "c0_0"),
     (props.columns || []).map(function(column, index) {
       return /* @__PURE__ */ qwik._jsxQ("div", {
@@ -849,55 +949,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__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   qwik._jsxBranch();
   qwik.useStylesScopedQrl(/* @__PURE__ */ qwik.inlinedQrl(STYLES, "Image_component_useStylesScoped_fBMYiVf9fuU"));
+  const srcSetToUse = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.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 = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2, srcSetToUse2] = qwik.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 = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.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__ */ qwik._jsxC(qwik.Fragment, {
     children: [
       /* @__PURE__ */ qwik._jsxQ("picture", null, null, [
-        webpSrcSet(props) ? /* @__PURE__ */ qwik._jsxQ("source", {
-          srcSet: webpSrcSet(props)
-        }, {
-          type: "image/webp"
+        webpSrcSet.value ? /* @__PURE__ */ qwik._jsxQ("source", null, {
+          type: "image/webp",
+          srcSet: qwik._fnSignal((p0) => p0.value, [
+            webpSrcSet
+          ], "p0.value")
         }, null, 3, "0A_0") : null,
-        /* @__PURE__ */ qwik._jsxQ("img", {
-          style: {
-            objectPosition: props.backgroundPosition || "center",
-            objectFit: props.backgroundSize || "cover",
-            ...aspectRatioCss(props)
-          },
-          srcSet: srcSetToUse(props)
-        }, {
+        /* @__PURE__ */ qwik._jsxQ("img", null, {
           loading: "lazy",
           alt: qwik._fnSignal((p0) => p0.altText, [
             props
@@ -905,12 +1009,23 @@ const Image = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
           role: qwik._fnSignal((p0) => p0.altText ? "presentation" : void 0, [
             props
           ], 'p0.altText?"presentation":undefined'),
+          style: qwik._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: qwik._fnSignal((p0) => "builder-image" + (p0.className ? " " + p0.className : "") + " img-Image", [
             props
           ], '"builder-image"+(p0.className?" "+p0.className:"")+" img-Image"'),
           src: qwik._fnSignal((p0) => p0.image, [
             props
           ], "p0.image"),
+          srcSet: qwik._fnSignal((p0) => p0.value, [
+            srcSetToUse
+          ], "p0.value"),
           sizes: qwik._fnSignal((p0) => p0.sizes, [
             props
           ], "p0.sizes")
@@ -1434,7 +1549,7 @@ const componentInfo$6 = {
   ]
 };
 const SectionComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  return /* @__PURE__ */ qwik._jsxQ("section", {
+  return /* @__PURE__ */ qwik._jsxS("section", {
     ...props.attributes,
     style: {
       width: "100%",
@@ -1447,8 +1562,9 @@ const SectionComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.
       alignItems: "stretch",
       marginLeft: "auto",
       marginRight: "auto"
-    }
-  }, null, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "2Y_0"), 0, "2Y_1");
+    },
+    children: /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "2Y_0")
+  }, null, 0, "2Y_1");
 }, "SectionComponent_component_ZWF9iD5WeLg"));
 const componentInfo$5 = {
   name: "Symbol",
@@ -1812,68 +1928,69 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQ
     props,
     state
   ]));
-  return /* @__PURE__ */ qwik._jsxQ("div", {
-    ...props.attributes
+  return /* @__PURE__ */ qwik._jsxS("div", {
+    ...props.attributes,
+    children: /* @__PURE__ */ qwik._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;
+      },
+      [qwik._IMMUTABLE]: {
+        apiVersion: qwik._fnSignal((p0) => p0.apiVersion, [
+          builderContext$1
+        ], "p0.apiVersion"),
+        apiKey: qwik._fnSignal((p0) => p0.apiKey, [
+          builderContext$1
+        ], "p0.apiKey"),
+        context: qwik._fnSignal((p0) => p0.context, [
+          builderContext$1
+        ], "p0.context"),
+        customComponents: qwik._fnSignal((p0) => Object.values(p0.registeredComponents), [
+          builderContext$1
+        ], "Object.values(p0.registeredComponents)"),
+        data: qwik._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: qwik._fnSignal((p0) => p0.symbol?.model, [
+          props
+        ], "p0.symbol?.model"),
+        content: qwik._fnSignal((p0) => p0.contentToUse, [
+          state
+        ], "p0.contentToUse")
+      }
+    }, 3, "Wt_0")
   }, {
     class: qwik._fnSignal((p0) => p0.className, [
       state
     ], "p0.className")
-  }, /* @__PURE__ */ qwik._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;
-    },
-    [qwik._IMMUTABLE]: {
-      apiVersion: qwik._fnSignal((p0) => p0.apiVersion, [
-        builderContext$1
-      ], "p0.apiVersion"),
-      apiKey: qwik._fnSignal((p0) => p0.apiKey, [
-        builderContext$1
-      ], "p0.apiKey"),
-      context: qwik._fnSignal((p0) => p0.context, [
-        builderContext$1
-      ], "p0.context"),
-      customComponents: qwik._fnSignal((p0) => Object.values(p0.registeredComponents), [
-        builderContext$1
-      ], "Object.values(p0.registeredComponents)"),
-      data: qwik._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: qwik._fnSignal((p0) => p0.symbol?.model, [
-        props
-      ], "p0.symbol?.model"),
-      content: qwik._fnSignal((p0) => p0.contentToUse, [
-        state
-      ], "p0.contentToUse")
-    }
-  }, 3, "Wt_0"), 0, "Wt_1");
+  }, 0, "Wt_1");
 }, "Symbol_component_WVvggdkUPdk"));
 const componentInfo$4 = {
   name: "Text",
@@ -2019,34 +2136,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__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  return /* @__PURE__ */ qwik._jsxQ("video", {
-    ...spreadProps(props)
+  const videoProps = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.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 = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2, videoProps2] = qwik.useLexicalScope();
+    return {
+      ...props2.attributes,
+      ...videoProps2.value
+    };
+  }, "Video_component_spreadProps_useComputed_ZdLsx18NYH4", [
+    props,
+    videoProps
+  ]));
+  return /* @__PURE__ */ qwik._jsxS("video", {
+    ...spreadProps.value
   }, {
     style: qwik._fnSignal((p0) => ({
       width: "100%",
@@ -2064,7 +2188,7 @@ const Video = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
     poster: qwik._fnSignal((p0) => p0.posterImage, [
       props
     ], "p0.posterImage")
-  }, null, 2, "j7_0");
+  }, 0, "j7_0");
 }, "Video_component_qdcTZflYyoQ"));
 const componentInfo$2 = {
   name: "Embed",
@@ -2159,7 +2283,7 @@ const Embed = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
   }, null, 3, "9r_0");
 }, "Embed_component_Uji08ORjXbE"));
 const ImgComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  return /* @__PURE__ */ qwik._jsxQ("img", {
+  return /* @__PURE__ */ qwik._jsxS("img", {
     ...props.attributes
   }, {
     style: qwik._fnSignal((p0) => ({
@@ -2174,7 +2298,7 @@ const ImgComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
     src: qwik._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",
@@ -2335,13 +2459,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",
@@ -2964,6 +3088,8 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
       content: props.content,
       data: props.data
     })
+  }, {
+    deep: true
   });
   qwik.useContextProvider(builderContext, qwik.useStore({
     content: state.useContent,