Release (#578 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
update peers (#576 )
2024-07-24 16:48:25 +02:00 · 2024-07-24 15:51:30 +02:00 · 2024-07-24 14:51:36 +02:00 · 2024-07-24 14:39:54 +02:00 · 2024-06-17 14:22:05 +02:00 · 2024-06-17 13:56:58 +02:00
348 changed files with 14900 additions and 4007 deletions
@@ -5,6 +5,7 @@ on:
    branches: ['main']
  pull_request:
    types: [opened, synchronize]
+  workflow_call:

 env:
  NEXT_PUBLIC_GHOST_API_URL: ''
@@ -16,11 +17,7 @@ jobs:
  build:
    name: Build and Test
    timeout-minutes: 15
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest, macos-latest]
+    runs-on: ubuntu-latest

    steps:
      - name: Check out code
@@ -28,7 +25,7 @@ jobs:
        with:
          fetch-depth: 2

-      - name: Setup Node.js ${{ matrix.node-version }}
+      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
@@ -14,7 +14,11 @@ env:
  TAMAGUI_TARGET: 'web'

 jobs:
+  ci:
+    # https://docs.github.com/en/actions/using-workflows/reusing-workflows#calling-a-reusable-workflow
+    uses: ./.github/workflows/ci.yml
  release:
+    needs: ci
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
@@ -23,9 +27,6 @@ jobs:
          node-version: 18
      - run: yarn install --frozen-lockfile
      - run: yarn build
-      - run: yarn typecheck
-      - run: yarn lint && yarn format --check
-      - run: yarn test
      - uses: changesets/action@v1
        id: changesets
        with:
@@ -4,8 +4,9 @@
    "dbaeumer.vscode-eslint",
    "zxh404.vscode-proto3",
    "ms-vscode.hexeditor",
-    "zixuanchen.vitest-explorer",
    "mikestead.dotenv",
-    "bradlc.vscode-tailwindcss"
+    "bradlc.vscode-tailwindcss",
+    "vitest.explorer",
+    "github.vscode-github-actions"
  ]
 }
@@ -26,14 +26,15 @@
      "smartStep": true,
      "sourceMaps": true,
      "env": {
-        "DEBUG": "*",
+        // "DEBUG": "*,-vite*,-connect:*",
        "DEBUG_HIDE_DATE": "0",
        "DEBUG_COLORS": "1",
        "VITE_NODE": "true"
      },
      "runtimeArgs": ["--preserve-symlinks"],
      "outFiles": ["${workspaceFolder}/**/*.js"],
-      "resolveSourceMapLocations": ["**/*"]
+      "resolveSourceMapLocations": ["**/*"],
+      "outputCapture": "std"
    },
    {
      "type": "node",
@@ -125,3 +125,7 @@ And run it:
 ```sh
 yarn workspace with-vite run dev
 ```
+
+## Sponsors
+
+This project is sponsored by Browserstack.
@@ -34,7 +34,7 @@
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@expo/metro-config": "^0.3.21",
-    "@tamagui/babel-plugin": "1.36.4",
+    "@tamagui/babel-plugin": "1.74.21",
    "@types/react-native": "~0.70.6",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
@@ -13,7 +13,7 @@
  "dependencies": {
    "@status-im/components": "*",
    "@status-im/icons": "*",
-    "@tamagui/core": "1.36.4",
+    "@tamagui/core": "1.74.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-native-web": "^0.18.12",
@@ -21,7 +21,7 @@
  },
  "devDependencies": {
    "@status-im/eslint-config": "*",
-    "@tamagui/vite-plugin": "1.36.4",
+    "@tamagui/vite-plugin": "1.74.21",
    "@types/react": "^18.0.33",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react-swc": "^3.2.0",
@@ -9,7 +9,10 @@ if (!publicKey) {
  )
 }

-const environment = process.env.NEXT_PUBLIC_ENVIRONMENT as 'production' | 'test'
+const environment = process.env.NEXT_PUBLIC_ENVIRONMENT as
+  | 'development'
+  | 'preview'
+  | 'production'

 /**
 * For some reason the regular import fails with a server error:
@@ -8,7 +8,10 @@ if (!publicKey) {
  )
 }

-const environment = process.env.ENVIRONMENT as 'production' | 'test'
+const environment = process.env.ENVIRONMENT as
+  | 'development'
+  | 'preview'
+  | 'production'

 export const App = () => {
  return (
@@ -1,5 +1,17 @@
 # @status-im/colors

+## 0.4.0
+
+### Minor Changes
+
+- cbc0e06: fix copper color typo
+
+## 0.3.0
+
+### Minor Changes
+
+- ed918fc: Sync new colors
+
 ## 0.2.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@status-im/colors",
-  "version": "0.2.0",
+  "version": "0.4.0",
  "files": [
    "types",
    "dist",
@@ -28,7 +28,8 @@
    "lint": "eslint src",
    "lint:fix": "yarn lint --fix",
    "format": "prettier --write src",
-    "clean": "rimraf dist node_modules .turbo"
+    "clean": "rimraf dist node_modules .turbo",
+    "prepack": "yarn build"
  },
  "peerDependencies": {},
  "devDependencies": {
@@ -1,6 +1,7 @@
 export const blur = {
  'neutral-100/70': 'rgba(9 16 28 / 70%)',
  'neutral-5/70': 'rgba(245 246 248 / 70%)',
+  'neutral-80/1': 'rgba(25 36 56 / 1%)',
  'neutral-80/80': 'rgba(25 36 56 / 80%)',
  'neutral-90/70': 'rgba(19 29 47 / 70%)',
  'neutral-95/70': 'rgba(13 22 37 / 70%)',
@@ -20,13 +20,13 @@ export const customisation = {
  'camel/30': 'rgba(199 143 103 / 30%)',
  'camel/40': 'rgba(199 143 103 / 40%)',
  'camel/5': 'rgba(199 143 103 / 5%)',
-  'cooper-50': 'rgba(203 98 86 / 100%)',
-  'cooper-60': 'rgba(162 78 69 / 100%)',
-  'cooper/10': 'rgba(203 98 86 / 10%)',
-  'cooper/20': 'rgba(203 98 86 / 20%)',
-  'cooper/30': 'rgba(203 98 86 / 30%)',
-  'cooper/40': 'rgba(203 98 86 / 40%)',
-  'cooper/5': 'rgba(203 98 86 / 5%)',
+  'copper-50': 'rgba(203 98 86 / 100%)',
+  'copper-60': 'rgba(162 78 69 / 100%)',
+  'copper/10': 'rgba(203 98 86 / 10%)',
+  'copper/20': 'rgba(203 98 86 / 20%)',
+  'copper/30': 'rgba(203 98 86 / 30%)',
+  'copper/40': 'rgba(203 98 86 / 40%)',
+  'copper/5': 'rgba(203 98 86 / 5%)',
  'magenta-50': 'rgba(236 38 108 / 100%)',
  'magenta-60': 'rgba(189 30 86 / 100%)',
  'magenta/10': 'rgba(236 38 108 / 10%)',
@@ -11,6 +11,7 @@ export const neutral = {
  '90': 'rgba(19 29 47 / 100%)',
  '95': 'rgba(13 22 37 / 100%)',
  '100': 'rgba(9 16 28 / 100%)',
+  '2.5': 'rgba(250 251 252 / 100%)',
  '80/10': 'rgba(27 39 61 / 10%)',
  '80/20': 'rgba(27 39 61 / 20%)',
  '80/30': 'rgba(27 39 61 / 30%)',
@@ -1,34 +1,34 @@
 export const security = {
  'identicon-01': 'rgba(0 0 0 / 100%)',
-  'identicon-02': 'rgba(0 255 0 / 100%)',
-  'identicon-03': 'rgba(255 255 0 / 100%)',
-  'identicon-04': 'rgba(255 0 0 / 100%)',
-  'identicon-05': 'rgba(255 0 255 / 100%)',
-  'identicon-06': 'rgba(0 0 255 / 100%)',
-  'identicon-07': 'rgba(0 255 255 / 100%)',
-  'identicon-08': 'rgba(114 111 111 / 100%)',
-  'identicon-09': 'rgba(0 152 0 / 100%)',
-  'identicon-10': 'rgba(168 172 0 / 100%)',
-  'identicon-11': 'rgba(154 0 0 / 100%)',
-  'identicon-12': 'rgba(144 0 144 / 100%)',
-  'identicon-13': 'rgba(0 0 134 / 100%)',
-  'identicon-14': 'rgba(0 134 148 / 100%)',
-  'identicon-15': 'rgba(196 196 196 / 100%)',
-  'identicon-16': 'rgba(184 255 187 / 100%)',
-  'identicon-17': 'rgba(255 255 176 / 100%)',
-  'identicon-18': 'rgba(255 157 157 / 100%)',
-  'identicon-19': 'rgba(255 176 255 / 100%)',
-  'identicon-20': 'rgba(155 129 255 / 100%)',
-  'identicon-21': 'rgba(194 255 255 / 100%)',
-  'identicon-22': 'rgba(231 231 231 / 100%)',
-  'identicon-23': 'rgba(255 196 19 / 100%)',
-  'identicon-24': 'rgba(255 87 51 / 100%)',
-  'identicon-25': 'rgba(255 0 153 / 100%)',
-  'identicon-26': 'rgba(158 0 255 / 100%)',
+  'identicon-02': 'rgba(114 111 111 / 100%)',
+  'identicon-03': 'rgba(196 196 196 / 100%)',
+  'identicon-04': 'rgba(231 231 231 / 100%)',
+  'identicon-05': 'rgba(255 255 255 / 100%)',
+  'identicon-06': 'rgba(0 255 0 / 100%)',
+  'identicon-07': 'rgba(0 152 0 / 100%)',
+  'identicon-08': 'rgba(184 255 187 / 100%)',
+  'identicon-09': 'rgba(255 196 19 / 100%)',
+  'identicon-10': 'rgba(159 89 71 / 100%)',
+  'identicon-11': 'rgba(255 255 0 / 100%)',
+  'identicon-12': 'rgba(168 172 0 / 100%)',
+  'identicon-13': 'rgba(255 255 176 / 100%)',
+  'identicon-14': 'rgba(255 87 51 / 100%)',
+  'identicon-15': 'rgba(255 0 0 / 100%)',
+  'identicon-16': 'rgba(154 0 0 / 100%)',
+  'identicon-17': 'rgba(255 157 157 / 100%)',
+  'identicon-18': 'rgba(255 0 153 / 100%)',
+  'identicon-19': 'rgba(200 0 120 / 100%)',
+  'identicon-20': 'rgba(255 0 255 / 100%)',
+  'identicon-21': 'rgba(144 0 144 / 100%)',
+  'identicon-22': 'rgba(255 176 255 / 100%)',
+  'identicon-23': 'rgba(158 0 255 / 100%)',
+  'identicon-24': 'rgba(0 0 255 / 100%)',
+  'identicon-25': 'rgba(0 0 134 / 100%)',
+  'identicon-26': 'rgba(155 129 255 / 100%)',
  'identicon-27': 'rgba(63 174 249 / 100%)',
-  'identicon-28': 'rgba(0 240 182 / 100%)',
-  'identicon-29': 'rgba(255 255 255 / 100%)',
-  'identicon-30': 'rgba(159 89 71 / 100%)',
-  'identicon-31': 'rgba(200 0 120 / 100%)',
-  'identicon-32': 'rgba(154 102 0 / 100%)',
+  'identicon-28': 'rgba(154 102 0 / 100%)',
+  'identicon-29': 'rgba(0 255 255 / 100%)',
+  'identicon-30': 'rgba(0 134 148 / 100%)',
+  'identicon-31': 'rgba(194 255 255 / 100%)',
+  'identicon-32': 'rgba(0 240 182 / 100%)',
 }
@@ -14,6 +14,6 @@ export const social = {
  'super-rare': 'rgba(0 0 0 / 100%)',
  tumblr: 'rgba(55 71 79 / 100%)',
  twitch: 'rgba(103 58 183 / 100%)',
-  twitter: 'rgba(3 169 244 / 100%)',
+  twitter: 'rgba(0 0 0 / 100%)',
  youtube: 'rgba(255 48 0 / 100%)',
 }
@@ -1,5 +1,80 @@
 # @status-im/components

+## 0.6.5
+
+### Patch Changes
+
+- 8540f86: draft: add disabled state to Tabs
+
+## 0.6.4
+
+### Patch Changes
+
+- 1a17092: fix the color of the icon in IconButton
+
+## 0.6.3
+
+### Patch Changes
+
+- 7093144: add size variants to Step
+
+## 0.6.2
+
+### Patch Changes
+
+- 9a495fd: export `Tooltip`
+
+## 0.6.1
+
+### Patch Changes
+
+- 70cb660: update avatar initials
+- f9b9220: update toast options
+- f6b7ca3: fix toast icon color
+
+## 0.6.0
+
+### Minor Changes
+
+- b539321: fix copper color typo
+
+## 0.5.2
+
+### Patch Changes
+
+- 7afc447: - Add tabs variants
+  - Remove `backdrop-filter`
+
+## 0.5.1
+
+### Patch Changes
+
+- 9d66ba0: Add `<Button />` blur subvariants
+
+## 0.5.0
+
+### Minor Changes
+
+- 367145c: update `tamagui`
+
+### Patch Changes
+
+- Updated dependencies [367145c]
+  - @status-im/icons@0.5.0
+
+## 0.4.4
+
+### Patch Changes
+
+- d796765: sync colors
+- 29b9734: add default curors to ContextTag
+
+## 0.4.3
+
+### Patch Changes
+
+- 45be34b: set TabsTrigger cursor
+
 ## 0.4.2

 ### Patch Changes
@@ -0,0 +1,109 @@
+// note: opacity hex https://stackoverflow.com/a/8254129/6924883
+// note: opacity amount https://tailwindcss.com/docs/opacity
+export const opacity = {
+  100: {
+    hex: 'FF',
+    percentage: '100%',
+    decimal: 1,
+  },
+  95: {
+    hex: 'F2',
+    percentage: '95%',
+    decimal: 0.95,
+  },
+  90: {
+    hex: 'E5',
+    percentage: '90%',
+    decimal: 0.9,
+  },
+  85: {
+    hex: 'D8',
+    percentage: '85%',
+    decimal: 0.85,
+  },
+  80: {
+    hex: 'CC',
+    percentage: '80%',
+    decimal: 0.8,
+  },
+  75: {
+    hex: 'BF',
+    percentage: '75%',
+    decimal: 0.75,
+  },
+  70: {
+    hex: 'B2',
+    percentage: '70%',
+    decimal: 0.7,
+  },
+  65: {
+    hex: 'A5',
+    percentage: '65%',
+    decimal: 0.65,
+  },
+  60: {
+    hex: '99',
+    percentage: '60%',
+    decimal: 0.6,
+  },
+  55: {
+    hex: '8C',
+    percentage: '55%',
+    decimal: 0.55,
+  },
+  50: {
+    hex: '7F',
+    percentage: '50%',
+    decimal: 0.5,
+  },
+  45: {
+    hex: '72',
+    percentage: '45%',
+    decimal: 0.45,
+  },
+  40: {
+    hex: '66',
+    percentage: '40%',
+    decimal: 0.4,
+  },
+  35: {
+    hex: '59',
+    percentage: '35%',
+    decimal: 0.35,
+  },
+  30: {
+    hex: '4C',
+    percentage: '30%',
+    decimal: 0.3,
+  },
+  25: {
+    hex: '3F',
+    percentage: '25%',
+    decimal: 0.25,
+  },
+  20: {
+    hex: '33',
+    percentage: '20%',
+    decimal: 0.2,
+  },
+  15: {
+    hex: '26',
+    percentage: '15%',
+    decimal: 0.15,
+  },
+  10: {
+    hex: '19',
+    percentage: '10%',
+    decimal: 0.1,
+  },
+  5: {
+    hex: '0C',
+    percentage: '5%',
+    decimal: 0.05,
+  },
+  0: {
+    hex: '00',
+    percentage: '0%',
+    decimal: 0,
+  },
+}
@@ -1,6 +1,6 @@
 {
  "name": "@status-im/components",
-  "version": "0.4.2",
+  "version": "0.6.5",
  "sideEffects": [
    "*.css"
  ],
@@ -21,7 +21,8 @@
    "storybook": "node ./scripts/storybook.js",
    "storybook:dev": "storybook dev -p 3001",
    "storybook:build": "storybook build",
-    "clean": "rimraf node_modules dist .turbo storybook-static .tamagui"
+    "clean": "rimraf node_modules dist .turbo storybook-static .tamagui",
+    "prepack": "yarn build"
  },
  "peerDependencies": {
    "react": "^18.2.0"
@@ -37,37 +38,38 @@
    "@radix-ui/react-tooltip": "^1.0.5",
    "@status-im/colors": "*",
    "@status-im/icons": "*",
-    "@tamagui/animations-css": "1.36.4",
-    "@tamagui/animations-react-native": "1.36.4",
-    "@tamagui/core": "1.36.4",
-    "@tamagui/font-inter": "1.36.4",
-    "@tamagui/react-native-media-driver": "1.36.4",
-    "@tamagui/shorthands": "1.36.4",
-    "@tamagui/theme-base": "1.36.4",
-    "@tamagui/web": "1.36.4",
+    "@tamagui/animations-css": "1.74.21",
+    "@tamagui/animations-react-native": "1.74.21",
+    "@tamagui/core": "1.74.21",
+    "@tamagui/font-inter": "1.74.21",
+    "@tamagui/image": "1.74.21",
+    "@tamagui/react-native-media-driver": "1.74.21",
+    "@tamagui/shorthands": "1.74.21",
+    "@tamagui/themes": "1.74.21",
+    "@tamagui/web": "1.74.21",
    "date-fns": "^2.30.0",
    "expo-blur": "^12.2.2",
    "expo-linear-gradient": "^12.1.2",
    "react-day-picker": "^8.7.1",
-    "tamagui": "1.36.4",
+    "tamagui": "1.74.21",
    "zustand": "^4.3.7"
  },
  "devDependencies": {
-    "@storybook/addon-essentials": "7.4.3",
-    "@storybook/addon-interactions": "7.4.3",
-    "@storybook/addon-links": "7.4.3",
-    "@storybook/blocks": "7.4.3",
-    "@storybook/react": "7.4.3",
-    "@storybook/react-vite": "7.4.3",
-    "@storybook/testing-library": "^0.1.0",
-    "@tamagui/vite-plugin": "1.36.4",
-    "@vitejs/plugin-react-swc": "^3.2.0",
    "@status-im/eslint-config": "*",
+    "@storybook/addon-essentials": "7.5.1",
+    "@storybook/addon-interactions": "7.5.1",
+    "@storybook/addon-links": "7.5.1",
+    "@storybook/blocks": "7.5.1",
+    "@storybook/react": "7.5.1",
+    "@storybook/react-vite": "7.5.1",
+    "@storybook/testing-library": "^0.2.2",
+    "@tamagui/vite-plugin": "1.74.21",
+    "@vitejs/plugin-react-swc": "^3.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-native-svg": "^13.8.0",
    "react-native-web": "^0.19.5",
-    "storybook": "7.4.3",
+    "storybook": "7.5.1",
    "storybook-addon-designs": "7.0.0-beta.1",
    "storybook-dark-mode": "^3.0.0",
    "vite": "^4.2.1"
@@ -45,79 +45,161 @@ export const User: StoryObj<UserArgs> = {
  render: args => (
    <Stack space flexDirection="row">
      <Stack space flexDirection="column">
-        <Stack space alignItems="flex-start">
-          <Avatar
-            {...args}
-            size={80}
-            indicator="online"
-            colorHash={[
-              [3, 30],
-              [2, 10],
-              [5, 5],
-              [3, 14],
-              [5, 4],
-              [4, 19],
-              [3, 16],
-              [4, 0],
-              [5, 28],
-              [4, 13],
-              [4, 15],
-            ]}
-          />
-          <Avatar
-            {...args}
-            size={56}
-            indicator="online"
-            colorHash={[
-              [3, 30],
-              [2, 10],
-              [5, 5],
-              [3, 14],
-              [5, 4],
-              [4, 19],
-              [3, 16],
-              [4, 0],
-              [5, 28],
-              [4, 13],
-              [4, 15],
-            ]}
-          />
-          <Avatar
-            {...args}
-            size={48}
-            indicator="online"
-            colorHash={[
-              [3, 30],
-              [2, 10],
-              [5, 5],
-              [3, 14],
-              [5, 4],
-              [4, 19],
-              [3, 16],
-              [4, 0],
-              [5, 28],
-              [4, 13],
-              [4, 15],
-            ]}
-          />
-          <Avatar
-            {...args}
-            size={32}
-            indicator="online"
-            colorHash={[
-              [3, 30],
-              [2, 10],
-              [5, 5],
-              [3, 14],
-              [5, 4],
-              [4, 19],
-              [3, 16],
-              [4, 0],
-              [5, 28],
-              [4, 13],
-              [4, 15],
-            ]}
-          />
+        <Stack space flexDirection="row">
+          <Stack space alignItems="flex-start">
+            <Avatar
+              {...args}
+              size={80}
+              indicator="online"
+              colorHash={[
+                [3, 30],
+                [2, 10],
+                [5, 5],
+                [3, 14],
+                [5, 4],
+                [4, 19],
+                [3, 16],
+                [4, 0],
+                [5, 28],
+                [4, 13],
+                [4, 15],
+              ]}
+            />
+            <Avatar
+              {...args}
+              size={56}
+              indicator="online"
+              colorHash={[
+                [3, 30],
+                [2, 10],
+                [5, 5],
+                [3, 14],
+                [5, 4],
+                [4, 19],
+                [3, 16],
+                [4, 0],
+                [5, 28],
+                [4, 13],
+                [4, 15],
+              ]}
+            />
+            <Avatar
+              {...args}
+              size={48}
+              indicator="online"
+              colorHash={[
+                [3, 30],
+                [2, 10],
+                [5, 5],
+                [3, 14],
+                [5, 4],
+                [4, 19],
+                [3, 16],
+                [4, 0],
+                [5, 28],
+                [4, 13],
+                [4, 15],
+              ]}
+            />
+            <Avatar
+              {...args}
+              size={32}
+              indicator="online"
+              colorHash={[
+                [3, 30],
+                [2, 10],
+                [5, 5],
+                [3, 14],
+                [5, 4],
+                [4, 19],
+                [3, 16],
+                [4, 0],
+                [5, 28],
+                [4, 13],
+                [4, 15],
+              ]}
+            />
+          </Stack>
+          <Stack space flexDirection="column">
+            <Stack space alignItems="flex-start">
+              <Avatar
+                {...args}
+                src={undefined}
+                size={80}
+                indicator="online"
+                colorHash={[
+                  [3, 30],
+                  [2, 10],
+                  [5, 5],
+                  [3, 14],
+                  [5, 4],
+                  [4, 19],
+                  [3, 16],
+                  [4, 0],
+                  [5, 28],
+                  [4, 13],
+                  [4, 15],
+                ]}
+              />
+              <Avatar
+                {...args}
+                src={undefined}
+                size={56}
+                indicator="online"
+                colorHash={[
+                  [3, 30],
+                  [2, 10],
+                  [5, 5],
+                  [3, 14],
+                  [5, 4],
+                  [4, 19],
+                  [3, 16],
+                  [4, 0],
+                  [5, 28],
+                  [4, 13],
+                  [4, 15],
+                ]}
+              />
+              <Avatar
+                {...args}
+                src={undefined}
+                size={48}
+                indicator="online"
+                colorHash={[
+                  [3, 30],
+                  [2, 10],
+                  [5, 5],
+                  [3, 14],
+                  [5, 4],
+                  [4, 19],
+                  [3, 16],
+                  [4, 0],
+                  [5, 28],
+                  [4, 13],
+                  [4, 15],
+                ]}
+              />
+              <Avatar
+                {...args}
+                src={undefined}
+                size={32}
+                indicator="online"
+                colorHash={[
+                  [3, 30],
+                  [2, 10],
+                  [5, 5],
+                  [3, 14],
+                  [5, 4],
+                  [4, 19],
+                  [3, 16],
+                  [4, 0],
+                  [5, 28],
+                  [4, 13],
+                  [4, 15],
+                ]}
+              />
+            </Stack>
+          </Stack>
        </Stack>
        <Stack space alignItems="flex-start">
          <Avatar {...args} size={80} indicator="online" />
@@ -127,95 +209,27 @@ export const User: StoryObj<UserArgs> = {
          <Avatar {...args} size={28} indicator="online" />
          <Avatar {...args} size={24} indicator="online" />
        </Stack>
-        <Stack space alignItems="flex-start">
-          <Avatar {...args} size={80} />
-          <Avatar {...args} size={56} />
-          <Avatar {...args} size={48} />
-          <Avatar {...args} size={32} />
-          <Avatar {...args} size={28} />
-          <Avatar {...args} size={24} />
-          <Avatar {...args} size={20} />
-          <Avatar {...args} size={16} />
-        </Stack>
-      </Stack>
-      <Stack space flexDirection="column">
-        <Stack space alignItems="flex-start">
-          <Avatar
-            {...args}
-            src={undefined}
-            size={80}
-            indicator="online"
-            colorHash={[
-              [3, 30],
-              [2, 10],
-              [5, 5],
-              [3, 14],
-              [5, 4],
-              [4, 19],
-              [3, 16],
-              [4, 0],
-              [5, 28],
-              [4, 13],
-              [4, 15],
-            ]}
-          />
-          <Avatar
-            {...args}
-            src={undefined}
-            size={56}
-            indicator="online"
-            colorHash={[
-              [3, 30],
-              [2, 10],
-              [5, 5],
-              [3, 14],
-              [5, 4],
-              [4, 19],
-              [3, 16],
-              [4, 0],
-              [5, 28],
-              [4, 13],
-              [4, 15],
-            ]}
-          />
-          <Avatar
-            {...args}
-            src={undefined}
-            size={48}
-            indicator="online"
-            colorHash={[
-              [3, 30],
-              [2, 10],
-              [5, 5],
-              [3, 14],
-              [5, 4],
-              [4, 19],
-              [3, 16],
-              [4, 0],
-              [5, 28],
-              [4, 13],
-              [4, 15],
-            ]}
-          />
-          <Avatar
-            {...args}
-            src={undefined}
-            size={32}
-            indicator="online"
-            colorHash={[
-              [3, 30],
-              [2, 10],
-              [5, 5],
-              [3, 14],
-              [5, 4],
-              [4, 19],
-              [3, 16],
-              [4, 0],
-              [5, 28],
-              [4, 13],
-              [4, 15],
-            ]}
-          />
+        <Stack space flexDirection="row">
+          <Stack space alignItems="flex-start">
+            <Avatar {...args} size={80} />
+            <Avatar {...args} size={56} />
+            <Avatar {...args} size={48} />
+            <Avatar {...args} size={32} />
+            <Avatar {...args} size={28} />
+            <Avatar {...args} size={24} />
+            <Avatar {...args} size={20} />
+            <Avatar {...args} size={16} />
+          </Stack>
+          <Stack space alignItems="flex-start">
+            <Avatar {...args} src={undefined} size={80} />
+            <Avatar {...args} src={undefined} size={56} />
+            <Avatar {...args} src={undefined} size={48} />
+            <Avatar {...args} src={undefined} size={32} />
+            <Avatar {...args} src={undefined} size={28} />
+            <Avatar {...args} src={undefined} size={24} />
+            <Avatar {...args} src={undefined} size={20} />
+            <Avatar {...args} src={undefined} size={16} />
+          </Stack>
        </Stack>
      </Stack>
    </Stack>
@@ -188,7 +188,7 @@ const Avatar = (props: AvatarProps) => {
    }

    if (props.type === 'channel') {
-      return '$blue-50-opa-20'
+      return '$blue/20'
    }

    return '$neutral-95'
@@ -214,8 +214,18 @@ const Avatar = (props: AvatarProps) => {
                  size={textSizes[props.size]}
                  weight="medium"
                  color="$white-100"
+                  select={false}
                >
-                  {props.name.slice(0, 2).toUpperCase()}
+                  {props.name
+                    .slice(
+                      0,
+                      props.type === 'user' &&
+                        props.size < 28 &&
+                        (!props.indicator || props.indicator === 'none')
+                        ? 1
+                        : 2
+                    )
+                    .toUpperCase()}
                </Text>
              )}
            </Fallback>
@@ -264,18 +274,23 @@ const Avatar = (props: AvatarProps) => {
              size={textSizes[props.size]}
              weight="medium"
              color="$white-100"
+              select={false}
            >
-              {props.name.slice(0, 2).toUpperCase()}
+              {props.name.slice(0, props.size < 24 ? 1 : 2).toUpperCase()}
            </Text>
          </Fallback>
        )
      case 'channel':
        if (props.emoji) {
-          return <Text size={channelEmojiSizes[props.size]}>{props.emoji}</Text>
+          return (
+            <Text size={channelEmojiSizes[props.size]} select={false}>
+              {props.emoji}
+            </Text>
+          )
        }

        return (
-          <Text size={textSizes[props.size]}>
+          <Text size={textSizes[props.size]} select={false}>
            {props.name.slice(0, 1).toUpperCase()}
          </Text>
        )
@@ -40,7 +40,7 @@ export const NoCount: Story = {

 export const NetworkStateConnecting: Story = {
  args: {
-    backgroundColor: '$neutral-80-opa-5',
+    backgroundColor: '$neutral-80/5',
    icon: <RecentIcon size={20} />,
    children: 'Connecting...',
  },
@@ -48,7 +48,7 @@ export const NetworkStateConnecting: Story = {

 export const NetworkStateError: Story = {
  args: {
-    backgroundColor: '$danger-50-opa-20',
+    backgroundColor: '$danger-/20',
    icon: <AlertIcon size={20} />,
    children: 'Network is down',
  },
@@ -62,16 +62,10 @@ export const AllVariants: Story = {
        Banner message
      </Banner>
      <Banner count={5}>Banner message</Banner>
-      <Banner
-        backgroundColor="$neutral-80-opa-5"
-        icon={<RecentIcon size={20} />}
-      >
+      <Banner backgroundColor="$neutral-80/20" icon={<RecentIcon size={20} />}>
        Connecting...
      </Banner>
-      <Banner
-        backgroundColor="$danger-50-opa-20"
-        icon={<AlertIcon size={20} />}
-      >
+      <Banner backgroundColor="$danger-/20" icon={<AlertIcon size={20} />}>
        Network is down
      </Banner>
      <Banner icon={<PinIcon size={20} />}>Banner message</Banner>
@@ -14,12 +14,7 @@ type Props = {
 }

 const Banner = (props: Props) => {
-  const {
-    icon = null,
-    children,
-    count,
-    backgroundColor = '$primary-50-opa-20',
-  } = props
+  const { icon = null, children, count, backgroundColor = '$blue/20' } = props

  return (
    <Base backgroundColor={backgroundColor}>
@@ -122,13 +122,27 @@ export const PrimaryIconOnlyCirlce: Story = {
  },
 }

-export const Success: Story = {
+export const Positive: Story = {
  args: {
    variant: 'positive',
    children: 'Click me',
  },
 }

+export const Grey: Story = {
+  args: {
+    variant: 'grey',
+    children: 'Click me',
+  },
+}
+
+export const GreyBlur: Story = {
+  args: {
+    variant: 'blur_grey',
+    children: 'Click me',
+  },
+}
+
 export const Outline: Story = {
  args: {
    variant: 'outline',
@@ -136,6 +150,13 @@ export const Outline: Story = {
  },
 }

+export const OutlineBlur: Story = {
+  args: {
+    variant: 'blur_outline',
+    children: 'Click me',
+  },
+}
+
 export const Ghost: Story = {
  args: {
    variant: 'ghost',
@@ -38,7 +38,7 @@ const textColors: MapVariant<typeof Base, 'variant'> = {
  sky: '$white-100',
  yellow: '$white-100',
  pink: '$white-100',
-  cooper: '$white-100',
+  copper: '$white-100',
  camel: '$white-100',
  magenta: '$white-100',
  yin: '$white-100',
@@ -46,6 +46,10 @@ const textColors: MapVariant<typeof Base, 'variant'> = {

  // dark theme
  dark_darkGrey: '$white-100',
+
+  // blur variants
+  blur_grey: '$neutral-100',
+  blur_outline: '$neutral-100',
 }

 const textSizes: Record<NonNullable<Props['size']>, TextProps['size']> = {
@@ -119,10 +123,10 @@ const Base = styled(View, {
  variants: {
    variant: {
      primary: {
-        backgroundColor: '$primary-50',
-        hoverStyle: { backgroundColor: '$primary-60' },
+        backgroundColor: '$blue-50',
+        hoverStyle: { backgroundColor: '$blue-60' },
        // TODO: update background color
-        pressStyle: { backgroundColor: '$primary-50' },
+        pressStyle: { backgroundColor: '$blue-50' },
      },
      positive: {
        backgroundColor: '$success-50',
@@ -174,9 +178,9 @@ const Base = styled(View, {
        pressStyle: { backgroundColor: '$orange-50' },
      },
      army: {
-        backgroundColor: '$indigo-50',
-        hoverStyle: { backgroundColor: '$indigo-60' },
-        pressStyle: { backgroundColor: '$indigo-50' },
+        backgroundColor: '$army-50',
+        hoverStyle: { backgroundColor: '$army-60' },
+        pressStyle: { backgroundColor: '$army-50' },
      },
      turquoise: {
        backgroundColor: '$turquoise-50',
@@ -198,10 +202,10 @@ const Base = styled(View, {
        hoverStyle: { backgroundColor: '$pink-60' },
        pressStyle: { backgroundColor: '$pink-50' },
      },
-      cooper: {
-        backgroundColor: '$cooper-50',
-        hoverStyle: { backgroundColor: '$cooper-60' },
-        pressStyle: { backgroundColor: '$cooper-50' },
+      copper: {
+        backgroundColor: '$copper-50',
+        hoverStyle: { backgroundColor: '$copper-60' },
+        pressStyle: { backgroundColor: '$copper-50' },
      },
      camel: {
        backgroundColor: '$camel-50',
@@ -209,7 +213,7 @@ const Base = styled(View, {
        pressStyle: { backgroundColor: '$camel-50' },
      },
      magenta: {
-        backgroundColor: '$magenta',
+        backgroundColor: '$magenta-50',
        hoverStyle: { backgroundColor: '$magenta-60' },
        pressStyle: { backgroundColor: '$magenta-50' },
      },
@@ -230,6 +234,19 @@ const Base = styled(View, {
        hoverStyle: { backgroundColor: '$neutral-60' },
        pressStyle: { backgroundColor: '$neutral-50' },
      },
+
+      // FIXME proper subvariant support
+      blur_grey: {
+        backgroundColor: '$neutral-80/5',
+        hoverStyle: { backgroundColor: '$neutral-80/10' },
+        pressStyle: { backgroundColor: '$neutral-80/20' },
+      },
+      blur_outline: {
+        borderWidth: 1,
+        borderColor: '$neutral-80/10',
+        hoverStyle: { borderColor: '$neutral-80/20' },
+        pressStyle: { borderColor: '$neutral-80/30' },
+      },
    },

    disabled: {
@@ -126,10 +126,10 @@ const Base = styled(Stack, {
  variants: {
    state: {
      active: {
-        backgroundColor: '$primary-50-opa-5',
+        backgroundColor: '$blue/5',
      },
      selected: {
-        backgroundColor: '$primary-50-opa-10',
+        backgroundColor: '$blue/10',
      },
    },
  },
@@ -54,7 +54,7 @@ const Base = styled(Root, {
  accessibilityRole: 'checkbox',

  backgroundColor: 'transparent',
-  borderRadius: '$2',
+  borderRadius: '$6',

  cursor: 'pointer',
  animation: 'fast',
@@ -90,18 +90,18 @@ const Base = styled(Root, {
    },
    selected: {
      filled: {
-        hoverStyle: { backgroundColor: '$primary-60' },
-        pressStyle: { backgroundColor: '$primary-60' },
+        hoverStyle: { backgroundColor: '$blue-60' },
+        pressStyle: { backgroundColor: '$blue-60' },
      },
      outline: {
-        backgroundColor: '$primary-50',
-        borderColor: '$primary-50',
+        backgroundColor: '$blue-50',
+        borderColor: '$blue-50',

        hoverStyle: {
-          backgroundColor: '$primary-60',
+          backgroundColor: '$blue-60',
        },
        pressStyle: {
-          backgroundColor: '$primary-60',
+          backgroundColor: '$blue-60',
        },
      },
    },
@@ -59,7 +59,7 @@ const Topbar = (props: Props) => {
        padding={16}
        backgroundColor={'$blurBackground'}
        borderBottomWidth={1}
-        borderColor={blur ? 'transparent' : '$neutral-80-opa-10'}
+        borderColor={blur ? 'transparent' : '$neutral-80/10'}
      >
        <Stack flexDirection="row" alignItems="center" flexWrap="wrap">
          <Stack marginRight={12} $gtSm={{ display: 'none' }}>
@@ -76,10 +76,10 @@ const Topbar = (props: Props) => {
            {title}
          </Text>
          <Stack marginLeft={4}>
-            <LockedIcon size={20} color="$neutral-80-opa-40" />
+            <LockedIcon size={20} color="$neutral-80/40" />
          </Stack>
          <Stack
-            backgroundColor="$neutral-80-opa-10"
+            backgroundColor="$neutral-80/10"
            marginHorizontal={12}
            height={16}
            width={1}
@@ -88,7 +88,7 @@ const Topbar = (props: Props) => {
        </Stack>

        <Stack flexGrow={1} flexShrink={1} $sm={{ display: 'none' }}>
-          <Text size={13} weight="medium" color="$neutral-80-opa-50" truncate>
+          <Text size={13} weight="medium" color="$neutral-80/50" truncate>
            {description}
          </Text>
        </Stack>
@@ -92,7 +92,13 @@ const Label = (props: {
  const { children, size, type = 'default' } = props

  return (
-    <Text size={size} weight="medium" color="$neutral-100" type={type}>
+    <Text
+      size={size}
+      weight="medium"
+      color="$neutral-100"
+      type={type}
+      select={false}
+    >
      {children}
    </Text>
  )
@@ -188,7 +194,7 @@ const ContextTag = (props: Props) => {
              type="icon"
              size={avatarSizes[size]}
              icon={<PlayIcon size={16} />}
-              backgroundColor="$primary-50"
+              backgroundColor="$blue-50"
              color="$white-100"
            />
            <Label size={textSize}>{props.audioLength}</Label>
@@ -214,7 +220,7 @@ const ContextTag = (props: Props) => {
              type="icon"
              size={avatarSizes[size]}
              backgroundColor="$purple-50"
-              color="$white-70"
+              color="$white/70"
              icon={props.group.icon}
            />
            <Label size={textSize}>{props.group.name}</Label>
@@ -288,18 +294,19 @@ const Base = styled(View, {
  display: 'inline-flex',
  flexDirection: 'row',
  alignItems: 'center',
+  cursor: 'default',

  variants: {
    outline: {
      true: {
        borderWidth: '1px',
-        borderColor: '$primary-50',
+        borderColor: '$blue-50',
        borderStyle: 'solid',
      },
    },
    blur: {
      true: {
-        backgroundColor: '$neutral-80-opa-5',
+        backgroundColor: '$neutral-80/5',
      },
      false: {
        backgroundColor: '$neutral-10',
@@ -37,7 +37,7 @@ const Base = styled(Stack, {
 })

 const Content = styled(Stack, {
-  backgroundColor: '$primary-50',
+  backgroundColor: '$blue-50',
  paddingHorizontal: 3,
  paddingVertical: 0,
  borderRadius: '$6',
@@ -53,10 +53,10 @@ const Content = styled(Stack, {
  variants: {
    type: {
      default: {
-        backgroundColor: '$primary-50',
+        backgroundColor: '$blue-50',
      },
      secondary: {
-        backgroundColor: '$neutral-80-opa-5',
+        backgroundColor: '$neutral-80/5',
      },
      grey: {
        backgroundColor: '$neutral-10',
@@ -22,10 +22,10 @@ export const Default: Story = {
  render: () => {
    return (
      <Stack gap={24}>
-        <DividerNewMessages color="$primary-50" />
+        <DividerNewMessages color="$blue-50" />
        <DividerNewMessages color="$yellow-50" />
        <DividerNewMessages color="$turquoise-50" />
-        {/* <NewMessages color="$cooper-50" /> */}
+        {/* <NewMessages color="$copper-50" /> */}
        {/* <NewMessages color="$sky-50" /> */}
        {/* <NewMessages color="$camel-50" /> */}
        <DividerNewMessages color="$orange-50" />
