@builder.io/sdk-qwik 0.16.19 → 0.16.21

package/lib/browser/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/browser/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;

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
+import { componentQrl, inlinedQrl, _jsxBranch, useStylesScopedQrl, useComputedQrl, useLexicalScope, _jsxQ, _jsxC, _IMMUTABLE, _fnSignal } from "@builder.io/qwik";
 import { Blocks } from "../../components/blocks/blocks.qwik.mjs";
 import { DynamicRenderer } from "../../components/dynamic-renderer/dynamic-renderer.qwik.mjs";
 import { InlinedStyles } from "../../components/inlined-styles.qwik.mjs";
@@ -7,37 +7,36 @@ import { deoptSignal } from "../../functions/deopt.qwik.mjs";
 import { getClassPropName } from "../../functions/get-class-prop-name.qwik.mjs";
 import { mapStyleObjToStrIfNeeded } from "../../functions/get-style.qwik.mjs";
 import { getColumnsClass } from "./helpers.qwik.mjs";
-import { component$, useStore, useStylesScoped$ } from "@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;
@@ -51,33 +50,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 = 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;
@@ -89,7 +88,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;
@@ -102,55 +101,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()]: "builder-column",
-    style: mapStyleObjToStrIfNeeded(columnCssVars(props, state, index))
+    style: mapStyleObjToStrIfNeeded(columnCssVars(props, state, gutterSize, cols, stackAt, flexDir, index))
   };
 };
-const Columns = component$((props) => {
+const Columns = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   var _a;
-  const state = useStore({
-    cols: props.columns || [],
-    flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
-    gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
-    stackAt: props.stackColumnsAt || "tablet"
-  });
-  useStylesScoped$(STYLES);
-  return /* @__PURE__ */ jsxs("div", {
+  _jsxBranch();
+  const state = {};
+  useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
+  const gutterSize = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    return typeof props2.space === "number" ? props2.space || 0 : 20;
+  }, "Columns_component_gutterSize_useComputed_j0vfXzMKBDA", [
+    props
+  ]));
+  const cols = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    return props2.columns || [];
+  }, "Columns_component_cols_useComputed_aVUzM2fGqrw", [
+    props
+  ]));
+  const stackAt = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    return props2.stackColumnsAt || "tablet";
+  }, "Columns_component_stackAt_useComputed_62lgKFigB6o", [
+    props
+  ]));
+  const flexDir = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    return props2.stackColumnsAt === "never" ? "row" : props2.reverseColumnsWhenStacked ? "column-reverse" : "column";
+  }, "Columns_component_flexDir_useComputed_FDnJAkDHoLk", [
+    props
+  ]));
+  return /* @__PURE__ */ _jsxQ("div", {
     class: getColumnsClass((_a = props.builderBlock) == null ? void 0 : _a.id) + " div-Columns",
-    style: columnsCssVars(props, state),
-    children: [
-      /* @__PURE__ */ jsx(InlinedStyles, {
-        id: "builderio-columns",
-        styles: columnsStyles(props, state),
-        nonce: props.builderContext.nonce
-      }),
-      (props.columns || []).map((column, index) => {
-        return /* @__PURE__ */ jsx(DynamicRenderer, {
-          TagName: getTagName(props, state, column),
-          actionAttributes: {},
-          attributes: getAttributes(props, state, column, index),
-          children: /* @__PURE__ */ jsx(Blocks, {
-            path: `component.options.columns.${index}.blocks`,
-            parent: props.builderBlock.id,
-            styleProp: {
+    style: columnsCssVars(props, state, gutterSize, cols, stackAt, flexDir)
+  }, null, [
+    /* @__PURE__ */ _jsxC(InlinedStyles, {
+      id: "builderio-columns",
+      styles: columnsStyles(props, state, gutterSize, cols, stackAt, flexDir),
+      get nonce() {
+        return props.builderContext.nonce;
+      },
+      [_IMMUTABLE]: {
+        id: _IMMUTABLE,
+        nonce: _fnSignal((p0) => p0.builderContext.nonce, [
+          props
+        ], "p0.builderContext.nonce")
+      }
+    }, 3, "c0_0"),
+    (props.columns || []).map((column, index) => {
+      return /* @__PURE__ */ _jsxC(DynamicRenderer, {
+        TagName: getTagName(props, state, gutterSize, cols, stackAt, flexDir, column),
+        actionAttributes: {},
+        attributes: getAttributes(props, state, gutterSize, cols, stackAt, flexDir, column, index),
+        children: /* @__PURE__ */ _jsxC(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: deoptSignal(column.blocks)
-          })
-        }, index);
-      })
-    ]
-  });
-});
+            };
+          },
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get linkComponent() {
+            return props.builderLinkComponent;
+          },
+          blocks: deoptSignal(column.blocks),
+          [_IMMUTABLE]: {
+            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"),
+            styleProp: _IMMUTABLE
+          }
+        }, 3, "c0_1"),
+        [_IMMUTABLE]: {
+          actionAttributes: _IMMUTABLE
+        }
+      }, 1, index);
+    })
+  ], 1, "c0_2");
+}, "Columns_component_7yLj4bxdI6c"));
 const STYLES = `
 .div-Columns {
   display: flex;

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

@@ -200,16 +200,15 @@ const componentInfo = {
           const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
           if (containsColumnWithWidth) {
             const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
-            if (containsColumnWithoutWidth) {
+            if (containsColumnWithoutWidth)
               clearWidths();
-            } else {
+            else {
               const sumWidths = columns.reduce((memo, col) => {
                 return memo + col.get("width");
               }, 0);
               const widthsDontAddUp = sumWidths !== 100;
-              if (widthsDontAddUp) {
+              if (widthsDontAddUp)
                 clearWidths();
-              }
             }
           }
         }

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

@@ -198,16 +198,15 @@ const componentInfo = {
           const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
           if (containsColumnWithWidth) {
             const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
-            if (containsColumnWithoutWidth) {
+            if (containsColumnWithoutWidth)
               clearWidths();
-            } else {
+            else {
               const sumWidths = columns.reduce((memo, col) => {
                 return memo + col.get("width");
               }, 0);
               const widthsDontAddUp = sumWidths !== 100;
-              if (widthsDontAddUp) {
+              if (widthsDontAddUp)
                 clearWidths();
-              }
             }
           }
         }