@builder.io/sdk-qwik 0.16.19 → 0.16.21

package/lib/edge/blocks/accordion/accordion.qwik.mjs

@@ -1,7 +1,6 @@
-import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
+import { componentQrl, inlinedQrl, useStore, useComputedQrl, useLexicalScope, _jsxQ, _fnSignal, _jsxBranch, _jsxC, Fragment, _IMMUTABLE, _wrapProp } from "@builder.io/qwik";
 import { Blocks } from "../../components/blocks/blocks.qwik.mjs";
 import { convertOrderNumberToString } from "./helpers.qwik.mjs";
-import { component$, useStore, useComputed$, Fragment, $ } from "@builder.io/qwik";
 const getAccordionTitleClassName = function getAccordionTitleClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
   return `builder-accordion-title builder-accordion-title-${state.open.includes(index) ? "open" : "closed"}`;
 };
@@ -9,35 +8,40 @@ const getAccordionDetailClassName = function getAccordionDetailClassName2(props,
   return `builder-accordion-detail builder-accordion-detail-${state.open.includes(index) ? "open" : "closed"}`;
 };
 const onClick = function onClick2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
-  if (state.open.includes(index)) {
+  if (state.open.includes(index))
     state.open = onlyOneAtATime.value ? [] : state.open.filter((item) => item !== index);
-  } else {
+  else
     state.open = onlyOneAtATime.value ? [
       index
     ] : state.open.concat(index);
-  }
 };
-const Accordion = component$((props) => {
+const Accordion = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const state = useStore({
     open: []
   });
-  const onlyOneAtATime = useComputed$(() => {
-    return Boolean(props.grid || props.oneAtATime);
-  });
-  const accordionStyles = useComputed$(() => {
+  const onlyOneAtATime = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    return Boolean(props2.grid || props2.oneAtATime);
+  }, "Accordion_component_onlyOneAtATime_useComputed_QYD7IoPU2HY", [
+    props
+  ]));
+  const accordionStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
     const styles = {
       display: "flex",
       alignItems: "stretch",
       flexDirection: "column",
-      ...props.grid && {
+      ...props2.grid && {
         flexDirection: "row",
         alignItems: "flex-start",
         flexWrap: "wrap"
       }
     };
     return styles;
-  });
-  const accordionTitleStyles = useComputed$(() => {
+  }, "Accordion_component_accordionStyles_useComputed_Jrd0cwGn25U", [
+    props
+  ]));
+  const accordionTitleStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     const shared = {
       display: "flex",
       flexDirection: "column"
@@ -48,22 +52,22 @@ const Accordion = component$((props) => {
       cursor: "pointer"
     };
     return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
-  });
-  const openGridItemOrder = useComputed$(() => {
+  }, "Accordion_component_accordionTitleStyles_useComputed_FopdBMH0V6U"));
+  const openGridItemOrder = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2, state2] = useLexicalScope();
     let itemOrder = null;
-    const getOpenGridItemPosition = props.grid && state.open.length;
+    const getOpenGridItemPosition = props2.grid && state2.open.length;
     if (getOpenGridItemPosition && document) {
-      const openItemIndex = state.open[0];
+      const openItemIndex = state2.open[0];
       const openItem = document.querySelector(`.builder-accordion-title[data-index="${openItemIndex}"]`);
       let subjectItem = openItem;
       itemOrder = openItemIndex;
       if (subjectItem) {
         let prevItemRect = subjectItem.getBoundingClientRect();
-        while (subjectItem = subjectItem && subjectItem.nextElementSibling) {
+        while (subjectItem = subjectItem && subjectItem.nextElementSibling)
           if (subjectItem) {
-            if (subjectItem.classList.contains("builder-accordion-detail")) {
+            if (subjectItem.classList.contains("builder-accordion-detail"))
               continue;
-            }
             const subjectItemRect = subjectItem.getBoundingClientRect();
             if (subjectItemRect.left > prevItemRect.left) {
               const index = parseInt(subjectItem.getAttribute("data-index") || "", 10);
@@ -71,72 +75,137 @@ const Accordion = component$((props) => {
                 prevItemRect = subjectItemRect;
                 itemOrder = index;
               }
-            } else {
+            } else
               break;
-            }
           }
-        }
       }
     }
-    if (typeof itemOrder === "number") {
+    if (typeof itemOrder === "number")
       itemOrder = itemOrder + 1;
-    }
     return itemOrder;
