update ContextTag (#468)

* u Avatar

* u Context Tag

* add changeset

* revert type

* Revert "revert type"

This reverts commit 1d099cf5d2.

* add bigger 24

* c

* f

* f textSize

.changeset/few-coins-notice.md

@@ -0,0 +1,5 @@
+---
+'@status-im/components': patch
+---
+
+update Context Tag

packages/components/src/avatar/avatar.tsx

@@ -51,7 +51,7 @@ type ChannelAvatarProps = {
 
 type CommunityAvatarProps = {
   type: 'community'
-  size: 80 | 32 | 28 | 24 | 20
+  size: 80 | 32 | 28 | 24 | 20 | 16
   name: string
   src?: string
   backgroundColor?: ColorTokens
@@ -59,7 +59,7 @@ type CommunityAvatarProps = {
 
 type AccountAvatarProps = {
   type: 'account'
-  size: 80 | 48 | 32 | 28 | 24 | 20
+  size: 80 | 48 | 32 | 28 | 24 | 20 | 16
   name: string
   src?: string
   backgroundColor?: ColorTokens
@@ -67,7 +67,7 @@ type AccountAvatarProps = {
 
 type IconAvatarProps = {
   type: 'icon'
-  size: 48 | 32 | 28 | 24 | 20
+  size: 48 | 32 | 28 | 24 | 20 | 16
   icon: React.ReactElement
   backgroundColor?: ColorTokens
   color?: ColorTokens
@@ -102,6 +102,7 @@ const accountRadiusSizes: Record<AccountAvatarProps['size'], RadiusTokens> = {
   '28': '$8',
   '24': '$8',
   '20': '$6',
+  '16': '$6',
 }
 
 const channelEmojiSizes: Record<ChannelAvatarProps['size'], TextProps['size']> =

packages/components/src/context-tag/context-tag.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<typeof ContextTag> = {
   component: ContextTag,
   argTypes: {
     type: [
-      'default',
+      'user',
       'account',
       'group',
       'community',
@@ -29,10 +29,10 @@ const meta: Meta<typeof ContextTag> = {
 
 type Story = StoryObj<typeof ContextTag>
 
-export const Default: Story = {
+export const user: Story = {
   args: {
     type: 'account',
-    user: { name: 'user name ', emoji: '🐷' },
+    account: { name: 'user name ', emoji: '🐷' },
     size: 24,
     outline: false,
     blur: false,
@@ -43,15 +43,92 @@ export const AllVariants: Story = {
   args: {},
   render: () => (
     <Stack space flexDirection="row">
-      <Stack space flexDirection="column" alignItems="flex-start">
+      <Stack space flexDirection="column" alignItems="flex-start" gap={12}>
         <Stack space flexDirection="column" alignItems="flex-start">
           <ContextTag
-            type="default"
+            type="user"
+            user={{
+              name: 'User',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+          />
+          <ContextTag
+            type="group"
+            group={{
+              name: 'Group',
+              icon: <MembersIcon size={12} />,
+            }}
+            size={20}
+          />
+          <ContextTag
+            type="channel"
+            channel={{
+              communityName: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+              name: 'channel',
+            }}
+            size={20}
+          />
+          <ContextTag
+            type="community"
+            community={{
+              name: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+          />
+          <ContextTag
+            type="token"
+            token={{
+              name: '10 ETH',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+          />
+          <ContextTag
+            type="network"
+            network={{
+              name: 'Network',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+          />
+          <ContextTag
+            type="account"
+            account={{
+              name: 'User Name',
+              emoji: '🐷',
+            }}
+            size={20}
+          />
+          <ContextTag
+            type="collectible"
+            collectible={{
+              name: 'Collectible #123',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+          />
+          <ContextTag type="address" address="0x045...1ah" size={20} />
+          <ContextTag
+            icon={<PendingIcon size={12} />}
+            type="icon"
+            label="Context"
+            size={20}
+          />
+          <ContextTag type="audio" audioLength="00:32" size={20} />
+        </Stack>
+
+        <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag
+            type="user"
             user={{
               name: 'User',
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
             }}
             size={24}
+            textSize={13}
           />
           <ContextTag
             type="group"
@@ -60,6 +137,7 @@ export const AllVariants: Story = {
               icon: <MembersIcon size={12} />,
             }}
             size={24}
+            textSize={13}
           />
           <ContextTag
             type="channel"
@@ -69,6 +147,7 @@ export const AllVariants: Story = {
               name: 'channel',
             }}
             size={24}
+            textSize={13}
           />
           <ContextTag
             type="community"
@@ -77,6 +156,7 @@ export const AllVariants: Story = {
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
             }}
             size={24}
+            textSize={13}
           />
           <ContextTag
             type="token"
@@ -85,6 +165,7 @@ export const AllVariants: Story = {
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
             }}
             size={24}
+            textSize={13}
           />
           <ContextTag
             type="network"
@@ -93,14 +174,16 @@ export const AllVariants: Story = {
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
             }}
             size={24}
+            textSize={13}
           />
           <ContextTag
             type="account"
-            user={{
+            account={{
               name: 'User Name',
               emoji: '🐷',
             }}
             size={24}
+            textSize={13}
           />
           <ContextTag
             type="collectible"
@@ -109,20 +192,127 @@ export const AllVariants: Story = {
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
             }}
             size={24}
+            textSize={13}
+          />
+          <ContextTag
+            type="address"
+            address="0x045...1ah"
+            size={24}
+            textSize={13}
           />
-          <ContextTag type="address" address="0x045...1ah" size={24} />
           <ContextTag
             icon={<PendingIcon size={12} />}
             type="icon"
             label="Context"
             size={24}
+            textSize={13}
+          />
+          <ContextTag
+            type="audio"
+            audioLength="00:32"
+            size={24}
+            textSize={13}
           />
-          <ContextTag type="audio" audioLength="00:32" size={24} />
         </Stack>
 
         <Stack space flexDirection="column" alignItems="flex-start">
           <ContextTag
-            type="default"
+            type="user"
+            user={{
+              name: 'User',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={24}
+            textSize={15}
+          />
+          <ContextTag
+            type="group"
+            group={{
+              name: 'Group',
+              icon: <MembersIcon size={12} />,
+            }}
+            size={24}
+            textSize={15}
+          />
+          <ContextTag
+            type="channel"
+            channel={{
+              communityName: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+              name: 'channel',
+            }}
+            size={24}
+            textSize={15}
+          />
+          <ContextTag
+            type="community"
+            community={{
+              name: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={24}
+            textSize={15}
+          />
+          <ContextTag
+            type="token"
+            token={{
+              name: '10 ETH',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={24}
+            textSize={15}
+          />
+          <ContextTag
+            type="network"
+            network={{
+              name: 'Network',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={24}
+            textSize={15}
+          />
+          <ContextTag
+            type="account"
+            account={{
+              name: 'User Name',
+              emoji: '🐷',
+            }}
+            size={24}
+            textSize={15}
+          />
+          <ContextTag
+            type="collectible"
+            collectible={{
+              name: 'Collectible #123',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={24}
+            textSize={15}
+          />
+          <ContextTag
+            type="address"
+            address="0x045...1ah"
+            size={24}
+            textSize={15}
+          />
+          <ContextTag
+            icon={<PendingIcon size={12} />}
+            type="icon"
+            label="Context"
+            size={24}
+            textSize={15}
+          />
+          <ContextTag
+            type="audio"
+            audioLength="00:32"
+            size={24}
+            textSize={15}
+          />
+        </Stack>
+
+        <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag
+            type="user"
             user={{
               name: 'User',
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
@@ -172,7 +362,7 @@ export const AllVariants: Story = {
           />
           <ContextTag
             type="account"
-            user={{
+            account={{
               name: 'User Name',
               emoji: '🐷',
             }}
@@ -197,15 +387,101 @@ export const AllVariants: Story = {
         </Stack>
       </Stack>
 
-      <Stack space flexDirection="column" alignItems="flex-start">
+      <Stack space flexDirection="column" alignItems="flex-start" gap={12}>
         <Stack space flexDirection="column" alignItems="flex-start">
           <ContextTag
-            type="default"
+            type="user"
+            user={{
+              name: 'User',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag
+            type="group"
+            group={{
+              name: 'Group',
+              icon: <MembersIcon size={12} />,
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag
+            type="channel"
+            channel={{
+              communityName: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+              name: 'channel',
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag
+            type="community"
+            community={{
+              name: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag
+            type="token"
+            token={{
+              name: '10 ETH',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag
+            type="network"
+            network={{
+              name: 'Network',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag
+            type="account"
+            account={{
+              name: 'User Name',
+              emoji: '🐷',
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag
+            type="collectible"
+            collectible={{
+              name: 'Collectible #123',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            outline
+          />
+          <ContextTag type="address" address="0x045...1ah" size={20} outline />
+          <ContextTag
+            icon={<PendingIcon size={12} />}
+            type="icon"
+            label="Context"
+            size={20}
+            outline
+          />
+          <ContextTag type="audio" audioLength="00:32" size={20} outline />
+        </Stack>
+
+        <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag
+            type="user"
             user={{
               name: 'User',
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
             }}
             size={24}
+            textSize={13}
             outline
           />
           <ContextTag
@@ -215,6 +491,7 @@ export const AllVariants: Story = {
               icon: <MembersIcon size={12} />,
             }}
             size={24}
+            textSize={13}
             outline
           />
           <ContextTag
@@ -225,6 +502,7 @@ export const AllVariants: Story = {
               name: 'channel',
             }}
             size={24}
+            textSize={13}
             outline
           />
           <ContextTag
@@ -234,6 +512,7 @@ export const AllVariants: Story = {
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
             }}
             size={24}
+            textSize={13}
             outline
           />
           <ContextTag
@@ -243,6 +522,7 @@ export const AllVariants: Story = {
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
             }}
             size={24}
+            textSize={13}
             outline
           />
           <ContextTag
@@ -252,15 +532,17 @@ export const AllVariants: Story = {
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
             }}
             size={24}
+            textSize={13}
             outline
           />
           <ContextTag
             type="account"
-            user={{
+            account={{
               name: 'User Name',
               emoji: '🐷',
             }}
             size={24}
+            textSize={13}
             outline
           />
           <ContextTag
@@ -270,22 +552,142 @@ export const AllVariants: Story = {
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
             }}
             size={24}
+            textSize={13}
+            outline
+          />
+          <ContextTag
+            type="address"
+            address="0x045...1ah"
+            size={24}
+            textSize={13}
             outline
           />
-          <ContextTag type="address" address="0x045...1ah" size={24} outline />
           <ContextTag
             icon={<PendingIcon size={12} />}
             type="icon"
             label="Context"
             size={24}
+            textSize={13}
+            outline
+          />
+          <ContextTag
+            type="audio"
+            audioLength="00:32"
+            size={24}
+            textSize={13}
             outline
           />
-          <ContextTag type="audio" audioLength="00:32" size={24} outline />
         </Stack>
 
         <Stack space flexDirection="column" alignItems="flex-start">
           <ContextTag
-            type="default"
+            type="user"
+            user={{
+              name: 'User',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={24}
+            textSize={15}
+            outline
+          />
+          <ContextTag
+            type="group"
+            group={{
+              name: 'Group',
+              icon: <MembersIcon size={12} />,
+            }}
+            size={24}
+            textSize={15}
+            outline
+          />
+          <ContextTag
+            type="channel"
+            channel={{
+              communityName: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+              name: 'channel',
+            }}
+            size={24}
+            textSize={15}
+            outline
+          />
+          <ContextTag
+            type="community"
+            community={{
+              name: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={24}
+            textSize={15}
+            outline
+          />
+          <ContextTag
+            type="token"
+            token={{
+              name: '10 ETH',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={24}
+            textSize={15}
+            outline
+          />
+          <ContextTag
+            type="network"
+            network={{
+              name: 'Network',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={24}
+            textSize={15}
+            outline
+          />
+          <ContextTag
+            type="account"
+            account={{
+              name: 'User Name',
+              emoji: '🐷',
+            }}
+            size={24}
+            textSize={15}
+            outline
+          />
+          <ContextTag
+            type="collectible"
+            collectible={{
+              name: 'Collectible #123',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={24}
+            textSize={15}
+            outline
+          />
+          <ContextTag
+            type="address"
+            address="0x045...1ah"
+            size={24}
+            textSize={15}
+            outline
+          />
+          <ContextTag
+            icon={<PendingIcon size={12} />}
+            type="icon"
+            label="Context"
+            size={24}
+            textSize={15}
+            outline
+          />
+          <ContextTag
+            type="audio"
+            audioLength="00:32"
+            size={24}
+            textSize={15}
+            outline
+          />
+        </Stack>
+
+        <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag
+            type="user"
             user={{
               name: 'User',
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
@@ -341,7 +743,7 @@ export const AllVariants: Story = {
           />
           <ContextTag
             type="account"
-            user={{
+            account={{
               name: 'User Name',
               emoji: '🐷',
             }}
@@ -369,15 +771,101 @@ export const AllVariants: Story = {
         </Stack>
       </Stack>
 
-      <Stack space flexDirection="column" alignItems="flex-start">
+      <Stack space flexDirection="column" alignItems="flex-start" gap={12}>
         <Stack space flexDirection="column" alignItems="flex-start">
           <ContextTag
-            type="default"
+            type="user"
+            user={{
+              name: 'User',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag
+            type="group"
+            group={{
+              name: 'Group',
+              icon: <MembersIcon size={12} />,
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag
+            type="channel"
+            channel={{
+              communityName: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+              name: 'channel',
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag
+            type="community"
+            community={{
+              name: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag
+            type="token"
+            token={{
+              name: '10 ETH',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag
+            type="network"
+            network={{
+              name: 'Network',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag
+            type="account"
+            account={{
+              name: 'User Name',
+              emoji: '🐷',
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag
+            type="collectible"
+            collectible={{
+              name: 'Collectible #123',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={20}
+            blur
+          />
+          <ContextTag type="address" address="0x045...1ah" size={20} blur />
+          <ContextTag
+            icon={<PendingIcon size={12} />}
+            type="icon"
+            label="Context"
+            size={20}
+            blur
+          />
+          <ContextTag type="audio" audioLength="00:32" size={20} blur />
+        </Stack>
+
+        <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag
+            type="user"
             user={{
               name: 'User',
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
             }}
             size={24}
+            textSize={13}
             blur
           />
           <ContextTag
@@ -387,6 +875,7 @@ export const AllVariants: Story = {
               icon: <MembersIcon size={12} />,
             }}
             size={24}
+            textSize={13}
             blur
           />
           <ContextTag
@@ -397,6 +886,7 @@ export const AllVariants: Story = {
               name: 'channel',
             }}
             size={24}
+            textSize={13}
             blur
           />
           <ContextTag
@@ -406,6 +896,7 @@ export const AllVariants: Story = {
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
             }}
             size={24}
+            textSize={13}
             blur
           />
           <ContextTag
@@ -415,6 +906,7 @@ export const AllVariants: Story = {
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
             }}
             size={24}
+            textSize={13}
             blur
           />
           <ContextTag
@@ -424,15 +916,17 @@ export const AllVariants: Story = {
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
             }}
             size={24}
+            textSize={13}
             blur
           />
           <ContextTag
             type="account"
-            user={{
+            account={{
               name: 'User Name',
               emoji: '🐷',
             }}
             size={24}
+            textSize={13}
             blur
           />
           <ContextTag
@@ -442,22 +936,142 @@ export const AllVariants: Story = {
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
             }}
             size={24}
+            textSize={13}
+            blur
+          />
+          <ContextTag
+            type="address"
+            address="0x045...1ah"
+            size={24}
+            textSize={13}
             blur
           />
-          <ContextTag type="address" address="0x045...1ah" size={24} blur />
           <ContextTag
             icon={<PendingIcon size={12} />}
             type="icon"
             label="Context"
             size={24}
+            textSize={13}
+            blur
+          />
+          <ContextTag
+            type="audio"
+            audioLength="00:32"
+            size={24}
+            textSize={13}
             blur
           />
-          <ContextTag type="audio" audioLength="00:32" size={24} blur />
         </Stack>
 
         <Stack space flexDirection="column" alignItems="flex-start">
           <ContextTag
-            type="default"
+            type="user"
+            user={{
+              name: 'User',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={24}
+            textSize={15}
+            blur
+          />
+          <ContextTag
+            type="group"
+            group={{
+              name: 'Group',
+              icon: <MembersIcon size={12} />,
+            }}
+            size={24}
+            textSize={15}
+            blur
+          />
+          <ContextTag
+            type="channel"
+            channel={{
+              communityName: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+              name: 'channel',
+            }}
+            size={24}
+            textSize={15}
+            blur
+          />
+          <ContextTag
+            type="community"
+            community={{
+              name: 'Rarible',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={24}
+            textSize={15}
+            blur
+          />
+          <ContextTag
+            type="token"
+            token={{
+              name: '10 ETH',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={24}
+            textSize={15}
+            blur
+          />
+          <ContextTag
+            type="network"
+            network={{
+              name: 'Network',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={24}
+            textSize={15}
+            blur
+          />
+          <ContextTag
+            type="account"
+            account={{
+              name: 'User Name',
+              emoji: '🐷',
+            }}
+            size={24}
+            textSize={15}
+            blur
+          />
+          <ContextTag
+            type="collectible"
+            collectible={{
+              name: 'Collectible #123',
+              src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
+            }}
+            size={24}
+            textSize={15}
+            blur
+          />
+          <ContextTag
+            type="address"
+            address="0x045...1ah"
+            size={24}
+            textSize={15}
+            blur
+          />
+          <ContextTag
+            icon={<PendingIcon size={12} />}
+            type="icon"
+            label="Context"
+            size={24}
+            textSize={15}
+            blur
+          />
+          <ContextTag
+            type="audio"
+            audioLength="00:32"
+            size={24}
+            textSize={15}
+            blur
+          />
+        </Stack>
+
+        <Stack space flexDirection="column" alignItems="flex-start">
+          <ContextTag
+            type="user"
             user={{
               name: 'User',
               src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
@@ -513,7 +1127,7 @@ export const AllVariants: Story = {
           />
           <ContextTag
             type="account"
-            user={{
+            account={{
               name: 'User Name',
               emoji: '🐷',
             }}

packages/components/src/context-tag/context-tag.tsx

@@ -1,3 +1,5 @@
+import { cloneElement } from 'react'
+
 import { ChevronRightIcon, PlayIcon } from '@status-im/icons'
 import { Stack, styled } from '@tamagui/core'
 import { View } from 'react-native'
@@ -5,69 +7,97 @@ import { View } from 'react-native'
 import { Avatar } from '../avatar'
 import { Text } from '../text'
 
+import type { AvatarProps } from '../avatar'
 import type { TextProps } from '../text'
+import type { IconProps } from '@status-im/icons'
 
-type Props = {
+type Props = { blur?: boolean; outline?: boolean } & (
-  children?: React.ReactNode
-  size?: 24 | 32
-  blur?: boolean
-  outline?: boolean
-} & (
-  | { type: 'default'; user: { name: string; src: string } }
-  | { type: 'account'; user: { name: string; emoji: string } }
   | {
-      type: 'group'
+      size?: 20 | 32
-      group: {
+    }
-        name: string
+  | {
-        icon: React.ReactElement
+      size?: 24
+      textSize: 13 | 15
+    }
+) &
+  (
+    | { type: 'user'; user: { name: string; src: string } }
+    | { type: 'account'; account: { name: string; emoji: string } }
+    | {
+        type: 'group'
+        group: {
+          name: string
+          icon: React.ReactElement
+        }
       }
-    }
+    | { type: 'community'; community: { name: string; src?: string } }
-  | { type: 'community'; community: { name: string; src?: string } }
+    | {
-  | {
+        type: 'channel'
-      type: 'channel'
+        channel: { communityName: string; src: string; name: string }
-      channel: { communityName: string; src: string; name: string }
+      }
-    }
+    | { type: 'token'; token: { name: string; src: string } }
-  | { type: 'token'; token: { name: string; src: string } }
+    | { type: 'network'; network: { name: string; src: string } }
-  | { type: 'network'; network: { name: string; src: string } }
+    | { type: 'collectible'; collectible: { name: string; src: string } }
-  | { type: 'collectible'; collectible: { name: string; src: string } }
+    | { type: 'address'; address: string }
-  | { type: 'address'; address: string }
+    | { type: 'icon'; icon: React.ReactElement; label: string }
-  | { type: 'icon'; icon: React.ReactElement; label: string }
+    | { type: 'audio'; audioLength: string }
-  | { type: 'audio'; audioLength: string }
+    | { type: 'label'; children: string }
-)
+  )
 
-const textSizes: Record<NonNullable<Props['size']>, TextProps['size']> = {
+const textSizes: Record<
+  Exclude<NonNullable<Props['size']>, 24>,
+  Extract<TextProps['size'], 13 | 15>
+> = {
   '32': 15,
-  '24': 13,
+  /**
+   * note: "These context sizes are the same size as the ones above (24px), but the text size differs.
+   * We can have a bigger or smaller text depending on the context."
+   *
+   * – https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n?node-id=1336:34320&mode=design#541570513
+   */
+  // '24': 15,
+  '20': 13,
 }
 
-const avatarSizes: Record<NonNullable<Props['size']>, 28 | 20> = {
+const avatarSizes: Record<
+  NonNullable<Props['size']>,
+  Extract<AvatarProps['size'], 28 | 20 | 16>
+> = {
   '32': 28,
   '24': 20,
+  '20': 16,
 }
 
-const Label = ({
+const iconSizes: Record<NonNullable<Props['size']>, IconProps['size']> = {
-  children,
+  '32': 20,
-  size,
+  '24': 12,
-  type = 'default',
+  '20': 12,
-}: {
+}
+
+const Label = (props: {
   children: string
-  size: 24 | 32
+  size: 13 | 15
   type?: 'default' | 'monospace'
-}) => (
+}) => {
-  <Text size={textSizes[size]} weight="medium" color="$neutral-100" type={type}>
+  const { children, size, type = 'default' } = props
-    {children}
+
-  </Text>
+  return (
-)
+    <Text size={size} weight="medium" color="$neutral-100" type={type}>
+      {children}
+    </Text>
+  )
+}
 
 const ContextTag = (props: Props) => {
   const { size = 24, blur = false, outline, type } = props
 
   const rounded = type === 'account' || type === 'collectible'
-  const hasAvatar = type !== 'address'
+  const hasAvatar = type !== 'address' && type !== 'icon' && type !== 'label'
+  const textSize = props.size === 24 ? props.textSize : textSizes[props.size!]
 
   const renderContent = () => {
     switch (type) {
-      case 'default': {
+      case 'user': {
         return (
           <>
             <Avatar
@@ -76,7 +106,7 @@ const ContextTag = (props: Props) => {
               src={props.user.src}
               name={props.user.name}
             />
-            <Label size={size}>{props.user.name}</Label>
+            <Label size={textSize}>{props.user.name}</Label>
           </>
         )
       }
@@ -89,7 +119,7 @@ const ContextTag = (props: Props) => {
               src={props.community.src}
               name={props.community.name}
             />
-            <Label size={size}>{props.community.name}</Label>
+            <Label size={textSize}>{props.community.name}</Label>
           </>
         )
       }
@@ -103,9 +133,9 @@ const ContextTag = (props: Props) => {
               name={props.channel.name}
             />
             <Stack flexDirection="row" gap="$0" alignItems="center">
-              <Label size={size}>{props.channel.communityName}</Label>
+              <Label size={textSize}>{props.channel.communityName}</Label>
               <ChevronRightIcon color="$neutral-50" size={20} />
-              <Label size={size}>{`# ` + props.channel.name}</Label>
+              <Label size={textSize}>{`# ` + props.channel.name}</Label>
             </Stack>
           </>
         )
@@ -119,13 +149,13 @@ const ContextTag = (props: Props) => {
               src={props.token.src}
               name={props.token.name}
             />
-            <Label size={size}>{props.token.name}</Label>
+            <Label size={textSize}>{props.token.name}</Label>
           </>
         )
       }
       case 'address': {
         return (
-          <Label size={size} type="monospace">
+          <Label size={textSize} type="monospace">
             {props.address}
           </Label>
         )
@@ -140,7 +170,7 @@ const ContextTag = (props: Props) => {
               backgroundColor="$primary-50"
               color="$white-100"
             />
-            <Label size={size}>{props.audioLength}</Label>
+            <Label size={textSize}>{props.audioLength}</Label>
           </>
         )
       }
@@ -150,9 +180,9 @@ const ContextTag = (props: Props) => {
             <Avatar
               type="account"
               size={avatarSizes[size]}
-              name={props.user.emoji}
+              name={props.account.emoji}
             />
-            <Label size={size}>{props.user.name}</Label>
+            <Label size={textSize}>{props.account.name}</Label>
           </>
         )
       }
@@ -166,7 +196,7 @@ const ContextTag = (props: Props) => {
               color="$white-70"
               icon={props.group.icon}
             />
-            <Label size={size}>{props.group.name}</Label>
+            <Label size={textSize}>{props.group.name}</Label>
           </>
         )
       }
@@ -179,37 +209,38 @@ const ContextTag = (props: Props) => {
               src={props.network.src}
               name={props.network.name}
             />
-            <Label size={size}>{props.network.name}</Label>
+            <Label size={textSize}>{props.network.name}</Label>
           </>
         )
       }
       case 'collectible': {
         return (
           <>
+            {/* fixme: not an avatar but a resized image; see https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n?node-id=1336:34320&mode=design#541620575 */}
             <Avatar
               type="account"
               size={avatarSizes[size]}
               src={props.collectible.src}
               name={props.collectible.name}
             />
-            <Label size={size}>{props.collectible.name}</Label>
+            <Label size={textSize}>{props.collectible.name}</Label>
           </>
         )
       }
       case 'icon': {
         return (
           <>
-            <Avatar
+            {cloneElement(props.icon, {
-              type="icon"
+              size: iconSizes[size],
-              size={avatarSizes[size]}
+              color: '$neutral-50',
-              icon={props.icon}
+            })}
-              backgroundColor="$transparent"
+            <Label size={textSize}>{props.label}</Label>
-              color="$neutral-50"
-            />
-            <Label size={size}>{props.label}</Label>
           </>
         )
       }
+      case 'label': {
+        return <Label size={textSize}>{props.children}</Label>
+      }
     }
   }
 
@@ -219,8 +250,8 @@ const ContextTag = (props: Props) => {
       blur={blur}
       borderRadius={rounded ? '$8' : '$full'}
       size={size}
-      paddingVertical={hasAvatar ? 0 : 1}
+      textSize={textSize}
-      paddingLeft={hasAvatar ? 1 : size === 24 ? 8 : 12}
+      {...(hasAvatar && { paddingLeft: 1 })}
     >
       {renderContent()}
     </Base>
@@ -257,10 +288,14 @@ const Base = styled(View, {
       },
     },
     size: {
+      20: {
+        height: 20,
+        gap: 4,
+        paddingHorizontal: 6,
+      },
       24: {
         height: 24,
         gap: 4,
-        paddingHorizontal: 8,
       },
       32: {
         height: 32,
@@ -268,5 +303,13 @@ const Base = styled(View, {
         paddingHorizontal: 12,
       },
     },
+    textSize: {
+      13: {
+        paddingHorizontal: 8,
+      },
+      15: {
+        paddingHorizontal: 6,
+      },
+    },
   } as const,
 })

packages/components/src/pinned-message/pinned-message.tsx

@@ -37,6 +37,7 @@ const PinnedMessage = (props: Props) => {
             </Text>
             <ContextTag
               size={24}
+              textSize={13}
               type="channel"
               channel={{
                 communityName: 'Rarible',