@builder.io/sdk-qwik 0.1.12 → 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() {
@@ -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",

package/lib/index.qwik.mjs

@@ -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() {
@@ -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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.1.12",
+  "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/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";