@builder.io/sdk-solid 2.0.23 → 2.0.24

package/dist/index.d.ts

@@ -98,6 +98,7 @@ type BlocksWrapperProps = {
      */
     BlocksWrapperProps: any;
     children?: any;
+    classNameProp?: string;
 };
 
 type ApiVersion = 'v3';
@@ -650,10 +651,11 @@ interface VideoProps {
 
 declare function Video(props: VideoProps): solid_js.JSX.Element;
 
-type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'>> & {
+type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps' | 'classNameProp'>> & {
     context?: BuilderContextInterface;
     registeredComponents?: RegisteredComponents;
     linkComponent?: any;
+    className?: string;
 };
 
 declare function Blocks(props: BlocksProps): solid_js.JSX.Element;

package/lib/browser/dev.js

@@ -1521,14 +1521,14 @@ function Block(props) {
   });
 }
 var block_default = Block;
-var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-68b2d7fe {
+var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-6567ee94 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }`);
 function BlocksWrapper(props) {
   const className = createMemo(() => {
-    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    return ["builder-blocks", !props.blocks?.length ? "no-blocks" : "", props.classNameProp].filter(Boolean).join(" ");
   });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
@@ -1557,7 +1557,7 @@ function BlocksWrapper(props) {
   });
   return [createComponent(Dynamic, mergeProps({
     get ["class"]() {
-      return className() + " dynamic-68b2d7fe";
+      return className() + " dynamic-6567ee94";
     },
     ref(r$) {
       const _ref$ = blocksWrapperRef;
@@ -1604,11 +1604,14 @@ function Blocks(props) {
     get styleProp() {
       return props.styleProp;
     },
+    get classNameProp() {
+      return props.className;
+    },
     get BlocksWrapper() {
-      return props.context?.BlocksWrapper || builderContext.BlocksWrapper;
+      return props.context?.BlocksWrapper || builderContext?.BlocksWrapper;
     },
     get BlocksWrapperProps() {
-      return props.context?.BlocksWrapperProps || builderContext.BlocksWrapperProps;
+      return props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps;
     },
     get children() {
       return createComponent(Show, {
@@ -1634,7 +1637,7 @@ function Blocks(props) {
                   return props.context || builderContext;
                 },
                 get registeredComponents() {
-                  return props.registeredComponents || componentsContext.registeredComponents;
+                  return props.registeredComponents || componentsContext?.registeredComponents;
                 }
               });
             }
@@ -5256,7 +5259,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.23";
+var SDK_VERSION = "2.0.24";
 
 // src/functions/register.ts
 var registry = {};

package/lib/browser/dev.jsx

@@ -1357,7 +1357,11 @@ import { onMount as onMount3, createMemo as createMemo6 } from "solid-js";
 import { Dynamic as Dynamic4 } from "solid-js/web";
 function BlocksWrapper(props) {
   const className = createMemo6(() => {
-    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    return [
+      "builder-blocks",
+      !props.blocks?.length ? "no-blocks" : "",
+      props.classNameProp
+    ].filter(Boolean).join(" ");
   });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
@@ -1392,7 +1396,7 @@ function BlocksWrapper(props) {
   });
   return <>
     <Dynamic4
-      class={className() + " dynamic-68b2d7fe"}
+      class={className() + " dynamic-6567ee94"}
       ref={blocksWrapperRef}
       builder-path={props.path}
       builder-parent-id={props.parent}
@@ -1404,7 +1408,7 @@ function BlocksWrapper(props) {
       {...props.BlocksWrapperProps}
       component={props.BlocksWrapper}
     >{props.children}</Dynamic4>
-    <style>{`.dynamic-68b2d7fe {
+    <style>{`.dynamic-6567ee94 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1422,8 +1426,9 @@ function Blocks(props) {
     parent={props.parent}
     path={props.path}
     styleProp={props.styleProp}
-    BlocksWrapper={props.context?.BlocksWrapper || builderContext.BlocksWrapper}
-    BlocksWrapperProps={props.context?.BlocksWrapperProps || builderContext.BlocksWrapperProps}
+    classNameProp={props.className}
+    BlocksWrapper={props.context?.BlocksWrapper || builderContext?.BlocksWrapper}
+    BlocksWrapperProps={props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps}
   ><Show6 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
     const index = _index();
     return <Block_default
@@ -1431,7 +1436,7 @@ function Blocks(props) {
       block={block}
       linkComponent={props.linkComponent}
       context={props.context || builderContext}
-      registeredComponents={props.registeredComponents || componentsContext.registeredComponents}
+      registeredComponents={props.registeredComponents || componentsContext?.registeredComponents}
     />;
   }}</For3></Show6></Blocks_wrapper_default></>;
 }
@@ -4742,7 +4747,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.23";
+var SDK_VERSION = "2.0.24";
 
 // src/functions/register.ts
 var registry = {};

package/lib/browser/index.js

@@ -1515,14 +1515,14 @@ function Block(props) {
   });
 }
 var block_default = Block;
-var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-68b2d7fe {
+var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-6567ee94 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }`);
 function BlocksWrapper(props) {
   const className = createMemo(() => {
-    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    return ["builder-blocks", !props.blocks?.length ? "no-blocks" : "", props.classNameProp].filter(Boolean).join(" ");
   });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
@@ -1551,7 +1551,7 @@ function BlocksWrapper(props) {
   });
   return [createComponent(Dynamic, mergeProps({
     get ["class"]() {
-      return className() + " dynamic-68b2d7fe";
+      return className() + " dynamic-6567ee94";
     },
     ref(r$) {
       const _ref$ = blocksWrapperRef;
@@ -1598,11 +1598,14 @@ function Blocks(props) {
     get styleProp() {
       return props.styleProp;
     },
+    get classNameProp() {
+      return props.className;
+    },
     get BlocksWrapper() {
-      return props.context?.BlocksWrapper || builderContext.BlocksWrapper;
+      return props.context?.BlocksWrapper || builderContext?.BlocksWrapper;
     },
     get BlocksWrapperProps() {
-      return props.context?.BlocksWrapperProps || builderContext.BlocksWrapperProps;
+      return props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps;
     },
     get children() {
       return createComponent(Show, {
@@ -1628,7 +1631,7 @@ function Blocks(props) {
                   return props.context || builderContext;
                 },
                 get registeredComponents() {
-                  return props.registeredComponents || componentsContext.registeredComponents;
+                  return props.registeredComponents || componentsContext?.registeredComponents;
                 }
               });
             }
@@ -5241,7 +5244,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.23";
+var SDK_VERSION = "2.0.24";
 
 // src/functions/register.ts
 var registry = {};

package/lib/browser/index.jsx

@@ -1351,7 +1351,11 @@ import { onMount as onMount3, createMemo as createMemo6 } from "solid-js";
 import { Dynamic as Dynamic4 } from "solid-js/web";
 function BlocksWrapper(props) {
   const className = createMemo6(() => {
-    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    return [
+      "builder-blocks",
+      !props.blocks?.length ? "no-blocks" : "",
+      props.classNameProp
+    ].filter(Boolean).join(" ");
   });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
@@ -1386,7 +1390,7 @@ function BlocksWrapper(props) {
   });
   return <>
     <Dynamic4
-      class={className() + " dynamic-68b2d7fe"}
+      class={className() + " dynamic-6567ee94"}
       ref={blocksWrapperRef}
       builder-path={props.path}
       builder-parent-id={props.parent}
@@ -1398,7 +1402,7 @@ function BlocksWrapper(props) {
       {...props.BlocksWrapperProps}
       component={props.BlocksWrapper}
     >{props.children}</Dynamic4>
-    <style>{`.dynamic-68b2d7fe {
+    <style>{`.dynamic-6567ee94 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1416,8 +1420,9 @@ function Blocks(props) {
     parent={props.parent}
     path={props.path}
     styleProp={props.styleProp}
-    BlocksWrapper={props.context?.BlocksWrapper || builderContext.BlocksWrapper}
-    BlocksWrapperProps={props.context?.BlocksWrapperProps || builderContext.BlocksWrapperProps}
+    classNameProp={props.className}
+    BlocksWrapper={props.context?.BlocksWrapper || builderContext?.BlocksWrapper}
+    BlocksWrapperProps={props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps}
   ><Show6 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
     const index = _index();
     return <Block_default
@@ -1425,7 +1430,7 @@ function Blocks(props) {
       block={block}
       linkComponent={props.linkComponent}
       context={props.context || builderContext}
-      registeredComponents={props.registeredComponents || componentsContext.registeredComponents}
+      registeredComponents={props.registeredComponents || componentsContext?.registeredComponents}
     />;
   }}</For3></Show6></Blocks_wrapper_default></>;
 }
@@ -4727,7 +4732,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.23";
+var SDK_VERSION = "2.0.24";
 
 // src/functions/register.ts
 var registry = {};

package/lib/edge/dev.js

@@ -4704,14 +4704,14 @@ function Block(props) {
   });
 }
 var block_default = Block;
-var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-68b2d7fe {
+var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-6567ee94 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }`);
 function BlocksWrapper(props) {
   const className = createMemo(() => {
-    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    return ["builder-blocks", !props.blocks?.length ? "no-blocks" : "", props.classNameProp].filter(Boolean).join(" ");
   });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
@@ -4740,7 +4740,7 @@ function BlocksWrapper(props) {
   });
   return [createComponent(Dynamic, mergeProps({
     get ["class"]() {
-      return className() + " dynamic-68b2d7fe";
+      return className() + " dynamic-6567ee94";
     },
     ref(r$) {
       const _ref$ = blocksWrapperRef;
@@ -4787,11 +4787,14 @@ function Blocks(props) {
     get styleProp() {
       return props.styleProp;
     },
+    get classNameProp() {
+      return props.className;
+    },
     get BlocksWrapper() {
-      return props.context?.BlocksWrapper || builderContext.BlocksWrapper;
+      return props.context?.BlocksWrapper || builderContext?.BlocksWrapper;
     },
     get BlocksWrapperProps() {
-      return props.context?.BlocksWrapperProps || builderContext.BlocksWrapperProps;
+      return props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps;
     },
     get children() {
       return createComponent(Show, {
@@ -4817,7 +4820,7 @@ function Blocks(props) {
                   return props.context || builderContext;
                 },
                 get registeredComponents() {
-                  return props.registeredComponents || componentsContext.registeredComponents;
+                  return props.registeredComponents || componentsContext?.registeredComponents;
                 }
               });
             }
@@ -8439,7 +8442,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.23";
+var SDK_VERSION = "2.0.24";
 
 // src/functions/register.ts
 var registry = {};

package/lib/edge/dev.jsx

@@ -4542,7 +4542,11 @@ import { onMount as onMount3, createMemo as createMemo6 } from "solid-js";
 import { Dynamic as Dynamic4 } from "solid-js/web";
 function BlocksWrapper(props) {
   const className = createMemo6(() => {
-    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    return [
+      "builder-blocks",
+      !props.blocks?.length ? "no-blocks" : "",
+      props.classNameProp
+    ].filter(Boolean).join(" ");
   });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
@@ -4577,7 +4581,7 @@ function BlocksWrapper(props) {
   });
   return <>
     <Dynamic4
-      class={className() + " dynamic-68b2d7fe"}
+      class={className() + " dynamic-6567ee94"}
       ref={blocksWrapperRef}
       builder-path={props.path}
       builder-parent-id={props.parent}
@@ -4589,7 +4593,7 @@ function BlocksWrapper(props) {
       {...props.BlocksWrapperProps}
       component={props.BlocksWrapper}
     >{props.children}</Dynamic4>
-    <style>{`.dynamic-68b2d7fe {
+    <style>{`.dynamic-6567ee94 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -4607,8 +4611,9 @@ function Blocks(props) {
     parent={props.parent}
     path={props.path}
     styleProp={props.styleProp}
-    BlocksWrapper={props.context?.BlocksWrapper || builderContext.BlocksWrapper}
-    BlocksWrapperProps={props.context?.BlocksWrapperProps || builderContext.BlocksWrapperProps}
+    classNameProp={props.className}
+    BlocksWrapper={props.context?.BlocksWrapper || builderContext?.BlocksWrapper}
+    BlocksWrapperProps={props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps}
   ><Show6 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
     const index = _index();
     return <Block_default
@@ -4616,7 +4621,7 @@ function Blocks(props) {
       block={block}
       linkComponent={props.linkComponent}
       context={props.context || builderContext}
-      registeredComponents={props.registeredComponents || componentsContext.registeredComponents}
+      registeredComponents={props.registeredComponents || componentsContext?.registeredComponents}
     />;
   }}</For3></Show6></Blocks_wrapper_default></>;
 }
@@ -7927,7 +7932,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.23";
+var SDK_VERSION = "2.0.24";
 
 // src/functions/register.ts
 var registry = {};

package/lib/edge/index.js

@@ -4698,14 +4698,14 @@ function Block(props) {
   });
 }
 var block_default = Block;
-var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-68b2d7fe {
+var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-6567ee94 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }`);
 function BlocksWrapper(props) {
   const className = createMemo(() => {
-    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    return ["builder-blocks", !props.blocks?.length ? "no-blocks" : "", props.classNameProp].filter(Boolean).join(" ");
   });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
@@ -4734,7 +4734,7 @@ function BlocksWrapper(props) {
   });
   return [createComponent(Dynamic, mergeProps({
     get ["class"]() {
-      return className() + " dynamic-68b2d7fe";
+      return className() + " dynamic-6567ee94";
     },
     ref(r$) {
       const _ref$ = blocksWrapperRef;
@@ -4781,11 +4781,14 @@ function Blocks(props) {
     get styleProp() {
       return props.styleProp;
     },
+    get classNameProp() {
+      return props.className;
+    },
     get BlocksWrapper() {
-      return props.context?.BlocksWrapper || builderContext.BlocksWrapper;
+      return props.context?.BlocksWrapper || builderContext?.BlocksWrapper;
     },
     get BlocksWrapperProps() {
-      return props.context?.BlocksWrapperProps || builderContext.BlocksWrapperProps;
+      return props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps;
     },
     get children() {
       return createComponent(Show, {
@@ -4811,7 +4814,7 @@ function Blocks(props) {
                   return props.context || builderContext;
                 },
                 get registeredComponents() {
-                  return props.registeredComponents || componentsContext.registeredComponents;
+                  return props.registeredComponents || componentsContext?.registeredComponents;
                 }
               });
             }
@@ -8424,7 +8427,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.23";
+var SDK_VERSION = "2.0.24";
 
 // src/functions/register.ts
 var registry = {};

package/lib/edge/index.jsx

@@ -4536,7 +4536,11 @@ import { onMount as onMount3, createMemo as createMemo6 } from "solid-js";
 import { Dynamic as Dynamic4 } from "solid-js/web";
 function BlocksWrapper(props) {
   const className = createMemo6(() => {
-    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    return [
+      "builder-blocks",
+      !props.blocks?.length ? "no-blocks" : "",
+      props.classNameProp
+    ].filter(Boolean).join(" ");
   });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
@@ -4571,7 +4575,7 @@ function BlocksWrapper(props) {
   });
   return <>
     <Dynamic4
-      class={className() + " dynamic-68b2d7fe"}
+      class={className() + " dynamic-6567ee94"}
       ref={blocksWrapperRef}
       builder-path={props.path}
       builder-parent-id={props.parent}
@@ -4583,7 +4587,7 @@ function BlocksWrapper(props) {
       {...props.BlocksWrapperProps}
       component={props.BlocksWrapper}
     >{props.children}</Dynamic4>
-    <style>{`.dynamic-68b2d7fe {
+    <style>{`.dynamic-6567ee94 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -4601,8 +4605,9 @@ function Blocks(props) {
     parent={props.parent}
     path={props.path}
     styleProp={props.styleProp}
-    BlocksWrapper={props.context?.BlocksWrapper || builderContext.BlocksWrapper}
-    BlocksWrapperProps={props.context?.BlocksWrapperProps || builderContext.BlocksWrapperProps}
+    classNameProp={props.className}
+    BlocksWrapper={props.context?.BlocksWrapper || builderContext?.BlocksWrapper}
+    BlocksWrapperProps={props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps}
   ><Show6 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
     const index = _index();
     return <Block_default
@@ -4610,7 +4615,7 @@ function Blocks(props) {
       block={block}
       linkComponent={props.linkComponent}
       context={props.context || builderContext}
-      registeredComponents={props.registeredComponents || componentsContext.registeredComponents}
+      registeredComponents={props.registeredComponents || componentsContext?.registeredComponents}
     />;
   }}</For3></Show6></Blocks_wrapper_default></>;
 }
@@ -7912,7 +7917,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.23";
+var SDK_VERSION = "2.0.24";
 
 // src/functions/register.ts
 var registry = {};

package/lib/node/dev.js

@@ -1691,14 +1691,14 @@ function Block(props) {
   });
 }
 var block_default = Block;
-var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-68b2d7fe {
+var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-6567ee94 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }`);
 function BlocksWrapper(props) {
   const className = createMemo(() => {
-    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    return ["builder-blocks", !props.blocks?.length ? "no-blocks" : "", props.classNameProp].filter(Boolean).join(" ");
   });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
@@ -1727,7 +1727,7 @@ function BlocksWrapper(props) {
   });
   return [createComponent(Dynamic, mergeProps({
     get ["class"]() {
-      return className() + " dynamic-68b2d7fe";
+      return className() + " dynamic-6567ee94";
     },
     ref(r$) {
       const _ref$ = blocksWrapperRef;
@@ -1774,11 +1774,14 @@ function Blocks(props) {
     get styleProp() {
       return props.styleProp;
     },
+    get classNameProp() {
+      return props.className;
+    },
     get BlocksWrapper() {
-      return props.context?.BlocksWrapper || builderContext.BlocksWrapper;
+      return props.context?.BlocksWrapper || builderContext?.BlocksWrapper;
     },
     get BlocksWrapperProps() {
-      return props.context?.BlocksWrapperProps || builderContext.BlocksWrapperProps;
+      return props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps;
     },
     get children() {
       return createComponent(Show, {
@@ -1804,7 +1807,7 @@ function Blocks(props) {
                   return props.context || builderContext;
                 },
                 get registeredComponents() {
-                  return props.registeredComponents || componentsContext.registeredComponents;
+                  return props.registeredComponents || componentsContext?.registeredComponents;
                 }
               });
             }
@@ -5426,7 +5429,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.23";
+var SDK_VERSION = "2.0.24";
 
 // src/functions/register.ts
 var registry = {};

package/lib/node/dev.jsx

@@ -1529,7 +1529,11 @@ import { onMount as onMount3, createMemo as createMemo6 } from "solid-js";
 import { Dynamic as Dynamic4 } from "solid-js/web";
 function BlocksWrapper(props) {
   const className = createMemo6(() => {
-    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    return [
+      "builder-blocks",
+      !props.blocks?.length ? "no-blocks" : "",
+      props.classNameProp
+    ].filter(Boolean).join(" ");
   });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
@@ -1564,7 +1568,7 @@ function BlocksWrapper(props) {
   });
   return <>
     <Dynamic4
-      class={className() + " dynamic-68b2d7fe"}
+      class={className() + " dynamic-6567ee94"}
       ref={blocksWrapperRef}
       builder-path={props.path}
       builder-parent-id={props.parent}
@@ -1576,7 +1580,7 @@ function BlocksWrapper(props) {
       {...props.BlocksWrapperProps}
       component={props.BlocksWrapper}
     >{props.children}</Dynamic4>
-    <style>{`.dynamic-68b2d7fe {
+    <style>{`.dynamic-6567ee94 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1594,8 +1598,9 @@ function Blocks(props) {
     parent={props.parent}
     path={props.path}
     styleProp={props.styleProp}
-    BlocksWrapper={props.context?.BlocksWrapper || builderContext.BlocksWrapper}
-    BlocksWrapperProps={props.context?.BlocksWrapperProps || builderContext.BlocksWrapperProps}
+    classNameProp={props.className}
+    BlocksWrapper={props.context?.BlocksWrapper || builderContext?.BlocksWrapper}
+    BlocksWrapperProps={props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps}
   ><Show6 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
     const index = _index();
     return <Block_default
@@ -1603,7 +1608,7 @@ function Blocks(props) {
       block={block}
       linkComponent={props.linkComponent}
       context={props.context || builderContext}
-      registeredComponents={props.registeredComponents || componentsContext.registeredComponents}
+      registeredComponents={props.registeredComponents || componentsContext?.registeredComponents}
     />;
   }}</For3></Show6></Blocks_wrapper_default></>;
 }
@@ -4914,7 +4919,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.23";
+var SDK_VERSION = "2.0.24";
 
 // src/functions/register.ts
 var registry = {};

package/lib/node/index.js

@@ -1685,14 +1685,14 @@ function Block(props) {
   });
 }
 var block_default = Block;
-var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-68b2d7fe {
+var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-6567ee94 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }`);
 function BlocksWrapper(props) {
   const className = createMemo(() => {
-    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    return ["builder-blocks", !props.blocks?.length ? "no-blocks" : "", props.classNameProp].filter(Boolean).join(" ");
   });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
@@ -1721,7 +1721,7 @@ function BlocksWrapper(props) {
   });
   return [createComponent(Dynamic, mergeProps({
     get ["class"]() {
-      return className() + " dynamic-68b2d7fe";
+      return className() + " dynamic-6567ee94";
     },
     ref(r$) {
       const _ref$ = blocksWrapperRef;
@@ -1768,11 +1768,14 @@ function Blocks(props) {
     get styleProp() {
       return props.styleProp;
     },
+    get classNameProp() {
+      return props.className;
+    },
     get BlocksWrapper() {
-      return props.context?.BlocksWrapper || builderContext.BlocksWrapper;
+      return props.context?.BlocksWrapper || builderContext?.BlocksWrapper;
     },
     get BlocksWrapperProps() {
-      return props.context?.BlocksWrapperProps || builderContext.BlocksWrapperProps;
+      return props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps;
     },
     get children() {
       return createComponent(Show, {
@@ -1798,7 +1801,7 @@ function Blocks(props) {
                   return props.context || builderContext;
                 },
                 get registeredComponents() {
-                  return props.registeredComponents || componentsContext.registeredComponents;
+                  return props.registeredComponents || componentsContext?.registeredComponents;
                 }
               });
             }
@@ -5411,7 +5414,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.23";
+var SDK_VERSION = "2.0.24";
 
 // src/functions/register.ts
 var registry = {};

package/lib/node/index.jsx

@@ -1523,7 +1523,11 @@ import { onMount as onMount3, createMemo as createMemo6 } from "solid-js";
 import { Dynamic as Dynamic4 } from "solid-js/web";
 function BlocksWrapper(props) {
   const className = createMemo6(() => {
-    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    return [
+      "builder-blocks",
+      !props.blocks?.length ? "no-blocks" : "",
+      props.classNameProp
+    ].filter(Boolean).join(" ");
   });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
@@ -1558,7 +1562,7 @@ function BlocksWrapper(props) {
   });
   return <>
     <Dynamic4
-      class={className() + " dynamic-68b2d7fe"}
+      class={className() + " dynamic-6567ee94"}
       ref={blocksWrapperRef}
       builder-path={props.path}
       builder-parent-id={props.parent}
@@ -1570,7 +1574,7 @@ function BlocksWrapper(props) {
       {...props.BlocksWrapperProps}
       component={props.BlocksWrapper}
     >{props.children}</Dynamic4>
-    <style>{`.dynamic-68b2d7fe {
+    <style>{`.dynamic-6567ee94 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1588,8 +1592,9 @@ function Blocks(props) {
     parent={props.parent}
     path={props.path}
     styleProp={props.styleProp}
-    BlocksWrapper={props.context?.BlocksWrapper || builderContext.BlocksWrapper}
-    BlocksWrapperProps={props.context?.BlocksWrapperProps || builderContext.BlocksWrapperProps}
+    classNameProp={props.className}
+    BlocksWrapper={props.context?.BlocksWrapper || builderContext?.BlocksWrapper}
+    BlocksWrapperProps={props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps}
   ><Show6 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
     const index = _index();
     return <Block_default
@@ -1597,7 +1602,7 @@ function Blocks(props) {
       block={block}
       linkComponent={props.linkComponent}
       context={props.context || builderContext}
-      registeredComponents={props.registeredComponents || componentsContext.registeredComponents}
+      registeredComponents={props.registeredComponents || componentsContext?.registeredComponents}
     />;
   }}</For3></Show6></Blocks_wrapper_default></>;
 }
@@ -4899,7 +4904,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.23";
+var SDK_VERSION = "2.0.24";
 
 // src/functions/register.ts
 var registry = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "description": "",
   "files": [
     "dist",