From 9684e8eaf5f3afd6740eb87010f6d95ff379e65b Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 25 Apr 2024 12:37:06 +0200
Subject: [PATCH] Add 256-step widths for Compact for consistency

---
 storybook/src/docs/space.docs.mdx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/storybook/src/docs/space.docs.mdx b/storybook/src/docs/space.docs.mdx
index 6862f0b4cc..a124eab0ab 100644
--- a/storybook/src/docs/space.docs.mdx
+++ b/storybook/src/docs/space.docs.mdx
@@ -44,7 +44,9 @@ In Compact Mode, the medium grid space grows from 16 to 40 pixels between window
       <th style={{ textAlign: "center" }}>1088</th>
       <th style={{ textAlign: "center" }}>1344</th>
       <th style={{ textAlign: "center" }}>1600</th>
+      <th style={{ textAlign: "center" }}>1856</th>
       <th style={{ textAlign: "center" }}>2112</th>
+      <th style={{ textAlign: "center" }}>2368</th>
       <th style={{ textAlign: "center" }}>2624</th>
     </tr>
   </thead>
@@ -58,7 +60,9 @@ In Compact Mode, the medium grid space grows from 16 to 40 pixels between window
       </td>
       <td style={{ textAlign: "center" }}>5</td>
       <td style={{ textAlign: "center" }}>6</td>
+      <td style={{ textAlign: "center" }}>7</td>
       <td style={{ textAlign: "center" }}>8</td>
+      <td style={{ textAlign: "center" }}>9</td>
       <td style={{ textAlign: "center" }}>10</td>
     </tr>
     <tr>
@@ -70,7 +74,9 @@ In Compact Mode, the medium grid space grows from 16 to 40 pixels between window
       </td>
       <td style={{ textAlign: "center" }}>10</td>
       <td style={{ textAlign: "center" }}>12</td>
+      <td style={{ textAlign: "center" }}>14</td>
       <td style={{ textAlign: "center" }}>16</td>
+      <td style={{ textAlign: "center" }}>18</td>
       <td style={{ textAlign: "center" }}>20</td>
     </tr>
     <tr>
@@ -86,9 +92,15 @@ In Compact Mode, the medium grid space grows from 16 to 40 pixels between window
       <td style={{ textAlign: "center" }}>
         <strong>24</strong>
       </td>
+      <td style={{ textAlign: "center" }}>
+        <strong>28</strong>
+      </td>
       <td style={{ textAlign: "center" }}>
         <strong>32</strong>
       </td>
+      <td style={{ textAlign: "center" }}>
+        <strong>36</strong>
+      </td>
       <td style={{ textAlign: "center" }}>
         <strong>40</strong>
       </td>
@@ -102,7 +114,9 @@ In Compact Mode, the medium grid space grows from 16 to 40 pixels between window
       </td>
       <td style={{ textAlign: "center" }}>30</td>
       <td style={{ textAlign: "center" }}>36</td>
+      <td style={{ textAlign: "center" }}>42</td>
       <td style={{ textAlign: "center" }}>48</td>
+      <td style={{ textAlign: "center" }}>54</td>
       <td style={{ textAlign: "center" }}>60</td>
     </tr>
     <tr>
@@ -114,7 +128,9 @@ In Compact Mode, the medium grid space grows from 16 to 40 pixels between window
       </td>
       <td style={{ textAlign: "center" }}>40</td>
       <td style={{ textAlign: "center" }}>48</td>
+      <td style={{ textAlign: "center" }}>56</td>
       <td style={{ textAlign: "center" }}>64</td>
+      <td style={{ textAlign: "center" }}>72</td>
       <td style={{ textAlign: "center" }}>80</td>
     </tr>
   </tbody>