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
2023-09-11 12:26:24 +02:00 · 2023-09-11 12:26:24 +02:00 · 7c96decfc9
parent 5dc7997dc5
commit 7c96decfc9
5 changed files with 755 additions and 91 deletions
--- a/.changeset/few-coins-notice.md
+++ b/.changeset/few-coins-notice.md
@ -0,0 +1,5 @@
+---
+'@status-im/components': patch
+---
+
+update Context Tag
--- a/packages/components/src/avatar/avatar.tsx
+++ b/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']> =
--- a/packages/components/src/context-tag/context-tag.stories.tsx
+++ b/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: '🐷',
            }}
--- a/packages/components/src/context-tag/context-tag.tsx
+++ b/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 = {
-  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 Props = { blur?: boolean; outline?: boolean } & (
  | {
-      type: 'group'
-      group: {
-        name: string
-        icon: React.ReactElement
+      size?: 20 | 32
+    }
+  | {
+      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: 'channel'
-      channel: { communityName: string; src: string; name: string }
-    }
-  | { type: 'token'; token: { name: string; src: string } }
-  | { type: 'network'; network: { name: string; src: string } }
-  | { type: 'collectible'; collectible: { name: string; src: string } }
-  | { type: 'address'; address: string }
-  | { type: 'icon'; icon: React.ReactElement; label: string }
-  | { type: 'audio'; audioLength: string }
-)
+    | { type: 'community'; community: { name: string; src?: string } }
+    | {
+        type: 'channel'
+        channel: { communityName: string; src: string; name: string }
+      }
+    | { type: 'token'; token: { name: string; src: string } }
+    | { type: 'network'; network: { name: string; src: string } }
+    | { type: 'collectible'; collectible: { name: string; src: string } }
+    | { type: 'address'; address: string }
+    | { type: 'icon'; icon: React.ReactElement; label: 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 = ({
-  children,
-  size,
-  type = 'default',
-}: {
+const iconSizes: Record<NonNullable<Props['size']>, IconProps['size']> = {
+  '32': 20,
+  '24': 12,
+  '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}>
-    {children}
-  </Text>
-)
+}) => {
+  const { children, size, type = 'default' } = props
+
+  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
-              type="icon"
-              size={avatarSizes[size]}
-              icon={props.icon}
-              backgroundColor="$transparent"
-              color="$neutral-50"
-            />
-            <Label size={size}>{props.label}</Label>
+            {cloneElement(props.icon, {
+              size: iconSizes[size],
+              color: '$neutral-50',
+            })}
+            <Label size={textSize}>{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}
-      paddingLeft={hasAvatar ? 1 : size === 24 ? 8 : 12}
+      textSize={textSize}
+      {...(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,
 })
--- a/packages/components/src/pinned-message/pinned-message.tsx
+++ b/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',