-  });
-  const accordionDetailStyles = useComputed$(() => {
+  }, "Accordion_component_openGridItemOrder_useComputed_cCQY1Vnxll0", [
+    props,
+    state
+  ]));
+  const accordionDetailStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [openGridItemOrder2, props2] = useLexicalScope();
     const styles = {
-      ...{
-        order: typeof openGridItemOrder.value === "number" ? openGridItemOrder.value : void 0
-      },
-      ...props.grid && {
+      order: typeof openGridItemOrder2.value === "number" ? openGridItemOrder2.value : void 0,
+      ...props2.grid && {
         width: "100%"
       }
     };
     return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
-  });
-  return /* @__PURE__ */ jsx("div", {
+  }, "Accordion_component_accordionDetailStyles_useComputed_S0QmQzGJoRo", [
+    openGridItemOrder,
+    props
+  ]));
+  return /* @__PURE__ */ _jsxQ("div", null, {
     class: "builder-accordion",
-    style: accordionStyles.value,
-    children: (props.items || []).map((item, index) => {
-      return /* @__PURE__ */ jsxs(Fragment, {
-        children: [
-          /* @__PURE__ */ jsx("div", {
-            class: getAccordionTitleClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index),
-            style: {
-              ...accordionTitleStyles.value,
-              width: props.grid ? props.gridRowWidth : void 0,
-              ...{
-                order: openGridItemOrder.value !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
-              }
-            },
-            "data-index": index,
-            onClick$: $((event) => onClick(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index)),
-            children: /* @__PURE__ */ jsx(Blocks, {
-              blocks: item.title,
-              path: `items.${index}.title`,
-              parent: props.builderBlock.id,
-              context: props.builderContext,
-              registeredComponents: props.builderComponents,
-              linkComponent: props.builderLinkComponent
-            })
-          }),
-          state.open.includes(index) ? /* @__PURE__ */ jsx("div", {
-            class: getAccordionDetailClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index),
-            style: accordionDetailStyles.value,
-            children: /* @__PURE__ */ jsx(Blocks, {
-              blocks: item.detail,
-              path: `items.${index}.detail`,
-              parent: props.builderBlock.id,
-              context: props.builderContext,
-              registeredComponents: props.builderComponents,
-              linkComponent: props.builderLinkComponent
-            })
-          }) : null
-        ]
-      });
-    })
-  });
-});
+    style: _fnSignal((p0) => p0.value, [
+      accordionStyles
+    ], "p0.value")
+  }, (props.items || []).map((item, index) => {
+    _jsxBranch();
+    return /* @__PURE__ */ _jsxC(Fragment, {
+      children: [
+        /* @__PURE__ */ _jsxQ("div", {
+          class: getAccordionTitleClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index),
+          "data-index": index,
+          onClick$: /* @__PURE__ */ inlinedQrl((event) => {
+            const [accordionDetailStyles2, accordionStyles2, accordionTitleStyles2, index2, onlyOneAtATime2, openGridItemOrder2, props2, state2] = useLexicalScope();
+            return onClick(props2, state2, onlyOneAtATime2, accordionStyles2, accordionTitleStyles2, openGridItemOrder2, accordionDetailStyles2, index2);
+          }, "Accordion_component_div_Fragment_div_onClick_VtzhhJnK0XI", [
+            accordionDetailStyles,
+            accordionStyles,
+            accordionTitleStyles,
+            index,
+            onlyOneAtATime,
+            openGridItemOrder,
+            props,
+            state
+          ]),
+          style: {
+            ...accordionTitleStyles.value,
+            width: props.grid ? props.gridRowWidth : void 0,
+            order: openGridItemOrder.value !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
+          }
+        }, null, /* @__PURE__ */ _jsxC(Blocks, {
+          get blocks() {
+            return item.title;
+          },
+          path: `items.${index}.title`,
+          get parent() {
+            return props.builderBlock.id;
+          },
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get linkComponent() {
+            return props.builderLinkComponent;
+          },
+          [_IMMUTABLE]: {
+            blocks: _wrapProp(item, "title"),
+            context: _fnSignal((p0) => p0.builderContext, [
+              props
+            ], "p0.builderContext"),
+            linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
+              props
+            ], "p0.builderLinkComponent"),
+            parent: _fnSignal((p0) => p0.builderBlock.id, [
+              props
+            ], "p0.builderBlock.id"),
+            registeredComponents: _fnSignal((p0) => p0.builderComponents, [
+              props
+            ], "p0.builderComponents")
+          }
+        }, 3, "hf_0"), 0, null),
+        state.open.includes(index) ? /* @__PURE__ */ _jsxQ("div", {
+          class: getAccordionDetailClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index)
+        }, {
+          style: _fnSignal((p0) => p0.value, [
+            accordionDetailStyles
+          ], "p0.value")
+        }, /* @__PURE__ */ _jsxC(Blocks, {
+          get blocks() {
+            return item.detail;
+          },
+          path: `items.${index}.detail`,
+          get parent() {
+            return props.builderBlock.id;
+          },
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get linkComponent() {
+            return props.builderLinkComponent;
+          },
+          [_IMMUTABLE]: {
+            blocks: _wrapProp(item, "detail"),
+            context: _fnSignal((p0) => p0.builderContext, [
+              props
+            ], "p0.builderContext"),
+            linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
+              props
+            ], "p0.builderLinkComponent"),
+            parent: _fnSignal((p0) => p0.builderBlock.id, [
+              props
+            ], "p0.builderBlock.id"),
+            registeredComponents: _fnSignal((p0) => p0.builderComponents, [
+              props
+            ], "p0.builderComponents")
+          }
+        }, 3, "hf_1"), 1, "hf_2") : null
+      ]
+    }, 1, "hf_3");
+  }), 1, "hf_4");
+}, "Accordion_component_jkuUCHm0nt0"));
 export {
   Accordion,
   Accordion as default,

package/lib/edge/blocks/accordion/component-info.qwik.cjs

@@ -144,9 +144,8 @@ const componentInfo = {
       advanced: true,
       defaultValue: false,
       onChange: (options) => {
-        if (options.get("useChildrenForItems") === true) {
+        if (options.get("useChildrenForItems") === true)
           options.set("items", []);
-        }
       }
     }
   ],

