@builder.io/sdk-solid 3.0.6 → 3.0.7

package/dist/index.d.ts

@@ -39,7 +39,6 @@ interface BuilderBlock {
         large?: Partial<CSSStyleDeclaration>;
         medium?: Partial<CSSStyleDeclaration>;
         small?: Partial<CSSStyleDeclaration>;
-        /** @deprecated */
         xsmall?: Partial<CSSStyleDeclaration>;
     };
     component?: {
@@ -243,6 +242,7 @@ type Dictionary<T> = {
 };
 
 interface Breakpoints {
+    xsmall?: number;
     small: number;
     medium: number;
 }

package/lib/browser/dev.js

@@ -939,8 +939,13 @@ var provideBuilderContext = (block, context) => {
 
 // src/constants/device-sizes.ts
 var SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -956,15 +961,28 @@ var SIZES = {
   }
 };
 var getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-var getSizesForBreakpoints = ({
-  small,
-  medium
-}) => {
+var getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
@@ -1022,9 +1040,11 @@ function BlockStyles(props) {
     const styles = processedBlock.responsiveStyles;
     const content = props.context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+    const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -1043,6 +1063,11 @@ function BlockStyles(props) {
       styles: smallStyles,
       mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
@@ -1056,7 +1081,7 @@ function BlockStyles(props) {
         }
       }) || "";
     }
-    return [largeStylesClass, mediumStylesClass, smallStylesClass, hoverStylesClass].join(" ");
+    return [largeStylesClass, mediumStylesClass, smallStylesClass, xsmallStylesClass, hoverStylesClass].join(" ");
   });
   return createComponent(Show, {
     get when() {
@@ -5283,7 +5308,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.6";
+var SDK_VERSION = "3.0.7";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5907,6 +5932,7 @@ var setupBrowserForEditing = (options = {}) => {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: TARGET === "reactNative" ? false : true,
         blockLevelPersonalization: true
       }
     }, "*");

package/lib/browser/dev.jsx

@@ -935,8 +935,13 @@ import { Show as Show2, createMemo } from "solid-js";
 
 // src/constants/device-sizes.ts
 var SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -952,15 +957,28 @@ var SIZES = {
   }
 };
 var getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-var getSizesForBreakpoints = ({
-  small,
-  medium
-}) => {
+var getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
@@ -1011,9 +1029,13 @@ function BlockStyles(props) {
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
       content?.meta?.breakpoints || {}
     );
+    const contentHasXSmallBreakpoint = Boolean(
+      content?.meta?.breakpoints?.xsmall
+    );
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -1038,6 +1060,14 @@ function BlockStyles(props) {
         sizesWithUpdatedBreakpoints
       )
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize(
+        "xsmall",
+        sizesWithUpdatedBreakpoints
+      )
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
@@ -1057,6 +1087,7 @@ function BlockStyles(props) {
       largeStylesClass,
       mediumStylesClass,
       smallStylesClass,
+      xsmallStylesClass,
       hoverStylesClass
     ].join(" ");
   });
@@ -4768,7 +4799,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.6";
+var SDK_VERSION = "3.0.7";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5392,6 +5423,7 @@ var setupBrowserForEditing = (options = {}) => {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: TARGET === "reactNative" ? false : true,
         blockLevelPersonalization: true
       }
     }, "*");

package/lib/browser/index.js

@@ -930,8 +930,13 @@ var provideBuilderContext = (block, context) => {
 
 // src/constants/device-sizes.ts
 var SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -947,15 +952,28 @@ var SIZES = {
   }
 };
 var getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-var getSizesForBreakpoints = ({
-  small,
-  medium
-}) => {
+var getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
@@ -1013,9 +1031,11 @@ function BlockStyles(props) {
     const styles = processedBlock.responsiveStyles;
     const content = props.context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+    const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -1034,6 +1054,11 @@ function BlockStyles(props) {
       styles: smallStyles,
       mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
@@ -1047,7 +1072,7 @@ function BlockStyles(props) {
         }
       }) || "";
     }
