@builder.io/sdk-qwik 0.1.11 → 0.1.13

package/lib/index.qwik.cjs

@@ -29,7 +29,8 @@ const Button = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
 const STYLES$3 = `
 .button-Button {
   all: unset;
-}`;
+}
+`;
 const builderContext = qwik.createContext("Builder");
 const TARGET = "qwik";
 function isBrowser() {
@@ -586,7 +587,7 @@ const RenderBlock = (props) => {
   }, "9d_3");
 };
 const RenderBlock$1 = RenderBlock;
-const className$1 = function className2(props, state, builderContext2) {
+const className = function className2(props, state, builderContext2) {
   return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
 };
 const onClick$1 = function onClick2(props, state, builderContext2) {
@@ -614,7 +615,7 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
   const builderContext$1 = qwik.useContext(builderContext);
   const state = {};
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: className$1(props) + " div-RenderBlocks",
+    class: className(props) + " div-RenderBlocks",
     get "builder-path"() {
       return props.path;
     },
@@ -667,91 +668,83 @@ const STYLES$2 = `
   display: flex;
   flex-direction: column;
   align-items: stretch;
-}`;
-const getGutterSize = function getGutterSize2(props, state, builderContext2) {
-  return typeof props.space === "number" ? props.space || 0 : 20;
-};
-const getColumns = function getColumns2(props, state, builderContext2) {
-  return props.columns || [];
-};
+}
+`;
 const getWidth = function getWidth2(props, state, builderContext2, index) {
-  const columns = getColumns(props);
-  return columns[index]?.width || 100 / columns.length;
+  return state.cols[index]?.width || 100 / state.cols.length;
 };
 const getColumnCssWidth = function getColumnCssWidth2(props, state, builderContext2, index) {
-  const columns = getColumns(props);
-  const gutterSize = getGutterSize(props);
-  const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
+  const subtractWidth = state.gutterSize * (state.cols.length - 1) / state.cols.length;
   return `calc(${getWidth(props, state, builderContext2, index)}% - ${subtractWidth}px)`;
 };