package/lib/edge/blocks/accordion/component-info.qwik.mjs

@@ -142,9 +142,8 @@ const componentInfo = {
       advanced: true,
       defaultValue: false,
       onChange: (options) => {
-        if (options.get("useChildrenForItems") === true) {
+        if (options.get("useChildrenForItems") === true)
           options.set("items", []);
-        }
       }
     }
   ],

package/lib/edge/blocks/button/button.qwik.cjs

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
 const dynamicRenderer = require("../../components/dynamic-renderer/dynamic-renderer.qwik.cjs");
 const getClassPropName = require("../../functions/get-class-prop-name.qwik.cjs");
-const qwik = require("@builder.io/qwik");
 const attrs = function attrs2(props, state) {
   return {
     ...props.attributes,
@@ -17,14 +16,24 @@ const attrs = function attrs2(props, state) {
     }
   };
 };
-const Button = qwik.component$((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(dynamicRenderer.DynamicRenderer, {
+const Button = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  return /* @__PURE__ */ qwik._jsxC(dynamicRenderer.DynamicRenderer, {
     attributes: attrs(props),
-    TagName: props.link ? props.builderLinkComponent || "a" : "button",
+    get TagName() {
+      return props.link ? props.builderLinkComponent || "a" : "button";
+    },
     actionAttributes: {},
-    children: props.text
-  });
-});
+    children: qwik._fnSignal((p0) => p0.text, [
+      props
+    ], "p0.text"),
+    [qwik._IMMUTABLE]: {
+      TagName: qwik._fnSignal((p0) => p0.link ? p0.builderLinkComponent || "a" : "button", [
+        props
+      ], 'p0.link?p0.builderLinkComponent||"a":"button"'),
+      actionAttributes: qwik._IMMUTABLE
+    }
+  }, 3, "jc_0");
+}, "Button_component_gJoMUICXoUQ"));
 exports.Button = Button;
 exports.attrs = attrs;
 exports.default = Button;

package/lib/edge/blocks/button/button.qwik.mjs

@@ -1,7 +1,6 @@
-import { jsx } from "@builder.io/qwik/jsx-runtime";
+import { componentQrl, inlinedQrl, _jsxC, _fnSignal, _IMMUTABLE } from "@builder.io/qwik";
 import { DynamicRenderer } from "../../components/dynamic-renderer/dynamic-renderer.qwik.mjs";
 import { getClassPropName } from "../../functions/get-class-prop-name.qwik.mjs";
