@builder.io/sdk-qwik 0.20.1 → 0.22.1

package/lib/browser/blocks/form/form/form.qwik.cjs

@@ -21,6 +21,9 @@ const mergeNewRootState = function mergeNewRootState2(props, state, formRef, new
 const submissionState = function submissionState2(props, state, formRef) {
   return isEditing.isEditing() && props.previewState || state.formState;
 };
+const errorResponse = function errorResponse2(props, state, formRef, response) {
+  return JSON.stringify(response, null, 2);
+};
 const onSubmit = function onSubmit2(props, state, formRef, event) {
   var _a;
   const sendWithJsProp = props.sendWithJs || props.sendSubmissionsTo === "email";
@@ -246,7 +249,7 @@ const FormComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
       }, 3, "0n_2") : null,
       submissionState(props, state) === "error" && state.responseData ? /* @__PURE__ */ qwik._jsxQ("pre", null, {
         class: "builder-form-error-text pre-FormComponent"
-      }, JSON.stringify(state.responseData, null, 2), 1, "0n_3") : null,
+      }, errorResponse(props, state, formRef, state.responseData), 1, "0n_3") : null,
       submissionState(props, state) === "success" ? /* @__PURE__ */ qwik._jsxC(blocks.Blocks, {
         path: "successMessage",
         get blocks() {
@@ -297,6 +300,7 @@ const STYLES = `
 exports.FormComponent = FormComponent;
 exports.STYLES = STYLES;
 exports.default = FormComponent;
+exports.errorResponse = errorResponse;
 exports.mergeNewRootState = mergeNewRootState;
 exports.onSubmit = onSubmit;
 exports.submissionState = submissionState;

package/lib/browser/blocks/form/form/form.qwik.mjs

@@ -19,6 +19,9 @@ const mergeNewRootState = function mergeNewRootState2(props, state, formRef, new
 const submissionState = function submissionState2(props, state, formRef) {
   return isEditing() && props.previewState || state.formState;
 };
+const errorResponse = function errorResponse2(props, state, formRef, response) {
+  return JSON.stringify(response, null, 2);
+};
 const onSubmit = function onSubmit2(props, state, formRef, event) {
   var _a;
   const sendWithJsProp = props.sendWithJs || props.sendSubmissionsTo === "email";
@@ -244,7 +247,7 @@ const FormComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
       }, 3, "0n_2") : null,
       submissionState(props, state) === "error" && state.responseData ? /* @__PURE__ */ _jsxQ("pre", null, {
         class: "builder-form-error-text pre-FormComponent"
-      }, JSON.stringify(state.responseData, null, 2), 1, "0n_3") : null,
+      }, errorResponse(props, state, formRef, state.responseData), 1, "0n_3") : null,
       submissionState(props, state) === "success" ? /* @__PURE__ */ _jsxC(Blocks, {
         path: "successMessage",
         get blocks() {
@@ -296,6 +299,7 @@ export {
   FormComponent,
   STYLES,
   FormComponent as default,
+  errorResponse,
   mergeNewRootState,
   onSubmit,
   submissionState

package/lib/browser/blocks/img/component-info.qwik.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileTypes = require("../../constants/file-types.qwik.cjs");
 const componentInfo = {
-  // friendlyName?
   name: "Raw:Img",
   hideFromInsertMenu: 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",
@@ -13,9 +12,58 @@ const componentInfo = {
       type: "file",
       allowedFileTypes: fileTypes.IMAGE_FILE_TYPES,
       required: true
+    },
+    {
+      name: "backgroundSize",
+      type: "text",
+      defaultValue: "cover",
+      enum: [
+        {
+          label: "contain",
+          value: "contain",
+          helperText: "The image should never get cropped"
+        },
+        {
+          label: "cover",
+          value: "cover",
+          helperText: "The image should fill it's box, cropping when needed"
+        }
+      ]
+    },
+    {
+      name: "backgroundPosition",
+      type: "text",
+      defaultValue: "center",
+      enum: [
+        "center",
+        "top",
+        "left",
+        "right",
+        "bottom",
+        "top left",
+        "top right",
+        "bottom left",
+        "bottom right"
+      ]
+    },
+    {
+      name: "altText",
+      type: "string",
+      helperText: "Text to display when the user has images off"
+    },
+    {
+      name: "title",
+      type: "string",
+      helperText: "Text to display when hovering over the asset"
+    },
+    {
+      name: "aspectRatio",
+      type: "number",
+      helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
+      advanced: true,
+      defaultValue: 0.7041
     }
   ],
-  noWrap: true,
-  static: true
+  noWrap: true
 };
 exports.componentInfo = componentInfo;

package/lib/browser/blocks/img/component-info.qwik.mjs

@@ -1,6 +1,5 @@
 import { IMAGE_FILE_TYPES } from "../../constants/file-types.qwik.mjs";
 const componentInfo = {
-  // friendlyName?
   name: "Raw:Img",
   hideFromInsertMenu: 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",
@@ -11,10 +10,59 @@ const componentInfo = {
       type: "file",
       allowedFileTypes: IMAGE_FILE_TYPES,
       required: true
+    },
+    {
+      name: "backgroundSize",
+      type: "text",
+      defaultValue: "cover",
+      enum: [
+        {
+          label: "contain",
+          value: "contain",
+          helperText: "The image should never get cropped"
+        },
+        {
+          label: "cover",
+          value: "cover",
+          helperText: "The image should fill it's box, cropping when needed"
+        }
+      ]
+    },
+    {
+      name: "backgroundPosition",
+      type: "text",
+      defaultValue: "center",
+      enum: [
+        "center",
+        "top",
+        "left",
+        "right",
+        "bottom",
+        "top left",
+        "top right",
+        "bottom left",
+        "bottom right"
+      ]
+    },
+    {
+      name: "altText",
+      type: "string",
+      helperText: "Text to display when the user has images off"
+    },
+    {
+      name: "title",
+      type: "string",
+      helperText: "Text to display when hovering over the asset"
+    },
+    {
+      name: "aspectRatio",
+      type: "number",
+      helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
+      advanced: true,
+      defaultValue: 0.7041
     }
   ],
-  noWrap: true,
-  static: true
+  noWrap: true
 };
 export {
   componentInfo

package/lib/browser/blocks/img/img.qwik.cjs

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const qwik = require("@builder.io/qwik");
+const getClassPropName = require("../../functions/get-class-prop-name.qwik.cjs");
 const isEditing = require("../../functions/is-editing.qwik.cjs");
 const image_helpers = require("../image/image.helpers.qwik.cjs");
 const ImgComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  const srcSetToUse = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+  var _a;
+  qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
     const [props2] = qwik.useLexicalScope();
     const url = props2.imgSrc || props2.image;
     if (!url || typeof url !== "string")
@@ -15,8 +17,25 @@ const ImgComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
   }, "ImgComponent_component_srcSetToUse_useComputed_z7PUtkds7Q0", [
     props
   ]));
+  const imgAttrs = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.useLexicalScope();
+    const attrs = {
+      ...props2.attributes,
+      [getClassPropName.getClassPropName()]: `builder-raw-img ${props2.attributes[getClassPropName.getClassPropName()] || ""}`
+    };
+    delete attrs.style;
+    return attrs;
+  }, "ImgComponent_component_imgAttrs_useComputed_VIloKDVy6OI", [
+    props
+  ]));
   return /* @__PURE__ */ qwik._jsxS("img", {
-    ...props.attributes
+    ...imgAttrs.value,
+    style: {
+      objectFit: props.backgroundSize || "cover",
+      objectPosition: props.backgroundPosition || "center",
+      aspectRatio: props.aspectRatio || void 0,
+      ...((_a = props.attributes) == null ? void 0 : _a.style) || {}
+    }
   }, {
     alt: qwik._fnSignal((p0) => p0.altText, [
       props
@@ -25,15 +44,9 @@ const ImgComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
     src: qwik._fnSignal((p0) => p0.imgSrc || p0.image, [
       props
     ], "p0.imgSrc||p0.image"),
-    srcSet: qwik._fnSignal((p0) => p0.value, [
-      srcSetToUse
-    ], "p0.value"),
-    style: qwik._fnSignal((p0) => ({
-      objectFit: p0.backgroundSize || "cover",
-      objectPosition: p0.backgroundPosition || "center"
-    }), [
+    title: qwik._fnSignal((p0) => p0.title, [
       props
-    ], '{objectFit:p0.backgroundSize||"cover",objectPosition:p0.backgroundPosition||"center"}')
+    ], "p0.title")
   }, 0, isEditing.isEditing() && props.imgSrc || "default-key");
 }, "ImgComponent_component_FXvIDBSffO8"));
 exports.ImgComponent = ImgComponent;

package/lib/browser/blocks/img/img.qwik.mjs

@@ -1,8 +1,10 @@
 import { componentQrl, inlinedQrl, useComputedQrl, useLexicalScope, _jsxS, _fnSignal } from "@builder.io/qwik";
+import { getClassPropName } from "../../functions/get-class-prop-name.qwik.mjs";
 import { isEditing } from "../../functions/is-editing.qwik.mjs";
 import { getSrcSet } from "../image/image.helpers.qwik.mjs";
 const ImgComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  const srcSetToUse = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+  var _a;
+  useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [props2] = useLexicalScope();
     const url = props2.imgSrc || props2.image;
     if (!url || typeof url !== "string")
@@ -13,8 +15,25 @@ const ImgComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
   }, "ImgComponent_component_srcSetToUse_useComputed_z7PUtkds7Q0", [
     props
   ]));
+  const imgAttrs = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    const attrs = {
+      ...props2.attributes,
+      [getClassPropName()]: `builder-raw-img ${props2.attributes[getClassPropName()] || ""}`
+    };
+    delete attrs.style;
+    return attrs;
+  }, "ImgComponent_component_imgAttrs_useComputed_VIloKDVy6OI", [
+    props
+  ]));
   return /* @__PURE__ */ _jsxS("img", {
-    ...props.attributes
+    ...imgAttrs.value,
+    style: {
+      objectFit: props.backgroundSize || "cover",
+      objectPosition: props.backgroundPosition || "center",
+      aspectRatio: props.aspectRatio || void 0,
+      ...((_a = props.attributes) == null ? void 0 : _a.style) || {}
+    }
   }, {
     alt: _fnSignal((p0) => p0.altText, [
       props
@@ -23,15 +42,9 @@ const ImgComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     src: _fnSignal((p0) => p0.imgSrc || p0.image, [
       props
     ], "p0.imgSrc||p0.image"),
-    srcSet: _fnSignal((p0) => p0.value, [
-      srcSetToUse
-    ], "p0.value"),
-    style: _fnSignal((p0) => ({
-      objectFit: p0.backgroundSize || "cover",
-      objectPosition: p0.backgroundPosition || "center"
-    }), [
+    title: _fnSignal((p0) => p0.title, [
       props
-    ], '{objectFit:p0.backgroundSize||"cover",objectPosition:p0.backgroundPosition||"center"}')
+    ], "p0.title")
   }, 0, isEditing() && props.imgSrc || "default-key");
 }, "ImgComponent_component_FXvIDBSffO8"));
 export {

package/lib/browser/blocks/symbol/symbol.qwik.cjs

@@ -4,7 +4,7 @@ const qwik = require("@builder.io/qwik");
 const contentVariants = require("../../components/content-variants/content-variants.qwik.cjs");
 const getClassPropName = require("../../functions/get-class-prop-name.qwik.cjs");
 const symbol_helpers = require("./symbol.helpers.qwik.cjs");
-const setContent = function setContent2(props, state, blocksWrapper, contentWrapper, className) {
+const setContent = function setContent2(props, state, blocksWrapper, contentWrapper, customComponents, className) {
   var _a;
   if (state.contentToUse && state.symbolEntry === ((_a = props.symbol) == null ? void 0 : _a.entry))
     return;
@@ -27,6 +27,12 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQ
   const contentWrapper = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
     return "div";
   }, "Symbol_component_contentWrapper_useComputed_EvmPpPj8JTo"));
+  const customComponents = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.useLexicalScope();
+    return Object.values(props2.builderComponents);
+  }, "Symbol_component_customComponents_useComputed_lTCqaqHUrNw", [
+    props
+  ]));
   const className = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
     var _a2, _b2;
     const [props2] = qwik.useLexicalScope();
@@ -44,13 +50,14 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQ
     symbolEntry: (_b = props.symbol) == null ? void 0 : _b.entry
   });
   qwik.useTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(({ track }) => {
-    const [blocksWrapper2, className2, contentWrapper2, props2, state2] = qwik.useLexicalScope();
+    const [blocksWrapper2, className2, contentWrapper2, customComponents2, props2, state2] = qwik.useLexicalScope();
     track(() => props2.symbol);
     setContent(props2, state2);
   }, "Symbol_component_useTask_NIAWAC1bMBo", [
     blocksWrapper,
     className,
     contentWrapper,
+    customComponents,
     props,
     state
   ]));
@@ -75,7 +82,7 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQ
         };
       },
       get customComponents() {
-        return Object.values(props.builderComponents);
+        return customComponents.value;
       },
       get data() {
         var _a2, _b2, _c;
@@ -132,9 +139,9 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQ
         }, [
           props
         ], "{...p0.builderContext.context,symbolId:p0.builderBlock?.id}"),
-        customComponents: qwik._fnSignal((p0) => Object.values(p0.builderComponents), [
-          props
-        ], "Object.values(p0.builderComponents)"),
+        customComponents: qwik._fnSignal((p0) => p0.value, [
+          customComponents
+        ], "p0.value"),
         data: qwik._fnSignal((p0, p1) => {
           var _a2, _b2, _c;
           return {

package/lib/browser/blocks/symbol/symbol.qwik.mjs

@@ -2,7 +2,7 @@ import { componentQrl, inlinedQrl, useComputedQrl, useLexicalScope, useStore, us
 import { ContentVariants } from "../../components/content-variants/content-variants.qwik.mjs";
 import { getClassPropName } from "../../functions/get-class-prop-name.qwik.mjs";
 import { fetchSymbolContent } from "./symbol.helpers.qwik.mjs";
-const setContent = function setContent2(props, state, blocksWrapper, contentWrapper, className) {
+const setContent = function setContent2(props, state, blocksWrapper, contentWrapper, customComponents, className) {
   var _a;
   if (state.contentToUse && state.symbolEntry === ((_a = props.symbol) == null ? void 0 : _a.entry))
     return;
@@ -25,6 +25,12 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
   const contentWrapper = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     return "div";
   }, "Symbol_component_contentWrapper_useComputed_EvmPpPj8JTo"));
+  const customComponents = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    return Object.values(props2.builderComponents);
+  }, "Symbol_component_customComponents_useComputed_lTCqaqHUrNw", [
+    props
+  ]));
   const className = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     var _a2, _b2;
     const [props2] = useLexicalScope();
@@ -42,13 +48,14 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
     symbolEntry: (_b = props.symbol) == null ? void 0 : _b.entry
   });
   useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track }) => {
-    const [blocksWrapper2, className2, contentWrapper2, props2, state2] = useLexicalScope();
+    const [blocksWrapper2, className2, contentWrapper2, customComponents2, props2, state2] = useLexicalScope();
     track(() => props2.symbol);
     setContent(props2, state2);
   }, "Symbol_component_useTask_NIAWAC1bMBo", [
     blocksWrapper,
     className,
     contentWrapper,
+    customComponents,
     props,
     state
   ]));
@@ -73,7 +80,7 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
         };
       },
       get customComponents() {
-        return Object.values(props.builderComponents);
+        return customComponents.value;
       },
       get data() {
         var _a2, _b2, _c;
@@ -130,9 +137,9 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
         }, [
           props
         ], "{...p0.builderContext.context,symbolId:p0.builderBlock?.id}"),
-        customComponents: _fnSignal((p0) => Object.values(p0.builderComponents), [
-          props
-        ], "Object.values(p0.builderComponents)"),
+        customComponents: _fnSignal((p0) => p0.value, [
+          customComponents
+        ], "p0.value"),
         data: _fnSignal((p0, p1) => {
           var _a2, _b2, _c;
           return {

package/lib/browser/blocks/tabs/tabs.qwik.cjs

@@ -5,6 +5,9 @@ const blocks = require("../../components/blocks/blocks.qwik.cjs");
 const activeTabContent = function activeTabContent2(props, state, active) {
   return props.tabs && props.tabs[active].content;
 };
+const getTabStyle = function getTabStyle2(props, state, index) {
+  return index === state.activeTab ? props.activeTabStyle : {};
+};
 const onClick = function onClick2(props, state, index) {
   if (index === state.activeTab && props.collapsible)
     state.activeTab = -1;
@@ -38,9 +41,7 @@ const Tabs = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((
           props,
           state
         ]),
-        style: {
-          ...state.activeTab === index ? props.activeTabStyle : {}
-        }
+        style: getTabStyle(props, state, index)
       }, null, /* @__PURE__ */ qwik._jsxC(blocks.Blocks, {
         get parent() {
           return props.builderBlock.id;
@@ -115,4 +116,5 @@ const Tabs = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((
 exports.Tabs = Tabs;
 exports.activeTabContent = activeTabContent;
 exports.default = Tabs;
+exports.getTabStyle = getTabStyle;
 exports.onClick = onClick;

package/lib/browser/blocks/tabs/tabs.qwik.mjs

@@ -3,6 +3,9 @@ import { Blocks } from "../../components/blocks/blocks.qwik.mjs";
 const activeTabContent = function activeTabContent2(props, state, active) {
   return props.tabs && props.tabs[active].content;
 };
+const getTabStyle = function getTabStyle2(props, state, index) {
+  return index === state.activeTab ? props.activeTabStyle : {};
+};
 const onClick = function onClick2(props, state, index) {
   if (index === state.activeTab && props.collapsible)
     state.activeTab = -1;
@@ -36,9 +39,7 @@ const Tabs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
           props,
           state
         ]),
-        style: {
-          ...state.activeTab === index ? props.activeTabStyle : {}
-        }
+        style: getTabStyle(props, state, index)
       }, null, /* @__PURE__ */ _jsxC(Blocks, {
         get parent() {
           return props.builderBlock.id;
@@ -114,5 +115,6 @@ export {
   Tabs,
   activeTabContent,
   Tabs as default,
+  getTabStyle,
   onClick
 };

package/lib/browser/blocks/text/component-info.qwik.cjs

@@ -4,7 +4,6 @@ const componentInfo = {
   shouldReceiveBuilderProps: {},
   name: "Text",
   static: true,
-  isRSC: 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: [
     {

package/lib/browser/blocks/text/component-info.qwik.mjs

@@ -2,7 +2,6 @@ const componentInfo = {
   shouldReceiveBuilderProps: {},
   name: "Text",
   static: true,
-  isRSC: 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: [
     {

package/lib/browser/components/block/block.qwik.cjs

@@ -7,10 +7,10 @@ const getBlockComponentOptions = require("../../functions/get-block-component-op
 const getProcessedBlock = require("../../functions/get-processed-block.qwik.cjs");
 const animator = require("./animator.qwik.cjs");
 const block_helpers = require("./block.helpers.qwik.cjs");
-const blockStyles = require("./components/block-styles.qwik.cjs");
 const blockWrapper = require("./components/block-wrapper.qwik.cjs");
 const componentRef = require("./components/component-ref/component-ref.qwik.cjs");
 const repeatedBlock = require("./components/repeated-block.qwik.cjs");
+const styleWrapper = require("./components/style-wrapper.qwik.cjs");
 const Block = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   var _a;
   qwik._jsxBranch();
@@ -133,20 +133,26 @@ const Block = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
   return /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
     children: canShowBlock.value ? /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
       children: [
-        /* @__PURE__ */ qwik._jsxC(blockStyles.BlockStyles, {
+        /* @__PURE__ */ qwik._jsxC(styleWrapper.StyleWrapper, {
           get block() {
             return processedBlock.value;
           },
           get context() {
             return props.context;
           },
+          get id() {
+            return props.block.id;
+          },
           [qwik._IMMUTABLE]: {
             block: qwik._fnSignal((p0) => p0.value, [
               processedBlock
             ], "p0.value"),
             context: qwik._fnSignal((p0) => p0.context, [
               props
-            ], "p0.context")
+            ], "p0.context"),
+            id: qwik._fnSignal((p0) => p0.block.id, [
+              props
+            ], "p0.block.id")
           }
         }, 3, "jN_0"),
         !((_a = blockComponent.value) == null ? void 0 : _a.noWrap) ? !repeatItem.value ? /* @__PURE__ */ qwik._jsxC(blockWrapper.BlockWrapper, {

package/lib/browser/components/block/block.qwik.mjs

@@ -5,10 +5,10 @@ import { getBlockComponentOptions } from "../../functions/get-block-component-op
 import { getProcessedBlock } from "../../functions/get-processed-block.qwik.mjs";
 import { bindAnimations } from "./animator.qwik.mjs";
 import { getRepeatItemData, getComponent, provideBuilderBlock, provideBuilderContext, provideLinkComponent, provideRegisteredComponents, generateKey } from "./block.helpers.qwik.mjs";
-import { BlockStyles } from "./components/block-styles.qwik.mjs";
 import { BlockWrapper } from "./components/block-wrapper.qwik.mjs";
 import { ComponentRef } from "./components/component-ref/component-ref.qwik.mjs";
 import { RepeatedBlock } from "./components/repeated-block.qwik.mjs";
+import { StyleWrapper } from "./components/style-wrapper.qwik.mjs";
 const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   var _a;
   _jsxBranch();
@@ -131,20 +131,26 @@ const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
   return /* @__PURE__ */ _jsxC(Fragment, {
     children: canShowBlock.value ? /* @__PURE__ */ _jsxC(Fragment, {
       children: [
-        /* @__PURE__ */ _jsxC(BlockStyles, {
+        /* @__PURE__ */ _jsxC(StyleWrapper, {
           get block() {
             return processedBlock.value;
           },
           get context() {
             return props.context;
           },
+          get id() {
+            return props.block.id;
+          },
           [_IMMUTABLE]: {
             block: _fnSignal((p0) => p0.value, [
               processedBlock
             ], "p0.value"),
             context: _fnSignal((p0) => p0.context, [
               props
-            ], "p0.context")
+            ], "p0.context"),
+            id: _fnSignal((p0) => p0.block.id, [
+              props
+            ], "p0.block.id")
           }
         }, 3, "jN_0"),
         !((_a = blockComponent.value) == null ? void 0 : _a.noWrap) ? !repeatItem.value ? /* @__PURE__ */ _jsxC(BlockWrapper, {

package/lib/browser/components/block/components/component-ref/component-ref.qwik.cjs

@@ -10,13 +10,6 @@ const ComponentRef = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
     Wrapper: props.isInteractive ? interactiveElement.InteractiveElement : props.componentRef,
     shouldUpdate: false
   });
-  qwik.useTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(({ track }) => {
-    const [props2] = qwik.useLexicalScope();
-    track(() => props2.componentOptions);
-    track(() => props2.blockChildren);
-  }, "ComponentRef_component_useTask_IpU82pM3MjU", [
-    props
-  ]));
   return /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
     children: props.componentRef ? /* @__PURE__ */ qwik._jsxC(state.Wrapper, {
       ...componentRef_helpers.getWrapperProps({
@@ -29,7 +22,7 @@ const ComponentRef = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
         isInteractive: props.isInteractive,
         contextValue: props.context
       }),
-      children: (props.blockChildren || []).map((child) => {
+      children: props.componentRef ? (props.blockChildren || []).map((child) => {
         return /* @__PURE__ */ qwik._jsxC(block.Block, {
           block: child,
           get context() {
@@ -53,7 +46,7 @@ const ComponentRef = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
             ], "p0.registeredComponents")
           }
         }, 3, child.id);
-      })
+      }) : null
     }, 0, "z6_0") : null
   }, 1, "z6_1");
 }, "ComponentRef_component_tFQoBV6UFdc"));

package/lib/browser/components/block/components/component-ref/component-ref.qwik.mjs

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, useStore, useTaskQrl, useLexicalScope, _jsxC, _IMMUTABLE, _fnSignal } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, useStore, _jsxC, _IMMUTABLE, _fnSignal } from "@builder.io/qwik";
 import { Fragment } from "@builder.io/qwik/jsx-runtime";
 import { Block } from "../../block.qwik.mjs";
 import { InteractiveElement } from "../interactive-element.qwik.mjs";
@@ -8,13 +8,6 @@ const ComponentRef = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     Wrapper: props.isInteractive ? InteractiveElement : props.componentRef,
     shouldUpdate: false
   });
-  useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track }) => {
-    const [props2] = useLexicalScope();
-    track(() => props2.componentOptions);
-    track(() => props2.blockChildren);
-  }, "ComponentRef_component_useTask_IpU82pM3MjU", [
-    props
-  ]));
   return /* @__PURE__ */ _jsxC(Fragment, {
     children: props.componentRef ? /* @__PURE__ */ _jsxC(state.Wrapper, {
       ...getWrapperProps({
@@ -27,7 +20,7 @@ const ComponentRef = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
         isInteractive: props.isInteractive,
         contextValue: props.context
       }),
-      children: (props.blockChildren || []).map((child) => {
+      children: props.componentRef ? (props.blockChildren || []).map((child) => {
         return /* @__PURE__ */ _jsxC(Block, {
           block: child,
           get context() {
@@ -51,7 +44,7 @@ const ComponentRef = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
             ], "p0.registeredComponents")
           }
         }, 3, child.id);
-      })
+      }) : null
     }, 0, "z6_0") : null
   }, 1, "z6_1");
 }, "ComponentRef_component_tFQoBV6UFdc"));