-const maybeApplyForTablet = function maybeApplyForTablet2(props, state, builderContext2, prop) {
-  const _stackColumnsAt = props.stackColumnsAt || "tablet";
-  return _stackColumnsAt === "tablet" ? prop : "inherit";
+const getTabletStyle = function getTabletStyle2(props, state, builderContext2, { stackedStyle, desktopStyle }) {
+  return state.stackAt === "tablet" ? stackedStyle : desktopStyle;
+};
+const getMobileStyle = function getMobileStyle2(props, state, builderContext2, { stackedStyle, desktopStyle }) {
+  return state.stackAt === "never" ? desktopStyle : stackedStyle;
 };
 const columnsCssVars = function columnsCssVars2(props, state, builderContext2) {
-  const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
   return {
-    "--flex-dir": flexDir,
-    "--flex-dir-tablet": maybeApplyForTablet(props, state, builderContext2, flexDir)
+    "--flex-dir": state.flexDir,
+    "--flex-dir-tablet": getTabletStyle(props, state, builderContext2, {
+      stackedStyle: state.flexDir,
+      desktopStyle: "row"
+    })
   };
 };
-const columnCssVars = function columnCssVars2(props, state, builderContext2) {
-  const width = "100%";
-  const marginLeft = "0";
+const columnCssVars = function columnCssVars2(props, state, builderContext2, index) {
+  const width = getColumnCssWidth(props, state, builderContext2, index);
+  const gutter = `${index === 0 ? 0 : state.gutterSize}px`;
+  const mobileWidth = "100%";
+  const mobileMarginLeft = "0";
   return {
-    "--column-width": width,
-    "--column-margin-left": marginLeft,
-    "--column-width-tablet": maybeApplyForTablet(props, state, builderContext2, width),
-    "--column-margin-left-tablet": maybeApplyForTablet(props, state, builderContext2, marginLeft)
+    width,
+    "margin-left": gutter,
+    "--column-width-mobile": getMobileStyle(props, state, builderContext2, {
+      stackedStyle: mobileWidth,
+      desktopStyle: width
+    }),
+    "--column-margin-left-mobile": getMobileStyle(props, state, builderContext2, {
+      stackedStyle: mobileMarginLeft,
+      desktopStyle: gutter
+    }),
+    "--column-width-tablet": getTabletStyle(props, state, builderContext2, {
+      stackedStyle: mobileWidth,
+      desktopStyle: width
+    }),
+    "--column-margin-left-tablet": getTabletStyle(props, state, builderContext2, {
+      stackedStyle: mobileMarginLeft,
+      desktopStyle: gutter
+    })
   };
 };
 const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, builderContext2, size) {
   const breakpointSizes = getSizesForBreakpoints(builderContext2.content?.meta?.breakpoints || {});
   return breakpointSizes[size].max;
 };
-const columnStyleObjects = function columnStyleObjects2(props, state, builderContext2) {
-  return {
-    columns: {
-      small: {
-        flexDirection: "var(--flex-dir)",
-        alignItems: "stretch"
-      },
-      medium: {
-        flexDirection: "var(--flex-dir-tablet)",
-        alignItems: "stretch"
-      }
-    },
-    column: {
-      small: {
-        width: "var(--column-width) !important",
-        marginLeft: "var(--column-margin-left) !important"
-      },
-      medium: {
-        width: "var(--column-width-tablet) !important",
-        marginLeft: "var(--column-margin-left-tablet) !important"
-      }
-    }
-  };
-};
 const columnsStyles = function columnsStyles2(props, state, builderContext2) {
   return `
         @media (max-width: ${getWidthForBreakpointSize(props, state, builderContext2, "medium")}px) {
           .${props.builderBlock.id}-breakpoints {
-            ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
           }
 
           .${props.builderBlock.id}-breakpoints > .builder-column {
-            ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
+            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 {
-            ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
           }
 
           .${props.builderBlock.id}-breakpoints > .builder-column {
-            ${convertStyleMapToCSS(columnStyleObjects().column.small)}
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
           }
         },
       `;
@@ -759,13 +752,15 @@ const columnsStyles = function columnsStyles2(props, state, builderContext2) {
 const Columns = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
   const builderContext$1 = qwik.useContext(builderContext);
-  const state = {};
+  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__ */ jsxRuntime.jsxs("div", {
     class: `builder-columns ${props.builderBlock.id}-breakpoints div-Columns`,
-    style: {
-      ...{},
-      ...columnsCssVars(props, state, builderContext$1)
-    },
+    style: columnsCssVars(props, state, builderContext$1),
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(RenderInlinedStyles, {
         styles: columnsStyles(props, state, builderContext$1)
@@ -773,12 +768,7 @@ const Columns = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
       (props.columns || []).map(function(column, index) {
         return /* @__PURE__ */ jsxRuntime.jsx("div", {
           class: "builder-column div-Columns-2",
-          style: {
-            width: getColumnCssWidth(props, state, builderContext$1, index),
-            marginLeft: `${index === 0 ? 0 : getGutterSize(props)}px`,
-            ...{},
-            ...columnCssVars(props, state, builderContext$1)
-          },
+          style: columnCssVars(props, state, builderContext$1, index),
           children: /* @__PURE__ */ jsxRuntime.jsx(RenderBlocks, {
             get blocks() {
               return column.blocks;
@@ -807,11 +797,13 @@ const STYLES$1 = `
 .div-Columns {
   display: flex;
   line-height: normal;
-}.div-Columns-2 {
+}
+.div-Columns-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-}`;
+}
+`;
 const FragmentComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ jsxRuntime.jsx("span", {
     children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}, "oj_0")
@@ -963,11 +955,13 @@ const STYLES = `
 .img-Image {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-Image {
+}
+.div-Image {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-Image-2 {
+}
+.div-Image-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -976,7 +970,8 @@ const STYLES = `
   left: 0;
   width: 100%;
   height: 100%;
-}`;
+}
+`;
 const componentInfo$a = {
   name: "Core:Button",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
@@ -1738,10 +1733,15 @@ const getBuilderSearchParamsFromWindow = () => {
 };
 const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
 const generateContentUrl = (options) => {
-  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale } = options;
+  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = "v2" } = options;
   if (!apiKey)
     throw new Error("Missing API key");
-  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
+  if (![
+    "v2",
+    "v3"
+  ].includes(apiVersion))
+    throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
+  const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
   const queryOptions = {
     ...getBuilderSearchParamsFromWindow(),
     ...normalizeSearchParams(options.options || {})
@@ -1779,39 +1779,47 @@ async function getAllContent(options) {
       });
   return content;
 }
-const className = function className22(props, state, builderContext2) {
-  return [
-    ...[
-      props.attributes.class
-    ],
-    "builder-symbol",
-    props.symbol?.inline ? "builder-inline-symbol" : void 0,
-    props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
-  ].filter(Boolean).join(" ");
-};
-const contentToUse = function contentToUse2(props, state, builderContext2) {
-  return props.symbol?.content || state.fetchedContent;
+const fetchContent = function fetchContent2(props, state, builderContext2) {
+  if (!state.contentToUse && props.symbol?.model && builderContext2?.apiKey)
+    getContent({
+      model: props.symbol.model,
+      apiKey: builderContext2.apiKey,
+      apiVersion: builderContext2.apiVersion,
+      query: {
+        id: props.symbol.entry
+      }
+    }).then((response) => {
+      if (response)
+        state.contentToUse = response;
+    }).catch((err) => {
+      console.error("[Builder.io]: Could not fetch symbol content: ", err);
+    });
 };
 const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   const builderContext$1 = qwik.useContext(builderContext);
   const state = qwik.useStore({
-    fetchedContent: null
+    className: [
+      ...[
+        props.attributes.class
+      ],
+      "builder-symbol",
+      props.symbol?.inline ? "builder-inline-symbol" : void 0,
+      props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
+    ].filter(Boolean).join(" "),
+    contentToUse: props.symbol?.content
   });
+  qwik.useClientEffectQrl(qwik.inlinedQrl(() => {
+    const [builderContext2, props2, state2] = qwik.useLexicalScope();
+    fetchContent(props2, state2, builderContext2);
+  }, "Symbol_component_useClientEffect_Kfc9q3nzeSQ", [
+    builderContext$1,
+    props,
+    state
+  ]));
   qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
     const [builderContext2, props2, state2] = qwik.useLexicalScope();
     track2(() => props2.symbol);
-    track2(() => state2.fetchedContent);
-    const symbolToUse = props2.symbol;
-    if (symbolToUse && !symbolToUse.content && !state2.fetchedContent && symbolToUse.model && builderContext2?.apiKey)
-      getContent({
-        model: symbolToUse.model,
-        apiKey: builderContext2.apiKey,
-        query: {
-          id: symbolToUse.entry
-        }
-      }).then((response) => {
-        state2.fetchedContent = response;
-      });
+    fetchContent(props2, state2, builderContext2);
   }, "Symbol_component_useTask_NIAWAC1bMBo", [
     builderContext$1,
     props,
@@ -1819,8 +1827,13 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   ]));
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ...props.attributes,
-    class: className(props),
+    get class() {
+      return state.className;
+    },
     children: /* @__PURE__ */ jsxRuntime.jsx(RenderContent$1, {
+      get apiVersion() {
+        return builderContext$1.apiVersion;
+      },
       get apiKey() {
         return builderContext$1.apiKey;
       },
@@ -1831,15 +1844,22 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
       data: {
         ...props.symbol?.data,
         ...builderContext$1.state,
-        ...props.symbol?.content?.data?.state
+        ...state.contentToUse?.data?.state
       },
       model: props.symbol?.model,
-      content: contentToUse(props, state),
+      get content() {
+        return state.contentToUse;
+      },
       [qwik._IMMUTABLE]: {
+        apiVersion: qwik._wrapSignal(builderContext$1, "apiVersion"),
         apiKey: qwik._wrapSignal(builderContext$1, "apiKey"),
-        context: qwik._wrapSignal(builderContext$1, "context")
+        context: qwik._wrapSignal(builderContext$1, "context"),
+        content: qwik._wrapSignal(state, "contentToUse")
       }
-    }, "Wt_0")
+    }, "Wt_0"),
+    [qwik._IMMUTABLE]: {
+      class: qwik._wrapSignal(state, "className")
+    }
   });
 }, "Symbol_component_WVvggdkUPdk"));
 const componentInfo$4 = {
@@ -2937,6 +2957,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
     state: state.contentState,
     context: props.context || {},
     apiKey: props.apiKey,
+    apiVersion: props.apiVersion,
     registeredComponents: state.allRegisteredComponents
   }));
   qwik.useClientEffectQrl(qwik.inlinedQrl(() => {
@@ -2980,7 +3001,8 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
         if (searchParamPreview === props2.model && previewApiKey === props2.apiKey)
           getContent({
             model: props2.model,
-            apiKey: props2.apiKey
+            apiKey: props2.apiKey,
+            apiVersion: props2.apiVersion
           }).then((content) => {
             if (content)
               mergeNewContent(props2, state2, elementRef2, content);
@@ -2995,12 +3017,22 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
     props,
     state
   ]));
+  qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
+    const [elementRef2, props2, state2] = qwik.useLexicalScope();
+    track2(() => props2.content);
+    if (props2.content)
+      mergeNewContent(props2, state2, elementRef2, props2.content);
+  }, "RenderContent_component_useTask_Kulmlf9pM08", [
+    elementRef,
+    props,
+    state
+  ]));
   qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = qwik.useLexicalScope();
     track2(() => state2.useContent?.data?.jsCode);
     track2(() => state2.contentState);
     evaluateJsCode(props2, state2);
-  }, "RenderContent_component_useTask_Kulmlf9pM08", [
+  }, "RenderContent_component_useTask_1_X59YMGOetns", [
     elementRef,
     props,
     state
@@ -3009,7 +3041,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
     const [elementRef2, props2, state2] = qwik.useLexicalScope();
     track2(() => state2.useContent?.data?.httpRequests);
     runHttpRequests(props2, state2, elementRef2);
-  }, "RenderContent_component_useTask_1_X59YMGOetns", [
+  }, "RenderContent_component_useTask_2_u3gn3Pj2b2s", [
     elementRef,
     props,
     state
@@ -3018,7 +3050,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
     const [elementRef2, props2, state2] = qwik.useLexicalScope();
     track2(() => state2.contentState);
     emitStateUpdate(props2, state2);
-  }, "RenderContent_component_useTask_2_u3gn3Pj2b2s", [
+  }, "RenderContent_component_useTask_3_xLCHvjhJYRM", [
     elementRef,
     props,
     state

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, useStylesScopedQrl, _wrapSignal, _IMMUTABLE, createContext, useLexicalScope, useContextProvider, useStore, useContext, Slot, Fragment as Fragment$1, useTaskQrl, useRef, useClientEffectQrl, useCleanupQrl } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, useStylesScopedQrl, _wrapSignal, _IMMUTABLE, createContext, useLexicalScope, useContextProvider, useStore, useContext, Slot, Fragment as Fragment$1, useClientEffectQrl, useTaskQrl, useRef, useCleanupQrl } from "@builder.io/qwik";
 import { jsx, Fragment, jsxs } from "@builder.io/qwik/jsx-runtime";
 const Button = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   useStylesScopedQrl(inlinedQrl(STYLES$3, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
@@ -27,7 +27,8 @@ const Button = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
 const STYLES$3 = `
 .button-Button {
   all: unset;
-}`;
+}
+`;
 const builderContext = createContext("Builder");
 const TARGET = "qwik";
 function isBrowser() {
@@ -584,7 +585,7 @@ const RenderBlock = (props) => {
   }, "9d_3");
 };
 const RenderBlock$1 = RenderBlock;
-const className$1 = function className2(props, state, builderContext2) {
+const className = function className2(props, state, builderContext2) {
   return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
 };
 const onClick$1 = function onClick2(props, state, builderContext2) {
@@ -612,7 +613,7 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   const builderContext$1 = useContext(builderContext);
   const state = {};
   return /* @__PURE__ */ jsxs("div", {
-    class: className$1(props) + " div-RenderBlocks",
+    class: className(props) + " div-RenderBlocks",
     get "builder-path"() {
       return props.path;
     },
@@ -665,91 +666,83 @@ const STYLES$2 = `
   display: flex;
   flex-direction: column;
   align-items: stretch;
-}`;
-const getGutterSize = function getGutterSize2(props, state, builderContext2) {
-  return typeof props.space === "number" ? props.space || 0 : 20;
-};
-const getColumns = function getColumns2(props, state, builderContext2) {
-  return props.columns || [];
-};
+}
+`;
 const getWidth = function getWidth2(props, state, builderContext2, index) {
-  const columns = getColumns(props);
-  return columns[index]?.width || 100 / columns.length;
+  return state.cols[index]?.width || 100 / state.cols.length;
 };
 const getColumnCssWidth = function getColumnCssWidth2(props, state, builderContext2, index) {
-  const columns = getColumns(props);
-  const gutterSize = getGutterSize(props);
-  const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
+  const subtractWidth = state.gutterSize * (state.cols.length - 1) / state.cols.length;
   return `calc(${getWidth(props, state, builderContext2, index)}% - ${subtractWidth}px)`;
 };
-const maybeApplyForTablet = function maybeApplyForTablet2(props, state, builderContext2, prop) {
-  const _stackColumnsAt = props.stackColumnsAt || "tablet";
-  return _stackColumnsAt === "tablet" ? prop : "inherit";
+const getTabletStyle = function getTabletStyle2(props, state, builderContext2, { stackedStyle, desktopStyle }) {
+  return state.stackAt === "tablet" ? stackedStyle : desktopStyle;
+};
+const getMobileStyle = function getMobileStyle2(props, state, builderContext2, { stackedStyle, desktopStyle }) {
+  return state.stackAt === "never" ? desktopStyle : stackedStyle;
 };
 const columnsCssVars = function columnsCssVars2(props, state, builderContext2) {
-  const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
   return {
-    "--flex-dir": flexDir,
-    "--flex-dir-tablet": maybeApplyForTablet(props, state, builderContext2, flexDir)
+    "--flex-dir": state.flexDir,
+    "--flex-dir-tablet": getTabletStyle(props, state, builderContext2, {
+      stackedStyle: state.flexDir,
+      desktopStyle: "row"
+    })
   };
 };
-const columnCssVars = function columnCssVars2(props, state, builderContext2) {
-  const width = "100%";
-  const marginLeft = "0";
+const columnCssVars = function columnCssVars2(props, state, builderContext2, index) {
+  const width = getColumnCssWidth(props, state, builderContext2, index);
+  const gutter = `${index === 0 ? 0 : state.gutterSize}px`;
+  const mobileWidth = "100%";
+  const mobileMarginLeft = "0";
   return {
-    "--column-width": width,
-    "--column-margin-left": marginLeft,
-    "--column-width-tablet": maybeApplyForTablet(props, state, builderContext2, width),
-    "--column-margin-left-tablet": maybeApplyForTablet(props, state, builderContext2, marginLeft)
+    width,
+    "margin-left": gutter,
+    "--column-width-mobile": getMobileStyle(props, state, builderContext2, {
+      stackedStyle: mobileWidth,
+      desktopStyle: width
+    }),
+    "--column-margin-left-mobile": getMobileStyle(props, state, builderContext2, {
+      stackedStyle: mobileMarginLeft,
+      desktopStyle: gutter
+    }),
+    "--column-width-tablet": getTabletStyle(props, state, builderContext2, {
+      stackedStyle: mobileWidth,
+      desktopStyle: width
+    }),
+    "--column-margin-left-tablet": getTabletStyle(props, state, builderContext2, {
+      stackedStyle: mobileMarginLeft,
+      desktopStyle: gutter
+    })
   };
 };
 const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, builderContext2, size) {
   const breakpointSizes = getSizesForBreakpoints(builderContext2.content?.meta?.breakpoints || {});
   return breakpointSizes[size].max;
 };
-const columnStyleObjects = function columnStyleObjects2(props, state, builderContext2) {
-  return {
-    columns: {
-      small: {
-        flexDirection: "var(--flex-dir)",
-        alignItems: "stretch"
-      },
-      medium: {
-        flexDirection: "var(--flex-dir-tablet)",
-        alignItems: "stretch"
-      }
-    },
-    column: {
-      small: {
-        width: "var(--column-width) !important",
-        marginLeft: "var(--column-margin-left) !important"
-      },
-      medium: {
-        width: "var(--column-width-tablet) !important",
-        marginLeft: "var(--column-margin-left-tablet) !important"
-      }
-    }
-  };
-};
 const columnsStyles = function columnsStyles2(props, state, builderContext2) {
   return `
         @media (max-width: ${getWidthForBreakpointSize(props, state, builderContext2, "medium")}px) {
           .${props.builderBlock.id}-breakpoints {
-            ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
           }
 
           .${props.builderBlock.id}-breakpoints > .builder-column {
-            ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
+            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 {
-            ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
           }
 
           .${props.builderBlock.id}-breakpoints > .builder-column {
-            ${convertStyleMapToCSS(columnStyleObjects().column.small)}
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
           }
         },
       `;
@@ -757,13 +750,15 @@ const columnsStyles = function columnsStyles2(props, state, builderContext2) {
 const Columns = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   useStylesScopedQrl(inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
   const builderContext$1 = useContext(builderContext);
-  const state = {};
+  const state = useStore({
+    cols: props.columns || [],
+    flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
+    gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
+    stackAt: props.stackColumnsAt || "tablet"
+  });
   return /* @__PURE__ */ jsxs("div", {
     class: `builder-columns ${props.builderBlock.id}-breakpoints div-Columns`,
-    style: {
-      ...{},
-      ...columnsCssVars(props, state, builderContext$1)
-    },
+    style: columnsCssVars(props, state, builderContext$1),
     children: [
       /* @__PURE__ */ jsx(RenderInlinedStyles, {
         styles: columnsStyles(props, state, builderContext$1)
@@ -771,12 +766,7 @@ const Columns = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       (props.columns || []).map(function(column, index) {
         return /* @__PURE__ */ jsx("div", {
           class: "builder-column div-Columns-2",
-          style: {
-            width: getColumnCssWidth(props, state, builderContext$1, index),
-            marginLeft: `${index === 0 ? 0 : getGutterSize(props)}px`,
-            ...{},
-            ...columnCssVars(props, state, builderContext$1)
-          },
+          style: columnCssVars(props, state, builderContext$1, index),
           children: /* @__PURE__ */ jsx(RenderBlocks, {
             get blocks() {
               return column.blocks;
@@ -805,11 +795,13 @@ const STYLES$1 = `
 .div-Columns {
   display: flex;
   line-height: normal;
-}.div-Columns-2 {
+}
+.div-Columns-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-}`;
+}
+`;
 const FragmentComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   return /* @__PURE__ */ jsx("span", {
     children: /* @__PURE__ */ jsx(Slot, {}, "oj_0")
@@ -961,11 +953,13 @@ const STYLES = `
 .img-Image {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-Image {
+}
+.div-Image {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-Image-2 {
+}
+.div-Image-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -974,7 +968,8 @@ const STYLES = `
   left: 0;
   width: 100%;
   height: 100%;
-}`;
+}
+`;
 const componentInfo$a = {
   name: "Core:Button",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
@@ -1736,10 +1731,15 @@ const getBuilderSearchParamsFromWindow = () => {
 };
 const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
 const generateContentUrl = (options) => {
-  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale } = options;
+  const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = "v2" } = options;
   if (!apiKey)
     throw new Error("Missing API key");
-  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
+  if (![
+    "v2",
+    "v3"
+  ].includes(apiVersion))
+    throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
+  const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
   const queryOptions = {
     ...getBuilderSearchParamsFromWindow(),
     ...normalizeSearchParams(options.options || {})
@@ -1777,39 +1777,47 @@ async function getAllContent(options) {
       });
   return content;
 }
-const className = function className22(props, state, builderContext2) {
-  return [
-    ...[
-      props.attributes.class
-    ],
-    "builder-symbol",
-    props.symbol?.inline ? "builder-inline-symbol" : void 0,
-    props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
-  ].filter(Boolean).join(" ");
-};
-const contentToUse = function contentToUse2(props, state, builderContext2) {
-  return props.symbol?.content || state.fetchedContent;
+const fetchContent = function fetchContent2(props, state, builderContext2) {
+  if (!state.contentToUse && props.symbol?.model && builderContext2?.apiKey)
+    getContent({
+      model: props.symbol.model,
+      apiKey: builderContext2.apiKey,
+      apiVersion: builderContext2.apiVersion,
+      query: {
+        id: props.symbol.entry
+      }
+    }).then((response) => {
+      if (response)
+        state.contentToUse = response;
+    }).catch((err) => {
+      console.error("[Builder.io]: Could not fetch symbol content: ", err);
+    });
 };
 const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   const builderContext$1 = useContext(builderContext);
   const state = useStore({
-    fetchedContent: null
+    className: [
+      ...[
+        props.attributes.class
+      ],
+      "builder-symbol",
+      props.symbol?.inline ? "builder-inline-symbol" : void 0,
+      props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
+    ].filter(Boolean).join(" "),
+    contentToUse: props.symbol?.content
   });
+  useClientEffectQrl(inlinedQrl(() => {
+    const [builderContext2, props2, state2] = useLexicalScope();
+    fetchContent(props2, state2, builderContext2);
+  }, "Symbol_component_useClientEffect_Kfc9q3nzeSQ", [
+    builderContext$1,
+    props,
+    state
+  ]));
   useTaskQrl(inlinedQrl(({ track: track2 }) => {
     const [builderContext2, props2, state2] = useLexicalScope();
     track2(() => props2.symbol);
-    track2(() => state2.fetchedContent);
-    const symbolToUse = props2.symbol;
-    if (symbolToUse && !symbolToUse.content && !state2.fetchedContent && symbolToUse.model && builderContext2?.apiKey)
-      getContent({
-        model: symbolToUse.model,
-        apiKey: builderContext2.apiKey,
-        query: {
-          id: symbolToUse.entry
-        }
-      }).then((response) => {
-        state2.fetchedContent = response;
-      });
+    fetchContent(props2, state2, builderContext2);
   }, "Symbol_component_useTask_NIAWAC1bMBo", [
     builderContext$1,
     props,
@@ -1817,8 +1825,13 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   ]));
   return /* @__PURE__ */ jsx("div", {
     ...props.attributes,
-    class: className(props),
+    get class() {
+      return state.className;
+    },
     children: /* @__PURE__ */ jsx(RenderContent$1, {
+      get apiVersion() {
+        return builderContext$1.apiVersion;
+      },
       get apiKey() {
         return builderContext$1.apiKey;
       },
@@ -1829,15 +1842,22 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
       data: {
         ...props.symbol?.data,
         ...builderContext$1.state,
-        ...props.symbol?.content?.data?.state
+        ...state.contentToUse?.data?.state
       },
       model: props.symbol?.model,
-      content: contentToUse(props, state),
+      get content() {
+        return state.contentToUse;
+      },
       [_IMMUTABLE]: {
+        apiVersion: _wrapSignal(builderContext$1, "apiVersion"),
         apiKey: _wrapSignal(builderContext$1, "apiKey"),
-        context: _wrapSignal(builderContext$1, "context")
+        context: _wrapSignal(builderContext$1, "context"),
+        content: _wrapSignal(state, "contentToUse")
       }
-    }, "Wt_0")
+    }, "Wt_0"),
+    [_IMMUTABLE]: {
+      class: _wrapSignal(state, "className")
+    }
   });
 }, "Symbol_component_WVvggdkUPdk"));
 const componentInfo$4 = {
@@ -2935,6 +2955,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     state: state.contentState,
     context: props.context || {},
     apiKey: props.apiKey,
+    apiVersion: props.apiVersion,
     registeredComponents: state.allRegisteredComponents
   }));
   useClientEffectQrl(inlinedQrl(() => {
@@ -2978,7 +2999,8 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
         if (searchParamPreview === props2.model && previewApiKey === props2.apiKey)
           getContent({
             model: props2.model,
-            apiKey: props2.apiKey
+            apiKey: props2.apiKey,
+            apiVersion: props2.apiVersion
           }).then((content) => {
             if (content)
               mergeNewContent(props2, state2, elementRef2, content);
@@ -2993,12 +3015,22 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     props,
     state
   ]));
+  useTaskQrl(inlinedQrl(({ track: track2 }) => {
+    const [elementRef2, props2, state2] = useLexicalScope();
+    track2(() => props2.content);
+    if (props2.content)
+      mergeNewContent(props2, state2, elementRef2, props2.content);
+  }, "RenderContent_component_useTask_Kulmlf9pM08", [
+    elementRef,
+    props,
+    state
+  ]));
   useTaskQrl(inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = useLexicalScope();
     track2(() => state2.useContent?.data?.jsCode);
     track2(() => state2.contentState);
     evaluateJsCode(props2, state2);
-  }, "RenderContent_component_useTask_Kulmlf9pM08", [
+  }, "RenderContent_component_useTask_1_X59YMGOetns", [
     elementRef,
     props,
     state
@@ -3007,7 +3039,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     const [elementRef2, props2, state2] = useLexicalScope();
     track2(() => state2.useContent?.data?.httpRequests);
     runHttpRequests(props2, state2, elementRef2);
-  }, "RenderContent_component_useTask_1_X59YMGOetns", [
+  }, "RenderContent_component_useTask_2_u3gn3Pj2b2s", [
     elementRef,
     props,
     state
@@ -3016,7 +3048,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
     const [elementRef2, props2, state2] = useLexicalScope();
     track2(() => state2.contentState);
     emitStateUpdate(props2, state2);
-  }, "RenderContent_component_useTask_2_u3gn3Pj2b2s", [
+  }, "RenderContent_component_useTask_3_xLCHvjhJYRM", [
     elementRef,
     props,
     state

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Builder.io Qwik SDK",
   "type": "module",
   "main": "./lib/index.qwik.cjs",

package/types/blocks/button/button.d.ts

@@ -6,4 +6,4 @@ export interface ButtonProps {
 }
 export declare const Button: import("@builder.io/qwik").Component<ButtonProps>;
 export default Button;
-export declare const STYLES = "\n.button-Button {\n  all: unset;\n}";
+export declare const STYLES = "\n.button-Button {\n  all: unset;\n}\n";

package/types/blocks/columns/columns.d.ts

@@ -1,7 +1,7 @@
 import type { BuilderBlock } from "../../types/builder-block";
 import type { SizeName } from "../../constants/device-sizes";
 type Column = {
-    blocks: any;
+    blocks: BuilderBlock[];
     width?: number;
 };
 type StackColumnsAt = "tablet" | "mobile" | "never";
@@ -12,53 +12,44 @@ export interface ColumnProps {
     stackColumnsAt?: StackColumnsAt;
     reverseColumnsWhenStacked?: boolean;
 }
-export declare const getGutterSize: (props: any, state: any, builderContext: any) => any;
-export declare const getColumns: (props: any, state: any, builderContext: any) => any;
 export declare const getWidth: (props: any, state: any, builderContext: any, index: number) => any;
 export declare const getColumnCssWidth: (props: any, state: any, builderContext: any, index: number) => string;
-export declare const maybeApplyForTablet: (props: any, state: any, builderContext: any, prop: string | undefined) => string | undefined;
+export declare const getTabletStyle: (props: any, state: any, builderContext: any, { stackedStyle, desktopStyle, }: {
+    stackedStyle: string;
+    desktopStyle: string;
+}) => string;
+export declare const getMobileStyle: (props: any, state: any, builderContext: any, { stackedStyle, desktopStyle, }: {
+    stackedStyle: string;
+    desktopStyle: string;
+}) => string;
 export declare const columnsCssVars: (props: any, state: any, builderContext: any) => {
-    "--flex-dir": string;
-    "--flex-dir-tablet": string | undefined;
+    flexDirection: any;
+    "--flex-dir"?: undefined;
+    "--flex-dir-tablet"?: undefined;
+} | {
+    "--flex-dir": any;
+    "--flex-dir-tablet": string;
+    flexDirection?: undefined;
 };
-export declare const columnCssVars: (props: any, state: any, builderContext: any) => {
-    "--column-width": string;
-    "--column-margin-left": string;
-    "--column-width-tablet": string | undefined;
-    "--column-margin-left-tablet": string | undefined;
-};
-export declare const getWidthForBreakpointSize: (props: any, state: any, builderContext: any, size: SizeName) => number;
-export declare const columnStyleObjects: (props: any, state: any, builderContext: any) => {
-    columns: {
-        small: {
-            flexDirection: string;
-            alignItems: string;
-        };
-        medium: {
-            flexDirection: string;
-            alignItems: string;
-        };
-    };
-    column: {
-        small: {
-            width: string;
-            marginLeft: string;
-        };
-        medium: {
-            width: string;
-            marginLeft: string;
-        };
-    };
-};
-export declare const columnsStyles: (props: any, state: any, builderContext: any) => string;
-export declare const reactNativeColumnsStyles: (props: any, state: any, builderContext: any) => {
-    flexDirection: string;
-    alignItems: string;
-};
-export declare const reactNativeColumnStyles: (props: any, state: any, builderContext: any) => {
+export declare const columnCssVars: (props: any, state: any, builderContext: any, index: number) => {
     width: string;
     marginLeft: string;
+    "margin-left"?: undefined;
+    "--column-width-mobile"?: undefined;
+    "--column-margin-left-mobile"?: undefined;
+    "--column-width-tablet"?: undefined;
+    "--column-margin-left-tablet"?: undefined;
+} | {
+    width: string;
+    "margin-left": string;
+    "--column-width-mobile": string;
+    "--column-margin-left-mobile": string;
+    "--column-width-tablet": string;
+    "--column-margin-left-tablet": string;
+    marginLeft?: undefined;
 };
+export declare const getWidthForBreakpointSize: (props: any, state: any, builderContext: any, size: SizeName) => number;
+export declare const columnsStyles: (props: any, state: any, builderContext: any) => string;
 export declare const Columns: import("@builder.io/qwik").Component<ColumnProps>;
 export default Columns;
-export declare const STYLES = "\n.div-Columns {\n  display: flex;\n  line-height: normal;\n}.div-Columns-2 {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n}";
+export declare const STYLES = "\n.div-Columns {\n  display: flex;\n  line-height: normal;\n}\n.div-Columns-2 {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n}\n";

package/types/blocks/image/image.d.ts

@@ -29,4 +29,4 @@ export declare const aspectRatioCss: (props: any, state: any) => {
 } | undefined;
 export declare const Image: import("@builder.io/qwik").Component<ImageProps>;
 export default Image;
-export declare const STYLES = "\n.img-Image {\n  opacity: 1;\n  transition: opacity 0.2s ease-in-out;\n}.div-Image {\n  width: 100%;\n  pointer-events: none;\n  font-size: 0;\n}.div-Image-2 {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}";
+export declare const STYLES = "\n.img-Image {\n  opacity: 1;\n  transition: opacity 0.2s ease-in-out;\n}\n.div-Image {\n  width: 100%;\n  pointer-events: none;\n  font-size: 0;\n}\n.div-Image-2 {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n";

package/types/blocks/symbol/symbol.d.ts

@@ -16,7 +16,6 @@ export interface SymbolProps {
     attributes?: any;
     inheritState?: boolean;
 }
-export declare const className: (props: any, state: any, builderContext: any) => string;
-export declare const contentToUse: (props: any, state: any, builderContext: any) => any;
+export declare const fetchContent: (props: any, state: any, builderContext: any) => void;
 export declare const Symbol: import("@builder.io/qwik").Component<SymbolProps>;
 export default Symbol;

package/types/components/render-blocks.d.ts

@@ -10,4 +10,4 @@ export declare const onClick: (props: any, state: any, builderContext: any) => v
 export declare const onMouseEnter: (props: any, state: any, builderContext: any) => void;
 export declare const RenderBlocks: import("@builder.io/qwik").Component<RenderBlockProps>;
 export default RenderBlocks;
-export declare const STYLES = "\n.div-RenderBlocks {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n}";
+export declare const STYLES = "\n.div-RenderBlocks {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n}\n";

package/types/components/render-content/render-content.types.d.ts

@@ -1,6 +1,7 @@
 import type { BuilderRenderContext, RegisteredComponent, BuilderRenderState } from '../../context/types';
 import type { BuilderContent } from '../../types/builder-content';
 import type { Nullable } from '../../types/typescript';
+import type { ApiVersion } from '../../types/api-version';
 export type RenderContentProps = {
     content?: Nullable<BuilderContent>;
     model?: string;
@@ -9,6 +10,7 @@ export type RenderContentProps = {
     };
     context?: BuilderRenderContext;
     apiKey: string;
+    apiVersion?: ApiVersion;
     customComponents?: RegisteredComponent[];
     canTrack?: boolean;
     locale?: string;

package/types/context/types.d.ts

@@ -1,6 +1,7 @@
 import type { BuilderContent } from '../types/builder-content.js';
 import type { ComponentInfo } from '../types/components.js';
 import type { Dictionary, Nullable } from '../types/typescript.js';
+import type { ApiVersion } from '../types/api-version.js';
 export type RegisteredComponent = ComponentInfo & {
     component: any;
 };
@@ -13,6 +14,7 @@ export interface BuilderContextInterface {
     state: BuilderRenderState;
     setState?: (state: BuilderRenderState) => void;
     apiKey: string | null;
+    apiVersion?: ApiVersion;
     registeredComponents: RegisteredComponents;
     inheritedStyles: Record<string, unknown>;
 }

package/types/functions/get-content/types.d.ts

@@ -36,4 +36,10 @@ export interface GetContentOptions {
      * If provided, the API will auto-resolve localized objects to the value of this `locale` key.
      */
     locale?: string;
+    /**
+     * If provided, sets the Builder API version used to fetch content.
+     *
+     * Defaults to `v2`.
+     */
+    apiVersion?: 'v2' | 'v3';
 }

package/types/types/api-version.d.ts

@@ -0,0 +1 @@
+export type ApiVersion = 'v2' | 'v3';