@builder.io/sdk-solid 0.12.2 → 0.12.4

package/lib/browser/dev.jsx

@@ -1,33 +1,81 @@
-// src/blocks/button/button.tsx
+// src/components/dynamic-renderer/dynamic-renderer.tsx
 import { Show } from "solid-js";
-import { css } from "solid-styled-components";
-function Button(props) {
+import { Dynamic } from "solid-js/web";
+
+// src/components/dynamic-renderer/dynamic-renderer.helpers.ts
+var EMPTY_HTML_ELEMENTS = /* @__PURE__ */ new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]);
+var isEmptyElement = (tagName) => {
+  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.has(tagName.toLowerCase());
+};
+
+// src/components/dynamic-renderer/dynamic-renderer.tsx
+function DynamicRenderer(props) {
   return <Show
-    fallback={<button
-      class={props.attributes.class + " " + css({
-        all: "unset"
-      })}
-      {...{}}
+    fallback={<Dynamic
       {...props.attributes}
-      style={props.attributes.style}
-    >{props.text}</button>}
-    when={props.link}
-  ><a
-    {...{}}
+      {...props.actionAttributes}
+      component={props.TagName}
+    />}
+    when={!isEmptyElement(props.TagName)}
+  ><Show
+    fallback={<Dynamic
+      {...props.attributes}
+      {...props.actionAttributes}
+      component={props.TagName}
+    >{props.children}</Dynamic>}
+    when={typeof props.TagName === "string"}
+  ><Dynamic
     {...props.attributes}
-    href={props.link}
-    target={props.openLinkInNewTab ? "_blank" : void 0}
-    role="button"
-  >{props.text}</a></Show>;
+    {...props.actionAttributes}
+    component={props.TagName}
+  >{props.children}</Dynamic></Show></Show>;
+}
+var Dynamic_renderer_default = DynamicRenderer;
+
+// src/constants/target.ts
+var TARGET = "solid";
+
+// src/functions/get-class-prop-name.ts
+var getClassPropName = () => {
+  switch (TARGET) {
+    case "react":
+    case "reactNative":
+    case "rsc":
+      return "className";
+    case "svelte":
+    case "vue":
+    case "solid":
+    case "qwik":
+      return "class";
+  }
+};
+
+// src/blocks/button/button.tsx
+function Button(props) {
+  return <Dynamic_renderer_default
+    TagName={props.link ? props.builderLinkComponent || "a" : "button"}
+    attributes={{
+      ...props.attributes,
+      [getClassPropName()]: `${props.link ? "" : "builder-button"} ${props.attributes[getClassPropName()] || ""}`,
+      ...props.link ? {
+        href: props.link,
+        target: props.openLinkInNewTab ? "_blank" : void 0,
+        role: "link"
+      } : {
+        role: "button"
+      }
+    }}
+    actionAttributes={{}}
+  >{props.text}</Dynamic_renderer_default>;
 }
 var button_default = Button;
 
 // src/blocks/columns/columns.tsx
-import { Show as Show7, For as For4, createSignal as createSignal5 } from "solid-js";
-import { css as css3 } from "solid-styled-components";
+import { Show as Show6, For as For4, createSignal as createSignal5 } from "solid-js";
+import { css as css2 } from "solid-styled-components";
 
 // src/components/blocks/blocks.tsx
-import { useContext, Show as Show6, For as For3 } from "solid-js";
+import { useContext, Show as Show5, For as For3 } from "solid-js";
 
 // src/context/builder.context.ts
 import { createContext } from "solid-js";
@@ -51,7 +99,7 @@ import { createContext as createContext2 } from "solid-js";
 var components_context_default = createContext2({ registeredComponents: {} });
 
 // src/components/block/block.tsx
-import { Show as Show5, For as For2, createSignal as createSignal4 } from "solid-js";
+import { Show as Show4, For as For2, createSignal as createSignal4 } from "solid-js";
 
 // src/functions/get-block-component-options.ts
 function getBlockComponentOptions(block) {
@@ -79,9 +127,6 @@ function isBrowser() {
   return typeof window !== "undefined" && typeof document !== "undefined";
 }
 
-// src/constants/target.ts
-var TARGET = "solid";
-
 // src/functions/is-iframe.ts
 function isIframe() {
   return isBrowser() && window.self !== window.top;
@@ -502,7 +547,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css5() {
+  function css4() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -545,7 +590,7 @@ function BlockStyles(props) {
     }) : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
   }
-  return <Show2 when={TARGET !== "reactNative" && css5() && canShowBlock()}><Inlined_styles_default styles={css5()} /></Show2>;
+  return <Show2 when={TARGET !== "reactNative" && css4() && canShowBlock()}><Inlined_styles_default styles={css4()} /></Show2>;
 }
 var Block_styles_default = BlockStyles;
 
