fix: Add unique key props to lists swatches

Fixes #2

Author: Andrey Okonetchnikov

src/components/Colors.jsx

@@ -12,15 +12,17 @@ export default function Colors({ theme }) {
 		<ThemeProvider theme={theme}>
 			<Stack gap={gap}>
 				<Swatches theme={theme} items={palettes}>
-					{(key, value) => (
-						<Stack gap={0} minWidth={100}>
-							<PaletteSwatch token={key} value={value} />
+					{(token, value) => (
+						<Stack gap={0} minWidth={100} key={token}>
+							<PaletteSwatch token={token} value={value} />
 						</Stack>
 					)}
 				</Swatches>
 				<Stack gap={gap} minWidth={150}>
 					<Swatches theme={theme} items={colors}>
-						{(key, value) => <ColorSwatch token={key} value={value} />}
+						{(token, value) => (
+							<ColorSwatch token={token} value={value} key={token} />
+						)}
 					</Swatches>
 				</Stack>
 			</Stack>

src/components/PaletteSwatch.jsx

@@ -5,7 +5,13 @@ import { tokenPropType, valuePropType } from "../propTypes";
 
 export const PaletteSwatch = ({ token, value }) => (
 	<Swatches items={value}>
-		{(key, value) => <ColorSwatch value={value} token={`${token}.${key}`} />}
+		{(key, value) => (
+			<ColorSwatch
+				value={value}
+				token={`${token}.${key}`}
+				key={`${token}.${key}`}
+			/>
+		)}
 	</Swatches>
 );
 

src/components/Spacing.jsx

@@ -9,7 +9,7 @@ export default function Spacing({ theme }) {
 			<Stack gap={4}>
 				<Swatches items={theme.space}>
 					{(token, value) => (
-						<Swatch token={token} value={value}>
+						<Swatch token={token} value={value} key={token}>
 							<Stack gap={3} gridTemplateColumns="auto 1fr">
 								<SwatchToken css={css({ p: 1 })}>{token}</SwatchToken>
 								<SpacingSwatch value={value} />

src/components/Swatches.md

@@ -6,7 +6,7 @@ import { Swatch, SwatchToken, SpacingSwatch } from "../";
 <Stack gap={2}>
   <Swatches theme={theme} items={theme.space}>
     {(token, value) => (
-      <Swatch token={token} value={value}>
+      <Swatch token={token} value={value} key={token}>
         <SwatchToken>{token}</SwatchToken>
         <SpacingSwatch value={value} />
       </Swatch>

src/components/Typography.jsx

@@ -15,7 +15,7 @@ export default function Typography({ theme }) {
 			<Stack gap={5}>
 				<Swatches theme={theme} items={theme.fontSizes}>
 					{(token, value) => (
-						<Swatch token={token} value={value}>
+						<Swatch token={token} value={value} key={token}>
 							<Stack gap={2}>
 								<div>
 									<SwatchToken css={{ display: "inline-block" }}>