From 322c9f9f887c3e216a4217fdc601b2d40c2edf6d Mon Sep 17 00:00:00 2001
From: moss-bryophyta <261561981+moss-bryophyta@users.noreply.github.com>
Date: Wed, 13 May 2026 11:00:19 -0700
Subject: [PATCH] fix: wrap Plural props in JSX fragments and add missing </T>
 closing tag in plural.mdx

---
 docs-templates/api/components/plural.mdx | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/docs-templates/api/components/plural.mdx b/docs-templates/api/components/plural.mdx
index 18c95793..67c3c79b 100644
--- a/docs-templates/api/components/plural.mdx
+++ b/docs-templates/api/components/plural.mdx
@@ -14,8 +14,8 @@ In other languages, you have to define up to six.
 ```jsx
 const count = 1;
 <Plural n={count}
-  one={You have one item.}
-  other={You have some items.}
+  one={<>You have one item.</>}
+  other={<>You have some items.</>}
 />
 ```
 
@@ -95,8 +95,8 @@ import { Plural } from '__PACKAGE_NAME__';
 export default function ItemCount({ count }) {
   return (
     <Plural n={count} // [!code highlight]
-      one={You have one item.}
-      other={You have some items.}
+      one={<>You have one item.</>}
+      other={<>You have some items.</>}
     />
   );
 }
@@ -111,7 +111,7 @@ import { Plural } from '__PACKAGE_NAME__';
 export default function ItemCount({ count }) {
   return (
     <Plural n={count}
-      one={You have one item.}
+      one={<>You have one item.</>}
     >
       You have some items. // [!code highlight]
     </Plural>
@@ -129,9 +129,10 @@ export default function ItemCount({ count }) {
   return (
   <T id="itemCount">
     <Plural n={count}
-      one={You have an item.} // [!code highlight]
-      other={You have some items.} // [!code highlight]
+      one={<>You have an item.</>} // [!code highlight]
+      other={<>You have some items.</>} // [!code highlight]
     />
+  </T>
   );
 }
 ```
@@ -145,8 +146,8 @@ import { T, Plural, Num } from '__PACKAGE_NAME__';
 export default function ItemCount({ count }) {
   return (
     <Plural n={count}
-      one={You have <Num>{count}</Num> item.} // [!code highlight]
-      other={You have <Num>{count}</Num> items.} // [!code highlight]
+      one={<>You have <Num>{count}</Num> item.</>} // [!code highlight]
+      other={<>You have <Num>{count}</Num> items.</>} // [!code highlight]
     />
   );
 }
@@ -156,8 +157,8 @@ When inside of a `<T>` component, wrap all dynamic content with a `<Currency>`,
 ```jsx
 <T id="itemCount">
   <Plural n={count}
-    one={You have <Num>{count}</Num> item.} // [!code highlight]
-    other={You have <Num>{count}</Num> items.} // [!code highlight]
+    one={<>You have <Num>{count}</Num> item.</>} // [!code highlight]
+    other={<>You have <Num>{count}</Num> items.</>} // [!code highlight]
   />
 </T>
 ```