@@ -591,6 +636,38 @@ function getBlockActions(options) {
   return obj;
 }
 
+// src/functions/transform-style-property.ts
+function transformStyleProperty({
+  style
+}) {
+  return style;
+}
+
+// src/functions/get-style.ts
+var getStyle = ({
+  block,
+  context
+}) => {
+  return mapStyleObjToStrIfNeeded(transformStyleProperty({
+    style: block.style || {},
+    context,
+    block
+  }));
+};
+function mapStyleObjToStrIfNeeded(style) {
+  switch (TARGET) {
+    case "svelte":
+    case "vue":
+    case "solid":
+      return convertStyleMapToCSSArray(style).join(" ");
+    case "qwik":
+    case "reactNative":
+    case "react":
+    case "rsc":
+      return style;
+  }
+}
+
 // src/functions/transform-block-properties.ts
 function transformBlockProperties({
   properties
@@ -612,8 +689,11 @@ function getBlockProperties({
     ...extractRelevantRootBlockProperties(block),
     ...block.properties,
     "builder-id": block.id,
-    style: block.style ? getStyleAttribute(block.style) : void 0,
-    class: [block.id, "builder-block", block.class, block.properties?.class].filter(Boolean).join(" ")
+    style: getStyle({
+      block,
+      context
+    }),
+    [getClassPropName()]: [block.id, "builder-block", block.class, block.properties?.class].filter(Boolean).join(" ")
   };
   return transformBlockProperties({
     properties,
@@ -621,53 +701,6 @@ function getBlockProperties({
     block
   });
 }
-function getStyleAttribute(style) {
-  switch (TARGET) {
-    case "svelte":
-    case "vue":
-    case "solid":
-      return convertStyleMapToCSSArray(style).join(" ");
-    case "qwik":
-    case "reactNative":
-    case "react":
-    case "rsc":
-      return style;
-  }
-}
-
-// src/components/dynamic-renderer/dynamic-renderer.tsx
-import { Show as Show3 } from "solid-js";
-import { Dynamic } from "solid-js/web";
-
-// src/components/dynamic-renderer/dynamic-renderer.helpers.ts
-var EMPTY_HTML_ELEMENTS = /* @__PURE__ */ new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]);
-var isEmptyElement = (tagName) => {
-  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.has(tagName.toLowerCase());
-};
-
-// src/components/dynamic-renderer/dynamic-renderer.tsx
-function DynamicRenderer(props) {
-  return <Show3
-    fallback={<Dynamic
-      {...props.attributes}
-      {...props.actionAttributes}
-      component={props.TagName}
-    />}
-    when={!isEmptyElement(props.TagName)}
-  ><Show3
-    fallback={<Dynamic
-      {...props.attributes}
-      {...props.actionAttributes}
-      component={props.TagName}
-    >{props.children}</Dynamic>}
-    when={typeof props.TagName === "string"}
-  ><Dynamic
-    {...props.attributes}
-    {...props.actionAttributes}
-    component={props.TagName}
-  >{props.children}</Dynamic></Show3></Show3>;
-}
-var Dynamic_renderer_default = DynamicRenderer;
 
 // src/components/block/components/block-wrapper.tsx
 function BlockWrapper(props) {
@@ -690,7 +723,7 @@ function BlockWrapper(props) {
 var Block_wrapper_default = BlockWrapper;
 
 // src/components/block/components/component-ref/component-ref.tsx
-import { Show as Show4, For, createSignal as createSignal2 } from "solid-js";
+import { Show as Show3, For, createSignal as createSignal2 } from "solid-js";
 import { Dynamic as Dynamic3 } from "solid-js/web";
 
 // src/components/block/components/interactive-element.tsx
@@ -754,12 +787,13 @@ function ComponentRef(props) {
   const [Wrapper, setWrapper] = createSignal2(
     props.isInteractive ? interactive_element_default : props.componentRef
   );
-  return <Show4 when={props.componentRef}><Dynamic3
+  return <Show3 when={props.componentRef}><Dynamic3
     {...getWrapperProps({
       componentOptions: props.componentOptions,
       builderBlock: props.builderBlock,
       context: props.context,
       componentRef: props.componentRef,
+      linkComponent: props.linkComponent,
       includeBlockProps: props.includeBlockProps,
       isInteractive: props.isInteractive,
       contextValue: props.context
@@ -772,8 +806,9 @@ function ComponentRef(props) {
       block={child}
       context={props.context}
       registeredComponents={props.registeredComponents}
+      linkComponent={props.linkComponent}
     />;
-  }}</For></Dynamic3></Show4>;
+  }}</For></Dynamic3></Show3>;
 }
 var Component_ref_default = ComponentRef;
 
@@ -785,6 +820,7 @@ function RepeatedBlock(props) {
     block={props.block}
     context={store()}
     registeredComponents={props.registeredComponents}
+    linkComponent={props.linkComponent}
   /></builder_context_default.Provider>;
 }
 var Repeated_block_default = RepeatedBlock;
@@ -816,6 +852,10 @@ function Block(props) {
     });
   }
   function Tag() {
+    const shouldUseLink = props.block.tagName === "a" || processedBlock().properties?.href || processedBlock().href;
+    if (shouldUseLink) {
+      return props.linkComponent || "a";
+    }
     return props.block.tagName || "div";
   }
   function canShowBlock() {
@@ -839,32 +879,37 @@ function Block(props) {
       componentOptions: {
         ...getBlockComponentOptions(processedBlock()),
         builderContext: props.context,
+        ...blockComponent()?.name === "Core:Button" || blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" ? {
+          builderLinkComponent: props.linkComponent
+        } : {},
         ...blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" ? {
           builderComponents: props.registeredComponents
         } : {}
       },
       context: childrenContext(),
+      linkComponent: props.linkComponent,
       registeredComponents: props.registeredComponents,
       builderBlock: processedBlock(),
       includeBlockProps: blockComponent()?.noWrap === true,
       isInteractive: !blockComponent()?.isRSC
     };
   }
