fixes

site/src/content/docs/utilities/flex.mdx

@@ -66,7 +66,7 @@ Responsive variations also exist for `flex-direction`.
 
 <ul>
 {getSequence(0, 5).map((i) => (
-  <Fragment key={i}>
+  <Fragment>
     <li><code>.flex{getData('breakpoints')[i].abbr}-row</code></li>
     <li><code>.flex{getData('breakpoints')[i].abbr}-row-reverse</code></li>
     <li><code>.flex{getData('breakpoints')[i].abbr}-column</code></li>
@@ -90,7 +90,7 @@ Responsive variations also exist for `flex-fill`.
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li key={breakpoint.abbr}><code>.flex{breakpoint.abbr}-fill</code></li>
+    <li><code>.flex{breakpoint.abbr}-fill</code></li>
   )
 })}
 </ul>
@@ -117,7 +117,7 @@ Responsive variations also exist for `flex-grow` and `flex-shrink`.
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <Fragment key={breakpoint.abbr}>
+    <Fragment>
       <li><code>.flex{breakpoint.abbr}-grow-0</code></li>
       <li><code>.flex{breakpoint.abbr}-grow-1</code></li>
       <li><code>.flex{breakpoint.abbr}-shrink-0</code></li>
@@ -202,7 +202,7 @@ Responsive variations also exist for `flex-wrap`.
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <Fragment key={breakpoint.abbr}>
+    <Fragment>
       <li><code>.flex{breakpoint.abbr}-nowrap</code></li>
       <li><code>.flex{breakpoint.abbr}-wrap</code></li>
       <li><code>.flex{breakpoint.abbr}-wrap-reverse</code></li>

site/src/content/docs/utilities/margin.mdx

@@ -151,7 +151,7 @@ All margin utilities are responsive and include all breakpoints.
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li key={breakpoint.abbr}><code>.m{breakpoint.abbr}-0</code> through <code>.m{breakpoint.abbr}-5</code> and <code>.m{breakpoint.abbr}-auto</code></li>
+    <li><code>.m{breakpoint.abbr}-0</code> through <code>.m{breakpoint.abbr}-5</code> and <code>.m{breakpoint.abbr}-auto</code></li>
   )
 })}
 </ul>

site/src/content/docs/utilities/padding.mdx

@@ -123,7 +123,7 @@ All padding utilities are responsive and include all breakpoints.
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li key={breakpoint.abbr}><code>.p{breakpoint.abbr}-0</code> through <code>.p{breakpoint.abbr}-5</code></li>
+    <li><code>.p{breakpoint.abbr}-0</code> through <code>.p{breakpoint.abbr}-5</code></li>
   )
 })}
 </ul>

site/src/content/docs/utilities/text-alignment.mdx

@@ -44,7 +44,7 @@ Responsive variations also exist for `text-align`.
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <Fragment key={breakpoint.abbr}>
+    <Fragment>
       <li><code>.text{breakpoint.abbr}-start</code></li>
       <li><code>.text{breakpoint.abbr}-center</code></li>
       <li><code>.text{breakpoint.abbr}-end</code></li>

site/src/libs/data.ts

@@ -84,9 +84,12 @@ const dataDefinitions = {
         .object({
           title: z.string().optional(),
           group: z.string().optional(),
-          pages: z.object({
+          pages: z
+            .object({
               title: z.string()
-          }).array().optional()
+            })
+            .array()
+            .optional()
         })
         .array()
         .optional()