@builder.io/sdk-react 0.1.3 → 0.1.4

package/dist/react/blocks/columns/columns.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import RenderBlocks from "../../components/render-blocks.js";
+import RenderBlocks from "../../components/render-blocks";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles.js";
+import RenderInlinedStyles from "../../components/render-inlined-styles";
 import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
 export default function Columns(props) {

package/dist/react/blocks/form/form.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState, useContext, useRef } from "react";
-import RenderBlock from "../../components/render-block/render-block.js";
-import BuilderBlocks from "../../components/render-blocks.js";
+import RenderBlock from "../../components/render-block/render-block";
+import BuilderBlocks from "../../components/render-blocks";
 import { isEditing } from "../../functions/is-editing.js";
 export default function FormComponent(props) {
     const formRef = useRef(null);

package/dist/react/blocks/symbol/symbol.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useState, useContext, useEffect } from "react";
-import RenderContent from "../../components/render-content/render-content.js";
+import RenderContent from "../../components/render-content/render-content";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";

package/dist/react/components/render-block/block-styles.js

@@ -3,7 +3,7 @@ import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../constant
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
-import RenderInlinedStyles from "../render-inlined-styles.js";
+import RenderInlinedStyles from "../render-inlined-styles";
 export default function BlockStyles(props) {
     function useBlock() {
         return getProcessedBlock({

package/dist/react/components/render-block/render-block.js

@@ -5,12 +5,12 @@ import { getBlockComponentOptions } from "../../functions/get-block-component-op
 import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./block-styles.js";
+import BlockStyles from "./block-styles";
 import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
-import RenderRepeatedBlock from "./render-repeated-block.js";
+import RenderRepeatedBlock from "./render-repeated-block";
 import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
-import RenderComponent from "./render-component.js";
+import RenderComponent from "./render-component";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 export default function RenderBlock(props) {
     const [component, setComponent] = useState(() => getComponent({

package/dist/react/components/render-block/render-component.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import BlockStyles from "./block-styles.js";
-import RenderBlock from "./render-block.js";
+import BlockStyles from "./block-styles";
+import RenderBlock from "./render-block";
 export default function RenderComponent(props) {
     const ComponentRefRef = props.componentRef;
     return (React.createElement(React.Fragment, null, props.componentRef ? (React.createElement(React.Fragment, null,

package/dist/react/components/render-block/render-repeated-block.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../../context/builder.context.js";
-import RenderBlock from "./render-block.js";
+import RenderBlock from "./render-block";
 export default function RenderRepeatedBlock(props) {
     return (React.createElement(BuilderContext.Provider, { value: {
             content: props.repeatContext.content,

package/dist/react/components/render-blocks.js

@@ -2,8 +2,8 @@ import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../context/builder.context.js";
 import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles.js";
-import RenderBlock from "./render-block/render-block.js";
+import BlockStyles from "./render-block/block-styles";
+import RenderBlock from "./render-block/render-block";
 export default function RenderBlocks(props) {
     function className() {
         return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");

package/dist/react/components/render-content/components/render-styles.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import RenderInlinedStyles from "../../render-inlined-styles.js";
+import RenderInlinedStyles from "../../render-inlined-styles";
 export default function RenderContentStyles(props) {
     function getCssFromFont(font) {
         // TODO: compute what font sizes are used and only load those.......

package/dist/react/components/render-content/index.js

@@ -1,2 +1,2 @@
-import { default as default2 } from "./render-content.js";
+import { default as default2 } from "./render-content";
 export { default2 as default };

package/dist/react/components/render-content/render-content.js

@@ -10,8 +10,8 @@ import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
 import { components, createRegisterComponentMessage, } from "../../functions/register-component.js";
 import { _track } from "../../functions/track/index.js";
-import RenderBlocks from "../render-blocks.js";
-import RenderContentStyles from "./components/render-styles.js";
+import RenderBlocks from "../render-blocks";
+import RenderContentStyles from "./components/render-styles";
 import builderContext from "../../context/builder.context.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
 import { checkIsDefined } from "../../helpers/nullable.js";

package/dist/react/components/render-inlined-styles.js

@@ -10,6 +10,6 @@ export default function RenderInlinedStyles(props) {
         return "sty" + "le";
     }
     const TagRef = tag();
-    return (React.createElement(React.Fragment, null, TARGET === "svelte" ? (React.createElement(React.Fragment, null,
-        React.createElement("div", { dangerouslySetInnerHTML: { __html: injectedStyleScript() } }))) : (React.createElement(TagRef, null, props.styles))));
+    return (React.createElement(React.Fragment, null, TARGET === "svelte" || TARGET === "qwik" ? (React.createElement(React.Fragment, null,
+        React.createElement(TagRef, { dangerouslySetInnerHTML: { __html: props.styles } }))) : (React.createElement(TagRef, null, props.styles))));
 }

package/dist/react/constants/builder-registered-components.js

@@ -14,27 +14,27 @@ var __spreadValues = (a, b) => {
         }
     return a;
 };
-import { default as Button } from "../blocks/button/button.js";
+import { default as Button } from "../blocks/button/button";
 import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info.js";
-import { default as Columns } from "../blocks/columns/columns.js";
+import { default as Columns } from "../blocks/columns/columns";
 import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info.js";
 import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info.js";
-import { default as Fragment } from "../blocks/fragment/fragment.js";
+import { default as Fragment } from "../blocks/fragment/fragment";
 import { componentInfo as imageComponentInfo } from "../blocks/image/component-info.js";
-import { default as Image } from "../blocks/image/image.js";
+import { default as Image } from "../blocks/image/image";
 import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info.js";
-import { default as Section } from "../blocks/section/section.js";
+import { default as Section } from "../blocks/section/section";
 import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info.js";
-import { default as Symbol } from "../blocks/symbol/symbol.js";
+import { default as Symbol } from "../blocks/symbol/symbol";
 import { componentInfo as textComponentInfo } from "../blocks/text/component-info.js";
-import { default as Text } from "../blocks/text/text.js";
+import { default as Text } from "../blocks/text/text";
 import { componentInfo as videoComponentInfo } from "../blocks/video/component-info.js";
-import { default as Video } from "../blocks/video/video.js";
+import { default as Video } from "../blocks/video/video";
 import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info.js";
-import { default as embed } from "../blocks/embed/embed.js";
-import { default as Img } from "../blocks/img/img.js";
+import { default as embed } from "../blocks/embed/embed";
+import { default as Img } from "../blocks/img/img";
 import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.js";
-import { default as customCode } from "../blocks/custom-code/custom-code.js";
+import { default as customCode } from "../blocks/custom-code/custom-code";
 import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
 const getDefaultRegisteredComponents = () => [
     __spreadValues({ component: Columns }, columnsComponentInfo),

package/dist/react/index-helpers/blocks-exports.js

@@ -1,11 +1,11 @@
-import { default as default2 } from "../blocks/columns/columns.js";
-import { default as default3 } from "../blocks/image/image.js";
-import { default as default4 } from "../blocks/text/text.js";
-import { default as default5 } from "../blocks/video/video.js";
-import { default as default6 } from "../blocks/symbol/symbol.js";
-import { default as default7 } from "../blocks/button/button.js";
-import { default as default8 } from "../blocks/section/section.js";
-import { default as default9 } from "../blocks/fragment/fragment.js";
-import { default as default10 } from "../components/render-content/render-content.js";
-import { default as default11 } from "../components/render-blocks.js";
+import { default as default2 } from "../blocks/columns/columns";
+import { default as default3 } from "../blocks/image/image";
+import { default as default4 } from "../blocks/text/text";
+import { default as default5 } from "../blocks/video/video";
+import { default as default6 } from "../blocks/symbol/symbol";
+import { default as default7 } from "../blocks/button/button";
+import { default as default8 } from "../blocks/section/section";
+import { default as default9 } from "../blocks/fragment/fragment";
+import { default as default10 } from "../components/render-content/render-content";
+import { default as default11 } from "../components/render-blocks";
 export { default7 as Button, default2 as Columns, default9 as Fragment, default3 as Image, default11 as RenderBlocks, default10 as RenderContent, default8 as Section, default6 as Symbol, default4 as Text, default5 as Video };

package/dist/rsc/blocks/columns/columns.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import RenderBlocks from "../../components/render-blocks.js";
+import RenderBlocks from "../../components/render-blocks";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles.js";
+import RenderInlinedStyles from "../../components/render-inlined-styles";
 import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
 export default function Columns(props) {

package/dist/rsc/blocks/form/form.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import RenderBlock from "../../components/render-block/render-block.js";
-import BuilderBlocks from "../../components/render-blocks.js";
+import RenderBlock from "../../components/render-block/render-block";
+import BuilderBlocks from "../../components/render-blocks";
 import { isEditing } from "../../functions/is-editing.js";
 export default function FormComponent(props) {
     const _context = { ...props["_context"] };

package/dist/rsc/blocks/symbol/symbol.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import RenderContent from "../../components/render-content/render-content.js";
+import RenderContent from "../../components/render-content/render-content";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";

package/dist/rsc/components/render-block/block-styles.js

@@ -3,7 +3,7 @@ import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../constant
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
-import RenderInlinedStyles from "../render-inlined-styles.js";
+import RenderInlinedStyles from "../render-inlined-styles";
 export default function BlockStyles(props) {
     const _context = { ...props["_context"] };
     const state = {

package/dist/rsc/components/render-block/render-block.js

@@ -4,12 +4,12 @@ import { getBlockComponentOptions } from "../../functions/get-block-component-op
 import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./block-styles.js";
+import BlockStyles from "./block-styles";
 import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
-import RenderRepeatedBlock from "./render-repeated-block.js";
+import RenderRepeatedBlock from "./render-repeated-block";
 import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
-import RenderComponent from "./render-component.js";
+import RenderComponent from "./render-component";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 export default function RenderBlock(props) {
     const _context = { ...props["_context"] };

package/dist/rsc/components/render-block/render-component.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import BlockStyles from "./block-styles.js";
-import RenderBlock from "./render-block.js";
+import BlockStyles from "./block-styles";
+import RenderBlock from "./render-block";
 export default function RenderComponent(props) {
     const _context = { ...props["_context"] };
     const ComponentRefRef = props.componentRef;

package/dist/rsc/components/render-block/render-repeated-block.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import BuilderContext from "../../context/builder.context.js";
-import RenderBlock from "./render-block.js";
+import RenderBlock from "./render-block";
 export default function RenderRepeatedBlock(props) {
     const _context = { ...props["_context"] };
     _context.BuilderContext = {

package/dist/rsc/components/render-blocks.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import BuilderContext from "../context/builder.context.js";
 import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles.js";
-import RenderBlock from "./render-block/render-block.js";
+import BlockStyles from "./render-block/block-styles";
+import RenderBlock from "./render-block/render-block";
 export default function RenderBlocks(props) {
     const _context = { ...props["_context"] };
     const state = {

package/dist/rsc/components/render-content/components/render-styles.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import RenderInlinedStyles from "../../render-inlined-styles.js";
+import RenderInlinedStyles from "../../render-inlined-styles";
 export default function RenderContentStyles(props) {
     const _context = { ...props["_context"] };
     const state = {

package/dist/rsc/components/render-content/index.js

@@ -1,2 +1,2 @@
-import { default as default2 } from "./render-content.js";
+import { default as default2 } from "./render-content";
 export { default2 as default };

package/dist/rsc/components/render-content/render-content.js

@@ -9,8 +9,8 @@ import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
 import { components, createRegisterComponentMessage, } from "../../functions/register-component.js";
 import { _track } from "../../functions/track/index.js";
-import RenderBlocks from "../render-blocks.js";
-import RenderContentStyles from "./components/render-styles.js";
+import RenderBlocks from "../render-blocks";
+import RenderContentStyles from "./components/render-styles";
 import builderContext from "../../context/builder.context.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
 import { checkIsDefined } from "../../helpers/nullable.js";

package/dist/rsc/components/render-inlined-styles.js

@@ -13,6 +13,6 @@ export default function RenderInlinedStyles(props) {
         },
     };
     const TagRef = state.tag;
-    return (React.createElement(React.Fragment, null, TARGET === "svelte" ? (React.createElement(React.Fragment, null,
-        React.createElement("div", { dangerouslySetInnerHTML: { __html: state.injectedStyleScript } }))) : (React.createElement(TagRef, null, props.styles))));
+    return (React.createElement(React.Fragment, null, TARGET === "svelte" || TARGET === "qwik" ? (React.createElement(React.Fragment, null,
+        React.createElement(TagRef, { dangerouslySetInnerHTML: { __html: props.styles } }))) : (React.createElement(TagRef, null, props.styles))));
 }

package/dist/rsc/constants/builder-registered-components.js

@@ -14,27 +14,27 @@ var __spreadValues = (a, b) => {
         }
     return a;
 };
-import { default as Button } from "../blocks/button/button.js";
+import { default as Button } from "../blocks/button/button";
 import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info.js";
-import { default as Columns } from "../blocks/columns/columns.js";
+import { default as Columns } from "../blocks/columns/columns";
 import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info.js";
 import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info.js";
-import { default as Fragment } from "../blocks/fragment/fragment.js";
+import { default as Fragment } from "../blocks/fragment/fragment";
 import { componentInfo as imageComponentInfo } from "../blocks/image/component-info.js";
-import { default as Image } from "../blocks/image/image.js";
+import { default as Image } from "../blocks/image/image";
 import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info.js";
-import { default as Section } from "../blocks/section/section.js";
+import { default as Section } from "../blocks/section/section";
 import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info.js";
-import { default as Symbol } from "../blocks/symbol/symbol.js";
+import { default as Symbol } from "../blocks/symbol/symbol";
 import { componentInfo as textComponentInfo } from "../blocks/text/component-info.js";
-import { default as Text } from "../blocks/text/text.js";
+import { default as Text } from "../blocks/text/text";
 import { componentInfo as videoComponentInfo } from "../blocks/video/component-info.js";
-import { default as Video } from "../blocks/video/video.js";
+import { default as Video } from "../blocks/video/video";
 import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info.js";
-import { default as embed } from "../blocks/embed/embed.js";
-import { default as Img } from "../blocks/img/img.js";
+import { default as embed } from "../blocks/embed/embed";
+import { default as Img } from "../blocks/img/img";
 import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.js";
-import { default as customCode } from "../blocks/custom-code/custom-code.js";
+import { default as customCode } from "../blocks/custom-code/custom-code";
 import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
 const getDefaultRegisteredComponents = () => [
     __spreadValues({ component: Columns }, columnsComponentInfo),

package/dist/rsc/index-helpers/blocks-exports.js

@@ -1,11 +1,11 @@
-import { default as default2 } from "../blocks/columns/columns.js";
-import { default as default3 } from "../blocks/image/image.js";
-import { default as default4 } from "../blocks/text/text.js";
-import { default as default5 } from "../blocks/video/video.js";
-import { default as default6 } from "../blocks/symbol/symbol.js";
-import { default as default7 } from "../blocks/button/button.js";
-import { default as default8 } from "../blocks/section/section.js";
-import { default as default9 } from "../blocks/fragment/fragment.js";
-import { default as default10 } from "../components/render-content/render-content.js";
-import { default as default11 } from "../components/render-blocks.js";
+import { default as default2 } from "../blocks/columns/columns";
+import { default as default3 } from "../blocks/image/image";
+import { default as default4 } from "../blocks/text/text";
+import { default as default5 } from "../blocks/video/video";
+import { default as default6 } from "../blocks/symbol/symbol";
+import { default as default7 } from "../blocks/button/button";
+import { default as default8 } from "../blocks/section/section";
+import { default as default9 } from "../blocks/fragment/fragment";
+import { default as default10 } from "../components/render-content/render-content";
+import { default as default11 } from "../components/render-blocks";
 export { default7 as Button, default2 as Columns, default9 as Fragment, default3 as Image, default11 as RenderBlocks, default10 as RenderContent, default8 as Section, default6 as Symbol, default4 as Text, default5 as Video };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "src/index.js",
   "type": "module",
   "exports": {

package/packages/react/src/blocks/columns/columns.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import RenderBlocks from "../../components/render-blocks.js";
+import RenderBlocks from "../../components/render-blocks";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles.js";
+import RenderInlinedStyles from "../../components/render-inlined-styles";
 import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
 

package/packages/react/src/blocks/form/form.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState, useContext, useRef } from "react";
-import RenderBlock from "../../components/render-block/render-block.js";
-import BuilderBlocks from "../../components/render-blocks.js";
+import RenderBlock from "../../components/render-block/render-block";
+import BuilderBlocks from "../../components/render-blocks";
 import { isEditing } from "../../functions/is-editing.js";
 
 export default function FormComponent(props) {

package/packages/react/src/blocks/symbol/symbol.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useState, useContext, useEffect } from "react";
-import RenderContent from "../../components/render-content/render-content.js";
+import RenderContent from "../../components/render-content/render-content";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";

package/packages/react/src/components/render-block/block-styles.jsx

@@ -6,7 +6,7 @@ import {
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
-import RenderInlinedStyles from "../render-inlined-styles.js";
+import RenderInlinedStyles from "../render-inlined-styles";
 
 export default function BlockStyles(props) {
   function useBlock() {

package/packages/react/src/components/render-block/render-block.jsx

@@ -5,16 +5,16 @@ import { getBlockComponentOptions } from "../../functions/get-block-component-op
 import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./block-styles.js";
+import BlockStyles from "./block-styles";
 import {
   getComponent,
   getRepeatItemData,
   isEmptyHtmlElement,
 } from "./render-block.helpers.js";
-import RenderRepeatedBlock from "./render-repeated-block.js";
+import RenderRepeatedBlock from "./render-repeated-block";
 import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
-import RenderComponent from "./render-component.js";
+import RenderComponent from "./render-component";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 
 export default function RenderBlock(props) {

package/packages/react/src/components/render-block/render-component.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import BlockStyles from "./block-styles.js";
-import RenderBlock from "./render-block.js";
+import BlockStyles from "./block-styles";
+import RenderBlock from "./render-block";
 
 export default function RenderComponent(props) {
   const ComponentRefRef = props.componentRef;

package/packages/react/src/components/render-block/render-repeated-block.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../../context/builder.context.js";
-import RenderBlock from "./render-block.js";
+import RenderBlock from "./render-block";
 
 export default function RenderRepeatedBlock(props) {
   return (

package/packages/react/src/components/render-blocks.jsx

@@ -2,8 +2,8 @@ import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../context/builder.context.js";
 import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles.js";
-import RenderBlock from "./render-block/render-block.js";
+import BlockStyles from "./render-block/block-styles";
+import RenderBlock from "./render-block/render-block";
 
 export default function RenderBlocks(props) {
   function className() {

package/packages/react/src/components/render-content/components/render-styles.jsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import RenderInlinedStyles from "../../render-inlined-styles.js";
+import RenderInlinedStyles from "../../render-inlined-styles";
 
 export default function RenderContentStyles(props) {
   function getCssFromFont(font) {

package/packages/react/src/components/render-content/index.js

@@ -1,4 +1,4 @@
-import { default as default2 } from "./render-content.js";
+import { default as default2 } from "./render-content";
 export {
   default2 as default
 };

package/packages/react/src/components/render-content/render-content.jsx

@@ -13,8 +13,8 @@ import {
   createRegisterComponentMessage,
 } from "../../functions/register-component.js";
 import { _track } from "../../functions/track/index.js";
-import RenderBlocks from "../render-blocks.js";
-import RenderContentStyles from "./components/render-styles.js";
+import RenderBlocks from "../render-blocks";
+import RenderContentStyles from "./components/render-styles";
 import builderContext from "../../context/builder.context.js";
 import {
   registerInsertMenu,

package/packages/react/src/components/render-inlined-styles.jsx

@@ -16,9 +16,9 @@ export default function RenderInlinedStyles(props) {
 
   return (
     <>
-      {TARGET === "svelte" ? (
+      {TARGET === "svelte" || TARGET === "qwik" ? (
         <>
-          <div dangerouslySetInnerHTML={{ __html: injectedStyleScript() }} />
+          <TagRef dangerouslySetInnerHTML={{ __html: props.styles }} />
         </>
       ) : (
         <TagRef>{props.styles}</TagRef>

package/packages/react/src/constants/builder-registered-components.js

@@ -14,27 +14,27 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { default as Button } from "../blocks/button/button.js";
+import { default as Button } from "../blocks/button/button";
 import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info.js";
-import { default as Columns } from "../blocks/columns/columns.js";
+import { default as Columns } from "../blocks/columns/columns";
 import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info.js";
 import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info.js";
-import { default as Fragment } from "../blocks/fragment/fragment.js";
+import { default as Fragment } from "../blocks/fragment/fragment";
 import { componentInfo as imageComponentInfo } from "../blocks/image/component-info.js";
-import { default as Image } from "../blocks/image/image.js";
+import { default as Image } from "../blocks/image/image";
 import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info.js";
-import { default as Section } from "../blocks/section/section.js";
+import { default as Section } from "../blocks/section/section";
 import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info.js";
-import { default as Symbol } from "../blocks/symbol/symbol.js";
+import { default as Symbol } from "../blocks/symbol/symbol";
 import { componentInfo as textComponentInfo } from "../blocks/text/component-info.js";
-import { default as Text } from "../blocks/text/text.js";
+import { default as Text } from "../blocks/text/text";
 import { componentInfo as videoComponentInfo } from "../blocks/video/component-info.js";
-import { default as Video } from "../blocks/video/video.js";
+import { default as Video } from "../blocks/video/video";
 import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info.js";
-import { default as embed } from "../blocks/embed/embed.js";
-import { default as Img } from "../blocks/img/img.js";
+import { default as embed } from "../blocks/embed/embed";
+import { default as Img } from "../blocks/img/img";
 import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.js";
-import { default as customCode } from "../blocks/custom-code/custom-code.js";
+import { default as customCode } from "../blocks/custom-code/custom-code";
 import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
 const getDefaultRegisteredComponents = () => [
   __spreadValues({ component: Columns }, columnsComponentInfo),

package/packages/react/src/index-helpers/blocks-exports.js

@@ -1,13 +1,13 @@
-import { default as default2 } from "../blocks/columns/columns.js";
-import { default as default3 } from "../blocks/image/image.js";
-import { default as default4 } from "../blocks/text/text.js";
-import { default as default5 } from "../blocks/video/video.js";
-import { default as default6 } from "../blocks/symbol/symbol.js";
-import { default as default7 } from "../blocks/button/button.js";
-import { default as default8 } from "../blocks/section/section.js";
-import { default as default9 } from "../blocks/fragment/fragment.js";
-import { default as default10 } from "../components/render-content/render-content.js";
-import { default as default11 } from "../components/render-blocks.js";
+import { default as default2 } from "../blocks/columns/columns";
+import { default as default3 } from "../blocks/image/image";
+import { default as default4 } from "../blocks/text/text";
+import { default as default5 } from "../blocks/video/video";
+import { default as default6 } from "../blocks/symbol/symbol";
+import { default as default7 } from "../blocks/button/button";
+import { default as default8 } from "../blocks/section/section";
+import { default as default9 } from "../blocks/fragment/fragment";
+import { default as default10 } from "../components/render-content/render-content";
+import { default as default11 } from "../components/render-blocks";
 export {
   default7 as Button,
   default2 as Columns,

package/packages/rsc/src/blocks/columns/columns.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import RenderBlocks from "../../components/render-blocks.js";
+import RenderBlocks from "../../components/render-blocks";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles.js";
+import RenderInlinedStyles from "../../components/render-inlined-styles";
 import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
 

package/packages/rsc/src/blocks/form/form.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import RenderBlock from "../../components/render-block/render-block.js";
-import BuilderBlocks from "../../components/render-blocks.js";
+import RenderBlock from "../../components/render-block/render-block";
+import BuilderBlocks from "../../components/render-blocks";
 import { isEditing } from "../../functions/is-editing.js";
 
 export default function FormComponent(props) {

package/packages/rsc/src/blocks/symbol/symbol.jsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import RenderContent from "../../components/render-content/render-content.js";
+import RenderContent from "../../components/render-content/render-content";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";

package/packages/rsc/src/components/render-block/block-styles.jsx

@@ -6,7 +6,7 @@ import {
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
-import RenderInlinedStyles from "../render-inlined-styles.js";
+import RenderInlinedStyles from "../render-inlined-styles";
 
 export default function BlockStyles(props) {
   const _context = { ...props["_context"] };

package/packages/rsc/src/components/render-block/render-block.jsx

@@ -4,16 +4,16 @@ import { getBlockComponentOptions } from "../../functions/get-block-component-op
 import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./block-styles.js";
+import BlockStyles from "./block-styles";
 import {
   getComponent,
   getRepeatItemData,
   isEmptyHtmlElement,
 } from "./render-block.helpers.js";
-import RenderRepeatedBlock from "./render-repeated-block.js";
+import RenderRepeatedBlock from "./render-repeated-block";
 import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
-import RenderComponent from "./render-component.js";
+import RenderComponent from "./render-component";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 
 export default function RenderBlock(props) {

package/packages/rsc/src/components/render-block/render-component.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import BlockStyles from "./block-styles.js";
-import RenderBlock from "./render-block.js";
+import BlockStyles from "./block-styles";
+import RenderBlock from "./render-block";
 
 export default function RenderComponent(props) {
   const _context = { ...props["_context"] };

package/packages/rsc/src/components/render-block/render-repeated-block.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import BuilderContext from "../../context/builder.context.js";
-import RenderBlock from "./render-block.js";
+import RenderBlock from "./render-block";
 
 export default function RenderRepeatedBlock(props) {
   const _context = { ...props["_context"] };

package/packages/rsc/src/components/render-blocks.jsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import BuilderContext from "../context/builder.context.js";
 import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles.js";
-import RenderBlock from "./render-block/render-block.js";
+import BlockStyles from "./render-block/block-styles";
+import RenderBlock from "./render-block/render-block";
 
 export default function RenderBlocks(props) {
   const _context = { ...props["_context"] };

package/packages/rsc/src/components/render-content/components/render-styles.jsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import RenderInlinedStyles from "../../render-inlined-styles.js";
+import RenderInlinedStyles from "../../render-inlined-styles";
 
 export default function RenderContentStyles(props) {
   const _context = { ...props["_context"] };

package/packages/rsc/src/components/render-content/index.js

@@ -1,4 +1,4 @@
-import { default as default2 } from "./render-content.js";
+import { default as default2 } from "./render-content";
 export {
   default2 as default
 };

package/packages/rsc/src/components/render-content/render-content.jsx

@@ -12,8 +12,8 @@ import {
   createRegisterComponentMessage,
 } from "../../functions/register-component.js";
 import { _track } from "../../functions/track/index.js";
-import RenderBlocks from "../render-blocks.js";
-import RenderContentStyles from "./components/render-styles.js";
+import RenderBlocks from "../render-blocks";
+import RenderContentStyles from "./components/render-styles";
 import builderContext from "../../context/builder.context.js";
 import {
   registerInsertMenu,

package/packages/rsc/src/components/render-inlined-styles.jsx

@@ -19,11 +19,9 @@ export default function RenderInlinedStyles(props) {
 
   return (
     <>
-      {TARGET === "svelte" ? (
+      {TARGET === "svelte" || TARGET === "qwik" ? (
         <>
-          <div
-            dangerouslySetInnerHTML={{ __html: state.injectedStyleScript }}
-          />
+          <TagRef dangerouslySetInnerHTML={{ __html: props.styles }} />
         </>
       ) : (
         <TagRef>{props.styles}</TagRef>

package/packages/rsc/src/constants/builder-registered-components.js

@@ -14,27 +14,27 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { default as Button } from "../blocks/button/button.js";
+import { default as Button } from "../blocks/button/button";
 import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info.js";
-import { default as Columns } from "../blocks/columns/columns.js";
+import { default as Columns } from "../blocks/columns/columns";
 import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info.js";
 import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info.js";
-import { default as Fragment } from "../blocks/fragment/fragment.js";
+import { default as Fragment } from "../blocks/fragment/fragment";
 import { componentInfo as imageComponentInfo } from "../blocks/image/component-info.js";
-import { default as Image } from "../blocks/image/image.js";
+import { default as Image } from "../blocks/image/image";
 import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info.js";
-import { default as Section } from "../blocks/section/section.js";
+import { default as Section } from "../blocks/section/section";
 import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info.js";
-import { default as Symbol } from "../blocks/symbol/symbol.js";
+import { default as Symbol } from "../blocks/symbol/symbol";
 import { componentInfo as textComponentInfo } from "../blocks/text/component-info.js";
-import { default as Text } from "../blocks/text/text.js";
+import { default as Text } from "../blocks/text/text";
 import { componentInfo as videoComponentInfo } from "../blocks/video/component-info.js";
-import { default as Video } from "../blocks/video/video.js";
+import { default as Video } from "../blocks/video/video";
 import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info.js";
-import { default as embed } from "../blocks/embed/embed.js";
-import { default as Img } from "../blocks/img/img.js";
+import { default as embed } from "../blocks/embed/embed";
+import { default as Img } from "../blocks/img/img";
 import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.js";
-import { default as customCode } from "../blocks/custom-code/custom-code.js";
+import { default as customCode } from "../blocks/custom-code/custom-code";
 import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
 const getDefaultRegisteredComponents = () => [
   __spreadValues({ component: Columns }, columnsComponentInfo),

package/packages/rsc/src/index-helpers/blocks-exports.js

@@ -1,13 +1,13 @@
-import { default as default2 } from "../blocks/columns/columns.js";
-import { default as default3 } from "../blocks/image/image.js";
-import { default as default4 } from "../blocks/text/text.js";
-import { default as default5 } from "../blocks/video/video.js";
-import { default as default6 } from "../blocks/symbol/symbol.js";
-import { default as default7 } from "../blocks/button/button.js";
-import { default as default8 } from "../blocks/section/section.js";
-import { default as default9 } from "../blocks/fragment/fragment.js";
-import { default as default10 } from "../components/render-content/render-content.js";
-import { default as default11 } from "../components/render-blocks.js";
+import { default as default2 } from "../blocks/columns/columns";
+import { default as default3 } from "../blocks/image/image";
+import { default as default4 } from "../blocks/text/text";
+import { default as default5 } from "../blocks/video/video";
+import { default as default6 } from "../blocks/symbol/symbol";
+import { default as default7 } from "../blocks/button/button";
+import { default as default8 } from "../blocks/section/section";
+import { default as default9 } from "../blocks/fragment/fragment";
+import { default as default10 } from "../components/render-content/render-content";
+import { default as default11 } from "../components/render-blocks";
 export {
   default7 as Button,
   default2 as Columns,