-  return <Show5 when={canShowBlock()}>
+  return <Show4 when={canShowBlock()}>
     <Block_styles_default block={props.block} context={props.context} />
-    <Show5
+    <Show4
       fallback={<Component_ref_default
         componentRef={componentRefProps().componentRef}
         componentOptions={componentRefProps().componentOptions}
         blockChildren={componentRefProps().blockChildren}
         context={componentRefProps().context}
         registeredComponents={componentRefProps().registeredComponents}
+        linkComponent={componentRefProps().linkComponent}
         builderBlock={componentRefProps().builderBlock}
         includeBlockProps={componentRefProps().includeBlockProps}
         isInteractive={componentRefProps().isInteractive}
       />}
       when={!blockComponent()?.noWrap}
-    ><Show5
+    ><Show4
       fallback={<For2 each={repeatItem()}>{(data, _index) => {
         const index = _index();
         return <Repeated_block_default
@@ -872,6 +917,7 @@ function Block(props) {
           repeatContext={data.context}
           block={data.block}
           registeredComponents={props.registeredComponents}
+          linkComponent={props.linkComponent}
         />;
       }}</For2>}
       when={!repeatItem()}
@@ -879,6 +925,7 @@ function Block(props) {
       Wrapper={Tag()}
       block={processedBlock()}
       context={props.context}
+      linkComponent={props.linkComponent}
     >
       <Component_ref_default
         componentRef={componentRefProps().componentRef}
@@ -886,6 +933,7 @@ function Block(props) {
         blockChildren={componentRefProps().blockChildren}
         context={componentRefProps().context}
         registeredComponents={componentRefProps().registeredComponents}
+        linkComponent={componentRefProps().linkComponent}
         builderBlock={componentRefProps().builderBlock}
         includeBlockProps={componentRefProps().includeBlockProps}
         isInteractive={componentRefProps().isInteractive}
@@ -897,16 +945,17 @@ function Block(props) {
           block={child}
           context={childrenContext()}
           registeredComponents={props.registeredComponents}
+          linkComponent={props.linkComponent}
         />;
       }}</For2>
-    </Block_wrapper_default></Show5></Show5>
-  </Show5>;
+    </Block_wrapper_default></Show4></Show4>
+  </Show4>;
 }
 var Block_default = Block;
 
 // src/components/blocks/blocks-wrapper.tsx
 import { Dynamic as Dynamic4 } from "solid-js/web";
-import { css as css2 } from "solid-styled-components";
+import { css } from "solid-styled-components";
 function BlocksWrapper(props) {
   function className() {
     return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
@@ -940,7 +989,7 @@ function BlocksWrapper(props) {
     }
   }
   return <Dynamic4
-    class={className() + " " + css2({
+    class={className() + " " + css({
       display: "flex",
       flexDirection: "column",
       alignItems: "stretch"
@@ -969,15 +1018,16 @@ function Blocks(props) {
     styleProp={props.styleProp}
     BlocksWrapper={props.context?.BlocksWrapper}
     BlocksWrapperProps={props.context?.BlocksWrapperProps}
-  ><Show6 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
+  ><Show5 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
     const index = _index();
     return <Block_default
       key={block.id}
       block={block}
+      linkComponent={props.linkComponent}
       context={props.context || builderContext}
       registeredComponents={props.registeredComponents || componentsContext.registeredComponents}
     />;
-  }}</For3></Show6></Blocks_wrapper_default>;
+  }}</For3></Show5></Blocks_wrapper_default>;
 }
 var Blocks_default = Blocks;
 
@@ -1026,7 +1076,13 @@ function Columns(props) {
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
     const marginLeftKey = "margin-left";
+    const sharedStyles = {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch"
+    };
     return {
+      ...sharedStyles,
       width,
       [marginLeftKey]: gutterPixels,
       "--column-width-mobile": getMobileStyle({
@@ -1081,25 +1137,28 @@ function Columns(props) {
       `;
   }
   return <div
-    class={`builder-columns ${props.builderBlock.id}-breakpoints ` + css3({
+    class={`builder-columns ${props.builderBlock.id}-breakpoints ` + css2({
       display: "flex",
       lineHeight: "normal"
     })}
     style={columnsCssVars()}
     {...{}}
   >
-    <Show7 when={TARGET !== "reactNative"}><Inlined_styles_default styles={columnsStyles()} /></Show7>
+    <Show6 when={TARGET !== "reactNative"}><Inlined_styles_default styles={columnsStyles()} /></Show6>
     <For4 each={props.columns}>{(column, _index) => {
       const index = _index();
-      return <div
-        class={"builder-column " + css3({
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "stretch"
-        })}
-        style={columnCssVars(index)}
-        {...{}}
+      return <Dynamic_renderer_default
         key={index}
+        TagName={column.link ? props.builderLinkComponent || "a" : "div"}
+        actionAttributes={{}}
+        attributes={{
+          ...{},
+          ...column.link ? {
+            href: column.link
+          } : {},
+          [getClassPropName()]: "builder-column",
+          style: mapStyleObjToStrIfNeeded(columnCssVars(index))
+        }}
       ><Blocks_default
         path={`component.options.columns.${index}.blocks`}
         parent={props.builderBlock.id}
@@ -1108,8 +1167,9 @@ function Columns(props) {
         }}
         context={props.builderContext}
         registeredComponents={props.builderComponents}
+        linkComponent={props.builderLinkComponent}
         blocks={column.blocks}
-      /></div>;
+      /></Dynamic_renderer_default>;
     }}</For4>
   </div>;
 }
@@ -1122,8 +1182,8 @@ function FragmentComponent(props) {
 var fragment_default = FragmentComponent;
 
 // src/blocks/image/image.tsx
-import { Show as Show8 } from "solid-js";
-import { css as css4 } from "solid-styled-components";
+import { Show as Show7 } from "solid-js";
+import { css as css3 } from "solid-styled-components";
 
 // src/blocks/image/image.helpers.ts
 function removeProtocol(path) {
@@ -1212,9 +1272,9 @@ function Image(props) {
   }
   return <>
     <picture>
-      <Show8 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show8>
+      <Show7 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show7>
       <img
-        class={"builder-image" + (props.className ? " " + props.className : "") + " " + css4({
+        class={"builder-image" + (props.className ? " " + props.className : "") + " " + css3({
           opacity: "1",
           transition: "opacity 0.2s ease-in-out"
         })}
@@ -1231,10 +1291,10 @@ function Image(props) {
         sizes={props.sizes}
       />
     </picture>
-    <Show8
+    <Show7
       when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
     ><div
-      class={"builder-image-sizer " + css4({
+      class={"builder-image-sizer " + css3({
         width: "100%",
         pointerEvents: "none",
         fontSize: "0"
@@ -1242,10 +1302,10 @@ function Image(props) {
       style={{
         "padding-top": props.aspectRatio * 100 + "%"
       }}
-    /></Show8>
-    <Show8 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show8>
-    <Show8 when={!props.fitContent && props.children}><div
-      class={css4({
+    /></Show7>
+    <Show7 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show7>
+    <Show7 when={!props.fitContent && props.children}><div
+      class={css3({
         display: "flex",
         flexDirection: "column",
         alignItems: "stretch",
@@ -1255,7 +1315,7 @@ function Image(props) {
         width: "100%",
         height: "100%"
       })}
-    >{props.children}</div></Show8>
+    >{props.children}</div></Show7>
   </>;
 }
 var image_default = Image;
@@ -1285,7 +1345,7 @@ var section_default = SectionComponent;
 import { onMount as onMount4, on as on3, createEffect as createEffect3, createSignal as createSignal14 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show12, For as For5, onMount as onMount3, createSignal as createSignal13 } from "solid-js";
+import { Show as Show11, For as For5, onMount as onMount3, createSignal as createSignal13 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -1479,7 +1539,7 @@ var handleABTesting = async ({
 var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
 
 // src/components/content/content.tsx
-import { Show as Show11, createSignal as createSignal12 } from "solid-js";
+import { Show as Show10, createSignal as createSignal12 } from "solid-js";
 
 // src/blocks/button/component-info.ts
 var componentInfo = {
@@ -2288,7 +2348,7 @@ var componentInfo12 = {
 };
 
 // src/blocks/video/video.tsx
-import { Show as Show9 } from "solid-js";
+import { Show as Show8 } from "solid-js";
 function Video(props) {
   function videoProps() {
     return {
@@ -2339,8 +2399,8 @@ function Video(props) {
       }}
       src={props.video || "no-src"}
       poster={props.posterImage}
-    ><Show9 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show9></video>
-    <Show9
+    ><Show8 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show8></video>
+    <Show8
       when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}
     ><div
       style={{
@@ -2349,15 +2409,15 @@ function Video(props) {
         "pointer-events": "none",
         "font-size": "0px"
       }}
-    /></Show9>
-    <Show9 when={props.builderBlock?.children?.length && props.fitContent}><div
+    /></Show8>
+    <Show8 when={props.builderBlock?.children?.length && props.fitContent}><div
       style={{
         display: "flex",
         "flex-direction": "column",
         "align-items": "stretch"
       }}
-    >{props.children}</div></Show9>
-    <Show9 when={props.builderBlock?.children?.length && !props.fitContent}><div
+    >{props.children}</div></Show8>
+    <Show8 when={props.builderBlock?.children?.length && !props.fitContent}><div
       style={{
         "pointer-events": "none",
         display: "flex",
@@ -2369,7 +2429,7 @@ function Video(props) {
         width: "100%",
         height: "100%"
       }}
-    >{props.children}</div></Show9>
+    >{props.children}</div></Show8>
   </div>;
 }
 var video_default = Video;
@@ -2489,7 +2549,7 @@ function InlinedScript(props) {
 var Inlined_script_default = InlinedScript;
 
 // src/components/content/components/enable-editor.tsx
-import { Show as Show10, onMount as onMount2, on as on2, createEffect as createEffect2, createSignal as createSignal10 } from "solid-js";
+import { Show as Show9, onMount as onMount2, on as on2, createEffect as createEffect2, createSignal as createSignal10 } from "solid-js";
 import { Dynamic as Dynamic5 } from "solid-js/web";
 
 // src/helpers/preview-lru-cache/get.ts
@@ -2984,7 +3044,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.2";
+var SDK_VERSION = "0.12.4";
 
 // src/functions/register.ts
 var registry = {};
@@ -3408,7 +3468,7 @@ function EnableEditor(props) {
     }
   }
   createEffect2(on2(() => [props.locale], onUpdateFn_6));
-  return <builder_context_default.Provider value={props.builderContextSignal}><Show10 when={props.builderContextSignal.content}><Dynamic5
+  return <builder_context_default.Provider value={props.builderContextSignal}><Show9 when={props.builderContextSignal.content}><Dynamic5
     class={`variant-${props.content?.testVariationId || props.content?.id}`}
     {...{}}
     key={forceReRenderCount()}
@@ -3423,7 +3483,7 @@ function EnableEditor(props) {
     }}
     {...props.contentWrapperProps}
     component={ContentWrapper()}
-  >{props.children}</Dynamic5></Show10></builder_context_default.Provider>;
+  >{props.children}</Dynamic5></Show9></builder_context_default.Provider>;
 }
 var Enable_editor_default = EnableEditor;
 
@@ -3497,6 +3557,10 @@ ${getFontCss({
       customFonts: props.customFonts
     })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }
@@ -3641,21 +3705,23 @@ function ContentComponent(props) {
     builderContextSignal={builderContextSignal()}
     contentWrapper={props.contentWrapper}
     contentWrapperProps={props.contentWrapperProps}
+    linkComponent={props.linkComponent}
     trustedHosts={props.trustedHosts}
     {...{
       setBuilderContextSignal
     }}
   >
-    <Show11 when={props.isSsrAbTest}><Inlined_script_default scriptStr={scriptStr()} /></Show11>
-    <Show11 when={TARGET !== "reactNative"}><Styles_default
+    <Show10 when={props.isSsrAbTest}><Inlined_script_default scriptStr={scriptStr()} /></Show10>
+    <Show10 when={TARGET !== "reactNative"}><Styles_default
       contentId={builderContextSignal().content?.id}
       cssCode={builderContextSignal().content?.data?.cssCode}
       customFonts={builderContextSignal().content?.data?.customFonts}
-    /></Show11>
+    /></Show10>
     <Blocks_default
       blocks={builderContextSignal().content?.data?.blocks}
       context={builderContextSignal()}
       registeredComponents={registeredComponents()}
+      linkComponent={props.linkComponent}
     />
   </Enable_editor_default></components_context_default.Provider>;
 }
@@ -3694,8 +3760,8 @@ function ContentVariants(props) {
     setShouldRenderVariants(false);
   });
   return <>
-    <Show12 when={!props.__isNestedRender && TARGET !== "reactNative"}><Inlined_script_default scriptStr={getScriptString()} /></Show12>
-    <Show12 when={shouldRenderVariants()}>
+    <Show11 when={!props.__isNestedRender && TARGET !== "reactNative"}><Inlined_script_default scriptStr={getScriptString()} /></Show11>
+    <Show11 when={shouldRenderVariants()}>
       <Inlined_styles_default
         id={`variants-styles-${props.content?.id}`}
         styles={hideVariantsStyleString()}
@@ -3715,6 +3781,7 @@ function ContentVariants(props) {
           apiKey={props.apiKey}
           apiVersion={props.apiVersion}
           customComponents={props.customComponents}
+          linkComponent={props.linkComponent}
           canTrack={props.canTrack}
           locale={props.locale}
           includeRefs={props.includeRefs}
@@ -3727,7 +3794,7 @@ function ContentVariants(props) {
           trustedHosts={props.trustedHosts}
         />;
       }}</For5>
-    </Show12>
+    </Show11>
     <Content_default
       {...{}}
       content={defaultContent()}
@@ -3738,6 +3805,7 @@ function ContentVariants(props) {
       apiKey={props.apiKey}
       apiVersion={props.apiVersion}
       customComponents={props.customComponents}
+      linkComponent={props.linkComponent}
       canTrack={props.canTrack}
       locale={props.locale}
       includeRefs={props.includeRefs}
@@ -3782,7 +3850,7 @@ function Symbol(props) {
   const [contentToUse, setContentToUse] = createSignal14(props.symbol?.content);
   function className() {
     return [
-      ...[props.attributes.class],
+      ...[props.attributes[getClassPropName()]],
       "builder-symbol",
       props.symbol?.inline ? "builder-inline-symbol" : void 0,
       props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
@@ -3823,6 +3891,7 @@ function Symbol(props) {
     }}
     model={props.symbol?.model}
     content={contentToUse()}
+    linkComponent={props.builderLinkComponent}
   /></div>;
 }
 var symbol_default = Symbol;