@builder.io/sdk-solid 0.12.2 → 0.12.3

package/lib/browser/dev.js

@@ -4,7 +4,7 @@ import { css } from 'solid-styled-components';
 
 // src/blocks/button/button.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<a>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button role=button>`);
 function Button(props) {
   return createComponent(Show, {
     get fallback() {
@@ -12,9 +12,7 @@ function Button(props) {
         const _el$2 = _tmpl$2();
         spread(_el$2, mergeProps({
           get ["class"]() {
-            return props.attributes.class + " " + css({
-              all: "unset"
-            });
+            return `builder-button ${props.attributes.class}`;
           }
         }, {}, () => props.attributes, {
           get style() {
@@ -518,7 +516,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css5() {
+  function css4() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -555,12 +553,12 @@ function BlockStyles(props) {
   }
   return createComponent(Show, {
     get when() {
-      return memo(() => !!(TARGET !== "reactNative" && css5()))() && canShowBlock();
+      return memo(() => !!(TARGET !== "reactNative" && css4()))() && canShowBlock();
     },
     get children() {
       return createComponent(inlined_styles_default, {
         get styles() {
-          return css5();
+          return css4();
         }
       });
     }
@@ -3307,7 +3305,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.2";
+var SDK_VERSION = "0.12.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -3820,6 +3818,10 @@ ${getFontCss({
     customFonts: props.customFonts
   })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }

package/lib/browser/dev.jsx

@@ -1,12 +1,10 @@
 // src/blocks/button/button.tsx
 import { Show } from "solid-js";
-import { css } from "solid-styled-components";
 function Button(props) {
   return <Show
     fallback={<button
-      class={props.attributes.class + " " + css({
-        all: "unset"
-      })}
+      class={`builder-button ${props.attributes.class}`}
+      role="button"
       {...{}}
       {...props.attributes}
       style={props.attributes.style}
@@ -24,7 +22,7 @@ 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 { css as css2 } from "solid-styled-components";
 
 // src/components/blocks/blocks.tsx
 import { useContext, Show as Show6, For as For3 } from "solid-js";
@@ -502,7 +500,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css5() {
+  function css4() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -545,7 +543,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;
 
@@ -906,7 +904,7 @@ 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 +938,7 @@ function BlocksWrapper(props) {
     }
   }
   return <Dynamic4
-    class={className() + " " + css2({
+    class={className() + " " + css({
       display: "flex",
       flexDirection: "column",
       alignItems: "stretch"
@@ -1081,7 +1079,7 @@ 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"
     })}
@@ -1092,7 +1090,7 @@ function Columns(props) {
     <For4 each={props.columns}>{(column, _index) => {
       const index = _index();
       return <div
-        class={"builder-column " + css3({
+        class={"builder-column " + css2({
           display: "flex",
           flexDirection: "column",
           alignItems: "stretch"
@@ -1123,7 +1121,7 @@ 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 { css as css3 } from "solid-styled-components";
 
 // src/blocks/image/image.helpers.ts
 function removeProtocol(path) {
@@ -1214,7 +1212,7 @@ function Image(props) {
     <picture>
       <Show8 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show8>
       <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"
         })}
@@ -1234,7 +1232,7 @@ function Image(props) {
     <Show8
       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"
@@ -1245,7 +1243,7 @@ function Image(props) {
     /></Show8>
     <Show8 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show8>
     <Show8 when={!props.fitContent && props.children}><div
-      class={css4({
+      class={css3({
         display: "flex",
         flexDirection: "column",
         alignItems: "stretch",
@@ -2984,7 +2982,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.2";
+var SDK_VERSION = "0.12.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -3497,6 +3495,10 @@ ${getFontCss({
       customFonts: props.customFonts
     })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }

package/lib/browser/index.js

@@ -4,7 +4,7 @@ import { css } from 'solid-styled-components';
 
 // src/blocks/button/button.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<a>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button role=button>`);
 function Button(props) {
   return createComponent(Show, {
     get fallback() {
@@ -12,9 +12,7 @@ function Button(props) {
         const _el$2 = _tmpl$2();
         spread(_el$2, mergeProps({
           get ["class"]() {
-            return props.attributes.class + " " + css({
-              all: "unset"
-            });
+            return `builder-button ${props.attributes.class}`;
           }
         }, {}, () => props.attributes, {
           get style() {
@@ -513,7 +511,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css5() {
+  function css4() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -550,12 +548,12 @@ function BlockStyles(props) {
   }
   return createComponent(Show, {
     get when() {
-      return memo(() => !!(TARGET !== "reactNative" && css5()))() && canShowBlock();
+      return memo(() => !!(TARGET !== "reactNative" && css4()))() && canShowBlock();
     },
     get children() {
       return createComponent(inlined_styles_default, {
         get styles() {
-          return css5();
+          return css4();
         }
       });
     }
@@ -3293,7 +3291,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.2";
+var SDK_VERSION = "0.12.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -3804,6 +3802,10 @@ ${getFontCss({
     customFonts: props.customFonts
   })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }

package/lib/browser/index.jsx

@@ -1,12 +1,10 @@
 // src/blocks/button/button.tsx
 import { Show } from "solid-js";
-import { css } from "solid-styled-components";
 function Button(props) {
   return <Show
     fallback={<button
-      class={props.attributes.class + " " + css({
-        all: "unset"
-      })}
+      class={`builder-button ${props.attributes.class}`}
+      role="button"
       {...{}}
       {...props.attributes}
       style={props.attributes.style}
@@ -24,7 +22,7 @@ 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 { css as css2 } from "solid-styled-components";
 
 // src/components/blocks/blocks.tsx
 import { useContext, Show as Show6, For as For3 } from "solid-js";
@@ -497,7 +495,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css5() {
+  function css4() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -540,7 +538,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;
 
@@ -901,7 +899,7 @@ 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" : "");
@@ -935,7 +933,7 @@ function BlocksWrapper(props) {
     }
   }
   return <Dynamic4
-    class={className() + " " + css2({
+    class={className() + " " + css({
       display: "flex",
       flexDirection: "column",
       alignItems: "stretch"
@@ -1076,7 +1074,7 @@ 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"
     })}
@@ -1087,7 +1085,7 @@ function Columns(props) {
     <For4 each={props.columns}>{(column, _index) => {
       const index = _index();
       return <div
-        class={"builder-column " + css3({
+        class={"builder-column " + css2({
           display: "flex",
           flexDirection: "column",
           alignItems: "stretch"
@@ -1118,7 +1116,7 @@ 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 { css as css3 } from "solid-styled-components";
 
 // src/blocks/image/image.helpers.ts
 function removeProtocol(path) {
@@ -1208,7 +1206,7 @@ function Image(props) {
     <picture>
       <Show8 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show8>
       <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"
         })}
@@ -1228,7 +1226,7 @@ function Image(props) {
     <Show8
       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"
@@ -1239,7 +1237,7 @@ function Image(props) {
     /></Show8>
     <Show8 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show8>
     <Show8 when={!props.fitContent && props.children}><div
-      class={css4({
+      class={css3({
         display: "flex",
         flexDirection: "column",
         alignItems: "stretch",
@@ -2970,7 +2968,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.2";
+var SDK_VERSION = "0.12.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -3481,6 +3479,10 @@ ${getFontCss({
       customFonts: props.customFonts
     })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }

package/lib/edge/dev.js

@@ -10,7 +10,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 var _tmpl$ = /* @__PURE__ */ template(`<a>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button role=button>`);
 function Button(props) {
   return createComponent(Show, {
     get fallback() {
@@ -18,9 +18,7 @@ function Button(props) {
         const _el$2 = _tmpl$2();
         spread(_el$2, mergeProps({
           get ["class"]() {
-            return props.attributes.class + " " + css({
-              all: "unset"
-            });
+            return `builder-button ${props.attributes.class}`;
           }
         }, {}, () => props.attributes, {
           get style() {
@@ -3671,7 +3669,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css5() {
+  function css4() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -3708,12 +3706,12 @@ function BlockStyles(props) {
   }
   return createComponent(Show, {
     get when() {
-      return memo(() => !!(TARGET !== "reactNative" && css5()))() && canShowBlock();
+      return memo(() => !!(TARGET !== "reactNative" && css4()))() && canShowBlock();
     },
     get children() {
       return createComponent(inlined_styles_default, {
         get styles() {
-          return css5();
+          return css4();
         }
       });
     }
@@ -6460,7 +6458,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.2";
+var SDK_VERSION = "0.12.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -6973,6 +6971,10 @@ ${getFontCss({
     customFonts: props.customFonts
   })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }

package/lib/edge/dev.jsx

@@ -8,13 +8,11 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 
 // src/blocks/button/button.tsx
 import { Show } from "solid-js";
-import { css } from "solid-styled-components";
 function Button(props) {
   return <Show
     fallback={<button
-      class={props.attributes.class + " " + css({
-        all: "unset"
-      })}
+      class={`builder-button ${props.attributes.class}`}
+      role="button"
       {...{}}
       {...props.attributes}
       style={props.attributes.style}
@@ -32,7 +30,7 @@ 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 { css as css2 } from "solid-styled-components";
 
 // src/components/blocks/blocks.tsx
 import { useContext, Show as Show6, For as For3 } from "solid-js";
@@ -3657,7 +3655,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css5() {
+  function css4() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -3700,7 +3698,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;
 
@@ -4061,7 +4059,7 @@ 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" : "");
@@ -4095,7 +4093,7 @@ function BlocksWrapper(props) {
     }
   }
   return <Dynamic4
-    class={className() + " " + css2({
+    class={className() + " " + css({
       display: "flex",
       flexDirection: "column",
       alignItems: "stretch"
@@ -4236,7 +4234,7 @@ 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"
     })}
@@ -4247,7 +4245,7 @@ function Columns(props) {
     <For4 each={props.columns}>{(column, _index) => {
       const index = _index();
       return <div
-        class={"builder-column " + css3({
+        class={"builder-column " + css2({
           display: "flex",
           flexDirection: "column",
           alignItems: "stretch"
@@ -4278,7 +4276,7 @@ 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 { css as css3 } from "solid-styled-components";
 
 // src/blocks/image/image.helpers.ts
 function removeProtocol(path) {
@@ -4369,7 +4367,7 @@ function Image(props) {
     <picture>
       <Show8 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show8>
       <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"
         })}
@@ -4389,7 +4387,7 @@ function Image(props) {
     <Show8
       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"
@@ -4400,7 +4398,7 @@ function Image(props) {
     /></Show8>
     <Show8 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show8>
     <Show8 when={!props.fitContent && props.children}><div
-      class={css4({
+      class={css3({
         display: "flex",
         flexDirection: "column",
         alignItems: "stretch",
@@ -6139,7 +6137,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.2";
+var SDK_VERSION = "0.12.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -6652,6 +6650,10 @@ ${getFontCss({
       customFonts: props.customFonts
     })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }

package/lib/edge/index.js

@@ -10,7 +10,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 var _tmpl$ = /* @__PURE__ */ template(`<a>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button role=button>`);
 function Button(props) {
   return createComponent(Show, {
     get fallback() {
@@ -18,9 +18,7 @@ function Button(props) {
         const _el$2 = _tmpl$2();
         spread(_el$2, mergeProps({
           get ["class"]() {
-            return props.attributes.class + " " + css({
-              all: "unset"
-            });
+            return `builder-button ${props.attributes.class}`;
           }
         }, {}, () => props.attributes, {
           get style() {
@@ -3666,7 +3664,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css5() {
+  function css4() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -3703,12 +3701,12 @@ function BlockStyles(props) {
   }
   return createComponent(Show, {
     get when() {
-      return memo(() => !!(TARGET !== "reactNative" && css5()))() && canShowBlock();
+      return memo(() => !!(TARGET !== "reactNative" && css4()))() && canShowBlock();
     },
     get children() {
       return createComponent(inlined_styles_default, {
         get styles() {
-          return css5();
+          return css4();
         }
       });
     }
@@ -6446,7 +6444,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.2";
+var SDK_VERSION = "0.12.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -6957,6 +6955,10 @@ ${getFontCss({
     customFonts: props.customFonts
   })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }

package/lib/edge/index.jsx

@@ -8,13 +8,11 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 
 // src/blocks/button/button.tsx
 import { Show } from "solid-js";
-import { css } from "solid-styled-components";
 function Button(props) {
   return <Show
     fallback={<button
-      class={props.attributes.class + " " + css({
-        all: "unset"
-      })}
+      class={`builder-button ${props.attributes.class}`}
+      role="button"
       {...{}}
       {...props.attributes}
       style={props.attributes.style}
@@ -32,7 +30,7 @@ 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 { css as css2 } from "solid-styled-components";
 
 // src/components/blocks/blocks.tsx
 import { useContext, Show as Show6, For as For3 } from "solid-js";
@@ -3652,7 +3650,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css5() {
+  function css4() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -3695,7 +3693,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;
 
@@ -4056,7 +4054,7 @@ 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" : "");
@@ -4090,7 +4088,7 @@ function BlocksWrapper(props) {
     }
   }
   return <Dynamic4
-    class={className() + " " + css2({
+    class={className() + " " + css({
       display: "flex",
       flexDirection: "column",
       alignItems: "stretch"
@@ -4231,7 +4229,7 @@ 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"
     })}
@@ -4242,7 +4240,7 @@ function Columns(props) {
     <For4 each={props.columns}>{(column, _index) => {
       const index = _index();
       return <div
-        class={"builder-column " + css3({
+        class={"builder-column " + css2({
           display: "flex",
           flexDirection: "column",
           alignItems: "stretch"
@@ -4273,7 +4271,7 @@ 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 { css as css3 } from "solid-styled-components";
 
 // src/blocks/image/image.helpers.ts
 function removeProtocol(path) {
@@ -4363,7 +4361,7 @@ function Image(props) {
     <picture>
       <Show8 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show8>
       <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"
         })}
@@ -4383,7 +4381,7 @@ function Image(props) {
     <Show8
       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"
@@ -4394,7 +4392,7 @@ function Image(props) {
     /></Show8>
     <Show8 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show8>
     <Show8 when={!props.fitContent && props.children}><div
-      class={css4({
+      class={css3({
         display: "flex",
         flexDirection: "column",
         alignItems: "stretch",
@@ -6125,7 +6123,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.2";
+var SDK_VERSION = "0.12.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -6636,6 +6634,10 @@ ${getFontCss({
       customFonts: props.customFonts
     })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }

package/lib/node/dev.js

@@ -5,7 +5,7 @@ import { createRequire } from 'node:module';
 
 // src/blocks/button/button.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<a>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button role=button>`);
 function Button(props) {
   return createComponent(Show, {
     get fallback() {
@@ -13,9 +13,7 @@ function Button(props) {
         const _el$2 = _tmpl$2();
         spread(_el$2, mergeProps({
           get ["class"]() {
-            return props.attributes.class + " " + css({
-              all: "unset"
-            });
+            return `builder-button ${props.attributes.class}`;
           }
         }, {}, () => props.attributes, {
           get style() {
@@ -642,7 +640,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css5() {
+  function css4() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -679,12 +677,12 @@ function BlockStyles(props) {
   }
   return createComponent(Show, {
     get when() {
-      return memo(() => !!(TARGET !== "reactNative" && css5()))() && canShowBlock();
+      return memo(() => !!(TARGET !== "reactNative" && css4()))() && canShowBlock();
     },
     get children() {
       return createComponent(inlined_styles_default, {
         get styles() {
-          return css5();
+          return css4();
         }
       });
     }
@@ -3431,7 +3429,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.2";
+var SDK_VERSION = "0.12.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -3944,6 +3942,10 @@ ${getFontCss({
     customFonts: props.customFonts
   })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }

package/lib/node/dev.jsx

@@ -1,12 +1,10 @@
 // src/blocks/button/button.tsx
 import { Show } from "solid-js";
-import { css } from "solid-styled-components";
 function Button(props) {
   return <Show
     fallback={<button
-      class={props.attributes.class + " " + css({
-        all: "unset"
-      })}
+      class={`builder-button ${props.attributes.class}`}
+      role="button"
       {...{}}
       {...props.attributes}
       style={props.attributes.style}
@@ -24,7 +22,7 @@ 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 { css as css2 } from "solid-styled-components";
 
 // src/components/blocks/blocks.tsx
 import { useContext, Show as Show6, For as For3 } from "solid-js";
@@ -628,7 +626,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css5() {
+  function css4() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -671,7 +669,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;
 
@@ -1032,7 +1030,7 @@ 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" : "");
@@ -1066,7 +1064,7 @@ function BlocksWrapper(props) {
     }
   }
   return <Dynamic4
-    class={className() + " " + css2({
+    class={className() + " " + css({
       display: "flex",
       flexDirection: "column",
       alignItems: "stretch"
@@ -1207,7 +1205,7 @@ 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"
     })}
@@ -1218,7 +1216,7 @@ function Columns(props) {
     <For4 each={props.columns}>{(column, _index) => {
       const index = _index();
       return <div
-        class={"builder-column " + css3({
+        class={"builder-column " + css2({
           display: "flex",
           flexDirection: "column",
           alignItems: "stretch"
@@ -1249,7 +1247,7 @@ 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 { css as css3 } from "solid-styled-components";
 
 // src/blocks/image/image.helpers.ts
 function removeProtocol(path) {
@@ -1340,7 +1338,7 @@ function Image(props) {
     <picture>
       <Show8 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show8>
       <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"
         })}
@@ -1360,7 +1358,7 @@ function Image(props) {
     <Show8
       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"
@@ -1371,7 +1369,7 @@ function Image(props) {
     /></Show8>
     <Show8 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show8>
     <Show8 when={!props.fitContent && props.children}><div
-      class={css4({
+      class={css3({
         display: "flex",
         flexDirection: "column",
         alignItems: "stretch",
@@ -3110,7 +3108,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.2";
+var SDK_VERSION = "0.12.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -3623,6 +3621,10 @@ ${getFontCss({
       customFonts: props.customFonts
     })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }

package/lib/node/index.js

@@ -5,7 +5,7 @@ import { createRequire } from 'node:module';
 
 // src/blocks/button/button.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<a>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button role=button>`);
 function Button(props) {
   return createComponent(Show, {
     get fallback() {
@@ -13,9 +13,7 @@ function Button(props) {
         const _el$2 = _tmpl$2();
         spread(_el$2, mergeProps({
           get ["class"]() {
-            return props.attributes.class + " " + css({
-              all: "unset"
-            });
+            return `builder-button ${props.attributes.class}`;
           }
         }, {}, () => props.attributes, {
           get style() {
@@ -636,7 +634,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css5() {
+  function css4() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -673,12 +671,12 @@ function BlockStyles(props) {
   }
   return createComponent(Show, {
     get when() {
-      return memo(() => !!(TARGET !== "reactNative" && css5()))() && canShowBlock();
+      return memo(() => !!(TARGET !== "reactNative" && css4()))() && canShowBlock();
     },
     get children() {
       return createComponent(inlined_styles_default, {
         get styles() {
-          return css5();
+          return css4();
         }
       });
     }
@@ -3416,7 +3414,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.2";
+var SDK_VERSION = "0.12.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -3927,6 +3925,10 @@ ${getFontCss({
     customFonts: props.customFonts
   })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }

package/lib/node/index.jsx

@@ -1,12 +1,10 @@
 // src/blocks/button/button.tsx
 import { Show } from "solid-js";
-import { css } from "solid-styled-components";
 function Button(props) {
   return <Show
     fallback={<button
-      class={props.attributes.class + " " + css({
-        all: "unset"
-      })}
+      class={`builder-button ${props.attributes.class}`}
+      role="button"
       {...{}}
       {...props.attributes}
       style={props.attributes.style}
@@ -24,7 +22,7 @@ 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 { css as css2 } from "solid-styled-components";
 
 // src/components/blocks/blocks.tsx
 import { useContext, Show as Show6, For as For3 } from "solid-js";
@@ -622,7 +620,7 @@ function BlockStyles(props) {
     }
     return true;
   }
-  function css5() {
+  function css4() {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -665,7 +663,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;
 
@@ -1026,7 +1024,7 @@ 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" : "");
@@ -1060,7 +1058,7 @@ function BlocksWrapper(props) {
     }
   }
   return <Dynamic4
-    class={className() + " " + css2({
+    class={className() + " " + css({
       display: "flex",
       flexDirection: "column",
       alignItems: "stretch"
@@ -1201,7 +1199,7 @@ 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"
     })}
@@ -1212,7 +1210,7 @@ function Columns(props) {
     <For4 each={props.columns}>{(column, _index) => {
       const index = _index();
       return <div
-        class={"builder-column " + css3({
+        class={"builder-column " + css2({
           display: "flex",
           flexDirection: "column",
           alignItems: "stretch"
@@ -1243,7 +1241,7 @@ 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 { css as css3 } from "solid-styled-components";
 
 // src/blocks/image/image.helpers.ts
 function removeProtocol(path) {
@@ -1333,7 +1331,7 @@ function Image(props) {
     <picture>
       <Show8 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show8>
       <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"
         })}
@@ -1353,7 +1351,7 @@ function Image(props) {
     <Show8
       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"
@@ -1364,7 +1362,7 @@ function Image(props) {
     /></Show8>
     <Show8 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show8>
     <Show8 when={!props.fitContent && props.children}><div
-      class={css4({
+      class={css3({
         display: "flex",
         flexDirection: "column",
         alignItems: "stretch",
@@ -3095,7 +3093,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.2";
+var SDK_VERSION = "0.12.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -3606,6 +3604,10 @@ ${getFontCss({
       customFonts: props.customFonts
     })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }

package/package.json

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