-    return [largeStylesClass, mediumStylesClass, smallStylesClass, hoverStylesClass].join(" ");
+    return [largeStylesClass, mediumStylesClass, smallStylesClass, xsmallStylesClass, hoverStylesClass].join(" ");
   });
   return createComponent(Show, {
     get when() {
@@ -5270,7 +5295,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.6";
+var SDK_VERSION = "3.0.7";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5888,6 +5913,7 @@ var setupBrowserForEditing = (options = {}) => {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: TARGET === "reactNative" ? false : true,
         blockLevelPersonalization: true
       }
     }, "*");

package/lib/browser/index.jsx

@@ -928,8 +928,13 @@ import { Show as Show2, createMemo } from "solid-js";
 
 // src/constants/device-sizes.ts
 var SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -945,15 +950,28 @@ var SIZES = {
   }
 };
 var getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-var getSizesForBreakpoints = ({
-  small,
-  medium
-}) => {
+var getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
@@ -1004,9 +1022,13 @@ function BlockStyles(props) {
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
       content?.meta?.breakpoints || {}
     );
+    const contentHasXSmallBreakpoint = Boolean(
+      content?.meta?.breakpoints?.xsmall
+    );
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -1031,6 +1053,14 @@ function BlockStyles(props) {
         sizesWithUpdatedBreakpoints
       )
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize(
+        "xsmall",
+        sizesWithUpdatedBreakpoints
+      )
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
@@ -1050,6 +1080,7 @@ function BlockStyles(props) {
       largeStylesClass,
       mediumStylesClass,
       smallStylesClass,
+      xsmallStylesClass,
       hoverStylesClass
     ].join(" ");
   });
@@ -4757,7 +4788,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.6";
+var SDK_VERSION = "3.0.7";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5375,6 +5406,7 @@ var setupBrowserForEditing = (options = {}) => {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: TARGET === "reactNative" ? false : true,
         blockLevelPersonalization: true
       }
     }, "*");

package/lib/edge/dev.js

@@ -4120,8 +4120,13 @@ var provideBuilderContext = (block, context) => {
 
 // src/constants/device-sizes.ts
 var SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -4137,15 +4142,28 @@ var SIZES = {
   }
 };
 var getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-var getSizesForBreakpoints = ({
-  small,
-  medium
-}) => {
+var getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
@@ -4203,9 +4221,11 @@ function BlockStyles(props) {
     const styles = processedBlock.responsiveStyles;
     const content = props.context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+    const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -4224,6 +4244,11 @@ function BlockStyles(props) {
       styles: smallStyles,
       mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
@@ -4237,7 +4262,7 @@ function BlockStyles(props) {
         }
       }) || "";
     }
-    return [largeStylesClass, mediumStylesClass, smallStylesClass, hoverStylesClass].join(" ");
+    return [largeStylesClass, mediumStylesClass, smallStylesClass, xsmallStylesClass, hoverStylesClass].join(" ");
   });
   return createComponent(Show, {
     get when() {
@@ -8464,7 +8489,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.6";
+var SDK_VERSION = "3.0.7";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -9088,6 +9113,7 @@ var setupBrowserForEditing = (options = {}) => {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: TARGET === "reactNative" ? false : true,
         blockLevelPersonalization: true
       }
     }, "*");

package/lib/edge/dev.jsx

@@ -4118,8 +4118,13 @@ import { Show as Show2, createMemo } from "solid-js";
 
 // src/constants/device-sizes.ts
 var SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -4135,15 +4140,28 @@ var SIZES = {
   }
 };
 var getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-var getSizesForBreakpoints = ({
-  small,
-  medium
-}) => {
+var getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
@@ -4194,9 +4212,13 @@ function BlockStyles(props) {
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
       content?.meta?.breakpoints || {}
     );
+    const contentHasXSmallBreakpoint = Boolean(
+      content?.meta?.breakpoints?.xsmall
+    );
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -4221,6 +4243,14 @@ function BlockStyles(props) {
         sizesWithUpdatedBreakpoints
       )
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize(
+        "xsmall",
+        sizesWithUpdatedBreakpoints
+      )
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
@@ -4240,6 +4270,7 @@ function BlockStyles(props) {
       largeStylesClass,
       mediumStylesClass,
       smallStylesClass,
+      xsmallStylesClass,
       hoverStylesClass
     ].join(" ");
   });
@@ -7951,7 +7982,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.6";
+var SDK_VERSION = "3.0.7";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -8575,6 +8606,7 @@ var setupBrowserForEditing = (options = {}) => {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: TARGET === "reactNative" ? false : true,
         blockLevelPersonalization: true
       }
     }, "*");

