diff --git a/www/examples/Tile.mdx b/www/examples/Tile.mdx
index 7becff355..12a295977 100644
--- a/www/examples/Tile.mdx
+++ b/www/examples/Tile.mdx
@@ -34,8 +34,8 @@ const Example = () => {
- {_.map(items, (item) => (
-
+ {_.map(items, (item, i) => (
+
))}
diff --git a/www/examples/UserListPicker.mdx b/www/examples/UserListPicker.mdx
index fdfe3ede2..1611ef4bc 100644
--- a/www/examples/UserListPicker.mdx
+++ b/www/examples/UserListPicker.mdx
@@ -4,16 +4,17 @@ import DesignNotes from '../containers/DesignNotes.jsx';
## User List Picker
```jsx live=true
-const avatarColor = (user) => (user.avatar ? '' : 'cyan');
+const avatarColor = (user) => (user.status === 'active' ? 'blue' : 'orange');
const emptySvgSymbol = ;
const teamMember1 = {
avatar: '../assets/user-avatar.jpeg',
givenName: 'John',
id: 1,
surname: 'Smith',
+ status: 'active',
};
-const teamMember2 = { givenName: 'Jane', id: 2, surname: 'Doe' };
-const teamMember3 = { givenName: 'Jack', id: 3, surname: 'White' };
+const teamMember2 = { givenName: 'Jane', id: 2, surname: 'Doe', status: 'active' };
+const teamMember3 = { givenName: 'Jack', id: 3, surname: 'White', status: 'pending' };
const listPickerItems = [teamMember1, teamMember2, teamMember3];
const listPickerInitialSelection = [teamMember2];
const listPickerItemHeaders = {