@@ -14,7 +14,7 @@ const DividerNewMessages = (props: Props) => {

  return (
    <Stack position="relative" height={42} backgroundColor={color}>
-      <LinearGradient height={42} colors={['$white-95', '$white-100']}>
+      <LinearGradient height={42} colors={['$white-90', '$white-100']}>
        <Stack paddingHorizontal={56} paddingVertical={12} zIndex={10}>
          <Text size={13} weight="medium" color={color}>
            New Messages
@@ -103,7 +103,7 @@ const Content = styled(DropdownMenuContent, {
  backgroundColor: '$white-100',

  shadowRadius: 30,
-  shadowOffset: '0px 8px',
+  shadowOffset: { width: 0, height: 8 },
  shadowColor: 'rgba(9, 16, 28, 0.12)',
 })

@@ -67,15 +67,15 @@ const Button = styled(View, {
  variants: {
    type: {
      mention: {
-        backgroundColor: '$primary-50',
-        hoverStyle: { backgroundColor: '$primary-60' },
-        pressStyle: { backgroundColor: '$primary-50' },
+        backgroundColor: '$blue-50',
+        hoverStyle: { backgroundColor: '$blue-60' },
+        pressStyle: { backgroundColor: '$blue-50' },
      },

      notification: {
-        backgroundColor: '$neutral-80-opa-70',
-        hoverStyle: { backgroundColor: '$neutral-90-opa-70' },
-        pressStyle: { backgroundColor: '$neutral-80-opa-80' },
+        backgroundColor: '$neutral-80/70',
+        hoverStyle: { backgroundColor: '$neutral-90/70' },
+        pressStyle: { backgroundColor: '$neutral-80/80' },
      },
    },

@@ -28,8 +28,8 @@ const IconButton = (props: Props, ref: Ref<View>) => {

  const { pressableProps, color } = usePressableColors(
    {
-      default: blur ? '$neutral-80-opa-70' : '$neutral-50',
-      hover: blur ? '$neutral-80-opa-70' : '$neutral-50',
+      default: blur ? '$neutral-80/70' : '$neutral-50',
+      hover: blur ? '$neutral-80/70' : '$neutral-50',
      press: '$neutral-100',
      active: '$neutral-100',
    },
@@ -50,7 +50,7 @@ const IconButton = (props: Props, ref: Ref<View>) => {
      activeBlur={blur ? (selected ? variant : undefined) : undefined}
    >
      {cloneElement(icon, {
-        color,
+        color: icon.props.color ?? color,
        size: 20,
      })}
    </Base>
@@ -130,49 +130,49 @@ const Base = styled(View, {

    variantBlur: {
      default: {
-        backgroundColor: '$neutral-80-opa-5',
+        backgroundColor: '$neutral-80/5',
        borderColor: 'transparent',
-        hoverStyle: { backgroundColor: '$neutral-80-opa-10' },
+        hoverStyle: { backgroundColor: '$neutral-80/10' },
        pressStyle: {
-          backgroundColor: '$neutral-80-opa-10',
-          borderColor: '$neutral-80-opa-5',
+          backgroundColor: '$neutral-80/10',
+          borderColor: '$neutral-80/5',
        },
      },

      outline: {
        backgroundColor: 'transparent',
-        borderColor: '$neutral-80-opa-10',
-        hoverStyle: { borderColor: '$neutral-80-opa-20' },
+        borderColor: '$neutral-80/10',
+        hoverStyle: { borderColor: '$neutral-80/20' },
        pressStyle: {
-          borderColor: '$neutral-80-opa-10',
-          backgroundColor: '$neutral-80-opa-5',
+          borderColor: '$neutral-80/10',
+          backgroundColor: '$neutral-80/5',
        },
      },

      ghost: {
        backgroundColor: 'transparent',
-        hoverStyle: { backgroundColor: '$neutral-80-opa-5' },
+        hoverStyle: { backgroundColor: '$neutral-80/5' },
        pressStyle: {
-          backgroundColor: '$neutral-80-opa-5',
-          borderColor: '$neutral-80-opa-10',
+          backgroundColor: '$neutral-80/5',
+          borderColor: '$neutral-80/10',
        },
      },
    },

    activeBlur: {
      default: {
-        backgroundColor: '$neutral-80-opa-10',
-        borderColor: '$neutral-80-opa-5',
+        backgroundColor: '$neutral-80/10',
+        borderColor: '$neutral-80/5',
      },

      outline: {
-        borderColor: '$neutral-80-opa-10',
-        backgroundColor: '$neutral-80-opa-5',
+        borderColor: '$neutral-80/10',
+        backgroundColor: '$neutral-80/5',
      },

      ghost: {
-        backgroundColor: '$neutral-80-opa-5',
-        borderColor: '$neutral-80-opa-10',
+        backgroundColor: '$neutral-80/5',
+        borderColor: '$neutral-80/10',
      },
    },

@@ -32,7 +32,7 @@ export const Overview: Story = {
  args: {
    search: '',
    size: 20,
-    // color: '$primary-50',
+    // color: '$blue-50',
  },

  argTypes: {
@@ -1,17 +1,15 @@
 import { forwardRef } from 'react'

-import { setupReactNative, styled } from '@tamagui/core'
-import { Image as RNImage } from 'react-native'
+import { styled } from '@tamagui/core'
+import { Image as TamaguiImage } from '@tamagui/image'

 import type { GetProps, GetVariants } from '../types'
 import type { Ref } from 'react'

-setupReactNative({
-  Image: RNImage,
-})
-
 type Variants = GetVariants<typeof Base>

+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Expression produces a union type that is too complex to represent.
 type Props = GetProps<typeof Base> & {
  src: string
  width: number | 'full'
@@ -48,7 +46,7 @@ const _Image = forwardRef(Image)
 export { _Image as Image }
 export type { Props as ImageProps }

-const Base = styled(RNImage, {
+const Base = styled(TamaguiImage, {
  name: 'Image',
  position: 'relative',
  zIndex: 1,
@@ -78,7 +76,7 @@ const Base = styled(RNImage, {
        borderRadius: 999, // fix this once Image is migrated to tamagui image
      },
    },
-  },
+  } as const,

  backgroundColor: '$white-100',
 })
@@ -28,6 +28,7 @@ export * from './tag'
 export * from './text'
 export * from './toast'
 export * from './tokens'
+export * from './tooltip'
 export * from './user-list'
 // eslint-disable-next-line simple-import-sort/exports
 export { config } from './tamagui.config'
@@ -122,12 +122,12 @@ const Base = styled(Stack, {
        borderColor: '$neutral-20',
      },
      information: {
-        backgroundColor: '$blue-50-opa-5',
-        borderColor: '$blue-50-opa-10',
+        backgroundColor: '$blue/5',
+        borderColor: '$blue/10',
      },
      error: {
-        backgroundColor: '$danger-50-opa-5',
-        borderColor: '$danger-50-opa-10',
+        backgroundColor: '$danger-/5',
+        borderColor: '$danger-/10',
      },
    },
  },
@@ -2,7 +2,7 @@ import { cloneElement, forwardRef, useRef, useState } from 'react'

 import { composeRefs } from '@radix-ui/react-compose-refs'
 import { ClearIcon } from '@status-im/icons'
-import { setupReactNative, Stack, styled } from '@tamagui/core'
+import { Stack, styled } from '@tamagui/core'
 import { focusableInputHOC } from '@tamagui/focusable'
 import { TextInput } from 'react-native'

@@ -12,10 +12,6 @@ import { Text } from '../text'
 import type { GetProps } from '@tamagui/core'
 import type { Ref } from 'react'

-setupReactNative({
-  TextInput,
-})
-
 type Props = GetProps<typeof InputFrame> & {
  button?: {
    label: string
@@ -218,7 +214,7 @@ const InputContainer = styled(Stack, {
    },
    error: {
      true: {
-        borderColor: '$danger-50-opa-40',
+        borderColor: '$danger-/40',
      },
    },

@@ -63,7 +63,7 @@ export const ReactionsDialog = (props: Props) => {
    <Dialog.Content width={352} borderRadius="$12">
      <Tabs defaultValue={initialReactionType}>
        <Stack padding={16}>
-          <Tabs.List size={24}>
+          <Tabs.List variant="grey" size={24}>
            {Object.entries(reactions).map(([reaction, value]) => {
              const Icon = REACTIONS_ICONS[reaction as keyof ReactionsType]
              return (
@@ -79,7 +79,7 @@ const Reaction = (props: ReactionProps) => {
                and
              </Text>
              <Stack
-                backgroundColor="$turquoise-50-opa-10"
+                backgroundColor="$turquoise/10"
                borderRadius="$6"
                paddingHorizontal={4}
              >
@@ -39,7 +39,7 @@ const Base = styled(Stack, {

    pinned: {
      true: {
-        backgroundColor: '$blue-50-opa-5',
+        backgroundColor: '$blue/5',
      },
    },
  } as const,
@@ -40,7 +40,7 @@ const PopoverContent = (props: ContentProps) => {
      backgroundColor="$white-100"
      borderRadius="$12"
      shadowRadius={30}
-      shadowOffset="0px 8px"
+      shadowOffset={{ width: 0, height: 8 }}
      shadowColor="rgba(9, 16, 28, 0.12)"
    >
      {children}
@@ -71,8 +71,8 @@ const Base = styled(Stack, {
  variants: {
    variant: {
      primary: {
-        backgroundColor: '$primary-50',
-        borderColor: '$primary-60',
+        backgroundColor: '$blue-50',
+        borderColor: '$blue-60',
      },
      secondary: {
        backgroundColor: '$neutral-10',
@@ -16,7 +16,7 @@ const TopbarSkeleton = () => {
          px={16}
          backgroundColor={'$blurBackground'}
          borderBottomWidth={1}
-          borderColor={'$neutral-80-opa-10'}
+          borderColor={'$neutral-80/10'}
          width="100%"
        >
          <Stack
@@ -56,20 +56,39 @@ export const AllVariants: Story = {
  args: {},
  render: () => (
    <Stack space flexDirection="row">
-      <Stack space alignItems="center">
-        <Step type="neutral" value={1} />
-        <Step type="neutral" value={10} />
-        <Step type="neutral" value={999} />
+      <Stack space flexDirection="column">
+        <Stack space alignItems="center">
+          <Step size={18} type="neutral" value={1} />
+          <Step size={18} type="neutral" value={10} />
+          <Step size={18} type="neutral" value={999} />
+        </Stack>
+        <Stack space alignItems="center">
+          <Step size={18} type="complete" value={1} />
+          <Step size={18} type="complete" value={10} />
+          <Step size={18} type="complete" value={999} />
+        </Stack>
+        <Stack space alignItems="center">
+          <Step size={18} type="active" value={1} />
+          <Step size={18} type="active" value={10} />
+          <Step size={18} type="active" value={999} />
+        </Stack>
      </Stack>
-      <Stack space alignItems="center">
-        <Step type="complete" value={1} />
-        <Step type="complete" value={10} />
-        <Step type="complete" value={999} />
-      </Stack>
-      <Stack space alignItems="center">
-        <Step type="active" value={1} />
-        <Step type="active" value={10} />
-        <Step type="active" value={999} />
+      <Stack space flexDirection="column">
+        <Stack space alignItems="center">
+          <Step size={22} type="neutral" value={1} />
+          <Step size={22} type="neutral" value={10} />
+          <Step size={22} type="neutral" value={999} />
+        </Stack>
+        <Stack space alignItems="center">
+          <Step size={22} type="complete" value={1} />
+          <Step size={22} type="complete" value={10} />
+          <Step size={22} type="complete" value={999} />
+        </Stack>
+        <Stack space alignItems="center">
+          <Step size={22} type="active" value={1} />
+          <Step size={22} type="active" value={10} />
+          <Step size={22} type="active" value={999} />
+        </Stack>
      </Stack>
    </Stack>
  ),
@@ -9,15 +9,16 @@ export type StepVariants = 'neutral' | 'complete' | 'active'

 type Props = {
  value: number
+  size?: 18 | 22
  type?: StepVariants
 }

 const Step = (props: Props) => {
-  const { value, type = 'neutral' } = props
+  const { size = 18, value, type = 'neutral' } = props

  return (
-    <Base>
-      <Content type={type}>
+    <Base size={size}>
+      <Content size={size} type={type}>
        <Text size={11} weight="medium" color={textColors[type]}>
          {value}
        </Text>
@@ -30,7 +31,6 @@ export { Step }
 export type { Props as StepProps }

 const Base = styled(Stack, {
-  paddingVertical: 1,
  minWidth: 20,
  maxWidth: 28,
  display: 'inline-flex',
@@ -38,6 +38,20 @@ const Base = styled(Stack, {
  alignItems: 'center',
  flexBasis: 'fit-content',
  width: 'fit-content',
+
+  variants: {
+    size: {
+      18: {
+        paddingVertical: 1,
+        minWidth: 20,
+        maxWidth: 28,
+      },
+      22: {
+        minWidth: 24,
+        maxWidth: 32,
+      },
+    },
+  },
 })

 const Content = styled(Stack, {
@@ -45,9 +59,6 @@ const Content = styled(Stack, {
  paddingHorizontal: 3,
  paddingVertical: 0,
  borderRadius: '$6',
-  height: 18,
-  minWidth: 18,
-  maxWidth: 28,
  justifyContent: 'center',
  alignItems: 'center',
  borderWidth: 1,
@@ -63,7 +74,19 @@ const Content = styled(Stack, {
        backgroundColor: '$blue-50',
      },
      active: {
-        backgroundColor: '$blue-50-opa-10',
+        backgroundColor: '$blue/10',
+      },
+    },
+    size: {
+      18: {
+        height: 18,
+        minWidth: 18,
+        maxWidth: 28,
+      },
+      22: {
+        height: 22,
+        minWidth: 22,
+        maxWidth: 32,
      },
    },
  },
@@ -23,7 +23,7 @@ const AddedUsersMessageContent = (props: Props) => {
        // fixme: map relative avatar size to icon size
        icon={<AddUserIcon size={20} />}
        size={32}
-        backgroundColor={state === 'landed' ? '$transparent' : '$blue-50-opa-5'}
+        backgroundColor={state === 'landed' ? '$transparent' : '$blue/5'}
        color="$blue-50"
      />
      <Stack flexDirection="row" gap={2} flexBasis="max-content" flexGrow={1}>
@@ -26,7 +26,7 @@ const DeletedMessageContent = (props: Props) => {
        type="icon"
        size={32}
        icon={<TrashIcon size={20} />}
-        backgroundColor={state === 'landed' ? '$transparent' : '$red-50-opa-5'}
+        backgroundColor={state === 'landed' ? '$transparent' : '$danger-/5'}
        color="$neutral-100"
      />
      <Stack
@@ -31,7 +31,7 @@ const PinnedMessageContent = (props: Props) => {
        type="icon"
        size={32}
        icon={<PinIcon size={20} />}
-        backgroundColor={state === 'landed' ? '$transparent' : '$blue-50-opa-5'}
+        backgroundColor={state === 'landed' ? '$transparent' : '$blue/5'}
        color="$neutral-100"
      />
      <Stack
@@ -111,10 +111,10 @@ const Base = styled(View, {
        backgroundColor: '$neutral-5',
      },
      landed: {
-        backgroundColor: '$blue-50-opa-5',
+        backgroundColor: '$blue/5',
      },
      landed_deleted: {
-        backgroundColor: '$red-50-opa-5',
+        backgroundColor: '$danger-/5',
      },
    },
  },
@@ -18,21 +18,121 @@ const meta: Meta<typeof Tabs> = {
  },
 }

-export const Default: StoryObj<TabsProps> = {
+export const Grey: StoryObj<TabsProps> = {
  args: {
    defaultValue: '1',
  },
  render(args) {
    return (
      <Tabs {...args}>
-        <Tabs.List size={32}>
+        <Tabs.List variant="grey" size={32}>
          <Tabs.Trigger type="default" value="1">
            Tab 1
          </Tabs.Trigger>
          <Tabs.Trigger type="default" value="2">
            Tab 2
          </Tabs.Trigger>
-          <Tabs.Trigger type="default" value="3">
+          <Tabs.Trigger type="default" value="3" disabled>
+            Tab 3
+          </Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="1">
+          <Text size={15}>Content 1</Text>
+        </Tabs.Content>
+        <Tabs.Content value="2">
+          <Text size={15}>Content 2</Text>
+        </Tabs.Content>
+        <Tabs.Content value="3">
+          <Text size={15}>Content 3</Text>
+        </Tabs.Content>
+      </Tabs>
+    )
+  },
+}
+
+export const GreyBlur: StoryObj<TabsProps> = {
+  args: {
+    defaultValue: '1',
+  },
+  render(args) {
+    return (
+      <Tabs {...args}>
+        <Tabs.List variant="blur_grey" size={32}>
+          <Tabs.Trigger type="default" value="1">
+            Tab 1
+          </Tabs.Trigger>
+          <Tabs.Trigger type="default" value="2">
+            Tab 2
+          </Tabs.Trigger>
+          <Tabs.Trigger type="default" value="3" disabled>
+            Tab 3
+          </Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="1">
+          <Text size={15}>Content 1</Text>
+        </Tabs.Content>
+        <Tabs.Content value="2">
+          <Text size={15}>Content 2</Text>
+        </Tabs.Content>
+        <Tabs.Content value="3">
+          <Text size={15}>Content 3</Text>
+        </Tabs.Content>
+      </Tabs>
+    )
+  },
+}
+
+export const DarkGrey: StoryObj<TabsProps> = {
+  args: {
+    defaultValue: '1',
+  },
+  render(args) {
+    return (
+      <Tabs {...args}>
+        <Tabs.List variant="darkGrey" size={32}>
+          <Tabs.Trigger type="default" value="1">
+            Tab 1
+          </Tabs.Trigger>
+          <Tabs.Trigger type="default" value="2">
+            Tab 2
+          </Tabs.Trigger>
+          <Tabs.Trigger type="default" value="3" disabled>
+            Tab 3
+          </Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="1">
+          <Text size={15}>Content 1</Text>
+        </Tabs.Content>
+        <Tabs.Content value="2">
+          <Text size={15}>Content 2</Text>
+        </Tabs.Content>
+        <Tabs.Content value="3">
+          <Text size={15}>Content 3</Text>
+        </Tabs.Content>
+      </Tabs>
+    )
+  },
+}
+export const DarkGreyBlur: StoryObj<TabsProps> = {
+  args: {
+    defaultValue: '1',
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  render(args) {
+    return (
+      <Tabs {...args}>
+        <Tabs.List variant="blur_darkGrey" size={32}>
+          <Tabs.Trigger type="default" value="1">
+            Tab 1
+          </Tabs.Trigger>
+          <Tabs.Trigger type="default" value="2">
+            Tab 2
+          </Tabs.Trigger>
+          <Tabs.Trigger type="default" value="3" disabled>
            Tab 3
          </Tabs.Trigger>
        </Tabs.List>
@@ -57,7 +157,7 @@ export const Icon: StoryObj<TabsProps> = {
  render(args) {
    return (
      <Tabs {...args}>
-        <Tabs.List size={32}>
+        <Tabs.List variant="grey" size={32}>
          <Tabs.Trigger
            type="icon"
            value="1"
@@ -76,6 +176,7 @@ export const Icon: StoryObj<TabsProps> = {
            type="icon"
            value="3"
            icon={<PlaceholderIcon size={16} />}
+            disabled
          >
            Tab 3
          </Tabs.Trigger>
@@ -101,14 +202,14 @@ export const Counter: StoryObj<TabsProps> = {
  render(args) {
    return (
      <Tabs {...args}>
-        <Tabs.List size={32}>
+        <Tabs.List variant="grey" size={32}>
          <Tabs.Trigger type="counter" value="1" count={5}>
            Tab 1
          </Tabs.Trigger>
          <Tabs.Trigger type="counter" value="2" count={10}>
            Tab 2
          </Tabs.Trigger>
-          <Tabs.Trigger type="counter" value="3" count={100}>
+          <Tabs.Trigger type="counter" value="3" count={100} disabled>
            Tab 3
          </Tabs.Trigger>
        </Tabs.List>
@@ -133,14 +234,14 @@ export const Step: StoryObj<TabsProps> = {
  render(args) {
    return (
      <Tabs {...args}>
-        <Tabs.List size={32}>
+        <Tabs.List variant="grey" size={32}>
          <Tabs.Trigger type="step" value="1" step={1}>
            Tab 1
          </Tabs.Trigger>
          <Tabs.Trigger type="step" value="2" step={10}>
            Tab 2
          </Tabs.Trigger>
-          <Tabs.Trigger type="step" value="3" step={999}>
+          <Tabs.Trigger type="step" value="3" step={999} disabled>
            Tab 3
          </Tabs.Trigger>
        </Tabs.List>
@@ -40,6 +40,7 @@ const Tabs = (props: Props) => {

 type ListProps = {
  children: React.ReactElement[]
+  variant: Variants['variant']
  size: Variants['size']
 }

@@ -51,7 +52,7 @@ const TabsList = (props: ListProps) => {
      <Stack flexDirection="row" gap={8}>
        {Children.map(children, child => (
          <Trigger asChild value={child.props.value}>
-            {cloneElement(child, { size: props.size })}
+            {cloneElement(child, { size: props.size, variant: props.variant })}
          </Trigger>
        ))}
      </Stack>
@@ -64,19 +65,28 @@ type TriggerProps =
      type: 'default'
      value: string
      children: string
+      disabled?: boolean
    }
  | {
      type: 'icon'
      value: string
      children: string
      icon: React.ReactElement
+      disabled?: boolean
+    }
+  | {
+      type: 'counter'
+      value: string
+      children: string
+      count: number
+      disabled?: boolean
    }
-  | { type: 'counter'; value: string; children: string; count: number }
  | {
      type: 'step'
      value: string
      children: string
      step: number
+      disabled?: boolean
    }

 const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
@@ -86,20 +96,22 @@ const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
  const providedProps = props as TriggerProps & {
    size: 24 | 32
    'aria-selected': boolean
+    disabled: boolean
+    variant: Variants['variant']
  }

+  const { size, 'aria-selected': selected, disabled, variant } = providedProps
+
  const { color, pressableProps } = usePressableColors(
    {
-      default: '$neutral-100',
-      hover: '$neutral-100',
-      press: '$neutral-100',
+      default: variant === 'blur_darkGrey' ? '$white-100' : '$neutral-100',
+      hover: variant === 'blur_darkGrey' ? '$white-100' : '$neutral-100',
+      press: variant === 'blur_darkGrey' ? '$white-100' : '$neutral-100',
      active: '$white-100',
    },
    providedProps
  )

-  const { size, 'aria-selected': selected } = providedProps
-
  const textSize = triggerTextSizes[size]

  return (
@@ -108,7 +120,9 @@ const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
      {...pressableProps}
      ref={ref}
      size={size}
+      variant={variant}
      active={selected}
+      disabled={disabled}
    >
      {props.type === 'icon' &&
        cloneElement(props.icon, {
@@ -116,7 +130,9 @@ const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
          color,
        })}

-      {props.type === 'step' && <Step type="complete" value={props.step} />}
+      {props.type === 'step' && (
+        <Step size={18} type="complete" value={props.step} />
+      )}

      <Text size={textSize} weight="medium" color={color}>
        {children}
@@ -140,13 +156,42 @@ export type { Props as TabsProps }

 const TriggerBase = styled(View, {
  name: 'Trigger',
-  role: 'button',
+  role: 'tab',
+  cursor: 'pointer',

  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'center',

  variants: {
+    variant: {
+      grey: {
+        backgroundColor: '$neutral-10',
+        hoverStyle: {
+          backgroundColor: '$neutral-20',
+        },
+      },
+      darkGrey: {
+        backgroundColor: '$neutral-20',
+        hoverStyle: {
+          backgroundColor: '$neutral-30',
+        },
+      },
+
+      blur_grey: {
+        backgroundColor: '$neutral-80/5',
+        hoverStyle: {
+          backgroundColor: '$neutral-80/10',
+          // backgroundColor: '$neutral-80/60',
+        },
+      },
+      blur_darkGrey: {
+        backgroundColor: '$white-5',
+        hoverStyle: {
+          backgroundColor: '$white-10',
+        },
+      },
+    },
    size: {
      32: {
        height: 32,
@@ -162,17 +207,47 @@ const TriggerBase = styled(View, {
      },
    },
    active: {
-      true: {
-        backgroundColor: '$neutral-50',
-      },
-      false: {
-        backgroundColor: '$neutral-10',
-        hoverStyle: {
-          backgroundColor: '$neutral-20',
-        },
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      true: (_v, { props }) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const variant = (props as any).variant as Variants['variant']
+
+        if (variant === 'grey' || variant === 'darkGrey') {
+          return {
+            cursor: 'default',
+            backgroundColor: '$neutral-50',
+            hoverStyle: { backgroundColor: '$neutral-50' },
+            pressStyle: { backgroundColor: '$neutral-50' },
+          }
+        }
+
+        if (variant === 'blur_grey') {
+          return {
+            cursor: 'default',
+            backgroundColor: '$neutral-80/60',
+            hoverStyle: { backgroundColor: '$neutral-80/60' },
+            pressStyle: { backgroundColor: '$neutral-80/60' },
+          }
+        }
+
+        if (variant === 'blur_darkGrey') {
+          return {
+            cursor: 'default',
+            backgroundColor: '$white-20',
+            hoverStyle: { backgroundColor: '$white-20' },
+            pressStyle: { backgroundColor: '$white-20' },
+          }
+        }
      },
    },
-  },
+    disabled: {
+      true: {
+        opacity: 0.3,
+        cursor: 'default',
+      },
+    },
+  } as const,
 })

 const triggerTextSizes: Record<Variants['size'], TextProps['size']> = {
@@ -46,7 +46,7 @@ export const Default: Story = {
          <Tag label="New tag #7140FD" size={24} color="#7140FD" icon="🧙‍♂️" />

          <Tag
-            label="custom color purple"
+            label="New tag $purple-50"
            size={24}
            icon="🐷"
            color="$purple-50"
@@ -6,6 +6,7 @@ import { View } from 'react-native'
 import { getColorWithOpacity } from '../../utils/get-color-with-opacity'
 import { Text } from '../text'

+import type { HexColor, RGBAColor } from '../../utils/get-color-with-opacity'
 import type { TextProps } from '../text'
 import type { IconProps } from '@status-im/icons'
 import type { ColorTokens } from '@tamagui/core'
@@ -19,7 +20,7 @@ type Props = {
  selected?: boolean
  disabled?: boolean
  onPress?: PressableProps['onPress']
-  color?: ColorTokens | `#${string}`
+  color?: ColorTokens | HexColor
 }

 const textSizes: Record<NonNullable<Props['size']>, TextProps['size']> = {
@@ -100,20 +101,23 @@ const Base = styled(View, {
  },

  variants: {
-    variant: (token: ColorTokens | string, { tokens }) => {
-      const color = tokens.colors[token as keyof typeof tokens.colors]
-        ? tokens.colors[token as keyof typeof tokens.colors].val
-        : token
+    variant: (color: Props['color'], { tokens }) => {
+      if (!color) {
+        return
+      }
+
+      const key = color as keyof typeof tokens.colors
+      const val = (tokens.colors[key]?.val as RGBAColor) ?? (color as HexColor)

      return {
-        borderColor: getColorWithOpacity(color, 0.2),
+        borderColor: getColorWithOpacity(val, 20),
        pressStyle: {
-          borderColor: getColorWithOpacity(color, 0.3),
-          backgroundColor: getColorWithOpacity(color, 0.1),
+          borderColor: getColorWithOpacity(val, 30),
+          backgroundColor: getColorWithOpacity(val, 10),
        },
        hoverStyle: {
-          borderColor: getColorWithOpacity(color, 0.3),
-          backgroundColor: getColorWithOpacity(color, 0.1),
+          borderColor: getColorWithOpacity(val, 30),
+          backgroundColor: getColorWithOpacity(val, 10),
        },
      }
    },
@@ -134,16 +138,16 @@ const Base = styled(View, {
    },
    selected: {
      true: {
-        backgroundColor: '$primary-50-opa-10',
-        borderColor: '$primary-50',
+        backgroundColor: '$blue/10',
+        borderColor: '$blue-50',

        hoverStyle: {
-          backgroundColor: '$primary-50-opa-20',
-          borderColor: '$primary-60',
+          backgroundColor: '$blue/20',
+          borderColor: '$blue-60',
        },
        pressStyle: {
-          backgroundColor: '$primary-50-opa-20',
-          borderColor: '$primary-60',
+          backgroundColor: '$blue/20',
+          borderColor: '$blue-60',
        },
      },
    },
@@ -15,6 +15,7 @@ type Props = {
  color?: ColorTokens | string
  truncate?: boolean
  wrap?: false
+  select?: false
 } & (
  | { size: 88; weight?: Weight }
  | { size: 64; weight?: Weight }
@@ -131,6 +132,12 @@ const Base = styled(BaseText, {
        minWidth: 0,
      },
    },
+
+    select: {
+      false: {
+        userSelect: 'none',
+      },
+    },
  } as const,

  defaultVariants: {
@@ -5,59 +5,55 @@ import { tokens } from './tokens'
 const light = createTheme({
  background: tokens.color['white-100'],
  textPrimary: tokens.color['neutral-100'],
-  primary: tokens.color['primary-50'],
-  primaryHover: tokens.color['primary-60'],
+  primary: tokens.color['blue-50'],
+  primaryHover: tokens.color['blue-60'],
  success: tokens.color['success-50'],
  successHover: tokens.color['success-60'],
  danger: tokens.color['danger-50'],
  dangerHover: tokens.color['danger-60'],
  purple: tokens.color['purple-50'],
  purpleHover: tokens.color['purple-60'],
-  indigo: tokens.color['indigo-50'],
-  indigoHover: tokens.color['indigo-60'],
+  army: tokens.color['army-50'],
+  armyHover: tokens.color['army-60'],
  turquoise: tokens.color['turquoise-50'],
  turquoiseHover: tokens.color['turquoise-60'],
  blue: tokens.color['blue-50'],
  blueHover: tokens.color['blue-60'],
-  green: tokens.color['green-50'],
-  greenHover: tokens.color['green-60'],
  yellow: tokens.color['yellow-50'],
  yellowHover: tokens.color['yellow-60'],
  orange: tokens.color['orange-50'],
  orangeHover: tokens.color['orange-60'],
-  red: tokens.color['red-50'],
-  redHover: tokens.color['red-60'],
  pink: tokens.color['pink-50'],
  pinkHover: tokens.color['pink-60'],
-  brown: tokens.color['brown-50'],
-  brownHover: tokens.color['brown-60'],
-  beige: tokens.color['beige-50'],
-  beigeHover: tokens.color['beige-60'],
+  copper: tokens.color['copper-50'],
+  copperHover: tokens.color['copper-50'],
+  camel: tokens.color['camel-50'],
+  camelHover: tokens.color['camel-50'],
  placeHolderColor: tokens.color['neutral-40'],
-  placeHolderColorBlurred: tokens.color['neutral-80-opa-40'],
+  placeHolderColorBlurred: tokens.color['neutral-80/40'],
  iconButtonBackground: tokens.color['neutral-10'],
  iconButtonBackgroundHover: tokens.color['neutral-20'],
  iconButtonBackgroundSelected: tokens.color['neutral-20'],
  iconButtonBorderSelected: tokens.color['neutral-30'],
-  iconButtonBackgroundBlurred: tokens.color['neutral-80-opa-5'],
-  iconButtonBackgroundBlurredHover: tokens.color['neutral-80-opa-10'],
-  iconButtonBackgroundBlurredSelected: tokens.color['neutral-80-opa-10'],
-  iconButtonBorderBlurredSelected: tokens.color['neutral-80-opa-5'],
+  iconButtonBackgroundBlurred: tokens.color['neutral-80/5'],
+  iconButtonBackgroundBlurredHover: tokens.color['neutral-80/10'],
+  iconButtonBackgroundBlurredSelected: tokens.color['neutral-80/10'],
+  iconButtonBorderBlurredSelected: tokens.color['neutral-80/5'],
  iconButtonOutlineBackgroundSelected: tokens.color['neutral-10'],
  iconButtonOutlineBorder: tokens.color['neutral-20'],
  iconButtonOutlineBorderHover: tokens.color['neutral-30'],
  iconButtonOutlineBorderSelected: tokens.color['neutral-20'],
  iconButtonOutBackgroundBlurredSelected: tokens.color['neutral-10'],
-  iconButtonOutlineBorderBlurred: tokens.color['neutral-80-opa-10'],
-  iconButtonOutlineBorderBlurredHover: tokens.color['neutral-80-opa-20'],
-  iconButtonOutlineBorderBlurredSelected: tokens.color['neutral-80-opa-10'],
+  iconButtonOutlineBorderBlurred: tokens.color['neutral-80/10'],
+  iconButtonOutlineBorderBlurredHover: tokens.color['neutral-80/20'],
+  iconButtonOutlineBorderBlurredSelected: tokens.color['neutral-80/10'],
  iconButtonColor: tokens.color['neutral-50'],
  iconButtonColorSelected: tokens.color['neutral-100'],
  iconButtonColorBlurred: tokens.color['neutral-100'],
  iconButtonColorOutline: tokens.color['neutral-50'],
  iconButtonColorOutlineSelected: tokens.color['neutral-100'],
-  iconButtonColorOutlineBlurred: tokens.color['neutral-80-opa-70'],
-  blurBackground: tokens.color['white-70'],
+  iconButtonColorOutlineBlurred: tokens.color['neutral-80/70'],
+  blurBackground: tokens.color['white/70'],
 })

 // note: we set up a single consistent base type to validate the rest:
@@ -66,34 +62,30 @@ type BaseTheme = typeof light
 const dark: BaseTheme = createTheme({
  background: tokens.color['neutral-95'],
  textPrimary: tokens.color['white-100'],
-  primary: tokens.color['primary-60'],
-  primaryHover: tokens.color['primary-50'],
+  primary: tokens.color['blue-60'],
+  primaryHover: tokens.color['blue-50'],
  success: tokens.color['success-60'],
  successHover: tokens.color['success-50'],
  danger: tokens.color['danger-60'],
  dangerHover: tokens.color['danger-50'],
  purple: tokens.color['purple-60'],
  purpleHover: tokens.color['purple-50'],
-  indigo: tokens.color['indigo-60'],
-  indigoHover: tokens.color['indigo-50'],
+  army: tokens.color['army-60'],
+  armyHover: tokens.color['army-50'],
  turquoise: tokens.color['turquoise-60'],
  turquoiseHover: tokens.color['turquoise-50'],
  blue: tokens.color['blue-60'],
  blueHover: tokens.color['blue-50'],
-  green: tokens.color['green-60'],
-  greenHover: tokens.color['green-50'],
  yellow: tokens.color['yellow-60'],
  yellowHover: tokens.color['yellow-50'],
  orange: tokens.color['orange-60'],
  orangeHover: tokens.color['orange-50'],
-  red: tokens.color['red-60'],
-  redHover: tokens.color['red-50'],
  pink: tokens.color['pink-60'],
  pinkHover: tokens.color['pink-50'],
-  brown: tokens.color['brown-60'],
-  brownHover: tokens.color['brown-50'],
-  beige: tokens.color['beige-60'],
-  beigeHover: tokens.color['beige-50'],
+  copper: tokens.color['copper-60'],
+  copperHover: tokens.color['copper-50'],
+  camel: tokens.color['camel-60'],
+  camelHover: tokens.color['camel-50'],
  placeHolderColor: tokens.color['neutral-50'],
  placeHolderColorBlurred: tokens.color['white-30'],
  iconButtonBackground: tokens.color['neutral-90'],
@@ -104,7 +96,7 @@ const dark: BaseTheme = createTheme({
  iconButtonBackgroundBlurredHover: tokens.color['white-10'],
  iconButtonBackgroundBlurredSelected: tokens.color['white-10'],
  iconButtonBorderBlurredSelected: tokens.color['white-5'],
-  iconButtonOutlineBackgroundSelected: tokens.color['neutral-80-opa-70'],
+  iconButtonOutlineBackgroundSelected: tokens.color['neutral-80/70'],
  iconButtonOutlineBorder: tokens.color['neutral-80'],
  iconButtonOutlineBorderHover: tokens.color['neutral-70'],
  iconButtonOutlineBorderSelected: tokens.color['neutral-70'],
@@ -118,7 +110,7 @@ const dark: BaseTheme = createTheme({
  iconButtonColorOutline: tokens.color['neutral-40'],
  iconButtonColorOutlineSelected: tokens.color['white-100'],
  iconButtonColorOutlineBlurred: tokens.color['white-100'],
-  blurBackground: tokens.color['neutral-80-opa-70'],
+  blurBackground: tokens.color['neutral-70'],
 })

 const allThemes = {
@@ -7,33 +7,44 @@ import { create } from 'zustand'
 import { Toast } from './toast'

 import type { ToastProps } from './toast'
+import type { ToastProps as RootProps } from '@radix-ui/react-toast'
+
+type ToastRootProps = Partial<Pick<RootProps, 'duration'>> & {
+  originType?: RootProps['type']
+}
+
+type Options = ToastRootProps & Pick<ToastProps, 'action' | 'onAction'>

 type ToastState = {
-  toast: ToastProps | null
+  toast: (ToastProps & ToastRootProps) | null
  dismiss: () => void
-  positive: (
-    message: string,
-    actionProps?: Pick<ToastProps, 'action' | 'onAction'>
-  ) => void
-  negative: (
-    message: string,
-    actionProps?: Pick<ToastProps, 'action' | 'onAction'>
-  ) => void
-  custom: (
-    message: string,
-    icon: React.ReactElement,
-    actionProps?: Pick<ToastProps, 'action' | 'onAction'>
-  ) => void
+  positive: (message: string, options?: Options) => void
+  negative: (message: string, options?: Options) => void
+  custom: (message: string, icon: React.ReactElement, options?: Options) => void
 }

 const useStore = create<ToastState>()(set => ({
  toast: null,
-  positive: (message, actionProps) =>
-    set({ toast: { ...actionProps, message, type: 'positive' } }),
-  negative: (message, actionProps) =>
-    set({ toast: { ...actionProps, message, type: 'negative' } }),
-  custom: (message, icon, actionProps) =>
-    set({ toast: { ...actionProps, message, icon } }),
+  positive: (message, options) =>
+    set({
+      toast: {
+        message,
+        ...options,
+        type: 'positive',
+      },
+    }),
+  negative: (message, options) =>
+    set({
+      toast: {
+        message,
+        ...options,
+        type: 'negative',
+      },
+    }),
+  custom: (message, icon, options) =>
+    set({
+      toast: { message, icon, ...options },
+    }),
  dismiss: () => set({ toast: null }),
 }))

@@ -50,14 +61,23 @@ const ToastContainer = () => {
    }
  }

+  const { duration, originType, ...restProps } = store.toast
+
  return (
    <Provider>
      <ToastRoot
        defaultOpen
        onOpenChange={handleOpenChange}
        style={{ position: 'fixed' }}
+        // note: prevent swipe gestures from closing the toast until animation is implemented
+        onSwipeStart={event => event.preventDefault()}
+        onSwipeMove={event => event.preventDefault()}
+        onSwipeCancel={event => event.preventDefault()}
+        onSwipeEnd={event => event.preventDefault()}
+        duration={duration}
+        type={originType}
      >
-        <Toast {...store.toast} />
+        <Toast {...restProps} />
      </ToastRoot>
      <Viewport />
    </Provider>
@@ -72,6 +92,7 @@ const useToast = () => {
      positive: store.positive,
      negative: store.negative,
      custom: store.custom,
+      dismiss: store.dismiss,
    }),
    [store]
  )
@@ -26,7 +26,7 @@ const Toast = (props: Props) => {

  const renderIcon = () => {
    if (!props.type) {
-      return cloneElement(props.icon, { color: '$white-70' })
+      return cloneElement(props.icon, { color: '$white/70' })
    }

    if (props.type === 'positive') {
@@ -38,7 +38,7 @@ const Toast = (props: Props) => {

  return (
    <Base action={Boolean(action)}>
-      <Stack flex={1} flexDirection="row" gap={4}>
+      <Stack flex={1} flexDirection="row" gap={4} alignItems="center">
        <Stack width={20}>{renderIcon()}</Stack>
        <Description asChild>
          <Text size={13} weight={'medium'} color="$white-100">
@@ -74,7 +74,7 @@ const Base = styled(Stack, {
  gap: 12,
  width: 351,
  minHeight: 40,
-  backgroundColor: '$neutral-80-opa-70',
+  backgroundColor: '$neutral-80/70',
  borderRadius: '$12',
  justifyContent: 'space-between',

@@ -1,187 +1,44 @@
-import { customisation } from '@status-im/colors'
+import {
+  blur,
+  customisation,
+  danger,
+  networks,
+  neutral,
+  security,
+  social,
+  success,
+  white,
+} from '@status-im/colors'
 import { createTokens } from '@tamagui/core'
-import { size, space, zIndex } from '@tamagui/theme-base'
+import { size, space, zIndex } from '@tamagui/themes'
+
+function prefixColors(prefix: string, color: Record<string, string>) {
+  return Object.entries(color).reduce((acc, [key, value]) => {
+    acc[`${prefix}-${key}`] = value
+    return acc
+  }, {} as Record<string, string>)
+}

 export const tokens = createTokens({
  color: {
+    ...blur,
    ...customisation,
-    'neutral-5': 'hsla(220, 18%, 97%, 1)',
-    'neutral-10': 'hsla(216, 20%, 95%, 1)',
-    'neutral-20': 'hsla(214, 17%, 92%, 1)',
-    'neutral-30': 'hsla(213, 15%, 88%, 1)',
-    'neutral-40': 'hsla(219, 17%, 69%, 1)',
-    'neutral-50': 'hsla(218, 14%, 45%, 1)',
-    'neutral-60': 'hsla(219, 28%, 26%, 1)',
-    'neutral-70': 'hsla(219, 35%, 19%, 1)',
-    'neutral-80': 'hsla(219, 38%, 17%, 1)',
-    'neutral-90': 'hsla(219, 42%, 13%, 1)',
-    'neutral-95': 'hsla(218, 48%, 10%, 1)',
-    'neutral-100': 'hsla(218, 51%, 7%, 1)',
-    'neutral-5-opa-70': 'hsla(220, 18%, 97%, 0.7)',
-    'neutral-90-opa-70': 'hsla(219, 42%, 13%, 0.7)',
-    'neutral-95-opa-70': 'hsla(218, 48%, 10%, 0.7)',
-    'neutral-80-opa-5': 'hsla(219, 38%, 17%, 0.05)',
-    'neutral-80-opa-10': 'hsla(219, 38%, 17%, 0.1)',
-    'neutral-80-opa-20': 'hsla(219, 38%, 17%, 0.2)',
-    'neutral-80-opa-30': 'hsla(219, 38%, 17%, 0.3)',
-    'neutral-80-opa-40': 'hsla(219, 38%, 17%, 0.4)',
-    'neutral-80-opa-50': 'hsla(219, 38%, 17%, 0.5)',
-    'neutral-80-opa-60': 'hsla(219, 38%, 17%, 0.6)',
-    'neutral-80-opa-70': 'hsla(219, 38%, 17%, 0.7)',
-    'neutral-80-opa-80': 'hsla(219, 38%, 17%, 0.8)',
-    'neutral-80-opa-90': 'hsla(219, 38%, 17%, 0.9)',
-    'neutral-80-opa-95': 'hsla(219, 38%, 17%, 0.95)',
-    'neutral-80-opa-100': 'hsla(219, 38%, 17%, 1)',
-    'white-5': 'hsla(0, 0%, 100%, 0.05)',
-    'white-10': 'hsla(0, 0%, 100%, 0.1)',
-    'white-20': 'hsla(0, 0%, 100%, 0.2)',
-    'white-30': 'hsla(0, 0%, 100%, 0.3)',
-    'white-40': 'hsla(0, 0%, 100%, 0.4)',
-    'white-50': 'hsla(0, 0%, 100%, 0.5)',
-    'white-60': 'hsla(0, 0%, 100%, 0.6)',
-    'white-70': 'hsla(0, 0%, 100%, 0.7)',
-    'white-80': 'hsla(0, 0%, 100%, 0.8)',
-    'white-90': 'hsla(0, 0%, 100%, 0.9)',
-    'white-95': 'hsla(0, 0%, 100%, 0.95)',
-    'white-100': 'hsla(0, 0%, 100%, 1)',
-    'primary-50': 'hsla(229, 71%, 57%, 1)',
-    'primary-60': 'hsla(229, 54%, 45%, 1)',
-    'primary-50-opa-5': 'hsla(229, 71%, 57%, 0.05)',
-    'primary-50-opa-10': 'hsla(229, 71%, 57%, 0.1)',
-    'primary-50-opa-20': 'hsla(229, 71%, 57%, 0.2)',
-    'primary-50-opa-30': 'hsla(229, 71%, 57%, 0.3)',
-    'primary-50-opa-40': 'hsla(229, 71%, 57%, 0.4)',
-    'success-50': 'hsla(174, 63%, 40%, 1)',
-    'success-60': 'hsla(174, 63%, 34%, 1)',
-    'success-50-opa-5': 'hsla(174, 63%, 40%, 0.05)',
-    'success-50-opa-10': 'hsla(174, 63%, 40%, 0.1)',
-    'success-50-opa-20': 'hsla(174, 63%, 40%, 0.2)',
-    'success-50-opa-30': 'hsla(174, 63%, 40%, 0.3)',
-    'success-50-opa-40': 'hsla(174, 63%, 40%, 0.4)',
-    'danger-50': 'hsla(1, 73%, 63%, 1)',
-    'danger-60': 'hsla(2, 48%, 53%, 1)',
-    'danger-50-opa-5': 'hsla(1, 73%, 63%, 0.05)',
-    'danger-50-opa-10': 'hsla(1, 73%, 63%, 0.1)',
-    'danger-50-opa-20': 'hsla(1, 73%, 63%, 0.2)',
-    'danger-50-opa-30': 'hsla(1, 73%, 63%, 0.3)',
-    'danger-50-opa-40': 'hsla(1, 73%, 63%, 0.4)',
-    'purple-50': 'hsla(263, 44%, 57%, 1)',
-    'purple-60': 'hsla(260, 33%, 41%, 1)',
-    'purple-50-opa-5': 'hsla(263, 44%, 57%, 0.05)',
-    'purple-50-opa-10': 'hsla(263, 44%, 57%, 0.1)',
-    'purple-50-opa-20': 'hsla(263, 44%, 57%, 0.2)',
-    'purple-50-opa-30': 'hsla(263, 44%, 57%, 0.3)',
-    'purple-50-opa-40': 'hsla(263, 44%, 57%, 0.4)',
-    'indigo-50': 'hsla(217, 30%, 41%, 1)',
-    'indigo-60': 'hsla(217, 31%, 35%, 1)',
-    'indigo-50-opa-5': 'hsla(217, 30%, 41%, 0.05)',
-    'indigo-50-opa-10': 'hsla(217, 30%, 41%, 0.1)',
-    'indigo-50-opa-20': 'hsla(217, 30%, 41%, 0.2)',
-    'indigo-50-opa-30': 'hsla(217, 30%, 41%, 0.3)',
-    'indigo-50-opa-40': 'hsla(217, 30%, 41%, 0.4)',
-    'turquoise-50': 'hsla(193, 41%, 45%, 1)',
-    'turquoise-60': 'hsla(193, 41%, 38%, 1)',
-    'turquoise-50-opa-5': 'hsla(193, 41%, 45%, 0.05)',
-    'turquoise-50-opa-10': 'hsla(193, 41%, 45%, 0.1)',
-    'turquoise-50-opa-20': 'hsla(193, 41%, 45%, 0.2)',
-    'turquoise-50-opa-30': 'hsla(193, 41%, 45%, 0.3)',
-    'turquoise-50-opa-40': 'hsla(193, 41%, 45%, 0.4)',
-    'blue-50': 'hsla(231, 91%, 56%, 1)',
-    'blue-60': 'hsla(231, 70%, 45%, 1)',
-    'blue-50-opa-5': 'hsla(231, 91%, 56%, 0.05)',
-    'blue-50-opa-10': 'hsla(231, 91%, 56%, 0.1)',
-    'blue-50-opa-20': 'hsla(231, 91%, 56%, 0.2)',
-    'blue-50-opa-30': 'hsla(231, 91%, 56%, 0.3)',
-    'blue-50-opa-40': 'hsla(231, 91%, 56%, 0.4)',
-    'green-50': 'hsla(151, 53%, 58%, 1)',
-    'green-60': 'hsla(151, 38%, 48%, 1)',
-    'green-50-opa-5': 'hsla(151, 53%, 58%, 0.05)',
-    'green-50-opa-10': 'hsla(151, 53%, 58%, 0.1)',
-    'green-50-opa-20': 'hsla(151, 53%, 58%, 0.2)',
-    'green-50-opa-30': 'hsla(151, 53%, 58%, 0.3)',
-    'green-50-opa-40': 'hsla(151, 53%, 58%, 0.4)',
-    'yellow-50': 'hsla(42, 100%, 66%, 1)',
-    'yellow-60': 'hsla(42, 64%, 56%, 1)',
-    'yellow-50-opa-5': 'hsla(42, 100%, 66%, 0.05)',
-    'yellow-50-opa-10': 'hsla(42, 100%, 66%, 0.1)',
-    'yellow-50-opa-20': 'hsla(42, 100%, 66%, 0.2)',
-    'yellow-50-opa-30': 'hsla(42, 100%, 66%, 0.3)',
-    'yellow-50-opa-40': 'hsla(42, 100%, 66%, 0.4)',
-    'orange-50': 'hsla(18, 95%, 68%, 1)',
-    'orange-60': 'hsla(18, 60%, 57%, 1)',
-    'orange-50-opa-5': 'hsla(18, 95%, 68%, 0.05)',
-    'orange-50-opa-10': 'hsla(18, 95%, 68%, 0.1)',
-    'orange-50-opa-20': 'hsla(18, 95%, 68%, 0.2)',
-    'orange-50-opa-30': 'hsla(18, 95%, 68%, 0.3)',
-    'orange-50-opa-40': 'hsla(18, 95%, 68%, 0.4)',
-    'red-50': 'hsla(0, 87%, 68%, 1)',
-    'red-60': 'hsla(0, 54%, 57%, 1)',
-    'red-50-opa-5': 'hsla(0, 87%, 68%, 0.05)',
-    'red-50-opa-10': 'hsla(0, 87%, 68%, 0.1)',
-    'red-50-opa-20': 'hsla(0, 87%, 68%, 0.2)',
-    'red-50-opa-30': 'hsla(0, 87%, 68%, 0.3)',
-    'red-50-opa-40': 'hsla(0, 87%, 68%, 0.4)',
-    'pink-50': 'hsla(338, 96%, 74%, 1)',
-    'pink-60': 'hsla(337, 56%, 62%, 1)',
-    'pink-50-opa-5': 'hsla(338, 96%, 74%, 0.05)',
-    'pink-50-opa-10': 'hsla(338, 96%, 74%, 0.1)',
-    'pink-50-opa-20': 'hsla(338, 96%, 74%, 0.2)',
-    'pink-50-opa-30': 'hsla(338, 96%, 74%, 0.3)',
-    'pink-50-opa-40': 'hsla(338, 96%, 74%, 0.4)',
-    'brown-50': 'hsla(15, 33%, 45%, 1)',
-    'brown-60': 'hsla(15, 33%, 38%, 1)',
-    'brown-50-opa-5': 'hsla(15, 33%, 45%, 0.05)',
-    'brown-50-opa-10': 'hsla(15, 33%, 45%, 0.1)',
-    'brown-50-opa-20': 'hsla(15, 33%, 45%, 0.2)',
-    'brown-50-opa-30': 'hsla(15, 33%, 45%, 0.3)',
-    'brown-50-opa-40': 'hsla(15, 33%, 45%, 0.4)',
-    'beige-50': 'hsla(29, 34%, 68%, 1)',
-    'beige-60': 'hsla(29, 21%, 58%, 1)',
-    'beige-50-opa-5': 'hsla(29, 34%, 68%, 0.05)',
-    'beige-50-opa-10': 'hsla(29, 34%, 68%, 0.1)',
-    'beige-50-opa-20': 'hsla(29, 34%, 68%, 0.2)',
-    'beige-50-opa-30': 'hsla(29, 34%, 68%, 0.3)',
-    'beige-50-opa-40': 'hsla(29, 34%, 68%, 0.4)',
-    'identifier-1': 'hsla(0, 0%, 0%, 1)',
-    'identifier-2': 'hsla(120, 100%, 50%, 1)',
-    'identifier-3': 'hsla(60, 100%, 50%, 1)',
-    'identifier-4': 'hsla(0, 100%, 50%, 1)',
-    'identifier-5': 'hsla(300, 100%, 50%, 1)',
-    'identifier-6': 'hsla(240, 100%, 50%, 1)',
-    'identifier-7': 'hsla(180, 100%, 50%, 1)',
-    'identifier-8': 'hsla(0, 1%, 44%, 1)',
-    'identifier-9': 'hsla(120, 100%, 30%, 1)',
-    'identifier-10': 'hsla(61, 100%, 34%, 1)',
-    'identifier-11': 'hsla(0, 100%, 30%, 1)',
-    'identifier-12': 'hsla(300, 100%, 28%, 1)',
-    'identifier-13': 'hsla(240, 100%, 26%, 1)',
-    'identifier-14': 'hsla(186, 100%, 29%, 1)',
-    'identifier-15': 'hsla(0, 0%, 77%, 1)',
-    'identifier-16': 'hsla(123, 100%, 86%, 1)',
-    'identifier-17': 'hsla(60, 100%, 85%, 1)',
-    'identifier-18': 'hsla(0, 100%, 81%, 1)',
-    'identifier-19': 'hsla(300, 100%, 85%, 1)',
-    'identifier-20': 'hsla(252, 100%, 75%, 1)',
-    'identifier-21': 'hsla(180, 100%, 88%, 1)',
-    'identifier-22': 'hsla(0, 0%, 91%, 1)',
-    'identifier-23': 'hsla(45, 100%, 54%, 1)',
-    'identifier-24': 'hsla(11, 100%, 60%, 1)',
-    'identifier-25': 'hsla(324, 100%, 50%, 1)',
-    'identifier-26': 'hsla(277, 100%, 50%, 1)',
-    'identifier-27': 'hsla(204, 94%, 61%, 1)',
-    'identifier-28': 'hsla(165, 100%, 47%, 1)',
-    'identifier-29': 'hsla(0, 0%, 100%, 1)',
-    'identifier-30': 'hsla(12, 38%, 45%, 1)',
-    'identifier-31': 'hsla(324, 100%, 39%, 1)',
-    'identifier-32': 'hsla(40, 100%, 30%, 1)',
-    ethereum: 'hsla(227, 75%, 69%, 1)',
-    optimism: 'hsla(0, 72%, 67%, 1)',
-    arbitrum: 'hsla(192, 82%, 68%, 1)',
-    zksync: 'hsla(239, 98%, 81%, 1)',
-    hermez: 'hsla(15, 77%, 65%, 1)',
-    xdai: 'hsla(179, 51%, 50%, 1)',
-    polygon: 'hsla(268, 84%, 70%, 1)',
-    unknown: 'hsla(206, 26%, 95%, 1)',
+    ...(prefixColors('danger', danger) as {
+      [K in keyof typeof danger as `danger-${K}`]: (typeof danger)[K]
+    }),
+    ...networks,
+    ...(prefixColors('neutral', neutral) as {
+      [K in keyof typeof neutral as `neutral-${K}`]: (typeof neutral)[K]
+    }),
+    ...security,
+    ...social,
+    ...(prefixColors('success', success) as {
+      [K in keyof typeof success as `success-${K}`]: (typeof success)[K]
+    }),
+    ...(prefixColors('white', white) as {
+      [K in keyof typeof white as `white-${K}`]: (typeof white)[K]
+    }),
+
    transparent: 'hsla(0, 0%, 0%, 0)',
  },
  size,
@@ -28,7 +28,7 @@ const UserList = (props: Props) => {
            alignItems="center"
            cursor="pointer"
            hoverStyle={{
-              backgroundColor: '$primary-50-opa-5',
+              backgroundColor: '$blue/5',
            }}
          >
            <Avatar
@@ -1,18 +1,21 @@
-/**
- * Gets the color with opacity based on the original color and opacity value
- * @param color - the original color
- * @param opacity - the opacity value
- * @returns the color with opacity
- **/
+import { opacity as colorOpacity } from '../consts/opacity'

-function getColorWithOpacity(color: string, opacity: number): string {
-  // Ensure the opacity value is within the valid range of 0 to 1
-  const clampedOpacity = Math.max(0, Math.min(1, opacity)) * 100
+export type RGBAColor = `rgba(${string} / ${string}%)`

-  // Construct the color string with opacity using CSS color-mix function
-  const newColor = `color-mix(in srgb, ${color} ${clampedOpacity}%, transparent)`
+export type HexColor = `#${string}`

-  return newColor
+type Opacity = keyof typeof colorOpacity
+
+export function getColorWithOpacity(
+  color: RGBAColor | HexColor,
+  opacity: Opacity
+): string {
+  if (color.startsWith('rgba')) {
+    return color
+      .replace(' / ', '/')
+      .replace(/\s/g, ',')
+      .replace(/(\d+)%/, `${colorOpacity[opacity].decimal}`)
+  }
+
+  return `${color}${colorOpacity[opacity].hex}`
 }
-
-export { getColorWithOpacity }
@@ -1,5 +1,48 @@
 # @status-im/icons

+## 0.9.2
+
+### Patch Changes
+
+- a023653: sync icons
+
+## 0.9.1
+
+### Patch Changes
+
+- e50e48f: Sync icons
+
+## 0.9.0
+
+### Minor Changes
+
+- 6260801: Sync icons
+- cd85b36: Sync icons
+
+## 0.8.0
+
+### Minor Changes
+
+- 094369c: Sync icons
+
+## 0.7.0
+
+### Minor Changes
+
+- b59b504: Updates and syncs new icons from design system
+
+## 0.6.0
+
+### Minor Changes
+
+- 3f75d6b: sync icons
+
+## 0.5.0
+
+### Minor Changes
+
+- 367145c: update `tamagui`
+
 ## 0.4.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@status-im/icons",
-  "version": "0.4.0",
+  "version": "0.9.2",
  "files": [
    "dist",
    "svg"
@@ -31,12 +31,13 @@
    "lint": "eslint 'src/**/*.{ts,tsx}'",
    "lint:fix": "yarn lint --fix",
    "format": "prettier --write 'src/**/*.{ts,tsx}'",
-    "clean": "rimraf dist node_modules .turbo"
+    "clean": "rimraf dist node_modules .turbo",
+    "prepack": "yarn build"
  },
  "dependencies": {
-    "@tamagui/core": "1.36.4",
-    "@tamagui/web": "1.36.4",
-    "tamagui": "1.36.4"
+    "@tamagui/core": "1.74.21",
+    "@tamagui/web": "1.74.21",
+    "tamagui": "1.74.21"
  },
  "peerDependencies": {
    "react": "^16.x || ^17.x || ^18.x",
@@ -33,6 +33,8 @@ if (isCancel(personalAccessToken)) {
 const FILE_KEY = 'qLLuMLfpGxK9OfpIavwsmK'

 const NODE_IDS = {
+  // currently generates only set of size 20
+  // https://github.com/status-im/status-web/issues/466
  '3239:987': 'icons',
  '3227:1083': 'social',
  // '942:77': 'reactions',
@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgAddSmIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="M9.4 10.6V15h1.2v-4.4H15V9.4h-4.4V5H9.4v4.4H5v1.2h4.4Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgAddSmIcon
@@ -12,7 +12,7 @@ const SvgAddSmallIcon = createIcon(props => {
      focusable={false}
      aria-hidden={true}
    >
-      <circle cx={10} cy={10} r={7.5} stroke="#A1ABBD" strokeWidth={1.2} />
+      <circle cx={10} cy={10} r={7} stroke="#A1ABBD" strokeWidth={1.2} />
      <path
        fill={props.color}
        fillRule="evenodd"
@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgAddTimeOffIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="M10.6 5.5a3.9 3.9 0 1 1 7.8 0 3.9 3.9 0 0 1-7.8 0ZM14.5.4a5.1 5.1 0 1 0 0 10.2 5.1 5.1 0 0 0 0-10.2ZM7.162 2.642a7.027 7.027 0 0 1 2.203-.248 5.962 5.962 0 0 0-.744 1.902 3.213 3.213 0 0 0-.187-.167c-.294-.242-.538-.346-.707-.39a6.86 6.86 0 0 0-.505.134c-.124.124-.284.336-.417.693-.305.813-.48 2.393.243 5.353l2.72-.729c.285.364.61.694.969.984l-.873.233 1.338 4.994a3.794 3.794 0 0 1 1.609.674c.66.48 1.509.622 2.29.382l1.722-.53.353 1.146-1.723.53a3.795 3.795 0 0 1-3.348-.558 2.595 2.595 0 0 0-2.534-.293l-1.228.518-.041.017c-.475.2-.767.323-1.07.404a4.601 4.601 0 0 1-1.94.098c-.31-.051-.613-.145-1.105-.296l-.043-.013-1.32-.407.352-1.146 1.32.406c.55.169.771.236.99.271.478.079.967.055 1.435-.071.214-.058.428-.147.957-.37l1.228-.517c.277-.116.563-.198.853-.246l-1.254-4.682-5.699 1.527-.622.167-.122-.633.589-.114-.59.113v-.008l-.004-.019a4.582 4.582 0 0 1-.047-.307 10.857 10.857 0 0 1-.075-.85 10.853 10.853 0 0 1 .188-2.689c.422-2.06 1.653-4.41 4.84-5.263ZM5.757 4.555c-.312 1.11-.354 2.856.325 5.623l-2.723.73a9.66 9.66 0 0 1 .14-2.762c.27-1.316.89-2.686 2.258-3.591ZM15.1 4.9H17v1.2h-1.9V8h-1.2V6.1H12V4.9h1.9V3h1.2v1.9Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgAddTimeOffIcon
@@ -15,7 +15,7 @@ const SvgAlertIcon = createIcon(props => {
      <path
        fill={props.color}
        fillRule="evenodd"
-        d="M3.1 10a6.9 6.9 0 1 1 13.8 0 6.9 6.9 0 0 1-13.8 0ZM10 1.9a8.1 8.1 0 1 0 0 16.2 8.1 8.1 0 0 0 0-16.2Zm.55 9.6.2-6h-1.5l.2 6h1.1Zm.2 2.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"
+        d="M3.6 10a6.4 6.4 0 1 1 12.8 0 6.4 6.4 0 0 1-12.8 0ZM10 2.4a7.6 7.6 0 1 0 0 15.2 7.6 7.6 0 0 0 0-15.2Zm.55 9.1.2-6h-1.5l.2 6h1.1Zm.2 2.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"
        clipRule="evenodd"
      />
    </svg>
@@ -14,9 +14,37 @@ const SvgAndroidIcon = createIcon(props => {
    >
      <path
        fill={props.color}
-        fillRule="evenodd"
-        d="M4.86 6.183C4.105 7.866 4.1 9.748 4.1 10.5c0 .557.009 1.066.028 1.53.198.037.467.08.821.125.97.12 2.57.245 5.05.245 2.482 0 4.081-.124 5.051-.245.354-.045.624-.088.821-.125.02-.464.029-.973.029-1.53 0-.752-.005-2.634-.76-4.317-.373-.831-.92-1.594-1.724-2.15-.8-.555-1.896-.933-3.416-.933s-2.616.378-3.416.932c-.804.557-1.351 1.32-1.724 2.151Zm10.92 7.08c-.167.027-.36.055-.58.082-1.03.13-2.68.255-5.2.255s-4.17-.126-5.2-.255a17.213 17.213 0 0 1-.58-.082c.03.269.067.518.111.75.168.875.432 1.44.794 1.827.359.382.873.652 1.666.824.802.173 1.843.236 3.209.236s2.407-.063 3.209-.236c.793-.172 1.307-.442 1.666-.824.362-.387.626-.952.793-1.828.045-.231.082-.48.112-.749ZM5.9 3.046C6.929 2.334 8.27 1.9 10 1.9c1.73 0 3.071.434 4.1 1.146.28.194.534.407.765.634l1.155-1.54.96.72-1.33 1.772c.23.343.423.7.585 1.06.865 1.93.865 4.034.865 4.794v.014c0 1.508-.062 2.742-.253 3.738-.192 1-.522 1.81-1.097 2.422-.579.618-1.346.973-2.287 1.177-.933.201-2.08.263-3.463.263-1.384 0-2.53-.062-3.463-.264-.941-.203-1.709-.558-2.287-1.176-.575-.613-.906-1.423-1.097-2.422-.191-.995-.253-2.23-.253-3.738v-.014c0-.76 0-2.864.865-4.794.161-.36.354-.717.584-1.06L3.02 2.86l.96-.72 1.156 1.54c.23-.227.485-.44.766-.634ZM9 8c0 .828-.448 1.5-1 1.5S7 8.828 7 8s.448-1.5 1-1.5S9 7.172 9 8Zm3 1.5c.552 0 1-.672 1-1.5s-.448-1.5-1-1.5-1 .672-1 1.5.448 1.5 1 1.5Z"
-        clipRule="evenodd"
+        stroke="#fff"
+        strokeWidth={0.729}
+        d="M10 10.875c2.545 0 4.608-1.905 4.608-4.254 0-2.349-2.063-4.253-4.608-4.253-2.545 0-4.608 1.904-4.608 4.253 0 2.35 2.063 4.254 4.608 4.254Z"
+      />
+      <path
+        fill={props.color}
+        stroke="#fff"
+        strokeWidth={0.729}
+        d="M13.494 5.558H6.506c-.616 0-1.114.498-1.114 1.114v6.988c0 .615.498 1.114 1.114 1.114h6.988c.615 0 1.114-.5 1.114-1.114V6.672c0-.616-.5-1.114-1.114-1.114Z"
+      />
+      <path
+        fill={props.color}
+        stroke="#fff"
+        strokeWidth={0.365}
+        d="M6.852 1.686a.33.33 0 1 1 .576-.319L9.22 4.6a.33.33 0 0 1-.576.32L6.852 1.685Zm7.958 6.15a1.215 1.215 0 1 1 2.43 0v4.304a1.215 1.215 0 1 1-2.43 0V7.836Zm-4.303 4.912a1.215 1.215 0 0 1 2.43 0v4.305a1.215 1.215 0 0 1-2.43 0v-4.305Zm2.64-11.062a.33.33 0 0 0-.576-.319L10.78 4.6a.33.33 0 0 0 .576.32l1.792-3.234Zm-7.958 6.15a1.215 1.215 0 0 0-2.43 0v4.304a1.215 1.215 0 1 0 2.43 0V7.836Zm4.304 4.912a1.215 1.215 0 1 0-2.43 0v4.305a1.215 1.215 0 1 0 2.43 0v-4.305Z"
+      />
+      <path
+        fill={props.color}
+        d="M10 10.875c2.545 0 4.608-1.905 4.608-4.254 0-2.349-2.063-4.253-4.608-4.253-2.545 0-4.608 1.904-4.608 4.253 0 2.35 2.063 4.254 4.608 4.254Z"
+      />
+      <path
+        fill={props.color}
+        d="M13.494 5.558H6.506c-.616 0-1.114.498-1.114 1.114v6.988c0 .615.498 1.114 1.114 1.114h6.988c.615 0 1.114-.5 1.114-1.114V6.672c0-.616-.5-1.114-1.114-1.114Z"
+      />
+      <path fill="#fff" d="M5.189 6.798h9.621-9.62Z" />
+      <path stroke="#fff" strokeWidth={0.365} d="M5.189 6.798h9.621" />
+      <path
+        fill="#fff"
+        stroke="#fff"
+        strokeWidth={0.365}
+        d="M7.873 4.747a.203.203 0 1 0 0-.405.203.203 0 0 0 0 .405Zm4.253 0a.203.203 0 1 0 0-.405.203.203 0 0 0 0 .405Z"
      />
    </svg>
  )
@@ -0,0 +1,23 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgAppleIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        d="M14.357 10c.023 2.422 2.12 3.227 2.143 3.238-.018.056-.335 1.148-1.105 2.275-.665.975-1.356 1.946-2.444 1.966-1.069.02-1.413-.635-2.635-.635-1.222 0-1.604.615-2.616.655-1.05.04-1.85-1.054-2.52-2.025-1.371-1.987-2.42-5.613-1.012-8.062.699-1.215 1.948-1.985 3.303-2.005 1.031-.02 2.005.695 2.635.695.63 0 1.813-.86 3.056-.733.521.022 1.982.21 2.92 1.587-.075.047-1.743 1.02-1.725 3.044Zm-2.009-5.945c.558-.677.933-1.618.83-2.555-.803.032-1.775.537-2.351 1.213-.517.598-.97 1.556-.847 2.475.895.069 1.81-.457 2.368-1.133Z"
+      />
+    </svg>
+  )
+})
+
+export default SvgAppleIcon
@@ -0,0 +1,48 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgArgentinaIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill="#75AADB"
+        d="M20 15a2.222 2.222 0 0 1-2.222 2.222H2.222A2.222 2.222 0 0 1 0 15V5c0-1.227.995-2.222 2.222-2.222h15.556C19.005 2.778 20 3.773 20 5v10Z"
+      />
+      <path fill="#fff" d="M0 7.222h20v5.556H0V7.222Z" />
+      <path
+        fill="#FCBF49"
+        d="m10 7.222.271 1.416.792-1.204-.291 1.411 1.192-.81-.81 1.193 1.412-.29-1.204.79 1.416.272-1.416.271 1.204.792-1.412-.291.81 1.192-1.192-.81.291 1.412-.792-1.204L10 12.778l-.271-1.416-.792 1.204.291-1.412-1.192.81.809-1.192-1.411.291 1.204-.792L7.222 10l1.416-.271-1.204-.792 1.411.291-.81-1.192 1.193.809-.29-1.411.79 1.204L10 7.222Z"
+      />
+      <path
+        fill="#843511"
+        d="m10 7.961.134.703L10.2 9l.188-.286.393-.597-.144.7-.07.336.283-.193.593-.401-.402.592-.192.283.335-.069.7-.145-.597.394L11 9.8l.336.065.703.134-.703.134L11 10.2l.286.188.597.393-.7-.144-.336-.07.192.283.402.592-.592-.402-.284-.192.07.336.145.7-.393-.597-.188-.286-.065.336-.134.703-.134-.703L9.8 11l-.188.286-.394.598.145-.701.07-.335-.284.192-.592.402.401-.593.193-.283-.336.07-.7.145.597-.394L9 10.2l-.336-.065L7.96 10l.703-.134L9 9.8l-.286-.188-.598-.394.7.145.336.07-.193-.284-.402-.592.592.402.284.192-.07-.335-.144-.7.393.597L9.8 9l.065-.337L10 7.96Zm0-.739-.271 1.416-.792-1.204.291 1.411-1.192-.809.809 1.193-1.411-.291 1.204.791L7.222 10l1.416.271-1.204.792 1.411-.291-.81 1.192 1.193-.81-.29 1.412.79-1.204.272 1.416.271-1.416.792 1.204-.291-1.412 1.192.81-.81-1.192 1.412.291-1.204-.792L12.778 10l-1.416-.271 1.204-.792-1.412.291.81-1.192-1.192.809.291-1.412-.792 1.204L10 7.222Zm1.063.212h.003-.003Zm.9.602h.004-.003Zm.603.901h.003-.003Z"
+      />
+      <path
+        fill="#FCBF49"
+        d="M10 11.111a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222Z"
+      />
+      <path
+        fill="#843511"
+        d="M10 11.18a1.182 1.182 0 0 1 0-2.36 1.182 1.182 0 0 1 0 2.36Zm0-2.222a1.043 1.043 0 0 0 0 2.084 1.043 1.043 0 0 0 0-2.084Z"
+      />
+      <path
+        fill="#C16540"
+        d="M9.89 9.875c0 .086-.145.155-.324.155-.18 0-.325-.07-.325-.155 0-.087.145-.156.325-.156.179 0 .324.07.324.156Zm.862-.014c0-.09-.148-.162-.33-.162-.182 0-.33.072-.33.162 0 .09.148.162.33.162.183 0 .33-.072.33-.162Z"
+      />
+      <path
+        fill="#ED8662"
+        d="M9.702 10.486c0-.07.136-.128.304-.128.168 0 .304.057.304.128 0 .07-.136.127-.304.127-.168 0-.304-.057-.304-.127Z"
+      />
+    </svg>
+  )
+})
+
+export default SvgArgentinaIcon
@@ -0,0 +1,43 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgAustraliaIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill="#00247D"
+        d="M17.778 2.778H2.222a2.23 2.23 0 0 0-.335.025l-.003.974-1.516-.002A2.213 2.213 0 0 0 0 5v10c0 1.227.995 2.222 2.222 2.222h15.556A2.222 2.222 0 0 0 20 15V5a2.222 2.222 0 0 0-2.222-2.222Z"
+      />
+      <path
+        fill="#fff"
+        d="m5 14.457-.679.627.067-.922-.914-.14.763-.521-.46-.802.883.271.34-.86.34.86.884-.271-.461.802.763.522-.914.14.067.921-.68-.627Zm10.528-9.145-.444.41.044-.603-.599-.091.5-.342-.301-.524.578.177.222-.563.223.563.578-.177-.302.524.499.342-.598.09.044.604-.444-.41Zm-2.223 3.334-.443.41.043-.603-.598-.091.5-.343-.302-.524.578.177.223-.563.222.563.579-.177-.302.524.499.343-.598.09.044.604-.444-.41Zm5-1.112-.443.411.044-.603-.599-.091.5-.343-.301-.524.577.177.223-.563.222.563.579-.177-.302.524.499.343-.598.09.044.604-.445-.41Zm-2.777 7.778-.444.41.044-.602-.599-.092.5-.342-.301-.524.578.177.222-.563.223.563.578-.177-.302.524.499.342-.598.091.044.604-.444-.41Zm1.694-6.423.163.331.365.053-.263.257.062.364-.327-.172-.327.172.063-.364-.264-.257.365-.053.163-.331Z"
+      />
+      <path
+        fill="#00247D"
+        d="M10.556 10V2.778H2.222c-.178 0-.335.025-.335.025l-.003.974-1.516-.002s-.024.033-.07.114A2.216 2.216 0 0 0 0 5v5h10.556Z"
+      />
+      <path
+        fill="#fff"
+        d="M10.556 2.778H9.26L6.667 4.594V2.778H3.889v1.427L1.887 2.803a2.19 2.19 0 0 0-.93.37L3.57 5h-.964L.537 3.55a2.307 2.307 0 0 0-.17.225L2.119 5H0v2.778h2.158L0 9.315V10h1.851L3.89 8.573V10h2.778V8.184L9.26 10h1.296V8.873L8.992 7.778h1.564V5H8.992l1.564-1.095V2.778Z"
+      />
+      <path
+        fill="#CF1B2B"
+        d="M6.111 2.778H4.444v2.778H0v1.666h4.444V10h1.667V7.222h4.445V5.556H6.11V2.778Z"
+      />
+      <path
+        fill="#CF1B2B"
+        d="M10.556 2.778h-.812L6.667 4.933V5h.872l3.017-2.112v-.11Zm-9.598.394a2.251 2.251 0 0 0-.42.379L2.604 5h.964L.958 3.172Zm2.618 4.606L.408 10h.96l2.52-1.765v-.457h-.312Zm6.98 2.112v-.678L8.507 7.778H7.54l3.017 2.112Z"
+      />
+    </svg>
+  )
+})
+
+export default SvgAustraliaIcon
@@ -15,10 +15,10 @@ const SvgAutomaticIcon = createIcon(props => {
      <path
        fill="#A1ABBD"
        fillRule="evenodd"
-        d="M8.958 5.723a5.5 5.5 0 1 0 0 8.554A6.97 6.97 0 0 1 7.5 10a6.97 6.97 0 0 1 1.458-4.277Z"
+        d="M8.813 6.433a4 4 0 1 0 0 7.133A5.478 5.478 0 0 1 7.5 10c0-1.36.494-2.606 1.313-3.567Z"
        clipRule="evenodd"
      />
-      <circle cx={14.5} cy={10} r={5.5} fill="#23ADA0" />
+      <circle cx={13} cy={10} r={4} fill="#23ADA0" />
    </svg>
  )
 })
@@ -15,7 +15,7 @@ const SvgBlockIcon = createIcon(props => {
      <path
        fill={props.color}
        fillRule="evenodd"
-        d="M3.1 10a6.9 6.9 0 0 1 11.336-5.285l-9.721 9.721A6.872 6.872 0 0 1 3.1 10Zm2.463 5.285a6.9 6.9 0 0 0 9.721-9.721l-9.72 9.72ZM10 1.9a8.1 8.1 0 1 0 0 16.2 8.1 8.1 0 0 0 0-16.2Z"
+        d="M3.6 10a6.4 6.4 0 0 1 10.48-4.93l-9.01 9.011A6.374 6.374 0 0 1 3.6 10Zm2.318 4.93a6.4 6.4 0 0 0 9.011-9.011l-9.01 9.01ZM10 2.4a7.6 7.6 0 1 0 0 15.2 7.6 7.6 0 0 0 0-15.2Z"
        clipRule="evenodd"
      />
    </svg>
@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgBookIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="M10.6 5.256a5.369 5.369 0 0 1 4.155-1.378l.24.024c.144.015.19.02.226.025a1.4 1.4 0 0 1 1.177 1.3c.002.037.002.084.002.228V12.5c0 .474 0 .8-.018 1.053-.017.249-.048.384-.089.483a1.4 1.4 0 0 1-.757.757c-.099.041-.234.072-.483.09-.253.017-.579.017-1.053.017h-.053c-.61 0-.984 0-1.35.06-.489.079-.96.236-1.399.465a5.06 5.06 0 0 0-.598.38V5.256Zm-1.2 0a5.369 5.369 0 0 0-4.155-1.378l-.24.024c-.144.015-.19.02-.226.025a1.4 1.4 0 0 0-1.177 1.3 4.547 4.547 0 0 0-.002.228V12.5c0 .474 0 .8.018 1.053.016.249.048.384.088.483a1.4 1.4 0 0 0 .758.757c.099.041.234.072.482.09.254.017.58.017 1.054.017h.053c.609 0 .984 0 1.35.06.488.079.96.236 1.398.465.195.102.38.223.599.38V5.256ZM5.126 2.684A6.569 6.569 0 0 1 10 4.187a6.569 6.569 0 0 1 4.874-1.503l.24.024.02.002c.116.012.2.02.276.032a2.6 2.6 0 0 1 2.185 2.415c.005.077.005.161.005.279v7.084c0 .449 0 .816-.02 1.115-.022.31-.067.59-.178.86a2.6 2.6 0 0 1-1.407 1.407c-.27.112-.55.156-.86.178-.3.02-.666.02-1.114.02H14c-.678 0-.952.002-1.211.044-.361.058-.71.175-1.034.344-.233.122-.452.285-.995.692l-.4.3-.36.27-.36-.27-.4-.3c-.543-.407-.763-.57-.995-.692a3.399 3.399 0 0 0-1.034-.344c-.26-.042-.533-.044-1.211-.044h-.02c-.45 0-.816 0-1.115-.02a2.674 2.674 0 0 1-.86-.178 2.6 2.6 0 0 1-1.407-1.407 2.675 2.675 0 0 1-.178-.86 17.7 17.7 0 0 1-.02-1.114V5.435c0-.117 0-.201.004-.278A2.6 2.6 0 0 1 4.59 2.742c.076-.012.16-.02.276-.032l.02-.002.24-.024Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgBookIcon
@@ -0,0 +1,44 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgBrazilIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill="#009B3A"
+        d="M20 15a2.222 2.222 0 0 1-2.222 2.222H2.222A2.222 2.222 0 0 1 0 15V5c0-1.227.995-2.222 2.222-2.222h15.556C19.005 2.778 20 3.773 20 5v10Z"
+      />
+      <path
+        fill="#FEDF01"
+        d="M18.182 10 10 16.18 1.818 10 10 3.82 18.182 10Z"
+      />
+      <path
+        fill="#002776"
+        d="M9.987 13.546a3.588 3.588 0 1 0 0-7.176 3.588 3.588 0 0 0 0 7.176Z"
+      />
+      <path
+        fill="#CBE9D4"
+        d="M6.82 8.27a3.57 3.57 0 0 0-.373 1.124c2.22-.16 5.232 1.051 6.525 2.553a3.57 3.57 0 0 0 .49-1.113c-1.595-1.56-4.398-2.572-6.641-2.563Z"
+      />
+      <path
+        fill="#88C9F9"
+        d="M6.667 10.13h.555v.555h-.555v-.556Zm.555 1.11h.556v.556h-.556v-.555Z"
+      />
+      <path
+        fill="#55ACEE"
+        d="M8.333 10.13h.556v.555h-.556v-.556Zm1.111.555H10v.556h-.556v-.556Zm2.223 1.111h.555v.556h-.555v-.556ZM10 12.352h.556v.555H10v-.555Zm1.667-3.334h.555v.556h-.555v-.556Z"
+      />
+      <path fill="#3B88C3" d="M10.556 11.24h.555v.556h-.555v-.555Z" />
+    </svg>
+  )
+})
+
+export default SvgBrazilIcon
@@ -0,0 +1,77 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgBridgeBlurIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <g clipPath="url(#bridge-blur-icon_svg__a)">
+        <mask
+          id="bridge-blur-icon_svg__c"
+          width={20}
+          height={20}
+          x={0}
+          y={0}
+          maskUnits="userSpaceOnUse"
+          style={{
+            maskType: 'alpha',
+          }}
+        >
+          <path
+            fill="url(#bridge-blur-icon_svg__b)"
+            stroke={props.color}
+            d="M-.5-.5h19v19h-19z"
+            transform="matrix(0 -1 -1 0 19 19)"
+          />
+        </mask>
+        <g mask="url(#bridge-blur-icon_svg__c)">
+          <path
+            fill={props.color}
+            fillRule="evenodd"
+            d="M4.99 10.098 4.5 10l-.49-.099v-.002l.001-.004.003-.014a3.446 3.446 0 0 1 .054-.224 8.6 8.6 0 0 1 1.075-2.43C6.015 5.887 7.528 4.5 10 4.5c2.473 0 3.986 1.387 4.857 2.728a8.602 8.602 0 0 1 1.129 2.653l.003.014v.004l.001.002-.49.099-.49.098-.002-.008-.008-.034a7.103 7.103 0 0 0-.199-.672 7.598 7.598 0 0 0-.783-1.612C13.265 6.612 12.028 5.5 10 5.5c-2.027 0-3.264 1.113-4.018 2.273a7.6 7.6 0 0 0-.99 2.318l-.002.007Z"
+            clipRule="evenodd"
+          />
+        </g>
+        <circle
+          cx={4.5}
+          cy={12.5}
+          r={2.5}
+          stroke={props.color}
+          strokeWidth={1.2}
+        />
+        <circle
+          cx={15.5}
+          cy={12.5}
+          r={2.5}
+          stroke={props.color}
+          strokeWidth={1.2}
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="bridge-blur-icon_svg__b"
+          x1={13}
+          x2={15.5}
+          y1={4.5}
+          y2={8}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={props.color} stopOpacity={0} />
+          <stop offset={1} stopColor={props.color} />
+        </linearGradient>
+        <clipPath id="bridge-blur-icon_svg__a">
+          <path fill="#fff" d="M0 0h20v20H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+export default SvgBridgeBlurIcon
@@ -12,12 +12,58 @@ const SvgBridgeIcon = createIcon(props => {
      focusable={false}
      aria-hidden={true}
    >
-      <path
-        fill={props.color}
-        fillRule="evenodd"
-        d="M6.75 2.4h-.485l-.101.472v.002l-.005.018a3.776 3.776 0 0 1-.145.43c-.117.29-.31.674-.61 1.057C4.813 5.13 3.793 5.9 2 5.9v1.2c2.207 0 3.56-.978 4.347-1.98l.053-.068V10.4H2v1.2h4.4v4.9h1.2v-4.9h4.8v4.9h1.2v-4.9H18v-1.2h-4.4V5.052l.053.069C14.44 6.12 15.793 7.1 18 7.1V5.9c-1.793 0-2.815-.772-3.403-1.52a4.396 4.396 0 0 1-.732-1.4l-.024-.088-.004-.018v-.002l-.102-.472h-1.454l-.113.454v.003l-.006.02a5.694 5.694 0 0 1-.125.389 5.77 5.77 0 0 1-.43.932C11.197 4.9 10.665 5.4 10 5.4s-1.196-.499-1.607-1.202a5.78 5.78 0 0 1-.555-1.322l-.005-.019v-.003h-.001L7.718 2.4H6.75Zm5.65 2.782C11.906 5.885 11.129 6.6 10 6.6s-1.906-.715-2.4-1.418V10.4h4.8V5.182Z"
-        clipRule="evenodd"
-      />
+      <g clipPath="url(#bridge-icon_svg__a)">
+        <mask
+          id="bridge-icon_svg__c"
+          width={20}
+          height={20}
+          x={0}
+          y={0}
+          maskUnits="userSpaceOnUse"
+          style={{
+            maskType: 'alpha',
+          }}
+        >
+          <path
+            fill="url(#bridge-icon_svg__b)"
+            d="M0 0h20v20H0z"
+            transform="matrix(0 -1 -1 0 20 20)"
+          />
+        </mask>
+        <g mask="url(#bridge-icon_svg__c)">
+          <path stroke={props.color} d="M4.5 10s1-5 5.5-5 5.5 5 5.5 5" />
+        </g>
+        <circle
+          cx={4.5}
+          cy={12.5}
+          r={2.5}
+          stroke={props.color}
+          strokeWidth={1.2}
+        />
+        <circle
+          cx={15.5}
+          cy={12.5}
+          r={2.5}
+          stroke={props.color}
+          strokeWidth={1.2}
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="bridge-icon_svg__b"
+          x1={13}
+          x2={15.5}
+          y1={4.5}
+          y2={8}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={props.color} stopOpacity={0} />
+          <stop offset={1} stopColor={props.color} />
+        </linearGradient>
+        <clipPath id="bridge-icon_svg__a">
+          <path fill="#fff" d="M0 0h20v20H0z" />
+        </clipPath>
+      </defs>
    </svg>
  )
 })
@@ -15,7 +15,7 @@ const SvgBrowserIcon = createIcon(props => {
      <path
        fill={props.color}
        fillRule="evenodd"
-        d="M3.1 10a6.9 6.9 0 1 1 13.8 0 6.9 6.9 0 0 1-13.8 0ZM10 1.9a8.1 8.1 0 1 0 0 16.2 8.1 8.1 0 0 0 0-16.2ZM8.218 9.483c.043-.104.085-.201.126-.29l2.463 2.463a7.206 7.206 0 0 1-.29.126c-.443.182-.983.363-1.519.513-.536.15-1.05.265-1.442.32a4.63 4.63 0 0 1-.196.025c.006-.059.014-.124.024-.196.056-.391.17-.906.321-1.443.15-.535.33-1.075.513-1.518Zm3.564 1.034a8.035 8.035 0 0 1-.126.29L9.193 8.344c.089-.04.186-.083.29-.126.443-.182.983-.363 1.518-.513.537-.15 1.052-.265 1.443-.32.072-.01.137-.019.196-.025a4.632 4.632 0 0 1-.024.196c-.056.391-.17.906-.321 1.443-.15.535-.33 1.075-.513 1.518Zm1.433-4.333a.815.815 0 0 1 .391.21.818.818 0 0 1 .21.39c.024.105.033.21.035.305a3.88 3.88 0 0 1-.048.637 12.98 12.98 0 0 1-.353 1.596c-.16.57-.354 1.156-.558 1.652-.103.248-.21.481-.32.681a2.41 2.41 0 0 1-.38.537 2.406 2.406 0 0 1-.537.38c-.2.11-.433.218-.68.32-.497.204-1.084.399-1.653.558-.568.16-1.136.288-1.596.354a3.987 3.987 0 0 1-.637.048 1.47 1.47 0 0 1-.304-.036.815.815 0 0 1-.391-.21.815.815 0 0 1-.21-.39 1.475 1.475 0 0 1-.036-.305 3.99 3.99 0 0 1 .048-.637c.066-.46.195-1.028.354-1.596.159-.57.354-1.156.558-1.652.102-.248.21-.481.32-.681.106-.193.232-.389.38-.537a2.42 2.42 0 0 1 .536-.38c.2-.11.434-.217.682-.32a15.287 15.287 0 0 1 1.652-.558 13.113 13.113 0 0 1 1.596-.354c.227-.032.448-.052.637-.048.094.003.2.011.304.036Z"
+        d="M3.6 10a6.4 6.4 0 1 1 12.8 0 6.4 6.4 0 0 1-12.8 0ZM10 2.4a7.6 7.6 0 1 0 0 15.2 7.6 7.6 0 0 0 0-15.2ZM8.218 9.483c.043-.104.085-.201.126-.29l2.463 2.463a7.357 7.357 0 0 1-.29.126 14.18 14.18 0 0 1-1.519.513c-.537.15-1.05.265-1.442.32a3.916 3.916 0 0 1-.196.025c.006-.059.014-.124.024-.196.056-.391.17-.906.32-1.443.15-.535.331-1.075.514-1.518Zm3.564 1.034a6.543 6.543 0 0 1-.127.29L9.194 8.344a7.35 7.35 0 0 1 .29-.126c.442-.182.983-.363 1.518-.513a11.8 11.8 0 0 1 1.443-.32c.072-.01.137-.019.195-.025a4.632 4.632 0 0 1-.024.196c-.056.391-.17.906-.32 1.443-.15.535-.33 1.075-.513 1.518Zm1.433-4.333a.815.815 0 0 1 .391.21c.137.137.188.3.21.39.024.105.033.21.035.305a3.88 3.88 0 0 1-.048.637 12.98 12.98 0 0 1-.353 1.596c-.16.57-.354 1.156-.559 1.652a6.88 6.88 0 0 1-.32.682 2.41 2.41 0 0 1-.38.536 2.407 2.407 0 0 1-.536.38c-.2.11-.433.218-.681.32-.496.204-1.083.399-1.652.559-.568.159-1.137.287-1.596.353a3.987 3.987 0 0 1-.638.048 1.475 1.475 0 0 1-.303-.036.815.815 0 0 1-.391-.21.815.815 0 0 1-.21-.39 1.473 1.473 0 0 1-.036-.304c-.004-.19.016-.41.048-.638.066-.46.194-1.028.353-1.596.16-.57.355-1.156.56-1.652.101-.248.209-.481.319-.681.105-.193.232-.389.38-.537a2.42 2.42 0 0 1 .536-.38c.2-.11.434-.217.682-.32a15.287 15.287 0 0 1 1.652-.558 13.111 13.111 0 0 1 1.596-.353 3.88 3.88 0 0 1 .637-.048c.094.002.2.01.304.035Z"
        clipRule="evenodd"
      />
    </svg>
@@ -0,0 +1,47 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgChileIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <g clipPath="url(#chile-icon_svg__a)">
+        <g clipPath="url(#chile-icon_svg__b)">
+          <path
+            fill="#1F429B"
+            d="M7.222 2.778h-5A2.222 2.222 0 0 0 0 5v5h7.222V2.778ZM4.632 7.94l-1.046-.76-1.045.76.399-1.229-1.046-.76h1.293l.4-1.229.399 1.23h1.292l-1.046.76.4 1.228Z"
+          />
+          <path
+            fill="#EEE"
+            d="M17.778 2.778H7.222V10H20V5a2.222 2.222 0 0 0-2.222-2.222Z"
+          />
+          <path
+            fill="#D42D27"
+            d="M0 10v5c0 1.227.995 2.222 2.222 2.222h15.556A2.222 2.222 0 0 0 20 15v-5H0Z"
+          />
+          <path
+            fill="#fff"
+            d="m3.986 5.951-.4-1.229-.4 1.23h-1.29l1.045.76-.4 1.228 1.046-.76 1.046.76-.4-1.229 1.046-.76H3.986Z"
+          />
+        </g>
+      </g>
+      <defs>
+        <clipPath id="chile-icon_svg__a">
+          <path fill="#fff" d="M0 0h20v20H0z" />
+        </clipPath>
+        <clipPath id="chile-icon_svg__b">
+          <path fill="#fff" d="M0 0h20v20H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+export default SvgChileIcon
@@ -0,0 +1,27 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgChinaIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill="#DE2910"
+        d="M20 15a2.222 2.222 0 0 1-2.222 2.222H2.222A2.222 2.222 0 0 1 0 15V5c0-1.227.995-2.222 2.222-2.222h15.556C19.005 2.778 20 3.773 20 5v10Z"
+      />
+      <path
+        fill="#FFDE02"
+        d="m6.187 4.987.409.198.327-.314-.062.45.4.214-.447.08-.08.447-.214-.4-.45.061.314-.327-.197-.409Zm2.591 1.634-.197.408.314.328-.45-.062-.214.4-.08-.447-.447-.08.4-.214-.062-.45.328.315.408-.198Zm-.531 2.1.149.428.453.01-.361.274.131.435-.372-.26-.373.26.131-.435-.362-.274.454-.01.15-.428Zm-2.06 1.822.409.198.327-.315-.062.45.4.215-.447.08-.08.446-.214-.4-.45.062.314-.327-.197-.41Zm-2.298-4.46.516 1.485 1.57.032-1.252.949.455 1.503-1.29-.897-1.289.897.455-1.503L1.803 7.6l1.57-.032.516-1.484Z"
+      />
+    </svg>
+  )
+})
+
+export default SvgChinaIcon
@@ -15,13 +15,13 @@ const SvgCircleIcon = createIcon(props => {
      <path
        fill="#2A4AF5"
        fillRule="evenodd"
-        d="M10 3.2a6.8 6.8 0 1 0 0 13.6 6.8 6.8 0 0 0 0-13.6ZM10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z"
+        d="M10 3.625a6.375 6.375 0 1 0 0 12.75 6.375 6.375 0 0 0 0-12.75ZM10 2.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15Z"
        clipRule="evenodd"
      />
      <path
        fill="#2A4AF5"
        fillRule="evenodd"
-        d="M10 3.2a6.8 6.8 0 1 0 0 13.6 6.8 6.8 0 0 0 0-13.6Z"
+        d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Z"
        clipRule="evenodd"
        opacity={0.4}
      />
@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgCodeDataIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="m2.076 9.576 4.5-4.5.848.848L3.348 10l4.076 4.076-.848.848-4.5-4.5L1.65 10l.425-.424Zm15.849 0-4.5-4.5-.849.848L16.652 10l-4.076 4.076.848.848 4.5-4.5.425-.424-.424-.424Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgCodeDataIcon
@@ -22,7 +22,7 @@ const SvgCollapseLsIcon = createIcon(props => {
      <path
        fill={props.color}
        fillRule="evenodd"
-        d="M3.1 10c0-1.619.063-2.852.247-3.8.182-.942.474-1.547.89-1.963.415-.416 1.021-.708 1.963-.89l.028-.006c-.024.172-.05.368-.074.593C6.026 5.086 5.9 6.984 5.9 10c0 3.015.126 4.914.254 6.066.025.225.05.421.074.593l-.028-.006c-.942-.182-1.548-.474-1.963-.89-.416-.416-.708-1.021-.89-1.963-.184-.948-.247-2.181-.247-3.8Zm4.367 6.818a15.732 15.732 0 0 1-.12-.884C7.223 14.836 7.1 12.984 7.1 10s.124-4.836.246-5.934c.043-.382.085-.671.12-.884A31.766 31.766 0 0 1 10 3.1c1.619 0 2.852.063 3.8.247.942.182 1.547.474 1.963.89.416.416.708 1.021.89 1.963.184.948.247 2.181.247 3.8 0 1.619-.063 2.852-.247 3.8-.182.942-.474 1.547-.89 1.963-.416.416-1.021.708-1.963.89-.948.184-2.181.247-3.8.247-.978 0-1.815-.023-2.533-.082ZM10 1.9c-1.631 0-2.96.062-4.028.269-1.074.208-1.937.573-2.584 1.22-.647.646-1.011 1.51-1.22 2.583C1.963 7.039 1.9 8.369 1.9 10c0 1.631.062 2.96.269 4.028.208 1.074.572 1.937 1.22 2.584.646.646 1.509 1.011 2.583 1.22 1.067.206 2.397.268 4.028.268 1.63 0 2.96-.062 4.028-.269 1.074-.208 1.937-.573 2.584-1.22.646-.646 1.011-1.51 1.22-2.583.206-1.067.268-2.397.268-4.028 0-1.631-.062-2.96-.269-4.028-.208-1.074-.573-1.937-1.22-2.584-.646-.646-1.51-1.011-2.583-1.22C12.961 1.963 11.631 1.9 10 1.9Zm5.348 8.1-.424.424-2.5 2.5-.848-.848 1.476-1.476H9V9.4h4.052l-1.476-1.476.848-.848 2.5 2.5.425.424Z"
+        d="M3.1 10c0-1.619.063-2.852.247-3.8.182-.942.474-1.547.89-1.963.415-.416 1.021-.708 1.963-.89l.028-.005c-.024.17-.05.367-.074.592C6.026 5.086 5.9 6.984 5.9 10c0 3.015.126 4.914.254 6.066.025.225.05.421.074.593l-.028-.006c-.942-.182-1.548-.474-1.963-.89-.416-.416-.708-1.021-.89-1.963-.184-.948-.247-2.181-.247-3.8Zm4.367 6.818a15.737 15.737 0 0 1-.12-.884C7.223 14.836 7.1 12.984 7.1 10s.124-4.836.246-5.934c.043-.382.085-.671.12-.884A31.767 31.767 0 0 1 10 3.1c1.619 0 2.852.063 3.8.247.942.182 1.547.474 1.963.89.416.416.708 1.021.89 1.963.184.948.247 2.181.247 3.8 0 1.619-.063 2.852-.247 3.8-.182.942-.474 1.547-.89 1.963-.416.416-1.021.708-1.963.89-.948.184-2.181.247-3.8.247-.978 0-1.815-.023-2.533-.082ZM10 1.9c-1.631 0-2.96.062-4.028.269-1.074.208-1.937.573-2.584 1.22-.647.646-1.011 1.51-1.22 2.583C1.963 7.039 1.9 8.369 1.9 10c0 1.631.062 2.96.269 4.028.208 1.074.572 1.937 1.22 2.584.646.647 1.509 1.011 2.583 1.22 1.067.206 2.397.268 4.028.268 1.63 0 2.96-.062 4.028-.269 1.074-.208 1.937-.572 2.584-1.22.646-.646 1.011-1.51 1.22-2.583.206-1.067.268-2.397.268-4.028 0-1.631-.062-2.96-.269-4.028-.208-1.074-.573-1.937-1.22-2.584-.646-.646-1.51-1.011-2.583-1.22C12.961 1.963 11.631 1.9 10 1.9Zm1.576 11.024-2.5-2.5L8.65 10l.425-.424 2.5-2.5.848.848L10.948 9.4H15v1.2h-4.052l1.476 1.476-.848.848Z"
        clipRule="evenodd"
      />
    </svg>
@@ -0,0 +1,28 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgColombiaIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill="#FBD116"
+        d="M17.778 2.778H2.222A2.222 2.222 0 0 0 0 5v5h20V5a2.222 2.222 0 0 0-2.222-2.222Z"
+      />
+      <path fill="#22408C" d="M0 10h20v3.889H0V10Z" />
+      <path
+        fill="#CE2028"
+        d="M0 15c0 1.227.995 2.222 2.222 2.222h15.556A2.222 2.222 0 0 0 20 15v-1.111H0V15Z"
+      />
+    </svg>
+  )
+})
+
+export default SvgColombiaIcon
@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgConnectIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="M15.374 4.626a3.6 3.6 0 0 0-5.091 0L8.867 6.04l.849.849 1.414-1.414a2.4 2.4 0 1 1 3.394 3.394l-1.414 1.414.848.848 1.415-1.414a3.6 3.6 0 0 0 0-5.091Zm-9.9 6.505 1.414-1.414-.848-.848-1.414 1.414a3.6 3.6 0 0 0 5.09 5.091l1.415-1.414-.848-.849-1.415 1.414a2.4 2.4 0 1 1-3.394-3.394Zm2.829 1.415 4.242-4.243-.848-.849-4.243 4.243.849.849Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgConnectIcon
@@ -12,7 +12,7 @@ const SvgCorrectIcon = createIcon(props => {
      focusable={false}
      aria-hidden={true}
    >
-      <circle cx={10} cy={10} r={7.5} stroke="#23ADA0" strokeWidth={1.2} />
+      <circle cx={10} cy={10} r={7} stroke="#23ADA0" strokeWidth={1.2} />
      <path stroke="#23ADA0" strokeWidth={1.2} d="m7.25 10.75 2 1.5 3.5-4.5" />
    </svg>
  )
@@ -15,7 +15,7 @@ const SvgCrownIcon = createIcon(props => {
      <path
        fill={props.color}
        fillRule="evenodd"
-        d="M10.425 3.576 10 3.152l-.424.424L6.642 6.51 3.784 4.972 2.9 4.496V10.5c0 2.228.228 3.88 1.395 4.891.578.501 1.333.797 2.258.972.923.175 2.061.237 3.447.237 1.387 0 2.525-.062 3.448-.237.925-.175 1.68-.47 2.258-.972C16.872 14.38 17.1 12.728 17.1 10.5V4.495l-.885.477L13.36 6.51l-2.934-2.934Zm-3.25 4.098L10 4.85l2.826 2.825.316.316.393-.212L15.9 6.505V10.5c0 .986-.051 1.75-.167 2.35a4.905 4.905 0 0 0-.56-.37c-.985-.564-2.593-1.08-5.173-1.08s-4.188.516-5.173 1.08a4.9 4.9 0 0 0-.56.37c-.116-.6-.167-1.364-.167-2.35V6.505l2.366 1.273.393.212.315-.316ZM4.71 14.057c.107.165.23.306.37.427.36.311.886.547 1.696.7.811.154 1.86.216 3.224.216s2.414-.063 3.225-.216c.81-.153 1.336-.389 1.695-.7a2.01 2.01 0 0 0 .37-.426 3.15 3.15 0 0 0-.713-.537c-.765-.437-2.157-.921-4.577-.921s-3.812.484-4.577.921a3.152 3.152 0 0 0-.713.536Z"
+        d="M10.425 3.576 10 3.15l-.424.425L6.642 6.51 3.784 4.972 2.9 4.496V10.5c0 2.228.228 3.88 1.395 4.89.578.502 1.333.798 2.258.973.923.175 2.061.237 3.447.237 1.387 0 2.525-.062 3.448-.237.925-.175 1.68-.47 2.258-.972C16.872 14.38 17.1 12.728 17.1 10.5V4.495l-.885.477L13.36 6.51l-2.934-2.934Zm-3.25 4.098L10 4.85l2.826 2.825.316.316.393-.212L15.9 6.505V10.5c0 .985-.051 1.75-.167 2.35a4.905 4.905 0 0 0-.56-.37c-.985-.564-2.593-1.08-5.173-1.08s-4.188.516-5.173 1.08a4.9 4.9 0 0 0-.56.37c-.116-.6-.167-1.364-.167-2.35V6.505l2.366 1.273.393.212.315-.316ZM4.71 14.057c.107.165.23.306.37.427.36.311.886.547 1.696.7.811.153 1.86.216 3.224.216s2.414-.063 3.225-.216c.81-.153 1.336-.389 1.695-.7.14-.121.263-.262.37-.426a3.147 3.147 0 0 0-.713-.537c-.765-.437-2.157-.921-4.577-.921s-3.812.484-4.577.921a3.146 3.146 0 0 0-.713.536Z"
        clipRule="evenodd"
      />
    </svg>
@@ -0,0 +1,30 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgCurrencyIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <g clipPath="url(#currency-icon_svg__a)">
+        <path
+          fill={props.color}
+          d="m13.21 8.007-.556 1.207H4.782l.434-1.207h7.993Zm-1.039 2.415-.555 1.207H4.782l.434-1.207h6.955Zm2.463-5.675-.58 1.256a5.02 5.02 0 0 0-.814-.604 3.962 3.962 0 0 0-.9-.392 3.483 3.483 0 0 0-.99-.14c-.684 0-1.3.19-1.847.568-.548.379-.98.936-1.298 1.673-.318.736-.477 1.64-.477 2.71s.159 1.974.477 2.71c.318.737.75 1.295 1.298 1.673a3.173 3.173 0 0 0 1.847.567c.354 0 .688-.046 1.002-.138a3.88 3.88 0 0 0 .888-.38c.277-.162.533-.343.766-.544l.604 1.256a4.25 4.25 0 0 1-1.485.905 5.272 5.272 0 0 1-1.775.302c-.99 0-1.867-.258-2.632-.773-.76-.515-1.358-1.247-1.793-2.197-.43-.95-.646-2.077-.646-3.38 0-1.305.215-2.432.646-3.382.435-.95 1.032-1.682 1.793-2.197.765-.515 1.642-.773 2.632-.773.64 0 1.238.111 1.793.332.56.222 1.056.538 1.491.948Z"
+        />
+      </g>
+      <defs>
+        <clipPath id="currency-icon_svg__a">
+          <path fill="#fff" d="M0 0h20v20H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+export default SvgCurrencyIcon
@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgDappsIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="M7.499 2.9A2.6 2.6 0 0 0 4.9 5.5v1h1.2v-1a1.4 1.4 0 0 1 1.399-1.4H10.5c1.37 0 2.716.457 3.713 1.399C15.202 6.433 15.9 7.89 15.9 10c0 2.376-.708 3.819-1.674 4.677-.979.87-2.316 1.223-3.726 1.223H7.499A1.4 1.4 0 0 1 6.1 14.5v-1H4.9v1a2.6 2.6 0 0 0 2.599 2.6H10.5c1.59 0 3.253-.397 4.524-1.527C16.308 14.431 17.1 12.623 17.1 10c0-2.391-.802-4.182-2.063-5.374C13.784 3.443 12.129 2.9 10.5 2.9H7.499ZM3.5 10.6h7V9.4h-7v1.2Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgDappsIcon
@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgDatabasesIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="M3.983 5.5c0-.118.06-.298.315-.53.254-.23.657-.467 1.204-.678 1.092-.42 2.64-.692 4.381-.692 1.74 0 3.29.272 4.381.692.548.211.95.447 1.205.679.254.231.314.411.314.529 0 .118-.06.298-.314.53-.255.23-.657.467-1.205.678-1.092.42-2.64.692-4.38.692-1.741 0-3.29-.272-4.382-.692-.547-.21-.95-.447-1.204-.679-.255-.231-.315-.411-.315-.529Zm-1.2 0c0-.572.304-1.05.707-1.417.403-.367.953-.669 1.582-.91 1.26-.486 2.962-.773 4.811-.773 1.85 0 3.55.287 4.812.772.628.242 1.178.544 1.581.911s.707.845.707 1.417v9c0 .572-.304 1.05-.707 1.417-.403.367-.953.67-1.581.91-1.261.486-2.963.773-4.812.773-1.85 0-3.55-.287-4.811-.772-.629-.242-1.179-.544-1.582-.911s-.707-.845-.707-1.417v-9Zm1.2 4.79v1.21c0 .118.06.298.315.53.254.23.657.467 1.204.678 1.092.42 2.64.692 4.381.692 1.74 0 3.29-.272 4.381-.692.548-.21.95-.447 1.205-.679.254-.231.314-.411.314-.529v-1.21a6.026 6.026 0 0 1-1.088.538c-1.261.485-2.963.772-4.812.772-1.85 0-3.55-.287-4.811-.772a6.068 6.068 0 0 1-1.089-.537Zm11.8-1.79c0 .118-.06.298-.314.53-.255.23-.657.467-1.205.678-1.092.42-2.64.692-4.38.692-1.741 0-3.29-.272-4.382-.692-.547-.21-.95-.447-1.204-.679-.255-.231-.315-.411-.315-.529V7.29c.32.205.688.384 1.089.538 1.26.485 2.962.772 4.811.772 1.85 0 3.55-.287 4.812-.772.4-.154.77-.333 1.088-.537V8.5Zm0 4.79a6.026 6.026 0 0 1-1.088.538c-1.261.485-2.963.772-4.812.772-1.85 0-3.55-.287-4.811-.772a6.068 6.068 0 0 1-1.089-.537V14.5c0 .118.06.298.315.53.254.23.657.467 1.204.678 1.092.42 2.64.692 4.381.692 1.74 0 3.29-.272 4.381-.692.548-.21.95-.447 1.205-.679.254-.231.314-.411.314-.529v-1.21Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgDatabasesIcon
@@ -0,0 +1,23 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgDiscordIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        d="M16.248 3.84a14.66 14.66 0 0 0-3.714-1.168c-.16.29-.347.678-.476.988a13.635 13.635 0 0 0-4.115 0 10.61 10.61 0 0 0-.481-.988 14.612 14.612 0 0 0-3.717 1.17C1.395 7.393.758 10.857 1.076 14.271a14.847 14.847 0 0 0 4.555 2.333c.367-.504.694-1.04.975-1.606a9.592 9.592 0 0 1-1.536-.748c.13-.095.255-.195.377-.298 2.962 1.386 6.18 1.386 9.106 0 .123.103.25.203.377.298a9.558 9.558 0 0 1-1.54.75c.282.563.608 1.101.976 1.606a14.818 14.818 0 0 0 4.558-2.335c.373-3.958-.639-7.39-2.676-10.432ZM7.01 12.17c-.89 0-1.618-.83-1.618-1.84 0-1.012.713-1.843 1.618-1.843.905 0 1.634.83 1.618 1.842.002 1.011-.713 1.841-1.618 1.841Zm5.98 0c-.889 0-1.618-.83-1.618-1.84 0-1.012.713-1.843 1.618-1.843.905 0 1.634.83 1.618 1.842 0 1.011-.713 1.841-1.618 1.841Z"
+      />
+    </svg>
+  )
+})
+
+export default SvgDiscordIcon
@@ -0,0 +1,120 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgDominicanIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <g clipPath="url(#dominican-icon_svg__a)">
+        <g clipPath="url(#dominican-icon_svg__b)">
+          <path
+            fill="#002D62"
+            d="M20 15a2.222 2.222 0 0 1-2.222 2.222H2.222A2.222 2.222 0 0 1 0 15V5c0-1.227.995-2.222 2.222-2.222h15.556C19.005 2.778 20 3.773 20 5v10Z"
+          />
+          <path
+            fill="#DD2E44"
+            d="M17.778 2.778h-6.667v6.11h8.89V5a2.222 2.222 0 0 0-2.223-2.222Z"
+          />
+          <path
+            fill="#CE1225"
+            d="M2.222 17.222H8.89v-6.11H0V15c0 1.227.995 2.222 2.222 2.222Z"
+          />
+          <path
+            fill="#EEE"
+            d="M20 8.333h-8.333V2.778H8.333v5.555H0v3.334h8.333v5.555h3.334v-5.555H20V8.333Z"
+          />
+          <path
+            fill="#002D62"
+            d="M10.012 8.858H8.947l.186.18v.92h.88v-1.1Zm0 2.187c.142-.154.239-.148.64-.148.213 0 .238-.146.238-.429v-.51h-.878v1.087Z"
+          />
+          <path
+            fill="#CE1225"
+            d="M10.012 11.045c-.141-.154-.238-.148-.64-.148-.214 0-.239-.146-.239-.429v-.51h.88v1.087Zm0-2.187h1.064l-.186.18v.92h-.878v-1.1Z"
+          />
+          <path
+            fill="#fff"
+            d="M10.164 10.932V8.858H9.86v2.075c.052.018.107.06.152.112a.413.413 0 0 1 .152-.113Z"
+          />
+          <path fill="#fff" d="M9.133 9.802h1.756v.304H9.133v-.304Z" />
+          <path
+            fill="#002D62"
+            d="m10.012 9.753.577-.615v.186l.106-.09v1.029c0 .381-.6.344-.683.168-.083.176-.685.213-.685-.168V9.234l.107.09v-.186l.578.615Z"
+          />
+          <path
+            fill="#fff"
+            d="M10.012 10.413c-.277.148-.456.031-.456-.11v-.177c-.107 0-.228-.055-.228-.09v-.152c0 .045.18.087.228.087v-.533l.1.08v-.139l.152.156v.109l-.1-.085v.45c.104 0 .185.061.304.061s.2-.061.304-.061v-.45l-.1.085v-.109l.152-.156v.139l.1-.08v.533c.049 0 .228-.042.228-.087v.152c0 .035-.121.09-.228.09v.177c0 .141-.18.259-.456.11v-.155c.148.086.304.107.304.014v-.11c-.104 0-.185.061-.304.061-.12 0-.2-.062-.304-.062v.11c0 .094.156.073.304-.013v.155Z"
+          />
+          <path
+            fill="#CE1225"
+            d="M10.216 9.536v.109l.1-.085v.45c-.104 0-.185.061-.304.061s-.2-.062-.304-.062v-.45l.1.086v-.11l.204.219.204-.218Z"
+          />
+          <path
+            fill="#CE1225"
+            d="M9.328 10.037v.226c0 .381.601.344.684.168.082.176.684.213.684-.168v-.226c0 .033-.121.09-.228.09v.176c0 .14-.18.258-.456.11-.277.148-.456.031-.456-.11v-.177c-.107 0-.228-.055-.228-.09Z"
+          />
+          <path
+            fill="#002D62"
+            d="M10.243 8.49c.01-.028.021-.068.031-.104a2.177 2.177 0 0 0-.525 0c.01.036.021.076.032.104.006.021-.035.073-.183.064a2.315 2.315 0 0 0-.475.033c.028.041.038.05.035.082-.004.036-.09.07-.237.091-.149.02-.206.174-.257.395a1.01 1.01 0 0 0-.208-.056c.033-.143.148-.469.292-.502-.035-.078-.027-.116.107-.18.145-.067.39-.108.661-.118-.017-.066 0-.092.085-.128.073-.032.188-.056.412-.056.222 0 .338.024.41.056.086.036.103.062.086.128.27.01.516.051.66.119.134.062.143.101.108.18.143.032.259.358.291.5-.056.01-.15.033-.207.057-.051-.22-.109-.374-.258-.395-.148-.021-.233-.055-.237-.091-.004-.032.007-.04.034-.082a2.312 2.312 0 0 0-.474-.033c-.148.009-.189-.043-.183-.064Z"
+          />
+          <path
+            fill="#996B38"
+            d="m10.012 9.806.708-.606.015.018-.723.619v-.031Zm0-.068.598-.649.017.018-.615.666v-.035Zm0-.09.475-.654.019.014-.494.682v-.041Zm0 .158L9.305 9.2l-.015.018.722.619v-.031Z"
+          />
+          <path
+            fill="#996B38"
+            d="m10.012 9.738-.597-.649-.017.018.614.666v-.035Zm0-.09-.475-.654-.02.014.495.682v-.041Z"
+          />
+          <path
+            fill="#FFCE46"
+            d="m10.708 9.191.101-.053-.067.093c-.006.005-.039-.035-.034-.04Zm-.111-.108.095-.065-.056.1c-.006.005-.044-.03-.04-.035Zm-.123-.096.087-.076-.046.106c-.004.007-.045-.024-.041-.03Zm-1.158.204-.102-.053.068.093c.006.005.039-.035.034-.04Zm.11-.108-.094-.065.057.1c.005.005.043-.03.038-.035Zm.124-.096-.087-.076.045.106c.005.007.046-.024.042-.03Z"
+          />
+          <path
+            fill="#fff"
+            d="M9.84 9.651c.028-.022.106-.06.153-.036.035-.04.12-.076.166-.053l.097.302c-.027.02-.082.01-.116.03-.01.006-.036.021-.04.032-.017-.007-.055-.003-.082.006-.024.007-.042.033-.07.037L9.84 9.65Z"
+          />
+          <path
+            fill={props.color}
+            d="m9.949 9.971-.11-.32V9.65c.03-.024.109-.06.155-.036.032-.039.12-.077.166-.053l.099.303c-.015.012-.035.014-.057.017a.15.15 0 0 0-.06.016c-.013.007-.037.02-.04.03a.183.183 0 0 0-.082.007.096.096 0 0 0-.029.017c-.013.008-.026.017-.042.02Zm-.106-.32.107.317c.014-.003.026-.012.038-.02a.116.116 0 0 1 .03-.018c.025-.008.064-.013.082-.005.002-.01.026-.024.037-.03a.162.162 0 0 1 .065-.018.115.115 0 0 0 .053-.014l-.098-.3c-.042-.022-.126.01-.163.053-.045-.023-.121.012-.151.036Z"
+          />
+          <path
+            fill="#549334"
+            d="M10.948 11.267c.09-.001.21.024.249.037a.58.58 0 0 0-.159-.082c.083.013.104.027.16.04.038.012.044.016.046.071 0 .037 0 .086.023.008.021-.07.03-.08-.008-.103a.768.768 0 0 0-.145-.075.885.885 0 0 1 .245.096.41.41 0 0 0-.131-.127.917.917 0 0 1 .204.08.413.413 0 0 0-.136-.128c.095.02.195.052.25.082a.399.399 0 0 0-.192-.154.724.724 0 0 1 .25.071c-.062-.058-.126-.12-.188-.14a.833.833 0 0 1 .212.054.48.48 0 0 0-.25-.122c.066.001.15.007.22.022a.431.431 0 0 0-.205-.06.665.665 0 0 1 .36.022.885.885 0 0 0-.246-.095c.052-.003.128-.015.177-.008a.921.921 0 0 0-.241-.041 2.7 2.7 0 0 1 .274-.063 1.61 1.61 0 0 0-.346.018c.122-.104.211-.104.29-.117.08-.014.139-.031.057-.04-.054-.005-.097-.01-.134-.01.086-.026.195-.08.231-.1.036-.02.124-.083.03-.04-.096.043-.232.05-.355.064a.336.336 0 0 0-.127.035 3.41 3.41 0 0 1 .22-.117c.078-.037.06-.05.13.028.032.038.03 0-.013-.1-.034-.076-.064-.04-.139-.01a.99.99 0 0 0-.104.048c.043-.052.193-.225.217-.254.027-.03.067.005.118.037.049.034.032.002-.015-.052-.047-.053-.07-.062-.1-.035-.03.026-.18.12-.265.2.153-.145.331-.309.372-.355-.088.047-.167.1-.237.155.024-.035.069-.1.092-.127-.036.024-.085.05-.112.076.04-.073.084-.14.09-.152.01-.02.02-.024.034-.025l.078-.006c.044-.004.027-.013.008-.018-.124-.032-.119-.018-.146.008a.83.83 0 0 0-.076.09c.031-.097.124-.186.14-.214a.568.568 0 0 0-.183.14c.044-.072.182-.18.224-.224a.588.588 0 0 0-.157.09c.023-.04.045-.083.065-.126a.528.528 0 0 0-.173.185l.018-.066c.025-.048.091-.113.126-.15.035-.039.043-.05.141.013a.365.365 0 0 0-.05-.097c-.029-.042-.042-.024-.081.008-.022.017-.042.042-.08.076.042-.11.091-.226.117-.301a.815.815 0 0 0-.17.269c.004-.076.045-.232.038-.311a.48.48 0 0 0-.086.195c-.002-.083-.003-.187-.024-.247.007.052-.047.17-.06.253-.034-.079-.07-.155-.092-.208.002.041.014.136.031.249-.027-.087-.128-.177-.131-.245-.003.1.07.269.077.317.001.016.007.04.013.066-.035-.056-.117-.156-.139-.221 0 .04.016.113.024.158-.044-.04-.074-.017-.147.122.023-.007.051-.038.072-.052.02-.014.04-.029.062.007.028.045.103.15.143.283-.011-.038-.08-.128-.105-.168l.026.118a.92.92 0 0 0-.093-.192c-.002.045.031.172.036.225a1.767 1.767 0 0 0-.058-.121.934.934 0 0 1 .03.227 1.375 1.375 0 0 0-.08-.124.993.993 0 0 1 .036.215.528.528 0 0 0-.025-.045c-.034-.056-.057.045-.078.096-.02.052-.01.045.014.01.036-.056.032-.049.053.011.013.036.05.12.081.232-.03-.049-.072-.114-.094-.162-.023-.049-.024-.046 0 .05.016.063.055.18.039.304a3.415 3.415 0 0 0-.083-.258c.005.054.011.156.011.2a.222.222 0 0 0-.046-.062c.023.073.028.2.028.278a.526.526 0 0 0-.046-.127 1.41 1.41 0 0 0 .028.253.575.575 0 0 0-.05-.132.631.631 0 0 1-.003.24.453.453 0 0 0-.027-.105c-.005.032-.013.126-.036.167a.452.452 0 0 0 .009-.15.857.857 0 0 1-.066.176.785.785 0 0 0 .023-.147c-.008.036-.032.066-.045.097a.584.584 0 0 0 .006-.114.68.68 0 0 1-.114.217.56.56 0 0 0 .034-.19c-.044.079-.048.112-.119.206a.275.275 0 0 0 .023-.18.807.807 0 0 1-.065.14.523.523 0 0 1 .016-.186c-.03.02-.072.08-.072.124a.257.257 0 0 0-.055-.113c.023.154.014.288-.078.35-.207.136-.382.436-.635.548.018.01.06.045.08.07.242-.107.405-.348.592-.482.089-.048.293.06.518 0 .086-.021.255.029.33.06-.035-.049-.103-.088-.225-.111Z"
+          />
+          <path
+            fill="#549334"
+            d="M9.208 11.11a.971.971 0 0 1 .246.01c-.06-.023-.021-.166-.094-.22.074.035.106.023.145.03l.014.003a.136.136 0 0 1 .018-.082c.01.038.051.046.087.074l.019.016c.001-.045.066-.104.074-.134.013.04.05.069.063.125.035.146-.079.176-.037.28.206.136.39.406.643.519a.411.411 0 0 0-.08.069c-.335-.148-.551-.578-.858-.599l-.023.01c-.076.036-.147.064-.215.05a.298.298 0 0 0-.183.033c.085-.132.129-.17.181-.183a.289.289 0 0 1-.193.003c-.038.092-.127.118-.206.128-.08.011-.138.043-.163.087a.295.295 0 0 1 .006-.13.428.428 0 0 0-.127.003c.048-.019.09-.152.206-.169a.211.211 0 0 1-.057-.054c.028.016.052-.002.102-.015a.366.366 0 0 1 .102-.011.201.201 0 0 1-.076-.114c-.036.108-.154.137-.223.142-.084.006-.123.033-.139.056 0-.051.017-.093.036-.12a.4.4 0 0 0-.084.01.22.22 0 0 1 .095-.152c-.05-.012-.12-.101-.124-.164.04.046.204-.002.284.087a.226.226 0 0 1-.082-.16c.018.025.058.026.097.048-.054-.195-.19-.152-.27-.214-.102-.08-.06-.218-.142-.284a.37.37 0 0 1 .09.009.534.534 0 0 1-.016-.176c.02.062.089.054.132.115a.092.092 0 0 0 .008-.051c.031.037.06.07.079.104-.006-.066.02-.104.04-.122a.29.29 0 0 0 .032.132c.026.052.036.11.017.206-.018.09.018.159.065.225a.701.701 0 0 0-.013-.19.352.352 0 0 1-.006-.165.28.28 0 0 0 .075.102c.009.009.015.02.02.034l.026-.064c.01-.03-.133-.083-.125-.245-.097-.054-.184-.126-.208-.255.01.01.03.019.053.027-.053-.079-.067-.18-.048-.23.013.042.055.053.1.085.012-.086-.08-.148-.077-.231.003-.131.072-.133.096-.215.019.03.033.058.043.088.015-.055.082-.097.083-.138.034.05.06.106.041.163a.156.156 0 0 1 .126.016c-.085.016-.08.117-.135.144-.056.026-.16.098-.134.208a.39.39 0 0 1 .085.203.195.195 0 0 1 .043.06.402.402 0 0 0 .036-.083c-.005-.043-.062-.091-.078-.133-.02-.057.03-.142.01-.218a.23.23 0 0 1 .106.07c.026-.06.075-.099.076-.2a.67.67 0 0 1 .049.126.304.304 0 0 1 .15-.108c-.04.069-.026.137-.028.194-.001.057-.003.152-.086.216-.083.064-.104.081-.122.243.035-.076.119-.135.122-.176.017.073.031.128.029.178.028-.033.078-.052.137-.054-.042.048-.073.236-.184.258-.11.023-.154.134-.184.18-.038.057-.047.101-.01.177a.386.386 0 0 1 .03-.165c.037-.073.116-.104.121-.155.01.054.016.098.014.134.055-.113.173-.08.205-.113a.295.295 0 0 0-.057.132.213.213 0 0 1-.122.148c-.051.024-.096.028-.122.08-.007.032.02.058.02.105a.11.11 0 0 1 .015-.044c.032-.046.053-.08.053-.106.069.07.084.137.062.21-.022.073-.04.131.006.19a.269.269 0 0 0 .087.048c.036-.037-.007-.082-.048-.125-.042-.043-.038-.144-.004-.186.035-.043.065-.087.063-.124a.265.265 0 0 1 .061.085.16.16 0 0 1 .06-.08c.005.061.044.089.044.155a.151.151 0 0 1 .087-.087c-.009.033.022.084.026.116a.169.169 0 0 1-.012.084.16.16 0 0 1-.085.092c-.016.007-.04.015-.066.027.06-.008.166.011.19.055-.043-.016-.138.019-.185.038Z"
+          />
+          <path
+            fill="#CE1225"
+            d="M10.067 11.493c-.011-.01-.028-.015-.055-.015s-.043.005-.054.015c-.109-.037-.18-.021-.18.013v.104c0 .018.04.04.188.005a.079.079 0 0 0 .046.012.077.077 0 0 0 .048-.014v.001c.148.036.188.013.188-.005v-.104c0-.034-.07-.051-.181-.012Z"
+          />
+          <path
+            fill="#CE1225"
+            d="M10.237 11.488a.444.444 0 0 1 .132.03 1.187 1.187 0 0 0-.016.126.317.317 0 0 0-.115-.04v-.116Zm-.447 0a.447.447 0 0 0-.132.03c.005.024.016.107.016.126a.315.315 0 0 1 .115-.04v-.116Z"
+          />
+          <path
+            fill="#CE1225"
+            d="M10.012 11.38c.316 0 .569.02.77.063-.024.019-.046.044-.062.056-.018.015-.011.059.03.096a.246.246 0 0 0 .244.023l.057-.025c-.028.024-.051.055-.039.085.06.133.289-.042.425.125a2.5 2.5 0 0 1 .167-.18c-.078-.094-.186-.079-.276-.071.033-.054.036-.095-.035-.146-.03-.022-.13-.018-.222.024.017-.044.014-.115-.13-.178-.217-.098-.586-.118-.928-.118-.342 0-.712.02-.93.118-.143.063-.146.134-.128.178-.094-.042-.193-.046-.223-.024-.071.05-.067.092-.034.146-.09-.008-.199-.023-.277.071.038.037.13.134.166.18.137-.167.366.008.425-.125.013-.03-.01-.061-.038-.085l.057.025c.1.044.203.013.244-.023.041-.037.048-.08.03-.096-.017-.012-.037-.037-.063-.056a3.81 3.81 0 0 1 .77-.062Z"
+          />
+        </g>
+      </g>
+      <defs>
+        <clipPath id="dominican-icon_svg__a">
+          <path fill="#fff" d="M0 0h20v20H0z" />
+        </clipPath>
+        <clipPath id="dominican-icon_svg__b">
+          <path fill="#fff" d="M0 0h20v20H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+})
+
+export default SvgDominicanIcon
@@ -0,0 +1,27 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgEnglandIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill="#EEE"
+        d="M17.778 2.778H2.222A2.222 2.222 0 0 0 0 5v10c0 1.227.995 2.222 2.222 2.222h15.556A2.222 2.222 0 0 0 20 15V5a2.222 2.222 0 0 0-2.222-2.222Z"
+      />
+      <path
+        fill="#CE1124"
+        d="M11.667 2.778H8.333v5.555H0v3.334h8.333v5.555h3.334v-5.555H20V8.333h-8.333V2.778Z"
+      />
+    </svg>
+  )
+})
+
+export default SvgEnglandIcon
@@ -0,0 +1,25 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgEpicsIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill={props.color}
+        fillRule="evenodd"
+        d="M5.37 2.664c-.186-.047-.453-.064-.87-.064s-.685.016-.873.062c-.162.04-.222.09-.265.15-.062.086-.137.26-.19.634-.05.368-.072.867-.072 1.554s.021 1.186.073 1.554c.052.374.127.548.189.633.043.06.103.111.265.15.188.047.456.063.873.063s.684-.018.87-.064c.162-.04.223-.092.268-.155.062-.087.138-.262.19-.635.051-.367.072-.864.072-1.546s-.02-1.179-.072-1.546c-.052-.373-.128-.549-.19-.635-.045-.063-.106-.115-.268-.155Zm1.646.624c.044.315.068.684.078 1.112h.694c.439 0 .827 0 1.14.042.338.045.677.15.953.427.277.276.381.615.427.954.042.312.042.7.042 1.139V9.4h2.053c.007-.879.033-1.598.088-2.185.066-.705.18-1.273.392-1.709.23-.47.569-.774 1.02-.938.408-.147.878-.168 1.347-.168.472 0 .943.023 1.351.174.452.167.79.475 1.018.946.211.437.325 1.005.39 1.709.068.713.091 1.621.091 2.771s-.023 2.058-.09 2.771c-.067.704-.18 1.272-.392 1.71-.228.47-.565.778-1.017.945-.408.151-.88.174-1.35.174-.47 0-.94-.02-1.347-.168-.452-.164-.792-.468-1.021-.938-.212-.436-.326-1.004-.392-1.71a26.543 26.543 0 0 1-.088-2.184H10.35v2.438c0 .439 0 .827-.042 1.14-.046.338-.15.677-.427.953-.276.277-.615.381-.954.427-.312.042-.7.042-1.14.042h-.692c-.01.428-.034.797-.078 1.112-.062.448-.174.85-.403 1.17-.247.343-.582.526-.951.618-.345.086-.745.1-1.162.1-.415 0-.814-.013-1.158-.096-.369-.09-.705-.27-.953-.614-.23-.32-.342-.722-.405-1.17-.063-.454-.084-1.022-.084-1.72s.021-1.266.084-1.72c.063-.448.175-.85.405-1.17.248-.343.584-.523.953-.614.344-.083.743-.096 1.158-.096.417 0 .817.014 1.162.1.37.092.704.275.95.619.23.32.342.722.404 1.17.044.314.068.683.078 1.111h.656c.488 0 .794-.001 1.017-.031.206-.028.25-.07.266-.086.016-.016.058-.06.086-.266.03-.223.03-.529.03-1.017V7c0-.488 0-.794-.03-1.017-.028-.206-.07-.25-.086-.266-.017-.016-.06-.058-.266-.086-.223-.03-.529-.031-1.017-.031h-.656c-.01.428-.034.797-.078 1.112-.062.447-.174.85-.403 1.17-.247.343-.582.525-.951.618-.345.086-.745.1-1.162.1-.415 0-.814-.013-1.158-.097-.369-.09-.705-.27-.953-.613-.23-.32-.342-.722-.405-1.17C1.921 6.266 1.9 5.698 1.9 5s.021-1.266.084-1.72c.063-.448.175-.851.405-1.17.248-.344.584-.523.953-.614.344-.084.743-.096 1.158-.096.417 0 .817.014 1.162.1.37.092.704.275.95.619.23.32.342.721.404 1.169ZM15.25 5.6c.466 0 .746.03.935.1.146.054.254.137.354.343.116.24.214.635.276 1.298.062.655.085 1.517.085 2.659s-.023 2.004-.085 2.659c-.062.663-.16 1.058-.276 1.298-.1.207-.208.29-.354.344-.19.07-.468.099-.935.099-.468 0-.748-.027-.938-.096-.146-.053-.252-.134-.35-.336-.116-.237-.214-.63-.276-1.296-.062-.655-.086-1.522-.086-2.672 0-1.15.024-2.016.086-2.672.062-.665.16-1.059.276-1.296.098-.202.204-.283.35-.336.19-.068.47-.096.938-.096Zm-10.75 7c.417 0 .684.017.87.064.162.04.223.092.268.155.062.087.138.262.19.635.051.367.072.864.072 1.546s-.02 1.179-.072 1.546c-.052.373-.128.548-.19.635-.045.063-.106.115-.268.155-.186.047-.453.064-.87.064s-.685-.016-.873-.062c-.162-.04-.222-.09-.265-.15-.062-.086-.137-.26-.19-.634-.05-.368-.072-.867-.072-1.554s.021-1.186.073-1.554c.052-.374.127-.548.189-.633.043-.06.103-.111.265-.15.188-.047.456-.063.873-.063Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+})
+
+export default SvgEpicsIcon
@@ -0,0 +1,27 @@
+import { createIcon } from '../lib/create-icon'
+
+const SvgEuropeanUnionIcon = createIcon(props => {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.width}
+      height={props.height}
+      fill="none"
+      viewBox="0 0 20 20"
+      focusable={false}
+      aria-hidden={true}
+    >
+      <path
+        fill="#039"
+        d="M17.778 2.778H2.222A2.222 2.222 0 0 0 0 5v10c0 1.227.995 2.222 2.222 2.222h15.556A2.222 2.222 0 0 0 20 15V5a2.222 2.222 0 0 0-2.222-2.222Z"
+      />
+      <path
+        fill="#FC0"
+        d="m10.3 5.392.471-.343h-.583l-.18-.555-.18.555h-.583l.472.343-.181.554.472-.343.471.343-.18-.554Zm0 9.63.471-.344h-.583l-.18-.554-.18.554h-.583l.472.343-.181.554.472-.342.471.342-.18-.554Zm-4.815-4.816.472-.343h-.584l-.18-.554-.18.554H4.43l.472.343-.18.555.471-.343.472.343-.18-.555Zm.615-2.38.472-.343h-.584l-.18-.555-.18.555h-.583l.472.343-.18.554.471-.343.472.343-.18-.555Zm0 4.788.472-.343h-.584l-.18-.554-.18.554h-.583l.472.343-.18.554.471-.342.472.342-.18-.554Zm1.792-6.577.472-.343H7.78l-.18-.555-.18.555h-.583l.472.343-.18.554.471-.343.472.343-.18-.554Zm0 8.37.472-.343H7.78l-.18-.554-.18.554h-.583l.472.343-.18.555.471-.343.472.343-.18-.555Zm6.623-4.2-.472-.344h.584l.18-.554.18.554h.583l-.472.343.18.555-.471-.343-.472.343.18-.555ZM13.9 7.824l-.472-.342h.584l.18-.555.18.555h.583l-.472.343.18.554-.471-.343-.472.343.18-.555Zm0 4.789-.472-.343h.584l.18-.554.18.554h.583l-.472.343.18.554-.471-.342-.472.342.18-.554Zm-1.792-6.577-.472-.343h.583l.18-.555.18.555h.584l-.472.343.18.554-.472-.343-.471.343.18-.554Zm0 8.37-.472-.343h.583l.18-.554.18.554h.584l-.472.343.18.555-.472-.343-.471.343.18-.555Z"
+      />
+    </svg>
+  )
+})
+
+export default SvgEuropeanUnionIcon
@@ -22,7 +22,7 @@ const SvgExpandLsIcon = createIcon(props => {
      <path
        fill={props.color}
        fillRule="evenodd"
-        d="M3.1 10c0-1.619.063-2.852.247-3.8.182-.942.474-1.547.89-1.963.415-.416 1.021-.708 1.963-.89l.028-.005c-.024.17-.05.367-.074.592C6.026 5.086 5.9 6.984 5.9 10c0 3.015.126 4.914.254 6.066.025.225.05.421.074.593l-.028-.006c-.942-.182-1.548-.474-1.963-.89-.416-.416-.708-1.021-.89-1.963-.184-.948-.247-2.181-.247-3.8Zm4.367 6.818a15.737 15.737 0 0 1-.12-.884C7.223 14.836 7.1 12.984 7.1 10s.124-4.836.246-5.934c.043-.382.085-.671.12-.884A31.767 31.767 0 0 1 10 3.1c1.619 0 2.852.063 3.8.247.942.182 1.547.474 1.963.89.416.416.708 1.021.89 1.963.184.948.247 2.181.247 3.8 0 1.619-.063 2.852-.247 3.8-.182.942-.474 1.547-.89 1.963-.416.416-1.021.708-1.963.89-.948.184-2.181.247-3.8.247-.978 0-1.815-.023-2.533-.082ZM10 1.9c-1.631 0-2.96.062-4.028.269-1.074.208-1.937.573-2.584 1.22-.647.646-1.011 1.51-1.22 2.583C1.963 7.039 1.9 8.369 1.9 10c0 1.631.062 2.96.269 4.028.208 1.074.572 1.937 1.22 2.584.646.647 1.509 1.011 2.583 1.22 1.067.206 2.397.268 4.028.268 1.63 0 2.96-.062 4.028-.269 1.074-.208 1.937-.572 2.584-1.22.646-.646 1.011-1.51 1.22-2.583.206-1.067.268-2.397.268-4.028 0-1.631-.062-2.96-.269-4.028-.208-1.074-.573-1.937-1.22-2.584-.646-.646-1.51-1.011-2.583-1.22C12.961 1.963 11.631 1.9 10 1.9Zm1.576 11.024-2.5-2.5L8.65 10l.425-.424 2.5-2.5.848.848L10.948 9.4H15v1.2h-4.052l1.476 1.476-.848.848Z"
+        d="M3.1 10c0-1.619.063-2.852.247-3.8.182-.942.474-1.547.89-1.963.415-.416 1.021-.708 1.963-.89l.028-.006c-.024.172-.05.368-.074.593C6.026 5.086 5.9 6.984 5.9 10c0 3.015.126 4.914.254 6.066.025.225.05.421.074.593l-.028-.006c-.942-.182-1.548-.474-1.963-.89-.416-.416-.708-1.021-.89-1.963-.184-.948-.247-2.181-.247-3.8Zm4.367 6.818a15.732 15.732 0 0 1-.12-.884C7.223 14.836 7.1 12.984 7.1 10s.124-4.836.246-5.934c.043-.382.085-.671.12-.884A31.766 31.766 0 0 1 10 3.1c1.619 0 2.852.063 3.8.247.942.182 1.547.474 1.963.89.416.416.708 1.021.89 1.963.184.948.247 2.181.247 3.8 0 1.619-.063 2.852-.247 3.8-.182.942-.474 1.547-.89 1.963-.416.416-1.021.708-1.963.89-.948.184-2.181.247-3.8.247-.978 0-1.815-.023-2.533-.082ZM10 1.9c-1.631 0-2.96.062-4.028.269-1.074.208-1.937.573-2.584 1.22-.647.646-1.011 1.51-1.22 2.583C1.963 7.039 1.9 8.369 1.9 10c0 1.631.062 2.96.269 4.028.208 1.074.572 1.937 1.22 2.584.646.646 1.509 1.011 2.583 1.22 1.067.206 2.397.268 4.028.268 1.63 0 2.96-.062 4.028-.269 1.074-.208 1.937-.573 2.584-1.22.646-.646 1.011-1.51 1.22-2.583.206-1.067.268-2.397.268-4.028 0-1.631-.062-2.96-.269-4.028-.208-1.074-.573-1.937-1.22-2.584-.646-.646-1.51-1.011-2.583-1.22C12.961 1.963 11.631 1.9 10 1.9Zm5.348 8.1-.424.424-2.5 2.5-.848-.848 1.476-1.476H9V9.4h4.052l-1.476-1.476.848-.848 2.5 2.5.425.424Z"
        clipRule="evenodd"
      />
    </svg>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	3a5accf878	Release (#578 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-07-24 16:48:25 +02:00
Felicio Mununga	6523d5c548	update peers (#576 )	2024-07-24 15:51:30 +02:00
Felicio Mununga	a7ecd25465	update CI workflow (#577 )	2024-07-24 14:51:36 +02:00
Felicio Mununga	10115f4d80	update release workflow (#575 ) * chore: add github.vscode-github-actions extension to recommended extensions * chore: run job on single machine * chore: Add reusable workflow for CI * Create olive-laws-exercise.md * chore: Add dependency on ci workflow for release workflow	2024-07-24 14:39:54 +02:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	78ebe7df4a	Release (#574 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-06-17 14:22:05 +02:00
pavel	a023653cc6	sync icons (#573 )	2024-06-17 13:56:58 +02:00
pavel	b636dfcc84	update vitest extension recommendation (#572 )	2024-06-17 13:19:33 +02:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	25a03f7570	Release (#570 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-06-04 17:50:10 +02:00
Jakub Kotula	8540f8697f	add disabled state to Tabs (#569 ) * u * Create lemon-dogs-lie.md * f	2024-06-04 16:59:47 +02:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	81059fc706	Release (#568 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-05-24 21:56:30 +02:00
Jakub Kotula	e50e48fd14	Sync icons (#567 ) * a * Create perfect-queens-kneel.md	2024-05-24 20:36:05 +02:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	f399c230f3	Release (#566 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-05-23 14:45:27 +02:00
Jakub Kotula	1a17092555	fix the color of the icon in IconButton (#565 ) * f * Create slow-doors-look.md	2024-05-23 10:38:26 +02:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	4755eb8066	Release (#564 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-05-20 19:23:12 +01:00
marcelines	cd85b36da0	Update icons (#563 ) * f:update * f: changeset	2024-05-20 15:46:22 +01:00
Jakub Kotula	626080165e	Sync icons (#561 ) * s * Create hip-kiwis-train.md	2024-05-15 15:11:46 +02:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	808c087792	Release (#560 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-05-09 18:29:41 +02:00
Felicio Mununga	ef5c31fff7	trim whitespace of encoded emoji (#559 ) * trim whitespace of encoded emoji * Create eighty-crabs-accept.md	2024-05-09 18:25:56 +02:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	88030482df	Release (#558 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-05-09 16:47:41 +02:00
Felicio Mununga	4106248634	optimize handling of token owner waku messages (#557 ) * optimize handling of token owner waku messages * Create silent-comics-rule.md	2024-05-09 16:10:40 +02:00
Felicio Mununga	a7008b5108	handle segmented waku messages (#556 ) * handle segmented waku messages * Create red-zoos-watch.md	2024-05-09 16:08:35 +02:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	4de3e43dc8	Release (#555 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-04-29 18:39:11 +02:00
Felicio Mununga	8249e9f9e9	fix community schema in encode-url-data.ts (#554 ) * fix community schema in encode-url-data.ts * Create fifty-items-speak.md	2024-04-29 18:32:57 +02:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	111e048e7b	Release (#553 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-04-29 08:14:59 +02:00
Felicio Mununga	7093144ceb	add size variants to Step (#552 ) * add size variants to Size * u * Create soft-gorillas-tap.md * u	2024-04-29 08:02:32 +02:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	8afb049840	Release (#551 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-04-22 18:39:13 +02:00
Felicio Mununga	18504de67c	fix user schema in `encode-url-data.ts` (#550 ) * Update encode-url-data.ts * f * Create stale-yaks-appear.md	2024-04-22 17:19:08 +02:00
Felicio Mununga	13f7ed5415	fix channel schema `encode-url-data.ts` (#549 ) * Update encode-url-data.ts * Create slimy-keys-melt.md * f * f	2024-04-22 17:02:39 +02:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	2d9dbdd49e	Release (#548 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-04-08 16:32:40 +09:00
Felicio Mununga	f9af5e0216	validate encoded data (#544 ) * validate encoded data * u * c	2024-04-08 16:21:17 +09:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	98741fb49c	Release (#547 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-03-26 15:25:22 +09:00
Felicio Mununga	e863523510	update `RequestClient` options (#546 ) * update `RequestClient` options * c * u	2024-03-26 15:15:55 +09:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	4ff9d6ba5c	Release (#545 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-03-26 14:33:42 +09:00
Felicio Mununga	7da654649d	iterate entity metadata sequentially (#543 ) * iterate entity metadata sequentially * r * c	2024-03-26 14:28:54 +09:00
Felicio Mununga	195e3f9a5a	validate metadata for communities with owner token (#541 ) * u * u * u * a * a * u * a * u * a * f * u * c	2024-03-26 13:45:48 +09:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	4e3f3bb644	Release (#540 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-03-18 23:41:12 +09:00
Felicio Mununga	6b4e6b1566	stop fetching early (#539 ) * stop fetching early * Create yellow-pets-invent.md	2024-03-18 23:34:00 +09:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	550774e291	Release (#538 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-03-18 21:52:13 +09:00
Felicio Mununga	9a495fd902	handle updates for encrypted communities (#537 ) * a * t * t * f * c * c * r	2024-03-18 21:47:54 +09:00
Felicio Mununga	70de4ec769	add `publicKeyToETHAddress` fn (#536 )	2024-03-18 21:35:37 +09:00
Felicio Mununga	02abf3417b	update `protos` (#535 ) * update `protos` * c * f	2024-03-18 21:30:38 +09:00
Emil Ivanichkov	148a953a7d	fix(components): export `tooltip` (#528 )	2024-03-18 13:13:43 +01:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	c655c24007	Release (#534 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-03-15 11:11:20 +09:00
Felicio Mununga	22e727ee73	handle larger messages (#531 ) * p * u * f * u * c	2024-03-15 11:04:03 +09:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	3dba75d8aa	Release (#533 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-03-14 10:16:29 +00:00
marcelines	094369c63a	sync icons (#532 ) * feat: syncs icons * f: changeset	2024-03-14 10:09:30 +00:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	ddb07d31aa	Release (#530 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-03-14 18:26:57 +09:00
Felicio Mununga	9adaeb6fed	add store nodes from `shard.test` fleet (#529 ) * u * u * t * t * u * u * t * f * r * u * d * c	2024-03-14 18:13:17 +09:00
Emil Ivanichkov	3b1a686f99	build: add `prepack` script in `packages/(components\|colors/icons)` (#526 )	2024-02-23 15:13:29 +01:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	fa4c451c8a	Release (#525 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-01-24 11:18:17 +00:00
marcelines	b59b504d8b	feat: syncs new icons (#524 ) * feat: syncs new icons * feat: adds changeset	2024-01-24 11:04:39 +00:00
Felicio Mununga	74a94d42c1	Update README.md (#519 ) * Update README.md * Update README.md	2024-01-09 16:41:44 +01:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	cc0c5c67f9	Release (#518 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-01-08 10:57:02 +01:00
Felicio Mununga	f9b9220c8b	update toast options (#517 ) * f * u * u * a * u * u * u * u * Create old-donkeys-report.md	2023-12-15 17:00:36 +01:00
Felicio Mununga	f6b7ca3a7e	fix toast icon color (#516 ) * fix toast icon color * Create real-days-exist.md	2023-12-15 14:23:46 +01:00
Felicio Mununga	70cb660cd2	update avatar initials (#515 ) * update avatar initials * Create itchy-steaks-leave.md	2023-12-15 14:22:31 +01:00
Felicio Mununga	92ff3bd4dc	fix types export of multi entry point package (#514 ) * fix types export of multi entry point package * Create fifty-years-kiss.md	2023-12-15 14:19:04 +01:00
Felicio Mununga	edb4beefdd	config `@libp2p/bootstrap` (#513 ) * config `@libp2p/bootstrap` * Create late-hotels-hide.md * f	2023-12-15 14:17:25 +01:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	10f3aa030e	Release (#512 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-10 00:20:49 +01:00
Felicio Mununga	51df6dbb4c	use `@waku/sdk` (#507 ) * u `@bufbuild` * use `@waku/sdk` * Create eleven-experts-cough.md	2023-11-10 00:06:41 +01:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	23e727b97a	Release (#511 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-10 00:03:56 +01:00
Felicio Mununga	b5393212e9	add `@status-im/components` changeset (#510 )	2023-11-09 23:45:57 +01:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	88b2697170	Release (#509 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-08 10:46:58 +01:00
Felicio Mununga	cbc0e06d4f	fix copper color typo (#508 ) * fix copper color typo * ch	2023-11-08 10:41:17 +01:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	cb8340e734	Release (#506 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-06 19:38:03 +01:00
Jakub Kotula	80b6f7afb5	Export serialize public key (#505 )	2023-11-06 17:54:26 +01:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	0093a99312	Release (#504 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-11-06 16:39:59 +01:00
Felicio Mununga	3f75d6bcfc	sync icons (#503 ) * sync icons * ch * f	2023-11-06 15:51:59 +01:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	4f6aa69009	Release (#502 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-27 18:55:22 +02:00
Pavel	7afc447e69	Add tabs variants and remove blur (#501 ) * remove backdrop filter * add tabs variants * fix usage * Create cold-jars-return.md * f	2023-10-27 17:44:54 +02:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	8aa1347f7d	Release (#500 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-27 08:54:46 +01:00
Pavel	9d66ba076b	Add `<Button />` blur subvariants (#499 ) * upgrade storybook * add blur variants * Create breezy-mangos-fry.md	2023-10-27 08:33:22 +01:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	4b93ecb357	Release (#497 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-23 15:15:28 +02:00
Felicio Mununga	367145c9ff	update `tamagui` (#495 ) * update `tamagui` * a ch * f * f	2023-10-23 15:02:17 +02:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	d43bd76631	Release (#494 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-20 15:03:53 +02:00
Felicio Mununga	d796765ef3	sync colors (#493 ) * sync colors * f * a ch * f	2023-10-20 14:56:23 +02:00
Felicio Mununga	29b9734a56	fix ContextTag text selection (#492 ) * add default curors to ContextTag * Create wise-readers-accept.md * f * f	2023-10-20 14:40:44 +02:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	1323989f83	Release (#491 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-18 09:42:12 +02:00
Felicio Mununga	45be34b103	set TabsTrigger cursor (#490 ) * set TabsTrigger cursor * a ch	2023-10-18 09:24:47 +02:00
github-actions[bot]andgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>	75ef1c2d39	Release (#488 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-09-28 14:47:11 +01:00
marcelines	ed918fc4f9	sync colors with figma (#487 ) * fix: sync colors with figma * feat: add changeset	2023-09-28 14:34:11 +01:00