package/lib/edge/index.js

@@ -4111,8 +4111,13 @@ var provideBuilderContext = (block, context) => {
 
 // src/constants/device-sizes.ts
 var SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -4128,15 +4133,28 @@ var SIZES = {
   }
 };
 var getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-var getSizesForBreakpoints = ({
-  small,
-  medium
-}) => {
+var getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
@@ -4194,9 +4212,11 @@ function BlockStyles(props) {
     const styles = processedBlock.responsiveStyles;
     const content = props.context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+    const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -4215,6 +4235,11 @@ function BlockStyles(props) {
       styles: smallStyles,
       mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
@@ -4228,7 +4253,7 @@ function BlockStyles(props) {
         }
       }) || "";
     }
-    return [largeStylesClass, mediumStylesClass, smallStylesClass, hoverStylesClass].join(" ");
+    return [largeStylesClass, mediumStylesClass, smallStylesClass, xsmallStylesClass, hoverStylesClass].join(" ");
   });
   return createComponent(Show, {
     get when() {
@@ -8451,7 +8476,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.6";
+var SDK_VERSION = "3.0.7";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -9069,6 +9094,7 @@ var setupBrowserForEditing = (options = {}) => {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: TARGET === "reactNative" ? false : true,
         blockLevelPersonalization: true
       }
     }, "*");

package/lib/edge/index.jsx

@@ -4111,8 +4111,13 @@ import { Show as Show2, createMemo } from "solid-js";
 
 // src/constants/device-sizes.ts
 var SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -4128,15 +4133,28 @@ var SIZES = {
   }
 };
 var getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-var getSizesForBreakpoints = ({
-  small,
-  medium
-}) => {
+var getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
@@ -4187,9 +4205,13 @@ function BlockStyles(props) {
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
       content?.meta?.breakpoints || {}
     );
+    const contentHasXSmallBreakpoint = Boolean(
+      content?.meta?.breakpoints?.xsmall
+    );
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -4214,6 +4236,14 @@ function BlockStyles(props) {
         sizesWithUpdatedBreakpoints
       )
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize(
+        "xsmall",
+        sizesWithUpdatedBreakpoints
+      )
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
@@ -4233,6 +4263,7 @@ function BlockStyles(props) {
       largeStylesClass,
       mediumStylesClass,
       smallStylesClass,
+      xsmallStylesClass,
       hoverStylesClass
     ].join(" ");
   });
@@ -7940,7 +7971,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.6";
+var SDK_VERSION = "3.0.7";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -8558,6 +8589,7 @@ var setupBrowserForEditing = (options = {}) => {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: TARGET === "reactNative" ? false : true,
         blockLevelPersonalization: true
       }
     }, "*");

package/lib/node/dev.js

@@ -1108,8 +1108,13 @@ var provideBuilderContext = (block, context) => {
 
 // src/constants/device-sizes.ts
 var SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -1125,15 +1130,28 @@ var SIZES = {
   }
 };
 var getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-var getSizesForBreakpoints = ({
-  small,
-  medium
-}) => {
+var getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
@@ -1191,9 +1209,11 @@ function BlockStyles(props) {
     const styles = processedBlock.responsiveStyles;
     const content = props.context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+    const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -1212,6 +1232,11 @@ function BlockStyles(props) {
       styles: smallStyles,
       mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
@@ -1225,7 +1250,7 @@ function BlockStyles(props) {
         }
       }) || "";
     }
