@builder.io/sdk-react-nextjs 0.17.7 → 0.17.8

package/lib/browser/components/block/components/block-styles.cjs

@@ -1 +1 @@
-"use strict";const o=require("react/jsx-runtime"),a=require("../../../constants/device-sizes.cjs"),j=require("../../../functions/camel-to-kebab-case.cjs"),c=require("../../../helpers/css.cjs"),b=require("../../../helpers/nullable.cjs"),z=require("../../inlined-styles.cjs");function F(i){const f=function(){const e=i.block;return b.checkIsDefined(e.hide)?!e.hide:b.checkIsDefined(e.show)?e.show:!0},u=function(){var C,k,g;const e=i.block,s=e.responsiveStyles,r=i.context.content,d=a.getSizesForBreakpoints(((C=r==null?void 0:r.meta)==null?void 0:C.breakpoints)||{}),m=s==null?void 0:s.large,y=s==null?void 0:s.medium,h=s==null?void 0:s.small,n=e.id;if(!n)return"";const v=m?c.createCssClass({className:n,styles:m}):"",B=y?c.createCssClass({className:n,styles:y,mediaQuery:a.getMaxWidthQueryForSize("medium",d)}):"",q=h?c.createCssClass({className:n,styles:h,mediaQuery:a.getMaxWidthQueryForSize("small",d)}):"",t=e.animations&&e.animations.find(l=>l.trigger==="hover");let S="";if(t){const l=((g=(k=t.steps)==null?void 0:k[1])==null?void 0:g.styles)||{};S=c.createCssClass({className:`${n}:hover`,styles:{...l,transition:`all ${t.duration}s ${j.camelToKebabCase(t.easing)}`,transitionDelay:t.delay?`${t.delay}s`:"0s"}})||""}return[v,B,q,S].join(" ")};return o.jsx(o.Fragment,{children:u()&&f()?o.jsx(o.Fragment,{children:o.jsx(z,{id:"builderio-block",styles:u(),nonce:i.context.nonce})}):null})}module.exports=F;
+"use strict";const a=require("react/jsx-runtime"),r=require("../../../constants/device-sizes.cjs"),$=require("../../../functions/camel-to-kebab-case.cjs"),o=require("../../../helpers/css.cjs"),B=require("../../../helpers/nullable.cjs"),w=require("../../inlined-styles.cjs");function W(i){const v=function(){const s=i.block;return B.checkIsDefined(s.hide)?!s.hide:B.checkIsDefined(s.show)?s.show:!0},u=function(){var k,x,g,b,f;const s=i.block,e=s.responsiveStyles,t=i.context.content,c=r.getSizesForBreakpoints(((k=t==null?void 0:t.meta)==null?void 0:k.breakpoints)||{}),z=!!((g=(x=t==null?void 0:t.meta)==null?void 0:x.breakpoints)!=null&&g.xsmall),d=e==null?void 0:e.large,y=e==null?void 0:e.medium,S=e==null?void 0:e.small,h=e==null?void 0:e.xsmall,n=s.id;if(!n)return"";const F=d?o.createCssClass({className:n,styles:d}):"",Q=y?o.createCssClass({className:n,styles:y,mediaQuery:r.getMaxWidthQueryForSize("medium",c)}):"",j=S?o.createCssClass({className:n,styles:S,mediaQuery:r.getMaxWidthQueryForSize("small",c)}):"",p=h&&z?o.createCssClass({className:n,styles:h,mediaQuery:r.getMaxWidthQueryForSize("xsmall",c)}):"",l=s.animations&&s.animations.find(m=>m.trigger==="hover");let C="";if(l){const m=((f=(b=l.steps)==null?void 0:b[1])==null?void 0:f.styles)||{};C=o.createCssClass({className:`${n}:hover`,styles:{...m,transition:`all ${l.duration}s ${$.camelToKebabCase(l.easing)}`,transitionDelay:l.delay?`${l.delay}s`:"0s"}})||""}return[F,Q,j,p,C].join(" ")};return a.jsx(a.Fragment,{children:u()&&v()?a.jsx(a.Fragment,{children:a.jsx(w,{id:"builderio-block",styles:u(),nonce:i.context.nonce})}):null})}module.exports=W;

package/lib/browser/components/block/components/block-styles.mjs