-import { component$ } from "@builder.io/qwik";
 const attrs = function attrs2(props, state) {
   return {
     ...props.attributes,
@@ -15,14 +14,24 @@ const attrs = function attrs2(props, state) {
     }
   };
 };
-const Button = component$((props) => {
-  return /* @__PURE__ */ jsx(DynamicRenderer, {
+const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxC(DynamicRenderer, {
     attributes: attrs(props),
-    TagName: props.link ? props.builderLinkComponent || "a" : "button",
+    get TagName() {
+      return props.link ? props.builderLinkComponent || "a" : "button";
+    },
     actionAttributes: {},
-    children: props.text
-  });
-});
+    children: _fnSignal((p0) => p0.text, [
+      props
+    ], "p0.text"),
+    [_IMMUTABLE]: {
+      TagName: _fnSignal((p0) => p0.link ? p0.builderLinkComponent || "a" : "button", [
+        props
+      ], 'p0.link?p0.builderLinkComponent||"a":"button"'),
+      actionAttributes: _IMMUTABLE
+    }
+  }, 3, "jc_0");
+}, "Button_component_gJoMUICXoUQ"));
 export {
   Button,
   attrs,

package/lib/edge/blocks/columns/columns.qwik.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
 const blocks = require("../../components/blocks/blocks.qwik.cjs");
 const dynamicRenderer = require("../../components/dynamic-renderer/dynamic-renderer.qwik.cjs");
 const inlinedStyles = require("../../components/inlined-styles.qwik.cjs");
@@ -9,37 +9,36 @@ const deopt = require("../../functions/deopt.qwik.cjs");
 const getClassPropName = require("../../functions/get-class-prop-name.qwik.cjs");
 const getStyle = require("../../functions/get-style.qwik.cjs");
 const helpers = require("./helpers.qwik.cjs");
-const qwik = require("@builder.io/qwik");
-const getTagName = function getTagName2(props, state, column) {
+const getTagName = function getTagName2(props, state, gutterSize, cols, stackAt, flexDir, column) {
   return column.link ? props.builderLinkComponent || "a" : "div";
 };
-const getWidth = function getWidth2(props, state, index) {
+const getWidth = function getWidth2(props, state, gutterSize, cols, stackAt, flexDir, index) {
   var _a;
-  return ((_a = state.cols[index]) == null ? void 0 : _a.width) || 100 / state.cols.length;
+  return ((_a = cols.value[index]) == null ? void 0 : _a.width) || 100 / cols.value.length;
 };
-const getColumnCssWidth = function getColumnCssWidth2(props, state, index) {
-  const width = getWidth(props, state, index);
-  const subtractWidth = state.gutterSize * (state.cols.length - 1) * (width / 100);
+const getColumnCssWidth = function getColumnCssWidth2(props, state, gutterSize, cols, stackAt, flexDir, index) {
+  const width = getWidth(props, state, gutterSize, cols, stackAt, flexDir, index);
+  const subtractWidth = gutterSize.value * (cols.value.length - 1) * (width / 100);
   return `calc(${width}% - ${subtractWidth}px)`;
 };
-const getTabletStyle = function getTabletStyle2(props, state, { stackedStyle, desktopStyle }) {
-  return state.stackAt === "tablet" ? stackedStyle : desktopStyle;
+const getTabletStyle = function getTabletStyle2(props, state, gutterSize, cols, stackAt, flexDir, { stackedStyle, desktopStyle }) {
+  return stackAt.value === "tablet" ? stackedStyle : desktopStyle;
 };
-const getMobileStyle = function getMobileStyle2(props, state, { stackedStyle, desktopStyle }) {
-  return state.stackAt === "never" ? desktopStyle : stackedStyle;
+const getMobileStyle = function getMobileStyle2(props, state, gutterSize, cols, stackAt, flexDir, { stackedStyle, desktopStyle }) {
+  return stackAt.value === "never" ? desktopStyle : stackedStyle;
 };
-const columnsCssVars = function columnsCssVars2(props, state) {
+const columnsCssVars = function columnsCssVars2(props, state, gutterSize, cols, stackAt, flexDir) {
   return {
-    "--flex-dir": state.flexDir,
-    "--flex-dir-tablet": getTabletStyle(props, state, {
-      stackedStyle: state.flexDir,
+    "--flex-dir": flexDir.value,
+    "--flex-dir-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
+      stackedStyle: flexDir.value,
       desktopStyle: "row"
     })
   };
 };
-const columnCssVars = function columnCssVars2(props, state, index) {
-  const gutter = index === 0 ? 0 : state.gutterSize;
-  const width = getColumnCssWidth(props, state, index);
+const columnCssVars = function columnCssVars2(props, state, gutterSize, cols, stackAt, flexDir, index) {
+  const gutter = index === 0 ? 0 : gutterSize.value;
+  const width = getColumnCssWidth(props, state, gutterSize, cols, stackAt, flexDir, index);
   const gutterPixels = `${gutter}px`;
   const mobileWidth = "100%";
   const mobileMarginLeft = 0;
@@ -53,33 +52,33 @@ const columnCssVars = function columnCssVars2(props, state, index) {
     ...sharedStyles,
     width,
     [marginLeftKey]: gutterPixels,
-    "--column-width-mobile": getMobileStyle(props, state, {
+    "--column-width-mobile": getMobileStyle(props, state, gutterSize, cols, stackAt, flexDir, {
       stackedStyle: mobileWidth,
       desktopStyle: width
     }),
-    "--column-margin-left-mobile": getMobileStyle(props, state, {
+    "--column-margin-left-mobile": getMobileStyle(props, state, gutterSize, cols, stackAt, flexDir, {
       stackedStyle: mobileMarginLeft,
       desktopStyle: gutterPixels
     }),
-    "--column-width-tablet": getTabletStyle(props, state, {
+    "--column-width-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
       stackedStyle: mobileWidth,
       desktopStyle: width
     }),
-    "--column-margin-left-tablet": getTabletStyle(props, state, {
+    "--column-margin-left-tablet": getTabletStyle(props, state, gutterSize, cols, stackAt, flexDir, {
       stackedStyle: mobileMarginLeft,
       desktopStyle: gutterPixels
     })
   };
 };
-const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, size) {
+const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, gutterSize, cols, stackAt, flexDir, size) {
   var _a, _b;
   const breakpointSizes = deviceSizes.getSizesForBreakpoints(((_b = (_a = props.builderContext.content) == null ? void 0 : _a.meta) == null ? void 0 : _b.breakpoints) || {});
   return breakpointSizes[size].max;
 };
-const columnsStyles = function columnsStyles2(props, state) {
+const columnsStyles = function columnsStyles2(props, state, gutterSize, cols, stackAt, flexDir) {
   const childColumnDiv = `.${props.builderBlock.id}-breakpoints > .builder-column`;
   return `
-        @media (max-width: ${getWidthForBreakpointSize(props, state, "medium")}px) {
+        @media (max-width: ${getWidthForBreakpointSize(props, state, gutterSize, cols, stackAt, flexDir, "medium")}px) {
           .${props.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir-tablet);
             align-items: stretch;
@@ -91,7 +90,7 @@ const columnsStyles = function columnsStyles2(props, state) {
           }
         }
 
-        @media (max-width: ${getWidthForBreakpointSize(props, state, "small")}px) {
+        @media (max-width: ${getWidthForBreakpointSize(props, state, gutterSize, cols, stackAt, flexDir, "small")}px) {
           .${props.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir);
             align-items: stretch;
@@ -104,55 +103,109 @@ const columnsStyles = function columnsStyles2(props, state) {
         },
       `;
 };
-const getAttributes = function getAttributes2(props, state, column, index) {
+const getAttributes = function getAttributes2(props, state, gutterSize, cols, stackAt, flexDir, column, index) {
   return {
-    ...{},
     ...column.link ? {
       href: column.link
     } : {},
     [getClassPropName.getClassPropName()]: "builder-column",
-    style: getStyle.mapStyleObjToStrIfNeeded(columnCssVars(props, state, index))
+    style: getStyle.mapStyleObjToStrIfNeeded(columnCssVars(props, state, gutterSize, cols, stackAt, flexDir, index))
   };
 };
-const Columns = qwik.component$((props) => {
+const Columns = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   var _a;
-  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"
-  });
-  qwik.useStylesScoped$(STYLES);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+  qwik._jsxBranch();
+  const state = {};
+  qwik.useStylesScopedQrl(/* @__PURE__ */ qwik.inlinedQrl(STYLES, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
+  const gutterSize = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.useLexicalScope();
+    return typeof props2.space === "number" ? props2.space || 0 : 20;
+  }, "Columns_component_gutterSize_useComputed_j0vfXzMKBDA", [
+    props
+  ]));
+  const cols = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.useLexicalScope();
+    return props2.columns || [];
+  }, "Columns_component_cols_useComputed_aVUzM2fGqrw", [
+    props
+  ]));
+  const stackAt = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.useLexicalScope();
+    return props2.stackColumnsAt || "tablet";
+  }, "Columns_component_stackAt_useComputed_62lgKFigB6o", [
+    props
+  ]));
+  const flexDir = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.useLexicalScope();
+    return props2.stackColumnsAt === "never" ? "row" : props2.reverseColumnsWhenStacked ? "column-reverse" : "column";
+  }, "Columns_component_flexDir_useComputed_FDnJAkDHoLk", [
+    props
+  ]));
+  return /* @__PURE__ */ qwik._jsxQ("div", {
     class: helpers.getColumnsClass((_a = props.builderBlock) == null ? void 0 : _a.id) + " div-Columns",
-    style: columnsCssVars(props, state),
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(inlinedStyles.InlinedStyles, {
-        id: "builderio-columns",
-        styles: columnsStyles(props, state),
-        nonce: props.builderContext.nonce
-      }),
-      (props.columns || []).map((column, index) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(dynamicRenderer.DynamicRenderer, {
-          TagName: getTagName(props, state, column),
-          actionAttributes: {},
-          attributes: getAttributes(props, state, column, index),
-          children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Blocks, {
-            path: `component.options.columns.${index}.blocks`,
-            parent: props.builderBlock.id,
-            styleProp: {
+    style: columnsCssVars(props, state, gutterSize, cols, stackAt, flexDir)
+  }, null, [
+    /* @__PURE__ */ qwik._jsxC(inlinedStyles.InlinedStyles, {
+      id: "builderio-columns",
+      styles: columnsStyles(props, state, gutterSize, cols, stackAt, flexDir),
+      get nonce() {
+        return props.builderContext.nonce;
+      },
+      [qwik._IMMUTABLE]: {
+        id: qwik._IMMUTABLE,
+        nonce: qwik._fnSignal((p0) => p0.builderContext.nonce, [
+          props
+        ], "p0.builderContext.nonce")
+      }
+    }, 3, "c0_0"),
+    (props.columns || []).map((column, index) => {
+      return /* @__PURE__ */ qwik._jsxC(dynamicRenderer.DynamicRenderer, {
+        TagName: getTagName(props, state, gutterSize, cols, stackAt, flexDir, column),
+        actionAttributes: {},
+        attributes: getAttributes(props, state, gutterSize, cols, stackAt, flexDir, column, index),
+        children: /* @__PURE__ */ qwik._jsxC(blocks.Blocks, {
+          path: `component.options.columns.${index}.blocks`,
+          get parent() {
+            return props.builderBlock.id;
+          },
+          get styleProp() {
+            return {
               flexGrow: "1"
-            },
-            context: props.builderContext,
-            registeredComponents: props.builderComponents,
-            linkComponent: props.builderLinkComponent,
-            blocks: deopt.deoptSignal(column.blocks)
-          })
-        }, index);
-      })
-    ]
-  });
-});
+            };
+          },
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get linkComponent() {
+            return props.builderLinkComponent;
+          },
+          blocks: deopt.deoptSignal(column.blocks),
+          [qwik._IMMUTABLE]: {
+            context: qwik._fnSignal((p0) => p0.builderContext, [
+              props
+            ], "p0.builderContext"),
+            linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
+              props
+            ], "p0.builderLinkComponent"),
+            parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
+              props
+            ], "p0.builderBlock.id"),
+            registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
+              props
+            ], "p0.builderComponents"),
+            styleProp: qwik._IMMUTABLE
+          }
+        }, 3, "c0_1"),
+        [qwik._IMMUTABLE]: {
+          actionAttributes: qwik._IMMUTABLE
+        }
+      }, 1, index);
+    })
+  ], 1, "c0_2");
+}, "Columns_component_7yLj4bxdI6c"));
 const STYLES = `
 .div-Columns {
   display: flex;