@automattic/vip-design-system 2.4.4 → 2.4.5

package/build/system/MobileMenu/MobileMenu.js

@@ -98,6 +98,7 @@ var MobileMenuTrigger = exports.MobileMenuTrigger = function MobileMenuTrigger(_
       sx: {
         display: display,
         alignItems: 'center',
+        flexShrink: 0,
         color: variant === 'inverse' ? 'button.primary.label.default' : 'button.tertiary.label.default',
         width: 38,
         height: 38,

package/build/system/Toolbar/Logo.js

@@ -25,7 +25,7 @@ var Logo = exports.Logo = function Logo(_ref) {
     sx: {
       width: 54,
       color: 'toolbar.brand',
-      mr: 5,
+      flexShrink: 0,
       display: 'inline-block'
     },
     href: href,

package/build/system/theme/breakpoints.js

@@ -4,7 +4,10 @@ exports.__esModule = true;
 exports.generateBreakpoints = void 0;
 var generateBreakpoints = exports.generateBreakpoints = function generateBreakpoints(breakpoints) {
   var values = Object.values(breakpoints);
-  return values.map(function (bp) {
+  return values.map(function (bp, index) {
+    if (index === 0) {
+      return "0px";
+    }
     return bp + "px";
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",

package/src/system/MobileMenu/MobileMenu.tsx

@@ -108,6 +108,7 @@ export const MobileMenuTrigger = ( {
 			sx={ {
 				display,
 				alignItems: 'center',
+				flexShrink: 0,
 				color:
 					variant === 'inverse' ? 'button.primary.label.default' : 'button.tertiary.label.default',
 				width: 38,

package/src/system/Toolbar/Logo.tsx

@@ -23,7 +23,7 @@ export const Logo = ( { className, as = 'a', href }: LogoProps ) => (
 		sx={ {
 			width: 54,
 			color: 'toolbar.brand',
-			mr: 5,
+			flexShrink: 0,
 			display: 'inline-block',
 		} }
 		href={ href }

package/src/system/theme/breakpoints.ts

@@ -5,5 +5,11 @@ type Breakpoints = {
 export const generateBreakpoints = ( breakpoints: Breakpoints ) => {
 	const values = Object.values( breakpoints );
 
-	return values.map( bp => `${ bp }px` );
+	return values.map( ( bp, index ) => {
+		if ( index === 0 ) {
+			return `0px`;
+		}
+
+		return `${ bp }px`;
+	} );
 };