@@ -1,68 +1,76 @@
-import { jsx as a, Fragment as g } from "react/jsx-runtime";
-import { getSizesForBreakpoints as $, getMaxWidthQueryForSize as p } from "../../../constants/device-sizes.mjs";
-import { camelToKebabCase as z } from "../../../functions/camel-to-kebab-case.mjs";
-import { createCssClass as i } from "../../../helpers/css.mjs";
-import { checkIsDefined as b } from "../../../helpers/nullable.mjs";
-import F from "../../inlined-styles.mjs";
-function A(n) {
-  const B = function() {
-    const e = n.block;
-    return b(e.hide) ? !e.hide : b(e.show) ? e.show : !0;
-  }, c = function() {
-    var h, S, k;
-    const e = n.block, s = e.responsiveStyles, l = n.context.content, m = $(
-      ((h = l == null ? void 0 : l.meta) == null ? void 0 : h.breakpoints) || {}
-    ), d = s == null ? void 0 : s.large, u = s == null ? void 0 : s.medium, y = s == null ? void 0 : s.small, o = e.id;
+import { jsx as c, Fragment as b } from "react/jsx-runtime";
+import { getSizesForBreakpoints as D, getMaxWidthQueryForSize as m } from "../../../constants/device-sizes.mjs";
+import { camelToKebabCase as I } from "../../../functions/camel-to-kebab-case.mjs";
+import { createCssClass as n } from "../../../helpers/css.mjs";
+import { checkIsDefined as C } from "../../../helpers/nullable.mjs";
+import N from "../../inlined-styles.mjs";
+function U(a) {
+  const v = function() {
+    const e = a.block;
+    return C(e.hide) ? !e.hide : C(e.show) ? e.show : !0;
+  }, d = function() {
+    var k, p, x, g, B;
+    const e = a.block, s = e.responsiveStyles, t = a.context.content, i = D(
+      ((k = t == null ? void 0 : t.meta) == null ? void 0 : k.breakpoints) || {}
+    ), Q = !!((x = (p = t == null ? void 0 : t.meta) == null ? void 0 : p.breakpoints) != null && x.xsmall), u = s == null ? void 0 : s.large, y = s == null ? void 0 : s.medium, S = s == null ? void 0 : s.small, f = s == null ? void 0 : s.xsmall, o = e.id;
     if (!o)
       return "";
-    const v = d ? i({
+    const $ = u ? n({
       className: o,
-      styles: d
-    }) : "", x = u ? i({
+      styles: u
+    }) : "", z = y ? n({
       className: o,
-      styles: u,
-      mediaQuery: p(
+      styles: y,
+      mediaQuery: m(
         "medium",
-        m
+        i
       )
-    }) : "", w = y ? i({
+    }) : "", F = S ? n({
       className: o,
-      styles: y,
-      mediaQuery: p(
+      styles: S,
+      mediaQuery: m(
         "small",
-        m
+        i
+      )
+    }) : "", j = f && Q ? n({
+      className: o,
+      styles: f,
+      mediaQuery: m(
+        "xsmall",
+        i
       )
-    }) : "", t = e.animations && e.animations.find((r) => r.trigger === "hover");
-    let f = "";
-    if (t) {
-      const r = ((k = (S = t.steps) == null ? void 0 : S[1]) == null ? void 0 : k.styles) || {};
-      f = i({
+    }) : "", l = e.animations && e.animations.find((r) => r.trigger === "hover");
+    let h = "";
+    if (l) {
+      const r = ((B = (g = l.steps) == null ? void 0 : g[1]) == null ? void 0 : B.styles) || {};
+      h = n({
         className: `${o}:hover`,
         styles: {
           ...r,
-          transition: `all ${t.duration}s ${z(
-            t.easing
+          transition: `all ${l.duration}s ${I(
+            l.easing
           )}`,
-          transitionDelay: t.delay ? `${t.delay}s` : "0s"
+          transitionDelay: l.delay ? `${l.delay}s` : "0s"
         }
       }) || "";
     }
     return [
-      v,
-      x,
-      w,
-      f
+      $,
+      z,
+      F,
+      j,
+      h
     ].join(" ");
   };
-  return /* @__PURE__ */ a(g, { children: c() && B() ? /* @__PURE__ */ a(g, { children: /* @__PURE__ */ a(
-    F,
+  return /* @__PURE__ */ c(b, { children: d() && v() ? /* @__PURE__ */ c(b, { children: /* @__PURE__ */ c(
+    N,
     {
       id: "builderio-block",
-      styles: c(),
-      nonce: n.context.nonce
+      styles: d(),
+      nonce: a.context.nonce
     }
   ) }) : null });
 }
 export {
-  A as default
+  U as default
 };

package/lib/browser/constants/device-sizes.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../functions/fast-clone.cjs"),o={small:{min:320,default:321,max:640},medium:{min:641,default:642,max:991},large:{min:990,default:991,max:1200}},l=(t,a=o)=>`@media (max-width: ${a[t].max}px)`,s=({small:t,medium:a})=>{const e=r.fastClone(o);if(!t||!a)return e;const i=Math.floor(t/2);e.small={max:t,min:i,default:i+1};const m=e.small.max+1;e.medium={max:a,min:m,default:m+1};const n=e.medium.max+1;return e.large={max:2e3,min:n,default:n+1},e};exports.getMaxWidthQueryForSize=l;exports.getSizesForBreakpoints=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../functions/fast-clone.cjs"),r={xsmall:{min:0,default:160,max:320},small:{min:321,default:321,max:640},medium:{min:641,default:642,max:991},large:{min:990,default:991,max:1200}},x=(a,e=r)=>`@media (max-width: ${e[a].max}px)`,d=a=>{const e=u.fastClone(r);if(!a)return e;const{xsmall:m,small:t,medium:l}=a;if(m){const o=Math.floor(m/2);e.xsmall={max:m,min:o,default:o+1}}if(!t||!l)return e;const i=m?e.xsmall.max+1:Math.floor(t/2);e.small={max:t,min:i,default:i+1};const n=e.small.max+1;e.medium={max:l,min:n,default:n+1};const s=e.medium.max+1;return e.large={max:2e3,min:s,default:s+1},e};exports.getMaxWidthQueryForSize=x;exports.getSizesForBreakpoints=d;

package/lib/browser/constants/device-sizes.mjs

@@ -1,7 +1,12 @@
-import { fastClone as l } from "../functions/fast-clone.mjs";
+import { fastClone as r } from "../functions/fast-clone.mjs";
 const o = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -15,34 +20,46 @@ const o = {
     default: 991,
     max: 1200
   }
-}, s = (a, e = o) => `@media (max-width: ${e[a].max}px)`, x = ({
-  small: a,
-  medium: e
-}) => {
-  const m = l(o);
-  if (!a || !e)
+}, d = (a, m = o) => `@media (max-width: ${m[a].max}px)`, f = (a) => {
+  const m = r(o);
+  if (!a)
+    return m;
+  const {
+    xsmall: l,
+    small: e,
+    medium: t
+  } = a;
+  if (l) {
+    const x = Math.floor(l / 2);
+    m.xsmall = {
+      max: l,
+      min: x,
+      default: x + 1
+    };
+  }
+  if (!e || !t)
     return m;
-  const t = Math.floor(a / 2);
+  const i = l ? m.xsmall.max + 1 : Math.floor(e / 2);
   m.small = {
-    max: a,
-    min: t,
-    default: t + 1
-  };
-  const i = m.small.max + 1;
-  m.medium = {
     max: e,
     min: i,
     default: i + 1
   };
-  const n = m.medium.max + 1;
+  const n = m.small.max + 1;
+  m.medium = {
+    max: t,
+    min: n,
+    default: n + 1
+  };
+  const s = m.medium.max + 1;
   return m.large = {
     max: 2e3,
     // TODO: decide upper limit
-    min: n,
-    default: n + 1
+    min: s,
+    default: s + 1
   }, m;
 };
 export {
-  s as getMaxWidthQueryForSize,
-  x as getSizesForBreakpoints
+  d as getMaxWidthQueryForSize,
+  f as getSizesForBreakpoints
 };

package/lib/browser/constants/sdk-version.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="0.17.7";exports.SDK_VERSION=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="0.17.8";exports.SDK_VERSION=e;

package/lib/browser/constants/sdk-version.mjs

@@ -1,4 +1,4 @@
-const o = "0.17.7";
+const o = "0.17.8";
 export {
   o as SDK_VERSION
 };

package/lib/browser/scripts/init-editing.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../constants/sdk-version.cjs"),y=require("../constants/target.cjs"),b=require("../functions/is-browser.cjs"),M=require("../functions/is-from-trusted-host.cjs"),B=require("../functions/register.cjs"),E=()=>{B.register("insertMenu",{name:"_default",default:!0,items:[{name:"Box"},{name:"Text"},{name:"Image"},{name:"Columns"},{name:"Core:Section"},{name:"Core:Button"},{name:"Embed"},{name:"Custom Code"}]})};let c=!1;const v=(o={})=>{var a,i;c||(c=!0,b.isBrowser()&&((a=window.parent)==null||a.postMessage({type:"builder.sdkInfo",data:{target:y.TARGET,version:f.SDK_VERSION,supportsPatchUpdates:!1,supportsAddBlockScoping:!0,supportsCustomBreakpoints:!0,blockLevelPersonalization:!0}},"*"),(i=window.parent)==null||i.postMessage({type:"builder.updateContent",data:{options:o}},"*"),window.addEventListener("message",u=>{var d,l;if(!M.isFromTrustedHost(o.trustedHosts,u))return;const{data:e}=u;if(e!=null&&e.type)switch(e.type){case"builder.evaluate":{const g=e.data.text,m=e.data.arguments||[],r=e.data.id,w=new Function(g);let t,s=null;try{t=w.apply(null,m)}catch(n){s=n}s?(d=window.parent)==null||d.postMessage({type:"builder.evaluateError",data:{id:r,error:s.message}},"*"):t&&typeof t.then=="function"?t.then(n=>{var p;(p=window.parent)==null||p.postMessage({type:"builder.evaluateResult",data:{id:r,result:n}},"*")}).catch(console.error):(l=window.parent)==null||l.postMessage({type:"builder.evaluateResult",data:{result:t,id:r}},"*");break}}})))};exports.registerInsertMenu=E;exports.setupBrowserForEditing=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../constants/sdk-version.cjs"),y=require("../constants/target.cjs"),b=require("../functions/is-browser.cjs"),B=require("../functions/is-from-trusted-host.cjs"),M=require("../functions/register.cjs"),E=()=>{M.register("insertMenu",{name:"_default",default:!0,items:[{name:"Box"},{name:"Text"},{name:"Image"},{name:"Columns"},{name:"Core:Section"},{name:"Core:Button"},{name:"Embed"},{name:"Custom Code"}]})};let c=!1;const S=(o={})=>{var a,i;c||(c=!0,b.isBrowser()&&((a=window.parent)==null||a.postMessage({type:"builder.sdkInfo",data:{target:y.TARGET,version:f.SDK_VERSION,supportsPatchUpdates:!1,supportsAddBlockScoping:!0,supportsCustomBreakpoints:!0,supportsXSmallBreakpoint:!0,blockLevelPersonalization:!0}},"*"),(i=window.parent)==null||i.postMessage({type:"builder.updateContent",data:{options:o}},"*"),window.addEventListener("message",u=>{var d,l;if(!B.isFromTrustedHost(o.trustedHosts,u))return;const{data:e}=u;if(e!=null&&e.type)switch(e.type){case"builder.evaluate":{const g=e.data.text,m=e.data.arguments||[],r=e.data.id,w=new Function(g);let t,s=null;try{t=w.apply(null,m)}catch(n){s=n}s?(d=window.parent)==null||d.postMessage({type:"builder.evaluateError",data:{id:r,error:s.message}},"*"):t&&typeof t.then=="function"?t.then(n=>{var p;(p=window.parent)==null||p.postMessage({type:"builder.evaluateResult",data:{id:r,result:n}},"*")}).catch(console.error):(l=window.parent)==null||l.postMessage({type:"builder.evaluateResult",data:{result:t,id:r}},"*");break}}})))};exports.registerInsertMenu=E;exports.setupBrowserForEditing=S;

package/lib/browser/scripts/init-editing.mjs

@@ -1,10 +1,10 @@
 import { SDK_VERSION as w } from "../constants/sdk-version.mjs";
 import { TARGET as y } from "../constants/target.mjs";
 import { isBrowser as b } from "../functions/is-browser.mjs";
-import { isFromTrustedHost as C } from "../functions/is-from-trusted-host.mjs";
-import { register as E } from "../functions/register.mjs";
-const x = () => {
-  E("insertMenu", {
+import { isFromTrustedHost as B } from "../functions/is-from-trusted-host.mjs";
+import { register as C } from "../functions/register.mjs";
+const S = () => {
+  C("insertMenu", {
     name: "_default",
     default: !0,
     items: [{
@@ -27,7 +27,7 @@ const x = () => {
   });
 };
 let m = !1;
-const S = (a = {}) => {
+const x = (a = {}) => {
   var n, i;
   m || (m = !0, b() && ((n = window.parent) == null || n.postMessage({
     type: "builder.sdkInfo",
@@ -39,6 +39,7 @@ const S = (a = {}) => {
       // scope our '+ add block' button styling
       supportsAddBlockScoping: !0,
       supportsCustomBreakpoints: !0,
+      supportsXSmallBreakpoint: !0,
       blockLevelPersonalization: !0
     }
   }, "*"), (i = window.parent) == null || i.postMessage({
@@ -48,7 +49,7 @@ const S = (a = {}) => {
     }
   }, "*"), window.addEventListener("message", (u) => {
     var p, d;
-    if (!C(a.trustedHosts, u))
+    if (!B(a.trustedHosts, u))
       return;
     const {
       data: e
@@ -91,6 +92,6 @@ const S = (a = {}) => {
   })));
 };
 export {
-  x as registerInsertMenu,
-  S as setupBrowserForEditing
+  S as registerInsertMenu,
+  x as setupBrowserForEditing
 };

package/lib/edge/components/block/components/block-styles.cjs

@@ -1 +1 @@
-"use strict";const o=require("react/jsx-runtime"),a=require("../../../constants/device-sizes.cjs"),j=require("../../../functions/camel-to-kebab-case.cjs"),c=require("../../../helpers/css.cjs"),b=require("../../../helpers/nullable.cjs"),z=require("../../inlined-styles.cjs");function F(i){const f=function(){const e=i.block;return b.checkIsDefined(e.hide)?!e.hide:b.checkIsDefined(e.show)?e.show:!0},u=function(){var C,k,g;const e=i.block,s=e.responsiveStyles,r=i.context.content,d=a.getSizesForBreakpoints(((C=r==null?void 0:r.meta)==null?void 0:C.breakpoints)||{}),m=s==null?void 0:s.large,y=s==null?void 0:s.medium,h=s==null?void 0:s.small,n=e.id;if(!n)return"";const v=m?c.createCssClass({className:n,styles:m}):"",B=y?c.createCssClass({className:n,styles:y,mediaQuery:a.getMaxWidthQueryForSize("medium",d)}):"",q=h?c.createCssClass({className:n,styles:h,mediaQuery:a.getMaxWidthQueryForSize("small",d)}):"",t=e.animations&&e.animations.find(l=>l.trigger==="hover");let S="";if(t){const l=((g=(k=t.steps)==null?void 0:k[1])==null?void 0:g.styles)||{};S=c.createCssClass({className:`${n}:hover`,styles:{...l,transition:`all ${t.duration}s ${j.camelToKebabCase(t.easing)}`,transitionDelay:t.delay?`${t.delay}s`:"0s"}})||""}return[v,B,q,S].join(" ")};return o.jsx(o.Fragment,{children:u()&&f()?o.jsx(o.Fragment,{children:o.jsx(z,{id:"builderio-block",styles:u(),nonce:i.context.nonce})}):null})}module.exports=F;
+"use strict";const a=require("react/jsx-runtime"),r=require("../../../constants/device-sizes.cjs"),$=require("../../../functions/camel-to-kebab-case.cjs"),o=require("../../../helpers/css.cjs"),B=require("../../../helpers/nullable.cjs"),w=require("../../inlined-styles.cjs");function W(i){const v=function(){const s=i.block;return B.checkIsDefined(s.hide)?!s.hide:B.checkIsDefined(s.show)?s.show:!0},u=function(){var k,x,g,b,f;const s=i.block,e=s.responsiveStyles,t=i.context.content,c=r.getSizesForBreakpoints(((k=t==null?void 0:t.meta)==null?void 0:k.breakpoints)||{}),z=!!((g=(x=t==null?void 0:t.meta)==null?void 0:x.breakpoints)!=null&&g.xsmall),d=e==null?void 0:e.large,y=e==null?void 0:e.medium,S=e==null?void 0:e.small,h=e==null?void 0:e.xsmall,n=s.id;if(!n)return"";const F=d?o.createCssClass({className:n,styles:d}):"",Q=y?o.createCssClass({className:n,styles:y,mediaQuery:r.getMaxWidthQueryForSize("medium",c)}):"",j=S?o.createCssClass({className:n,styles:S,mediaQuery:r.getMaxWidthQueryForSize("small",c)}):"",p=h&&z?o.createCssClass({className:n,styles:h,mediaQuery:r.getMaxWidthQueryForSize("xsmall",c)}):"",l=s.animations&&s.animations.find(m=>m.trigger==="hover");let C="";if(l){const m=((f=(b=l.steps)==null?void 0:b[1])==null?void 0:f.styles)||{};C=o.createCssClass({className:`${n}:hover`,styles:{...m,transition:`all ${l.duration}s ${$.camelToKebabCase(l.easing)}`,transitionDelay:l.delay?`${l.delay}s`:"0s"}})||""}return[F,Q,j,p,C].join(" ")};return a.jsx(a.Fragment,{children:u()&&v()?a.jsx(a.Fragment,{children:a.jsx(w,{id:"builderio-block",styles:u(),nonce:i.context.nonce})}):null})}module.exports=W;

package/lib/edge/components/block/components/block-styles.mjs

@@ -1,68 +1,76 @@
-import { jsx as a, Fragment as g } from "react/jsx-runtime";
-import { getSizesForBreakpoints as $, getMaxWidthQueryForSize as p } from "../../../constants/device-sizes.mjs";
-import { camelToKebabCase as z } from "../../../functions/camel-to-kebab-case.mjs";
-import { createCssClass as i } from "../../../helpers/css.mjs";
-import { checkIsDefined as b } from "../../../helpers/nullable.mjs";
-import F from "../../inlined-styles.mjs";
-function A(n) {
-  const B = function() {
-    const e = n.block;
-    return b(e.hide) ? !e.hide : b(e.show) ? e.show : !0;
-  }, c = function() {
-    var h, S, k;
-    const e = n.block, s = e.responsiveStyles, l = n.context.content, m = $(
-      ((h = l == null ? void 0 : l.meta) == null ? void 0 : h.breakpoints) || {}
-    ), d = s == null ? void 0 : s.large, u = s == null ? void 0 : s.medium, y = s == null ? void 0 : s.small, o = e.id;
+import { jsx as c, Fragment as b } from "react/jsx-runtime";
+import { getSizesForBreakpoints as D, getMaxWidthQueryForSize as m } from "../../../constants/device-sizes.mjs";
+import { camelToKebabCase as I } from "../../../functions/camel-to-kebab-case.mjs";
+import { createCssClass as n } from "../../../helpers/css.mjs";
+import { checkIsDefined as C } from "../../../helpers/nullable.mjs";
+import N from "../../inlined-styles.mjs";
+function U(a) {
+  const v = function() {
+    const e = a.block;
+    return C(e.hide) ? !e.hide : C(e.show) ? e.show : !0;
+  }, d = function() {
+    var k, p, x, g, B;
+    const e = a.block, s = e.responsiveStyles, t = a.context.content, i = D(
+      ((k = t == null ? void 0 : t.meta) == null ? void 0 : k.breakpoints) || {}
+    ), Q = !!((x = (p = t == null ? void 0 : t.meta) == null ? void 0 : p.breakpoints) != null && x.xsmall), u = s == null ? void 0 : s.large, y = s == null ? void 0 : s.medium, S = s == null ? void 0 : s.small, f = s == null ? void 0 : s.xsmall, o = e.id;
     if (!o)
       return "";
-    const v = d ? i({
+    const $ = u ? n({
       className: o,
-      styles: d
-    }) : "", x = u ? i({
+      styles: u
+    }) : "", z = y ? n({
       className: o,
-      styles: u,
-      mediaQuery: p(
+      styles: y,
+      mediaQuery: m(
         "medium",
-        m
+        i
       )
-    }) : "", w = y ? i({
+    }) : "", F = S ? n({
       className: o,
-      styles: y,
-      mediaQuery: p(
+      styles: S,
+      mediaQuery: m(
         "small",
-        m
+        i
+      )
+    }) : "", j = f && Q ? n({
+      className: o,
+      styles: f,
+      mediaQuery: m(
+        "xsmall",
+        i
       )
-    }) : "", t = e.animations && e.animations.find((r) => r.trigger === "hover");
-    let f = "";
-    if (t) {
-      const r = ((k = (S = t.steps) == null ? void 0 : S[1]) == null ? void 0 : k.styles) || {};
-      f = i({
+    }) : "", l = e.animations && e.animations.find((r) => r.trigger === "hover");
+    let h = "";
+    if (l) {
+      const r = ((B = (g = l.steps) == null ? void 0 : g[1]) == null ? void 0 : B.styles) || {};
+      h = n({
         className: `${o}:hover`,
         styles: {
           ...r,
-          transition: `all ${t.duration}s ${z(
-            t.easing
+          transition: `all ${l.duration}s ${I(
+            l.easing
           )}`,
-          transitionDelay: t.delay ? `${t.delay}s` : "0s"
+          transitionDelay: l.delay ? `${l.delay}s` : "0s"
         }
       }) || "";
     }
     return [
-      v,
-      x,
-      w,
-      f
+      $,
+      z,
+      F,
+      j,
+      h
     ].join(" ");
   };
-  return /* @__PURE__ */ a(g, { children: c() && B() ? /* @__PURE__ */ a(g, { children: /* @__PURE__ */ a(
-    F,
+  return /* @__PURE__ */ c(b, { children: d() && v() ? /* @__PURE__ */ c(b, { children: /* @__PURE__ */ c(
+    N,
     {
       id: "builderio-block",
-      styles: c(),
-      nonce: n.context.nonce
+      styles: d(),
+      nonce: a.context.nonce
     }
   ) }) : null });
 }
 export {
-  A as default
+  U as default
 };

package/lib/edge/constants/device-sizes.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../functions/fast-clone.cjs"),o={small:{min:320,default:321,max:640},medium:{min:641,default:642,max:991},large:{min:990,default:991,max:1200}},l=(t,a=o)=>`@media (max-width: ${a[t].max}px)`,s=({small:t,medium:a})=>{const e=r.fastClone(o);if(!t||!a)return e;const i=Math.floor(t/2);e.small={max:t,min:i,default:i+1};const m=e.small.max+1;e.medium={max:a,min:m,default:m+1};const n=e.medium.max+1;return e.large={max:2e3,min:n,default:n+1},e};exports.getMaxWidthQueryForSize=l;exports.getSizesForBreakpoints=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../functions/fast-clone.cjs"),r={xsmall:{min:0,default:160,max:320},small:{min:321,default:321,max:640},medium:{min:641,default:642,max:991},large:{min:990,default:991,max:1200}},x=(a,e=r)=>`@media (max-width: ${e[a].max}px)`,d=a=>{const e=u.fastClone(r);if(!a)return e;const{xsmall:m,small:t,medium:l}=a;if(m){const o=Math.floor(m/2);e.xsmall={max:m,min:o,default:o+1}}if(!t||!l)return e;const i=m?e.xsmall.max+1:Math.floor(t/2);e.small={max:t,min:i,default:i+1};const n=e.small.max+1;e.medium={max:l,min:n,default:n+1};const s=e.medium.max+1;return e.large={max:2e3,min:s,default:s+1},e};exports.getMaxWidthQueryForSize=x;exports.getSizesForBreakpoints=d;

package/lib/edge/constants/device-sizes.mjs

@@ -1,7 +1,12 @@
-import { fastClone as l } from "../functions/fast-clone.mjs";
+import { fastClone as r } from "../functions/fast-clone.mjs";
 const o = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -15,34 +20,46 @@ const o = {
     default: 991,
     max: 1200
   }
-}, s = (a, e = o) => `@media (max-width: ${e[a].max}px)`, x = ({
-  small: a,
-  medium: e
-}) => {
-  const m = l(o);
-  if (!a || !e)
+}, d = (a, m = o) => `@media (max-width: ${m[a].max}px)`, f = (a) => {
+  const m = r(o);
+  if (!a)
+    return m;
+  const {
+    xsmall: l,
+    small: e,
+    medium: t
+  } = a;
+  if (l) {
+    const x = Math.floor(l / 2);
+    m.xsmall = {
+      max: l,
+      min: x,
+      default: x + 1
+    };
+  }
+  if (!e || !t)
     return m;
-  const t = Math.floor(a / 2);
+  const i = l ? m.xsmall.max + 1 : Math.floor(e / 2);
   m.small = {
-    max: a,
-    min: t,
-    default: t + 1
-  };
-  const i = m.small.max + 1;
-  m.medium = {
     max: e,
     min: i,
     default: i + 1
   };
-  const n = m.medium.max + 1;
+  const n = m.small.max + 1;
+  m.medium = {
+    max: t,
+    min: n,
+    default: n + 1
+  };
+  const s = m.medium.max + 1;
   return m.large = {
     max: 2e3,
     // TODO: decide upper limit
-    min: n,
-    default: n + 1
+    min: s,
+    default: s + 1
   }, m;
 };
 export {
-  s as getMaxWidthQueryForSize,
-  x as getSizesForBreakpoints
+  d as getMaxWidthQueryForSize,
+  f as getSizesForBreakpoints
 };

package/lib/edge/constants/sdk-version.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="0.17.7";exports.SDK_VERSION=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="0.17.8";exports.SDK_VERSION=e;

package/lib/edge/constants/sdk-version.mjs

@@ -1,4 +1,4 @@
-const o = "0.17.7";
+const o = "0.17.8";
 export {
   o as SDK_VERSION
 };

package/lib/edge/scripts/init-editing.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../constants/sdk-version.cjs"),y=require("../constants/target.cjs"),b=require("../functions/is-browser.cjs"),M=require("../functions/is-from-trusted-host.cjs"),B=require("../functions/register.cjs"),E=()=>{B.register("insertMenu",{name:"_default",default:!0,items:[{name:"Box"},{name:"Text"},{name:"Image"},{name:"Columns"},{name:"Core:Section"},{name:"Core:Button"},{name:"Embed"},{name:"Custom Code"}]})};let c=!1;const v=(o={})=>{var a,i;c||(c=!0,b.isBrowser()&&((a=window.parent)==null||a.postMessage({type:"builder.sdkInfo",data:{target:y.TARGET,version:f.SDK_VERSION,supportsPatchUpdates:!1,supportsAddBlockScoping:!0,supportsCustomBreakpoints:!0,blockLevelPersonalization:!0}},"*"),(i=window.parent)==null||i.postMessage({type:"builder.updateContent",data:{options:o}},"*"),window.addEventListener("message",u=>{var d,l;if(!M.isFromTrustedHost(o.trustedHosts,u))return;const{data:e}=u;if(e!=null&&e.type)switch(e.type){case"builder.evaluate":{const g=e.data.text,m=e.data.arguments||[],r=e.data.id,w=new Function(g);let t,s=null;try{t=w.apply(null,m)}catch(n){s=n}s?(d=window.parent)==null||d.postMessage({type:"builder.evaluateError",data:{id:r,error:s.message}},"*"):t&&typeof t.then=="function"?t.then(n=>{var p;(p=window.parent)==null||p.postMessage({type:"builder.evaluateResult",data:{id:r,result:n}},"*")}).catch(console.error):(l=window.parent)==null||l.postMessage({type:"builder.evaluateResult",data:{result:t,id:r}},"*");break}}})))};exports.registerInsertMenu=E;exports.setupBrowserForEditing=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../constants/sdk-version.cjs"),y=require("../constants/target.cjs"),b=require("../functions/is-browser.cjs"),B=require("../functions/is-from-trusted-host.cjs"),M=require("../functions/register.cjs"),E=()=>{M.register("insertMenu",{name:"_default",default:!0,items:[{name:"Box"},{name:"Text"},{name:"Image"},{name:"Columns"},{name:"Core:Section"},{name:"Core:Button"},{name:"Embed"},{name:"Custom Code"}]})};let c=!1;const S=(o={})=>{var a,i;c||(c=!0,b.isBrowser()&&((a=window.parent)==null||a.postMessage({type:"builder.sdkInfo",data:{target:y.TARGET,version:f.SDK_VERSION,supportsPatchUpdates:!1,supportsAddBlockScoping:!0,supportsCustomBreakpoints:!0,supportsXSmallBreakpoint:!0,blockLevelPersonalization:!0}},"*"),(i=window.parent)==null||i.postMessage({type:"builder.updateContent",data:{options:o}},"*"),window.addEventListener("message",u=>{var d,l;if(!B.isFromTrustedHost(o.trustedHosts,u))return;const{data:e}=u;if(e!=null&&e.type)switch(e.type){case"builder.evaluate":{const g=e.data.text,m=e.data.arguments||[],r=e.data.id,w=new Function(g);let t,s=null;try{t=w.apply(null,m)}catch(n){s=n}s?(d=window.parent)==null||d.postMessage({type:"builder.evaluateError",data:{id:r,error:s.message}},"*"):t&&typeof t.then=="function"?t.then(n=>{var p;(p=window.parent)==null||p.postMessage({type:"builder.evaluateResult",data:{id:r,result:n}},"*")}).catch(console.error):(l=window.parent)==null||l.postMessage({type:"builder.evaluateResult",data:{result:t,id:r}},"*");break}}})))};exports.registerInsertMenu=E;exports.setupBrowserForEditing=S;

package/lib/edge/scripts/init-editing.mjs

@@ -1,10 +1,10 @@
 import { SDK_VERSION as w } from "../constants/sdk-version.mjs";
 import { TARGET as y } from "../constants/target.mjs";
 import { isBrowser as b } from "../functions/is-browser.mjs";
-import { isFromTrustedHost as C } from "../functions/is-from-trusted-host.mjs";
-import { register as E } from "../functions/register.mjs";
-const x = () => {
-  E("insertMenu", {
+import { isFromTrustedHost as B } from "../functions/is-from-trusted-host.mjs";
+import { register as C } from "../functions/register.mjs";
+const S = () => {
+  C("insertMenu", {
     name: "_default",
     default: !0,
     items: [{
@@ -27,7 +27,7 @@ const x = () => {
   });
 };
 let m = !1;
-const S = (a = {}) => {
+const x = (a = {}) => {
   var n, i;
   m || (m = !0, b() && ((n = window.parent) == null || n.postMessage({
     type: "builder.sdkInfo",
@@ -39,6 +39,7 @@ const S = (a = {}) => {
       // scope our '+ add block' button styling
       supportsAddBlockScoping: !0,
       supportsCustomBreakpoints: !0,
+      supportsXSmallBreakpoint: !0,
       blockLevelPersonalization: !0
     }
   }, "*"), (i = window.parent) == null || i.postMessage({
@@ -48,7 +49,7 @@ const S = (a = {}) => {
     }
   }, "*"), window.addEventListener("message", (u) => {
     var p, d;
-    if (!C(a.trustedHosts, u))
+    if (!B(a.trustedHosts, u))
       return;
     const {
       data: e
@@ -91,6 +92,6 @@ const S = (a = {}) => {
   })));
 };
 export {
-  x as registerInsertMenu,
-  S as setupBrowserForEditing
+  S as registerInsertMenu,
+  x as setupBrowserForEditing
 };

package/lib/node/components/block/components/block-styles.cjs

@@ -1 +1 @@
-"use strict";const o=require("react/jsx-runtime"),a=require("../../../constants/device-sizes.cjs"),j=require("../../../functions/camel-to-kebab-case.cjs"),c=require("../../../helpers/css.cjs"),b=require("../../../helpers/nullable.cjs"),z=require("../../inlined-styles.cjs");function F(i){const f=function(){const e=i.block;return b.checkIsDefined(e.hide)?!e.hide:b.checkIsDefined(e.show)?e.show:!0},u=function(){var C,k,g;const e=i.block,s=e.responsiveStyles,r=i.context.content,d=a.getSizesForBreakpoints(((C=r==null?void 0:r.meta)==null?void 0:C.breakpoints)||{}),m=s==null?void 0:s.large,y=s==null?void 0:s.medium,h=s==null?void 0:s.small,n=e.id;if(!n)return"";const v=m?c.createCssClass({className:n,styles:m}):"",B=y?c.createCssClass({className:n,styles:y,mediaQuery:a.getMaxWidthQueryForSize("medium",d)}):"",q=h?c.createCssClass({className:n,styles:h,mediaQuery:a.getMaxWidthQueryForSize("small",d)}):"",t=e.animations&&e.animations.find(l=>l.trigger==="hover");let S="";if(t){const l=((g=(k=t.steps)==null?void 0:k[1])==null?void 0:g.styles)||{};S=c.createCssClass({className:`${n}:hover`,styles:{...l,transition:`all ${t.duration}s ${j.camelToKebabCase(t.easing)}`,transitionDelay:t.delay?`${t.delay}s`:"0s"}})||""}return[v,B,q,S].join(" ")};return o.jsx(o.Fragment,{children:u()&&f()?o.jsx(o.Fragment,{children:o.jsx(z,{id:"builderio-block",styles:u(),nonce:i.context.nonce})}):null})}module.exports=F;
+"use strict";const a=require("react/jsx-runtime"),r=require("../../../constants/device-sizes.cjs"),$=require("../../../functions/camel-to-kebab-case.cjs"),o=require("../../../helpers/css.cjs"),B=require("../../../helpers/nullable.cjs"),w=require("../../inlined-styles.cjs");function W(i){const v=function(){const s=i.block;return B.checkIsDefined(s.hide)?!s.hide:B.checkIsDefined(s.show)?s.show:!0},u=function(){var k,x,g,b,f;const s=i.block,e=s.responsiveStyles,t=i.context.content,c=r.getSizesForBreakpoints(((k=t==null?void 0:t.meta)==null?void 0:k.breakpoints)||{}),z=!!((g=(x=t==null?void 0:t.meta)==null?void 0:x.breakpoints)!=null&&g.xsmall),d=e==null?void 0:e.large,y=e==null?void 0:e.medium,S=e==null?void 0:e.small,h=e==null?void 0:e.xsmall,n=s.id;if(!n)return"";const F=d?o.createCssClass({className:n,styles:d}):"",Q=y?o.createCssClass({className:n,styles:y,mediaQuery:r.getMaxWidthQueryForSize("medium",c)}):"",j=S?o.createCssClass({className:n,styles:S,mediaQuery:r.getMaxWidthQueryForSize("small",c)}):"",p=h&&z?o.createCssClass({className:n,styles:h,mediaQuery:r.getMaxWidthQueryForSize("xsmall",c)}):"",l=s.animations&&s.animations.find(m=>m.trigger==="hover");let C="";if(l){const m=((f=(b=l.steps)==null?void 0:b[1])==null?void 0:f.styles)||{};C=o.createCssClass({className:`${n}:hover`,styles:{...m,transition:`all ${l.duration}s ${$.camelToKebabCase(l.easing)}`,transitionDelay:l.delay?`${l.delay}s`:"0s"}})||""}return[F,Q,j,p,C].join(" ")};return a.jsx(a.Fragment,{children:u()&&v()?a.jsx(a.Fragment,{children:a.jsx(w,{id:"builderio-block",styles:u(),nonce:i.context.nonce})}):null})}module.exports=W;

package/lib/node/components/block/components/block-styles.mjs

@@ -1,68 +1,76 @@
-import { jsx as a, Fragment as g } from "react/jsx-runtime";
-import { getSizesForBreakpoints as $, getMaxWidthQueryForSize as p } from "../../../constants/device-sizes.mjs";
-import { camelToKebabCase as z } from "../../../functions/camel-to-kebab-case.mjs";
-import { createCssClass as i } from "../../../helpers/css.mjs";
-import { checkIsDefined as b } from "../../../helpers/nullable.mjs";
-import F from "../../inlined-styles.mjs";
-function A(n) {
-  const B = function() {
-    const e = n.block;
-    return b(e.hide) ? !e.hide : b(e.show) ? e.show : !0;
-  }, c = function() {
-    var h, S, k;
-    const e = n.block, s = e.responsiveStyles, l = n.context.content, m = $(
-      ((h = l == null ? void 0 : l.meta) == null ? void 0 : h.breakpoints) || {}
-    ), d = s == null ? void 0 : s.large, u = s == null ? void 0 : s.medium, y = s == null ? void 0 : s.small, o = e.id;
+import { jsx as c, Fragment as b } from "react/jsx-runtime";
+import { getSizesForBreakpoints as D, getMaxWidthQueryForSize as m } from "../../../constants/device-sizes.mjs";
+import { camelToKebabCase as I } from "../../../functions/camel-to-kebab-case.mjs";
+import { createCssClass as n } from "../../../helpers/css.mjs";
+import { checkIsDefined as C } from "../../../helpers/nullable.mjs";
+import N from "../../inlined-styles.mjs";
+function U(a) {
+  const v = function() {
+    const e = a.block;
+    return C(e.hide) ? !e.hide : C(e.show) ? e.show : !0;
+  }, d = function() {
+    var k, p, x, g, B;
+    const e = a.block, s = e.responsiveStyles, t = a.context.content, i = D(
+      ((k = t == null ? void 0 : t.meta) == null ? void 0 : k.breakpoints) || {}
+    ), Q = !!((x = (p = t == null ? void 0 : t.meta) == null ? void 0 : p.breakpoints) != null && x.xsmall), u = s == null ? void 0 : s.large, y = s == null ? void 0 : s.medium, S = s == null ? void 0 : s.small, f = s == null ? void 0 : s.xsmall, o = e.id;
     if (!o)
       return "";
-    const v = d ? i({
+    const $ = u ? n({
       className: o,
-      styles: d
-    }) : "", x = u ? i({
+      styles: u
+    }) : "", z = y ? n({
       className: o,
-      styles: u,
-      mediaQuery: p(
+      styles: y,
+      mediaQuery: m(
         "medium",
-        m
+        i
       )
-    }) : "", w = y ? i({
+    }) : "", F = S ? n({
       className: o,
-      styles: y,
-      mediaQuery: p(
+      styles: S,
+      mediaQuery: m(
         "small",
-        m
+        i
+      )
+    }) : "", j = f && Q ? n({
+      className: o,
+      styles: f,
+      mediaQuery: m(
+        "xsmall",
+        i
       )
-    }) : "", t = e.animations && e.animations.find((r) => r.trigger === "hover");
-    let f = "";
-    if (t) {
-      const r = ((k = (S = t.steps) == null ? void 0 : S[1]) == null ? void 0 : k.styles) || {};
-      f = i({
+    }) : "", l = e.animations && e.animations.find((r) => r.trigger === "hover");
+    let h = "";
+    if (l) {
+      const r = ((B = (g = l.steps) == null ? void 0 : g[1]) == null ? void 0 : B.styles) || {};
+      h = n({
         className: `${o}:hover`,
         styles: {
           ...r,
-          transition: `all ${t.duration}s ${z(
-            t.easing
+          transition: `all ${l.duration}s ${I(
+            l.easing
           )}`,
-          transitionDelay: t.delay ? `${t.delay}s` : "0s"
+          transitionDelay: l.delay ? `${l.delay}s` : "0s"
         }
       }) || "";
     }
     return [
-      v,
-      x,
-      w,
-      f
+      $,
+      z,
+      F,
+      j,
+      h
     ].join(" ");
   };
-  return /* @__PURE__ */ a(g, { children: c() && B() ? /* @__PURE__ */ a(g, { children: /* @__PURE__ */ a(
-    F,
+  return /* @__PURE__ */ c(b, { children: d() && v() ? /* @__PURE__ */ c(b, { children: /* @__PURE__ */ c(
+    N,
     {
       id: "builderio-block",
-      styles: c(),
-      nonce: n.context.nonce
+      styles: d(),
+      nonce: a.context.nonce
     }
   ) }) : null });
 }
 export {
-  A as default
+  U as default
 };

package/lib/node/constants/device-sizes.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../functions/fast-clone.cjs"),o={small:{min:320,default:321,max:640},medium:{min:641,default:642,max:991},large:{min:990,default:991,max:1200}},l=(t,a=o)=>`@media (max-width: ${a[t].max}px)`,s=({small:t,medium:a})=>{const e=r.fastClone(o);if(!t||!a)return e;const i=Math.floor(t/2);e.small={max:t,min:i,default:i+1};const m=e.small.max+1;e.medium={max:a,min:m,default:m+1};const n=e.medium.max+1;return e.large={max:2e3,min:n,default:n+1},e};exports.getMaxWidthQueryForSize=l;exports.getSizesForBreakpoints=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../functions/fast-clone.cjs"),r={xsmall:{min:0,default:160,max:320},small:{min:321,default:321,max:640},medium:{min:641,default:642,max:991},large:{min:990,default:991,max:1200}},x=(a,e=r)=>`@media (max-width: ${e[a].max}px)`,d=a=>{const e=u.fastClone(r);if(!a)return e;const{xsmall:m,small:t,medium:l}=a;if(m){const o=Math.floor(m/2);e.xsmall={max:m,min:o,default:o+1}}if(!t||!l)return e;const i=m?e.xsmall.max+1:Math.floor(t/2);e.small={max:t,min:i,default:i+1};const n=e.small.max+1;e.medium={max:l,min:n,default:n+1};const s=e.medium.max+1;return e.large={max:2e3,min:s,default:s+1},e};exports.getMaxWidthQueryForSize=x;exports.getSizesForBreakpoints=d;

package/lib/node/constants/device-sizes.mjs

@@ -1,7 +1,12 @@
-import { fastClone as l } from "../functions/fast-clone.mjs";
+import { fastClone as r } from "../functions/fast-clone.mjs";
 const o = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -15,34 +20,46 @@ const o = {
     default: 991,
     max: 1200
   }
-}, s = (a, e = o) => `@media (max-width: ${e[a].max}px)`, x = ({
-  small: a,
-  medium: e
-}) => {
-  const m = l(o);
-  if (!a || !e)
+}, d = (a, m = o) => `@media (max-width: ${m[a].max}px)`, f = (a) => {
+  const m = r(o);
+  if (!a)
+    return m;
+  const {
+    xsmall: l,
+    small: e,
+    medium: t
+  } = a;
+  if (l) {
+    const x = Math.floor(l / 2);
+    m.xsmall = {
+      max: l,
+      min: x,
+      default: x + 1
+    };
+  }
+  if (!e || !t)
     return m;
-  const t = Math.floor(a / 2);
+  const i = l ? m.xsmall.max + 1 : Math.floor(e / 2);
   m.small = {
-    max: a,
-    min: t,
-    default: t + 1
-  };
-  const i = m.small.max + 1;
-  m.medium = {
     max: e,
     min: i,
     default: i + 1
   };
-  const n = m.medium.max + 1;
+  const n = m.small.max + 1;
+  m.medium = {
+    max: t,
+    min: n,
+    default: n + 1
+  };
+  const s = m.medium.max + 1;
   return m.large = {
     max: 2e3,
     // TODO: decide upper limit
-    min: n,
-    default: n + 1
+    min: s,
+    default: s + 1
   }, m;
 };
 export {
-  s as getMaxWidthQueryForSize,
-  x as getSizesForBreakpoints
+  d as getMaxWidthQueryForSize,
+  f as getSizesForBreakpoints
 };

package/lib/node/constants/sdk-version.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="0.17.7";exports.SDK_VERSION=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="0.17.8";exports.SDK_VERSION=e;

package/lib/node/constants/sdk-version.mjs

@@ -1,4 +1,4 @@
-const o = "0.17.7";
+const o = "0.17.8";
 export {
   o as SDK_VERSION
 };

package/lib/node/scripts/init-editing.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../constants/sdk-version.cjs"),y=require("../constants/target.cjs"),b=require("../functions/is-browser.cjs"),M=require("../functions/is-from-trusted-host.cjs"),B=require("../functions/register.cjs"),E=()=>{B.register("insertMenu",{name:"_default",default:!0,items:[{name:"Box"},{name:"Text"},{name:"Image"},{name:"Columns"},{name:"Core:Section"},{name:"Core:Button"},{name:"Embed"},{name:"Custom Code"}]})};let c=!1;const v=(o={})=>{var a,i;c||(c=!0,b.isBrowser()&&((a=window.parent)==null||a.postMessage({type:"builder.sdkInfo",data:{target:y.TARGET,version:f.SDK_VERSION,supportsPatchUpdates:!1,supportsAddBlockScoping:!0,supportsCustomBreakpoints:!0,blockLevelPersonalization:!0}},"*"),(i=window.parent)==null||i.postMessage({type:"builder.updateContent",data:{options:o}},"*"),window.addEventListener("message",u=>{var d,l;if(!M.isFromTrustedHost(o.trustedHosts,u))return;const{data:e}=u;if(e!=null&&e.type)switch(e.type){case"builder.evaluate":{const g=e.data.text,m=e.data.arguments||[],r=e.data.id,w=new Function(g);let t,s=null;try{t=w.apply(null,m)}catch(n){s=n}s?(d=window.parent)==null||d.postMessage({type:"builder.evaluateError",data:{id:r,error:s.message}},"*"):t&&typeof t.then=="function"?t.then(n=>{var p;(p=window.parent)==null||p.postMessage({type:"builder.evaluateResult",data:{id:r,result:n}},"*")}).catch(console.error):(l=window.parent)==null||l.postMessage({type:"builder.evaluateResult",data:{result:t,id:r}},"*");break}}})))};exports.registerInsertMenu=E;exports.setupBrowserForEditing=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../constants/sdk-version.cjs"),y=require("../constants/target.cjs"),b=require("../functions/is-browser.cjs"),B=require("../functions/is-from-trusted-host.cjs"),M=require("../functions/register.cjs"),E=()=>{M.register("insertMenu",{name:"_default",default:!0,items:[{name:"Box"},{name:"Text"},{name:"Image"},{name:"Columns"},{name:"Core:Section"},{name:"Core:Button"},{name:"Embed"},{name:"Custom Code"}]})};let c=!1;const S=(o={})=>{var a,i;c||(c=!0,b.isBrowser()&&((a=window.parent)==null||a.postMessage({type:"builder.sdkInfo",data:{target:y.TARGET,version:f.SDK_VERSION,supportsPatchUpdates:!1,supportsAddBlockScoping:!0,supportsCustomBreakpoints:!0,supportsXSmallBreakpoint:!0,blockLevelPersonalization:!0}},"*"),(i=window.parent)==null||i.postMessage({type:"builder.updateContent",data:{options:o}},"*"),window.addEventListener("message",u=>{var d,l;if(!B.isFromTrustedHost(o.trustedHosts,u))return;const{data:e}=u;if(e!=null&&e.type)switch(e.type){case"builder.evaluate":{const g=e.data.text,m=e.data.arguments||[],r=e.data.id,w=new Function(g);let t,s=null;try{t=w.apply(null,m)}catch(n){s=n}s?(d=window.parent)==null||d.postMessage({type:"builder.evaluateError",data:{id:r,error:s.message}},"*"):t&&typeof t.then=="function"?t.then(n=>{var p;(p=window.parent)==null||p.postMessage({type:"builder.evaluateResult",data:{id:r,result:n}},"*")}).catch(console.error):(l=window.parent)==null||l.postMessage({type:"builder.evaluateResult",data:{result:t,id:r}},"*");break}}})))};exports.registerInsertMenu=E;exports.setupBrowserForEditing=S;

package/lib/node/scripts/init-editing.mjs

@@ -1,10 +1,10 @@
 import { SDK_VERSION as w } from "../constants/sdk-version.mjs";
 import { TARGET as y } from "../constants/target.mjs";
 import { isBrowser as b } from "../functions/is-browser.mjs";
-import { isFromTrustedHost as C } from "../functions/is-from-trusted-host.mjs";
-import { register as E } from "../functions/register.mjs";
-const x = () => {
-  E("insertMenu", {
+import { isFromTrustedHost as B } from "../functions/is-from-trusted-host.mjs";
+import { register as C } from "../functions/register.mjs";
+const S = () => {
+  C("insertMenu", {
     name: "_default",
     default: !0,
     items: [{
@@ -27,7 +27,7 @@ const x = () => {
   });
 };
 let m = !1;
-const S = (a = {}) => {
+const x = (a = {}) => {
   var n, i;
   m || (m = !0, b() && ((n = window.parent) == null || n.postMessage({
     type: "builder.sdkInfo",
@@ -39,6 +39,7 @@ const S = (a = {}) => {
       // scope our '+ add block' button styling
       supportsAddBlockScoping: !0,
       supportsCustomBreakpoints: !0,
+      supportsXSmallBreakpoint: !0,
       blockLevelPersonalization: !0
     }
   }, "*"), (i = window.parent) == null || i.postMessage({
@@ -48,7 +49,7 @@ const S = (a = {}) => {
     }
   }, "*"), window.addEventListener("message", (u) => {
     var p, d;
-    if (!C(a.trustedHosts, u))
+    if (!B(a.trustedHosts, u))
       return;
     const {
       data: e
@@ -91,6 +92,6 @@ const S = (a = {}) => {
   })));
 };
 export {
-  x as registerInsertMenu,
-  S as setupBrowserForEditing
+  S as registerInsertMenu,
+  x as setupBrowserForEditing
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-nextjs",
   "description": "Builder.io RSC SDK for NextJS App Directory",
-  "version": "0.17.7",
+  "version": "0.17.8",
   "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/nextjs",
   "repository": {
     "type": "git",

package/types/cjs/constants/device-sizes.d.ts

@@ -1,4 +1,4 @@
-export type SizeName = 'large' | 'medium' | 'small';
+export type SizeName = 'large' | 'medium' | 'small' | 'xsmall';
 interface Size {
     min: number;
     default: number;
@@ -6,8 +6,9 @@ interface Size {
 }
 export declare const getMaxWidthQueryForSize: (size: SizeName, sizeValues?: Record<SizeName, Size>) => string;
 interface Breakpoints {
+    xsmall?: number;
     small?: number;
     medium?: number;
 }
-export declare const getSizesForBreakpoints: ({ small, medium }: Breakpoints) => Record<SizeName, Size>;
+export declare const getSizesForBreakpoints: (breakpoints: Breakpoints) => Record<SizeName, Size>;
 export {};

package/types/cjs/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.17.7";
+export declare const SDK_VERSION = "0.17.8";

package/types/cjs/types/builder-block.d.ts

@@ -37,7 +37,6 @@ export interface BuilderBlock {
         large?: Partial<CSSStyleDeclaration>;
         medium?: Partial<CSSStyleDeclaration>;
         small?: Partial<CSSStyleDeclaration>;
-        /** @deprecated */
         xsmall?: Partial<CSSStyleDeclaration>;
     };
     component?: {

package/types/cjs/types/builder-content.d.ts

@@ -2,6 +2,7 @@ import type { BuilderBlock } from './builder-block.js';
 import type { Input } from './input.js';
 import type { Nullable } from './typescript.js';
 export interface Breakpoints {
+    xsmall?: number;
     small: number;
     medium: number;
 }

package/types/esm/constants/device-sizes.d.ts

@@ -1,4 +1,4 @@
-export type SizeName = 'large' | 'medium' | 'small';
+export type SizeName = 'large' | 'medium' | 'small' | 'xsmall';
 interface Size {
     min: number;
     default: number;
@@ -6,8 +6,9 @@ interface Size {
 }
 export declare const getMaxWidthQueryForSize: (size: SizeName, sizeValues?: Record<SizeName, Size>) => string;
 interface Breakpoints {
+    xsmall?: number;
     small?: number;
     medium?: number;
 }
-export declare const getSizesForBreakpoints: ({ small, medium }: Breakpoints) => Record<SizeName, Size>;
+export declare const getSizesForBreakpoints: (breakpoints: Breakpoints) => Record<SizeName, Size>;
 export {};

package/types/esm/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.17.7";
+export declare const SDK_VERSION = "0.17.8";

package/types/esm/types/builder-block.d.ts

@@ -37,7 +37,6 @@ export interface BuilderBlock {
         large?: Partial<CSSStyleDeclaration>;
         medium?: Partial<CSSStyleDeclaration>;
         small?: Partial<CSSStyleDeclaration>;
-        /** @deprecated */
         xsmall?: Partial<CSSStyleDeclaration>;
     };
     component?: {

package/types/esm/types/builder-content.d.ts

@@ -2,6 +2,7 @@ import type { BuilderBlock } from './builder-block.js';
 import type { Input } from './input.js';
 import type { Nullable } from './typescript.js';
 export interface Breakpoints {
+    xsmall?: number;
     small: number;
     medium: number;
 }