-    return [largeStylesClass, mediumStylesClass, smallStylesClass, hoverStylesClass].join(" ");
+    return [largeStylesClass, mediumStylesClass, smallStylesClass, xsmallStylesClass, hoverStylesClass].join(" ");
   });
   return createComponent(Show, {
     get when() {
@@ -5452,7 +5477,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.6";
+var SDK_VERSION = "3.0.7";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -6076,6 +6101,7 @@ var setupBrowserForEditing = (options = {}) => {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: TARGET === "reactNative" ? false : true,
         blockLevelPersonalization: true
       }
     }, "*");

package/lib/node/dev.jsx

@@ -1106,8 +1106,13 @@ import { Show as Show2, createMemo } from "solid-js";
 
 // src/constants/device-sizes.ts
 var SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -1123,15 +1128,28 @@ var SIZES = {
   }
 };
 var getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-var getSizesForBreakpoints = ({
-  small,
-  medium
-}) => {
+var getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
@@ -1182,9 +1200,13 @@ function BlockStyles(props) {
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
       content?.meta?.breakpoints || {}
     );
+    const contentHasXSmallBreakpoint = Boolean(
+      content?.meta?.breakpoints?.xsmall
+    );
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -1209,6 +1231,14 @@ function BlockStyles(props) {
         sizesWithUpdatedBreakpoints
       )
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize(
+        "xsmall",
+        sizesWithUpdatedBreakpoints
+      )
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
@@ -1228,6 +1258,7 @@ function BlockStyles(props) {
       largeStylesClass,
       mediumStylesClass,
       smallStylesClass,
+      xsmallStylesClass,
       hoverStylesClass
     ].join(" ");
   });
@@ -4939,7 +4970,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.6";
+var SDK_VERSION = "3.0.7";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5563,6 +5594,7 @@ var setupBrowserForEditing = (options = {}) => {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: TARGET === "reactNative" ? false : true,
         blockLevelPersonalization: true
       }
     }, "*");

package/lib/node/index.js

@@ -1099,8 +1099,13 @@ var provideBuilderContext = (block, context) => {
 
 // src/constants/device-sizes.ts
 var SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -1116,15 +1121,28 @@ var SIZES = {
   }
 };
 var getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-var getSizesForBreakpoints = ({
-  small,
-  medium
-}) => {
+var getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
@@ -1182,9 +1200,11 @@ function BlockStyles(props) {
     const styles = processedBlock.responsiveStyles;
     const content = props.context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+    const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -1203,6 +1223,11 @@ function BlockStyles(props) {
       styles: smallStyles,
       mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
@@ -1216,7 +1241,7 @@ function BlockStyles(props) {
         }
       }) || "";
     }
-    return [largeStylesClass, mediumStylesClass, smallStylesClass, hoverStylesClass].join(" ");
+    return [largeStylesClass, mediumStylesClass, smallStylesClass, xsmallStylesClass, hoverStylesClass].join(" ");
   });
   return createComponent(Show, {
     get when() {
@@ -5439,7 +5464,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.6";
+var SDK_VERSION = "3.0.7";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -6057,6 +6082,7 @@ var setupBrowserForEditing = (options = {}) => {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: TARGET === "reactNative" ? false : true,
         blockLevelPersonalization: true
       }
     }, "*");

package/lib/node/index.jsx

@@ -1099,8 +1099,13 @@ import { Show as Show2, createMemo } from "solid-js";
 
 // src/constants/device-sizes.ts
 var SIZES = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -1116,15 +1121,28 @@ var SIZES = {
   }
 };
 var getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-var getSizesForBreakpoints = ({
-  small,
-  medium
-}) => {
+var getSizesForBreakpoints = (breakpoints) => {
   const newSizes = fastClone(SIZES);
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,
@@ -1175,9 +1193,13 @@ function BlockStyles(props) {
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
       content?.meta?.breakpoints || {}
     );
+    const contentHasXSmallBreakpoint = Boolean(
+      content?.meta?.breakpoints?.xsmall
+    );
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
     const className = processedBlock.id;
     if (!className) {
       return "";
@@ -1202,6 +1224,14 @@ function BlockStyles(props) {
         sizesWithUpdatedBreakpoints
       )
     }) : "";
+    const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
+      className,
+      styles: xsmallStyles,
+      mediaQuery: getMaxWidthQueryForSize(
+        "xsmall",
+        sizesWithUpdatedBreakpoints
+      )
+    }) : "";
     const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
     let hoverStylesClass = "";
     if (hoverAnimation) {
@@ -1221,6 +1251,7 @@ function BlockStyles(props) {
       largeStylesClass,
       mediumStylesClass,
       smallStylesClass,
+      xsmallStylesClass,
       hoverStylesClass
     ].join(" ");
   });
@@ -4928,7 +4959,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.6";
+var SDK_VERSION = "3.0.7";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5546,6 +5577,7 @@ var setupBrowserForEditing = (options = {}) => {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        supportsXSmallBreakpoint: TARGET === "reactNative" ? false : true,
         blockLevelPersonalization: true
       }
     }, "*");

package/package.json

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